Extracted status label

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>
+        {overviewSection}
-        <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>
         {directivesSection}
         {findingSection}
       </div>;

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/>;
   }
 }
 

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",

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) => {

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};