Merge pull request #2454 from jlmitch5/fixJobsPortalMode

Fix jobs portal mode

awx/ui/client/features/_index.less

@@ -1,2 +1,3 @@
+@import 'portalMode/_index';
 @import 'output/_index';
 @import 'users/tokens/_index';

awx/ui/client/features/index.js

@@ -8,6 +8,7 @@ import atFeaturesOutput from '~features/output';
 import atFeaturesTemplates from '~features/templates';
 import atFeaturesUsers from '~features/users';
 import atFeaturesJobs from '~features/jobs';
+import atFeaturesPortalMode from '~features/portalMode';
 
 const MODULE_NAME = 'at.features';
 
@@ -21,7 +22,8 @@ angular.module(MODULE_NAME, [
     atFeaturesUsers,
     atFeaturesJobs,
     atFeaturesOutput,
-    atFeaturesTemplates
+    atFeaturesTemplates,
+    atFeaturesPortalMode,
 ]);
 
 export default MODULE_NAME;

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

@@ -0,0 +1,19 @@
+function IndexJobsController ($scope, strings, dataset) {
+    const vm = this;
+    vm.strings = strings;
+    vm.count = dataset.data.count;
+
+    $scope.$on('updateCount', (e, count) => {
+        if (count) {
+            vm.count = count;
+        }
+    });
+}
+
+IndexJobsController.$inject = [
+    '$scope',
+    'JobsStrings',
+    'Dataset'
+];
+
+export default IndexJobsController;

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

@@ -3,7 +3,7 @@
     <at-panel ng-cloak id="htmlTemplate">
         <div>
             <div ng-hide="$state.includes('schedules')">
-                <at-panel-heading title="{{:: vm.strings.get('list.PANEL_TITLE') }}" hide-dismiss="true">
+                <at-panel-heading title="{{:: vm.strings.get('list.PANEL_TITLE') }}" hide-dismiss="true" badge="{{ vm.count }}">
                 </at-panel-heading>
                 <div ui-view="jobsList"></div>
             </div>

awx/ui/client/features/jobs/jobsList.controller.js

@@ -35,9 +35,11 @@ function ListJobsController (
     $scope.collection = { iterator, basePath: 'unified_jobs' };
     $scope[key] = Dataset.data;
     $scope[name] = Dataset.data.results;
+    $scope.$emit('updateCount', Dataset.data.count, 'jobs');
     $scope.$on('updateDataset', (e, dataset) => {
         $scope[key] = dataset;
         $scope[name] = dataset.results;
+        $scope.$emit('updateCount', dataset.count, 'jobs');
     });
     $scope.$on('ws-jobs', () => {
         if (!launchModalOpen) {
@@ -60,6 +62,8 @@ function ListJobsController (
         vm.emptyListReason = strings.get('list.NO_RUNNING');
     }
 
+    vm.isPortalMode = $state.includes('portalMode');
+
     vm.jobTypes = mapChoices(unifiedJob.options('actions.GET.type.choices'));
 
     vm.getSref = ({ type, id }) => {

awx/ui/client/features/jobs/jobsList.view.html

@@ -9,7 +9,8 @@
             dataset="job_dataset"
             collection="collection"
             search-tags="searchTags"
-            query-set="querySet">
+            query-set="querySet"
+            search-bar-full-width="vm.isPortalMode">
         </smart-search>
     </div>
     <at-list results="jobs" empty-list-reason="{{ vm.emptyListReason }}">
@@ -74,7 +75,7 @@
                     ng-show="job.summary_fields.user_capabilities.start">
                 </at-relaunch>
                 <at-row-action icon="fa-minus-circle" ng-click="vm.cancelJob(job)"
-                    ng-show="(job.summary_fields.user_capabilities.start &&
+                    ng-show="!vm.isPortalMode && (job.summary_fields.user_capabilities.start &&
                              (job.status === 'pending' ||
                              job.status === 'waiting' ||
                              job.status === 'running')) || ($root.user_is_superuser && job.type === 'system_job' &&
@@ -83,7 +84,7 @@
                              job.status === 'running'))">
                 </at-row-action>
                 <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)"
-                    ng-show="job.summary_fields.user_capabilities.delete &&
+                    ng-show="!vm.isPortalMode && job.summary_fields.user_capabilities.delete &&
                              !(job.status === 'pending' ||
                              job.status === 'waiting' ||
                              job.status === 'running')">

awx/ui/client/features/jobs/routes/jobs.route.js

@@ -1,5 +1,6 @@
 import { N_ } from '../../../src/i18n';
 import jobsListController from '../jobsList.controller';
+import indexController from '../index.controller';
 
 const indexTemplate = require('~features/jobs/index.view.html');
 const jobsListTemplate = require('~features/jobs/jobsList.view.html');
@@ -59,10 +60,7 @@ export default {
     views: {
         '@': {
             templateUrl: indexTemplate,
-            controller: ['JobsStrings', (strings) => {
+            controller: indexController,
-                const vm = this || {};
-                vm.strings = strings;
-            }],
             controllerAs: 'vm'
         },
         'jobsList@jobs': {

awx/ui/client/features/portalMode/_index.less

@@ -27,6 +27,21 @@
 	.OnePlusOne-panelHeader;
 }
 
+
+.PortalMode-headerContainer {
+	display: flex;
+	align-items: center;
+	margin-bottom: 20px;
+
+	.at-Panel-heading {
+		margin-bottom: 0;
+	}
+
+	.FormToggle-container {
+		padding-bottom: 0;
+	}
+}
+
 .PortalMode-filterHolder {
 	position: absolute;
 	right: 1px;

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

@@ -0,0 +1,27 @@
+function IndexTemplatesController ($scope, $state, strings) {
+    const vm = this;
+    vm.strings = strings;
+
+    $scope.filterUser = () => {
+        $state.go('portalMode.myJobs');
+    };
+    $scope.filterAll = () => {
+        $state.go('portalMode.allJobs');
+    };
+
+    $scope.$on('updateCount', (e, count, resource) => {
+        if (resource === 'jobs') {
+            vm.jobsCount = count;
+        } else if (resource === 'templates') {
+            vm.templatesCount = count;
+        }
+    });
+}
+
+IndexTemplatesController.$inject = [
+    '$scope',
+    '$state',
+    'PortalModeStrings',
+];
+
+export default IndexTemplatesController;

awx/ui/client/features/portalMode/index.js

@@ -0,0 +1,18 @@
+import PortalModeStrings from './portalMode.strings';
+
+import templatesRoute from './routes/portalModeTemplatesList.route';
+import myJobsRoute from './routes/portalModeMyJobs.route';
+import allJobsRoute from './routes/portalModeAllJobs.route';
+
+const MODULE_NAME = 'at.features.portalMode';
+
+angular
+    .module(MODULE_NAME, [])
+    .service('PortalModeStrings', PortalModeStrings)
+    .run(['$stateExtender', ($stateExtender) => {
+        $stateExtender.addState(templatesRoute);
+        $stateExtender.addState(myJobsRoute);
+        $stateExtender.addState(allJobsRoute);
+    }]);
+
+export default MODULE_NAME;

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

@@ -0,0 +1,54 @@
+<div class="tab-pane PortalMode">
+    <div ng-cloak id="portal-landing">
+        <div class="PortalMode-container">
+            <at-panel class="PortalMode-panel PortalMode-panel--left">
+                <div id="portal-container-job-templates">
+                    <at-panel-heading
+                        title="{{:: vm.strings.get('list.TEMPLATES_PANEL_TITLE') }}"
+                        badge="{{ vm.templatesCount }}"
+                        hide-dismiss="true">
+                    </at-panel-heading>
+                    <div ui-view="templates">
+                    </div>
+                </div>
+            </at-panel>
+            <at-panel class="PortalMode-panel PortalMode-panel--right">
+                <div id="portal-container-jobs">
+                    <div class="PortalMode-headerContainer">
+                        <at-panel-heading
+                            title="{{:: vm.strings.get('list.JOBS_PANEL_TITLE') }}"
+                            badge="{{ vm.jobsCount }}"
+                            hide-dismiss="true">
+                        </at-panel-heading>
+                        <div class="PortalMode-filterHolder">
+                            <div class="FormToggle-container">
+                                <div class="btn-group">
+                                    <button ng-class="{'btn-primary': $state.is('portalMode.myJobs'), 'Button-primary--hollow': $state.is('portalMode.allJobs')}"
+                                            ng-click='filterUser()'
+                                            class="btn btn-xs"
+                                            translate>
+                                        My Jobs
+                                    </button>
+                                    <button ng-class="{'btn-primary': $state.is('portalMode.allJobs'), 'Button-primary--hollow': $state.is('portalMode.myJobs')}"
+                                            ng-click='filterAll()'
+                                            class="btn btn-xs"
+                                            translate>
+                                        All Jobs
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="PortalMode-refresh">
+                                <button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault"
+                                        ng-click="refresh()" ng-show="socketStatus == 'error'">
+                                    <span>REFRESH</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div ui-view="jobs">
+                    </div>
+                </div>
+            </at-panel>
+        </div>
+    </div>
+</div>

awx/ui/client/features/portalMode/portalMode.strings.js

@@ -0,0 +1,15 @@
+function PortalModeStrings (BaseString) {
+    BaseString.call(this, 'portalMode');
+
+    const { t } = this;
+    const ns = this.portalMode;
+
+    ns.list = {
+        TEMPLATES_PANEL_TITLE: t.s('JOB TEMPLATES'),
+        JOBS_PANEL_TITLE: t.s('JOBS'),
+    };
+}
+
+PortalModeStrings.$inject = ['BaseStringService'];
+
+export default PortalModeStrings;

awx/ui/client/features/portalMode/routes/portalModeAllJobs.route.js

@@ -1,4 +1,4 @@
-import jobsListController from '../jobsList.controller';
+import jobsListController from '../../jobs/jobsList.controller';
 
 const jobsListTemplate = require('~features/jobs/jobsList.view.html');
 

awx/ui/client/features/portalMode/routes/portalModeMyJobs.route.js

@@ -1,4 +1,4 @@
-import jobsListController from '../jobsList.controller';
+import jobsListController from '../../jobs/jobsList.controller';
 
 const jobsListTemplate = require('~features/jobs/jobsList.view.html');
 

awx/ui/client/features/portalMode/routes/portalModeTemplatesList.route.js

@@ -1,8 +1,9 @@
-import { templateUrl } from '../../../src/shared/template-url/template-url.factory';
 import { N_ } from '../../../src/i18n';
-import templatesListController from '../templatesList.controller';
+import templatesListController from '../../templates/templatesList.controller';
+import indexController from '../index.controller';
 
 const templatesListTemplate = require('~features/templates/templatesList.view.html');
+const indexTemplate = require('~features/portalMode/index.view.html');
 
 export default {
     name: 'portalMode',
@@ -13,8 +14,8 @@ export default {
     },
     data: {
         socket: {
-            "groups": {
+            groups: {
-                "jobs": ["status_changed"]
+                jobs: ['status_changed']
             }
         }
     },
@@ -29,19 +30,9 @@ export default {
     searchPrefix: 'template',
     views: {
         '@': {
-            templateUrl: templateUrl('portal-mode/portal-mode-layout'),
+            templateUrl: indexTemplate,
-            controller: ['$scope', '$state',
+            controller: indexController,
-                function($scope, $state) {
+            controllerAs: 'vm'
-
-                    $scope.filterUser = function() {
-                        $state.go('portalMode.myJobs');
-                    };
-
-                    $scope.filterAll = function() {
-                        $state.go('portalMode.allJobs');
-                    };
-                }
-            ]
         },
         'templates@portalMode': {
             templateUrl: templatesListTemplate,

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

@@ -1,12 +1,12 @@
 function IndexTemplatesController ($scope, strings, dataset) {
-    let vm = this;
+    const vm = this;
     vm.strings = strings;
     vm.count = dataset.data.count;
 
-    $scope.$on('updateDataset', (e, { count }) => {
+    $scope.$on('updateCount', (e, count) => {
-    	if (count) {
+        if (count) {
-    		vm.count = count;
+            vm.count = count;
-    	}
+        }
     });
 }
 

awx/ui/client/features/templates/templatesList.controller.js

@@ -61,6 +61,7 @@ function ListTemplatesController(
     };
     $scope.template_dataset = Dataset.data;
     $scope.templates = Dataset.data.results;
+    $scope.$emit('updateCount', Dataset.data.count, 'templates');
 
     $scope.$watch('$state.params', function(newValue, oldValue) {
         const job_template_id = _.get($state.params, 'job_template_id');
@@ -74,6 +75,7 @@ function ListTemplatesController(
     $scope.$on('updateDataset', (e, dataset) => {
         $scope.template_dataset = dataset;
         $scope.templates = dataset.results;
+        $scope.$emit('updateCount', dataset.count, 'templates');
     });
 
     $scope.$on(`ws-jobs`, () => {
@@ -101,6 +103,8 @@ function ListTemplatesController(
         }
     };
 
+    vm.isPortalMode = $state.includes('portalMode');
+
     vm.scheduleTemplate = template => {
         if (!template) {
             Alert(strings.get('error.SCHEDULE'), strings.get('alert.MISSING_PARAMETER'));

awx/ui/client/features/templates/templatesList.view.html

@@ -9,9 +9,10 @@
             dataset="template_dataset"
             collection="collection"
             search-tags="searchTags"
-            query-set="querySet">
+            query-set="querySet"
+            search-bar-full-width="vm.isPortalMode">
         </smart-search>
-        <div class="at-List-toolbarAction" ng-show="canAdd">
+        <div class="at-List-toolbarAction" ng-show="!vm.isPortalMode && canAdd">
             <button
                 type="button"
                 class="at-Button--add"
@@ -90,13 +91,13 @@
                     ng-show="template.summary_fields.user_capabilities.start">
                 </at-launch-template>
                 <at-row-action icon="fa-calendar" ng-click="vm.scheduleTemplate(template)"
-                    ng-show="template.summary_fields.user_capabilities.schedule">
+                    ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.schedule">
                 </at-row-action>
                 <at-row-action icon="fa-copy" ng-click="vm.copyTemplate(template)"
-                    ng-show="template.summary_fields.user_capabilities.copy">
+                    ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.copy">
                 </at-row-action>
                 <at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)"
-                    ng-show="template.summary_fields.user_capabilities.delete">
+                    ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.delete">
                 </at-row-action>
             </div>
         </at-row>

awx/ui/client/lib/theme/index.less

@@ -90,7 +90,6 @@
 @import '../../src/notifications/notifications.block.less';
 @import '../../src/organizations/linkout/addUsers/addUsers.block.less';
 @import '../../src/organizations/orgcards.block.less';
-@import '../../src/portal-mode/portal-mode.block.less';
 @import '../../src/scheduler/repeatFrequencyOptions.block.less';
 @import '../../src/scheduler/schedulerForm.block.less';
 @import '../../src/scheduler/schedulerFormDetail.block.less';

awx/ui/client/src/app.js

@@ -10,7 +10,6 @@ if ($basePath) {
 }
 
 import start from './app.start';
-import portalMode from './portal-mode/main';
 import systemTracking from './system-tracking/main';
 import inventoriesHosts from './inventories-hosts/main';
 import inventoryScripts from './inventory-scripts/main';
@@ -86,7 +85,6 @@ angular
         jobSubmission.name,
         notifications.name,
         Templates.name,
-        portalMode.name,
         teams.name,
         users.name,
         projects.name,

awx/ui/client/src/portal-mode/main.js

@@ -1,17 +0,0 @@
-/*************************************************
- * Copyright (c) 2016 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-// import route from './portal-mode.route';
-import templatesRoute from '~features/templates/routes/portalModeTemplatesList.route.js';
-import myJobsRoute from '~features/jobs/routes/portalModeMyJobs.route.js';
-import allJobsRoute from '~features/jobs/routes/portalModeAllJobs.route.js';
-export default
- 	angular.module('portalMode', [])
- 		.run(['$stateExtender', function($stateExtender){
-        $stateExtender.addState(templatesRoute);
-        $stateExtender.addState(myJobsRoute);
-        $stateExtender.addState(allJobsRoute);
- 		}]);

awx/ui/client/src/portal-mode/portal-mode-layout.partial.html

@@ -1,52 +0,0 @@
-<div class="tab-pane PortalMode">
-    <div ng-cloak id="portal-landing">
-        <div class="PortalMode-container">
-            <div class="PortalMode-panel PortalMode-panel--left Panel">
-                <div id="portal-container-job-templates">
-                    <div class="List-header">
-                        <div class="List-title">
-                            <div class="List-titleText" translate>JOB TEMPLATES</div>
-                        </div>
-                    </div>
-                    <div ui-view="templates">
-                    </div>
-                </div>
-            </div>
-            <div class="PortalMode-panel PortalMode-panel--right">
-                <div id="portal-container-jobs" class="Panel">
-                    <div class="List-header">
-                        <div class="List-title">
-                            <div class="List-titleText" translate>JOBS</div>
-                        </div>
-                    </div>
-                    <div class="PortalMode-filterHolder">
-                        <div class="FormToggle-container">
-                            <div class="btn-group">
-                                <button ng-class="{'btn-primary': $state.is('portalMode.myJobs'), 'Button-primary--hollow': $state.is('portalMode.allJobs')}"
-                                        ng-click='filterUser()'
-                                        class="btn btn-xs"
-                                        translate>
-                                    My Jobs
-                                </button>
-                                <button ng-class="{'btn-primary': $state.is('portalMode.allJobs'), 'Button-primary--hollow': $state.is('portalMode.myJobs')}"
-                                        ng-click='filterAll()'
-                                        class="btn btn-xs"
-                                        translate>
-                                    All Jobs
-                                </button>
-                            </div>
-                        </div>
-                        <div class="PortalMode-refresh">
-                            <button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault"
-                                    ng-click="refresh()" ng-show="socketStatus == 'error'">
-                                <span>REFRESH</span>
-                            </button>
-                        </div>
-                    </div>
-                    <div ui-view="jobs">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>