From 167617437ebaaa54799e45165f1dbb83433d1bf6 Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Fri, 14 Sep 2018 18:16:47 +0000 Subject: Cleanup of latencychart --- web/js/nms-draw-chart.js | 8 ++++---- web/js/nms-info-box.js | 51 ++++++++++++++++++++++++++++++++++++------------ 2 files changed, 42 insertions(+), 17 deletions(-) (limited to 'web/js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index 60698c0..491b216 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -12,7 +12,7 @@ function setNightModeChart(night) { } 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 q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 3h AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)'); var dataset = []; $.getJSON( "/query?db=gondul&q="+q, function( results ) { @@ -47,7 +47,7 @@ function drawLatency(canvas, sw, chart, callback) { xAxes:[{ type: 'time', time: { - format: "HH:mm", + parser: "HH:mm", unit: 'minute', tooltipFormat: 'HH:mm', displayFormats: { @@ -176,7 +176,7 @@ function drawSumOfPorts(canvas, sw) { xAxes:[{ type: 'time', time: { - format: "HH:mm", + parser: "HH:mm", unit: 'minute', tooltipFormat: 'HH:mm', displayFormats: { @@ -300,7 +300,7 @@ function drawPort(canvas, sw, port) { xAxes:[{ type: 'time', time: { - format: "HH:mm", + parser: "HH:mm", unit: 'minute', tooltipFormat: 'HH:mm', displayFormats: { diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js index a7ddfc1..ba6446d 100644 --- a/web/js/nms-info-box.js +++ b/web/js/nms-info-box.js @@ -40,7 +40,7 @@ var nmsInfoBox = nmsInfoBox || { 'views': { 'initial': { 'name': 'Summary', - 'panels': ['switchSummary','switchComments'] + 'panels': ['switchLatency','switchSummary','switchComments'] }, 'ports': { 'name': 'Ports', @@ -1169,6 +1169,42 @@ var switchCommentsPanel = function () { }; nmsInfoBox.addPanelType("switchComments",switchCommentsPanel); +/* + * Panel type: Switch latency + * + * Display a live line chart with latency + * + */ +var switchLatencyPanel = function() { + nmsInfoPanel.call(this,"switchLatency"); + var latencyChart; + this.init = function() { + this.addHandler("ticker"); + this.refresh(); + }; + this.refresh = function(reason) { + if (this.sw == false) { + console.log("ugh, cleanup failed?"); + return; + } + + if(reason == 'handler-ticker' && latencyChart != undefined) { + drawLatency(this.sw+'latency_chart',this.sw, latencyChart); + return; + } + + var topper = document.createElement("div"); + var latency = document.createElement("canvas"); + latency.id = this.sw+'latency_chart'; + latency.width = 500; + latency.height = 250; + drawLatency(this.sw+'latency_chart',this.sw, false, function(chart) { latencyChart = chart; }); + topper.appendChild(latency); + this._render(topper); + }; +}; +nmsInfoBox.addPanelType("switchLatency",switchLatencyPanel); + /* * Panel type: Switch summary * @@ -1188,12 +1224,6 @@ var switchSummaryPanel = function() { console.log("ugh, cleanup failed?"); return; } - - if(reason == 'handler-ticker' && latencyChart != undefined) { - drawLatency(this.sw+'latency_chart',this.sw, latencyChart); - //TODO Fix so it will update table to - return; - } var topper = document.createElement("div"); for ( var h in handlers ) { if (handlers[h].getInfo != undefined) { @@ -1214,12 +1244,6 @@ var switchSummaryPanel = function() { contentCleaned.push(content[i]); } var table = nmsInfoBox._makeTable(contentCleaned); - var latency = document.createElement("canvas"); - latency.id = this.sw+'latency_chart'; - latency.width = 500; - latency.height = 250; - drawLatency(this.sw+'latency_chart',this.sw, false, function(chart) { latencyChart = chart; }); - topper.appendChild(latency); topper.appendChild(table); this._render(topper); @@ -1234,6 +1258,7 @@ nmsInfoBox.setLegendPick = function(tag,id) { } nms.legendPick = {handler: tag, idx: id}; } + nmsInfoBox.addPanelType("switchSummary",switchSummaryPanel); var switchLinks = function() { -- cgit v1.2.3 From 42fe59de7cd590b21202866760d5f8dd12fbcfa0 Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Wed, 31 Oct 2018 22:58:03 +0100 Subject: Code formating cleanup of chart and 1 hour latency chart --- web/js/nms-draw-chart.js | 358 +++++++++++++++++++++++------------------------ 1 file changed, 179 insertions(+), 179 deletions(-) (limited to 'web/js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index 491b216..6f790dc 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -12,10 +12,10 @@ function setNightModeChart(night) { } function drawLatency(canvas, sw, chart, callback) { - var q = encodeURIComponent('SELECT mean("latency") AS "mean_latency" FROM "ping" WHERE time > now() - 3h AND "switch"=\''+sw+'\' GROUP BY time(60s), "version" fill(null)'); - var dataset = []; - - $.getJSON( "/query?db=gondul&q="+q, function( results ) { + 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) { var data = []; @@ -31,7 +31,7 @@ function drawLatency(canvas, sw, chart, callback) { if(chart != false) { chart.data.datasets = dataset; chart.update(); - return; + return; } var ctx = document.getElementById(canvas).getContext('2d'); var myChart = new Chart(ctx, { @@ -75,134 +75,134 @@ function drawLatency(canvas, sw, chart, callback) { }); } catch(e) { } - if(callback != undefined) { - callback(myChart); - } - }); + if(callback != undefined) { + callback(myChart); + } + }); } function drawSumOfPorts(canvas, sw) { - var kilobit = 1024; - var megabit = kilobit * 1024; - var gigabit = megabit * 1024; - var terabit = gigabit * 1024; + 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+'\' 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() - 30m AND "switch"=\''+sw+'\' GROUP BY time(90s),"interface" fill(null)'); - var dataset = []; + var dataset = []; - $.getJSON( "/query?db=gondul&q="+q, function( results ) { + $.getJSON( "/query?db=gondul&q="+q, function( results ) { - var bits_in = []; - var bits_out = []; + var bits_in = []; + var bits_out = []; - results['results'][0]['series'].forEach(function(serie) { + results['results'][0]['series'].forEach(function(serie) { - // Bytes in - serie['values'].forEach(function(element) { - bits_in.push(element[1]); - }); + // Bytes in + serie['values'].forEach(function(element) { + bits_in.push(element[1]); + }); - // Bytes out - serie['values'].forEach(function(element) { - bits_out.push(element[2]); - }); + // 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; - case 1: - size_divider = kilobit; - break; - case 2: - size_divider = megabit; - break; - case 3: - size_divider = gigabit; - break; - case 4: - size_divider = terabit; - break; - } + 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; + case 1: + size_divider = kilobit; + break; + case 2: + size_divider = megabit; + break; + case 3: + size_divider = gigabit; + break; + case 4: + 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 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)+')'}); + // 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)+')'}); }); - // Draw the chart - var ctx = document.getElementById(canvas).getContext('2d'); - var myChart = new Chart(ctx, { - type: 'line', - data: { - datasets: dataset - }, - options: { + // Draw the chart + var ctx = document.getElementById(canvas).getContext('2d'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + datasets: dataset + }, + options: { legend: { display: false }, - scales: { - xAxes:[{ - type: 'time', - time: { - parser: "HH:mm", - unit: 'minute', - tooltipFormat: 'HH:mm', - displayFormats: { - 'minute': 'HH:mm', - 'hour': 'HH:mm', - min: '00:00', - max: '23:59' - }, - } - }], - yAxes: [{ + scales: { + xAxes:[{ + type: 'time', + time: { + parser: "HH:mm", + unit: 'minute', + tooltipFormat: 'HH:mm', + displayFormats: { + 'minute': 'HH:mm', + 'hour': 'HH:mm', + min: '00:00', + max: '23:59' + }, + } + }], + yAxes: [{ stacked: true, - ticks: { - callback: function(label, index, labels) { - return Math.abs(label)+' '+sizeToText(size); - } - }, - scaleLabel: { - display: true, - labelString: sw+' - All ports' - } - }] - }, - responsive: true, - animation: false, - elements: { + ticks: { + callback: function(label, index, labels) { + return Math.abs(label)+' '+sizeToText(size); + } + }, + scaleLabel: { + display: true, + labelString: sw+' - All ports' + } + }] + }, + responsive: true, + animation: false, + elements: { point: { radius: 0 }, @@ -210,44 +210,44 @@ function drawSumOfPorts(canvas, sw) { tension: 0 } } - } - }); - }); + } + }); + }); } function drawPort(canvas, sw, port) { - var kilobit = 1024; - var megabit = kilobit * 1024; - var gigabit = megabit * 1024; - var terabit = gigabit * 1024; + 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 dataset = []; - $.getJSON( "/query?db=gondul&q="+q, function( results ) { + $.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) { + 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; - + var size = 0; + if(bits_in_size >= bits_out_size) { size = bits_in_size; } else { @@ -257,59 +257,59 @@ function drawPort(canvas, sw, port) { 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)+')'}); + 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)+')'}); + // 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)+')'}); // Draw the chart - var ctx = document.getElementById(canvas).getContext('2d'); - var myChart = new Chart(ctx, { - type: 'line', - data: { - datasets: dataset - }, - options: { - scales: { - xAxes:[{ - type: 'time', - time: { - parser: "HH:mm", - unit: 'minute', - tooltipFormat: 'HH:mm', - displayFormats: { - 'minute': 'HH:mm', - 'hour': 'HH:mm', - min: '00:00', - max: '23:59' - }, - } + var ctx = document.getElementById(canvas).getContext('2d'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + datasets: dataset + }, + options: { + scales: { + xAxes:[{ + type: 'time', + time: { + parser: "HH:mm", + unit: 'minute', + tooltipFormat: 'HH:mm', + displayFormats: { + 'minute': 'HH:mm', + 'hour': 'HH:mm', + min: '00:00', + max: '23:59' + }, + } }], yAxes: [{ ticks: { @@ -322,18 +322,18 @@ function drawPort(canvas, sw, port) { labelString: sw+' - '+port } }] - }, - responsive: true, - animation: false, - elements: { + }, + responsive: true, + animation: false, + elements: { line: { tension: 0 } } - } - }); - }); + } + }); + }); } @@ -361,22 +361,22 @@ function bitToSize(bits) { } } -function sizeToText(size) { +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; } } -- cgit v1.2.3 From b7f0ccac45c824461a7bc959cedaeb11ee582c48 Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Wed, 31 Oct 2018 23:01:54 +0100 Subject: Code formating cleanup of chart and 1 hour latency chart --- web/js/nms-draw-chart.js | 704 +++++++++++++++++++++++------------------------ 1 file changed, 344 insertions(+), 360 deletions(-) (limited to 'web/js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index 6f790dc..1a08b21 100644 --- a/web/js/nms-draw-chart.js +++ b/web/js/nms-draw-chart.js @@ -1,382 +1,366 @@ "use strict"; 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" - } + 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" + } } 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) { - var data = []; - serie['values'].forEach(function(element) { - data.push({t: new Date(element[0]), y: element[1]}); - }); - var borderColor = "rgba(0,155,200,255)"; - 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; - chart.update(); - return; - } - var ctx = document.getElementById(canvas).getContext('2d'); - var myChart = new Chart(ctx, { - type: 'line', - data: { - datasets: dataset - }, - options: { - legend: { - display: false - }, - scales: { - xAxes:[{ - type: 'time', - time: { - parser: "HH:mm", - unit: 'minute', - tooltipFormat: 'HH:mm', - displayFormats: { - 'minute': 'HH:mm', - 'hour': 'HH:mm', - min: '00:00', - max: '23:59' - }, - } - }], - yAxes: [{ - ticks: { - beginAtZero: true - } - }] - }, - responsive: true, - animation: false, - elements: { - line: { - tension: 0.05 - } - } - } - }); - } catch(e) { - } - if(callback != undefined) { - callback(myChart); - } - }); + 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) { + var data = []; + serie['values'].forEach(function(element) { + data.push({t: new Date(element[0]), y: element[1]}); + }); + var borderColor = "rgba(0,155,200,255)"; + 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; + chart.update(); + return; + } + var ctx = document.getElementById(canvas).getContext('2d'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + datasets: dataset + }, + options: { + legend: { + display: false + }, + scales: { + xAxes:[{ + type: 'time', + time: { + parser: "HH:mm", + unit: 'minute', + tooltipFormat: 'HH:mm', + displayFormats: { + 'minute': 'HH:mm', + 'hour': 'HH:mm', + min: '00:00', + max: '23:59' + }, + } + }], + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + }, + responsive: true, + animation: false, + elements: { + line: { + tension: 0.05 + } + } + } + }); + } catch(e) { + } + if(callback != undefined) { + callback(myChart); + } + }); } function drawSumOfPorts(canvas, sw) { - - 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+'\' 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]); - }); - - - }); - - 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; - case 1: - size_divider = kilobit; - break; - case 2: - size_divider = megabit; - break; - case 3: - size_divider = gigabit; - break; - case 4: - 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)+')'}); - - - }); - - // Draw the chart - var ctx = document.getElementById(canvas).getContext('2d'); - var myChart = new Chart(ctx, { - type: 'line', - data: { - datasets: dataset - }, - options: { - legend: { - display: false - }, - scales: { - xAxes:[{ - type: 'time', - time: { - parser: "HH:mm", - unit: 'minute', - tooltipFormat: 'HH:mm', - displayFormats: { - 'minute': 'HH:mm', - 'hour': 'HH:mm', - min: '00:00', - max: '23:59' - }, - } - }], - yAxes: [{ - stacked: true, - ticks: { - callback: function(label, index, labels) { - return Math.abs(label)+' '+sizeToText(size); - } - }, - scaleLabel: { - display: true, - labelString: sw+' - All ports' - } - }] - }, - responsive: true, - animation: false, - elements: { - point: { - radius: 0 - }, - line: { - tension: 0 - } - } - } - }); - }); + 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+'\' 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]); + }); + }); + + 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; + case 1: + size_divider = kilobit; + break; + case 2: + size_divider = megabit; + break; + case 3: + size_divider = gigabit; + break; + case 4: + 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)+')'}); + }); + + // Draw the chart + var ctx = document.getElementById(canvas).getContext('2d'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + datasets: dataset + }, + options: { + legend: { + display: false + }, + scales: { + xAxes:[{ + type: 'time', + time: { + parser: "HH:mm", + unit: 'minute', + tooltipFormat: 'HH:mm', + displayFormats: { + 'minute': 'HH:mm', + 'hour': 'HH:mm', + min: '00:00', + max: '23:59' + }, + } + }], + yAxes: [{ + stacked: true, + ticks: { + callback: function(label, index, labels) { + return Math.abs(label)+' '+sizeToText(size); + } + }, + scaleLabel: { + display: true, + labelString: sw+' - All ports' + } + }] + }, + responsive: true, + animation: false, + elements: { + point: { + radius: 0 + }, + line: { + tension: 0 + } + } + } + }); + }); } 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 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; - case 1: - size_divider = kilobit; - break; - case 2: - size_divider = megabit; - break; - case 3: - size_divider = gigabit; - break; - case 4: - 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)+')'}); - - // 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)+')'}); - - - // Draw the chart - var ctx = document.getElementById(canvas).getContext('2d'); - var myChart = new Chart(ctx, { - type: 'line', - data: { - datasets: dataset - }, - options: { - scales: { - xAxes:[{ - type: 'time', - time: { - parser: "HH:mm", - unit: 'minute', - tooltipFormat: 'HH:mm', - displayFormats: { - 'minute': 'HH:mm', - 'hour': 'HH:mm', - min: '00:00', - max: '23:59' - }, - } - }], - yAxes: [{ - ticks: { - callback: function(label, index, labels) { - return Math.abs(label)+' '+sizeToText(size); - } - }, - scaleLabel: { - display: true, - labelString: sw+' - '+port - } - }] - }, - responsive: true, - animation: false, - elements: { - line: { - tension: 0 - } - } - - } - }); - }); + 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 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; + case 1: + size_divider = kilobit; + break; + case 2: + size_divider = megabit; + break; + case 3: + size_divider = gigabit; + break; + case 4: + 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)+')'}); + + // 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)+')'}); + + + // Draw the chart + var ctx = document.getElementById(canvas).getContext('2d'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + datasets: dataset + }, + options: { + scales: { + xAxes:[{ + type: 'time', + time: { + parser: "HH:mm", + unit: 'minute', + tooltipFormat: 'HH:mm', + displayFormats: { + 'minute': 'HH:mm', + 'hour': 'HH:mm', + min: '00:00', + max: '23:59' + }, + } + }], + yAxes: [{ + ticks: { + callback: function(label, index, labels) { + return Math.abs(label)+' '+sizeToText(size); + } + }, + scaleLabel: { + display: true, + labelString: sw+' - '+port + } + }] + }, + responsive: true, + animation: false, + elements: { + line: { + tension: 0 + } + } + + } + }); + }); } function bitToSize(bits) { - - var kilobit = 1024; - var megabit = kilobit * 1024; - var gigabit = megabit * 1024; - var terabit = gigabit * 1024; - - if(bits >= 0 && bits < kilobit) { - return 0; - } - else if(bits >= kilobit && bits < megabit){ - return 1; - } - else if(bits >= megabit && bits < gigabit){ - return 2; - } - else if(bits >= gigabit && bits < terabit){ - return 3; - } - else if(bits >= terabit) { - return 4; - } + var kilobit = 1024; + var megabit = kilobit * 1024; + var gigabit = megabit * 1024; + var terabit = gigabit * 1024; + + if(bits >= 0 && bits < kilobit) { + return 0; + } + else if(bits >= kilobit && bits < megabit){ + return 1; + } + else if(bits >= megabit && bits < gigabit){ + return 2; + } + else if(bits >= gigabit && bits < terabit){ + return 3; + } + else if(bits >= terabit) { + return 4; + } } function sizeToText(size) { - switch(size) { - case 0: - return 'bit/s'; - break; - case 1: - return 'kb/s'; - break; - case 2: - return 'mb/s'; - break; - case 3: - return 'gb/s'; - break; - case 4: - return 'tb/s'; - break; - } + switch(size) { + case 0: + return 'bit/s'; + break; + case 1: + return 'kb/s'; + break; + case 2: + return 'mb/s'; + break; + case 3: + return 'gb/s'; + break; + case 4: + return 'tb/s'; + break; + } } -- cgit v1.2.3