p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New Version of the Venn Diagram

This commit is contained in:
Shay Nehmad 2019-08-28 19:52:30 +03:00
parent dee006449d
commit b343ccf21e
3 changed files with 24 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/ArcNode.js
View File

@ -11,11 +11,11 @@ class ArcNode extends React.Component {
let id = prefix + 'Node_' + index; let id = prefix + 'Node_' + index;
return ( return (
<OverlayTrigger key={prefix + 'ArcOverlayTrigger' + index} trigger={['hover', 'focus']} placement={data.popover} <OverlayTrigger key={prefix + 'arcGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + 'Popover'} overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + 'Popover' + index}
style={{backgroundColor: data.hex}} style={{backgroundColor: data.hex}}
title={data.node.pillar}>{data.tooltip}</Popover>}> title={data.node.pillar}>{data.tooltip}</Popover>}>
<g transform={'rotate(180)'} id={data.node.pillar}> <g transform={'rotate(180)'} id={data.node.pillar} key={prefix + 'arcGroup' + index}>
<path <path
id={prefix + 'Node_' + index} id={prefix + 'Node_' + index}
@ -25,10 +25,11 @@ class ArcNode extends React.Component {
fill={data.hex} fill={data.hex}
/> />
<text x={0} dy={data.fontStyle.size * 1.2} fontSize={data.fontStyle.size} textAnchor='middle' <text x={0} dy={data.fontStyle.size * 1.75} fontSize={data.fontStyle.size} fill={'white'} textAnchor='middle'
pointerEvents={'none'}> pointerEvents={'none'}>
<textPath href={'#' + id} startOffset={'26.4%'}> <textPath href={'#' + id} startOffset={'26.4%'}>
{data.label} <tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>
<tspan>{data.label}</tspan>
</textPath> </textPath>
</text> </text>
</g> </g>

7
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/CircularNode.js
View File

@ -9,12 +9,11 @@ class CircularNode extends React.Component {
let translate = 'translate(' + data.cx + ',' + data.cy + ')'; let translate = 'translate(' + data.cx + ',' + data.cy + ')';
return ( return (
<OverlayTrigger key={prefix + 'CircularOverlayTrigger' + index} trigger={['hover', 'focus']} <OverlayTrigger key={prefix + 'circularGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
placement={data.popover} overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover' + index}
overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover'}
style={{backgroundColor: data.hex}} style={{backgroundColor: data.hex}}
title={data.node.pillar}>{data.tooltip}</Popover>}> title={data.node.pillar}>{data.tooltip}</Popover>}>
<g transform={translate} id={data.node.pillar}> <g transform={translate} id={data.node.pillar} key={prefix + 'circularGroup' + index}>
<circle <circle
id={prefix + 'Node_' + index} id={prefix + 'Node_' + index}
className={'circularNode'} className={'circularNode'}

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

@ -15,9 +15,8 @@ class VennDiagram extends React.Component {
this.width = this.height = 512; this.width = this.height = 512;
this.prefix = 'vennDiagram'; this.prefix = 'vennDiagram';
this.suffices = ['', '|tests are|failed', '|tests were|inconclusive', '|tests|performed'];
this.fontStyles = [{size: Math.max(9, this.width / 32), color: 'white'}, { this.fontStyles = [{size: Math.max(9, this.width / 32), color: 'white'}, {
size: Math.max(6, this.width / 52), size: Math.max(6, this.width / 80),
color: 'black' color: 'black'
}]; }];
this.offset = this.width / 16; this.offset = this.width / 16;
@ -37,10 +36,11 @@ class VennDiagram extends React.Component {
Networks: {cx: this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: -this.width1By11, y: 0}, popover: 'left'}, Networks: {cx: this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: -this.width1By11, y: 0}, popover: 'left'},
Devices: {cx: 0, cy: this.width2By7, r: this.sixthWidth, offset: {x: 0, y: -this.width1By11}, popover: 'top'}, Devices: {cx: 0, cy: this.width2By7, r: this.sixthWidth, offset: {x: 0, y: -this.width1By11}, popover: 'top'},
Workloads: {cx: 0, cy: -this.width2By7, r: this.sixthWidth, offset: {x: 0, y: this.width1By11}, popover: 'bottom' }, Workloads: {cx: 0, cy: -this.width2By7, r: this.sixthWidth, offset: {x: 0, y: this.width1By11}, popover: 'bottom' },
VisibilityAndAnalytics: {inner: this.thirdWidth - this.width1By28, outer: this.thirdWidth, popover: 'right'}, VisibilityAndAnalytics: {inner: this.thirdWidth - this.width1By28, outer: this.thirdWidth, icon: '\uf070', popover: 'left'},
AutomationAndOrchestration: { AutomationAndOrchestration: {
inner: this.thirdWidth - this.width1By28 * 2 - this.arcNodesGap, inner: this.thirdWidth - this.width1By28 * 2 - this.arcNodesGap,
outer: this.thirdWidth - this.width1By28 - this.arcNodesGap, outer: this.thirdWidth - this.width1By28 - this.arcNodesGap,
icon: '\uf085',
popover: 'right' popover: 'right'
} }
}; };
@ -124,13 +124,6 @@ class VennDiagram extends React.Component {
} }
} }
_onClick(e) {
this.toggle = this.state.tooltip.target === e.target;
//variable to external callback
//e.target.parentNode.id)
}
parseData() { parseData() {
let self = this; let self = this;
@ -140,6 +133,7 @@ class VennDiagram extends React.Component {
this.props.pillarsGrades.forEach((d_, i_) => { this.props.pillarsGrades.forEach((d_, i_) => {
let params = omit('pillar', d_); let params = omit('pillar', d_);
let sum = Object.keys(params).reduce((sum_, key_) => sum_ + parseFloat(params[key_] || 0), 0);
let key = TypographicUtilities.removeAmpersand(d_.pillar); let key = TypographicUtilities.removeAmpersand(d_.pillar);
let html = self.buildTooltipHtmlContent(params); let html = self.buildTooltipHtmlContent(params);
let rule = null; let rule = null;
@ -163,9 +157,7 @@ class VennDiagram extends React.Component {
buildTooltipHtmlContent(object_) { buildTooltipHtmlContent(object_) {
var out = []; var out = [];
Object.keys(object_).forEach(function (d_) { Object.keys(object_).forEach(function(d_){ out.push([d_ + ': ' + object_[d_], <br />]); });
out.push([d_ + ': ' + object_[d_], <br/>]);
});
return out; return out;
} }
@ -183,7 +175,7 @@ class VennDiagram extends React.Component {
this.layout[key_].hex = this.rules[rule_].hex; this.layout[key_].hex = this.rules[rule_].hex;
this.layout[key_].status = this.rules[rule_].status; this.layout[key_].status = this.rules[rule_].status;
this.layout[key_].label = d_.pillar + this.suffices[rule_]; this.layout[key_].label = d_.pillar;
this.layout[key_].node = d_; this.layout[key_].node = d_;
this.layout[key_].tooltip = html_; this.layout[key_].tooltip = html_;
} }
@ -219,8 +211,7 @@ class VennDiagram extends React.Component {
}); });
return ( return (
<div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.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%'} <svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'}
xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'> xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
{nodes} {nodes}