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

3 files changed, 52 insertions, 56 deletions

diff --git a/app/assets/javascripts/pipelines.js.es6 b/app/assets/javascripts/pipelines.js.es6
index e6fada5c84c..a84db9c0233 100644
--- a/app/assets/javascripts/pipelines.js.es6
+++ b/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;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index bf3cb6e7ad9..e1fe2c04a76 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/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;
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 062a8905a19..cf3ed5c64f7 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/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,43 +24,54 @@
           in
           = time_interval_in_words pipeline.duration
 
-  .row-content-block.build-content.middle-block.pipeline-graph.hidden
-    .pipeline-visualization
-      %ul.stage-column-list
-        - stages = pipeline.stages_with_latest_statuses
-        - stages.each do |stage, statuses|
-          %li.stage-column
-            .stage-name
-              %a{name: stage}
-              - if stage
-                = stage.titleize
-            .builds-container
-              %ul
-                = render "projects/commit/pipeline_stage", statuses: statuses
+  .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
+            - stages.each do |stage, statuses|
+              %li.stage-column
+                .stage-name
+                  %a{name: stage}
+                  - if stage
+                    = stage.titleize
+                .builds-container
+                  %ul
+                    = render "projects/commit/pipeline_stage", statuses: statuses
 
-- if pipeline.yaml_errors.present?
-  .bs-callout.bs-callout-danger
-    %h4 Found errors in your .gitlab-ci.yml:
-    %ul
-      - pipeline.yaml_errors.split(",").each do |error|
-        %li= error
-    You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+    #js-tab-builds.tab-pane
+      - if pipeline.yaml_errors.present?
+        .bs-callout.bs-callout-danger
+          %h4 Found errors in your .gitlab-ci.yml:
+          %ul
+            - pipeline.yaml_errors.split(",").each do |error|
+              %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
-  .bs-callout.bs-callout-warning
-    \.gitlab-ci.yml not found in this commit
+      - 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.table.ci-table.pipeline
-    %thead
-      %tr
-        %th Status
-        %th Build ID
-        %th Name
-        %th
-        - if pipeline.project.build_coverage_enabled?
-          %th Coverage
-        %th
-    - pipeline.statuses.relevant.stages.each do |stage|
-      = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
+      .table-holder.pipeline-holder
+        %table.table.ci-table.pipeline
+          %thead
+            %tr
+              %th Status
+              %th Build ID
+              %th Name
+              %th
+              - if pipeline.project.build_coverage_enabled?
+                %th Coverage
+              %th
+          - pipeline.statuses.relevant.stages.each do |stage|
+            = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)