disks: busy flag

This commit is contained in:
Girish Ramakrishnan
2020-04-18 22:48:09 -07:00
parent d087ed2349
commit eb90b614ea
2 changed files with 113 additions and 99 deletions

View File

@@ -64,32 +64,34 @@
</div>
<div class="card card-large">
<div class="row" ng-if="errorMessage">
<div class="row" ng-if="disks.errorMessage">
<br>
<div class="alert alert-warning text-center">
{{ errorMessage }}
{{ disks.errorMessage }}
</div>
</div>
<div class="row ng-hide" ng-show="disks.length === 0">
<div class="row" ng-show="disks.busy">
<div class="col-md-12 text-center">
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
</div>
</div>
<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="pull-right small"><b>{{ disk.available | prettyDiskSize }}</b> of <b>{{ disk.size | prettyDiskSize }}</b> available</span></h3>
<div class="progress">
<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 ng-show="!disks.busy" class="ng-hide">
<div class="row" ng-repeat="disk in disks.disks" style="margin-bottom: 20px;">
<div class="col-md-12">
<h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="pull-right small"><b>{{ disk.available | prettyDiskSize }}</b> of <b>{{ disk.size | prettyDiskSize }}</b> available</span></h3>
<div class="progress">
<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 }} <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"><a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.label || 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>
<br/>
<p>This {{ disk.type }} disk contains:</p>
<ul>
<li ng-repeat="content in disk.contains">
<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"><a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.label || 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>
</div>
</div>
@@ -108,12 +110,12 @@
</div>
<div class="row">
<div class="col-md-12">
<div class="row ng-hide" ng-show="!ready">
<div class="row ng-hide" ng-show="!servicesReady">
<div class="col-md-12 text-center">
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
</div>
</div>
<div class="row animateMeOpacity ng-hide" ng-show="ready">
<div class="row animateMeOpacity ng-hide" ng-show="servicesReady">
<div class="col-md-12">
<table class="table table-hover">
<thead>