Merge branch 'mini-stage-graph-vue' into auto-pipelines-vue

app/assets/javascripts/dispatcher.js.es6

@@ -174,9 +174,9 @@
           }
           break;
         case 'projects:pipelines:index':
-          new gl.MiniPipelineGraph({
-            container: '.js-pipeline-table',
-          });
+          // new gl.MiniPipelineGraph({
+          //   container: '.js-pipeline-table',
+          // });
           break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:show':

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

-/* global Vue, gl */
+/* global Vue, Flash, gl */
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
   gl.VueStage = Vue.extend({
+    data() {
+      return {
+        request: false,
+        builds: '',
+        spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      };
+    },
     props: ['stage', 'svgs', 'match'],
+    methods: {
+      fetchBuilds() {
+        this.$http.get(this.endpoint)
+          .then((response) => {
+            this.request = true;
+            this.builds = JSON.parse(response.body).html;
+          }, () => new Flash(
+            'Something went wrong on our end.',
+          ));
+      },
+      clearState() {
+        this.request = false;
+        this.builds = '';
+      },
+    },
     computed: {
+      buildsOrSpinner() {
+        return this.request ? this.builds : this.spinner;
+      },
+      dropdownClass() {
+        if (this.request) return 'js-builds-dropdown-container';
+        return 'js-builds-dropdown-loading builds-dropdown-loading';
+      },
+      endpoint() {
+        return '/gitlab-org/gitlab-shell/pipelines/121/stage?stage=deploy';
+      },
+      stageTitle() {
+        return 'deploy: running';
+      },
       buildStatus() {
         return `Build: ${this.stage.status.label}`;
       },
@@ -12,17 +47,51 @@
         return `has-tooltip ci-status-icon-${this.stage.status.group}`;
       },
       svg() {
-        return this.svgs[this.match(this.stage.status.icon)];
+        const icon = this.stage.status.icon;
+        icon.replace('icon', 'stageIcon');
+        return this.svgs[this.match(icon)];
+      },
+      spanClass() {
+        return `ci-status-icon ci-status-icon-${this.stage.status.group}`;
       },
     },
     template: `
-      <a
-        :class='tooltip'
-        :title='buildStatus'
-        :href='stage.path'
-        v-html='svg'
-      >
-      </a>
+      <div class="stage-container mini-pipeline-graph">
+
+        <div class="dropdown inline build-content">
+          <button
+            @click='fetchBuilds'
+            class="has-tooltip builds-dropdown js-builds-dropdown-button"
+            data-placement="top"
+            :title='stageTitle'
+            data-toggle="dropdown"
+            type="button"
+          >
+            <span :class='tooltip'>
+              <span class="mini-pipeline-graph-icon-container">
+                <span
+                  :class='spanClass'
+                  v-html='svg'
+                >
+                </span>
+                <i class="fa fa-caret-down dropdown-caret"></i>
+              </span>
+            </span>
+          </button>
+
+          <div class="js-builds-dropdown-container">
+            <div class="dropdown-menu grouped-pipeline-dropdown">
+              <div class="arrow-up"></div>
+              <div
+                :class='dropdownClass'
+                v-html='buildsOrSpinner'
+              >
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
     `,
   });
 })(window.gl || (window.gl = {}));

app/views/projects/pipelines/index.html.haml

@@ -49,8 +49,17 @@
         "icon_status_success" => custom_icon("icon_status_success"),
         "icon_status_failed" => custom_icon("icon_status_failed"),
         "icon_status_warning" => custom_icon("icon_status_warning"),
+        "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
+        "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
+        "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
+        "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
+        "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
+        "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
+        "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
+        "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
         "icon_play" => custom_icon("icon_play"),
         "icon_timer" => custom_icon("icon_timer"),
+        "icon_status_manual" => custom_icon("icon_status_manual"),
       } }
 
       .vue-pipelines-index