Created basic zero trust report page mockup

Extracted the reportHeader from the regular report

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

@@ -12,9 +12,10 @@ import AuthComponent from '../AuthComponent';
 import PassTheHashMapPageComponent from "./PassTheHashMapPage";
 import StrongUsers from "components/report-components/StrongUsers";
 import AttackReport from "components/report-components/AttackReport";
+import ReportHeader, { ReportTypes } from "../report-components/ReportHeader";
 
 let guardicoreLogoImage = require('../../images/guardicore-logo.png');
-let monkeyLogoImage = require('../../images/monkey-icon.svg');
+
 
 class ReportPageComponent extends AuthComponent {
 
@@ -130,13 +131,16 @@ class ReportPageComponent extends AuthComponent {
   generateReportContent() {
     return (
       <div>
+        {
+          // extract to print component.
+        }
         <div className="text-center no-print" style={{marginBottom: '20px'}}>
           <Button bsSize="large" onClick={() => {
             print();
           }}><i className="glyphicon glyphicon-print"/> Print Report</Button>
         </div>
         <div className="report-page">
-          {this.generateReportHeader()}
+          <ReportHeader report_type={ReportTypes.security}/>
           <hr/>
           {this.generateReportOverviewSection()}
           {this.generateReportFindingsSection()}
@@ -154,26 +158,6 @@ class ReportPageComponent extends AuthComponent {
     );
   }
 
-  generateReportHeader() {
-    return (
-      <div id="header" className="row justify-content-between">
-        <Col xs={8}>
-          <div>
-            <h1 style={{marginTop: '0px', marginBottom: '5px', color: '#666666', fontFamily: 'Alegreya'}}>Security Report</h1>
-            <h1 style={{marginTop: '0px', marginBottom: '0px', color: '#ffcc00', fontFamily: 'Alegreya'}}>Infection <b>Monkey</b></h1>
-          </div>
-        </Col>
-        <Col xs={4}>
-          <img src={monkeyLogoImage}
-               style={{
-                 float: 'right',
-                 width: '80px'
-               }}/>
-        </Col>
-      </div>
-    );
-  }
-
   generateReportOverviewSection() {
     return (
       <div id="overview">

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

@@ -1,41 +1,32 @@
 import React from 'react';
 import {Button, Col} from 'react-bootstrap';
-import BreachedServers from 'components/report-components/BreachedServers';
-import ScannedServers from 'components/report-components/ScannedServers';
-import PostBreach from 'components/report-components/PostBreach';
-import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
-import {edgeGroupToColor, options} from 'components/map/MapOptions';
-import StolenPasswords from 'components/report-components/StolenPasswords';
-import CollapsibleWellComponent from 'components/report-components/CollapsibleWell';
-import {Line} from 'rc-progress';
 import AuthComponent from '../AuthComponent';
-import PassTheHashMapPageComponent from "./PassTheHashMapPage";
-import StrongUsers from "components/report-components/StrongUsers";
-import AttackReport from "components/report-components/AttackReport";
-
-let guardicoreLogoImage = require('../../images/guardicore-logo.png');
-let monkeyLogoImage = require('../../images/monkey-icon.svg');
+import ReportHeader, { ReportTypes } from "../report-components/ReportHeader";
+import ZeroTrustReportPillarGrades from "../report-components/zerotrust/ZeroTrustReportPillarGrades";
 
 class ZeroTrustReportPageComponent extends AuthComponent {
 
   constructor(props) {
     super(props);
+
     this.state = {
-      report: {},
+      report: {
+        findings: undefined
+      },
       allMonkeysAreDead: false,
-      runStarted: true
+      runStarted: false
     };
   }
 
   render() {
-    let content;
     let res;
     this.getZeroTrustReportFromServer(res);
-    content = JSON.stringify(this.state.report);
+
+    const content = this.generateReportContent();
 
     return (
       <Col xs={12} lg={10}>
-        <h1 className="page-title no-print">4. Security Report</h1>
+        <h1 className="page-title no-print">5. Zero Trust Report</h1>
         <div style={{'fontSize': '1.2em'}}>
           {content}
         </div>
@@ -43,9 +34,45 @@ class ZeroTrustReportPageComponent extends AuthComponent {
     );
   }
 
-  // This dups the regular report
-  getZeroTrustReportFromServer(res) {
-    //if (res['completed_steps']['run_monkey']) {
+  generateReportContent() {
+    let content;
+
+    console.log(this.state.report.findings);
+
+    if (typeof this.state.report.findings === "undefined") {
+      content = "Still empty";
+    } else {
+      content = <div>
+        <ZeroTrustReportPillarGrades findings={this.state.report.findings} />
+      </div>;
+    }
+
+    return (
+      <div>
+        <div className="text-center no-print" style={{marginBottom: '20px'}}>
+          <Button bsSize="large" onClick={() => {
+            this.print();
+          }}><i className="glyphicon glyphicon-print"/> Print Report</Button>
+        </div>
+
+        <div className="report-page">
+          <ReportHeader report_type={ReportTypes.zeroTrust}/>
+          <hr/>
+          {content}
+          THIS IS THE RAW SERVER DATA
+          <pre id="json-report">
+            {JSON.stringify(this.state.report, undefined, 2)}
+          </pre>
+        </div>
+      </div>
+    )
+  }
+
+  print() {
+    alert("unimplemented");
+  }
+
+  getZeroTrustReportFromServer() {
     this.authFetch('/api/report/zero_trust')
       .then(res => res.json())
       .then(res => {
@@ -53,7 +80,6 @@ class ZeroTrustReportPageComponent extends AuthComponent {
           report: res
         });
       });
-    //}
   }
 }
 

monkey/monkey_island/cc/ui/src/components/report-components/ReportHeader.js

@@ -0,0 +1,40 @@
+import React, {Component} from "react";
+import {Col} from "react-bootstrap";
+
+let monkeyLogoImage = require('../../images/monkey-icon.svg');
+
+export const ReportTypes = {
+  zeroTrust: "Zero Trust",
+  security: "Security",
+  null: ""
+};
+
+export class ReportHeader extends Component {
+  report_type;
+
+  render() {
+    return <div id="header" className="row justify-content-between">
+      <Col xs={8}>
+        <div>
+          <h1 style={{marginTop: '0px', marginBottom: '5px', color: '#666666', fontFamily: 'Alegreya'}}>
+            {this.props.report_type} Report</h1>
+          <h1 style={{
+            marginTop: '0px',
+            marginBottom: '0px',
+            color: '#ffcc00',
+            fontFamily: 'Alegreya'
+          }}>Infection <b>Monkey</b></h1>
+        </div>
+      </Col>
+      <Col xs={4}>
+        <img src={monkeyLogoImage}
+             style={{
+               float: 'right',
+               width: '80px'
+             }}/>
+      </Col>
+    </div>
+  }
+}
+
+export default ReportHeader;

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

@@ -0,0 +1,11 @@
+export const ZeroTrustPillars = {
+  data: "Data",
+  people: "People",
+  network: "Networks",
+  workload: "Workload",
+  devices: "Devices",
+  visibility: "Visibility & Analytics",
+  automation: "Automation & Orchestration"
+};
+
+export default ZeroTrustPillars;

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

@@ -0,0 +1,40 @@
+import React, {Component} from "react";
+import ZeroTrustPillars from "./ZeroTrustPillars";
+
+export class ZeroTrustReportPillarGrades extends Component {
+  render() {
+    let pillarsCounters = {};
+    for(const pillar in ZeroTrustPillars){
+      pillarsCounters[ZeroTrustPillars[pillar]] = 0;
+    }
+
+    if (this.props.findings !== null) {
+      for (const finding of this.props.findings) {
+        console.log("finding: " + JSON.stringify(finding));
+        if (typeof finding === 'object' && finding !== null) {
+          if (finding.hasOwnProperty("pillars")) {
+            for (const pillar of finding["pillars"]) {
+              pillarsCounters[pillar] = pillarsCounters[pillar] + 1;
+            }
+          }
+        }
+      }
+    }
+
+    return (
+      <div id="pillar-grades">
+        <h2>
+          Pillars Overview
+        </h2>
+        <p>
+          TODO: table with conditional colouring.
+        </p>
+        <pre>
+          {JSON.stringify(pillarsCounters, undefined, 2)}
+        </pre>
+      </div>
+    )
+  }
+}
+
+export default ZeroTrustReportPillarGrades;