Fixed all small UI comments

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

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

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

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

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

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 {
     </div>
   }
 }
+
+ReportLoader.propTypes = {loading: PropTypes.bool};

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

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 (
       <Fragment>
-        {this.getTestsOfStatusIfAny(conclusiveStatus)}
-        {this.getTestsOfStatusIfAny(inconclusiveStatus)}
-        {this.getTestsOfStatusIfAny(positiveStatus)}
-        {this.getTestsOfStatusIfAny(unexecutedStatus)}
+        {this.getFilteredTestsByStatusIfAny(conclusiveStatus)}
+        {this.getFilteredTestsByStatusIfAny(inconclusiveStatus)}
+        {this.getFilteredTestsByStatusIfAny(positiveStatus)}
+        {this.getFilteredTestsByStatusIfAny(unexecutedStatus)}
       </Fragment>
     );
   }
 
-  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};

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 (
+      <div>
+        <EventsModal events={this.props.events} showEvents={this.state.isShow} hideCallback={this.hide}/>
+        <p style={{margin: '1px'}}>
+          <Button className="btn btn-info btn-lg center-block"
+                  onClick={this.show}>
+            Show Events
+          </Button>
+          <Button className="btn btn-primary btn-lg center-block"
+                  onClick={() => {
+                    const content = JSON.stringify(this.props.events, null, 2);
+                    const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
+                    FileSaver.saveAs(blob, this.props.exportFilename + ".json");
+                  }}
+          >
+            Export Events
+          </Button>
+        </p>
+      </div>
+    );
+  }
+
+}
+
+EventsAndButtonComponent.propTypes = {
+  events: PropTypes.array,
+  exportFilename: PropTypes.string,
+};

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

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 (
       <div>
         <Timeline>
           {
-            this.props["events"].map(event => {
+            this.props.events.map(event => {
               const event_time = new Date(event.timestamp['$date']).toString();
               return (<TimelineEvent
                 key={event.timestamp['$date']}
@@ -30,3 +31,5 @@ export class EventsTimeline extends Component {
     );
   }
 }
+
+EventsTimeline.propTypes = {events: PropTypes.array};

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

@@ -1,52 +1,9 @@
 import React, {Component} from "react";
-import {Button} from "react-bootstrap";
-import {EventsModal} from "./EventsModal";
-import FileSaver from "file-saver";
-import {PillarLabel} from "./PillarLabel";
+import PillarLabel from "./PillarLabel";
 import PaginatedTable from "../common/PaginatedTable";
+import EventsAndButtonComponent from "./EventsAndButtonComponent";
 
 
-class EventsAndButtonComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: false
-    }
-  }
-
-  hide = () => {
-    this.setState({show: false});
-  };
-
-  show = () => {
-    this.setState({show: true});
-  };
-
-  render() {
-    return (
-      <div>
-        <EventsModal events={this.props.events} showEvents={this.state.show} hideCallback={this.hide}/>
-        <p style={{margin: '1px'}}>
-          <Button className="btn btn-info btn-lg center-block"
-                  onClick={this.show}>
-            Show Events
-          </Button>
-          <Button className="btn btn-primary btn-lg center-block"
-                  onClick={() => {
-                    const content = JSON.stringify(this.props.events, null, 2);
-                    const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
-                    FileSaver.saveAs(blob, this.props.exportFilename+".json");
-                  }}
-                >
-            Export Events
-          </Button>
-        </p>
-      </div>
-    );
-  }
-
-}
-
 const columns = [
   {
     Header: 'Findings',
@@ -82,7 +39,7 @@ class FindingsTable extends Component {
       return newFinding;
     });
     return (
-      <PaginatedTable data={this.props.findings} pageSize={10} columns={columns}/>
+      <PaginatedTable data={data} pageSize={10} columns={columns}/>
     );
   }
 }

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 <div className={className} style={{margin: '2px', display: 'inline-block'}}><i className={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</div>
   }
 }
+
+PillarLabel.propTypes = {
+  status: PropTypes.string,
+  pillar: PropTypes.string,
+};

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

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

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

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 (<div id="piilar-summary">
       {this.getStatusSummary("Conclusive")}
@@ -29,3 +30,7 @@ export class StatusesToPillarsSummary extends Component {
     }
   }
 }
+
+StatusesToPillarsSummary.propTypes = {
+  statusesToPillars: PropTypes.array
+};