diff options
| -rw-r--r-- | web/js/nms-draw-chart.js | 704 | ||||
| -rw-r--r-- | web/js/nms-info-box.js | 51 |
2 files changed, 382 insertions, 373 deletions
diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js index 60698c0..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() - 30m 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: { - format: "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: { - format: "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: { - format: "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; - } +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; + } } diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js index 1eea112..c42c7ae 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', @@ -1170,6 +1170,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 * * Display a live summary of key metrics @@ -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() { |