diff --git a/src/js/client.js b/src/js/client.js index 1289dba44..21d7acc6e 100644 --- a/src/js/client.js +++ b/src/js/client.js @@ -3070,8 +3070,6 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout }; if (hostPath) data.hostPath = hostPath; - var that = this; - post('/api/v1/volumes', data, null, function (error, data, status) { if (error) return callback(error); if (status !== 201) return callback(new ClientError(status, data)); @@ -3086,8 +3084,6 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout mountOptions: mountOptions }; - var that = this; - post('/api/v1/volumes/' + volumeId, data, null, function (error, data, status) { if (error) return callback(error); if (status !== 200) return callback(new ClientError(status, data)); @@ -3097,8 +3093,6 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout }; Client.prototype.remountVolume = function (volumeId, callback) { - var that = this; - post('/api/v1/volumes/' + volumeId + '/remount', {}, null, function (error, data, status) { if (error) return callback(error); if (status !== 202) return callback(new ClientError(status, data)); diff --git a/src/views/system.html b/src/views/system.html index 953afe300..8fb89e9a5 100644 --- a/src/views/system.html +++ b/src/views/system.html @@ -11,20 +11,13 @@
-
-
-
- {{ disks.errorMessage }} -
-
- -
+

-
-
+
+

@@ -50,7 +43,7 @@

- +
@@ -59,7 +52,7 @@
- +
@@ -68,14 +61,14 @@
diff --git a/src/views/system.js b/src/views/system.js index dbe0ceece..164359fac 100644 --- a/src/views/system.js +++ b/src/views/system.js @@ -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; }); - }]);