IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-30 20:43:50 -06:00
Code Issues Packages Projects Releases Wiki Activity

Consistent busy indication. Fixes #1242

Browse Source
This commit is contained in:
Surinder Kumar 2016-06-29 12:16:02 +01:00 committed by Dave Page
parent 9396cb03d5
commit 53434030c1
13 changed files with 194 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/pgadmin/browser/templates/browser/js/browser.js
View File

@ -300,8 +300,6 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
// Stored layout in database from the previous session
var layout = '{{ layout }}';
obj.docker.startLoading('{{ _('Loading...') }}');
// Try to restore the layout if there is one
if (layout != '') {
try {
@ -314,10 +312,6 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
} else {
obj.buildDefaultLayout()
}
obj.docker.on(wcDocker.EVENT.LOADED, function() {
obj.docker.finishLoading(500);
});
}
// Syntax highlight the SQL Pane

24
web/pgadmin/browser/templates/browser/js/collection.js
View File

@ -91,11 +91,25 @@ 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);
// Reset the data object
j.data('obj-view', null);
}

23
web/pgadmin/browser/templates/browser/js/node.js
View File

@ -788,7 +788,28 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
// Callback to show object properties
properties = function() {
var panel = this;
// Avoid unnecessary reloads
var panel = this,
i = tree.selected(),
d = i && tree.itemData(i),
n_type = d._type,
n_value = -1,
n = i && d && pgBrowser.Nodes[d._type],
treeHierarchy = n.getTreeNodeHierarchy(i);
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);
if (!content.hasClass('has-pg-prop-btn-group'))
content.addClass('has-pg-prop-btn-group');

44
web/pgadmin/misc/depends/static/js/depends.js
View File

@ -175,11 +175,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'))
@ -210,19 +229,12 @@ 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');
},
error: function() {
}
});
collection.fetch({ reset: true });
}
}
if (msg != '') {
@ -250,7 +262,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 +306,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
);
},

22
web/pgadmin/misc/sql/static/js/sql.js
View File

@ -16,7 +16,7 @@ function(_, $, pgBrowser) {
this.initialized = true;
_.bindAll(this, 'showSQL', 'sqlPanelVisibilityChanged');
var sqlPanels = pgBrowser.docker.findPanels('sql');
this.sqlPanels = sqlPanels = pgBrowser.docker.findPanels('sql');
// We will listend to the visibility change of the SQL panel
pgBrowser.Events.on(
@ -61,6 +61,26 @@ function(_, $, pgBrowser) {
sql = '-- ' + pgBrowser.messages.NODE_HAS_NO_SQL;
if (node.hasSQL) {
var self = this,
n_type = data._type,
n_value = -1,
treeHierarchy = node.getTreeNodeHierarchy(item);
// 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 == $(sqlPanels[0]).data(n_type)) {
return;
}
// Cache the current IDs for next time
$(this.sqlPanels[0]).data(n_type, n_value);
sql = '';
var url = node.generate_url(item, 'sql', data, true);

25
web/pgadmin/misc/statistics/static/js/statistics.js
View File

@ -139,14 +139,15 @@ function(_, $, pgBrowser, Backgrid) {
},
// Fetch the actual data and update the collection
__updateCollection: function(url, node) {
__updateCollection: function(url, node, item, node_type) {
var $container = this.panel[0].layout().scene().find('.pg-panel-content'),
$msgContainer = $container.find('.pg-panel-statistics-message'),
$gridContainer = $container.find('.pg-panel-statistics-container'),
collection = this.collection,
panel = this.panel,
self = this,
msg = '';
msg = '',
n_type = node_type;
if (node) {
msg = pgBrowser.messages.NODE_HAS_NO_STATISTICS;
@ -154,6 +155,24 @@ function(_, $, pgBrowser, Backgrid) {
* showStatistics function.
*/
if (node.hasStatistics) {
// Avoid unnecessary reloads
var treeHierarchy = node.getTreeNodeHierarchy(item);
if (_.isUndefined(treeHierarchy[n_type]) ||
_.isUndefined(treeHierarchy[n_type]._id)) {
n_value = undefined,
n_value = -1;
} else {
n_value = treeHierarchy[n_type]._id;
}
if (n_value == $(this.panel[0]).data(n_type)) {
return;
}
// Cache the current IDs for next time
$(this.panel[0]).data(n_type, n_value);
/* Set the message because ajax request may take time to
* fetch the information from the server.
*/
@ -236,7 +255,7 @@ function(_, $, pgBrowser, Backgrid) {
self.timeout = setTimeout(
function() {
self.__updateCollection.call(
self, node.generate_url(item, 'stats', data, true), node
self, node.generate_url(item, 'stats', data, true), node, item, data._type
);
}, 400);
}

4
web/pgadmin/static/css/overrides.css
View File

@ -1349,3 +1349,7 @@ height: calc(100% - 35px);
table.backgrid {
overflow: auto;
}
.aciTree.aciTreeLoad {
background: none;
}

25
web/pgadmin/static/css/wcDocker/Themes/pgadmin.css
View File

@ -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;
top: 34%;
left: 48%;
font-size: 50px;
color: #ccc;
height: 49px !important;
}
.wcLoadingLabel {
top: 40%;
left: 0;
color: #fff;
width: 100%;
font-size: 20px;
position: absolute;
text-align: center;
}

8
web/pgadmin/tools/datagrid/templates/datagrid/index.html
View File

@ -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="">

10
web/pgadmin/tools/datagrid/templates/datagrid/js/datagrid.js
View File

@ -18,6 +18,12 @@ define(
this.initialized = true;
this.title_index = 1;
this.spinner_el = '<div class="wcLoadingContainer">'+
'<div class="wcLoadingBackground"></div>'+
'<div class="wcLoadingIconContainer">'+
'<i class="wcLoadingIcon fa fa-spinner fa-pulse"></i>'+
'</div>'+
'</div>';
// Define list of nodes on which view data option appears
var supported_nodes = [
'table', 'view', 'mview',
@ -326,12 +332,14 @@ define(
baseUrl = "{{ url_for('datagrid.index') }}" + "panel/" + res.data.gridTransId + "/false/"
+ encodeURIComponent(grid_title);
var openDataGridURL = function(j) {
j.data('embeddedFrame').$container.append(self.spinner_el);
setTimeout(function() {
var frameInitialized = j.data('frameInitialized');
if (frameInitialized) {
var frame = j.data('embeddedFrame');
if (frame) {
frame.openURL(baseUrl);
frame.$container.find('.wcLoadingContainer').hide(1);
}
} else {
openDataGridURL(j);
@ -422,12 +430,14 @@ define(
baseUrl = "{{ url_for('datagrid.index') }}" + "panel/" + res.data.gridTransId + "/true/"
+ encodeURIComponent(grid_title) + '?' + "query_url=" + encodeURI(sURL);
var openQueryToolURL = function(j) {
j.data('embeddedFrame').$container.append(pgAdmin.DataGrid.spinner_el);
setTimeout(function() {
var frameInitialized = j.data('frameInitialized');
if (frameInitialized) {
var frame = j.data('embeddedFrame');
if (frame) {
frame.openURL(baseUrl);
frame.$container.find('.wcLoadingContainer').delay(1000).hide(1);
}
} else {
openQueryToolURL(j);

18
web/pgadmin/tools/debugger/static/css/debugger.css
View File

@ -1,6 +1,6 @@
#container {
position: absolute;
top: 44px;
top: 40px;
bottom: 0px;
left: 0px;
right: 0px;
@ -31,22 +31,6 @@
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;
}

15
web/pgadmin/tools/sqleditor/static/css/sqleditor.css
View File

@ -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;

9
web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
View File

@ -1143,15 +1143,16 @@ define(
$("#btn-flash").prop('disabled', true);
self.trigger(
'pgadmin-sqleditor:loading-icon:message',
'{{ _('Waiting for the query execution to complete...') }}'
);
$.ajax({
url: "{{ url_for('sqleditor.index') }}" + "view_data/start/" + self.transId,
method: 'GET',
success: function(res) {
if (res.data.status) {
self.trigger(
'pgadmin-sqleditor:loading-icon:message',
'{{ _('Waiting for the query execution to complete...') }}'
);
self.can_edit = res.data.can_edit;
self.can_filter = res.data.can_filter;