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

6 files changed, 121 insertions, 52 deletions

diff --git a/example_data_1.json b/example_data_1.json
index 96aee14..98a5edf 100644
--- a/example_data_1.json
+++ b/example_data_1.json
@@ -10,28 +10,32 @@
     "domain": "sunet.se",
     "timestamp_in_utc": "2021-06-21T14:06 UTC",
     "system_name": "Apache 2.1.3",
-    "result": [
-        {
-            "cve": "CVE-2015-0049",
-            "vulnerable": false
+    "result": {
+        "cve_2015_0049": {
+            "display_name": "CVE-2015-0049",
+            "vulnerable": false,
+            "description": "Allows remote attackers to execute arbitrary code or cause a denial of service (memory corruption)."
         },
-        {
-            "cve": "CVE-2015-0050",
+        "cve_2015_0050": {
+            "display_name": "CVE-2015-0050",
             "vulnerable": false
         },
-        {
-            "cve": "CVE-2015-0060",
-            "vulnerable": true
+        "cve_2015_0060": {
+            "display_name": "CVE-2015-0060",
+            "vulnerable": true,
+            "reliability": 2
         },
-        {
-            "cve": "CVE-2015-0063",
+        "cve_2015_0063": {
+            "display_name": "CVE-2015-0063",
             "vulnerable": false
         },
-        {
-            "cve": "CVE-2015-0064",
-            "vulnerable": true
+        "insecure_cryptography": {
+            "display_name": "Insecure cryptography",
+            "vulnerable": true,
+            "reliability": 5,
+            "description": "Uses RSA instead of elliptic curve."
         }
-    ],
+    },
     "description": "The Apache HTTP Server is a free and open-source cross-platform web server software, released under the terms of Apache License 2.0.",
     "custom_data": {
         "subject_cn": {
diff --git a/example_data_2.json b/example_data_2.json
index cc930a0..f4083b1 100644
--- a/example_data_2.json
+++ b/example_data_2.json
@@ -10,28 +10,32 @@
     "domain": "sunet.se",
     "timestamp_in_utc": "2021-06-30T10:00 UTC",
     "system_name": "VMware ESXi 6.7.0 build-17700523",
-    "result": [
-        {
+    "result": {
+        "cve_2019_0001": {
             "cve": "CVE-2019-0001",
             "vulnerable": false
         },
-        {
-            "cve": "CVE-2015-0002",
-            "vulnerable": false
+        "cve_2015_0002": {
+            "display_name": "CVE-2015-0002",
+            "vulnerable": false,
+            "description": "There is a use of insufficiently random values vulnerability. An unauthenticated, remote attacker can guess information by a large number of attempts. Successful exploitation may cause information leak."
         },
-        {
-            "cve": "CVE-2015-0003",
-            "vulnerable": true
+        "cve_2015_0003": {
+            "display_name": "CVE-2015-0003",
+            "vulnerable": true,
+            "reliability": 2,
+            "description": "A carefully crafted request body can cause a read to a random memory area which could cause the process to crash."
         },
-        {
-            "cve": "CVE-2015-0004",
+        "cve_2015_0004": {
+            "display_name": "CVE-2015-0004",
             "vulnerable": false
         },
-        {
-            "cve": "CVE-2015-0005",
-            "vulnerable": true
+        "cve_2015_0005": {
+            "display_name": "CVE-2015-0005",
+            "vulnerable": true,
+            "reliability": 4
         }
-    ],
+    },
     "description": "VMware ESXi is an enterprise-class, type-1 hypervisor developed by VMware for deploying and serving virtual computers. As a type-1 hypervisor, ESXi is not a software application that is installed on an operating system; instead, it includes and integrates vital OS components, such as a kernel.",
     "custom_data": {
         "subject_cn": {
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 {