minor UI improvements

more verbose run summary, changed "enable monkey" to toggle button
This commit is contained in:
itsikkes 2016-07-18 17:09:48 +03:00
parent ef325928a9
commit e9e21b77da
4 changed files with 165 additions and 39 deletions

File diff suppressed because one or more lines are too long

View File

@ -10,6 +10,7 @@
<script type="text/javascript" src="./js/typeahead.bundle.min.js"></script> <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.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/sb-admin-2.js"></script>
<script type="text/javascript" src="./js/sb-admin-2/metisMenu.js"></script> <script type="text/javascript" src="./js/sb-admin-2/metisMenu.js"></script>
<script type="text/javascript" src="./js/jsoneditor.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/typeahead.css" rel="stylesheet"/>
<!-- <link type="text/css" href="./css/font-awesome.min.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.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/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/sb-admin-2/metisMenu.css" rel="stylesheet"/>
<link type="text/css" href="./css/jquery.dataTables.min.css" rel="stylesheet"/> <link type="text/css" href="./css/jquery.dataTables.min.css" rel="stylesheet"/>
@ -79,7 +81,12 @@
</div> </div>
<div id="info" class="panel-body panel-collapse collapse in"> <div id="info" class="panel-body panel-collapse collapse in">
<div> <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> </div>
</div> </div>
@ -92,7 +99,7 @@
<div class="col-lg-3 col-md-6 col-sm-6"> <div class="col-lg-3 col-md-6 col-sm-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<a href="#details" data-toggle="collapse">Details</a> <a href="#details" data-toggle="collapse">Monkey Details</a>
</div> </div>
<div id="details" class="panel-body panel-collapse collapse in"> <div id="details" class="panel-body panel-collapse collapse in">
<div id="search" class="input-group custom-search-form"> <div id="search" class="input-group custom-search-form">
@ -116,6 +123,10 @@
<a href="#mconfig" data-toggle="collapse">Monkey Config</a> <a href="#mconfig" data-toggle="collapse">Monkey Config</a>
</div> </div>
<div id="mconfig" style="overflow: visible" class="panel-body panel-collapse collapse in" aria-expanded="true"> <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"> <span class="input-group-btn">
<button id="btnConfigLoad" style="display: none;" class="btn btn-default" type="button" <button id="btnConfigLoad" style="display: none;" class="btn btn-default" type="button"
onclick="loadMonkeyConfig()" style="margin-top:-4px"> onclick="loadMonkeyConfig()" style="margin-top:-4px">
@ -125,15 +136,8 @@
onclick="updateMonkeyConfig()" style="margin-top:-4px"> onclick="updateMonkeyConfig()" style="margin-top:-4px">
Update Update
</button> </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> </span>
</div>
<div style="display: none;" id="monkey-config"> <div style="display: none;" id="monkey-config">
</div> </div>
</div> </div>

File diff suppressed because one or more lines are too long

View File

@ -21,11 +21,19 @@ $.getJSON(jsonFile, function(json) {
var network = null; var network = null;
var nodes = []; var nodes = [];
var edges = []; var edges = [];
var numOfParentLinks = 0;
var numOfTunnelLinks = 0;
var numOfScanLinks = 0;
var showScannedHosts = true;
// Images/icons constants // Images/icons constants
const ICONS_DIR = "./css/img/objects/"; const ICONS_DIR = "./css/img/objects/";
const ICONS_EXT = ".png"; const ICONS_EXT = ".png";
const HOST_TYPE_MONKEY = "monkey";
const HOST_TYPE_SCAN = "scanned";
const EDGE_TYPE_PARENT = "parent"; const EDGE_TYPE_PARENT = "parent";
const EDGE_TYPE_TUNNEL = "tunnel"; const EDGE_TYPE_TUNNEL = "tunnel";
const EDGE_TYPE_SCAN = "scan"; const EDGE_TYPE_SCAN = "scan";
@ -63,7 +71,7 @@ function initAdmin() {
edges: edges edges: edges
}; };
$('#infoNumOfMonkeys').html(monkeys.length) updateCounters();
var options = { var options = {
}; };
@ -73,6 +81,9 @@ function initAdmin() {
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
$("[name='chboxShowScanned']").bootstrapSwitch('onSwitchChange', toggleScannedHosts);
$("[name='chboxMonkeyEnabled']").bootstrapSwitch('onSwitchChange', toggleMonkeyEnabled);
prepareSearchEngine(); prepareSearchEngine();
monkeyCfg = new JSONEditor(document.getElementById('monkey-config'),{ monkeyCfg = new JSONEditor(document.getElementById('monkey-config'),{
@ -121,6 +132,55 @@ function initAdmin() {
addEventsListeners(); 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() { function updateMonkeys() {
$.getJSON(jsonFile + '?timestamp='+ generationDate, function(json) { $.getJSON(jsonFile + '?timestamp='+ generationDate, function(json) {
generationDate = json.timestamp; generationDate = json.timestamp;
@ -134,7 +194,7 @@ function updateMonkeys() {
{ {
monkeys.push(new_monkeys[i]); monkeys.push(new_monkeys[i]);
nodes.push(createMonkeyNode(new_monkeys[i])); nodes.push(createMonkeyNode(new_monkeys[i]));
$('#infoNumOfMonkeys').html(monkeys.length) updateCounters();
} }
} }
@ -142,16 +202,7 @@ function updateMonkeys() {
{ {
createEdges(); createEdges();
createTunnels(); 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(); createScanned();
window.setTimeout(updateMonkeys, 10000); window.setTimeout(updateMonkeys, 10000);
@ -170,7 +221,6 @@ function createNodes() {
return nodes; return nodes;
} }
function createMonkeyNode(monkey) { function createMonkeyNode(monkey) {
var title = undefined; var title = undefined;
var img = "monkey"; var img = "monkey";
@ -194,6 +244,7 @@ function createMonkeyNode(monkey) {
'image': img, 'image': img,
'title': title, 'title': title,
'value': undefined, 'value': undefined,
'type' : HOST_TYPE_MONKEY,
'mass': 1, 'mass': 1,
}; };
} }
@ -220,6 +271,7 @@ function createMachineNode(machine) {
'image': img, 'image': img,
'title': undefined, 'title': undefined,
'value': undefined, 'value': undefined,
'type' : HOST_TYPE_SCAN,
'mass': 1, 'mass': 1,
}; };
} }
@ -232,6 +284,7 @@ function createEdges() {
if(parent && !edgeExists([parent.id, monkey.id, EDGE_TYPE_PARENT])) { 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}); 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])) { 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}); 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])) { 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}); 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; 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 * Preparing the autocompletion search engine for the monkeys
@ -389,7 +455,8 @@ function onSelect(properties) {
var content = "<b>No selection</b>" var content = "<b>No selection</b>"
$("#selectionInfo").html(content); $("#selectionInfo").html(content);
$('#monkey-config').hide() $('#monkey-config').hide()
$('#btnConfigLoad, #btnConfigUpdate, #btnKillMonkey, #btnReviveMonkey').hide(); $('#btnConfigLoad, #btnConfigUpdate').hide();
$('#monkey-enabled').hide();
telemTable.clear(); telemTable.clear();
telemTable.draw(); telemTable.draw();
} }
@ -422,14 +489,12 @@ function onNodeSelect(nodeId) {
loadMonkeyConfig(); loadMonkeyConfig();
if (monkey.config.alive) { if (monkey.config.alive) {
$('#btnKillMonkey').show(); $("[name='chboxMonkeyEnabled']").bootstrapSwitch('state', true);
$('#btnReviveMonkey').hide();
} }
else { else {
$('#btnKillMonkey').hide(); $("[name='chboxMonkeyEnabled']").bootstrapSwitch('state', false);
$('#btnReviveMonkey').show();
} }
$('#monkey-enabled').show();
$.getJSON('/api/telemetry/' + monkey.guid, function(json) { $.getJSON('/api/telemetry/' + monkey.guid, function(json) {
telemTable.clear(); 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() { function killMonkey() {
var curr_config = monkeyCfg.getValue(); var curr_config = monkeyCfg.getValue();
curr_config.alive = false; curr_config.alive = false;