From 53434030c1fe82cac0607a1934e164dece9fd664 Mon Sep 17 00:00:00 2001 From: Surinder Kumar Date: Wed, 29 Jun 2016 12:16:02 +0100 Subject: [PATCH] Consistent busy indication. Fixes #1242 --- .../browser/templates/browser/js/browser.js | 6 --- .../templates/browser/js/collection.js | 24 +++++++-- .../browser/templates/browser/js/node.js | 23 +++++++- web/pgadmin/misc/depends/static/js/depends.js | 44 ++++++++++----- web/pgadmin/misc/sql/static/js/sql.js | 22 +++++++- .../misc/statistics/static/js/statistics.js | 25 +++++++-- web/pgadmin/static/css/overrides.css | 4 ++ .../static/css/wcDocker/Themes/pgadmin.css | 27 +++++++++- .../datagrid/templates/datagrid/index.html | 8 +-- .../templates/datagrid/js/datagrid.js | 54 +++++++++++-------- .../tools/debugger/static/css/debugger.css | 24 ++------- .../tools/sqleditor/static/css/sqleditor.css | 25 +++------ .../templates/sqleditor/js/sqleditor.js | 9 ++-- 13 files changed, 194 insertions(+), 101 deletions(-) diff --git a/web/pgadmin/browser/templates/browser/js/browser.js b/web/pgadmin/browser/templates/browser/js/browser.js index 1da37bbcd..9464010a7 100644 --- a/web/pgadmin/browser/templates/browser/js/browser.js +++ b/web/pgadmin/browser/templates/browser/js/browser.js @@ -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 diff --git a/web/pgadmin/browser/templates/browser/js/collection.js b/web/pgadmin/browser/templates/browser/js/collection.js index 776ac4c41..771cc07af 100644 --- a/web/pgadmin/browser/templates/browser/js/collection.js +++ b/web/pgadmin/browser/templates/browser/js/collection.js @@ -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); } diff --git a/web/pgadmin/browser/templates/browser/js/node.js b/web/pgadmin/browser/templates/browser/js/node.js index 247966e77..e5a96c4db 100644 --- a/web/pgadmin/browser/templates/browser/js/node.js +++ b/web/pgadmin/browser/templates/browser/js/node.js @@ -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'); diff --git a/web/pgadmin/misc/depends/static/js/depends.js b/web/pgadmin/misc/depends/static/js/depends.js index d7534c882..6883aa3cc 100644 --- a/web/pgadmin/misc/depends/static/js/depends.js +++ b/web/pgadmin/misc/depends/static/js/depends.js @@ -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 ); }, diff --git a/web/pgadmin/misc/sql/static/js/sql.js b/web/pgadmin/misc/sql/static/js/sql.js index 34ab6ffba..9c06c656a 100644 --- a/web/pgadmin/misc/sql/static/js/sql.js +++ b/web/pgadmin/misc/sql/static/js/sql.js @@ -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); diff --git a/web/pgadmin/misc/statistics/static/js/statistics.js b/web/pgadmin/misc/statistics/static/js/statistics.js index 5278271a6..f1217aea1 100644 --- a/web/pgadmin/misc/statistics/static/js/statistics.js +++ b/web/pgadmin/misc/statistics/static/js/statistics.js @@ -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); } diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index eda27e16d..7b231eb78 100755 --- a/web/pgadmin/static/css/overrides.css +++ b/web/pgadmin/static/css/overrides.css @@ -1349,3 +1349,7 @@ height: calc(100% - 35px); table.backgrid { overflow: auto; } + +.aciTree.aciTreeLoad { + background: none; +} diff --git a/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css b/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css index 7cbc7d681..91ae2000e 100644 --- a/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css +++ b/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css @@ -342,7 +342,30 @@ span.fa.fa-arrow-left, .fa-arrow-right { visibility: hidden; } - i.wcTabIcon { min-width: 20px; -} \ No newline at end of file +} + +.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; +} diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html index 473eff98f..516bd8da6 100644 --- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html +++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html @@ -14,10 +14,10 @@ {% endif %}
-
- - +
+
+ +