From 873c06a6f8cf9b624dac26893097ea9eb54b4d5d Mon Sep 17 00:00:00 2001 From: Alexey Lavrenuke Date: Fri, 19 Sep 2014 20:23:05 +0400 Subject: [PATCH] Start parsing online data --- Tank/Plugins/Aggregator.py | 2 +- .../static/js/angular-rickshaw.coffee | 1 + .../static/js/angular-rickshaw.js | 1 + Tank/Plugins/OnlineReport/static/js/ws.coffee | 141 +++++----- Tank/Plugins/OnlineReport/static/js/ws.js | 247 ++++++++++-------- 5 files changed, 224 insertions(+), 168 deletions(-) diff --git a/Tank/Plugins/Aggregator.py b/Tank/Plugins/Aggregator.py index fdeac07..3feb24f 100644 --- a/Tank/Plugins/Aggregator.py +++ b/Tank/Plugins/Aggregator.py @@ -173,7 +173,7 @@ class SecondAggregateDataItem: "RPS": self.RPS, "http_codes": self.http_codes, "net_codes": self.net_codes, - "times_dist": self.times_dist, + # "times_dist": self.times_dist, "quantiles": self.quantiles, "dispersion": self.dispersion, "input": self.input, diff --git a/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.coffee b/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.coffee index 8fea98b..c1dcb55 100644 --- a/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.coffee +++ b/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.coffee @@ -76,6 +76,7 @@ angular.module("angular-rickshaw", []).directive "rickshaw", ($compile) -> return scope.$watch "series", (newValue, oldValue) -> + console.log newValue update() unless angular.equals(newValue, oldValue) return diff --git a/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.js b/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.js index 596fad6..678b500 100644 --- a/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.js +++ b/Tank/Plugins/OnlineReport/static/js/angular-rickshaw.js @@ -100,6 +100,7 @@ Based on https://github.com/ngyewch/angular-rickshaw } }); scope.$watch("series", function(newValue, oldValue) { + console.log(newValue); if (!angular.equals(newValue, oldValue)) { update(); } diff --git a/Tank/Plugins/OnlineReport/static/js/ws.coffee b/Tank/Plugins/OnlineReport/static/js/ws.coffee index aef08d4..b90cb35 100644 --- a/Tank/Plugins/OnlineReport/static/js/ws.coffee +++ b/Tank/Plugins/OnlineReport/static/js/ws.coffee @@ -1,68 +1,85 @@ app = angular.module("ng-tank-report", ["angular-rickshaw"]) +collect_subtree = (storage, subtree, ts) -> + for key, node of subtree + if typeof node is 'number' or typeof node is 'array' + storage[key].push + x: ts + y: node + else + collect_subtree(storage[key], node, ts) + app.controller "TankReport", ($scope) -> $scope.status = "Disconnected" - overallData = if document.cached_data.responses then document.cached_data.responses.overall else {} - monitoringData = if document.cached_data.monitoring then document.cached_data.monitoring else {} - areaGraphs = ['CPU', 'Memory'] - $scope.monitoringData = ( - ({ - hostname: hostname - groups: ({ - name: groupName - features: - palette: 'spectrum14' - hover: {} - xAxis: {} - yAxis: {} - legend: - toggle: true - highlight: true - options: - renderer: if groupName in areaGraphs then 'area' else 'line' - series: ({ - name: name - data: data - } for name, data of series) - } for groupName, series of groups) - } for hostname, groups of monitoringData) - ) - quantiles = - $scope.quantiles = - name: "Response time quantiles" - features: - palette: 'classic9' - hover: {} - xAxis: {} - yAxis: {} - legend: - toggle: true - highlight: true - options: - renderer: 'area' - stack: false - series: ({ - name: name - data: data - } for name, data of overallData.quantiles).sort (a, b) -> - return if parseFloat(a.name) <= parseFloat(b.name) then 1 else -1 - $scope.rps = - name: "Responses per second" - features: - palette: 'spectrum14' - hover: {} - xAxis: {} - yAxis: {} - legend: - toggle: true - highlight: true - options: - renderer: 'line' - series: [ - name: 'RPS' - data: overallData.RPS - ] + $scope.data = document.cached_data + $scope.updateData = (tankData) -> + for ts, storages of tankData + for storage, data of storages + collect_subtree $scope.data[storage], data, ts + $scope.buildSeries() + $scope.buildSeries = () -> + overallData = if $scope.data.responses then $scope.data.responses.overall else {} + monitoringData = if $scope.data.monitoring then $scope.data.monitoring else {} + areaGraphs = ['CPU', 'Memory'] + $scope.monitoringData = ( + ({ + hostname: hostname + groups: ({ + name: groupName + features: + palette: 'spectrum14' + hover: {} + xAxis: {} + yAxis: {} + legend: + toggle: true + highlight: true + options: + renderer: if groupName in areaGraphs then 'area' else 'line' + series: ({ + name: name + data: data + } for name, data of series) + } for groupName, series of groups) + } for hostname, groups of monitoringData) + ) + quantiles = + $scope.quantiles = + name: "Response time quantiles" + features: + palette: 'classic9' + hover: {} + xAxis: {} + yAxis: {} + legend: + toggle: true + highlight: true + options: + renderer: 'area' + stack: false + series: ({ + name: name + data: data + } for name, data of overallData.quantiles).sort (a, b) -> + return if parseFloat(a.name) <= parseFloat(b.name) then 1 else -1 + $scope.rps = + name: "Responses per second" + features: + palette: 'spectrum14' + hover: {} + xAxis: {} + yAxis: {} + legend: + toggle: true + highlight: true + options: + renderer: 'line' + series: [ + name: 'RPS' + data: overallData.RPS + ] + $scope.buildSeries() conn = new io.connect("http://#{window.location.host}") conn.on 'connect', () => @@ -76,5 +93,5 @@ app.controller "TankReport", ($scope) -> $scope.status = "Disonnected" $scope.$apply() conn.on 'message', (msg) => - #$scope.tankData = JSON.parse msg - #$scope.$apply() + tankData = JSON.parse msg + $scope.updateData(tankData) diff --git a/Tank/Plugins/OnlineReport/static/js/ws.js b/Tank/Plugins/OnlineReport/static/js/ws.js index 4e86391..2275b3e 100644 --- a/Tank/Plugins/OnlineReport/static/js/ws.js +++ b/Tank/Plugins/OnlineReport/static/js/ws.js @@ -1,120 +1,153 @@ (function() { - var app, + var app, collect_subtree, __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; app = angular.module("ng-tank-report", ["angular-rickshaw"]); - app.controller("TankReport", function($scope) { - var areaGraphs, conn, data, groupName, groups, hostname, monitoringData, name, overallData, quantiles, series; - $scope.status = "Disconnected"; - overallData = document.cached_data.responses ? document.cached_data.responses.overall : {}; - monitoringData = document.cached_data.monitoring ? document.cached_data.monitoring : {}; - areaGraphs = ['CPU', 'Memory']; - $scope.monitoringData = (function() { - var _results; - _results = []; - for (hostname in monitoringData) { - groups = monitoringData[hostname]; - _results.push({ - hostname: hostname, - groups: (function() { - var _results1; - _results1 = []; - for (groupName in groups) { - series = groups[groupName]; - _results1.push({ - name: groupName, - features: { - palette: 'spectrum14', - hover: {}, - xAxis: {}, - yAxis: {}, - legend: { - toggle: true, - highlight: true - } - }, - options: { - renderer: __indexOf.call(areaGraphs, groupName) >= 0 ? 'area' : 'line' - }, - series: (function() { - var _results2; - _results2 = []; - for (name in series) { - data = series[name]; - _results2.push({ - name: name, - data: data - }); - } - return _results2; - })() - }); - } - return _results1; - })() - }); + collect_subtree = function(storage, subtree, ts) { + var key, node, _results; + _results = []; + for (key in subtree) { + node = subtree[key]; + if (typeof node === 'number' || typeof node === 'array') { + _results.push(storage[key].push({ + x: ts, + y: node + })); + } else { + _results.push(collect_subtree(storage[key], node, ts)); } - return _results; - })(); - quantiles = $scope.quantiles = { - name: "Response time quantiles", - features: { - palette: 'classic9', - hover: {}, - xAxis: {}, - yAxis: {}, - legend: { - toggle: true, - highlight: true + } + return _results; + }; + + app.controller("TankReport", function($scope) { + var conn; + $scope.status = "Disconnected"; + $scope.data = document.cached_data; + $scope.updateData = function(tankData) { + var data, storage, storages, ts; + for (ts in tankData) { + storages = tankData[ts]; + for (storage in storages) { + data = storages[storage]; + collect_subtree($scope.data[storage], data, ts); } - }, - options: { - renderer: 'area', - stack: false - }, - series: ((function() { - var _ref, _results; - _ref = overallData.quantiles; + } + return $scope.buildSeries(); + }; + $scope.buildSeries = function() { + var areaGraphs, data, groupName, groups, hostname, monitoringData, name, overallData, quantiles, series; + overallData = $scope.data.responses ? $scope.data.responses.overall : {}; + monitoringData = $scope.data.monitoring ? $scope.data.monitoring : {}; + areaGraphs = ['CPU', 'Memory']; + $scope.monitoringData = (function() { + var _results; _results = []; - for (name in _ref) { - data = _ref[name]; + for (hostname in monitoringData) { + groups = monitoringData[hostname]; _results.push({ - name: name, - data: data + hostname: hostname, + groups: (function() { + var _results1; + _results1 = []; + for (groupName in groups) { + series = groups[groupName]; + _results1.push({ + name: groupName, + features: { + palette: 'spectrum14', + hover: {}, + xAxis: {}, + yAxis: {}, + legend: { + toggle: true, + highlight: true + } + }, + options: { + renderer: __indexOf.call(areaGraphs, groupName) >= 0 ? 'area' : 'line' + }, + series: (function() { + var _results2; + _results2 = []; + for (name in series) { + data = series[name]; + _results2.push({ + name: name, + data: data + }); + } + return _results2; + })() + }); + } + return _results1; + })() }); } return _results; - })()).sort(function(a, b) { - if (parseFloat(a.name) <= parseFloat(b.name)) { - return 1; - } else { - return -1; - } - }) - }; - $scope.rps = { - name: "Responses per second", - features: { - palette: 'spectrum14', - hover: {}, - xAxis: {}, - yAxis: {}, - legend: { - toggle: true, - highlight: true - } - }, - options: { - renderer: 'line' - }, - series: [ - { - name: 'RPS', - data: overallData.RPS - } - ] + })(); + quantiles = $scope.quantiles = { + name: "Response time quantiles", + features: { + palette: 'classic9', + hover: {}, + xAxis: {}, + yAxis: {}, + legend: { + toggle: true, + highlight: true + } + }, + options: { + renderer: 'area', + stack: false + }, + series: ((function() { + var _ref, _results; + _ref = overallData.quantiles; + _results = []; + for (name in _ref) { + data = _ref[name]; + _results.push({ + name: name, + data: data + }); + } + return _results; + })()).sort(function(a, b) { + if (parseFloat(a.name) <= parseFloat(b.name)) { + return 1; + } else { + return -1; + } + }) + }; + return $scope.rps = { + name: "Responses per second", + features: { + palette: 'spectrum14', + hover: {}, + xAxis: {}, + yAxis: {}, + legend: { + toggle: true, + highlight: true + } + }, + options: { + renderer: 'line' + }, + series: [ + { + name: 'RPS', + data: overallData.RPS + } + ] + }; }; + $scope.buildSeries(); conn = new io.connect("http://" + window.location.host); conn.on('connect', (function(_this) { return function() { @@ -131,7 +164,11 @@ }; })(this)); return conn.on('message', (function(_this) { - return function(msg) {}; + return function(msg) { + var tankData; + tankData = JSON.parse(msg); + return $scope.updateData(tankData); + }; })(this)); });