Commit cd85baf5 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'pipelines-graph-html-css' into 'master'

Pipelines graph HTML and CSS improvements  and bug fixing

Closes #26257

See merge request !8443
parents 3b8c81fe d1fc4ec0
...@@ -525,3 +525,4 @@ Pipeline Graph ...@@ -525,3 +525,4 @@ Pipeline Graph
*/ */
$stage-hover-bg: #eaf3fc; $stage-hover-bg: #eaf3fc;
$stage-hover-border: #d1e7fc; $stage-hover-border: #d1e7fc;
$action-icon-color: #d6d6d6;
This diff is collapsed.
-# Renders the content of each li in the dropdown
- subject = local_assigns.fetch(:subject)
- status = subject.detailed_status(current_user)
- klass = "ci-status-icon ci-status-icon-#{status.group}"
- tooltip = "#{subject.name} - #{status.label}"
- if status.has_details?
= link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip } do
%span{ class: klass }= custom_icon(status.icon)
%span.ci-build-text= subject.name
- else
.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } }
%span{ class: klass }= custom_icon(status.icon)
%span.ci-build-text= subject.name
- if status.has_action?
= link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title } do
= icon(status.action_icon, class: status.action_class)
...@@ -47,21 +47,18 @@ ...@@ -47,21 +47,18 @@
- icon_status = "#{detailed_status.icon}_borderless" - icon_status = "#{detailed_status.icon}_borderless"
- status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}" - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
.stage-container.mini-pipeline-graph .stage-container.dropdown.js-mini-pipeline-graph
.dropdown.inline.build-content %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } }
%button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } } = custom_icon(icon_status)
%span.has-tooltip{ class: status_klass } = icon('caret-down')
%span.mini-pipeline-graph-icon-container
%span{ class: status_klass }= custom_icon(icon_status)
= icon('caret-down', class: 'dropdown-caret')
.js-builds-dropdown-container %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
.dropdown-menu.grouped-pipeline-dropdown .arrow-up
.arrow-up .js-builds-dropdown-list.scrollable-menu
.js-builds-dropdown-list
.js-builds-dropdown-loading.builds-dropdown-loading.hidden
%span.fa.fa-spinner.fa-spin
.js-builds-dropdown-loading.builds-dropdown-loading.hidden
%span.fa.fa-spinner.fa-spin
%td %td
- if pipeline.duration - if pipeline.duration
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
%div %div
.nothing-here-block No pipelines to show .nothing-here-block No pipelines to show
- else - else
.table-holder .table-holder.pipelines
%table.table.ci-table.js-pipeline-table %table.table.ci-table.js-pipeline-table
%thead %thead
%th.pipeline-status Status %th.pipeline-status Status
......
%ul - @stage.statuses.latest.each do |status|
- @stage.statuses.latest.each do |status| %li
%li.dropdown-build = render 'ci/status/dropdown_graph_badge', subject: status
= render 'ci/status/graph_badge', subject: status
...@@ -5,9 +5,10 @@ ...@@ -5,9 +5,10 @@
%span.ci-status-text %span.ci-status-text
= name = name
%span.dropdown-counter-badge= subject.size %span.dropdown-counter-badge= subject.size
.dropdown-menu.grouped-pipeline-dropdown
%ul.dropdown-menu.big-pipeline-graph-dropdown-menu.js-grouped-pipeline-dropdown
.arrow .arrow
%ul .scrollable-menu
- subject.each do |status| - subject.each do |status|
%li.dropdown-build %li
= render 'ci/status/graph_badge', subject: status = render 'ci/status/dropdown_graph_badge', subject: status
---
title: Fixes and Improves CSS and HTML problems in mini pipeline graph and builds dropdown
merge_request: 8443
author:
...@@ -183,7 +183,7 @@ describe 'Pipelines', :feature, :js do ...@@ -183,7 +183,7 @@ describe 'Pipelines', :feature, :js do
it 'should render a mini pipeline graph' do it 'should render a mini pipeline graph' do
endpoint = stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: build.name) endpoint = stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: build.name)
expect(page).to have_selector('.mini-pipeline-graph') expect(page).to have_selector('.js-mini-pipeline-graph')
expect(page).to have_selector(".js-builds-dropdown-button[data-stage-endpoint='#{endpoint}']") expect(page).to have_selector(".js-builds-dropdown-button[data-stage-endpoint='#{endpoint}']")
end end
...@@ -201,7 +201,7 @@ describe 'Pipelines', :feature, :js do ...@@ -201,7 +201,7 @@ describe 'Pipelines', :feature, :js do
wait_for_ajax wait_for_ajax
find('a.ci-action-icon-container').trigger('click') find('a.js-ci-action-icon').trigger('click')
expect(page).not_to have_content('Cancel running') expect(page).not_to have_content('Cancel running')
end end
end end
......
...@@ -29,7 +29,7 @@ describe 'projects/pipelines/show' do ...@@ -29,7 +29,7 @@ describe 'projects/pipelines/show' do
render render
expect(rendered).to have_css('.js-pipeline-graph') expect(rendered).to have_css('.js-pipeline-graph')
expect(rendered).to have_css('.grouped-pipeline-dropdown') expect(rendered).to have_css('.js-grouped-pipeline-dropdown')
# stages # stages
expect(rendered).to have_text('Build') expect(rendered).to have_text('Build')
......
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