summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/ScanView.js245
1 files 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 && (
- <Card className="scan-detail" variant="outlined">
- <div className="id">
- <a href={`/${this.state._id}`}>#{this.state._id}</a>
+ <Card className="scan-detail" variant="outlined">
+ <div className="id">
+ <a href={`/${data._id}`}>#{data._id}</a>
+ </div>
+ <h2>General info</h2>
+
+ <table>
+ <tbody>
+ <tr>
+ <td>Domain</td>
+ <td>{data.domain}</td>
+ </tr>
+ <tr>
+ <td>Endpoint</td>
+ <td>{`${data.ip}:${data.port}`}</td>
+ </tr>
+ <tr>
+ <td>Hostname</td>
+ <td>{data.ptr}</td>
+ </tr>
+ <tr>
+ <td>Owner</td>
+ <td>{data.whois_description}</td>
+ </tr>
+ <tr>
+ <td>ASN</td>
+ <td>{`${data.asn} (${data.asn_country_code})`}</td>
+ </tr>
+ <tr>
+ <td>Abuse mail</td>
+ <td>{data.abuse_mail}</td>
+ </tr>
+ </tbody>
+ </table>
+
+ {data.description && (
+ <>
+ <br />
+ <Alert severity="info">{data.description}</Alert>
+ </>
+ )}
+
+ <h2>Custom info</h2>
+ <Custom {...data.custom_data} />
+
+ <h2
+ style={{
+ display: "flex",
+ justifyContent: "space-between"
+ }}
+ >
+ <div>
+ Latest scan: &nbsp;&nbsp;&nbsp;
+ {dateFormat(data.timestamp, "isoUtcDateTime")}
</div>
- <h2>General info</h2>
-
- <table>
- <tbody>
- <tr>
- <td>Domain</td>
- <td>{this.state.domain}</td>
- </tr>
- <tr>
- <td>Endpoint</td>
- <td>{`${this.state.ip}:${this.state.port}`}</td>
- </tr>
- <tr>
- <td>Hostname</td>
- <td>{this.state.ptr}</td>
- </tr>
- <tr>
- <td>Owner</td>
- <td>{this.state.whois_description}</td>
- </tr>
- <tr>
- <td>ASN</td>
- <td>{`${this.state.asn} (${this.state.asn_country_code})`}</td>
- </tr>
- <tr>
- <td>Abuse mail</td>
- <td>{this.state.abuse_mail}</td>
- </tr>
- </tbody>
- </table>
-
- {this.state.description && (
- <>
- <br />
- <Alert severity="info">
- {this.state.description}
- </Alert>
- </>
- )}
-
- <h2>Custom info</h2>
- <Custom {...this.state.custom_data} />
-
- <h2
+ <div
style={{
+ width: "93px",
+ height: "37px",
display: "flex",
- justifyContent: "space-between"
+ flexDirection: "vertical",
+ justifyContent: "center",
+ alignItems: "center"
}}
>
- <div>
- Latest scan: &nbsp;&nbsp;&nbsp;
- {dateFormat(this.state.timestamp, "isoUtcDateTime")}
- </div>
- <div
- style={{
- width: "93px",
- height: "37px",
- display: "flex",
- flexDirection: "vertical",
- justifyContent: "center",
- alignItems: "center"
- }}
- >
- {this.state.rescanInProgress ? (
- <CircularProgress size="37px" />
- ) : (
- <Button
- variant="contained"
- onClick={this.rescan}
- >
- Re-scan
- </Button>
- )}
- </div>
- </h2>
-
- <div id="results">
- {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]) => (
- <Result key={id} {...res} />
- ))}
+ {rescanInProgress ? (
+ <CircularProgress size="37px" />
+ ) : (
+ <Button variant="contained" onClick={rescan}>
+ Re-scan
+ </Button>
+ )}
</div>
- </Card>
- )
+ </h2>
+
+ <div id="results">
+ {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]) => (
+ <Result key={id} {...res} />
+ ))}
+ </div>
+ </Card>
);
}
}