2 files changed, 54 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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index 0379e98ca1d..22a74c8cd73 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import Deployment from './deployment.vue';
 import MrWidgetContainer from './mr_widget_container.vue';
 import MrWidgetPipeline from './mr_widget_pipeline.vue';
@@ -17,6 +18,8 @@ export default {
     Deployment,
     MrWidgetContainer,
     MrWidgetPipeline,
+    MergeTrainInfo: () =>
+      import('ee_component/vue_merge_request_widget/components/merge_train_info.vue'),
   },
   props: {
     mr: {
@@ -58,6 +61,9 @@ export default {
     showVisualReviewAppLink() {
       return Boolean(this.mr.visualReviewFF && this.mr.visualReviewAppAvailable);
     },
+    showMergeTrainInfo() {
+      return _.isNumber(this.mr.mergeTrainIndex);
+    },
   },
 };
 </script>
@@ -83,6 +89,11 @@ export default {
           :visual-review-app-meta="visualReviewAppMeta"
         />
       </div>
+      <merge-train-info
+        v-if="showMergeTrainInfo"
+        class="mr-widget-extension"
+        :merge-train-index="mr.mergeTrainIndex"
+      />
     </template>
   </mr-widget-container>
 </template>