Add backup listing UI

This commit is contained in:
Girish Ramakrishnan
2020-05-14 22:42:41 -07:00
parent a8f5b5d4e4
commit 6528461873
2 changed files with 79 additions and 23 deletions

View File

@@ -177,6 +177,10 @@
<h1>Backups</h1>
</div>
<div class="text-left">
<h3>Location</h3>
</div>
<div class="card" style="margin-bottom: 15px;">
<p>Cloudron makes a complete backup of your system based on this configuration.
<span ng-show="manualBackupApps.length">
@@ -219,33 +223,51 @@
<br/>
<div class="row">
<div class="col-xs-4">
<span class="text-muted">Backup ID</span>
</div>
<div class="col-xs-8 text-right">
<span ng-click-select ng-show="lastBackup">{{ lastBackup.id }}</span>
<span ng-hide="lastBackup">No backups have been made yet</span>
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-show="user.role === 'owner'" ng-click="configureBackup.show()">Configure</button>
</div>
</div>
</div>
<div class="text-left">
<h3>Listing</h3>
</div>
<div class="card card-large">
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Last backup</span>
</div>
<div class="col-xs-6 text-right">
<span uib-tooltip="{{ lastBackup.creationTime | prettyLongDate }}" ng-show="lastBackup">{{ lastBackup.creationTime | prettyDate }}</span>
<span ng-hide="lastBackup">-</span>
<div class="col-md-12">
<!-- backup id copy helper -->
<input type="text" class="offscreen" aria-hidden="true" id="backupIdHelper" value="">
<p ng-show="!backups.length">No backups have been made yet</p>
<table class="table table-hover" style="margin: 0;" ng-hide="!backups.length">
<thead>
<tr>
<th width="25px">&nbsp;</th>
<th>Version</th>
<th>Contents</th>
<th>Date</th>
<th class="text-right" width="180px">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="backup in backups">
<td><div ng-click="listBackups.copyBackupId(backup)" class="hand" uib-tooltip="{{ listBackups.copyBackupIdDone ? 'Copied to clipboard' : 'Click to copy backup id' }}" tooltip-placement="right"><i class="fa fa-copy"></i></div></td>
<td><div>v{{ backup.packageVersion }}</div></td>
<td><div>{{ backup.dependsOn.length }} app(s)</div></td>
<td><div uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }}</div></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="far fa-file"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<p ng-show="lastBackup">
For Cloudron restore or migration, <a href="" ng-click="downloadConfig()">download</a> the backup configuration.
</p>
<br/>
<div class="row" ng-show="createBackup.busy">
<div class="col-md-12" style="margin-bottom: 10px;">
<div class="progress progress-striped active animateMe">
@@ -263,9 +285,9 @@
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-show="user.role === 'owner'" ng-click="configureBackup.show()" ng-disabled="createBackup.busy">Configure</button>
<button class="btn btn-outline" ng-click="createBackup.startCleanup()" ng-show="!createBackup.busy" style="margin-right: 10px">Cleanup Backups</button>
<button class="btn btn-outline btn-primary" ng-click="createBackup.startBackup()" ng-show="!createBackup.busy" style="margin-right: 10px">Backup now</button>
<button class="btn btn-outline btn-danger" ng-click="createBackup.stopBackup()" ng-show="createBackup.busy" style="margin-right: 10px">Stop Backup</button>
<button class="btn btn-outline btn-danger" ng-click="createBackup.stopTask()" ng-show="createBackup.busy" style="margin-right: 10px">Stop {{ createBackup.taskType === 'backup' ? 'Backup' : 'Cleanup' }}</button>
</div>
</div>
</div>