diff options
author | Ernst Widerberg <ernst@sunet.se> | 2021-11-25 10:29:32 +0100 |
---|---|---|
committer | Ernst Widerberg <ernst@sunet.se> | 2021-11-25 10:29:32 +0100 |
commit | 4aee6b3ab1bb21ab1e9ff8f0725c662fd8431f5b (patch) | |
tree | 083f261b4cc3b77d1492330ba6c9f0329b7cb4a8 /src | |
parent | fe6f249df494aff69455beb5c1b3e69dc658eaf0 (diff) |
Edit ObjectComponent content and style
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ObjectComponent.js | 100 | ||||
-rw-r--r-- | src/styles/main.css | 23 |
2 files changed, 57 insertions, 66 deletions
diff --git a/src/components/ObjectComponent.js b/src/components/ObjectComponent.js index 2ffea3a..5074aa9 100644 --- a/src/components/ObjectComponent.js +++ b/src/components/ObjectComponent.js @@ -1,50 +1,57 @@ import React from "react"; +import Alert from "@mui/material/Alert"; import Card from "@mui/material/Card"; class ObjectComponent extends React.Component { render() { - let { - _id, - _rev, - document_version, - user_presentation, - ip, - port, - whois_description, - asn, - asn_country_code, - ...rest - } = this.props; return ( <Card className="object" variant="outlined"> <div className="id"> - <a href={`/${_id}`}>#{_id}</a> + <a href={`/${this.props._id}`}>#{this.props._id}</a> </div> <table> <tbody> <tr> - <td>Address</td> - <td>{`${ip}:${port}`}</td> + <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>{whois_description}</td> + <td>{this.props.whois_description}</td> </tr> <tr> <td>ASN</td> - <td>{`${asn} (${asn_country_code})`}</td> + <td>{`${this.props.asn} (${this.props.asn_country_code})`}</td> + </tr> + <tr> + <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> - {/* TODO: Fill out with more info */} </tbody> </table> - {/* TODO */} - {/* <GenericTable data={rest} /> */} + {this.props.user_presentation.description && ( + <Alert severity="info" sx={{ marginTop: "1em" }}> + {this.props.user_presentation.description} + </Alert> + )} <UserPresentation - description={user_presentation.description} - data={user_presentation.data} + description={this.props.user_presentation.description} + data={this.props.user_presentation.data} /> </Card> ); @@ -70,35 +77,32 @@ function GenericTable(props) { function UserPresentation(props) { return ( - <div className="user-presentation"> - <hr /> - {props.description && ( - <div className="description">{props.description}</div> + <div className="user-presentation" style={{ marginTop: "2em" }}> + {Object.entries(props.data).map( + ([key, { data, display_name, description }]) => ( + <UserPresentationElement + key={key} + data={data} + display_name={display_name} + description={description} + /> + ) )} - <table> - <tbody> - {Object.entries(props.data).map( - ([key, { data, display_name, description }]) => { - return ( - <React.Fragment key={key}> - <tr> - <td>{display_name}</td> - <td>{data.toString()}</td> - </tr> - {description && ( - <tr className="description"> - <td colSpan="2">{description}</td> - </tr> - )} - <tr className="spacer"></tr> - </React.Fragment> - ); - } - )} - </tbody> - </table> </div> ); } +function UserPresentationElement(props) { + return ( + <Card 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> + ); +} + export default ObjectComponent; diff --git a/src/styles/main.css b/src/styles/main.css index 794b217..049800a 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -5,6 +5,11 @@ body { line-height: 1.2; } +a, +a:visited { + color: blue; +} + #root { display: flex; } @@ -61,24 +66,6 @@ body { padding-right: 2em; } -.object .user-presentation { - margin-top: 2em; -} - -.object > .user-presentation > .description { - margin-top: 2em; - font-style: italic; - margin-bottom: 1em; -} - -.object > .user-presentation > table .description { - font-style: italic; -} - -.object > .user-presentation > table .spacer { - height: 1em; -} - /* List */ #list-container > #controls { |