more UI adds

mark patient zero, added map legend, indicate user on the state of his
actions

monkey_island/cc/admin/ui/css/bootstrap-dialog.min.css

@@ -0,0 +1 @@
+.bootstrap-dialog .modal-header{border-top-left-radius:4px;border-top-right-radius:4px}.bootstrap-dialog .bootstrap-dialog-title{color:#fff;display:inline-block;font-size:16px}.bootstrap-dialog .bootstrap-dialog-message{font-size:14px}.bootstrap-dialog .bootstrap-dialog-button-icon{margin-right:3px}.bootstrap-dialog .bootstrap-dialog-close-button{font-size:20px;float:right;opacity:.9;filter:alpha(opacity=90)}.bootstrap-dialog .bootstrap-dialog-close-button:hover{cursor:pointer;opacity:1;filter:alpha(opacity=100)}.bootstrap-dialog.type-default .modal-header{background-color:#fff}.bootstrap-dialog.type-default .bootstrap-dialog-title{color:#333}.bootstrap-dialog.type-info .modal-header{background-color:#5bc0de}.bootstrap-dialog.type-primary .modal-header{background-color:#337ab7}.bootstrap-dialog.type-success .modal-header{background-color:#5cb85c}.bootstrap-dialog.type-warning .modal-header{background-color:#f0ad4e}.bootstrap-dialog.type-danger .modal-header{background-color:#d9534f}.bootstrap-dialog.size-large .bootstrap-dialog-title{font-size:24px}.bootstrap-dialog.size-large .bootstrap-dialog-close-button{font-size:30px}.bootstrap-dialog.size-large .bootstrap-dialog-message{font-size:18px}.bootstrap-dialog .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

monkey_island/cc/admin/ui/index.html

@@ -11,6 +11,7 @@
 
     <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/bootstrap-dialog.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>
@@ -25,6 +26,7 @@
     <!-- <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/bootstrap-dialog.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"/>
@@ -59,7 +61,7 @@
                 <div class="panel-heading">
                     <a href="#telemetries" data-toggle="collapse">Telemetries</a>
                 </div>
-                <div id="telemetries" class="panel-body panel-collapse collapse">
+                <div id="telemetries" class="panel-body panel-collapse collapse in">
                 <table class="table table-bordered table-hover" id="telemetris-table">
                   <thead>
                     <tr><th>Time</th><th>Type</th><th>Data</th></tr>
@@ -88,6 +90,21 @@
                     <div>
                         Display Scanned Hosts: <input type="checkbox" data-size="mini" name="chboxShowScanned" checked>
                     </div>
+                    <br />
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <a href="#legend" data-toggle="collapse">Map Legend</a>
+                        </div>
+                        <div id="legend" style="overflow: visible" class="panel-body panel-collapse collapse" aria-expanded="true">
+                            <ul>
+                                <li><label style="color: red">red arrow</label> - exploit</li>
+                                <li><label style="color: blue">blue arrow</label> - tunnel</li>
+                                <li><label style="color: gray">gray arrow</label> - scan</li>
+                                <li><label style="color: red">red label</label> - patient zero</li>
+                            </ul>
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>

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

@@ -74,6 +74,9 @@ function initAdmin() {
     updateCounters();
 
     var options = {
+        layout: {
+            improvedLayout: false
+        }
     };
 
     // Using jQuery to get the element does not work with vis.js library
@@ -127,7 +130,7 @@ function initAdmin() {
 
     loadNewMonkeysConfig(); 
 
-    window.setTimeout(updateMonkeys, 10000);
+    setInterval(updateMonkeys, 10000);
 
     addEventsListeners();
 }
@@ -205,7 +208,6 @@ function updateMonkeys() {
             refreshDrawing();
         }
         createScanned();
-        window.setTimeout(updateMonkeys, 10000);
     });    
 }
 
@@ -223,6 +225,7 @@ function createNodes() {
 
 function createMonkeyNode(monkey) {
     var title = undefined;
+    var font = undefined;
     var img = "monkey";
 
     if (monkey.description) {
@@ -233,12 +236,16 @@ function createMonkeyNode(monkey) {
             img = img + "-windows"
         }
     }
-
     img = ICONS_DIR + img + ICONS_EXT;
 
+    if (monkey.parent == monkey.guid) {
+        font = { color: 'red' };
+    }
+
     return {
             'id': monkey.id,
             'label': monkey.hostname + "\n" + monkey.ip_addresses[0],
+            'font': font,
             'shape': 'image',
             'color': undefined,
             'image': img,
@@ -582,10 +589,18 @@ function updateNewMonkeysConfig() {
             data : JSON.stringify(curr_config),
             success : function(response, textStatus, jqXhr) {
                 console.log("New monkeys config successfully updated!");
+                BootstrapDialog.show({
+                    title: "Update New Monkeys Config",
+                    message: "New monkeys config successfully updated!"
+                });
             },
             error : function(jqXHR, textStatus, errorThrown) {
                 // log the error to the console
                 console.log("The following error occured: " + textStatus, errorThrown);
+                BootstrapDialog.show({
+                    title: "Update New Monkeys Config",
+                    message: "The following error occured: " + textStatus
+                });
             },
             complete : function() {
                 console.log("Sending new monkeys config update...");
@@ -627,10 +642,18 @@ function updateMonkeyConfig() {
                 monkey.config = curr_config;
                 console.log("Monkey config successfully updated! (" + monkey.hostname + ")");
                 selectNode(monkey.hostname, false);
+                BootstrapDialog.show({
+                    title: "Update Monkey Config",
+                    message: "Monkey config successfully updated! (" + monkey.hostname + ")"
+                    });
             },
             error : function(jqXHR, textStatus, errorThrown) {
                 // log the error to the console
                 console.log("The following error occured: " + textStatus, errorThrown);
+                BootstrapDialog.show({
+                    title: "Update Monkey Config",
+                    message: "The following error occured: " + textStatus
+                    });
             },
             complete : function() {
                 console.log("Sending monkey config update...");
@@ -677,6 +700,10 @@ function resetDB() {
             error : function(jqXHR, textStatus, errorThrown) {
                 // log the error to the console
                 console.log("The following error occured: " + textStatus, errorThrown);
+                BootstrapDialog.show({
+                    title: "Reset DB",
+                    message: "The following error occured: " + textStatus
+                });
             },
             complete : function() {
                 console.log("Trying to reset DB...");