Merge pull request #6971 from mabashian/modal-list-link-new-tab

Modal lists with links will now open in a new tab

awx/ui/client/src/access/add-rbac-user-team/rbac-selected-list.directive.js

@@ -32,21 +32,11 @@ export default ['$compile', 'i18n', 'generateList',
 
                 list = _.cloneDeep(listMap[scope.resourceType]);
 
-                list.fieldActions = {
-                    remove: {
-                        ngClick: `removeSelection(${list.iterator}, resourceType)`,
-                        iconClass: 'fa fa-times-circle',
-                        awToolTip: i18n._(`Remove ${list.iterator}`),
-                        label: i18n._('Remove'),
-                        class: 'btn-sm'
-                    }
-                };
                 delete list.actions;
 
                 list.listTitleBadge = false;
 
                 switch(scope.resourceType){
-
                     case 'projects':
                         list.fields = {
                             name: list.fields.name,
@@ -55,7 +45,6 @@ export default ['$compile', 'i18n', 'generateList',
                         list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
                         list.fields.scm_type.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                         break;
-
                     case 'inventories':
                         list.fields = {
                             name: list.fields.name,
@@ -64,22 +53,41 @@ export default ['$compile', 'i18n', 'generateList',
                         list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
                         list.fields.organization.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                         break;
-
                     case 'job_templates':
-                    case 'workflow_templates':
-                    case 'credentials':
-                    case 'organizations':
                         list.name = 'job_templates';
                         list.iterator = 'job_template';
                         list.fields = {
-                            name: list.fields.name,
+                            name: list.fields.name
-                            description: list.fields.description
+                        };
+                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        break;
+                    case 'workflow_templates':
+                        list.name = 'workflow_job_templates';
+                        list.iterator = 'workflow_job_template';
+                        list.fields = {
+                            name: list.fields.name
+                        };
+                        list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
+                        break;
+                    case 'credentials':
+                    case 'organizations':
+                        list.fields = {
+                            name: list.fields.name
                         };
                         list.fields.name.columnClass = 'col-md-5 col-sm-5 col-xs-10';
-                        list.fields.description.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                         break;
                 }
 
+                list.fieldActions = {
+                    remove: {
+                        ngClick: `removeSelection(${list.iterator}, resourceType)`,
+                        iconClass: 'fa fa-times-circle',
+                        awToolTip: i18n._(`Remove ${list.iterator.replace(/_/g, ' ')}`),
+                        label: i18n._('Remove'),
+                        class: 'btn-sm'
+                    }
+                };
+
                 list.fields = _.each(list.fields, (field) => field.nosort = true);
 
                 list_html = generateList.build({
@@ -105,6 +113,10 @@ export default ['$compile', 'i18n', 'generateList',
                     delete scope.collection[resource.id];
                     delete scope.selected[type][resource.id];
 
+                    $('.tooltip').each(function() {
+                        $(this).remove();
+                    });
+
                     // a quick & dirty hack
                     // section 1 and section 2 elements produce sibling scopes
                     // This means events propogated from section 2 are not received in section 1

awx/ui/client/src/access/rbac-multiselect/rbac-multiselect-list.directive.js

@@ -7,10 +7,10 @@
 /* jshint unused: vars */
 export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateList', 'ProjectList',
     'InventoryList', 'CredentialList', '$compile', 'generateList',
-    'OrganizationList',
+    'OrganizationList', '$window',
     function(addPermissionsTeamsList, addPermissionsUsersList, TemplateList, ProjectList,
     InventoryList, CredentialList, $compile, generateList,
-    OrganizationList) {
+    OrganizationList, $window) {
     return {
         restrict: 'E',
         scope: {
@@ -46,6 +46,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                         name: list.fields.name,
                         scm_type: list.fields.scm_type
                     };
+                    list.fields.name.ngClick = 'linkoutResource("project", project)';
                     list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
                     list.fields.scm_type.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                     break;
@@ -55,6 +56,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                         name: list.fields.name,
                         organization: list.fields.organization
                     };
+                    list.fields.name.ngClick = 'linkoutResource("inventory", inventory)';
                     list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
                     list.fields.organization.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                     break;
@@ -64,12 +66,11 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     list.iterator = 'job_template';
                     list.basePath = 'job_templates';
                     list.fields = {
-                        name: list.fields.name,
+                        name: list.fields.name
-                        description: list.fields.description
                     };
+                    list.fields.name.ngClick = 'linkoutResource("job_template", job_template)';
                     list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
                     list.fields.name.ngHref = '#/templates/job_template/{{job_template.id}}';
-                    list.fields.description.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                     break;
 
                 case 'WorkflowTemplates':
@@ -77,12 +78,11 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                     list.iterator = 'workflow_template';
                     list.basePath = 'workflow_job_templates';
                     list.fields = {
-                        name: list.fields.name,
+                        name: list.fields.name
-                        description: list.fields.description
                     };
+                    list.fields.name.ngClick = 'linkoutResource("workflow_job_template", workflow_template)';
                     list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
                     list.fields.name.ngHref = '#/templates/workflow_job_template/{{workflow_template.id}}';
-                    list.fields.description.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                     break;
                 case 'Users':
                     list.fields = {
@@ -90,6 +90,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                         first_name: list.fields.first_name,
                         last_name: list.fields.last_name
                     };
+                    list.fields.username.ngClick = 'linkoutResource("user", user)';
                     list.fields.username.columnClass = 'col-md-5 col-sm-5 col-xs-11';
                     list.fields.first_name.columnClass = 'col-md-3 col-sm-3 hidden-xs';
                     list.fields.last_name.columnClass = 'col-md-3 col-sm-3 hidden-xs';
@@ -99,16 +100,23 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                         name: list.fields.name,
                         organization: list.fields.organization,
                     };
+                    list.fields.name.ngClick = 'linkoutResource("team", team)';
                     list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
                     list.fields.organization.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                     break;
                 case 'Organizations':
                     list.fields = {
-                        name: list.fields.name,
+                        name: list.fields.name
-                        description: list.fields.description,
                     };
+                    list.fields.name.ngClick = 'linkoutResource("organization", organization)';
+                    list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
+                    break;
+                case 'Credentials':
+                    list.fields = {
+                        name: list.fields.name
+                    };
+                    list.fields.name.ngClick = 'linkoutResource("credential", credential)';
                     list.fields.name.columnClass = 'col-md-6 col-sm-6 col-xs-11';
-                    list.fields.description.columnClass = 'col-md-5 col-sm-5 hidden-xs';
                     break;
                 default:
                     list.fields = {
@@ -123,7 +131,8 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
                 mode: 'edit',
                 list: list,
                 related: false,
-                title: false
+                title: false,
+                hideViewPerPage: true
             });
 
             scope.list = list;
@@ -171,6 +180,41 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
             }
             element.append(list_html);
             $compile(element.contents())(scope);
+
+            scope.linkoutResource = function(type, resource) {
+
+                let url;
+
+                switch(type){
+                    case 'project':
+                        url = "/#/projects/" + resource.id;
+                        break;
+                    case 'inventory':
+                        url = resource.kind && resource.kind === "smart" ? "/#/inventories/smart/" + resource.id : "/#/inventories/inventory/" + resource.id;
+                        break;
+                    case 'job_template':
+                        url = "/#/templates/job_template/" + resource.id;
+                        break;
+                    case 'workflow_job_template':
+                        url = "/#/templates/workflow_job_template/" + resource.id;
+                        break;
+                    case 'user':
+                        url = "/#/users/" + resource.id;
+                        break;
+                    case 'team':
+                        url = "/#/teams/" + resource.id;
+                        break;
+                    case 'organization':
+                        url = "/#/organizations/" + resource.id;
+                        break;
+                    case 'credential':
+                        url = "/#/credentials/" + resource.id;
+                        break;
+                }
+
+                $window.open(url,'_blank');
+            };
         }
     };
+
 }];

awx/ui/client/src/instance-groups/instances/instances-list.partial.html

@@ -13,7 +13,7 @@
                         dataset="instance_dataset" column-sort="" column-field="hostname" column-iterator="instance" column-no-sort="undefined"
                         column-label="Name" column-custom-class="col-md-5 col-sm-5 col-xs-5" query-set="instance_queryset">
                         "{{'Name' | translate}}"
-                        <i ng-hide="columnNoSort === 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
+                        <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
                     </th>
                     <th id="instance-percent_capacity_remaining-header" class="List-tableHeader list-header  list-header-noSort" translate>
                         Capacity

awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html

@@ -24,7 +24,7 @@
                     dataset="instance_group_dataset" column-sort="" column-field="name" column-iterator="instance_group" column-no-sort="undefined"
                     column-label="Name" column-custom-class="col-md-5 col-sm-5 col-xs-5" query-set="instance_group_queryset">
                     "{{'Name' | translate}}"
-                    <i ng-hide="columnNoSort === 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
+                    <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon fa-sort-up" ng-class="orderByIcon()"></i>
                 </th>
                 <th id="instance_group-percent_capacity_remaining-header" class="List-tableHeader list-header list-header-noSort" translate>
                     Capacity

awx/ui/client/src/shared/column-sort/column-sort.partial.html

@@ -1,4 +1,4 @@
 <th id="{{columnIterator}}-{{columnField}}-header" class="List-tableHeader list-header {{columnCustomClass}}" ng-click="columnNoSort !== 'true' && toggleColumnOrderBy()" ng-class="{'list-header-noSort' : columnNoSort === 'true'}">
     {{columnLabel}}
-    <i ng-hide="columnNoSort === 'true'" class="fa columnSortIcon" ng-class="orderByIcon()">
+    <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon" ng-class="orderByIcon()">
 </th>

awx/ui/client/src/shared/instance-groups-multiselect/instance-groups-modal/instance-groups-modal.directive.js

@@ -1,4 +1,4 @@
-export default ['templateUrl', function(templateUrl) {
+export default ['templateUrl', '$window', function(templateUrl, $window) {
     return {
         restrict: 'E',
         scope: {
@@ -50,6 +50,8 @@ export default ['templateUrl', function(templateUrl) {
                                 selectedRows: 'igTags',
                                 availableRows: 'instance_groups'
                             };
+                            instanceGroupList.fields.name.ngClick = "linkoutInstanceGroup(instance_group)";
+                            instanceGroupList.fields.name.columnClass = 'col-md-11 col-sm-11 col-xs-11';
                             delete instanceGroupList.fields.percent_capacity_remaining;
                             delete instanceGroupList.fields.jobs_running;
 
@@ -98,6 +100,10 @@ export default ['templateUrl', function(templateUrl) {
                 }
             });
 
+            $scope.linkoutInstanceGroup = function(instanceGroup) {
+                $window.open('/#/instance_groups/' + instanceGroup.id + '/instances','_blank');
+            };
+
             $scope.cancelForm = function() {
                 $scope.destroyModal();
             };