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>
<NavLink to="/start-over">
<span className="number">5.</span>
<span className="number"><i className="fa fa-undo" style={{'marginLeft': '-1px'}}/></span>
Start Over
</NavLink>
</li>

View File

@ -165,10 +165,21 @@ class MapPageComponent extends React.Component {
<Col xs={12}>
<h1 className="page-title">Infection Map</h1>
</Col>
<Col xs={12}>
<img src={legend}/>
</Col>
<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'}}>
<ReactiveGraph graph={this.state.graph} options={options} events={this.events}/>
</div>

View File

@ -270,6 +270,33 @@ body {
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
*/