Skip to content

G
gitlab-ce
Commit 961625f9 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Removes collapsible sections frontend code 

Removes the code that was adding collapsible
sections to the job log due to performance issues

Remove CSS
parent 88972e49
Show whitespace changes
Inline Side-by-side
Showing with 5 additions and 189 deletions
app/assets/javascripts/jobs/components/job_log.vue
View file @ 961625f9
......@@ -19,18 +19,13 @@ export default {
updated() {
this.$nextTick(() => {
this.handleScrollDown();
this.handleCollapsibleRows();
});
},
mounted() {
this.$nextTick(() => {
this.handleScrollDown();
this.handleCollapsibleRows();
});
},
destroyed() {
this.removeEventListener();
},
methods: {
...mapActions(['scrollBottom']),
/**
......@@ -47,53 +42,6 @@ export default {
}, 0);
}
},
removeEventListener() {
this.$el.querySelectorAll('.js-section-start').forEach(el => {
const titleSection = el.nextSibling;
titleSection.removeEventListener(
'click',
this.handleHeaderClick.bind(this, el, el.dataset.section),
);
el.removeEventListener('click', this.handleSectionClick);
});
},
/**
* The collapsible rows are sent in HTML from the backend
* We need tos add a onclick handler for the divs that match `.js-section-start`
*
*/
handleCollapsibleRows() {
this.$el.querySelectorAll('.js-section-start').forEach(el => {
const titleSection = el.nextSibling;
titleSection.addEventListener(
'click',
this.handleHeaderClick.bind(this, el, el.dataset.section),
);
el.addEventListener('click', this.handleSectionClick);
});
},
handleHeaderClick(arrowElement, section) {
this.updateToggleSection(arrowElement, section);
},
updateToggleSection(arrow, section) {
// toggle the arrow class
arrow.classList.toggle('fa-caret-right');
arrow.classList.toggle('fa-caret-down');
// hide the sections
const sibilings = this.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`);
sibilings.forEach(row => row.classList.toggle('hidden'));
},
/**
* On click, we toggle the hidden class of
* all the rows that match the `data-section` selector
*/
handleSectionClick(evt) {
const clickedArrow = evt.currentTarget;
this.updateToggleSection(clickedArrow, clickedArrow.dataset.section);
},
},
};
</script>
......
app/assets/stylesheets/pages/builds.scss
View file @ 961625f9
......@@ -124,26 +124,6 @@
float: left;
padding-left: $gl-padding-8;
}
.section-start {
display: inline;
}
.section-start,
.section-header {
&:hover {
cursor: pointer;
&::after {
content: '';
background-color: rgba($white-light, 0.2);
left: 0;
right: 0;
position: absolute;
height: $job-log-highlight-height;
}
}
}
}
.build-header {
......
changelogs/unreleased/32146-remove-fe-code.yml 0 → 100644
View file @ 961625f9
---
title: Removes Collapsible Sections from Job Log
merge_request:
author:
type: fixed
spec/features/projects/jobs/user_browses_job_spec.rb
View file @ 961625f9
......@@ -38,66 +38,6 @@ describe 'User browses a job', :js do
expect(page).to have_content('Job has been erased')
end
shared_examples 'has collapsible sections' do
it 'collapses the section clicked' do
wait_for_requests
text_to_hide = "Cloning into '/nolith/ci-tests'"
text_to_show = 'Waiting for pod'
expect(page).to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
first('.js-section-start[data-section="get-sources"]').click
expect(page).not_to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
end
it 'collapses the section header clicked' do
wait_for_requests
text_to_hide = "Cloning into '/nolith/ci-tests'"
text_to_show = 'Waiting for pod'
expect(page).to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
first('.js-section-header.js-s-get-sources').click
expect(page).not_to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
end
end
context 'when job trace contains sections' do
let!(:build) { create(:ci_build, :success, :trace_with_sections, :coverage, pipeline: pipeline) }
it_behaves_like 'has collapsible sections'
end
context 'when job trace contains duplicate sections' do
let!(:build) { create(:ci_build, :success, :trace_with_duplicate_sections, :coverage, pipeline: pipeline) }
it_behaves_like 'has collapsible sections'
end
context 'when job trace contains sections' do
let!(:build) { create(:ci_build, :success, :trace_with_duplicate_sections, :coverage, pipeline: pipeline) }
it 'collapses a section' do
wait_for_requests
text_to_hide = "Cloning into '/nolith/ci-tests'"
text_to_show = 'Waiting for pod'
expect(page).to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
first('.js-section-start[data-section="get-sources"]').click
expect(page).not_to have_content(text_to_hide)
expect(page).to have_content(text_to_show)
end
end
context 'with a failed job' do
let!(:build) { create(:ci_build, :failed, :trace_artifact, pipeline: pipeline) }
......
spec/javascripts/jobs/components/job_log_spec.js
View file @ 961625f9
......@@ -3,7 +3,6 @@ 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);
......@@ -63,60 +62,4 @@ 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);
});
it('toggles hidden class to the sibilings rows when header section is clicked', done => {
vm.$nextTick()
.then(() => {
const { section } = vm.$el.querySelector('.js-section-header').dataset;
vm.$el.querySelector('.js-section-header').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-header').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);
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7