From e4cf3706ec74a5a315a5472faf0560fb8398e107 Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Thu, 15 Aug 2019 10:42:19 +0300
Subject: [PATCH] Extracted status label
---
.../components/pages/ZeroTrustReportPage.js | 32 +++++++++++--------
.../zerotrust/DirectivesStatusTable.js | 23 +++++++------
.../zerotrust/PillarLabel.js | 2 +-
.../zerotrust/PillarsSummary.js | 5 ++-
.../zerotrust/StatusLabel.js | 24 ++++++++++++++
5 files changed, 58 insertions(+), 28 deletions(-)
create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
index fd464da80..5795c275f 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
@@ -62,8 +62,24 @@ class ZeroTrustReportPageComponent extends AuthComponent {
if (this.stillLoadingDataFromServer()) {
content = <ReportLoader loading={true}/>;
} else {
+ const overviewSection = <div id="overview-section">
+ <h2>Overview</h2>
+ <Grid fluid={true}>
+ <Row className="show-grid">
+ <Col xs={8} sm={8} md={8} lg={8}>
+ <PillarsOverview pillars={this.state.pillars}/>
+ </Col>
+ <Col xs={4} sm={4} md={4} lg={4}>
+ <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
+ <SecurityIssuesGlance issuesFound={this.anyIssuesFound()}/>
+ <PillarsSummary pillars={this.state.pillars.summary}/>
+ </Col>
+ </Row>
+ </Grid>
+ </div>;
+
const directivesSection = <div id="directives-overview">
- <h2>Directives status</h2>
+ <h2>Directives</h2>
{
Object.keys(this.state.directives).map((pillar) =>
<SinglePillarDirectivesStatus
@@ -80,19 +96,7 @@ class ZeroTrustReportPageComponent extends AuthComponent {
</div>;
content = <div id="MainContentSection">
- <h2>Overview</h2>
- <Grid fluid={true}>
- <Row className="show-grid">
- <Col xs={8} sm={8} md={8} lg={8}>
- <PillarsOverview pillars={this.state.pillars}/>
- </Col>
- <Col xs={4} sm={4} md={4} lg={4}>
- <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead} />
- <SecurityIssuesGlance issuesFound={this.anyIssuesFound()} />
- <PillarsSummary pillars={this.state.pillars.summary}/>
- </Col>
- </Row>
- </Grid>
+ {overviewSection}
{directivesSection}
{findingSection}
</div>;
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js
index 4f413f37f..8b82761cc 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js
@@ -1,14 +1,10 @@
-import React from "react";
+import React, {Fragment} from "react";
import PaginatedTable from "../common/PaginatedTable";
import AuthComponent from "../../AuthComponent";
import 'styles/ZeroTrustPillars.css'
+import {StatusLabel} from "./StatusLabel";
+
-const statusToIcon = {
- "Positive": "fa-clipboard-check status-success",
- "Inconclusive": "fa-exclamation-triangle status-warning",
- "Conclusive": "fa-bomb status-danger",
- "Unexecuted": "fa-question status-default",
-};
const columns = [
{
@@ -19,7 +15,7 @@ const columns = [
},
{ Header: 'Status', id: 'status',
accessor: x => {
- return <i className={"fa " + statusToIcon[x.status] + " fa-3x"} />;
+ return <StatusLabel status={x.status} size="fa-3x" showText={false} />;
}
},
{ Header: 'Tests', id: 'tests',
@@ -39,12 +35,12 @@ class TestsStatus extends AuthComponent {
const unexecutedStatus = "Unexecuted";
return (
- <div>
+ <Fragment>
{this.getTestsOfStatusIfAny(conclusiveStatus)}
{this.getTestsOfStatusIfAny(inconclusiveStatus)}
{this.getTestsOfStatusIfAny(positiveStatus)}
{this.getTestsOfStatusIfAny(unexecutedStatus)}
- </div>
+ </Fragment>
);
}
@@ -58,9 +54,12 @@ class TestsStatus extends AuthComponent {
const listItems = filteredTests.map((test) => {
return (<li key={test.test}>{test.test}</li>)
});
- return <div><i className={"fa " + statusToIcon[statusToFilter]}/> {statusToFilter}<ul>{listItems}</ul></div>;
+ return <Fragment>
+ <StatusLabel status={statusToFilter} showText={true}/>
+ <ul>{listItems}</ul>
+ </Fragment>;
}
- return <div/>;
+ return <Fragment/>;
}
}
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js
index 958327a37..b6b588876 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js
@@ -18,7 +18,7 @@ export class PillarLabel extends Component {
const pillarToIcon = {
"Data": "fa fa-database",
"People": "fa fa-user",
- "Networks": "fa fa-tty",
+ "Networks": "fa fa-wifi",
"Workloads": "fa fa-cloud",
"Devices": "fa fa-laptop",
"Visibility & Analytics": "fa fa-eye-slash",
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarsSummary.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarsSummary.js
index 8881eba7d..962afdd3c 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarsSummary.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarsSummary.js
@@ -1,5 +1,6 @@
import React, {Component, Fragment} from "react";
import {PillarLabel} from "./PillarLabel";
+import {StatusLabel} from "./StatusLabel";
export class PillarsSummary extends Component {
render() {
@@ -15,7 +16,9 @@ export class PillarsSummary extends Component {
console.log(this.props.pillars);
if (this.props.pillars[status].length > 0) {
return <Fragment>
- <h3>{status}</h3>
+ <h3>
+ <StatusLabel showText={true} status={status}/>
+ </h3>
<div>
{
this.props.pillars[status].map((pillar) => {
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js
new file mode 100644
index 000000000..98ac1edb6
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js
@@ -0,0 +1,24 @@
+import React, {Component, Fragment} from "react";
+import * as PropTypes from "prop-types";
+
+const statusToIcon = {
+ "Positive": "fa-check status-success",
+ "Inconclusive": "fa-exclamation-triangle status-warning",
+ "Conclusive": "fa-bomb status-danger",
+ "Unexecuted": "fa-question status-default",
+};
+
+export class StatusLabel extends Component {
+ render() {
+ const classname = "fa " + statusToIcon[this.props.status] + " " + this.props.size;
+ let text = "";
+ if (this.props.showText) {
+ text = " " + this.props.status;
+ }
+ return (<Fragment>
+ <i className={classname}/>{text}
+ </Fragment>);
+ }
+}
+
+StatusLabel.propTypes = {status: PropTypes.string, showText: PropTypes.bool};