Merge redesign (refs/archive/redesign-2022-03-30)

5 files changed, 120 insertions, 92 deletions

diff --git a/src/components/App.js b/src/components/App.js
index cc89ca8..8eda93e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -9,9 +9,9 @@ import {
 
 import Error from "./Error";
 import Header from "./Header";
-import List from "./List";
+import ListView from "./ListView";
 import Login from "./Login";
-import ObjectView from "./ObjectView";
+import ScanView from "./ScanView";
 
 import "../styles/main.css";
 
@@ -63,13 +63,13 @@ class App extends React.Component {
                 <Header clearToken={this.clearToken} />
                 <Switch>
                     <Route path="/:id">
-                        <MakeObjectView
+                        <MakeScanView
                             token={this.state.token}
                             setError={this.setError}
                         />
                     </Route>
                     <Route path="/">
-                        <List
+                        <ListView
                             token={this.state.token}
                             setError={this.setError}
                         />
@@ -80,9 +80,9 @@ class App extends React.Component {
     }
 }
 
-function MakeObjectView(props) {
+function MakeScanView(props) {
     let { id } = useParams();
-    return <ObjectView id={id} token={props.token} setError={props.setError} />;
+    return <ScanView id={id} token={props.token} setError={props.setError} />;
 }
 
 export default App;
diff --git a/src/components/ListItem.js b/src/components/ListItem.js
new file mode 100644
index 0000000..661f8c2
--- /dev/null
+++ b/src/components/ListItem.js
@@ -0,0 +1,41 @@
+import React from "react";
+
+import Card from "@mui/material/Card";
+
+class ListItem extends React.Component {
+    render() {
+        return (
+            <tr
+                className="list-item"
+                variant="outlined"
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    paddingTop: "1em",
+                    paddingBottom: "1em"
+                }}
+                onClick={() => (window.location = `/${this.props._id}`)}
+            >
+                <td>{this.props.timestamp_in_utc}</td>
+                <td>
+                    {this.props.ip}:{this.props.port}
+                </td>
+                <td>{this.props.domain}</td>
+                <td>{this.props.system_name}</td>
+                <td>
+                    <Card
+                        className={
+                            "cve" + (this.props.vulnerable ? " vulnerable" : "")
+                        }
+                        variant="outlined"
+                    >
+                        {this.props.cve}
+                    </Card>
+                </td>
+            </tr>
+        );
+    }
+}
+
+export default ListItem;
diff --git a/src/components/List.js b/src/components/ListView.js
index acfc369..f68efe4 100644
--- a/src/components/List.js
+++ b/src/components/ListView.js
@@ -2,14 +2,14 @@ import React from "react";
 
 import Pagination from "@mui/material/Pagination";
 
-import ObjectComponent from "./ObjectComponent";
+import ListItem from "./ListItem";
 import SearchForm from "./SearchForm";
 
-class List extends React.Component {
+class ListView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            objects: [],
+            scans: [],
             filter: {
                 field: null,
                 value: null
@@ -79,7 +79,7 @@ class List extends React.Component {
                         `Unexpected status from soc_collector: ${json.status}`
                     );
                 this.setState({
-                    objects: json.docs
+                    scans: json.docs
                 });
             })
             .catch(e => this.props.setError(e));
@@ -118,17 +118,22 @@ class List extends React.Component {
                         <SearchForm filter={this.filter} />
                     </div>
                 </div>
-                <div id="main">
-                    {this.state.objects.map(data => {
-                        return (
-                            <ObjectComponent
-                                summary={true}
-                                {...data}
-                                key={data._id}
-                            />
-                        );
-                    })}
-                </div>
+                <table id="main">
+                    <tbody>
+                        {this.state.scans
+                            .map(scan =>
+                                scan.result.map(res => (
+                                    <ListItem
+                                        summary={true}
+                                        {...scan}
+                                        {...res}
+                                        key={scan._id + res.cve}
+                                    />
+                                ))
+                            )
+                            .flat()}
+                    </tbody>
+                </table>
                 <div id="pagination">
                     <Pagination
                         page={this.state.page}
@@ -145,4 +150,4 @@ class List extends React.Component {
     }
 }
 
-export default List;
+export default ListView;
diff --git a/src/components/ObjectComponent.js b/src/components/ScanDetail.js
index 2ae0b6e..a5f6d16 100644
--- a/src/components/ObjectComponent.js
+++ b/src/components/ScanDetail.js
@@ -1,19 +1,17 @@
 import React from "react";
 
-import Accordion from "@mui/material/Accordion";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import AccordionSummary from "@mui/material/AccordionSummary";
 import Alert from "@mui/material/Alert";
 import Card from "@mui/material/Card";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-class ObjectComponent extends React.Component {
+class ScanDetail extends React.Component {
     render() {
         return (
-            <Card className="object" variant="outlined">
+            <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>
@@ -40,50 +38,48 @@ class ObjectComponent extends React.Component {
                             <td>Abuse mail</td>
                             <td>{this.props.abuse_mail}</td>
                         </tr>
-                        <tr>
-                            <td>Scan finished at</td>
-                            <td>{this.props.timestamp_in_utc}</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) {
-    let content = (
+    return (
         <>
-            {props.user_presentation.description && (
-                <Alert severity="info" sx={{ marginTop: "1em" }}>
-                    {props.user_presentation.description}
-                </Alert>
-            )}
             <UserPresentation
                 description={props.user_presentation.description}
                 data={props.user_presentation.data}
             />
         </>
     );
-    if (props.summary) {
-        return (
-            <div>
-                <Accordion elevation={0} disableGutters={true}>
-                    <AccordionSummary
-                        expandIcon={<ExpandMoreIcon fontSize="small" />}
-                    ></AccordionSummary>
-                    <AccordionDetails>{content}</AccordionDetails>
-                </Accordion>
-            </div>
-        );
-    }
-    return content;
 }
 
 function UserPresentation(props) {
     return (
-        <div className="user-presentation" style={{ marginTop: "2em" }}>
+        <table className="user-presentation">
             {Object.entries(props.data).map(
                 ([key, { data, display_name, description }]) => (
                     <UserPresentationElement
@@ -94,42 +90,29 @@ function UserPresentation(props) {
                     />
                 )
             )}
-        </div>
+        </table>
     );
 }
 
 function UserPresentationElement(props) {
     return (
-        <Card
-            className="user-presentation-element"
-            variant="outlined"
-            sx={{ padding: "1em", marginTop: "1em" }}
-        >
-            <b>{props.display_name}</b>: {props.data.toString()}
-            {props.description && (
-                <Alert severity="info" sx={{ marginTop: "0.5em" }}>
-                    {props.description}
-                </Alert>
-            )}
-        </Card>
+        <tr>
+            <td>{props.display_name}</td>
+            <td>{props.data.toString()}</td>
+            <td style={{ fontStyle: "italic" }}>{props.description}</td>
+        </tr>
     );
 }
 
-function GenericTable(props) {
+function CVE(props) {
     return (
-        <table>
-            <tbody>
-                {Object.entries(props.data).map(([key, value]) => {
-                    return (
-                        <tr key={key}>
-                            <td>{key}</td>
-                            <td>{value}</td>
-                        </tr>
-                    );
-                })}
-            </tbody>
-        </table>
+        <Card
+            className={"cve" + (props.vulnerable ? " vulnerable" : "")}
+            variant="outlined"
+        >
+            {props.cve}
+        </Card>
     );
 }
 
-export default ObjectComponent;
+export default ScanDetail;
diff --git a/src/components/ObjectView.js b/src/components/ScanView.js
index 76479c2..aefd287 100644
--- a/src/components/ObjectView.js
+++ b/src/components/ScanView.js
@@ -1,8 +1,8 @@
 import React from "react";
 
-import ObjectComponent from "./ObjectComponent";
+import ScanDetail from "./ScanDetail";
 
-class ObjectView extends React.Component {
+class ScanView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -17,11 +17,14 @@ class ObjectView extends React.Component {
     }
 
     getData() {
-        fetch(`${window.injectedEnv.COLLECTOR_URL}/sc/v0/get/${this.props.id}`, {
-            headers: {
-                Authorization: "Bearer " + this.props.token
+        fetch(
+            `${window.injectedEnv.COLLECTOR_URL}/sc/v0/get/${this.props.id}`,
+            {
+                headers: {
+                    Authorization: "Bearer " + this.props.token
+                }
             }
-        })
+        )
             // TODO: Look at `status` or return code or both?
             .then(resp => {
                 if (resp.status !== 200)
@@ -43,14 +46,10 @@ class ObjectView extends React.Component {
     }
 
     render() {
-        return (
-            <div id="object-view">
-                {this.state.object === null ? null : (
-                    <ObjectComponent {...this.state.object} />
-                )}
-            </div>
+        return this.state.object === null ? null : (
+            <ScanDetail {...this.state.object} />
         );
     }
 }
 
-export default ObjectView;
+export default ScanView;