diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less index 4684bb8b16..b6110eb773 100644 --- a/awx/ui/client/features/output/_index.less +++ b/awx/ui/client/features/output/_index.less @@ -72,11 +72,19 @@ &-row { display: flex; + &:hover { + background-color: white; + } + &:hover div { background-color: white; } } + &-row--clickable { + cursor: pointer; + } + &-toggle { background-color: @at-gray-eb; color: @at-gray-848992; @@ -112,12 +120,6 @@ .at-mixin-event(); } - &-event--host { - .at-mixin-event(); - - cursor: pointer; - } - &-time { padding-right: 2ch; font-size: 12px; @@ -175,7 +177,6 @@ } .at-mixin-event() { - flex: 1; padding: 0 10px; white-space: pre-wrap; word-break: break-all; diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index 40f66dbf1b..51a4ba39ca 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/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', diff --git a/awx/ui/client/features/output/render.service.js b/awx/ui/client/features/output/render.service.js index 6111cbbe8d..8598d6ba3e 100644 --- a/awx/ui/client/features/output/render.service.js +++ b/awx/ui/client/features/output/render.service.js @@ -3,7 +3,6 @@ import Entities from 'html-entities'; import { EVENT_START_PLAY, - EVENT_START_PLAYBOOK, EVENT_STATS_PLAY, EVENT_START_TASK, OUTPUT_ANSI_COLORMAP, @@ -34,9 +33,13 @@ const pattern = [ const re = new RegExp(pattern); const hasAnsi = input => re.test(input); -function JobRenderService ($q, $sce, $window) { - this.init = ({ compile, toggles }) => { - this.hooks = { compile }; +let $scope; + +function JobRenderService ($q, $compile, $sce, $window) { + this.init = (_$scope_, { toggles }) => { + $scope = _$scope_; + this.setScope(); + this.el = $(OUTPUT_ELEMENT_TBODY); this.parent = null; @@ -209,7 +212,7 @@ function JobRenderService ($q, $sce, $window) { const lines = stdout.split('\r\n'); const record = this.createRecord(event, lines); - if (event.event === EVENT_START_PLAYBOOK) { + if (lines.length === 1 && lines[0] === '') { return { html: '', count: 0 }; } @@ -260,17 +263,17 @@ function JobRenderService ($q, $sce, $window) { return this.records[event.counter]; } - let isHost = false; - if (typeof event.host === 'number') { - isHost = true; + let isClickable = false; + if (typeof event.host === 'number' || event.event_data && event.event_data.res) { + isClickable = true; } else if (event.type === 'project_update_event' && event.event !== 'runner_on_skipped' && event.event_data.host) { - isHost = true; + isClickable = true; } const record = { - isHost, + isClickable, id: event.id, line: event.start_line + 1, name: event.event, @@ -344,6 +347,7 @@ function JobRenderService ($q, $sce, $window) { let tdToggle = ''; let tdEvent = ''; let classList = ''; + let directives = ''; if (record.isMissing) { return `
@@ -370,10 +374,6 @@ function JobRenderService ($q, $sce, $window) { tdToggle = `
`; } - if (record.isHost) { - tdEvent = `
${content}
`; - } - if (record.time && record.line === ln) { timestamp = `${record.time}`; } @@ -401,11 +401,16 @@ function JobRenderService ($q, $sce, $window) { } } + if (record && record.isClickable) { + classList += ' at-Stdout-row--clickable'; + directives = `ng-click="vm.showHostDetails('${record.id}', '${record.uuid}')"`; + } + return ` -
+
${tdToggle}
${ln}
- ${tdEvent} +
${content}
${timestamp}
`; }; @@ -435,8 +440,16 @@ function JobRenderService ($q, $sce, $window) { }); }); - this.compile = content => { - this.hooks.compile(content); + this.setScope = () => { + 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(); }; @@ -472,10 +485,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(newElements)) - .then(() => this.compile(newElements)) + return this.requestAnimationFrame(() => this.el.prepend(html)) .then(() => result.lines); }; @@ -487,10 +497,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(newElements)) - .then(() => this.compile(newElements)) + return this.requestAnimationFrame(() => this.el.append(html)) .then(() => result.lines); }; @@ -601,6 +608,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; diff --git a/awx/ui/client/features/output/slide.service.js b/awx/ui/client/features/output/slide.service.js index e4f410b1b3..da1d9a4047 100644 --- a/awx/ui/client/features/output/slide.service.js +++ b/awx/ui/client/features/output/slide.service.js @@ -114,6 +114,9 @@ function SlidingWindowService ($q) { } } + this.buffer.events.length = 0; + delete this.buffer.events; + this.buffer.events = frames; this.buffer.min = min; this.buffer.max = max;