Merge branch 'improve-pipeline-design' into 'master'
Improve design of Pipeline view ## What does this MR do? Improves current design of Pipelines view when there is multiple stages. This makes the statuses clickable and makes the view more compact. ## Screenshots (if relevant) ![Screen_Shot_2016-05-21_at_01.20.40](/uploads/dd031b7af7005c7a61f3165fefa8b7c9/Screen_Shot_2016-05-21_at_01.20.40.png) cc @DouweM @markpundsack @rspeicher @marin See merge request !4230
This commit is contained in:
commit
c1167be283
|
@ -39,6 +39,7 @@ v 8.8.0
|
||||||
- Added inline diff styling for `change_title` system notes. (Adam Butler)
|
- Added inline diff styling for `change_title` system notes. (Adam Butler)
|
||||||
- Project#open_branches has been cleaned up and no longer loads entire records into memory.
|
- Project#open_branches has been cleaned up and no longer loads entire records into memory.
|
||||||
- Escape HTML in commit titles in system note messages
|
- Escape HTML in commit titles in system note messages
|
||||||
|
- Improve design of Pipeline View
|
||||||
- Fix scope used when accessing container registry
|
- Fix scope used when accessing container registry
|
||||||
- Fix creation of Ci::Commit object which can lead to pending, failed in some scenarios
|
- Fix creation of Ci::Commit object which can lead to pending, failed in some scenarios
|
||||||
- Improve multiple branch push performance by memoizing permission checking
|
- Improve multiple branch push performance by memoizing permission checking
|
||||||
|
|
|
@ -281,7 +281,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-with-layout-nav {
|
.page-with-layout-nav {
|
||||||
margin-top: 50px;
|
margin-top: $header-height + 2;
|
||||||
|
|
||||||
&.controls-dropdown-visible {
|
&.controls-dropdown-visible {
|
||||||
@media (max-width: $screen-xs-min) {
|
@media (max-width: $screen-xs-min) {
|
||||||
|
|
|
@ -280,11 +280,5 @@
|
||||||
background-color: $white-light;
|
background-color: $white-light;
|
||||||
color: $gl-placeholder-color;
|
color: $gl-placeholder-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,24 @@
|
||||||
.pipeline-stage {
|
.pipelines {
|
||||||
|
.stage {
|
||||||
|
max-width: 100px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration, .finished_at {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commit-title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,4 +47,3 @@
|
||||||
= render "admin/builds/build", build: build
|
= render "admin/builds/build", build: build
|
||||||
|
|
||||||
= paginate @builds, theme: 'gitlab'
|
= paginate @builds, theme: 'gitlab'
|
||||||
|
|
||||||
|
|
|
@ -35,9 +35,6 @@
|
||||||
= icon('wrench')
|
= icon('wrench')
|
||||||
%span CI Lint
|
%span CI Lint
|
||||||
|
|
||||||
.row-content-block
|
|
||||||
#{(@scope || 'all').capitalize} builds from this project
|
|
||||||
|
|
||||||
%ul.content-list
|
%ul.content-list
|
||||||
- if @builds.blank?
|
- if @builds.blank?
|
||||||
%li
|
%li
|
||||||
|
|
|
@ -57,14 +57,10 @@
|
||||||
|
|
||||||
%td.duration
|
%td.duration
|
||||||
- if build.duration
|
- if build.duration
|
||||||
= icon("clock-o")
|
|
||||||
|
|
||||||
#{duration_in_words(build.finished_at, build.started_at)}
|
#{duration_in_words(build.finished_at, build.started_at)}
|
||||||
|
|
||||||
%td.timestamp
|
%td.timestamp
|
||||||
- if build.finished_at
|
- if build.finished_at
|
||||||
= icon("calendar")
|
|
||||||
|
|
||||||
%span #{time_ago_with_tooltip(build.finished_at)}
|
%span #{time_ago_with_tooltip(build.finished_at)}
|
||||||
|
|
||||||
- if defined?(coverage) && coverage
|
- if defined?(coverage) && coverage
|
||||||
|
|
|
@ -12,10 +12,10 @@
|
||||||
·
|
·
|
||||||
= link_to commit.short_sha, namespace_project_commit_path(@project.namespace, @project, commit.sha), class: "commit-id monospace"
|
= link_to commit.short_sha, namespace_project_commit_path(@project.namespace, @project, commit.sha), class: "commit-id monospace"
|
||||||
|
|
||||||
- if commit.latest?
|
|
||||||
%span.label.label-success latest
|
|
||||||
- if commit.tag?
|
- if commit.tag?
|
||||||
%span.label.label-primary tag
|
%span.label.label-primary tag
|
||||||
|
- elsif commit.latest?
|
||||||
|
%span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest
|
||||||
- if commit.triggered?
|
- if commit.triggered?
|
||||||
%span.label.label-primary triggered
|
%span.label.label-primary triggered
|
||||||
- if commit.yaml_errors.present?
|
- if commit.yaml_errors.present?
|
||||||
|
@ -23,10 +23,9 @@
|
||||||
- if commit.builds.any?(&:stuck?)
|
- if commit.builds.any?(&:stuck?)
|
||||||
%span.label.label-warning stuck
|
%span.label.label-warning stuck
|
||||||
|
|
||||||
%p
|
%p.commit-title
|
||||||
%span
|
|
||||||
- if commit_data = commit.commit_data
|
- if commit_data = commit.commit_data
|
||||||
= link_to_gfm commit_data.title, namespace_project_commit_path(@project.namespace, @project, commit_data.id), class: "commit-row-message"
|
= link_to_gfm truncate(commit_data.title, length: 60), namespace_project_commit_path(@project.namespace, @project, commit_data.id), class: "commit-row-message"
|
||||||
- else
|
- else
|
||||||
Cant find HEAD commit for this branch
|
Cant find HEAD commit for this branch
|
||||||
|
|
||||||
|
@ -34,22 +33,19 @@
|
||||||
- stages_status = commit.statuses.stages_status
|
- stages_status = commit.statuses.stages_status
|
||||||
- stages.each do |stage|
|
- stages.each do |stage|
|
||||||
%td
|
%td
|
||||||
- if status = stages_status[stage]
|
- status = stages_status[stage]
|
||||||
- tooltip = "#{stage.titleize}: #{status}"
|
- tooltip = "#{stage.titleize}: #{status || 'not found'}"
|
||||||
%span.has-tooltip{ title: "#{tooltip}", class: "ci-status-icon-#{status}" }
|
- if status
|
||||||
|
= link_to namespace_project_pipeline_path(@project.namespace, @project, commit.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status}", title: tooltip do
|
||||||
= ci_icon_for_status(status)
|
= ci_icon_for_status(status)
|
||||||
|
- else
|
||||||
|
.light.has-tooltip{ title: tooltip }
|
||||||
|
\-
|
||||||
|
|
||||||
%td
|
%td
|
||||||
- if commit.started_at && commit.finished_at
|
- if commit.started_at && commit.finished_at
|
||||||
%p
|
%p.duration
|
||||||
= icon("clock-o")
|
|
||||||
|
|
||||||
#{duration_in_words(commit.finished_at, commit.started_at)}
|
#{duration_in_words(commit.finished_at, commit.started_at)}
|
||||||
- if commit.finished_at
|
|
||||||
%p
|
|
||||||
= icon("calendar")
|
|
||||||
|
|
||||||
#{time_ago_with_tooltip(commit.finished_at)}
|
|
||||||
|
|
||||||
%td
|
%td
|
||||||
.controls.hidden-xs.pull-right
|
.controls.hidden-xs.pull-right
|
||||||
|
@ -67,11 +63,9 @@
|
||||||
%span #{build.name}
|
%span #{build.name}
|
||||||
|
|
||||||
- if can?(current_user, :update_pipeline, @project)
|
- if can?(current_user, :update_pipeline, @project)
|
||||||
|
|
||||||
- if commit.retryable? && commit.builds.failed.any?
|
- if commit.retryable? && commit.builds.failed.any?
|
||||||
= link_to retry_namespace_project_pipeline_path(@project.namespace, @project, commit.id), class: 'btn has-tooltip', title: "Retry", method: :post do
|
= link_to retry_namespace_project_pipeline_path(@project.namespace, @project, commit.id), class: 'btn has-tooltip', title: "Retry", method: :post do
|
||||||
= icon("repeat")
|
= icon("repeat")
|
||||||
|
|
||||||
- if commit.active?
|
- if commit.active?
|
||||||
= link_to cancel_namespace_project_pipeline_path(@project.namespace, @project, commit.id), class: 'btn btn-remove has-tooltip', title: "Cancel", method: :post do
|
= link_to cancel_namespace_project_pipeline_path(@project.namespace, @project, commit.id), class: 'btn btn-remove has-tooltip', title: "Cancel", method: :post do
|
||||||
= icon("remove")
|
= icon("remove")
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
%tr
|
%tr
|
||||||
%th{colspan: 10}
|
%th{colspan: 10}
|
||||||
%strong
|
%strong
|
||||||
|
%a{name: stage}
|
||||||
- status = statuses.latest.status
|
- status = statuses.latest.status
|
||||||
%span{class: "ci-status-link ci-status-icon-#{status}"}
|
%span{class: "ci-status-link ci-status-icon-#{status}"}
|
||||||
= ci_icon_for_status(status)
|
= ci_icon_for_status(status)
|
||||||
|
|
|
@ -50,14 +50,10 @@
|
||||||
|
|
||||||
%td.duration
|
%td.duration
|
||||||
- if generic_commit_status.duration
|
- if generic_commit_status.duration
|
||||||
= icon("clock-o")
|
|
||||||
|
|
||||||
#{duration_in_words(generic_commit_status.finished_at, generic_commit_status.started_at)}
|
#{duration_in_words(generic_commit_status.finished_at, generic_commit_status.started_at)}
|
||||||
|
|
||||||
%td.timestamp
|
%td.timestamp
|
||||||
- if generic_commit_status.finished_at
|
- if generic_commit_status.finished_at
|
||||||
= icon("calendar")
|
|
||||||
|
|
||||||
%span #{time_ago_with_tooltip(generic_commit_status.finished_at)}
|
%span #{time_ago_with_tooltip(generic_commit_status.finished_at)}
|
||||||
|
|
||||||
- if defined?(coverage) && coverage
|
- if defined?(coverage) && coverage
|
||||||
|
|
|
@ -36,15 +36,7 @@
|
||||||
= icon('wrench')
|
= icon('wrench')
|
||||||
%span CI Lint
|
%span CI Lint
|
||||||
|
|
||||||
.row-content-block
|
%ul.content-list.pipelines
|
||||||
- if @scope == 'running'
|
|
||||||
Running pipelines for this project
|
|
||||||
- elsif @scope.nil?
|
|
||||||
Pipelines for this project
|
|
||||||
- else
|
|
||||||
#{@scope.titleize} for this project
|
|
||||||
|
|
||||||
%ul.content-list
|
|
||||||
- stages = @pipelines.stages
|
- stages = @pipelines.stages
|
||||||
- if @pipelines.blank?
|
- if @pipelines.blank?
|
||||||
%li
|
%li
|
||||||
|
@ -56,10 +48,10 @@
|
||||||
%th ID
|
%th ID
|
||||||
%th Commit
|
%th Commit
|
||||||
- stages.each do |stage|
|
- stages.each do |stage|
|
||||||
%th
|
%th.stage
|
||||||
%span.pipeline-stage.has-tooltip{ title: "#{stage.titleize}" }
|
%span.has-tooltip{ title: "#{stage.titleize}" }
|
||||||
= stage.titleize.pluralize
|
= stage.titleize.pluralize
|
||||||
%th
|
%th Duration
|
||||||
%th
|
%th
|
||||||
= render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
|
= render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
|
||||||
|
|
||||||
|
|
|
@ -43,7 +43,6 @@ describe "Builds" do
|
||||||
end
|
end
|
||||||
|
|
||||||
it { expect(page).to have_selector('.nav-links li.active', text: 'All') }
|
it { expect(page).to have_selector('.nav-links li.active', text: 'All') }
|
||||||
it { expect(page).to have_selector('.row-content-block', text: 'All builds from this project') }
|
|
||||||
it { expect(page).to have_content @build.short_sha }
|
it { expect(page).to have_content @build.short_sha }
|
||||||
it { expect(page).to have_content @build.ref }
|
it { expect(page).to have_content @build.ref }
|
||||||
it { expect(page).to have_content @build.name }
|
it { expect(page).to have_content @build.name }
|
||||||
|
|
Loading…
Reference in New Issue