diff --git a/awx/ui/client/features/jobs/_index.less b/awx/ui/client/features/jobs/_index.less index 750491edff..abd2352fb1 100644 --- a/awx/ui/client/features/jobs/_index.less +++ b/awx/ui/client/features/jobs/_index.less @@ -41,6 +41,14 @@ cursor: pointer; } + &-menuIcon--lg { + font-size: 22px; + line-height: 12px; + font-weight: bold; + padding: 10px; + cursor: pointer; + } + &-toggle { color: @at-gray-848992; background-color: @at-gray-eb; diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index d2bdedeb6d..dd0c28f845 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/awx/ui/client/features/output/index.controller.js @@ -73,7 +73,10 @@ function JobsIndexController ( vm.menu = { scroll: { display: false, - to: scrollTo + home: scrollHome, + end: scrollEnd, + down: scrollPageDown, + up: scrollPageUp }, top: { expand, @@ -137,6 +140,8 @@ function next () { } function prev () { + const container = $(ELEMENT_CONTAINER)[0]; + const config = { related, page: meta.page.cache[0].page - 1, @@ -157,7 +162,10 @@ function prev () { }); return pop() - .then(() => prepend(data.results)); + .then(() => prepend(data.results)) + .then(lines => { + container.scrollTop = (getRowHeight() * lines) + }); }); } @@ -236,9 +244,7 @@ function prepend (events) { table.prepend(rows); $compile(rows.contents())($scope); - $timeout(() => { - resolve(); - }); + $timeout(() => resolve(parsed.lines)); }); } @@ -257,9 +263,7 @@ function pop () { rows.empty(); rows.remove(); - $timeout(() => { - return resolve(); - }); + $timeout(() => resolve(ejected)); }); } @@ -278,9 +282,19 @@ function shift () { rows.empty(); rows.remove(); - $timeout(() => { - return resolve(); - }); + $timeout(() => resolve()); + }); +} + +function clear () { + console.log('[3] clearing pages'); + return $q(resolve => { + const rows = $(ELEMENT_TBODY).children(); + + rows.empty(); + rows.remove(); + + $timeout(() => resolve()); }); } @@ -288,14 +302,6 @@ function expand () { vm.toggle(meta.parent, true); } -function scrollTo (direction) { - if (direction === 'top') { - container[0].scrollTop = 0; - } else { - container[0].scrollTop = container[0].scrollHeight; - } -} - function parseEvents (events) { let lines = 0; let html = ''; @@ -486,22 +492,6 @@ function getTime (created) { return `${hour}:${minute}:${second}`; } -function pageUp () { - -} - -function pageDown () { - -} - -function jumpToStart () { - -} - -function jumpToEnd () { - -} - function showHostDetails (id) { jobEvent.request('get', id) .then(() => { @@ -581,6 +571,91 @@ function onScroll () { }, SCROLL_LOAD_DELAY); } +function scrollHome () { + const config = { + related, + page: 'first', + params: { + order_by: 'start_line' + } + }; + + meta.scroll.inProgress = true; + + console.log('[2] getting first page', config.page, meta.page.cache); + return resource.goToPage(config) + .then(data => { + if (!data || !data.results) { + return $q.resolve(); + } + + meta.page.cache = [{ + page: data.page + }] + + return clear() + .then(() => prepend(data.results)) + .then(() => { + meta.scroll.inProgress = false; + }); + }); +} + +function scrollEnd () { + const config = { + related, + page: 'last', + params: { + order_by: 'start_line' + } + }; + + meta.scroll.inProgress = true; + + console.log('[2] getting last page', config.page, meta.page.cache); + return resource.goToPage(config) + .then(data => { + if (!data || !data.results) { + return $q.resolve(); + } + + meta.page.cache = [{ + page: data.page + }] + + return clear() + .then(() => append(data.results)) + .then(() => { + const container = $(ELEMENT_CONTAINER)[0]; + + container.scrollTop = getScrollHeight(); + meta.scroll.inProgress = false; + }); + }); +} + +function scrollPageUp () { + const container = $(ELEMENT_CONTAINER)[0]; + const jump = container.scrollTop - container.offsetHeight; + + if (jump < 0) { + container.scrollTop = 0; + } else { + container.scrollTop = jump; + } +} + +function scrollPageDown () { + const container = $(ELEMENT_CONTAINER)[0]; + const jump = container.scrollTop + container.offsetHeight; + + if (jump > container.scrollHeight) { + container.scrollTop = container.scrollHeight; + } else { + container.scrollTop = jump; + } +} + JobsIndexController.$inject = [ 'resource', '$sce', diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html index 2ebf9f3285..dd938739b0 100644 --- a/awx/ui/client/features/output/index.view.html +++ b/awx/ui/client/features/output/index.view.html @@ -13,8 +13,17 @@ ng-class="{ 'fa-minus': vm.menu.top.isExpanded, 'fa-plus': !vm.menu.top.isExpanded }"> -
- +
+ +
+
+ +
+
+ +
+
+
@@ -23,8 +32,8 @@
 
-
-

+
+

Back to Top