From 865dd759a0f14fea418124c2f90a1f7f928938af Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Thu, 10 Mar 2016 20:54:25 +0000 Subject: NMS: Prep for frontend poller-rewrite The biggest thing here is the addition of a generic poller and a generic "hash" from the backend so equality can easily be checked. --- web/nms.gathering.org/js/nms.js | 68 ++++++++++++++++++++++++++++++++++------- 1 file changed, 57 insertions(+), 11 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index 87f0788..6061a0f 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -1,9 +1,12 @@ var nms = { + stats:{}, // Various internal stats updater:undefined, // Active updater update_time:0, // Client side timestamp for last update switches_management:{switches:{}}, switches_now:{switches:{}}, // Most recent data switches_then:{switches:{}}, // 2 minutes old + comments:{}, // Switch comments + poller:{hashes:{},time:{}}, // Tracks generic poller hashes/timestamps speed:0, // Current aggregated speed ping_data:undefined, // JSON data for ping history. drawn:false, // Set to 'true' when switches are drawn @@ -448,7 +451,7 @@ function hideSwitch() function showSwitch(x) { var sw = nms.switches_now["switches"][x]; - var swm = nms.switches_management["switches"][x]; + var swm = nms.switches_management[x]; var swtop = document.getElementById("info-switch-parent"); var swpanel = document.getElementById("info-switch-panel-body"); var swtitle = document.getElementById("info-switch-title"); @@ -555,8 +558,12 @@ function showSwitch(x) comments.appendChild(cap); var has_comment = false; - for (var c in sw["comments"]) { - var comment = sw["comments"][c]; + if (nms.comments[x] == undefined) { + nms.comments[x] = {}; + nms.comments[x]["comments"] = []; + } + for (var c in nms.comments[x]["comments"]) { + var comment = nms.comments[x]["comments"][c]; has_comment = true; if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { tr = comments.insertRow(-1); @@ -837,6 +844,7 @@ function addComment(sw,comment) switch:sw, comment:comment }; + myData = JSON.stringify(myData); $.ajax({ type: "POST", url: "/api/private/comment-add", @@ -849,26 +857,64 @@ function addComment(sw,comment) } /* - * Update nms.switches_management + * FIXME: Not at all done. + * + * genericUpdater() should be something one registers for, then it + * automatically picks up intervals based on max-age from the backend, and + * allows forced updates (E.g.: force polling comments after a comment is + * added, force polling switches after switches has been changed). * - * FIXME: This isn't actually called from anywhere, only console at the - * moment. */ -function updateSwitchManagement() -{ +function doMiscUpdates() { + genericUpdater("comments","comments", "/api/private/comments"); + genericUpdater("switches_management", "switches", "/api/private/switches-management"); +} + +function nmsStatsInc(stat) { + if (nms.stats[stat] == undefined) + nms.stats[stat] = 0; + nms.stats[stat]++; +} +/* + * Updates nms[name] with data fetched from remote target in variable + * "remotename". If a callback is provided, it is called with argument meh. + * + * This also populates nms.pollers[name] with the server-provided hash. + * Only if a change is detected is the callback issued. + */ +function genericUpdater(name, remotename, target, cb, meh) { if (nms.outstandingAjaxRequests > 5) { nms.ajaxOverflow++; updateAjaxInfo(); return; } nms.outstandingAjaxRequests++; + var now = ""; + if (nms.now != false) + now = "now=" + nms.now; + if (now != "") { + if (target.match("\\?")) + now = "&" + now; + else + now = "?" + now; + } + $.ajax({ type: "GET", - url: "/api/private/switches-management" , + url: target + now, dataType: "text", success: function (data, textStatus, jqXHR) { - var switchdata = JSON.parse(data); - nms.switches_management = switchdata; + var indata = JSON.parse(data); + if (nms.poller.hashes[name] != indata['hash']) { + nms[name] = indata[remotename]; + nms.poller.hashes[name] = indata['hash']; + nms.poller.time[name] = indata['time']; + if (cb != undefined) { + cb(meh); + } + } else { + nmsStatsInc("identicalFetches"); + } }, complete: function(jqXHR, textStatus) { nms.outstandingAjaxRequests--; -- cgit v1.2.3 From d38e6ba26931cffd6c09128dfeb7321bc224ede3 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sat, 12 Mar 2016 18:14:43 +0000 Subject: NMSjs: Start applying the nmsData logic aka: break * Things are currently somewhat broken, as expected. No handlers are updated. All in all, this isn't a disaster because it reveals a lot of crud that should never have been tied in with this logic to begin with. Will continue working on it after dinner. --- web/nms.gathering.org/js/nms.js | 455 ++++++++-------------------------------- 1 file changed, 91 insertions(+), 364 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index 6061a0f..b47b131 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -1,14 +1,8 @@ +"use strict"; var nms = { stats:{}, // Various internal stats updater:undefined, // Active updater - update_time:0, // Client side timestamp for last update - switches_management:{switches:{}}, - switches_now:{switches:{}}, // Most recent data - switches_then:{switches:{}}, // 2 minutes old - comments:{}, // Switch comments - poller:{hashes:{},time:{}}, // Tracks generic poller hashes/timestamps speed:0, // Current aggregated speed - ping_data:undefined, // JSON data for ping history. drawn:false, // Set to 'true' when switches are drawn switch_showing:"", // Which switch we are displaying (if any). switchInfo:{}, @@ -27,25 +21,12 @@ var nms = { switch_color:{}, // Color for switch linknet_color:{}, // color for linknet textDrawn:{}, // Have we drawn text for this switch? - now:false, // Date we are looking at (false for current date). + _now: false, + get now() { return this._now }, + set now(v) { this._now = n; nmsData.now = n; }, fontSize:16, // This is scaled too, but 16 seems to make sense. fontFace:"Verdana", fontLineFactor:3, - /* - * This is used to track outbound AJAX requests and skip updates if - * we have too many outstanding requests. The ajaxOverflow is a - * counter that tracks how many times this has happened. - * - * It's a cheap way to be nice to the server. - */ - outstandingAjaxRequests:0, - ajaxOverflow:0, - /* - * Set to 'true' after we've done some basic updating. Used to - * bootstrap the map quickly as soon as we have enough data, then - * ignored. - */ - did_update:false, /* * Various setInterval() handlers. See nmsTimer() for how they are * used. @@ -225,7 +206,7 @@ function initDrawing() { */ function byteCount(bytes) { var units = ['', 'K', 'M', 'G', 'T', 'P']; - i = 0; + var i = 0; while (bytes > 1024) { bytes = bytes / 1024; i++; @@ -410,8 +391,7 @@ nms.playback.tick = function() } // Update data and force redraw - updatePorts(); - updatePing(); + // FIXME: nmsData merge nms.updater.updater(); } /* @@ -433,6 +413,7 @@ function hideSwitch() var swtop = document.getElementById("info-switch-parent"); var switchele = document.getElementById("info-switch-table"); var comments = document.getElementById("info-switch-comments-table"); + var commentbox; if (switchele != undefined) switchele.parentNode.removeChild(switchele); if (comments != undefined) @@ -443,6 +424,7 @@ function hideSwitch() swtop.style.display = 'none'; nms.switch_showing = ""; } + /* * Display info on switch "x" in the info-box * @@ -450,8 +432,8 @@ function hideSwitch() */ function showSwitch(x) { - var sw = nms.switches_now["switches"][x]; - var swm = nms.switches_management[x]; + var sw = nmsData.switches["switches"][x]; + var swm = nmsData.smanagement.switches[x]; var swtop = document.getElementById("info-switch-parent"); var swpanel = document.getElementById("info-switch-panel-body"); var swtitle = document.getElementById("info-switch-title"); @@ -471,8 +453,8 @@ function showSwitch(x) swtitle.innerHTML = x + ''; var speed = 0; var speed2 = 0; - for (port in nms.switches_now["switches"][x]["ports"]) { - if (nms.switches_now["switches"][x]["ports"] == undefined || + for (port in nmsData.switches["switches"][x]["ports"]) { + if (nmsData.switches["switches"][x]["ports"] == undefined || nms.switches_then["switches"][x]["ports"] == undefined) { continue; } @@ -482,7 +464,7 @@ function showSwitch(x) /ge-0\/0\/47$/.exec(port)) { var t = nms.switches_then["switches"][x]["ports"][port]; - var n = nms.switches_now["switches"][x]["ports"][port]; + var n = nmsData.switches["switches"][x]["ports"][port]; speed += (parseInt(t["ifhcoutoctets"]) - parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"])); speed2 += (parseInt(t["ifhcinoctets"]) - parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"])); } @@ -502,13 +484,13 @@ function showSwitch(x) td2.innerHTML = byteCount(8 * speed2) + "b/s"; speed = 0; - for (port in nms.switches_now["switches"][x]["ports"]) { - if (nms.switches_now["switches"][x]["ports"] == undefined || + for (port in nmsData.switches["switches"][x]["ports"]) { + if (nmsData.switches["switches"][x]["ports"] == undefined || nms.switches_then["switches"][x]["ports"] == undefined) { continue; } var t = nms.switches_then["switches"][x]["ports"][port]; - var n = nms.switches_now["switches"][x]["ports"][port]; + var n = nmsData.switches["switches"][x]["ports"][port]; speed += (parseInt(t["ifhcinoctets"]) -parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"])); } @@ -519,13 +501,13 @@ function showSwitch(x) td2.innerHTML = byteCount(8 * speed) + "b/s"; speed = 0; - for (port in nms.switches_now["switches"][x]["ports"]) { - if (nms.switches_now["switches"][x]["ports"] == undefined || + for (port in nmsData.switches["switches"][x]["ports"]) { + if (nmsData.switches["switches"][x]["ports"] == undefined || nms.switches_then["switches"][x]["ports"] == undefined) { continue; } var t = nms.switches_then["switches"][x]["ports"][port]; - var n = nms.switches_now["switches"][x]["ports"][port]; + var n = nmsData.switches["switches"][x]["ports"][port]; speed += (parseInt(t["ifhcoutoctets"]) -parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"])); } @@ -535,14 +517,14 @@ function showSwitch(x) td1.innerHTML = "Total speed (out)"; td2.innerHTML = byteCount(8 * speed) + "b/s"; - for (v in sw) { + for (var v in sw) { tr = switchele.insertRow(-1); td1 = tr.insertCell(0); td2 = tr.insertCell(1); td1.innerHTML = v; td2.innerHTML = sw[v]; } - for (v in swm) { + for (var v in swm) { tr = switchele.insertRow(-1); td1 = tr.insertCell(0); td2 = tr.insertCell(1); @@ -550,7 +532,7 @@ function showSwitch(x) td2.innerHTML = swm[v]; } - comments = document.createElement("table"); + var comments = document.createElement("table"); comments.id = "info-switch-comments-table"; comments.className = "table table-condensed"; var cap = document.createElement("caption"); @@ -558,34 +540,34 @@ function showSwitch(x) comments.appendChild(cap); var has_comment = false; - if (nms.comments[x] == undefined) { - nms.comments[x] = {}; - nms.comments[x]["comments"] = []; - } - for (var c in nms.comments[x]["comments"]) { - var comment = nms.comments[x]["comments"][c]; - has_comment = true; - if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { - tr = comments.insertRow(-1); - var col; - if (comment["state"] == "active") - col = "danger"; - else if (comment["state"] == "inactive") - col = false; - else - col = "info"; - tr.className = col; - tr.id = "commentRow" + comment["id"]; - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.style.whiteSpace = "nowrap"; - td1.style.width = "8em"; - var txt = '
'; - txt += ''; - txt += ''; - txt += '
'; - td1.innerHTML = txt; - td2.textContent = comment['comment']; + if (nmsData.comments.comments == undefined || nmsData.comments.comments[x] == undefined) { + console.log("blank"); + } else { + for (var c in nmsData.comments.comments[x]["comments"]) { + var comment = nmsData.comments.comments[x]["comments"][c]; + has_comment = true; + if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { + tr = comments.insertRow(-1); + var col; + if (comment["state"] == "active") + col = "danger"; + else if (comment["state"] == "inactive") + col = false; + else + col = "info"; + tr.className = col; + tr.id = "commentRow" + comment["id"]; + td1 = tr.insertCell(0); + td2 = tr.insertCell(1); + td1.style.whiteSpace = "nowrap"; + td1.style.width = "8em"; + var txt = '
'; + txt += ''; + txt += ''; + txt += '
'; + td1.innerHTML = txt; + td2.textContent = comment['comment']; + } } } @@ -618,13 +600,6 @@ function setLegend(x,color,name) el.textContent = name; } -function updateAjaxInfo() -{ - var out = document.getElementById('outstandingAJAX'); - var of = document.getElementById('overflowAJAX'); - out.textContent = nms.outstandingAjaxRequests; - of.textContent = nms.ajaxOverflow; -} /* * Run periodically to trigger map updates when a handler is active */ @@ -650,9 +625,8 @@ function updateMap() return; if (!nms.ping_data) return; - nms.update_time = Date.now(); - if (nms.updater != undefined && nms.switches_now && nms.switches_then) { + if (nms.updater != undefined && nmsData.switches && nms.switches_then) { nms.updater.updater(); } drawNow(); @@ -672,7 +646,7 @@ function setUpdater(fo) foo.innerHTML = fo.name + " "; document.location.hash = fo.tag; initialUpdate(); - if (nms.ping_data && nms.switches_then && nms.switches_now) { + if (nms.ping_data && nms.switches_then && nmsData.switches) { nms.updater.updater(); } } @@ -714,10 +688,10 @@ function updateSwitchProperty(sw,property,data,target) { * Helper function for reseting switch state data (and keeping more permanent data) */ function resetSwitchStates() { - for (var sw in nms.switches_now.switches) { - for (var property in nms.switches_now.switches[sw]) { + for (var sw in nmsData.switches.switches) { + for (var property in nmsData.switches.switches[sw]) { if (['ports','temp','temp_time'].indexOf(property) > -1) { - nms.switches_now.switches[sw][property] = undefined; + nmsData.switches.switches[sw][property] = undefined; } } } @@ -730,7 +704,7 @@ function resetSwitchStates() { function initialUpdate() { return; - if (nms.ping_data && nms.switches_then && nms.switches_now && nms.updater != undefined && nms.did_update == false ) { + if (nms.ping_data && nms.switches_then && nmsData.switches && nms.updater != undefined && nms.did_update == false ) { resizeEvent(); if (!nms.drawn) { drawSwitches(); @@ -766,33 +740,7 @@ function showBlurBox() col.value = nms.shadowColor; document.getElementById("blurManic").style.display = ''; } -/* - * Update nms.ping_data - */ -function updatePing() -{ - var now = nms.now ? ("?now=" + nms.now) : ""; - if (nms.outstandingAjaxRequests > 5) { - nms.ajaxOverflow++; - updateAjaxInfo(); - return; - } - nms.outstandingAjaxRequests++; - $.ajax({ - type: "GET", - url: "/api/public/ping" + now, - dataType: "text", - success: function (data, textStatus, jqXHR) { - nms.ping_data = JSON.parse(data); - initialUpdate(); - updateMap(); - }, - complete: function(jqXHR, textStatus) { - nms.outstandingAjaxRequests--; - updateAjaxInfo(); - } - }); -} + function commentInactive(id) { @@ -856,148 +804,6 @@ function addComment(sw,comment) }); } -/* - * FIXME: Not at all done. - * - * genericUpdater() should be something one registers for, then it - * automatically picks up intervals based on max-age from the backend, and - * allows forced updates (E.g.: force polling comments after a comment is - * added, force polling switches after switches has been changed). - * - */ -function doMiscUpdates() { - genericUpdater("comments","comments", "/api/private/comments"); - genericUpdater("switches_management", "switches", "/api/private/switches-management"); -} - -function nmsStatsInc(stat) { - if (nms.stats[stat] == undefined) - nms.stats[stat] = 0; - nms.stats[stat]++; -} -/* - * Updates nms[name] with data fetched from remote target in variable - * "remotename". If a callback is provided, it is called with argument meh. - * - * This also populates nms.pollers[name] with the server-provided hash. - * Only if a change is detected is the callback issued. - */ -function genericUpdater(name, remotename, target, cb, meh) { - if (nms.outstandingAjaxRequests > 5) { - nms.ajaxOverflow++; - updateAjaxInfo(); - return; - } - nms.outstandingAjaxRequests++; - var now = ""; - if (nms.now != false) - now = "now=" + nms.now; - if (now != "") { - if (target.match("\\?")) - now = "&" + now; - else - now = "?" + now; - } - - $.ajax({ - type: "GET", - url: target + now, - dataType: "text", - success: function (data, textStatus, jqXHR) { - var indata = JSON.parse(data); - if (nms.poller.hashes[name] != indata['hash']) { - nms[name] = indata[remotename]; - nms.poller.hashes[name] = indata['hash']; - nms.poller.time[name] = indata['time']; - if (cb != undefined) { - cb(meh); - } - } else { - nmsStatsInc("identicalFetches"); - } - }, - complete: function(jqXHR, textStatus) { - nms.outstandingAjaxRequests--; - updateAjaxInfo(); - } - }); -} - -/* - * Update nms.switches_now and nms.switches_then - */ -function updatePorts() -{ - var now = ""; - if (nms.outstandingAjaxRequests > 5) { - nms.ajaxOverflow++; - updateAjaxInfo(); - return; - } - nms.outstandingAjaxRequests++; - if (nms.now != false) - now = "?now=" + nms.now; - $.ajax({ - type: "GET", - url: "/api/private/port-state"+ now , - dataType: "text", - success: function (data, textStatus, jqXHR) { - var switchdata = JSON.parse(data); - updateSwitches(switchdata,nms.switches_now); - initialUpdate(); - updateSpeed(); - updateMap(); - if (nms.repop_time == false && nms.repop_switch) - nms.repop_time = nms.switches_now.time; - else if (nms.repop_switch && nms.switch_showing && nms.repop_time != nms.switches_now.time) { - showSwitch(nms.switch_showing,true); - nms.repop_switch = false; - nms.repop_time = false; - } - }, - complete: function(jqXHR, textStatus) { - nms.outstandingAjaxRequests--; - updateAjaxInfo(); - } - }); - nms.outstandingAjaxRequests++; - $.ajax({ - type: "GET", - url: "/api/public/switches"+ now , - dataType: "text", - success: function (data, textStatus, jqXHR) { - var switchdata = JSON.parse(data); - updateSwitches(switchdata,nms.switches_now); - parseIntPlacements(); - }, - complete: function(jqXHR, textStatus) { - nms.outstandingAjaxRequests--; - updateAjaxInfo(); - } - }); - now=""; - if (nms.now != false) - now = "?now=" + nms.now; - nms.outstandingAjaxRequests++; - updateAjaxInfo(); - $.ajax({ - type: "GET", - url: "/api/private/port-state" + now, - dataType: "text", - success: function (data, textStatus, jqXHR) { - var switchdata = JSON.parse(data); - updateSwitches(switchdata,nms.switches_then); - initialUpdate(); - updateSpeed(); - updateMap(); - }, - complete: function(jqXHR, textStatus) { - nms.outstandingAjaxRequests--; - updateAjaxInfo(); - } - }) -} - /* * Returns true if we have now and then-data for switches and that the * "now" is actually newer. Useful for basic sanity and avoiding negative @@ -1005,83 +811,14 @@ function updatePorts() */ function newerSwitches() { - if (nms.switches_now.time == undefined || nms.switches_then.time == undefined) + if (nmsData.switches.time == undefined || nms.switches_then.time == undefined) return false; - var now_timestamp = stringToEpoch(nms.switches_now.time); + var now_timestamp = stringToEpoch(nmsData.switches.time); var then_timestamp = stringToEpoch(nms.switches_then.time); if (now_timestamp == 0 || then_timestamp == 0 || then_timestamp >= now_timestamp) return false; return true; } -/* - * Use nms.switches_now and nms.switches_then to update 'nms.speed'. - * - * nms.speed is a total of ifHCInOctets across all client-interfaces - * nms.speed_full is a total of for /all/ interfaces. - * - * This is run separate of updatePorts mainly for historic reasons, but - * if it was added to the tail end of updatePorts, there'd have to be some - * logic to ensure it was run after both requests. Right now, it's just - * equally wrong for both scenarios, not consistently wrong (or something). - * - * FIXME: Err, yeah, add this to the tail-end of updatePorts instead :D - * - */ - -function updateSpeed() -{ - var speed_in = parseInt(0); - var speed_full = parseInt(0); - var counter=0; - var sw; - var speedele = document.getElementById("speed"); - if (!newerSwitches()) - return; - for (sw in nms.switches_now["switches"]) { - for (port in nms.switches_now["switches"][sw]["ports"]) { - if (!nms.switches_now["switches"][sw]["ports"][port]) { - console.log("ops"); - continue; - } - if (!nms.switches_then || !nms.switches_then["switches"] || !nms.switches_then["switches"][sw] || !nms.switches_then["switches"][sw]["ports"]) { - continue; - } - if (!nms.switches_now || !nms.switches_now["switches"] || !nms.switches_now["switches"][sw] || !nms.switches_now["switches"][sw]["ports"]) { - continue; - } - - if (!nms.switches_then["switches"][sw]["ports"][port]) { - console.log("ops"); - continue; - } - var diff = parseInt(parseInt(nms.switches_now["switches"][sw]["ports"][port]["time"]) - parseInt(nms.switches_then["switches"][sw]["ports"][port]["time"])); - var then = parseInt(nms.switches_then["switches"][sw]["ports"][port]["ifhcinoctets"]) ; - var now = parseInt(nms.switches_now["switches"][sw]["ports"][port]["ifhcinoctets"]) ; - var diffval = (now - then); - if (then == 0 || now == 0 || diffval == 0 || diffval == NaN) { - continue; - } - speed_full += parseInt(diffval/diff); - if (( /e\d-\d/.exec(sw) || /e\d\d-\d/.exec(sw)) && ( /ge-\d\/\d\/\d$/.exec(port) || /ge-\d\/\d\/\d\d$/.exec(port))) { - if (!( - /ge-0\/0\/44$/.exec(port) || - /ge-0\/0\/45$/.exec(port) || - /ge-0\/0\/46$/.exec(port) || - /ge-0\/0\/47$/.exec(port))) { - speed_in += parseInt(diffval/diff) ; - counter++; - } - } - } - } - nms.speed = speed_in; - nms.speed_full = speed_full; - if (speedele) { - speedele.innerHTML = byteCount(8 * parseInt(nms.speed)) + "b/s"; - speedele.innerHTML += " / " + byteCount(8 * parseInt(nms.speed_full)) + "b/s"; - - } -} /* * Draw a linknet with index i. @@ -1092,8 +829,8 @@ function drawLinknet(i) { var c1 = nms.linknet_color[i] && nms.linknet_color[i].c1 ? nms.linknet_color[i].c1 : blue; var c2 = nms.linknet_color[i] && nms.linknet_color[i].c2 ? nms.linknet_color[i].c2 : blue; - if (nms.switches_now.switches[nms.switches_now.linknets[i].sysname1] && nms.switches_now.switches[nms.switches_now.linknets[i].sysname2]) { - connectSwitches(nms.switches_now.linknets[i].sysname1,nms.switches_now.linknets[i].sysname2, c1, c2); + if (nmsData.switches.switches[nmsData.switches.linknets[i].sysname1] && nmsData.switches.switches[nmsData.switches.linknets[i].sysname2]) { + connectSwitches(nmsData.switches.linknets[i].sysname1,nmsData.switches.linknets[i].sysname2, c1, c2); } } @@ -1102,8 +839,8 @@ function drawLinknet(i) */ function drawLinknets() { - if (nms.switches_now && nms.switches_now.linknets) { - for (var i in nms.switches_now.linknets) { + if (nmsData.switches && nmsData.switches.linknets) { + for (var i in nmsData.switches.linknets) { drawLinknet(i); } } @@ -1134,7 +871,7 @@ function setLinknetColors(i,c1,c2) */ function drawSwitch(sw) { - var box = nms.switches_now['switches'][sw]['placement']; + var box = nmsData.switches.switches[sw]['placement']; var color = nms.switch_color[sw]; if (color == undefined) { color = blue; @@ -1163,38 +900,21 @@ function drawSwitch(sw) } } -/* - * Make sure all placements of switches are parsed as integers so we don't - * have to pollute the code with pasreInt() every time we use it. - */ -function parseIntPlacements() { - for (var sw in nms.switches_now.switches) { - nms.switches_now.switches[sw]['placement']['x'] = - parseInt(nms.switches_now.switches[sw]['placement']['x']); - nms.switches_now.switches[sw]['placement']['y'] = - parseInt(nms.switches_now.switches[sw]['placement']['y']); - nms.switches_now.switches[sw]['placement']['width'] = - parseInt(nms.switches_now.switches[sw]['placement']['width']); - nms.switches_now.switches[sw]['placement']['height'] = - parseInt(nms.switches_now.switches[sw]['placement']['height']); - } -} - /* * Draw all switches */ function drawSwitches() { - if (!nms.switches_now || !nms.switches_now.switches) + if (!nmsData.switches || !nmsData.switches.switches) return; - for (var sw in nms.switches_now.switches) { + for (var sw in nmsData.switches.switches) { drawSwitch(sw); } nms.drawn = true; } function drawSwitchInfo() { - if (!nms.switches_now || !nms.switches_now.switches) + if (!nmsData.switches || !nmsData.switches.switches) return; for (var sw in nms.switchInfo) { switchInfoText(sw, nms.switchInfo[sw]); @@ -1210,10 +930,10 @@ function drawSwitchInfo() */ function drawNow() { - if (!nms.switches_now) + if (!nmsData.switches) return; // XXX: Get rid of microseconds that we get from the backend. - var now = /^[^.]*/.exec(nms.switches_now.time); + var now = /^[^.]*/.exec(nmsData.switches.time); dr.top.ctx.font = Math.round(2 * nms.fontSize * canvas.scale) + "px " + nms.fontFace; dr.top.ctx.clearRect(0,0,Math.floor(800 * canvas.scale),Math.floor(100 * canvas.scale)); dr.top.ctx.fillStyle = "white"; @@ -1295,8 +1015,8 @@ function findSwitch(x,y) { x = parseInt(parseInt(x) / canvas.scale); y = parseInt(parseInt(y) / canvas.scale); - for (var v in nms.switches_now.switches) { - if(isIn(nms.switches_now.switches[v]['placement'],x,y)) { + for (var v in nmsData.switches.switches) { + if(isIn(nmsData.switches.switches[v]['placement'],x,y)) { return v; } } @@ -1343,23 +1063,23 @@ function switchClick(sw) */ function resetColors() { - if (!nms.switches_now) + if (!nms.sswitches_now) return; - if (nms.switches_now.linknets) { - for (var i in nms.switches_now.linknets) { + if (nmsData.switches.linknets) { + for (var i in nmsData.switches.linknets) { setLinknetColors(i, blue,blue); } } - for (var sw in nms.switches_now.switches) { + for (var sw in nmsData.switches.switches) { setSwitchColor(sw, blue); } } function resetTextInfo() { - if (!nms.switches_now) + if (!nmsData.switches) return; - for (var sw in nms.switches_now.switches) { + for (var sw in nmsData.switches.switches) { switchInfoText(sw, undefined); } @@ -1434,7 +1154,7 @@ function setNightMode(toggle) { function switchInfoText(sw, text) { - var box = nms.switches_now['switches'][sw]['placement']; + var box = nmsData.switches.switches.[sw]['placement']; var c = canvas.scale; if (nms.switchInfo[sw] == text && nms.switchInfoDrawn[sw]) { return; @@ -1560,8 +1280,8 @@ function drawRegular(ctx,text,x,y,w,h,align) { * gradient/color */ function connectSwitches(insw1, insw2,color1, color2) { - var sw1 = nms.switches_now.switches[insw1].placement; - var sw2 = nms.switches_now.switches[insw2].placement; + var sw1 = nmsData.switches.switches[insw1].placement; + var sw2 = nmsData.switches.switches[insw2].placement; if (color1 == undefined) color1 = blue; if (color2 == undefined) @@ -1595,12 +1315,19 @@ function initNMS() { window.addEventListener('resize',resizeEvent,true); document.addEventListener('load',resizeEvent,true); - nms.timers.ports = new nmsTimer(updatePorts, 1000, "Port updater", "AJAX request to update port data (traffic, etc)"); - - nms.timers.ping = new nmsTimer(updatePing, 1000, "Ping updater", "AJAX request to update ping data"); - nms.timers.playback = new nmsTimer(nms.playback.tick, 1000, "Playback ticker", "Handler used to advance time"); + // Public + + nmsData.registerSource("ping", "/api/public/ping"); + nmsData.registerSource("switches","/api/public/switches", drawSwitches); + nmsData.registerSource("switchstate","/api/public/switch-state"); + + // Private + nmsData.registerSource("portstate","/api/private/port-state"); + nmsData.registerSource("comments", "/api/private/comments"); + nmsData.registerSource("smanagement","/api/private/switches-management"); + detectHandler(); nms.playback.play(); setupKeyhandler(); -- cgit v1.2.3 From 7f35a9a4593d946f626cea8c56e4568a7a7fe0d7 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sat, 12 Mar 2016 21:42:55 +0000 Subject: NMSjs: Massive rework of map drawing Still half-way done, but it's looking better. Confirmed working right now: Comment spotter and disco. --- web/nms.gathering.org/js/nms.js | 510 ++-------------------------------------- 1 file changed, 16 insertions(+), 494 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index b47b131..cd62579 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -3,30 +3,14 @@ var nms = { stats:{}, // Various internal stats updater:undefined, // Active updater speed:0, // Current aggregated speed - drawn:false, // Set to 'true' when switches are drawn switch_showing:"", // Which switch we are displaying (if any). switchInfo:{}, - switchInfoDrawn:{}, repop_switch:false, // True if we need to repopulate the switch info when port state updates (e.g.: added comments); repop_time:false, // Timestamp in case we get a cached result nightMode:false, - /* - * Switch-specific variables. These are currently separate from - * "switches_now" because switches_now is reset every time we get - * new data. - */ - nightBlur:{}, // Have we blurred this switch or not? - shadowBlur:10, - shadowColor:"#EEEEEE", - switch_color:{}, // Color for switch - linknet_color:{}, // color for linknet - textDrawn:{}, // Have we drawn text for this switch? _now: false, get now() { return this._now }, set now(v) { this._now = n; nmsData.now = n; }, - fontSize:16, // This is scaled too, but 16 seems to make sense. - fontFace:"Verdana", - fontLineFactor:3, /* * Various setInterval() handlers. See nmsTimer() for how they are * used. @@ -36,8 +20,6 @@ var nms = { */ timers: { playback:false, - ports:false, - ping:false }, menuShowing:true, /* @@ -67,8 +49,7 @@ var nms = { 'k':moveTimeFromKey, 'l':moveTimeFromKey, 'p':moveTimeFromKey, - 'r':moveTimeFromKey, - 'not-default':keyDebug + 'r':moveTimeFromKey }, /* * Playback controllers and variables @@ -116,90 +97,6 @@ function nmsTimer(handler, interval, name, description) { } -/* - * Drawing primitives. - * - * This contains both canvas and context for drawing layers. It's on a - * top-level namespace to reduce SLIGHTLY the ridiculously long names - * (e.g.: dr.bg.ctx.drawImage() is long enough....). - * - * Only initialized once (for now). - */ -var dr = {}; - -/* - * Original scale. This is just used to define the coordinate system. - * 1920x1032 was chosen for tg15 by coincidence: We scaled the underlying - * map down to "full hd" and these are the bounds we got. There's no - * particular reason this couldn't change, except it means re-aligning all - * switches. - */ -var orig = { - width:1920, - height:1032 - }; - -/* - * Canvas dimensions, and scale factor. - * - * We could derive scale factor from canvas.width / orig.width, but it's - * used so frequently that this makes much more sense. - * - * Width and height are rarely used. - */ -var canvas = { - width:0, - height:0, - scale:1 -}; - -/* - * Various margins at the sides. - * - * Not really used much, except for "text", which is really more of a - * padding than margin... - */ -var margin = { - x:10, - y:20, - text:3 -}; - -/* - * Convenience-function to populate the 'dr' structure. - * - * Only run once. - */ -function initDrawing() { - dr['bg'] = {}; - dr['bg']['c'] = document.getElementById("bgCanvas"); - dr['bg']['ctx'] = dr['bg']['c'].getContext('2d'); - dr['link'] = {}; - dr['link']['c'] = document.getElementById("linkCanvas"); - dr['link']['ctx'] = dr['link']['c'].getContext('2d'); - dr['blur'] = {}; - dr['blur']['c'] = document.getElementById("blurCanvas"); - dr['blur']['ctx'] = dr['blur']['c'].getContext('2d'); - dr['switch'] = {}; - dr['switch']['c'] = document.getElementById("switchCanvas"); - dr['switch']['ctx'] = dr['switch']['c'].getContext('2d'); - dr['text'] = {}; - dr['text']['c'] = document.getElementById("textCanvas"); - dr['text']['ctx'] = dr['text']['c'].getContext('2d'); - dr['textInfo'] = {}; - dr['textInfo']['c'] = document.getElementById("textInfoCanvas"); - dr['textInfo']['ctx'] = dr['textInfo']['c'].getContext('2d'); - dr['top'] = {}; - dr['top']['c'] = document.getElementById("topCanvas"); - dr['top']['ctx'] = dr['top']['c'].getContext('2d'); - dr['input'] = {}; - dr['input']['c'] = document.getElementById("inputCanvas"); - dr['input']['ctx'] = dr['top']['c'].getContext('2d'); - dr['hidden'] = {}; - dr['hidden']['c'] = document.getElementById("hiddenCanvas"); - dr['hidden']['ctx'] = dr['hidden']['c'].getContext('2d'); -} - /* * Convenience function that doesn't support huge numbers, and it's easier * to comment than to fix. But not really, but I'm not fixing it anyway. @@ -619,12 +516,6 @@ function updateMap() } if (!newerSwitches()) return; - if (!nms.drawn) - setScale(); - if (!nms.drawn) - return; - if (!nms.ping_data) - return; if (nms.updater != undefined && nmsData.switches && nms.switches_then) { nms.updater.updater(); @@ -638,14 +529,12 @@ function updateMap() function setUpdater(fo) { nms.updater = undefined; - resetColors(); - resetTextInfo(); + nmsMap.reset(); fo.init(); nms.updater = fo; var foo = document.getElementById("updater_name"); foo.innerHTML = fo.name + " "; document.location.hash = fo.tag; - initialUpdate(); if (nms.ping_data && nms.switches_then && nmsData.switches) { nms.updater.updater(); } @@ -697,31 +586,6 @@ function resetSwitchStates() { } } -/* - * Convenience function to avoid waiting for pollers when data is available - * for the first time. - */ -function initialUpdate() -{ - return; - if (nms.ping_data && nms.switches_then && nmsData.switches && nms.updater != undefined && nms.did_update == false ) { - resizeEvent(); - if (!nms.drawn) { - drawSwitches(); - drawLinknets(); - } - nms.updater.updater(); - nms.did_update = true; - } -} - -function resetBlur() -{ - nms.nightBlur = {}; - dr.blur.ctx.clearRect(0,0,canvas.width,canvas.height); - drawSwitches(); -} - function applyBlur() { var blur = document.getElementById("shadowBlur"); @@ -732,6 +596,14 @@ function applyBlur() saveSettings(); } +function toggleLayer(layer) { + var l = document.getElementById(layer); + if (l.style.display == 'none') + l.style.display = ''; + else + l.style.display = 'none'; +} + function showBlurBox() { var blur = document.getElementById("shadowBlur"); @@ -864,54 +736,6 @@ function setLinknetColors(i,c1,c2) } } -/* - * (Re)draw a switch 'sw'. - * - * Color defaults to 'blue' if it's not set in the data structure. - */ -function drawSwitch(sw) -{ - var box = nmsData.switches.switches[sw]['placement']; - var color = nms.switch_color[sw]; - if (color == undefined) { - color = blue; - } - dr.switch.ctx.fillStyle = color; - /* - * XXX: This is a left-over from before NMS did separate - * canvases, and might be done better elsewhere. - */ - if (nms.nightMode && nms.nightBlur[sw] != true) { - dr.blur.ctx.shadowBlur = nms.shadowBlur; - dr.blur.ctx.shadowColor = nms.shadowColor; - drawBoxBlur(box['x'],box['y'],box['width'],box['height']); - nms.nightBlur[sw] = true; - } - drawBox(box['x'],box['y'],box['width'],box['height']); - dr.switch.ctx.shadowBlur = 0; - if (!nms.textDrawn[sw]) { - if ((box['width'] + 10 )< box['height']) { - drawSideways(dr.text.ctx, sw,box['x'],box['y'],box['width'],box['height']); - } else { - drawRegular(dr.text.ctx,sw,box['x'],box['y'],box['width'],box['height']); - } - - nms.textDrawn[sw] = true; - } -} - -/* - * Draw all switches - */ -function drawSwitches() -{ - if (!nmsData.switches || !nmsData.switches.switches) - return; - for (var sw in nmsData.switches.switches) { - drawSwitch(sw); - } - nms.drawn = true; -} function drawSwitchInfo() { if (!nmsData.switches || !nmsData.switches.switches) @@ -957,43 +781,12 @@ function drawNow() */ function drawScene() { - dr.text.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace; + //dr.text.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace; dr.textInfo.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace; drawLinknets(); - drawSwitches(); drawSwitchInfo(); } -/* - * Set the scale factor and (re)draw the scene and background. - * Uses canvas.scale and updates canvas.height and canvas.width. - */ -function setScale() -{ - canvas.height = orig.height * canvas.scale ; - canvas.width = orig.width * canvas.scale ; - for (var a in dr) { - /* - * Resizing this to a too small size breaks gradients on smaller screens. - */ - if (a == 'hidden') - continue; - dr[a].c.height = canvas.height; - dr[a].c.width = canvas.width; - } - nms.nightBlur = {}; - nms.textDrawn = {}; - nms.switchInfoDrawn = {}; - if (nms.gradients) - drawGradient(nms.gradients); - drawBG(); - drawScene(); - drawNow(); - - document.getElementById("scaler").value = canvas.scale; - document.getElementById("scaler-text").innerHTML = (parseFloat(canvas.scale)).toPrecision(3); -} - /* * Returns true if the coordinates (x,y) is inside the box defined by * box.{x,y,w.h} (e.g.: placement of a switch). @@ -1012,8 +805,8 @@ function isIn(box, x, y) * if none is found. */ function findSwitch(x,y) { - x = parseInt(parseInt(x) / canvas.scale); - y = parseInt(parseInt(y) / canvas.scale); + x = parseInt(parseInt(x) / nmsMap.scale); + y = parseInt(parseInt(y) / nmsMap.scale); for (var v in nmsData.switches.switches) { if(isIn(nmsData.switches.switches[v]['placement'],x,y)) { @@ -1023,27 +816,6 @@ function findSwitch(x,y) { return undefined; } -/* - * Set switch color of 'sw' to 'c', then re-draw the switch. - */ -function setSwitchColor(sw, c) -{ - if(!nms.switch_color || !nms.switch_color[sw] || nms.switch_color[sw] != c) { - nms.switch_color[sw] = c; - drawSwitch(sw); - } -} - -/* - * Event handler for the front-end drag bar to change scale - */ -function scaleChange() -{ - var scaler = document.getElementById("scaler").value; - canvas.scale = scaler; - setScale(); -} - /* * Called when a switch is clicked */ @@ -1055,35 +827,6 @@ function switchClick(sw) showSwitch(sw); } -/* - * Resets the colors of linknets and switches. - * - * Useful when mode changes so we don't re-use colors from previous modes - * due to lack of data or bugs. - */ -function resetColors() -{ - if (!nms.sswitches_now) - return; - if (nmsData.switches.linknets) { - for (var i in nmsData.switches.linknets) { - setLinknetColors(i, blue,blue); - } - } - for (var sw in nmsData.switches.switches) { - setSwitchColor(sw, blue); - } -} - -function resetTextInfo() -{ - if (!nmsData.switches) - return; - for (var sw in nmsData.switches.switches) { - switchInfoText(sw, undefined); - } - -} /* * onclick handler for the canvas. * @@ -1097,40 +840,6 @@ function canvasClick(e) } } -/* - * Resize event-handler. - * - * Recomputes the scale and applies it. - * - * Has to use c.offset* since we are just scaling the canvas, not - * everything else. - * - */ -function resizeEvent() -{ - var width = window.innerWidth - dr.bg.c.offsetLeft; - var height = window.innerHeight - dr.bg.c.offsetTop; - if (width / (orig.width + margin.x) > height / (orig.height + margin.y)) { - canvas.scale = height / (orig.height + margin.y); - } else { - canvas.scale = width / (orig.width + margin.x); - } - setScale(); -} - -/* - * Draws the background image (scaled). - */ -function drawBG() -{ - if (nms.nightMode) { - invertCanvas(); - } else { - var image = document.getElementById('source'); - dr.bg.ctx.drawImage(image, 0, 0, canvas.width, canvas.height); - } -} - /* * Set night mode to whatever 'toggle' is. * @@ -1143,50 +852,11 @@ function setNightMode(toggle) { body.style.background = toggle ? "black" : "white"; var nav = document.getElementsByTagName("nav")[0]; if (toggle) { - dr.blur.c.style.display = ''; nav.classList.add('navbar-inverse'); } else { - dr.blur.c.style.display = 'none'; nav.classList.remove('navbar-inverse'); } - setScale(); -} - -function switchInfoText(sw, text) -{ - var box = nmsData.switches.switches.[sw]['placement']; - var c = canvas.scale; - if (nms.switchInfo[sw] == text && nms.switchInfoDrawn[sw]) { - return; - } - nms.switchInfo[sw] = text; - nms.switchInfoDrawn[sw] = true; - dr.textInfo.ctx.clearRect(c* box['x'], c*box['y'], c*box['width'], c*box['height']); - if (text != undefined && text != "") { - if ((box['width'] + 10 )< box['height']) { - drawSideways(dr.textInfo.ctx, text,box['x'],box['y'],box['width'],box['height'],"end"); - } else { - drawRegular(dr.textInfo.ctx, text,box['x'],box['y'],box['width'],box['height'],"end"); - } - } -} - -/* - * Draw a box (e.g.: switch). - */ -function drawBox(x,y,boxw,boxh) -{ - var myX = Math.floor(x * canvas.scale); - var myY = Math.floor(y * canvas.scale); - var myX2 = Math.floor((boxw) * canvas.scale); - var myY2 = Math.floor((boxh) * canvas.scale); - dr.switch.ctx.fillRect(myX,myY, myX2, myY2); - dr.switch.ctx.lineWidth = Math.floor(1.0 * canvas.scale); - if (canvas.scale < 1.0) { - dr.switch.ctx.lineWidth = 1.0; - } - dr.switch.ctx.strokeStyle = "#000000"; - dr.switch.ctx.strokeRect(myX,myY, myX2, myY2); + nmsMap.setNightMode(toggle); } /* @@ -1200,108 +870,6 @@ function drawBoxBlur(x,y,boxw,boxh) var myY2 = Math.floor((boxh) * canvas.scale); dr.blur.ctx.fillRect(myX,myY, myX2, myY2); } -/* - * Draw text on a box - sideways! - * - * XXX: This is pretty nasty and should also probably take a box as input. - */ -function drawSideways(ctx,text,x,y,w,h,align) -{ - ctx.rotate(Math.PI * 3 / 2); - ctx.fillStyle = "white"; - ctx.strokeStyle = "black"; - if (align == "end") { - ctx.textAlign = align; - y = y-h + margin.text*2; - } else { - ctx.textAlign = "start"; - } - ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale); - if (ctx.lineWidth == 0) { - ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale); - } - ctx.strokeText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) ); - ctx.fillText(text, - canvas.scale * (y + h - margin.text),canvas.scale * (x + w - margin.text) ); - - ctx.rotate(Math.PI / 2); -} - -/* - * Draw background inverted (wooo) - * - * XXX: This is broken for chromium on local file system (e.g.: file:///) - * Seems like a chromium bug? - */ -function invertCanvas() { - var imageObj = document.getElementById('source'); - dr.bg.ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); - - var imageData = dr.bg.ctx.getImageData(0, 0, canvas.width, canvas.height); - var data = imageData.data; - - for(var i = 0; i < data.length; i += 4) { - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; - } - dr.bg.ctx.putImageData(imageData, 0, 0); -} - -/* - * Draw regular text on a box. - * - * Should take the same format as drawSideways() - * - * XXX: Both should be renamed to have 'text' or something in them - */ -function drawRegular(ctx,text,x,y,w,h,align) { - - ctx.fillStyle = "white"; - ctx.strokeStyle = "black"; - ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale); - if (align == "end") { - ctx.textAlign = align; - x = x+w - margin.text*2; - } else { - ctx.textAlign = "start"; - } - if (ctx.lineWidth == 0) { - ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale); - } - ctx.strokeText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale); - ctx.fillText(text, (x + margin.text) * canvas.scale, (y + h - margin.text) * canvas.scale); -} - -/* - * Draw a line between switch "insw1" and "insw2", using a gradiant going - * from color1 to color2. - * - * XXX: beginPath() and closePath() is needed to avoid re-using the - * gradient/color - */ -function connectSwitches(insw1, insw2,color1, color2) { - var sw1 = nmsData.switches.switches[insw1].placement; - var sw2 = nmsData.switches.switches[insw2].placement; - if (color1 == undefined) - color1 = blue; - if (color2 == undefined) - color2 = blue; - var x0 = Math.floor((sw1.x + sw1.width/2) * canvas.scale); - var y0 = Math.floor((sw1.y + sw1.height/2) * canvas.scale); - var x1 = Math.floor((sw2.x + sw2.width/2) * canvas.scale); - var y1 = Math.floor((sw2.y + sw2.height/2) * canvas.scale); - var gradient = dr.link.ctx.createLinearGradient(x1,y1,x0,y0); - gradient.addColorStop(0, color1); - gradient.addColorStop(1, color2); - dr.link.ctx.beginPath(); - dr.link.ctx.strokeStyle = gradient; - dr.link.ctx.moveTo(x0,y0); - dr.link.ctx.lineTo(x1,y1); - dr.link.ctx.lineWidth = Math.floor(5 * canvas.scale); - dr.link.ctx.closePath(); - dr.link.ctx.stroke(); - dr.link.ctx.moveTo(0,0); -} /* * Boot up "fully fledged" NMS. @@ -1311,16 +879,13 @@ function connectSwitches(insw1, insw2,color1, color2) { * drawing, etc). */ function initNMS() { - initDrawing(); - window.addEventListener('resize',resizeEvent,true); - document.addEventListener('load',resizeEvent,true); nms.timers.playback = new nmsTimer(nms.playback.tick, 1000, "Playback ticker", "Handler used to advance time"); // Public nmsData.registerSource("ping", "/api/public/ping"); - nmsData.registerSource("switches","/api/public/switches", drawSwitches); + nmsData.registerSource("switches","/api/public/switches"); nmsData.registerSource("switchstate","/api/public/switch-state"); // Private @@ -1328,6 +893,7 @@ function initNMS() { nmsData.registerSource("comments", "/api/private/comments"); nmsData.registerSource("smanagement","/api/private/switches-management"); + nmsMap.init(); detectHandler(); nms.playback.play(); setupKeyhandler(); @@ -1390,45 +956,10 @@ function showTimerDebug() { document.getElementById('debugTimers').style.display = 'block'; } -function hideLayer(layer) { - var l = document.getElementById(layer); - l.style.display = "none"; - if (layer != "layerVisibility") - nms.layerVisibility[layer] = false; - saveSettings(); -} - -function showLayer(layer) { - var l = document.getElementById(layer); - l.style.display = ""; - if (layer != "layerVisibility") - nms.layerVisibility[layer] = true; - saveSettings(); -} - -function toggleLayer(layer) { - var l = document.getElementById(layer); - if (l.style.display == 'none') - l.style.display = ''; - else - l.style.display = 'none'; -} - -function applyLayerVis() -{ - for (var l in nms.layerVisibility) { - var layer = document.getElementById(l); - if (layer) - layer.style.display = nms.layerVisibility[l] ? '' : 'none'; - } -} - function setMenu() { var nav = document.getElementsByTagName("nav")[0]; nav.style.display = nms.menuShowing ? '' : 'none'; - resizeEvent(); - } function toggleMenu() { @@ -1491,13 +1022,6 @@ function moveTimeFromKey(e,key) return true; } -var debugEvent; -function keyDebug(e) -{ - console.log(e); - debugEvent = e; -} - function keyPressed(e) { if (e.target.nodeName == "INPUT") { @@ -1551,10 +1075,8 @@ function restoreSettings() for (var v in retrieve) { nms[v] = retrieve[v]; } - setScale(); setMenu(); setNightMode(nms.nightMode); - applyLayerVis(); } function forgetSettings() -- cgit v1.2.3 From 83e6b5e193799cabdc0af876178f385faef5e172 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sat, 12 Mar 2016 22:05:17 +0000 Subject: NMS: Remove superfluous debug/tweak stuff Uncluttering the UI and reducing the need for complexity in the code. --- web/nms.gathering.org/js/nms.js | 46 +---------------------------------------- 1 file changed, 1 insertion(+), 45 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index cd62579..9300b2d 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -911,56 +911,12 @@ function detectHandler() { setUpdater(handler_ping); } -/* - * Display and populate the dialog box for debugging timers. - * - * Could probably be cleaned up. - */ -function showTimerDebug() { - var tableTop = document.getElementById('debugTimers'); - var table = document.getElementById('timerTable'); - var tr, td1, td2; - if (table) - tableTop.removeChild(table); - table = document.createElement("table"); - table.id = "timerTable"; - table.style.zIndex = 100; - table.className = "table"; - table.classList.add("table"); - table.classList.add("table-default"); - var header = table.createTHead(); - tr = header.insertRow(0); - td = tr.insertCell(0); - td.innerHTML = "Handler"; - td = tr.insertCell(1); - td.innerHTML = "Interval (ms)"; - td = tr.insertCell(2); - td.innerHTML = "Name"; - td = tr.insertCell(3); - td.innerHTML = "Description"; - for (var v in nms.timers) { - tr = table.insertRow(-1); - td = tr.insertCell(0); - td.textContent = nms.timers[v].handle; - td = tr.insertCell(1); - td.style.width = "15em"; - var tmp = "
"; - tmp += "
"; - td.innerHTML = tmp; - td = tr.insertCell(2); - td.textContent = nms.timers[v].name; - td = tr.insertCell(3); - td.textContent = nms.timers[v].description; - } - tableTop.appendChild(table); - document.getElementById('debugTimers').style.display = 'block'; -} - function setMenu() { var nav = document.getElementsByTagName("nav")[0]; nav.style.display = nms.menuShowing ? '' : 'none'; } + function toggleMenu() { nms.menuShowing = ! nms.menuShowing; -- cgit v1.2.3 From 93cf4e90320df21215a081a389cd2ab98a8a2d0d Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sat, 12 Mar 2016 23:31:36 +0000 Subject: NMSjs: Bump map handlers and more The idea is that map handlers just register for events instead of this periodic update. --- web/nms.gathering.org/js/nms.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index 9300b2d..7564d72 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -289,7 +289,10 @@ nms.playback.tick = function() // Update data and force redraw // FIXME: nmsData merge - nms.updater.updater(); + // nms.updater.updater(); + // FIXME: 2: This should not be necsarry. The updaters should be + // data-driven, not time-driven. E.g.: If nmsData upates, the handlers + // should run. } /* * Helper function for safely getting a valid now-epoch @@ -530,14 +533,12 @@ function setUpdater(fo) { nms.updater = undefined; nmsMap.reset(); + nmsData.unregisterHandlerWildcard("mapHandler"); fo.init(); nms.updater = fo; var foo = document.getElementById("updater_name"); foo.innerHTML = fo.name + " "; document.location.hash = fo.tag; - if (nms.ping_data && nms.switches_then && nmsData.switches) { - nms.updater.updater(); - } } /* -- cgit v1.2.3 From 7ac403641bca2ef24573e3c750ba801dd9b278e1 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 00:58:48 +0000 Subject: NMSjs: Get rid of more cruft. --- web/nms.gathering.org/js/nms.js | 709 ++++++++++++---------------------------- 1 file changed, 213 insertions(+), 496 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index 7564d72..a959db0 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -1,39 +1,34 @@ "use strict"; var nms = { stats:{}, // Various internal stats - updater:undefined, // Active updater - speed:0, // Current aggregated speed switch_showing:"", // Which switch we are displaying (if any). - switchInfo:{}, - repop_switch:false, // True if we need to repopulate the switch info when port state updates (e.g.: added comments); - repop_time:false, // Timestamp in case we get a cached result - nightMode:false, + get nightMode() { return this._nightMode; }, + set nightMode(val) { if (val != this._nightMode) { this._nightMode = val; setNightMode(val); } }, + /* + * FIXME: This should be slightly smarter. + */ _now: false, get now() { return this._now }, - set now(v) { this._now = n; nmsData.now = n; }, + set now(v) { this._now = v; nmsData.now = v; }, /* * Various setInterval() handlers. See nmsTimer() for how they are * used. * - * Cool fact: Adding one here adds it to the 'debug timers' - * drop-down. + * FIXME: Should just stop using these. */ timers: { playback:false, }, + menuShowing:true, /* * This is a list of nms[x] variables that we store in our * settings-cookie when altered and restore on load. */ settingsList:[ - 'shadowBlur', - 'shadowColor', 'nightMode', - 'menuShowing', - 'layerVisibility' + 'menuShowing' ], - layerVisibility:{}, keyBindings:{ '?':toggleMenu, 'n':toggleNightMode, @@ -51,16 +46,16 @@ var nms = { 'p':moveTimeFromKey, 'r':moveTimeFromKey }, - /* - * Playback controllers and variables - */ - playback:{ - startTime: false, - stopTime: false, - playing: false, - replayTime: 0, - replayIncrement: 60 * 60 - } + /* + * Playback controllers and variables + */ + playback:{ + startTime: false, + stopTime: false, + playing: false, + replayTime: 0, + replayIncrement: 60 * 60 + } }; /* @@ -117,7 +112,7 @@ function byteCount(bytes) { */ function toggleNightMode() { - setNightMode(!nms.nightMode); + nms.nightMode = !nms.nightMode; saveSettings(); } @@ -190,76 +185,82 @@ function epochToString(t) return str; } + function localEpochToString(t) { - var d = new Date(parseInt(t) * parseInt(1000)); - var timezoneOffset = d.getTimezoneOffset() * -60; - t = t + timezoneOffset; + var d = new Date(parseInt(t) * parseInt(1000)); + var timezoneOffset = d.getTimezoneOffset() * -60; + t = t + timezoneOffset; - return epochToString(t); + return epochToString(t); } /* * Start replaying historical data. */ nms.playback.startReplay = function(startTime,stopTime) { - if(!startTime || !stopTime) - return false; - - nms.playback.pause(); - nms.playback.startTime = stringToEpoch(startTime); - nms.playback.stopTime = stringToEpoch(stopTime); - nms.now = epochToString(nms.playback.startTime); - nms.playback.play(); + if(!startTime || !stopTime) + return false; + + nms.playback.pause(); + nms.playback.startTime = stringToEpoch(startTime); + nms.playback.stopTime = stringToEpoch(stopTime); + nms.now = epochToString(nms.playback.startTime); + nms.playback.play(); } + /* * Pause playback */ nms.playback.pause = function() { - nms.timers.playback.stop(); - nms.playback.playing = false; + nms.timers.playback.stop(); + nms.playback.playing = false; } + /* * Start playback */ nms.playback.play = function() { - nms.playback.tick(); - nms.timers.playback.start(); - nms.playback.playing = true; + nms.playback.tick(); + nms.timers.playback.start(); + nms.playback.playing = true; } + /* * Toggle playback */ nms.playback.toggle = function() { - if(nms.playback.playing) { - nms.playback.pause(); - } else { - nms.playback.play(); - } + if(nms.playback.playing) { + nms.playback.pause(); + } else { + nms.playback.play(); + } } + /* * Jump to place in time */ nms.playback.setNow = function(now) { - resetSwitchStates(); - now = parseNow(now); - nms.now = now; + var now = parseNow(now); + nms.now = now; - nms.playback.stopTime = false; - nms.playback.startTime = false; - nms.playback.tick(); + nms.playback.stopTime = false; + nms.playback.startTime = false; + nms.playback.tick(); } + /* * Step forwards or backwards in timer */ nms.playback.stepTime = function(n) { - now = getNowEpoch(); - newtime = parseInt(now) + parseInt(n); - nms.now = epochToString(parseInt(newtime)); + var now = getNowEpoch(); + var newtime = parseInt(now) + parseInt(n); + nms.now = epochToString(parseInt(newtime)); - if(!nms.playback.playing) - nms.playback.tick(); + if(!nms.playback.playing) + nms.playback.tick(); } + /* * Ticker to trigger updates, and advance time if replaying * @@ -267,62 +268,67 @@ nms.playback.stepTime = function(n) */ nms.playback.tick = function() { - nms.playback.replayTime = getNowEpoch(); - - // If outside start-/stopTime, remove limits and pause playback - if (nms.playback.stopTime && (nms.playback.replayTime >= nms.playback.stopTime || nms.playback.replayTime < nms.playback.startTime)) { - nms.playback.stopTime = false; - nms.playback.startTime = false; - nms.playback.pause(); - return; - } - - // If past actual datetime, go live - if (nms.playback.replayTime > parseInt(Date.now() / 1000)) { - nms.now = false; - } - - // If we are still replaying, advance time - if(nms.now !== false && nms.playback.playing) { - nms.playback.stepTime(nms.playback.replayIncrement); - } - - // Update data and force redraw - // FIXME: nmsData merge - // nms.updater.updater(); - // FIXME: 2: This should not be necsarry. The updaters should be - // data-driven, not time-driven. E.g.: If nmsData upates, the handlers - // should run. + nms.playback.replayTime = getNowEpoch(); + + // If outside start-/stopTime, remove limits and pause playback + if (nms.playback.stopTime && (nms.playback.replayTime >= nms.playback.stopTime || nms.playback.replayTime < nms.playback.startTime)) { + nms.playback.stopTime = false; + nms.playback.startTime = false; + nms.playback.pause(); + return; + } + + // If past actual datetime, go live + if (nms.playback.replayTime > parseInt(Date.now() / 1000)) { + nms.now = false; + } + + // If we are still replaying, advance time + if(nms.now !== false && nms.playback.playing) { + nms.playback.stepTime(nms.playback.replayIncrement); + } } + /* * Helper function for safely getting a valid now-epoch */ function getNowEpoch() { - if (nms.now && nms.now != 0) - return stringToEpoch(nms.now); - else - return parseInt(Date.now() / 1000); + if (nms.now && nms.now != 0) + return stringToEpoch(nms.now); + else + return parseInt(Date.now() / 1000); } +function hideSwitch() +{ + _hideSwitch(); + nmsData.unregisterHandler("comments","switchshower"); +} + /* * Hide switch info-box */ -function hideSwitch() +function _hideSwitch() { - var swtop = document.getElementById("info-switch-parent"); - var switchele = document.getElementById("info-switch-table"); - var comments = document.getElementById("info-switch-comments-table"); - var commentbox; - if (switchele != undefined) - switchele.parentNode.removeChild(switchele); - if (comments != undefined) - comments.parentNode.removeChild(comments); - commentbox = document.getElementById("commentbox"); - if (commentbox != undefined) - commentbox.parentNode.removeChild(commentbox); - swtop.style.display = 'none'; - nms.switch_showing = ""; + var swtop = document.getElementById("info-switch-parent"); + var switchele = document.getElementById("info-switch-table"); + var comments = document.getElementById("info-switch-comments-table"); + var commentbox; + if (switchele != undefined) + switchele.parentNode.removeChild(switchele); + if (comments != undefined) + comments.parentNode.removeChild(comments); + commentbox = document.getElementById("commentbox"); + if (commentbox != undefined) + commentbox.parentNode.removeChild(commentbox); + swtop.style.display = 'none'; + nms.switch_showing = ""; +} + +function showSwitch(x) { + nmsData.addHandler("comments","switchshower",_showSwitch,x); + _showSwitch(x); } /* @@ -330,159 +336,95 @@ function hideSwitch() * * FIXME: THIS IS A MONSTROSITY. */ -function showSwitch(x) +function _showSwitch(x) { - var sw = nmsData.switches["switches"][x]; - var swm = nmsData.smanagement.switches[x]; - var swtop = document.getElementById("info-switch-parent"); - var swpanel = document.getElementById("info-switch-panel-body"); - var swtitle = document.getElementById("info-switch-title"); - var tr; - var td1; - var td2; + var sw = nmsData.switches["switches"][x]; + var swm = nmsData.smanagement.switches[x]; + var swtop = document.getElementById("info-switch-parent"); + var swpanel = document.getElementById("info-switch-panel-body"); + var swtitle = document.getElementById("info-switch-title"); + var tr; + var td1; + var td2; - hideSwitch(); - nms.switch_showing = x; - document.getElementById("aboutBox").style.display = "none"; - var switchele = document.createElement("table"); - switchele.id = "info-switch-table"; - switchele.className = "table"; - switchele.classList.add("table"); - switchele.classList.add("table-condensed"); - - swtitle.innerHTML = x + ''; - var speed = 0; - var speed2 = 0; - for (port in nmsData.switches["switches"][x]["ports"]) { - if (nmsData.switches["switches"][x]["ports"] == undefined || - nms.switches_then["switches"][x]["ports"] == undefined) { - continue; - } - if (/ge-0\/0\/44$/.exec(port) || - /ge-0\/0\/45$/.exec(port) || - /ge-0\/0\/46$/.exec(port) || - /ge-0\/0\/47$/.exec(port)) - { - var t = nms.switches_then["switches"][x]["ports"][port]; - var n = nmsData.switches["switches"][x]["ports"][port]; - speed += (parseInt(t["ifhcoutoctets"]) - parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"])); - speed2 += (parseInt(t["ifhcinoctets"]) - parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"])); - } - } - - tr = switchele.insertRow(-1); - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.innerHTML = "Uplink speed (out , port 44-47)"; - td2.innerHTML = byteCount(8 * speed) + "b/s"; + _hideSwitch(); + nms.switch_showing = x; + var switchele = document.createElement("table"); + switchele.id = "info-switch-table"; + switchele.className = "table"; + switchele.classList.add("table"); + switchele.classList.add("table-condensed"); + + swtitle.innerHTML = x + ''; - tr = switchele.insertRow(-1); - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.title = "Port 44, 45, 46 and 47 are used as uplinks."; - td1.innerHTML = "Uplink speed (in , port 44-47)"; - td2.innerHTML = byteCount(8 * speed2) + "b/s"; - - speed = 0; - for (port in nmsData.switches["switches"][x]["ports"]) { - if (nmsData.switches["switches"][x]["ports"] == undefined || - nms.switches_then["switches"][x]["ports"] == undefined) { - continue; - } - var t = nms.switches_then["switches"][x]["ports"][port]; - var n = nmsData.switches["switches"][x]["ports"][port]; - speed += (parseInt(t["ifhcinoctets"]) -parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"])); + for (var v in sw) { + if (v == "placement") { + continue; } - tr = switchele.insertRow(-1); td1 = tr.insertCell(0); td2 = tr.insertCell(1); - td1.innerHTML = "Total speed (in)"; - td2.innerHTML = byteCount(8 * speed) + "b/s"; - - speed = 0; - for (port in nmsData.switches["switches"][x]["ports"]) { - if (nmsData.switches["switches"][x]["ports"] == undefined || - nms.switches_then["switches"][x]["ports"] == undefined) { - continue; - } - var t = nms.switches_then["switches"][x]["ports"][port]; - var n = nmsData.switches["switches"][x]["ports"][port]; - speed += (parseInt(t["ifhcoutoctets"]) -parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"])); - } - + td1.innerHTML = v; + td2.innerHTML = sw[v]; + } + for (var v in swm) { tr = switchele.insertRow(-1); td1 = tr.insertCell(0); td2 = tr.insertCell(1); - td1.innerHTML = "Total speed (out)"; - td2.innerHTML = byteCount(8 * speed) + "b/s"; - - for (var v in sw) { - tr = switchele.insertRow(-1); - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.innerHTML = v; - td2.innerHTML = sw[v]; - } - for (var v in swm) { - tr = switchele.insertRow(-1); - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.innerHTML = v; - td2.innerHTML = swm[v]; - } + td1.innerHTML = v; + td2.innerHTML = swm[v]; + } - var comments = document.createElement("table"); - comments.id = "info-switch-comments-table"; - comments.className = "table table-condensed"; - var cap = document.createElement("caption"); - cap.textContent = "Comments"; - comments.appendChild(cap); - - var has_comment = false; - if (nmsData.comments.comments == undefined || nmsData.comments.comments[x] == undefined) { - console.log("blank"); - } else { - for (var c in nmsData.comments.comments[x]["comments"]) { - var comment = nmsData.comments.comments[x]["comments"][c]; - has_comment = true; - if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { - tr = comments.insertRow(-1); - var col; - if (comment["state"] == "active") - col = "danger"; - else if (comment["state"] == "inactive") - col = false; - else - col = "info"; - tr.className = col; - tr.id = "commentRow" + comment["id"]; - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.style.whiteSpace = "nowrap"; - td1.style.width = "8em"; - var txt = '
'; - txt += ''; - txt += ''; - txt += '
'; - td1.innerHTML = txt; - td2.textContent = comment['comment']; - } + var comments = document.createElement("table"); + comments.id = "info-switch-comments-table"; + comments.className = "table table-condensed"; + var cap = document.createElement("caption"); + cap.textContent = "Comments"; + comments.appendChild(cap); + + var has_comment = false; + if (nmsData.comments.comments == undefined || nmsData.comments.comments[x] == undefined) { + } else { + for (var c in nmsData.comments.comments[x]["comments"]) { + var comment = nmsData.comments.comments[x]["comments"][c]; + has_comment = true; + if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { + tr = comments.insertRow(-1); + var col; + if (comment["state"] == "active") + col = "danger"; + else if (comment["state"] == "inactive") + col = false; + else + col = "info"; + tr.className = col; + tr.id = "commentRow" + comment["id"]; + td1 = tr.insertCell(0); + td2 = tr.insertCell(1); + td1.style.whiteSpace = "nowrap"; + td1.style.width = "8em"; + var txt = '
'; + txt += ''; + txt += ''; + txt += '
'; + td1.innerHTML = txt; + td2.textContent = comment['comment']; } } - - swtop.appendChild(switchele); - if (has_comment) { - swtop.appendChild(comments); - $(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) }) - } - var commentbox = document.createElement("div"); - commentbox.id = "commentbox"; - commentbox.className = "panel-body"; - commentbox.style.width = "100%"; - commentbox.innerHTML = '
'; - swtop.appendChild(commentbox); - swtop.style.display = 'block'; + } + + swtop.appendChild(switchele); + if (has_comment) { + swtop.appendChild(comments); + $(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) }) + } + var commentbox = document.createElement("div"); + commentbox.id = "commentbox"; + commentbox.className = "panel-body"; + commentbox.style.width = "100%"; + commentbox.innerHTML = '
'; + swtop.appendChild(commentbox); + swtop.style.display = 'block'; } /* @@ -500,103 +442,19 @@ function setLegend(x,color,name) el.textContent = name; } -/* - * Run periodically to trigger map updates when a handler is active - */ -function updateMap() -{ - /* - * XXX: This a bit hacky: There are a bunch of links that use - * href="#foo" but probably shouldn't. This breaks refresh since we - * base this on the location hash. To circumvent that issue - * somewhat, we just update the location hash if it's not - * "correct". - */ - if (nms.updater) { - if (document.location.hash != ('#' + nms.updater.tag)) { - document.location.hash = nms.updater.tag; - } - } - if (!newerSwitches()) - return; - - if (nms.updater != undefined && nmsData.switches && nms.switches_then) { - nms.updater.updater(); - } - drawNow(); -} - /* * Change map handler (e.g., change from uplink map to ping map) */ function setUpdater(fo) { - nms.updater = undefined; nmsMap.reset(); nmsData.unregisterHandlerWildcard("mapHandler"); fo.init(); - nms.updater = fo; var foo = document.getElementById("updater_name"); foo.innerHTML = fo.name + " "; document.location.hash = fo.tag; } -/* - * Helper function for updating switch-data without overwriting existing - * data with non-existent data - */ -function updateSwitches(switchdata,target) { - target['time'] = switchdata['time'] //Assume we always get time - - if(switchdata.switches != undefined) { - for(var sw in switchdata.switches) { - if(switchdata.switches[sw]['management'] != undefined) - updateSwitchProperty(sw,'management',switchdata.switches[sw]['management'],target); - if(switchdata.switches[sw]['ports'] != undefined) - updateSwitchProperty(sw,'ports',switchdata.switches[sw]['ports'],target); - if(switchdata.switches[sw]['temp'] != undefined) - updateSwitchProperty(sw,'temp',switchdata.switches[sw]['temp'],target); - if(switchdata.switches[sw]['temp_time'] != undefined) - updateSwitchProperty(sw,'temp_time',switchdata.switches[sw]['temp_time'],target); - if(switchdata.switches[sw]['placement'] != undefined) - updateSwitchProperty(sw,'placement',switchdata.switches[sw]['placement'],target); - } - } -} -/* - * Helper function for updating a limited subset of switch properties, - * while the current state of the switch data is unknown. - */ -function updateSwitchProperty(sw,property,data,target) { - if(target.switches[sw] == undefined) - target.switches[sw] = {}; - - target.switches[sw][property] = data; -} - -/* - * Helper function for reseting switch state data (and keeping more permanent data) - */ -function resetSwitchStates() { - for (var sw in nmsData.switches.switches) { - for (var property in nmsData.switches.switches[sw]) { - if (['ports','temp','temp_time'].indexOf(property) > -1) { - nmsData.switches.switches[sw][property] = undefined; - } - } - } -} - -function applyBlur() -{ - var blur = document.getElementById("shadowBlur"); - var col = document.getElementById("shadowColor"); - nms.shadowBlur = blur.value; - nms.shadowColor = col.value; - resetBlur(); - saveSettings(); -} - function toggleLayer(layer) { var l = document.getElementById(layer); if (l.style.display == 'none') @@ -605,16 +463,6 @@ function toggleLayer(layer) { l.style.display = 'none'; } -function showBlurBox() -{ - var blur = document.getElementById("shadowBlur"); - var col = document.getElementById("shadowColor"); - blur.value = nms.shadowBlur; - col.value = nms.shadowColor; - document.getElementById("blurManic").style.display = ''; -} - - function commentInactive(id) { commentChange(id,"inactive"); @@ -654,7 +502,7 @@ function commentChange(id,state) dataType: "text", data:myData, success: function (data, textStatus, jqXHR) { - nms.repop_switch = true; + nmsData.updateSource("comments"); } }); } @@ -672,121 +520,12 @@ function addComment(sw,comment) dataType: "text", data:myData, success: function (data, textStatus, jqXHR) { - nms.repop_switch = true; + nmsData.updateSource("comments"); } }); } -/* - * Returns true if we have now and then-data for switches and that the - * "now" is actually newer. Useful for basic sanity and avoiding negative - * values when rewinding time. - */ -function newerSwitches() -{ - if (nmsData.switches.time == undefined || nms.switches_then.time == undefined) - return false; - var now_timestamp = stringToEpoch(nmsData.switches.time); - var then_timestamp = stringToEpoch(nms.switches_then.time); - if (now_timestamp == 0 || then_timestamp == 0 || then_timestamp >= now_timestamp) - return false; - return true; -} -/* - * Draw a linknet with index i. - * - * XXX: Might have to change the index here to match backend - */ -function drawLinknet(i) -{ - var c1 = nms.linknet_color[i] && nms.linknet_color[i].c1 ? nms.linknet_color[i].c1 : blue; - var c2 = nms.linknet_color[i] && nms.linknet_color[i].c2 ? nms.linknet_color[i].c2 : blue; - if (nmsData.switches.switches[nmsData.switches.linknets[i].sysname1] && nmsData.switches.switches[nmsData.switches.linknets[i].sysname2]) { - connectSwitches(nmsData.switches.linknets[i].sysname1,nmsData.switches.linknets[i].sysname2, c1, c2); - } -} - -/* - * Draw all linknets - */ -function drawLinknets() -{ - if (nmsData.switches && nmsData.switches.linknets) { - for (var i in nmsData.switches.linknets) { - drawLinknet(i); - } - } -} - -/* - * Change both colors of a linknet. - * - * XXX: Probably have to change this to better match the backend data - */ -function setLinknetColors(i,c1,c2) -{ - if (!nms.linknet_color[i] || - nms.linknet_color[i].c1 != c1 || - nms.linknet_color[i].c2 != c2) { - if (!nms.linknet_color[i]) - nms.linknet_color[i] = {}; - nms.linknet_color[i]['c1'] = c1; - nms.linknet_color[i]['c2'] = c2; - drawLinknet(i); - } -} - -function drawSwitchInfo() -{ - if (!nmsData.switches || !nmsData.switches.switches) - return; - for (var sw in nms.switchInfo) { - switchInfoText(sw, nms.switchInfo[sw]); - } - nms.drawn = true; -} - -/* - * Draw current time-window - * - * FIXME: The math here is just wild approximation and guesswork because - * I'm lazy. - */ -function drawNow() -{ - if (!nmsData.switches) - return; - // XXX: Get rid of microseconds that we get from the backend. - var now = /^[^.]*/.exec(nmsData.switches.time); - dr.top.ctx.font = Math.round(2 * nms.fontSize * canvas.scale) + "px " + nms.fontFace; - dr.top.ctx.clearRect(0,0,Math.floor(800 * canvas.scale),Math.floor(100 * canvas.scale)); - dr.top.ctx.fillStyle = "white"; - dr.top.ctx.strokeStyle = "black"; - dr.top.ctx.lineWidth = Math.floor(nms.fontLineFactor * canvas.scale); - if (dr.top.ctx.lineWidth == 0) { - dr.top.ctx.lineWidth = Math.round(nms.fontLineFactor * canvas.scale); - } - dr.top.ctx.strokeText(now, 0 + margin.text, 25 * canvas.scale); - dr.top.ctx.fillText(now, 0 + margin.text, 25 * canvas.scale); -} -/* - * Draw foreground/scene. - * - * FIXME: Review this! This was made before linknets and switches were - * split apart. - * - * This is used so linknets are drawn before switches. If a switch is all - * that has changed, we just need to re-draw that, but linknets require - * scene-redrawing. - */ -function drawScene() -{ - //dr.text.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace; - dr.textInfo.ctx.font = Math.floor(nms.fontSize * canvas.scale) + "px " + nms.fontFace; - drawLinknets(); - drawSwitchInfo(); -} /* * Returns true if the coordinates (x,y) is inside the box defined by @@ -843,9 +582,8 @@ function canvasClick(e) /* * Set night mode to whatever 'toggle' is. - * - * XXX: setScale() is a bit of a hack, but it really is the same stuff we - * need to do: Redraw "everything" (not really). + * + * Changes background and nav-bar, then leaves the rest to nmsMap. */ function setNightMode(toggle) { nms.nightMode = toggle; @@ -860,31 +598,17 @@ function setNightMode(toggle) { nmsMap.setNightMode(toggle); } -/* - * Draw the blur for a box. - */ -function drawBoxBlur(x,y,boxw,boxh) -{ - var myX = Math.floor(x * canvas.scale); - var myY = Math.floor(y * canvas.scale); - var myX2 = Math.floor((boxw) * canvas.scale); - var myY2 = Math.floor((boxh) * canvas.scale); - dr.blur.ctx.fillRect(myX,myY, myX2, myY2); -} - /* * Boot up "fully fledged" NMS. * - * If you only want parts of the functionality, then re-implement this - * (e.g., just add and start the handlers you want, don't worry about - * drawing, etc). + * This can be re-written to provide different looks and feels but using + * the same framework. Or rather: that's the goal. We're not quite there + * yet. */ function initNMS() { - nms.timers.playback = new nmsTimer(nms.playback.tick, 1000, "Playback ticker", "Handler used to advance time"); // Public - nmsData.registerSource("ping", "/api/public/ping"); nmsData.registerSource("switches","/api/public/switches"); nmsData.registerSource("switchstate","/api/public/switch-state"); @@ -1033,39 +757,32 @@ function restoreSettings() nms[v] = retrieve[v]; } setMenu(); - setNightMode(nms.nightMode); -} - -function forgetSettings() -{ - document.cookie = 'nms=' + btoa('{}'); } /* * Time travel gui */ -var datepicker; function startNowPicker(now) { - $.datetimepicker.setLocale('no'); - $('#nowPicker').datetimepicker('destroy'); - if(!now && nms.now) - now = nms.now; - datepicker = $('#nowPicker').datetimepicker({ - value: now, - mask:false, - inline:true, - todayButton: false, - validateOnBlur:false, - dayOfWeekStart:1, - maxDate:'+1970/01/01', - onSelectDate: function(ct,$i){ - document.getElementById('nowPicker').dataset.iso = localEpochToString(ct.valueOf()/1000); - }, - onSelectTime: function(ct,$i){ - document.getElementById('nowPicker').dataset.iso = localEpochToString(ct.valueOf()/1000); - }, - onGenerate: function(ct,$i){ - document.getElementById('nowPicker').dataset.iso = localEpochToString(ct.valueOf()/1000); - } - }); + $.datetimepicker.setLocale('no'); + $('#nowPicker').datetimepicker('destroy'); + if(!now && nms.now) + now = nms.now; + var datepicker = $('#nowPicker').datetimepicker({ + value: now, + mask:false, + inline:true, + todayButton: false, + validateOnBlur:false, + dayOfWeekStart:1, + maxDate:'+1970/01/01', + onSelectDate: function(ct,$i){ + document.getElementById('nowPicker').dataset.iso = localEpochToString(ct.valueOf()/1000); + }, + onSelectTime: function(ct,$i){ + document.getElementById('nowPicker').dataset.iso = localEpochToString(ct.valueOf()/1000); + }, + onGenerate: function(ct,$i){ + document.getElementById('nowPicker').dataset.iso = localEpochToString(ct.valueOf()/1000); + } + }); } -- cgit v1.2.3 From d1bb2ca6fced92b2d592e195126a3b28b73907b9 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 01:13:53 +0000 Subject: NMS: Fix comment changing --- web/nms.gathering.org/js/nms.js | 1 + 1 file changed, 1 insertion(+) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index a959db0..9bf4196 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -491,6 +491,7 @@ function commentChange(id,state) comment:id, state:state }; + myData = JSON.stringify(myData); var foo = document.getElementById("commentRow" + id); if (foo) { foo.className = ''; -- cgit v1.2.3 From f8482d205ea5eaaa0aac33ab3cd450b41126ef39 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 12:08:43 +0000 Subject: NMSjs: Split the info box out and clean further + tweak --- web/nms.gathering.org/js/nms.js | 151 +--------------------------------------- 1 file changed, 3 insertions(+), 148 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index 9bf4196..52bea9a 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -1,7 +1,6 @@ "use strict"; var nms = { stats:{}, // Various internal stats - switch_showing:"", // Which switch we are displaying (if any). get nightMode() { return this._nightMode; }, set nightMode(val) { if (val != this._nightMode) { this._nightMode = val; setNightMode(val); } }, /* @@ -299,134 +298,6 @@ function getNowEpoch() { return parseInt(Date.now() / 1000); } - -function hideSwitch() -{ - _hideSwitch(); - nmsData.unregisterHandler("comments","switchshower"); -} - -/* - * Hide switch info-box - */ -function _hideSwitch() -{ - var swtop = document.getElementById("info-switch-parent"); - var switchele = document.getElementById("info-switch-table"); - var comments = document.getElementById("info-switch-comments-table"); - var commentbox; - if (switchele != undefined) - switchele.parentNode.removeChild(switchele); - if (comments != undefined) - comments.parentNode.removeChild(comments); - commentbox = document.getElementById("commentbox"); - if (commentbox != undefined) - commentbox.parentNode.removeChild(commentbox); - swtop.style.display = 'none'; - nms.switch_showing = ""; -} - -function showSwitch(x) { - nmsData.addHandler("comments","switchshower",_showSwitch,x); - _showSwitch(x); -} - -/* - * Display info on switch "x" in the info-box - * - * FIXME: THIS IS A MONSTROSITY. - */ -function _showSwitch(x) -{ - var sw = nmsData.switches["switches"][x]; - var swm = nmsData.smanagement.switches[x]; - var swtop = document.getElementById("info-switch-parent"); - var swpanel = document.getElementById("info-switch-panel-body"); - var swtitle = document.getElementById("info-switch-title"); - var tr; - var td1; - var td2; - - _hideSwitch(); - nms.switch_showing = x; - var switchele = document.createElement("table"); - switchele.id = "info-switch-table"; - switchele.className = "table"; - switchele.classList.add("table"); - switchele.classList.add("table-condensed"); - - swtitle.innerHTML = x + ''; - - for (var v in sw) { - if (v == "placement") { - continue; - } - tr = switchele.insertRow(-1); - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.innerHTML = v; - td2.innerHTML = sw[v]; - } - for (var v in swm) { - tr = switchele.insertRow(-1); - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.innerHTML = v; - td2.innerHTML = swm[v]; - } - - var comments = document.createElement("table"); - comments.id = "info-switch-comments-table"; - comments.className = "table table-condensed"; - var cap = document.createElement("caption"); - cap.textContent = "Comments"; - comments.appendChild(cap); - - var has_comment = false; - if (nmsData.comments.comments == undefined || nmsData.comments.comments[x] == undefined) { - } else { - for (var c in nmsData.comments.comments[x]["comments"]) { - var comment = nmsData.comments.comments[x]["comments"][c]; - has_comment = true; - if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") { - tr = comments.insertRow(-1); - var col; - if (comment["state"] == "active") - col = "danger"; - else if (comment["state"] == "inactive") - col = false; - else - col = "info"; - tr.className = col; - tr.id = "commentRow" + comment["id"]; - td1 = tr.insertCell(0); - td2 = tr.insertCell(1); - td1.style.whiteSpace = "nowrap"; - td1.style.width = "8em"; - var txt = '
'; - txt += ''; - txt += ''; - txt += '
'; - td1.innerHTML = txt; - td2.textContent = comment['comment']; - } - } - } - - swtop.appendChild(switchele); - if (has_comment) { - swtop.appendChild(comments); - $(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) }) - } - var commentbox = document.createElement("div"); - commentbox.id = "commentbox"; - commentbox.className = "panel-body"; - commentbox.style.width = "100%"; - commentbox.innerHTML = '
'; - swtop.appendChild(commentbox); - swtop.style.display = 'block'; -} - /* * There are 4 legend-bars. This is a helper-function to set the color and * description/name for each one. Used from handler init-functions. @@ -492,18 +363,13 @@ function commentChange(id,state) state:state }; myData = JSON.stringify(myData); - var foo = document.getElementById("commentRow" + id); - if (foo) { - foo.className = ''; - foo.style.backgroundColor = "silver"; - } $.ajax({ type: "POST", url: "/api/private/comment-change", dataType: "text", data:myData, success: function (data, textStatus, jqXHR) { - nmsData.updateSource("comments"); + nmsData.invalidate("comments"); } }); } @@ -521,7 +387,7 @@ function addComment(sw,comment) dataType: "text", data:myData, success: function (data, textStatus, jqXHR) { - nmsData.updateSource("comments"); + nmsData.invalidate("comments"); } }); } @@ -557,17 +423,6 @@ function findSwitch(x,y) { return undefined; } -/* - * Called when a switch is clicked - */ -function switchClick(sw) -{ - if (nms.switch_showing == sw) - hideSwitch(); - else - showSwitch(sw); -} - /* * onclick handler for the canvas. * @@ -577,7 +432,7 @@ function canvasClick(e) { var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop); if (sw != undefined) { - switchClick(sw); + nmsInfoBox.click(sw); } } -- cgit v1.2.3 From e7eb548d99a324048d6fd08cb5a0243e47753451 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 15:54:14 +0000 Subject: NMSjs: Enable interactive movement of switches! Fixes #24 God that felt good. It's not very pretty, but it does seem very functional. --- web/nms.gathering.org/js/nms.js | 13 ------------- 1 file changed, 13 deletions(-) (limited to 'web/nms.gathering.org/js/nms.js') diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js index 52bea9a..ec7ed06 100644 --- a/web/nms.gathering.org/js/nms.js +++ b/web/nms.gathering.org/js/nms.js @@ -423,19 +423,6 @@ function findSwitch(x,y) { return undefined; } -/* - * onclick handler for the canvas. - * - * Currently just shows info for a switch. - */ -function canvasClick(e) -{ - var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop); - if (sw != undefined) { - nmsInfoBox.click(sw); - } -} - /* * Set night mode to whatever 'toggle' is. * -- cgit v1.2.3