fix host summary display when 0 search results are found, fix graph sizing, resolves #2399 (#2430)

awx/ui/client/src/helpers/JobDetail.js

@@ -1017,36 +1017,7 @@ export default
                 .style({
                     "text-anchor": 'start'
                 });
-            /*
+            return job_detail_chart;
-            d3.select(element.find(".nv-label text")[1])
-                .attr("class", "HostSummary-graph--changed")
-                .style({
-                    "font-family": 'Open Sans',
-                    "font-size": "16px",
-                    "text-transform" : "uppercase",
-                    "fill" : colors[1],
-                    "src": "url(/static/assets/OpenSans-Regular.ttf)"
-                });
-            d3.select(element.find(".nv-label text")[2])
-                .attr("class", "HostSummary-graph--failed")
-                .style({
-                    "font-family": 'Open Sans',
-                    "font-size": "16px",
-                    "text-transform" : "uppercase",
-                    "fill" : colors[2],
-                    "src": "url(/static/assets/OpenSans-Regular.ttf)"
-                });
-            d3.select(element.find(".nv-label text")[3])
-                .attr("class", "HostSummary-graph--unreachable")
-                .style({
-                    "font-family": 'Open Sans',
-                    "font-size": "16px",
-                    "text-transform" : "uppercase",
-                    "fill" : colors[3],
-                    "src": "url(/static/assets/OpenSans-Regular.ttf)"
-                });
-            */
-                return job_detail_chart;
         };
     }])
 

awx/ui/client/src/job-detail/host-summary/host-summary.controller.js

@@ -10,21 +10,6 @@
         var page_size = 200;
         $scope.loading = $scope.hosts.length > 0 ? false : true;
         $scope.filter = 'all';
-        $scope.search = null;
-
-        var init = function(){
-            Wait('start');
-            JobDetailService.getJobHostSummaries($stateParams.id, {page_size: page_size})
-            .success(function(res){
-                $scope.hosts = res.results;
-                $scope.next = res.next;
-                Wait('stop');
-            });
-            JobDetailService.getJob({id: $stateParams.id})
-            .success(function(res){
-                $scope.status = res.results[0].status;
-            });
-        };
 
         var buildGraph = function(hosts){
             //  status waterfall: unreachable > failed > changed > ok > skipped
@@ -48,6 +33,21 @@
             };
             return count;
         };
+        var init = function(){
+            Wait('start');
+            JobDetailService.getJobHostSummaries($stateParams.id, {page_size: page_size})
+            .success(function(res){
+                $scope.hosts = res.results;
+                $scope.next = res.next;
+                $scope.count = buildGraph(res.results);
+                Wait('stop');
+                DrawGraph({count: $scope.count, resize:true});
+            });
+            JobDetailService.getJob({id: $stateParams.id})
+            .success(function(res){
+                $scope.status = res.results[0].status;
+            });
+        };
         var socketListener = function(){
             // emitted by the API in the same function used to persist host summary data
             // JobEvent.update_host_summary_from_stats() from /awx/main.models.jobs.py
@@ -64,6 +64,7 @@
                 }
             });
         };
+
         $scope.buildTooltip = function(n, status){
             var grammar = function(n, status){
                 var dict = {
@@ -92,6 +93,7 @@
             }
         };
         $scope.search = function(){
+            $scope.searchActive = true;
             Wait('start');
             JobDetailService.getJobHostSummaries($stateParams.id, {
                 page_size: page_size,
@@ -102,6 +104,11 @@
                 Wait('stop');
             });
         };
+        $scope.clearSearch = function(){
+            $scope.searchActive = false;
+            $scope.searchTerm = null;
+            init();
+        };
         $scope.setFilter = function(filter){
             $scope.filter = filter;
             var getAll = function(){
@@ -127,11 +134,10 @@
             };
             $scope.get = filter === 'all' ? getAll() : getFailed();
         };
-
-        $scope.$watchCollection('hosts', function(curr){
-            $scope.count = buildGraph(curr);
-            DrawGraph({count: $scope.count, resize:true});
-        });
         socketListener();
         init();
+        // calling the init routine twice will size the d3 chart correctly - no idea why
+        // instantiating the graph inside a setTimeout() SHOULD have the same effect, but it doesn't
+        // instantiating the graph further down the promise chain e.g. .then() or .finally() also does not work
+        init();
     }];

awx/ui/client/src/job-detail/host-summary/host-summary.partial.html

@@ -1,13 +1,13 @@
 
 <div id="hosts-summary-section" class="section">
-    <div class="JobDetail-instructions" ng-hide="hosts.length == 0"><span class="badge">4</span> Please select a host below to view a summary of all associated tasks.</div>
+    <div class="JobDetail-instructions" ng-hide="hosts.length == 0 && !searchTerm"><span class="badge">4</span> Please select a host below to view a summary of all associated tasks.</div>
-    <div class="JobDetail-searchHeaderRow" ng-hide="hosts.length == 0">
+    <div class="JobDetail-searchHeaderRow" ng-hide="hosts.length == 0 && !searchTerm">
         <div class="JobDetail-searchContainer form-group">
             <div class="search-name">
                 <form ng-submit="search()">
                 <input type="text" class="JobDetail-searchInput form-control List-searchInput" id="search_host_summary_name" ng-model="searchTerm" placeholder="Host Name" />
-                    <a class="List-searchInputIcon search-icon" ng-click="search()"><i class="fa fa-search"></i></a>
+                    <a class="List-searchInputIcon search-icon" ng-click="search()" ng-show="!searchActive"><i class="fa fa-search"></i></a>
-
+                    <a class="List-searchInputIcon search-icon" ng-show="searchActive" ng-click="clearSearch()"><i class="fa fa-times"></i></a>
                 </form>
             </div>
         </div>
@@ -22,7 +22,7 @@
         </div>
     </div>
 
-    <div class="table-header" ng-hide="hosts.length == 0">
+    <div class="table-header" ng-hide="hosts.length == 0 && !searchTerm">
         <table class="table table-condensed">
             <thead>
                 <tr>

awx/ui/client/src/job-detail/job-detail.controller.js

@@ -738,11 +738,11 @@ export default
 
             scope.toggleLessEvents = function() {
                 if (!scope.lessEvents) {
-                    $('#events-summary').slideUp(200);
+                    $('#events-summary').slideUp(0);
                     scope.lessEvents = true;
                 }
                 else {
-                    $('#events-summary').slideDown(200);
+                    $('#events-summary').slideDown(0);
                     scope.lessEvents = false;
                 }
             };