feat: Style KubeHunterReport details pane (#67)

Signed-off-by: Daniel Pacak <pacak.daniel@gmail.com>
aquasecurity · Oct 17, 2021 · b78d556 · b78d556
1 parent 31a5bac
commit b78d556
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/src/kubehunterreports/details.scss b/src/kubehunterreports/details.scss
@@ -1,5 +1,5 @@
 .KubeHunterReportDetails {
-  .summary {
+  .VulnerabilitySummary {
     .Badge {
       &.theme-high {
         color: white;
@@ -21,4 +21,34 @@
 
     }
   }
+
+  .VulnerabilityList {
+
+    .TableCell {
+      &.vulnerabilityID {
+        flex-grow: 0.4;
+      }
+
+      &.severity {
+        flex-grow: 0.2;
+      }
+
+      &.high {
+        color: #cc1814;
+      }
+
+      &.medium {
+        color: #ffa500;
+      }
+
+      &.low {
+        color: #515456;
+      }
+
+      &.category {
+        flex-grow: 0.3;
+      }
+    }
+  }
+
 }
diff --git a/src/kubehunterreports/details.tsx b/src/kubehunterreports/details.tsx
@@ -2,7 +2,6 @@ import "./details.scss"
 import {Renderer} from "@k8slens/extensions";
 import React from "react";
 import {KubeHunterReport, Vulnerability} from "./types";
-import styled from "@emotion/styled";
 
 const {
     Component: {
@@ -18,16 +17,6 @@ const {
 } = Renderer;
 
 
-const Wrapper = styled.div`
-  .Table.virtual {
-      height: 500px;
-
-      .VirtualList {
-          height: 100%;
-      }
-  }
-`
-
 export interface KubeHunterReportDetailsProps extends Renderer.Component.KubeObjectDetailsProps<KubeHunterReport> {
     showObjectMeta?: boolean
 }
@@ -46,7 +35,7 @@ export class KubeHunterReportDetails extends React.Component<KubeHunterReportDet
                 <TableCell className="vulnerabilityID">
                     <a target="_blank" href={vulnerability.avd_reference}>{vulnID}</a>
                 </TableCell>
-                <TableCell className="severity">{vulnerability.severity}</TableCell>
+                <TableCell className={"severity " + vulnerability.severity}>{vulnerability.severity}</TableCell>
                 <TableCell className="description">
                     <Badge flat expandable={false} key="description" label={vulnerability.description}
                            tooltip={vulnerability.description}/>
@@ -68,7 +57,7 @@ export class KubeHunterReportDetails extends React.Component<KubeHunterReportDet
                 {this.props.showObjectMeta &&
                 <KubeObjectMeta object={report} hideFields={["uid", "resourceVersion", "selfLink"]}/>}
 
-                <DrawerItem name="Summary" className="summary" labelsOnly>
+                <DrawerItem className="VulnerabilitySummary" name="Summary" labelsOnly>
                     <Badge className="Badge theme-high"
                            label={report.report.summary.highCount}
                            tooltip="High"/>
@@ -85,24 +74,23 @@ export class KubeHunterReportDetails extends React.Component<KubeHunterReportDet
 
                 <DrawerTitle title={"Vulnerabilities"}/>
 
-                <Wrapper>
-                    <Table selectable scrollable={false}
+                <div className="VulnerabilityList flex column">
+                    <Table className="box grow" selectable scrollable={false}
                            tableId="kubeHunterVulnerabilitiesTable"
                            virtual={virtual}
                            items={vulnerabilities}
                            getTableRow={this.getTableRow}>
                         <TableHead>
                             <TableCell className="vulnerabilityID">ID</TableCell>
                             <TableCell className="severity">Severity</TableCell>
-                            <TableCell
-                                className="description">Description</TableCell>
+                            <TableCell className="description">Description</TableCell>
                             <TableCell className="category">Category</TableCell>
                         </TableHead>
                         {
-                            !virtual && vulnerabilities.map((vulnerability) => this.getTableRow(vulnerability.getId()))
+                            !virtual && vulnerabilities.map((vulnerability: Vulnerability) => this.getTableRow(vulnerability.getId()))
                         }
                     </Table>
-                </Wrapper>
+                </div>
 
             </div>
         )