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

Refactor the system/graphs view logic

Browse Source
This commit is contained in:
Johannes Zellner
2022-09-16 17:09:54 +02:00
parent 7fbfe4ec98
commit f25158b295
3 changed files with 68 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/views/system.js
View File

@@ -2,7 +2,6 @@
/* global angular */
/* global $ */
/* global async */
/* global Chart */
angular.module('Application').controller('SystemController', ['$scope', '$location', '$timeout', 'Client', function ($scope, $location, $timeout, Client) {
@@ -10,8 +9,13 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
$scope.config = Client.getConfig();
$scope.memory = null;
$scope.busy = true;
$scope.activeTab = 0;
$scope.volumesById = {};
$scope.disks = [];
$scope.period = 6;
$scope.memoryChart = null;
$scope.diskChart = null;
// http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
@@ -30,151 +34,51 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
return getRandomColor();
}
$scope.disks = {
busy: true,
errorMessage: '',
disks: [],
$scope.refresh = function () {
$scope.busy = true;
setError: function (error) {
$scope.disks.errorMessage = 'Error loading disk : ' + error.message;
},
Client.getSystemGraphs($scope.period * 60, function (error, result) {
if (error) return console.error('Failed to fetch system graphs:', error);
update: function () {
$scope.disks.busy = true;
$scope.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }]
Client.getSystemGraphs($scope.graphs.period * 60, function (error, result) {
if (error) return $scope.disks.setError(error);
$scope.disks.forEach(function (disk) {
var usageOther = disk.occupied;
console.log(result);
colorIndex = 0;
disk.contains.forEach(function (content) {
content.color = getNextColor();
$scope.disks.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }]
if (content.type === 'app') content.app = Client.getInstalledAppsByAppId()[content.id];
if (content.type === 'volume') content.volume = $scope.volumesById(content.id);
// https://graphite.readthedocs.io/en/latest/render_api.html#paths-and-wildcards
// on scaleway, for some reason docker devices are collected as part of collectd
// until we figure why just hardcode popular disk devices - https://www.mjmwired.net/kernel/Documentation/devices.txt
// Client.disks(function (error, result) {
// if (error) return $scope.disks.setError(error);
// // segregate locations into the correct disks based on 'filesystem'
// result.disks.forEach(function (disk, index) {
// disk.id = index;
// disk.contains = [];
// if (disk.filesystem === result.platformDataDisk) disk.contains.push({ type: 'standard', label: 'Platform data', id: 'platformdata', usage: 0 });
// if (disk.filesystem === result.boxDataDisk) disk.contains.push({ type: 'standard', label: 'Box data', id: 'boxdata', usage: 0 });
// if (disk.filesystem === result.dockerDataDisk) disk.contains.push({ type: 'standard', label: 'Docker images', id: 'docker', usage: 0 });
// if (disk.filesystem === result.mailDataDisk) disk.contains.push({ type: 'standard', label: 'Email data', id: 'maildata', usage: 0 });
// if (disk.filesystem === result.backupsDisk) disk.contains.push({ type: 'standard', label: 'Backup data', id: 'cloudron-backup', usage: 0 });
// const apps = Object.keys(result.apps).filter(function (appId) { return result.apps[appId] === disk.filesystem; });
// apps.forEach(function (appId) {
// var app = Client.getCachedAppSync(appId);
// disk.contains.push({ type: 'app', app: app, label: app.label || app.fqdn, id: appId, usage: 0 });
// });
// const volumes = Object.keys(result.volumes).filter(function (volumeId) { return result.volumes[volumeId] === disk.filesystem; });
// volumes.forEach(function (volumeId) {
// var volume = $scope.volumesById[volumeId];
// disk.contains.push({ type: 'volume', volume: volume, label: volume.name, id: volumeId, usage: 0 });
// });
// });
$scope.disks.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }]
// render data of each disk
async.eachSeries(result.disks, function (disk, iteratorCallback) {
// /dev/sda1 -> sda1
// /dev/mapper/foo.com -> mapper_foo_com (see #348)
// var diskName = disk.filesystem.slice(disk.filesystem.indexOf('/', 1) + 1);
// diskName = diskName.replace(/\/|\./g, '_');
// // use collectd instead of df data so the timeframe matches with the du data
// Client.getSystemGraphs([
// 'absolute(collectd.localhost.df-' + diskName + '.df_complex-free)',
// 'absolute(collectd.localhost.df-' + diskName + '.df_complex-reserved)', // reserved for root (default: 5%) tune2fs -l/m
// 'absolute(collectd.localhost.df-' + diskName + '.df_complex-used)'
// ], '-1min', {}, function (error, data) {
// if (error) return iteratorCallback(error);
// disk.size = data[2].datapoints[0][0] + data[1].datapoints[0][0] + data[0].datapoints[0][0];
// disk.free = data[0].datapoints[0][0];
// disk.occupied = data[2].datapoints[0][0];
colorIndex = 0;
disk.contains.forEach(function (content) {
content.color = getNextColor();
});
// // get disk usage data
// var graphiteQueries = disk.contains.map(function (content) {
// return 'absolute(collectd.localhost.du-' + content.id + '.capacity-usage)';
// });
// Client.graphs(graphiteQueries, '-1day', { noNullPoints: true }, function (error, data) {
// if (error) return iteratorCallback(error);
var usageOther = disk.occupied;
// data.forEach(function (d) {
// var content = disk.contains.find(function (content) { return d.target.indexOf(content.id) !== -1; });
// if (!content) return; // didn't match any content
// var tmp = d.datapoints[d.datapoints.length-1][0];
// content.usage = tmp;
// // deduct from overal disk usage to track other
// usageOther -= tmp;
// });
disk.contains.sort(function (x, y) { return y.usage - x.usage; }); // sort by usage
if ($scope.disks.disks[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
disk.contains.push({
type: 'standard',
label: 'Everything else (Ubuntu, Swap, etc)',
id: 'other',
color: '#27CE65',
usage: usageOther
});
} else {
disk.contains.push({
type: 'standard',
label: 'Used',
id: 'other',
color: '#27CE65',
usage: usageOther
});
}
iteratorCallback();
// });
// });
}, function iteratorDone(error) {
if (error) $scope.disks.setError(error);
$scope.disks.busy = false;
usageOther -= content.usage;
});
disk.contains.sort(function (x, y) { return y.usage - x.usage; }); // sort by usage
if ($scope.disks[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
disk.contains.push({
type: 'standard',
label: 'Everything else (Ubuntu, Swap, etc)',
id: 'other',
color: '#27CE65',
usage: usageOther
});
} else {
disk.contains.push({
type: 'standard',
label: 'Used',
id: 'other',
color: '#27CE65',
usage: usageOther
});
}
});
}
};
$scope.graphs = {
error: {},
period: 6,
memoryChart: null,
diskChart: null,
setPeriod: function (hours) {
$scope.graphs.period = hours;
$scope.graphs.show();
},
show: function () {
var appsById = Client.getInstalledAppsByAppId();
// both in minutes
var timePeriod = $scope.graphs.period * 60;
var timeBucketSize = $scope.graphs.period > 24 ? (6*60) : 5;
var timePeriod = $scope.period * 60;
var timeBucketSize = $scope.period > 24 ? (6*60) : 5;
function fillGraph(canvasId, data, appsData, label, chartPropertyName, max, valueDivider) {
// translate the data from bytes to MB
@@ -182,7 +86,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
var labels = datapoints.map(function (d, index) {
var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSize)) * 60 *1000));
if ($scope.graphs.period > 24) {
if ($scope.period > 24) {
return dateTime.toLocaleDateString();
} else {
return dateTime.toLocaleTimeString();
@@ -203,7 +107,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
if (!data.datapoints.some(function (p) { return p[0] > 1024*1024*1024; })) return;
datasets.push({
label: appsById[appId].fqdn,
label: Client.getInstalledAppsByAppId()[appId].fqdn,
fill: false,
borderColor: getRandomColor(),
borderWidth: 1,
@@ -244,29 +148,21 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
var ctx = $(canvasId).get(0).getContext('2d');
if ($scope.graphs[chartPropertyName]) $scope.graphs[chartPropertyName].destroy();
$scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: chartData, options: options });
if ($scope[chartPropertyName]) $scope[chartPropertyName].destroy();
$scope[chartPropertyName] = new Chart(ctx, { type: 'line', data: chartData, options: options });
}
Client.getSystemGraphs(timePeriod, function (error, result) {
if (error) return console.error(error);
fillGraph('#graphsCPUChart', result.cpu, {}, 'CPU Usage', 'cpuChart', 100, 1);
fillGraph('#graphsSystemMemoryChart', result.memory, result.apps, 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024);
fillGraph('#graphsCPUChart', result.cpu, {}, 'CPU Usage', 'cpuChart', 100, 1);
fillGraph('#graphsSystemMemoryChart', result.memory, result.apps, 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024);
});
}
$scope.busy = false;
});
};
function refreshVolumes(callback) {
Client.getVolumes(function (error, results) {
if (error) return console.error(error);
$scope.volumesById = {};
results.forEach(function (v) { $scope.volumesById[v.id] = v; });
callback();
});
}
$scope.setPeriod = function (hours) {
$scope.period = hours;
$scope.refresh();
};
Client.onReady(function () {
Client.memory(function (error, memory) {
@@ -274,10 +170,13 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
$scope.memory = memory;
refreshVolumes(function (error) {
if (error) console.error(error);
Client.getVolumes(function (error, volumes) {
if (error) return console.error(error);
$scope.disks.update();
$scope.volumesById = {};
volumes.forEach(function (v) { $scope.volumesById[v.id] = v; });
$scope.refresh();
});
});
});
@@ -285,5 +184,4 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
Client.onReconnect(function () {
$scope.reboot.busy = false;
});
}]);