Merge branch '17760-pipeline-builds-design' into 'master'
Resolve "Design updates for Builds & Pipelines" ## What does this MR do? Updates pipelines design ## What are the relevant issue numbers? Part of #18920 Closes #17760 Closes #18479 Closes #19618 ## Screenshots (if relevant) ![Screen_Shot_2016-07-11_at_2.44.22_PM](/uploads/5048928d86093802d84c3bd7f7c5dc85/Screen_Shot_2016-07-11_at_2.44.22_PM.png) ![Screen_Shot_2016-07-11_at_2.32.17_PM](/uploads/a7ab94c8042d33bd06ef633f62bf1c99/Screen_Shot_2016-07-11_at_2.32.17_PM.png) ![Screen_Shot_2016-07-11_at_2.44.43_PM](/uploads/8aa63229ad75d373c30f342d5c86c007/Screen_Shot_2016-07-11_at_2.44.43_PM.png) See merge request !5156
This commit is contained in:
commit
c8ba4ac4c7
|
@ -83,6 +83,7 @@ v 8.10.0 (unreleased)
|
|||
- Style of import project buttons were fixed in the new project page. !5183 (rdemirbay)
|
||||
- Fix GitHub client requests when rate limit is disabled
|
||||
- Optimistic locking for Issues and Merge Requests (Title and description overriding prevention)
|
||||
- Redesign Builds and Pipelines pages
|
||||
|
||||
v 8.9.6
|
||||
- Fix importing of events under notes for GitLab projects. !5154
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
}
|
||||
|
||||
&.s16 { width: 16px; height: 16px; margin-right: 6px; }
|
||||
&.s20 { width: 20px; height: 20px; margin-right: 7px; }
|
||||
&.s24 { width: 24px; height: 24px; margin-right: 8px; }
|
||||
&.s26 { width: 26px; height: 26px; margin-right: 8px; }
|
||||
&.s32 { width: 32px; height: 32px; margin-right: 10px; }
|
||||
|
|
|
@ -17,6 +17,7 @@ $focus-border-color: #3aabf0;
|
|||
$table-border-color: #f0f0f0;
|
||||
$background-color: #fafafa;
|
||||
$dark-background-color: #f7f7f7;
|
||||
$table-text-gray: #8f8f8f;
|
||||
|
||||
/*
|
||||
* Text
|
||||
|
|
|
@ -83,14 +83,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
table.builds {
|
||||
.build-link {
|
||||
a {
|
||||
color: $gl-dark-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.build-trace {
|
||||
background: $ci-output-bg;
|
||||
color: $ci-text-color;
|
||||
|
|
|
@ -1,15 +1,12 @@
|
|||
.pipelines {
|
||||
.stage {
|
||||
max-width: 100px;
|
||||
max-width: 80px;
|
||||
width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.duration, .finished_at {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.commit-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -22,3 +19,136 @@
|
|||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-list {
|
||||
|
||||
&.pipelines,
|
||||
&.builds-content-list {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.table.builds {
|
||||
min-width: 1100px;
|
||||
|
||||
tr {
|
||||
th {
|
||||
padding: 16px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.branch-commit {
|
||||
|
||||
.branch-name {
|
||||
margin-left: 8px;
|
||||
font-weight: bold;
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 6px;
|
||||
height: 14px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.commit-id {
|
||||
color: $gl-link-color;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.commit-title {
|
||||
margin-top: 4px;
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
|
||||
.label {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.duration,
|
||||
.finished-at {
|
||||
color: $table-text-gray;
|
||||
margin: 4px 0;
|
||||
|
||||
.fa {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 12px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fa,
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pipeline-actions {
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
color: $table-text-gray;
|
||||
}
|
||||
|
||||
.dropdown-toggle,
|
||||
.dropdown-menu {
|
||||
color: $table-text-gray;
|
||||
|
||||
.fa {
|
||||
color: $table-text-gray;
|
||||
margin-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
color: $white-light;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
&.open {
|
||||
.btn-default {
|
||||
background-color: $white-normal;
|
||||
border-color: $border-white-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.build-link {
|
||||
|
||||
a {
|
||||
color: $gl-dark-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ module AppearancesHelper
|
|||
end
|
||||
end
|
||||
|
||||
def navbar_icon(icon_name, size: 16)
|
||||
def custom_icon(icon_name, size: 16)
|
||||
render "shared/icons/#{icon_name}.svg", size: size
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,31 +1,41 @@
|
|||
- project = build.project
|
||||
%tr.build
|
||||
%tr.build.commit
|
||||
%td.status
|
||||
= ci_status_with_icon(build.status)
|
||||
|
||||
%td.build-link
|
||||
%td
|
||||
.branch-commit
|
||||
- if can?(current_user, :read_build, build.project)
|
||||
= link_to namespace_project_build_url(build.project.namespace, build.project, build) do
|
||||
%strong Build ##{build.id}
|
||||
%span.build-link ##{build.id}
|
||||
- else
|
||||
%strong Build ##{build.id}
|
||||
%span.build-link ##{build.id}
|
||||
|
||||
- if build.stuck?
|
||||
%i.fa.fa-warning.text-warning
|
||||
|
||||
- if build.ref
|
||||
= link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
|
||||
- else
|
||||
.light none
|
||||
= custom_icon("icon_commit")
|
||||
|
||||
= link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "monospace commit-id"
|
||||
|
||||
.label-container
|
||||
- if build.tags.any?
|
||||
- build.tags.each do |tag|
|
||||
%span.label.label-primary
|
||||
= tag
|
||||
- if build.try(:trigger_request)
|
||||
%span.label.label-info triggered
|
||||
- if build.try(:allow_failure)
|
||||
%span.label.label-danger allowed to fail
|
||||
|
||||
%td
|
||||
- if project
|
||||
= link_to project.name_with_namespace, admin_namespace_project_path(project.namespace, project)
|
||||
|
||||
%td
|
||||
= link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "monospace"
|
||||
|
||||
%td
|
||||
- if build.ref
|
||||
= link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref)
|
||||
- else
|
||||
.light none
|
||||
|
||||
%td
|
||||
- if build.try(:runner)
|
||||
= runner_link(build.runner)
|
||||
|
@ -36,21 +46,14 @@
|
|||
#{build.stage} / #{build.name}
|
||||
|
||||
%td
|
||||
- if build.tags.any?
|
||||
- build.tags.each do |tag|
|
||||
%span.label.label-primary
|
||||
= tag
|
||||
- if build.try(:trigger_request)
|
||||
%span.label.label-info triggered
|
||||
- if build.try(:allow_failure)
|
||||
%span.label.label-danger allowed to fail
|
||||
|
||||
%td.duration
|
||||
- if build.duration
|
||||
#{duration_in_words(build.finished_at, build.started_at)}
|
||||
%p.duration
|
||||
= custom_icon("icon_timer")
|
||||
= duration_in_numbers(build.finished_at, build.started_at)
|
||||
|
||||
%td.timestamp
|
||||
- if build.finished_at
|
||||
%p.finished-at
|
||||
= icon("calendar")
|
||||
%span #{time_ago_with_tooltip(build.finished_at)}
|
||||
|
||||
- if defined?(coverage) && coverage
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
.row-content-block.second-block
|
||||
#{(@scope || 'all').capitalize} builds
|
||||
|
||||
%ul.content-list
|
||||
%ul.content-list.builds-content-list
|
||||
- if @builds.blank?
|
||||
%li
|
||||
.nothing-here-block No builds to show
|
||||
|
@ -37,15 +37,11 @@
|
|||
%thead
|
||||
%tr
|
||||
%th Status
|
||||
%th Build ID
|
||||
%th Project
|
||||
%th Commit
|
||||
%th Ref
|
||||
%th Project
|
||||
%th Runner
|
||||
%th Name
|
||||
%th Tags
|
||||
%th Duration
|
||||
%th Finished at
|
||||
%th
|
||||
%th
|
||||
|
||||
- @builds.each do |build|
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
= link_to ci_lint_path, class: 'btn btn-default' do
|
||||
%span CI Lint
|
||||
|
||||
%ul.content-list
|
||||
%ul.content-list.builds-content-list
|
||||
- if @builds.blank?
|
||||
%li
|
||||
.nothing-here-block No builds to show
|
||||
|
@ -46,14 +46,10 @@
|
|||
%thead
|
||||
%tr
|
||||
%th Status
|
||||
%th Build ID
|
||||
%th Commit
|
||||
%th Ref
|
||||
%th Stage
|
||||
%th Name
|
||||
%th Tags
|
||||
%th Duration
|
||||
%th Finished at
|
||||
%th
|
||||
- if @project.build_coverage_enabled?
|
||||
%th Coverage
|
||||
%th
|
||||
|
|
|
@ -1,32 +1,45 @@
|
|||
%tr.build
|
||||
%tr.build.commit
|
||||
%td.status
|
||||
- if can?(current_user, :read_build, build)
|
||||
= ci_status_with_icon(build.status, namespace_project_build_url(build.project.namespace, build.project, build))
|
||||
- else
|
||||
= ci_status_with_icon(build.status)
|
||||
|
||||
%td.build-link
|
||||
%td
|
||||
.branch-commit
|
||||
- if can?(current_user, :read_build, build)
|
||||
= link_to namespace_project_build_url(build.project.namespace, build.project, build) do
|
||||
%strong ##{build.id}
|
||||
%span ##{build.id}
|
||||
- else
|
||||
%strong ##{build.id}
|
||||
%span ##{build.id}
|
||||
|
||||
- if build.stuck?
|
||||
= icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
|
||||
- if defined?(retried) && retried
|
||||
= icon('warning', class: 'text-warning has-tooltip', title: 'Build was retried.')
|
||||
|
||||
- if defined?(commit_sha) && commit_sha
|
||||
%td
|
||||
= link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "monospace"
|
||||
|
||||
- if defined?(ref) && ref
|
||||
%td
|
||||
- if build.ref
|
||||
= link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref)
|
||||
= link_to build.ref, namespace_project_commits_path(build.project.namespace, build.project, build.ref), class: "monospace branch-name"
|
||||
- else
|
||||
.light none
|
||||
= custom_icon("icon_commit")
|
||||
|
||||
- if defined?(commit_sha) && commit_sha
|
||||
= link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "commit-id monospace"
|
||||
|
||||
.label-container
|
||||
- if build.tags.any?
|
||||
- build.tags.each do |tag|
|
||||
%span.label.label-primary
|
||||
= tag
|
||||
- if build.try(:trigger_request)
|
||||
%span.label.label-info triggered
|
||||
- if build.try(:allow_failure)
|
||||
%span.label.label-danger allowed to fail
|
||||
- if defined?(retried) && retried
|
||||
%span.label.label-warning retried
|
||||
|
||||
|
||||
- if defined?(runner) && runner
|
||||
%td
|
||||
|
@ -43,24 +56,13 @@
|
|||
= build.name
|
||||
|
||||
%td
|
||||
.label-container
|
||||
- if build.tags.any?
|
||||
- build.tags.each do |tag|
|
||||
%span.label.label-primary
|
||||
= tag
|
||||
- if build.try(:trigger_request)
|
||||
%span.label.label-info triggered
|
||||
- if build.try(:allow_failure)
|
||||
%span.label.label-danger allowed to fail
|
||||
- if defined?(retried) && retried
|
||||
%span.label.label-warning retried
|
||||
|
||||
%td.duration
|
||||
- if build.duration
|
||||
#{duration_in_words(build.finished_at, build.started_at)}
|
||||
|
||||
%td.timestamp
|
||||
%p.duration
|
||||
= custom_icon("icon_timer")
|
||||
= duration_in_numbers(build.finished_at, build.started_at)
|
||||
- if build.finished_at
|
||||
%p.finished-at
|
||||
= icon("calendar")
|
||||
%span #{time_ago_with_tooltip(build.finished_at)}
|
||||
|
||||
- if defined?(coverage) && coverage
|
||||
|
@ -79,4 +81,4 @@
|
|||
= icon('remove', class: 'cred')
|
||||
- elsif defined?(allow_retry) && allow_retry && build.retryable?
|
||||
= link_to retry_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Retry', class: 'btn btn-build' do
|
||||
= icon('refresh')
|
||||
= icon('repeat')
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
- status = pipeline.status
|
||||
%tr.commit
|
||||
%td.commit-link
|
||||
= link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id), class: "ci-status ci-#{status}" do
|
||||
= ci_icon_for_status(status)
|
||||
%strong ##{pipeline.id}
|
||||
= link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id) do
|
||||
= ci_status_with_icon(status)
|
||||
|
||||
|
||||
%td
|
||||
%div.branch-commit
|
||||
.branch-commit
|
||||
= link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id) do
|
||||
%span ##{pipeline.id}
|
||||
- if pipeline.ref
|
||||
= link_to pipeline.ref, namespace_project_commits_path(@project.namespace, @project, pipeline.ref), class: "monospace"
|
||||
·
|
||||
= link_to pipeline.ref, namespace_project_commits_path(@project.namespace, @project, pipeline.ref), class: "monospace branch-name"
|
||||
= custom_icon("icon_commit")
|
||||
= link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha), class: "commit-id monospace"
|
||||
|
||||
- if pipeline.tag?
|
||||
%span.label.label-primary tag
|
||||
- elsif pipeline.latest?
|
||||
|
@ -25,6 +26,7 @@
|
|||
|
||||
%p.commit-title
|
||||
- if commit = pipeline.commit
|
||||
= commit_author_avatar(commit, size: 20)
|
||||
= link_to_gfm truncate(commit.title, length: 60), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "commit-row-message"
|
||||
- else
|
||||
Cant find HEAD commit for this branch
|
||||
|
@ -45,15 +47,30 @@
|
|||
%td
|
||||
- if pipeline.started_at && pipeline.finished_at
|
||||
%p.duration
|
||||
= custom_icon("icon_timer")
|
||||
= duration_in_numbers(pipeline.finished_at, pipeline.started_at)
|
||||
- if pipeline.finished_at
|
||||
%p.finished-at
|
||||
= icon("calendar")
|
||||
#{time_ago_with_tooltip(pipeline.finished_at)}
|
||||
|
||||
%td
|
||||
%td.pipeline-actions
|
||||
.controls.hidden-xs.pull-right
|
||||
- artifacts = pipeline.builds.latest.select { |b| b.artifacts? }
|
||||
- if artifacts.present?
|
||||
.dropdown.inline.build-artifacts
|
||||
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
|
||||
= icon('download')
|
||||
.btn-group.inline
|
||||
.btn-group
|
||||
%a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
|
||||
= icon("play")
|
||||
%b.caret
|
||||
%ul.dropdown-menu.dropdown-menu-align-right
|
||||
%li
|
||||
= link_to '#' do
|
||||
= icon("play")
|
||||
%span Deploy to production
|
||||
.btn-group
|
||||
%a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
|
||||
= icon("download")
|
||||
%b.caret
|
||||
%ul.dropdown-menu.dropdown-menu-align-right
|
||||
- artifacts.each do |build|
|
||||
|
|
|
@ -42,9 +42,7 @@
|
|||
%th Status
|
||||
%th Build ID
|
||||
%th Name
|
||||
%th Tags
|
||||
%th Duration
|
||||
%th Finished at
|
||||
%th
|
||||
- if pipeline.project.build_coverage_enabled?
|
||||
%th Coverage
|
||||
%th
|
||||
|
|
|
@ -50,10 +50,12 @@
|
|||
|
||||
%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
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
Code, test, and deploy together
|
||||
.blank-state
|
||||
.blank-state-icon
|
||||
= navbar_icon("issues", size: 50)
|
||||
= custom_icon("issues", size: 50)
|
||||
%h3.blank-state-title
|
||||
You don't have any issues right now.
|
||||
%p.blank-state-text
|
||||
|
|
|
@ -45,13 +45,13 @@
|
|||
.table-holder
|
||||
%table.table.builds
|
||||
%tbody
|
||||
%th ID
|
||||
%th Status
|
||||
%th Commit
|
||||
- stages.each do |stage|
|
||||
%th.stage
|
||||
%span.has-tooltip{ title: "#{stage.titleize}" }
|
||||
= stage.titleize
|
||||
%th Duration
|
||||
%th
|
||||
%th
|
||||
= render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
|
||||
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 726 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="#8F8F8F" fill-rule="evenodd"><path d="M29.513 10.134A15.922 15.922 0 0 0 23 7.28V6h2.993C26.55 6 27 5.552 27 5V2a1 1 0 0 0-1.007-1H14.007C13.45 1 13 1.448 13 2v3a1 1 0 0 0 1.007 1H17v1.28C9.597 8.686 4 15.19 4 23c0 8.837 7.163 16 16 16s16-7.163 16-16c0-3.461-1.099-6.665-2.967-9.283l1.327-1.58a2.498 2.498 0 0 0-.303-3.53 2.499 2.499 0 0 0-3.528.315l-1.016 1.212zM20 34c6.075 0 11-4.925 11-11s-4.925-11-11-11S9 16.925 9 23s4.925 11 11 11z"/><path d="M19 21h-4.002c-.552 0-.998.452-.998 1.01v1.98c0 .567.447 1.01.998 1.01h7.004c.274 0 .521-.111.701-.291a.979.979 0 0 0 .297-.704v-8.01c0-.54-.452-.995-1.01-.995h-1.98a.997.997 0 0 0-1.01.995V21z"/></g></svg>
|
After Width: | Height: | Size: 748 B |
Loading…
Reference in New Issue