Added start of search controls to summary section. Removed reload of task and host summary tables on screen resize. We're now maintaining 300 rows for each.

2026-02-15 02:00:01 -03:30 · 2014-05-09 10:28:10 -04:00
parent 3a5544801a
commit b320fc725f
4 changed files with 89 additions and 29 deletions
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -29,9 +29,12 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
    scope.auto_scroll = false;
    scope.searchTaskHostsEnabled = true;
    scope.searchSummaryHostsEnabled = true;
-    scope.hostTableRows = 120;
-    scope.hostSummaryTableRows = 120;
-    
+    scope.hostTableRows = 300;
+    scope.hostSummaryTableRows = 300;
+    scope.searchAllHostsEnabled = true;
+    scope.liveEventsEnabled = true;
+    scope.liveEventToggleDisabled = false;
+
    event_socket =  Socket({
        scope: scope,
        endpoint: "job_events"
@@ -223,6 +226,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                    scope.job_status.elapsed = '00:00:00';
                }

+                scope.setSearchAll('host');
                scope.$emit('JobReady', data.related.job_events + '?page_size=50&order_by=id');
                scope.$emit('GetCredentialNames', data);
            })
@@ -237,7 +241,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
    }
    scope.removeRefreshCompleted = scope.$on('RefreshCompleted', function() {
        refresh_count++;
-        if (refresh_count === 2) {
+        if (refresh_count === 1) {
+            // First time. User just loaded page.
            scope.$emit('LoadJob');
        }
    });
@@ -263,29 +268,30 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc

        // Detail table height adjusting. First, put page height back to 'normal'.
        $('#plays-table-detail').height(150);
+        $('#plays-table-detail').mCustomScrollbar("update");
        $('#tasks-table-detail').height(150);
+        $('#tasks-table-detail').mCustomScrollbar("update");
        $('#hosts-table-detail').height(150);
-        scope.hostTableRows = 120;
+        $('#hosts-table-detail').mCustomScrollbar("update");
        height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
        if (height > 15) {
            // there's a bunch of white space at the bottom, let's use it
            $('#plays-table-detail').height(150 + (height / 3));
-            //$('#plays-table-detail').mCustomScrollbar("update");
+            $('#plays-table-detail').mCustomScrollbar("update");
            $('#tasks-table-detail').height(150 + (height / 3));
-            // Host details
+            $('#tasks-table-detail').mCustomScrollbar("update");
            $('#hosts-table-detail').height(150 + (height / 3));
-            scope.hostTableRows = Math.max(Math.ceil((150 + (height / 3)) / 20) * 3, 120);
+            $('#hosts-table-detail').mCustomScrollbar("update");
        }
-        refreshHostRows();
-
+       
        // Summary table height adjusting.
-        height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() - 20;
-        scope.hostSummaryTableRows = Math.max(Math.ceil(height / 20), 120);
+        height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() - 
+            $('#summary-search-section').outerHeight() - 20;
        $('#hosts-summary-table').height(height);
-        refreshSummaryHostRows();
+        scope.$emit('RefreshCompleted');
    };

-    function refreshHostRows() {
+    /*function refreshHostRows() {
        var url;
        if (scope.activeTask) {
            scope.hostResults = [];
@@ -376,7 +382,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
            $('#hosts-table-detail').mCustomScrollbar("update");
            scope.$emit('RefreshCompleted');
        }
-    }
+    }*/

    setTimeout(function() { scope.adjustSize(); }, 500);

@@ -385,21 +391,34 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        scope.adjustSize();
    }, 500));

-    $scope.selectPlay = function(id) {
+    scope.setSearchAll = function(search) {
+        if (search === 'host') {
+            scope.search_all_label = 'Host name';
+            scope.searchAllDisabled = false;
+            scope.search_all_placeholder = 'Search all by host name';
+        }
+        else {
+            scope.search_all_label = 'Failures';
+            scope.searchAllDisabled = true; 
+            scope.search_all_placeholder = '';
+        }
+    };
+
+    scope.selectPlay = function(id) {
        SelectPlay({
            scope: scope,
            id: id
        });
    };

-    $scope.selectTask = function(id) {
+    scope.selectTask = function(id) {
        SelectTask({
            scope: scope,
            id: id
        });
    };

-    $scope.toggleSummary = function(hide) {
+    scope.toggleSummary = function(hide) {
        var docw, doch, height = $('#job-detail-container').height(), slide_width;
        if (!hide) {
            docw = $(window).width();
@@ -430,7 +449,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        }
    };

-    $scope.HostDetailOnTotalScroll = _.debounce(function() {
+    scope.HostDetailOnTotalScroll = _.debounce(function() {
        // Called when user scrolls down (or forward in time). Using _.debounce
        var url, mcs = arguments[0];
        scope.$apply(function() {
@@ -475,7 +494,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        });
    }, 300);

-    $scope.HostDetailOnTotalScrollBack = _.debounce(function() {
+    scope.HostDetailOnTotalScrollBack = _.debounce(function() {
        // Called when user scrolls up (or back in time)
        var url, mcs = arguments[0];
        scope.$apply(function() {
@@ -520,7 +539,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        });
    }, 300);

-    $scope.HostSummaryOnTotalScroll = function(mcs) {
+    scope.HostSummaryOnTotalScroll = function(mcs) {
        var url;
        if (!scope.auto_scroll && scope.hosts) {
            url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
@@ -561,7 +580,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        scope.auto_scroll = false;
    };

-    $scope.HostSummaryOnTotalScrollBack = function(mcs) {
+    scope.HostSummaryOnTotalScrollBack = function(mcs) {
        var url;
        if (!scope.auto_scroll && scope.hosts) {
            url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
@@ -601,7 +620,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        }
    };

-    $scope.searchTaskHosts = function() {
+    scope.searchTaskHosts = function() {
        var url;
        Wait('start');
        scope.hostResults = [];
@@ -638,13 +657,13 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        }
    };

-    $scope.taskHostNameKeyPress = function(e) {
+    scope.taskHostNameKeyPress = function(e) {
        if (e.keyCode === 13) {
-            $scope.searchTaskHosts();
+            scope.searchTaskHosts();
        }
    };

-    $scope.searchSummaryHosts = function() {
+    scope.searchSummaryHosts = function() {
        var url;
        Wait('start');
        scope.hosts = [];
@@ -681,9 +700,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
        }
    };

-    $scope.summaryHostNameKeyPress = function(e) {
+    scope.summaryHostNameKeyPress = function(e) {
        if (e.keyCode === 13) {
-            $scope.searchSummaryHosts();
+            scope.searchSummaryHosts();
        }
    };
 }
--- a/awx/ui/static/js/helpers/JobDetail.js
+++ b/awx/ui/static/js/helpers/JobDetail.js
@@ -218,6 +218,8 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
                });
                scope.job_status.status = (event.failed) ? 'failed' : 'successful';
                scope.job_status.status_class = "";
+                scope.liveEventsEnabled = true; // Show the stop button
+                scope.liveEventToggleDisabled = true;  //Disable clicking on the button, the job is over
            }
        });
    };
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -148,7 +148,8 @@
 .table-detail { 
    overflow-x: hidden;
    overflow-y: auto;
-    border: 1px solid @black;
+    border: 1px solid @grey;
+    border-radius: 4px;
    background-color: @white;
    padding-left: 3px; 
    .row {
@@ -216,6 +217,19 @@
    }
 }

+#search-all-input-icons {
+    position: absolute;
+    right: 3px;
+    top: 5px;
+    z-index: 100;
+    a {
+        color: #a9a9a9;
+    }
+    a:hover {
+        color: @black;
+    }
+}
+
 #task-hosts-section {
    position: relative; 
    top: 0;
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -135,6 +135,31 @@
                    <div id="hide-summary-button" style="display: hidden;">
                        <a href="" class="btn btn-xs btn-default" ng-click="toggleSummary('hide')" aw-tool-tip="Hide hosts summary" data-placement="top"><i class="fa fa-arrow-circle-right fa-lg"></i></a>
                    </div>
+                    <div id="summary-search-section" class="section">
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <div class="input-group input-group-sm">
+                                    <div class="input-group-btn">
+                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span ng-bind="search_all_label"></span> <span class="caret"></span></button>
+                                        <ul class="dropdown-menu">
+                                          <li><a href="" ng-click="setSearchAll('host')">Host</a></li>
+                                          <li><a href="" ng-click="setSearchAll('failures')">Failures</a></li>
+                                        </ul>
+                                    </div><!-- /btn-group -->
+                                    <input type="text" class="form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name" placeholder="{{ search_all_placeholder }}" ng-disabled="searchAllDisabled"
+                                        ng-keypress="allHostNameKeyPress($event)" />
+                                    <div id="search-all-input-icons">
+                                        <a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllHosts()"><i class="fa fa-search"></i></a>
+                                        <a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllHosts()"><i class="fa fa-times"></i></a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <button type="button" class="btn btn-sm btn-default" aw-tool-top="Live updates enabled. Click to disable." ng-show="!liveEventsEnabled"><i class="fa fa-play"></i> Play</button>
+                                <button type="button" class="btn btn-sm btn-default" aw-tool-top="Live updates disabled. Click to Enable." ng-show="liveEventsEnabled" ng-disabled="liveEventToggleDisabled"><i class="fa fa-stop"></i> Stop</button>
+                            </div>
+                        </div>
+                    </div>
                    <div id="hosts-summary-section" class="section job_summary">
                        <div class="header">
                            <div class="title">Host Summary</div>