p41275903
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reverted changed to ZT report page and fixed rule bug in diagram + whitespace.

This commit is contained in:
Shay Nehmad 2019-08-25 18:30:56 +03:00
parent 223adb0f33
commit 0a044e2295
3 changed files with 152 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
View File

@ -1,64 +1,17 @@
import React from 'react'; import React, {Fragment} from 'react';
import {Button, Col} from 'react-bootstrap'; import {Col, Grid, Row} from 'react-bootstrap';
import AuthComponent from '../AuthComponent'; import AuthComponent from '../AuthComponent';
import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader"; import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader";
import PillarGrades from "../report-components/zerotrust/PillarGrades"; import PillarsOverview from "../report-components/zerotrust/PillarOverview";
import PillarLabel from "../report-components/zerotrust/PillarLabel";
import ResponsiveVennDiagram from "../report-components/zerotrust/venn-components/ResponsiveVennDiagram";
import FindingsTable from "../report-components/zerotrust/FindingsTable"; import FindingsTable from "../report-components/zerotrust/FindingsTable";
import {SinglePillarRecommendationsStatus} from "../report-components/zerotrust/SinglePillarRecommendationsStatus"; import SinglePillarDirectivesStatus from "../report-components/zerotrust/SinglePillarDirectivesStatus";
import MonkeysStillAliveWarning from "../report-components/common/MonkeysStillAliveWarning";
let mockup = [ import ReportLoader from "../report-components/common/ReportLoader";
{ import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
"Conclusive": 4, import SecurityIssuesGlance from "../report-components/common/SecurityIssuesGlance";
"Inconclusive": 0, import StatusesToPillarsSummary from "../report-components/zerotrust/StatusesToPillarsSummary";
"Positive": 1, import PrintReportButton from "../report-components/common/PrintReportButton";
"Unexecuted": 2, import {extractExecutionStatusFromServerResponse} from "../report-components/common/ExecutionStatus";
"pillar": "Data"
},
{
"Conclusive": 0,
"Inconclusive": 5,
"Positive": 0,
"Unexecuted": 2,
"pillar": "People"
},
{
"Conclusive": 0,
"Inconclusive": 0,
"Positive": 6,
"Unexecuted": 3,
"pillar": "Networks"
},
{
"Conclusive": 2,
"Inconclusive": 0,
"Positive": 1,
"Unexecuted": 1,
"pillar": "Devices"
},
{
"Conclusive": 0,
"Inconclusive": 0,
"Positive": 0,
"Unexecuted": 0,
"pillar": "Workloads"
},
{
"Conclusive": 0,
"Inconclusive": 2,
"Positive": 0,
"Unexecuted": 0,
"pillar": "Visibility & Analytics"
},
{
"Conclusive": 0,
"Inconclusive": 0,
"Positive": 0,
"Unexecuted": 0,
"pillar": "Automation & Orchestration"
}
];
class ZeroTrustReportPageComponent extends AuthComponent { class ZeroTrustReportPageComponent extends AuthComponent {
@ -67,16 +20,30 @@ class ZeroTrustReportPageComponent extends AuthComponent {
this.state = { this.state = {
allMonkeysAreDead: false, allMonkeysAreDead: false,
runStarted: false runStarted: true
}; };
} }
render() { componentDidMount() {
let res; this.updateMonkeysRunning().then(res => this.getZeroTrustReportFromServer(res));
// Todo move to componentDidMount }
this.getZeroTrustReportFromServer(res);
const content = this.generateReportContent(); updateMonkeysRunning = () => {
return this.authFetch('/api')
.then(res => res.json())
.then(res => {
this.setState(extractExecutionStatusFromServerResponse(res));
return res;
});
};
render() {
let content;
if (this.state.runStarted) {
content = this.generateReportContent();
} else {
content = <MustRunMonkeyWarning/>;
}
return ( return (
<Col xs={12} lg={10}> <Col xs={12} lg={10}>
@ -92,63 +59,75 @@ class ZeroTrustReportPageComponent extends AuthComponent {
let content; let content;
if (this.stillLoadingDataFromServer()) { if (this.stillLoadingDataFromServer()) {
content = "Still empty"; content = <ReportLoader loading={true}/>;
} else { } else {
const pillarsSection = <div> content = <div id="MainContentSection">
<h2>Pillars Overview</h2> {this.generateOverviewSection()}
<PillarGrades pillars={this.state.pillars}/> {this.generateDirectivesSection()}
</div>; {this.generateFindingsSection()}
const recommendationsSection = <div><h2>Recommendations Status</h2>
{
this.state.recommendations.map((recommendation) =>
<SinglePillarRecommendationsStatus
key={recommendation.pillar}
pillar={recommendation.pillar}
recommendationStatus={recommendation.recommendationStatus}/>
)
}
</div>;
const findingSection = <div><h2>Findings</h2>
<FindingsTable findings={this.state.findings}/></div>;
content = <div>
{pillarsSection}
{recommendationsSection}
{findingSection}
</div>; </div>;
} }
return ( return (
<div> <Fragment>
<div className="text-center no-print" style={{marginBottom: '20px'}}> <div style={{marginBottom: '20px'}}>
<Button bsSize="large" onClick={() => { <PrintReportButton onClick={() => {print();}} />
this.print();
}}><i className="glyphicon glyphicon-print"/> Print Report</Button>
</div> </div>
<div className="report-page"> <div className="report-page">
<ReportHeader report_type={ReportTypes.zeroTrust}/> <ReportHeader report_type={ReportTypes.zeroTrust}/>
<hr/> <hr/>
{content} {content}
<hr/>
<pre>{JSON.stringify(this.state.pillars, undefined, 2)}</pre>
<br/>
<ResponsiveVennDiagram pillarsGrades={mockup} />
<pre>{JSON.stringify(this.state.recommendations, undefined, 2)}</pre>
<br/>
<pre>{JSON.stringify(this.state.findings, undefined, 2)}</pre>
</div> </div>
<div style={{marginTop: '20px'}}>
<PrintReportButton onClick={() => {print();}} />
</div> </div>
</Fragment>
) )
} }
stillLoadingDataFromServer() { generateFindingsSection() {
return typeof this.state.findings === "undefined" || typeof this.state.pillars === "undefined" || typeof this.state.recommendations === "undefined"; return (<div id="findings-overview">
<h2>Findings</h2>
<FindingsTable pillarsToStatuses={this.state.pillars.pillarsToStatuses} findings={this.state.findings}/>
</div>);
} }
print() { generateDirectivesSection() {
alert("unimplemented"); return (<div id="directives-overview">
<h2>Directives</h2>
{
Object.keys(this.state.directives).map((pillar) =>
<SinglePillarDirectivesStatus
key={pillar}
pillar={pillar}
directivesStatus={this.state.directives[pillar]}
pillarsToStatuses={this.state.pillars.pillarsToStatuses}/>
)
}
</div>);
}
generateOverviewSection() {
return (<div id="overview-section">
<h2>Overview</h2>
<Grid fluid={true}>
<Row className="show-grid">
<Col xs={8} sm={8} md={8} lg={8}>
<PillarsOverview pillarsToStatuses={this.state.pillars.pillarsToStatuses}
grades={this.state.pillars.grades}/>
</Col>
<Col xs={4} sm={4} md={4} lg={4}>
<MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
<SecurityIssuesGlance issuesFound={this.anyIssuesFound()}/>
<StatusesToPillarsSummary statusesToPillars={this.state.pillars.statusesToPillars}/>
</Col>
</Row>
</Grid>
</div>);
}
stillLoadingDataFromServer() {
return typeof this.state.findings === "undefined" || typeof this.state.pillars === "undefined" || typeof this.state.directives === "undefined";
} }
getZeroTrustReportFromServer() { getZeroTrustReportFromServer() {
@ -160,11 +139,11 @@ class ZeroTrustReportPageComponent extends AuthComponent {
findings: res findings: res
}); });
}); });
this.authFetch('/api/report/zero_trust/recommendations') this.authFetch('/api/report/zero_trust/directives')
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
this.setState({ this.setState({
recommendations: res directives: res
}); });
}); });
this.authFetch('/api/report/zero_trust/pillars') this.authFetch('/api/report/zero_trust/pillars')
@ -175,6 +154,14 @@ class ZeroTrustReportPageComponent extends AuthComponent {
}); });
}); });
} }
anyIssuesFound() {
const severe = function(finding) {
return (finding.status === "Conclusive" || finding.status === "Inconclusive");
};
return this.state.findings.some(severe);
}
} }
export default ZeroTrustReportPageComponent; export default ZeroTrustReportPageComponent;

2
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarOverview.js
View File

@ -1,7 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import PillarLabel from "./PillarLabel"; import PillarLabel from "./PillarLabel";
import * as PropTypes from "prop-types"; import * as PropTypes from "prop-types";
import ResponsiveVennDiagram from "./VennDiagram"; import ResponsiveVennDiagram from "./venn-components/ResponsiveVennDiagram";
const columns = [ const columns = [
{ {

62
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js
View File

@ -7,14 +7,13 @@ import { TypographicUtilities } from './Utility.js'
import './VennDiagram.css' import './VennDiagram.css'
class VennDiagram extends React.Component{ class VennDiagram extends React.Component{
constructor(props_){ constructor(props_){
super(props_); super(props_);
this.state = { tooltip: { top: 0, left: 0, display: 'none', html: '' } } this.state = { tooltip: { top: 0, left: 0, display: 'none', html: '' } };
this.width = this.height = 512, this.zOrder = []; this.width = this.height = 512;
this.zOrder = [];
this.colors = ['#777777', '#D9534F', '#F0AD4E', '#5CB85C']; this.colors = ['#777777', '#D9534F', '#F0AD4E', '#5CB85C'];
this.prefix = 'vennDiagram'; this.prefix = 'vennDiagram';
@ -24,14 +23,13 @@ class VennDiagram extends React.Component{
this.thirdWidth = this.width / 3; this.thirdWidth = this.width / 3;
this.sixthWidth = this.width / 6; this.sixthWidth = this.width / 6;
this.width2By7 = 2 * this.width / 7 this.width2By7 = 2 * this.width / 7;
this.width1By11 = this.width / 11; this.width1By11 = this.width / 11;
this.width1By28 = this.width / 28; this.width1By28 = this.width / 28;
this.toggle = false; this.toggle = false;
this.layout = { this.layout = {
Data: { cx: 0, cy: 0, r: this.thirdWidth - this.offset * 2, offset: {x: 0, y: 0} }, Data: { cx: 0, cy: 0, r: this.thirdWidth - this.offset * 2, offset: {x: 0, y: 0} },
People: { cx: -this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: this.width1By11, y: 0} }, People: { cx: -this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: this.width1By11, y: 0} },
Networks: { cx: this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: -this.width1By11, y: 0} }, Networks: { cx: this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: -this.width1By11, y: 0} },
@ -39,13 +37,12 @@ class VennDiagram extends React.Component{
Workloads : { cx: 0, cy: -this.width2By7, r: this.sixthWidth, offset: {x: 0, y: this.width1By11} }, Workloads : { cx: 0, cy: -this.width2By7, r: this.sixthWidth, offset: {x: 0, y: this.width1By11} },
VisibilityAndAnalytics : { inner: this.thirdWidth - this.width1By28, outer: this.thirdWidth }, VisibilityAndAnalytics : { inner: this.thirdWidth - this.width1By28, outer: this.thirdWidth },
AutomationAndOrchestration: { inner: this.thirdWidth - this.width1By28 * 2, outer: this.thirdWidth - this.width1By28 } AutomationAndOrchestration: { inner: this.thirdWidth - this.width1By28 * 2, outer: this.thirdWidth - this.width1By28 }
}; };
/* /*
RULE #1: All scores have to be equal 0, except Unexecuted [U] which could be also a negative integer RULE #1: All scores have to be equal 0, except Unexecuted [U] which could be also a negative integer
sum(C, I, P, U) has to be <=0 sum(C, I, P) has to be <=0
RULE #2: Conclusive [C] has to be > 0, RULE #2: Conclusive [C] has to be > 0,
sum(C) > 0 sum(C) > 0
@ -62,31 +59,25 @@ class VennDiagram extends React.Component{
this.rules = [ this.rules = [
{ id: 'Rule #1', f: function(d_){ return d_['Conclusive'] + d_['Inconclusive'] + d_['Positive'] + d_['Unexecuted'] <= 0; } }, { id: 'Rule #1', f: function(d_){ return d_['Conclusive'] + d_['Inconclusive'] + d_['Positive'] === 0; } },
{ id: 'Rule #2', f: function(d_){ return d_['Conclusive'] > 0; } }, { id: 'Rule #2', f: function(d_){ return d_['Conclusive'] > 0; } },
{ id: 'Rule #3', f: function(d_){ return d_['Conclusive'] === 0 && d_['Inconclusive'] > 0; } }, { id: 'Rule #3', f: function(d_){ return d_['Conclusive'] === 0 && d_['Inconclusive'] > 0; } },
{ id: 'Rule #4', f: function(d_){ return d_['Positive'] + d_['Unexecuted'] >= 2 && d_['Positive'] * d_['Unexecuted'] > 0; } } { id: 'Rule #4', f: function(d_){ return d_['Positive'] + d_['Unexecuted'] >= 2 && d_['Positive'] * d_['Unexecuted'] > 0; } }
]; ];
this._onScroll = this._onScroll.bind(this); this._onScroll = this._onScroll.bind(this);
} }
componentDidMount() { componentDidMount() {
this.parseData(); this.parseData();
window.addEventListener('scroll', this._onScroll); window.addEventListener('scroll', this._onScroll);
} }
_onMouseMove(e) { _onMouseMove(e) {
let self = this; let self = this;
if(!this.toggle){ if(!this.toggle){
let hidden = 'none'; let hidden = 'none';
let html = ''; let html = '';
let bcolor = '#DEDEDE'; let bcolor = '#DEDEDE';
@ -100,41 +91,35 @@ class VennDiagram extends React.Component{
hidden = 'block'; e.target.setAttribute('opacity', 0.95); hidden = 'block'; e.target.setAttribute('opacity', 0.95);
bcolor = e.target.getAttribute('fill'); bcolor = e.target.getAttribute('fill');
//set highest z-index // Set highest z-index
e.target.parentNode.parentNode.appendChild(e.target.parentNode); e.target.parentNode.parentNode.appendChild(e.target.parentNode);
}else{ }else{
this.divElement.style.cursor = 'default'; this.divElement.style.cursor = 'default';
//return z indices to default // Return z indices to default
Object.keys(this.layout).forEach(function(d_, i_){ document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode); }) Object.keys(this.layout).forEach(function(d_, i_){ document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode); })
} }
this.setState({target: e, tooltip: { target: e.target, bcolor: bcolor, top: e.clientY + 8, left: e.clientX + 8, display: hidden, html: html } }); this.setState({target: e, tooltip: { target: e.target, bcolor: bcolor, top: e.clientY + 8, left: e.clientX + 8, display: hidden, html: html } });
} }
} }
_onScroll(e){ _onScroll(e){
this.divElement.style.cursor = 'default'; this.divElement.style.cursor = 'default';
this.setState({target: null, tooltip: { target: null, bcolor: 'none', top: 0, left: 0, display: 'none', html: '' } }); this.setState({target: null, tooltip: { target: null, bcolor: 'none', top: 0, left: 0, display: 'none', html: '' } });
} }
_onClick(e) { _onClick(e) {
this.toggle = this.state.tooltip.target === e.target;
if(this.state.tooltip.target === e.target) { this.toggle = true; } else { this.toggle = false; }
//variable to external callback //variable to external callback
//e.target.parentNode.id) //e.target.parentNode.id)
} }
parseData(){ parseData(){
let self = this; let self = this;
let data = []; let data = [];
const omit = (prop, { [prop]: _, ...rest }) => rest; const omit = (prop, { [prop]: _, ...rest }) => rest;
@ -152,17 +137,16 @@ class VennDiagram extends React.Component{
self.setLayoutElement(rule, key, html, d_); self.setLayoutElement(rule, key, html, d_);
data.push(this.layout[key]); data.push(this.layout[key]);
}) });
this.setState({ data: data }); this.setState({ data: data });
this.render(); this.render();
} }
buildTooltipHtmlContent(object_){ return Object.keys(object_).reduce((out_, key_) => out_ + TypographicUtilities.setTitle(key_) + ': ' + object_[key_] + '\n', ''); } buildTooltipHtmlContent(object_){ return Object.keys(object_).reduce((out_, key_) => out_ + TypographicUtilities.setTitle(key_) + ': ' + object_[key_] + '\n', ''); }
setLayoutElement(rule_, key_, html_, d_){ setLayoutElement(rule_, key_, html_, d_){
console.log(rule_, key_, html_, d_);
if(rule_ == null) { throw Error('The node scores are invalid'); } if(rule_ == null) { throw Error('The node scores are invalid'); }
if(key_ === 'Data'){ this.layout[key_].fontStyle = this.fontStyles[0]; } if(key_ === 'Data'){ this.layout[key_].fontStyle = this.fontStyles[0]; }
@ -172,75 +156,53 @@ class VennDiagram extends React.Component{
this.layout[key_].label = d_.pillar + this.suffices[rule_]; this.layout[key_].label = d_.pillar + this.suffices[rule_];
this.layout[key_].node = d_; this.layout[key_].node = d_;
this.layout[key_].tooltip = html_; this.layout[key_].tooltip = html_;
} }
render() { render() {
if(this.state.data === undefined) { return null; } if(this.state.data === undefined) { return null; }
else { else {
// equivalent to center translate (width/2, height/2) // equivalent to center translate (width/2, height/2)
let viewPortParameters = (-this.width / 2) + ' ' + (-this.height / 2) + ' ' + this.width + ' ' + this.height; let viewPortParameters = (-this.width / 2) + ' ' + (-this.height / 2) + ' ' + this.width + ' ' + this.height;
let translate = 'translate(' + this.width /2 + ',' + this.height/2 + ')'; let translate = 'translate(' + this.width /2 + ',' + this.height/2 + ')';
let nodes = Object.values(this.layout).map((d_, i_) => { let nodes = Object.values(this.layout).map((d_, i_) => {
if(d_.hasOwnProperty('cx')) { if(d_.hasOwnProperty('cx')) {
return ( return (
<CircularNode <CircularNode
prefix={this.prefix} prefix={this.prefix}
key={this.prefix + 'CircularNode' + i_} key={this.prefix + 'CircularNode' + i_}
index={i_} index={i_}
data={d_} data={d_}
/> />
); );
} else { } else {
d_.label = TypographicUtilities.removeBrokenBar(d_.label); d_.label = TypographicUtilities.removeBrokenBar(d_.label);
return ( return (
<ArcNode <ArcNode
prefix={this.prefix} prefix={this.prefix}
key={this.prefix + 'ArcNode' + i_} key={this.prefix + 'ArcNode' + i_}
index={i_} index={i_}
data={d_} data={d_}
/> />
); );
} }
}); });
return ( return (
<div ref={ (divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onClick={this._onClick.bind(this)} > <div ref={ (divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onClick={this._onClick.bind(this)} >
<svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'} xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'> <svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'} xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
{nodes} {nodes}
</svg> </svg>
<Tooltip id={this.prefix + 'Tooltip'} prefix={this.prefix} {...this.state.tooltip} /> <Tooltip id={this.prefix + 'Tooltip'} prefix={this.prefix} {...this.state.tooltip} />
</div> </div>
) )
} }
} }
} }
VennDiagram.propTypes = { VennDiagram.propTypes = {
pillarsGrades: PropTypes.array pillarsGrades: PropTypes.array
};
}
export default VennDiagram; export default VennDiagram;