Improve network/server activity feedback for the user. Fixes #1751

This commit is contained in:
Surinder Kumar 2016-09-26 15:10:38 +01:00 committed by Dave Page
parent f9dacc5237
commit 3b4776ab5f
7 changed files with 99 additions and 14 deletions

View File

@ -26,9 +26,11 @@ function(_, S, pgAdmin) {
'FALSE': "{{ _("False") }}",
'NOTE_CTRL_LABEL': "{{ _("Note") }}",
'ERR_RETRIEVAL_INFO': "{{ _("Error retrieving the information - %s") }}",
'CONNECTION_LOST': "{{ _("Connection to the server has been lost!") }}",
'CONNECTION_LOST': "{{ _("Connection to the server has been lost.") }}",
'SELECT_ALL': "{{ _("Select All") }}",
'UNSELECT_ALL': "{{ _("Unselect All") }}"
'UNSELECT_ALL': "{{ _("Unselect All") }}",
'LOADING_MESSAGE': "{{ _("Retrieving data from the server...") }}",
'LOADING_FAILED': "{{ _("Failed to retrieve data from the server.") }}"
};
{% for key in current_app.messages.keys() %}

View File

@ -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 1 second
if (!_.isUndefined(ctx)) {
$msgDiv.appendTo(ctx);
}
}, 1000, 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');
}, 1000);
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);
}
});
}

View File

@ -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 1 second
$msgContainer.text(pgBrowser.messages['LOADING_MESSAGE']);
$msgContainer.removeClass('hidden');
if ($gridContainer) {
$gridContainer.addClass('hidden');
}
}, 1000);
// 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']);
}
});
}

View File

@ -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 1 second
pgAdmin.Browser.editor.setValue(pgBrowser.messages['LOADING_MESSAGE']);
}, 1000);
},
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;

View File

@ -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 1 second
$msgContainer.text(pgBrowser.messages['LOADING_MESSAGE']);
$msgContainer.removeClass('hidden');
if (self.grid) {
self.grid.remove();
}
}, 1000);
},
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']);
}
});
}

View File

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

View File

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