Merge pull request #15 from fga-eps-mds/christian/feat/US-006

feat: add github metrics and measures graphs

Author: chfleury

src/pages/products/[product]/repositories/[repository]/Repository.tsx

@@ -227,17 +227,36 @@ const Repository: NextPageWithLayout = () => {
             height={60}
             alignItems="center"
           >
-            <h2 style={{ color: '#113D4C', fontWeight: '500', fontSize: '25px' }}>Métricas</h2>
+            <h2 style={{ color: '#113D4C', fontWeight: '500', fontSize: '25px' }}>Histórico de medidas</h2>
           </Box>
 
-          <GraphicChart key="sonargraph" title="Sonar" type="line" value="metrics" metricsSource='sonarqube' />
+          <GraphicChart key="sonargraph-measure" title="Sonar" type="line" value="measures" collectionSource='sonarqube' />
+
+          <GraphicChart
+            key="ghGraph-measure"
+            title="Github"
+            type="line"
+            value="measures"
+            collectionSource='github'
+          />
+
+          <Box
+            display="flex"
+            flexDirection="row"
+            height={60}
+            alignItems="center"
+          >
+            <h2 style={{ color: '#113D4C', fontWeight: '500', fontSize: '25px' }}>Histórico de métricas</h2>
+          </Box>
+
+          <GraphicChart key="sonargraph" title="Sonar" type="line" value="metrics" collectionSource='sonarqube' />
 
           <GraphicChart
             key="ghGraph"
             title="Github"
             type="line"
             value="metrics"
-            metricsSource='github'
+            collectionSource='github'
           />
 
           <Box marginY="12px">

src/shared/components/GraphicChart/GraphicChart.tsx

@@ -22,7 +22,7 @@ interface Prop {
   autoGrid?: boolean;
   addHistoricalTSQMI?: boolean;
   addCurrentGoal?: boolean;
-  metricsSource?: 'github' | 'sonarqube'
+  collectionSource?: 'github' | 'sonarqube'
 }
 
 type formatFunctionType = {
@@ -44,14 +44,14 @@ const GraphicChart = ({
   autoGrid = false,
   addHistoricalTSQMI = false,
   addCurrentGoal = false,
-  metricsSource,
+  collectionSource,
 }: Prop) => {
   const {
     data: historical,
     error,
     isLoading,
     isEmpty
-  } = useRequestValues({ type: valueType, value, addHistoricalTSQMI, addCurrentGoal, metricsSource });
+  } = useRequestValues({ type: valueType, value, addHistoricalTSQMI, addCurrentGoal, collectionSource });
   const { hasKey } = useProductConfigFilterContext();
   const [showCharts, setShowCharts] = useState(false);
   const { currentProduct } = useProductContext();
@@ -78,7 +78,7 @@ const GraphicChart = ({
     () =>
       _.range(numLines).map((i) => ({
         ...chartOption[type]({
-          historical: _.filter(sliceHistorical(i), (item) => metricsSource === 'github' || hasKey(item.key)),
+          historical: _.filter(sliceHistorical(i), (item) => collectionSource === 'github' || hasKey(item.key)),
           title: i === 0 ? title : '',
           isEmpty: isEmpty || error,
           redLimit: currentProduct?.gaugeRedLimit,

src/shared/hooks/useRequestValues.tsx

@@ -13,15 +13,15 @@ interface Props {
   value: 'characteristics' | 'subcharacteristics' | 'measures' | 'metrics';
   addHistoricalTSQMI?: boolean;
   addCurrentGoal?: boolean;
-  metricsSource?: 'github' | 'sonarqube';
+  collectionSource?: 'github' | 'sonarqube';
 }
 
 export function useRequestValues({
   type,
   value,
   addHistoricalTSQMI = false,
   addCurrentGoal = false,
-  metricsSource
+  collectionSource,
 }: Props) {
   const { currentOrganization } = useOrganizationContext();
   const { currentProduct } = useProductContext();
@@ -80,23 +80,22 @@ export function useRequestValues({
     returnData.push(historicalTSQMI);
   }
 
-  if (returnData?.length && metricsSource) {
-    if (metricsSource === 'github') {
+  if (returnData?.length && collectionSource) {
+
+    if (collectionSource === 'github') {
       returnData = returnData.filter(
-        (res: any) => res.key === 'ci_feedback_time' || res.key === 'closed_issues' || res.key === 'total_issues'
+        (res: any) => (res.key === 'total_builds' || res.key === 'sum_ci_feedback_times' || res.key === 'resolved_issues' || res.key === 'total_issues') || res.key === 'ci_feedback_time' || res.key === 'team_throughput'
       );
     }
 
-    if (metricsSource === 'sonarqube') {
+    if (collectionSource === 'sonarqube') {
       returnData = returnData.filter(
-        (res: any) => res.key !== 'ci_feedback_time' && res.key !== 'closed_issues' && res.key !== 'total_issues'
+        (res: any) => res.key !== 'total_builds' && res.key !== 'sum_ci_feedback_times' && res.key !== 'resolved_issues' && res.key !== 'total_issues' && res.key !== 'ci_feedback_time' && res.key !== 'team_throughput'
       );
-
-      console.log(returnData);
     }
   }
 
-  console.log(metricsSource, returnData);
+  console.log(collectionSource, returnData);
   return {
     data: returnData,
     error,