1 files changed, 118 insertions, 0 deletions
diff --git a/src/components/ScanDetail.js b/src/components/ScanDetail.js
new file mode 100644
index 0000000..a5f6d16
--- /dev/null
+++ b/src/components/ScanDetail.js
@@ -0,0 +1,118 @@
+import React from "react";
+
+import Alert from "@mui/material/Alert";
+import Card from "@mui/material/Card";
+
+class ScanDetail extends React.Component {
+    render() {
+        return (
+            <Card className="scan-detail" variant="outlined">
+                <div className="id">
+                    <a href={`/${this.props._id}`}>#{this.props._id}</a>
+                </div>
+                <h2>General info</h2>
+
+                <table>
+                    <tbody>
+                        <tr>
+                            <td>Domain</td>
+                            <td>{this.props.domain}</td>
+                        </tr>
+                        <tr>
+                            <td>Endpoint</td>
+                            <td>{`${this.props.ip}:${this.props.port}`}</td>
+                        </tr>
+                        <tr>
+                            <td>Hostname</td>
+                            <td>{this.props.ptr}</td>
+                        </tr>
+                        <tr>
+                            <td>Owner</td>
+                            <td>{this.props.whois_description}</td>
+                        </tr>
+                        <tr>
+                            <td>ASN</td>
+                            <td>{`${this.props.asn} (${this.props.asn_country_code})`}</td>
+                        </tr>
+                        <tr>
+                            <td>Abuse mail</td>
+                            <td>{this.props.abuse_mail}</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                {this.props.user_presentation.description && (
+                    <>
+                        <br />
+                        <Alert severity="info">
+                            {this.props.user_presentation.description}
+                        </Alert>
+                    </>
+                )}
+
+                <h2>Custom info</h2>
+                <Details {...this.props} />
+
+                <h2>Latest scan | {this.props.timestamp_in_utc}</h2>
+                <div id="cves">
+                    {this.props.result
+                        .sort((a, b) => (a.vulnerable ? -1 : 1))
+                        .map(cve => (
+                            <CVE {...cve} />
+                        ))}
+                </div>
+            </Card>
+        );
+    }
+}
+
+function Details(props) {
+    return (
+        <>
+            <UserPresentation
+                description={props.user_presentation.description}
+                data={props.user_presentation.data}
+            />
+        </>
+    );
+}
+
+function UserPresentation(props) {
+    return (
+        <table className="user-presentation">
+            {Object.entries(props.data).map(
+                ([key, { data, display_name, description }]) => (
+                    <UserPresentationElement
+                        key={key}
+                        data={data}
+                        display_name={display_name}
+                        description={description}
+                    />
+                )
+            )}
+        </table>
+    );
+}
+
+function UserPresentationElement(props) {
+    return (
+        <tr>
+            <td>{props.display_name}</td>
+            <td>{props.data.toString()}</td>
+            <td style={{ fontStyle: "italic" }}>{props.description}</td>
+        </tr>
+    );
+}
+
+function CVE(props) {
+    return (
+        <Card
+            className={"cve" + (props.vulnerable ? " vulnerable" : "")}
+            variant="outlined"
+        >
+            {props.cve}
+        </Card>
+    );
+}
+
+export default ScanDetail;