Add data attributes to builds

app/assets/javascripts/build.js

@@ -16,11 +16,11 @@
       clearInterval(Build.interval);
       this.bp = Breakpoints.get();
       this.hideSidebar();
+      this.displayTestStatuses();
       $('.js-build-sidebar').niceScroll();
       $(document).off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
       $(window).off('resize.build').on('resize.build', this.hideSidebar);
       this.updateArtifactRemoveDate();
-      this.displayTestStatuses();
       if ($('#build-trace').length) {
         this.getInitialBuildTrace();
         this.initScrollButtonAffix();
@@ -134,21 +134,11 @@
     };
 
     Build.prototype.displayTestStatuses = function() {
-      $jobTopPosition = $('.build-job').first().offset().top;
-      $dropdownCounter = [];
-
-      $('.build-job a').each(function() {
-        if ($(this).offset().top > $jobTopPosition) {
-          $dropdownCounter.push($(this));
-          $('.overflow-jobs > li').append($(this));
-        }
-      })
-
-      $('.more-tests').text('More (' + $dropdownCounter.length + ')');
-
-      if ($('.overflow-jobs > li > a').length == 0) {
-        $('.overflow-jobs-dropdown').hide();
-      }
+      $jobs = $('.build-job');
+      jobjects = $jobs.map(function () {
+        return $(this).data();
+      });
+      console.log(jobjects);
     };
 
     return Build;

app/assets/stylesheets/pages/builds.scss

@@ -74,14 +74,7 @@
     }
   }
 
-  .overflow-jobs-dropdown {
-    float: right;
-    padding: 7px 0 7px 5px;
-
-    .dropdown-menu-toggle {
-      width: auto;
-      border: none;
-    }
+  .jobs-dropdown {
 
     svg {
       position: relative;

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

@@ -7,24 +7,31 @@
 
   - builds = @build.pipeline.builds.latest.to_a
   - if builds.size > 1
-    .dropdown.overflow-jobs-dropdown
+    .dropdown.stage
       %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
         %span.more-tests More
         = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-align-right.overflow-jobs
-        %li
-    %ul.nav-links.no-top.no-bottom
-      - statuses = ["failed", "pending", "running", "canceled", "skipped", "success"]
-      - statuses.each do |build_status|
-        - builds.select{|build| build.status == build_status}.each do |build|
-          %li.build-job{class: ('active' if build == @build) }
-            = link_to namespace_project_build_path(@project.namespace, @project, build) do
-              = ci_icon_for_status(build.status)
-              %span
-                - if build.name
-                  = build.name
-                - else
-                  = build.id
+      %ul.dropdown-menu.overflow-jobs
+        - builds.each do |build|
+          %li
+            %a= build.stage
+
+    - statuses = ["failed", "pending", "running", "canceled", "skipped", "success"]
+    .dropdown.jobs-dropdown
+      %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+        %span.more-tests 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}}
+              = link_to namespace_project_build_path(@project.namespace, @project, build) do
+                = ci_icon_for_status(build.status)
+                %span
+                  - if build.name
+                    = build.name
+                  - else
+                    = build.id
 
       - if @build.retried?
         %li.active