Show disk content separately inside the usage graph

This commit is contained in:
Johannes Zellner
2019-08-21 20:27:43 +02:00
parent 6643b825ee
commit 173acc5226
4 changed files with 43 additions and 16 deletions

View File

@@ -42,18 +42,16 @@
<div class="card card-large">
<div class="row" ng-repeat="disk in disks" style="margin-bottom: 20px;">
<div class="col-md-12">
<h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="badge pull-right">{{ disk.size }} GB</span></h3>
<h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="badge pull-right">{{ disk.size | prettyDiskSize }}</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: {{ disk.occupied / disk.size * 100 }}%">
{{ disk.occupied }} GB used
</div>
<div class="progress-bar" ng-repeat="content in disk.contains" style="width: {{ content.usage / disk.size * 100 }}%; background-color: {{ content.color }};" uib-tooltip="{{ content.label + ' ' + (content.usage | prettyDiskSize) }}"></div>
</div>
<br/>
<p>This {{ disk.type }} disk contains:</p>
<ul>
<li ng-repeat="content in disk.contains">
<span ng-hide="content.app">{{ content.label }} <small class="text-muted">{{ content.usage }}</small></span>
<span ng-show="content.app"><b>{{ content.app.manifest.title }}</b> installed at <a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.fqdn }}</a> <small class="text-muted">{{ content.usage }}</small></span>
<span ng-hide="content.app">{{ content.label }} <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
<span ng-show="content.app"><b>{{ content.app.manifest.title }}</b> installed at <a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.fqdn }}</a> <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
</li>
</ul>
</div>