aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/js/nms-color-util.js43
-rw-r--r--web/js/nms-map-handlers.js116
-rw-r--r--web/js/nms-map.js18
3 files changed, 90 insertions, 87 deletions
diff --git a/web/js/nms-color-util.js b/web/js/nms-color-util.js
index dfd9a90..82f24d7 100644
--- a/web/js/nms-color-util.js
+++ b/web/js/nms-color-util.js
@@ -1,34 +1,30 @@
-
+"use strict";
/*
* 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";
-var white = "#ffffff";
-function gradient_from_latency(latency_ms, latency_secondary_ms)
-{
- if (latency_ms == undefined)
- return blue;
- return getColorStop(parseInt(latency_ms));
+var nmsColor = nmsColor || {
+ lightblue: "#d9edf7",
+ lightgreen: "#dff0d8",
+ lightred: "#f2dede",
+ lightorange: "#fcf8e3",
+ blue: "#337ab7",
+ green: "#5cb85c",
+ teal: "#5bc0de",
+ orange: "#f0ad4e",
+ red: "#d9534f",
+ white: "#ffffff"
}
/*
* Return a random-ish color (for testing)
*/
-function getRandomColor()
+nmsColor.random = function()
{
- var colors = [ "white", red, teal, orange, green, blue ];
+ var colors = [ "white", nmsColor.red, nmsColor.teal, nmsColor.orange, nmsColor.green, nmsColor.blue ];
var i = Math.round(Math.random() * (colors.length-1));
return colors[i];
}
@@ -47,8 +43,7 @@ function getRandomColor()
* resize for the moment, because this canvas is also re-sized (which isn't
* really necessary, but avoids special handling).
*/
-function drawGradient(gradients)
-{
+nmsColor.drawGradient = function(gradients) {
var ctx = nmsMap._c.hidden.ctx; // FIXME: Move it away...
var gradient = ctx.createLinearGradient(0,0,1000,0);
var stops = gradients.length - 1;
@@ -70,24 +65,24 @@ function drawGradient(gradients)
/*
* Get the color of a gradient, range is from 0 to 999 (inclusive).
*/
-function getColorStop(x) {
+nmsColor.getColorStop = function(x) {
x = parseInt(x);
if (x > 999)
x = 999;
if (x < 0)
x = 0;
- return getColor(x,0);
+ return nmsColor._getColor(x,0);
}
/*
* Get the color on the hidden canvas at a specific point. Could easily be
* made generic.
*/
-function getColor(x,y) {
+nmsColor._getColor = function(x,y) {
var ctx = nmsMap._c.hidden.ctx; // FIXME: Move it away...
var imageData = ctx.getImageData(x, y, 1, 1);
var data = imageData.data;
if (data.length < 4)
return false;
- return 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
+ return 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
}
diff --git a/web/js/nms-map-handlers.js b/web/js/nms-map-handlers.js
index ee0d774..9bee9ef 100644
--- a/web/js/nms-map-handlers.js
+++ b/web/js/nms-map-handlers.js
@@ -79,7 +79,11 @@ var handler_combo = {
name:"Aggregated health"
};
-var handlerInfo = function(desc) {
+var handlerInfo = function(tag,desc) {
+ /*
+ * Short name, typically matching the url anchor.
+ */
+ this.tag = tag;
/*
* Text-representable value (e.g.: for a table).
* Doesn't have to be a number.
@@ -144,13 +148,13 @@ function uplinkUpdater()
if (uplinks == 0) {
nmsMap.setSwitchColor(sw,"white");
} else if (uplinks == 1) {
- nmsMap. setSwitchColor(sw, red);
+ nmsMap. setSwitchColor(sw, nmsColor.red);
} else if (uplinks == 2) {
- nmsMap.setSwitchColor(sw, orange);
+ nmsMap.setSwitchColor(sw, nmsColor.orange);
} else if (uplinks == 3) {
- nmsMap.setSwitchColor(sw,green);
+ nmsMap.setSwitchColor(sw, nmsColor.green);
} else if (uplinks > 3) {
- nmsMap.setSwitchColor(sw, blue);
+ nmsMap.setSwitchColor(sw, nmsColor.blue);
}
}
}
@@ -163,10 +167,10 @@ function uplinkInit()
nmsData.addHandler("switches","mapHandler",uplinkUpdater);
nmsData.addHandler("switchstate","mapHandler",uplinkUpdater);
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");
+ setLegend(2,nmsColor.red,"1 uplink");
+ setLegend(3,nmsColor.orange,"2 uplinks");
+ setLegend(4,nmsColor.green,"3 uplinks");
+ setLegend(5,nmsColor.blue,"4 uplinks");
}
/*
@@ -177,7 +181,7 @@ function trafficInit()
nmsData.addHandler("switches","mapHandler",trafficUpdater);
nmsData.addHandler("switchstate","mapHandler",trafficUpdater);
var m = 1024 * 1024 / 8;
- drawGradient([lightgreen,green,orange,red]);
+ nmsColor.drawGradient([nmsColor.lightgreen, nmsColor.green, nmsColor.orange, nmsColor.red]);
setLegend(1,colorFromSpeed(0),"0 (N/A)");
setLegend(5,colorFromSpeed(1100 * m) , "1100Mb/s");
setLegend(4,colorFromSpeed(600 * m),"600Mb/s");
@@ -212,7 +216,7 @@ function trafficTotInit()
nmsData.addHandler("switches","mapHandler",trafficTotUpdater);
nmsData.addHandler("switchstate","mapHandler",trafficTotUpdater);
var m = 1024 * 1024 / 8;
- drawGradient([lightgreen,green,orange,red]);
+ nmsColor.drawGradient([nmsColor.lightgreen, nmsColor.green, nmsColor.orange, nmsColor.red]);
setLegend(1,colorFromSpeed(0),"0 (N/A)");
setLegend(5,colorFromSpeed(5000 * m,5) , "5000Mb/s");
setLegend(4,colorFromSpeed(3000 * m,5),"3000Mb/s");
@@ -246,9 +250,9 @@ function colorFromSpeed(speed,factor)
if (factor == undefined)
factor = 1.1;
if (speed == 0)
- return blue;
+ return nmsColor.blue;
speed = speed < 0 ? 0 : speed;
- return getColorStop( 1000 * (speed / (factor * (1000 * m))));
+ return nmsColor.getColorStop( 1000 * (speed / (factor * (1000 * m))));
}
/*
@@ -260,11 +264,11 @@ function temp_color(t)
{
if (t == undefined) {
console.log("Temp_color, but temp is undefined");
- return blue;
+ return nmsColor.blue;
}
t = parseInt(t) - 12;
t = Math.floor((t / 23) * 1000);
- return getColorStop(t);
+ return nmsColor.getColorStop(t);
}
function tempUpdater()
@@ -291,7 +295,7 @@ function tempUpdater()
function tempInit()
{
//Padded the gradient with extra colors for the upper unused values
- drawGradient(["black",blue,lightblue,lightgreen,green,orange,red]);
+ nmsColor.drawGradient(["black", nmsColor.blue, nmsColor.lightblue, nmsColor.lightgreen, nmsColor.green, nmsColor.orange, nmsColor.red]);
setLegend(1,temp_color(15),"15 °C");
setLegend(2,temp_color(20),"20 °C");
setLegend(3,temp_color(25),"25 °C");
@@ -307,17 +311,21 @@ function pingUpdater()
}
for (var sw in nmsData.switches.switches) {
try {
- var c = gradient_from_latency(pingInfo(sw).score);
- nmsMap.setSwitchColor(sw, c);
+ var c = nmsColor.getColorStop(pingInfo(sw).score);
+ if (c = 1000) {
+ nmsMap.setSwitchColor(sw, nmsColor.blue);
+ } else {
+ nmsMap.setSwitchColor(sw, c);
+ }
} catch (e) {
- nmsMap.setSwitchColor(sw, blue);
+ nmsMap.setSwitchColor(sw, nmsColor.blue);
}
}
}
function pingInfo(sw)
{
- var ret = new handlerInfo("Latency(ms)");
+ var ret = new handlerInfo("ping","Latency(ms)");
ret.why = "Latency";
try {
ret.value = nmsData.ping.switches[sw].latency;
@@ -336,12 +344,12 @@ function pingInfo(sw)
function pingInit()
{
- drawGradient([green,lightgreen,orange,red]);
- setLegend(1,gradient_from_latency(10),"1ms");
- setLegend(2,gradient_from_latency(300),"30ms");
- setLegend(3,gradient_from_latency(600),"60ms");
- setLegend(4,gradient_from_latency(1000),"100ms");
- setLegend(5,gradient_from_latency(undefined) ,"No response");
+ nmsColor.drawGradient([nmsColor.green,nmsColor.lightgreen, nmsColor.orange, nmsColor.red]);
+ setLegend(1,nmsColor.getColorStop(10),"1ms");
+ setLegend(2,nmsColor.getColorStop(300),"30ms");
+ setLegend(3,nmsColor.getColorStop(600),"60ms");
+ setLegend(4,nmsColor.getColorStop(1000),"100ms");
+ setLegend(5,nmsColor.blue,"No response");
nmsData.addHandler("ping","mapHandler",pingUpdater);
nmsData.addHandler("switches","mapHandler",pingUpdater);
nmsData.addHandler("ticker", "mapHandler", pingUpdater);
@@ -355,7 +363,7 @@ function getDhcpColor(stop)
stop = 1000;
if (stop > 1000)
stop = 1000;
- return getColorStop(stop);
+ return nmsColor.getColorStop(stop);
}
function dhcpUpdater()
@@ -369,7 +377,7 @@ function dhcpUpdater()
var now = nmsData.dhcp.time;
try {
for (var sw in nmsData.switches.switches) {
- var c = blue;
+ var c = nmsColor.blue;
if (nmsData.dhcp.dhcp[sw] == undefined) {
nmsMap.setSwitchColor(sw,c);
continue;
@@ -386,7 +394,7 @@ function dhcpUpdater()
function dhcpInit()
{
- drawGradient([green,lightgreen,orange,red]);
+ nmsColor.drawGradient([nmsColor.green, nmsColor.lightgreen, nmsColor.orange, nmsColor.red]);
nmsData.addHandler("dhcp","mapHandler",dhcpUpdater);
setLegend(1,"white","Undefined");
setLegend(2,getDhcpColor(1),"1 Second old");
@@ -408,39 +416,38 @@ function randomizeColors()
return;
}
for (var sw in nmsData.switches.switches) {
- nmsMap.setSwitchColor(sw, getRandomColor());
+ nmsMap.setSwitchColor(sw, nmsColor.random());
}
}
function discoDo() {
randomizeColors();
- setTimeout(randomizeColors,500);
}
function discoInit()
{
nmsData.addHandler("ticker", "mapHandler", discoDo);
setNightMode(true);
- setLegend(1,blue,"Y");
- setLegend(2,red, "M");
- setLegend(3,orange,"C");
- setLegend(4,green, "A");
+ setLegend(1,nmsColor.blue,"Y");
+ setLegend(2,nmsColor.red, "M");
+ setLegend(3,nmsColor.orange,"C");
+ setLegend(4,nmsColor.green, "A");
setLegend(5,"white","!");
}
function snmpUpdater() {
for (var sw in nmsData.switches.switches) {
if (nmsData.snmp.snmp[sw] == undefined || nmsData.snmp.snmp[sw].misc == undefined) {
- nmsMap.setSwitchColor(sw, red);
+ nmsMap.setSwitchColor(sw, nmsColor.red);
} else if (nmsData.snmp.snmp[sw].misc.sysName[0] != sw) {
- nmsMap.setSwitchColor(sw, orange);
+ nmsMap.setSwitchColor(sw, nmsColor.orange);
} else {
- nmsMap.setSwitchColor(sw, green);
+ nmsMap.setSwitchColor(sw, nmsColor.green);
}
}
}
function snmpInfo(sw) {
- var ret = new handlerInfo("SNMP data");
+ var ret = new handlerInfo("snmp","SNMP data");
ret.why = "No data";
if (nmsData.snmp == undefined || nmsData.snmp.snmp == undefined || nmsData.snmp.snmp[sw] == undefined || nmsData.snmp.snmp[sw].misc == undefined) {
ret.score = 800;
@@ -461,11 +468,11 @@ function snmpInfo(sw) {
function snmpInit() {
nmsData.addHandler("snmp", "mapHandler", snmpUpdater);
- setLegend(1,green,"OK");
- setLegend(2,orange, "Sysname mismatch");
- setLegend(3,red,"No SNMP data");
- setLegend(4,green, "");
- setLegend(5,green,"");
+ setLegend(1,nmsColor.green,"OK");
+ setLegend(2,nmsColor.orange, "Sysname mismatch");
+ setLegend(3,nmsColor.red,"No SNMP data");
+ setLegend(4,nmsColor.green, "");
+ setLegend(5,nmsColor.green,"");
}
@@ -477,7 +484,7 @@ function cpuUpdater() {
var local = nmsData.snmp.snmp[sw].misc['jnxOperatingCPU'][u];
cpu = Math.max(nmsData.snmp.snmp[sw].misc.jnxOperatingCPU[u],cpu);
}
- nmsMap.setSwitchColor(sw, getColorStop(cpu * 10));
+ nmsMap.setSwitchColor(sw, nmsColor.getColorStop(cpu * 10));
nmsMap.setSwitchInfo(sw, cpu + " % ");
} catch (e) {
nmsMap.setSwitchColor(sw, "white");
@@ -488,7 +495,7 @@ function cpuUpdater() {
function cpuInit() {
nmsData.addHandler("snmp", "mapHandler", cpuUpdater);
- drawGradient([green,orange,red]);
+ nmsColor.drawGradient([nmsColor.green,nmsColor.orange,nmsColor.red]);
setLegend(1,getColorStop(0),"0 %");
setLegend(2,getColorStop(250),"25 %");
setLegend(3,getColorStop(600),"60 %");
@@ -497,7 +504,7 @@ function cpuInit() {
}
function comboInfo(sw) {
- var worst = new handlerInfo();
+ var worst = new handlerInfo("combo");
worst.score = -1;
for (var h in handlers) {
try {
@@ -518,16 +525,17 @@ function comboUpdater() {
return;
for (var sw in nmsData.switches.switches) {
var worst = comboInfo(sw);
- nmsMap.setSwitchColor(sw, getColorStop(worst.score));
+ nmsMap.setSwitchColor(sw, nmsColor.getColorStop(worst.score));
+ nmsMap.setSwitchInfo(sw, worst.tag);
}
}
function comboInit() {
nmsData.addHandler("ping", "mapHandler", comboUpdater);
- drawGradient([green,orange,red]);
- setLegend(1,getColorStop(0),"All good");
- setLegend(2,getColorStop(250),"Ok-ish");
- setLegend(3,getColorStop(600),"Ick-ish");
- setLegend(4,getColorStop(800),"Nasty");
- setLegend(5,getColorStop(1000),"WTF?");
+ nmsColor.drawGradient([nmsColor.green,nmsColor.orange,nmsColor.red]);
+ setLegend(1,nmsColor.getColorStop(0),"All good");
+ setLegend(2,nmsColor.getColorStop(250),"Ok-ish");
+ setLegend(3,nmsColor.getColorStop(600),"Ick-ish");
+ setLegend(4,nmsColor.getColorStop(800),"Nasty");
+ setLegend(5,nmsColor.getColorStop(1000),"WTF?");
}
diff --git a/web/js/nms-map.js b/web/js/nms-map.js
index 94e0173..ef86102 100644
--- a/web/js/nms-map.js
+++ b/web/js/nms-map.js
@@ -273,13 +273,13 @@ nmsMap._drawSwitch = function(sw)
var color = nmsMap._color[sw];
if(this._highlightActive) {
if(nmsMap._highlight[sw]) {
- color = green;
+ color = nmsColor.green;
} else {
- color = white;
+ color = nmsColor.white;
}
}
if (color == undefined) {
- color = blue;
+ color = nmsColor.blue;
}
this._c.switch.ctx.fillStyle = color;
this._drawBox(this._c.switch.ctx, box['x'],box['y'],box['width'],box['height']);
@@ -311,7 +311,7 @@ nmsMap._drawText = function(ctx, text, box, align) {
if ((box['width'] + 10 )< box['height'])
rotate = true;
-
+
this._clearBox(ctx,box);
ctx.save();
ctx.scale(this.scale, this.scale);
@@ -320,7 +320,7 @@ nmsMap._drawText = function(ctx, text, box, align) {
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.translate(box.x + this._settings.textMargin, box.y + box.height - this._settings.textMargin);
-
+
if (rotate) {
ctx.translate(box.width - this._settings.textMargin * 2,0);
ctx.rotate(Math.PI * 3/2);
@@ -361,8 +361,8 @@ nmsMap._setLinknetColor = function(l, color1, color2)
nmsMap._drawLinknet = function(l) {
try {
- var color1 = blue;
- var color2 = blue;
+ var color1 = nmsColor.blue;
+ var color2 = nmsColor.blue;
try {
color1 = nmsMap._linknets[l].sysname1;
color2 = nmsMap._linknets[l].sysname2;
@@ -419,9 +419,9 @@ nmsMap._connectSwitches = function(sw1, sw2, color1, color2) {
nmsMap._connectBoxes = function(box1, box2,color1, color2) {
var ctx = nmsMap._c.link.ctx;
if (color1 == undefined)
- color1 = blue;
+ color1 = nmsColor.blue;
if (color2 == undefined)
- color2 = blue;
+ color2 = nmsColor.blue;
var x0 = Math.floor(box1.x + box1.width/2);
var y0 = Math.floor(box1.y + box1.height/2);
var x1 = Math.floor(box2.x + box2.width/2);
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-19 22:28:04 +0000