Fixed UI bug where security report map didn't show propper images

This commit is contained in:
VakarisZ 2020-03-13 12:44:19 +02:00
parent 2fff8d3a69
commit f07d058d8b
3 changed files with 24 additions and 8 deletions

View File

@ -3,8 +3,6 @@ import '../../styles/report/ReportPage.scss';
import React from 'react'; import React from 'react';
import {Route} from 'react-router-dom'; import {Route} from 'react-router-dom';
import {Col, Nav, NavItem} from 'react-bootstrap'; import {Col, Nav, NavItem} from 'react-bootstrap';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {edgeGroupToColor, options} from 'components/map/MapOptions';
import AuthComponent from '../AuthComponent'; import AuthComponent from '../AuthComponent';
import MustRunMonkeyWarning from '../report-components/common/MustRunMonkeyWarning'; import MustRunMonkeyWarning from '../report-components/common/MustRunMonkeyWarning';
import AttackReport from '../report-components/AttackReport' import AttackReport from '../report-components/AttackReport'

View File

@ -3,10 +3,18 @@ import Graph from 'react-graph-vis';
import Dimensions from 'react-dimensions' import Dimensions from 'react-dimensions'
class GraphWrapper extends React.Component { class GraphWrapper extends React.Component {
constructor(props) {
super(props);
}
render() { render() {
let newOptions = this.props.options; let newOptions = null;
newOptions.height = this.props.containerHeight.toString() + 'px'; if(this.props.options !== undefined){
newOptions.width = this.props.containerWidth.toString() + 'px'; newOptions = this.props.options;
newOptions.height = this.props.containerHeight.toString() + 'px';
newOptions.width = this.props.containerWidth.toString() + 'px';
}
return (<Graph graph={this.props.graph} options={newOptions} events={this.props.events}/>) return (<Graph graph={this.props.graph} options={newOptions} events={this.props.events}/>)
} }
} }

View File

@ -3,7 +3,7 @@ import BreachedServers from 'components/report-components/security/BreachedServe
import ScannedServers from 'components/report-components/security/ScannedServers'; import ScannedServers from 'components/report-components/security/ScannedServers';
import PostBreach from 'components/report-components/security/PostBreach'; import PostBreach from 'components/report-components/security/PostBreach';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {edgeGroupToColor, options} from 'components/map/MapOptions'; import {edgeGroupToColor, getOptions} from 'components/map/MapOptions';
import StolenPasswords from 'components/report-components/security/StolenPasswords'; import StolenPasswords from 'components/report-components/security/StolenPasswords';
import CollapsibleWellComponent from 'components/report-components/security/CollapsibleWell'; import CollapsibleWellComponent from 'components/report-components/security/CollapsibleWell';
import {Line} from 'rc-progress'; import {Line} from 'rc-progress';
@ -54,14 +54,24 @@ class ReportPageComponent extends AuthComponent {
super(props); super(props);
this.state = { this.state = {
report: props.report, report: props.report,
graph: {nodes: [], edges: []} graph: {nodes: [], edges: []},
nodeStateList: []
}; };
} }
componentDidMount() { componentDidMount() {
this.getNodeStateListFromServer();
this.updateMapFromServer(); this.updateMapFromServer();
} }
getNodeStateListFromServer = () => {
this.authFetch('/api/netmap/nodeStates')
.then(res => res.json())
.then(res => {
this.setState({nodeStateList: res.node_states});
});
};
componentWillUnmount() { componentWillUnmount() {
clearInterval(this.interval); clearInterval(this.interval);
} }
@ -396,7 +406,7 @@ class ReportPageComponent extends AuthComponent {
<span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span> <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
</div> </div>
<div style={{position: 'relative', height: '80vh'}}> <div style={{position: 'relative', height: '80vh'}}>
<ReactiveGraph graph={this.state.graph} options={options}/> <ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)}/>
</div> </div>
<div style={{marginBottom: '20px'}}> <div style={{marginBottom: '20px'}}>
<BreachedServers data={this.state.report.glance.exploited}/> <BreachedServers data={this.state.report.glance.exploited}/>