Commit b1613e54 authored by Filipa Lacerda's avatar Filipa Lacerda

Makes API call when stage is clicked

parent 7269df28
...@@ -141,6 +141,11 @@ ...@@ -141,6 +141,11 @@
case 'projects:merge_requests:builds': case 'projects:merge_requests:builds':
new MergedButtons(); new MergedButtons();
break; break;
case 'projects:merge_requests:pipelines':
new gl.MiniPipelineGraph({
container: '.js-pipeline-table',
});
break;
case "projects:merge_requests:diffs": case "projects:merge_requests:diffs":
new gl.Diff(); new gl.Diff();
new ZenMode(); new ZenMode();
...@@ -158,6 +163,11 @@ ...@@ -158,6 +163,11 @@
new ZenMode(); new ZenMode();
shortcut_handler = new ShortcutsNavigation(); shortcut_handler = new ShortcutsNavigation();
break; break;
case 'projects:commit:pipelines':
new gl.MiniPipelineGraph({
container: '.js-pipeline-table',
});
break;
case 'projects:commit:builds': case 'projects:commit:builds':
new gl.Pipelines(); new gl.Pipelines();
break; break;
...@@ -172,6 +182,11 @@ ...@@ -172,6 +182,11 @@
new TreeView(); new TreeView();
} }
break; break;
case 'projects:pipelines:index':
new gl.MiniPipelineGraph({
container: '.js-pipeline-table',
});
break;
case 'projects:pipelines:builds': case 'projects:pipelines:builds':
case 'projects:pipelines:show': case 'projects:pipelines:show':
const { controllerAction } = document.querySelector('.js-pipeline-container').dataset; const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
......
/* global Flash */
/**
* In each pipelines table we have a mini pipeline graph for each pipeline.
*
* When we click in a pipeline stage, we need to make an API call to get the
* builds list to render in a dropdown.
*
* The container should be the table element.
*
* The stage icon clicked needs to have the following HTML structure:
* <div>
* <button class="dropdown js-builds-dropdown-button"></button>
* <div class="js-builds-dropdown-container"></div>
* </div>
*/
(() => {
class MiniPipelineGraph {
constructor({ container }) {
this.container = container;
this.getBuildsList = this.getBuildsList.bind(this);
this.bindEvents();
}
/**
* Adds an removes the event listener.
* TODO: Remove jQuery when we have a way to handle events properly.
*/
bindEvents() {
$(this.container).off('click', 'button.js-builds-dropdown-button', this.getBuildsList);
$(this.container).on('click', 'button.js-builds-dropdown-button', this.getBuildsList);
}
/**
* For the clicked stage, renders the received html in the sibiling
* element with the `js-builds-dropdown-container` clas
*
* @param {Element} stageContainer
* @param {Object} data
*/
renderBuildsList(stageContainer, data) {
const dropdownContainer = stageContainer.parentElement.querySelector('.js-builds-dropdown-container');
dropdownContainer.innerHTML = data.html;
}
/**
* For the clicked stage, gets the list of builds.
*
* @param {Object} e
* @return {Promise}
*/
getBuildsList(e) {
const endpoint = e.currentTarget.dataset.stageEndpoint;
return $.ajax({
dataType: 'json',
type: 'GET',
url: endpoint,
success: data => this.renderBuildsList(e.currentTarget, data),
error: () => new Flash('An error occurred while fetching the builds.', 'alert'),
});
}
}
window.gl = window.gl || {};
window.gl.MiniPipelineGraph = MiniPipelineGraph;
})();
...@@ -53,17 +53,13 @@ ...@@ -53,17 +53,13 @@
.stage-container.mini-pipeline-graph .stage-container.mini-pipeline-graph
- if hasMultipleBuilds - if hasMultipleBuilds
.dropdown.inline.build-content .dropdown.inline.build-content
%button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} } %button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: tooltip, "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name)}}
%span{ class: klass } %span{ class: klass }
%span.mini-pipeline-graph-icon-container %span.mini-pipeline-graph-icon-container
%span{ class: icon_status_klass }= custom_icon(icon_status) %span{ class: icon_status_klass }= custom_icon(icon_status)
= icon('caret-down', class: 'dropdown-caret') = icon('caret-down', class: 'dropdown-caret')
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up %div.js-builds-dropdown-container
%ul
- stage.statuses.each do |status|
%li.dropdown-build
= render 'ci/status/graph_badge', subject: status
- else - else
- if detailed_status.has_details? - if detailed_status.has_details?
= link_to detailed_status.details_path, class: klass, title: tooltip do = link_to detailed_status.details_path, class: klass, title: tooltip do
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.nothing-here-block No pipelines to show .nothing-here-block No pipelines to show
- else - else
.table-holder .table-holder
%table.table.ci-table %table.table.ci-table.js-pipeline-table
%thead %thead
%th.pipeline-status Status %th.pipeline-status Status
%th.pipeline-info Pipeline %th.pipeline-info Pipeline
......
- detailed_status = @stage.detailed_status(current_user) .dropdown-menu.grouped-pipeline-dropdown
- klass = "has-tooltip ci-status-icon ci-status-icon-#{detailed_status}" .arrow-up
- hasMultipleBuilds = @stage.statuses.count > 1 %ul
- icon_status = "#{detailed_status.icon}_borderless" - @stage.statuses.each do |status|
- icon_status_klass = "ci-status-icon ci-status-icon-#{detailed_status}" %li.dropdown-build
- tooltip = "#{@stage.name}: #{detailed_status.label || 'not found'}" = render 'ci/status/graph_badge', subject: status
.dropdown.inline.build-content
%button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} }
%span{ class: klass }
%span.mini-pipeline-graph-icon-container
%span{ class: icon_status_klass }= custom_icon(icon_status)
= icon('caret-down', class: 'dropdown-caret')
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
.nothing-here-block No pipelines to show .nothing-here-block No pipelines to show
- else - else
.table-holder .table-holder
%table.table.ci-table %table.table.ci-table.js-pipeline-table
%thead %thead
%th.pipeline-status Status %th.pipeline-status Status
%th.pipeline-info Pipeline %th.pipeline-info Pipeline
......
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