Put all log viewer buttons in the section headers for the backup view

dashboard/src/views/backups.html

@@ -101,7 +101,7 @@
       <div class="modal-body">{{ 'backups.cleanupBackups.description' | tr }}</div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
-        <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="createBackup.startCleanup()">{{ 'backups.cleanupBackups.cleanupNow' | tr }}</button>
+        <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="cleanupBackups.start()">{{ 'backups.cleanupBackups.cleanupNow' | tr }}</button>
       </div>
     </div>
   </div>
@@ -508,7 +508,10 @@
   </div>
 
   <div class="text-left section-header">
-    <h3>{{ 'backups.schedule.title' | tr }}</h3>
+    <h3>
+      {{ 'backups.schedule.title' | tr }}
+      <a class="btn btn-sm btn-default pull-right" ng-href="/logs.html?taskId={{cleanupBackups.taskId}}" target="_blank" uib-tooltip="{{ 'backups.logs.showLogs' | tr }}"><i class="fas fa-align-left"></i></a>
+    </h3>
   </div>
 
   <div class="card" style="margin-bottom: 15px;">
@@ -532,13 +535,17 @@
     <br/>
     <div class="row">
       <div class="col-md-12 text-right">
+        <button class="btn btn-default" ng-click="cleanupBackups.ask()" ng-disabled="cleanupBackups.busy" style="margin-right: 5px"><i class="fa fa-circle-notch fa-spin" ng-show="cleanupBackups.busy"></i> {{ 'backups.listing.cleanupBackups' | tr }}</button>
         <button class="btn btn-outline btn-primary pull-right" ng-show="user.isAtLeastOwner" ng-click="configureScheduleAndRetention.show()">{{ 'backups.schedule.configure' | tr }}</button>
       </div>
     </div>
   </div>
 
   <div class="text-left section-header">
-    <h3>{{ 'backups.listing.title' | tr }}</h3>
+    <h3>
+      {{ 'backups.listing.title' | tr }}
+      <a class="btn btn-sm btn-default pull-right" ng-href="/logs.html?taskId={{createBackup.taskId}}" target="_blank" uib-tooltip="{{ 'backups.logs.showLogs' | tr }}"><i class="fas fa-align-left"></i></a>
+    </h3>
   </div>
 
   <div class="card card-large">
@@ -594,23 +601,9 @@
 
     <div class="row">
       <div class="col-md-12 text-right">
-        <button class="btn btn-default" ng-click="createBackup.cleanupBackups()" ng-show="!createBackup.busy" style="margin-right: 5px">{{ 'backups.listing.cleanupBackups' | tr }}</button>
         <button class="btn btn-outline btn-primary" ng-click="createBackup.startBackup()" ng-show="!createBackup.busy">{{ 'backups.listing.backupNow' | tr }}</button>
         <button class="btn btn-outline btn-danger" ng-click="createBackup.stopTask()" ng-show="createBackup.busy">{{ 'backups.listing.stopTask' | tr:{ taskType: createBackup.taskType } }}</button>
       </div>
     </div>
   </div>
-
-  <div class="text-left section-header">
-    <h3>{{ 'backups.logs.title' | tr }}</h3>
-  </div>
-
-  <div class="card card-large" style="margin-bottom: 15px;">
-    <div class="row">
-      <div class="col-md-12">
-        <p>{{ 'backups.logs.description' | tr }}</p>
-        <a class="btn btn-primary pull-right" ng-href="/logs.html?taskId={{createBackup.taskId}}" ng-disabled="!createBackup.taskId" target="_blank">{{ 'backups.logs.showLogs' | tr }}</a>
-      </div>
-    </div>
-  </div>
 </div>

dashboard/src/views/backups.js

@@ -119,11 +119,9 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
         message: '',
         errorMessage: '',
         taskId: '',
-        taskType: TASK_TYPES.TASK_BACKUP,
 
-        checkStatus: function () {
+        init: function () {
-            // TODO support both task types TASK_BACKUP and TASK_CLEAN_BACKUPS
+            Client.getLatestTaskByType(TASK_TYPES.TASK_BACKUP, function (error, task) {
-            Client.getLatestTaskByType($scope.createBackup.taskType, function (error, task) {
                 if (error) return console.error(error);
 
                 if (!task) return;
@@ -158,7 +156,6 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             $scope.createBackup.percent = 0;
             $scope.createBackup.message = '';
             $scope.createBackup.errorMessage = '';
-            $scope.createBackup.taskType = TASK_TYPES.TASK_BACKUP;
 
             Client.startBackup(function (error, taskId) {
                 if (error) {
@@ -182,26 +179,6 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             });
         },
 
-        cleanupBackups: function () {
-            $('#cleanupBackupsModal').modal('show');
-        },
-
-        startCleanup: function () {
-            $scope.createBackup.busy = true;
-            $scope.createBackup.percent = 0;
-            $scope.createBackup.message = '';
-            $scope.createBackup.errorMessage = '';
-            $scope.createBackup.taskType = TASK_TYPES.TASK_CLEAN_BACKUPS;
-
-            $('#cleanupBackupsModal').modal('hide');
-
-            Client.cleanupBackups(function (error, taskId) {
-                if (error) console.error(error);
-
-                $scope.createBackup.taskId = taskId;
-                $scope.createBackup.updateStatus();
-            });
-        },
 
         stopTask: function () {
             Client.stopTask($scope.createBackup.taskId, function (error) {
@@ -221,6 +198,54 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
         }
     };
 
+    $scope.cleanupBackups = {
+        busy: false,
+        taskId: 0,
+
+        init: function () {
+            Client.getLatestTaskByType(TASK_TYPES.TASK_CLEAN_BACKUPS, function (error, task) {
+                if (error) return console.error(error);
+
+                if (!task) return;
+
+                $scope.cleanupBackups.taskId = task.id;
+                $scope.cleanupBackups.updateStatus();
+            });
+        },
+
+        updateStatus: function () {
+            Client.getTask($scope.cleanupBackups.taskId, function (error, data) {
+                if (error) return window.setTimeout($scope.cleanupBackups.updateStatus, 5000);
+
+                if (!data.active) {
+                    $scope.cleanupBackups.busy = false;
+                    return fetchBackups();
+                }
+
+                $scope.cleanupBackups.busy = true;
+                $scope.cleanupBackups.message = data.message;
+                window.setTimeout($scope.cleanupBackups.updateStatus, 3000);
+            });
+        },
+
+        ask: function () {
+            $('#cleanupBackupsModal').modal('show');
+        },
+
+        start: function () {
+            $scope.cleanupBackups.busy = true;
+
+            $('#cleanupBackupsModal').modal('hide');
+
+            Client.cleanupBackups(function (error, taskId) {
+                if (error) console.error(error);
+
+                $scope.cleanupBackups.taskId = taskId;
+                $scope.cleanupBackups.updateStatus();
+            });
+        }
+    };
+
     $scope.listBackups = {
     };
 
@@ -748,7 +773,8 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
             $scope.manualBackupApps = Client.getInstalledApps().filter(function (app) { return app.type !== APP_TYPES.LINK && !app.enableBackup; });
 
             // show backup status
-            $scope.createBackup.checkStatus();
+            $scope.createBackup.init();
+            $scope.cleanupBackups.init();
         });
     });
 

dashboard/src/views/domains.html

@@ -353,7 +353,7 @@
   <div class="text-left section-header">
     <h3>
       {{ 'domains.renewCerts.title' | tr }}
-      <a class="btn btn-sm btn-default pull-right" ng-href="/logs.html?taskId={{renewCerts.taskId}}" ng-disabled="!renewCerts.taskId" target="_blank" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-align-left"></i></a>
+      <a class="btn btn-sm btn-default pull-right" ng-href="/logs.html?taskId={{renewCerts.taskId}}" ng-disabled="!renewCerts.taskId" target="_blank" uib-tooltip="{{ 'domains.renewCerts.showLogsAction' | tr }}"><i class="fas fa-align-left"></i></a>
     </h3>
   </div>
 
@@ -386,7 +386,7 @@
   <div class="text-left section-header">
     <h3>
       {{ 'domains.syncDns.title' | tr }}
-      <a class="btn btn-sm btn-default pull-right" ng-href="/logs.html?taskId={{syncDns.taskId}}" ng-disabled="!syncDns.taskId" target="_blank" uib-tooltip="{{ 'domains.syncDns.showLogsAction' | tr }}" tooltip-append-to-body="true" tooltip-placement="bottom"><i class="fas fa-align-left"></i></a>
+      <a class="btn btn-sm btn-default pull-right" ng-href="/logs.html?taskId={{syncDns.taskId}}" ng-disabled="!syncDns.taskId" target="_blank" uib-tooltip="{{ 'domains.syncDns.showLogsAction' | tr }}"><i class="fas fa-align-left"></i></a>
     </h3>
   </div>