Added table for pillar grades

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

@@ -35,7 +35,7 @@ class ZeroTrustReportPageComponent extends AuthComponent {
   generateReportContent() {
     let content;
 
-    if (typeof this.state.findings === "undefined") {
+    if (this.stillLoadingDataFromServer()) {
       content = "Still empty";
     } else {
       content = <div>
@@ -76,6 +76,10 @@ class ZeroTrustReportPageComponent extends AuthComponent {
     )
   }
 
+  stillLoadingDataFromServer() {
+    return typeof this.state.findings === "undefined" || typeof this.state.pillars === "undefined" || typeof this.state.tests === "undefined";
+  }
+
   print() {
     alert("unimplemented");
   }

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

@@ -1,18 +1,38 @@
 import React, {Component} from "react";
-import ZeroTrustPillars from "./ZeroTrustPillars";
+import ReactTable from "react-table";
 
-export class PillarGrades extends Component {
+const columns = [
+  {
+    Header: 'Pillar Grading',
+    columns: [
+      { Header: 'Pillar', accessor: 'Pillar'},
+      { Header: 'Conclusive', accessor: 'Conclusive'},
+      { Header: 'Inconclusive', accessor: 'Inconclusive'},
+      { Header: 'Unexecuted', accessor: 'Unexecuted'},
+    ]
+  }
+];
+
+const pageSize = 10;
+
+class PillarGrades extends Component {
   render() {
+    if (this.props.pillars.length > 0) {
+      let defaultPageSize = this.props.pillars.length > pageSize ? pageSize : this.props.pillars.length;
+      let showPagination = this.props.pillars.length > pageSize;
+
       return (
-      <div id="pillar-grades">
-        <p>
-          TODO: table with conditional colouring.
-        </p>
-        <pre>
-          {JSON.stringify(this.props.pillars, undefined, 2)}
-        </pre>
+        <div>
+          <ReactTable
+            columns={columns}
+            data={this.props.pillars}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
         </div>
-    )
+      );
+    }
+    else { return (<div><pre>BAYAZ</pre></div>);}
   }
 }