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

const jsonFile = "/api/monkey";
var monkeys = null;
var generationDate = null;

// The JSON must be fully loaded before onload() happens for calling draw() on 'monkeys'
$.ajaxSetup({
    async: false
});

// Reading the JSON file containing the monkeys' informations
$.getJSON(jsonFile, function(json) {
    monkeys = json.objects;
    generationDate = json.timestamp;
});

// The objects used by vis
var network = null;
var nodes = [];
var edges = [];

// Images/icons constants
const ICONS_DIR = "./css/img/objects/";
const ICONS_EXT = ".png";

const EDGE_TYPE_PARENT = "parent";
const EDGE_TYPE_TUNNEL = "tunnel";

// General options
// If variable from local storage != null, assign it, otherwise set it's default value.

var focusedOnNode = false; 

var monkeyCfg = undefined;
var newCfg = undefined;
var telemTable = undefined;
JSONEditor.defaults.theme = 'bootstrap3';


function initAdmin() {
    if (monkeys == null) {
        errorMessage = "<font color='red'>Could not find '" + jsonFile + "'.</font>";
        $("#networkmap").html(errorMessage);
    }

    nodes = [];
    edges = [];

    createEdges();
    createTunnels();
    var data = {
        nodes: createNodes(),
        edges: edges
    };

    var options = {
    };

    // Using jQuery to get the element does not work with vis.js library
    var container = document.getElementById("monkeysmap");

    network = new vis.Network(container, data, options);

    prepareSearchEngine();

    monkeyCfg = new JSONEditor(document.getElementById('monkey-config'),{
                            schema: {
                              type: "object",
                              title: "Monkey",
                              properties: {
                                alive: {
                                  title: "Alive",
                                  type: "boolean",
                                },                              
                              },
                              options: {
                                "collapsed": true
                              },                                           
                            },
                            disable_edit_json: false,
                            });

    newCfg = new JSONEditor(document.getElementById('new-config'),{
                            schema: {
                              type: "object",
                              title: "New Monkeys",
                              properties: {
                                alive: {
                                  title: "Alive",
                                  type: "boolean",
                                },                                                     
                              },
                              options: {
                                "collapsed": true
                              },                                  
                            },
                            disable_edit_json: false,
                            });
    newCfg.setValue({alive: true});

    telemTable = $("#telemetris-table").DataTable({
        "ordering": false,
    });

    window.setTimeout(updateMonkeys, 10000);

    addEventsListeners();
}

function updateMonkeys() {
    $.getJSON(jsonFile + '?timestamp='+ generationDate, function(json) {
        generationDate = json.timestamp;
        var new_monkeys = json.objects;
        for (var i = 0; i < new_monkeys.length; i++) {
            index = getMonkeyIndex(new_monkeys[i].guid);
            if(index != -1) {
                monkeys[index] = new_monkeys[i];
            }
            else
            {
                monkeys.push(new_monkeys[i]);
                nodes.push(createNode(new_monkeys[i]));
            }
        }

        if(new_monkeys.length > 0)
        {
            createEdges();
            createTunnels();
            network.setData({nodes: nodes, edges: edges});
        }

        window.setTimeout(updateMonkeys, 10000);
    });    
}

/**
 * Create the nodes used by vis.js
 */
function createNodes() {
    for (var i = 0; i < monkeys.length; i++) {
        var monkey = monkeys[i];

        nodes.push(createNode(monkey));
    }
    return nodes;
}


function createNode(monkey) {
    var title = undefined;
    var img = "monkey";

    if (monkey.description) {
        if(monkey.description.indexOf("Linux") != -1) {
            img = img + "-linux"
        }
        else if(monkey.description.indexOf("Windows") != -1) {
            img = img + "-windows"
        }
    }

    img = ICONS_DIR + img + ICONS_EXT;

    return {
            'id': monkey.id,
            'label': monkey.hostname + "\n" + monkey.ip_addresses[0],
            'shape': 'image',
            'color': undefined,
            'image': img,
            'title': title,
            'value': undefined,
            'mass': 0,
        };
}

function createEdges() {
    for (var i = 0; i < monkeys.length; i++) {
        var monkey = monkeys[i];
        if(monkey.parent != monkey.guid) {
            var parent = getMonkeyByGuid(monkey.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: 'red'});
            }
        }
    }

    return edges;
}

function createTunnels() {
    for (var i = 0; i < monkeys.length; i++) {
        var monkey = monkeys[i];
        if(monkey.tunnel_guid) {
            var tunnel = getMonkeyByGuid(monkey.tunnel_guid);

            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:'blue'});
            }
        }
    }

    return edges;
}

/**
 * Builds node description
 */
function buildMonkeyDescription(monkey) {
    var html =
        "<label>Name:</label> " + monkey.hostname + "</br>" +
        "<label>Description:</label> " + monkey.description + "</br>" +
        "<label>IP Address:</label></br>"

    for (var i = 0; i < monkey.ip_addresses.length; i++) {
        html += monkey.ip_addresses[i] + "</br>"
    }

    return html;
}


/**
 * Preparing the autocompletion search engine for the monkeys
 * TODO Upgrade the search with regex
 */
function prepareSearchEngine() {
    var engine = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("hostname"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: this.monkeys
    });

    engine.initialize();

    $("#monkeySearch").typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        displayKey: "hostname",
        source: engine.ttAdapter()
    });

    $("#monkeySearch").keypress(function(event) {
        const ENTER_KEY_CODE = 13;
        if (event.which == ENTER_KEY_CODE) {
            selectNode(undefined, zoom=true);
        }
    });
}


/**
 * Manage the key presses events
 */
function onKeyPress(event){
    var charCode = ("charCode" in event) ? event.charCode : event.keyCode;
    console.log("Unicode '" + charCode + "' was pressed.");
}

/**
 * Adding the events listeners
 */
function addEventsListeners() {
    network.on("doubleClick", onDoubleClick);
    network.on("select", onSelect);
}

/**
 * Manage the event when an object is double-clicked
 */
function onDoubleClick(properties) {
    for (var i = 0; i < properties.nodes.length; i++) {
        network.focus(properties.nodes[i], {scale:1});
    }
    onSelect(properties);
}


/**
 * Manage the event when an object is selected
 */
function onSelect(properties) {

    if (properties.nodes.length > 0) {
        onNodeSelect(properties.nodes);
    }
    else
    {
        var content = "<b>No selection</b>"
        $("#selectionInfo").html(content);
        $('#monkey-config').hide()
        $('#btnConfigLoad, #btnConfigUpdate').hide();
        telemTable.clear();
        telemTable.draw();
    }

    if (properties.edges.length > 0) {
        onEdgeSelect(properties.edges);
    }

}

/**
 * Manage the event when a node is selected
 */
function onNodeSelect(nodeId) {
    var monkey = getMonkey(nodeId);

    var htmlContent = "";


    if (monkey) {
        htmlContent = buildMonkeyDescription(monkey);
        $("#monkeySearch").val(monkey.hostname);
    }

    $("#selectionInfo").html(htmlContent);

    $('#monkey-config').show()
    $('#btnConfigLoad, #btnConfigUpdate').show();


    $.getJSON('/api/telemetry/' + monkey.guid, function(json) {
        telemTable.clear();
        var telemetries = json.objects;

        for (var i = 0; i < telemetries.length; i++) {
            telemTable.row.add([telemetries[i].timestamp, telemetries[i].telem_type, JSON.stringify(telemetries[i].data)]);
        } 

        telemTable.draw();
    });


    network.selectNodes([nodeId]);
}

/**
 * Manage the event when an edge is selected
 */
function onEdgeSelect(edge) {
    var edge = getEdge(edge);

}


function toggleFocusOnNode() {
    if (focusedOnNode) {
        network.zoomExtent({duration:0});
        focusedOnNode = false;
    }
    else {
        selectNode(undefined, zoom=true);
    }
}

function loadNewMonkeysConfig() {
    $.getJSON('/api/config/new', function(json) {
        if (jQuery.isEmptyObject(json))
        {
            newCfg.setValue({alive: true});
        }
        else
        {
            if(undefined == json.alive)
            {
                json.alive = true;
            }
            delete json.id;
            newCfg.setValue(json);
        }
    });
}

function updateNewMonkeysConfig() {
    var curr_config = newCfg.getValue()

    $.ajax({
            headers : {
                'Accept' : 'application/json',
                'Content-Type' : 'application/json'
            },
            url : '/api/config/new',
            type : 'POST',
            data : JSON.stringify(curr_config),
            success : function(response, textStatus, jqXhr) {
                console.log("New monkeys config successfully updated!");
            },
            error : function(jqXHR, textStatus, errorThrown) {
                // log the error to the console
                console.log("The following error occured: " + textStatus, errorThrown);
            },
            complete : function() {
                console.log("Sending new monkeys config update...");
            }
        });
}

function loadMonkeyConfig() {
    nodes = network.getSelectedNodes();

    if(nodes.length != 1) {
        return;
    }

    var monkey = getMonkey(nodes[0]);

    monkeyCfg.setValue(monkey.config);
}

function updateMonkeyConfig() {
    nodes = network.getSelectedNodes();
    if(nodes.length != 1) {
        return;
    }

    var monkey = getMonkey(nodes[0]);

    var curr_config = monkeyCfg.getValue()

    $.ajax({
            headers : {
                'Accept' : 'application/json',
                'Content-Type' : 'application/json'
            },
            url : '/api/monkey/' + monkey.guid,
            type : 'PATCH',
            data : JSON.stringify({config: curr_config}),
            success : function(response, textStatus, jqXhr) {
                monkey.config = curr_config;
                console.log("Monkey config successfully updated!");
            },
            error : function(jqXHR, textStatus, errorThrown) {
                // log the error to the console
                console.log("The following error occured: " + textStatus, errorThrown);
            },
            complete : function() {
                console.log("Sending monkey config update...");
            }
        });
}


function selectNode(hostname, zoom) {
    if (hostname == undefined) {
        hostname = $("#monkeySearch").val();
    }

    if (hostname == "") {
        return;
    }

    for (var i = 0; i < monkeys.length; i++) {
        var monkey = monkeys[i];
        if (monkey.hostname == hostname) {
            onNodeSelect([monkey.id]);
            if (zoom) {
                network.focus(monkey.id, {scale:1});
                focusedOnNode = true;
            }
            break;
        }
    }
}


/**
 * Get a monkey from its id
 */
function getMonkey(id) {
    for (var i = 0; i < monkeys.length; i++) {
        if (monkeys[i].id == id) {
            return monkeys[i];
        }
    }
}

function getMonkeyByGuid(guid) {
    for (var i = 0; i < monkeys.length; i++) {
        if (monkeys[i].guid == guid) {
            return monkeys[i];
        }
    }    
}

function getMonkeyIndex(guid) {
    for (var i = 0; i < monkeys.length; i++) {
        if (monkeys[i].guid == guid) {
            return i;
        }
    }
    return -1;
}

/**
 * Get a node from its id
 */
function getNode(id) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].id == id) {
            return nodes[i];
        }
    }
}

/**
 * Get an edge from its id
 */
function getEdge(id) {
    for (var i = 0; i < edges.length; i++) {
        if (edges[i].id == id) {
            return edges[i];
        }
    }
}

/**
 * Verifies whether a node already exist or not
 */
function nodeExists(id) {
    return getNode(id) != null;
}

/**
 * Verifies whether a link already exist or not
 */
function edgeExists(link) {
    for (var i = 0; i < edges.length; i++) {
        var from = edges[i].from;
        var to = edges[i].to;
        var type = edges[i].type;
        if (from == link[0] && to == link[1] && type == link[2]) {
            return true;
        }
    }
}




/**
 * Clears the value in the local storage
 */
function clear(key) {
    if (localStorage[key]) {
        delete localStorage[key];
    }
};
/** /.localStorage Section **/
/** **/

/** ----- **/

/** **/
/** Utilities Section **/

/**
 * Returns the differences between two arrays
 */
Array.prototype.diff = function(other) {
    var diff = [];
    for (var i = 0; i < this.length; i++) {
        var obj = this[i];
        if (other.indexOf(obj) == -1) {
            diff.push(obj);
        }
    }
    for (var i = 0; i < other.length; i++) {
        var obj = other[i];
        if (this.indexOf(obj) == -1 && diff.indexOf(obj) == -1) {
            diff.push(obj);
        }
    }
    return diff;
};


/** /.Utilities Section **/
/** **/