move directive code to components

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: '<'
+    },
+};

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)

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);
 

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

@@ -1,23 +1,25 @@
 <div ui-view></div>
 <div class="JobResults-container">
-    <at-panel ng-show="!vm.fullscreen.isFullscreen">
-        <at-job-details resource="vm.resource"></at-job-details>
+    <at-panel ng-show="!vm.expanded">
+        <at-job-details 
+            resource="vm.resource">
+        </at-job-details>
     </at-panel>
 
-    <at-panel class="at-Stdout" ng-class="{'at-Stdout--fullscreen': vm.fullscreen.isFullscreen}">
+    <at-panel class="at-Stdout" ng-class="{'at-Stdout--fullscreen': vm.expanded}">
         <div class="at-Panel-headingTitle">
             {{ vm.title }}
         </div>
         <at-job-stats
             resource="vm.resource"
-            fullscreen="vm.fullscreen">
+            expanded="vm.expanded">
         </at-job-stats>
         <at-job-search></at-job-search>
 
         <div class="at-Stdout-menuTop">
-            <div class="pull-left" ng-click="vm.expand()">
+            <div class="pull-left" ng-click="vm.toggleExpand()">
                 <i class="at-Stdout-menuIcon fa"
-                    ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i>
+                    ng-class="{ 'fa-minus': vm.expanded, 'fa-plus': !vm.expanded }"></i>
             </div>
 
             <div class="pull-right" ng-click="vm.scroll.end()">

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',
+};

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 = `<span class='HostStatusBar-tooltipLabel'>${key}</span>`;
@@ -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: '=',
+    },
+};

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()">
         <i class="fa fa-arrows-alt"></i>
     </button>
 </div>