updates to tag search ui implementation

awx/ui/client/src/forms/Projects.js

@@ -246,6 +246,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
 
         related: {
             permissions: {
+                basePath: 'projects/:id/access_list/',
                 type: 'collection',
                 title: 'Permissions',
                 iterator: 'permission',

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

@@ -368,20 +368,11 @@ export default
                 spinner = (params.spinner === undefined) ? true : params.spinner,
                 e, html, key;
 
-            // Add the search widget. We want it arranged differently, so we're injecting and compiling it separately
-            html = SearchWidget({
-                iterator: list.iterator,
-                template: params.list,
-                includeSize: false
-            });
-            e = angular.element(document.getElementById(id + '-search-container')).append(html);
-            $compile(e)(scope);
-
             GenerateList.inject(list, {
                 mode: 'edit',
                 id: id,
                 scope: scope,
-                showSearch: false,
+                showSearch: true,
                 title: false
             });
 
@@ -408,9 +399,6 @@ export default
                 JobsControllerInit({ scope: scope, parent_scope: parent_scope });
                 JobsListUpdate({ scope: scope, parent_scope: parent_scope, list: list });
                 parent_scope.$emit('listLoaded');
-                // setTimeout(function(){
-                //     scope.$apply();
-                // }, 300);
             });
 
             if (base === 'jobs' && list.name === 'all_jobs') {

awx/ui/client/src/lists/AllJobs.js

@@ -10,15 +10,15 @@ export default
     .value( 'AllJobsList', {
 
         name: 'all_jobs',
+        basePath: 'unified_jobs',
         iterator: 'all_job',
         editTitle: 'All Jobs',
         index: false,
         hover: true,
         well: false,
-
         fields: {
             status: {
-                label: '',
+                label: 'Status',
                 columnClass: 'List-staticColumn--smallStatus',
                 awToolTip: "{{ all_job.status_tip }}",
                 awTipPlacement: "right",

awx/ui/client/src/partials/jobs.html

@@ -25,10 +25,6 @@
             </div>
             <div  id="jobs-tab-content" class="Form-tabSection"
                 ng-class="{'is-selected': jobsSelected }">
-                    <div class= "row search-row">
-                        <div class="col-lg-4 col-md-4 " id="active-jobs-search-container">
-                        </div>
-                    </div>
                     <div class= "job-list" id="active-jobs-container">
                         <div id="active-jobs" class= "job-list-target">
                         </div>

awx/ui/client/src/search/getSearchHtml.service.js

@@ -1,13 +1,15 @@
-export default [function() {
+export default ['GetBasePath', function(GetBasePath) {
     // given the list, return the fields that need searching
     this.getList = function(list) {
+        var f = _.clone(list.fields);
         return JSON.stringify(Object
-            .keys(list.fields)
+            .keys(f)
             .filter(function(i) {
-                return (list.fields[i]
+                return (f[i]
                     .searchable !== false);
             }).map(function(i) {
-                return {[i]: list.fields[i]};
+                delete f[i].awToolTip;
+                return {[i]: f[i]};
             }).reduce(function (acc, i) {
                 var key = Object.keys(i);
                 acc[key] = i[key];
@@ -17,14 +19,19 @@ export default [function() {
 
     // given the list config object, return the basepath
     this.getEndpoint = function(list) {
-        return list.basePath || list.name;
+        var endPoint = (list.basePath || list.name);
+        if (endPoint === 'inventories') {
+            endPoint = 'inventory';
+        }
+        return GetBasePath(endPoint);
     };
 
     // inject the directive with the list and endpoint
-    this.inject = function(list, endpoint) {
+    this.inject = function(list, endpoint, set, iterator) {
         return "<tag-search list='" + list +
             "' endpoint='" + endpoint +
-            "'></tag-search>";
+            "' set='" + set +
+            "' iterator='" + iterator + "'></tag-search>";
     };
 
     return this;

awx/ui/client/src/search/tagSearch.controller.js

@@ -3,13 +3,6 @@ export default ['$scope', 'Refresh', 'tagSearchService',
         // JSONify passed field elements that can be searched
         $scope.list = JSON.parse($scope.list);
 
-        // Hotfix: GetBasePath to work with inventories
-        $scope.$watch("endpoint", function(val) {
-            if (val === 'inventories') {
-                $scope.endpoint = 'inventory';
-            }
-        });
-
         // Grab options for the left-dropdown of the searchbar
         tagSearchService.getSearchTypes($scope.list, $scope.endpoint)
             .then(function(searchTypes) {
@@ -39,10 +32,10 @@ export default ['$scope', 'Refresh', 'tagSearchService',
         };
 
         $scope.updateSearch = function(tags) {
-            var iterator = $scope.$parent.list.iterator;
+            var iterator = $scope.iterator;
             var pageSize = $scope
                 .$parent[iterator + "_page_size"];
-            var set = $scope.$parent.list.name;
+            var set = $scope.set;
             var listScope = $scope.$parent;
             var url = tagSearchService
                 .updateFilteredUrl($scope.endpoint, tags, pageSize);

awx/ui/client/src/search/tagSearch.directive.js

@@ -9,6 +9,7 @@ export default
                 scope: {
                   list: '@',
                   endpoint: '@',
+                  set: '@',
                   iterator: '@'
                 },
                 controller: tagSearchController,

awx/ui/client/src/search/tagSearch.service.js

@@ -78,7 +78,7 @@ export default ['Rest', '$q', 'GetBasePath', function(Rest, $q, GetBasePath) {
 
         if (needsRequest.length) {
             // make the options request to reutrn the typeOptions
-            Rest.setUrl(GetBasePath(basePath));
+            Rest.setUrl(basePath);
             Rest.options()
                 .success(function (data) {
                     var options = data.actions.GET;
@@ -108,7 +108,7 @@ export default ['Rest', '$q', 'GetBasePath', function(Rest, $q, GetBasePath) {
 
     // returns the url with filter params
     this.updateFilteredUrl = function(basePath, tags, pageSize) {
-        return GetBasePath(basePath) + "?" +
+        return basePath + "?" +
             (tags || []).map(function (t) {
                 return t.url;
             }).join("&") + "&page_size=" + pageSize;

awx/ui/client/src/shared/form-generator.js

@@ -142,10 +142,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 .factory('GenerateForm', ['$rootScope', '$location', '$compile', 'generateList',
     'SearchWidget', 'PaginateWidget', 'Attr', 'Icon', 'Column',
     'NavigationLink', 'HelpCollapse', 'DropDown', 'Empty', 'SelectIcon',
-    'Store', 'ActionButton',
+    'Store', 'ActionButton', 'getSearchHtml', '$state',
     function ($rootScope, $location, $compile, GenerateList, SearchWidget,
         PaginateWidget, Attr, Icon, Column, NavigationLink, HelpCollapse,
-        DropDown, Empty, SelectIcon, Store, ActionButton) {
+        DropDown, Empty, SelectIcon, Store, ActionButton, getSearchHtml, $state) {
         return {
 
             setForm: function (form) { this.form = form; },
@@ -1692,28 +1692,38 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     html += "<strong>Hint: </strong>" + collection.instructions + "\n";
                     html += "</div>\n";
                 }
+                var rootID = $location.$$path.split("/")[2];
+                var endpoint = "/api/v1/" + collection.basePath
+                    .replace(":id", rootID);
+                var tagSearch = getSearchHtml
+                    .inject(getSearchHtml.getList(collection),
+                        endpoint, itm, collection.iterator);
 
-                //html += "<div class=\"well\">\n";
+                var actionButtons = "";
-                html += "<div class=\"row List-searchRow\">\n";
+                Object.keys(collection.actions || {})
+                    .forEach(act => {
+                        actionButtons += ActionButton(collection
+                            .actions[act]);
+                    });
 
-                html += SearchWidget({
+                html += `
-                    iterator: collection.iterator,
+<div class=\"row\">
-                    template: collection,
+    <div class=\"col-lg-8\"
-                    mini: true,
+        ng-show=\"${collection.iterator}Loading == true ||
-                    ngShow: collection.iterator + "Loading == true || " + collection.iterator + "_active_search == true || (" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == false && " + collection.iterator + "_total_rows > 0)"
+            ${collection.iterator}_active_search == true || (
-                });
+                ${collection.iterator}Loading == false &&
-
+                ${collection.iterator}_active_search == false &&
-                html += "<div class=\"col-lg-8\">\n";
+                ${collection.iterator}_total_rows > 0
-                html += "<div class=\"list-actions\">\n";
+            )\">
-
+        ${tagSearch}
-                for (act in collection.actions) {
+    </div>
-                    action = collection.actions[act];
+    <div class=\"col-lg-4\">
-                    html += ActionButton(action);
+        <div class=\"list-actions\">
-                }
+            ${actionButtons}
-
+        </div>
-                html += "</div>\n";
+    </div>
-                html += "</div>\n";
+</div>
-                html += "</div><!-- row -->\n";
+                `;
 
                 // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
                 html += "<div class=\"row\" ng-show=\"" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == true && " + itm + ".length == 0\">\n";

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -362,10 +362,19 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
                     html += (list.emptyListText) ? list.emptyListText : "PLEASE ADD ITEMS TO THIS LIST";
                     html += "</div>";
                     if (options.showSearch=== undefined || options.showSearch === true) {
-                        html += getSearchHtml
+                        var tagSearch = getSearchHtml
                             .inject(getSearchHtml.getList(list),
-                                getSearchHtml.getEndpoint(list));
+                                getSearchHtml.getEndpoint(list),
-
+                                list.name,
+                                list.iterator);
+                        html += `
+<div
+    ng-hide=\"${list.iterator}Loading == false &&
+        ${list.iterator}_active_search == false &&
+        ${list.iterator}_total_rows <1\">
+    ${tagSearch}
+</div>
+                        `;
                         // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
                         html += "<div class=\"row\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == true && " + list.name + ".length == 0\">\n";
                         html += "<div class=\"col-lg-12 List-searchNoResults\">No records matched your search.</div>\n";