diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-06-12 13:03:07 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-06-12 13:03:07 +0100 |
commit | 4e249e542cdf9f515c01346a9c9ace10e414644c (patch) | |
tree | ce4e754dd8ba6a13d756cc9b40a1aba569e280f4 | |
parent | 8a435e123b3980a80a41685f5f74443e684ac589 (diff) | |
download | gitlab-ce-4e249e542cdf9f515c01346a9c9ace10e414644c.tar.gz |
Moves JS into the vue component
-rw-r--r-- | app/assets/javascripts/jobs/components/job_log.vue | 53 | ||||
-rw-r--r-- | lib/gitlab/ci/ansi2html.rb | 51 |
2 files changed, 47 insertions, 57 deletions
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue index 92e20e92d66..e845a84e872 100644 --- a/app/assets/javascripts/jobs/components/job_log.vue +++ b/app/assets/javascripts/jobs/components/job_log.vue @@ -17,10 +17,21 @@ export default { ...mapState(['isScrolledToBottomBeforeReceivingTrace']), }, updated() { - this.$nextTick(() => this.handleScrollDown()); + this.$nextTick(() => { + this.handleScrollDown(); + this.handleCollapsibleRows(); + }); }, mounted() { - this.$nextTick(() => this.handleScrollDown()); + this.$nextTick(() => { + this.handleScrollDown(); + this.handleCollapsibleRows(); + }); + }, + destroyed() { + this.$el + .querySelector('.js-section-start') + .removeEventListener('click', this.handleSectionClick); }, methods: { ...mapActions(['scrollBottom']), @@ -38,21 +49,43 @@ export default { }, 0); } }, + /** + * 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` + * + */ + handleCollapsibleRows() { + this.$el + .querySelectorAll('.js-section-start') + .forEach(el => el.addEventListener('click', this.handleSectionClick)); + }, + /** + * + */ + 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( + `.s_${dataSection}:not(.js-section-header)`, + ); + + // Get all sibilings between the clicked element and the next + sibilings.forEach(row => row.classList.toggle('hidden')); + }, }, }; </script> <template> <pre class="js-build-trace build-trace qa-build-trace"> - <code - class="bash" - v-html="trace" - > + <code class="bash" v-html="trace"> </code> - <div - v-if="!isComplete" - class="js-log-animation build-loader-animation" - > + <div v-if="!isComplete" class="js-log-animation build-loader-animation"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> diff --git a/lib/gitlab/ci/ansi2html.rb b/lib/gitlab/ci/ansi2html.rb index b34f8d26f00..70c8c099e55 100644 --- a/lib/gitlab/ci/ansi2html.rb +++ b/lib/gitlab/ci/ansi2html.rb @@ -193,7 +193,7 @@ module Gitlab if @sections.any? css_classes << "section" css_classes += sections.map { |section| "s_#{section}" } - css_classes << "line" + css_classes << "prepend-left-default line" end write_in_tag %{<br/>} @@ -221,51 +221,8 @@ module Gitlab def handle_section_start(section, timestamp, line) return if @sections.include?(section) - js_add_css_class = <<-EOF.strip_heredoc - var div = document.getElementById('id_#{section}'); - var open = div.classList.toggle('open'); - - var spans = document.getElementsByClassName('s_#{section}'); - for (var i = 0; i < spans.length; i++) { - if (open) { - spans[i].classList.add('open'); - } else { - spans[i].classList.remove('open'); - } - } - EOF - - js_add_css_style = <<-EOF.strip_heredoc - var div = document.getElementById('id_#{section}'); - var open = div.classList.toggle('open'); - - if (open) { - div.classList.remove('fa-caret-right'); - div.classList.add('fa-caret-down'); - } else { - div.classList.add('fa-caret-right'); - div.classList.remove('fa-caret-down'); - } - - var style = document.getElementById('style_#{section}'); - if (!style && !open) { - style = document.createElement('style'); - style.type = 'text/css'; - style.id = 'style_#{section}'; - document.getElementsByClassName('bash')[0].appendChild(style); - } - - if (style) { - if (open) { - style.innerHTML = ''; - } else { - style.innerHTML = '.s_#{section}:not(.section-header):not(.open) { display: none; }'; - } - } - EOF - @sections << section - write_raw %{<div class="section-start fa fa-caret-down open" id="id_#{section}" data-action="start" data-timestamp="#{timestamp}" data-section="#{data_section_names}" onclick="#{js_add_css_style}"></div>} + write_raw %{<div class="section-start js-section-start fa fa-caret-down js-open append-right-8 cursor-pointer" id="id_#{section}" data-action="start" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>} @lineno_in_section = 0 end @@ -274,7 +231,7 @@ module Gitlab # close all sections up to section until @sections.empty? - write_raw %{<div class="section-end" data-action="end" data-timestamp="#{timestamp}" data-section="#{data_section_names}"></div>} + write_raw %{<div class="section-end js-section-end" data-action="end" data-timestamp="#{timestamp}" data-section="#{data_section_names}"></div>} last_section = @sections.pop break if section == last_section @@ -351,7 +308,7 @@ module Gitlab if @sections.any? css_classes << "section" - css_classes << "section-header" if @lineno_in_section == 0 + css_classes << "js-section-header" if @lineno_in_section == 0 css_classes += sections.map { |section| "s_#{section}" } end |