cloudron-box/dashboard/public/views/system.js

'use strict';

/* global angular, moment, $, Chart, TASK_TYPES */

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.cpus = null;
    $scope.info = null;
    $scope.volumesById = {};

    // https://stackoverflow.com/questions/1484506/random-color-generator
    function rainbow(numOfSteps, step) {
        // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
        // Adam Cole, 2011-Sept-14
        // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
        var r, g, b;
        var h = step / numOfSteps;
        var i = ~~(h * 6);
        var f = h * 6 - i;
        var q = 1 - f;
        switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
        }
        var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
        return (c);
    }

    // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
    function shuffle(a) {
        for (let i = a.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [a[i], a[j]] = [a[j], a[i]];
        }
        return a;
    }

    var colorIndex = 0;
    var colors = [];
    function resetColors(n) {
        colorIndex = 0;
        colors = [];
        for (var i = 0; i < n; i++) colors.push(rainbow(n, i));
        shuffle(colors);
    }

    function getNextColor() {
        return colors[colorIndex++];
    }

    $scope.disks = {
        busy: true,
        busyRefresh: false,
        ts: 0,
        taskId: '',
        disks: [],

        show: function () {
            Client.diskUsage(function (error, result) {
                if (error) return console.error('Failed to refresh disk usage.', error);

                if (!result.usage) {
                    $scope.disks.busy = false;
                    return;
                }

                $scope.disks.ts = result.usage.ts;

                // [ { filesystem, type, size, used, available, capacity, mountpoint }]
                $scope.disks.disks = Object.keys(result.usage.filesystems).map(function (k) { return result.usage.filesystems[k]; }); // convert object to array...

                $scope.disks.disks.forEach(function (disk) {
                    var usageOther = disk.used;

                    resetColors(disk.contents.length);

                    // if this disk is a volume amend it and remove it from contents
                    disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = $scope.volumesById[content.id]; });
                    disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });

                    // only show old backups if the size is significant
                    disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });

                    disk.contents.forEach(function (content) {
                        content.color = getNextColor();

                        if (content.type === 'app') {
                            content.app = Client.getInstalledAppsByAppId()[content.id];
                            if (!content.app) content.uninstalled = true;
                            else content.label = content.app.label || content.app.fqdn;
                        } else if (content.type === 'volume') {
                            content.volume = $scope.volumesById[content.id];
                            content.label = content.volume ? content.volume.name : 'Removed volume';
                        }

                        // ensure a label for ui
                        content.label = content.label || content.id;

                        usageOther -= content.usage;
                    });

                    disk.contents.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.contents.push({
                            type: 'standard',
                            label: 'Everything else (Ubuntu, etc)',
                            id: 'other',
                            color: '#555555',
                            usage: usageOther
                        });
                    } else {
                        disk.contents.push({
                            type: 'standard',
                            label: 'Used',
                            id: 'other',
                            color: '#555555',
                            usage: usageOther
                        });
                    }
                });

                $scope.disks.busy = false;
            });
        },

        checkStatus: function () {
            Client.getLatestTaskByType(TASK_TYPES.TASK_UPDATE_DISK_USAGE, function (error, task) {
                if (error) return console.error(error);

                if (!task) return;

                $scope.disks.taskId = task.id;
                $scope.disks.busyRefresh = true;
                $scope.disks.updateStatus();
            });
        },

        updateStatus: function () {
            Client.getTask($scope.disks.taskId, function (error, data) {
                if (error) return $timeout($scope.disks.updateStatus, 3000);

                if (!data.active) {
                    $scope.disks.busyRefresh = false;
                    $scope.disks.taskId = '';
                    $scope.disks.show();
                    return;
                }

                $timeout($scope.disks.updateStatus, 3000);
            });
        },

        refresh: function () {
            $scope.disks.busyRefresh = true;

            Client.refreshDiskUsage(function (error, taskId) {
                if (error) {
                    $scope.disks.busyRefresh = false;
                    return console.error('Failed to refresh disk usage.', error);
                }

                $scope.disks.taskId = taskId;
                $timeout($scope.disks.updateStatus, 3000);
            });
        }
    };

    $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);

                var cpuCount = result.cpuCount;

                // 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();
                    }
                });

                function fillGraph(canvasId, contents, chartPropertyName, divisor, max, format, formatDivisor) {
                    if (!contents || !contents[0]) return; // no data available yet

                    var datasets = [];

                    resetColors(contents.length);
                    contents.forEach(function (content, index) {

                        // fill holes with previous value
                        var cur = 0;
                        content.data.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.reverse().forEach(function (d, index) {
                            datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2);
                        });

                        var color = index === 0 ? '#2196F3' : getNextColor();
                        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: {
                                ticks: { maxTicksLimit: 6 },
                                min: 0,
                                beginAtZero: true
                            }
                        }
                    };

                    if (format) options.scales.y.ticks.callback = function (value) { return (formatDivisor ? (value/formatDivisor).toFixed(0) : value) + ' ' + format; };
                    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 cpuThreshold = 20;
                var appsWithHighCPU = Object.keys(result.apps).map(function (appId) {
                    result.apps[appId].id = appId;

                    var app = Client.getInstalledAppsByAppId()[appId];
                    if (!app) result.apps[appId].label = appId;
                    else result.apps[appId].label = app.label || app.fqdn;

                    return result.apps[appId];
                }).filter(function (app) {
                    if (!app.cpu) return false; // not sure why we get empty objects
                    return app.cpu.some(function (d) { return d[0] > cpuThreshold; });
                }).map(function (app) {
                    return { data: app.cpu, label: app.label };
                });

                var memoryThreshold = 1024 * 1024 * 1024;
                var appsWithHighMemory = Object.keys(result.apps).map(function (appId) {
                    result.apps[appId].id = appId;

                    var app = Client.getInstalledAppsByAppId()[appId];
                    if (!app) result.apps[appId].label = appId;
                    else result.apps[appId].label = app.label || app.fqdn;

                    return result.apps[appId];
                }).filter(function (app) {
                    if (!app.memory) return false; // not sure why we get empty objects
                    return app.memory.some(function (d) { return d[0] > memoryThreshold; });
                }).map(function (app) {
                    return { data: app.memory, label: app.label };
                });

                fillGraph('#graphsCPUChart', [{ data: result.cpu, label: 'CPU' }].concat(appsWithHighCPU), 'cpuChart', 1, cpuCount * 100, '%');
                fillGraph('#graphsSystemMemoryChart', [{ data: result.memory, label: 'Memory' }].concat(appsWithHighMemory), 'memoryChart', 1024 * 1024, Number.parseInt($scope.memory.memory / 1024 / 1024), 'GiB', 1024);

                $scope.graphs.busy = false;
            });
        }
    };

    Client.onReady(function () {
        Client.cpus(function (error, cpus) {
            if (error) console.error(error);
            $scope.cpus = cpus;
        });

        Client.systemInfo(function (error, info) {
            if (error) console.error(error);

            // prettify for UI
            info.uptimeSecs = moment.duration(info.uptimeSecs, 'seconds').locale(navigator.language).humanize();

            $scope.info = info;
        });

        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.show();
                $scope.disks.checkStatus();
            });
        });
    });

    Client.onReconnect(function () {
        $scope.reboot.busy = false;
    });
}]);