update to standard out pane

- add lines to pane
- support show and hide toggling of lines

NOTE: layout is hardcoded, will need to move to dealing with various browser heights better

awx/ui/client/src/job-results/event-queue.service.js

@@ -175,6 +175,12 @@ export default ['jobResultsService', 'parseStdoutService', '$q', function(jobRes
                 val.populateDefers[event.counter] = $q.defer();
             }
 
+            if (val.queue[event.counter] &&
+                val.queue[event.counter].processed) {
+                    val.populateDefers.reject("duplicate event: " +
+                        event);
+            }
+
             if (!val.queue[event.counter]) {
                 var resolvePopulation = function(event) {
                     // to resolve, put the event on the queue and

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less

@@ -1,19 +1,128 @@
 @import '../../shared/branding/colors.default.less';
 
-.JobResultsStdOut{
+.JobResultsStdOut {
     height: 100%;
-    margin-top: 15px;
-    background-color: @default-no-items-bord;
-    border-radius: 5px;
-    margin-bottom: 10px;
 }
 
-.JobResultsStdOut-aLineOfStdOut,
+.JobResultsStdOut-toolbar {
-.JobResultsStdOut-expandLine {
     display: flex;
+    height: 38px;
+    margin-top: 15px;
+    border: 1px solid @default-list-header-bg;
+    border-bottom: 0px;
+    border-radius: 5px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
 
-.JobResultsStdOut-lineNumberColumn{
+.JobResultsStdOut-toolbarNumberColumn {
+    background-color: @default-list-header-bg;
+    color: @b7grey;
+    flex: initial;
+    display: flex;
+    justify-content: space-between;
+    width: 70px;
+    padding-bottom: 0px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 10px;
+    border-top-left-radius: 5px;
+}
+
+.JobResultsStdOut-expandAllButton {
+    height: 18px;
+    width: 18px;
+    padding-left: 4px;
+    padding-top: 1px;
+    border-radius: 50%;
+    background-color: @default-bg;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.JobResultsStdOut-expandAllButton:hover .JobResultsStdOut-expandAllIcon,
+.JobResultsStdOut-expandAllIcon:hover {
+    color: @default-data-txt;
+}
+
+.JobResultsStdOut-toolbarStdoutColumn {
+    white-space: normal;
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 10px;
+    background-color: @default-no-items-bord;
+}
+
+.JobResultsStdOut-followButton {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    width: 18px;
+    padding-left: 3.8px;
+    border-radius: 50%;
+    margin-top: 10px;
+    font-size: 12px;
+    background-color: @default-icon;
+    color: @default-border;
+}
+
+.JobResultsStdOut-followIcon {
+    color: @default-border;
+}
+
+.JobResultsStdOut-followButton:hover {
+    background-color: @default-icon-hov;
+}
+
+.JobResultsStdOut-followButton:hover .JobResultsStdOut-followIcon,
+.JobResultsStdOut-followIcon:hover {
+    color: @default-interface-txt;
+}
+
+.JobResultsStdOut-stdoutContainer {
+    height: ~"calc(100% - 108px)";
+    background-color: @default-no-items-bord;
+    border: 1px solid @default-list-header-bg;
+    border-top: 0px;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    margin-bottom: 10px;
+    overflow: scroll;
+}
+
+.JobResultsStdOut-numberColumnPreload {
+    background-color: #EBEBEB;
+    width: 70px;
+    position: fixed;
+}
+
+.JobResultsStdOut-aLineOfStdOut {
+    display: flex;
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+
+.JobResultsStdOut-lineExpander {
+    text-align: left;
+    padding-left: 11px;
+    margin-right: auto;
+}
+
+.JobResultsStdOut-lineExpanderIcon {
+    font-size: 19px;
+    cursor: pointer;
+}
+
+.JobResultsStdOut-lineExpanderIcon:hover {
+    color: @default-data-txt;
+}
+
+.JobResultsStdOut-lineNumberColumn {
     display: flex;
     background-color: @default-list-header-bg;
     text-align: right;
@@ -22,28 +131,16 @@
     padding-bottom: 2px;
     color: @b7grey;
     width: 75px;
+    flex: initial;
     white-space: pre-line;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+    z-index: 1;
 }
 
-.JobResultsStdOut-lineExpander {
+.JobResultsStdOut-stdoutColumn {
-    text-align: left;
-    padding-left: 10px;
-    margin-right: auto;
-}
-
-.JobResultsStdOut-lineNumberColumn--first{
-    text-align: left;
-    padding: 0px;
-    padding-left: 11px;
-    padding-top: 10px;
-    white-space: normal;
-}
-
-.JobResultsStdOut-stdoutColumn{
     padding-left: 20px;
     padding-top: 2px;
     padding-bottom: 2px;
@@ -54,6 +151,8 @@
     width:100%;
 }
 
-.JobResultsStdOut-stdoutColumn--first{
+
-    padding-top:0px;
+// TODO: needs to be set based on height of browser window
+.JobResultsStdOut-numberColumnPreload {
+    height: 720px;
 }

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.directive.js

@@ -5,15 +5,75 @@
  *************************************************/
 
 // import hostStatusBarController from './host-status-bar.controller';
-export default [ 'templateUrl',
+export default [ 'templateUrl', '$timeout',
-    function(templateUrl) {
+    function(templateUrl, $timeout) {
     return {
-        scope: true,
+        scope: false,
         templateUrl: templateUrl('job-results/job-results-stdout/job-results-stdout'),
         restrict: 'E',
-        // controller: jobResultsStdOutController,
+        link: function(scope, element, attrs) {
-        link: function(scope) {
+            scope.toggleAllStdout = function(type) {
+                var expandClass;
+                if (type === 'expand') {
+                    expandClass = "fa-caret-right";
+                } else {
+                    expandClass = "fa-caret-down";
+                }
 
+                element.find(".expanderizer--task."+expandClass)
+                    .each((i, val) => {
+                        $timeout(function(){
+                            angular.element(val).trigger('click');
+                        });
+                    });
+
+                element.find(".expanderizer--play."+expandClass)
+                    .each((i, val) => {
+                        if(angular.element("." +
+                            angular.element(val).attr("data-uuid"))
+                                .find(".expanderizer--task")
+                                    .length === 0 ||
+                                        type !== 'collapse') {
+
+                                $timeout(function(){
+                                    angular.element(val)
+                                        .trigger('click');
+                                });
+                        }
+                    });
+            };
+
+            scope.toggleLine = function($event, id) {
+                if ($($event.currentTarget).hasClass("fa-caret-down")) {
+                    $(id).hide();
+                    $($event.currentTarget)
+                        .removeClass("fa-caret-down");
+                    $($event.currentTarget)
+                        .addClass("fa-caret-right");
+                } else {
+                    $(id).show();
+                    $($event.currentTarget)
+                        .removeClass("fa-caret-right");
+                    $($event.currentTarget)
+                        .addClass("fa-caret-down");
+
+                    if ($($event.currentTarget)
+                        .hasClass("expanderizer--play")) {
+                            $("." + $($event.currentTarget)
+                                .attr("data-uuid"))
+                                .find(".expanderizer--task")
+                                .each((i, val) => {
+                                    if ($(val)
+                                        .hasClass("fa-caret-right")) {
+                                    $timeout(function(){
+                                        angular.element(val)
+                                            .trigger('click');
+                                    });
+                                }
+                            });
+                    }
+                }
+            };
         }
     };
 }];

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.partial.html

@@ -1,11 +1,31 @@
 <div class="JobResultsStdOut">
-    <div class="JobResultsStdOut-expandLine">
+    <div class="JobResultsStdOut-toolbar">
-        <div class="JobResultsStdOut-lineNumberColumn
+        <div class="JobResultsStdOut-toolbarNumberColumn">
-            JobResultsStdOut-lineNumberColumn--first">
+            <div class="JobResultsStdOut-expandAllButton"
-                <i class="fa fa-plus"></i>
+                ng-click="toggleAllStdout('expand')"
+                aw-tool-tip="Expand all lines of standard out."
+                data-placement="top">
+                <i class ="JobResultsStdOut-expandAllIcon fa fa-plus">
+                </i>
+            </div>
+            <div class="JobResultsStdOut-expandAllButton"
+                ng-click="toggleAllStdout('collapse')"
+                aw-tool-tip="Collapse all lines of standard out except play and task headers."
+                data-placement="top">
+                <i class ="JobResultsStdOut-expandAllIcon fa fa-minus">
+                </i>
+            </div>
         </div>
-        <div class="JobResultsStdOut-stdoutColumn
+        <div class="JobResultsStdOut-toolbarStdoutColumn">
-            JobResultsStdOut-stdoutColumn--first">
+            <div class="JobResultsStdOut-followButton"
+                aw-tool-tip="Follow standard out."
+                data-placement="left">
+                <i class="JobResultsStdOut-followIcon fa fa-arrow-down">
+                </i>
+            </div>
         </div>
     </div>
+    <div class="JobResultsStdOut-stdoutContainer">
+        <div class="JobResultsStdOut-numberColumnPreload"></div>
+    </div>
 </div>

awx/ui/client/src/job-results/job-results.block.less

@@ -17,10 +17,14 @@
 
 .JobResults-leftSide {
     .OnePlusTwo-left--panel(100%, @breakpoint-md);
+    // TODO: needs to be set based on height of browser window
+    height: 870px !important;
 }
 
 .JobResults-rightSide {
     .OnePlusTwo-right--panel(100%, @breakpoint-md);
+    // TODO: needs to be set based on height of browser window
+    height: 870px !important;
 
     @media (max-width: @breakpoint-md - 1px) {
         padding-right: 15px;

awx/ui/client/src/job-results/job-results.controller.js

@@ -1,4 +1,4 @@
-export default ['jobData', 'jobDataOptions', 'jobLabels', 'count', '$scope', 'ParseTypeChange', 'ParseVariableString', 'jobResultsService', '$rootScope', 'eventQueue', function(jobData, jobDataOptions, jobLabels, count, $scope, ParseTypeChange, ParseVariableString, jobResultsService, $rootScope, eventQueue) {
+export default ['jobData', 'jobDataOptions', 'jobLabels', 'count', '$scope', 'ParseTypeChange', 'ParseVariableString', 'jobResultsService', '$rootScope', 'eventQueue', '$compile', function(jobData, jobDataOptions, jobLabels, count, $scope, ParseTypeChange, ParseVariableString, jobResultsService, $rootScope, eventQueue, $compile) {
     var getTowerLinks = function() {
         var getTowerLink = function(key) {
             if ($scope.job.related[key]) {
@@ -132,7 +132,10 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'count', '$scope', 'Pa
                     }
 
                     if(change === 'stdout'){
-                        $(".JobResultsStdOut").append(mungedEvent.stdout);
+                        angular
+                            .element(".JobResultsStdOut-stdoutContainer")
+                            .append($compile(mungedEvent
+                                .stdout)($scope));
                     }
                 });
             }

awx/ui/client/src/job-results/job-results.route.js

@@ -53,8 +53,8 @@ export default {
             if (jobData.finished) {
                 // if the job is finished, grab the playbook_on_stats
                 // role to get the final count
-                Rest.setUrl(jobData.related.job_events);// +
+                Rest.setUrl(jobData.related.job_events +
-                    // "?event=playbook_on_stats");
+                    "?event=playbook_on_stats");
                 Rest.get()
                     .success(function(data) {
                         if(!data.results[0]){

awx/ui/client/src/job-results/job-results.service.js

@@ -81,7 +81,8 @@ export default ['$q', 'Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErr
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
-                    val.resolve({results: data.results, next: data.next});
+                    val.resolve({results: data.results,
+                        next: data.next});
                 })
                 .error(function(obj, status) {
                     ProcessErrors(null, obj, status, null, {

awx/ui/client/src/job-results/parse-stdout.service.js

@@ -7,21 +7,13 @@
 export default [function(){
     var val = {
         prettify: function(line){
-
+            // TODO: figure out from Jared what this is
-            // this function right now just removes the 'rn' strings
-            // that i'm currently seeing on this branch on the beginning
-            // and end of each event string. In the future it could be
-            // used to add styling classes to the actual lines of stdout
-            // line = line.replace(/rn/g, '\n');
             line = line.replace(/u001b/g, '');
 
-            // ok
+            // ansi classes
             line = line.replace(/\[0;32m/g, '<span class="ansi32">');
-
-            //unreachable
             line = line.replace(/\[1;31m/g, '<span class="ansi1 ansi31">');
             line = line.replace(/\[0;31m/g, '<span class="ansi1 ansi31">');
-
             line = line.replace(/\[0;32m=/g, '<span class="ansi32">');
             line = line.replace(/\[0;32m1/g, '<span class="ansi36">');
             line = line.replace(/\[0;33m/g, '<span class="ansi33">');
@@ -34,12 +26,12 @@ export default [function(){
         getCollapseClasses: function(event) {
             var string = "";
             if (event.event_name === "playbook_on_play_start") {
-                return string;
+                string += " header_play";
             } else if (event.event_name === "playbook_on_task_start") {
+                string += " header_task";
                 if (event.event_data.play_uuid) {
                     string += " play_" + event.event_data.play_uuid;
                 }
-                return string;
             } else {
                 if (event.event_data.play_uuid) {
                     string += " play_" + event.event_data.play_uuid;
@@ -47,18 +39,48 @@ export default [function(){
                 if (event.event_data.task_uuid) {
                     string += " task_" + event.event_data.task_uuid;
                 }
-                return string;
             }
+
+            return string;
         },
         getCollapseIcon: function(event, line) {
-            if ((event.event_name === "playbook_on_play_start" || event.event_name === "playbook_on_task_start") && line !== "") {
+            var clickClass,
-                return `<span class="JobResultsStdOut-lineExpander"><i class="fa fa-caret-down"></i></span>`;
+                expanderizerSpecifier;
+
+            var emptySpan = `
+<span class="JobResultsStdOut-lineExpander"></span>`;
+
+            if ((event.event_name === "playbook_on_play_start" ||
+                event.event_name === "playbook_on_task_start") &&
+                line !== "") {
+                    if (event.event_name === "playbook_on_play_start" &&
+                        line.indexOf("PLAY") > -1) {
+                            expanderizerSpecifier = "play";
+                            clickClass = "play_" +
+                                event.event_data.play_uuid;
+                    } else if (line.indexOf("TASK") > -1 ||
+                        line.indexOf("RUNNING HANDLER") > -1) {
+                            expanderizerSpecifier = "task";
+                            clickClass = "task_" +
+                                event.event_data.task_uuid;
+                    } else {
+                        return emptySpan;
+                    }
+
+                return `
+<span class="JobResultsStdOut-lineExpander">
+    <i class="JobResultsStdOut-lineExpanderIcon fa fa-caret-down expanderizer
+        expanderizer--${expanderizerSpecifier} expanded"
+        ng-click="toggleLine($event, '.${clickClass}')"
+        data-uuid="${clickClass}">
+    </i>
+</span>`;
             } else {
-                return `<span class="JobResultsStdOut-lineExpander"></span>`;
+                return emptySpan;
             }
         },
         parseStdout: function(event){
-            var stdoutStrings = _
+            return _
                 .zip(_.range(event.start_line + 1,
                     event.end_line + 1),
                     event.stdout.split("\r\n").slice(0, -1))
@@ -69,10 +91,6 @@ export default [function(){
     <div class="JobResultsStdOut-stdoutColumn">${this.prettify(lineArr[1])}</div>
 </div>`;
                 }).join("");
-            // this object will be used by the ng-repeat in the
-            // job-results-stdout.partial.html. probably need to add the
-            // elapsed time in here too
-            return stdoutStrings;
         }
     };
     return val;