Added "Show events" button and modal

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

@@ -1,5 +1,6 @@
 import React, {Component} from "react";
 import ReactTable from "react-table";
+import {Button, Modal} from "react-bootstrap";
 
 class PillarLabel extends Component {
   render() {
@@ -7,12 +8,72 @@ class PillarLabel extends Component {
   }
 }
 
+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>
+    );
+  }
+}
+
+
+class EventsAndButtonComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false
+    }
+  }
+
+  hide = () => {
+    this.setState({show: false});
+  };
+
+  show = () => {
+    this.setState({show: true});
+  };
+
+  render() {
+    return (
+      <div>
+        <EventsModal events={this.props.events} showEvents={this.state.show} hideCallback={this.hide}/>
+        <p style={{margin: '5px'}}>
+          <Button className="btn btn-danger btn-lg center-block"
+                  onClick={this.show}>
+            Show Events
+          </Button>
+        </p>
+      </div>
+    );
+  }
+
+}
+
 const columns = [
   {
     Header: 'Findings',
     columns: [
       { Header: 'Test', accessor: 'test',
-        style: {'white-space': 'unset'}  // This enables word wrap
+        style: {'whiteSpace': 'unset'}  // This enables word wrap
       },
       { Header: 'Pillars', id: "pillars",
         accessor: x => {
@@ -23,7 +84,11 @@ const columns = [
           return <ul>{listItems}</ul>
         }
       },
-      { Header: 'Events', id:"events", accessor: x => ZeroTrustReportFindingsTable.buildEventsComponent(x)}
+      { Header: 'Events', id:"events",
+        accessor: x => {
+          return <EventsAndButtonComponent events={x}/>;
+        }
+      }
     ]
   }
 ];
@@ -46,10 +111,7 @@ class ZeroTrustReportFindingsTable extends Component {
       </div>
     );
   }
+}
 
-  static buildEventsComponent(events) {
-    return <button>Click to see events...</button>;
-  }
-}
 
 export default ZeroTrustReportFindingsTable;