[TC-1812]+[TC-1813] fix: dashboard/barchart fix rendering (trustifica…

…tion#1772)
mrizzi · Oct 9, 2024 · e73c3c2 · e73c3c2
1 parent f1c8bfd
commit e73c3c2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/spog/ui/crates/donut/js/main.js b/spog/ui/crates/donut/js/main.js
diff --git a/spog/ui/crates/donut/patternfly-charts/src/SbomStackChart.tsx b/spog/ui/crates/donut/patternfly-charts/src/SbomStackChart.tsx
@@ -1,3 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
 import {
   Chart,
   ChartAxis,
@@ -8,23 +11,25 @@ import {
   ChartThemeColor,
   ChartTooltip,
 } from '@patternfly/react-charts';
-import React from 'react';
-import ReactDOM from 'react-dom/client';
 
-import noneColor from '@patternfly/react-tokens/dist/esm/global_palette_black_400';
 import lowColor from '@patternfly/react-tokens/dist/esm/chart_color_blue_200';
 import mediumColor from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
-import highColor from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import criticalColor from '@patternfly/react-tokens/dist/esm/chart_color_purple_400';
+import highColor from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
+import noneColor from '@patternfly/react-tokens/dist/esm/global_palette_black_400';
+
+type Severity = 'none' | 'low' | 'medium' | 'high' | 'critical';
+
+interface Legend {
+  severity: Severity;
+  name: string;
+}
 
 interface StackChartProps {
   sbom_id: string;
   sbom_name: string;
   vulnerabilities: {
-    none: number;
-    low: number;
-    high: number;
-    critical: number;
+    [key in Severity]: number;
   };
 }
 
@@ -33,18 +38,19 @@ export const SbomStackChartRenderer = (htmlElement: HTMLElement, props: StackCha
     return (
       item.vulnerabilities.critical +
         item.vulnerabilities.high +
+        item.vulnerabilities.medium +
         item.vulnerabilities.low +
         item.vulnerabilities.none ===
       0
     );
   });
 
-  const severities = [
-    { name: 'Critical' },
-    { name: 'High' },
-    { name: 'Medium' },
-    { name: 'Low' },
-    { name: 'Unknown' },
+  const legends: Legend[] = [
+    { severity: 'critical', name: 'Critical' },
+    { severity: 'high', name: 'High' },
+    { severity: 'medium', name: 'Medium' },
+    { severity: 'low', name: 'Low' },
+    { severity: 'none', name: 'Unknown' },
   ];
 
   const root = ReactDOM.createRoot(htmlElement);
@@ -53,7 +59,7 @@ export const SbomStackChartRenderer = (htmlElement: HTMLElement, props: StackCha
       <Chart
         ariaDesc="SBOM summary status"
         domainPadding={{ x: [30, 25] }}
-        legendData={severities}
+        legendData={legends.map((e) => ({ name: e.name }))}
         legendPosition="bottom-left"
         height={375}
         name="sbom-summary-status"
@@ -121,18 +127,18 @@ export const SbomStackChartRenderer = (htmlElement: HTMLElement, props: StackCha
             noneColor.var,
           ]}
         >
-          {severities.map((severity) => (
+          {legends.map((legend) => (
             <ChartBar
-              key={severity.name}
+              key={legend.name}
               labelComponent={<ChartTooltip constrainToVisibleArea />}
               data={props.map((sbom) => {
-                const severityKey = severity.name.toLowerCase();
-                const count = (sbom.vulnerabilities as any)[severityKey] as number;
+                const severityKey = legend.severity;
+                const count = sbom.vulnerabilities[severityKey] as number;
                 return {
-                  name: severity.name,
+                  name: legend.name,
                   x: sbom.sbom_name,
                   y: count,
-                  label: `${severity.name}: ${count}`,
+                  label: `${legend.name}: ${count}`,
                 };
               })}
             />