From aa9317069a7c214b711b23defe28d3848a38eaac Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 5 May 2020 16:36:52 +0200
Subject: [PATCH] Group redis services and have them collapsed

---
 src/views/system.html | 34 +++++++++++++++++++++++++++++++---
 src/views/system.js   | 27 ++++++++++++++++++++++-----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/views/system.html b/src/views/system.html
index 2f1261cd7..78b35ce71 100644
--- a/src/views/system.html
+++ b/src/views/system.html
@@ -3,7 +3,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="modal-title">Configure {{ serviceConfigure.service.name }}</h4>
+        <h4 class="modal-title">Configure {{ serviceConfigure.service.displayName }}</h4>
       </div>
       <div class="modal-body">
         <form name="serviceConfigureForm" role="form" novalidate ng-submit="serviceConfigure.submit()" autocomplete="off">
@@ -137,13 +137,41 @@
                     <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'">
+                <tr ng-repeat="service in services | filter:{ isRedis: false } | 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>
                     <i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
                   </td>
                   <td class="elide-table-cell">
-                    {{ service.name }}
+                    {{ service.displayName }}
+                  </td>
+                  <td class="elide-table-cell">
+                    <div class="progress progress-striped" ng-show="service.config.memory">
+                      <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ service.memoryPercent }}%"></div>
+                    </div>
+                  </td>
+                  <td class="elide-table-cell text-center">
+                    <span ng-show="service.config.memory">{{ service.config.memorySwap / 1024 / 1024 + ' MB' }}</span>
+                  </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>
+                    <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>
+                <tr ng-show="true" ng-click="redisServicesExpanded = !redisServicesExpanded" class="hand">
+                  <td>
+                    <i class="fas fa-angle-right" ng-class="{'fa-rotate-90': redisServicesExpanded }"></i>
+                  </td>
+                  <td colspan="4">redis</td>
+                </tr>
+                <tr ng-show="redisServicesExpanded" ng-repeat="service in services | filter:{ isRedis: true } | 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>
+                    <i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
+                  </td>
+                  <td class="elide-table-cell">
+                    {{ service.displayName }}
                   </td>
                   <td class="elide-table-cell">
                     <div class="progress progress-striped" ng-show="service.config.memory">
diff --git a/src/views/system.js b/src/views/system.js
index 967322572..f031a208a 100644
--- a/src/views/system.js
+++ b/src/views/system.js
@@ -10,6 +10,8 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
     $scope.config = Client.getConfig();
     $scope.servicesReady = false;
     $scope.services = [];
+    $scope.hasRedisServices = false;
+    $scope.redisServicesExpanded = false;
     $scope.memory = null;
 
     // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
@@ -36,7 +38,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
             if (error) return console.log('Error getting status of ' + serviceName + ':' + error.message);
 
             var service = $scope.services.find(function (s) { return s.name === serviceName; });
-            if (!service) $scope.services.push(result);
+            if (!service) $scope.services.find(function (s) { return s.name === serviceName; });
 
             service.status = result.status;
             service.config = result.config;
@@ -269,12 +271,27 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
             Client.getServices(function (error, result) {
                 if (error) return Client.error(error);
 
-                $scope.services = result.map(function (serviceName) { return { name: serviceName }; });
+                $scope.services = result.map(function (name) {
+                    var displayName = name;
+                    var isRedis = false;
+
+                    if (name.indexOf('redis') === 0) {
+                        isRedis = true;
+                        var app = Client.getCachedAppSync(name.slice('redis:'.length));
+                        displayName = 'redis for ';
+                        if (app) displayName += app.label || app.location || app.fqdn;
+                    }
+
+                    return {
+                        name: name,
+                        displayName: displayName,
+                        isRedis: isRedis
+                    };
+                });
+                $scope.hasRedisServices = !!$scope.services.find(function (service) {  return service.isRedis; });
 
                 // just kick off the status fetching
-                $scope.services.forEach(function (s) {
-                    refresh(s.name);
-                });
+                $scope.services.forEach(function (s) { refresh(s.name); });
 
                 $scope.servicesReady = true;
             });