From 36dfd780bbd0ace3811add2fea961cc7db19d424 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Sat, 16 Aug 2014 03:47:38 -0400
Subject: [PATCH] Job detail page Fixed
 https://trello.com/c/dKA4UU0U/308-if-a-job-products-no-plays-tasks-or-job-host-summaries-the-corresponding-page-sections-say-loading

---
 awx/ui/static/js/controllers/JobDetail.js |  6 +++-
 awx/ui/static/partials/job_detail.html    | 34 +++++++++++++++--------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index cf413bd1e6..e8dbe5b899 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -39,6 +39,9 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.hostResultsLoading = true;
     scope.hostSummariesLoading = true;
 
+    // Turn on the 'Waiting...' message until events begin arriving
+    scope.waiting = true;
+
     scope.liveEventProcessing = true;     // true while job is active and live events are arriving
     scope.pauseLiveEvents = false;        // control play/pause state of event processing
 
@@ -93,6 +96,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         event_socket.init();
         event_socket.on("job_events-" + job_id, function(data) {
             if (api_complete && data.id > lastEventId) {
+                scope.waiting = false;
                 data.event = data.event_name;
                 DigestEvent({ scope: scope, event: data });
             }
@@ -430,7 +434,6 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         scope.host_summary.unreachable = 0;
         scope.host_summary.failed = 0;
         scope.host_summary.total = 0;
-
         scope.jobData.plays = {};
 
         var url = scope.job.url  + 'job_plays/?order_by=id';
@@ -627,6 +630,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                     scope.job_status.finished = data.finsished;
                     scope.liveEventProcessing = false;
                     scope.pauseLiveEvents = false;
+                    scope.waiting = false;
                 }
                 else {
                     scope.job_status.finished = null;
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index 4212604846..8a1b531efa 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -178,11 +178,14 @@
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
                                             <td class="col-lg-7 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
                                         </tr>
-                                        <tr ng-show="plays.length === 0 && playsLoading">
+                                        <tr ng-show="plays.length === 0 && waiting">
+                                            <td colspan="4" class="col-lg-12 loading-info">Waiting...</td>
+                                        </tr>
+                                        <tr ng-show="plays.length === 0 && playsLoading && !waiting">
                                             <td colspan="4" class="col-lg-12 loading-info">Loading...</td>
                                         </tr>
-                                        <tr ng-show="plays.length === 0 && !playsLoading">
-                                            <td colspan="4" class="col-lg-12 loading-info">Waiting...</td>
+                                        <tr ng-show="plays.length === 0 && !playsLoading && !waiting">
+                                            <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -242,11 +245,14 @@
                                             <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4" id="">{{ task.name }}</td>
                                             <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                         </tr>
-                                        <tr ng-show="taskList.length === 0 && tasksLoading">
+                                        <tr ng-show="taskList.length === 0 && waiting">
+                                            <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
+                                        </tr>
+                                        <tr ng-show="taskList.length === 0 && tasksLoading && !waiting">
                                             <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
                                         </tr>
-                                        <tr ng-show="taskList.length === 0 && !tasksLoading">
-                                            <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
+                                        <tr ng-show="taskList.length === 0 && !tasksLoading && !waiting">
+                                            <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -304,11 +310,14 @@
                                             <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="result.host_id" href="" ng-click="editHost(result.host_id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
-                                        <tr ng-show="results.length === 0 && hostResultsLoading">
+                                        <tr ng-show="results.length === 0 && waiting">
+                                            <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
+                                        </tr>
+                                        <tr ng-show="results.length === 0 && hostResultsLoading && !waiting">
                                             <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
                                         </tr>
-                                        <tr ng-show="results.length === 0 && !hostResultsLoading">
-                                            <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
+                                        <tr ng-show="results.length === 0 && !hostResultsLoading && !waiting">
+                                            <td colspan="5" class="col-lg-12 loading-info">No matching host events</td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -384,10 +393,13 @@
                                                 <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></td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="host.id" href="" ng-click="editHost(host.id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
-                                        <tr ng-show="summaryList.length === 0 && hostSummariesLoading">
+                                        <tr ng-show="summaryList.length === 0 && waiting">
+                                            <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
+                                        </tr>
+                                        <tr ng-show="summaryList.length === 0 && hostSummariesLoading && !waiting">
                                             <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
                                         </tr>
-                                        <tr ng-show="summaryList.length === 0 && !hostSummariesLoading">
+                                        <tr ng-show="summaryList.length === 0 && !hostSummariesLoading && !waiting">
                                             <td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
                                         </tr>
                                     </tbody>