IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Optimise display of Dependencies and Dependents, and use on-demand loading of rows in batches of 100. Fixes #3959

Browse Source
This commit is contained in:
Khushboo Vashi
2019-02-14 11:15:01 +00:00
committed by Dave Page
parent e5e154e268
commit 622b67684d
10 changed files with 623 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/pgadmin/browser/static/js/browser.js
View File

@@ -189,7 +189,7 @@ define('pgadmin.browser', [
width: 500,
isCloseable: false,
isPrivate: true,
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-dependencies-container d-none"></div></div>',
events: panelEvents,
}),
// Dependents of the object
@@ -200,7 +200,7 @@ define('pgadmin.browser', [
width: 500,
isCloseable: false,
isPrivate: true,
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-dependents-container d-none"></div></div>',
events: panelEvents,
}),
},

105
web/pgadmin/browser/static/js/collection.js
View File

@@ -42,6 +42,7 @@ define([
if (this.node_initialized)
return;
this.node_initialized = true;
pgAdmin.Browser.add_menus([{
name: 'refresh', node: this.type, module: this,
applies: ['object', 'context'], callback: 'refresh',
@@ -77,12 +78,9 @@ define([
content = $('<div></div>')
.addClass('pg-prop-content col-12 has-pg-prop-btn-group'),
node = pgBrowser.Nodes[that.node],
$msgContainer = '',
// This will be the URL, used for object manipulation.
urlBase = this.generate_url(item, 'properties', data),
collection = new (node.Collection.extend({
url: urlBase,
model: node.model,
}))(),
info = this.getTreeNodeHierarchy.apply(this, [item]),
gridSchema = Backform.generateGridColumnsFromModel(
info, node.model, 'properties', that.columns
@@ -132,6 +130,10 @@ define([
return null;
}.bind(panel);
that.collection = new (node.Collection.extend({
url: urlBase,
model: node.model,
}))();
// Add the new column for the multi-select menus
if((_.isFunction(that.canDrop) ?
that.canDrop.apply(that, [data, item]) : that.canDrop) ||
@@ -180,7 +182,7 @@ define([
that.grid = new Backgrid.Grid({
emptyText: 'No data found',
columns: gridSchema.columns,
collection: collection,
collection: that.collection,
className: 'backgrid table presentation table-bordered table-noouter-border table-hover',
});
@@ -199,6 +201,7 @@ define([
};
if (view) {
// Avoid unnecessary reloads
if (_.isEqual($(panel).data('node-prop'), urlBase)) {
return;
@@ -215,9 +218,14 @@ define([
j.empty();
j.data('obj-view', gridView);
$msgContainer = '<div class="alert alert-info pg-panel-message pg-panel-properties-message">' +
gettext('Retrieving data from the server...') + '</div>';
$msgContainer = $($msgContainer).appendTo(j);
that.header = $('<div></div>').addClass(
'pg-prop-header'
).appendTo(j);
);
// Render the buttons
var buttons = [];
@@ -255,26 +263,69 @@ define([
// Render subNode grid
content.append('<div class="pg-prop-coll-container"></div>');
content.find('.pg-prop-coll-container').append(that.grid.render().$el);
j.append(content);
// Fetch Data
collection.fetch({
reset: true,
error: function(model, error, xhr) {
pgBrowser.Events.trigger(
'pgadmin:collection:retrieval:error', 'properties', xhr, error,
error.message, item, that
);
if (!Alertify.pgHandleItemError(
xhr, error, error.message, {item: item, info: info}
)) {
Alertify.pgNotifier(error, xhr, S(
gettext('Error retrieving properties - %s.')
).sprintf(error.message || that.label).value(), function() {
var timer;
$.ajax({
url: urlBase,
type: 'GET',
beforeSend: function() {
// Generate a timer for the request
timer = setTimeout(function() {
// notify user if request is taking longer than 1 second
$msgContainer.text(gettext('Retrieving data from the server...'));
$msgContainer.removeClass('d-none');
if (self.grid) {
self.grid.remove();
}
}, 1000);
},
})
.done(function(res) {
clearTimeout(timer);
if (_.isUndefined(that.grid) || _.isNull(that.grid)) return;
that.data = res;
if (that.data.length > 0) {
if (!$msgContainer.hasClass('d-none')) {
$msgContainer.addClass('d-none');
}
that.header.appendTo(j);
j.append(content);
// Listen scroll event to load more rows
$('.pg-prop-content').on('scroll', that.__loadMoreRows.bind(that));
that.collection.reset(that.data.splice(0, 50));
} else {
// Do not listen the scroll event
$('.pg-prop-content').off('scroll', that.__loadMoreRows);
$msgContainer.text(gettext('No properties are available for the selected object.'));
}
})
.fail(function(xhr, error) {
pgBrowser.Events.trigger(
'pgadmin:node:retrieval:error', 'properties', xhr, error.message, item, that
);
if (!Alertify.pgHandleItemError(xhr, error.message, {
item: item,
info: info,
})) {
Alertify.pgNotifier(
error, xhr,
S(gettext('Error retrieving properties - %s')).sprintf(
error.message || that.label).value(), function() {
console.warn(arguments);
});
}
},
}
// show failed message.
$msgContainer.text(gettext('Failed to retrieve data from the server.'));
});
var onDrop = function(type) {
@@ -359,6 +410,14 @@ define([
return;
}.bind(that);
},
__loadMoreRows: function(e) {
let elem = e.currentTarget;
if ((elem.scrollHeight - 10) < elem.scrollTop + elem.offsetHeight) {
if (this.data.length > 0) {
this.collection.add(this.data.splice(0, 50));
}
}
},
generate_url: function(item, type) {
/*
* Using list, and collection functions of a node to get the nodes