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 = 9+;
- } else {
- eventsAmountBadge = {this.props.events.length};
- }
- return eventsAmountBadge;
+ const eventsAmountBadgeContent = this.props.events.length > 9 ? "9+" : this.props.events.length;
+ return {eventsAmountBadgeContent};
}
}
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 {
this.props.hideCallback()}>
-
+
Events
-
-
+
+
+
+ There {Pluralize('is', this.props.events.length)} {
{this.props.events.length}
} {Pluralize('event', this.props.events.length)} associated with this finding.
+
+ {this.props.events.length > 5 ? this.renderButtons() : null}
-
-
-
- {
- const dataToSave = this.props.events;
- const filename = this.props.exportFilename;
- saveJsonToFile(dataToSave, filename);
- }}/>
-
+ {this.renderButtons()}
);
}
+
+ renderButtons() {
+ return 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
+
+
+
+ }
+}
+
+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 (
-
+
{
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={}>
{event.message}
)