Commit 34e317d2 authored by Filipa Lacerda's avatar Filipa Lacerda

Adds loading to improve UX

parent b1613e54
......@@ -18,31 +18,34 @@
class MiniPipelineGraph {
constructor({ container }) {
this.container = container;
this.dropdownListSelector = '.js-builds-dropdown-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.
* Adds and removes the event listener.
*/
bindEvents() {
$(this.container).off('click', 'button.js-builds-dropdown-button', this.getBuildsList);
$(this.container).on('click', 'button.js-builds-dropdown-button', this.getBuildsList);
const dropdownButtonSelector = 'button.js-builds-dropdown-button';
$(this.container).off('click', dropdownButtonSelector, this.getBuildsList);
$(this.container).on('click', dropdownButtonSelector, this.getBuildsList);
}
/**
* For the clicked stage, renders the received html in the sibiling
* element with the `js-builds-dropdown-container` clas
* For the clicked stage, renders the given data in the dropdown list.
*
* @param {Element} stageContainer
* @param {HTMLElement} stageContainer
* @param {Object} data
*/
renderBuildsList(stageContainer, data) {
const dropdownContainer = stageContainer.parentElement.querySelector('.js-builds-dropdown-container');
const dropdownContainer = stageContainer.parentElement.querySelector(
`${this.dropdownListSelector} .js-builds-dropdown-list`,
);
dropdownContainer.innerHTML = data.html;
dropdownContainer.innerHTML = data;
}
/**
......@@ -58,10 +61,29 @@
dataType: 'json',
type: 'GET',
url: endpoint,
success: data => this.renderBuildsList(e.currentTarget, data),
beforeSend: () => {
this.renderBuildsList(e.currentTarget, '');
this.toggleLoading(e.currentTarget);
},
success: (data) => {
this.toggleLoading(e.currentTarget);
this.renderBuildsList(e.currentTarget, data.html);
},
error: () => new Flash('An error occurred while fetching the builds.', 'alert'),
});
}
/**
* Toggles the visibility of the loading icon.
*
* @param {HTMLElement} stageContainer
* @return {type}
*/
toggleLoading(stageContainer) {
stageContainer.parentElement.querySelector(
`${this.dropdownListSelector} .js-builds-dropdown-loading`,
).classList.toggle('hidden');
}
}
window.gl = window.gl || {};
......
......@@ -753,14 +753,20 @@
margin: 0;
}
.builds-dropdown-loading {
margin: 10px auto;
width: 18px;
}
.grouped-pipeline-dropdown {
right: -172px;
top: 23px;
}
min-height: 191px;
.grouped-pipeline-dropdown a {
a {
color: $gl-text-color-light;
}
}
.arrow-up {
&::before,
......
......@@ -53,13 +53,19 @@
.stage-container.mini-pipeline-graph
- if hasMultipleBuilds
.dropdown.inline.build-content
%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)}}
%button.has-tooltip.builds-dropdown.js-builds-dropdown-button{ type: 'button', data: { toggle: 'dropdown', title: tooltip, placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name)}}
%span{ class: klass }
%span.mini-pipeline-graph-icon-container
%span{ class: icon_status_klass }= custom_icon(icon_status)
= icon('caret-down', class: 'dropdown-caret')
%div.js-builds-dropdown-container
.js-builds-dropdown-container
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up
.js-builds-dropdown-list
.js-builds-dropdown-loading.builds-dropdown-loading.hidden
%span.fa.fa-spinner.fa-spin
- else
- if detailed_status.has_details?
= link_to detailed_status.details_path, class: klass, title: tooltip do
......
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up
%ul
%ul
- @stage.statuses.each do |status|
%li.dropdown-build
= render 'ci/status/graph_badge', subject: status
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