Merge branch 'generate-spans-for-sections' of https://gitlab.com/gitlab-org/gitlab-ce into generate-spans-for-sections
This commit is contained in:
commit
e2daebdc47
6 changed files with 65 additions and 9 deletions
|
@ -49,12 +49,12 @@ export default {
|
|||
},
|
||||
removeEventListener() {
|
||||
this.$el
|
||||
.querySelector('.js-section-start')
|
||||
.removeEventListener('click', this.handleSectionClick);
|
||||
.querySelectorAll('.js-section-start')
|
||||
.forEach(el => el.removeEventListener('click', this.handleSectionClick));
|
||||
},
|
||||
/**
|
||||
* The collapsible rows are sent in HTML from the backend
|
||||
* We need to add a onclick handler for the divs that match `.js-section-start`
|
||||
* We need tos add a onclick handler for the divs that match `.js-section-start`
|
||||
*
|
||||
*/
|
||||
handleCollapsibleRows() {
|
||||
|
@ -68,13 +68,12 @@ export default {
|
|||
*/
|
||||
handleSectionClick(evt) {
|
||||
const clickedArrow = evt.currentTarget;
|
||||
|
||||
// toggle the arrow class
|
||||
clickedArrow.classList.toggle('fa-caret-right');
|
||||
clickedArrow.classList.toggle('fa-caret-down');
|
||||
|
||||
const dataSection = clickedArrow.getAttribute('data-section');
|
||||
const sibilings = this.$el.querySelectorAll(`.js-s_${dataSection}:not(.js-section-header)`);
|
||||
const { section } = clickedArrow.dataset;
|
||||
const sibilings = this.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`);
|
||||
|
||||
sibilings.forEach(row => row.classList.toggle('hidden'));
|
||||
},
|
||||
|
|
5
changelogs/unreleased/generate-spans-for-sections.yml
Normal file
5
changelogs/unreleased/generate-spans-for-sections.yml
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Adds collapsible sections for job log
|
||||
merge_request: 28642
|
||||
author:
|
||||
type: added
|
|
@ -312,7 +312,7 @@ module Gitlab
|
|||
if @sections.any?
|
||||
css_classes << "section"
|
||||
css_classes << "js-section-header" if @lineno_in_section == 0
|
||||
css_classes += sections.map { |section| "js-s_#{section}" }
|
||||
css_classes += sections.map { |section| "js-s-#{section}" }
|
||||
end
|
||||
|
||||
@out << %{<span class="#{css_classes.join(' ')}">}
|
||||
|
|
|
@ -42,12 +42,12 @@ describe 'User browses a job', :js do
|
|||
text_to_hide = "Cloning into '/nolith/ci-tests'"
|
||||
|
||||
expect(page).to have_content(text_to_hide)
|
||||
expect(page).to have_css('.js-s_get-sources')
|
||||
expect(page).to have_css('.js-s-get-sources')
|
||||
|
||||
find('.js-section-start[data-section="get-sources"]').click
|
||||
|
||||
expect(page).not_to have_content(text_to_hide)
|
||||
expect(page).to have_no_css('.js-s_get-sources')
|
||||
expect(page).to have_no_css('.js-s-get-sources')
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@ import component from '~/jobs/components/job_log.vue';
|
|||
import createStore from '~/jobs/store';
|
||||
import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
|
||||
import { resetStore } from '../store/helpers';
|
||||
import { logWithCollapsibleSections } from '../mock_data';
|
||||
|
||||
describe('Job Log', () => {
|
||||
const Component = Vue.extend(component);
|
||||
|
@ -62,4 +63,40 @@ describe('Job Log', () => {
|
|||
expect(vm.$el.querySelector('.js-log-animation')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Collapsible sections', () => {
|
||||
beforeEach(() => {
|
||||
vm = mountComponentWithStore(Component, {
|
||||
props: {
|
||||
trace: logWithCollapsibleSections.html,
|
||||
isComplete: true,
|
||||
},
|
||||
store,
|
||||
});
|
||||
});
|
||||
|
||||
it('renders open arrow', () => {
|
||||
expect(vm.$el.querySelector('.fa-caret-down')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('toggles hidden class to the sibilings rows when arrow is clicked', done => {
|
||||
vm.$nextTick()
|
||||
.then(() => {
|
||||
const { section } = vm.$el.querySelector('.js-section-start').dataset;
|
||||
vm.$el.querySelector('.js-section-start').click();
|
||||
|
||||
vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
|
||||
expect(el.classList.contains('hidden')).toEqual(true);
|
||||
});
|
||||
|
||||
vm.$el.querySelector('.js-section-start').click();
|
||||
|
||||
vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
|
||||
expect(el.classList.contains('hidden')).toEqual(false);
|
||||
});
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1190,3 +1190,18 @@ export const jobsInStage = {
|
|||
path: '/gitlab-org/gitlab-shell/pipelines/27#build',
|
||||
dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build',
|
||||
};
|
||||
|
||||
export const logWithCollapsibleSections = {
|
||||
append: false,
|
||||
complete: true,
|
||||
html:
|
||||
'<div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer" data-timestamp="1559571405" data-section="after-script" role="button"></div><span class="term-fg-l-green term-bold section js-section-header js-s-after-script">Running after script...</span><span class="section js-section-header js-s-after-script"><br /></span><span class="section s_after-script line"></span><span class="section js-s-after-script"></span><span class="term-fg-l-green term-bold section js-s-after-script">$ date</span><span class="section js-s-after-script"><br /></span><span class="section s_after-script line"></span><span class="section js-s-after-script">Mon Jun 3 14:16:46 UTC 2019<br /></span><span class="section s_after-script line"></span><span class="section js-s-after-script"></span><div class="section-end" data-section="after-script"></div><div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer"data-timestamp="1559571408" data-section="archive-cache" role="button" ></div><span class="term-fg-l-green term-bold section js-section-header js-s-archive-cache">Not uploading cache debian-stretch-ruby-2.6.3-node-10.x-3 due to policy</span><span class="section js-section-header js-s-archive-cache"><br /></span><span class="section s_archive-cache line"></span><span class="section js-s-archive-cache"></span><div class="section-end" data-section="archive-cache"></div><div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer" data-timestamp="1559571409" data-section="upload-artifacts-on-success" role="button"></div><span class="term-fg-l-green term-bold section js-section-header js-s-upload-artifacts-on-success">Uploading artifacts...</span><span class="section js-section-header js-s-upload-artifacts-on-success"><br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">coverage/: found 5 matching files </span><span class="section js-s-upload-artifacts-on-success"> <br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">knapsack/: found 4 matching files </span><span class="section js-s-upload-artifacts-on-success"> <br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">rspec_flaky/: found 4 matching files </span><span class="section js-s-upload-artifacts-on-success"> <br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">rspec_profiling/: found 1 matching files </span><span class="section js-s-upload-artifacts-on-success"> <br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success"></span><span class="term-fg-yellow section js-s-upload-artifacts-on-success">WARNING: tmp/capybara/: no matching files </span><span class="section js-s-upload-artifacts-on-success"> <br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">Uploading artifacts to coordinator... ok </span><span class="section js-s-upload-artifacts-on-success"> id</span><span class="section js-s-upload-artifacts-on-success">=224162288 responseStatus</span><span class="section js-s-upload-artifacts-on-success">=201 Created token</span><span class="section js-s-upload-artifacts-on-success">=bBmyXJNW<br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success"></span><span class="term-fg-l-green term-bold section js-s-upload-artifacts-on-success">Uploading artifacts...</span><span class="section js-s-upload-artifacts-on-success"><br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">junit_rspec.xml: found 1 matching files </span><span class="section js-s-upload-artifacts-on-success"> <br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success">Uploading artifacts to coordinator... ok </span><span class="section js-s-upload-artifacts-on-success"> id</span><span class="section js-s-upload-artifacts-on-success">=224162288 responseStatus</span><span class="section js-s-upload-artifacts-on-success">=201 Created token</span><span class="section js-s-upload-artifacts-on-success">=bBmyXJNW<br /></span><span class="section s_upload-artifacts-on-success line"></span><span class="section js-s-upload-artifacts-on-success"></span><div class="section-end" data-section="upload-artifacts-on-success"></div><span class="term-fg-l-green term-bold">Job succeeded<br /><span class="term-fg-l-green term-bold"></span></span>',
|
||||
id: 1385,
|
||||
offset: 0,
|
||||
size: 78815,
|
||||
state:
|
||||
'eyJvZmZzZXQiOjc4ODE1LCJuX29wZW5fdGFncyI6MCwiZmdfY29sb3IiOm51bGwsImJnX2NvbG9yIjpudWxsLCJzdHlsZV9tYXNrIjowLCJzZWN0aW9ucyI6W10sImxpbmVub19pbl9zZWN0aW9uIjoxMX0=',
|
||||
status: 'success',
|
||||
total: 78815,
|
||||
truncated: false,
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue