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={icon}> {event.message} )