Rework the system view layout
This commit is contained in:
Johannes Zellner
@@ -43,7 +43,8 @@
|
||||
<h4 class="modal-title">Really reboot server?</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-warning">Rebooting the server will cause temporary downtime for all apps installed on this Cloudron!</p>
|
||||
<p class="text-danger">Rebooting the server will cause temporary downtime for all apps installed on this Cloudron!</p>
|
||||
<p>Use this only when you experience unexpected behavior. All services and apps will be automatically started.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
@@ -56,44 +57,11 @@
|
||||
<div class="content">
|
||||
|
||||
<div class="text-left">
|
||||
<h1>System Info</h1>
|
||||
</div>
|
||||
|
||||
<div class="text-left">
|
||||
<h3>Disk Usage</h3>
|
||||
</div>
|
||||
|
||||
<div class="card card-large">
|
||||
<div class="row" ng-if="disks.errorMessage">
|
||||
<br>
|
||||
<div class="alert alert-warning text-center">
|
||||
{{ disks.errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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 }};"> </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 }};"> </span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
System Info
|
||||
<a class="btn btn-primary pull-right" href="/logs.html?id=box" target="_blank">Show Logs</a>
|
||||
<button class="btn btn-default pull-right" ng-click="reboot.show()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> Reboot</button>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="text-left">
|
||||
@@ -196,24 +164,38 @@
|
||||
</div>
|
||||
|
||||
<div class="text-left">
|
||||
<h3>Server</h3>
|
||||
<h3>Disk Usage</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 class="card card-large">
|
||||
<div class="row" ng-if="disks.errorMessage">
|
||||
<br>
|
||||
<div class="alert alert-warning text-center">
|
||||
{{ disks.errorMessage }}
|
||||
</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 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 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 }};"> </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 }};"> </span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user