diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ListItem.js | 12 | ||||
| -rw-r--r-- | src/components/ListView.js | 8 | ||||
| -rw-r--r-- | src/components/ScanDetail.js | 46 | ||||
| -rw-r--r-- | src/styles/main.css | 41 |
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 { |