add top anchor scroll, fix follow tooltips, replace stdout tabs w spaces

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

@@ -186,6 +186,23 @@
     height: 100%;
 }
 
+.JobResultsStdOut-followAnchor {
+    height: 20px;
+    width: 100%;
+}
+
+.JobResultsStdOut-toTop {
+    margin-right: 20px;
+    color: #D7D7D7;
+    cursor: pointer;
+    text-align: right;
+    font-family: monaco;
+}
+
+.JobResultsStdOut-toTop:hover {
+    color: @default-interface-txt;
+}
+
 .foo {
     margin-right: auto;
     margin-top: 8px;

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

@@ -5,8 +5,8 @@
  *************************************************/
 
 // import hostStatusBarController from './host-status-bar.controller';
-export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll', '$log',
+export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll',
-    function(templateUrl, $timeout, $location, $anchorScroll, $log) {
+    function(templateUrl, $timeout, $location, $anchorScroll) {
     return {
         scope: false,
         templateUrl: templateUrl('job-results/job-results-stdout/job-results-stdout'),
@@ -55,10 +55,10 @@ export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll', '$log'
                 });
                 scope.visLine = visItem;
                 scope.parentVisLine = parentItem;
-                scope.visibleItems = "First visible line: " + visItem + ", Parent line: " + parentItem;
             };
 
             var lastScrollTop = 0;
+            scope.stdoutOverflowed = false;
             $(".JobResultsStdOut-stdoutContainer").on('scroll', function() {
                 var st = $(this).scrollTop();
                 if (st < lastScrollTop){
@@ -67,12 +67,17 @@ export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll', '$log'
                 }
 
                 if($(this).scrollTop() + $(this).innerHeight() >=
-                    $(this)[0].scrollHeight) {
+                    $(this)[0].scrollHeight - 25) {
                     // user scrolled all the way to bottom, so engage
                     // follow
                     scope.followEngaged = true;
                 }
 
+                // pane is now overflowed, show top indicator
+                if (st > 0) {
+                    scope.stdoutOverflowed = true;
+                }
+
                 lastScrollTop = st;
             });
 
@@ -84,17 +89,15 @@ export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll', '$log'
                 $anchorScroll();
             };
 
+            scope.toTop = function() {
+                $location.hash('topAnchor');
+                $anchorScroll();
+            };
+
             scope.topLineAnchor = function() {
                 $location.hash('topLineAnchor');
                 $anchorScroll();
-            }
+            };
-
-            // follow button for completed job should specify that the
-            // button will jump to the bottom of the standard out pane,
-            // not follow lines as they come in
-            if (scope.jobFinished) {
-                scope.followTooltip = "Jump to last line";
-            }
 
             // if following becomes active, go ahead and get to the bottom
             // of the standard out pane
@@ -105,9 +108,9 @@ export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll', '$log'
 
                 if (!scope.jobFinished) {
                     if (val) {
-                        scope.followTooltip = "Follow standard out";
+                        scope.followTooltip = "Currently following standard out as it comes in.  Click to unfollow.";
                     } else {
-                        scope.followTooltip = "Unfollow standard out";
+                        scope.followTooltip = "Click to follow standard out as it comes in.";
                     }
                 }
             });

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

@@ -17,31 +17,30 @@
             </div>
         </div>
         <div class="JobResultsStdOut-toolbarStdoutColumn">
-            <!-- <span class="foo">{{ visibleItems }}</span> -->
             <div class="JobResultsStdOut-followButton"
                 ng-class="{'is-engaged': followEngaged && !jobFinished}"
-                aw-tool-tip="Follow standard out"
+                aw-tool-tip="{{ followTooltip }}"
+                data-tip-watch="followTooltip"
                 data-placement="left"
+                data-trigger="hover"
+                data-container="body"
                 ng-click="followToggleClicked()">
                 <i class="JobResultsStdOut-followIcon fa fa-arrow-down">
                 </i>
             </div>
-            <!-- TODO: get followTooltip watch working
-            <div class="JobResultsStdOut-followButton"
-                aw-tool-tip="{{followTooltip}}"
-                data-tip-watch="followTooltip"
-                data-placement="left"
-                ng-click="followToggleClicked()">
-                <i class="JobResultsStdOut-followIcon fa fa-arrow-down">
-                </i>
-            </div> -->
         </div>
     </div>
     <div class="JobResultsStdOut-stdoutContainer">
+        <div id="topAnchor"></div>
         <div class="JobResultsStdOut-numberColumnPreload"></div>
         <div id='topLineAnchor'></div>
         <div id="followAnchor"
             class="JobResultsStdOut-followAnchor">
+            <div class="JobResultsStdOut-toTop"
+                ng-click="toTop()"
+                ng-show="stdoutOverflowed">
+                ^ TOP
+            </div>
         </div>
     </div>
     <div class="JobResultsStdOut-footer">

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

@@ -86,6 +86,15 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'jobFinished', 'count'
     $scope.jobFinished = jobFinished;
     $scope.followEngaged = !$scope.jobFinished;
 
+    // follow button for completed job should specify that the
+    // button will jump to the bottom of the standard out pane,
+    // not follow lines as they come in
+    if ($scope.jobFinished) {
+        $scope.followTooltip = "Jump to last line of standard out.";
+    } else {
+        $scope.followTooltip = "Currently following standard out as it comes in.  Click to unfollow.";
+    }
+
     // EVENT STUFF BELOW
 
     // just putting the event queue on scope so it can be inspected in the
@@ -127,6 +136,7 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'jobFinished', 'count'
                     if (change === 'finishedTime'  && !$scope.job.finished) {
                         $scope.job.finished = mungedEvent.finishedTime;
                         $scope.jobFinished = true;
+                        $scope.followTooltip = "Jump to last line of standard out.";
                     }
 
                     if (change === 'countFinished') {
@@ -143,6 +153,9 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', 'jobFinished', 'count'
                             .append($compile(mungedEvent
                                 .stdout)($scope));
 
+                        $(".JobResultsStdOut-followAnchor")
+                            .appendTo(".JobResultsStdOut-stdoutContainer");
+
                         if ($scope.followEngaged) {
                             $scope.followScroll();
                         }

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

@@ -99,7 +99,7 @@ export default [function(){
             return _
                 .zip(_.range(event.start_line + 1,
                     event.end_line + 1),
-                    event.stdout.split("\r\n").slice(0, -1))
+                    event.stdout.replace("\t", "        ").split("\r\n").slice(0, -1))
                 .map(lineArr => {
                     return `
 <div class="JobResultsStdOut-aLineOfStdOut${this.getCollapseClasses(event, lineArr[1], lineArr[0])}">