Fixup system memory and cpu graphs

src/views/system.html

@@ -9,7 +9,23 @@
   </div>
 
   <uib-tabset active="activeTab">
-    <uib-tab index="0" heading="{{ 'system.diskUsage.title' | tr }}">
+    <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>
+        <br/>
+        <div class="text-muted text-center text-small">{{ 'system.systemMemory.graphSubtext' | tr }}</div>
+      </div>
+    </uib-tab>
+
+    <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>
+
+    <uib-tab index="2" heading="{{ 'system.diskUsage.title' | tr }}">
       <div class="card card-large">
         <div class="row" ng-show="busy">
           <div class="col-md-12 text-center">
@@ -43,29 +59,14 @@
       </div>
     </uib-tab>
 
-    <uib-tab index="1" heading="{{ 'system.systemMemory.title' | tr }}">
+    <div class="dropdown pull-right" ng-hide="activeTab === 2">
-      <div class="card card-large" style="min-height: 300px;">
-        <label style="display: block">Megabyte <span class="pull-right">RAM ({{ memory.memory | prettyByteSize }}) + Swap ({{ memory.swap | prettyByteSize }})</span></label>
-        <canvas id="graphsSystemMemoryChart" style="width: 100%;"></canvas>
-        <br/>
-        <div class="text-muted text-center text-small">{{ 'system.systemMemory.graphSubtext' | tr }}</div>
-      </div>
-    </uib-tab>
-
-    <uib-tab index="2" 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="dropdown pull-right" ng-hide="activeTab === 0">
       <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>

src/views/system.js

@@ -76,84 +76,100 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                 }
             });
 
-            // both in minutes
+            // in minutes
             var timePeriod = $scope.period * 60;
-            var timeBucketSize = $scope.period > 24 ? (6*60) : 5;
 
-            function fillGraph(canvasId, data, appsData, label, chartPropertyName, max, valueDivider) {
+            // keep in sync with graphs.js
-                // translate the data from bytes to MB
+            var timeBucketSizeMinutes = timePeriod > (24 * 60) ? (6*60) : 5;
-                var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); });
+            var steps = Math.floor(timePeriod/timeBucketSizeMinutes);
-                var labels = datapoints.map(function (d, index) {
-                    var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSize)) * 60 *1000));
 
-                    if ($scope.period > 24) {
+            var labels = new Array(steps).fill(0);
-                        return dateTime.toLocaleDateString();
+            labels = labels.map(function (v, index) {
-                    } else {
+                var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSizeMinutes)) * 60 * 1000));
-                        return dateTime.toLocaleTimeString();
-                    }
-                });
 
-                var datasets = [{
+                if ($scope.period > 24) {
-                    label: label,
+                    return dateTime.toLocaleDateString();
-                    backgroundColor: '#82C4F844',
+                } else {
-                    borderColor: '#2196F3',
+                    return dateTime.toLocaleTimeString();
-                    borderWidth: 1,
+                }
-                    radius: 0,
+            });
-                    data: datapoints
-                }];
 
-                Object.keys(appsData).forEach(function (appId) {
+            var borderColors = [ '#2196F3', '#FF6384' ];
-                    var data = appsData[appId].memory;
+            var backgroundColors = [ '#82C4F844', '#FF63844F' ];
-                    if (!data.datapoints.some(function (p) { return p[0] > 1024*1024*1024; })) return;
+
+            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: Client.getInstalledAppsByAppId()[appId].fqdn,
+                        label: content.label,
-                        fill: false,
+                        backgroundColor: backgroundColors[index],
-                        borderColor: getRandomColor(),
+                        borderColor: borderColors[index],
                         borderWidth: 1,
                         radius: 0,
-                        data: data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); })
+                        data: datapoints,
+                        cubicInterpolationMode: 'monotone',
+                        tension: 0.4
                     });
                 });
 
-                var chartData = {
+                var graphData = {
                     labels: labels,
                     datasets: datasets
                 };
 
                 var options = {
+                    responsive: true,
                     maintainAspectRatio: true,
                     aspectRatio: 2.5,
-                    legend: {
+                    plugins: {
-                        display: false
+                        legend: {
+                            display: false
+                        }
                     },
-                    tooltips: {
+                    interaction: {
-                        intersect: false
+                        intersect: false,
+                        mode: 'index',
                     },
                     scales: {
-                        xAxes: [{
+                        x: {
-                            ticks: {
+                            ticks: { autoSkipPadding: 50, maxRotation: 0 }
-                                autoSkipPadding: 20,
+                        },
-                            }
+                        y: {
-                        }],
+                            min: 0,
-                        yAxes: [{
+                            beginAtZero: true
-                            ticks: {
+                        }
-                                min: 0,
-                                max: max,
-                                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: chartData, options: options });
+                $scope[chartPropertyName] = new Chart(ctx, { type: 'line', data: graphData, options: options });
             }
 
-            fillGraph('#graphsCPUChart', result.cpu, {}, 'CPU Usage', 'cpuChart', 100, 1);
+            fillGraph('#graphsCPUChart', [{ data: result.cpu, label: 'CPU' }], 'cpuChart', 100, 1);
-            fillGraph('#graphsSystemMemoryChart', result.memory, result.apps, 'Memory', 'memoryChart', Number.parseInt(($scope.memory.memory + $scope.memory.swap) / 1024 / 1024), 1024 * 1024);
+            fillGraph('#graphsSystemMemoryChart', [{ data: result.memory, label: 'Memory' }], 'memoryChart', 1024 * 1024, Number.parseInt($scope.memory.memory / 1024 / 1024));
 
             $scope.busy = false;
         });