diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index f075a995846870636bb0e7f76468cf1cee49ee57..329731321740e1bfbc95e9edeacce304585d5312 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/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> `,