Commit c1167be2 authored by Douwe Maan's avatar Douwe Maan

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
parents fb11004d 65925e69
...@@ -39,6 +39,7 @@ v 8.8.0 ...@@ -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 @@ ...@@ -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 @@ ...@@ -280,11 +280,5 @@
background-color: $white-light; background-color: $white-light;
color: $gl-placeholder-color; color: $gl-placeholder-color;
} }
th,
td {
padding: 16px;
}
} }
} }
.pipeline-stage { .pipelines {
overflow: hidden; .stage {
text-overflow: ellipsis; max-width: 100px;
overflow: hidden;
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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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,33 +23,29 @@ ...@@ -23,33 +23,29 @@
- 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 truncate(commit_data.title, length: 60), namespace_project_commit_path(@project.namespace, @project, commit_data.id), class: "commit-row-message"
= link_to_gfm commit_data.title, 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
- 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 @@ ...@@ -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")
%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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 ...@@ -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 }
......
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