Various UI Improvements

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

@@ -113,12 +113,18 @@ class ZeroTrustReportPageComponent extends AuthComponent {
                              grades={this.state.pillars.grades}/>
           </Col>
           <Col xs={4} sm={4} md={4} lg={4}>
-            <StatusesToPillarsSummary statusesToPillars={this.state.pillars.statusesToPillars}/>
+            <ZeroTrustReportLegend/>
           </Col>
         </Row>
         <Row>
           <Col xs={12} sm={12} md={12} lg={12}>
-            <ZeroTrustReportLegend/>
+            <h4>What am I seeing?</h4>
+            <p>
+              The <a href="https://www.forrester.com/report/The+Zero+Trust+eXtended+ZTX+Ecosystem/-/E-RES137210">Zero Trust eXtended framework</a> 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>
           </Col>
         </Row>
       </Grid>

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

@@ -5,7 +5,7 @@ import FileSaver from "file-saver";
 import * as PropTypes from "prop-types";
 import ExportEventsButton from "./ExportEventsButton";
 
-export default class EventsButtonsComponent extends Component {
+export default class EventsButton extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -27,7 +27,7 @@ export default class EventsButtonsComponent extends Component {
         <EventsModal events={this.props.events} showEvents={this.state.isShow} hideCallback={this.hide} exportFilename={this.props.exportFilename} />
         <div className="text-center" style={{"display": "grid"}}>
           <Button className="btn btn-primary btn-lg" onClick={this.show}>
-            Show Events
+            <i className="fa fa-list"/> Events
           </Button>
         </div>
       </div>
@@ -36,7 +36,7 @@ export default class EventsButtonsComponent extends Component {
 
 }
 
-EventsButtonsComponent.propTypes = {
+EventsButton.propTypes = {
   events: PropTypes.array,
   exportFilename: PropTypes.string,
 };

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

@@ -7,7 +7,7 @@ export default class ExportEventsButton extends Component {
     return <Button className="btn btn-primary btn-lg"
                    onClick={this.props.onClick}
     >
-      Export Events
+      <i className="fa fa-download"/> Export
     </Button>
   }
 }

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

@@ -1,6 +1,6 @@
 import React, {Component, Fragment} from "react";
 import PillarLabel from "./PillarLabel";
-import EventsButtonsComponent from "./EventsButtonsComponent";
+import EventsButton from "./EventsButton";
 import {ZeroTrustStatuses} from "./ZeroTrustPillars";
 import {FindingsTable} from "./FindingsTable";
 

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

@@ -3,7 +3,7 @@ import StatusLabel from "./StatusLabel";
 import PaginatedTable from "../common/PaginatedTable";
 import * as PropTypes from "prop-types";
 import PillarLabel from "./PillarLabel";
-import EventsButtonsComponent from "./EventsButtonsComponent";
+import EventsButton from "./EventsButton";
 
 const columns = [
   {
@@ -16,7 +16,7 @@ const columns = [
       {
         Header: 'Events', id: "events",
         accessor: x => {
-          return <EventsButtonsComponent events={x.events} exportFilename={"Events_" + x.test_key}/>;
+          return <EventsButton events={x.events} exportFilename={"Events_" + x.test_key}/>;
         },
         maxWidth: 160,
       },

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

@@ -27,41 +27,35 @@ class ZeroTrustReportLegend extends Component {
 
   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={{listStyle: "none"}}>
         <li>
           <div style={{display: "inline-block"}}>
             <StatusLabel showText={true} status={ZeroTrustStatuses.failed}/>
           </div>
-          {"\t"}The test failed; the monkeys found something wrong.
+          {"\t"}Some tests 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.
+          {"\t"}The test ran; manual verification is required to determine the results.
         </li>
         <li>
           <div style={{display: "inline-block"}}>
             <StatusLabel showText={true} status={ZeroTrustStatuses.passed}/>
           </div>
-          {"\t"}This status means the test passed 🙂
+          {"\t"}The test passed, so this is OK 🙂
         </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>.
+          {"\t"}This status means the test wasn't executed.
         </li>
       </ul>
+      <hr />
+      Some of the tests can be activated using the <NavLink to="/configuration"><u>configuration</u></NavLink>.
     </div>;
   }
 }