From c8c6b15285de69ae742bf97d5f2e4c31c2017f68 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 13 May 2020 20:41:56 +0200
Subject: [PATCH] Rework the system view layout

---
 src/views/system.html | 88 +++++++++++++++++--------------------------
 1 file changed, 35 insertions(+), 53 deletions(-)

diff --git a/src/views/system.html b/src/views/system.html
index 78b35ce71..b0336c99b 100644
--- a/src/views/system.html
+++ b/src/views/system.html
@@ -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 }};">&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>
+    <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 }};">&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>
   </div>