Remove toggle graph JS; put pipeline and builds in separate tabs
This commit is contained in:
Annabel Dunstone Gray
parent
f3231d0f63
commit
ba1c5c0586
3 changed files with 52 additions and 56 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue