Makes API call when stage is clicked

app/assets/javascripts/dispatcher.js.es6

@@ -141,6 +141,11 @@
         case 'projects:merge_requests:builds':
           new MergedButtons();
           break;
+        case 'projects:merge_requests:pipelines':
+          new gl.MiniPipelineGraph({
+            container: '.js-pipeline-table',
+          });
+          break;
         case "projects:merge_requests:diffs":
           new gl.Diff();
           new ZenMode();
@@ -158,6 +163,11 @@
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
           break;
+        case 'projects:commit:pipelines':
+          new gl.MiniPipelineGraph({
+            container: '.js-pipeline-table',
+          });
+          break;
         case 'projects:commit:builds':
           new gl.Pipelines();
           break;
@@ -172,6 +182,11 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:index':
+          new gl.MiniPipelineGraph({
+            container: '.js-pipeline-table',
+          });
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:show':
           const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;

app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6

@@ -0,0 +1,69 @@
+/* global Flash */
+
+/**
+ * In each pipelines table we have a mini pipeline graph for each pipeline.
+ *
+ * When we click in a pipeline stage, we need to make an API call to get the
+ * builds list to render in a dropdown.
+ *
+ * The container should be the table element.
+ *
+ * The stage icon clicked needs to have the following HTML structure:
+ * <div>
+ *   <button class="dropdown js-builds-dropdown-button"></button>
+ *   <div class="js-builds-dropdown-container"></div>
+ * </div>
+ */
+(() => {
+  class MiniPipelineGraph {
+    constructor({ container }) {
+      this.container = container;
+      this.getBuildsList = this.getBuildsList.bind(this);
+
+      this.bindEvents();
+    }
+
+    /**
+     * Adds an removes the event listener.
+     * TODO: Remove jQuery when we have a way to handle events properly.
+     */
+    bindEvents() {
+      $(this.container).off('click', 'button.js-builds-dropdown-button', this.getBuildsList);
+      $(this.container).on('click', 'button.js-builds-dropdown-button', this.getBuildsList);
+    }
+
+    /**
+     * For the clicked stage, renders the received html in the sibiling
+     * element with the `js-builds-dropdown-container` clas
+     *
+     * @param  {Element} stageContainer
+     * @param  {Object} data
+     */
+    renderBuildsList(stageContainer, data) {
+      const dropdownContainer = stageContainer.parentElement.querySelector('.js-builds-dropdown-container');
+
+      dropdownContainer.innerHTML = data.html;
+    }
+
+    /**
+     * For the clicked stage, gets the list of builds.
+     *
+     * @param  {Object} e
+     * @return {Promise}
+     */
+    getBuildsList(e) {
+      const endpoint = e.currentTarget.dataset.stageEndpoint;
+
+      return $.ajax({
+        dataType: 'json',
+        type: 'GET',
+        url: endpoint,
+        success: data => this.renderBuildsList(e.currentTarget, data),
+        error: () => new Flash('An error occurred while fetching the builds.', 'alert'),
+      });
+    }
+  }
+
+  window.gl = window.gl || {};
+  window.gl.MiniPipelineGraph = MiniPipelineGraph;
+})();

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -53,17 +53,13 @@
         .stage-container.mini-pipeline-graph
           - if hasMultipleBuilds
             .dropdown.inline.build-content
-              %button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} }
+              %button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: tooltip, "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name)}}
                 %span{ class: klass }
                   %span.mini-pipeline-graph-icon-container
                     %span{ class: icon_status_klass }= custom_icon(icon_status)
                     = icon('caret-down', class: 'dropdown-caret')
-              .dropdown-menu.grouped-pipeline-dropdown
-                .arrow-up
-                  %ul
-                    - stage.statuses.each do |status|
-                      %li.dropdown-build
-                        = render 'ci/status/graph_badge', subject: status
+
+              %div.js-builds-dropdown-container
           - else
             - if detailed_status.has_details?
               = link_to detailed_status.details_path, class: klass, title: tooltip do

app/views/projects/commit/_pipelines_list.haml

@@ -4,7 +4,7 @@
       .nothing-here-block No pipelines to show
   - else
     .table-holder
-      %table.table.ci-table
+      %table.table.ci-table.js-pipeline-table
         %thead
           %th.pipeline-status Status
           %th.pipeline-info Pipeline

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

@@ -1,13 +1,6 @@
-- detailed_status = @stage.detailed_status(current_user)
-- klass = "has-tooltip ci-status-icon ci-status-icon-#{detailed_status}"
-- hasMultipleBuilds = @stage.statuses.count > 1
-- icon_status = "#{detailed_status.icon}_borderless"
-- icon_status_klass = "ci-status-icon ci-status-icon-#{detailed_status}"
-- tooltip = "#{@stage.name}: #{detailed_status.label || 'not found'}"
-
-.dropdown.inline.build-content
-  %button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} }
-    %span{ class: klass }
-      %span.mini-pipeline-graph-icon-container
-        %span{ class: icon_status_klass }= custom_icon(icon_status)
-        = icon('caret-down', class: 'dropdown-caret')
+.dropdown-menu.grouped-pipeline-dropdown
+  .arrow-up
+    %ul
+      - @stage.statuses.each do |status|
+        %li.dropdown-build
+          = render 'ci/status/graph_badge', subject: status

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

@@ -42,7 +42,7 @@
         .nothing-here-block No pipelines to show
     - else
       .table-holder
-        %table.table.ci-table
+        %table.table.ci-table.js-pipeline-table
           %thead
             %th.pipeline-status Status
             %th.pipeline-info Pipeline