From 4d24d8432e23150e48cb50db650512b8c4b99262 Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Wed, 11 Sep 2019 17:19:23 +0300
Subject: [PATCH] Improved the Events modal

---
 monkey/monkey_island/cc/ui/package.json       |  3 +-
 .../zerotrust/EventsButton.js                 |  9 +----
 .../zerotrust/EventsModal.js                  | 39 +++++++++++--------
 .../zerotrust/EventsModalButtons.js           | 20 ++++++++++
 .../zerotrust/EventsTimeline.js               |  3 +-
 5 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js

diff --git a/monkey/monkey_island/cc/ui/package.json b/monkey/monkey_island/cc/ui/package.json
index 872a22bdc..983366c6e 100644
--- a/monkey/monkey_island/cc/ui/package.json
+++ b/monkey/monkey_island/cc/ui/package.json
@@ -104,6 +104,7 @@
     "react-tooltip-lite": "^1.9.1",
     "redux": "^4.0.0",
     "sass-loader": "^7.1.0",
-    "sha3": "^2.0.0"
+    "sha3": "^2.0.0",
+    "pluralize": "latest"
   }
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
index ea24e7b1a..761ff94a9 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
@@ -32,13 +32,8 @@ export default class EventsButton extends Component {
   }
 
   createEventsAmountBadge() {
-    let eventsAmountBadge;
-    if (this.props.events.length > 9) {
-      eventsAmountBadge = <Badge>9+</Badge>;
-    } else {
-      eventsAmountBadge = <Badge>{this.props.events.length}</Badge>;
-    }
-    return eventsAmountBadge;
+    const eventsAmountBadgeContent = this.props.events.length > 9 ? "9+" : this.props.events.length;
+    return <Badge>{eventsAmountBadgeContent}</Badge>;
   }
 }
 
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModal.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModal.js
index 2ce25bf20..a7f2fe41c 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModal.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModal.js
@@ -1,9 +1,11 @@
 import React, {Component} from "react";
-import {Modal} from "react-bootstrap";
+import {Badge, Modal} from "react-bootstrap";
 import EventsTimeline from "./EventsTimeline";
 import * as PropTypes from "prop-types";
-import ExportEventsButton from "./ExportEventsButton";
 import saveJsonToFile from "../../utils/SaveJsonToFile";
+import EventsModalButtons from "./EventsModalButtons";
+import Pluralize from 'pluralize'
+import {statusToLabelType} from "./StatusLabel";
 
 export default class EventsModal extends Component {
   constructor(props) {
@@ -15,28 +17,31 @@ export default class EventsModal extends Component {
       <div>
         <Modal show={this.props.showEvents} onHide={() => this.props.hideCallback()}>
           <Modal.Body>
-            <h2>
+            <h3>
               <div className="text-center">Events</div>
-            </h2>
-
+            </h3>
+            <hr />
+            <p>
+              There {Pluralize('is', this.props.events.length)} {<div className={"label label-primary"}>{this.props.events.length}</div>} {Pluralize('event', this.props.events.length)} associated with this finding.
+            </p>
+            {this.props.events.length > 5 ? this.renderButtons() : null}
             <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>
-              <ExportEventsButton onClick={() => {
-                const dataToSave = this.props.events;
-                const filename = this.props.exportFilename;
-                saveJsonToFile(dataToSave, filename);
-              }}/>
-            </div>
+            {this.renderButtons()}
           </Modal.Body>
         </Modal>
       </div>
     );
   }
+
+  renderButtons() {
+    return <EventsModalButtons
+      onClickClose={() => this.props.hideCallback()}
+      onClickExport={() => {
+        const dataToSave = this.props.events;
+        const filename = this.props.exportFilename;
+        saveJsonToFile(dataToSave, filename);
+      }}/>;
+  }
 }
 
 EventsModal.propTypes = {
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js
new file mode 100644
index 000000000..962c54893
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js
@@ -0,0 +1,20 @@
+import React, {Component} from "react";
+import ExportEventsButton from "./ExportEventsButton";
+import * as PropTypes from "prop-types";
+
+export default class EventsModalButtons extends Component {
+  render() {
+    return <div className="text-center">
+      <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+              onClick={this.props.onClickClose}>
+        Close
+      </button>
+      <ExportEventsButton onClick={this.props.onClickExport}/>
+    </div>
+  }
+}
+
+EventsModalButtons.propTypes = {
+  onClickClose: PropTypes.func,
+  onClickExport: PropTypes.func
+};
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsTimeline.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsTimeline.js
index d6723bd4d..b7fb90811 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsTimeline.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsTimeline.js
@@ -14,7 +14,7 @@ export default class EventsTimeline extends Component {
   render() {
     return (
       <div>
-        <Timeline>
+        <Timeline style={{fontSize: '100%'}}>
           {
             this.props.events.map((event, index) => {
               const event_time = new Date(event.timestamp['$date']).toString();
@@ -22,7 +22,6 @@ export default class EventsTimeline extends Component {
                 key={index}
                 createdAt={event_time}
                 title={event.title}
-
                 icon={<img src={eventTypeToIcon[event.event_type]} alt="icon" style={{width: '24px'}} />}>
                   {event.message}
               </TimelineEvent>)