disable search when running

awx/ui/client/features/output/index.controller.js

@@ -50,36 +50,11 @@ function JobsIndexController (
     // Development helper(s)
     vm.clear = devClear;
 
-    // Stdout Navigation
-    vm.scroll = {
-        showBackToTop: false,
-        home: scrollHome,
-        end: scrollEnd,
-        down: scrollPageDown,
-        up: scrollPageUp
-    };
-
     // Expand/collapse
     vm.toggle = toggle;
     vm.expand = expand;
     vm.isExpanded = true;
 
-    // Search
-    $state = _$state_;
-    qs = _qs_;
-
-    vm.searchValue = '';
-    vm.searchRejected = null;
-    vm.searchKey = false;
-    vm.searchKeyExamples = searchKeyExamples;
-    vm.searchKeyFields = searchKeyFields;
-
-    vm.clearSearch = clearSearch;
-    vm.search = search;
-    vm.toggleSearchKey = toggleSearchKey;
-    vm.removeSearchTag = removeSearchTag;
-    vm.searchTags = getSearchTags(getCurrentQueryset());
-
     // Events
     eventCounter = null;
     statsEvent = resource.stats;
@@ -103,6 +78,33 @@ function JobsIndexController (
         finished: resource.model.get('finished'),
     };
 
+    // Search
+    $state = _$state_;
+    qs = _qs_;
+
+    vm.search = {
+        clearSearch,
+        searchKeyExamples,
+        searchKeyFields,
+        toggleSearchKey,
+        removeSearchTag,
+        submitSearch,
+        value: '',
+        key: false,
+        rejected: false,
+        disabled: !resource.model.get('finished'),
+        tags: getSearchTags(getCurrentQueryset()),
+    };
+
+    // Stdout Navigation
+    vm.scroll = {
+        showBackToTop: false,
+        home: scrollHome,
+        end: scrollEnd,
+        down: scrollPageDown,
+        up: scrollPageUp
+    };
+
     render.requestAnimationFrame(() => init(!vm.status.running));
 }
 
@@ -134,11 +136,15 @@ function init (pageMode) {
             vm.status.plays = 0;
             vm.status.tasks = 0;
             vm.status.running = true;
+
+            vm.search.disabled = true;
         },
         onStop () {
             vm.status.stats = statsEvent;
             vm.status.running = false;
 
+            vm.search.disabled = false;
+
             vm.details.status = statsEvent.failed ? 'failed' : 'successful';
             vm.details.finished = statsEvent.created;
         }
@@ -398,7 +404,7 @@ const searchKeyExamples = ['id:>1', 'task:set', 'created:>=2000-01-01'];
 const searchKeyFields = ['changed', 'failed', 'host_name', 'stdout', 'task', 'role', 'playbook', 'play'];
 
 function toggleSearchKey () {
-    vm.searchKey = !vm.searchKey;
+    vm.search.key = !vm.search.key;
 }
 
 function getCurrentQueryset () {
@@ -416,31 +422,31 @@ function getSearchTags (queryset) {
 }
 
 function removeSearchTag (index) {
-    const searchTerm = vm.searchTags[index];
+    const searchTerm = vm.search.tags[index];
 
     const currentQueryset = getCurrentQueryset();
     const modifiedQueryset = qs.removeTermsFromQueryset(currentQueryset, searchTerm);
 
-    vm.searchTags = getSearchTags(modifiedQueryset);
+    vm.search.tags = getSearchTags(modifiedQueryset);
 
     $state.params.job_event_search = qs.encodeArr(modifiedQueryset);
     $state.transitionTo($state.current, $state.params, searchReloadOptions);
 }
 
-function search () {
+function submitSearch () {
-    const searchInputQueryset = qs.getSearchInputQueryset(vm.searchValue);
+    const searchInputQueryset = qs.getSearchInputQueryset(vm.search.value);
 
     const currentQueryset = getCurrentQueryset();
     const modifiedQueryset = qs.mergeQueryset(currentQueryset, searchInputQueryset);
 
-    vm.searchTags = getSearchTags(modifiedQueryset);
+    vm.search.tags = getSearchTags(modifiedQueryset);
 
     $state.params.job_event_search = qs.encodeArr(modifiedQueryset);
     $state.transitionTo($state.current, $state.params, searchReloadOptions);
 }
 
 function clearSearch () {
-    vm.searchTags = [];
+    vm.search.tags = [];
 
     $state.params.job_event_search = '';
     $state.transitionTo($state.current, $state.params, searchReloadOptions);

awx/ui/client/features/output/index.view.html

@@ -22,31 +22,31 @@
                 tasks="vm.status.tasks">
             </at-stats>
             <!-- search ===================================================================================== -->
-            <form ng-submit="vm.search()">
+            <form ng-submit="vm.search.submitSearch()">
             <div class="input-group">
                 <input type="text"
                        class="form-control at-Input"
-                       ng-class="{ 'at-Input--rejected': vm.searchRejected }"
+                       ng-class="{ 'at-Input--rejected': vm.search.rejected }"
-                       ng-model="vm.searchValue"
+                       ng-model="vm.search.value"
-                       ng-attr-placeholder="SEARCH"
+                       ng-attr-placeholder="{{ vm.search.disabled ? 'CANNOT SEARCH RUNNING JOB' : 'SEARCH' }}"
-                       ng-disabled="vm.searchDisabled">
+                       ng-disabled="vm.search.disabled">
                 <span class="input-group-btn">
                     <button class="btn at-ButtonHollow--default at-Input-button"
-                            ng-click="vm.search()"
+                            ng-click="vm.search.submitSearch()"
-                            ng-disabled="vm.searchDisabled"
+                            ng-disabled="vm.search.disabled"
                             type="button">
                         <i class="fa fa-search"></i>
                     </button>
                     <button class="btn jobz-Button-searchKey"
-                            ng-if="vm.searchKey"
+                            ng-if="vm.search.key"
-                            ng-disabled="vm.searchDisabled"
+                            ng-disabled="vm.search.disabled"
-                            ng-click="vm.toggleSearchKey()"
+                            ng-click="vm.search.toggleSearchKey()"
                             type="button"> key
                     </button>
                     <button class="btn at-ButtonHollow--default at-Input-button"
-                            ng-if="!vm.searchKey"
+                            ng-if="!vm.search.key"
-                            ng-disabled="vm.searchDisabled"
+                            ng-disabled="vm.search.disabled"
-                            ng-click="vm.toggleSearchKey()"
+                            ng-click="vm.search.toggleSearchKey()"
                             type="button"> key
                     </button>
                 </span>
@@ -54,16 +54,20 @@
             </form>
 
             <div class="jobz-tagz">
-                <div class="LabelList-tagContainer" ng-repeat="tag in vm.searchTags track by $index">
+                <div class="LabelList-tagContainer" ng-repeat="tag in vm.search.tags track by $index">
                     <div class="LabelList-tag LabelList-tag--deletable"><span class="LabelList-name">{{ tag }}</span></div>
-                    <div class="LabelList-deleteContainer" ng-click="vm.removeSearchTag($index)">
+                    <div class="LabelList-deleteContainer" ng-click="vm.search.removeSearchTag($index)">
                         <i class="fa fa-times LabelList-tagDelete"></i>
                     </div>
                 </div>
-                <div><a href class="jobz-searchClearAll" ng-click="vm.clearSearch()" ng-show="!(vm.searchTags | isEmpty)">CLEAR ALL</a></div>
+                <div><a href class="jobz-searchClearAll" ng-click="vm.search.clearSearch()" ng-show="!(vm.search.tags | isEmpty)">CLEAR ALL</a></div>
             </div>
 
-            <at-search-key ng-show="vm.searchKey" fields="vm.searchKeyFields" examples="vm.searchKeyExamples"></at-search-key>
+            <at-search-key
+                ng-show="vm.search.key"
+                fields="vm.search.searchKeyFields"
+                examples="vm.search.searchKeyExamples">
+            </at-search-key>
 
             <!-- ============================================================================================ -->
             <div class="at-Stdout-menuTop">