Merge branch 'ui_pipelines_mini_graph' into 'master'

better UI fix - simple solution - pipelines#index mini_graph in Vue

See merge request !8614

app/assets/javascripts/vue_pipelines_index/stage.js.es6

@@ -5,18 +5,19 @@
   gl.VueStage = Vue.extend({
     data() {
       return {
-        count: 0,
         builds: '',
         spinner: '<span class="fa fa-spinner fa-spin"></span>',
       };
     },
     props: ['stage', 'svgs', 'match'],
     methods: {
-      fetchBuilds() {
-        if (this.count > 0) return null;
+      fetchBuilds(e) {
+        const areaExpanded = e.currentTarget.attributes['aria-expanded'];
+
+        if (areaExpanded && (areaExpanded.textContent === 'true')) return null;
+
         return this.$http.get(this.stage.dropdown_path)
           .then((response) => {
-            this.count += 1;
             this.builds = JSON.parse(response.body).html;
           }, () => {
             const flash = new Flash('Something went wrong on our end.');
@@ -39,7 +40,7 @@
         return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
       },
       svg() {
-        const icon = this.stage.status.icon;
+        const { icon } = this.stage.status;
         const stageIcon = icon.replace(/icon/i, 'stage_icon');
         return this.svgs[this.match(stageIcon)];
       },
@@ -50,18 +51,25 @@
     template: `
       <div>
         <button
-          @click='fetchBuilds'
+          @click='fetchBuilds($event)'
           :class="triggerButtonClass"
           :title='stage.title'
           data-placement="top"
           data-toggle="dropdown"
-          type="button">
+          type="button"
+        >
           <span v-html="svg"></span>
           <i class="fa fa-caret-down "></i>
         </button>
         <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
           <div class="arrow-up"></div>
-          <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div>
+          <div
+            @click=''
+            :class="dropdownClass"
+            class="js-builds-dropdown-list scrollable-menu"
+            v-html="buildsOrSpinner"
+          >
+          </div>
         </ul>
       </div>
     `,