Added a short summary sentence over each table in the security report

Solves https://github.com/guardicore/monkey/issues/635
This commit is contained in:
Shay Nehmad 2020-05-11 22:36:38 +03:00
parent 3fcc9444e9
commit c1f52ee994
4 changed files with 68 additions and 34 deletions

View File

@ -407,18 +407,23 @@ class ReportPageComponent extends AuthComponent {
<div style={{position: 'relative', height: '80vh'}}>
<ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)}/>
</div>
<div style={{marginBottom: '20px'}}>
<BreachedServers data={this.state.report.glance.exploited}/>
</div>
<div style={{marginBottom: '20px'}}>
<PostBreach data={this.state.report.glance.scanned}/>
</div>
<div style={{marginBottom: '20px'}}>
<ScannedServers data={this.state.report.glance.scanned}/>
</div>
<div style={{marginBottom: '20px'}}>
<BreachedServers data={this.state.report.glance.exploited}/>
</div>
<div style={{marginBottom: '20px'}}>
<PostBreach data={this.state.report.glance.scanned}/>
</div>
<div style={{position: 'relative', height: '80vh'}}>
{this.generateReportPthMap()}
</div>
<div style={{marginBottom: '20px'}}>
<StolenPasswords data={this.state.report.glance.stolen_creds.concat(this.state.report.glance.ssh_keys)}/>
</div>

View File

@ -1,5 +1,6 @@
import React from 'react';
import ReactTable from 'react-table'
import Pluralize from "pluralize";
let renderArray = function (val) {
return <div>{val.map(x => <div>{x}</div>)}</div>;
@ -34,14 +35,20 @@ class BreachedServersComponent extends React.Component {
let defaultPageSize = this.props.data.length > pageSize ? pageSize : this.props.data.length;
let showPagination = this.props.data.length > pageSize;
return (
<div className="data-table-container">
<ReactTable
columns={columns}
data={this.props.data}
showPagination={showPagination}
defaultPageSize={defaultPageSize}
/>
</div>
<>
<p>
The Monkey successfully breached <span
className="label label-danger">{this.props.data.length}</span> {Pluralize('machines', this.props.data.length)}:
</p>
<div className="data-table-container">
<ReactTable
columns={columns}
data={this.props.data}
showPagination={showPagination}
defaultPageSize={defaultPageSize}
/>
</div>
</>
);
}
}

View File

@ -1,5 +1,6 @@
import React from 'react';
import ReactTable from 'react-table'
import Pluralize from 'pluralize'
let renderArray = function (val) {
return <span>{val.map(x => <span key={x}> {x}</span>)}</span>;
@ -62,19 +63,26 @@ class PostBreachComponent extends React.Component {
});
let defaultPageSize = pbaMachines.length > pageSize ? pageSize : pbaMachines.length;
let showPagination = pbaMachines > pageSize;
const howManyPBAs = pbaMachines.reduce((accumulated, pbaMachine) => accumulated+pbaMachine["pba_results"].length,0)
return (
<div className="data-table-container">
<ReactTable
columns={columns}
data={pbaMachines}
showPagination={showPagination}
defaultPageSize={defaultPageSize}
SubComponent={row => {
return renderDetails(row.original.pba_results);
}}
/>
</div>
<>
<p>
The Monkey performed <span
className="label label-danger">{howManyPBAs}</span> post-breach {Pluralize('actions', howManyPBAs)} on <span
className="label label-warning">{pbaMachines.length}</span> {Pluralize('machines', pbaMachines.length)}:
</p>
<div className="data-table-container">
<ReactTable
columns={columns}
data={pbaMachines}
showPagination={showPagination}
defaultPageSize={defaultPageSize}
SubComponent={row => {
return renderDetails(row.original.pba_results);
}}
/>
</div>
</>
);
}
}

View File

@ -1,5 +1,6 @@
import React from 'react';
import ReactTable from 'react-table'
import Pluralize from 'pluralize'
let renderArray = function (val) {
return <div>{val.map(x => <div>{x}</div>)}</div>;
@ -32,17 +33,30 @@ class ScannedServersComponent extends React.Component {
}
render() {
let defaultPageSize = this.props.data.length > pageSize ? pageSize : this.props.data.length;
let showPagination = this.props.data.length > pageSize;
const howManyScannedMachines = this.props.data.length;
const reducerFromScannedServerToServicesAmount = (accumulated, scannedServer) => accumulated + scannedServer["services"].length;
const howManyScannedServices = this.props.data.reduce(reducerFromScannedServerToServicesAmount, 0);
return (
<div className="data-table-container">
<ReactTable
columns={columns}
data={this.props.data}
showPagination={showPagination}
defaultPageSize={defaultPageSize}
/>
</div>
<>
<p>
The Monkey discovered <span
className="label label-danger">{howManyScannedServices}</span> open {Pluralize('services', howManyScannedServices)} on <span
className="label label-warning">{howManyScannedMachines}</span> {Pluralize('machines', howManyScannedMachines)}:
</p>
<div className="data-table-container">
<ReactTable
columns={columns}
data={this.props.data}
showPagination={showPagination}
defaultPageSize={defaultPageSize}
/>
</div>
</>
);
}
}