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

Add scroll lock for real-time display

Browse Source
This commit is contained in:
gconsidine
2018-02-20 16:44:51 -05:00
committed by Jake McDermott
parent 83897d43a7
commit d48f69317f
4 changed files with 164 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
awx/ui/client/features/jobs/_index.less
View File

@@ -65,6 +65,15 @@
} }
} }
&-menuIcon--active {
font-size: 22px;
line-height: 12px;
font-weight: bold;
padding: 10px;
cursor: pointer;
color: @at-blue;
}
&-toggle { &-toggle {
color: @at-gray-848992; color: @at-gray-848992;
background-color: @at-gray-eb; background-color: @at-gray-eb;

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

@@ -3,8 +3,8 @@ import hasAnsi from 'has-ansi';
let vm; let vm;
let ansi; let ansi;
let model;
let resource; let resource;
let related;
let container; let container;
let $timeout; let $timeout;
let $sce; let $sce;
@@ -13,11 +13,9 @@ let $scope;
let $q; let $q;
const record = {}; const record = {};
const meta = {
scroll: {}, let parent = null;
page: {} let cache = [];
};
const current = {};
const PAGE_LIMIT = 3; const PAGE_LIMIT = 3;
const SCROLL_BUFFER = 250; const SCROLL_BUFFER = 250;
@@ -27,6 +25,8 @@ const EVENT_START_PLAY = 'playbook_on_play_start';
const EVENT_STATS_PLAY = 'playbook_on_stats'; const EVENT_STATS_PLAY = 'playbook_on_stats';
const ELEMENT_TBODY = '#atStdoutResultTable'; const ELEMENT_TBODY = '#atStdoutResultTable';
const ELEMENT_CONTAINER = '.at-Stdout-container'; const ELEMENT_CONTAINER = '.at-Stdout-container';
const JOB_START = 'playbook_on_start';
const JOB_END = 'playbook_on_stats';
const EVENT_GROUPS = [ const EVENT_GROUPS = [
EVENT_START_TASK, EVENT_START_TASK,
@@ -48,55 +48,48 @@ function JobsIndexController (
_$compile_, _$compile_,
_$q_ _$q_
) { ) {
vm = this || {};
$timeout = _$timeout_; $timeout = _$timeout_;
$sce = _$sce_; $sce = _$sce_;
$compile = _$compile_; $compile = _$compile_;
$scope = _$scope_; $scope = _$scope_;
$q = _$q_; $q = _$q_;
resource = _resource_; resource = _resource_;
model = resource.model;
ansi = new Ansi(); ansi = new Ansi();
related = getRelated();
const events = resource.get(`related.${related}.results`); const events = model.get(`related.${resource.related}.results`);
const parsed = parseEvents(events); const parsed = parseEvents(events);
const html = $sce.trustAsHtml(parsed.html); const html = $sce.trustAsHtml(parsed.html);
vm = this || {}; cache.push({ page: 1, lines: parsed.lines });
$scope.ns = 'jobs'; // Development helper(s)
$scope.jobs = {
modal: {}
};
vm.toggle = toggle;
vm.showHostDetails = showHostDetails;
vm.clear = clear; vm.clear = clear;
$scope.$on(webSocketNamespace, processWebSocketEvents); // Stdout Navigation
vm.scroll = {
vm.menu = { lock: false,
scroll: { display: false,
display: false, active: false,
home: scrollHome, home: scrollHome,
end: scrollEnd, end: scrollEnd,
down: scrollPageDown, down: scrollPageDown,
up: scrollPageUp up: scrollPageUp
},
top: {
expand,
isExpanded: true
},
bottom: {
next
}
}; };
meta.page.cache = [{ // Expand/collapse
page: 1, vm.toggle = toggle;
lines: parsed.lines vm.expand = expand;
}]; vm.isExpanded = true;
// Real-time (active between JOB_START and JOB_END events only)
$scope.$on(webSocketNamespace, processWebSocketEvents);
vm.stream = {
active: false
};
$timeout(() => { $timeout(() => {
const table = $(ELEMENT_TBODY); const table = $(ELEMENT_TBODY);
@@ -117,43 +110,41 @@ function clear () {
} }
function processWebSocketEvents (scope, data) { function processWebSocketEvents (scope, data) {
meta.scroll.inProgress = true; vm.scroll.active = true;
if (data.event === JOB_START) {
vm.stream.active = true;
vm.scroll.lock = true;
} else if (data.event === JOB_END) {
vm.stream.active = false;
vm.scroll.lock = false;
}
console.log(data);
append([data]) append([data])
.then(() => { .then(() => {
container[0].scrollTop = container[0].scrollHeight; if (vm.scroll.lock) {
container[0].scrollTop = container[0].scrollHeight;
}
}); });
} }
function getRelated () {
const name = resource.constructor.name;
switch (name) {
case 'JobModel':
return 'job_events';
default:
return 'events';
}
}
function next () { function next () {
const config = { const config = {
related, related: resource.related,
page: meta.page.cache[meta.page.cache.length - 1].page + 1, page: cache[cache.length - 1].page + 1,
params: { params: {
order_by: 'start_line' order_by: 'start_line'
} }
}; };
console.log('[2] getting next page', config.page, meta.page.cache); console.log('[2] getting next page', config.page, cache);
return resource.goToPage(config) return model.goToPage(config)
.then(data => { .then(data => {
if (!data || !data.results) { if (!data || !data.results) {
return $q.resolve(); return $q.resolve();
} }
meta.page.cache.push({ cache.push({
page: data.page page: data.page
}); });
@@ -166,21 +157,21 @@ function prev () {
const container = $(ELEMENT_CONTAINER)[0]; const container = $(ELEMENT_CONTAINER)[0];
const config = { const config = {
related, related: resource.related,
page: meta.page.cache[0].page - 1, page: cache[0].page - 1,
params: { params: {
order_by: 'start_line' order_by: 'start_line'
} }
}; };
console.log('[2] getting previous page', config.page, meta.page.cache); console.log('[2] getting previous page', config.page, cache);
return resource.goToPage(config) return model.goToPage(config)
.then(data => { .then(data => {
if (!data || !data.results) { if (!data || !data.results) {
return $q.resolve(); return $q.resolve();
} }
meta.page.cache.unshift({ cache.unshift({
page: data.page page: data.page
}); });
@@ -203,9 +194,9 @@ function append (events) {
const parsed = parseEvents(events); const parsed = parseEvents(events);
const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parsed.html))); const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parsed.html)));
const table = $(ELEMENT_TBODY); const table = $(ELEMENT_TBODY);
const index = meta.page.cache.length - 1; const index = cache.length - 1;
meta.page.cache[index].lines = parsed.lines; cache[index].lines = parsed.lines;
table.append(rows); table.append(rows);
$compile(rows.contents())($scope); $compile(rows.contents())($scope);
@@ -223,7 +214,7 @@ function prepend (events) {
const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parsed.html))); const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parsed.html)));
const table = $(ELEMENT_TBODY); const table = $(ELEMENT_TBODY);
meta.page.cache[0].lines = parsed.lines; cache[0].lines = parsed.lines;
table.prepend(rows); table.prepend(rows);
$compile(rows.contents())($scope); $compile(rows.contents())($scope);
@@ -235,12 +226,12 @@ function prepend (events) {
function pop () { function pop () {
console.log('[3] popping old page'); console.log('[3] popping old page');
return $q(resolve => { return $q(resolve => {
if (meta.page.cache.length <= PAGE_LIMIT) { if (cache.length <= PAGE_LIMIT) {
console.log('[3.1] nothing to pop'); console.log('[3.1] nothing to pop');
return resolve(); return resolve();
} }
const ejected = meta.page.cache.pop(); const ejected = cache.pop();
console.log('[3.1] popping', ejected); console.log('[3.1] popping', ejected);
const rows = $(ELEMENT_TBODY).children().slice(-ejected.lines); const rows = $(ELEMENT_TBODY).children().slice(-ejected.lines);
@@ -254,12 +245,12 @@ function pop () {
function shift () { function shift () {
console.log('[3] shifting old page'); console.log('[3] shifting old page');
return $q(resolve => { return $q(resolve => {
if (meta.page.cache.length <= PAGE_LIMIT) { if (cache.length <= PAGE_LIMIT) {
console.log('[3.1] nothing to shift'); console.log('[3.1] nothing to shift');
return resolve(); return resolve();
} }
const ejected = meta.page.cache.shift(); const ejected = cache.shift();
console.log('[3.1] shifting', ejected); console.log('[3.1] shifting', ejected);
const rows = $(ELEMENT_TBODY).children().slice(0, ejected.lines); const rows = $(ELEMENT_TBODY).children().slice(0, ejected.lines);
@@ -283,7 +274,7 @@ function clear () {
} }
function expand () { function expand () {
vm.toggle(meta.parent, true); vm.toggle(parent, true);
} }
function parseEvents (events) { function parseEvents (events) {
@@ -375,7 +366,7 @@ function createRecord (ln, lines, event) {
info.isParent = true; info.isParent = true;
if (event.event_level === 1) { if (event.event_level === 1) {
meta.parent = event.uuid; parent = event.uuid;
} }
if (event.parent_uuid) { if (event.parent_uuid) {
@@ -495,7 +486,7 @@ function toggle (uuid, menu) {
let icon = $(`#${uuid} .at-Stdout-toggle > i`); let icon = $(`#${uuid} .at-Stdout-toggle > i`);
if (menu || record[uuid].level === 1) { if (menu || record[uuid].level === 1) {
vm.menu.top.isExpanded = !vm.menu.top.isExpanded; vm.isExpanded = !vm.isExpanded;
} }
if (record[uuid].children) { if (record[uuid].children) {
@@ -516,11 +507,11 @@ function toggle (uuid, menu) {
} }
function onScroll () { function onScroll () {
if (meta.scroll.inProgress) { if (vm.scroll.active) {
return; return;
} }
meta.scroll.inProgress = true; vm.scroll.active = true;
$timeout(() => { $timeout(() => {
const top = container[0].scrollTop; const top = container[0].scrollTop;
@@ -528,17 +519,17 @@ function onScroll () {
if (top <= SCROLL_BUFFER) { if (top <= SCROLL_BUFFER) {
console.log('[1] scroll to top'); console.log('[1] scroll to top');
vm.menu.scroll.display = false; vm.scroll.display = false;
prev() prev()
.then(() => { .then(() => {
console.log('[5] scroll reset'); console.log('[5] scroll reset');
meta.scroll.inProgress = false; vm.scroll.active = false;
}); });
return; return;
} else { } else {
vm.menu.scroll.display = true; vm.scroll.display = true;
if (bottom >= container[0].scrollHeight) { if (bottom >= container[0].scrollHeight) {
console.log('[1] scroll to bottom'); console.log('[1] scroll to bottom');
@@ -546,10 +537,10 @@ function onScroll () {
next() next()
.then(() => { .then(() => {
console.log('[5] scroll reset'); console.log('[5] scroll reset');
meta.scroll.inProgress = false; vm.scroll.active = false;
}); });
} else { } else {
meta.scroll.inProgress = false; vm.scroll.active = false;
} }
} }
}, SCROLL_LOAD_DELAY); }, SCROLL_LOAD_DELAY);
@@ -557,53 +548,59 @@ function onScroll () {
function scrollHome () { function scrollHome () {
const config = { const config = {
related, related: resource.related,
page: 'first', page: 'first',
params: { params: {
order_by: 'start_line' order_by: 'start_line'
} }
}; };
meta.scroll.inProgress = true; vm.scroll.active = true;
console.log('[2] getting first page', config.page, meta.page.cache); console.log('[2] getting first page', config.page, cache);
return resource.goToPage(config) return model.goToPage(config)
.then(data => { .then(data => {
if (!data || !data.results) { if (!data || !data.results) {
return $q.resolve(); return $q.resolve();
} }
meta.page.cache = [{ cache = [{
page: data.page page: data.page
}] }]
return clear() return clear()
.then(() => prepend(data.results)) .then(() => prepend(data.results))
.then(() => { .then(() => {
meta.scroll.inProgress = false; vm.scroll.active = false;
}); });
}); });
} }
function scrollEnd () { function scrollEnd () {
if (vm.scroll.lock) {
vm.scroll.lock = false;
return;
}
const config = { const config = {
related, related: resource.related,
page: 'last', page: 'last',
params: { params: {
order_by: 'start_line' order_by: 'start_line'
} }
}; };
meta.scroll.inProgress = true; vm.scroll.active = true;
console.log('[2] getting last page', config.page, meta.page.cache); console.log('[2] getting last page', config.page, cache);
return resource.goToPage(config) return model.goToPage(config)
.then(data => { .then(data => {
if (!data || !data.results) { if (!data || !data.results) {
return $q.resolve(); return $q.resolve();
} }
meta.page.cache = [{ cache = [{
page: data.page page: data.page
}] }]
@@ -613,7 +610,7 @@ function scrollEnd () {
const container = $(ELEMENT_CONTAINER)[0]; const container = $(ELEMENT_CONTAINER)[0];
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
meta.scroll.inProgress = false; vm.scroll.active = false;
}); });
}); });
} }

91
awx/ui/client/features/output/index.js
View File

@@ -9,10 +9,12 @@ import IndexController from '~features/output/index.controller';
const indexTemplate = require('~features/output/index.view.html'); const indexTemplate = require('~features/output/index.view.html');
const MODULE_NAME = 'at.features.output'; const MODULE_NAME = 'at.features.output';
const PAGE_CACHE = true;
const PAGE_LIMIT = 3;
const PAGE_SIZE = 100;
function resolveResource (Job, ProjectUpdate, AdHocCommand, SystemJob, WorkflowJob, $stateParams) { function resolveResource (Job, ProjectUpdate, AdHocCommand, SystemJob, WorkflowJob, $stateParams) {
const { id } = $stateParams; const { id, type } = $stateParams;
const { type } = $stateParams;
let Resource; let Resource;
let related = 'events'; let related = 'events';
@@ -40,52 +42,44 @@ function resolveResource (Job, ProjectUpdate, AdHocCommand, SystemJob, WorkflowJ
} }
return new Resource('get', id) return new Resource('get', id)
.then(resource => resource.extend(related, { .then(model => model.extend(related, {
pageCache: true, pageCache: PAGE_CACHE,
pageLimit: 3, pageLimit: PAGE_LIMIT,
params: { params: {
page_size: 100, page_size: PAGE_SIZE,
order_by: 'start_line' order_by: 'start_line'
} }
})); }))
.then(model => {
return {
id,
type,
model,
related,
ws: getWebSocketResource(type),
page: {
cache: PAGE_CACHE,
limit: PAGE_LIMIT,
size: PAGE_SIZE
}
};
});
} }
function resolveWebSocket (SocketService, $stateParams) { function resolveWebSocket (SocketService, $stateParams) {
const { type, id } = $stateParams; const { type, id } = $stateParams;
const prefix = 'ws'; const prefix = 'ws';
const resource = getWebSocketResource(type);
let name; let name;
let events; let events;
switch (type) {
case 'system':
name = 'system_jobs';
events = 'system_job_events';
break;
case 'project':
name = 'project_updates';
events = 'project_update_events';
break;
case 'command':
name = 'ad_hoc_commands';
events = 'ad_hoc_command_events';
break;
case 'inventory':
name = 'inventory_updates';
events = 'inventory_update_events';
break;
case 'playbook':
name = 'jobs';
events = 'job_events';
break;
}
const state = { const state = {
data: { data: {
socket: { socket: {
groups: { groups: {
[name]: ['status_changed', 'summary'], [resource.name]: ['status_changed', 'summary'],
[events]: [] [resource.key]: []
} }
} }
} }
@@ -93,7 +87,7 @@ function resolveWebSocket (SocketService, $stateParams) {
SocketService.addStateResolve(state, id); SocketService.addStateResolve(state, id);
return `${prefix}-${events}-${id}`; return `${prefix}-${resource.key}-${id}`;
} }
function resolveBreadcrumb (strings) { function resolveBreadcrumb (strings) {
@@ -102,6 +96,37 @@ function resolveBreadcrumb (strings) {
}; };
} }
function getWebSocketResource (type) {
let name;
let key;
switch (type) {
case 'system':
name = 'system_jobs';
key = 'system_job_events';
break;
case 'project':
name = 'project_updates';
key = 'project_update_events';
break;
case 'command':
name = 'ad_hoc_commands';
key = 'ad_hoc_command_events';
break;
case 'inventory':
name = 'inventory_updates';
key = 'inventory_update_events';
break;
case 'playbook':
name = 'jobs';
key = 'job_events';
break;
}
return { name, key };
}
function JobsRun ($stateRegistry) { function JobsRun ($stateRegistry) {
const state = { const state = {
name: 'jobz', name: 'jobz',

24
awx/ui/client/features/output/index.view.html
View File

@@ -8,21 +8,22 @@
<div class="col-md-8"> <div class="col-md-8">
<at-panel class="at-Stdout"> <at-panel class="at-Stdout">
<div class="at-Stdout-menuTop"> <div class="at-Stdout-menuTop">
<div class="pull-left" ng-click="vm.menu.top.expand()"> <div class="pull-left" ng-click="vm.expand()">
<i class="at-Stdout-menuIcon fa" <i class="at-Stdout-menuIcon fa"
ng-class="{ 'fa-minus': vm.menu.top.isExpanded, 'fa-plus': !vm.menu.top.isExpanded }"></i> ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i>
</div> </div>
<div class="pull-right" ng-click="vm.menu.scroll.end()"> <div class="pull-right" ng-click="vm.scroll.end()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"></i> <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"
ng-class=" { 'at-Stdout-menuIcon--active': vm.scroll.lock }"></i>
</div> </div>
<div class="pull-right" ng-click="vm.menu.scroll.home()"> <div class="pull-right" ng-click="vm.scroll.home()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i> <i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
</div> </div>
<div class="pull-right" ng-click="vm.menu.scroll.down()"> <div class="pull-right" ng-click="vm.scroll.down()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i> <i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
</div> </div>
<div class="pull-right" ng-click="vm.menu.scroll.up()"> <div class="pull-right" ng-click="vm.scroll.up()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i> <i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
</div> </div>
@@ -31,8 +32,8 @@
<pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="atStdoutResultTable"></tbody></table></pre> <pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="atStdoutResultTable"></tbody></table></pre>
<div ng-show="vm.menu.scroll.display" class="at-Stdout-menuBottom"> <div ng-show="vm.scroll.display" class="at-Stdout-menuBottom">
<div class="at-Stdout-menuIconGroup" ng-click="vm.menu.scroll.home()"> <div class="at-Stdout-menuIconGroup" ng-click="vm.scroll.home()">
<p class="pull-left"><i class="fa fa-angle-double-up"></i></p> <p class="pull-left"><i class="fa fa-angle-double-up"></i></p>
<p class="pull-right">Back to Top</p> <p class="pull-right">Back to Top</p>
</div> </div>
@@ -41,9 +42,4 @@
</div> </div>
</at-panel> </at-panel>
</div> </div>
<at-modal>
<br />
<at-code-stdout state="vm.host"></at-code-stdout>
</at-modal>
</div> </div>