Move disk usage to system

This commit is contained in:
Johannes Zellner
2020-03-05 18:26:58 -08:00
parent 7a817319ba
commit aca5a876d8
4 changed files with 152 additions and 194 deletions

View File

@@ -59,6 +59,36 @@
<h1>System</h1>
</div>
<div class="text-left">
<h3>Disk Usage</h3>
</div>
<div class="card card-large">
<div class="row ng-hide" ng-show="disks.length === 0">
<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> still 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>
</div>
</div>
<br/>
<div class="text-left">
<h3>Services</h3>
</div>
@@ -91,6 +121,15 @@
</tr>
</thead>
<tbody>
<tr>
<td><i class="fa fa-circle" uib-tooltip="active" style="color: #27CE65"></i></td>
<td class="elide-table-cell">cloudron</td>
<td class="elide-table-cell"></td>
<td class="elide-table-cell text-center"></td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<a class="btn btn-xs btn-default" href="/logs.html?id=box" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
</td>
</tr>
<tr ng-repeat="service in services | orderBy:'name'">
<td>
<i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: service.status === 'active' ? '#27CE65' : (service.status === 'starting' ? '#f0ad4e' : '#d9534f') }" ng-show="service.status"></i>
@@ -109,8 +148,8 @@
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-default" ng-click="serviceConfigure.show(service)" uib-tooltip="Configure Memory Limit" ng-show="service.config.memory"><i class="fa fa-pencil-alt"></i></button>
<a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + service.name }}" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
<button class="btn btn-xs btn-default" ng-click="restartService(service.name)" uib-tooltip="Restart"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': service.status === 'starting' }"></i></button>
<a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + service.name }}" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
</td>
</tr>
</tbody>
@@ -120,28 +159,4 @@
</div>
</div>
</div>
<div class="text-left">
<h3>Server</h3>
</div>
<div class="card" style="margin-bottom: 15px;">
<div class="row">
<div class="col-md-12">
<p class="text-danger text-bold" ng-show="isRebootRequired">
This server requires a reboot to finalize Ubuntu security updates.
</p>
<p ng-hide="isRebootRequired">
Use this only when you experience unexpected behavior. All services and apps will be automatically started.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<a class="btn btn-primary" href="/logs.html?id=box" target="_blank">Show Logs</a>
<button class="btn btn-danger" ng-click="reboot.show()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> Reboot</button>
</div>
</div>
</div>
</div>