Finished up margin JS logic
This commit is contained in:
parent
eb55ac7d4d
commit
5defad2d21
4 changed files with 82 additions and 70 deletions
|
@ -126,6 +126,9 @@
|
|||
new TreeView();
|
||||
}
|
||||
break;
|
||||
case 'projects:pipelines:show':
|
||||
new window.gl.Pipelines();
|
||||
break;
|
||||
case 'groups:activity':
|
||||
new Activities();
|
||||
break;
|
||||
|
|
|
@ -1,36 +1,40 @@
|
|||
(function() {
|
||||
((global) => {
|
||||
|
||||
function addMarginToBuild () {
|
||||
const $secondChildBuildNode = $('.build:nth-child(2)');
|
||||
const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
|
||||
// const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
|
||||
if ($secondChildBuildNode.length) {
|
||||
$secondChildBuildNode.closest('.stage-column').addClass('left-margin');
|
||||
$firstChildBuildNode.addClass('left-connector');
|
||||
class Pipelines {
|
||||
constructor() {
|
||||
$(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
|
||||
$(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
|
||||
}
|
||||
|
||||
toggleGraph() {
|
||||
const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
|
||||
const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
|
||||
const $btnText = $(this).find('.toggle-btn-text');
|
||||
|
||||
$($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
|
||||
|
||||
const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
|
||||
|
||||
graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
|
||||
}
|
||||
|
||||
addMarginToBuildColumns() {
|
||||
const $secondChildBuildNode = $('.build:nth-child(2)');
|
||||
if ($secondChildBuildNode.length) {
|
||||
const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
|
||||
const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
|
||||
const $previousColumn = $multiBuildColumn.prev('.stage-column');
|
||||
$multiBuildColumn.addClass('left-margin');
|
||||
$firstChildBuildNode.addClass('left-connector');
|
||||
$previousColumn.each(function() {
|
||||
$this = $(this);
|
||||
if ($('.build', $this).length === 1) $this.addClass('no-margin');
|
||||
});
|
||||
}
|
||||
$('.pipeline-graph-container').removeClass('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleGraph() {
|
||||
const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
|
||||
const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
|
||||
const $btnText = $(this).find('.toggle-btn-text');
|
||||
const $icon = $(this).find('.fa');
|
||||
global.Pipelines = Pipelines;
|
||||
|
||||
$($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
|
||||
|
||||
const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
|
||||
const expandIcon = 'fa-caret-down';
|
||||
const hideIcon = 'fa-caret-up';
|
||||
|
||||
if(graphCollapsed) {
|
||||
$btnText.text('Expand');
|
||||
$icon.removeClass(hideIcon).addClass(expandIcon);
|
||||
} else {
|
||||
$btnText.text('Hide');
|
||||
$icon.removeClass(expandIcon).addClass(hideIcon);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('click', '.toggle-pipeline-btn', toggleGraph);
|
||||
$(document).on('ready', addMarginToBuild);
|
||||
})();
|
||||
})(window.gl || (window.gl = {}));
|
||||
|
|
|
@ -326,6 +326,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
@ -1,45 +1,46 @@
|
|||
.row-content-block.build-content.middle-block.pipeline-actions
|
||||
.pull-right
|
||||
.btn.btn-grouped.btn-white.toggle-pipeline-btn
|
||||
%span.toggle-btn-text Hide
|
||||
%span pipeline graph
|
||||
= icon('caret-up')
|
||||
- if can?(current_user, :update_pipeline, pipeline.project)
|
||||
- if pipeline.builds.latest.failed.any?(&:retryable?)
|
||||
= link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
|
||||
.pipeline-graph-container.hidden
|
||||
.row-content-block.build-content.middle-block.pipeline-actions
|
||||
.pull-right
|
||||
.btn.btn-grouped.btn-white.toggle-pipeline-btn
|
||||
%span.toggle-btn-text Hide
|
||||
%span pipeline graph
|
||||
%span.caret
|
||||
- if can?(current_user, :update_pipeline, pipeline.project)
|
||||
- if pipeline.builds.latest.failed.any?(&:retryable?)
|
||||
= link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
|
||||
|
||||
- if pipeline.builds.running_or_pending.any?
|
||||
= link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
|
||||
- if pipeline.builds.running_or_pending.any?
|
||||
= link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
|
||||
|
||||
.oneline.clearfix
|
||||
- if defined?(pipeline_details) && pipeline_details
|
||||
Pipeline
|
||||
= link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
|
||||
with
|
||||
= pluralize pipeline.statuses.count(:id), "build"
|
||||
- if pipeline.ref
|
||||
for
|
||||
= link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
|
||||
- if defined?(link_to_commit) && link_to_commit
|
||||
for commit
|
||||
= link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
|
||||
- if pipeline.duration
|
||||
in
|
||||
= time_interval_in_words pipeline.duration
|
||||
.oneline.clearfix
|
||||
- if defined?(pipeline_details) && pipeline_details
|
||||
Pipeline
|
||||
= link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
|
||||
with
|
||||
= pluralize pipeline.statuses.count(:id), "build"
|
||||
- if pipeline.ref
|
||||
for
|
||||
= link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
|
||||
- if defined?(link_to_commit) && link_to_commit
|
||||
for commit
|
||||
= link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
|
||||
- if pipeline.duration
|
||||
in
|
||||
= time_interval_in_words pipeline.duration
|
||||
|
||||
.row-content-block.build-content.middle-block.pipeline-graph
|
||||
.pipeline-visualization
|
||||
%ul.stage-column-list
|
||||
- stages = pipeline.stages_with_latest_statuses
|
||||
- stages.each do |stage, statuses|
|
||||
%li.stage-column
|
||||
.stage-name
|
||||
%a{name: stage}
|
||||
- if stage
|
||||
= stage.titleize
|
||||
.builds-container
|
||||
%ul
|
||||
= render "projects/commit/pipeline_stage", statuses: statuses
|
||||
.row-content-block.build-content.middle-block.pipeline-graph
|
||||
.pipeline-visualization
|
||||
%ul.stage-column-list
|
||||
- stages = pipeline.stages_with_latest_statuses
|
||||
- stages.each do |stage, statuses|
|
||||
%li.stage-column
|
||||
.stage-name
|
||||
%a{name: stage}
|
||||
- if stage
|
||||
= stage.titleize
|
||||
.builds-container
|
||||
%ul
|
||||
= render "projects/commit/pipeline_stage", statuses: statuses
|
||||
|
||||
|
||||
- if pipeline.yaml_errors.present?
|
||||
|
|
Loading…
Reference in a new issue