Commit 0b3f563b authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !1339
parents 9be1c08e 4daffbe4
...@@ -13,31 +13,6 @@ ...@@ -13,31 +13,6 @@
.builds, .builds,
.projects-table { .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 { .light {
border-color: $border-color; border-color: $border-color;
} }
...@@ -47,8 +22,8 @@ ...@@ -47,8 +22,8 @@
} }
td { td {
color: $gl-gray;
vertical-align: middle !important; vertical-align: middle !important;
border-color: inherit !important;
a { a {
font-weight: normal; font-weight: normal;
...@@ -58,23 +33,16 @@ ...@@ -58,23 +33,16 @@
} }
.commit-info { .commit-info {
font-size: 14px;
.attr-name { .attr-name {
font-weight: 300;
color: #666;
margin-right: 5px; margin-right: 5px;
} }
pre.commit-message { pre.commit-message {
font-size: 14px;
background: none; background: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
margin: 20px 0; margin: 20px 0;
border-bottom: 1px solid #EEE;
padding-bottom: 20px;
border-radius: 0; border-radius: 0;
} }
} }
...@@ -88,4 +56,38 @@ ...@@ -88,4 +56,38 @@
margin-bottom: 16px; 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;
}
}
} }
/*
* 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;
}
...@@ -28,5 +28,27 @@ module Ci ...@@ -28,5 +28,27 @@ module Ci
"#{pluralize(seconds, "second")}" "#{pluralize(seconds, "second")}"
end end
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) + '&nbsp;'.html_safe + status
end
end
end end
end end
...@@ -15,27 +15,5 @@ module Ci ...@@ -15,27 +15,5 @@ module Ci
def build_url(build) def build_url(build)
ci_project_build_url(build.project, build) ci_project_build_url(build.project, build)
end 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
end end
module Ci module Ci
module CommitsHelper 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) def ci_commit_path(commit)
ci_project_ref_commits_path(commit.project, commit.ref, commit.sha) ci_project_ref_commits_path(commit.project, commit.ref, commit.sha)
end end
......
- if build.commit && build.project - if build.commit && build.project
%tr.build.alert{class: build_status_alert_class(build)} %tr.build
%td.build-link %td.build-link
= link_to ci_project_build_url(build.project, build) do = link_to ci_project_build_url(build.project, build) do
%strong #{build.id} %strong #{build.id}
%td.status %td.status
= build.status = ci_status_with_icon(build.status)
%td.commit-link %td.commit-link
= commit_link(build.commit) = commit_link(build.commit)
......
- last_commit = project.last_commit - last_commit = project.last_commit
%tr.alert{class: commit_status_alert_class(last_commit) } %tr
%td %td
= project.id = project.id
%td %td
...@@ -7,8 +7,9 @@ ...@@ -7,8 +7,9 @@
%strong= project.name %strong= project.name
%td %td
- if last_commit - if last_commit
#{last_commit.status} (#{commit_link(last_commit)}) = ci_status_with_icon(last_commit.status)
- if project.last_commit_date - if project.last_commit_date
&middot;
= time_ago_in_words project.last_commit_date = time_ago_in_words project.last_commit_date
ago ago
- else - else
......
...@@ -102,9 +102,9 @@ ...@@ -102,9 +102,9 @@
%th Finished at %th Finished at
- @builds.each do |build| - @builds.each do |build|
%tr.build.alert{class: build_status_alert_class(build)} %tr.build
%td.status %td.status
= build.status = ci_status_with_icon(build.status)
%td.status %td.status
= build.project.name = build.project.name
......
%tr.build.alert{class: build_status_alert_class(build)} %tr.build
%td.status %td.status
= build.status = ci_status_with_icon(build.status)
%td.build-link %td.build-link
= link_to ci_project_build_path(build.project, build) do = link_to ci_project_build_path(build.project, build) do
......
#up-build-trace #up-build-trace
- if @commit.matrix? - if @commit.matrix?
%ul.nav.nav-tabs.append-bottom-10 %ul.center-top-menu
- @commit.builds_without_retry_sorted.each do |build| - @commit.builds_without_retry_sorted.each do |build|
%li{class: ('active' if build == @build) } %li{class: ('active' if build == @build) }
= link_to ci_project_build_url(@project, build) do = link_to ci_project_build_url(@project, build) do
%i{class: build_icon_css_class(build)} = ci_icon_for_status(build.status)
%span %span
Build ##{build.id}
- if build.name - if build.name
&middot;
= build.name = build.name
- else
= build.id
- unless @commit.builds_without_retry.include?(@build) - unless @commit.builds_without_retry.include?(@build)
%li.active %li.active
...@@ -19,20 +20,19 @@ ...@@ -19,20 +20,19 @@
%i.fa.fa-warning-sign %i.fa.fa-warning-sign
This build was retried. This build was retried.
.row .gray-content-block
.col-md-9 .build-head
.build-head.alert{class: build_status_alert_class(@build)}
%h4 %h4
- if @build.commit.tag? - if @build.commit.tag?
Build for tag Build for tag
%code #{@build.ref} %code #{@build.ref}
- else - else
Build for commit Build for commit
%code #{@build.short_sha} %strong.monospace= commit_link(@build.commit)
from from
= link_to ci_project_path(@build.project, ref: @build.ref) do = link_to ci_project_path(@build.project, ref: @build.ref) do
%span.label.label-primary= "#{@build.ref}" %strong.monospace= "#{@build.ref}"
- if @build.duration - if @build.duration
.pull-right .pull-right
...@@ -41,12 +41,12 @@ ...@@ -41,12 +41,12 @@
#{duration_in_words(@build.finished_at, @build.started_at)} #{duration_in_words(@build.finished_at, @build.started_at)}
.clearfix .clearfix
= @build.status = ci_status_with_icon(@build.status)
.pull-right .pull-right
= @build.updated_at.stamp('19:00 Aug 27') = @build.updated_at.stamp('19:00 Aug 27')
.row.prepend-top-default
.col-md-9
.clearfix .clearfix
- if @build.active? - if @build.active?
.autoscroll-container .autoscroll-container
...@@ -150,13 +150,16 @@ ...@@ -150,13 +150,16 @@
%h4.title #{pluralize(@builds.count, "other build")} for #{@build.short_sha}: %h4.title #{pluralize(@builds.count, "other build")} for #{@build.short_sha}:
%table.builds %table.builds
- @builds.each_with_index do |build, i| - @builds.each_with_index do |build, i|
%tr.build.alert{class: build_status_alert_class(build)} %tr.build
%td %td
= link_to ci_project_build_url(@project, build) do = ci_icon_for_status(build.status)
%span ##{build.id}
%td %td
= link_to ci_project_build_url(@project, build) do
- if build.name - if build.name
= build.name = build.name
- else
%span ##{build.id}
%td.status= build.status %td.status= build.status
......
%tr.build.alert{class: commit_status_alert_class(commit)} %tr.build
%td.status %td.status
= commit.status = ci_status_with_icon(commit.status)
- if commit.running? - if commit.running?
&middot; &middot;
= commit.stage = commit.stage
......
.commit-info .commit-info
.append-bottom-20
= ci_status_with_icon(@commit.status)
.gray-content-block.middle-block
%pre.commit-message %pre.commit-message
#{@commit.git_commit_message} #{@commit.git_commit_message}
.gray-content-block.second-block
.row .row
.col-sm-6 .col-sm-6
- if @commit.compare? - if @commit.compare?
...@@ -42,12 +47,6 @@ ...@@ -42,12 +47,6 @@
.bs-callout.bs-callout-warning .bs-callout.bs-callout-warning
\.gitlab-ci.yml not found in this commit \.gitlab-ci.yml not found in this commit
%h3 Status
.build.alert{class: commit_status_alert_class(@commit)}
.status
= @commit.status.titleize
%h3 %h3
Builds Builds
- if @commit.duration > 0 - if @commit.duration > 0
......
- if project.gitlab_ci_project - if project.gitlab_ci_project
- ci_project = project.gitlab_ci_project - ci_project = project.gitlab_ci_project
- last_commit = ci_project.last_commit - last_commit = ci_project.last_commit
%tr.alert{class: commit_status_alert_class(last_commit) } %tr
%td %td
= link_to [:ci, ci_project] do = link_to [:ci, ci_project] do
= ci_project.name = ci_project.name
%td %td
- if last_commit - if last_commit
#{last_commit.status} (#{commit_link(last_commit)}) = ci_status_with_icon(last_commit.status)
= commit_link(last_commit)
&middot;
- if ci_project.last_commit_date - if ci_project.last_commit_date
= time_ago_in_words ci_project.last_commit_date = time_ago_in_words ci_project.last_commit_date
ago ago
...@@ -33,4 +35,3 @@ ...@@ -33,4 +35,3 @@
= form_tag ci_projects_path do = form_tag ci_projects_path do
= hidden_field_tag :project, project.to_json(methods: [:name_with_namespace, :path_with_namespace, :ssh_url_to_repo]) = 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' = submit_tag 'Add project to CI', class: 'btn btn-default btn-sm'
\ No newline at end of file
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