Add ui bits to be able to reboot the server

src/views/system.html

@@ -1,3 +1,22 @@
+<!-- Modal reboot server -->
+<div class="modal fade" id="rebootModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Really reboot server?</h4>
+      </div>
+      <div class="modal-body">
+        <p class="text-bold">Rebooting the server will cause temporary downtime for all apps installed on this Cloudron!</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-danger" ng-click="reboot.submit()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> Reboot now</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal addon configure -->
 <div class="modal fade" id="addonConfigureModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -37,36 +56,54 @@
 <div class="content">
 
   <div class="text-left">
-    <h1>Addons</h1>
+    <h1>System</h1>
   </div>
 
   <div class="text-left">
-    <h3>Overview</h3>
+    <h3>Server</h3>
   </div>
 
   <div class="card" style="margin-bottom: 15px;">
     <div class="row">
-      <div class="col-xs-12">
-        Cloudron addons are addons for the apps. These include for example databases and authentication modules.<br/>
-        A full list of available addons can be found <a href="https://cloudron.io/developer/addons/" target="_blank">here</a>.
+      <div class="col-md-12">
+        <p class="text-danger text-bold" ng-show="isRebootRequired">
+          This Cloudron requires a reboot, to finalize security updates.
+        </p>
+        <p>
+          If this Cloudron expericences unexpected behavior, please restart the docker addon below first as an attempt to fix any issues, before triggering a server reboot.
+        </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()">Reboot</button>
       </div>
     </div>
   </div>
 
   <div class="text-left">
-    <h3>Status</h3>
+    <h3>Addons</h3>
   </div>
 
   <div class="card" style="margin-bottom: 15px;">
     <div class="row">
-      <div class="col-xs-12">
+      <div class="col-md-12">
+        <p>
+          Cloudron addons are addons for the apps. These include for example databases and authentication modules.<br/>
+          A full list of available addons can be found <a href="https://cloudron.io/developer/addons/" target="_blank">here</a>.
+        </p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
         <div class="row ng-hide" ng-show="!ready">
-          <div class="col-xs-12 text-center">
+          <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="col-xs-12">
+          <div class="col-md-12">
             <table class="table table-hover">
               <thead>
                 <tr>

src/views/system.js

@@ -8,6 +8,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
     $scope.config = Client.getConfig();
     $scope.ready = false;
     $scope.addons = {};
+    $scope.isRebootRequired = false;
 
     function refresh(addonName, callback) {
         callback = callback || function () {};
@@ -26,6 +27,27 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         });
     }
 
+    $scope.reboot = {
+        busy: false,
+
+        show: function () {
+            $scope.reboot.busy = false;
+
+            $('#rebootModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.reboot.busy = true;
+
+            Client.reboot(function (error) {
+                $scope.reboot.busy = false;
+                if (error) return Client.error(error);
+
+                $('#rebootModal').modal('hide');
+            });
+        }
+    };
+
     $scope.restartAddon = function (addonName) {
         function waitForActive(addonName) {
             refresh(addonName, function () {
@@ -103,17 +125,23 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
     };
 
     Client.onReady(function () {
-        Client.getAddons(function (error, result) {
-            if (error) return Client.error(error);
+        Client.isRebootRequired(function (error, result) {
+            if (error) console.error(error);
 
-            result.forEach(function (a) {
-                $scope.addons[a] = { name: a };
+            $scope.isRebootRequired = !!result;
+
+            Client.getAddons(function (error, result) {
+                if (error) return Client.error(error);
+
+                result.forEach(function (a) {
+                    $scope.addons[a] = { name: a };
+                });
+
+                // just kick off the status fetching
+                refreshAll();
+
+                $scope.ready = true;
             });
-
-            // just kick off the status fetching
-            refreshAll();
-
-            $scope.ready = true;
         });
     });
 }]);