diff --git a/monkey/monkey_island/cc/resources/reporting/report.py b/monkey/monkey_island/cc/resources/reporting/report.py
index 8ae1d8769..b9e16427d 100644
--- a/monkey/monkey_island/cc/resources/reporting/report.py
+++ b/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,
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 f7b5dc5bf..c81509a8a 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
+++ b/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();
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js
index 863d08670..b3a54a01d 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js
+++ b/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 {props.pillar}
-}
+import {PillarLabel} from "./PillarLabel";
class EventsAndButtonComponent extends Component {
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js
index 896a1e4d2..8ebc0e13d 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js
+++ b/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 ();
+ }},
{ Header: 'Conclusive', accessor: 'Conclusive'},
{ Header: 'Inconclusive', accessor: 'Inconclusive'},
{ Header: 'Unexecuted', accessor: 'Unexecuted'},
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
new file mode 100644
index 000000000..6827c95ce
--- /dev/null
+++ b/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 {this.props.pillar}
+ }
+}
diff --git a/monkey/monkey_island/cc/ui/src/styles/ZeroTrustPillars.css b/monkey/monkey_island/cc/ui/src/styles/ZeroTrustPillars.css
new file mode 100644
index 000000000..09b5289dc
--- /dev/null
+++ b/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;
+}