diff options
Diffstat (limited to 'src/components/ScanView.js')
| -rw-r--r-- | src/components/ScanView.js | 148 |
1 files changed, 146 insertions, 2 deletions
diff --git a/src/components/ScanView.js b/src/components/ScanView.js index a289cf7..4efb209 100644 --- a/src/components/ScanView.js +++ b/src/components/ScanView.js @@ -1,6 +1,15 @@ import React from "react"; -import ScanDetail from "./ScanDetail"; +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"; + +import dateFormat from "dateformat"; + +import { resultClassName } from "../util"; class ScanView extends React.Component { constructor(props) { @@ -47,9 +56,144 @@ class ScanView extends React.Component { render() { return this.state.object === null ? null : ( - <ScanDetail {...this.state.object} /> + <Card className="scan-detail" variant="outlined"> + <div className="id"> + <a href={`/${this.state.object._id}`}> + #{this.state.object._id} + </a> + </div> + <h2>General info</h2> + + <table> + <tbody> + <tr> + <td>Domain</td> + <td>{this.state.object.domain}</td> + </tr> + <tr> + <td>Endpoint</td> + <td>{`${this.state.object.ip}:${this.props.port}`}</td> + </tr> + <tr> + <td>Hostname</td> + <td>{this.state.object.ptr}</td> + </tr> + <tr> + <td>Owner</td> + <td>{this.state.object.whois_description}</td> + </tr> + <tr> + <td>ASN</td> + <td>{`${this.state.object.asn} (${this.props.asn_country_code})`}</td> + </tr> + <tr> + <td>Abuse mail</td> + <td>{this.state.object.abuse_mail}</td> + </tr> + </tbody> + </table> + + {this.state.object.description && ( + <> + <br /> + <Alert severity="info"> + {this.state.object.description} + </Alert> + </> + )} + + <h2>Custom info</h2> + <Custom {...this.state.object.custom_data} /> + + <h2 + style={{ + display: "flex", + justifyContent: "space-between" + }} + > + <div> + Latest scan: + {dateFormat( + this.state.object.timestamp_in_utc, + "isoUtcDateTime" + )} + </div> + <div> + <Button variant="contained">Re-scan</Button> + </div> + </h2> + + <div id="results"> + {Object.entries(this.state.object.result) + // Sort by vulnerable, investigation_needed, 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 || a[1].investigation_needed + ? -1 + : 1 + ) + .sort((a, b) => (a[1].vulnerable ? -1 : 1)) + .map(([id, res]) => ( + <Result key={id} {...res} /> + ))} + </div> + </Card> ); } } +function Custom(props) { + return ( + <table> + <tbody> + {Object.entries(props).map( + ([key, { data, display_name, description }]) => ( + <CustomElement + key={key} + data={data} + display_name={display_name} + description={description} + /> + ) + )} + </tbody> + </table> + ); +} + +function CustomElement(props) { + return ( + <tr> + <td>{props.display_name}</td> + <td>{props.data.toString()}</td> + <td style={{ fontStyle: "italic" }}>{props.description}</td> + </tr> + ); +} + +function Result(props) { + return ( + <div className="resultContainer"> + <Card className={resultClassName(props)} variant="outlined"> + {props.display_name} + {props.description && ( + <Tooltip title={props.description}> + <InfoOutlinedIcon /> + </Tooltip> + )} + </Card> + {(props.vulnerable || props.investigation_needed) && ( + <Card className="reliability" variant="outlined"> + {props.reliability} + </Card> + )} + </div> + ); +} + export default ScanView; |