diff --git a/app/components/stats/stats.html b/app/components/stats/stats.html index 7b764e008..b18bb90a9 100644 --- a/app/components/stats/stats.html +++ b/app/components/stats/stats.html @@ -2,8 +2,24 @@

Stats

CPU Usage

- - +
+
+ +
+
+

Other CPU usage data

+

TODO

+
+

Memory

+
+
+ +
+
+

Other Memory Stats

+

TODO

+
+
diff --git a/app/components/stats/statsController.js b/app/components/stats/statsController.js index e77424f73..e349b5a63 100644 --- a/app/components/stats/statsController.js +++ b/app/components/stats/statsController.js @@ -1,24 +1,68 @@ angular.module('stats', []) - .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', function (Settings, $scope, Messages, $timeout, Container, $routeParams) { - // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard + .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', 'humansizeFilter', function (Settings, $scope, Messages, $timeout, Container, $routeParams, humansizeFilter) { + // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard, + // TODO: Force memory scale to 0 - max memory + //var initialStats = {}; // Used to set scale of memory graph. + // + //Container.stats({id: $routeParams.id}, function (d) { + // var arr = Object.keys(d).map(function (key) { + // return d[key]; + // }); + // if (arr.join('').indexOf('no such id') !== -1) { + // Messages.error('Unable to retrieve stats', 'Is this container running?'); + // return; + // } + // initialStats = d; + //}, function () { + // Messages.error('Unable to retrieve stats', 'Is this container running?'); + //}); - var labels = []; - var data = []; - for (var i = 0; i < 40; i ++) { - labels.push(''); - data.push(0); + var cpuLabels = []; + var cpuData = []; + var memoryLabels = []; + var memoryData = []; + for (var i = 0; i < 40; i++) { + cpuLabels.push(''); + cpuData.push(0); + memoryLabels.push(''); + memoryData.push(0); } - var dataset = { // CPU Usage + var cpuDataset = { // CPU Usage fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", - data: data + data: cpuData + }; + var memoryDataset = { + fillColor: "rgba(151,187,205,0.5)", + strokeColor: "rgba(151,187,205,1)", + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + data: memoryData }; - var chart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({ - labels: labels, - datasets: [dataset] + + var cpuChart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({ + labels: cpuLabels, + datasets: [cpuDataset] + }, { + responsive: true + }); + + var memoryChart = new Chart($('#memory-stats-chart').get(0).getContext('2d')).Line({ + labels: memoryLabels, + datasets: [memoryDataset] + }, + { + scaleLabel: function (valueObj) { + return humansizeFilter(parseInt(valueObj.value)); + }, + responsive: true, + //scaleOverride: true, + //scaleSteps: 10, + //scaleStepWidth: Math.ceil(initialStats.memory_stats.limit / 10), + //scaleStartValue: 0 }); @@ -34,6 +78,7 @@ angular.module('stats', []) // Update graph with latest data updateChart(d); + updateMemoryChart(d); $timeout(updateStats, 1000); // TODO: Switch to setInterval for more consistent readings }, function () { Messages.error('Unable to retrieve stats', 'Is this container running?'); @@ -44,11 +89,18 @@ angular.module('stats', []) function updateChart(data) { console.log('updateChart', data); - chart.addData([$scope.calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString()); - chart.removeData(); + cpuChart.addData([calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString()); + cpuChart.removeData(); } - $scope.calculateCPUPercent = function (stats) { + function updateMemoryChart(data) { + console.log('updateMemoryChart', data); + memoryChart.addData([data.memory_stats.usage], new Date(data.read).toLocaleTimeString()); + memoryChart.removeData(); + + } + + function calculateCPUPercent(stats) { // Same algorithm the official client uses: https://github.com/docker/docker/blob/master/api/client/stats.go#L195-L208 var prevCpu = stats.precpu_stats; var curCpu = stats.cpu_stats; @@ -66,5 +118,6 @@ angular.module('stats', []) } return Math.random() * 100; //return cpuPercent; TODO: Switch back to the real value - }; - }]); \ No newline at end of file + } + }]) +; \ No newline at end of file