Merge branch '18141-pipeline-graph' of gitlab.com:gitlab-org/gitlab-ce into 18141-pipeline-graph
# Conflicts: # app/assets/stylesheets/pages/pipelines.scss # app/views/projects/commit/_pipeline.html.haml
This commit is contained in:
commit
ae5ec7918a
3 changed files with 75 additions and 23 deletions
10
app/assets/javascripts/pipeline.js.es6
Normal file
10
app/assets/javascripts/pipeline.js.es6
Normal file
|
@ -0,0 +1,10 @@
|
|||
function toggleGraph() {
|
||||
$('.pipeline-graph, .toggle-pipeline-btn').toggleClass('graph-collapsed');
|
||||
|
||||
const $btnText = $('.toggle-pipeline-btn .btn-text');
|
||||
const graphCollapsed = $('.pipeline-graph').hasClass('graph-collapsed');
|
||||
|
||||
graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
|
||||
}
|
||||
|
||||
$(document).on('click', '.toggle-pipeline-btn', toggleGraph);
|
|
@ -232,10 +232,35 @@
|
|||
|
||||
// Pipeline visualization
|
||||
|
||||
.toggle-pipeline-btn {
|
||||
background-color: $gray-dark;
|
||||
|
||||
.caret {
|
||||
border-top: none;
|
||||
border-bottom: 4px solid;
|
||||
}
|
||||
|
||||
&.graph-collapsed {
|
||||
background-color: $white-light;
|
||||
|
||||
.caret {
|
||||
border-bottom: none;
|
||||
border-top: 4px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pipeline-graph {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
max-height: 500px;
|
||||
transition: max-height 0.3s, padding 0.3s;
|
||||
|
||||
&.graph-collapsed {
|
||||
max-height: 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.pipeline-visualization {
|
||||
|
@ -278,6 +303,10 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a {
|
||||
color: $layout-link-gray;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
|
@ -315,7 +344,6 @@
|
|||
right: -20px;
|
||||
border-right: 2px solid $border-color;
|
||||
border-radius: 0 0 50px;
|
||||
-webkit-border-radius: 0 0 50px;
|
||||
}
|
||||
|
||||
// Left connecting curves
|
||||
|
@ -323,7 +351,6 @@
|
|||
left: -20px;
|
||||
border-left: 2px solid $border-color;
|
||||
border-radius: 0 0 0 50px;
|
||||
-webkit-border-radius: 0 0 0 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -333,11 +360,6 @@
|
|||
height: 45px;
|
||||
top: -26px;
|
||||
}
|
||||
&::after {
|
||||
// border-left: 2px solid $border-color;
|
||||
border-top-right-radius: -50px;
|
||||
-webkit-border-top-right-radius: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -369,3 +391,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pipeline-actions {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.toggle-pipeline-btn {
|
||||
|
||||
.fa {
|
||||
color: $dropdown-header-color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,20 +1,9 @@
|
|||
.row-content-block.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
|
||||
- statuses.each do |status|
|
||||
= render "projects/#{status.to_partial_path}_pipeline", subject: status
|
||||
|
||||
.row-content-block.build-content.middle-block.pipeline-graph
|
||||
.row-content-block.build-content.middle-block.pipeline-actions
|
||||
.pull-right
|
||||
.btn.btn-grouped.btn-white.toggle-pipeline-btn
|
||||
%span.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
|
||||
|
@ -38,6 +27,26 @@
|
|||
in
|
||||
= time_interval_in_words pipeline.duration
|
||||
|
||||
.row-content-block.build-content.middle-block.pipeline-graph
|
||||
.pipeline-visualization
|
||||
%ul.stage-column-list
|
||||
- pipeline.statuses.stages.each do |stage|
|
||||
- statuses = pipeline.statuses.where(stage: stage)
|
||||
- status = statuses.latest.status
|
||||
%li.stage-column
|
||||
.stage-name
|
||||
%a{name: stage}
|
||||
- if stage
|
||||
= stage.titleize
|
||||
.builds-container
|
||||
%ul
|
||||
- statuses.each do |build|
|
||||
%li.build
|
||||
.build-content
|
||||
%span{class: "ci-status-link ci-status-icon-#{status}"}
|
||||
= ci_icon_for_status(status)
|
||||
= link_to build.name, namespace_project_build_url(build.project.namespace, build.project, build)
|
||||
|
||||
- if pipeline.yaml_errors.present?
|
||||
.bs-callout.bs-callout-danger
|
||||
%h4 Found errors in your .gitlab-ci.yml:
|
||||
|
|
Loading…
Reference in a new issue