summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorErnst Widerberg <ernst@sunet.se>2022-04-11 15:36:24 +0200
committerErnst Widerberg <ernst@sunet.se>2022-04-11 15:36:24 +0200
commite81061b11637a1918a0c938022357e5858c9eed1 (patch)
treeda5e481b5188ac1edb868ca2954a8a4064d80159 /src
parent3d24518dd254d54c7be8bb56e66ce1242630af18 (diff)
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
Diffstat (limited to 'src')
-rw-r--r--src/components/ListItem.js12
-rw-r--r--src/components/ListView.js8
-rw-r--r--src/components/ScanDetail.js46
-rw-r--r--src/styles/main.css41
4 files changed, 84 insertions, 23 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>
);
}
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 {