From e81061b11637a1918a0c938022357e5858c9eed1 Mon Sep 17 00:00:00 2001
From: Ernst Widerberg <ernst@sunet.se>
Date: Mon, 11 Apr 2022 15:36:24 +0200
Subject: Edit JSON format

- "result" changed from array to object
- optional "description" key added on result objects
- "reliability" key added on result objects, mandatory on positive
  results
---
 src/components/ListItem.js   | 12 +++++++++---
 src/components/ListView.js   |  8 ++++----
 src/components/ScanDetail.js | 46 ++++++++++++++++++++++++++++++++------------
 src/styles/main.css          | 41 +++++++++++++++++++++++++++++++++++----
 4 files changed, 84 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/components/ListItem.js b/src/components/ListItem.js
index b289c2e..b85df4e 100644
--- a/src/components/ListItem.js
+++ b/src/components/ListItem.js
@@ -24,14 +24,20 @@ class ListItem extends React.Component {
                 </td>
                 <td>{this.props.domain}</td>
                 <td>{this.props.system_name}</td>
-                <td>
+                <td style={{ paddingRight: 0 }}>
                     <Card
                         className={
-                            "cve" + (this.props.vulnerable ? " vulnerable" : "")
+                            "result" +
+                            (this.props.vulnerable ? " vulnerable" : "")
                         }
                         variant="outlined"
                     >
-                        {this.props.cve}
+                        {this.props.display_name}
+                    </Card>
+                </td>
+                <td style={{ paddingLeft: 0 }}>
+                    <Card className="reliability" variant="outlined">
+                        {this.props.reliability}
                     </Card>
                 </td>
                 <td>
diff --git a/src/components/ListView.js b/src/components/ListView.js
index 9eec7bf..2252f8c 100644
--- a/src/components/ListView.js
+++ b/src/components/ListView.js
@@ -135,14 +135,14 @@ class ListView extends React.Component {
                                     : -1
                             )
                             .map(scan =>
-                                scan.result
-                                    .filter(res => res.vulnerable)
-                                    .map(res => (
+                                Object.entries(scan.result)
+                                    .filter(([_, res]) => res.vulnerable)
+                                    .map(([id, res]) => (
                                         <ListItem
                                             summary={true}
                                             {...scan}
                                             {...res}
-                                            key={scan._id + res.cve}
+                                            key={scan._id + id}
                                         />
                                     ))
                             )
diff --git a/src/components/ScanDetail.js b/src/components/ScanDetail.js
index f818710..36c52c2 100644
--- a/src/components/ScanDetail.js
+++ b/src/components/ScanDetail.js
@@ -3,6 +3,9 @@ import React from "react";
 import Alert from "@mui/material/Alert";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
+import Tooltip from "@mui/material/Tooltip";
+
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 class ScanDetail extends React.Component {
     render() {
@@ -67,11 +70,18 @@ class ScanDetail extends React.Component {
                     </div>
                 </h2>
 
-                <div id="cves">
-                    {this.props.result
-                        .sort((a, b) => (a.vulnerable ? -1 : 1))
-                        .map(cve => (
-                            <CVE {...cve} />
+                <div id="results">
+                    {Object.entries(this.props.result)
+                        // Sort by vulnerable, reliability, name
+                        .sort((a, b) =>
+                            a[1].display_name > b[1].display_name ? -1 : 1
+                        )
+                        .sort((a, b) =>
+                            a[1].reliability < b[1].reliability ? -1 : 1
+                        )
+                        .sort((a, b) => (a[1].vulnerable ? -1 : 1))
+                        .map(([id, res]) => (
+                            <Result key={id} {...res} />
                         ))}
                 </div>
             </Card>
@@ -108,14 +118,26 @@ function CustomElement(props) {
     );
 }
 
-function CVE(props) {
+function Result(props) {
     return (
-        <Card
-            className={"cve" + (props.vulnerable ? " vulnerable" : "")}
-            variant="outlined"
-        >
-            {props.cve}
-        </Card>
+        <div className="resultContainer">
+            <Card
+                className={"result" + (props.vulnerable ? " vulnerable" : "")}
+                variant="outlined"
+            >
+                {props.display_name}
+                {props.description && (
+                    <Tooltip title={props.description}>
+                        <InfoOutlinedIcon />
+                    </Tooltip>
+                )}
+            </Card>
+            {props.vulnerable && (
+                <Card className="reliability" variant="outlined">
+                    {props.reliability}
+                </Card>
+            )}
+        </div>
     );
 }
 
diff --git a/src/styles/main.css b/src/styles/main.css
index 0b01a70..6bb6d5f 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -74,19 +74,44 @@ a:visited {
     padding-right: 2em;
 }
 
-.scan-detail .cve {
+.scan-detail .resultContainer {
+    display: flex;
+}
+
+.scan-detail .result {
     background-color: #c6ff85;
     border: 3px solid #62b800;
     padding: 0.5em;
     margin-top: 0.5em;
     text-align: center;
+    width: 100%;
 }
 
-.scan-detail .cve.vulnerable {
+.scan-detail .result.vulnerable {
     background-color: #ff8585;
     border: 3px solid #f74343;
 }
 
+.scan-detail .result .MuiSvgIcon-root {
+    vertical-align: middle;
+    margin-left: 0.3em;
+    color: #62b800;
+}
+
+.scan-detail .result.vulnerable .MuiSvgIcon-root {
+    color: #f74343;
+}
+
+.scan-detail .reliability {
+    background-color: lightgrey;
+    border: 3px solid darkgrey;
+    padding: 0.5em;
+    margin-top: 0.5em;
+    text-align: center;
+    width: 4em;
+    margin-left: 0.5em;
+}
+
 /* ListView */
 
 #list-container > #controls {
@@ -120,7 +145,7 @@ a:visited {
     border-bottom: 1px solid grey;
 }
 
-.list-item .cve {
+.list-item .result {
     background-color: #c6ff85;
     border: 3px solid #62b800;
     padding: 0.5em;
@@ -128,11 +153,19 @@ a:visited {
     text-align: center;
 }
 
-.list-item .cve.vulnerable {
+.list-item .result.vulnerable {
     background-color: #ff8585;
     border: 3px solid #f74343;
 }
 
+.list-item .reliability {
+    background-color: lightgrey;
+    border: 3px solid darkgrey;
+    padding: 0.5em;
+    margin: 0.5em;
+    text-align: center;
+}
+
 /* Login */
 
 #login-container {
-- 
cgit v1.1