jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Show app memory in system view

Browse Source
This commit is contained in:
Johannes Zellner
2020-05-13 23:34:14 +02:00
parent aef625ba31
commit ca9528fa4e
1 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/views/system.js
View File

@@ -277,11 +277,13 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
}, },
show: function () { show: function () {
var apps = Client.getInstalledApps();
// both in minutes // both in minutes
var timePeriod = $scope.graphs.period * 60; var timePeriod = $scope.graphs.period * 60;
var timeBucketSize = $scope.graphs.period > 24 ? (6*60) : 5; 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 // translate the data from bytes to MB
var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); }); var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); });
var labels = datapoints.map(function (d, index) { 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'; 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 = { var data = {
labels: labels, labels: labels,
datasets: [{ datasets: 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
}]
}; };
var options = { 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 }); $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 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); 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[0], null, 'CPU Usage', 'cpuChart', 100, 1);
fillGraph('#graphsCPUChart', result[1], '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);
}); });
} }
}; };