Adds loading to improve UX
This commit is contained in:
parent
b1613e5489
commit
34e317d21c
|
@ -18,31 +18,34 @@
|
||||||
class MiniPipelineGraph {
|
class MiniPipelineGraph {
|
||||||
constructor({ container }) {
|
constructor({ container }) {
|
||||||
this.container = container;
|
this.container = container;
|
||||||
|
this.dropdownListSelector = '.js-builds-dropdown-container';
|
||||||
this.getBuildsList = this.getBuildsList.bind(this);
|
this.getBuildsList = this.getBuildsList.bind(this);
|
||||||
|
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds an removes the event listener.
|
* Adds and removes the event listener.
|
||||||
* TODO: Remove jQuery when we have a way to handle events properly.
|
|
||||||
*/
|
*/
|
||||||
bindEvents() {
|
bindEvents() {
|
||||||
$(this.container).off('click', 'button.js-builds-dropdown-button', this.getBuildsList);
|
const dropdownButtonSelector = 'button.js-builds-dropdown-button';
|
||||||
$(this.container).on('click', 'button.js-builds-dropdown-button', this.getBuildsList);
|
|
||||||
|
$(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
|
* For the clicked stage, renders the given data in the dropdown list.
|
||||||
* element with the `js-builds-dropdown-container` clas
|
|
||||||
*
|
*
|
||||||
* @param {Element} stageContainer
|
* @param {HTMLElement} stageContainer
|
||||||
* @param {Object} data
|
* @param {Object} data
|
||||||
*/
|
*/
|
||||||
renderBuildsList(stageContainer, 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',
|
dataType: 'json',
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: endpoint,
|
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'),
|
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 || {};
|
window.gl = window.gl || {};
|
||||||
|
|
|
@ -753,14 +753,20 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.builds-dropdown-loading {
|
||||||
|
margin: 10px auto;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.grouped-pipeline-dropdown {
|
.grouped-pipeline-dropdown {
|
||||||
right: -172px;
|
right: -172px;
|
||||||
top: 23px;
|
top: 23px;
|
||||||
}
|
min-height: 191px;
|
||||||
|
|
||||||
.grouped-pipeline-dropdown a {
|
a {
|
||||||
color: $gl-text-color-light;
|
color: $gl-text-color-light;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.arrow-up {
|
.arrow-up {
|
||||||
&::before,
|
&::before,
|
||||||
|
|
|
@ -53,13 +53,19 @@
|
||||||
.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.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{ 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')
|
||||||
|
|
||||||
%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
|
- 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
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
.dropdown-menu.grouped-pipeline-dropdown
|
%ul
|
||||||
.arrow-up
|
|
||||||
%ul
|
|
||||||
- @stage.statuses.each do |status|
|
- @stage.statuses.each do |status|
|
||||||
%li.dropdown-build
|
%li.dropdown-build
|
||||||
= render 'ci/status/graph_badge', subject: status
|
= render 'ci/status/graph_badge', subject: status
|
||||||
|
|
Loading…
Reference in New Issue