fix: fixed the progress bar color to match the severity label colors (#…

…331) Signed-off-by: Olga Lavtar <[email protected]>
RHEcosystemAppEng · Apr 16, 2024 · 33192eb · 33192eb
1 parent 6d7bcfa
commit 33192eb
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 10 deletions.
diff --git a/src/main/resources/freemarker/templates/generated/main.css b/src/main/resources/freemarker/templates/generated/main.css
diff --git a/src/main/resources/freemarker/templates/generated/main.js b/src/main/resources/freemarker/templates/generated/main.js
diff --git a/src/main/resources/freemarker/templates/generated/vendor.css b/src/main/resources/freemarker/templates/generated/vendor.css
diff --git a/src/main/resources/freemarker/templates/generated/vendor.js b/src/main/resources/freemarker/templates/generated/vendor.js
diff --git a/ui/src/components/VulnerabilityScore.tsx b/ui/src/components/VulnerabilityScore.tsx
@@ -3,26 +3,33 @@ import {
   Progress,
   ProgressMeasureLocation,
   ProgressSize,
-  ProgressVariant,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
-import { Vulnerability } from '../api/report';
+import {Vulnerability} from '../api/report';
 
 interface VulnerabilityScoreProps {
   vulnerability: Vulnerability;
 }
 
 export const VulnerabilityScore: React.FC<VulnerabilityScoreProps> = ({ vulnerability }) => {
   const severity = vulnerability.severity;
-  let progressBarVariant: ProgressVariant;
+  let progressBarClassName;
   switch (severity) {
     case 'CRITICAL':
+      progressBarClassName = 'bar-critical'
+      break;
     case 'HIGH':
-      progressBarVariant = ProgressVariant.danger;
+      progressBarClassName = 'bar-high'
+      break;
+    case 'MEDIUM':
+      progressBarClassName = 'bar-medium'
+      break;
+    case 'LOW':
+      progressBarClassName = 'bar-low'
       break;
     default:
-      progressBarVariant = ProgressVariant.warning;
+      progressBarClassName = 'bar-default'
       break;
   }
   return (
@@ -36,8 +43,8 @@ export const VulnerabilityScore: React.FC<VulnerabilityScoreProps> = ({ vulnerab
               min={0}
               max={10}
               size={ProgressSize.sm}
-              variant={progressBarVariant}
               measureLocation={ProgressMeasureLocation.none}
+              className={`${progressBarClassName}`}
           />
         </SplitItem>
       </Split>

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -3,3 +3,25 @@ body {
   height: 100%;
   color: black;
 }
+
+/* Progress bar styles */
+
+.bar-critical .pf-v5-c-progress__indicator {
+  background-color: #800000;
+}
+
+.bar-high .pf-v5-c-progress__indicator {
+  background-color: #FF0000;
+}
+
+.bar-medium .pf-v5-c-progress__indicator{
+  background-color: #FFA500;
+}
+
+.bar-low .pf-v5-c-progress__indicator {
+  background-color: #5BA352;
+}
+
+.bar-default .pf-v5-c-progress__indicator {
+  background-color: #06c;
+}