'use strict'; /* global angular */ /* global $ */ /* global Chart */ angular.module('Application').controller('SystemController', ['$scope', '$location', '$timeout', 'Client', function ($scope, $location, $timeout, Client) { Client.onReady(function () { if (!Client.getUserInfo().isAtLeastAdmin) $location.path('/'); }); $scope.config = Client.getConfig(); $scope.memory = null; $scope.volumesById = {}; // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } var colorIndex = 0; var colors = [ '#2196F3', '#3995b1', '#f0ad4e', '#ff4c4c' ]; function getNextColor() { if (colors[colorIndex+1]) return colors[colorIndex++]; return getRandomColor(); } $scope.disks = { busy: true, disks: [], refresh: function () { $scope.disks.busy = true; var result; $scope.disks.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }] $scope.disks.disks.forEach(function (disk) { var usageOther = disk.occupied; colorIndex = 0; disk.contains.forEach(function (content) { content.color = getNextColor(); if (content.type === 'app') content.app = Client.getInstalledAppsByAppId()[content.id]; if (content.type === 'volume') content.volume = $scope.volumesById(content.id); usageOther -= content.usage; }); 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 }); } }); $scope.disks.busy = false; } }; $scope.graphs = { busy: false, period: 6, memoryChart: null, diskChart: null, setPeriod: function (hours) { $scope.graphs.period = hours; $scope.graphs.refresh(); }, refresh: function () { $scope.graphs.busy = true; Client.getSystemGraphs($scope.graphs.period * 60, function (error, result) { if (error) return console.error('Failed to fetch system graphs:', error); // in minutes var timePeriod = $scope.graphs.period * 60; // keep in sync with graphs.js var timeBucketSizeMinutes = timePeriod > (24 * 60) ? (6*60) : 5; var steps = Math.floor(timePeriod/timeBucketSizeMinutes); var labels = new Array(steps).fill(0); labels = labels.map(function (v, index) { var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSizeMinutes)) * 60 * 1000)); if ($scope.graphs.period > 24) { return dateTime.toLocaleDateString(); } else { return dateTime.toLocaleTimeString(); } }); var colors = [ '#2196F3', '#FF6384' ]; function fillGraph(canvasId, contents, chartPropertyName, divisor, max) { if (!contents || !contents[0]) return; // no data available yet var datasets = []; contents.forEach(function (content, index) { // fill holes with previous value var cur = 0; content.data.datapoints.forEach(function (d) { if (d[0] === null) d[0] = cur; else cur = d[0]; }); var datapoints = Array(steps).map(function () { return '0'; }); // walk backwards and fill up the datapoints content.data.datapoints.reverse().forEach(function (d, index) { datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2); // return parseInt((d[0] / divisor).toFixed(2)); }); var color = index > 2 ? getRandomColor() : colors[index]; datasets.push({ label: content.label, backgroundColor: color + '4F', borderColor: color, // FIXME give real distinct colors borderWidth: 1, radius: 0, data: datapoints, cubicInterpolationMode: 'monotone', tension: 0.4 }); }); var graphData = { labels: labels, datasets: datasets }; var options = { responsive: true, maintainAspectRatio: true, aspectRatio: 2.5, animation: false, plugins: { legend: { display: false } }, interaction: { intersect: false, mode: 'index', }, scales: { x: { ticks: { autoSkipPadding: 50, maxRotation: 0 } }, y: { min: 0, beginAtZero: true } } }; if (max) options.scales.y.max = max; var ctx = $(canvasId).get(0).getContext('2d'); if ($scope.graphs[chartPropertyName]) $scope.graphs[chartPropertyName].destroy(); $scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: graphData, options: options }); } // var threshold = 1024 * 1024; // var appsWithHighMemory = Object.keys(result.apps).map(function (appId) { // result.apps[appId].id = appId; // return result.apps[appId]; // }).filter(function (app) { // if (!app.memory) return false; // not sure why we get empty objects // return app.memory.datapoints.some(function (d) { return d[0] > threshold; }); // }).map(function (app) { // return { data: app.memory, label: app.id }; // }); var appsWithHighMemory = []; fillGraph('#graphsCPUChart', [{ data: result.cpu, label: 'CPU' }], 'cpuChart', 100, 1); fillGraph('#graphsSystemMemoryChart', [{ data: result.memory, label: 'Memory' }].concat(appsWithHighMemory), 'memoryChart', 1024 * 1024, Number.parseInt($scope.memory.memory / 1024 / 1024)); $scope.graphs.busy = false; }); } }; Client.onReady(function () { Client.memory(function (error, memory) { if (error) console.error(error); $scope.memory = memory; Client.getVolumes(function (error, volumes) { if (error) return console.error(error); $scope.volumesById = {}; volumes.forEach(function (v) { $scope.volumesById[v.id] = v; }); $scope.graphs.refresh(); // $scope.disks.refresh(); }); }); }); Client.onReconnect(function () { $scope.reboot.busy = false; }); }]);