mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Display busy indicators in a much more consistent way. Fixes #1242
This commit is contained in:
Dave Page
parent
4267545e08
commit
7fbefa507b
@ -91,11 +91,26 @@ function($, _, S, pgAdmin, Backbone, Alertify, Backform) {
|
||||
};
|
||||
|
||||
if (view) {
|
||||
// Release the view
|
||||
view.remove({data: true, internal: true, silent: true});
|
||||
// Deallocate the view
|
||||
delete view;
|
||||
view = null;
|
||||
// Avoid unnecessary reloads
|
||||
var n_type = data._type,
|
||||
n_value = -1,
|
||||
treeHierarchy = n.getTreeNodeHierarchy(item);
|
||||
|
||||
if (_.isUndefined(treeHierarchy[n_type]) ||
|
||||
_.isUndefined(treeHierarchy[n_type]._id)) {
|
||||
n_value = -1;
|
||||
} else {
|
||||
n_value = treeHierarchy[n_type]._id;
|
||||
}
|
||||
|
||||
if (n_value == $(panel).data(n_type)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Cache the current IDs for next time
|
||||
$(panel).data(n_type, n_value);
|
||||
|
||||
panel.startLoading();
|
||||
// Reset the data object
|
||||
j.data('obj-view', null);
|
||||
}
|
||||
@ -107,6 +122,9 @@ function($, _, S, pgAdmin, Backbone, Alertify, Backform) {
|
||||
// Render subNode grid
|
||||
content.append(grid.render().$el);
|
||||
j.append(content);
|
||||
setTimeout(function() {
|
||||
panel.finishLoading();
|
||||
}, 1000);
|
||||
|
||||
// Fetch Data
|
||||
collection.fetch({reset: true})
|
||||
|
||||
@ -31,6 +31,7 @@ function(r, $, pgAdmin, _, Backbone) {
|
||||
if (dashboardPanel) {
|
||||
var div = dashboardPanel.layout().scene().find('.pg-panel-content');
|
||||
|
||||
dashboardPanel.startLoading();
|
||||
if (div) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
@ -38,6 +39,9 @@ function(r, $, pgAdmin, _, Backbone) {
|
||||
dataType: "html",
|
||||
success: function (data) {
|
||||
$(div).html(data);
|
||||
setTimeout(function() {
|
||||
dashboardPanel.finishLoading();
|
||||
}, 1000);
|
||||
},
|
||||
error: function (xhr, status) {
|
||||
$(div).html(
|
||||
@ -102,12 +106,16 @@ function(r, $, pgAdmin, _, Backbone) {
|
||||
|
||||
// Clear out everything so any existing timers die off
|
||||
$(div).empty();
|
||||
dashboardPanel.startLoading();
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "GET",
|
||||
dataType: "html",
|
||||
success: function (data) {
|
||||
setTimeout(function() {
|
||||
dashboardPanel.finishLoading();
|
||||
}, 1000);
|
||||
$(div).html(data);
|
||||
},
|
||||
error: function (xhr, status) {
|
||||
|
||||
@ -72,8 +72,8 @@ define(
|
||||
*/
|
||||
var appendGridToPanel = function(collection, panel, is_dependent) {
|
||||
var $container = panel[0].layout().scene().find('.pg-panel-content'),
|
||||
$gridContainer = $container.find('.pg-panel-depends-container'),
|
||||
grid = new Backgrid.Grid({
|
||||
$gridContainer = $container.find('.pg-panel-depends-container');
|
||||
self.grid = grid = new Backgrid.Grid({
|
||||
columns: [
|
||||
{
|
||||
name : 'type',
|
||||
@ -106,6 +106,8 @@ define(
|
||||
className: "backgrid presentation table backgrid-striped table-bordered table-hover",
|
||||
});
|
||||
|
||||
panel[0].startLoading();
|
||||
|
||||
// Condition is used to save grid object to change the label of the header.
|
||||
if (is_dependent)
|
||||
self.dependentGrid = grid;
|
||||
@ -113,6 +115,9 @@ define(
|
||||
self.dependenciesGrid = grid;
|
||||
|
||||
$gridContainer.append(grid.render().el);
|
||||
setTimeout(function() {
|
||||
panel[0].finishLoading();
|
||||
}, 1000);
|
||||
|
||||
return true;
|
||||
};
|
||||
@ -175,11 +180,30 @@ define(
|
||||
},
|
||||
|
||||
// Fetch the actual data and update the collection
|
||||
__updateCollection: function(collection, panel, url, messages, node) {
|
||||
__updateCollection: function(collection, panel, url, messages, node, item, type) {
|
||||
var msg = messages[0],
|
||||
$container = panel[0].layout().scene().find('.pg-panel-content'),
|
||||
$msgContainer = $container.find('.pg-panel-depends-message'),
|
||||
$gridContainer = $container.find('.pg-panel-depends-container');
|
||||
treeHierarchy = node.getTreeNodeHierarchy(item),
|
||||
n_value = -1,
|
||||
n_type = type;
|
||||
|
||||
// Avoid unnecessary reloads
|
||||
if (_.isUndefined(treeHierarchy[n_type]) ||
|
||||
_.isUndefined(treeHierarchy[n_type]._id)) {
|
||||
n_value = -1;
|
||||
} else {
|
||||
n_value = treeHierarchy[n_type]._id;
|
||||
}
|
||||
|
||||
if (n_value == $(panel[0]).data(n_type)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Cache the current IDs for next time
|
||||
$(panel[0]).data(n_type, n_value);
|
||||
|
||||
|
||||
// Hide the grid container and show the default message container
|
||||
if (!$gridContainer.hasClass('hidden'))
|
||||
@ -197,7 +221,7 @@ define(
|
||||
*/
|
||||
msg = messages[2];
|
||||
$msgContainer.text(msg);
|
||||
|
||||
panel[0].startLoading();
|
||||
/* Updating the label for the 'field' type of the backbone model.
|
||||
* Label should be "Database" if the node type is tablespace or role
|
||||
* and dependent tab is selected. For other nodes and dependencies tab
|
||||
@ -210,15 +234,18 @@ define(
|
||||
this.dependentGrid.columns.models[2].set({'label': 'Restriction'});
|
||||
}
|
||||
|
||||
// Hide the message container and show the grid container.
|
||||
$msgContainer.addClass('hidden');
|
||||
$gridContainer.removeClass('hidden');
|
||||
// Set the url, fetch the data and update the collection
|
||||
collection.url = url;
|
||||
collection.fetch({
|
||||
reset: true,
|
||||
success: function(res) {
|
||||
|
||||
// In case of success hide the message container and show the grid container.
|
||||
$gridContainer.removeClass('hidden');
|
||||
$msgContainer.addClass('hidden');
|
||||
// Hide loading icons once collection is retrieved.
|
||||
setTimeout(function() {
|
||||
panel[0].finishLoading();
|
||||
}, 1000);
|
||||
},
|
||||
error: function() {
|
||||
}
|
||||
@ -250,7 +277,9 @@ define(
|
||||
node.generate_url(item, 'dependent', data, true),
|
||||
['No object selected.', 'No dependent information is available for the current object.',
|
||||
'Fetching dependent information from the server...'],
|
||||
node
|
||||
node,
|
||||
item,
|
||||
data._type
|
||||
), 400
|
||||
);
|
||||
},
|
||||
@ -292,7 +321,9 @@ define(
|
||||
node.generate_url(item, 'dependency', data, true),
|
||||
['Please select an object in the tree view.', 'No dependency information is available for the current object.',
|
||||
'Fetching dependency information from the server...'],
|
||||
node
|
||||
node,
|
||||
item,
|
||||
data._type
|
||||
), 400
|
||||
);
|
||||
},
|
||||
|
||||
@ -1349,3 +1349,7 @@ height: calc(100% - 35px);
|
||||
table.backgrid {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.aciTree.aciTreeLoad {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@ -342,7 +342,30 @@ span.fa.fa-arrow-left, .fa-arrow-right {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
i.wcTabIcon {
|
||||
min-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.wcLoadingBackground {
|
||||
background: black;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.wcLoadingIcon.fa-spinner {
|
||||
position: absolute;
|
||||
font-size: 50px;
|
||||
color: #ccc;
|
||||
top: 40%;
|
||||
left: calc(50% - 100px);
|
||||
height: 49px !important;
|
||||
}
|
||||
|
||||
.wcLoadingLabel {
|
||||
top: 46%;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
width: calc(100% - 131px);
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -14,10 +14,10 @@
|
||||
{% endif %}
|
||||
</style>
|
||||
<div id="main-editor_panel">
|
||||
<div id="fetching_data" class="sql-editor-busy-fetching hide">
|
||||
<span class="sql-editor-busy-icon"><img
|
||||
src="{{ url_for('browser.static', filename='css/aciTree/image/load-root.gif') }}"></span>
|
||||
<span class="sql-editor-busy-text"></span>
|
||||
<div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
|
||||
<div class="wcLoadingBackground"></div>
|
||||
<span class="sql-editor-busy-icon wcLoadingIcon fa fa-spinner fa-pulse"></span>
|
||||
<span class="sql-editor-busy-text wcLoadingLabel"></span>
|
||||
</div>
|
||||
<div class="sql-editor" data-trans-id="{{ uniqueId }}">
|
||||
<div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
top: 40px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
@ -31,28 +31,12 @@
|
||||
top: 0; bottom: 0; right: 0; left: 0;
|
||||
}
|
||||
|
||||
.wcLoadingIcon {
|
||||
position: absolute;
|
||||
font-size: 100px;
|
||||
left: calc(50% - 100px);
|
||||
top: calc(50% - 100px);
|
||||
height: 95px;
|
||||
}
|
||||
|
||||
.wcLoadingLabel {
|
||||
position: absolute;
|
||||
width: 103%;
|
||||
font-size: 30px;
|
||||
top: calc(50% + 0px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.debugger-container .breakpoints {
|
||||
width: 0.9em;
|
||||
width: 0.9em;
|
||||
}
|
||||
|
||||
.debugger-container .CodeMirror-activeline-background {
|
||||
background: #50B0F0;
|
||||
background: #50B0F0;
|
||||
}
|
||||
|
||||
.CodeMirror-foldmarker {
|
||||
@ -64,7 +48,7 @@
|
||||
}
|
||||
|
||||
.CodeMirror, .CodeMirror-gutters {
|
||||
min-height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror-foldgutter {
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
}
|
||||
|
||||
.sql-editor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top : 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top : 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sql-editor-busy-fetching {
|
||||
@ -20,23 +20,10 @@
|
||||
margin:0;
|
||||
padding: 0;
|
||||
background: black;
|
||||
opacity: 0.4;
|
||||
opacity: 0.6;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sql-editor-busy-icon {
|
||||
position:absolute;
|
||||
left: 45%;
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.sql-editor-busy-text {
|
||||
position:absolute;
|
||||
left: 42%;
|
||||
top: 50%;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#editor-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user