Added a collapsible report legend and redid the Summary section

monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js

@@ -12,6 +12,7 @@ import SecurityIssuesGlance from "../report-components/common/SecurityIssuesGlan
 import StatusesToPillarsSummary from "../report-components/zerotrust/StatusesToPillarsSummary";
 import PrintReportButton from "../report-components/common/PrintReportButton";
 import {extractExecutionStatusFromServerResponse} from "../report-components/common/ExecutionStatus";
+import ZeroTrustReportLegend from "../report-components/zerotrust/ReportLegend";
 
 class ZeroTrustReportPageComponent extends AuthComponent {
 
@@ -114,16 +115,25 @@ class ZeroTrustReportPageComponent extends AuthComponent {
 
   generateOverviewSection() {
     return (<div id="overview-section">
-      <h2>Overview</h2>
+      <h2>Summary</h2>
       <Grid fluid={true}>
+        <Row>
+          <Col xs={6} sm={6} md={6} lg={6}>
+            <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
+            <p>
+              Get a quick glance of the status for each of Zero Trust's seven pillars.
+            </p>
+          </Col>
+          <Col xs={6} sm={6} md={6} lg={6}>
+            <ZeroTrustReportLegend />
+          </Col>
+        </Row>
         <Row className="show-grid">
           <Col xs={8} sm={8} md={8} lg={8}>
             <PillarsOverview pillarsToStatuses={this.state.pillars.pillarsToStatuses}
                              grades={this.state.pillars.grades}/>
           </Col>
           <Col xs={4} sm={4} md={4} lg={4}>
-            <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
-            <SecurityIssuesGlance issuesFound={this.anyIssuesFound()}/>
             <StatusesToPillarsSummary statusesToPillars={this.state.pillars.statusesToPillars}/>
           </Col>
         </Row>

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/ReportLegend.js

@@ -0,0 +1,69 @@
+import React, {Component} from "react";
+import StatusLabel from "./StatusLabel";
+import {ZeroTrustStatuses} from "./ZeroTrustPillars";
+import {NavLink} from "react-router-dom";
+import {Panel} from "react-bootstrap";
+
+
+class ZeroTrustReportLegend extends Component {
+  render() {
+    const legendContent = this.getLegendContent();
+
+    return (
+      <Panel>
+        <Panel.Heading>
+          <Panel.Title toggle>
+            <h3>🔽 Legend</h3>
+          </Panel.Title>
+        </Panel.Heading>
+        <Panel.Collapse>
+          <Panel.Body>
+            {legendContent}
+          </Panel.Body>
+        </Panel.Collapse>
+      </Panel>
+    );
+  }
+
+  getLegendContent() {
+    return <div id={this.constructor.name}>
+      <h4>What is this?</h4>
+      <p>
+        The Zero Trust eXtended framework categorizes its <b>recommendations</b> into 7 <b>pillars</b>. Infection Monkey
+        Zero Trust edition tests some of those recommendations. The <b>tests</b> that the monkey executes
+        produce <b>findings</b>. The tests, recommendations and pillars are then granted a <b>status</b> in accordance
+        with the tests results.
+      </p>
+      <h4>Statuses</h4>
+      <ul style={{"list-style": "none"}}>
+        <li>
+          <div style={{display: "inline-block"}}>
+            <StatusLabel showText={true} status={ZeroTrustStatuses.conclusive}/>
+          </div>
+          {"\t"}The test failed; the monkeys found something wrong.
+        </li>
+        <li>
+          <div style={{display: "inline-block"}}>
+            <StatusLabel showText={true} status={ZeroTrustStatuses.inconclusive}/>
+          </div>
+          {"\t"}The test was executed, but manual verification is required to determine the results.
+        </li>
+        <li>
+          <div style={{display: "inline-block"}}>
+            <StatusLabel showText={true} status={ZeroTrustStatuses.positive}/>
+          </div>
+          {"\t"}This status means the test passed 🙂
+        </li>
+        <li>
+          <div style={{display: "inline-block"}}>
+            <StatusLabel showText={true} status={ZeroTrustStatuses.unexecuted}/>
+          </div>
+          {"\t"}This status means the test wasn't executed. Some of the tests can be activated or deactivated using
+          the <NavLink to="/configuration">configuration</NavLink>.
+        </li>
+      </ul>
+    </div>;
+  }
+}
+
+export default ZeroTrustReportLegend;

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js

@@ -22,9 +22,11 @@ export default class StatusLabel extends Component {
       text = " " + this.props.status;
     }
 
-    return (<div className={"label " + statusToLabelType[this.props.status]} style={{display: "flow-root"}}>
+    return (
-      <i className={"fa " + statusToIcon[this.props.status] + " " + this.props.size}/>{text}
+      <div className={"label " + statusToLabelType[this.props.status]} style={{display: "flow-root"}}>
-    </div>);
+        <i className={"fa " + statusToIcon[this.props.status] + " " + this.props.size}/>{text}
+      </div>
+    );
   }
 }
 

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/ZeroTrustPillars.js

@@ -8,4 +8,11 @@ export const ZeroTrustPillars = {
   automation: "Automation & Orchestration"
 };
 
+export const ZeroTrustStatuses = {
+  conclusive: "Conclusive",
+  inconclusive: "Inconclusive",
+  positive: "Positive",
+  unexecuted: "Unexecuted"
+};
+
 export default ZeroTrustPillars;