From eabcf10ede6f9eee77b85f537cef023f89111f9d Mon Sep 17 00:00:00 2001 From: "Ole Mathias Aa. Heggem" Date: Sun, 5 Nov 2017 23:33:04 +0100 Subject: influx/chart and ansible --- web/js/nms-draw-chart.js | 337 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 337 insertions(+) create mode 100644 web/js/nms-draw-chart.js (limited to 'web/js/nms-draw-chart.js') diff --git a/web/js/nms-draw-chart.js b/web/js/nms-draw-chart.js new file mode 100644 index 0000000..be463bf --- /dev/null +++ b/web/js/nms-draw-chart.js @@ -0,0 +1,337 @@ +"use strict"; + +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 = []; + + $.getJSON( "/query?db=gondul&q="+q, function( results ) { + results['results'][0]['series'].forEach(function(serie) { + var data = []; + serie['values'].forEach(function(element) { + data.push({t: new Date(element[0]), y: element[1]}); + }); + dataset.push({data: data, label:serie['tags']['version'] }); + }); + 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' + }, + } + }], + }, + responsive: true, + animation: false, + } + }); + }); +} + +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 ) { + console.log(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(0,204,255,10)', 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)+')'}); + + + }); + + // 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 + } + } + } + }); + }); +} + + +function drawPort(canvas, sw, port) { + + var kilobit = 1024; + var megabit = kilobit * 1024; + 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]; + + 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(0,204,255,10)', 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)+')'}); + + + // 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, + } + }); + }); +} + + +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; + } +} + +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; + } +} -- cgit v1.2.3