Show overall system disk usage in graphs

Also adds a bit of description what the numbers include.

Fixes #83 since any more folder level information is currently too much work.
This commit is contained in:
Johannes Zellner
2016-12-07 16:48:37 +01:00
parent ba7c901d7a
commit 761ce99f8e
2 changed files with 28 additions and 7 deletions

View File

@@ -14,15 +14,32 @@
<div class="row shadow memory-app-container">
<h2>Disk Usage</h2>
<br/>
<div class="col-md-offset-4 col-md-4">
<h4>Data <span class="badge">{{ diskUsage['box'].sum }} GB</span></h4>
<canvas id="boxDiskUsageChart" width="200" height="200"></canvas>
<div class="col-md-offset-2 col-md-4">
<h4>App Data <span class="badge">{{ diskUsage['data'].sum }} GB</span></h4>
<canvas id="dataDiskUsageChart" width="200" height="200"></canvas>
<p>
<span class="text-success">Free {{ diskUsage['box'].free }} GB</span>
<span class="text-success">Free {{ diskUsage['data'].free }} GB</span>
&nbsp;
<span class="text-primary">Used {{ diskUsage['box'].used }} GB</span>
<span class="text-primary">Used {{ diskUsage['data'].used }} GB</span>
</p>
</div>
<div class="col-md-4">
<h4>System <span class="badge">{{ diskUsage['system'].sum }} GB</span></h4>
<canvas id="systemDiskUsageChart" width="200" height="200"></canvas>
<p>
<span class="text-success">Free {{ diskUsage['system'].free }} GB</span>
&nbsp;
<span class="text-primary">Used {{ diskUsage['system'].used }} GB</span>
</p>
</div>
<div class="col-md-2" style="text-align: justify;">
<h4>Description</h4>
App Data shows the virtual disk usage for application user data.
The full App Data disk size may not be entirely accounted for in the overall System usage numbers, depending on the utilization.
<br/>
<br/>
The System disk size includes application images, which may consume the majority of disk space. Running low on system disk space may indicate that too many apps are installed.
</div>
</div>
<br/>

View File

@@ -105,11 +105,15 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
Client.graphs([
'averageSeries(collectd.localhost.df-loop*.df_complex-free)',
'averageSeries(collectd.localhost.df-loop*.df_complex-reserved)',
'averageSeries(collectd.localhost.df-loop*.df_complex-used)'
'averageSeries(collectd.localhost.df-loop*.df_complex-used)',
'averageSeries(collectd.localhost.df-*d*.df_complex-free)',
'averageSeries(collectd.localhost.df-*d*.df_complex-reserved)',
'averageSeries(collectd.localhost.df-*d*.df_complex-used)'
], '-1min', function (error, data) {
if (error) return console.log(error);
renderDisk('box', data[0], data[1], data[2]);
renderDisk('data', data[0], data[1], data[2]);
renderDisk('system', data[3], data[4], data[5]);
});
};