feat: style check status in CISKubeBenchReport

README.md

@@ -85,11 +85,15 @@ You must have a working [Node.js] environment.
 - VulnerabilityReports
 
   ![](./docs/images/lens_vulnerability_report.png)
+
+  ![](./docs/images/lens_workload_vulnerabilities.png)
 - ConfigAuditReports
 
   ![](./docs/images/lens_configaudit_report.png)
 - CISKubeBenchReports
 
+  ![](./docs/images/lens_ciskubebench_report.png)
+
 [lens]: https://github.com/lensapp/lens
 [starboard]: https://github.com/aquasecurity/starboard
 [starboard-crds]: https://aquasecurity.github.io/starboard/latest/crds/

src/ciskubebenchreports/cisresults-list.scss

@@ -14,6 +14,28 @@
       &.status {
         flex-grow: 0.2;
       }
+
+      .Badge {
+        &.status-FAIL {
+          color: white;
+          background-color: #cc1814;
+        }
+
+        &.status-WARN {
+          color: white;
+          background-color: #ffa500;
+        }
+
+        &.status-INFO {
+          color: white;
+          background-color: #515456;
+        }
+
+        &.status-PASS {
+          color: white;
+          background-color: #00b09b;
+        }
+      }
     }
 
   }

src/ciskubebenchreports/cisresults-list.tsx

@@ -6,7 +6,6 @@ import {CISResult} from "./types";
 const {
     Component: {
         Table,
-        TableHead,
         TableRow,
         TableCell,
         DrawerTitle,
@@ -33,7 +32,9 @@ export class CISResultsList extends React.Component<Props> {
             <TableRow key={"" + index} nowrap>
                 <TableCell className="number">{results[index].test_number}</TableCell>
                 <TableCell className="description">{this.renderDescription(results[index])}</TableCell>
-                <TableCell className="status">{results[index].status}</TableCell>
+                <TableCell className="status">
+                    <Badge className={"Badge status-" + results[index].status} small label={results[index].status}/>
+                </TableCell>
             </TableRow>
         )
     }
@@ -45,11 +46,6 @@ export class CISResultsList extends React.Component<Props> {
             <div className="CISResultsList flex column">
                 <DrawerTitle title={title}/>
                 <Table selectable scrollable={false} className="CISResultsTable box grow">
-                    <TableHead sticky={false}>
-                        <TableCell className="number">Number</TableCell>
-                        <TableCell className="description">Description</TableCell>
-                        <TableCell className="status">Status</TableCell>
-                    </TableHead>
                     {
                         results.map((result, index) => this.getTableRow(index))
                     }

src/ciskubebenchreports/types.ts

@@ -1,4 +1,5 @@
 import {Renderer} from "@k8slens/extensions";
+import {Scanner} from "../starboard/types";
 
 export class CISSection {
     id: string;
@@ -27,29 +28,8 @@ export class CISKubeBenchReport extends Renderer.K8sApi.KubeObject {
     static namespaced = false
     static apiBase = "/apis/aquasecurity.github.io/v1alpha1/ciskubebenchreports"
 
-    kind: string
-    apiVersion: string
-    metadata: {
-        name: string;
-        namespace: string;
-        selfLink: string;
-        uid: string;
-        resourceVersion: string;
-        creationTimestamp: string;
-        labels: {
-            [key: string]: string;
-        };
-        annotations: {
-            [key: string]: string;
-        };
-    }
-
     report: {
-        scanner: {
-            name: string;
-            vendor: string;
-            version: string;
-        }
+        scanner: Scanner
         summary: {
             failCount: number;
             infoCount: number;