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;
return (
<OverlayTrigger key={prefix + 'ArcOverlayTrigger' + index} trigger={['hover', 'focus']} placement={data.popover}
overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + 'Popover'}
<OverlayTrigger key={prefix + 'arcGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + 'Popover' + index}
style={{backgroundColor: data.hex}}
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
id={prefix + 'Node_' + index}
@ -25,10 +25,11 @@ class ArcNode extends React.Component {
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'}>
<textPath href={'#' + id} startOffset={'26.4%'}>
{data.label}
<tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>
<tspan>{data.label}</tspan>
</textPath>
</text>
</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 + ')';
return (
<OverlayTrigger key={prefix + 'CircularOverlayTrigger' + index} trigger={['hover', 'focus']}
placement={data.popover}
overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover'}
<OverlayTrigger key={prefix + 'circularGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover' + index}
style={{backgroundColor: data.hex}}
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
id={prefix + 'Node_' + index}
className={'circularNode'}

39
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.prefix = 'vennDiagram';
this.suffices = ['', '|tests are|failed', '|tests were|inconclusive', '|tests|performed'];
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'
}];
this.offset = this.width / 16;
@ -36,11 +35,12 @@ class VennDiagram extends React.Component {
People: {cx: -this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: this.width1By11, y: 0}, popover: 'right'},
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'},
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'},
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, icon: '\uf070', popover: 'left'},
AutomationAndOrchestration: {
inner: this.thirdWidth - this.width1By28 * 2 - this.arcNodesGap,
outer: this.thirdWidth - this.width1By28 - this.arcNodesGap,
icon: '\uf085',
popover: 'right'
}
};
@ -123,16 +123,9 @@ class VennDiagram extends React.Component {
}
}
_onClick(e) {
this.toggle = this.state.tooltip.target === e.target;
//variable to external callback
//e.target.parentNode.id)
}
parseData() {
let self = this;
let data = [];
const omit = (prop, {[prop]: _, ...rest}) => rest;
@ -140,6 +133,7 @@ class VennDiagram extends React.Component {
this.props.pillarsGrades.forEach((d_, i_) => {
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 html = self.buildTooltipHtmlContent(params);
let rule = null;
@ -159,15 +153,13 @@ class VennDiagram extends React.Component {
this.setState({data: data});
this.render();
}
buildTooltipHtmlContent(object_) {
var out = [];
Object.keys(object_).forEach(function (d_) {
out.push([d_ + ': ' + object_[d_], <br/>]);
});
return out;
Object.keys(object_).forEach(function(d_){ out.push([d_ + ': ' + object_[d_], <br />]); });
return out;
}
setLayoutElement(rule_, key_, html_, d_) {
@ -183,7 +175,7 @@ class VennDiagram extends React.Component {
this.layout[key_].hex = this.rules[rule_].hex;
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_].tooltip = html_;
}
@ -219,12 +211,11 @@ class VennDiagram extends React.Component {
});
return (
<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%'}
<div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.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'>
{nodes}
</svg>
</svg>
</div>
)
}