summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/jobs
diff options
context:
space:
mode:
authorSean McGivern <sean@gitlab.com>2019-06-17 17:03:41 +0000
committerSean McGivern <sean@gitlab.com>2019-06-17 17:03:41 +0000
commit2634cad695e41f4882a67a8cfa0e2579b870f1a3 (patch)
tree18dfebd24d0b63d0ad98cfb15cb105365ec01e03 /app/assets/javascripts/jobs
parent89a89b3230717920410de6fb6d6b7152ef41a03e (diff)
parentd75a4ddab2cac69b7190c4a88adb8363c2950bdb (diff)
downloadgitlab-ce-2634cad695e41f4882a67a8cfa0e2579b870f1a3.tar.gz
Merge branch 'generate-spans-for-sections' into 'master'
Add collapsible sections to job log See merge request gitlab-org/gitlab-ce!28642
Diffstat (limited to 'app/assets/javascripts/jobs')
-rw-r--r--app/assets/javascripts/jobs/components/job_log.vue53
1 files changed, 43 insertions, 10 deletions
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index 92e20e92d66..d611b370ab9 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -17,10 +17,19 @@ 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.removeEventListener();
},
methods: {
...mapActions(['scrollBottom']),
@@ -38,21 +47,45 @@ export default {
}, 0);
}
},
+ removeEventListener() {
+ this.$el
+ .querySelectorAll('.js-section-start')
+ .forEach(el => 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 => el.addEventListener('click', this.handleSectionClick));
+ },
+ /**
+ * On click, we toggle the hidden class of
+ * all the rows that match the `data-section` selector
+ */
+ handleSectionClick(evt) {
+ const clickedArrow = evt.currentTarget;
+ // toggle the arrow class
+ clickedArrow.classList.toggle('fa-caret-right');
+ clickedArrow.classList.toggle('fa-caret-down');
+
+ const { section } = clickedArrow.dataset;
+ const sibilings = this.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`);
+
+ 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>