diff options
author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-09-20 15:41:24 +0000 |
---|---|---|
committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2015-09-20 15:41:24 +0000 |
commit | 0b3f563b33135d34e45a35068d4765e07c36132b (patch) | |
tree | dfe578c6bf304a6dc42a92d4f843dce83172a76b | |
parent | 9be1c08e5dc099803ea5716c3ee898a91a9575ac (diff) | |
parent | 4daffbe4064e0f39e401c962bb0c0f2d8a092810 (diff) | |
download | gitlab-ce-0b3f563b33135d34e45a35068d4765e07c36132b.tar.gz |
Merge branch 'ci-build-list' into 'master'
Style CI project/build list
* return `bs-callout` css class to fix few UI issues
* refactor build status helpers
* style CI project page (#2545)
* style build page by re-using existing UI components
* style CI commit page by re-using existing UI components
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
See merge request !1339
-rw-r--r-- | app/assets/stylesheets/ci/projects.scss | 68 | ||||
-rw-r--r-- | app/assets/stylesheets/generic/callout.scss | 45 | ||||
-rw-r--r-- | app/helpers/ci/application_helper.rb | 22 | ||||
-rw-r--r-- | app/helpers/ci/builds_helper.rb | 22 | ||||
-rw-r--r-- | app/helpers/ci/commits_helper.rb | 15 | ||||
-rw-r--r-- | app/views/ci/admin/builds/_build.html.haml | 4 | ||||
-rw-r--r-- | app/views/ci/admin/projects/_project.html.haml | 5 | ||||
-rw-r--r-- | app/views/ci/admin/runners/show.html.haml | 4 | ||||
-rw-r--r-- | app/views/ci/builds/_build.html.haml | 4 | ||||
-rw-r--r-- | app/views/ci/builds/show.html.haml | 69 | ||||
-rw-r--r-- | app/views/ci/commits/_commit.html.haml | 4 | ||||
-rw-r--r-- | app/views/ci/commits/show.html.haml | 55 | ||||
-rw-r--r-- | app/views/ci/projects/_project.html.haml | 7 |
13 files changed, 180 insertions, 144 deletions
diff --git a/app/assets/stylesheets/ci/projects.scss b/app/assets/stylesheets/ci/projects.scss index e5d69360c2c..c63a67ab720 100644 --- a/app/assets/stylesheets/ci/projects.scss +++ b/app/assets/stylesheets/ci/projects.scss @@ -13,31 +13,6 @@ .builds, .projects-table { - .alert-success { - background-color: #6fc995; - border-color: #5bba83; - } - - .alert-danger { - background-color: #eb897f; - border-color: #d4776e; - } - - .alert-info { - background-color: #3498db; - border-color: #2e8ece; - } - - .alert-warning { - background-color: #EB974E; - border-color: #E87E04; - } - - .alert-disabled { - background: $background-color; - border-color: $border-color; - } - .light { border-color: $border-color; } @@ -47,8 +22,8 @@ } td { + color: $gl-gray; vertical-align: middle !important; - border-color: inherit !important; a { font-weight: normal; @@ -58,23 +33,16 @@ } .commit-info { - font-size: 14px; - .attr-name { - font-weight: 300; - color: #666; margin-right: 5px; } pre.commit-message { - font-size: 14px; background: none; padding: 0; margin: 0; border: none; margin: 20px 0; - border-bottom: 1px solid #EEE; - padding-bottom: 20px; border-radius: 0; } } @@ -88,4 +56,38 @@ margin-bottom: 16px; } } + + .ci-status { + padding: 2px 7px; + margin-right: 5px; + border: 1px solid #EEE; + white-space: nowrap; + @include border-radius(4px); + + &.ci-failed { + color: $gl-danger; + border-color: $gl-danger; + } + + &.ci-success { + color: $gl-success; + border-color: $gl-success; + } + + &.ci-info { + color: $gl-info; + border-color: $gl-info; + } + + &.ci-disabled { + color: $gl-gray; + border-color: $gl-gray; + } + + &.ci-pending, + &.ci-running { + color: $gl-warning; + border-color: $gl-warning; + } + } } diff --git a/app/assets/stylesheets/generic/callout.scss b/app/assets/stylesheets/generic/callout.scss new file mode 100644 index 00000000000..f1699d21c9b --- /dev/null +++ b/app/assets/stylesheets/generic/callout.scss @@ -0,0 +1,45 @@ +/* + * Callouts from Bootstrap3 docs + * + * Not quite alerts, but custom and helpful notes for folks reading the docs. + * Requires a base and modifier class. + */ + +/* Common styles for all types */ +.bs-callout { + margin: 20px 0; + padding: 20px; + border-left: 3px solid #eee; + color: #666; + background: #f9f9f9; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} + +/* Variations */ +.bs-callout-danger { + background-color: #fdf7f7; + border-color: #eed3d7; + color: #b94a48; +} +.bs-callout-warning { + background-color: #faf8f0; + border-color: #faebcc; + color: #8a6d3b; +} +.bs-callout-info { + background-color: #f4f8fa; + border-color: #bce8f1; + color: #34789a; +} +.bs-callout-success { + background-color: #dff0d8; + border-color: #5cA64d; + color: #3c763d; +} + diff --git a/app/helpers/ci/application_helper.rb b/app/helpers/ci/application_helper.rb index 7e880b00b3a..9fe6282bb81 100644 --- a/app/helpers/ci/application_helper.rb +++ b/app/helpers/ci/application_helper.rb @@ -28,5 +28,27 @@ module Ci "#{pluralize(seconds, "second")}" end end + + def ci_icon_for_status(status) + icon_name = + case status + when 'success' + 'check-square' + when 'failed' + 'close' + when 'running', 'pending' + 'clock-o' + else + 'circle' + end + + icon(icon_name) + end + + def ci_status_with_icon(status) + content_tag :span, class: "ci-status ci-#{status}" do + ci_icon_for_status(status) + ' '.html_safe + status + end + end end end diff --git a/app/helpers/ci/builds_helper.rb b/app/helpers/ci/builds_helper.rb index cdabdad17d2..5d6e785d951 100644 --- a/app/helpers/ci/builds_helper.rb +++ b/app/helpers/ci/builds_helper.rb @@ -15,27 +15,5 @@ module Ci def build_url(build) ci_project_build_url(build.project, build) end - - def build_status_alert_class(build) - if build.success? - 'alert-success' - elsif build.failed? - 'alert-danger' - elsif build.canceled? - 'alert-disabled' - else - 'alert-warning' - end - end - - def build_icon_css_class(build) - if build.success? - 'fa-circle cgreen' - elsif build.failed? - 'fa-circle cred' - else - 'fa-circle light' - end - end end end diff --git a/app/helpers/ci/commits_helper.rb b/app/helpers/ci/commits_helper.rb index 74de30e006e..9069aed5b4d 100644 --- a/app/helpers/ci/commits_helper.rb +++ b/app/helpers/ci/commits_helper.rb @@ -1,20 +1,5 @@ module Ci module CommitsHelper - def commit_status_alert_class(commit) - return 'alert-info' unless commit - - case commit.status - when 'success' - 'alert-success' - when 'failed', 'canceled' - 'alert-danger' - when 'skipped' - 'alert-disabled' - else - 'alert-warning' - end - end - def ci_commit_path(commit) ci_project_ref_commits_path(commit.project, commit.ref, commit.sha) end diff --git a/app/views/ci/admin/builds/_build.html.haml b/app/views/ci/admin/builds/_build.html.haml index 47f8df8f98e..778d51d03be 100644 --- a/app/views/ci/admin/builds/_build.html.haml +++ b/app/views/ci/admin/builds/_build.html.haml @@ -1,11 +1,11 @@ - if build.commit && build.project - %tr.build.alert{class: build_status_alert_class(build)} + %tr.build %td.build-link = link_to ci_project_build_url(build.project, build) do %strong #{build.id} %td.status - = build.status + = ci_status_with_icon(build.status) %td.commit-link = commit_link(build.commit) diff --git a/app/views/ci/admin/projects/_project.html.haml b/app/views/ci/admin/projects/_project.html.haml index 505dd4b3fdc..c461206c72a 100644 --- a/app/views/ci/admin/projects/_project.html.haml +++ b/app/views/ci/admin/projects/_project.html.haml @@ -1,5 +1,5 @@ - last_commit = project.last_commit -%tr.alert{class: commit_status_alert_class(last_commit) } +%tr %td = project.id %td @@ -7,8 +7,9 @@ %strong= project.name %td - if last_commit - #{last_commit.status} (#{commit_link(last_commit)}) + = ci_status_with_icon(last_commit.status) - if project.last_commit_date + · = time_ago_in_words project.last_commit_date ago - else diff --git a/app/views/ci/admin/runners/show.html.haml b/app/views/ci/admin/runners/show.html.haml index 24e0ad3b070..09905e0eb47 100644 --- a/app/views/ci/admin/runners/show.html.haml +++ b/app/views/ci/admin/runners/show.html.haml @@ -102,9 +102,9 @@ %th Finished at - @builds.each do |build| - %tr.build.alert{class: build_status_alert_class(build)} + %tr.build %td.status - = build.status + = ci_status_with_icon(build.status) %td.status = build.project.name diff --git a/app/views/ci/builds/_build.html.haml b/app/views/ci/builds/_build.html.haml index da306c9f020..515b862e992 100644 --- a/app/views/ci/builds/_build.html.haml +++ b/app/views/ci/builds/_build.html.haml @@ -1,6 +1,6 @@ -%tr.build.alert{class: build_status_alert_class(build)} +%tr.build %td.status - = build.status + = ci_status_with_icon(build.status) %td.build-link = link_to ci_project_build_path(build.project, build) do diff --git a/app/views/ci/builds/show.html.haml b/app/views/ci/builds/show.html.haml index d1e955b5012..839dbf5c554 100644 --- a/app/views/ci/builds/show.html.haml +++ b/app/views/ci/builds/show.html.haml @@ -1,15 +1,16 @@ #up-build-trace - if @commit.matrix? - %ul.nav.nav-tabs.append-bottom-10 + %ul.center-top-menu - @commit.builds_without_retry_sorted.each do |build| %li{class: ('active' if build == @build) } = link_to ci_project_build_url(@project, build) do - %i{class: build_icon_css_class(build)} + = ci_icon_for_status(build.status) %span - Build ##{build.id} - if build.name - · = build.name + - else + = build.id + - unless @commit.builds_without_retry.include?(@build) %li.active @@ -19,34 +20,33 @@ %i.fa.fa-warning-sign This build was retried. -.row - .col-md-9 - .build-head.alert{class: build_status_alert_class(@build)} - %h4 - - if @build.commit.tag? - Build for tag - %code #{@build.ref} - - else - Build for commit - %code #{@build.short_sha} - from - - = link_to ci_project_path(@build.project, ref: @build.ref) do - %span.label.label-primary= "#{@build.ref}" - - - if @build.duration - .pull-right - %span - %i.fa.fa-time - #{duration_in_words(@build.finished_at, @build.started_at)} +.gray-content-block + .build-head + %h4 + - if @build.commit.tag? + Build for tag + %code #{@build.ref} + - else + Build for commit + %strong.monospace= commit_link(@build.commit) + from - .clearfix - = @build.status - .pull-right - = @build.updated_at.stamp('19:00 Aug 27') + = link_to ci_project_path(@build.project, ref: @build.ref) do + %strong.monospace= "#{@build.ref}" + - if @build.duration + .pull-right + %span + %i.fa.fa-time + #{duration_in_words(@build.finished_at, @build.started_at)} + .clearfix + = ci_status_with_icon(@build.status) + .pull-right + = @build.updated_at.stamp('19:00 Aug 27') +.row.prepend-top-default + .col-md-9 .clearfix - if @build.active? .autoscroll-container @@ -150,13 +150,16 @@ %h4.title #{pluralize(@builds.count, "other build")} for #{@build.short_sha}: %table.builds - @builds.each_with_index do |build, i| - %tr.build.alert{class: build_status_alert_class(build)} + %tr.build %td - = link_to ci_project_build_url(@project, build) do - %span ##{build.id} + = ci_icon_for_status(build.status) %td - - if build.name - = build.name + = link_to ci_project_build_url(@project, build) do + - if build.name + = build.name + - else + %span ##{build.id} + %td.status= build.status diff --git a/app/views/ci/commits/_commit.html.haml b/app/views/ci/commits/_commit.html.haml index c1b1988d147..1eacfca944f 100644 --- a/app/views/ci/commits/_commit.html.haml +++ b/app/views/ci/commits/_commit.html.haml @@ -1,6 +1,6 @@ -%tr.build.alert{class: commit_status_alert_class(commit)} +%tr.build %td.status - = commit.status + = ci_status_with_icon(commit.status) - if commit.running? · = commit.stage diff --git a/app/views/ci/commits/show.html.haml b/app/views/ci/commits/show.html.haml index 1aeb557314a..8f38aa84676 100644 --- a/app/views/ci/commits/show.html.haml +++ b/app/views/ci/commits/show.html.haml @@ -1,29 +1,34 @@ .commit-info - %pre.commit-message - #{@commit.git_commit_message} + .append-bottom-20 + = ci_status_with_icon(@commit.status) - .row - .col-sm-6 - - if @commit.compare? - %p - %span.attr-name Compare: - #{gitlab_compare_link(@project, @commit.short_before_sha, @commit.short_sha)} - - else - %p - %span.attr-name Commit: - #{gitlab_commit_link(@project, @commit.sha)} + .gray-content-block.middle-block + %pre.commit-message + #{@commit.git_commit_message} + + .gray-content-block.second-block + .row + .col-sm-6 + - if @commit.compare? + %p + %span.attr-name Compare: + #{gitlab_compare_link(@project, @commit.short_before_sha, @commit.short_sha)} + - else + %p + %span.attr-name Commit: + #{gitlab_commit_link(@project, @commit.sha)} - %p - %span.attr-name Branch: - #{gitlab_ref_link(@project, @commit.ref)} - .col-sm-6 - %p - %span.attr-name Author: - #{@commit.git_author_name} (#{@commit.git_author_email}) - - if @commit.created_at %p - %span.attr-name Created at: - #{@commit.created_at.to_s(:short)} + %span.attr-name Branch: + #{gitlab_ref_link(@project, @commit.ref)} + .col-sm-6 + %p + %span.attr-name Author: + #{@commit.git_author_name} (#{@commit.git_author_email}) + - if @commit.created_at + %p + %span.attr-name Created at: + #{@commit.created_at.to_s(:short)} - if current_user && can?(current_user, :manage_builds, gl_project) .pull-right @@ -42,12 +47,6 @@ .bs-callout.bs-callout-warning \.gitlab-ci.yml not found in this commit -%h3 Status - -.build.alert{class: commit_status_alert_class(@commit)} - .status - = @commit.status.titleize - %h3 Builds - if @commit.duration > 0 diff --git a/app/views/ci/projects/_project.html.haml b/app/views/ci/projects/_project.html.haml index 869747b6eb1..844b6677b3d 100644 --- a/app/views/ci/projects/_project.html.haml +++ b/app/views/ci/projects/_project.html.haml @@ -1,13 +1,15 @@ - if project.gitlab_ci_project - ci_project = project.gitlab_ci_project - last_commit = ci_project.last_commit - %tr.alert{class: commit_status_alert_class(last_commit) } + %tr %td = link_to [:ci, ci_project] do = ci_project.name %td - if last_commit - #{last_commit.status} (#{commit_link(last_commit)}) + = ci_status_with_icon(last_commit.status) + = commit_link(last_commit) + · - if ci_project.last_commit_date = time_ago_in_words ci_project.last_commit_date ago @@ -33,4 +35,3 @@ = form_tag ci_projects_path do = hidden_field_tag :project, project.to_json(methods: [:name_with_namespace, :path_with_namespace, :ssh_url_to_repo]) = submit_tag 'Add project to CI', class: 'btn btn-default btn-sm' -
\ No newline at end of file |