don't compile html in real time

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

@@ -6,7 +6,6 @@ import {
     OUTPUT_PAGE_SIZE,
 } from './constants';
 
-let $compile;
 let $q;
 let $scope;
 let $state;
@@ -97,6 +96,7 @@ function firstRange () {
                 .then(() => render.pushFront(results));
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
             lockFollow = false;
         });
@@ -124,6 +124,7 @@ function nextRange () {
                 .then(() => render.pushFront(results));
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
             lockFrames = false;
 
@@ -162,6 +163,7 @@ function previousRange () {
             return $q.resolve();
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
             lockFrames = false;
 
@@ -189,6 +191,7 @@ function lastRange () {
             return $q.resolve();
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
 
             return $q.resolve();
@@ -280,6 +283,7 @@ function firstPage () {
                 .then(() => render.pushFront(results));
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
 
             return $q.resolve();
@@ -309,6 +313,7 @@ function lastPage () {
             return $q.resolve();
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
 
             return $q.resolve();
@@ -330,6 +335,7 @@ function nextPage () {
                 .then(() => render.pushFront(results));
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
         });
 }
@@ -363,6 +369,7 @@ function previousPage () {
             return $q.resolve();
         })
         .finally(() => {
+            render.compile();
             scroll.resume();
 
             return $q.resolve();
@@ -546,10 +553,6 @@ function toggleTaskCollapse (uuid) {
     render.records[uuid].isCollapsed = !isCollapsed;
 }
 
-function compile (html) {
-    return $compile(html)($scope);
-}
-
 function showHostDetails (id, uuid) {
     $state.go('output.host-event.json', { eventId: id, taskUuid: uuid });
 }
@@ -599,7 +602,7 @@ function showMissingEvents (uuid) {
                         delete render.records[uuid];
                     }
                 })
-                .then(() => render.compile(elements))
+                .then(() => render.compile())
                 .then(() => lines);
         });
 }
@@ -709,7 +712,6 @@ function clear () {
 }
 
 function OutputIndexController (
-    _$compile_,
     _$q_,
     _$scope_,
     _$state_,
@@ -727,7 +729,6 @@ function OutputIndexController (
     const { isPanelExpanded, _debug } = $stateParams;
     const isProcessingFinished = !_debug && _resource_.model.get('event_processing_finished');
 
-    $compile = _$compile_;
     $q = _$q_;
     $scope = _$scope_;
     $state = _$state_;
@@ -765,7 +766,7 @@ function OutputIndexController (
     vm.debug = _debug;
 
     render.requestAnimationFrame(() => {
-        render.init({ compile, toggles: vm.toggleLineEnabled });
+        render.init($scope, { toggles: vm.toggleLineEnabled });
 
         status.init(resource);
         page.init(resource.events);
@@ -815,6 +816,7 @@ function OutputIndexController (
                 status.sync();
                 scroll.unlock();
                 scroll.unhide();
+                render.compile();
             }
         });
 
@@ -850,7 +852,6 @@ function OutputIndexController (
 }
 
 OutputIndexController.$inject = [
-    '$compile',
     '$q',
     '$scope',
     '$state',

awx/ui/client/features/output/render.service.js

@@ -33,9 +33,13 @@ const pattern = [
 const re = new RegExp(pattern);
 const hasAnsi = input => re.test(input);
 
-function JobRenderService ($q, $sce, $window) {
+let $scope;
-    this.init = ({ compile, toggles }) => {
+
-        this.hooks = { compile };
+function JobRenderService ($q, $compile, $sce, $window) {
+    this.init = (_$scope_, { toggles }) => {
+        $scope = _$scope_;
+        this.setScope();
+
         this.el = $(OUTPUT_ELEMENT_TBODY);
         this.parent = null;
 
@@ -434,8 +438,16 @@ function JobRenderService ($q, $sce, $window) {
         });
     });
 
-    this.compile = content => {
+    this.setScope = () => {
-        this.hooks.compile(content);
+        if (this.scope) this.scope.$destroy();
+        delete this.scope;
+
+        this.scope = $scope.$new();
+    };
+
+    this.compile = () => {
+        this.setScope();
+        $compile(this.el)(this.scope);
 
         return this.requestAnimationFrame();
     };
@@ -471,10 +483,7 @@ function JobRenderService ($q, $sce, $window) {
         const result = this.prependEventGroup(events);
         const html = this.trustHtml(result.html);
 
-        const newElements = angular.element(html);
+        return this.requestAnimationFrame(() => this.el.prepend(html))
-
-        return this.requestAnimationFrame(() => this.el.prepend(newElements))
-            .then(() => this.compile(newElements))
             .then(() => result.lines);
     };
 
@@ -486,10 +495,7 @@ function JobRenderService ($q, $sce, $window) {
         const result = this.appendEventGroup(events);
         const html = this.trustHtml(result.html);
 
-        const newElements = angular.element(html);
+        return this.requestAnimationFrame(() => this.el.append(html))
-
-        return this.requestAnimationFrame(() => this.el.append(newElements))
-            .then(() => this.compile(newElements))
             .then(() => result.lines);
     };
 
@@ -600,6 +606,6 @@ function JobRenderService ($q, $sce, $window) {
     this.getCapacity = () => OUTPUT_EVENT_LIMIT - (this.getTailCounter() - this.getHeadCounter());
 }
 
-JobRenderService.$inject = ['$q', '$sce', '$window'];
+JobRenderService.$inject = ['$q', '$compile', '$sce', '$window'];
 
 export default JobRenderService;