minor UI improvements

more verbose run summary, changed "enable monkey" to toggle button

monkey_island/cc/admin/ui/index.html

@@ -10,6 +10,7 @@
     <script type="text/javascript" src="./js/typeahead.bundle.min.js"></script>
 
     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="./js/bootstrap-switch.min.js"></script>
     <script type="text/javascript" src="./js/sb-admin-2/sb-admin-2.js"></script>
     <script type="text/javascript" src="./js/sb-admin-2/metisMenu.js"></script>
     <script type="text/javascript" src="./js/jsoneditor.js"></script>
@@ -23,6 +24,7 @@
     <link type="text/css" href="./css/typeahead.css" rel="stylesheet"/>
     <!-- <link type="text/css" href="./css/font-awesome.min.css" rel="stylesheet"/> -->
     <link type="text/css" href="./css/bootstrap.min.css" rel="stylesheet"/>
+    <link type="text/css" href="./css/bootstrap-switch.min.css" rel="stylesheet"/>
     <link type="text/css" href="./css/sb-admin-2/sb-admin-2.css" rel="stylesheet"/>
     <link type="text/css" href="./css/sb-admin-2/metisMenu.css" rel="stylesheet"/>
     <link type="text/css" href="./css/jquery.dataTables.min.css" rel="stylesheet"/>
@@ -79,7 +81,12 @@
                 </div>
                 <div id="info" class="panel-body panel-collapse collapse in">
                     <div>
-                            Num of Monkeys: <label id="infoNumOfMonkeys">0</label>
+                        Num of Monkeys: <label id="infoNumOfMonkeys">0</label> (<label id="infoNumOfParents">0</label> by exploiting)<br/>
+                        Num of Hosts Detected: <label id="infoNumOfHosts">0</label><br/>
+                        Num of Tunnels Used: <label id="infoNumOfTunnels">0</label><br/>
+                    </div>
+                    <div>
+                        Display Scanned Hosts: <input type="checkbox" data-size="mini" name="chboxShowScanned" checked>
                     </div>
                 </div>
             </div>
@@ -92,7 +99,7 @@
         <div class="col-lg-3 col-md-6 col-sm-6">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <a href="#details" data-toggle="collapse">Details</a>
+                    <a href="#details" data-toggle="collapse">Monkey Details</a>
                 </div>
                 <div id="details" class="panel-body panel-collapse collapse in">
                     <div id="search" class="input-group custom-search-form">
@@ -116,6 +123,10 @@
                             <a href="#mconfig" data-toggle="collapse">Monkey Config</a>
                         </div>
                         <div id="mconfig" style="overflow: visible" class="panel-body panel-collapse collapse in" aria-expanded="true">
+                            <div style="display: none;" id="monkey-enabled">
+                                Allow running: <input type="checkbox" data-size="mini" name="chboxMonkeyEnabled" checked>
+                            </div><br/>
+                            <div>
                                 <span class="input-group-btn">
                                     <button id="btnConfigLoad" style="display: none;" class="btn btn-default" type="button"
                                         onclick="loadMonkeyConfig()" style="margin-top:-4px">
@@ -125,15 +136,8 @@
                                         onclick="updateMonkeyConfig()" style="margin-top:-4px">
                                             Update
                                     </button>
-                                <button id="btnKillMonkey" style="display: none;" class="btn btn-default" type="button"
-                                    onclick="killMonkey()" style="margin-top:-4px">
-                                        Mark for Kill
-                                </button>
-                                <button id="btnReviveMonkey" style="display: none;" class="btn btn-default" type="button"
-                                    onclick="reviveMonkey()" style="margin-top:-4px">
-                                        Revive Monkey
-                                </button>
                                 </span>
+                            </div>
                             <div style="display: none;" id="monkey-config">
                             </div>
                         </div>

monkey_island/cc/admin/ui/js/monkeys-admin.js

@@ -21,11 +21,19 @@ $.getJSON(jsonFile, function(json) {
 var network = null;
 var nodes = [];
 var edges = [];
+var numOfParentLinks = 0;
+var numOfTunnelLinks = 0;
+var numOfScanLinks = 0;
+
+var showScannedHosts = true;
 
 // Images/icons constants
 const ICONS_DIR = "./css/img/objects/";
 const ICONS_EXT = ".png";
 
+const HOST_TYPE_MONKEY = "monkey";
+const HOST_TYPE_SCAN = "scanned";
+
 const EDGE_TYPE_PARENT = "parent";
 const EDGE_TYPE_TUNNEL = "tunnel";
 const EDGE_TYPE_SCAN = "scan";
@@ -63,7 +71,7 @@ function initAdmin() {
         edges: edges
     };
 
-    $('#infoNumOfMonkeys').html(monkeys.length)
+    updateCounters();
 
     var options = {
     };
@@ -73,6 +81,9 @@ function initAdmin() {
 
     network = new vis.Network(container, data, options);
 
+    $("[name='chboxShowScanned']").bootstrapSwitch('onSwitchChange', toggleScannedHosts);
+    $("[name='chboxMonkeyEnabled']").bootstrapSwitch('onSwitchChange', toggleMonkeyEnabled);
+
     prepareSearchEngine();
 
     monkeyCfg = new JSONEditor(document.getElementById('monkey-config'),{
@@ -121,6 +132,55 @@ function initAdmin() {
     addEventsListeners();
 }
 
+function toggleScannedHosts(event, state) {
+    if (event.type != "switchChange") {
+        return;
+    }
+    if (state) {
+        showScannedHosts = true;
+    }
+    else {
+        showScannedHosts = false;
+    }
+    refreshDrawing();
+}
+
+function refreshDrawing() {
+    // function called before first init
+    if (network == null) {
+        return;
+    }
+
+    // keep old selection
+    var selNode = network.getSelectedNodes();
+
+    if (showScannedHosts) {
+        network.setData({nodes: nodes, edges: edges});
+    }
+    else {
+        var selectiveNodes = [];
+        var selectiveEdges = [];
+        for (var i=0; i<nodes.length; i++) {
+            if (nodes[i].type != HOST_TYPE_SCAN) {
+                selectiveNodes.push(nodes[i])
+            }
+        }
+        for (var i=0; i<edges.length; i++) {
+            if (edges[i].type != EDGE_TYPE_SCAN) {
+                selectiveEdges.push(edges[i])
+            }
+        }
+        network.setData({nodes: selectiveNodes, edges: selectiveEdges});
+    }
+
+    if (selNode.length) {
+        var monkey = getMonkey(selNode[0]);
+        if (monkey) { // The selection might be no longer valid if the monkey was deleted
+            selectNode(monkey.hostname, false);
+        }
+    }
+}
+
 function updateMonkeys() {
     $.getJSON(jsonFile + '?timestamp='+ generationDate, function(json) {
         generationDate = json.timestamp;
@@ -134,7 +194,7 @@ function updateMonkeys() {
             {
                 monkeys.push(new_monkeys[i]);
                 nodes.push(createMonkeyNode(new_monkeys[i]));
-                $('#infoNumOfMonkeys').html(monkeys.length)
+                updateCounters();
             }
         }
 
@@ -142,16 +202,7 @@ function updateMonkeys() {
         {
             createEdges();
             createTunnels();
-
+            refreshDrawing();
-            // keep old selection
-            var selNode = network.getSelectedNodes();
-            network.setData({nodes: nodes, edges: edges});
-            if (selNode.length) {
-                var monkey = getMonkey(selNode[0]);
-                if (monkey) { // The selection might be no longer valid if the monkey was deleted
-                    selectNode(monkey.hostname, false);
-                }
-            }
         }
         createScanned();
         window.setTimeout(updateMonkeys, 10000);
@@ -170,7 +221,6 @@ function createNodes() {
     return nodes;
 }
 
-
 function createMonkeyNode(monkey) {
     var title = undefined;
     var img = "monkey";
@@ -194,6 +244,7 @@ function createMonkeyNode(monkey) {
             'image': img,
             'title': title,
             'value': undefined,
+            'type' : HOST_TYPE_MONKEY,
             'mass': 1,
         };
 }
@@ -220,6 +271,7 @@ function createMachineNode(machine) {
             'image': img,
             'title': undefined,
             'value': undefined,
+            'type' : HOST_TYPE_SCAN,
             'mass': 1,
         };
 }
@@ -232,6 +284,7 @@ function createEdges() {
 
             if(parent && !edgeExists([parent.id, monkey.id, EDGE_TYPE_PARENT])) {
                 edges.push({from: parent.id, to: monkey.id, arrows:'middle', type: EDGE_TYPE_PARENT, color: EDGE_COLOR_PARENT});
+                numOfParentLinks++;
             }
         }
     }
@@ -247,6 +300,7 @@ function createTunnels() {
 
             if(tunnel && !edgeExists([monkey.id, tunnel.id, EDGE_TYPE_TUNNEL])) {
                 edges.push({from: monkey.id, to: tunnel.id, arrows:'middle', type: EDGE_TYPE_TUNNEL, color: EDGE_COLOR_TUNNEL});
+                numOfTunnelLinks++;
             }
         }
     }
@@ -285,8 +339,13 @@ function createScanned() {
 
                 if(!edgeExists([monkey.id, machineNode.id, EDGE_TYPE_SCAN])) {
                     edges.push({from: monkey.id, to: machineNode.id, arrows:'middle', type: EDGE_TYPE_SCAN, color: EDGE_COLOR_SCAN});
+                    numOfScanLinks++;
                 }
             }
+            if (scans.length > 0) {
+                refreshDrawing();
+                updateCounters();
+            }
         });
     }
 }
@@ -316,6 +375,13 @@ function buildMonkeyDescription(monkey) {
     return html;
 }
 
+function updateCounters() {
+    $('#infoNumOfMonkeys').html(monkeys.length);
+    $('#infoNumOfHosts').html(scannedMachines.length);
+    $('#infoNumOfParents').html(numOfParentLinks);
+    $('#infoNumOfTunnels').html(numOfTunnelLinks);
+}
+
 
 /**
  * Preparing the autocompletion search engine for the monkeys
@@ -389,7 +455,8 @@ function onSelect(properties) {
         var content = "<b>No selection</b>"
         $("#selectionInfo").html(content);
         $('#monkey-config').hide()
-        $('#btnConfigLoad, #btnConfigUpdate, #btnKillMonkey, #btnReviveMonkey').hide();
+        $('#btnConfigLoad, #btnConfigUpdate').hide();
+        $('#monkey-enabled').hide();
         telemTable.clear();
         telemTable.draw();
     }
@@ -422,14 +489,12 @@ function onNodeSelect(nodeId) {
     loadMonkeyConfig();
 
     if (monkey.config.alive) {
-        $('#btnKillMonkey').show();
+        $("[name='chboxMonkeyEnabled']").bootstrapSwitch('state', true);
-        $('#btnReviveMonkey').hide();
     }
     else {
-        $('#btnKillMonkey').hide();
+        $("[name='chboxMonkeyEnabled']").bootstrapSwitch('state', false);
-        $('#btnReviveMonkey').show();
     }
-
+    $('#monkey-enabled').show();
 
     $.getJSON('/api/telemetry/' + monkey.guid, function(json) {
         telemTable.clear();
@@ -453,6 +518,19 @@ function onEdgeSelect(edge) {
 
 }
 
+function toggleMonkeyEnabled(event, state) {
+    if (event.type != "switchChange") {
+        return;
+    }
+    if (state) {
+        reviveMonkey();
+    }
+    else {
+        killMonkey();
+    }
+}
+
+
 function killMonkey() {
     var curr_config = monkeyCfg.getValue();
     curr_config.alive = false;