Selecting stage updates builds dropdown

app/assets/javascripts/build.js

@@ -13,13 +13,14 @@
       this.state = state1;
       this.hideSidebar = bind(this.hideSidebar, this);
       this.toggleSidebar = bind(this.toggleSidebar, this);
+      this.updateDropdown = bind(this.updateDropdown, this);
       clearInterval(Build.interval);
       this.bp = Breakpoints.get();
-      this.hideSidebar();
-      this.displayTestStatuses();
       $('.js-build-sidebar').niceScroll();
+      this.hideSidebar();
       $(document).off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
       $(window).off('resize.build').on('resize.build', this.hideSidebar);
+      $(document).on('click', '.stage-item', this.updateDropdown);
       this.updateArtifactRemoveDate();
       if ($('#build-trace').length) {
         this.getInitialBuildTrace();
@@ -133,12 +134,16 @@
       }
     };
-    Build.prototype.displayTestStatuses = function() {
-      $jobs = $('.build-job');
-      jobjects = $jobs.map(function () {
-        return $(this).data();
-      });
-      console.log(jobjects);
+    Build.prototype.populateJobDropdown = function(stage) {
+      $('.build-job').hide();
+      $('.build-job[data-stage="' + stage + '"]').show();
+    };
+
+    Build.prototype.updateDropdown = function(e) {
+      e.preventDefault();
+      var stage = e.target.text;
+      $('.stage-selection').text(stage);
+      this.populateJobDropdown(stage);
     };
     return Build;

app/views/projects/builds/show.html.haml

@@ -6,25 +6,25 @@
   = render "header"
   - builds = @build.pipeline.builds.latest.to_a
+  - statuses = ["failed", "pending", "running", "canceled", "skipped", "success"]
   - if builds.size > 1
     .dropdown.stage
       %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.more-tests More
+        %span.stage-selection More
         = icon('caret-down')
       %ul.dropdown-menu.overflow-jobs
-        - builds.each do |build|
+        - builds.map(&:stage).uniq.each do |stage|
           %li
-            %a= build.stage
-    - statuses = ["failed", "pending", "running", "canceled", "skipped", "success"]
+            %a.stage-item= stage
     .dropdown.jobs-dropdown
       %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.more-tests More
+        %span.build-selection More
         = icon('caret-down')
       %ul.dropdown-menu.overflow-jobs
         - statuses.each do |build_status|
           - builds.select{|build| build.status == build_status}.each do |build|
-            %li.build-job{class: ('active' if build == @build), data: {id: build.id, name: build.name, status: build.status}}
+            %li.build-job{class: ('active' if build == @build), data: {id: build.id, name: build.name, stage: build.stage}}
               = link_to namespace_project_build_path(@project.namespace, @project, build) do
                 = ci_icon_for_status(build.status)
                 %span