From bb7147208452633168a9dfc2aaa67a67096366b9 Mon Sep 17 00:00:00 2001 From: Ernst Widerberg Date: Tue, 7 Jun 2022 16:00:34 +0200 Subject: Make functional: ScanView --- src/components/ScanView.js | 245 ++++++++++++++++++++------------------------- 1 file changed, 110 insertions(+), 135 deletions(-) diff --git a/src/components/ScanView.js b/src/components/ScanView.js index b0c1ccd..58e3269 100644 --- a/src/components/ScanView.js +++ b/src/components/ScanView.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import Alert from "@mui/material/Alert"; import Button from "@mui/material/Button"; @@ -12,31 +12,19 @@ import dateFormat from "dateformat"; import { resultClassName } from "../util"; -class ScanView extends React.Component { - constructor(props) { - super(props); - this.state = { - loaded: false, - rescanInProgress: false - }; +function ScanView(props) { + let [rescanInProgress, setRescanInProgress] = useState(false); + let [data, setData] = useState(null); + let [timestamp, setTimestamp] = useState(null); - this.getData = this.getData.bind(this); - this.rescan = this.rescan.bind(this); - } - - componentDidMount() { - this.getData(); - } + useEffect(getData, []); - getData() { - fetch( - `${window.injectedEnv.COLLECTOR_URL}/sc/v0/get/${this.props.id}`, - { - headers: { - Authorization: "Bearer " + this.props.token - } + function getData() { + fetch(`${window.injectedEnv.COLLECTOR_URL}/sc/v0/get/${props.id}`, { + headers: { + Authorization: "Bearer " + props.token } - ) + }) .then(resp => { if (resp.status !== 200) throw new Error( @@ -45,132 +33,119 @@ class ScanView extends React.Component { return resp.json(); }) .then(json => { - this.setState({ - loaded: true, - ...json.docs, - timestamp: new Date(json.docs.timestamp) - }); + setData(json.docs); + setTimestamp(new Date(json.docs.timestamp)); }) - .catch(e => this.props.setError(e)); + .catch(e => props.setError(e)); } // TODO: Trigger a real re-scan - rescan() { + function rescan() { this.setState({ rescanInProgress: true }); - setTimeout( - () => - this.setState(prevState => ({ - rescanInProgress: false, - timestamp: Date.now() - })), - 2000 - ); + setTimeout(() => { + setRescanInProgress(true); + setTimestamp(Date.now()); + }, 2000); } - render() { + if (data === null) return null; + else { return ( - this.state.loaded && ( - -
- #{this.state._id} + +
+ #{data._id} +
+

General info

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Domain{data.domain}
Endpoint{`${data.ip}:${data.port}`}
Hostname{data.ptr}
Owner{data.whois_description}
ASN{`${data.asn} (${data.asn_country_code})`}
Abuse mail{data.abuse_mail}
+ + {data.description && ( + <> +
+ {data.description} + + )} + +

Custom info

+ + +

+
+ Latest scan:     + {dateFormat(data.timestamp, "isoUtcDateTime")}
-

General info

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Domain{this.state.domain}
Endpoint{`${this.state.ip}:${this.state.port}`}
Hostname{this.state.ptr}
Owner{this.state.whois_description}
ASN{`${this.state.asn} (${this.state.asn_country_code})`}
Abuse mail{this.state.abuse_mail}
- - {this.state.description && ( - <> -
- - {this.state.description} - - - )} - -

Custom info

- - -

-
- Latest scan:     - {dateFormat(this.state.timestamp, "isoUtcDateTime")} -
-
- {this.state.rescanInProgress ? ( - - ) : ( - - )} -
-

- -
- {Object.entries(this.state.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]) => ( - - ))} + {rescanInProgress ? ( + + ) : ( + + )}
-
- ) + + +
+ {Object.entries(data.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]) => ( + + ))} +
+ ); } } -- cgit v1.1