From 13eb05560576dc18cfc7aeb17b31d9cd9adf3637 Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sat, 17 Mar 2018 03:01:46 +0100 Subject: Added a litle better color scheme to charts and some words about securing influx --- web/js/nms-draw-chart.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) (limited to 'web/js/nms-draw-chart.js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index be463bf..056a95f 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -1,5 +1,14 @@ "use strict"; +function setNightModeChart(night) { + if(night) { + Chart.defaults.global.defaultFontColor = "#fff"; + } + else { + Chart.defaults.global.defaultFontColor = "#222"; + } +} + function drawLatency(canvas, sw) { var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 15m AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)'); var dataset = []; @@ -10,7 +19,7 @@ function drawLatency(canvas, sw) { serie['values'].forEach(function(element) { data.push({t: new Date(element[0]), y: element[1]}); }); - dataset.push({data: data, label:serie['tags']['version'] }); + dataset.push({data: data, backgroundColor:'rgba(66,139,202,255)', label:serie['tags']['version'] }); }); var ctx = document.getElementById(canvas).getContext('2d'); var myChart = new Chart(ctx, { @@ -110,14 +119,14 @@ function drawSumOfPorts(canvas, sw) { serie['values'].forEach(function(element) { data.push({t: new Date(element[0]), y: element[1] / size_divider }); }); - dataset.push({data: data, backgroundColor:'rgba(0,204,255,10)', label:'Traffic in (' + sizeToText(size)+')'}); + dataset.push({data: data, backgroundColor:'rgba(38,105,28,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(204,255,102,10)', label:'Traffic out (' + sizeToText(size)+')'}); + dataset.push({data: data, backgroundColor:'rgba(64,64,122,225)', label:'Traffic out (' + sizeToText(size)+')'}); }); @@ -166,6 +175,9 @@ function drawSumOfPorts(canvas, sw) { elements: { point: { radius: 0 + }, + line: { + tension: 0 } } } @@ -239,14 +251,14 @@ function drawPort(canvas, sw, port) { serie['values'].forEach(function(element) { data.push({t: new Date(element[0]), y: element[1] / size_divider }); }); - dataset.push({data: data, backgroundColor:'rgba(0,204,255,10)', label:'Traffic in (' + sizeToText(size)+')'}); + dataset.push({data: data, backgroundColor:'rgba(38,105,28,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(204,255,102,10)', label:'Traffic out (' + sizeToText(size)+')'}); + dataset.push({data: data, backgroundColor:'rgba(64,64,122,225)', label:'Traffic out (' + sizeToText(size)+')'}); // Draw the chart @@ -286,6 +298,12 @@ function drawPort(canvas, sw, port) { }, responsive: true, animation: false, + elements: { + line: { + tension: 0 + } + } + } }); }); -- cgit v1.2.3 From 8607a0880724eca35c220f7c26a138d9f0f50f72 Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sat, 17 Mar 2018 03:54:28 +0100 Subject: Small change to latency chart --- web/js/nms-draw-chart.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'web/js/nms-draw-chart.js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index 056a95f..b45d771 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -10,7 +10,7 @@ function setNightModeChart(night) { } function drawLatency(canvas, sw) { - var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 15m AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)'); + var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 30m AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)'); var dataset = []; $.getJSON( "/query?db=gondul&q="+q, function( results ) { @@ -46,6 +46,11 @@ function drawLatency(canvas, sw) { }, responsive: true, animation: false, + elements: { + line: { + tension: 0.05 + } + } } }); }); -- cgit v1.2.3 From dc97b997e8d6e5edc63c598c05090a8b98e79757 Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sat, 17 Mar 2018 18:03:23 +0100 Subject: Added support for delete switches --- web/js/nms-draw-chart.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'web/js/nms-draw-chart.js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index b45d771..ca5e244 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -124,14 +124,14 @@ function drawSumOfPorts(canvas, sw) { serie['values'].forEach(function(element) { data.push({t: new Date(element[0]), y: element[1] / size_divider }); }); - dataset.push({data: data, backgroundColor:'rgba(38,105,28,200)', label:'Traffic in (' + sizeToText(size)+')'}); + 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(64,64,122,225)', label:'Traffic out (' + sizeToText(size)+')'}); + dataset.push({data: data, backgroundColor:'rgba(84,84,142,225)', label:'Traffic out (' + sizeToText(size)+')'}); }); @@ -256,14 +256,14 @@ function drawPort(canvas, sw, port) { serie['values'].forEach(function(element) { data.push({t: new Date(element[0]), y: element[1] / size_divider }); }); - dataset.push({data: data, backgroundColor:'rgba(38,105,28,200)', label:'Traffic in (' + sizeToText(size)+')'}); + 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(64,64,122,225)', label:'Traffic out (' + sizeToText(size)+')'}); + dataset.push({data: data, backgroundColor:'rgba(84,84,142,225)', label:'Traffic out (' + sizeToText(size)+')'}); // Draw the chart -- cgit v1.2.3 From d6909b970234d950db0531a245f60333637956aa Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sat, 17 Mar 2018 19:44:01 +0100 Subject: latencyChart autoupdate --- web/js/nms-draw-chart.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'web/js/nms-draw-chart.js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index ca5e244..e52bd7a 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -9,7 +9,7 @@ function setNightModeChart(night) { } } -function drawLatency(canvas, sw) { +function drawLatency(canvas, sw, chart, callback) { var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 30m AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)'); var dataset = []; @@ -21,7 +21,12 @@ function drawLatency(canvas, sw) { }); dataset.push({data: data, backgroundColor:'rgba(66,139,202,255)', label:serie['tags']['version'] }); }); - var ctx = document.getElementById(canvas).getContext('2d'); + if(chart != false) { + chart.data.datasets = dataset; + chart.update(); + return; + } + var ctx = document.getElementById(canvas).getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { @@ -43,6 +48,11 @@ function drawLatency(canvas, sw) { }, } }], + yAxes: [{ + ticks: { + beginAtZero: true + } + }] }, responsive: true, animation: false, @@ -53,6 +63,9 @@ function drawLatency(canvas, sw) { } } }); + if(callback != undefined) { + callback(myChart); + } }); } -- cgit v1.2.3 From dfc74df8f82d7c295319f3e197cb2d37a8ee6ddd Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sun, 18 Mar 2018 15:44:28 +0100 Subject: Color tweak to latency chart --- web/js/nms-draw-chart.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'web/js/nms-draw-chart.js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index e52bd7a..da621e7 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -3,9 +3,11 @@ function setNightModeChart(night) { if(night) { Chart.defaults.global.defaultFontColor = "#fff"; + Chart.defaults.scale.gridLines.color = "#444" } else { Chart.defaults.global.defaultFontColor = "#222"; + Chart.defaults.scale.gridLines.color = "#ddd" } } @@ -19,7 +21,12 @@ function drawLatency(canvas, sw, chart, callback) { serie['values'].forEach(function(element) { data.push({t: new Date(element[0]), y: element[1]}); }); - dataset.push({data: data, backgroundColor:'rgba(66,139,202,255)', label:serie['tags']['version'] }); + var borderColor = "rgba(0,155,200,255)"; + console.log(serie['tags']['version']); + if(serie['tags']['version'] === "v6") { + borderColor = "rgba(100,155,100,255)"; + } + dataset.push({data: data, fill:false, borderColor:borderColor, label:serie['tags']['version'] }); }); if(chart != false) { chart.data.datasets = dataset; @@ -33,6 +40,9 @@ function drawLatency(canvas, sw, chart, callback) { datasets: dataset }, options: { + legend: { + display: false + }, scales: { xAxes:[{ type: 'time', @@ -81,7 +91,6 @@ function drawSumOfPorts(canvas, sw) { var dataset = []; $.getJSON( "/query?db=gondul&q="+q, function( results ) { - console.log(results); var bits_in = []; var bits_out = []; @@ -211,14 +220,11 @@ function drawPort(canvas, sw, port) { var gigabit = megabit * 1024; var terabit = gigabit * 1024; - console.log(sw); - console.log(port); 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 dataset = []; $.getJSON( "/query?db=gondul&q="+q, function( results ) { - console.log(results); var serie = results['results'][0]['series'][0]; -- cgit v1.2.3