3 files changed, 47 insertions, 19 deletions
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>
     );
 }