Add basic (no optimization) real-time implementation

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

@@ -5,7 +5,6 @@ let vm;
 let ansi;
 let resource;
 let related;
-let socket;
 let container;
 let $timeout;
 let $sce;
@@ -18,6 +17,7 @@ const meta = {
     scroll: {},
     page: {}
 };
+const current = {};
 
 const PAGE_LIMIT = 3;
 const SCROLL_BUFFER = 250;
@@ -41,7 +41,7 @@ const TIME_EVENTS = [
 
 function JobsIndexController (
     _resource_,
-    _socket_,
+    webSocketNamespace,
     _$sce_,
     _$timeout_,
     _$scope_,
@@ -54,7 +54,6 @@ function JobsIndexController (
     $scope = _$scope_;
     $q = _$q_;
     resource = _resource_;
-    socket = _socket_;
 
     ansi = new Ansi();
     related = getRelated();
@@ -72,6 +71,9 @@ function JobsIndexController (
 
     vm.toggle = toggle;
     vm.showHostDetails = showHostDetails;
+    vm.clear = clear;
+
+    $scope.$on(webSocketNamespace, processWebSocketEvents);
 
     vm.menu = {
         scroll: {
@@ -95,6 +97,7 @@ function JobsIndexController (
         lines: parsed.lines
     }];
 
+
     $timeout(() => {
         const table = $(ELEMENT_TBODY);
         container = $(ELEMENT_CONTAINER);
@@ -106,6 +109,22 @@ function JobsIndexController (
     });
 }
 
+function clear () {
+    const rows = $(ELEMENT_TBODY).children();
+
+    rows.empty();
+    rows.remove();
+}
+
+function processWebSocketEvents (scope, data) {
+    meta.scroll.inProgress = true;
+
+    append([data])
+        .then(() => {
+            container[0].scrollTop = container[0].scrollHeight;
+        });
+}
+
 function getRelated () {
     const name = resource.constructor.name;
 
@@ -614,7 +633,7 @@ function scrollPageDown () {
 
 JobsIndexController.$inject = [
     'resource',
-    'socket',
+    'webSocketNamespace',
     '$sce',
     '$timeout',
     '$scope',

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

@@ -54,17 +54,27 @@ function resolveResource (Job, ProjectUpdate, AdHocCommand, SystemJob, WorkflowJ
         });
 }
 
-function resolveSocket (SocketService, $stateParams) {
+function resolveWebSocket (SocketService, $stateParams) {
+    const prefix = 'ws';
     const { id } = $stateParams;
     const { type } = $stateParams;
 
-    // TODO: accommodate other result types (management, scm_update, etc)
+    let name;
+
+    switch (type) {
+        case 'playbook':
+            name = 'job_events';
+            break;
+        default:
+            name = 'events';
+    }
+
     const state = {
         data: {
             socket: {
                 groups: {
                     jobs: ['status_changed', 'summary'],
-                    job_events: []
+                    [name]: []
                 }
             }
         }
@@ -72,7 +82,7 @@ function resolveSocket (SocketService, $stateParams) {
 
     SocketService.addStateResolve(state, id);
 
-    return SocketService;
+    return `${prefix}-${name}-${id}`;
 }
 
 function resolveBreadcrumb (strings) {
@@ -111,10 +121,10 @@ function JobsRun ($stateRegistry) {
                 'JobsStrings',
                 resolveBreadcrumb
             ],
-            socket: [
+            webSocketNamespace: [
                 'SocketService',
                 '$stateParams',
-                resolveSocket
+                resolveWebSocket
             ]
         },
     };

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

@@ -1,7 +1,7 @@
 <div class="container-fluid">
     <div class="col-md-4">
         <at-panel>
-            <p></p>
+            <p><button class="btn" ng-click="vm.clear()">clear</button></p>
         </at-panel>
     </div>