Job stdout

Replaced scrolling widget with new angular directive and simplified approach to endless scroll. Fixed non-response to job failing before any job_events actually received. Now if playbook run completely fails, the stdout gets displayed without having to refresh browser.

awx/ui/static/js/controllers/JobStdout.js

@@ -16,37 +16,23 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         stdout_url,
         current_range,
         event_socket,
-        first_time_up = 0,
+        status_socket,
-        first_time_down = 0,
         loaded_sections = [],
         event_queue = 0,
         auto_scroll_down=true,  // programmatic scroll to bottom
         live_event_processing = true,
         should_apply_live_events = true,
-        prior_mcs,
+        page_size = 500,
-        page_size = 500;
+        lastScrollTop = 0,
+        st,
+        direction;
 
-    event_socket = Socket({
+    status_socket = Socket({
         scope: $scope,
-        endpoint: "job_events"
+        endpoint: "jobs"
     });
-
+    status_socket.init();
-    Wait('start');
+    status_socket.on("status_changed", function(data) {
-
-    event_socket.init();
-
-    event_socket.on("job_events-" + job_id, function() {
-        if (api_complete) {
-            event_queue++;
-        }
-    });
-
-    if ($rootScope.removeJobStatusChange) {
-        $rootScope.removeJobStatusChange();
-    }
-    $rootScope.removeJobStatusChange = $rootScope.$on('JobStatusChange', function(e, data) {
-        // if we receive a status change event for the current job indicating the job
-        // is finished, stop event queue processing and reload
         if (parseInt(data.unified_job_id, 10) === parseInt(job_id,10) && $scope.job) {
             $scope.job.status = data.status;
             if (data.status === 'failed' || data.status === 'canceled' ||
@@ -55,13 +41,29 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
                     window.clearInterval($rootScope.jobStdOutInterval);
                 }
                 if (live_event_processing) {
-                    getNextSection();
+                    if (loaded_sections.length === 0) {
+                        $scope.$emit('LoadStdout');
+                    }
+                    else {
+                        getNextSection();
+                    }
                 }
                 live_event_processing = false;
             }
         }
     });
 
+    event_socket = Socket({
+        scope: $scope,
+        endpoint: "job_events"
+    });
+    event_socket.init();
+    event_socket.on("job_events-" + job_id, function() {
+        if (api_complete) {
+            event_queue++;
+        }
+    });
+
     $rootScope.jobStdOutInterval = setInterval( function() {
         if (event_queue > 0) {
             // events happened since the last check
@@ -94,9 +96,8 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
                         start: (data.range.start < 0) ? 0 : data.range.start,
                         end: data.range.end
                     });
-                    setTimeout(function() {
+                    $('#pre-container').scrollTop($('#pre-container').prop("scrollHeight"));
-                        $('#pre-container').mCustomScrollbar("scrollTo", "bottom");
+                    //console.log($('#pre-container-content').prop("scrollHeight"));
-                    }, 300);
                 }
                 else {
                     api_complete = true;
@@ -108,11 +109,21 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
             });
     });
 
+    function detectDirection() {
+        st = $('#pre-container').scrollTop();
+        if (st > lastScrollTop) {
+            direction = "down";
+        } else {
+            direction = "up";
+        }
+        lastScrollTop = st;
+        return  direction;
+    }
+
     function resizeToFit() {
         available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#job-status').outerHeight() -
-            $('#breadcrumb-container').outerHeight() - 30;
+            $('#breadcrumb-container').outerHeight() - 60;
         $('#pre-container').height(available_height);
-        $('#pre-container').mCustomScrollbar("update");
     }
     resizeToFit();
 
@@ -120,6 +131,12 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         resizeToFit();
     }, 500));
 
+    $('#pre-container').bind('scroll', function() {
+        if (detectDirection() === "up") {
+            should_apply_live_events = false;
+        }
+    });
+
     Rest.setUrl(GetBasePath('jobs') + job_id + '/');
     Rest.get()
         .success(function(data) {
@@ -139,56 +156,7 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         });
 
 
-    $scope.onTotalScroll = function() {
+    $scope.stdOutScrollToTop = function() {
-        // scroll forward or into the future toward the end of the file
-        var start, url;
-        if ((live_event_processing === false || (live_event_processing && should_apply_live_events === false)) &&
-            auto_scroll_down === false) {
-
-            if (loaded_sections.length > 0) {
-                start = loaded_sections[loaded_sections.length - 1].end + 1;
-            }
-            else {
-                start = 0;
-            }
-            url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (start + page_size);
-            first_time_down++;
-            Wait('start');
-            Rest.setUrl(url);
-            Rest.get()
-                .success( function(data) {
-                    Wait('stop');
-                    if (loaded_sections.indexOf(start) < 0) {
-                        if (data.content) {
-                            $('#pre-container-content').append(data.content);
-                            loaded_sections.push({
-                                start: (data.range.start < 0) ? 0 : data.range.start,
-                                end: data.range.end
-                            });
-                            current_range = data.range;
-                        }
-                    }
-                    if (data.range.end === data.range.absolute_end) {
-                        should_apply_live_events = true;   //we're at the bottom
-                        $log.debug('at the end. turned on live events');
-                    }
-                    auto_scroll_down = true;
-                    if (first_time_down === 1) {
-                        $('#pre-container').mCustomScrollbar("update");
-                    }
-                    $("#pre-container").mCustomScrollbar("scrollTo", "bottom", {scrollInertia:0});
-                })
-                .error(function(data, status) {
-                    ProcessErrors($scope, data, status, null, { hdr: 'Error!',
-                        msg: 'Failed to retrieve stdout for job: ' + job_id + '. GET returned: ' + status });
-                });
-        }
-        else {
-            auto_scroll_down = false;
-        }
-    };
-
-    $scope.onTotalScrollBack = function() {
         // scroll up or back in time toward the beginning of the file
         var start, end, url;
         if (loaded_sections.length > 0 && loaded_sections[0].start > 0) {
@@ -200,26 +168,26 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
             end = page_size;
         }
         if (start !== undefined  && end !== undefined) {
+            $('#stdoutMoreRowsTop').fadeIn();
             url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + end;
-            first_time_up++;
-            Wait('start');
             Rest.setUrl(url);
             Rest.get()
                 .success( function(data) {
-                    Wait('stop');
+                    //var currentPos = $('#pre-container').scrollTop();
-                    var oldContentHeight, heightDiff;
+                    var newSH, oldSH = $('#pre-container').prop('scrollHeight'),
-                    oldContentHeight=$("#pre-container .mCSB_container").innerHeight();
+                        st = $('#pre-container').scrollTop();
+
                     $('#pre-container-content').prepend(data.content);
+
+                    newSH = $('#pre-container').prop('scrollHeight');
+                    $('#pre-container').scrollTop(newSH - oldSH + st);
+
                     loaded_sections.unshift({
                         start: (data.range.start < 0) ? 0 : data.range.start,
                         end: data.range.end
                     });
                     current_range = data.range;
-                    heightDiff=$("#pre-container .mCSB_container").innerHeight() - oldContentHeight;
+                    $('#stdoutMoreRowsTop').fadeOut(400);
-                    if (first_time_up === 1) {
-                        $('#pre-container').mCustomScrollbar("update");
-                    }
-                    $("#pre-container").mCustomScrollbar("scrollTo", heightDiff, {scrollInertia:0});
                 })
                 .error(function(data, status) {
                     ProcessErrors($scope, data, status, null, { hdr: 'Error!',
@@ -228,42 +196,11 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         }
     };
 
-    $scope.whileScrolling = function(mcs) {
-        var direction;
-        if (prior_mcs !== undefined) {
-            if (mcs.topPct < prior_mcs.topPct && prior_mcs.topPct !== 100) {
-                direction = "up";
-            }
-            else if (mcs.topPct > prior_mcs.topPct) {
-                direction = "down";
-            }
-            else {
-                direction = "none";
-            }
-        }
-        prior_mcs = mcs;
-        if (direction === "up") {
-            // user is scrollin up or back in time
-            $log.debug('user scrolled up. turned off live events.');
-            should_apply_live_events = false;
-        }
-    };
-
-    $scope.scrollStarted = function() {
-        // user touched the scroll bar. stop applying live events and forcing
-        //if (auto_scroll_down === false) {
-        //    should_apply_live_events = false;
-        //    $log.debug('turned off live events');
-        //}
-        //else {
-        //    auto_scroll_down = false;
-        //}
-    };
-
     function getNextSection() {
         // get the next range of data from the API
         var start = loaded_sections[loaded_sections.length - 1].end + 1, url;
         url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (start + page_size);
+        $('#stdoutMoreRowsBottom').fadeIn();
         Rest.setUrl(url);
         Rest.get()
             .success( function(data) {
@@ -276,12 +213,9 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
                     // if user has not disabled live event view by scrolling upward, then scroll down to the new content
                     current_range = data.range;
                     auto_scroll_down = true; // prevent auto load from happening
-                    first_time_down++;
+                    $('#pre-container-content').scrollTop($('#pre-container-content').prop("scrollHeight"));
-                    if (first_time_down === 1) {
-                        $('#pre-container').mCustomScrollbar("update");
-                    }
-                    $("#pre-container").mCustomScrollbar("scrollTo", "bottom", {scrollInertia:0});
                 }
+                $('#stdoutMoreRowsBottom').fadeOut(400);
             })
             .error(function(data, status) {
                 ProcessErrors($scope, data, status, null, { hdr: 'Error!',

awx/ui/static/less/job-details.less

@@ -13,473 +13,477 @@
 @skipped-hosts-color:       @skipped;
 @unreachable-hosts-color:   @unreachable;
 
-.job_summary {
+
-    .table {
+#jobs-detail {
-        margin-bottom: 0;
+
-        border: 1px solid @well-border;
+    .job_summary {
-        background-color: @white;
+        .table {
+            margin-bottom: 0;
+            border: 1px solid @well-border;
+            background-color: @white;
+        }
+        .table>tbody>tr>td {
+            border-top-color: @well-border;
+            padding-bottom: 0;
+        }
+        .table>thead>tr>th {
+            border-bottom-color: @well-border;
+            padding-bottom: 0;
+            height: 22px;
+        }
     }
-    .table>tbody>tr>td {
+
-        border-top-color: @well-border;
+    .status-bar {
-        padding-bottom: 0;
+        height: 16px;
+        overflow: hidden;
+        border-radius: 4px;
+        border: 1px solid @grey;
+        margin-top: 2px;
     }
-    .table>thead>tr>th {
-        border-bottom-color: @well-border;
-        padding-bottom: 0;
-        height: 22px;
-    }
-}
 
-.status-bar {
+    .inner-bar {
-    height: 16px;
+        display: inline-block;
-    overflow: hidden;
+        overflow: hidden;
-    border-radius: 4px;
+        height: 16px;
-    border: 1px solid @grey;
+        text-align: center;
-    margin-top: 2px;
+        font-size: 12px;
-}
-
-.inner-bar {
-    display: inline-block;
-    overflow: hidden;
-    height: 16px;
-    text-align: center;
-    font-size: 12px;
-    font-weight: bold;
-    line-height: normal;
-}
-
-.scroll-spinner {
-    display: none;
-    background-color: transparent;
-    color:#000;
-    float:right;
-}
-#hostResultsMoreRows.scroll-spinner {
-    padding-top: 0;
-    position: relative;
-    top: 12px;
-}
-
-.failed-hosts {
-    background-color: @failed-hosts-color;
-}
-.failed-hosts-color {
-    color: @failed-hosts-color;
-}
-.successful-hosts {
-    background-color: @successful-hosts-color;
-}
-.successful-hosts-color {
-    color: @successful-hosts-color;
-}
-.changed-hosts {
-    background-color: @changed-hosts-color;
-}
-.changed-hosts-color {
-    color: @changed-hosts-color;
-}
-.skipped-hosts, .no-matching-hosts {
-    background-color: @skipped-hosts-color;
-}
-.unreachable-hosts {
-    background-color: @unreachable-hosts-color;
-}
-.unreachable-hosts-color {
-    color: @unreachable-hosts-color;
-}
-.missing-hosts {
-    color: transparent;
-}
-
-.job_well {
-    padding: 8px;
-    background-color: @white;
-    border: 1px solid @well-border;
-    border-radius: 4px;
-    /*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);*/
-}
-
-#hide-summary-button {
-    text-align: right;
-    margin-bottom: 15px;
-}
-
-.section {
-    margin-bottom: 20px;
-    h5 {
-        margin-top: 0;
-        margin-bottom: 12px;
         font-weight: bold;
+        line-height: normal;
     }
-}
 
-.section:last-child {
+    .scroll-spinner {
-    margin-bottom: 0;
+        display: none;
-}
+        background-color: transparent;
+        color:#000;
+        float:right;
+    }
 
-#job-detail-tables {
+    #hostResultsMoreRows.scroll-spinner {
-    margin-top: 20px;
+        padding-top: 0;
-}
+        position: relative;
+        top: 12px;
+    }
 
-#job_options {
+    .failed-hosts {
-    height: 100px;
+        background-color: @failed-hosts-color;
-    overflow-y: auto;
+    }
-    overflow-x: none;
+    .failed-hosts-color {
-}
+        color: @failed-hosts-color;
+    }
+    .successful-hosts {
+        background-color: @successful-hosts-color;
+    }
+    .successful-hosts-color {
+        color: @successful-hosts-color;
+    }
+    .changed-hosts {
+        background-color: @changed-hosts-color;
+    }
+    .changed-hosts-color {
+        color: @changed-hosts-color;
+    }
+    .skipped-hosts, .no-matching-hosts {
+        background-color: @skipped-hosts-color;
+    }
+    .unreachable-hosts {
+        background-color: @unreachable-hosts-color;
+    }
+    .unreachable-hosts-color {
+        color: @unreachable-hosts-color;
+    }
+    .missing-hosts {
+        color: transparent;
+    }
 
-#job_plays, #job_tasks {
+    .job_well {
-    height: 150px;
+        padding: 8px;
-    overflow-y: auto;
+        background-color: @white;
-    overflow-x: none;
+        border: 1px solid @well-border;
-}
+        border-radius: 4px;
+        /*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);*/
+    }
 
-#breadcrumb-container {
+    #hide-summary-button {
-    padding-right: 15px;
+        text-align: right;
-    .nav-path {
         margin-bottom: 15px;
     }
-}
 
-#job-detail-container {
+    .section {
-    position: relative;
+        margin-bottom: 20px;
-    padding-left: 15px;
+        h5 {
-    padding-right: 7px;
+            margin-top: 0;
-    width: 58.33333333%;
+            margin-bottom: 12px;
-    .well {
-        overflow: hidden;
-    }
-
-    #job-status-form {
-        label {
             font-weight: bold;
         }
-        .control-label {
+    }
-            padding-top: 0;
+
-            padding-right: 0;
+    .section:last-child {
-            text-align: left;
+        margin-bottom: 0;
-        }
+    }
-        .form-group {
+
+    #job-detail-tables {
+        margin-top: 20px;
+    }
+
+    #job_options {
+        height: 100px;
+        overflow-y: auto;
+        overflow-x: none;
+    }
+
+    #job_plays, #job_tasks {
+        height: 150px;
+        overflow-y: auto;
+        overflow-x: none;
+    }
+
+    #breadcrumb-container {
+        padding-right: 15px;
+        .nav-path {
             margin-bottom: 15px;
         }
-        hr {
+    }
-            margin-top: 0;
+
+    #job-detail-container {
+        position: relative;
+        padding-left: 15px;
+        padding-right: 7px;
+        width: 58.33333333%;
+        .well {
+            overflow: hidden;
         }
-        .more-or-less {
+
-            font-size: 12px;
+        #job-status-form {
-            text-align: left;
+            label {
-            margin-bottom: 15px;
+                font-weight: bold;
-        }
+            }
-        #started-time,
+            .control-label {
-        #finished-time,
+                padding-top: 0;
-        #elapsed-time {
+                padding-right: 0;
-            display: inline-block;
+                text-align: left;
-        }
+            }
-        #finished-time,
+            .form-group {
-        #elapsed-time {
+                margin-bottom: 15px;
-            padding-left: 15px;
+            }
+            hr {
+                margin-top: 0;
+            }
+            .more-or-less {
+                font-size: 12px;
+                text-align: left;
+                margin-bottom: 15px;
+            }
+            #started-time,
+            #finished-time,
+            #elapsed-time {
+                display: inline-block;
+            }
+            #finished-time,
+            #elapsed-time {
+                padding-left: 15px;
+            }
         }
+
     }
 
-}
+    #job-summary-container {
-
+        position: absolute;
-#job-summary-container {
+        top: 0;
-    position: absolute;
+        right: 0;
-    top: 0;
+        padding-right: 15px;
-    right: 0;
+        padding-left: 7px;
-    padding-right: 15px;
+        width: 41.66666667%;
-    padding-left: 7px;
-    width: 41.66666667%;
-}
-
-.table-header {
-    font-weight: bold;
-    font-size: 12px;
-}
-
-.table-detail {
-    overflow-x: hidden;
-    overflow-y: auto;
-    border: 1px solid @well-border;
-    border-radius: 4px;
-    background-color: @white;
-    /*padding-left: 3px; */
-    .row {
-        border-top: 1px solid @well-border;
-    }
-    .row:first-child {
-        border: none;
-    }
-    /*.row:nth-child(odd) {
-        background-color: @well;
-        padding-top: 0;
-        padding-bottom: 0;
-    }*/
-    .active {
-        background-color: #EDF2F2;
     }
 
-    .loading-info {
+    .table-header {
-        padding-top: 5px;
+        font-weight: bold;
-        padding-left: 3px;
+        font-size: 12px;
     }
-}
 
-.status-column i {
-    font-size: 12px;
-}
-
-#tasks-table-detail {
-    height: 150px;
-}
-
-#play-section {
     .table-detail {
+        overflow-x: hidden;
+        overflow-y: auto;
+        border: 1px solid @well-border;
+        border-radius: 4px;
+        background-color: @white;
+        /*padding-left: 3px; */
+        .row {
+            border-top: 1px solid @well-border;
+        }
+        .row:first-child {
+            border: none;
+        }
+        /*.row:nth-child(odd) {
+            background-color: @well;
+            padding-top: 0;
+            padding-bottom: 0;
+        }*/
+        .active {
+            background-color: #EDF2F2;
+        }
+
+        .loading-info {
+            padding-top: 5px;
+            padding-left: 3px;
+        }
+    }
+
+    .status-column i {
+        font-size: 12px;
+    }
+
+    #tasks-table-detail {
         height: 150px;
     }
-}
 
-.header {
+    #play-section {
-    width: 100%;
+        .table-detail {
-    height: 28px;
+            height: 150px;
-    padding: bottom: 5px;
+        }
-
-    .title {
-        display: inline-block;
-        font-size: 14px;
-        font-weight: 600;
     }
 
-    .search-field {
+    .header {
-        display: inline-block;
+        width: 100%;
-        position: relative;
+        height: 28px;
-        float: right;
+        padding: bottom: 5px;
-        input {
+
-            width: 250px;
+        .title {
+            display: inline-block;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .search-field {
+            display: inline-block;
+            position: relative;
+            float: right;
+            input {
+                width: 250px;
+                padding-right: 20px;
+            }
+            a {
+                position: absolute;
+                right: 3px;
+                top: 3px;
+                color: #a9a9a9;
+            }
+            a:hover {
+                color: @black;
+            }
+        }
+    }
+
+    #summary-search-section {
+        .remove-left-padding {
+            padding-left: 0;
+        }
+        label {
+            text-align: left;
+            font-weight: normal;
+            padding-left: 0;
+            padding-right: 0;
+            padding-top: 6px;
+        }
+        #search_all_hosts_name {
+            width: 100%;
+            padding-left: 3px;
             padding-right: 20px;
         }
+    }
+
+    #event-help-link {
+        margin-left: 3px;
+        font-size: 14px;
+    }
+
+    #search-all-input-icons {
+        position: absolute;
+        right: 3px;
+        top: 5px;
+        z-index: 100;
         a {
-            position: absolute;
-            right: 3px;
-            top: 3px;
             color: #a9a9a9;
         }
         a:hover {
             color: @black;
         }
     }
-}
 
-#summary-search-section {
+    label.small-label {
-    .remove-left-padding {
-        padding-left: 0;
-    }
-    label {
-        text-align: left;
-        font-weight: normal;
-        padding-left: 0;
-        padding-right: 0;
-        padding-top: 6px;
-    }
-    #search_all_hosts_name {
-        width: 100%;
-        padding-left: 3px;
-        padding-right: 20px;
-    }
-}
-
-#event-help-link {
-    margin-left: 3px;
-    font-size: 14px;
-}
-
-#search-all-input-icons {
-    position: absolute;
-    right: 3px;
-    top: 5px;
-    z-index: 100;
-    a {
-        color: #a9a9a9;
-    }
-    a:hover {
-        color: @black;
-    }
-}
-
-label.small-label {
-    font-size: 12px;
-}
-
-#task-hosts-section {
-    position: relative;
-    top: 0;
-    left: 0;
-    #hosts-table-detail {
-        padding: 3px 0 3px 5px;
-        border: 1px solid @well-border;
-        border-top: 2px solid @well-border;
-        height: 150px;
-        background-color: @white;
-        .col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {
-            width: 3%;
-        }
-    }
-}
-
-#hosts-summary-section {
-    .col-lg-4, .col-md-4, .col-sm-4, .col-xs-4 {
-        width: 33%;
-    }
-    .col-lg-2, .col-md-2, .col-sm-2, .col-xs-2 {
-        width: 16.5%;
-    }
-    .table-header {
-        font-size: 12px;
-        padding-right: 18px;
-    }
-    .table-detail {
-        height: 200px;
-    }
-    .name {
-        word-break: break-all;
-    }
-    .badge {
         font-size: 12px;
     }
-    .badge-column a {
-        width: 20%;
-    }
-}
 
-.legend {
+    #task-hosts-section {
-    display: inline-block;
+        position: relative;
-    font-size: 12px;
+        top: 0;
-    text-align: center;
+        left: 0;
-    i {
+        #hosts-table-detail {
-        font-size: 10px;
+            padding: 3px 0 3px 5px;
-        margin-left: 5px;
+            border: 1px solid @well-border;
-    }
+            border-top: 2px solid @well-border;
-    i:first-child {
+            height: 150px;
-        margin-left: 0;
+            background-color: @white;
-    }
+            .col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {
-}
+                width: 3%;
-
-.mCSB_container {
-    margin-right: 18px;
-}
-
-#graph-section {
-    position: relative;
-    width: 100%;
-    .header {
-        margin-top: 20px;
-        .legend {
-            i {
-                margin-left: 10px
-            }
-            i:first-child {
-                margin-left: 0;
             }
         }
     }
-}
 
-path.slice{
+    #hosts-summary-section {
-    stroke-width:2px;
+        .col-lg-4, .col-md-4, .col-sm-4, .col-xs-4 {
-}
+            width: 33%;
-
+        }
-polyline{
+        .col-lg-2, .col-md-2, .col-sm-2, .col-xs-2 {
-    opacity: .3;
+            width: 16.5%;
-    stroke: black;
+        }
-    stroke-width: 2px;
+        .table-header {
-    fill: none;
+            font-size: 12px;
-}
+            padding-right: 18px;
-
+        }
-svg text.percent{
+        .table-detail {
-    fill:@black;
+            height: 200px;
-    text-anchor:middle;
+        }
-    font-size:12px;
+        .name {
-    font-weight: bold;
+            word-break: break-all;
-}
+        }
-
+        .badge {
-#event-viewer-dialog {
-    padding-bottom: 5px;
-    padding-top: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
-    overflow: hidden;
-    .results {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-    }
-    .spacer {
-        height: 60px;
-    }
-    table {
-        border-collapse: collapse;
-        width: 100%;
-        border-bottom: 1px solid @well-border;
-    }
-    tr {
-        border-top: 1px solid @well-border;
-        /*border-bottom: 1px solid @well-border;*/
-    }
-    tr:first-child {
-        border-top: none;
-    }
-    tr td:first-of-type {
-        width: 20%;
-    }
-    .key {
-        vertical-align: top;
-        padding: 3px;
-        font-weight: 600;
-    }
-    .value {
-        padding: 3px;
-        i {
             font-size: 12px;
         }
+        .badge-column a {
+            width: 20%;
+        }
     }
-    .nested-table {
+
-        border: none;
+    .legend {
-        padding: 0;
+        display: inline-block;
+        font-size: 12px;
+        text-align: center;
+        i {
+            font-size: 10px;
+            margin-left: 5px;
+        }
+        i:first-child {
+            margin-left: 0;
+        }
+    }
+
+    .mCSB_container {
+        margin-right: 18px;
+    }
+
+    #graph-section {
+        position: relative;
+        width: 100%;
+        .header {
+            margin-top: 20px;
+            .legend {
+                i {
+                    margin-left: 10px
+                }
+                i:first-child {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+
+    path.slice{
+        stroke-width:2px;
+    }
+
+    polyline{
+        opacity: .3;
+        stroke: black;
+        stroke-width: 2px;
+        fill: none;
+    }
+
+    svg text.percent{
+        fill:@black;
+        text-anchor:middle;
+        font-size:12px;
+        font-weight: bold;
+    }
+
+    #event-viewer-dialog {
+        padding-bottom: 5px;
+        padding-top: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        overflow: hidden;
+        .results {
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+        }
+        .spacer {
+            height: 60px;
+        }
         table {
+            border-collapse: collapse;
+            width: 100%;
+            border-bottom: 1px solid @well-border;
+        }
+        tr {
+            border-top: 1px solid @well-border;
+            /*border-bottom: 1px solid @well-border;*/
+        }
+        tr:first-child {
             border-top: none;
-            border-bottom: none;
+        }
-            width: auto;
+        tr td:first-of-type {
-            tr {
+            width: 20%;
+        }
+        .key {
+            vertical-align: top;
+            padding: 3px;
+            font-weight: 600;
+        }
+        .value {
+            padding: 3px;
+            i {
+                font-size: 12px;
+            }
+        }
+        .nested-table {
+            border: none;
+            padding: 0;
+            table {
                 border-top: none;
-            }
+                border-bottom: none;
-            tr td:first-of-type {
                 width: auto;
+                tr {
+                    border-top: none;
+                }
+                tr td:first-of-type {
+                    width: auto;
+                }
+                .key {
+                    font-weight: 400;
+                }
             }
-            .key {
+        }
-                font-weight: 400;
+    }
+
+    .footer-row {
+        height: 20px;
+    }
+
+    @media (max-width: 767px) {
+        #job-detail-container {
+            #job-status-form {
+                #finished-time,
+                #elapsed-time {
+                    display: block;
+                }
+                #finished-time,
+                #elapsed-time {
+                    padding-left: 0;
+                    margin-left: 0;
+                    padding-top: 15px;
+                }
             }
         }
     }
 }
-
-.footer-row {
-    height: 20px;
-}
-
-@media (max-width: 767px) {
-    #job-detail-container {
-        #job-status-form {
-            #finished-time,
-            #elapsed-time {
-                display: block;
-            }
-            #finished-time,
-            #elapsed-time {
-                padding-left: 0;
-                margin-left: 0;
-                padding-top: 15px;
-            }
-        }
-    }
-}
-

awx/ui/static/less/stdout.less

@@ -6,12 +6,33 @@
  */
 
  #jobs-stdout {
+    margin-bottom: 20px;
+
     #job-status {
         label {
             margin-right: 15px;
         }
         margin-bottom: 15px;
     }
+
+    .scroll-spinner {
+        display: none;
+        background-color: transparent;
+        color:#000;
+    }
+    #stdoutMoreRowsTop {
+        position: absolute;
+        top: 10px;
+        right: 20px;
+    }
+    #stdoutMoreRowsBottom {
+        float: right;
+    }
+    #pre-container {
+        overflow-x: scroll;
+        overflow-y: auto;
+    }
+
  }
 
 .body_foreground { color: #AAAAAA; }

awx/ui/static/lib/lrInfiniteScroll/lrInfiniteScroll.js

@@ -2,7 +2,7 @@
     'use strict';
     var module = ng.module('lrInfiniteScroll', []);
 
-    module.directive('lrInfiniteScroll', ['$timeout', function (timeout) {
+    module.directive('lrInfiniteScroll', ['$log', '$timeout', function ($log, timeout) {
         return{
             link: function (scope, element, attr) {
                 var
@@ -21,10 +21,8 @@
                 }
 
                 element.bind('scroll', function () {
-                    var remaining =
+                    var remaining = (direction === 'down') ? element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop) : element[0].scrollTop;
-                        (direction === 'down') ? element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop) : element[0].scrollTop;
+                    // if we have reached the threshold and we scroll down
-
-                    //if we have reached the threshold and we scroll down
                     if ((direction === 'down' && remaining < lengthThreshold && (remaining - lastRemaining) < 0) ||
                          direction === 'up' && remaining < lengthThreshold) {
                         //if there is already a timer running which has not expired yet we have to cancel it and restart the timer

awx/ui/static/partials/job_stdout.html

@@ -15,12 +15,13 @@
         <div class="row">
             <div class="col-md-12">
                 <div id="job-status"><label>Job Status</label> <i class="fa icon-job-{{ job.status }}"></i> {{ job.status }}</div>
-                <div id="pre-container" class="body_background body_foreground pre mono-space" aw-custom-scroll data-scroll-theme="light-thin"
+                <div class="scroll-spinner" id="stdoutMoreRowsTop"><i class="fa fa-cog fa-spin"></i></div>
-                    data-scroll-inertia="500" data-on-total-scroll="onTotalScroll" data-on-total-scroll-back="onTotalScrollBack" data-on-scroll-start="scrollStarted"
+                <div id="pre-container" class="body_background body_foreground pre mono-space" lr-infinite-scroll="stdOutScrollToTop"
-                    data-while-scrolling="whileScrolling" data-on-total-scroll-back-offset="100" data-scroll-axis="yx">
+                    scroll-threshold="300" data-direction="up" time-threshold="500">
                     <div id="pre-container-content"></div>
                 </div>
             </div>
+            <div class="scroll-spinner" id="stdoutMoreRowsBottom"><i class="fa fa-cog fa-spin"></i></div>
         </div>
     </div>
 </div>