From 417d931bd1c961a7aa8f1569e949bbc2a7abfade Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sun, 28 Jan 2018 15:43:54 +0100 Subject: Making network first class citizen Still work in progress --- web/js/nms-info-box.js | 266 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 253 insertions(+), 13 deletions(-) (limited to 'web/js/nms-info-box.js') diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js index 9a5edae..dccfd7d 100644 --- a/web/js/nms-info-box.js +++ b/web/js/nms-info-box.js @@ -56,6 +56,20 @@ var nmsInfoBox = nmsInfoBox || { } } }, + { + 'id': 'networkInfo', + 'title': 'Network info', + 'views': { + 'initial': { + 'name': 'Summary', + 'panels': ['networkSummary'] + }, + 'edit': { + 'name': 'Edit settings', + 'panels': ['networkEdit'] + } + } + }, { 'id': 'addSwitch', 'title': 'Add new switch(es)', @@ -66,6 +80,16 @@ var nmsInfoBox = nmsInfoBox || { } } }, + { + 'id': 'addNetwork', + 'title': 'Add new network(s)', + 'views': { + 'initial': { + 'name': 'Add network', + 'panels': ['networkAdd'] + } + } + }, { 'id': 'searchHelp', 'title': 'Search help', @@ -76,16 +100,16 @@ var nmsInfoBox = nmsInfoBox || { } } }, - { - 'id': 'searchResults', - 'title': 'Search Results', - 'views': { - 'initial': { - 'name': 'Search Results', - 'panels': ['searchResults'] - } - } - }, + { + 'id': 'searchResults', + 'title': 'Search Results', + 'views': { + 'initial': { + 'name': 'Search Results', + 'panels': ['searchResults'] + } + } + }, { 'id': 'inventoryListing', 'title': 'Inventory listing', @@ -103,8 +127,18 @@ var nmsInfoBox = nmsInfoBox || { 'panels': ['inventoryListing:jnxBoxSerialNo'] } } - } - ], + }, + { + 'id': 'listNetwork', + 'title': 'Networks', + 'views': { + 'initial': { + 'name': 'List all networks', + 'panels': ['listNetworks'] + } + } + }, +], _panelTypes: {} //Populate by using the nmsInfoBox.addPanelType method }; @@ -952,7 +986,7 @@ var switchEditPanel = function () { var tmpsw = '\'' + this.sw + '\''; var tmpv = '\'' + v + '\''; var tmphandler = '"nmsInfoBox._editChange(' + tmpsw + ',' + tmpv + ');"'; - var html = ''; + var html = ''; if (v == "placement") { v = "placement Reset"; } @@ -1132,6 +1166,212 @@ nmsInfoBox.setLegendPick = function(tag,id) { nms.legendPick = {handler: tag, idx: id}; } nmsInfoBox.addPanelType("switchSummary",switchSummaryPanel); + +/* +* Panel type: Add network +* +* Lets you add a new network using the network-add api +* +*/ +var networkAddPanel = function() { + nmsInfoPanel.call(this,"networkAdd"); + this.refresh = function(reason) { + var domObj = document.createElement("div"); + domObj.innerHTML = '' + this._render(domObj); + }; + this.save = function () { + var name = document.getElementById('create-network-name').value.split(" "); + var myData = []; + for (var v in name) { + myData.push({"name":name[v]}); + } + var myData = JSON.stringify(myData); + $.ajax({ + type: "POST", + url: "/api/write/network-add", + dataType: "text", + data:myData, + success: function (data, textStatus, jqXHR) { + var result = JSON.parse(data); + if(result.networks_added.length > 0) { // FIXME unresolved variable switches_addded + nmsInfoBox.hide(); + } + nmsData.invalidate("switches"); + nmsData.invalidate("smanagement"); + nmsData.invalidate("networks"); + } + }); + }; +}; +nmsInfoBox.addPanelType("networkAdd",networkAddPanel); + +/* +* List networks +* +* Shows all networks +* +*/ +var networkListPanel = function() { + nmsInfoPanel.call(this,"listNetworks"); + this.refresh = function(reason) { + var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}); + var networks = nmsData.networks.networks; + var table = document.createElement('table'); + table.className = "table table-condensed"; + table.id = "searchResults-table" + for (var net in networks) { + console.log(networks[net]); + var row = table.insertRow(net); + var cell1 = row.insertCell(0); + var cell2 = row.insertCell(1); + var cell3 = row.insertCell(2); + cell1.innerHTML = ""+net+ ''; + cell2.innerHTML = networks[net].vlan; + cell3.innerHTML = networks[net].routing_point; + } + this._render(table); + + }; +}; +nmsInfoBox.addPanelType("listNetworks",networkListPanel); + +/* +* Panel type: Network summary +* +* Display a summary +* +*/ +var networkSummaryPanel = function() { + nmsInfoPanel.call(this,"networkSummary"); + this.refresh = function(reason) { + var network = this.sw; + + }; +} +nmsInfoBox.addPanelType("networkSummary",networkSummaryPanel); + +/* +* Panel type: Edit networki +* +* Lets you edit basic networks data through the network-update api +* +*/ +var networkEditPanel = function() { + nmsInfoPanel.call(this,"networkEdit"); + this.refresh = function(reason) { + var net = []; + try { + net = nmsData.networks.networks[this.sw]; + } catch(e) {} + + + var domObj = document.createElement("div"); + var template = {}; + + nmsInfoBox._editValues = {}; + var place; + var tags; + for (var v in net) { + /* + * Placement and tags needs to be sent and edited + * as plain JSON... + */ + if (v == "placement") { + place = JSON.stringify(net[v]); + template[v] = place; + continue; + } + if (v == "tags") { + tags = JSON.stringify(net[v]); + template[v] = tags; + continue; + } + template[v] = nmsInfoBox._nullBlank(net[v]); + } + var content = []; + for (v in template) { + var tmpsw = '\'' + this.sw + '\''; + var tmpv = '\'' + v + '\''; + var tmphandler = '"nmsInfoBox._editChange(' + tmpsw + ',' + tmpv + ');"'; + var html = ''; + if (v == "placement") { + v = "placement Reset"; + } + content.push([v, html]); + } + + content.sort(); + + var table = nmsInfoBox._makeTable(content); + domObj.appendChild(table); + + var outputCont = document.createElement("div"); + outputCont.id = "edit-output-cont"; + outputCont.classList.add("collapse"); + outputCont.innerHTML = "
Request preview
"; + var output = document.createElement("output"); + output.id = "edit-output"; + outputCont.appendChild(output); + domObj.appendChild(outputCont); + + var nav = document.createElement("nav"); + nav.classList.add("nav","nav-pills"); + + var submit = document.createElement("button"); + submit.innerHTML = "Save changes"; + submit.classList.add("btn", "btn-primary"); + submit.id = "edit-submit-" + this.sw; + submit.setAttribute("onclick","nmsInfoBox._windowHandler.doInPanel('" + this.id + "','save');"); + nav.appendChild(submit); + + var toggleDetails = document.createElement("button"); + toggleDetails.innerHTML = ''; + toggleDetails.classList.add("btn", "btn-default", "pull-right"); + toggleDetails.dataset.toggle = "collapse"; + toggleDetails.dataset.target = "#edit-output-cont"; + toggleDetails.title = "Show request preview"; + toggleDetails.id = "edit-toggle-details-" + this.sw; + nav.appendChild(toggleDetails); + + domObj.appendChild(nav); + + this._render(domObj); + if (place) { + var pval = document.getElementById("edit-" + this.sw + "-placement"); + if (pval) { + pval.value = place; + } + } + if (tags) { + var ptags = document.getElementById("edit-" + this.sw + "-tags"); + if (ptags) { + ptags.value = tags; + } + } + + }; + this.save = function () { + var myData = nmsInfoBox._editStringify(this.sw); + $.ajax({ + type: "POST", + url: "/api/write/network-update", + dataType: "text", + data:myData, + success: function (data, textStatus, jqXHR) { + var result = JSON.parse(data); + if(result.switches_updated.length > 0) { // FIXME unresolved variable switches_addded + nmsInfoBox.hide(); + } + nmsData.invalidate("switches"); + nmsData.invalidate("smanagement"); + } + }); + }; +}; +nmsInfoBox.addPanelType("networkEdit",networkEditPanel); + + /* * General-purpose table-maker? * -- cgit v1.2.3