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

Show total I/O in graphs

Browse Source
This commit is contained in:
Johannes Zellner
2022-10-14 12:00:41 +02:00
parent aae3208e5f
commit 0b8a19fd62
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/app.html
View File

@@ -1064,13 +1064,13 @@
</div>
<button class="btn btn-sm btn-outline pull-right" style="margin-right: 5px" ng-click="graphs.show()" ng-disabled="graphs.busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': graphs.busy }"></i></button>
<label style="margin-top: 10px;">Memory</label>
<canvas id="graphsMemoryChart" style="width: 100%;"></canvas>
<canvas id="graphsMemoryChart" style="width: 100%; margin-bottom: 10px;"></canvas>
<label style="margin-top: 10px;">CPU</label>
<canvas id="graphsCpuChart" style="width: 100%;"></canvas>
<label style="margin-top: 10px;">Disk I/O</label>
<canvas id="graphsDiskChart" style="width: 100%;"></canvas>
<label style="margin-top: 10px;">Network I/O</label>
<canvas id="graphsNetworkChart" style="width: 100%;"></canvas>
<canvas id="graphsCpuChart" style="width: 100%; margin-bottom: 10px;"></canvas>
<label style="margin-top: 10px; display: block;">Disk I/O <span class="pull-right text-small">total: read {{ graphs.blockReadTotal }} / write {{ graphs.blockWriteTotal }}</span></label>
<canvas id="graphsDiskChart" style="width: 100%; margin-bottom: 10px;"></canvas>
<label style="margin-top: 10px; display: block;">Network I/O <span class="pull-right text-small">total: read {{ graphs.networkReadTotal }} / write {{ graphs.networkWriteTotal }}</span></label>
<canvas id="graphsNetworkChart" style="width: 100%; margin-bottom: 10px;"></canvas>
</div>
</div>
</div>

15
src/views/app.js
View File

@@ -693,6 +693,11 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
memoryChart: null,
diskChart: null,
blockReadTotal: 0,
blockWriteTotal: 0,
networkReadTotal: 0,
networkWriteTotal: 0,
setPeriod: function (hours) {
$scope.graphs.period = hours;
$scope.graphs.show();
@@ -800,11 +805,17 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
var currentMemoryLimit = $scope.app.memoryLimit || $scope.app.manifest.memoryLimit || (256 * 1024 * 1024);
var cpuCount = result.cpuCount;
var ioDivisor = 1000 * 1000;
$scope.graphs.blockReadTotal = (result.blockReadTotal / ioDivisor / 1000).toFixed(2) + ' MB';
$scope.graphs.blockWriteTotal = (result.blockWriteTotal / ioDivisor / 1000).toFixed(2) + ' MB';
$scope.graphs.networkReadTotal = (result.networkReadTotal / ioDivisor / 1000).toFixed(2) + ' MB';
$scope.graphs.networkWriteTotal = (result.networkWriteTotal / ioDivisor / 1000).toFixed(2) + ' MB';
fillGraph('#graphsMemoryChart', [{ data: result.memory, label: 'Memory' }], 'memoryChart', 1024 * 1024, currentMemoryLimit / 1024 / 1024, 'GiB', 1024);
fillGraph('#graphsCpuChart', [{ data: result.cpu, label: 'CPU' }], 'cpuChart', 1, cpuCount * 100, '%');
fillGraph('#graphsDiskChart', [{ data: result.blockRead, label: 'Read' }, { data: result.blockWrite, label: 'Write' }], 'diskChart', 1024 * 1024, null, 'KiB');
fillGraph('#graphsNetworkChart', [{ data: result.networkRead, label: 'Incoming' }, { data: result.networkWrite, label: 'Outgoing' }], 'networkChart', 1024 * 1024, null, 'KiB');
fillGraph('#graphsDiskChart', [{ data: result.blockRead, label: 'Read' }, { data: result.blockWrite, label: 'Write' }], 'diskChart', ioDivisor, null, 'kB/s');
fillGraph('#graphsNetworkChart', [{ data: result.networkRead, label: 'Incoming' }, { data: result.networkWrite, label: 'Outgoing' }], 'networkChart', ioDivisor, null, 'kB/s');
$scope.graphs.busy = false;
});