Job detail page

Added cancel/delete and relaunch buttons.

awx/ui/static/js/controllers/JobDetail.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
+function JobDetailController ($location, $rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
     ProcessErrors, SelectPlay, SelectTask, Socket, GetElapsed, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList,
-    JobIsFinished, SetTaskStyles, DigestEvent, UpdateDOM, EventViewer) {
+    JobIsFinished, SetTaskStyles, DigestEvent, UpdateDOM, EventViewer, DeleteJob, PlaybookRun) {
 
     ClearScope();
 
@@ -1163,9 +1163,36 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         });
     };
 
+    if (scope.removeDeleteFinished) {
+        scope.removeDeleteFinished();
+    }
+    scope.removeDeleteFinished = scope.$on('DeleteFinished', function(e, action) {
+        Wait('stop');
+        if (action !== 'cancel') {
+            Wait('stop');
+            $location.url('/jobs');
+        }
+    });
+
+    scope.deleteJob = function() {
+        DeleteJob({
+            scope: scope,
+            id: scope.job.id,
+            job: scope.job,
+            callback: 'DeleteFinished'
+        });
+    };
+
+    scope.relaunchJob = function() {
+        PlaybookRun({
+            scope: scope,
+            id: scope.job.id
+        });
+    };
+
 }
 
-JobDetailController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
+JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
-    'Wait', 'Rest', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'FilterAllByHostName', 'DrawGraph',
+    'Wait', 'Rest', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'FilterAllByHostName', 'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
-    'LoadHostSummary', 'ReloadHostSummaryList', 'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer'
+    'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer', 'DeleteJob', 'PlaybookRun'
 ];

awx/ui/static/js/helpers/Jobs.js

@@ -419,24 +419,27 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
 .factory('DeleteJob', ['Find', 'GetBasePath', 'Rest', 'Wait', 'ProcessErrors', 'Prompt', 'Alert',
 function(Find, GetBasePath, Rest, Wait, ProcessErrors, Prompt, Alert){
     return function(params) {
-
         var scope = params.scope,
             id = params.id,
-            action, jobs, job, url, action_label, hdr;
+            job = params.job,
+            callback = params.callback,
+            action, jobs, url, action_label, hdr;
 
-        if (scope.completed_jobs) {
+        if (!job) {
-            jobs = scope.completed_jobs;
+            if (scope.completed_jobs) {
+                jobs = scope.completed_jobs;
+            }
+            else if (scope.running_jobs) {
+                jobs = scope.running_jobs;
+            }
+            else if (scope.queued_jobs) {
+                jobs = scope.queued_jobs;
+            }
+            else if (scope.jobs) {
+                jobs = scope.jobs;
+            }
+            job = Find({list: jobs, key: 'id', val: id });
         }
-        else if (scope.running_jobs) {
-            jobs = scope.running_jobs;
-        }
-        else if (scope.queued_jobs) {
-            jobs = scope.queued_jobs;
-        }
-        else if (scope.jobs) {
-            jobs = scope.jobs;
-        }
-        job = Find({list: jobs, key: 'id', val: id });
 
         if (job.status === 'pending' || job.status === 'running' || job.status === 'waiting') {
             url = job.related.cancel;
@@ -455,18 +458,29 @@ function(Find, GetBasePath, Rest, Wait, ProcessErrors, Prompt, Alert){
                 Rest.post()
                     .success(function () {
                         $('#prompt-modal').modal('hide');
-                        scope.search(scope.iterator);
+                        if (callback) {
+                            scope.$emit(callback, action_label);
+                        }
+                        else {
+                            scope.search(scope.iterator);
+                        }
                     })
-                    .error(function (data, status) {
+                    .error(function() {
                         $('#prompt-modal').modal('hide');
-                        ProcessErrors(scope, data, status, null, { hdr: 'Error!', msg: 'Call to ' + url +
+                        // Ignore the error. The job most likely already finished.
-                            ' failed. POST returned status: ' + status });
+                        // ProcessErrors(scope, data, status, null, { hdr: 'Error!', msg: 'Call to ' + url +
+                        //    ' failed. POST returned status: ' + status });
                     });
             } else {
                 Rest.destroy()
                     .success(function () {
                         $('#prompt-modal').modal('hide');
-                        scope.refreshJobs();
+                        if (callback) {
+                            scope.$emit(callback, action_label);
+                        }
+                        else {
+                            scope.refreshJobs();
+                        }
                     })
                     .error(function (data, status) {
                         $('#prompt-modal').modal('hide');
@@ -488,9 +502,11 @@ function(Find, GetBasePath, Rest, Wait, ProcessErrors, Prompt, Alert){
             scope.removeCancelJob();
         }
         scope.removeCancelJob = scope.$on('CancelJob', function() {
+            var body;
+            body = (action_label === 'cancel') ? "Submit the request to cancel" : "Delete";
             Prompt({
                 hdr: hdr,
-                body: "<div class=\"alert alert-info\">Submit the request to " + action_label + " job #" + id + " " + job.name  + "?</div>",
+                body: "<div class=\"alert alert-info\">" + body + " job #" + id + " " + job.name  + "?</div>",
                 action: action
             });
         });

awx/ui/static/partials/job_detail.html

@@ -15,8 +15,11 @@
                 <div class="job_well">
                     <div class="row">
                         <div class="col-md-12 text-right">
-                            <a href="/#/jobs/{{ job_id }}/stdout" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-external-link"></i></a>
+                            <a href="/#/jobs/{{ job_id }}/stdout" id="view-stdout-button" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-lg fa-external-link"></i></a>
-                            <button type="button" id="summary-button" class="btn btn-primary btn-xs" ng-click="toggleSummary()" aw-tool-tip="View summary" data-placement="top"><i class="fa fa-arrow-circle-left fa-lg"></i></button>
+                            <a href="" ng-click="deleteJob()" id="cancel-job-button" ng-show="job_status.status == 'running'" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Cancel" data-placement="top"><i class="fa fa-lg fa-minus-circle"></i></a>
+                            <a href="" ng-click="deleteJob()" id="delete-job-button" ng-show="job_status.status != 'running'" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Delete" data-placement="top"><i class="fa fa-lg fa-trash-o"></i></a>
+                            <a href="" ng-click="relaunchJob()" id="relaunch-job-button" type="button" class="btn btn-primary btn-xs" aw-tool-tip="Relaunch using the same parameters" data-placement="top"><i class="fa fa-lg fa-rocket"></i></a>
+                            <button type="button" id="summary-button" class="btn btn-primary btn-xs" ng-click="toggleSummary()" aw-tool-tip="View summary" data-placement="top"><i class="fa fa-lg fa-arrow-circle-left fa-lg"></i></button>
                         </div>
                     </div>