Added coloured labels

monkey/monkey_island/cc/resources/reporting/report.py

@@ -87,49 +87,49 @@ def get_tests_status():
 def get_pillars_grades():
     return [
                 {
-                    "Pillar": "data",
+                    "Pillar": "Data",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,
                     "Unexecuted": 6
                 },
                 {
-                    "Pillar": "network",
+                    "Pillar": "Networks",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,
                     "Unexecuted": 6
                 },
                 {
-                    "Pillar": "people",
+                    "Pillar": "People",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,
                     "Unexecuted": 6
                 },
                 {
-                    "Pillar": "workloads",
+                    "Pillar": "Workloads",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,
                     "Unexecuted": 6
                 },
                 {
-                    "Pillar": "devices",
+                    "Pillar": "Devices",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,
                     "Unexecuted": 6
                 },
                 {
-                    "Pillar": "visibility and analytics",
+                    "Pillar": "Visibility & Analytics",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,
                     "Unexecuted": 6
                 },
                 {
-                    "Pillar": "automation and analytics",
+                    "Pillar": "Automation & Orchestration",
                     "Conclusive": 6,
                     "Inconclusive": 6,
                     "Positive": 6,

monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js

@@ -18,6 +18,7 @@ class ZeroTrustReportPageComponent extends AuthComponent {
 
   render() {
     let res;
+    // Todo move to componentDidMount
     this.getZeroTrustReportFromServer(res);
 
     const content = this.generateReportContent();

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

@@ -3,10 +3,7 @@ import ReactTable from "react-table";
 import {Button} from "react-bootstrap";
 import {EventsModal} from "./EventsModal";
 import FileSaver from "file-saver";
-
-function PillarLabel(props) {
-  return <span className="label label-primary" style={{margin: '2px'}}>{props.pillar}</span>
-}
+import {PillarLabel} from "./PillarLabel";
 
 
 class EventsAndButtonComponent extends Component {

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

@@ -1,11 +1,14 @@
 import React, {Component} from "react";
 import ReactTable from "react-table";
+import {PillarLabel} from "./PillarLabel";
 
 const columns = [
   {
     Header: 'Pillar Grading',
     columns: [
-      { Header: 'Pillar', accessor: 'Pillar'},
+      { Header: 'Pillar', id: 'Pillar', accessor: x => {
+          return (<PillarLabel pillar={x.Pillar} />);
+        }},
       { Header: 'Conclusive', accessor: 'Conclusive'},
       { Header: 'Inconclusive', accessor: 'Inconclusive'},
       { Header: 'Unexecuted', accessor: 'Unexecuted'},

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

@@ -0,0 +1,21 @@
+import React, {Component} from "react";
+import 'styles/ZeroTrustPillars.css'
+
+export class PillarLabel extends Component {
+  pillar;
+
+  render() {
+    const pillarToColor = {
+      "Data": "label-zt-data",
+      "People": "label-zt-people",
+      "Networks": "label-zt-networks",
+      "Workloads": "label-zt-workloads",
+      "Devices": "label-zt-devices",
+      "Visibility & Analytics": "label-zt-analytics",
+      "Automation & Orchestration": "label-zt-automation",
+    };
+
+    const className = "label " + pillarToColor[this.props.pillar];
+    return <span className={className} style={{margin: '2px'}}>{this.props.pillar}</span>
+  }
+}

monkey/monkey_island/cc/ui/src/styles/ZeroTrustPillars.css

@@ -0,0 +1,27 @@
+.label-zt-data {
+  background-color: #FAD02C !important;
+}
+
+.label-zt-people {
+  background-color: #507581 !important;
+}
+
+.label-zt-networks {
+  background-color: #746233 !important;
+}
+
+.label-zt-devices {
+  background-color: #2F3B29 !important;
+}
+
+.label-zt-workloads {
+  background-color: #0C1440 !important;
+}
+
+.label-zt-analytics {
+  background-color: #6B8836 !important;
+}
+
+.label-zt-automation {
+  background-color: #B4BC82 !important;
+}