public inbox for [email protected]
help / color / mirror / Atom feedFrom: Surinder Kumar <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin4][Patch]: Load module's JS files only when required
Date: Mon, 22 May 2017 11:20:26 +0530
Message-ID: <CAM5-9D92zW=qJqKT_HFjtMQvOAXuz5a5DJuABnz9fWWLKeZZrw@mail.gmail.com> (raw)
List-Unsubscribe: <mailto:[email protected]?body=unsub%20pgadmin-hackers>
Hi
As per pgAdmin4 design, template JS files can either be preloaded or load
when a specific node expands (by adding for e.g.: when: 'server').
The JS files of several modules found to be loaded when pgAdmin4 loads
which results in increasing:
- the number of http requests
- latency(greater request time)
- pgAdmin4 load time
*Tested on Firefox:*
Before applying patch
- http requests - 143
- Content size - 3.4 MB
- Load time: 4.1s (onload: 524ms)
After applying patch
- http requests: 68
- Content size: 2.1 MB
- Load time: 2.84s (onload: 481ms)
Also, I found the http request for gravtar takes much time(depending on
internet speed) to load which increases load time.
https://secure.gravatar.com/avatar/d30aea269994f01256a99a8e7154a328?s=100&d=retro&r=g
Shouldn't the gravatar image be replaced with custom image ? I don't see
its any use except displaying for user.
*Patch changes:*
1) Load following modules JS when 'servers' node expands:
- Roles
- FileManager
- Backup
- Datagrid
- Grant wizard
- Import/Export, Maintenance & restore
- Sqleditor
2) Load Debugger JS when database node expands
3) Load Flotr2 when render function is called in dashboard.js
4) Load BigNumber library when sorting is performed on Statistics tab in
backgrid.pgadmin.js
5) Remove 'backgrid.select.all' from dependency list(user_management.js) as
it had no use.
After applying this patch, Menu items such "Query tool", "Grant wizard"
don't appear in Tools menu.
I have logged an RM2424 <https://redmine.postgresql.org/issues/2424; to
track this.
Please find attached patch and review.
Thanks
Surinder
--
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] load_module_js_when_required.patch (16.5K, 3-load_module_js_when_required.patch)
download | inline diff:
diff --git a/web/pgadmin/browser/server_groups/servers/roles/__init__.py b/web/pgadmin/browser/server_groups/servers/roles/__init__.py
index da8d06a..7cdbe39 100644
--- a/web/pgadmin/browser/server_groups/servers/roles/__init__.py
+++ b/web/pgadmin/browser/server_groups/servers/roles/__init__.py
@@ -9,7 +9,7 @@
import re
from functools import wraps
-import pgadmin.browser.server_groups as sg
+import pgadmin.browser.server_groups.servers as servers
import simplejson as json
from flask import render_template, request, jsonify, current_app
from flask_babel import gettext as _
@@ -55,7 +55,7 @@ class RoleModule(CollectionNodeModule):
Load the module script for server, when any of the server-group node is
initialized.
"""
- return sg.ServerGroupModule.NODE_TYPE
+ return servers.ServerModule.NODE_TYPE
@property
def csssnippets(self):
diff --git a/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js b/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js
index 35ed102..291029c 100644
--- a/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js
+++ b/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js
@@ -1,6 +1,6 @@
define([
- 'require', 'jquery', 'pgadmin', 'underscore', 'backbone', 'sources/gettext', 'flotr2', 'wcdocker',
- 'pgadmin.browser', 'bootstrap'
+ 'require', 'jquery', 'pgadmin', 'underscore', 'backbone',
+ 'sources/gettext', 'wcdocker', 'pgadmin.browser', 'bootstrap'
],
function(r, $, pgAdmin, _, Backbone, gettext) {
@@ -181,7 +181,11 @@ function(r, $, pgAdmin, _, Backbone, gettext) {
var div = dashboardPanel.layout().scene().find('.pg-panel-content');
if ($(div).find(container).length) { // Exists?
if (container.clientHeight > 0 && container.clientWidth > 0) { // Not hidden?
+ // Load flotr2 only when required
+ var Flotr2 = 'flotr2';
+ require([Flotr2], function(Flotr){
Flotr.draw(container, dataset, options);
+ })
}
} else {
return;
diff --git a/web/pgadmin/misc/file_manager/__init__.py b/web/pgadmin/misc/file_manager/__init__.py
index 85d7fb4..2505b79 100644
--- a/web/pgadmin/misc/file_manager/__init__.py
+++ b/web/pgadmin/misc/file_manager/__init__.py
@@ -125,7 +125,7 @@ class FileManagerModule(PgAdminModule):
{
'name': 'pgadmin.file_manager',
'path': url_for('file_manager.index') + 'file_manager',
- 'when': None
+ 'when': 'server'
},
]
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 64f0cb6..da5057e 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -2,13 +2,13 @@
// Set up Backform appropriately for the environment. Start with AMD.
if (typeof define === 'function' && define.amd) {
define([
- 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
- 'moment', 'bignumber', 'bootstrap.datetimepicker'
+ 'require', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid',
+ 'alertify', 'moment', 'bootstrap.datetimepicker'
],
- function(_, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber) {
+ function(require, _, $, Backbone, Backform, Backgrid, Alertify, moment) {
// Export global even in AMD case in case this script is loaded with
// others that may still expect a global Backform.
- return factory(root, _, $, Backbone, Backform, Alertify, moment, BigNumber);
+ return factory(root, require, _, $, Backbone, Backform, Alertify, moment);
});
// Next for Node.js or CommonJS. jQuery may not be needed as a module.
@@ -25,7 +25,7 @@
} else {
factory(root, root._, (root.jQuery || root.Zepto || root.ender || root.$), root.Backbone, root.Backform);
}
-} (this, function(root, _, $, Backbone, Backform, Alertify, moment, BigNumber) {
+} (this, function(root, require, _, $, Backbone, Backform, Alertify, moment) {
/*
* Add mechanism in backgrid to render different types of cells in
* same column;
@@ -56,106 +56,112 @@
* convert it into BigNumber object and make comparison to perform sorting.
*/
- _.extend(Backgrid.Body.prototype, {
- sort: function (column, direction) {
-
- if (!_.contains(["ascending", "descending", null], direction)) {
- throw new RangeError('direction must be one of "ascending", "descending" or `null`');
- }
+ _.extend(Backgrid.Body.prototype, {
+ BigNumber: undefined,
+ sort: function (column, direction) {
+ // Load bignumber only when required
+ var Bignumber = 'bignumber',
+ self = this;
+
+ require([Bignumber], function(BigNumber){
+ BigNumber = BigNumber;
+ if (!_.contains(["ascending", "descending", null], direction)) {
+ throw new RangeError('direction must be one of "ascending", "descending" or `null`');
+ }
- if (_.isString(column)) column = this.columns.findWhere({name: column});
+ if (_.isString(column)) column = self.columns.findWhere({name: column});
- var collection = this.collection;
+ var collection = self.collection;
- var order;
- if (direction === "ascending") order = -1;
- else if (direction === "descending") order = 1;
- else order = null;
+ var order;
+ if (direction === "ascending") order = -1;
+ else if (direction === "descending") order = 1;
+ else order = null;
- // Get column type and pass it to comparator.
- var col_type = column.get('cell').prototype.className || 'string-cell',
- comparator = this.makeComparator(column.get("name"), order,
- order ?
- column.sortValue() :
- function (model) {
- return model.cid.replace('c', '') * 1;
- }, col_type);
+ // Get column type and pass it to comparator.
+ var col_type = column.get('cell').prototype.className || 'string-cell',
+ comparator = self.makeComparator(column.get("name"), order,
+ order ?
+ column.sortValue() :
+ function (model) {
+ return model.cid.replace('c', '') * 1;
+ }, col_type);
- if (Backbone.PageableCollection &&
- collection instanceof Backbone.PageableCollection) {
+ if (Backbone.PageableCollection &&
+ collection instanceof Backbone.PageableCollection) {
- collection.setSorting(order && column.get("name"), order,
- {sortValue: column.sortValue()});
+ collection.setSorting(order && column.get("name"), order,
+ {sortValue: column.sortValue()});
- if (collection.fullCollection) {
- // If order is null, pageable will remove the comparator on both sides,
- // in this case the default insertion order comparator needs to be
- // attached to get back to the order before sorting.
- if (collection.fullCollection.comparator == null) {
- collection.fullCollection.comparator = comparator;
+ if (collection.fullCollection) {
+ // If order is null, pageable will remove the comparator on both sides,
+ // in this case the default insertion order comparator needs to be
+ // attached to get back to the order before sorting.
+ if (collection.fullCollection.comparator == null) {
+ collection.fullCollection.comparator = comparator;
+ }
+ collection.fullCollection.sort();
+ collection.trigger("backgrid:sorted", column, direction, collection);
+ }
+ else collection.fetch({reset: true, success: function () {
+ collection.trigger("backgrid:sorted", column, direction, collection);
+ }});
+ }
+ else {
+ collection.comparator = comparator;
+ collection.sort();
+ collection.trigger("backgrid:sorted", column, direction, collection);
}
- collection.fullCollection.sort();
- collection.trigger("backgrid:sorted", column, direction, collection);
- }
- else collection.fetch({reset: true, success: function () {
- collection.trigger("backgrid:sorted", column, direction, collection);
- }});
- }
- else {
- collection.comparator = comparator;
- collection.sort();
- collection.trigger("backgrid:sorted", column, direction, collection);
- }
-
- column.set("direction", direction);
- return this;
- },
- makeComparator: function (attr, order, func, type) {
+ column.set("direction", direction);
- return function (left, right) {
- // extract the values from the models
+ return self;
+ });
+ },
+ makeComparator: function (attr, order, func, type) {
+ return function (left, right) {
+ // extract the values from the models
+
+ var l = func(left, attr), r = func(right, attr), t;
+
+ var types = ['number-cell', 'integer-cell'];
+ if (_.include(types, type)) {
+ var _l, _r;
+ // NaN if invalid number
+ try {
+ _l = new BigNumber(l);
+ } catch(err) {
+ _l = NaN;
+ }
- var l = func(left, attr), r = func(right, attr), t;
+ try {
+ _r = new BigNumber(r);
+ } catch(err) {
+ _r = NaN;
+ }
- var types = ['number-cell', 'integer-cell'];
- if (_.include(types, type)) {
- var _l, _r;
- // NaN if invalid number
- try {
- _l = new BigNumber(l);
- } catch(err) {
- _l = NaN;
- }
+ // if descending order, swap left and right
+ if (order === 1) t = _l, _l = _r, _r = t;
- try {
- _r = new BigNumber(r);
- } catch(err) {
- _r = NaN;
+ if (_l.eq(_r)) // If both are equals
+ return 0;
+ else if (_l.lt(_r)) // If left is less than right
+ return -1;
+ else
+ return 1;
}
+ else {
+ // if descending order, swap left and right
+ if (order === 1) t = l, l = r, r = t;
- // if descending order, swap left and right
- if (order === 1) t = _l, _l = _r, _r = t;
-
- if (_l.eq(_r)) // If both are equals
- return 0;
- else if (_l.lt(_r)) // If left is less than right
- return -1;
- else
+ // compare as usual
+ if (l === r) return 0;
+ else if (l < r) return -1;
return 1;
- }
- else {
- // if descending order, swap left and right
- if (order === 1) t = l, l = r, r = t;
-
- // compare as usual
- if (l === r) return 0;
- else if (l < r) return -1;
- return 1;
- }
- };
- }
- });
+ }
+ };
+ }
+ });
_.extend(Backgrid.Row.prototype, {
makeCell: function (column) {
diff --git a/web/pgadmin/tools/backup/__init__.py b/web/pgadmin/tools/backup/__init__.py
index 9c0537a..e45a5ce 100644
--- a/web/pgadmin/tools/backup/__init__.py
+++ b/web/pgadmin/tools/backup/__init__.py
@@ -49,7 +49,7 @@ class BackupModule(PgAdminModule):
return [{
'name': 'pgadmin.tools.backup',
'path': url_for('backup.index') + 'backup',
- 'when': None
+ 'when': 'server'
}]
def show_system_objects(self):
diff --git a/web/pgadmin/tools/datagrid/__init__.py b/web/pgadmin/tools/datagrid/__init__.py
index f4629fc..8da4de3 100644
--- a/web/pgadmin/tools/datagrid/__init__.py
+++ b/web/pgadmin/tools/datagrid/__init__.py
@@ -43,7 +43,7 @@ class DataGridModule(PgAdminModule):
return [{
'name': 'pgadmin.datagrid',
'path': url_for('datagrid.index') + "datagrid",
- 'when': None
+ 'when': 'server'
}]
def get_panels(self):
diff --git a/web/pgadmin/tools/debugger/__init__.py b/web/pgadmin/tools/debugger/__init__.py
index 2c0dbc4..e6288b1 100644
--- a/web/pgadmin/tools/debugger/__init__.py
+++ b/web/pgadmin/tools/debugger/__init__.py
@@ -55,7 +55,7 @@ class DebuggerModule(PgAdminModule):
scripts.append({
'name': name,
'path': url_for('debugger.index') + script,
- 'when': None
+ 'when': 'database'
})
return scripts
diff --git a/web/pgadmin/tools/grant_wizard/__init__.py b/web/pgadmin/tools/grant_wizard/__init__.py
index 9c6f47e..661c9ff 100644
--- a/web/pgadmin/tools/grant_wizard/__init__.py
+++ b/web/pgadmin/tools/grant_wizard/__init__.py
@@ -66,12 +66,12 @@ class GrantWizardModule(PgAdminModule):
scripts.append({
'name': 'pgadmin.tools.grant_wizard',
'path': url_for('grant_wizard.index') + 'grant_wizard',
- 'when': None
+ 'when': 'server'
})
scripts.append({
'name': 'pgadmin.browser.wizard',
'path': url_for('browser.static', filename='js/wizard'),
- 'when': None
+ 'when': 'server'
})
return scripts
@@ -150,7 +150,6 @@ def script():
status=200,
mimetype="application/javascript")
-
@blueprint.route(
'/acl/<int:gid>/<int:sid>/<int:did>/', methods=('GET', 'POST'))
@login_required
diff --git a/web/pgadmin/tools/import_export/__init__.py b/web/pgadmin/tools/import_export/__init__.py
index 4c1ac04..4bbfde8 100644
--- a/web/pgadmin/tools/import_export/__init__.py
+++ b/web/pgadmin/tools/import_export/__init__.py
@@ -48,7 +48,7 @@ class ImportExportModule(PgAdminModule):
scripts.append({
'name': name,
'path': url_for('import_export.index') + script,
- 'when': None
+ 'when': 'database'
})
return scripts
diff --git a/web/pgadmin/tools/maintenance/__init__.py b/web/pgadmin/tools/maintenance/__init__.py
index c12906e..a4586d4 100644
--- a/web/pgadmin/tools/maintenance/__init__.py
+++ b/web/pgadmin/tools/maintenance/__init__.py
@@ -50,7 +50,7 @@ class MaintenanceModule(PgAdminModule):
scripts.append({
'name': name,
'path': url_for('maintenance.index') + script,
- 'when': None
+ 'when': 'database'
})
return scripts
diff --git a/web/pgadmin/tools/restore/__init__.py b/web/pgadmin/tools/restore/__init__.py
index b6bf564..12d6777 100644
--- a/web/pgadmin/tools/restore/__init__.py
+++ b/web/pgadmin/tools/restore/__init__.py
@@ -48,7 +48,7 @@ class RestoreModule(PgAdminModule):
return [{
'name': 'pgadmin.tools.restore',
'path': url_for('restore.index') + 'restore',
- 'when': None
+ 'when': 'database'
}]
diff --git a/web/pgadmin/tools/sqleditor/__init__.py b/web/pgadmin/tools/sqleditor/__init__.py
index 828cb99..f5a8937 100644
--- a/web/pgadmin/tools/sqleditor/__init__.py
+++ b/web/pgadmin/tools/sqleditor/__init__.py
@@ -67,7 +67,7 @@ class SqlEditorModule(PgAdminModule):
return [{
'name': 'pgadmin.sqleditor',
'path': url_for('sqleditor.index') + "sqleditor",
- 'when': None
+ 'when': 'server'
}]
def get_panels(self):
diff --git a/web/pgadmin/tools/user_management/templates/user_management/js/user_management.js b/web/pgadmin/tools/user_management/templates/user_management/js/user_management.js
index c8c91c7..251a6c8 100644
--- a/web/pgadmin/tools/user_management/templates/user_management/js/user_management.js
+++ b/web/pgadmin/tools/user_management/templates/user_management/js/user_management.js
@@ -1,7 +1,7 @@
define([
'jquery', 'underscore', 'underscore.string', 'alertify',
'pgadmin.browser', 'backbone', 'backgrid', 'backform', 'pgadmin.browser.node',
- 'backgrid.select.all', 'backgrid.filter'
+ 'backgrid.filter'
],
// This defines Backup dialog
view thread (13+ 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]
Subject: Re: [pgAdmin4][Patch]: Load module's JS files only when required
In-Reply-To: <CAM5-9D92zW=qJqKT_HFjtMQvOAXuz5a5DJuABnz9fWWLKeZZrw@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