Add info on what cleanup backups does

src/views/backups.html

@@ -52,6 +52,25 @@
   </div>
 </div>
 
+<!-- Cleanup backups info -->
+<div class="modal fade" id="cleanupBackupsModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Cleanup Backups</h4>
+      </div>
+      <div class="modal-body">
+        Old backups are automatically cleaned up based on the retention policy. This action will trigger an immediate removal
+        of backups outside the retention policy.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="createBackup.startCleanup()">Cleanup now</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- modal backup config -->
 <div class="modal fade" id="configureScheduleAndRetentionModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -398,7 +417,7 @@
 
     <div class="row">
       <div class="col-md-12 text-right">
-        <button class="btn btn-default" ng-click="createBackup.startCleanup()" ng-show="!createBackup.busy" style="margin-right: 5px">Cleanup Backups</button>
+        <button class="btn btn-default" ng-click="createBackup.cleanupBackups()" ng-show="!createBackup.busy" style="margin-right: 5px">Cleanup Backups</button>
         <button class="btn btn-outline btn-primary" ng-click="createBackup.startBackup()" ng-show="!createBackup.busy"">Backup now</button>
         <button class="btn btn-outline btn-danger" ng-click="createBackup.stopTask()" ng-show="createBackup.busy"">Stop {{ createBackup.taskType === 'backup' ? 'Backup' : 'Cleanup' }}</button>
       </div>

src/views/backups.js

@@ -205,6 +205,10 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             });
         },
 
+        cleanupBackups: function (backup) {
+            $('#cleanupBackupsModal').modal('show');
+        },
+
         startCleanup: function () {
             $scope.createBackup.busy = true;
             $scope.createBackup.percent = 0;
@@ -212,6 +216,8 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             $scope.createBackup.errorMessage = '';
             $scope.createBackup.taskType = 'cleanBackups';
 
+            $('#cleanupBackupsModal').modal('hide');
+
             Client.cleanupBackups(function (error, taskId) {
                 if (error) console.error(error);