Refactored directives to recommendations (still WIP)

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

@@ -4,7 +4,7 @@ import AuthComponent from '../AuthComponent';
 import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader";
 import PillarsOverview from "../report-components/zerotrust/PillarOverview";
 import FindingsTable from "../report-components/zerotrust/FindingsTable";
-import SinglePillarDirectivesStatus from "../report-components/zerotrust/SinglePillarDirectivesStatus";
+import SinglePillarRecommendationsStatus from "../report-components/zerotrust/SinglePillarRecommendationsStatus";
 import MonkeysStillAliveWarning from "../report-components/common/MonkeysStillAliveWarning";
 import ReportLoader from "../report-components/common/ReportLoader";
 import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
@@ -103,18 +103,18 @@ class ZeroTrustReportPageComponent extends AuthComponent {
   }
 
   generateDirectivesSection() {
-    return (<div id="directives-overview">
-      <h2>Directives</h2>
+    return (<div id="recommendations-overview">
+      <h2>Recommendations</h2>
       <p>
         Analyze each zero trust recommendation by pillar, and see if you've followed through with it. See test results
         to understand how the monkey tested your adherence to that recommendation.
       </p>
       {
         Object.keys(this.state.directives).map((pillar) =>
-          <SinglePillarDirectivesStatus
+          <SinglePillarRecommendationsStatus
             key={pillar}
             pillar={pillar}
-            directivesStatus={this.state.directives[pillar]}
+            recommendationsStatus={this.state.directives[pillar]}
             pillarsToStatuses={this.state.pillars.pillarsToStatuses}/>
         )
       }
@@ -126,15 +126,12 @@ class ZeroTrustReportPageComponent extends AuthComponent {
       <h2>Summary</h2>
       <Grid fluid={true}>
         <Row>
-          <Col xs={6} sm={6} md={6} lg={6}>
+          <Col xs={12} sm={12} md={12} lg={12}>
             <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}>
@@ -145,6 +142,11 @@ class ZeroTrustReportPageComponent extends AuthComponent {
             <StatusesToPillarsSummary statusesToPillars={this.state.pillars.statusesToPillars}/>
           </Col>
         </Row>
+        <Row>
+          <Col xs={12} sm={12} md={12} lg={12}>
+            <ZeroTrustReportLegend />
+          </Col>
+        </Row>
       </Grid>
     </div>);
   }

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

@@ -13,7 +13,7 @@ const columns = [
           const pillarLabels = pillars.map((pillar) =>
             <PillarLabel key={pillar.name} pillar={pillar.name} status={pillar.status}/>
           );
-          return <Fragment>{pillarLabels}</Fragment>;
+          return <div style={{"text-align": "center"}}>{pillarLabels}</div>;
         },
         maxWidth: 200,
         style: {'whiteSpace': 'unset'}

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

@@ -15,7 +15,7 @@ const columns = [
         },
         maxWidth: 80
       },
-      { Header: 'Directive', accessor: 'directive',
+      { Header: 'Recommendation', accessor: 'directive',
         style: {'whiteSpace': 'unset'}  // This enables word wrap
       },
       { Header: 'Tests', id: 'tests',
@@ -64,12 +64,12 @@ class TestsStatus extends AuthComponent {
   }
 }
 
-export class DirectivesStatusTable extends AuthComponent {
+export class RecommendationsStatusTable extends AuthComponent {
   render() {
     return <PaginatedTable data={this.props.directivesStatus} columns={columns} pageSize={5}/>;
   }
 }
 
-export default DirectivesStatusTable;
+export default RecommendationsStatusTable;
 
-DirectivesStatusTable.propTypes = {directivesStatus: PropTypes.array};
+RecommendationsStatusTable.propTypes = {directivesStatus: PropTypes.array};

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

@@ -13,7 +13,7 @@ class ZeroTrustReportLegend extends Component {
       <Panel>
         <Panel.Heading>
           <Panel.Title toggle>
-            <h3>🔽 Legend</h3>
+            <h3><i className="fa fa-chevron-down" /> Legend</h3>
           </Panel.Title>
         </Panel.Heading>
         <Panel.Collapse>

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

@@ -1,37 +0,0 @@
-import AuthComponent from "../../AuthComponent";
-import PillarLabel from "./PillarLabel";
-import DirectivesStatusTable from "./DirectivesStatusTable";
-import React, {Fragment} from "react";
-import * as PropTypes from "prop-types";
-import {Panel} from "react-bootstrap";
-
-export default class SinglePillarDirectivesStatus extends AuthComponent {
-  render() {
-    if (this.props.directivesStatus.length === 0) {
-      return null;
-    }
-    else {
-      return (
-        <Panel>
-          <Panel.Heading>
-            <Panel.Title toggle>
-              <h3 style={{"text-align": "center"}}>
-                🔽 <PillarLabel pillar={this.props.pillar} status={this.props.pillarsToStatuses[this.props.pillar]} />
-              </h3>
-            </Panel.Title>
-          </Panel.Heading>
-          <Panel.Collapse>
-            <Panel.Body>
-              <DirectivesStatusTable directivesStatus={this.props.directivesStatus}/>
-            </Panel.Body>
-          </Panel.Collapse>
-        </Panel>
-      );
-    }
-  }
-}
-
-SinglePillarDirectivesStatus.propTypes = {
-  directivesStatus: PropTypes.array,
-  pillar: PropTypes.string,
-};

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

@@ -0,0 +1,37 @@
+import AuthComponent from "../../AuthComponent";
+import PillarLabel from "./PillarLabel";
+import RecommendationsStatusTable from "./RecommendationsStatusTable";
+import React from "react";
+import * as PropTypes from "prop-types";
+import {Panel} from "react-bootstrap";
+
+export default class SinglePillarRecommendationsStatus extends AuthComponent {
+  render() {
+    if (this.props.recommendationsStatus.length === 0) {
+      return null;
+    }
+    else {
+      return (
+        <Panel>
+          <Panel.Heading>
+            <Panel.Title toggle>
+              <h3 style={{"text-align": "center", "margin-top": "1px", "margin-bottom": "1px"}}>
+                <i className="fa fa-chevron-down" /> <PillarLabel pillar={this.props.pillar} status={this.props.pillarsToStatuses[this.props.pillar]} />
+              </h3>
+            </Panel.Title>
+          </Panel.Heading>
+          <Panel.Collapse>
+            <Panel.Body>
+              <RecommendationsStatusTable directivesStatus={this.props.recommendationsStatus}/>
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      );
+    }
+  }
+}
+
+SinglePillarRecommendationsStatus.propTypes = {
+  recommendationsStatus: PropTypes.array,
+  pillar: PropTypes.string,
+};