From 84f903cecdf86e961a609e791740203bfe19ad4a Mon Sep 17 00:00:00 2001
From: Barak Argaman <barak@guardicore.com>
Date: Mon, 18 Sep 2017 14:18:57 +0300
Subject: [PATCH] ui improvements

---
 monkey_island/cc/resources/root.py            |  6 ++-
 monkey_island/cc/ui/src/components/Main.js    | 42 +++++++++++++++----
 .../ui/src/components/pages/ConfigurePage.js  |  1 +
 .../cc/ui/src/components/pages/MapPage.js     | 36 +++++++++++++---
 .../ui/src/components/pages/RunMonkeyPage.js  |  2 +
 monkey_island/cc/ui/src/styles/App.css        |  2 +-
 6 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/monkey_island/cc/resources/root.py b/monkey_island/cc/resources/root.py
index ce3fc6116..f9d7afc2a 100644
--- a/monkey_island/cc/resources/root.py
+++ b/monkey_island/cc/resources/root.py
@@ -16,7 +16,7 @@ class Root(flask_restful.Resource):
             action = request.args.get('action')
 
         if not action:
-            return jsonify(ip_addresses=local_ip_addresses(), mongo=str(mongo.db))
+            return jsonify(ip_addresses=local_ip_addresses(), mongo=str(mongo.db), completed_steps=self.get_completed_steps())
 
         elif action == "reset":
             mongo.db.config.drop()
@@ -31,3 +31,7 @@ class Root(flask_restful.Resource):
             return 200
         else:
             return make_response(400, {'error': 'unknown action'})
+
+    def get_completed_steps(self):
+        # TODO implement
+        return dict(run_server=True, run_monkey=False, infection_done=False)
diff --git a/monkey_island/cc/ui/src/components/Main.js b/monkey_island/cc/ui/src/components/Main.js
index a8e19a51f..b25420a5f 100644
--- a/monkey_island/cc/ui/src/components/Main.js
+++ b/monkey_island/cc/ui/src/components/Main.js
@@ -19,6 +19,22 @@ let logoImage = require('../images/monkey-logo.png');
 let guardicoreLogoImage = require('../images/guardicore-logo.png');
 
 class AppComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      completedSteps: {
+        run_server: true,
+        run_monkey: false,
+        infection_done: false
+      }
+    };
+  }
+  updateStatus = () => {
+    fetch('/api')
+      .then(res => res.json())
+      .then(res => this.setState({completedSteps: res['completed_steps']}));
+  }
+
   render() {
     return (
       <Router>
@@ -34,19 +50,27 @@ class AppComponent extends React.Component {
                   <NavLink to="/" exact={true}>
                     <span className="number">1.</span>
                     Run C&C Server
-                    <Icon name="check" className="pull-right checkmark text-success"/>
+                    { this.state.completedSteps.run_server ?
+                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      : ''}
                   </NavLink>
                 </li>
                 <li>
                   <NavLink to="/run-monkey">
                     <span className="number">2.</span>
                     Run Monkey
+                    { this.state.completedSteps.run_monkey ?
+                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      : ''}
                   </NavLink>
                 </li>
                 <li>
                   <NavLink to="/infection/map">
                     <span className="number">3.</span>
                     Infection Map
+                    { this.state.completedSteps.infection_done ?
+                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      : ''}
                   </NavLink>
                 </li>
                 <li>
@@ -70,7 +94,7 @@ class AppComponent extends React.Component {
               </ul>
 
               <hr/>
-              <div className="guardicore-link">
+              <div className="guardicore-link text-center">
                 <span>Powered by</span>
                 <a href="http://www.guardicore.com" target="_blank">
                   <img src={guardicoreLogoImage} alt="GuardiCore"/>
@@ -79,13 +103,13 @@ class AppComponent extends React.Component {
 
             </Col>
             <Col sm={9} md={10} smOffset={3} mdOffset={2} className="main">
-              <Route exact path="/" component={RunServerPage}/>
-              <Route path="/configure" component={ConfigurePage}/>
-              <Route path="/run-monkey" component={RunMonkeyPage}/>
-              <Route path="/infection/map" component={MapPage}/>
-              <Route path="/infection/logs" component={FullLogsPage}/>
-              <Route path="/start-over" component={StartOverPage}/>
-              <Route path="/report" component={ReportPage}/>
+              <Route exact path="/" render={(props) => ( <RunServerPage onStatusChange={this.updateStatus} /> )} />
+              <Route path="/configure" render={(props) => ( <ConfigurePage onStatusChange={this.updateStatus} /> )} />
+              <Route path="/run-monkey" render={(props) => ( <RunMonkeyPage onStatusChange={this.updateStatus} /> )} />
+              <Route path="/infection/map" render={(props) => ( <MapPage onStatusChange={this.updateStatus} /> )} />
+              <Route path="/infection/logs" render={(props) => ( <FullLogsPage onStatusChange={this.updateStatus} /> )} />
+              <Route path="/start-over" render={(props) => ( <StartOverPage onStatusChange={this.updateStatus} /> )} />
+              <Route path="/report" render={(props) => ( <ReportPage onStatusChange={this.updateStatus} /> )} />
             </Col>
           </Row>
         </Grid>
diff --git a/monkey_island/cc/ui/src/components/pages/ConfigurePage.js b/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
index 16b5ef4a3..6b38bf4f5 100644
--- a/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
+++ b/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
@@ -44,6 +44,7 @@ class ConfigurePageComponent extends React.Component {
           schema: res.schema,
           configuration: res.configuration
         });
+        this.props.onStatusChange();
       });
   };
 
diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
index 57d88eba7..5ee140119 100644
--- a/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -55,10 +55,34 @@ class MapPageComponent extends React.Component {
     select: event => this.selectionChanged(event)
   };
 
+  edgeGroupToColor(group) {
+    switch (group) {
+      case 'exploited':
+        return '#c00';
+        break;
+      case 'tunnel':
+        return '#aaa';
+        break;
+      case 'scan':
+        return '#f90';
+        break;
+      case 'island':
+        return '#aaa';
+        break;
+    }
+    return 'black';
+  }
+
   componentDidMount() {
     fetch('/api/netmap')
       .then(res => res.json())
-      .then(res => this.setState({graph: res}));
+      .then(res => {
+        res.edges.forEach(edge => {
+          edge.color = this.edgeGroupToColor(edge.group);
+        });
+        this.setState({graph: res});
+        this.props.onStatusChange();
+      });
   }
 
   selectionChanged(event) {
@@ -93,15 +117,15 @@ class MapPageComponent extends React.Component {
                  placeholder="Find on map"
                  style={{'marginBottom': '1em'}}/>
 
-          <PreviewPane item={this.state.selected} type={this.state.selectedType} />
-
-          <div>
-            <Link to="/infection/logs" className="btn btn-default btn-block" style={{'marginBottom': '0.5em'}}>Monkey Telemetry</Link>
-            <button onClick={this.killAllMonkeys} className="btn btn-danger btn-block">
+          <div style={{'overflow': 'auto', 'marginBottom': '1em'}}>
+            <Link to="/infection/logs" className="btn btn-default pull-left" style={{'width': '48%'}}>Monkey Telemetry</Link>
+            <button onClick={this.killAllMonkeys} className="btn btn-danger pull-right" style={{'width': '48%'}}>
               <Icon name="stop-circle" style={{'marginRight': '0.5em'}}></Icon>
               Kill All Monkeys
             </button>
           </div>
+
+          <PreviewPane item={this.state.selected} type={this.state.selectedType} />
         </Col>
       </div>
     );
diff --git a/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js b/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
index cc708afeb..eae417d60 100644
--- a/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
+++ b/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
@@ -27,6 +27,7 @@ class RunMonkeyPageComponent extends React.Component {
       .then(res => this.setState({
         isRunningOnIsland: res['is_running']
       }));
+    this.props.onStatusChange();
   }
 
   generateCmd(ip) {
@@ -45,6 +46,7 @@ class RunMonkeyPageComponent extends React.Component {
         this.setState({
           isRunningOnIsland: res['is_running']
         });
+        this.props.onStatusChange();
       });
   };
 
diff --git a/monkey_island/cc/ui/src/styles/App.css b/monkey_island/cc/ui/src/styles/App.css
index 72b3dbf76..bf051bca8 100644
--- a/monkey_island/cc/ui/src/styles/App.css
+++ b/monkey_island/cc/ui/src/styles/App.css
@@ -91,7 +91,7 @@ body {
 
   li .checkmark {
     font-size: 1.3em;
-    margin-right: -15px;
+    margin-right: -10px;
   }
 
   hr {