Added basic findings table, no access to events yet

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

@@ -3,6 +3,7 @@ import {Button, Col} from 'react-bootstrap';
 import AuthComponent from '../AuthComponent';
 import ReportHeader, { ReportTypes } from "../report-components/common/ReportHeader";
 import ZeroTrustReportPillarGrades from "../report-components/zerotrust/ZeroTrustReportPillarGrades";
+import ZeroTrustReportFindingsTable from "../report-components/zerotrust/ZeroTrustReportFindingsTable";
 
 class ZeroTrustReportPageComponent extends AuthComponent {
 
@@ -43,7 +44,10 @@ class ZeroTrustReportPageComponent extends AuthComponent {
       content = "Still empty";
     } else {
       content = <div>
+        <h2>Pillars Overview</h2>
         <ZeroTrustReportPillarGrades findings={this.state.report.findings} />
+        <h2>Findings</h2>
+        <ZeroTrustReportFindingsTable findings={this.state.report.findings} />
       </div>;
     }
 
@@ -59,6 +63,7 @@ class ZeroTrustReportPageComponent extends AuthComponent {
           <ReportHeader report_type={ReportTypes.zeroTrust}/>
           <hr/>
           {content}
+          <hr/>
           THIS IS THE RAW SERVER DATA
           <pre id="json-report">
             {JSON.stringify(this.state.report, undefined, 2)}

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

@@ -0,0 +1,47 @@
+import React, {Component} from "react";
+import ReactTable from "react-table";
+
+const columns = [
+  {
+    Header: 'Findings',
+    columns: [
+      { Header: 'Test', accessor: 'test'},
+      { Header: 'Pillars', id: "pillars",
+        accessor: x => {
+          const pillars = x.pillars;
+          const listItems = pillars.map((pillar) =>
+            <li key={pillar}><span className="label label-warning" style={{margin: '2px'}}>{pillar}</span></li>
+          );
+          return <ul>{listItems}</ul>
+        }
+      },
+      { Header: 'Events', id:"events", accessor: x => ZeroTrustReportFindingsTable.buildEventsComponent(x)}
+    ]
+  }
+];
+
+const pageSize = 10;
+
+class ZeroTrustReportFindingsTable extends Component {
+  render() {
+    let defaultPageSize = this.props.findings.length > pageSize ? pageSize : this.props.findings.length;
+    let showPagination = this.props.findings.length > pageSize;
+
+    return (
+      <div>
+        <ReactTable
+          columns={columns}
+          data={this.props.findings}
+          showPagination={showPagination}
+          defaultPageSize={defaultPageSize}
+        />
+      </div>
+    );
+  }
+
+  static buildEventsComponent(events) {
+    return <button>Click to see events...</button>;
+  }
+}
+
+export default ZeroTrustReportFindingsTable;

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

@@ -23,9 +23,6 @@ export class ZeroTrustReportPillarGrades extends Component {
 
     return (
       <div id="pillar-grades">
-        <h2>
-          Pillars Overview
-        </h2>
         <p>
           TODO: table with conditional colouring.
         </p>