Cfr frontend (#149)

* add frontend metric bar chart and benchmark for cfr * cleanup labels * revert top * queryAll * queryAll * linting * linting2 * Fix formatting * edit test parameter * CSS fix * Fixedd translations --------- Co-authored-by: Jeroen van der Meulen <jeroennathan.vandermeulen@gmail.com> Co-authored-by: DJ <damjan.jelic@devoteam.com>
DevoteamNL · Mar 15, 2024 · 55ca352 · 55ca352
1 parent 8fbbde9
commit 55ca352
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 20 deletions.
diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/BenchmarkGridItem.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/BenchmarkGridItem.tsx
@@ -13,7 +13,9 @@ export const BenchmarkGridItem = ({ type }: { type: string }) => {
     <HighlightTextBoxComponent
       title=""
       text=""
-      highlight={t(`deployment_frequency.overall_labels.${benchmark}`)}
+      highlight={t(
+        `software_delivery_performance_metrics.overall_labels.${benchmark}`,
+      )}
       healthStatus={
         {
           'on-demand': 'positive',
@@ -24,6 +26,10 @@ export const BenchmarkGridItem = ({ type }: { type: string }) => {
           'lt-1week': 'neutral',
           'week-6month': 'negative',
           'mt-6month': 'critical',
+          'lt-15p': 'positive',
+          '15-25p': 'neutral',
+          '25-30p': 'negative',
+          'mt-30p': 'critical',
         }[benchmark]
       }
     />
@@ -39,7 +45,7 @@ export const BenchmarkGridItem = ({ type }: { type: string }) => {
 
   return (
     <Box sx={{ bgcolor: '#424242', flex: 1 }}>
-      <h1>{t(`deployment_frequency.labels.${type}`)}</h1>
+      <h1>{t(`software_delivery_performance_metrics.labels.${type}`)}</h1>
       {errorOrResponse}
     </Box>
   );

diff --git a/...ge-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.test.tsx b/...ge-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.test.tsx
@@ -11,7 +11,7 @@ import {
   EntityDashboardComponent,
 } from './DashboardComponent';
 
-const NUMBER_OF_METRICS = 3;
+const NUMBER_OF_METRICS = 4;
 
 describe('DashboardComponent', () => {
   function renderDashboardComponent() {
@@ -57,6 +57,9 @@ describe('DashboardComponent', () => {
 
     expect(queryByText('Median Lead Time for Changes')).toBeInTheDocument();
     expect(queryAllByText('mltc_first_key')[0]).toBeInTheDocument();
+
+    expect(queryAllByText('Change Failure Rate')).toHaveLength(2);
+    expect(queryAllByText('cfr_first_key')[0]).toBeInTheDocument();
   });
 
   it('should retrieve new data when the aggregation is changed', async () => {

diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
@@ -66,12 +66,13 @@ export const DashboardComponent = ({
                 display: 'flex',
                 marginTop: 8,
                 gridGap: 8,
-                maxHeight: 180,
+                maxHeight: 900,
               }}
             >
               <BenchmarkGridItem type="df" />
               <BenchmarkGridItem type="mltc" />
-              <Box sx={{ flex: 2 }}>
+              <BenchmarkGridItem type="cfr" />
+              <Box sx={{ flex: 1 }}>
                 {/* Placeholder for other benchmark items */}
               </Box>
             </Box>
@@ -85,12 +86,12 @@ export const DashboardComponent = ({
             >
               <ChartGridItem
                 type="df_count"
-                label={t('deployment_frequency.labels.deployment_frequency')}
+                label={t('deployment-frequency.labels.deployment_frequency')}
               />
               <ChartGridItem
                 type="df_average"
                 label={t(
-                  'deployment_frequency.labels.deployment_frequency_average',
+                  'deployment-frequency.labels.deployment_frequency_average',
                 )}
               />
             </Box>
@@ -103,6 +104,15 @@ export const DashboardComponent = ({
                 {/* Placeholder for other chart items */}
               </Box>
             </Box>
+            <Box sx={{ display: 'flex', marginY: 1, gridGap: 8 }}>
+              <ChartGridItem
+                type="cfr"
+                label={t('failure-rate.labels.change_failure_rate')}
+              />
+              <Box sx={{ flex: 1 }}>
+                {/* Placeholder for other chart items */}
+              </Box>
+            </Box>
           </Box>
         </Content>
       </Page>

diff --git a/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css b/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
@@ -30,6 +30,8 @@
   padding: 20px;
   border-style: hidden;
   background-color: #333333;
+  min-height: 100px;
+  display: grid;
 }
 
 .margin-left-offset-m25 {

diff --git a/backstage-plugin/plugins/open-dora/src/locales/en/translation.json b/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
@@ -1,11 +1,9 @@
 {
-  "deployment_frequency": {
+  "software_delivery_performance_metrics": {
     "labels": {
       "df": "Deployment Frequency",
       "mltc": "Median Lead time for change",
-      "deployment_frequency": "Deployment Frequency",
-      "deployment_frequency_average": "Deployment Frequency Average",
-      "deployment_frequency_overall": "Deployment frequency overall"
+      "cfr": "Change Failure Rate"
     },
     "overall_labels": {
       "lt-6month": "Fewer than once per six months",
@@ -15,7 +13,19 @@
       "lt-1hour": "Less than one hour",
       "lt-1week": "Less than one week",
       "week-6month": "Between one week and six months",
-      "mt-6month": "More than six months"
+      "mt-6month": "More than six months",
+      "lt-15p": "Less than 15%",
+      "15-25p": "15-25%",
+      "25-30p": "25-30%",
+      "mt-30p": "More than 30%"
+    }
+  },
+
+  "deployment-frequency": {
+    "labels": {
+      "deployment_frequency": "Deployment Frequency",
+      "deployment_frequency_average": "Deployment Frequency Average",
+      "deployment_frequency_overall": "Deployment frequency overall"
     }
   },
 
@@ -25,6 +35,12 @@
     }
   },
 
+  "failure-rate": {
+    "labels": {
+      "change_failure_rate": "Change Failure Rate"
+    }
+  },
+
   "dropdown_time_units": {
     "time_unit": "Time Unit",
     "weekly": "Weekly",

diff --git a/dora-api-mock/src/main/resources/application.yaml b/dora-api-mock/src/main/resources/application.yaml
@@ -102,6 +102,12 @@ dora-api-mock:
       mediaType: application/json
       parameters:
         type: mltc
+    - name: cfr_benchmark
+      path: /dora/api/benchmark
+      stubFile: stubs/benchmark/cfr/cfr_benchmark.json
+      mediaType: application/json
+      parameters:
+        type: cfr
     - name: mltc_weekly
       path: /dora/api/metric
       stubFile: stubs/metrics/mltc/mltc_weekly.json

diff --git a/dora-api-mock/src/main/resources/openapi.yaml b/dora-api-mock/src/main/resources/openapi.yaml
@@ -182,6 +182,7 @@ paths:
         | ----------- | ------------------------------| ---------------------------------------------- |
         | `df`        | Deployment frequency.         | on-demand, week-month, month-6month, lt-6month |
         | `mltc`      | Median lead time for changes. | lt-1hour, lt-1week, week-6month, mt-6month     |
+        | `cfr`       | Change Failure Rate.          | lt-15p, 15-25p, 25-30p, mt-30p              |       
 
       operationId: benchmarkByMetric
       parameters:
@@ -194,6 +195,8 @@ paths:
             type: string
             enum:
               - df
+              - mltc
+              - cfr
         - name: project
           in: query
           description: >-

diff --git a/dora-api-mock/src/main/resources/stubs/benchmark/cfr/cfr_benchmark.json b/dora-api-mock/src/main/resources/stubs/benchmark/cfr/cfr_benchmark.json
@@ -0,0 +1,3 @@
+{
+    "key": "mt-30%"
+  }
diff --git a/dora-api-mock/src/main/resources/stubs/benchmark/mltc/mltc_benchmark.json b/dora-api-mock/src/main/resources/stubs/benchmark/mltc/mltc_benchmark.json
@@ -1,3 +1,3 @@
 {
-  "key": "lt-1week"
+  "key": "lt-1hour"
 }
diff --git a/dora-api-mock/src/main/resources/stubs/metrics/cfr/cfr_quarterly.json b/dora-api-mock/src/main/resources/stubs/metrics/cfr/cfr_quarterly.json
@@ -3,35 +3,35 @@
   "dataPoints": [
     {
       "key": "2021-03",
-      "value": 125.3
+      "value": 12.3
     },
     {
       "key": "2021-04",
-      "value": 281.7
+      "value": 1.7
     },
     {
       "key": "2022-01",
-      "value": 109
+      "value": 19
     },
     {
       "key": "2022-02",
-      "value": 130.5
+      "value": 13.5
     },
     {
       "key": "2022-03",
-      "value": 201
+      "value": 21
     },
     {
       "key": "2022-04",
       "value": 82
     },
     {
       "key": "2023-01",
-      "value": 57.8
+      "value": 7.8
     },
     {
       "key": "2023-02",
-      "value": 49.5
+      "value": 9.5
     }
   ]
 }