From 034b2b2ddd8a32a1e7a86f4ac02f27fe1fdfcf24 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 22 May 2020 13:48:26 +0200
Subject: [PATCH] Add backup details dialog

When a backup contains many apps, displaying them in the main backup
list is confusing and hides most apps
---
 src/views/backups.html | 52 ++++++++++++++++++++++++++++++++----------
 src/views/backups.js   |  9 ++++++++
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/views/backups.html b/src/views/backups.html
index 5181390af..138fb635a 100644
--- a/src/views/backups.html
+++ b/src/views/backups.html
@@ -1,3 +1,38 @@
+<!-- Modal details -->
+<div class="modal fade" id="backupDetailsModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Backup Details</h4>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-xs-3 text-muted">Id:</div>
+          <div class="col-xs-9 text-right">{{ backupDetails.backup.id }}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-3 text-muted">Date:</div>
+          <div class="col-xs-9 text-right">{{ backupDetails.backup.creationTime | prettyLongDate }}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-3 text-muted">Version:</div>
+          <div class="col-xs-9 text-right">v{{ backupDetails.backup.packageVersion }}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-3 text-muted">Format:</div>
+          <div class="col-xs-9 text-right">{{ backupDetails.backup.format }}</div>
+        </div>
+        <br/>
+        <p class="text-muted">Contains backups of {{ backupDetails.backup.contents.length }} apps:</p>
+        <p style="padding-left: 20px;" ng-repeat="app in backupDetails.backup.contents"><a ng-href="/#/app/{{app.id}}/backups">{{ app.label || app.fqdn }}</a></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Modal backup failed -->
 <div class="modal fade" id="createBackupFailedModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -311,18 +346,11 @@
           </thead>
           <tbody>
             <tr ng-repeat="backup in backups">
-              <td><div>v{{ backup.packageVersion }}</div></td>
-              <td><div uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }}</div></td>
-              <td>
-                <span> {{ backup.contents.length ? backup.contents.length : 'No '}} apps </span>
-
-                <span ng-show="backup.contents.length">
-                  <span> - </span>
-                  <span ng-repeat="app in backup.contents | limitTo: 5">
-                    <a ng-href="/#/app/{{app.id}}/backups">{{app.label || app.fqdn}}</a><span ng-hide="$last">,</span>
-                  </span>
-                  <span ng-show="backup.contents.length > 5">&amp; {{ backup.contents.length - 5 }} more </span>
-                </span>
+              <td ng-click="backupDetails.show(backup)" class="hand">v{{ backup.packageVersion }}</td>
+              <td ng-click="backupDetails.show(backup)" class="hand"><span uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }}</span></td>
+              <td ng-click="backupDetails.show(backup)" class="hand">
+                <span ng-show="!backup.contents.length">No apps</span>
+                <span ng-show="backup.contents.length">{{ backup.contents.length }} apps</span>
               </td>
               <td class="text-right no-wrap" style="vertical-align: bottom">
                 <button class="btn btn-xs btn-default" ng-click="downloadConfig(backup)" uib-tooltip="Download Backup Configuration"><i class="fas fa-file-alt"></i></button>
diff --git a/src/views/backups.js b/src/views/backups.js
index 2bb5315c5..9dbe9e6dc 100644
--- a/src/views/backups.js
+++ b/src/views/backups.js
@@ -272,6 +272,15 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
         download('cloudron_backup.json', JSON.stringify(tmp));
     };
 
+    $scope.backupDetails = {
+        backup: null,
+
+        show: function (backup) {
+            $scope.backupDetails.backup = backup;
+            $('#backupDetailsModal').modal('show');
+        }
+    };
+
     $scope.configureScheduleAndRetention = {
         busy: false,
         error: {},