Update code/output components

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

@@ -48,13 +48,10 @@ function JobsIndexController (job, JobEventModel, _$sce_, _$timeout_, _$scope_,
     vm.showHostDetails = showHostDetails;
 
     vm.menu = {
-        expand: menuExpand,
+        top: {
-        scrollToBottom: menuScrollToBottom,
+            expand: menuExpand,
-        scrollToTop: menuScrollToTop
+            isExpanded: false
-    };
+        }
-
-    vm.state = {
-        expand: true
     };
 
     $timeout(() => {
@@ -66,22 +63,9 @@ function JobsIndexController (job, JobEventModel, _$sce_, _$timeout_, _$scope_,
 }
 
 function menuExpand () {
-    vm.state.expand = !vm.state.expand;
     vm.toggle(meta.parent);
 }
 
-function menuScrollToBottom () {
-    const container = $('.at-Stdout-container')[0];
-
-    container.scrollTop = container.scrollHeight;
-}
-
-function menuScrollToTop () {
-    const container = $('.at-Stdout-container')[0];
-
-    container.scrollTop = 0;
-}
-
 function parseEvents (events) {
     events.sort(orderByLineNumber);
 

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

@@ -7,17 +7,7 @@
 
     <div class="col-md-8">
         <at-panel class="at-Stdout">
-            <div class="at-Stdout-menuTop">
+            <at-code-menu-top state="vm.menu.top"></at-code-menu-top>
-                <div class="pull-left" ng-click="vm.menu.expand()">
-                    <i class="at-Stdout-menuIcon fa"
-                       ng-class="{ 'fa-minus': vm.state.expand, 'fa-plus': !vm.state.expand }"></i>
-                </div>
-                <div class="pull-right" ng-click="vm.menu.scrollToBottom()">
-                    <i class="at-Stdout-menuIcon fa fa-arrow-down"></i>
-                </div>
-
-                <div class="at-u-clear"></div>
-            </div>
 
             <pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="result-table"></tbody></table></pre>
 

awx/ui/client/lib/components/code/events.directive.js

@@ -0,0 +1,104 @@
+import Ansi from 'ansi-to-html';
+import hasAnsi from 'has-ansi';
+
+const templateUrl = require('~components/code/events.partial.html');
+
+let $sce;
+let $timeout;
+let ansi;
+
+function atOutputEventLink (scope, element, attrs, controller) {
+    controller.init(scope, element);
+}
+
+function AtOutputEventController (_$sce_, _$timeout_) {
+    const vm = this || {};
+
+    $timeout = _$timeout_;
+    $sce = _$sce_;
+    ansi = new Ansi();
+
+    let scope;
+    let element;
+
+    vm.init = (_scope_, _element_) => {
+        scope = _scope_;
+        element = _element_;
+
+        scope.$watch('state.stdout', curr => {
+            if (!curr) {
+                return;
+            }
+
+            render(scope.state.stdout);
+        });
+    };
+
+    vm.scroll = position => {
+        const container = element.find('.at-Stdout-container')[0];
+
+        if (position === 'bottom') {
+            container.scrollTop = container.scrollHeight;
+        } else {
+            container.scrollTop = 0;
+        }
+    };
+}
+
+AtOutputEventController.$inject = [
+    '$sce',
+    '$timeout',
+];
+
+function render (stdout) {
+    const html = $sce.trustAsHtml(parseStdout(stdout));
+
+    $timeout(() => {
+        const table = $('#atStdoutTBody');
+
+        table.html($sce.getTrustedHtml(html));
+    });
+}
+
+function parseStdout (stdout) {
+    const lines = stdout.split('\r\n');
+
+    let ln = 0;
+
+    return lines.reduce((html, line) => {
+        ln++;
+
+        return `${html}${createRow(ln, line)}`;
+    }, '');
+}
+
+function createRow (ln, content) {
+    content = content || '';
+
+    if (hasAnsi(content)) {
+        content = ansi.toHtml(content);
+    }
+
+    return `
+        <tr>
+            <td class="at-Stdout-line">${ln}</td>
+            <td class="at-Stdout-event">${content}</td>
+        </tr>`;
+}
+function atOutputEvent () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: 'atOutputEvent',
+        templateUrl,
+        controller: AtOutputEventController,
+        controllerAs: 'vm',
+        link: atOutputEventLink,
+        scope: {
+            state: '=',
+        }
+    };
+}
+
+export default atOutputEvent;

awx/ui/client/lib/components/code/menu-bottom.directive.js

@@ -0,0 +1,41 @@
+const templateUrl = require('~components/code/menu-bottom.partial.html');
+
+function atCodeMenuBottomLink (scope, element, attrs, controller) {
+    controller.init(scope, element);
+}
+
+function AtCodeMenuBottomController () {
+    const vm = this || {};
+
+    let element;
+
+    vm.init = (_scope_, _element_) => {
+        element = _element_;
+    };
+
+    vm.scroll = () => {
+        const container = element.find('.at-Stdout-container')[0];
+
+        container.scrollTop = container.scrollHeight;
+    };
+}
+
+AtCodeMenuBottomController.$inject = [];
+
+function atCodeMenuBottom () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: 'atCodeMenuBottom',
+        templateUrl,
+        controller: AtCodeMenuBottomController,
+        controllerAs: 'vm',
+        link: atCodeMenuBottomLink,
+        scope: {
+            state: '=',
+        }
+    };
+}
+
+export default atCodeMenuBottom;

awx/ui/client/lib/components/code/menu-bottom.partial.html

@@ -0,0 +1,7 @@
+<div class="at-Stdout-menuBottom">
+    <div class="pull-right" ng-click="vm.scroll()">
+        <i class="at-Stdout-menuIcon fa fa-arrow-up"></i>
+    </div>
+
+    <div class="at-u-clear"></div>
+</div>

awx/ui/client/lib/components/code/menu-top.directive.js

@@ -0,0 +1,52 @@
+const templateUrl = require('~components/code/menu-top.partial.html');
+
+function atCodeMenuTopLink (scope, element, attrs, controller) {
+    controller.init(scope, element);
+}
+
+function AtCodeMenuTopController () {
+    const vm = this || {};
+
+    let element;
+    let scope;
+
+    vm.init = (_scope_, _element_) => {
+        scope = _scope_;
+        element = _element_;
+
+        scope.state.isExpanded = scope.state.isExpanded || false;
+    };
+
+    vm.scroll = () => {
+        const container = element.parent().find('.at-Stdout-container')[0];
+
+        console.log(container);
+
+        container.scrollTop = 0;
+    };
+
+    vm.expand = () => {
+        scope.state.isExpanded = !scope.state.isExpanded;
+        scope.state.expand();
+    };
+}
+
+AtCodeMenuTopController.$inject = [];
+
+function atCodeMenuTop () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        replace: true,
+        require: 'atCodeMenuTop',
+        templateUrl,
+        controller: AtCodeMenuTopController,
+        controllerAs: 'vm',
+        link: atCodeMenuTopLink,
+        scope: {
+            state: '=',
+        }
+    };
+}
+
+export default atCodeMenuTop;

awx/ui/client/lib/components/code/menu-top.partial.html

@@ -0,0 +1,12 @@
+<div class="at-Stdout-menuTop">
+    <div class="pull-left" ng-click="vm.expand()">
+        <i class="at-Stdout-menuIcon fa"
+           ng-class="{ 'fa-minus': state.isExpanded, 'fa-plus': !state.isExpanded }"></i>
+    </div>
+
+    <div class="pull-right" ng-click="vm.scroll()">
+        <i class="at-Stdout-menuIcon fa fa-arrow-down"></i>
+    </div>
+
+    <div class="at-u-clear"></div>
+</div>

awx/ui/client/lib/components/code/stdout.directive.js

@@ -1,7 +1,7 @@
 import Ansi from 'ansi-to-html';
 import hasAnsi from 'has-ansi';
 
-const templateUrl = require('~components/output/stdout.partial.html');
+const templateUrl = require('~components/code/stdout.partial.html');
 
 let $sce;
 let $timeout;
@@ -51,7 +51,6 @@ AtOutputStdoutController.$inject = [
 ];
 
 function render (stdout) {
-    console.log('render');
     const html = $sce.trustAsHtml(parseStdout(stdout));
 
     $timeout(() => {

awx/ui/client/lib/components/index.js

@@ -1,6 +1,10 @@
 import atLibServices from '~services';
 
 import actionGroup from '~components/action/action-group.directive';
+import codeMenuBottom from '~components/code/menu-bottom.directive';
+import codeMenuTop from '~components/code/menu-top.directive';
+import codeEvents from '~components/code/events.directive';
+import codeStdout from '~components/code/stdout.directive';
 import divider from '~components/utility/divider.directive';
 import form from '~components/form/form.directive';
 import formAction from '~components/form/action.directive';
@@ -20,7 +24,6 @@ import launchTemplate from '~components/launchTemplateButton/launchTemplateButto
 import layout from '~components/layout/layout.directive';
 import list from '~components/list/list.directive';
 import modal from '~components/modal/modal.directive';
-import outputStdout from '~components/output/stdout.directive';
 import panel from '~components/panel/panel.directive';
 import panelBody from '~components/panel/body.directive';
 import panelHeading from '~components/panel/heading.directive';
@@ -46,6 +49,10 @@ angular
         atLibServices
     ])
     .directive('atActionGroup', actionGroup)
+    .directive('atCodeEvents', codeEvents)
+    .directive('atCodeMenuBottom', codeMenuBottom)
+    .directive('atCodeMenuTop', codeMenuTop)
+    .directive('atCodeStdout', codeStdout)
     .directive('atDivider', divider)
     .directive('atForm', form)
     .directive('atFormAction', formAction)
@@ -69,7 +76,6 @@ angular
     .directive('atRowItem', rowItem)
     .directive('atRowAction', rowAction)
     .directive('atModal', modal)
-    .directive('atOutputStdout', outputStdout)
     .directive('atPanel', panel)
     .directive('atPanelBody', panelBody)
     .directive('atPanelHeading', panelHeading)