From db58bf9a87902accf8a16016075a0fa6f84304a5 Mon Sep 17 00:00:00 2001 From: Shay Nehmad Date: Mon, 19 Aug 2019 19:00:18 +0300 Subject: [PATCH] Fixed all small UI comments --- .../cc/ui/src/components/pages/ReportPage.js | 4 +- .../components/pages/ZeroTrustReportPage.js | 6 +-- .../common/MonkeysStillAliveWarning.js | 2 +- .../common/PaginatedTable.js | 7 +++ .../report-components/common/ReportHeader.js | 5 ++ .../report-components/common/ReportLoader.js | 3 ++ .../common/SecurityIssuesGlance.js | 2 +- .../zerotrust/DirectivesStatusTable.js | 16 +++--- .../zerotrust/EventsAndButtonComponent.js | 51 +++++++++++++++++++ .../zerotrust/EventsModal.js | 11 +++- .../zerotrust/EventsTimeline.js | 7 ++- .../zerotrust/FindingsTable.js | 49 ++---------------- .../zerotrust/PillarLabel.js | 29 ++++++----- .../zerotrust/PillarOverview.js | 11 ++-- .../zerotrust/SinglePillarDirectivesStatus.js | 10 ++-- .../zerotrust/StatusLabel.js | 10 ++-- .../zerotrust/StatusesToPillarsSummary.js | 11 ++-- 17 files changed, 144 insertions(+), 90 deletions(-) create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsAndButtonComponent.js diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js index ffdb32a6a..a72e0c56d 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js @@ -13,10 +13,10 @@ import PassTheHashMapPageComponent from "./PassTheHashMapPage"; import StrongUsers from "components/report-components/security/StrongUsers"; import AttackReport from "components/report-components/security/AttackReport"; import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader"; -import {MonkeysStillAliveWarning} from "../report-components/common/MonkeysStillAliveWarning"; +import MonkeysStillAliveWarning from "../report-components/common/MonkeysStillAliveWarning"; import ReportLoader from "../report-components/common/ReportLoader"; import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning"; -import {SecurityIssuesGlance} from "../report-components/common/SecurityIssuesGlance"; +import SecurityIssuesGlance from "../report-components/common/SecurityIssuesGlance"; import PrintReportButton from "../report-components/common/PrintReportButton"; import {extractExecutionStatusFromServerResponse} from "../report-components/common/ExecutionStatus"; diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js index fd7500216..f68321023 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js @@ -5,11 +5,11 @@ import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeade import PillarsOverview from "../report-components/zerotrust/PillarOverview"; import FindingsTable from "../report-components/zerotrust/FindingsTable"; import {SinglePillarDirectivesStatus} from "../report-components/zerotrust/SinglePillarDirectivesStatus"; -import {MonkeysStillAliveWarning} from "../report-components/common/MonkeysStillAliveWarning"; +import MonkeysStillAliveWarning from "../report-components/common/MonkeysStillAliveWarning"; import ReportLoader from "../report-components/common/ReportLoader"; import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning"; -import {SecurityIssuesGlance} from "../report-components/common/SecurityIssuesGlance"; -import {StatusesToPillarsSummary} from "../report-components/zerotrust/StatusesToPillarsSummary"; +import SecurityIssuesGlance from "../report-components/common/SecurityIssuesGlance"; +import StatusesToPillarsSummary from "../report-components/zerotrust/StatusesToPillarsSummary"; import PrintReportButton from "../report-components/common/PrintReportButton"; import {extractExecutionStatusFromServerResponse} from "../report-components/common/ExecutionStatus"; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/MonkeysStillAliveWarning.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/MonkeysStillAliveWarning.js index 67fd9388a..7b72570fa 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/common/MonkeysStillAliveWarning.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/MonkeysStillAliveWarning.js @@ -1,7 +1,7 @@ import React, {Component} from "react"; import * as PropTypes from "prop-types"; -export class MonkeysStillAliveWarning extends Component { +export default class MonkeysStillAliveWarning extends Component { render() { return
{ diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/PaginatedTable.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/PaginatedTable.js index 53ae1774d..5bc6183fd 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/common/PaginatedTable.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/PaginatedTable.js @@ -1,5 +1,6 @@ import React, {Component} from "react"; import ReactTable from "react-table"; +import * as PropTypes from "prop-types"; class PaginatedTable extends Component { render() { @@ -27,3 +28,9 @@ class PaginatedTable extends Component { } export default PaginatedTable; + +PaginatedTable.propTypes = { + data: PropTypes.array, + columns: PropTypes.array, + pageSize: PropTypes.number, +}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js index 0db9cb93e..44d470f7e 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js @@ -1,5 +1,6 @@ import React, {Component} from "react"; import {Col} from "react-bootstrap"; +import * as PropTypes from "prop-types"; let monkeyLogoImage = require('../../../images/monkey-icon.svg'); @@ -38,3 +39,7 @@ export class ReportHeader extends Component { } export default ReportHeader; + +ReportHeader.propTypes = { + report_type: PropTypes.string, +}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js index 873d70177..e389f7532 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js @@ -1,6 +1,7 @@ import {css} from "@emotion/core"; import React, {Component} from "react"; import {GridLoader} from "react-spinners"; +import * as PropTypes from "prop-types"; const loading_css_override = css` display: block; @@ -23,3 +24,5 @@ export default class ReportLoader extends Component {
} } + +ReportLoader.propTypes = {loading: PropTypes.bool}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js index f734a1a28..41a45edad 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/SecurityIssuesGlance.js @@ -1,7 +1,7 @@ import React, {Component, Fragment} from "react"; import * as PropTypes from "prop-types"; -export class SecurityIssuesGlance extends Component { +export default class SecurityIssuesGlance extends Component { render() { return { diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js index ad1a815cb..84e003a6b 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js @@ -2,8 +2,8 @@ import React, {Fragment} from "react"; import PaginatedTable from "../common/PaginatedTable"; import AuthComponent from "../../AuthComponent"; import 'styles/ZeroTrustPillars.css' -import {StatusLabel} from "./StatusLabel"; - +import StatusLabel from "./StatusLabel"; +import * as PropTypes from "prop-types"; const columns = [ @@ -37,15 +37,15 @@ class TestsStatus extends AuthComponent { return ( - {this.getTestsOfStatusIfAny(conclusiveStatus)} - {this.getTestsOfStatusIfAny(inconclusiveStatus)} - {this.getTestsOfStatusIfAny(positiveStatus)} - {this.getTestsOfStatusIfAny(unexecutedStatus)} + {this.getFilteredTestsByStatusIfAny(conclusiveStatus)} + {this.getFilteredTestsByStatusIfAny(inconclusiveStatus)} + {this.getFilteredTestsByStatusIfAny(positiveStatus)} + {this.getFilteredTestsByStatusIfAny(unexecutedStatus)} ); } - getTestsOfStatusIfAny(statusToFilter) { + getFilteredTestsByStatusIfAny(statusToFilter) { const filteredTests = this.props.tests.filter((test) => { return (test.status === statusToFilter); } @@ -71,3 +71,5 @@ export class DirectivesStatusTable extends AuthComponent { } export default DirectivesStatusTable; + +DirectivesStatusTable.propTypes = {directivesStatus: PropTypes.array}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsAndButtonComponent.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsAndButtonComponent.js new file mode 100644 index 000000000..0222b375f --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsAndButtonComponent.js @@ -0,0 +1,51 @@ +import React, {Component} from "react"; +import EventsModal from "./EventsModal"; +import {Button} from "react-bootstrap"; +import FileSaver from "file-saver"; +import * as PropTypes from "prop-types"; + +export default class EventsAndButtonComponent extends Component { + constructor(props) { + super(props); + this.state = { + isShow: false + } + } + + hide = () => { + this.setState({isShow: false}); + }; + + show = () => { + this.setState({isShow: true}); + }; + + render() { + return ( +
+ +

+ + +

+
+ ); + } + +} + +EventsAndButtonComponent.propTypes = { + events: PropTypes.array, + exportFilename: PropTypes.string, +}; 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 19dd7761a..9543603bd 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,8 +1,9 @@ import React, {Component} from "react"; import {Modal} from "react-bootstrap"; -import {EventsTimeline} from "./EventsTimeline"; +import EventsTimeline from "./EventsTimeline"; +import * as PropTypes from "prop-types"; -export class EventsModal extends Component { +export default class EventsModal extends Component { constructor(props) { super(props); } @@ -30,3 +31,9 @@ export class EventsModal extends Component { ); } } + +EventsModal.propTypes = { + showEvents: PropTypes.bool, + events: PropTypes.array, + hideCallback: 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 f70d5df31..8ba994c65 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 @@ -1,5 +1,6 @@ import React, {Component} from "react"; import {Timeline, TimelineEvent} from "react-event-timeline"; +import * as PropTypes from "prop-types"; const eventTypeToIcon = { "monkey_local": "fa fa-exclamation-circle fa-2x icon-warning", @@ -8,13 +9,13 @@ const eventTypeToIcon = { null: "fa fa-question-circle fa-2x icon-info", }; -export class EventsTimeline extends Component { +export default class EventsTimeline extends Component { render() { return (
{ - this.props["events"].map(event => { + this.props.events.map(event => { const event_time = new Date(event.timestamp['$date']).toString(); return ( { - this.setState({show: false}); - }; - - show = () => { - this.setState({show: true}); - }; - - render() { - return ( -
- -

- - -

-
- ); - } - -} - const columns = [ { Header: 'Findings', @@ -82,7 +39,7 @@ class FindingsTable extends Component { return newFinding; }); return ( - + ); } } diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js index 4559e5cd9..0724f9a13 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js @@ -1,23 +1,26 @@ import React, {Component} from "react"; import 'styles/ZeroTrustPillars.css' import {statusToLabelType} from "./StatusLabel"; +import * as PropTypes from "prop-types"; -export class PillarLabel extends Component { - pillar; - status; +const pillarToIcon = { + "Data": "fa fa-database", + "People": "fa fa-user", + "Networks": "fa fa-wifi", + "Workloads": "fa fa-cloud", + "Devices": "fa fa-laptop", + "Visibility & Analytics": "fa fa-eye-slash", + "Automation & Orchestration": "fa fa-cogs", +}; +export default class PillarLabel extends Component { render() { - const pillarToIcon = { - "Data": "fa fa-database", - "People": "fa fa-user", - "Networks": "fa fa-wifi", - "Workloads": "fa fa-cloud", - "Devices": "fa fa-laptop", - "Visibility & Analytics": "fa fa-eye-slash", - "Automation & Orchestration": "fa fa-cogs", - }; - const className = "label " + statusToLabelType[this.props.status]; return
{this.props.pillar}
} } + +PillarLabel.propTypes = { + status: PropTypes.string, + pillar: PropTypes.string, +}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarOverview.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarOverview.js index c865ecf43..660e6ad5a 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarOverview.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarOverview.js @@ -1,6 +1,7 @@ import React, {Component} from "react"; -import {PillarLabel} from "./PillarLabel"; +import PillarLabel from "./PillarLabel"; import PaginatedTable from "../common/PaginatedTable"; +import * as PropTypes from "prop-types"; const columns = [ { @@ -18,9 +19,6 @@ const columns = [ ]; class PillarOverview extends Component { - pillarsToStatuses; - grades; - render() { const data = this.props.grades.map((grade) => { const newGrade = grade; @@ -34,3 +32,8 @@ class PillarOverview extends Component { } export default PillarOverview; + +PillarOverview.propTypes = { + grades: PropTypes.array, + status: PropTypes.string, +}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/SinglePillarDirectivesStatus.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/SinglePillarDirectivesStatus.js index feb56b204..b8ded2d5a 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/SinglePillarDirectivesStatus.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/SinglePillarDirectivesStatus.js @@ -1,11 +1,10 @@ import AuthComponent from "../../AuthComponent"; -import {PillarLabel} from "./PillarLabel"; +import PillarLabel from "./PillarLabel"; import DirectivesStatusTable from "./DirectivesStatusTable"; import React, {Fragment} from "react"; +import * as PropTypes from "prop-types"; export class SinglePillarDirectivesStatus extends AuthComponent { - directivesStatus; - render() { if (this.props.directivesStatus.length === 0) { return null; @@ -20,3 +19,8 @@ export class SinglePillarDirectivesStatus extends AuthComponent { } } } + +SinglePillarDirectivesStatus.propTypes = { + directivesStatus: PropTypes.array, + pillar: PropTypes.string, +}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js index a53e4c919..f9c885b2c 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js @@ -1,4 +1,4 @@ -import React, {Component, Fragment} from "react"; +import React, {Component} from "react"; import * as PropTypes from "prop-types"; const statusToIcon = { @@ -15,7 +15,7 @@ export const statusToLabelType = { "Unexecuted": "label-default", }; -export class StatusLabel extends Component { +export default class StatusLabel extends Component { render() { let text = ""; if (this.props.showText) { @@ -28,4 +28,8 @@ export class StatusLabel extends Component { } } -StatusLabel.propTypes = {status: PropTypes.string, showText: PropTypes.bool}; +StatusLabel.propTypes = { + status: PropTypes.string, + showText: PropTypes.bool, + size: PropTypes.string +}; diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusesToPillarsSummary.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusesToPillarsSummary.js index bfcaceed9..486a59d9f 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusesToPillarsSummary.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusesToPillarsSummary.js @@ -1,8 +1,9 @@ import React, {Component, Fragment} from "react"; -import {PillarLabel} from "./PillarLabel"; -import {StatusLabel} from "./StatusLabel"; +import PillarLabel from "./PillarLabel"; +import StatusLabel from "./StatusLabel"; +import * as PropTypes from "prop-types"; -export class StatusesToPillarsSummary extends Component { +export default class StatusesToPillarsSummary extends Component { render() { return (
{this.getStatusSummary("Conclusive")} @@ -29,3 +30,7 @@ export class StatusesToPillarsSummary extends Component { } } } + +StatusesToPillarsSummary.propTypes = { + statusesToPillars: PropTypes.array +};