From a337bb5800ab5e67bd2d82d810cae061f580b85c Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Thu, 8 Aug 2019 12:08:24 +0300
Subject: [PATCH] Added table for pillar grades

---
 .../components/pages/ZeroTrustReportPage.js   |  6 ++-
 .../zerotrust/PillarGrades.js                 | 44 ++++++++++++++-----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
index 9d200beac..f7b5dc5bf 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
+++ b/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");
   }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js
index 8c3959b00..896a1e4d2 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js
+++ b/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() {
-    return (
-      <div id="pillar-grades">
-        <p>
-          TODO: table with conditional colouring.
-        </p>
-        <pre>
-          {JSON.stringify(this.props.pillars, undefined, 2)}
-        </pre>
-      </div>
-    )
+    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>
+          <ReactTable
+            columns={columns}
+            data={this.props.pillars}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
+        </div>
+      );
+    }
+    else { return (<div><pre>BAYAZ</pre></div>);}
   }
 }