feat: show color badges for severity on reports lists (#84)

aquasecurity · Apr 22, 2022 · c5bd383 · c5bd383
1 parent 11f620c
commit c5bd383
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 14 deletions.
diff --git a/src/ciskubebenchreports/page.scss b/src/ciskubebenchreports/page.scss
@@ -0,0 +1,24 @@
+.CISKubeBenchReportsList {
+
+  .Badge {
+    &.theme-fail {
+      color: white;
+      background-color: #cc1814;
+    }
+
+    &.theme-warn {
+      color: white;
+      background-color: #ffa500;
+    }
+
+    &.theme-info {
+      color: white;
+      background-color: #515456;
+    }
+
+    &.theme-pass {
+      color: white;
+      background-color: #00b09b;
+    }
+  }
+}
diff --git a/src/ciskubebenchreports/page.tsx b/src/ciskubebenchreports/page.tsx
@@ -1,8 +1,16 @@
+import "./page.scss"
 import {Renderer} from "@k8slens/extensions";
 import React from "react";
 import {store} from "./store";
 import {CISKubeBenchReport} from "./types";
 
+const {
+    Component: {
+        KubeObjectListLayout,
+        Badge
+    }
+} = Renderer;
+
 enum sortBy {
     name = "name",
     fail = "fail",
@@ -15,7 +23,7 @@ export class CISKubeBenchReportsPage extends React.Component<{ extension: Render
 
     render() {
         return (
-            <Renderer.Component.KubeObjectListLayout
+            <KubeObjectListLayout
                 tableId="kubeBenchReportsTable"
                 className="CISKubeBenchReportsList" store={store}
                 sortingCallbacks={{
@@ -39,13 +47,25 @@ export class CISKubeBenchReportsPage extends React.Component<{ extension: Render
                 ]}
                 renderTableContents={(report: CISKubeBenchReport) => [
                     report.getName(),
-                    report.report.summary.failCount,
-                    report.report.summary.warnCount,
-                    report.report.summary.infoCount,
-                    report.report.summary.passCount,
+                    renderResult("fail", report.report.summary.failCount),
+                    renderResult("warn", report.report.summary.warnCount),
+                    renderResult("info", report.report.summary.infoCount),
+                    renderResult("pass", report.report.summary.passCount),
                     report.report.scanner.name + " " + report.report.scanner.version,
                 ]}
             />
         )
     }
 }
+
+function renderResult(result: string, count: number) {
+  if (count > 0) {
+    return (
+        <Badge className={"Badge theme-" + result} small key="result" label={count}/>
+    )
+  } else {
+    return (
+        <Badge small key="result" label={count}/>
+    )
+  } 
+}
diff --git a/src/configauditreports/page.scss b/src/configauditreports/page.scss
@@ -0,0 +1,24 @@
+.ConfigAuditReports {
+
+  .Badge {
+    &.severity-CRITICAL {
+      color: white;
+      background-color: #cc1814;
+    }
+
+    &.severity-HIGH {
+      color: white;
+      background-color: #ffa500;
+    }
+
+    &.severity-MEDIUM {
+      color: white;
+      background-color: #f0c20c;
+    }
+
+    &.severity-LOW {
+      color: white;
+      background-color: #096ab0;
+    }
+  }
+}
diff --git a/src/configauditreports/page.tsx b/src/configauditreports/page.tsx
@@ -1,3 +1,4 @@
+import "./page.scss"
 import {Renderer} from "@k8slens/extensions";
 import React from "react";
 import {clusterStore, store} from "./store";
@@ -95,13 +96,25 @@ export class ConfigAuditReportPage extends React.Component<{ extension: Renderer
                     <Badge flat expandable={false} key="name" label={report.getName()}
                            tooltip={report.getName()}/>,
                     report.metadata.namespace,
-                    report.report.summary.criticalCount,
-                    report.report.summary.highCount,
-                    report.report.summary.mediumCount,
-                    report.report.summary.lowCount,
+                    renderSeverity("CRITICAL", report.report.summary.criticalCount),
+                    renderSeverity("HIGH", report.report.summary.highCount),
+                    renderSeverity("MEDIUM", report.report.summary.mediumCount),
+                    renderSeverity("LOW", report.report.summary.lowCount),
                     report.report.scanner.name + " " + report.report.scanner.version,
                 ]}
             />
         )
     }
 }
+
+function renderSeverity(severity: string, count: number) {
+  if (count > 0) {
+    return (
+        <Badge className={"Badge severity-" + severity} small key="severity" label={count}/>
+    )
+  } else {
+    return (
+        <Badge small key="severity" label={count}/>
+    )
+  } 
+}
diff --git a/src/vulnerabilityreports/page.scss b/src/vulnerabilityreports/page.scss
@@ -0,0 +1,29 @@
+.VulnerabilityReports {
+
+  .Badge {
+    &.severity-CRITICAL {
+      color: white;
+      background-color: #cc1814;
+    }
+
+    &.severity-HIGH {
+      color: white;
+      background-color: #ffa500;
+    }
+
+    &.severity-MEDIUM {
+      color: white;
+      background-color: #f0c20c;
+    }
+
+    &.severity-LOW {
+      color: white;
+      background-color: #096ab0;
+    }
+
+    &.severity-UNKNOWN {
+      color: white;
+      background-color: #515456;
+    }
+  }
+}
diff --git a/src/vulnerabilityreports/page.tsx b/src/vulnerabilityreports/page.tsx
@@ -1,3 +1,4 @@
+import "./page.scss"
 import {Renderer} from "@k8slens/extensions";
 import React from "react";
 import {ClusterVulnerabilityReport, VulnerabilityReport} from "./types";
@@ -101,11 +102,11 @@ export class VulnerabilityReportPage extends React.Component<{ extension: Render
                     renderName(report.getName()),
                     report.metadata.namespace,
                     renderImage(report),
-                    report.report.summary.criticalCount,
-                    report.report.summary.highCount,
-                    report.report.summary.mediumCount,
-                    report.report.summary.lowCount,
-                    report.report.summary.unknownCount,
+                    renderSeverity("CRITICAL", report.report.summary.criticalCount),
+                    renderSeverity("HIGH", report.report.summary.highCount),
+                    renderSeverity("MEDIUM", report.report.summary.mediumCount),
+                    renderSeverity("LOW", report.report.summary.lowCount),
+                    renderSeverity("UNKNOWN", report.report.summary.unknownCount),
                     renderScanner(report.report.scanner),
                 ]}
             />
@@ -129,3 +130,15 @@ function renderImage(report: VulnerabilityReport) {
         <Badge flat expandable={false} key="imageRef" label={imageRef} tooltip={imageRef}/>
     )
 }
+
+function renderSeverity(severity: string, count: number) {
+    if (count > 0) {
+      return (
+          <Badge className={"Badge severity-" + severity} small key="severity" label={count}/>
+      )
+    } else {
+      return (
+          <Badge small key="severity" label={count}/>
+      )
+    } 
+}