diff --git a/src/views/system.js b/src/views/system.js index 14555fd98..fd368001c 100644 --- a/src/views/system.js +++ b/src/views/system.js @@ -277,11 +277,13 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati }, show: function () { + var apps = Client.getInstalledApps(); + // both in minutes var timePeriod = $scope.graphs.period * 60; var timeBucketSize = $scope.graphs.period > 24 ? (6*60) : 5; - function fillGraph(canvasId, data, label, chartPropertyName, max, valueDivider) { + function fillGraph(canvasId, data, additionalData, label, chartPropertyName, max, valueDivider) { // translate the data from bytes to MB var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); }); var labels = datapoints.map(function (d, index) { @@ -289,20 +291,31 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati return ('0' + dateTime.getHours()).slice(-2) + ':00'; }); + var datasets = [{ + label: label, + backgroundColor: '#82C4F844', + borderColor: '#2196F3', + borderWidth: 1, + radius: 0, + data: datapoints + }]; + + if (Array.isArray(additionalData)) { + additionalData.forEach(function (data, index) { + datasets.push({ + label: apps[index].fqdn, + fill: false, + borderColor: getRandomColor(), + borderWidth: 1, + radius: 0, + data: data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); }) + }); + }); + } + var data = { labels: labels, - datasets: [{ - label: label, - backgroundColor: '#82C4F844', - borderColor: '#2196F3', - borderWidth: 1, - radius: 2, - pointBackgroundColor: 'rgba(151,187,205,1)', - pointBorderColor: '#2196F3', - pointHoverBackgroundColor: '#82C4F8', - pointHoverBorderColor: '#82C4F8', - data: datapoints - }] + datasets: datasets }; var options = { @@ -331,14 +344,19 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati $scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: data, options: options }); } - var systemMemoryQuery = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")'; var cpuQuery = 'summarize(sum(collectd.localhost.aggregation-cpu-average.cpu-system, collectd.localhost.aggregation-cpu-average.cpu-user), "' + timeBucketSize + 'min", "avg")'; + var systemMemoryQuery = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")'; - Client.graphs([ systemMemoryQuery, cpuQuery ], '-' + timePeriod + 'min', {}, function (error, result) { + var appQueries = []; + apps.forEach(function (app) { + appQueries.push('summarize(collectd.localhost.table-' + app.id + '-memory.gauge-rss, "' + timeBucketSize + 'min", "avg")') + }); + + Client.graphs([ cpuQuery, systemMemoryQuery ].concat(appQueries), '-' + timePeriod + 'min', {}, function (error, result) { if (error) return console.error(error); - fillGraph('#graphsSystemMemoryChart', result[0], 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024); - fillGraph('#graphsCPUChart', result[1], 'CPU Usage', 'cpuChart', 100, 1); + fillGraph('#graphsCPUChart', result[0], null, 'CPU Usage', 'cpuChart', 100, 1); + fillGraph('#graphsSystemMemoryChart', result[1], result.slice(2), 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024); }); } };