Job stdout refactor

Switching to new stdout endpoint and restyling.

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

@@ -33,52 +33,16 @@ function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearS
         $scope.removeLoadStdout();
     }
     $scope.removeLoadStdout = $scope.$on('LoadStdout', function() {
-        Rest.setUrl(stdout_url + '?format=html');
+        Rest.setUrl(stdout_url + '?format=json&start_line=-1000');
         Rest.get()
             .success(function(data) {
-                var lines, styles=[], html=[], found=false, doc, style, pre, parser;
                 api_complete = true;
                 Wait('stop');
-                if ($rootScope.browser === "SAFARI") {
+                if (data.content) {
-                    // Safari's DOMParser will not parse HTML, so we have to do our best to extract the
+                    $('#pre-container-content').empty().html(data.content);
-                    // parts we want.
-
-                    lines = data.split("\n");
-                    // Get the style sheet
-                    lines.forEach(function(line) {
-                        if (/<style.*/.test(line)) {
-                            found = true;
-                        }
-                        if (found) {
-                            styles.push(line);
-                        }
-                        if (/<\/style>/.test(line)) {
-                            found = false;
-                        }
-                    });
-                    found = false;
-                    // Get all the bits between <pre> and  </pre>
-                    lines.forEach(function(line) {
-                        if (/<pre>/.test(line)) {
-                            found = true;
-                        }
-                        else if (/<\/pre>/.test(line)) {
-                            found = false;
-                        }
-                        else if (found) {
-                            html.push(line);
-                        }
-                    });
-                    $('#style-sheet-container').empty().html(styles.join("\n"));
-                    $('#pre-container-content').empty().html(html.join("\n"));
                 }
                 else {
-                    parser = new DOMParser();
+                    $('#pre-container-content').empty();
-                    doc = parser.parseFromString(data, "text/html");
-                    pre = doc.getElementsByTagName('pre');
-                    style = doc.getElementsByTagName('style');
-                    $('#style-sheet-container').empty().html(style[0]);
-                    $('#pre-container-content').empty().html($(pre[0]).html());
                 }
                 setTimeout(function() { $('#pre-container').mCustomScrollbar("scrollTo", 'bottom'); }, 1000);
             })

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

@@ -0,0 +1,85 @@
+/************************************
+ * Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ *  JobStdout.js
+ *
+ */
+
+'use strict';
+
+function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearScope, GetBasePath, Wait, Rest, ProcessErrors, Socket) {
+
+    ClearScope();
+
+    var available_height, job_id = $routeParams.id,
+        api_complete = false,
+        stdout_url,
+        event_socket = Socket({
+            scope: $scope,
+            endpoint: "job_events"
+        });
+
+    Wait('start');
+
+    event_socket.init();
+
+    event_socket.on("job_events-" + job_id, function() {
+        if (api_complete) {
+            $scope.$emit('LoadStdout');
+        }
+    });
+
+    if ($scope.removeLoadStdout) {
+        $scope.removeLoadStdout();
+    }
+    $scope.removeLoadStdout = $scope.$on('LoadStdout', function() {
+        Rest.setUrl(stdout_url + '?format=json&start_line=-1000');
+        Rest.get()
+            .success(function(data) {
+                if (data.content) {
+                    $('#pre-container-content').empty().html(data.content);
+                }
+                else {
+                    $('#pre-container-content').empty();
+                }
+                setTimeout(function() { $('#pre-container').mCustomScrollbar("scrollTo", 'bottom'); }, 1000);
+            })
+            .error(function(data, status) {
+                ProcessErrors($scope, data, status, null, { hdr: 'Error!',
+                    msg: 'Failed to retrieve stdout for job: ' + job_id + '. GET returned: ' + status });
+            });
+    });
+
+    function resizeToFit() {
+        available_height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() -
+            $('#breadcrumb-container').outerHeight() - $('.site-footer').outerHeight() * 2;
+        if ($(window).width() < 768) {
+            available_height += 55;
+        }
+        else if ($(window).width() > 1240) {
+            available_height += 5;
+        }
+        $('#pre-container').height(available_height);
+        $('#pre-container').mCustomScrollbar("update");
+    }
+    resizeToFit();
+
+    $(window).resize(_.debounce(function() {
+        resizeToFit();
+    }, 500));
+
+    Rest.setUrl(GetBasePath('jobs') + job_id + '/');
+    Rest.get()
+        .success(function(data) {
+            $scope.job = data;
+            stdout_url = data.related.stdout;
+            $scope.$emit('LoadStdout');
+        })
+        .error(function(data, status) {
+            ProcessErrors($scope, data, status, null, { hdr: 'Error!',
+                msg: 'Failed to retrieve job: ' + job_id + '. GET returned: ' + status });
+        });
+}
+
+JobStdoutController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors', 'Socket' ];
+

awx/ui/static/less/ansible-ui.less

@@ -12,14 +12,16 @@
 @blue:         #1778c3;   /* logo blue */
 @blue-link:    #1778c3;
 @blue-dark:    #2a6496;   /* link hover */
-@green:        #5bb75b;
+@green:        #00aa00;   // Ansible OK
 @grey:         #A9A9A9;
 @grey-txt:     #707070;
 @info:         #d9edf7;   /* alert info background color */
 @info-border:  #bce8f1;   /* alert info border color */
 @info-color:   #3a87ad;
-@red:          #da4f49;
+@red:          #aa0000;   // Ansible Unreachable
 @red-hover:    #AE3F3A;
+@changed:      #aa5500;   // Ansible Changed
+@skipped:      #00aaaa;   // Ansible Skipped
 @warning:      #FF9900;
 @well:         #f5f5f5;   /* well background color */
 @well-border:  #e3e3e3;

awx/ui/static/partials/job_stdout.html

@@ -3,20 +3,17 @@
 
         <div class="row">
             <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
-                <div class="nav-path">
+                <ul class="ansible-breadcrumb" id="breadcrumb-list">
-                    <ul class="breadcrumb" id="breadcrumb-list">
+                    <li><a href="/#/jobs">Jobs</a></li>
-                        <li><a href="/#/jobs">Jobs</a></li>
+                    <li><a href="/#/jobs/{{ job.id }}"><strong>{{ job.id }}</strong> - {{ job.name }}</a></li>
-                        <li><a href="/#/jobs/{{ job.id }}"><strong>{{ job.id }}</strong> - {{ job.name }}</a></li>
+                    <li class="active"><a href="">Standard Out</a></li>
-                        <li>Standard Out</li>
+                </ul>
-                    </ul>
-                </div>
             </div>
             </div>
         </div>
 
         <div class="row">
             <div class="col-md-12">
-                <div id="style-sheet-container"></div>
                 <div id="pre-container" class="body_background body_foreground pre mono-space" aw-custom-scroll data-scroll-theme="light-thin">
                     <div id="pre-container-content"></div>
                 </div>