aboutsummaryrefslogtreecommitdiffstats
path: root/web/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/js')
-rw-r--r--web/js/nms-draw-chart.js186
-rw-r--r--web/js/nms-info-box.js22
-rw-r--r--web/js/nms-map-handlers.js99
-rw-r--r--web/js/nms-map.js13
4 files changed, 182 insertions, 138 deletions
diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js
index 4145a9a..ccdf220 100644
--- a/web/js/nms-draw-chart.js
+++ b/web/js/nms-draw-chart.js
@@ -14,7 +14,7 @@ function setNightModeChart(night) {
function drawLatency(canvas, sw, chart, callback) {
var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 1h AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)');
var dataset = [];
-
+
$.getJSON( "/query?db=gondul&q="+q, function( results ) {
try {
results['results'][0]['series'].forEach(function(serie) {
@@ -67,8 +67,11 @@ function drawLatency(canvas, sw, chart, callback) {
responsive: true,
animation: false,
elements: {
+ point: {
+ radius: 0
+ },
line: {
- tension: 0.05
+ tension: 0.4
}
}
}
@@ -86,68 +89,52 @@ function drawSumOfPorts(canvas, sw) {
var megabit = kilobit * 1024;
var gigabit = megabit * 1024;
var terabit = gigabit * 1024;
-
- var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 30m AND "switch"=\''+sw+'\' GROUP BY time(90s),"interface" fill(null)');
+
+ var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 60m AND "switch"=\'' + sw + '\' GROUP BY time(90s),"interface" fill(null)');
var dataset = [];
-
- $.getJSON( "/query?db=gondul&q="+q, function( results ) {
- var bits_in = [];
- var bits_out = [];
-
- results['results'][0]['series'].forEach(function(serie) {
- // Bytes in
- serie['values'].forEach(function(element) {
- bits_in.push(element[1]);
- });
- // Bytes out
- serie['values'].forEach(function(element) {
- bits_out.push(element[2]);
+
+ $.getJSON("/query?db=gondul&q=" + q, function (results) {
+ var bits_in = {};
+ var bits_out = {};
+
+ results['results'][0]['series'].forEach(function (serie) {
+ serie['values'].forEach(function (element) {
+ var time = new Date(element[0]);
+ var timeStr = time.toISOString();
+ bits_in[timeStr] = (bits_in[timeStr] || 0) + element[1];
+ bits_out[timeStr] = (bits_out[timeStr] || 0) + element[2];
});
});
-
- var bits_in_size = bitToSize(Math.max.apply( Math, bits_in ));
- var bits_out_size = bitToSize(Math.max.apply( Math, bits_out ));
- var size = 0;
-
- if(bits_in_size >= bits_out_size) {
- size = bits_in_size;
- } else {
- size = bits_out_size;
- }
-
+
+ var max_bits_in = Math.max(...Object.values(bits_in));
+ var max_bits_out = Math.max(...Object.values(bits_out));
+ var size = bitToSize(Math.max(max_bits_in, max_bits_out));
+
var size_divider;
switch (size) {
case 0:
- size_divider = 1;
- break;
+ size_divider = 1;
+ break;
case 1:
- size_divider = kilobit;
- break;
+ size_divider = kilobit;
+ break;
case 2:
- size_divider = megabit;
- break;
+ size_divider = megabit;
+ break;
case 3:
- size_divider = gigabit;
- break;
+ size_divider = gigabit;
+ break;
case 4:
- size_divider = terabit;
- break;
+ size_divider = terabit;
+ break;
}
- results['results'][0]['series'].forEach(function(serie) {
- // Bytes in
- var data = [];
- serie['values'].forEach(function(element) {
- data.push({t: new Date(element[0]), y: element[1] / size_divider });
- });
- dataset.push({data: data, backgroundColor:'rgba(58,125,48,200)', label:'Traffic in (' + sizeToText(size)+')'});
- // Bytes out
- data = [];
- serie['values'].forEach(function(element) {
- data.push({t: new Date(element[0]), y: -Math.abs(element[2] / size_divider) });
- });
- dataset.push({data: data, backgroundColor:'rgba(84,84,142,225)', label:'Traffic out (' + sizeToText(size)+')'});
- });
-
+
+ var inData = Object.entries(bits_in).map(([t, y]) => ({ t: new Date(t), y: y / size_divider }));
+ var outData = Object.entries(bits_out).map(([t, y]) => ({ t: new Date(t), y: -Math.abs(y / size_divider) }));
+
+ dataset.push({ data: inData, backgroundColor: 'rgba(100,155,100,0.8)', label: 'Traffic in (' + sizeToText(size) + ')' });
+ dataset.push({ data: outData, backgroundColor: 'rgba(0,155,200,0.8)', label: 'Traffic out (' + sizeToText(size) + ')' });
+
// Draw the chart
var ctx = document.getElementById(canvas).getContext('2d');
var myChart = new Chart(ctx, {
@@ -160,7 +147,7 @@ function drawSumOfPorts(canvas, sw) {
display: false
},
scales: {
- xAxes:[{
+ xAxes: [{
type: 'time',
time: {
parser: "HH:mm",
@@ -175,15 +162,15 @@ function drawSumOfPorts(canvas, sw) {
}
}],
yAxes: [{
- stacked: true,
+ stacked: false,
ticks: {
- callback: function(label, index, labels) {
- return Math.abs(label)+' '+sizeToText(size);
+ callback: function (label, index, labels) {
+ return Math.abs(label) + ' ' + sizeToText(size);
}
},
scaleLabel: {
display: true,
- labelString: sw+' - All ports'
+ labelString: sw + ' - All ports'
}
}]
},
@@ -194,7 +181,7 @@ function drawSumOfPorts(canvas, sw) {
radius: 0
},
line: {
- tension: 0
+ tension: 0.4
}
}
}
@@ -204,75 +191,75 @@ function drawSumOfPorts(canvas, sw) {
function drawPort(canvas, sw, port) {
-
+
var kilobit = 1024;
var megabit = kilobit * 1024;
var gigabit = megabit * 1024;
var terabit = gigabit * 1024;
-
- var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 30m AND "switch"=\''+sw+'\' AND "interface"=\''+port+'\' GROUP BY time(30s) fill(null)');
+
+ var q = encodeURIComponent('SELECT non_negative_derivative(first("ifHCInOctets"), 1s) * 8 AS "ifHCInOctets", non_negative_derivative(first("ifHCOutOctets"), 1s) * 8 AS "ifHCOutOctets" FROM "ports" WHERE time > now() - 60m AND "switch"=\''+sw+'\' AND "interface"=\''+port+'\' GROUP BY time(30s) fill(null)');
var dataset = [];
-
+
$.getJSON( "/query?db=gondul&q="+q, function( results ) {
var serie = results['results'][0]['series'][0];
-
+
var bits_in = [];
var bits_out = [];
-
+
// Bytes in
serie['values'].forEach(function(element) {
bits_in.push(element[1]);
});
-
+
// Bytes out
serie['values'].forEach(function(element) {
bits_out.push(element[2]);
});
-
+
var bits_in_size = bitToSize(Math.max.apply( Math, bits_in ));
var bits_out_size = bitToSize(Math.max.apply( Math, bits_out ));
var size = 0;
-
+
if(bits_in_size >= bits_out_size) {
size = bits_in_size;
} else {
size = bits_out_size;
}
-
+
var size_divider;
switch (size) {
case 0:
- size_divider = 1;
- break;
+ size_divider = 1;
+ break;
case 1:
- size_divider = kilobit;
- break;
+ size_divider = kilobit;
+ break;
case 2:
- size_divider = megabit;
- break;
+ size_divider = megabit;
+ break;
case 3:
- size_divider = gigabit;
- break;
+ size_divider = gigabit;
+ break;
case 4:
- size_divider = terabit;
- break;
+ size_divider = terabit;
+ break;
}
-
+
// Bytes in
var data = [];
serie['values'].forEach(function(element) {
data.push({t: new Date(element[0]), y: element[1] / size_divider });
});
- dataset.push({data: data, backgroundColor:'rgba(58,125,48,200)', label:'Traffic in (' + sizeToText(size)+')'});
-
+ dataset.push({data: data, backgroundColor:'rgba(100,155,100,0.8)', label:'Traffic in (' + sizeToText(size)+')'});
+
// Bytes out
data = [];
serie['values'].forEach(function(element) {
data.push({t: new Date(element[0]), y: -Math.abs(element[2] / size_divider) });
});
- dataset.push({data: data, backgroundColor:'rgba(84,84,142,225)', label:'Traffic out (' + sizeToText(size)+')'});
-
-
+ dataset.push({data: data, backgroundColor:'rgba(0,155,200,0.8)', label:'Traffic out (' + sizeToText(size)+')'});
+
+
// Draw the chart
var ctx = document.getElementById(canvas).getContext('2d');
var myChart = new Chart(ctx, {
@@ -311,11 +298,14 @@ function drawPort(canvas, sw, port) {
responsive: true,
animation: false,
elements: {
+ point: {
+ radius: 0
+ },
line: {
- tension: 0
+ tension: 0.3
}
}
-
+
}
});
});
@@ -327,7 +317,7 @@ function bitToSize(bits) {
var megabit = kilobit * 1024;
var gigabit = megabit * 1024;
var terabit = gigabit * 1024;
-
+
if(bits >= 0 && bits < kilobit) {
return 0;
}
@@ -348,19 +338,19 @@ function bitToSize(bits) {
function sizeToText(size) {
switch(size) {
case 0:
- return 'bit/s';
- break;
+ return 'bit/s';
+ break;
case 1:
- return 'Kb/s';
- break;
+ return 'Kb/s';
+ break;
case 2:
- return 'Mb/s';
- break;
+ return 'Mb/s';
+ break;
case 3:
- return 'Gb/s';
- break;
+ return 'Gb/s';
+ break;
case 4:
- return 'Tb/s';
- break;
+ return 'Tb/s';
+ break;
}
}
diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js
index 4de8f3e..859b0ff 100644
--- a/web/js/nms-info-box.js
+++ b/web/js/nms-info-box.js
@@ -895,7 +895,7 @@ var switchLatencyPanel = function() {
var latency = document.createElement("canvas");
latency.id = this.sw+'latency_chart';
latency.width = 500;
- latency.height = 50;
+ latency.height = 80;
drawLatency(this.sw+'latency_chart',this.sw, false, function(chart) { latencyChart = chart; });
topper.appendChild(latency);
this._render(topper);
@@ -938,6 +938,10 @@ nmsInfoBox.setLegendPick = function(tag,id) {
nmsInfoBox.addPanelType("switchSummary",switchSummaryPanel);
+var copybuttonfunc = function(text) {
+ console.log('clickened', text);
+ navigator.clipboard.writeText(text);
+}
var switchLinks = function() {
nmsInfoPanel.call(this,"switchLinks");
var latencyChart;
@@ -954,18 +958,30 @@ var switchLinks = function() {
var topp = document.createElement("div")
var urls = [ "http://gondul.tg23.gathering.org/api/templates/magic.conf/switch=" + sw,
- "http://185.110.148.105/api/templates/magic.conf/switch=" + sw ];
+ "http://185.110.148.105/api/templates/magic.conf/switch=" + sw,
+ "http://gondul.tg23.gathering.org/api/write/fap/" + sw
+ ];
if (testTree(nmsData,['smanagement','switches',sw])) {
var mg = nmsData["smanagement"]["switches"][sw];
urls.push("ssh://[" + mg.mgmt_v6_addr + "]");
urls.push("ssh://" + mg.mgmt_v4_addr);
}
for (var x in urls) {
+ console.log("create link")
topp.appendChild(document.createElement("br"));
+ var container = document.createElement("div");
var link = document.createElement("a");
link.href = urls[x];
link.textContent = urls[x];
- topp.appendChild(link);
+ var copybutton = document.createElement("button");
+ copybutton.setAttribute("onclick", "copybuttonfunc('"+urls[x]+"')");
+ copybutton.type = "button";
+ var btnText = document.createTextNode("copy url");
+ copybutton.className = "btn btn-primary";
+ copybutton.appendChild(btnText);
+ container.appendChild(link);
+ container.appendChild(copybutton);
+ topp.appendChild(container);
}
this._render(topp);
};
diff --git a/web/js/nms-map-handlers.js b/web/js/nms-map-handlers.js
index 03ee2ea..275e5e2 100644
--- a/web/js/nms-map-handlers.js
+++ b/web/js/nms-map-handlers.js
@@ -200,7 +200,7 @@ function uplinkInfo(sw)
var tu = parseInt(nmsData.switchstate.switches[sw].clients.live);
var tt = parseInt(nmsData.switchstate.switches[sw].clients.total);
ret.data[1] = {};
- ret.data[1].value = (tu && tt) ? (tu) + " / " + (tt) : "None configured";
+ ret.data[1].value = tt ? (tu) + " / " + (tt) : "None configured";
ret.data[1].description = "Client ports (live/total)";
}
if (testTree(nmsData,['switchstate','switches',sw,'totals','live'])) {
@@ -432,6 +432,36 @@ function pingUpdater()
}
}
}
+function printDiff(t)
+{
+ var str = "";
+ if (t.d > 1)
+ str = t.d + " days";
+ else if (t.d == 1)
+ str = t.d + " day";
+
+ if (t.h > 1)
+ str += " " + t.h + " hours";
+ else if (t.h == 1)
+ str += " " + t.h + " hour";
+ else if (t.d > 0)
+ str += " 0 hours";
+
+ if (t.m > 1)
+ str += " " + t.m + " minutes";
+ else if (t.m == 1)
+ str += " " + t.m + " minute";
+ else if (t.d > 0 || t.h > 0)
+ str += " 0 minutes";
+
+ if (t.s > 1)
+ str += " " + t.s + " seconds";
+ else if (t.s == 1)
+ str += " " + t.s + " second";
+ else if (t.d > 0 || t.h > 0 || t.m > 0)
+ str += " 0 seconds";
+ return str;
+}
function pingInfo(sw)
{
@@ -445,11 +475,8 @@ function pingInfo(sw)
v4 = undefined;
if (v6 == undefined || v6 == null || isNaN(v6))
v6 = undefined;
- ret.data[0].value = v4;
- ret.data[0].description = "IPv4 latency(ms)";
- ret.data[1] = {};
- ret.data[1].value = v6;
- ret.data[1].description = "IPv6 latency(ms)";
+ ret.data[0].value = v6 + " (v4: " + v4 + " )";
+ ret.data[0].description = "Latency(ms)";
if (v4 == undefined && v6 == undefined) {
ret.score = 1000;
ret.why = "No IPv4 or IPv6 ping reply";
@@ -485,6 +512,9 @@ function pingInfo(sw)
var distro = nmsData['smanagement']['switches'][sw]['distro_name'];
var phy = nmsData['smanagement']['switches'][sw]['distro_phy_port'];
if (!(distro == "" || phy == "" || distro == undefined || phy == undefined)) {
+ ret.data[3] = {};
+ ret.data[3].description = "Distro-port";
+ ret.data[3].value = distro + " " + phy;
if (testTree(nmsData,['snmp','snmp',distro, 'ports',phy,'ifOperStatus'])) {
var x = nmsData['snmp']['snmp'][distro]['ports'][phy]['ifOperStatus'];
var ping = "no";
@@ -494,13 +524,30 @@ function pingInfo(sw)
ping6 = parseFloat(nmsData["ping"]["switches"][sw]["latency6"]);
} catch(e) {}
if (x == "up") {
- ret.data[3] = {};
- ret.data[3].description = "Distro-port";
- ret.data[3].value = "Distro port is live";
+ ret.data[3].value += " (😇 up!)";
if (isNaN(ping) && isNaN(ping6)) {
ret.score = 700;
- ret.why = "Distro port is alive, but no IPv4/IPv6 ping. ROLLBACK!";
+ ret.why = "Distro port is alive, but no IPv4/IPv6 ping.";
+ if (testTree(nmsData,['snmp','snmp',distro, 'ports',phy,'ifLastChange'])) {
+ if (testTree(nmsData,['snmp','snmp',distro, 'misc','sysUpTimeInstance'])) {
+ ret.data[4] = {};
+ ret.data[4].description = 'Distro port changed';
+ diff = (parseInt(nmsData['snmp']['snmp'][distro]['misc']['sysUpTimeInstance']['']) - parseInt(nmsData['snmp']['snmp'][distro]['ports'][phy]['ifLastChange'])) / 100;
+ var diff2 = {
+ d:parseInt((diff/60/60/24)),
+ h:parseInt((diff/60/60)%24),
+ m:parseInt((diff/60)%60),
+ s:parseInt(diff%60)
+ }
+
+
+
+ ret.data[4].value = printDiff(diff2);
+ }
+ }
}
+ } else {
+ ret.data[3].value += " (👺down)";
}
}
}
@@ -545,7 +592,7 @@ function dhcpUpdater()
var c = nmsColor.blue;
var sv4 = nmsData.dhcp.dhcp4[nmsData.smanagement.switches[sw].traffic_vlan];
var sv6 = nmsData.dhcp.dhcp6[nmsData.smanagement.switches[sw].traffic_vlan];
- if (sv4 == undefined || sv6 == undefined) {
+ if (sv4 == undefined && sv6 == undefined) {
nmsMap.setSwitchColor(sw,c);
continue;
}
@@ -580,7 +627,7 @@ function dhcpInfo(sw) {
var now = nmsData.dhcp.time;
var then = nmsData.dhcp.dhcp4[nmsData.smanagement.switches[sw].traffic_vlan];
var diff = now - then;
- var divider = 6;
+ var divider = 10;
if (dhcpClients < 10) {
divider = 12;
}
@@ -616,7 +663,7 @@ function dhcpInfo(sw) {
var now = nmsData.dhcp.time;
var then = nmsData.dhcp.dhcp6[nmsData.smanagement.switches[sw].traffic_vlan];
var diff = now - then;
- var divider = 6;
+ var divider = 10;
if (dhcpClients < 10) {
divider = 12;
}
@@ -958,30 +1005,18 @@ function networkInfo(sw) {
}
ret.data[i++] = {
- value: a.v.name || "Not set",
+ value: (a.v.name || "Not set") + " " + "vlan: " + (a.v.vlan || "Not set"),
description: a.d + " network"
}
- ret.data[i++] = {
- value: a.v.vlan || "Not set",
- description: a.d + " vlan"
- }
ret.data[i++] = {
value: a.v.subnet4 || "Not set",
description: a.d + " subnet IPv4"
}
ret.data[i++] = {
- value: a.v.gw4 || "Not set",
- description: a.d + " gw IPv4"
- }
- ret.data[i++] = {
value: a.v.subnet6 || "Not set",
description: a.d + " subnet IPv6"
}
ret.data[i++] = {
- value: a.v.gw6 || "Not set",
- description: a.d + " gw IPv6"
- }
- ret.data[i++] = {
value: a.v.router || "Not set",
description: a.d + " net router"
}
@@ -997,14 +1032,8 @@ function mgmtInfo(sw) {
var mg = nmsData.smanagement.switches[sw];
ret.data =
[{
- value: mg.mgmt_v4_addr || "N/A",
- description: "Management IP (v4)"
- }, {
- value: mg.mgmt_v6_addr || "N/A",
- description: "Management IP (v6)"
- }, {
- value: mg.distro_name || "N/A",
- description: "Distro"
+ value: (mg.mgmt_v4_addr || "N/A") + " / " + (mg.mgmt_v6_addr || "N/A"),
+ description: "Management IP"
}
];
if ((mg.mgmt_v4_addr == undefined || mg.mgmt_v4_addr == "") && (mg.mgmt_v6_addr == undefined || mg.mgmt_v6_addr == "")) {
@@ -1015,7 +1044,7 @@ function mgmtInfo(sw) {
ret.score = 550;
} else if (mg.mgmt_v6_addr == undefined || mg.mgmt_v6_addr == "") {
ret.why = "No IPv6 management IP";
- ret.score = 550;
+ ret.score = 560;
if (tagged(sw,'ignorev6')) {
ret.score = 0;
}
diff --git a/web/js/nms-map.js b/web/js/nms-map.js
index d5bc044..18a22b4 100644
--- a/web/js/nms-map.js
+++ b/web/js/nms-map.js
@@ -333,8 +333,17 @@ nmsMap._drawSwitch = function(sw)
this._c.switch.ctx.shadowBlur = 0;
var switchtext = sw;
var textl = switchtext.length;
- if (textl > 12)
- switchtext = switchtext.slice(0,7) + ".." + switchtext.slice(textl-2,textl);
+ // Cut switch name if longer than this
+ var text_cut_l = 14;
+ // Cut switch name by more if we have a status indicator
+ if (this._info[sw]) {
+ text_cut_l -= this._info[sw].length
+ }
+ if (textl > text_cut_l) {
+ var rhs_text = this._info[sw];
+
+ switchtext = switchtext.slice(0,text_cut_l - 5) + ".." + switchtext.slice(textl-2,textl);
+ }
if (this._lastName[sw] != switchtext) {
nmsMap.stats.textSwitchDraws++;
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-19 12:00:28 +0000