From 56b6d7e85d6d33a256f7277870b5ba2b7d6aebfd Mon Sep 17 00:00:00 2001 From: gconsidine Date: Thu, 7 Dec 2017 15:31:57 -0500 Subject: [PATCH] Add scrollTo for top and bottom, add better expand/collapse --- awx/ui/client/features/jobs/_index.less | 15 +++- .../features/output/index.controller.js | 84 ++++++++++++++++--- awx/ui/client/features/output/index.view.html | 20 ++++- 3 files changed, 99 insertions(+), 20 deletions(-) diff --git a/awx/ui/client/features/jobs/_index.less b/awx/ui/client/features/jobs/_index.less index 0763f0c42d..32ef05dbf7 100644 --- a/awx/ui/client/features/jobs/_index.less +++ b/awx/ui/client/features/jobs/_index.less @@ -1,7 +1,7 @@ .at-Stdout { font-family: monospace; - &-menu { + &-menuTop { color: @at-gray-dark-4x; border: 1px solid @at-gray-dark-2x; border-top-left-radius: 4px; @@ -9,9 +9,18 @@ border-bottom: none; } + &-menuBottom { + color: @at-gray-dark-4x; + border: 1px solid @at-gray-dark-2x; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-top: none; + } + &-menuIcon { font-size: 12px; padding: 10px; + cursor: pointer; } &-toggle { @@ -51,7 +60,6 @@ text-align: right; user-select: none; width: 11ch; - border-left: 1px dashed @at-gray-dark; } &-container { @@ -61,8 +69,7 @@ background-color: @at-gray-light-3x; padding: 0; margin: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + border-radius: 0; & > table { table-layout: fixed; diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index 0c28ce968f..e6976a2ab1 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/awx/ui/client/features/output/index.controller.js @@ -1,6 +1,7 @@ import Ansi from 'ansi-to-html'; import hasAnsi from 'has-ansi'; +let vm; let ansi; let $timeout; let $sce; @@ -8,6 +9,7 @@ let $compile; let $scope; const record = {}; +const meta = {}; const EVENT_START_TASK = 'playbook_on_task_start'; const EVENT_START_PLAY = 'playbook_on_play_start'; @@ -31,11 +33,20 @@ function JobsIndexController (job, _$sce_, _$timeout_, _$scope_, _$compile_) { $scope = _$scope_; ansi = new Ansi(); - const vm = this || {}; + vm = this || {}; const events = job.get('related.job_events.results'); const html = $sce.trustAsHtml(parseEvents(events)); vm.toggle = toggle; + vm.menu = { + expand: menuExpand, + scrollToBottom: menuScrollToBottom, + scrollToTop: menuScrollToTop + }; + + vm.state = { + expand: true + }; $timeout(() => { const table = $('#result-table'); @@ -43,8 +54,23 @@ function JobsIndexController (job, _$sce_, _$timeout_, _$scope_, _$compile_) { table.html($sce.getTrustedHtml(html)); $compile(table.contents())($scope); }); +} - console.log(record); +function menuExpand () { + vm.state.expand = !vm.state.expand; + vm.toggle(meta.parent); +} + +function menuScrollToBottom () { + const container = $('.at-Stdout-container')[0]; + + container.scrollTo(0, container.scrollHeight); +} + +function menuScrollToTop () { + const container = $('.at-Stdout-container')[0]; + + container.scrollTo(0, 0); } function parseEvents (events) { @@ -106,7 +132,7 @@ function createRecord (ln, lines, event) { }; if (event.parent_uuid) { - info.childOf = event.parent_uuid; + info.parents = getParentEvents(event.parent_uuid); } if (info.isTruncated) { @@ -115,6 +141,19 @@ function createRecord (ln, lines, event) { if (EVENT_GROUPS.includes(event.event)) { info.isParent = true; + + if (event.event_level === 1) { + meta.parent = event.uuid; + } + + if (event.parent_uuid) { + if (record[event.parent_uuid].children && + !record[event.parent_uuid].children.includes(event.uuid)) { + record[event.parent_uuid].children.push(event.uuid); + } else { + record[event.parent_uuid].children = [event.uuid]; + } + } } if (TIME_EVENTS.includes(event.event)) { @@ -127,6 +166,20 @@ function createRecord (ln, lines, event) { return info; } +function getParentEvents (uuid, list) { + list = list || []; + + if (record[uuid]) { + list.push(uuid); + } + + if (record[uuid].parents) { + list = list.concat(record[uuid].parents); + } + + return list; +} + function createRow (current, ln, content) { let expand = ''; let timestamp = ''; @@ -151,8 +204,8 @@ function createRow (current, ln, content) { timestamp = current.time; } - if (!classList) { - classList += `child-of-${current.childOf}`; + if (current.parents) { + classList = current.parents.reduce((list, uuid) => `${list} child-of-${uuid}`, ''); } } @@ -180,18 +233,23 @@ function getTime (created) { } function toggle (uuid) { - const i = $(`#${uuid} .at-Stdout-toggle > i`); + const lines = $(`.child-of-${uuid}`); + let icon = $(`#${uuid} .at-Stdout-toggle > i`); - if (i.hasClass('fa-chevron-down')) { - i.addClass('fa-chevron-right'); - i.removeClass('fa-chevron-down'); + if (record[uuid].children) { + icon = icon.add($(`#${record[uuid].children.join(', #')}`).find('.at-Stdout-toggle > i')); + } - $(`.child-of-${uuid}`).addClass('hidden'); + if (icon.hasClass('fa-chevron-down')) { + icon.addClass('fa-chevron-right'); + icon.removeClass('fa-chevron-down'); + + lines.addClass('hidden'); } else { - i.addClass('fa-chevron-down'); - i.removeClass('fa-chevron-right'); + icon.addClass('fa-chevron-down'); + icon.removeClass('fa-chevron-right'); - $(`.child-of-${uuid}`).removeClass('hidden'); + lines.removeClass('hidden'); } } diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html index 34fd7dc368..2da5753b03 100644 --- a/awx/ui/client/features/output/index.view.html +++ b/awx/ui/client/features/output/index.view.html @@ -6,13 +6,27 @@
-
-
-
+
+
+ +
+
+ +
+ 
 
+ +
+
+ +
+ +
+