Remove toggle graph JS; put pipeline and builds in separate tabs

app/assets/javascripts/pipelines.js.es6

@@ -3,26 +3,12 @@
 
   class Pipelines {
     constructor() {
-      this.initGraphToggle();
       this.addMarginToBuildColumns();
     }
 
-    initGraphToggle() {
-      this.pipelineGraph = document.querySelector('.pipeline-graph');
-      this.toggleButton = document.querySelector('.toggle-pipeline-btn');
-      this.toggleButtonText = this.toggleButton.querySelector('.toggle-btn-text');
-      this.toggleButton.addEventListener('click', this.toggleGraph.bind(this));
-    }
-
-    toggleGraph() {
-      const graphCollapsed = this.pipelineGraph.classList.contains('graph-collapsed');
-      this.toggleButton.classList.toggle('graph-collapsed');
-      this.pipelineGraph.classList.toggle('graph-collapsed');
-      this.toggleButtonText.textContent = graphCollapsed ? 'Hide' : 'Expand';
-    }
-
     addMarginToBuildColumns() {
-      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
+      this.pipelineGraph = document.querySelector('.pipeline-graph');
+      const secondChildBuildNodes = document.querySelector('.pipeline-graph').querySelectorAll('.build:nth-child(2)');
       for (buildNodeIndex in secondChildBuildNodes) {
         const buildNode = secondChildBuildNodes[buildNodeIndex];
         const firstChildBuildNode = buildNode.previousElementSibling;

app/assets/stylesheets/pages/pipelines.scss

@@ -304,6 +304,8 @@
 
 .pipeline-graph {
   width: 100%;
+  background-color: $background-color;
+  padding: $gl-padding;
   overflow: auto;
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
@@ -367,6 +369,7 @@
 
   .build {
     border: 1px solid $border-color;
+    background-color: $white-light;
     position: relative;
     padding: 7px 10px 8px;
     border-radius: 30px;

app/views/projects/commit/_pipeline.html.haml

@@ -1,10 +1,6 @@
 .pipeline-graph-container
   .row-content-block.build-content.middle-block.pipeline-actions
     .pull-right
-      %button.btn.btn-grouped.btn-white.toggle-pipeline-btn
-        %span.toggle-btn-text Hide
-        %span pipeline graph
-        %span.caret
       - if can?(current_user, :update_pipeline, pipeline.project)
         - if pipeline.builds.latest.failed.any?(&:retryable?)
           = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
@@ -28,7 +24,18 @@
           in
           = time_interval_in_words pipeline.duration
 
-  .row-content-block.build-content.middle-block.pipeline-graph.hidden
+  .tabs-holder
+    %ul.nav-links.no-top.no-bottom
+      %li.active
+        = link_to "Pipeline", "#js-tab-pipeline", data: { target: '#js-tab-pipeline', action: 'pipeline', toggle: 'tab' }
+        %span.badge
+      %li
+        = link_to "Builds", "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' }
+        %span.badge
+
+  .tab-content
+    #js-tab-pipeline.tab-pane.active
+      .build-content.middle-block.pipeline-graph
         .pipeline-visualization
           %ul.stage-column-list
             - stages = pipeline.stages_with_latest_statuses
@@ -42,8 +49,8 @@
                   %ul
                     = render "projects/commit/pipeline_stage", statuses: statuses
 
-
+    #js-tab-builds.tab-pane
-- if pipeline.yaml_errors.present?
+      - if pipeline.yaml_errors.present?
         .bs-callout.bs-callout-danger
           %h4 Found errors in your .gitlab-ci.yml:
           %ul
@@ -51,11 +58,11 @@
               %li= error
           You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
 
-- if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
+      - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
         .bs-callout.bs-callout-warning
           \.gitlab-ci.yml not found in this commit
 
-.table-holder.pipeline-holder
+      .table-holder.pipeline-holder
         %table.table.ci-table.pipeline
           %thead
             %tr