From 1cbc898223d2f9b78cb6494108d2aed00d19d00e Mon Sep 17 00:00:00 2001 From: Kamil Trzcinski Date: Fri, 20 May 2016 18:50:16 -0500 Subject: [PATCH 1/5] Improve design of Pipeline view --- CHANGELOG | 1 + app/assets/stylesheets/pages/pipelines.scss | 26 ++++++++++++++-- .../projects/ci/commits/_commit.html.haml | 31 ++++++++++--------- app/views/projects/commit/_ci_stage.html.haml | 1 + app/views/projects/pipelines/index.html.haml | 6 ++-- 5 files changed, 44 insertions(+), 21 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 67fca2c6f6dc..0884ac1947dc 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -13,6 +13,7 @@ v 8.8.0 (unreleased) - 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. - Escape HTML in commit titles in system note messages + - Improve design of Pipeline View - Fix creation of Ci::Commit object which can lead to pending, failed in some scenarios - Improve multiple branch push performance by memoizing permission checking - Log to application.log when an admin starts and stops impersonating a user diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 546176b65e4a..87b0562c29a0 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,4 +1,24 @@ -.pipeline-stage { - overflow: hidden; - text-overflow: ellipsis; +.pipelines { + .stage { + max-width: 0; + 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; + } } diff --git a/app/views/projects/ci/commits/_commit.html.haml b/app/views/projects/ci/commits/_commit.html.haml index 13162b41f9b5..2ea9333913c0 100644 --- a/app/views/projects/ci/commits/_commit.html.haml +++ b/app/views/projects/ci/commits/_commit.html.haml @@ -12,10 +12,10 @@ · = 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? %span.label.label-primary tag + - elsif commit.latest? + %span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest - if commit.triggered? %span.label.label-primary triggered - if commit.yaml_errors.present? @@ -23,30 +23,33 @@ - if commit.builds.any?(&:stuck?) %span.label.label-warning stuck - %p - %span - - 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" - - else - Cant find HEAD commit for this branch + %p.commit-title + - 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" + - else + Cant find HEAD commit for this branch - stages_status = commit.statuses.stages_status - stages.each do |stage| %td - - if status = stages_status[stage] - - tooltip = "#{stage.titleize}: #{status}" - %span.has-tooltip{ title: "#{tooltip}", class: "ci-status-icon-#{status}" } + - status = stages_status[stage] + - tooltip = "#{stage.titleize}: #{status || 'not found'}" + - if status + = link_to namespace_project_pipeline_path(@project.namespace, @project, commit.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status || 'skipped'}", title: tooltip do = ci_icon_for_status(status) + - else + .light + \- %td - if commit.started_at && commit.finished_at - %p + %p.duration = icon("clock-o")   #{duration_in_words(commit.finished_at, commit.started_at)} - if commit.finished_at - %p + %p.finished_at = icon("calendar")   #{time_ago_with_tooltip(commit.finished_at)} @@ -67,11 +70,9 @@ %span #{build.name} - if can?(current_user, :update_pipeline, @project) -   - 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 = icon("repeat") -   - 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 = icon("remove") diff --git a/app/views/projects/commit/_ci_stage.html.haml b/app/views/projects/commit/_ci_stage.html.haml index aaa318e1eb3f..ae7bb01223ed 100644 --- a/app/views/projects/commit/_ci_stage.html.haml +++ b/app/views/projects/commit/_ci_stage.html.haml @@ -1,6 +1,7 @@ %tr %th{colspan: 10} %strong + %a{name: stage} - status = statuses.latest.status %span{class: "ci-status-link ci-status-icon-#{status}"} = ci_icon_for_status(status) diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index 9d5b6d367c9f..4e2e81907007 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -44,7 +44,7 @@ - else #{@scope.titleize} for this project -%ul.content-list +%ul.content-list.pipelines - stages = @pipelines.stages - if @pipelines.blank? %li @@ -56,8 +56,8 @@ %th ID %th Commit - stages.each do |stage| - %th - %span.pipeline-stage.has-tooltip{ title: "#{stage.titleize}" } + %th.stage + %span.has-tooltip{ title: "#{stage.titleize}" } = stage.titleize.pluralize %th %th -- GitLab From 8d0332368fba65f167f2109daf8a2184d781082b Mon Sep 17 00:00:00 2001 From: Kamil Trzcinski Date: Sat, 21 May 2016 09:52:50 -0500 Subject: [PATCH 2/5] Improve status rendering --- app/views/projects/ci/commits/_commit.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/projects/ci/commits/_commit.html.haml b/app/views/projects/ci/commits/_commit.html.haml index 2ea9333913c0..9c63510d864e 100644 --- a/app/views/projects/ci/commits/_commit.html.haml +++ b/app/views/projects/ci/commits/_commit.html.haml @@ -36,10 +36,10 @@ - status = stages_status[stage] - tooltip = "#{stage.titleize}: #{status || 'not found'}" - if status - = link_to namespace_project_pipeline_path(@project.namespace, @project, commit.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status || 'skipped'}", title: tooltip do + = 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) - else - .light + .light.has-tooltip{ title: tooltip } \- %td -- GitLab From b2c411710d80a8d801876ec406f1c6035cc5b23f Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 24 May 2016 10:59:59 -0500 Subject: [PATCH 3/5] Increase max-width of stage cells --- app/assets/stylesheets/pages/pipelines.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 87b0562c29a0..ce917a471c7b 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,6 +1,6 @@ .pipelines { .stage { - max-width: 0; + max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -- GitLab From 4c058fc429a4173e033a4babcb379c52b5ed13e3 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 24 May 2016 12:16:37 -0500 Subject: [PATCH 4/5] Remove icons from tables; remove timestamp from pipelines, remove info block at top of pipelines --- app/assets/stylesheets/framework/nav.scss | 2 +- app/assets/stylesheets/pages/merge_requests.scss | 6 ------ app/assets/stylesheets/pages/pipelines.scss | 2 +- app/views/projects/ci/builds/_build.html.haml | 4 ---- app/views/projects/ci/commits/_commit.html.haml | 7 ------- .../_generic_commit_status.html.haml | 4 ---- app/views/projects/pipelines/index.html.haml | 10 +--------- 7 files changed, 3 insertions(+), 32 deletions(-) diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index c70be58f48f5..afb0cd1a1e63 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -281,7 +281,7 @@ } .page-with-layout-nav { - margin-top: 50px; + margin-top: $header-height + 2; &.controls-dropdown-visible { @media (max-width: $screen-xs-min) { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index c4005ba1e692..4f8a8748d3f9 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -280,11 +280,5 @@ background-color: $white-light; color: $gl-placeholder-color; } - - th, - td { - padding: 16px; - } } } - diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index ce917a471c7b..6128868b670a 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,6 +1,6 @@ .pipelines { .stage { - max-width: 80px; + max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml index e23a3782c6b5..5bd6e3f0ebc6 100644 --- a/app/views/projects/ci/builds/_build.html.haml +++ b/app/views/projects/ci/builds/_build.html.haml @@ -57,14 +57,10 @@ %td.duration - if build.duration - = icon("clock-o") -   #{duration_in_words(build.finished_at, build.started_at)} %td.timestamp - if build.finished_at - = icon("calendar") -   %span #{time_ago_with_tooltip(build.finished_at)} - if defined?(coverage) && coverage diff --git a/app/views/projects/ci/commits/_commit.html.haml b/app/views/projects/ci/commits/_commit.html.haml index 9c63510d864e..5b6b940a0c41 100644 --- a/app/views/projects/ci/commits/_commit.html.haml +++ b/app/views/projects/ci/commits/_commit.html.haml @@ -45,14 +45,7 @@ %td - if commit.started_at && commit.finished_at %p.duration - = icon("clock-o") -   #{duration_in_words(commit.finished_at, commit.started_at)} - - if commit.finished_at - %p.finished_at - = icon("calendar") -   - #{time_ago_with_tooltip(commit.finished_at)} %td .controls.hidden-xs.pull-right diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml index 8129514964a3..8be124f387a9 100644 --- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml +++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml @@ -50,14 +50,10 @@ %td.duration - if generic_commit_status.duration - = icon("clock-o") -   #{duration_in_words(generic_commit_status.finished_at, generic_commit_status.started_at)} %td.timestamp - if generic_commit_status.finished_at - = icon("calendar") -   %span #{time_ago_with_tooltip(generic_commit_status.finished_at)} - if defined?(coverage) && coverage diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index 4e2e81907007..a6c12814adf4 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -36,14 +36,6 @@ = icon('wrench') %span CI Lint -.row-content-block - - if @scope == 'running' - Running pipelines for this project - - elsif @scope.nil? - Pipelines for this project - - else - #{@scope.titleize} for this project - %ul.content-list.pipelines - stages = @pipelines.stages - if @pipelines.blank? @@ -59,7 +51,7 @@ %th.stage %span.has-tooltip{ title: "#{stage.titleize}" } = stage.titleize.pluralize - %th + %th Duration %th = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages -- GitLab From 65925e699839e1f2e01c6c5f7a355d9fae0337d9 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Date: Tue, 24 May 2016 12:31:46 -0500 Subject: [PATCH 5/5] Remove top block from builds page --- app/views/admin/builds/index.html.haml | 1 - app/views/projects/builds/index.html.haml | 3 --- spec/features/builds_spec.rb | 1 - 3 files changed, 5 deletions(-) diff --git a/app/views/admin/builds/index.html.haml b/app/views/admin/builds/index.html.haml index ed24757087b9..d74cf8598e8a 100644 --- a/app/views/admin/builds/index.html.haml +++ b/app/views/admin/builds/index.html.haml @@ -47,4 +47,3 @@ = render "admin/builds/build", build: build = paginate @builds, theme: 'gitlab' - diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/builds/index.html.haml index 98f4a9416e57..7c0bec264abb 100644 --- a/app/views/projects/builds/index.html.haml +++ b/app/views/projects/builds/index.html.haml @@ -35,9 +35,6 @@ = icon('wrench') %span CI Lint -.row-content-block - #{(@scope || 'all').capitalize} builds from this project - %ul.content-list - if @builds.blank? %li diff --git a/spec/features/builds_spec.rb b/spec/features/builds_spec.rb index f83a78308e37..090a941958f9 100644 --- a/spec/features/builds_spec.rb +++ b/spec/features/builds_spec.rb @@ -43,7 +43,6 @@ end 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.ref } it { expect(page).to have_content @build.name } -- GitLab