Implemented expand/collapse job results

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

@@ -55,6 +55,10 @@ function JobsIndexController (
         up: scrollPageUp
     };
 
+    vm.fullscreen = {
+        isFullscreen: false
+    };
+
     render.requestAnimationFrame(() => init());
 }
 

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

@@ -1,14 +1,17 @@
 <div class="container-fluid">
-    <div class="col-md-4">
+    <div class="col-md-4" ng-show="!vm.fullscreen.isFullscreen">
         <at-panel>
             <at-job-details resource="vm.resource"></at-job-details>
         </at-panel>
     </div>
 
-    <div class="col-md-8">
+    <div ng-class="vm.fullscreen.isFullscreen ? 'col-md-12' : 'col-md-8'">
         <at-panel class="at-Stdout">
             <div class="at-Panel-headingTitle">{{ vm.title }}</div>
-            <at-job-stats resource="vm.resource"></at-job-stats>
+            <at-job-stats
+                resource="vm.resource"
+                fullscreen="vm.fullscreen">
+            </at-job-stats>
             <at-job-search></at-job-search>
 
             <div class="at-Stdout-menuTop">

awx/ui/client/features/output/jobs.strings.js

@@ -31,6 +31,11 @@ function JobsStrings (BaseString) {
         PROJECT: t.s('View the Project'),
         PROJECT_UPDATE: t.s('View Project checkout results')
     };
+
+    ns.expandCollapse = {
+        EXPAND: t.s('Expand Output'),
+        COLLAPSE: t.s('Collapse Output')
+    };
 }
 
 JobsStrings.$inject = ['BaseStringService'];

awx/ui/client/features/output/stats.directive.js

@@ -30,8 +30,12 @@ function AtJobStatsController (_strings_, _status_) {
     vm.init = scope => {
         const { resource } = scope;
 
+        vm.fullscreen = scope.fullscreen;
+
         vm.download = resource.model.get('related.stdout');
 
+        vm.toggleStdoutFullscreenTooltip = strings.get('expandCollapse.EXPAND');
+
         vm.setHostStatusCounts(status.getHostStatusCounts());
 
         scope.$watch(status.getPlayCount, value => { vm.plays = value; });
@@ -55,6 +59,13 @@ function AtJobStatsController (_strings_, _status_) {
 
         vm.statsAreAvailable = Boolean(status.getStatsEvent());
     };
+
+    vm.toggleFullscreen = () => {
+        vm.fullscreen.isFullscreen = !vm.fullscreen.isFullscreen;
+        vm.toggleStdoutFullscreenTooltip = vm.fullscreen.isFullscreen ?
+            strings.get('expandCollapse.COLLAPSE') :
+            strings.get('expandCollapse.EXPAND');
+    };
 }
 
 function atJobStats () {
@@ -67,9 +78,13 @@ function atJobStats () {
         controller: [
             'JobStrings',
             'JobStatusService',
+            '$scope',
             AtJobStatsController
         ],
-        scope: { resource: '=', },
+        scope: {
+            resource: '=',
+            fullscreen: '='
+        }
     };
 }
 

awx/ui/client/features/output/stats.partial.html

@@ -19,20 +19,20 @@
     </span>
 
     <a ng-show="vm.download && !vm.running" href="{{ vm.download }}?format=txt_download">
-    <button class="btn at-Input-button at-u-noBorder"
-        aw-tool-tip="{{ standardOutTooltip }}"
-        data-tip-watch="standardOutTooltip"
-        data-placement="top">
-        <i class="fa fa-download"></i>
-    </button>
+        <button class="btn at-Input-button at-u-noBorder"
+            aw-tool-tip="{{ standardOutTooltip }}"
+            data-tip-watch="standardOutTooltip"
+            data-placement="top">
+            <i class="fa fa-download"></i>
+        </button>
     </a>
 
     <button class="btn at-Input-button at-u-noBorder"
-        aw-tool-tip="{{ toggleStdoutFullscreenTooltip }}"
-        data-tip-watch="toggleStdoutFullscreenTooltip"
+        aw-tool-tip="{{ vm.toggleStdoutFullscreenTooltip }}"
+        data-tip-watch="vm.toggleStdoutFullscreenTooltip"
         data-placement="top"
-        ng-class="{'StandardOut-actionButton--active': stdoutFullScreen}"
-        ng-click="toggleStdoutFullscreen()">
+        ng-class="{'at-Input-button--active': vm.fullscreen.isFullscreen}"
+        ng-click="vm.toggleFullscreen()">
         <i class="fa fa-arrows-alt"></i>
     </button>
 </div>

awx/ui/client/lib/components/input/_index.less

@@ -70,6 +70,10 @@
     height: @at-height-textarea;
 }
 
+.at-Input-button--active {
+    .at-mixin-ButtonColor(at-color-info, at-color-default);
+}
+
 .at-Input--focus {
     border-color: @at-color-input-focus;
 }
@@ -269,4 +273,4 @@
             cursor: not-allowed;
         }
     }
-}
+}