From 42b88c640083b935c948d4b188e459bddf04c723 Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Mon, 7 May 2018 01:07:28 -0400 Subject: [PATCH] move directive code to components --- ...ails.directive.js => details.component.js} | 65 ++++++++---------- .../features/output/index.controller.js | 18 ++--- awx/ui/client/features/output/index.js | 14 ++-- awx/ui/client/features/output/index.view.html | 14 ++-- ...earch.directive.js => search.component.js} | 50 ++++++-------- ...{stats.directive.js => stats.component.js} | 67 ++++++++----------- .../client/features/output/stats.partial.html | 4 +- 7 files changed, 99 insertions(+), 133 deletions(-) rename awx/ui/client/features/output/{details.directive.js => details.component.js} (93%) rename awx/ui/client/features/output/{search.directive.js => search.component.js} (76%) rename awx/ui/client/features/output/{stats.directive.js => stats.component.js} (54%) diff --git a/awx/ui/client/features/output/details.directive.js b/awx/ui/client/features/output/details.component.js similarity index 93% rename from awx/ui/client/features/output/details.directive.js rename to awx/ui/client/features/output/details.component.js index 510173d9ad..d74cea977a 100644 --- a/awx/ui/client/features/output/details.directive.js +++ b/awx/ui/client/features/output/details.component.js @@ -2,7 +2,6 @@ const templateUrl = require('~features/output/details.partial.html'); let $http; let $filter; -let $scope; let $state; let error; @@ -371,7 +370,7 @@ function getJobTagDetails () { let jobTags; if (tagString) { - jobTags = tagString.split(','); + jobTags = tagString.split(',').filter(tag => tag !== ''); } else { jobTags = []; } @@ -383,7 +382,7 @@ function getJobTagDetails () { const label = 'Job Tags'; const more = false; - const value = jobTags.filter(tag => tag !== '').map($filter('sanitize')); + const value = jobTags.map($filter('sanitize')); return { label, more, value }; } @@ -394,7 +393,7 @@ function getSkipTagDetails () { let skipTags; if (tagString) { - skipTags = tagString.split(','); + skipTags = tagString.split(',').filter(tag => tag !== ''); } else { skipTags = []; } @@ -405,7 +404,7 @@ function getSkipTagDetails () { const label = 'Skip Tags'; const more = false; - const value = skipTags.filter(tag => tag !== '').map($filter('sanitize')); + const value = skipTags.map($filter('sanitize')); return { label, more, value }; } @@ -445,7 +444,7 @@ function createErrorHandler (path, action) { const hdr = strings.get('error.HEADER'); const msg = strings.get('error.CALL', { path, action, status: res.status }); - error($scope, res.data, res.status, null, { hdr, msg }); + error(null, res.data, res.status, null, { hdr, msg }); }; } @@ -545,7 +544,7 @@ function deleteJob () { prompt({ hdr, resourceName, body, actionText, action }); } -function AtJobDetailsController ( +function JobDetailsController ( _$http_, _$filter_, _$state_, @@ -554,23 +553,24 @@ function AtJobDetailsController ( _strings_, _wait_, _parse_, - { subscribe } + { subscribe }, ) { vm = this || {}; $http = _$http_; $filter = _$filter_; $state = _$state_; - error = _error_; + parse = _parse_; prompt = _prompt_; strings = _strings_; wait = _wait_; - vm.init = _$scope_ => { - $scope = _$scope_; - resource = $scope.resource; // eslint-disable-line prefer-destructuring + let unsubscribe; + + vm.$onInit = () => { + resource = this.resource; // eslint-disable-line prefer-destructuring vm.status = getStatusDetails(); vm.started = getStartDetails(); @@ -604,22 +604,26 @@ function AtJobDetailsController ( vm.cancelJob = cancelJob; vm.deleteJob = deleteJob; - vm.toggleLabels = toggleLabels; vm.toggleJobTags = toggleJobTags; vm.toggleSkipTags = toggleSkipTags; + vm.toggleLabels = toggleLabels; - subscribe(({ status, started, finished, scm }) => { - vm.job.status = status; - vm.status = getStatusDetails(status); + unsubscribe = subscribe(({ status, started, finished, scm }) => { vm.started = getStartDetails(started); vm.finished = getFinishDetails(finished); vm.projectUpdate = getProjectUpdateDetails(scm.id); vm.projectStatus = getProjectStatusDetails(scm.status); + vm.status = getStatusDetails(status); + vm.job.status = status; }); }; + + vm.$onDestroy = () => { + unsubscribe(); + }; } -AtJobDetailsController.$inject = [ +JobDetailsController.$inject = [ '$http', '$filter', '$state', @@ -631,22 +635,11 @@ AtJobDetailsController.$inject = [ 'JobStatusService', ]; -function atJobDetailsLink (scope, el, attrs, controllers) { - const [atDetailsController] = controllers; - - atDetailsController.init(scope); -} - -function atJobDetails () { - return { - templateUrl, - restrict: 'E', - require: ['atJobDetails'], - controllerAs: 'vm', - link: atJobDetailsLink, - controller: AtJobDetailsController, - scope: { resource: '=', }, - }; -} - -export default atJobDetails; +export default { + templateUrl, + controller: JobDetailsController, + controllerAs: 'vm', + bindings: { + resource: '<' + }, +}; diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index 488d994dc2..e84c93d708 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/awx/ui/client/features/output/index.controller.js @@ -38,9 +38,8 @@ function JobsIndexController ( vm.clear = devClear; // Expand/collapse - // vm.toggle = toggle; - // vm.expand = expand; - vm.isExpanded = true; + vm.expanded = false; + vm.toggleExpanded = toggleExpanded; // Panel vm.resource = resource; @@ -55,10 +54,6 @@ function JobsIndexController ( up: scrollPageUp }; - vm.fullscreen = { - isFullscreen: false - }; - render.requestAnimationFrame(() => init()); } @@ -96,13 +91,14 @@ function init () { }, onStop () { status.updateStats(); + status.dispatch(); } }); $scope.$on(resource.ws.events, handleJobEvent); $scope.$on(resource.ws.status, handleStatusEvent); - if (!status.isRunning()) { + if (!status.state.running) { next(); } } @@ -281,9 +277,9 @@ function scrollIsAtRest (isAtRest) { vm.scroll.showBackToTop = !isAtRest; } -// function expand () { -// vm.toggle(parent, true); -// } +function toggleExpanded () { + vm.expanded = !vm.expanded; +} // function showHostDetails (id) { // jobEvent.request('get', id) diff --git a/awx/ui/client/features/output/index.js b/awx/ui/client/features/output/index.js index 372d28221f..6b14296553 100644 --- a/awx/ui/client/features/output/index.js +++ b/awx/ui/client/features/output/index.js @@ -11,9 +11,9 @@ import StatusService from '~features/output/status.service'; import MessageService from '~features/output/message.service'; import LegacyRedirect from '~features/output/legacy.route'; -import DetailsDirective from '~features/output/details.directive'; -import SearchDirective from '~features/output/search.directive'; -import StatsDirective from '~features/output/stats.directive'; +import DetailsComponent from '~features/output/details.component'; +import SearchComponent from '~features/output/search.component'; +import StatsComponent from '~features/output/stats.component'; import HostEvent from './host-event/index'; const Template = require('~features/output/index.view.html'); @@ -176,7 +176,7 @@ function JobsRun ($stateRegistry, strings) { templateUrl: Template, controller: Controller, controllerAs: 'vm' - } + }, }, resolve: { webSocketConnection: [ @@ -223,9 +223,9 @@ angular .service('JobEventEngine', EngineService) .service('JobStatusService', StatusService) .service('JobMessageService', MessageService) - .directive('atJobDetails', DetailsDirective) - .directive('atJobSearch', SearchDirective) - .directive('atJobStats', StatsDirective) + .component('atJobSearch', SearchComponent) + .component('atJobStats', StatsComponent) + .component('atJobDetails', DetailsComponent) .run(JobsRun) .run(LegacyRedirect); diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html index f25171f9f2..cb932fafd3 100644 --- a/awx/ui/client/features/output/index.view.html +++ b/awx/ui/client/features/output/index.view.html @@ -1,23 +1,25 @@
- - + + + - +
{{ vm.title }}
+ expanded="vm.expanded">
-
+
+ ng-class="{ 'fa-minus': vm.expanded, 'fa-plus': !vm.expanded }">
diff --git a/awx/ui/client/features/output/search.directive.js b/awx/ui/client/features/output/search.component.js similarity index 76% rename from awx/ui/client/features/output/search.directive.js rename to awx/ui/client/features/output/search.component.js index 6259013200..d1e37edd14 100644 --- a/awx/ui/client/features/output/search.directive.js +++ b/awx/ui/client/features/output/search.component.js @@ -64,13 +64,7 @@ function clearSearch () { $state.transitionTo($state.current, $state.params, searchReloadOptions); } -function atJobSearchLink (scope, el, attrs, controllers) { - const [atJobSearchController] = controllers; - - atJobSearchController.init(scope); -} - -function AtJobSearchController (_$state_, _qs_, { subscribe }) { +function JobSearchController (_$state_, _qs_, { subscribe }) { $state = _$state_; qs = _qs_; @@ -89,39 +83,33 @@ function AtJobSearchController (_$state_, _qs_, { subscribe }) { vm.removeSearchTag = removeSearchTag; vm.submitSearch = submitSearch; - vm.init = scope => { - vm.examples = scope.examples || searchKeyExamples; - vm.fields = scope.fields || searchKeyFields; - vm.placeholder = PLACEHOLDER_DEFAULT; - vm.relatedFields = scope.relatedFields || []; + let unsubscribe; - subscribe(({ running }) => { + vm.$onInit = () => { + vm.examples = searchKeyExamples; + vm.fields = searchKeyFields; + vm.placeholder = PLACEHOLDER_DEFAULT; + vm.relatedFields = []; + + unsubscribe = subscribe(({ running }) => { vm.disabled = running; vm.placeholder = running ? PLACEHOLDER_RUNNING : PLACEHOLDER_DEFAULT; }); }; + + vm.$onDestroy = () => { + unsubscribe(); + }; } -AtJobSearchController.$inject = [ +JobSearchController.$inject = [ '$state', 'QuerySet', 'JobStatusService', ]; -function atJobSearch () { - return { - templateUrl, - restrict: 'E', - require: ['atJobSearch'], - controllerAs: 'vm', - link: atJobSearchLink, - controller: AtJobSearchController, - scope: { - examples: '=', - fields: '=', - relatedFields: '=', - }, - }; -} - -export default atJobSearch; +export default { + templateUrl, + controller: JobSearchController, + controllerAs: 'vm', +}; diff --git a/awx/ui/client/features/output/stats.directive.js b/awx/ui/client/features/output/stats.component.js similarity index 54% rename from awx/ui/client/features/output/stats.directive.js rename to awx/ui/client/features/output/stats.component.js index 182ab27479..a7a0ec61f3 100644 --- a/awx/ui/client/features/output/stats.directive.js +++ b/awx/ui/client/features/output/stats.component.js @@ -1,6 +1,6 @@ const templateUrl = require('~features/output/stats.partial.html'); -let strings; +let vm; function createStatsBarTooltip (key, count) { const label = `${key}`; @@ -9,32 +9,21 @@ function createStatsBarTooltip (key, count) { return `${label}${badge}`; } -function atJobStatsLink (scope, el, attrs, controllers) { - const [atJobStatsController] = controllers; +function JobStatsController (strings, { subscribe }) { + vm = this || {}; - atJobStatsController.init(scope); -} - -function AtJobStatsController (_strings_, { subscribe }) { - strings = _strings_; - - const vm = this || {}; + let unsubscribe; vm.tooltips = { running: strings.get('status.RUNNING'), unavailable: strings.get('status.UNAVAILABLE'), }; - vm.init = scope => { - const { resource } = scope; - - vm.fullscreen = scope.fullscreen; - - vm.download = resource.model.get('related.stdout'); - + vm.$onInit = () => { + vm.download = vm.resource.model.get('related.stdout'); vm.toggleStdoutFullscreenTooltip = strings.get('expandCollapse.EXPAND'); - subscribe(({ running, elapsed, counts, stats, hosts }) => { + unsubscribe = subscribe(({ running, elapsed, counts, stats, hosts }) => { vm.plays = counts.plays; vm.tasks = counts.tasks; vm.hosts = counts.hosts; @@ -44,6 +33,10 @@ function AtJobStatsController (_strings_, { subscribe }) { }); }; + vm.$onDestroy = () => { + unsubscribe(); + }; + vm.setHostStatusCounts = (stats, counts) => { Object.keys(counts).forEach(key => { const count = counts[key]; @@ -57,31 +50,25 @@ function AtJobStatsController (_strings_, { subscribe }) { vm.statsAreAvailable = stats; }; - vm.toggleFullscreen = () => { - vm.fullscreen.isFullscreen = !vm.fullscreen.isFullscreen; - vm.toggleStdoutFullscreenTooltip = vm.fullscreen.isFullscreen ? + vm.toggleExpanded = () => { + vm.expanded = !vm.expanded; + vm.toggleStdoutFullscreenTooltip = vm.expanded ? strings.get('expandCollapse.COLLAPSE') : strings.get('expandCollapse.EXPAND'); }; } -function atJobStats () { - return { - templateUrl, - restrict: 'E', - require: ['atJobStats'], - controllerAs: 'vm', - link: atJobStatsLink, - controller: [ - 'JobStrings', - 'JobStatusService', - AtJobStatsController - ], - scope: { - resource: '=', - fullscreen: '=' - } - }; -} +JobStatsController.$inject = [ + 'JobStrings', + 'JobStatusService', +]; -export default atJobStats; +export default { + templateUrl, + controller: JobStatsController, + controllerAs: 'vm', + bindings: { + resource: '<', + expanded: '=', + }, +}; diff --git a/awx/ui/client/features/output/stats.partial.html b/awx/ui/client/features/output/stats.partial.html index 6427735236..c55ba4bc8d 100644 --- a/awx/ui/client/features/output/stats.partial.html +++ b/awx/ui/client/features/output/stats.partial.html @@ -31,8 +31,8 @@ aw-tool-tip="{{ vm.toggleStdoutFullscreenTooltip }}" data-tip-watch="vm.toggleStdoutFullscreenTooltip" data-placement="top" - ng-class="{'at-Input-button--active': vm.fullscreen.isFullscreen}" - ng-click="vm.toggleFullscreen()"> + ng-class="{'at-Input-button--active': vm.expanded}" + ng-click="vm.toggleExpanded()">