Rework tab based sysinfo view into one wide view

src/views/system.html

@@ -1,39 +1,66 @@
-<div class="content">
+<div class="container">
 
-  <div class="text-left">
-    <h1>
-      {{ 'system.title' | tr }}
-      <a class="btn btn-default pull-right" href="/logs.html?id=box" target="_blank">{{ 'main.action.logs' | tr }}</a>
-      <button class="btn btn-default pull-right" ng-click="$parent.reboot.show()">{{ 'main.action.reboot' | tr }}</button>
-    </h1>
+  <div class="row">
+    <div class="col-md-12">
+      <h1>
+        {{ 'system.title' | tr }}
+        <a class="btn btn-default pull-right" href="/logs.html?id=box" target="_blank">{{ 'main.action.logs' | tr }}</a>
+        <button class="btn btn-default pull-right" ng-click="$parent.reboot.show()">{{ 'main.action.reboot' | tr }}</button>
+      </h1>
+    </div>
   </div>
 
-  <uib-tabset active="activeTab">
-    <uib-tab index="0" heading="{{ 'system.systemMemory.title' | tr }}">
-      <div class="card card-large" style="min-height: 300px;">
-        <label>Megabyte</label>
-        <canvas id="graphsSystemMemoryChart" style="width: 100%;"></canvas>
+  <div class="row">
+    <div class="col-md-6">
+
+      <h3 class="graphs-toolbar">
+        Graphs
+        <div class="graphs-toolbar-actions">
+          <button class="btn btn-sm btn-default" style="margin-right: 5px;" ng-click="graphs.refresh()" ng-disabled="graphs.busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': graphs.busy }"></i></button>
+          <div class="dropdown">
+            <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
+              {{ graphs.period | trKeyFromPeriod | tr }}
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a href="" ng-click="graphs.setPeriod(6)">{{ 6 | trKeyFromPeriod | tr }}</a></li>
+              <li><a href="" ng-click="graphs.setPeriod(12)">{{ 12 | trKeyFromPeriod | tr }}</a></li>
+              <li><a href="" ng-click="graphs.setPeriod(24)">{{ 24 | trKeyFromPeriod | tr }}</a></li>
+              <li><a href="" ng-click="graphs.setPeriod(24*7)">{{ 24*7 | trKeyFromPeriod | tr }}</a></li>
+              <li><a href="" ng-click="graphs.setPeriod(24*30)">{{ 24*30 | trKeyFromPeriod | tr }}</a></li>
+            </ul>
+          </div>
+        </div>
+      </h3>
+
+      <div class="card" style="min-height: 300px;">
+        <label>{{ 'system.cpuUsage.title' | tr }}</label>
+        <canvas id="graphsCPUChart" style="width: 100%;"></canvas>
+
         <br/>
+
+        <label>{{ 'system.systemMemory.title' | tr }}</label>
+        <canvas id="graphsSystemMemoryChart" style="width: 100%;"></canvas>
         <div class="text-muted text-center text-small">{{ 'system.systemMemory.graphSubtext' | tr }}</div>
       </div>
-    </uib-tab>
+    </div>
 
-    <uib-tab index="1" heading="{{ 'system.cpuUsage.title' | tr }}">
-      <div class="card card-large" style="min-height: 300px;">
-        <label>{{ 'system.cpuUsage.graphTitle' | tr }}</label>
-        <canvas id="graphsCPUChart" style="width: 100%;"></canvas>
-      </div>
-    </uib-tab>
+    <div class="col-md-6">
+      <h3 class="graphs-toolbar">
+        {{ 'system.diskUsage.title' | tr }}
+        <div class="graphs-toolbar-actions">
+          <button class="btn btn-sm btn-default" style="margin-right: 5px;" ng-click="disks.refresh()" ng-disabled="disks.busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': disks.busy }"></i></button>
+        </div>
+      </h3>
 
-    <uib-tab index="2" heading="{{ 'system.diskUsage.title' | tr }}">
-      <div class="card card-large">
-        <div class="row" ng-show="busy">
+      <div class="card">
+        <div class="row" ng-show="disks.busy">
           <div class="col-md-12 text-center">
             <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
           </div>
         </div>
         <div ng-show="!busy" class="ng-hide">
-          <div class="row" ng-repeat="disk in disks" style="margin-bottom: 20px;">
+          <div class="row" ng-repeat="disk in disks.disks" style="margin-bottom: 20px;">
             <div class="col-md-12">
               <h3>
                 <!-- <span>{{ disk.filesystem }}</span>  <span>({{ disk.mountpoint }})</span> -->
@@ -57,22 +84,7 @@
           </div>
         </div>
       </div>
-    </uib-tab>
-
-    <div class="dropdown pull-right" ng-hide="activeTab === 2">
-      <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
-        {{ period | trKeyFromPeriod | tr }}
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu">
-        <li><a href="" ng-click="setPeriod(6)">{{ 6 | trKeyFromPeriod | tr }}</a></li>
-        <li><a href="" ng-click="setPeriod(12)">{{ 12 | trKeyFromPeriod | tr }}</a></li>
-        <li><a href="" ng-click="setPeriod(24)">{{ 24 | trKeyFromPeriod | tr }}</a></li>
-        <li><a href="" ng-click="setPeriod(24*7)">{{ 24*7 | trKeyFromPeriod | tr }}</a></li>
-        <li><a href="" ng-click="setPeriod(24*30)">{{ 24*30 | trKeyFromPeriod | tr }}</a></li>
-      </ul>
     </div>
-    <button class="btn btn-sm btn-default pull-right" style="margin-right: 5px" ng-click="refresh()" ng-disabled="busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busy }"></i></button>
+  </div>
 
-  </uib-tabset>
-</div>
+</div>

src/views/system.js

@@ -9,13 +9,7 @@ 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() {
@@ -34,15 +28,17 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         return getRandomColor();
     }
 
-    $scope.refresh = function () {
-        $scope.busy = true;
+    $scope.disks = {
+        busy: true,
+        disks: [],
 
-        Client.getSystemGraphs($scope.period * 60, function (error, result) {
-            if (error) return console.error('Failed to fetch system graphs:', error);
+        refresh: function () {
+            $scope.disks.busy = true;
 
-            $scope.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }]
+            var result;
+            $scope.disks.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }]
 
-            $scope.disks.forEach(function (disk) {
+            $scope.disks.disks.forEach(function (disk) {
                 var usageOther = disk.occupied;
 
                 colorIndex = 0;
@@ -57,7 +53,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
 
                 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
+                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)',
@@ -76,120 +72,139 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                 }
             });
 
-            // in minutes
-            var timePeriod = $scope.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.period > 24) {
-                    return dateTime.toLocaleDateString();
-                } else {
-                    return dateTime.toLocaleTimeString();
-                }
-            });
-
-            var borderColors = [ '#2196F3', '#FF6384' ];
-            var backgroundColors = [ '#82C4F844', '#FF63844F' ];
-
-            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));
-                    });
-
-                    datasets.push({
-                        label: content.label,
-                        backgroundColor: backgroundColors[index],
-                        borderColor: borderColors[index%2], // 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[chartPropertyName]) $scope[chartPropertyName].destroy();
-                $scope[chartPropertyName] = new Chart(ctx, { type: 'line', data: graphData, options: options });
-            }
-
-            var threshold = 1024 * 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 };
-            });
-
-            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.busy = false;
-        });
+            $scope.disks.busy = false;
+        }
     };
 
-    $scope.setPeriod = function (hours) {
-        $scope.period = hours;
-        $scope.refresh();
+    $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 () {
@@ -204,7 +219,8 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                 $scope.volumesById = {};
                 volumes.forEach(function (v) { $scope.volumesById[v.id] = v; });
 
-                $scope.refresh();
+                $scope.graphs.refresh();
+                // $scope.disks.refresh();
             });
         });
     });