From 867d787c4ab152719dfe13b1f13ab3e303a4780e Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sat, 25 Apr 2015 19:10:33 +0200 Subject: NMS: Monster-commit after local .git corruption This constitutes ... I don't know.... 20 commits or something like that. Unfortunately my local .git directory got corrupted while the check out was OK (after the VM froze). Instead of trying to recreate the local history, I'm just hurrying the hell up and getting this work OFF my local laptop and VM so I don't lose anything for good. --- web/nms.gathering.org/nms2/js/nms-color-util.js | 36 +- web/nms.gathering.org/nms2/js/nms-map-handlers.js | 127 +++--- web/nms.gathering.org/nms2/js/nms.js | 499 ++++++++++++++++++---- 3 files changed, 505 insertions(+), 157 deletions(-) (limited to 'web/nms.gathering.org/nms2/js') diff --git a/web/nms.gathering.org/nms2/js/nms-color-util.js b/web/nms.gathering.org/nms2/js/nms-color-util.js index 28f7e1b..8ac4ab8 100644 --- a/web/nms.gathering.org/nms2/js/nms-color-util.js +++ b/web/nms.gathering.org/nms2/js/nms-color-util.js @@ -1,4 +1,20 @@ +/* + * Some stolen colors that look OK. + * + * PS: Stolen from boostrap, because we use bootstrap and these look good + * and match. + */ +var lightblue = "#d9edf7"; +var lightgreen = "#dff0d8"; +var lightred = "#f2dede"; +var lightorange = "#fcf8e3"; +var blue = "#337ab7"; +var green = "#5cb85c"; +var teal = "#5bc0de"; // Or whatever the hell that is +var orange = "#f0ad4e"; +var red = "#d9534f"; + function gradient_from_latency(latency_ms, latency_secondary_ms) { if (latency_secondary_ms === undefined) { @@ -12,21 +28,21 @@ function gradient_from_latency(latency_ms, latency_secondary_ms) function rgb_from_latency(latency_ms) { if (latency_ms === null || latency_ms === undefined) { - return '#0000ff'; + return blue; } - var l = latency_ms / 40.0; + var l = latency_ms / 50.0; if (l >= 2.0) { return 'rgb(255, 0, 0)'; } else if (l >= 1.0) { l = 2.0 - l; l = Math.pow(l, 1.0/2.2); - l = Math.floor(l * 255.0); + l = Math.floor(l * 205.0); return 'rgb(255, ' + l + ', 0)'; } else { l = Math.pow(l, 1.0/2.2); l = Math.floor(l * 255.0); - return 'rgb(' + l + ', 255, 0)'; + return 'rgb(' + l + ', 205, 0)'; } } @@ -42,13 +58,21 @@ function rgb_from_max(x) return 'rgb(' + Math.floor(colorred) + ", 0, " + Math.floor(colorblue) + ')'; } +function rgb_from_max2(x) +{ + x = x/100; + var colorred = 255 * x; + var colorgreen = 250 - colorred; + + return 'rgb(' + Math.floor(colorred) + "," + Math.floor(colorgreen) + ', 0 )'; +} /* * Return a random-ish color (for testing) */ function getRandomColor() { - var i = Math.round(Math.random() * 5); - var colors = [ "white", "red", "pink", "yellow", "orange", "green" ]; + var colors = [ "white", red, teal, orange, green, blue ]; + var i = Math.round(Math.random() * (colors.length-1)); return colors[i]; } diff --git a/web/nms.gathering.org/nms2/js/nms-map-handlers.js b/web/nms.gathering.org/nms2/js/nms-map-handlers.js index 762788a..f85b06f 100644 --- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js +++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js @@ -53,6 +53,7 @@ var handler_comment = { init:commentInit, name:"Fresh comment spotter" }; + /* * Update function for uplink map * Run periodically when uplink map is active. @@ -78,29 +79,42 @@ function uplinkUpdater() } } if (uplinks == 0) { - setSwitchColor(sw,"blue"); + setSwitchColor(sw,"white"); } else if (uplinks == 1) { - setSwitchColor(sw,"red"); + setSwitchColor(sw,red); } else if (uplinks == 2) { - setSwitchColor(sw, "yellow"); + setSwitchColor(sw, orange); } else if (uplinks == 3) { - setSwitchColor(sw, "green"); + setSwitchColor(sw, green); } else if (uplinks > 3) { - setSwitchColor(sw, "white"); + setSwitchColor(sw, blue); } } } +/* + * Init-function for uplink map + */ +function uplinkInit() +{ + setLegend(1,"white","0 uplinks"); + setLegend(2,red,"1 uplink"); + setLegend(3,orange,"2 uplinks"); + setLegend(4,green,"3 uplinks"); + setLegend(5,blue,"4 uplinks"); +} + /* * Init-function for uplink map */ function trafficInit() { - setLegend(1,"blue","0 (N/A)"); - setLegend(5,"red", "1000Mb/s or more"); - setLegend(4,"yellow","100Mb/s to 800Mb/s"); - setLegend(3,"green", "5Mb/s to 100Mb/s"); - setLegend(2,"white","0 to 5Mb/s"); + var m = 1024 * 1024 / 8; + setLegend(1,colorFromSpeed(0),"0 (N/A)"); + setLegend(5,colorFromSpeed(2000 * m) , "2000Mb/s"); + setLegend(4,colorFromSpeed(1200 * m),"1200Mb/s"); + setLegend(3,colorFromSpeed(500 * m),"500Mb/s"); + setLegend(2,colorFromSpeed(10 * m),"10Mb/s"); } function trafficUpdater() @@ -115,37 +129,27 @@ function trafficUpdater() /ge-0\/0\/46$/.exec(port) || /ge-0\/0\/47$/.exec(port)) { + if (!nms.switches_then["switches"][sw] || + !nms.switches_then["switches"][sw]["ports"] || + !nms.switches_then["switches"][sw]["ports"][port]) + continue; var t = nms.switches_then["switches"][sw]["ports"][port]; var n = nms.switches_now["switches"][sw]["ports"][port]; speed += (parseInt(t["ifhcoutoctets"]) -parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"])); speed += (parseInt(t["ifhcinoctets"]) -parseInt(n["ifhcinoctets"])) / (parseInt(t["time"] - n["time"])); } } - var m = 1024 * 1024 / 8; - if (speed == 0) { - setSwitchColor(sw,"blue"); - } else if (speed > (1000 * m)) { - setSwitchColor(sw,"red"); - } else if (speed > (800 * m)) { - setSwitchColor(sw, "yellow"); - } else if (speed > (5 * m)) { - setSwitchColor(sw, "green"); - } else { - setSwitchColor(sw, "white"); - } + setSwitchColor(sw,colorFromSpeed(speed)); } } -/* - * Init-function for uplink map - */ -function uplinkInit() +function colorFromSpeed(speed) { - setLegend(1,"blue","0 uplinks"); - setLegend(2,"red","1 uplink"); - setLegend(3,"yellow","2 uplinks"); - setLegend(4,"green","3 uplinks"); - setLegend(5,"white","4 uplinks"); + var m = 1024 * 1024 / 8; + if (speed == 0) + return blue; + speed = speed < 0 ? 0 : speed; + return rgb_from_max2( 100 * (speed / (2 * (1000 * m)))); } @@ -158,7 +162,7 @@ function temp_color(t) { if (t == undefined) { console.log("Temp_color, but temp is undefined"); - return "blue"; + return blue; } t = parseInt(t) - 20; t = Math.floor((t / 15) * 100); @@ -189,13 +193,13 @@ function tempInit() function pingUpdater() { for (var sw in nms.switches_now["switches"]) { - var c = "blue"; + var c = blue; if (nms.ping_data['switches'] && nms.ping_data['switches'][sw]) c = gradient_from_latency(nms.ping_data["switches"][sw]["latency"]); setSwitchColor(sw, c); } for (var ln in nms.switches_now["linknets"]) { - var c1 = "blue"; + var c1 = blue; var c2 = c1; if (nms.ping_data['linknets'] && nms.ping_data['linknets'][ln]) { c1 = gradient_from_latency(nms.ping_data["linknets"][ln][0]); @@ -210,53 +214,54 @@ function pingInit() setLegend(1,gradient_from_latency(1),"1ms"); setLegend(2,gradient_from_latency(30),"30ms"); setLegend(3,gradient_from_latency(60),"60ms"); - setLegend(4,gradient_from_latency(80),"80ms"); - setLegend(5,"#0000ff" ,"No response"); + setLegend(4,gradient_from_latency(100),"100ms"); + setLegend(5,blue ,"No response"); } function commentUpdater() { var realnow = Date.now(); - if (nms.now) { - realnow = Date.parse(nms.now); - } var now = Math.floor(realnow / 1000); for (var sw in nms.switches_now["switches"]) { - var c = "green"; + var c = "white"; var s = nms.switches_now["switches"][sw]; if (s["comments"] && s["comments"].length > 0) { var then = 0; + var active = 0; + var persist = 0; c = "yellow"; for (var v in s["comments"]) { var then_test = parseInt(s["comments"][v]["time"]); - if (then_test > then && then_test <= now) + if (then_test > then && s["comments"][v]["state"] != "inactive") then = then_test; + if (s["comments"][v]["state"] == "active") { + active++; + } + if (s["comments"][v]["state"] == "persist") + persist++; } if (then > (now - (60*15))) { - c = "red"; - } else if (then > (now - (120*60))) { - c = "orange"; - } else if (then < (now - (60*60*24))) { - c = "white"; + c = red; + } else if (active > 0) { + c = orange; + } else if (persist > 0) { + c = blue; + } else { + c = green; } - /* - * Special case during time travel: We have - * comments, but are not showing them yet. - */ - if (then == 0) - c = "green"; } setSwitchColor(sw, c); } } + function commentInit() { - setLegend(1,"green","0 comments"); - setLegend(2,"white","1d+ old"); - setLegend(3,"red", "0 - 15m old"); - setLegend(4,"orange","15m - 120m old"); - setLegend(5,"yellow" ,"2h - 24h old"); + setLegend(1,"white","0 comments"); + setLegend(2,blue,"Persistent comments"); + setLegend(3,red, "New comments"); + setLegend(4,orange,"Active comments"); + setLegend(5,green ,"Old/inactive only"); } /* * Testing-function to randomize colors of linknets and switches @@ -274,10 +279,10 @@ function randomizeColors() function discoInit() { setNightMode(true); - setLegend(1,"blue","Y"); - setLegend(2,"red", "M"); - setLegend(3,"yellow","C"); - setLegend(4,"green", "A"); + setLegend(1,blue,"Y"); + setLegend(2,red, "M"); + setLegend(3,orange,"C"); + setLegend(4,green, "A"); setLegend(5,"white","!"); } diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js index 41b39d6..cf2690e 100644 --- a/web/nms.gathering.org/nms2/js/nms.js +++ b/web/nms.gathering.org/nms2/js/nms.js @@ -1,11 +1,14 @@ var nms = { updater:undefined, // Active updater + update_time:0, // Client side timestamp for last update switches_now:undefined, // Most recent data switches_then:undefined, // 2 minutes old 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). + 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 @@ -13,6 +16,8 @@ var nms = { * 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? @@ -44,14 +49,40 @@ var nms = { timers: { replay:false, ports:false, - ping:false, - map:false, - speed:false + ping:false }, - deleteComment:0 + 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' + ], + layerVisibility:{}, + keyBindings:{ + '?':toggleMenu, + 'n':toggleNightMode, + '1':setMapModeFromN, + '2':setMapModeFromN, + '3':setMapModeFromN, + '4':setMapModeFromN, + '5':setMapModeFromN, + '6':setMapModeFromN, + 'h':moveTimeFromKey, + 'j':moveTimeFromKey, + 'k':moveTimeFromKey, + 'l':moveTimeFromKey, + 'p':moveTimeFromKey, + 'r':moveTimeFromKey, + 'default':keyDebug + } }; - /* * Returns a handler object. * @@ -85,6 +116,7 @@ function nmsTimer(handler, interval, name, description) { }; } + /* * Drawing primitives. * @@ -173,6 +205,9 @@ function initDrawing() { 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'); } /* @@ -196,6 +231,7 @@ function byteCount(bytes) { function toggleNightMode() { setNightMode(!nms.nightMode); + saveSettings(); } /* @@ -226,7 +262,9 @@ function checkNow(now) */ function stringToEpoch(t) { - var ret = new Date(Date.parse(t)); + var foo = t.toString(); + foo = foo.replace('T',' '); + var ret = new Date(Date.parse(foo)); return parseInt(parseInt(ret.valueOf()) / 1000); } @@ -266,6 +304,7 @@ function epochToString(t) */ function timeReplay() { + replayTime = stringToEpoch(nms.now); if (replayTime >= tgEnd) { nms.timers.replay.stop(); return; @@ -289,7 +328,7 @@ function timeReplay() function startReplay() { nms.timers.replay.stop(); resetColors(); - replayTime = tgStart; + nms.now = epochToString(tgStart); timeReplay(); nms.timers.replay.start();; } @@ -314,6 +353,21 @@ function changeNow() { } } +function stepTime(n) +{ + var now; + nms.timers.replay.stop(); + if (nms.now && nms.now != 0) + now = parseInt(stringToEpoch(nms.now)); + else if (nms.switches_now) + now = parseInt(stringToEpoch(/^[^.]*/.exec(nms.switches_now.time))); + else + return; + newtime = parseInt(now) + parseInt(n); + nms.now = epochToString(parseInt(newtime)); + updatePorts(); +} + /* * Hide switch info-box */ @@ -335,7 +389,7 @@ function hideSwitch() /* * Display info on switch "x" in the info-box */ -function switchInfo(x) +function showSwitch(x) { var sw = nms.switches_now["switches"][x]; var swtop = document.getElementById("info-switch-parent"); @@ -345,13 +399,8 @@ function switchInfo(x) var td1; var td2; - if (nms.switch_showing == x) { - hideSwitch(); - return; - } else { - hideSwitch(); - nms.switch_showing = x; - } + hideSwitch(); + nms.switch_showing = x; document.getElementById("aboutBox").style.display = "none"; var switchele = document.createElement("table"); switchele.id = "info-switch-table"; @@ -490,16 +539,19 @@ function switchInfo(x) if (comment["state"] == "active") col = "danger"; else if (comment["state"] == "inactive") - col = "active"; + col = false; else col = "info"; tr.className = col; + tr.id = "commentRow" + comment["id"]; td1 = tr.insertCell(0); td2 = tr.insertCell(1); - var txt = '
'; - txt += ''; - txt += ''; - txt += '
'; + td1.style.whiteSpace = "nowrap"; + td1.style.width = "8em"; + var txt = '
'; + txt += ''; + txt += ''; + txt += '
'; td1.innerHTML = txt; td2.textContent = comment['comment']; } @@ -514,7 +566,7 @@ function switchInfo(x) commentbox.id = "commentbox"; commentbox.className = "panel-body"; commentbox.style.width = "100%"; - commentbox.innerHTML = '
'; + commentbox.innerHTML = '
'; swtop.appendChild(commentbox); swtop.style.display = 'block'; } @@ -530,14 +582,28 @@ function setLegend(x,color,name) { var el = document.getElementById("legend-" + x); el.style.background = color; - el.innerHTML = name; + el.title = 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 */ function updateMap() { + if (!newerSwitches()) + return; + if (!(nms.update_time < (Date.now() - 100) || nms.update_time == 0)) + return; + nms.update_time = Date.now(); + if (nms.updater != undefined && nms.switches_now && nms.switches_then) { nms.updater(); } @@ -579,6 +645,31 @@ function initialUpdate() } } +function resetBlur() +{ + nms.nightBlur = {}; + dr.blur.ctx.clearRect(0,0,canvas.width,canvas.height); + drawSwitches(); +} + +function applyBlur() +{ + var blur = document.getElementById("shadowBlur"); + var col = document.getElementById("shadowColor"); + nms.shadowBlur = blur.value; + nms.shadowColor = col.value; + resetBlur(); + saveSettings(); +} + +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 = ''; +} /* * Update nms.ping_data */ @@ -587,6 +678,7 @@ function updatePing() var now = nms.now ? ("?now=" + nms.now) : ""; if (nms.outstandingAjaxRequests > 5) { nms.ajaxOverflow++; + updateAjaxInfo(); return; } nms.outstandingAjaxRequests++; @@ -597,50 +689,73 @@ function updatePing() success: function (data, textStatus, jqXHR) { nms.ping_data = JSON.parse(data); initialUpdate(); + updateMap(); }, complete: function(jqXHR, textStatus) { nms.outstandingAjaxRequests--; + updateAjaxInfo(); } }); } -function commentInactive(id) { +function commentInactive(id) +{ commentChange(id,"inactive"); } -function commentPersist(id) { +function commentPersist(id) +{ commentChange(id,"persist"); } -function commentDelete(id) { - if (id != nms.deleteComment) { - nms.deleteComment = id; - alert("Click the button again to delete it"); - return; + +function commentDelete(id) +{ + var r = confirm("Really delete comment? (Delted comments are still stored in the database, but never displayed)"); + if (r == true) { + commentChange(id,"delete"); } - commentChange(id,"delete"); } -function commentChange(id,state) { + +/* + * FIXME: Neither of these two handle failures in any way, shape or form. + * Nor do they really give user-feedback. They work, but only by magic. + */ +function commentChange(id,state) +{ var myData = { comment:id, state:state }; + var foo = document.getElementById("commentRow" + id); + if (foo) { + foo.className = ''; + foo.style.backgroundColor = "silver"; + } $.ajax({ type: "POST", url: "/comment-change.pl", dataType: "text", - data:myData + data:myData, + success: function (data, textStatus, jqXHR) { + nms.repop_switch = true; + } }); } -function addComment(sw,comment) { + +function addComment(sw,comment) +{ var myData = { switch:sw, - comment:comment}; - console.log(myData); + comment:comment + }; $.ajax({ type: "POST", url: "/switch-comment.pl", dataType: "text", - data:myData + data:myData, + success: function (data, textStatus, jqXHR) { + nms.repop_switch = true; + } }); } /* @@ -651,6 +766,7 @@ function updatePorts() var now = ""; if (nms.outstandingAjaxRequests > 5) { nms.ajaxOverflow++; + updateAjaxInfo(); return; } nms.outstandingAjaxRequests++; @@ -665,15 +781,26 @@ function updatePorts() nms.switches_now = switchdata; parseIntPlacements(); 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(); } }); now=""; if (nms.now != false) now = "&now=" + nms.now; nms.outstandingAjaxRequests++; + updateAjaxInfo(); $.ajax({ type: "GET", url: "/port-state.pl?time=5m" + now, @@ -682,13 +809,31 @@ function updatePorts() var switchdata = JSON.parse(data); nms.switches_then = switchdata; 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 + * values when rewinding time. + */ +function newerSwitches() +{ + if (!nms.switches_now || !nms.switches_then) + return false; + var now_timestamp = stringToEpoch(nms.switches_now.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'. * @@ -703,6 +848,7 @@ function updatePorts() * FIXME: Err, yeah, add this to the tail-end of updatePorts instead :D * */ + function updateSpeed() { var speed_in = parseInt(0); @@ -710,6 +856,8 @@ function updateSpeed() 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]) { @@ -763,8 +911,8 @@ function updateSpeed() */ 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"; + 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); } @@ -810,16 +958,18 @@ function drawSwitch(sw) var box = nms.switches_now['switches'][sw]['placement']; var color = nms.switch_color[sw]; if (color == undefined) { - color = "blue"; + 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.switch.ctx.shadowBlur = 10; - dr.switch.ctx.shadowColor = "#00EE00"; + 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; - } else { - dr.switch.ctx.shadowBlur = 0; - dr.switch.ctx.shadowColor = "#000000"; } drawBox(box['x'],box['y'],box['width'],box['height']); dr.switch.ctx.shadowBlur = 0; @@ -871,18 +1021,20 @@ function drawSwitches() */ function drawNow() { + if (!nms.switches_now) + return; // XXX: Get rid of microseconds that we get from the backend. var now = /^[^.]*/.exec(nms.switches_now.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(4 * canvas.scale); + dr.top.ctx.lineWidth = Math.floor(2 * canvas.scale); if (dr.top.ctx.lineWidth == 0) { - dr.top.ctx.lineWidth = Math.round(4 * canvas.scale); + dr.top.ctx.lineWidth = Math.round(2 * canvas.scale); } - dr.top.ctx.strokeText(now, 0 + margin.text, 30 * canvas.scale); - dr.top.ctx.fillText(now, 0 + margin.text, 30 * 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. @@ -918,6 +1070,7 @@ function setScale() nms.textDrawn = {}; drawBG(); drawScene(); + drawNow(); document.getElementById("scaler").value = canvas.scale; document.getElementById("scaler-text").innerHTML = (parseFloat(canvas.scale)).toPrecision(3); @@ -978,7 +1131,10 @@ function scaleChange() */ function switchClick(sw) { - switchInfo(sw); + if (nms.switch_showing == sw) + hideSwitch(); + else + showSwitch(sw); } /* @@ -993,11 +1149,11 @@ function resetColors() return; if (nms.switches_now.linknets) { for (var i in nms.switches_now.linknets) { - setLinknetColors(i, "blue","blue"); + setLinknetColors(i, blue,blue); } } for (var sw in nms.switches_now.switches) { - setSwitchColor(sw, "blue"); + setSwitchColor(sw, blue); } } @@ -1058,6 +1214,14 @@ function setNightMode(toggle) { nms.nightMode = toggle; var body = document.getElementById("body"); 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(); } /* @@ -1078,6 +1242,17 @@ function drawBox(x,y,boxw,boxh) dr.switch.ctx.strokeRect(myX,myY, myX2, myY2); } +/* + * 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); +} /* * Draw text on a box - sideways! * @@ -1149,9 +1324,9 @@ function connectSwitches(insw1, insw2,color1, color2) { var sw1 = nms.switches_now.switches[insw1].placement; var sw2 = nms.switches_now.switches[insw2].placement; if (color1 == undefined) - color1 = "blue"; + color1 = blue; if (color2 == undefined) - color2 = "blue"; + 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); @@ -1189,14 +1364,10 @@ function initNMS() { nms.timers.ping = new nmsTimer(updatePing, 1000, "Ping updater", "AJAX request to update ping data"); nms.timers.ping.start(); - nms.timers.map = new nmsTimer(updateMap, 1000, "Map handler", "Updates the map using the chosen map handler (ping, uplink, traffic, etc)"); - nms.timers.map.start(); - - nms.timers.speed = new nmsTimer(updateSpeed, 1000, "Speed updater", "Recompute total speed (no backend requests)"); - nms.timers.speed.start(); - nms.timers.replay = new nmsTimer(timeReplay, 1000, "Time machine", "Handler used to change time"); detectHandler(); + setupKeyhandler(); + restoreSettings(); } function detectHandler() { @@ -1216,9 +1387,6 @@ function detectHandler() { } else { setUpdater(handler_ping); } - if (/nightMode/.exec(url)) { - toggleNightMode(); - } } /* @@ -1227,7 +1395,7 @@ function detectHandler() { * Could probably be cleaned up. */ function showTimerDebug() { - var tableTop = document.getElementById('timerTableTop'); + var tableTop = document.getElementById('debugTimers'); var table = document.getElementById('timerTable'); var tr, td1, td2; if (table) @@ -1238,38 +1406,29 @@ function showTimerDebug() { table.className = "table"; table.classList.add("table"); table.classList.add("table-default"); - table.border = "1"; - tr = document.createElement("tr"); - td = document.createElement("th"); + var header = table.createTHead(); + tr = header.insertRow(0); + td = tr.insertCell(0); td.innerHTML = "Handler"; - tr.appendChild(td); - td = document.createElement("th"); + td = tr.insertCell(1); td.innerHTML = "Interval (ms)"; - tr.appendChild(td); - td = document.createElement("th"); + td = tr.insertCell(2); td.innerHTML = "Name"; - tr.appendChild(td); - td = document.createElement("th"); + td = tr.insertCell(3); td.innerHTML = "Description"; - tr.appendChild(td); - table.appendChild(tr); for (var v in nms.timers) { - console.log(v); - tr = document.createElement("tr"); - td = document.createElement("td"); - td.innerHTML = nms.timers[v].handle; - tr.appendChild(td); - td = document.createElement("td"); - td.innerHTML = ""; - td.innerHTML += ""; - tr.appendChild(td); - td = document.createElement("td"); - td.innerHTML = nms.timers[v].name; - tr.appendChild(td); - td = document.createElement("td"); - td.innerHTML = nms.timers[v].description; - tr.appendChild(td); - table.appendChild(tr); + 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'; @@ -1278,9 +1437,169 @@ function showTimerDebug() { 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() +{ + nms.menuShowing = ! nms.menuShowing; + setMenu(); + saveSettings(); +} + +function setMapModeFromN(e,key) +{ + switch(key) { + case '1': + setUpdater(handler_ping); + break; + case '2': + setUpdater(handler_uplinks); + break; + case '3': + setUpdater(handler_temp); + break; + case '4': + setUpdater(handler_traffic); + break; + case '5': + setUpdater(handler_comment); + break; + case '6': + setUpdater(handler_disco); + break; + } + return true; +} + +function moveTimeFromKey(e,key) +{ + switch(key) { + case 'h': + stepTime(-3600); + break; + case 'j': + stepTime(-300); + break; + case 'k': + stepTime(300); + break; + case 'l': + stepTime(3600); + break; + case 'p': + if(nms.timers.replay.handle) + nms.timers.replay.stop(); + else { + timeReplay(); + nms.timers.replay.start(); + } + break; + case 'r': + nms.timers.replay.stop(); + nms.now = false; + updatePorts(); + break; + } + return true; +} + +var debugEvent; +function keyDebug(e) +{ + console.log(e); + debugEvent = e; +} + +function keyPressed(e) +{ + if (e.target.nodeName == "INPUT") { + return false; + } + var key = String.fromCharCode(e.keyCode); + if (nms.keyBindings[key]) + return nms.keyBindings[key](e,key); + if (nms.keyBindings['default']) + return nms.keyBindings['default'](e,key); + return false; +} + +function setupKeyhandler() +{ + var b = document.getElementsByTagName("body")[0]; + b.onkeypress = function(e){keyPressed(e);}; +} + + +function getCookie(cname) { + var name = cname + "="; + var ca = document.cookie.split(';'); + for(var i=0; i Date: Sat, 25 Apr 2015 19:51:22 +0200 Subject: NMS: Disable debug handler for key bindings --- web/nms.gathering.org/nms2/js/nms.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/nms.gathering.org/nms2/js') diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js index cf2690e..9bd5bcf 100644 --- a/web/nms.gathering.org/nms2/js/nms.js +++ b/web/nms.gathering.org/nms2/js/nms.js @@ -79,7 +79,7 @@ var nms = { 'l':moveTimeFromKey, 'p':moveTimeFromKey, 'r':moveTimeFromKey, - 'default':keyDebug + 'not-default':keyDebug } }; -- cgit v1.2.3 From a4888a9176ed48ddaf2e5b81ddd77c6bd8e70872 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Mon, 27 Apr 2015 18:55:22 +0200 Subject: NMS: Add real gradient support for all maps This so beats custom-gradient-functions for latency, custom for temperature and custom for speed... --- web/nms.gathering.org/nms2/js/nms-color-util.js | 103 ++++++++++++---------- web/nms.gathering.org/nms2/js/nms-map-handlers.js | 34 ++++--- web/nms.gathering.org/nms2/js/nms.js | 35 ++++++-- 3 files changed, 108 insertions(+), 64 deletions(-) (limited to 'web/nms.gathering.org/nms2/js') diff --git a/web/nms.gathering.org/nms2/js/nms-color-util.js b/web/nms.gathering.org/nms2/js/nms-color-util.js index 8ac4ab8..72d6f61 100644 --- a/web/nms.gathering.org/nms2/js/nms-color-util.js +++ b/web/nms.gathering.org/nms2/js/nms-color-util.js @@ -17,62 +17,75 @@ var red = "#d9534f"; function gradient_from_latency(latency_ms, latency_secondary_ms) { - if (latency_secondary_ms === undefined) { - return rgb_from_latency(latency_ms); - } - return 'linear-gradient(' + - rgb_from_latency(latency_ms) + ', ' + - rgb_from_latency(latency_secondary_ms) + ')'; -} - -function rgb_from_latency(latency_ms) -{ - if (latency_ms === null || latency_ms === undefined) { + if (latency_ms == undefined) return blue; - } - - var l = latency_ms / 50.0; - if (l >= 2.0) { - return 'rgb(255, 0, 0)'; - } else if (l >= 1.0) { - l = 2.0 - l; - l = Math.pow(l, 1.0/2.2); - l = Math.floor(l * 205.0); - return 'rgb(255, ' + l + ', 0)'; - } else { - l = Math.pow(l, 1.0/2.2); - l = Math.floor(l * 255.0); - return 'rgb(' + l + ', 205, 0)'; - } + return getColorStop(parseInt(latency_ms) * 10); } /* - * Give us a color from blue (0) to red (100). + * Return a random-ish color (for testing) */ -function rgb_from_max(x) +function getRandomColor() { - x = x/100; - var colorred = 255 * x; - var colorblue = 255 - colorred; - - return 'rgb(' + Math.floor(colorred) + ", 0, " + Math.floor(colorblue) + ')'; + var colors = [ "white", red, teal, orange, green, blue ]; + var i = Math.round(Math.random() * (colors.length-1)); + return colors[i]; } -function rgb_from_max2(x) +/* + * Set up the hidden gradient canvas, using an array as input. + * + * This gives us a flexible way to get gradients between any number of + * colors (green to red, or blue to green to orange to red to white to pink + * to black and so on). + * + * Typically called when setting up a map handler. Currently "single + * tenant", since there's just one canvas. + * + * XXX: We have to store the gradients in nms.* and restore this when we + * resize for the moment, because this canvas is also re-sized (which isn't + * really necessary, but avoids special handling). + */ +function drawGradient(gradients) { - x = x/100; - var colorred = 255 * x; - var colorgreen = 250 - colorred; - - return 'rgb(' + Math.floor(colorred) + "," + Math.floor(colorgreen) + ', 0 )'; + var gradient = dr.hidden.ctx.createLinearGradient(0,0,1000,0); + var stops = gradients.length - 1; + nms.gradients = gradients; + for (var color in gradients) { + var i = color / stops; + gradient.addColorStop(i, gradients[color]); + } + dr.hidden.ctx.beginPath(); + dr.hidden.ctx.strokeStyle = gradient; + dr.hidden.ctx.moveTo(0,0); + dr.hidden.ctx.lineTo(1000,0); + dr.hidden.ctx.lineWidth = 10; + dr.hidden.ctx.closePath(); + dr.hidden.ctx.stroke(); + dr.hidden.ctx.moveTo(0,0); } + /* - * Return a random-ish color (for testing) + * Get the color of a gradient, range is from 0 to 999 (inclusive). */ -function getRandomColor() -{ - var colors = [ "white", red, teal, orange, green, blue ]; - var i = Math.round(Math.random() * (colors.length-1)); - return colors[i]; +function getColorStop(x) { + x = parseInt(x); + if (x > 999) + x = 999; + if (x < 0) + x = 0; + return getColor(x,0); } +/* + * Get the color on the hidden canvas at a specific point. Could easily be + * made generic. + */ +function getColor(x,y) { + var imageData = dr.hidden.ctx.getImageData(x, y, 1, 1); + var data = imageData.data; + if (data.length < 4) + return false; + var ret = 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')'; + return ret; +} diff --git a/web/nms.gathering.org/nms2/js/nms-map-handlers.js b/web/nms.gathering.org/nms2/js/nms-map-handlers.js index f85b06f..5966692 100644 --- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js +++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js @@ -110,9 +110,10 @@ function uplinkInit() function trafficInit() { var m = 1024 * 1024 / 8; + drawGradient([lightgreen,green,orange,red]); setLegend(1,colorFromSpeed(0),"0 (N/A)"); setLegend(5,colorFromSpeed(2000 * m) , "2000Mb/s"); - setLegend(4,colorFromSpeed(1200 * m),"1200Mb/s"); + setLegend(4,colorFromSpeed(1500 * m),"1500Mb/s"); setLegend(3,colorFromSpeed(500 * m),"500Mb/s"); setLegend(2,colorFromSpeed(10 * m),"10Mb/s"); } @@ -149,7 +150,8 @@ function colorFromSpeed(speed) if (speed == 0) return blue; speed = speed < 0 ? 0 : speed; - return rgb_from_max2( 100 * (speed / (2 * (1000 * m)))); + return getColorStop( 1000 * (speed / (2 * (1000 * m)))); +// return rgb_from_max2( 100 * (speed / (2 * (1000 * m)))); } @@ -164,9 +166,9 @@ function temp_color(t) console.log("Temp_color, but temp is undefined"); return blue; } - t = parseInt(t) - 20; - t = Math.floor((t / 15) * 100); - return rgb_from_max(t); + t = parseInt(t) - 12; + t = Math.floor((t / 23) * 1000); + return getColorStop(t); } function tempUpdater() @@ -183,15 +185,20 @@ function tempUpdater() function tempInit() { - setLegend(1,temp_color(20),"20 °C"); - setLegend(2,temp_color(22),"22 °C"); - setLegend(3,temp_color(27),"27 °C"); - setLegend(4,temp_color(31),"31 °C"); + drawGradient(["black",blue,lightblue,lightgreen,green,orange,red]); + setLegend(1,temp_color(15),"15 °C"); + setLegend(2,temp_color(20),"20 °C"); + setLegend(3,temp_color(25),"25 °C"); + setLegend(4,temp_color(30),"30 °C"); setLegend(5,temp_color(35),"35 °C"); } function pingUpdater() { + if (!nms.ping_data || !nms.ping_data["switches"]) { + resetColors(); + return; + } for (var sw in nms.switches_now["switches"]) { var c = blue; if (nms.ping_data['switches'] && nms.ping_data['switches'][sw]) @@ -211,11 +218,12 @@ function pingUpdater() function pingInit() { + drawGradient([green,lightgreen,orange,red]); setLegend(1,gradient_from_latency(1),"1ms"); setLegend(2,gradient_from_latency(30),"30ms"); setLegend(3,gradient_from_latency(60),"60ms"); setLegend(4,gradient_from_latency(100),"100ms"); - setLegend(5,blue ,"No response"); + setLegend(5,gradient_from_latency(undefined) ,"No response"); } function commentUpdater() @@ -258,9 +266,9 @@ function commentUpdater() function commentInit() { setLegend(1,"white","0 comments"); - setLegend(2,blue,"Persistent comments"); - setLegend(3,red, "New comments"); - setLegend(4,orange,"Active comments"); + setLegend(2,blue,"Persistent"); + setLegend(3,red, "New"); + setLegend(4,orange,"Active"); setLegend(5,green ,"Old/inactive only"); } /* diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js index 9bd5bcf..5f03dfa 100644 --- a/web/nms.gathering.org/nms2/js/nms.js +++ b/web/nms.gathering.org/nms2/js/nms.js @@ -179,7 +179,7 @@ var margin = { var tgStart = stringToEpoch('2015-04-01T09:00:00'); var tgEnd = stringToEpoch('2015-04-05T12:00:00'); var replayTime = 0; -var replayIncrement = 30 * 60; +var replayIncrement = 60 * 60; /* * Convenience-function to populate the 'dr' structure. @@ -208,6 +208,9 @@ function initDrawing() { 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'); } /* @@ -311,6 +314,8 @@ function timeReplay() } replayTime = parseInt(replayTime) + parseInt(replayIncrement); nms.now = epochToString(replayTime); + updatePorts(); + updatePing(); } /* @@ -331,6 +336,8 @@ function startReplay() { nms.now = epochToString(tgStart); timeReplay(); nms.timers.replay.start();; + nms.timers.ping.stop();; + nms.timers.ports.stop();; } /* @@ -346,7 +353,12 @@ function changeNow() { newnow = false; nms.now = newnow; + if (newnow) { + nms.timers.ping.stop();; + nms.timers.ports.stop();; + } updatePorts(); + updatePing(); var boxHide = document.getElementById("nowPickerBox"); if (boxHide) { boxHide.style.display = "none"; @@ -357,6 +369,8 @@ function stepTime(n) { var now; nms.timers.replay.stop(); + nms.timers.ping.stop();; + nms.timers.ports.stop();; if (nms.now && nms.now != 0) now = parseInt(stringToEpoch(nms.now)); else if (nms.switches_now) @@ -366,6 +380,7 @@ function stepTime(n) newtime = parseInt(now) + parseInt(n); nms.now = epochToString(parseInt(newtime)); updatePorts(); + updatePing(); } /* @@ -600,7 +615,11 @@ function updateMap() { if (!newerSwitches()) return; - if (!(nms.update_time < (Date.now() - 100) || nms.update_time == 0)) + if (!nms.drawn) + setScale(); + if (!nms.drawn) + return; + if (!nms.ping_data) return; nms.update_time = Date.now(); @@ -634,6 +653,7 @@ function setUpdater(fo) */ function initialUpdate() { + return; if (nms.ping_data && nms.switches_then && nms.switches_now && nms.updater != undefined && nms.did_update == false ) { resizeEvent(); if (!nms.drawn) { @@ -1059,7 +1079,6 @@ function drawScene() */ function setScale() { - canvas.height = orig.height * canvas.scale ; canvas.width = orig.width * canvas.scale ; for (var a in dr) { @@ -1068,6 +1087,7 @@ function setScale() } nms.nightBlur = {}; nms.textDrawn = {}; + drawGradient(nms.gradients); drawBG(); drawScene(); drawNow(); @@ -1353,8 +1373,6 @@ function connectSwitches(insw1, insw2,color1, color2) { */ function initNMS() { initDrawing(); - updatePorts(); - updatePing(); window.addEventListener('resize',resizeEvent,true); document.addEventListener('load',resizeEvent,true); @@ -1364,8 +1382,10 @@ function initNMS() { nms.timers.ping = new nmsTimer(updatePing, 1000, "Ping updater", "AJAX request to update ping data"); nms.timers.ping.start(); - nms.timers.replay = new nmsTimer(timeReplay, 1000, "Time machine", "Handler used to change time"); + nms.timers.replay = new nmsTimer(timeReplay, 500, "Time machine", "Handler used to change time"); detectHandler(); + updatePorts(); + updatePing(); setupKeyhandler(); restoreSettings(); } @@ -1532,7 +1552,10 @@ function moveTimeFromKey(e,key) case 'r': nms.timers.replay.stop(); nms.now = false; + nms.timers.ping.start();; + nms.timers.ports.start();; updatePorts(); + updatePing(); break; } return true; -- cgit v1.2.3 From 9502fc0d398de46cea301a921b16f945289fdffd Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Tue, 28 Apr 2015 10:30:14 +0200 Subject: NMS: Better refresh/sticky maps --- web/nms.gathering.org/nms2/js/nms-map-handlers.js | 15 ++++++++ web/nms.gathering.org/nms2/js/nms.js | 44 +++++++++++++---------- 2 files changed, 40 insertions(+), 19 deletions(-) (limited to 'web/nms.gathering.org/nms2/js') diff --git a/web/nms.gathering.org/nms2/js/nms-map-handlers.js b/web/nms.gathering.org/nms2/js/nms-map-handlers.js index 5966692..531b686 100644 --- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js +++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js @@ -21,39 +21,54 @@ var handler_uplinks = { updater:uplinkUpdater, init:uplinkInit, + tag:"uplink", name:"Uplink map" }; var handler_temp = { updater:tempUpdater, init:tempInit, + tag:"temp", name:"Temperature map" }; var handler_ping = { updater:pingUpdater, init:pingInit, + tag:"ping", name:"IPv4 Ping map" }; var handler_traffic = { updater:trafficUpdater, init:trafficInit, + tag:"traffic", name:"Uplink traffic map" }; var handler_disco = { updater:randomizeColors, init:discoInit, + tag:"disco", name:"Disco fever" }; var handler_comment = { updater:commentUpdater, init:commentInit, + tag:"comment", name:"Fresh comment spotter" }; +var handlers = [ + handler_uplinks, + handler_temp, + handler_ping, + handler_traffic, + handler_disco, + handler_comment + ]; + /* * Update function for uplink map * Run periodically when uplink map is active. diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js index 5f03dfa..f6d7bb0 100644 --- a/web/nms.gathering.org/nms2/js/nms.js +++ b/web/nms.gathering.org/nms2/js/nms.js @@ -613,6 +613,18 @@ function updateAjaxInfo() */ 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.drawn) @@ -624,7 +636,7 @@ function updateMap() nms.update_time = Date.now(); if (nms.updater != undefined && nms.switches_now && nms.switches_then) { - nms.updater(); + nms.updater.updater(); } drawNow(); } @@ -637,12 +649,13 @@ function setUpdater(fo) nms.updater = undefined; resetColors(); fo.init(); - nms.updater = fo.updater; + 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 && nms.switches_now) { - nms.updater(); + nms.updater.updater(); } } @@ -660,7 +673,7 @@ function initialUpdate() drawSwitches(); drawLinknets(); } - nms.updater(); + nms.updater.updater(); nms.did_update = true; } } @@ -1087,7 +1100,8 @@ function setScale() } nms.nightBlur = {}; nms.textDrawn = {}; - drawGradient(nms.gradients); + if (nms.gradients) + drawGradient(nms.gradients); drawBG(); drawScene(); drawNow(); @@ -1392,21 +1406,13 @@ function initNMS() { function detectHandler() { var url = document.URL; - if (/#ping/.exec(url)) { - setUpdater(handler_ping); - }else if (/#uplink/.exec(url)) { - setUpdater(handler_uplinks); - } else if (/#temp/.exec(url)) { - setUpdater(handler_temp); - } else if (/#traffic/.exec(url)) { - setUpdater(handler_traffic); - } else if (/#comment/.exec(url)) { - setUpdater(handler_comment); - } else if (/#disco/.exec(url)) { - setUpdater(handler_disco); - } else { - setUpdater(handler_ping); + for (var i in handlers) { + if (('#' + handlers[i].tag) == document.location.hash) { + setUpdater(handlers[i]); + return; + } } + setUpdater(handler_ping); } /* -- cgit v1.2.3 From 2c9231ff1b71e608b369df8666b3b1ec2f32bb74 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Wed, 29 Apr 2015 12:26:45 +0200 Subject: NMS: Add "total switch speed" map I'm thinking of factoring ifhighspeed for the scaling... --- web/nms.gathering.org/nms2/js/nms-map-handlers.js | 50 +++++++++++++++++++++-- web/nms.gathering.org/nms2/js/nms.js | 4 ++ 2 files changed, 50 insertions(+), 4 deletions(-) (limited to 'web/nms.gathering.org/nms2/js') diff --git a/web/nms.gathering.org/nms2/js/nms-map-handlers.js b/web/nms.gathering.org/nms2/js/nms-map-handlers.js index 531b686..9b2d44c 100644 --- a/web/nms.gathering.org/nms2/js/nms-map-handlers.js +++ b/web/nms.gathering.org/nms2/js/nms-map-handlers.js @@ -46,6 +46,13 @@ var handler_traffic = { name:"Uplink traffic map" }; +var handler_traffic_tot = { + updater:trafficTotUpdater, + init:trafficTotInit, + tag:"traffictot", + name:"Switch traffic map" +}; + var handler_disco = { updater:randomizeColors, init:discoInit, @@ -66,7 +73,8 @@ var handlers = [ handler_ping, handler_traffic, handler_disco, - handler_comment + handler_comment, + handler_traffic_tot ]; /* @@ -159,14 +167,48 @@ function trafficUpdater() } } -function colorFromSpeed(speed) +/* + * Init-function for uplink map + */ +function trafficTotInit() +{ + var m = 1024 * 1024 / 8; + drawGradient([lightgreen,green,orange,red]); + setLegend(1,colorFromSpeed(0),"0 (N/A)"); + setLegend(5,colorFromSpeed(5000 * m,5) , "5000Mb/s"); + setLegend(4,colorFromSpeed(3000 * m,5),"3000Mb/s"); + setLegend(3,colorFromSpeed(1000 * m,5),"1000Mb/s"); + setLegend(2,colorFromSpeed(100 * m,5),"100Mb/s"); +} + +function trafficTotUpdater() +{ + if (!nms.switches_now["switches"]) + return; + for (sw in nms.switches_now["switches"]) { + var speed = 0; + for (port in nms.switches_now["switches"][sw]["ports"]) { + if (!nms.switches_then["switches"][sw] || + !nms.switches_then["switches"][sw]["ports"] || + !nms.switches_then["switches"][sw]["ports"][port]) + continue; + var t = nms.switches_then["switches"][sw]["ports"][port]; + var n = nms.switches_now["switches"][sw]["ports"][port]; + speed += (parseInt(t["ifhcoutoctets"]) -parseInt(n["ifhcoutoctets"])) / (parseInt(t["time"] - n["time"])); + } + setSwitchColor(sw,colorFromSpeed(speed,5)); + } +} + +function colorFromSpeed(speed,factor) { var m = 1024 * 1024 / 8; + if (factor == undefined) + factor = 2; if (speed == 0) return blue; speed = speed < 0 ? 0 : speed; - return getColorStop( 1000 * (speed / (2 * (1000 * m)))); -// return rgb_from_max2( 100 * (speed / (2 * (1000 * m)))); + return getColorStop( 1000 * (speed / (factor * (1000 * m)))); } diff --git a/web/nms.gathering.org/nms2/js/nms.js b/web/nms.gathering.org/nms2/js/nms.js index f6d7bb0..d4cf4e8 100644 --- a/web/nms.gathering.org/nms2/js/nms.js +++ b/web/nms.gathering.org/nms2/js/nms.js @@ -73,6 +73,7 @@ var nms = { '4':setMapModeFromN, '5':setMapModeFromN, '6':setMapModeFromN, + '7':setMapModeFromN, 'h':moveTimeFromKey, 'j':moveTimeFromKey, 'k':moveTimeFromKey, @@ -1526,6 +1527,9 @@ function setMapModeFromN(e,key) setUpdater(handler_comment); break; case '6': + setUpdater(handler_traffic_tot); + break; + case '7': setUpdater(handler_disco); break; } -- cgit v1.2.3