add telemetry console and map legend

This commit is contained in:
Barak Argaman 2017-10-16 15:46:04 +03:00
parent 5316d749bf
commit 8b239c66c6
3 changed files with 42 additions and 4 deletions

View File

@ -106,7 +106,7 @@ class AppComponent extends React.Component {
</li> </li>
<li> <li>
<NavLink to="/start-over"> <NavLink to="/start-over">
<span className="number">5.</span> <span className="number"><i className="fa fa-undo" style={{'marginLeft': '-1px'}}/></span>
Start Over Start Over
</NavLink> </NavLink>
</li> </li>

View File

@ -165,10 +165,21 @@ class MapPageComponent extends React.Component {
<Col xs={12}> <Col xs={12}>
<h1 className="page-title">Infection Map</h1> <h1 className="page-title">Infection Map</h1>
</Col> </Col>
<Col xs={12}>
<img src={legend}/>
</Col>
<Col xs={8}> <Col xs={8}>
<div className="map-legend">
<b>Legend:</b>
<span><i className="fa fa-lg fa-minus" style={{color: '#cc0200'}}></i> Exploit</span>
<span><i className="fa fa-lg fa-minus" style={{color: '#ff9900'}}></i> Scan</span>
<span><i className="fa fa-lg fa-minus" style={{color: '#0158aa'}}></i> Tunnel</span>
<span><i className="fa fa-lg fa-minus" style={{color: '#a9aaa9'}}></i> Island Communication</span>
</div>
<div className="telemetry-console">
<div>
<span className="date">2017-10-16 16:00:05</span>
<span className="source">monkey-elastic</span>
<span className="event">bla bla</span>
</div>
</div>
<div style={{height: '80vh'}}> <div style={{height: '80vh'}}>
<ReactiveGraph graph={this.state.graph} options={options} events={this.events}/> <ReactiveGraph graph={this.state.graph} options={options} events={this.events}/>
</div> </div>

View File

@ -270,6 +270,33 @@ body {
background: #d30d09; background: #d30d09;
} }
.telemetry-console {
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: rgba(0,0,0,0.7);
border-radius: 5px;
border: 3px solid #aaa;
padding: 0.5em;
color: white;
font-family: Consolas, "Courier New", monospace;
}
.telemetry-console .date {
color: #ccc;
}
.telemetry-console .source {
font-weight: bold;
}
.map-legend {
}
/* /*
* Full Logs Page * Full Logs Page
*/ */