jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fixup system memory and cpu graphs

Browse Source
This commit is contained in:
Johannes Zellner
2022-10-11 21:22:56 +02:00
parent 78f0da0b50
commit e56585df10
2 changed files with 83 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/system.html
View File

@@ -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="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">
<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>

112
src/views/system.js
View File

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