diff options
| -rw-r--r-- | web/etc/varnish/nms.vcl | 1 | ||||
| -rw-r--r-- | web/nms.gathering.org/js/nms-data.js | 16 | ||||
| -rw-r--r-- | web/nms.gathering.org/js/nms-map.js | 111 | ||||
| -rw-r--r-- | web/nms.gathering.org/js/nms.js | 709 |
4 files changed, 331 insertions, 506 deletions
diff --git a/web/etc/varnish/nms.vcl b/web/etc/varnish/nms.vcl index e4b4747..4f1a855 100644 --- a/web/etc/varnish/nms.vcl +++ b/web/etc/varnish/nms.vcl @@ -30,6 +30,7 @@ sub vcl_recv { return (pass); } + return (pass); # Brukes ikke. Cookies er for nubs. unset req.http.Cookie; diff --git a/web/nms.gathering.org/js/nms-data.js b/web/nms.gathering.org/js/nms-data.js index 7ef11ba..2d7fc01 100644 --- a/web/nms.gathering.org/js/nms-data.js +++ b/web/nms.gathering.org/js/nms-data.js @@ -82,11 +82,12 @@ var nmsData = nmsData || { */ get now() { return this._now || this._last; }, set now(val) { - if (val == undefined) { - this._now = undefined; + if (val == undefined || !val) { + nmsData._now = undefined; + } else { + // FIXME: Check if now is valid syntax. + nmsData._now = val; } - // FIXME: Check if now is valid syntax. - this._now = now; }, /* * List of sources, name, handler, etc @@ -170,11 +171,11 @@ nmsData.addHandler = function(name, id, cb, cbdata) { */ nmsData.unregisterHandlerWildcard = function(id) { for (var v in nmsData._sources) { - this._unregisterHandler(v, id); + this.unregisterHandler(v, id); } } -nmsData._unregisterHandler = function(name, id) { +nmsData.unregisterHandler = function(name, id) { delete this._sources[name].cbs[id]; } @@ -227,10 +228,11 @@ nmsData._genericUpdater = function(name) { url: this._sources[name].target + now, dataType: "json", success: function (data, textStatus, jqXHR) { - nmsData._last = data['time']; if (nmsData[name] == undefined || nmsData[name]['hash'] != data['hash']) { + nmsData._last = data['time']; nmsData.old[name] = nmsData[name]; nmsData[name] = data; + nmsMap.drawNow(); for (var i in nmsData._sources[name].cbs) { var tmp = nmsData._sources[name].cbs[i]; if (tmp.cb != undefined) { diff --git a/web/nms.gathering.org/js/nms-map.js b/web/nms.gathering.org/js/nms-map.js index 65b5b68..a9731c5 100644 --- a/web/nms.gathering.org/js/nms-map.js +++ b/web/nms.gathering.org/js/nms-map.js @@ -19,7 +19,9 @@ var nmsMap = nmsMap || { colorSame:0, resizeEvents:0, switchInfoUpdate:0, - switchInfoSame:0 + switchInfoSame:0, + nowDups:0, + nows:0 }, contexts: ["bg","link","blur","switch","text","textInfo","top","input","hidden"], _info: {}, @@ -27,7 +29,9 @@ var nmsMap = nmsMap || { fontLineFactor: 3, textMargin: 3, xMargin: 10, - yMargin: 20 + yMargin: 20, + fontSize: 14, + fontFace: "Verdana" }, scale: 1, _orig: { width:1920, height:1032 }, @@ -43,7 +47,6 @@ var nmsMap = nmsMap || { nmsMap.init = function() { this._initContexts(); this._drawBG(); - nmsData.registerSource("switches","/api/public/switches"); nmsData.addHandler("switches","nmsMap",function(){nmsMap._drawAllSwitches();}); window.addEventListener('resize',nmsMap._resizeEvent,true); document.addEventListener('load',nmsMap._resizeEvent,true); @@ -114,9 +117,38 @@ nmsMap._resizeEvent = function() { } nmsMap._drawBG(); nmsMap._drawAllSwitches(); + nmsMap.drawNow(); nmsMap.stats.resizeEvents++; } +/* + * Draw current time-window + * + * FIXME: The math here is just wild approximation and guesswork because + * I'm lazy. + */ +nmsMap.drawNow = function () +{ + var now = nmsData.now; + if (nmsMap._lastNow == now) { + nmsMap.stats.nowDups++; + return; + } + nmsMap.stats.nows++; + + var ctx = nmsMap._c.top.ctx; + ctx.save(); + ctx.scale(this.scale, this.scale); + ctx.font = Math.round(2 * this._settings.fontSize) + "px " + this._settings.fontFace; + ctx.clearRect(0,0,800,100); + ctx.fillStyle = "white"; + ctx.strokeStyle = "black"; + ctx.lineWidth = nms.fontLineFactor; + ctx.strokeText(now, 0 + this._settings.textMargin, 25); + ctx.fillText(now, 0 + this._settings.textMargin, 25); + ctx.restore(); +} + nmsMap.setNightMode = function(toggle) { if (this._nightmode == toggle) return; @@ -268,3 +300,76 @@ nmsMap._connectBoxes = function(box1, box2,color1, color2) { ctx.stroke(); ctx.restore(); } + +/* + * STUFF NOT YET INTEGRATED, BUT MOVED AWAY FROM nms.js TO TIDY. + * + * Consider this a TODO list. + */ + + +/* + * 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 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 applyBlur() +{ + var blur = document.getElementById("shadowBlur"); + var col = document.getElementById("shadowColor"); + nms.shadowBlur = blur.value; + nms.shadowColor = col.value; + resetBlur(); + saveSettings(); +} 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 + '<button type="button" class="close" aria-labe="Close" onclick="hideSwitch();" style="float: right;"><span aria-hidden="true">×</span></button>'; - 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 + '<button type="button" class="close" aria-labe="Close" onclick="hideSwitch();" style="float: right;"><span aria-hidden="true">×</span></button>'; - 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 = '<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-xs btn-default" data-trigger="focus" data-toggle="popover" title="Info" data-content="Comment added ' + epochToString(comment["time"]) + " by user " + comment["username"] + ' and listed as ' + comment["state"] + '"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>'; - txt += '<button type="button" class="btn btn-xs btn-danger" data-trigger="focus" data-toggle="tooltip" title="Mark as deleted" onclick="commentDelete(' + comment["id"] + ');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'; - txt += '<button type="button" class="btn btn-xs btn-success" data-trigger="focus" data-toggle="tooltip" title="Mark as inactive/fixed" onclick="commentInactive(' + comment["id"] + ');"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>'; - txt += '<button type="button" class="btn btn-xs btn-info" data-trigger="focus" data-toggle="tooltip" title="Mark as persistent" onclick="commentPersist(' + comment["id"] + ');"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></button></div>'; - 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 = '<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-xs btn-default" data-trigger="focus" data-toggle="popover" title="Info" data-content="Comment added ' + epochToString(comment["time"]) + " by user " + comment["username"] + ' and listed as ' + comment["state"] + '"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>'; + txt += '<button type="button" class="btn btn-xs btn-danger" data-trigger="focus" data-toggle="tooltip" title="Mark as deleted" onclick="commentDelete(' + comment["id"] + ');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'; + txt += '<button type="button" class="btn btn-xs btn-success" data-trigger="focus" data-toggle="tooltip" title="Mark as inactive/fixed" onclick="commentInactive(' + comment["id"] + ');"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>'; + txt += '<button type="button" class="btn btn-xs btn-info" data-trigger="focus" data-toggle="tooltip" title="Mark as persistent" onclick="commentPersist(' + comment["id"] + ');"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></button></div>'; + 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 = '<div class="input-group"><input type="text" class="form-control" placeholder="Comment" id="' + x + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + x + '\',document.getElementById(\'' + x + '-comment\').value); document.getElementById(\'' + x + '-comment\').value = \'\'; document.getElementById(\'' + x + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>'; - 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 = '<div class="input-group"><input type="text" class="form-control" placeholder="Comment" id="' + x + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + x + '\',document.getElementById(\'' + x + '-comment\').value); document.getElementById(\'' + x + '-comment\').value = \'\'; document.getElementById(\'' + x + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>'; + swtop.appendChild(commentbox); + swtop.style.display = 'block'; } /* @@ -501,102 +443,18 @@ function setLegend(x,color,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; @@ -861,30 +599,16 @@ function 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); + } + }); } |