Improved the Events modal

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"
   }
 }

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>;
   }
 }
 

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 = {

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
+};

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

@@ -14,15 +14,14 @@ 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();
               return (<TimelineEvent
                 key={index}
                 createdAt={event_time}
                 title={event.title}
-
                 icon={<img src={eventTypeToIcon[event.event_type]} alt="icon" style={{width: '24px'}} />}>
                   {event.message}
               </TimelineEvent>)