Added event timeline (not done yet, need to add title to data) and deleted console.logs

monkey/monkey_island/cc/ui/package.json

@@ -55,6 +55,7 @@
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.16",
     "react-addons-test-utils": "^15.6.2",
+    "react-event-timeline": "^1.6.3",
     "react-hot-loader": "^4.3.11",
     "rimraf": "^2.6.2",
     "style-loader": "^0.22.1",

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

@@ -38,8 +38,6 @@ class ZeroTrustReportPageComponent extends AuthComponent {
   generateReportContent() {
     let content;
 
-    console.log(this.state.report.findings);
-
     if (typeof this.state.report.findings === "undefined") {
       content = "Still empty";
     } else {

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

@@ -0,0 +1,32 @@
+import React, {Component} from "react";
+import {Modal} from "react-bootstrap";
+import {EventsTimeline} from "./EventsTimeline";
+
+export class EventsModal extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal show={this.props.showEvents} onHide={() => this.props.hideCallback()}>
+          <Modal.Body>
+            <h2>
+              <div className="text-center">Events</div>
+            </h2>
+
+            <EventsTimeline events={this.props.events}/>
+
+            <div className="text-center">
+              <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+                      onClick={() => this.props.hideCallback()}>
+                Close
+              </button>
+            </div>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from "react";
+import {Timeline, TimelineEvent} from "react-event-timeline";
+
+export class EventsTimeline extends Component {
+  render() {
+    return (
+      <div>
+        <Timeline>
+          {
+            this.props["events"].map(event => (
+              <TimelineEvent key={event.timestamp} createdAt={event.timestamp} title={event.message}>{event.message}</TimelineEvent>
+            ))
+          }
+        </Timeline>
+      </div>
+    );
+  }
+}

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

@@ -1,38 +1,10 @@
 import React, {Component} from "react";
 import ReactTable from "react-table";
-import {Button, Modal} from "react-bootstrap";
+import {Button} from "react-bootstrap";
+import {EventsModal} from "./EventsModal";
 
-class PillarLabel extends Component {
-  render() {
-    return <span className="label label-primary" style={{margin: '2px'}}>{this.props.pillar}</span>
-  }
-}
-
-class EventsModal extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div>
-        <Modal show={this.props.showEvents} onHide={() => this.props.hideCallback()}>
-          <Modal.Body>
-            <h2><div className="text-center">Events</div></h2>
-
-            <pre>{JSON.stringify(this.props.events)}</pre>
-
-            <div className="text-center">
-              <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
-                      onClick={() => this.props.hideCallback()}>
-                Close
-              </button>
-            </div>
-          </Modal.Body>
-        </Modal>
-      </div>
-    );
-  }
+function PillarLabel(props) {
+  return <span className="label label-primary" style={{margin: '2px'}}>{props.pillar}</span>
 }
 
 
@@ -86,7 +58,7 @@ const columns = [
       },
       { Header: 'Events', id:"events",
         accessor: x => {
-          return <EventsAndButtonComponent events={x}/>;
+          return <EventsAndButtonComponent events={x.events}/>;
         }
       }
     ]

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

@@ -14,7 +14,6 @@ export class ZeroTrustReportPillarGrades extends Component {
 
     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") && finding.hasOwnProperty("conclusive")) {
             for (const pillar of finding["pillars"]) {