Commit ba1c5c05 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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

parent f3231d0f
...@@ -3,26 +3,12 @@ ...@@ -3,26 +3,12 @@
class Pipelines { class Pipelines {
constructor() { constructor() {
this.initGraphToggle();
this.addMarginToBuildColumns(); 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() { 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) { for (buildNodeIndex in secondChildBuildNodes) {
const buildNode = secondChildBuildNodes[buildNodeIndex]; const buildNode = secondChildBuildNodes[buildNodeIndex];
const firstChildBuildNode = buildNode.previousElementSibling; const firstChildBuildNode = buildNode.previousElementSibling;
......
...@@ -304,6 +304,8 @@ ...@@ -304,6 +304,8 @@
.pipeline-graph { .pipeline-graph {
width: 100%; width: 100%;
background-color: $background-color;
padding: $gl-padding;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
transition: max-height 0.3s, padding 0.3s; transition: max-height 0.3s, padding 0.3s;
...@@ -367,6 +369,7 @@ ...@@ -367,6 +369,7 @@
.build { .build {
border: 1px solid $border-color; border: 1px solid $border-color;
background-color: $white-light;
position: relative; position: relative;
padding: 7px 10px 8px; padding: 7px 10px 8px;
border-radius: 30px; border-radius: 30px;
......
.pipeline-graph-container .pipeline-graph-container
.row-content-block.build-content.middle-block.pipeline-actions .row-content-block.build-content.middle-block.pipeline-actions
.pull-right .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 can?(current_user, :update_pipeline, pipeline.project)
- if pipeline.builds.latest.failed.any?(&:retryable?) - 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 = 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 @@ ...@@ -28,7 +24,18 @@
in in
= time_interval_in_words pipeline.duration = 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 .pipeline-visualization
%ul.stage-column-list %ul.stage-column-list
- stages = pipeline.stages_with_latest_statuses - stages = pipeline.stages_with_latest_statuses
...@@ -42,8 +49,8 @@ ...@@ -42,8 +49,8 @@
%ul %ul
= render "projects/commit/pipeline_stage", statuses: statuses = 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 .bs-callout.bs-callout-danger
%h4 Found errors in your .gitlab-ci.yml: %h4 Found errors in your .gitlab-ci.yml:
%ul %ul
...@@ -51,11 +58,11 @@ ...@@ -51,11 +58,11 @@
%li= error %li= error
You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path} 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 .bs-callout.bs-callout-warning
\.gitlab-ci.yml not found in this commit \.gitlab-ci.yml not found in this commit
.table-holder.pipeline-holder .table-holder.pipeline-holder
%table.table.ci-table.pipeline %table.table.ci-table.pipeline
%thead %thead
%tr %tr
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment