Add backup details dialog

When a backup contains many apps, displaying them in the main backup
list is confusing and hides most apps
This commit is contained in:
Johannes Zellner
2020-05-22 13:48:26 +02:00
parent fb5a789f55
commit 034b2b2ddd
2 changed files with 49 additions and 12 deletions

View File

@@ -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>