feat: style ConfigAuditReports (#78)

Signed-off-by: Daniel Pacak <pacak.daniel@gmail.com>
aquasecurity · Feb 28, 2022 · 0f082a9 · 0f082a9
1 parent be0edef
commit 0f082a9
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -84,15 +84,14 @@ You must have a working [Node.js] environment.
 
 - VulnerabilityReports
 
-  ![](./docs/images/lens_vulnerability_report.png)
+  ![](./docs/images/vulnerability_report.png)
 
-  ![](./docs/images/lens_workload_vulnerabilities.png)
-- ConfigAuditReports
+- ConfigAuditReports and ClusterConfigAuditReports
 
-  ![](./docs/images/lens_configaudit_report.png)
+  ![](./docs/images/configaudit_report.png)
 - CISKubeBenchReports
 
-  ![](./docs/images/lens_ciskubebench_report.png)
+  ![](./docs/images/ciskubebench_report.png)
 
 [lens]: https://github.com/lensapp/lens
 [starboard]: https://github.com/aquasecurity/starboard

diff --git a/docs/images/ciskubebench_report.png b/docs/images/ciskubebench_report.png
diff --git a/docs/images/configaudit_report.png b/docs/images/configaudit_report.png
diff --git a/docs/images/lens_ciskubebench_report.png b/docs/images/lens_ciskubebench_report.png
diff --git a/docs/images/lens_configaudit_report.png b/docs/images/lens_configaudit_report.png
diff --git a/docs/images/lens_vulnerability_report.png b/docs/images/lens_vulnerability_report.png
diff --git a/docs/images/lens_workload_vulnerabilities.png b/docs/images/lens_workload_vulnerabilities.png
diff --git a/docs/images/vulnerability_report.png b/docs/images/vulnerability_report.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@aquasecurity/starboard-lens-extension",
   "publisher": "aquasecurity.github.io",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Lens extension for viewing Starboard security information",
   "homepage": "https://github.com/aquasecurity/starboard-lens-extension",
   "repository": {

diff --git a/src/ciskubebenchreports/cisresults-list.tsx b/src/ciskubebenchreports/cisresults-list.tsx
@@ -29,10 +29,10 @@ export class CISResultsList extends React.Component<Props> {
         return (
             <TableRow key={"" + index} nowrap>
                 <TableCell className="number">{results[index].test_number}</TableCell>
-                <TableCell className="description">{this.renderDescription(results[index])}</TableCell>
                 <TableCell className="status">
                     <Badge className={"Badge status-" + results[index].status} small label={results[index].status}/>
                 </TableCell>
+                <TableCell className="description">{this.renderDescription(results[index])}</TableCell>
             </TableRow>
         )
     }

diff --git a/src/configauditreports/checks-list.scss b/src/configauditreports/checks-list.scss
@@ -15,45 +15,65 @@
   }
 
   .Table {
-    .Badge {
-      &.severity-CRITICAL {
-        color: white;
-        background-color: #cc1814;
+    .TableCell {
+      &.checkID {
+        text-align: left;
+        flex-grow: 0.15;
       }
-
-      &.severity-danger {
-        color: white;
-        background-color: #cc1814;
+      &.severity {
+        text-align: center;
+        flex-grow: 0.1;
       }
-
-      &.severity-HIGH {
-        color: white;
-        background-color: #ffa500;
+      &.message {
+        text-align: left;
+        flex-grow: 0.65;
       }
 
-      &.severity-warning {
-        color: white;
-        background-color: #ffa500;
+      &.status {
+        text-align: center;
+        flex-grow: 0.1;
       }
 
-      &.severity-MEDIUM {
-        color: white;
-        background-color: #f0c20c;
-      }
+      .Badge {
+        &.severity-CRITICAL {
+          color: white;
+          background-color: #cc1814;
+        }
 
-      &.severity-LOW {
-        color: white;
-        background-color: #096ab0;
-      }
+        &.severity-danger {
+          color: white;
+          background-color: #cc1814;
+        }
 
-      &.status-PASS {
-        color: white;
-        background-color: #00b09b;
-      }
+        &.severity-HIGH {
+          color: white;
+          background-color: #ffa500;
+        }
+
+        &.severity-warning {
+          color: white;
+          background-color: #ffa500;
+        }
+
+        &.severity-MEDIUM {
+          color: white;
+          background-color: #f0c20c;
+        }
+
+        &.severity-LOW {
+          color: white;
+          background-color: #096ab0;
+        }
+
+        &.status-PASS {
+          color: white;
+          background-color: #00b09b;
+        }
 
-      &.status-FAIL {
-        color: white;
-        background-color: #cc1814;
+        &.status-FAIL {
+          color: white;
+          background-color: #cc1814;
+        }
       }
     }
   }

diff --git a/src/configauditreports/checks-list.tsx b/src/configauditreports/checks-list.tsx
@@ -37,20 +37,21 @@ export class ChecksList extends React.Component<Props> {
         const {checks} = this.props;
         const check = checks.find(item => item.checkID == uid);
         let status = 'PASS'
-        if (check.success) {
+        if (!check.success) {
             status = 'FAIL'
         }
         return (
             <TableRow key={check.checkID} nowrap>
-                <TableCell className="checkID">{check.checkID}</TableCell>
-                <TableCell className="checkSeverity">
+                <TableCell className="checkID">
+                    <Badge flat expandable={false} label={check.checkID} tooltip={check.checkID}/>
+                </TableCell>
+                <TableCell className="severity">
                     <Badge className={"Badge severity-" + check.severity} small label={check.severity}/>
                 </TableCell>
-                <TableCell className="checkCategory">
-                    <Badge flat expandable={false} key="imageRef" label={check.message}
-                           tooltip={check.message}/>
+                <TableCell className="message">
+                    <Badge flat expandable={false} label={check.message} tooltip={check.message}/>
                 </TableCell>
-                <TableCell>
+                <TableCell className="status">
                     <Badge className={"Badge status-" + status} small label={status}/>
                 </TableCell>
             </TableRow>
@@ -67,18 +68,19 @@ export class ChecksList extends React.Component<Props> {
         const sorted = checks.sort(BySeverity)
 
         return (
-            <div className="ChecksList">
-                <Table tableId="configurationChecksTable"
+            <div className="ChecksList flex column">
+                <Table className="box grow"
+                       tableId="configurationChecksTable"
                        selectable
                        virtual={virtual}
                        items={sorted}
                        getTableRow={this.getTableRow}
                 >
                     <TableHead>
                         <TableCell className="checkID">ID</TableCell>
-                        <TableCell className="checkSeverity">Severity</TableCell>
-                        <TableCell className="checkCategory">Message</TableCell>
-                        <TableCell className="checkSuccess">Status</TableCell>
+                        <TableCell className="severity">Severity</TableCell>
+                        <TableCell className="message">Message</TableCell>
+                        <TableCell className="status">Status</TableCell>
                     </TableHead>
                     {
                         !virtual && sorted.map((check: Check) => this.getTableRow(check.getId()))