public inbox for [email protected]
help / color / mirror / Atom feedFrom: Surinder Kumar <[email protected]>
To: Dave Page <[email protected]>
Cc: Magnus Hagander <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Cc: Ashesh Vashi <[email protected]>
Cc: Murtuza Zabuawala <[email protected]>
Subject: Re: Lack of activity indicator over slow connections (pgadmin4)
Date: Mon, 26 Sep 2016 19:11:24 +0530
Message-ID: <CAM5-9D_R5a0mA-W9YsTf1ezCUi8CWJvDkcvemih7f80CGshyWw@mail.gmail.com> (raw)
In-Reply-To: <CAM5-9D83rt3+yCyj3d_99GPBFtQX7WpBUb4eo7EXBzVBujER1w@mail.gmail.com>
References: <CABUevEx++DjkspfVGNkP4tyPNO1stR-Xp=GitREWXNHxKcoLyw@mail.gmail.com>
<CA+OCxow5nvt8yBjx_Oh-6Upa3O4HrR5t14Y7OTiQ1quXxUfscw@mail.gmail.com>
<CABUevEz0KfNQ6Y_gh-MRWkOEWaHxGrr-oFvpKOvLE+=M8fCxEw@mail.gmail.com>
<CA+OCxozh3e4AGxd2GkLav9qLG=i2U4YG4FoCMe0fN+edYWhgow@mail.gmail.com>
<CAM5-9D8GARXHAryQDHLKgBzCgN0+beSVwFPn3Gb3MCQZ=nr7ow@mail.gmail.com>
<CA+OCxoyhJBwRfEE4sW30XoSvwRs2aG+dw5JsWaHiYFPWk0S_qw@mail.gmail.com>
<CAM5-9D9tXi7D9xwOVRdZoJ0QnjxpKhA8csm2GLZ1H4SuZkKRGw@mail.gmail.com>
<CA+OCxoxp8Y0j_cYR3h2er2az+H4Yjy8Bsp1SP8ELDZNPRMLMHQ@mail.gmail.com>
<CAM5-9D83rt3+yCyj3d_99GPBFtQX7WpBUb4eo7EXBzVBujER1w@mail.gmail.com>
List-Unsubscribe: <mailto:[email protected]?body=unsub%20pgadmin-hackers>
Please find attached patch. Added activity indicator for:
1) Panels.
2) Dialog open and on click OK.(set cursor to progress)
3) Debugger. (Set cursor to progress).
Not done: Activity indicator is not implemented for wizard pages. send
another patch once completed.
On Fri, Sep 23, 2016 at 2:19 PM, Surinder Kumar <
[email protected]> wrote:
> On Fri, Sep 23, 2016 at 1:45 PM, Dave Page <[email protected]> wrote:
>
>> On Fri, Sep 23, 2016 at 7:32 AM, Surinder Kumar
>> <[email protected]> wrote:
>> >
>> >
>> > On Wed, Sep 21, 2016 at 8:40 PM, Dave Page <[email protected]> wrote:
>> >>
>> >> Hi
>> >>
>> >> On Wed, Sep 21, 2016 at 2:30 PM, Surinder Kumar
>> >> <[email protected]> wrote:
>> >> > Hi Dave/Ashesh
>> >> >
>> >> > The thing we can do is:
>> >> > 1) We can display loading message same as other panels if returned
>> >> > response
>> >> > is taking longer than 2 seconds, otherwise we won't display any
>> >> > message(to
>> >> > avoid fluctuations).
>> >> > Screenshot - demo_message.png
>> >>
>> >> There's a typo there (laoded)..
>> >>
>> >> > 2) Display a loading spinner along with panel title while data is
>> being
>> >> > loaded.
>> >> > Screenshot - spinner.png
>> >>
>> >> I don't see a spinner there at all.
>> >
>> > sorry its not spinner, its reload spinning icon in place of properties
>> icon.
>>
>> Oh, I see. I like it, but wonder if it would be too subtle.
>>
>> Can we do both? Show the panel, and spin a loading icon on the tab?
>>
> ​I will try to implement both.​
>
>>
>> >>
>> >>
>> >> What about the other places I mentioned?
>> >
>> >
>> >>
>> >> - On dialogue open and OK
>> >
>> > D
>> > isplay loading message
>> > in dialog till the data loads and on OK we can set mouse pointer to
>> > 'progress' till the data is not processed.
>>
>> Yes, they are essentially panels too, so we can do the same as for
>> Properties and Statistics etc.
>>
>> > - On Wizard steps
>> > D
>> > isplay loading message
>> > also in wizard pages till it doesn't loads data.
>>
>> Yes.
>>
>> >
>> > - Possibly in the debugger, when stepping?
>> >
>> > In case of debugger's step into, step out & resume, we can set mouse
>> pointer
>> > to 'progress'
>>
>> OK.
>>
>> Can you work up a patch ASAP please?
>>
> ​Ok.​
>
>>
>> Thanks!
>>
>> --
>> Dave Page
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>> EnterpriseDB UK: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>
>
--
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Attachments:
[application/octet-stream] activity_indicator.patch (11.4K, 3-activity_indicator.patch)
download | inline diff:
diff --git a/web/pgadmin/browser/templates/browser/js/messages.js b/web/pgadmin/browser/templates/browser/js/messages.js
index cdb832b..b03a886 100644
--- a/web/pgadmin/browser/templates/browser/js/messages.js
+++ b/web/pgadmin/browser/templates/browser/js/messages.js
@@ -28,7 +28,9 @@ function(_, S, pgAdmin) {
'ERR_RETRIEVAL_INFO': "{{ _("Error retrieving the information - %s") }}",
'CONNECTION_LOST': "{{ _("Connection to the server has been lost!") }}",
'SELECT_ALL': "{{ _("Select All") }}",
- 'UNSELECT_ALL': "{{ _("Unselect All") }}"
+ 'UNSELECT_ALL': "{{ _("Unselect All") }}",
+ 'LOADING_MESSAGE': "{{ _("Please wait while data is being loaded...") }}",
+ 'LOADING_FAILED': "{{ _("Failed to load data.") }}"
};
{% for key in current_app.messages.keys() %}
diff --git a/web/pgadmin/browser/templates/browser/js/node.js b/web/pgadmin/browser/templates/browser/js/node.js
index 87a5fc7..9913e78 100644
--- a/web/pgadmin/browser/templates/browser/js/node.js
+++ b/web/pgadmin/browser/templates/browser/js/node.js
@@ -276,8 +276,22 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
if (!newModel.isNew()) {
// This is definetely not in create mode
+ var msgDiv = '<div class="alert alert-info pg-panel-message pg-panel-properties-message">'+
+ pgBrowser.messages['LOADING_MESSAGE']+'</div>',
+ $msgDiv = $(msgDiv);
+ var timer = setTimeout(function(ctx) {
+ // notify user if request is taking longer than 2 seconds
+
+ if (!_.isUndefined(ctx)) {
+ $msgDiv.appendTo(ctx);
+ }
+ }, 2000, ctx);
newModel.fetch()
.success(function(res, msg, xhr) {
+ // clear timeout and remove message
+ clearTimeout(timer);
+ $msgDiv.addClass('hidden');
+
// We got the latest attributes of the
// object. Render the view now.
view.render();
@@ -934,7 +948,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
'pg-prop-footer'
).appendTo(j);
// Create a view to show the properties in fieldsets
- view = that.getView(item, 'properties', content, data, 'fieldset');
+ view = that.getView(item, 'properties', content, data, 'fieldset', undefined, j);
if (view) {
// Save it for release it later
j.data('obj-view', view);
@@ -1135,7 +1149,13 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
// Save the changes
btn.click(function() {
var m = view.model,
- d = m.toJSON(true);
+ d = m.toJSON(true),
+
+ // Generate a timer for the request
+ timer = setTimeout(function(){
+ $('.obj_properties').addClass('show_progress');
+ }, 2000);
+
if (d && !_.isEmpty(d)) {
m.save({}, {
attrs: d,
@@ -1143,6 +1163,10 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
cache: false,
success: function() {
onSaveFunc.call();
+ // Hide progress cursor
+ $('.obj_properties').removeClass('show_progress');
+ clearTimeout(timer);
+
// Removing the node-prop property of panel
// so that we show updated data on panel
var pnlProperties = pgBrowser.docker.findPanels('properties')[0],
@@ -1169,6 +1193,10 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
"{{ _("Error saving properties: %s") }}"
).sprintf(jqxhr.statusText).value()
);
+
+ // Hide progress cursor
+ $('.obj_properties').removeClass('show_progress');
+ clearTimeout(timer);
}
});
}
diff --git a/web/pgadmin/misc/depends/static/js/depends.js b/web/pgadmin/misc/depends/static/js/depends.js
index dc5d7e7..261b927 100644
--- a/web/pgadmin/misc/depends/static/js/depends.js
+++ b/web/pgadmin/misc/depends/static/js/depends.js
@@ -1,6 +1,6 @@
define([
'underscore', 'underscore.string', 'jquery', 'pgadmin.browser',
- 'alertify', 'pgadmin.alertifyjs'
+ 'alertify', 'pgadmin.alertifyjs', 'pgadmin.browser.messages',
], function(_, S, $, pgBrowser, Alertify) {
if (pgBrowser.ShowNodeDepends)
@@ -234,13 +234,31 @@ define([
this.dependentGrid.columns.models[2].set({'label': 'Restriction'});
}
- // Hide the message container and show the grid container.
+ // Hide message container and show grid container.
$msgContainer.addClass('hidden');
$gridContainer.removeClass('hidden');
+
+ var timer = setTimeout(function(){
+ // notify user if request is taking longer than 2 seconds
+
+ $msgContainer.text(pgBrowser.messages['LOADING_MESSAGE']);
+ $msgContainer.removeClass('hidden');
+ if ($gridContainer) {
+ $gridContainer.addClass('hidden');
+ }
+ }, 2000);
+
// Set the url, fetch the data and update the collection
collection.url = url;
collection.fetch({
reset: true,
+ success: function() {
+ clearTimeout(timer);
+ $gridContainer.removeClass('hidden');
+ if (!$msgContainer.hasClass('hidden')) {
+ $msgContainer.addClass('hidden');
+ }
+ },
error: function(coll, xhr, error, message) {
var _label = treeHierarchy[n_type].label;
pgBrowser.Events.trigger(
@@ -261,6 +279,8 @@ define([
}
);
}
+ // show failed message.
+ $msgContainer.text(pgBrowser.messages['LOADING_FAILED']);
}
});
}
diff --git a/web/pgadmin/misc/sql/static/js/sql.js b/web/pgadmin/misc/sql/static/js/sql.js
index 0444954..49370f6 100644
--- a/web/pgadmin/misc/sql/static/js/sql.js
+++ b/web/pgadmin/misc/sql/static/js/sql.js
@@ -1,6 +1,6 @@
define([
'underscore', 'underscore.string', 'jquery', 'pgadmin.browser',
- 'alertify', 'pgadmin.alertifyjs'
+ 'alertify', 'pgadmin.alertifyjs', 'pgadmin.browser.messages',
], function(_, S, $, pgBrowser, Alertify) {
pgBrowser.ShowNodeSQL = pgBrowser.ShowNodeSQL || {};
@@ -84,15 +84,25 @@ define([
if (node.hasSQL) {
sql = '';
- var url = node.generate_url(item, 'sql', data, true);
+ var url = node.generate_url(item, 'sql', data, true),
+ timer;
$.ajax({
url: url,
type:'GET',
+ beforeSend: function(jqXHR, settings) {
+ // Generate a timer for the request
+ timer = setTimeout(function(){
+ // notify user if request is taking longer than 2 seconds
+
+ pgAdmin.Browser.editor.setValue(pgBrowser.messages['LOADING_MESSAGE']);
+ }, 2000);
+ },
success: function(res) {
if (pgAdmin.Browser.editor.getValue() != res) {
pgAdmin.Browser.editor.setValue(res);
}
+ clearTimeout(timer);
},
error: function(xhr, error, message) {
var _label = treeHierarchy[n_type].label;
diff --git a/web/pgadmin/misc/statistics/static/js/statistics.js b/web/pgadmin/misc/statistics/static/js/statistics.js
index 47170b4..5c32576 100644
--- a/web/pgadmin/misc/statistics/static/js/statistics.js
+++ b/web/pgadmin/misc/statistics/static/js/statistics.js
@@ -1,6 +1,6 @@
define([
'underscore', 'underscore.string', 'jquery', 'pgadmin.browser', 'backgrid',
- 'alertify', 'wcdocker', 'pgadmin.backgrid', 'pgadmin.alertifyjs'
+ 'alertify', 'wcdocker', 'pgadmin.backgrid', 'pgadmin.alertifyjs', 'pgadmin.browser.messages',
], function(_, S, $, pgBrowser, Backgrid, Alertify) {
if (pgBrowser.NodeStatistics)
@@ -175,17 +175,28 @@ define([
$(panel[0]).data('node-prop', treeHierarchy);
if (node.hasStatistics) {
- /* Set the message because ajax request may take time to
- * fetch the information from the server.
- */
msg = '';
- $msgContainer.text(msg);
-
+ var timer;
// Set the url, fetch the data and update the collection
$.ajax({
url: url,
type:'GET',
+ beforeSend: function(jqXHR, settings) {
+ // Generate a timer for the request
+ timer = setTimeout(function(){
+ // notify user if request is taking longer than 2 seconds
+
+ $msgContainer.text(pgBrowser.messages['LOADING_MESSAGE']);
+ $msgContainer.removeClass('hidden');
+ if (self.grid) {
+ self.grid.remove();
+ }
+ }, 2000);
+ },
success: function(res) {
+ // clear timer and reset message.
+ clearTimeout(timer);
+ $msgContainer.text('');
if (res.data) {
var data = res.data;
if (node.hasCollectiveStatistics || data['rows'].length > 1) {
@@ -241,6 +252,8 @@ define([
}
);
}
+ // show failed message.
+ $msgContainer.text(pgBrowser.messages['LOADING_FAILED']);
}
});
}
diff --git a/web/pgadmin/static/css/pgadmin.css b/web/pgadmin/static/css/pgadmin.css
index cdf4327..e41d0bb 100644
--- a/web/pgadmin/static/css/pgadmin.css
+++ b/web/pgadmin/static/css/pgadmin.css
@@ -760,3 +760,9 @@ lgg-el-container[el=md] .pg-el-lg-8,
.pgadmin-controls > textarea.form-control {
padding: 3px 6px;
}
+.pg-panel-properties-message {
+ margin-top: 50px !important;
+}
+.show_progress {
+ cursor: progress;
+}
diff --git a/web/pgadmin/tools/debugger/templates/debugger/js/direct.js b/web/pgadmin/tools/debugger/templates/debugger/js/direct.js
index 7ec5e95..452617b 100644
--- a/web/pgadmin/tools/debugger/templates/debugger/js/direct.js
+++ b/web/pgadmin/tools/debugger/templates/debugger/js/direct.js
@@ -266,6 +266,10 @@ define(
$.ajax({
url: baseUrl,
method: 'GET',
+ beforeSend: function(jqXHR, settings) {
+ // set cursor to progress before every poll.
+ $('.debugger-container').addClass('show_progress');
+ },
success: function(res) {
if (res.data.status === 'Success') {
// If no result then poll again to wait for results.
@@ -313,6 +317,8 @@ define(
self.GetStackInformation(trans_id);
}
+ // remove progress cursor
+ $('.debugger-container').removeClass('show_progress');
// Enable all the buttons as we got the results
self.enable('stop', true);
self.enable('step_over', true);
view thread (11+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected], [email protected], [email protected], [email protected]
Subject: Re: Lack of activity indicator over slow connections (pgadmin4)
In-Reply-To: <CAM5-9D_R5a0mA-W9YsTf1ezCUi8CWJvDkcvemih7f80CGshyWw@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox