forked from p15670423/monkey
Created basic zero trust report page mockup
Extracted the reportHeader from the regular report
This commit is contained in:
Shay Nehmad
parent
3dd7b9a15e
commit
197ac585e8
|
|
@ -12,9 +12,10 @@ import AuthComponent from '../AuthComponent';
|
|||
import PassTheHashMapPageComponent from "./PassTheHashMapPage";
|
||||
import StrongUsers from "components/report-components/StrongUsers";
|
||||
import AttackReport from "components/report-components/AttackReport";
|
||||
import ReportHeader, { ReportTypes } from "../report-components/ReportHeader";
|
||||
|
||||
let guardicoreLogoImage = require('../../images/guardicore-logo.png');
|
||||
let monkeyLogoImage = require('../../images/monkey-icon.svg');
|
||||
|
||||
|
||||
class ReportPageComponent extends AuthComponent {
|
||||
|
||||
|
|
@ -130,13 +131,16 @@ class ReportPageComponent extends AuthComponent {
|
|||
generateReportContent() {
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
// extract to print component.
|
||||
}
|
||||
<div className="text-center no-print" style={{marginBottom: '20px'}}>
|
||||
<Button bsSize="large" onClick={() => {
|
||||
print();
|
||||
}}><i className="glyphicon glyphicon-print"/> Print Report</Button>
|
||||
</div>
|
||||
<div className="report-page">
|
||||
{this.generateReportHeader()}
|
||||
<ReportHeader report_type={ReportTypes.security}/>
|
||||
<hr/>
|
||||
{this.generateReportOverviewSection()}
|
||||
{this.generateReportFindingsSection()}
|
||||
|
|
@ -154,26 +158,6 @@ class ReportPageComponent extends AuthComponent {
|
|||
);
|
||||
}
|
||||
|
||||
generateReportHeader() {
|
||||
return (
|
||||
<div id="header" className="row justify-content-between">
|
||||
<Col xs={8}>
|
||||
<div>
|
||||
<h1 style={{marginTop: '0px', marginBottom: '5px', color: '#666666', fontFamily: 'Alegreya'}}>Security Report</h1>
|
||||
<h1 style={{marginTop: '0px', marginBottom: '0px', color: '#ffcc00', fontFamily: 'Alegreya'}}>Infection <b>Monkey</b></h1>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<img src={monkeyLogoImage}
|
||||
style={{
|
||||
float: 'right',
|
||||
width: '80px'
|
||||
}}/>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
generateReportOverviewSection() {
|
||||
return (
|
||||
<div id="overview">
|
||||
|
|
|
|||
|
|
@ -1,41 +1,32 @@
|
|||
import React from 'react';
|
||||
import {Button, Col} from 'react-bootstrap';
|
||||
import BreachedServers from 'components/report-components/BreachedServers';
|
||||
import ScannedServers from 'components/report-components/ScannedServers';
|
||||
import PostBreach from 'components/report-components/PostBreach';
|
||||
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
|
||||
import {edgeGroupToColor, options} from 'components/map/MapOptions';
|
||||
import StolenPasswords from 'components/report-components/StolenPasswords';
|
||||
import CollapsibleWellComponent from 'components/report-components/CollapsibleWell';
|
||||
import {Line} from 'rc-progress';
|
||||
import AuthComponent from '../AuthComponent';
|
||||
import PassTheHashMapPageComponent from "./PassTheHashMapPage";
|
||||
import StrongUsers from "components/report-components/StrongUsers";
|
||||
import AttackReport from "components/report-components/AttackReport";
|
||||
|
||||
let guardicoreLogoImage = require('../../images/guardicore-logo.png');
|
||||
let monkeyLogoImage = require('../../images/monkey-icon.svg');
|
||||
import ReportHeader, { ReportTypes } from "../report-components/ReportHeader";
|
||||
import ZeroTrustReportPillarGrades from "../report-components/zerotrust/ZeroTrustReportPillarGrades";
|
||||
|
||||
class ZeroTrustReportPageComponent extends AuthComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
report: {},
|
||||
report: {
|
||||
findings: undefined
|
||||
},
|
||||
allMonkeysAreDead: false,
|
||||
runStarted: true
|
||||
runStarted: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let content;
|
||||
let res;
|
||||
this.getZeroTrustReportFromServer(res);
|
||||
content = JSON.stringify(this.state.report);
|
||||
|
||||
const content = this.generateReportContent();
|
||||
|
||||
return (
|
||||
<Col xs={12} lg={10}>
|
||||
<h1 className="page-title no-print">4. Security Report</h1>
|
||||
<h1 className="page-title no-print">5. Zero Trust Report</h1>
|
||||
<div style={{'fontSize': '1.2em'}}>
|
||||
{content}
|
||||
</div>
|
||||
|
|
@ -43,17 +34,52 @@ class ZeroTrustReportPageComponent extends AuthComponent {
|
|||
);
|
||||
}
|
||||
|
||||
// This dups the regular report
|
||||
getZeroTrustReportFromServer(res) {
|
||||
//if (res['completed_steps']['run_monkey']) {
|
||||
this.authFetch('/api/report/zero_trust')
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
this.setState({
|
||||
report: res
|
||||
});
|
||||
generateReportContent() {
|
||||
let content;
|
||||
|
||||
console.log(this.state.report.findings);
|
||||
|
||||
if (typeof this.state.report.findings === "undefined") {
|
||||
content = "Still empty";
|
||||
} else {
|
||||
content = <div>
|
||||
<ZeroTrustReportPillarGrades findings={this.state.report.findings} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-center no-print" style={{marginBottom: '20px'}}>
|
||||
<Button bsSize="large" onClick={() => {
|
||||
this.print();
|
||||
}}><i className="glyphicon glyphicon-print"/> Print Report</Button>
|
||||
</div>
|
||||
|
||||
<div className="report-page">
|
||||
<ReportHeader report_type={ReportTypes.zeroTrust}/>
|
||||
<hr/>
|
||||
{content}
|
||||
THIS IS THE RAW SERVER DATA
|
||||
<pre id="json-report">
|
||||
{JSON.stringify(this.state.report, undefined, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
print() {
|
||||
alert("unimplemented");
|
||||
}
|
||||
|
||||
getZeroTrustReportFromServer() {
|
||||
this.authFetch('/api/report/zero_trust')
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
this.setState({
|
||||
report: res
|
||||
});
|
||||
//}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import React, {Component} from "react";
|
||||
import {Col} from "react-bootstrap";
|
||||
|
||||
let monkeyLogoImage = require('../../images/monkey-icon.svg');
|
||||
|
||||
export const ReportTypes = {
|
||||
zeroTrust: "Zero Trust",
|
||||
security: "Security",
|
||||
null: ""
|
||||
};
|
||||
|
||||
export class ReportHeader extends Component {
|
||||
report_type;
|
||||
|
||||
render() {
|
||||
return <div id="header" className="row justify-content-between">
|
||||
<Col xs={8}>
|
||||
<div>
|
||||
<h1 style={{marginTop: '0px', marginBottom: '5px', color: '#666666', fontFamily: 'Alegreya'}}>
|
||||
{this.props.report_type} Report</h1>
|
||||
<h1 style={{
|
||||
marginTop: '0px',
|
||||
marginBottom: '0px',
|
||||
color: '#ffcc00',
|
||||
fontFamily: 'Alegreya'
|
||||
}}>Infection <b>Monkey</b></h1>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<img src={monkeyLogoImage}
|
||||
style={{
|
||||
float: 'right',
|
||||
width: '80px'
|
||||
}}/>
|
||||
</Col>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
export default ReportHeader;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export const ZeroTrustPillars = {
|
||||
data: "Data",
|
||||
people: "People",
|
||||
network: "Networks",
|
||||
workload: "Workload",
|
||||
devices: "Devices",
|
||||
visibility: "Visibility & Analytics",
|
||||
automation: "Automation & Orchestration"
|
||||
};
|
||||
|
||||
export default ZeroTrustPillars;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React, {Component} from "react";
|
||||
import ZeroTrustPillars from "./ZeroTrustPillars";
|
||||
|
||||
export class ZeroTrustReportPillarGrades extends Component {
|
||||
render() {
|
||||
let pillarsCounters = {};
|
||||
for(const pillar in ZeroTrustPillars){
|
||||
pillarsCounters[ZeroTrustPillars[pillar]] = 0;
|
||||
}
|
||||
|
||||
if (this.props.findings !== null) {
|
||||
for (const finding of this.props.findings) {
|
||||
console.log("finding: " + JSON.stringify(finding));
|
||||
if (typeof finding === 'object' && finding !== null) {
|
||||
if (finding.hasOwnProperty("pillars")) {
|
||||
for (const pillar of finding["pillars"]) {
|
||||
pillarsCounters[pillar] = pillarsCounters[pillar] + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="pillar-grades">
|
||||
<h2>
|
||||
Pillars Overview
|
||||
</h2>
|
||||
<p>
|
||||
TODO: table with conditional colouring.
|
||||
</p>
|
||||
<pre>
|
||||
{JSON.stringify(pillarsCounters, undefined, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ZeroTrustReportPillarGrades;
|
||||
Loading…
Reference in New Issue