External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-15 02:00:01 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2457 from jakemcdermott/output-line-fixup

Browse Source 
dont render blank output lines for some event types + adjust line wrapping

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
softwarefactory-project-zuul[bot]
2018-11-06 01:54:38 +00:00
committed by GitHub
parent 049d642df8 95190c5509
commit 3fef7acaa8
4 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
awx/ui/client/features/output/_index.less
View File

@@ -72,11 +72,19 @@
&-row { &-row {
display: flex; display: flex;
&:hover {
background-color: white;
}
&:hover div { &:hover div {
background-color: white; background-color: white;
} }
} }
&-row--clickable {
cursor: pointer;
}
&-toggle { &-toggle {
background-color: @at-gray-eb; background-color: @at-gray-eb;
color: @at-gray-848992; color: @at-gray-848992;
@@ -112,12 +120,6 @@
.at-mixin-event(); .at-mixin-event();
} }
&-event--host {
.at-mixin-event();
cursor: pointer;
}
&-time { &-time {
padding-right: 2ch; padding-right: 2ch;
font-size: 12px; font-size: 12px;
@@ -175,7 +177,6 @@
} }
.at-mixin-event() { .at-mixin-event() {
flex: 1;
padding: 0 10px; padding: 0 10px;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;

21
awx/ui/client/features/output/index.controller.js
View File

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

61
awx/ui/client/features/output/render.service.js
View File

@@ -3,7 +3,6 @@ import Entities from 'html-entities';
import { import {
EVENT_START_PLAY, EVENT_START_PLAY,
EVENT_START_PLAYBOOK,
EVENT_STATS_PLAY, EVENT_STATS_PLAY,
EVENT_START_TASK, EVENT_START_TASK,
OUTPUT_ANSI_COLORMAP, OUTPUT_ANSI_COLORMAP,
@@ -34,9 +33,13 @@ const pattern = [
const re = new RegExp(pattern); const re = new RegExp(pattern);
const hasAnsi = input => re.test(input); 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.el = $(OUTPUT_ELEMENT_TBODY);
this.parent = null; this.parent = null;
@@ -209,7 +212,7 @@ function JobRenderService ($q, $sce, $window) {
const lines = stdout.split('\r\n'); const lines = stdout.split('\r\n');
const record = this.createRecord(event, lines); const record = this.createRecord(event, lines);
if (event.event === EVENT_START_PLAYBOOK) { if (lines.length === 1 && lines[0] === '') {
return { html: '', count: 0 }; return { html: '', count: 0 };
} }
@@ -260,17 +263,17 @@ function JobRenderService ($q, $sce, $window) {
return this.records[event.counter]; return this.records[event.counter];
} }
let isHost = false; let isClickable = false;
if (typeof event.host === 'number') { if (typeof event.host === 'number' || event.event_data && event.event_data.res) {
isHost = true; isClickable = true;
} else if (event.type === 'project_update_event' && } else if (event.type === 'project_update_event' &&
event.event !== 'runner_on_skipped' && event.event !== 'runner_on_skipped' &&
event.event_data.host) { event.event_data.host) {
isHost = true; isClickable = true;
} }
const record = { const record = {
isHost, isClickable,
id: event.id, id: event.id,
line: event.start_line + 1, line: event.start_line + 1,
name: event.event, name: event.event,
@@ -344,6 +347,7 @@ function JobRenderService ($q, $sce, $window) {
let tdToggle = ''; let tdToggle = '';
let tdEvent = ''; let tdEvent = '';
let classList = ''; let classList = '';
let directives = '';
if (record.isMissing) { if (record.isMissing) {
return `<div id="${record.uuid}" class="at-Stdout-row"> return `<div id="${record.uuid}" class="at-Stdout-row">
@@ -370,10 +374,6 @@ function JobRenderService ($q, $sce, $window) {
tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleCollapse('${id}')"><i class="fa ${icon} can-toggle"></i></div>`; tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleCollapse('${id}')"><i class="fa ${icon} can-toggle"></i></div>`;
} }
if (record.isHost) {
tdEvent = `<div class="at-Stdout-event--host" ng-click="vm.showHostDetails('${record.id}', '${record.uuid}')"><span ng-non-bindable>${content}</span></div>`;
}
if (record.time && record.line === ln) { if (record.time && record.line === ln) {
timestamp = `<span>${record.time}</span>`; timestamp = `<span>${record.time}</span>`;
} }
@@ -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 ` return `
<div id="${id}" class="at-Stdout-row ${classList}"> <div id="${id}" class="at-Stdout-row ${classList}" ${directives}>
${tdToggle} ${tdToggle}
<div class="at-Stdout-line">${ln}</div> <div class="at-Stdout-line">${ln}</div>
${tdEvent} <div class="at-Stdout-event"><span ng-non-bindable>${content}</span></div>
<div class="at-Stdout-time">${timestamp}</div> <div class="at-Stdout-time">${timestamp}</div>
</div>`; </div>`;
}; };
@@ -435,8 +440,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(); return this.requestAnimationFrame();
}; };
@@ -472,10 +485,7 @@ function JobRenderService ($q, $sce, $window) {
const result = this.prependEventGroup(events); const result = this.prependEventGroup(events);
const html = this.trustHtml(result.html); 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); .then(() => result.lines);
}; };
@@ -487,10 +497,7 @@ function JobRenderService ($q, $sce, $window) {
const result = this.appendEventGroup(events); const result = this.appendEventGroup(events);
const html = this.trustHtml(result.html); 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); .then(() => result.lines);
}; };
@@ -601,6 +608,6 @@ function JobRenderService ($q, $sce, $window) {
this.getCapacity = () => OUTPUT_EVENT_LIMIT - (this.getTailCounter() - this.getHeadCounter()); this.getCapacity = () => OUTPUT_EVENT_LIMIT - (this.getTailCounter() - this.getHeadCounter());
} }
JobRenderService.$inject = ['$q', '$sce', '$window']; JobRenderService.$inject = ['$q', '$compile', '$sce', '$window'];
export default JobRenderService; export default JobRenderService;

3
awx/ui/client/features/output/slide.service.js
View File

@@ -114,6 +114,9 @@ function SlidingWindowService ($q) {
} }
} }
this.buffer.events.length = 0;
delete this.buffer.events;
this.buffer.events = frames; this.buffer.events = frames;
this.buffer.min = min; this.buffer.min = min;
this.buffer.max = max; this.buffer.max = max;