From f223113cdc6ddec8fff068a193f857ac88ce3d2d Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Wed, 9 Jul 2014 00:38:07 -0400
Subject: [PATCH] Job detail page re-refactor Host event viewer now calls event
 viewer. Added search spinner.

---
 awx/ui/static/js/controllers/JobDetail.js    |  7 +++--
 awx/ui/static/js/helpers/EventViewer.js      |  3 +-
 awx/ui/static/js/helpers/HostEventsViewer.js | 30 ++++++++++++++------
 awx/ui/static/less/job-details.less          |  5 +++-
 awx/ui/static/partials/job_detail.html       |  9 +++---
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index 749c451b6d..020b300fff 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -1004,15 +1004,16 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         }
     };
 
-    scope.hostEventsViewer = function(id, name) {
+    scope.hostEventsViewer = function(id, name, status) {
         HostEventsViewer({
             scope: scope,
             id: id,
             name: name,
-            url: scope.job.related.job_events
+            url: scope.job.related.job_events,
+            job_id: scope.job.id,
+            status: status
         });
     };
-
 }
 
 JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
diff --git a/awx/ui/static/js/helpers/EventViewer.js b/awx/ui/static/js/helpers/EventViewer.js
index 3a36a5c49e..b263f26fec 100644
--- a/awx/ui/static/js/helpers/EventViewer.js
+++ b/awx/ui/static/js/helpers/EventViewer.js
@@ -7,7 +7,7 @@
 
 'use strict';
 
-angular.module('EventViewerHelper', ['ModalDialog', 'Utilities'])
+angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'HostEventsViewerHelper'])
 
     .factory('EventViewer', ['$compile', 'CreateDialog', 'GetEvent', 'Wait', 'EventAddTable', 'GetBasePath', 'LookUpName', 'Empty', 'EventAddPreFormattedText',
     function($compile, CreateDialog, GetEvent, Wait, EventAddTable, GetBasePath, LookUpName, Empty, EventAddPreFormattedText) {
@@ -93,6 +93,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities'])
                 $('#eventviewer-modal-dialog').dialog('close');
                 scope.$destroy();
             };
+
         };
     }])
 
diff --git a/awx/ui/static/js/helpers/HostEventsViewer.js b/awx/ui/static/js/helpers/HostEventsViewer.js
index 4c617c7481..b291cb691b 100644
--- a/awx/ui/static/js/helpers/HostEventsViewer.js
+++ b/awx/ui/static/js/helpers/HostEventsViewer.js
@@ -9,19 +9,22 @@
 
 'use strict';
 
-angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
+angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventViewerHelper'])
 
-    .factory('HostEventsViewer', ['$log', '$compile', 'CreateDialog', 'Wait', 'GetBasePath', 'Empty', 'GetEvents',
-    function($log, $compile, CreateDialog, Wait, GetBasePath, Empty, GetEvents) {
+    .factory('HostEventsViewer', ['$log', '$compile', 'CreateDialog', 'Wait', 'GetBasePath', 'Empty', 'GetEvents', 'EventViewer',
+    function($log, $compile, CreateDialog, Wait, GetBasePath, Empty, GetEvents, EventViewer) {
         return function(params) {
             var parent_scope = params.scope,
                 scope = parent_scope.$new(true),
+                job_id = params.job_id,
                 url = params.url,
                 title = params.title, //optional
                 fixHeight, buildTable;
 
             scope.host_events_search_name = params.name;
-            scope.host_events_search_status = 'all';
+            scope.host_events_search_status = (params.status) ?  params.status : 'all';
+
+            $log.debug('job_id: ' + job_id + ' url: ' + url + ' title: ' + title + ' name: ' + name + ' status: ' + status);
 
             scope.eventsSearchActive = (scope.host_events_search_name) ? true : false;
 
@@ -29,7 +32,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
                 scope.removeModalReady();
             }
             scope.removeModalReady = scope.$on('ModalReady', function() {
-                Wait('stop');
+                scope.hostViewSearching = false;
                 $('#host-events-modal-dialog').dialog('open');
             });
 
@@ -65,9 +68,9 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
             scope.removeRefreshHTML = scope.$on('RefreshHTML', function(e, data) {
                 var elem, html = buildTable(data);
                 $('#host-events').html(html);
+                scope.hostViewSearching = false;
                 elem = angular.element(document.getElementById('host-events'));
                 $compile(elem)(scope);
-                Wait('stop');
             });
 
             buildTable = function(data) {
@@ -99,7 +102,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
                         status = 'changed';
                         status_text = 'Changed';
                     }
-                    html += "<tr ng-click=\"showDetails()\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n";
+                    html += "<tr ng-click=\"showDetails(" + result.id + ")\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n";
                     html += "<td class=\"col-md-3\"><i class=\"fa icon-job-" + status + "\"></i> <a href=\"\">" + status_text + "</a></td>\n";
                     html += "<td class=\"col-md-3\"><a href=\"\">" + result.play + "</a></td>\n";
                     html += "<td class=\"col-md-3\"><a href=\"\">" + result.task + "</a></td>\n";
@@ -143,10 +146,17 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
                 }
             };
 
+            scope.showDetails = function(id) {
+                EventViewer({
+                    scope: parent_scope,
+                    url: GetBasePath('jobs') + job_id + '/job_events/?id=' + id,
+                });
+            };
+
         };
     }])
 
-    .factory('GetEvents', ['Wait', 'Rest', 'ProcessErrors', function(Wait, Rest, ProcessErrors) {
+    .factory('GetEvents', ['Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
         return function(params) {
             var url = params.url,
                 scope = params.scope,
@@ -175,13 +185,15 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities'])
                 url += '&event__icontains=runner&not__event=runner_on_skipped';
             }
 
-            Wait('start');
+            scope.hostViewSearching = true;
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
+                    scope.hostViewSearching = false;
                     scope.$emit(callback, data);
                 })
                 .error(function(data, status) {
+                    scope.hostViewSearching = false;
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                         msg: 'Failed to get events ' + url + '. GET returned: ' + status });
                 });
diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index e3cd01ffb0..81c95cd061 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -16,7 +16,7 @@
 
 #host-events-modal-dialog {
     overflow: hidden;
-    i {
+    i[class*='icon-job'] {
         font-size: 12px;
         vertical-align: middle;
     }
@@ -57,6 +57,9 @@
     #fixed-table-header {
         margin-bottom: 0;
     }
+    #search-indicator {
+        margin-left: 15px;
+    }
 }
 
 @media (max-width: 768px) {
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index 2ba40d3578..aa06931da7 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -230,10 +230,10 @@
                                             data-placement="top">{{ host.name }}</a>
                                     </div>
                                     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 badge-column">
-                                        <a href="" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
-                                        <a href="" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
-                                        <a href="" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
-                                        <a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
+                                        <a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
+                                        <a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
+                                        <a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
+                                        <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
                                     </div>
                                 </div>
                                 <div class="row" ng-show="summaryList.length === 0">
@@ -284,6 +284,7 @@
                     <option value="unreachable">Unreachable</option>
                 </select>
             </div>
+            <div class="form-group" id="search-indicator" ng-show="hostViewSearching"><i class="fa fa-lg fa-spin fa-cog"></i></div>
         </form>
         <!-- lr-infinite-scroll="hostEventsTable" scroll-threshold="10" time-threshold="500" -->
         <div id="host-events-table">