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

Make Statistics, Dependencies, Dependants tabs closable and the user can add them back using the 'Add panel' option. Fixes #5091

Browse Source
This commit is contained in:
Aditya Toshniwal
2021-02-03 12:46:32 +05:30
committed by Akshay Joshi
parent 18f055fa5e
commit 73b6b95fbc
7 changed files with 338 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
web/pgadmin/misc/dependencies/static/js/dependencies.js
View File

@@ -31,7 +31,8 @@ define('misc.dependencies', [
/* Parameter is used to set the proper label of the
* backgrid header cell.
*/
_.bindAll(this, 'showDependencies', '__loadMoreRows', '__appendGridToPanel');
_.bindAll(this, 'showDependencies', '__updateCollection', '__loadMoreRows',
'__appendGridToPanel', 'toggleVisibility');
// Defining Backbone Model for Dependencies.
var Model = Backbone.Model.extend({
@@ -63,8 +64,28 @@ define('misc.dependencies', [
model: Model,
}))(null);
pgBrowser.Events.on('pgadmin-browser:tree:selected', this.showDependencies);
this.__appendGridToPanel();
if(this.dependenciesPanel) this.toggleVisibility(this.dependenciesPanel.isVisible());
},
toggleVisibility: function(visible, closed=false) {
if (visible) {
this.dependenciesPanel = pgBrowser.docker.findPanels('dependencies')[0];
var t = pgBrowser.tree,
i = t.selected(),
d = i && t.itemData(i),
n = i && d && pgBrowser.Nodes[d._type];
this.showDependencies(i, d, n);
// We will start listening the tree selection event.
pgBrowser.Events.on('pgadmin-browser:tree:selected', this.showDependencies);
} else {
if(closed) {
$(this.dependenciesPanel).data('node-prop', '');
}
// We don't need to listen the tree item selection event.
pgBrowser.Events.off('pgadmin-browser:tree:selected', this.showDependencies);
}
},
/* Function is used to create and render backgrid with
@@ -112,6 +133,7 @@ define('misc.dependencies', [
// Condition is used to save grid object to change the label of the header.
this.dependenciesGrid = grid;
$gridContainer.empty();
$gridContainer.append(grid.render().el);
return true;
@@ -119,15 +141,34 @@ define('misc.dependencies', [
// Fetch the actual data and update the collection
showDependencies: function(item, data, node) {
if (!node) {
return;
}
/**
* We can't start fetching the statistics immediately, it is possible -
* the user is just using keyboards to select the node, and just
* traversing through.
*
* We will wait for some time before fetching
**/
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
this.__updateCollection(node.generate_url(item, 'dependency', data, true), node, item, data._type);
}, 400);
},
// Fetch the actual data and update the collection
__updateCollection: function(url, node, item, node_type) {
let self = this,
msg = gettext('Please select an object in the tree view.'),
panel = this.dependenciesPanel,
$container = panel.layout().scene().find('.pg-panel-content'),
$msgContainer = $container.find('.pg-panel-depends-message'),
$gridContainer = $container.find('.pg-panel-dependencies-container'),
treeHierarchy = node.getTreeNodeHierarchy(item),
n_type = data._type,
url = node.generate_url(item, 'dependency', data, true);
treeHierarchy = node.getTreeNodeHierarchy(item);
if (node) {
/* We fetch the Dependencies and Dependencies tab only for
@@ -135,12 +176,24 @@ define('misc.dependencies', [
*/
msg = gettext('No dependency information is available for the selected object.');
if (node.hasDepends) {
// Avoid unnecessary reloads
var cache_flag = {
node_type: node_type,
url: url,
};
if (_.isEqual($(panel).data('node-prop'), cache_flag)) {
return;
}
// Cache the current IDs for next time
$(panel).data('node-prop', cache_flag);
/* Updating the label for the 'field' type of the backbone model.
* Label should be "Database" if the node type is tablespace or role
* and dependencies tab is selected. For other nodes and dependencies tab
* it should be 'Restriction'.
*/
self.__appendGridToPanel();
this.dependenciesGrid.columns.models[2].set({
'label': gettext('Restriction'),
});
@@ -150,85 +203,87 @@ define('misc.dependencies', [
$gridContainer.removeClass('d-none');
var timer = '';
$.ajax({
url: url,
type: 'GET',
beforeSend: function(xhr) {
xhr.setRequestHeader(pgAdmin.csrf_token_header, pgAdmin.csrf_token);
// Generate a timer for the request
timer = setTimeout(function() {
// notify user if request is taking longer than 1 second
$msgContainer.text(gettext('Fetching dependency information from the server...'));
$msgContainer.removeClass('d-none');
msg = '';
}, 1000);
},
})
.done(function(res) {
clearTimeout(timer);
if (res.length > 0) {
if (!$msgContainer.hasClass('d-none')) {
$msgContainer.addClass('d-none');
}
$gridContainer.removeClass('d-none');
self.dependenciesData = res;
// Load only 100 rows
self.dependenciesCollection.reset(self.dependenciesData.splice(0, 100), {parse: true});
// Load more rows on scroll down
pgBrowser.Events.on(
'pgadmin-browser:panel-dependencies:' +
wcDocker.EVENT.SCROLLED,
self.__loadMoreRows
);
} else {
// Do not listen the scroll event
pgBrowser.Events.off(
'pgadmin-browser:panel-dependencies:' +
wcDocker.EVENT.SCROLLED
);
self.dependenciesCollection.reset({silent: true});
$msgContainer.text(msg);
$msgContainer.removeClass('d-none');
if (!$gridContainer.hasClass('d-none')) {
$gridContainer.addClass('d-none');
}
}
var ajaxHook = function() {
$.ajax({
url: url,
type: 'GET',
beforeSend: function(xhr) {
xhr.setRequestHeader(pgAdmin.csrf_token_header, pgAdmin.csrf_token);
// Generate a timer for the request
timer = setTimeout(function() {
// notify user if request is taking longer than 1 second
$msgContainer.text(gettext('Fetching dependency information from the server...'));
$msgContainer.removeClass('d-none');
msg = '';
}, 1000);
},
})
.fail(function(xhr, error, message) {
var _label = treeHierarchy[n_type].label;
pgBrowser.Events.trigger(
'pgadmin:node:retrieval:error', 'depends', xhr, error, message
);
if (!Alertify.pgHandleItemError(xhr, error, message, {
item: item,
info: treeHierarchy,
})) {
Alertify.pgNotifier(
error, xhr,
gettext('Error retrieving data from the server: %s', message || _label),
function(alertMsg) {
if(alertMsg === 'CRYPTKEY_SET') {
self.showDependencies(item, data, node);
} else {
console.warn(arguments);
}
});
}
// show failed message.
$msgContainer.text(gettext('Failed to retrieve data from the server.'));
});
.done(function(res) {
clearTimeout(timer);
if (res.length > 0) {
if (!$msgContainer.hasClass('d-none')) {
$msgContainer.addClass('d-none');
}
$gridContainer.removeClass('d-none');
self.dependenciesData = res;
// Load only 100 rows
self.dependenciesCollection.reset(self.dependenciesData.splice(0, 100), {parse: true});
// Load more rows on scroll down
pgBrowser.Events.on(
'pgadmin-browser:panel-dependencies:' +
wcDocker.EVENT.SCROLLED,
self.__loadMoreRows
);
} else {
// Do not listen the scroll event
pgBrowser.Events.off(
'pgadmin-browser:panel-dependencies:' +
wcDocker.EVENT.SCROLLED
);
self.dependenciesCollection.reset({silent: true});
$msgContainer.text(msg);
$msgContainer.removeClass('d-none');
if (!$gridContainer.hasClass('d-none')) {
$gridContainer.addClass('d-none');
}
}
})
.fail(function(xhr, error, message) {
var _label = treeHierarchy[node_type].label;
pgBrowser.Events.trigger(
'pgadmin:node:retrieval:error', 'depends', xhr, error, message
);
if (!Alertify.pgHandleItemError(xhr, error, message, {
item: item,
info: treeHierarchy,
})) {
Alertify.pgNotifier(
error, xhr,
gettext('Error retrieving data from the server: %s', message || _label),
function(alertMsg) {
if(alertMsg === 'CRYPTKEY_SET') {
ajaxHook();
} else {
console.warn(arguments);
}
});
}
// show failed message.
$msgContainer.text(gettext('Failed to retrieve data from the server.'));
});
};
ajaxHook();
}
}
if (msg != '') {

221
web/pgadmin/misc/dependents/static/js/dependents.js
View File

@@ -31,7 +31,8 @@ define('misc.dependents', [
/* Parameter is used to set the proper label of the
* backgrid header cell.
*/
_.bindAll(this, 'showDependents', '__loadMoreRows', '__appendGridToPanel');
_.bindAll(this, 'showDependents', '__updateCollection', '__loadMoreRows',
'__appendGridToPanel', 'toggleVisibility');
// Defining Backbone Model for Dependents.
var Model = Backbone.Model.extend({
@@ -63,9 +64,28 @@ define('misc.dependents', [
model: Model,
}))(null);
pgBrowser.Events.on('pgadmin-browser:tree:selected', this.showDependents);
pgBrowser.Events.on('pgadmin-browser:tree:refreshing', this.refreshDependents, this);
this.__appendGridToPanel();
if(this.dependentsPanel) this.toggleVisibility(this.dependentsPanel.isVisible());
},
toggleVisibility: function(visible, closed=false) {
if (visible) {
this.dependentsPanel = pgBrowser.docker.findPanels('dependents')[0];
var t = pgBrowser.tree,
i = t.selected(),
d = i && t.itemData(i),
n = i && d && pgBrowser.Nodes[d._type];
this.showDependents(i, d, n);
// We will start listening the tree selection event.
pgBrowser.Events.on('pgadmin-browser:tree:selected', this.showDependents);
} else {
if(closed) {
$(this.dependentsPanel).data('node-prop', '');
}
// We don't need to listen the tree item selection event.
pgBrowser.Events.off('pgadmin-browser:tree:selected', this.showDependents);
}
},
/* Function is used to create and render backgrid with
@@ -113,6 +133,7 @@ define('misc.dependents', [
// Condition is used to save grid object to change the label of the header.
this.dependentGrid = grid;
$gridContainer.empty();
$gridContainer.append(grid.render().el);
return true;
@@ -120,15 +141,34 @@ define('misc.dependents', [
// Fetch the actual data and update the collection
showDependents: function(item, data, node) {
if (!node) {
return;
}
/**
* We can't start fetching the statistics immediately, it is possible -
* the user is just using keyboards to select the node, and just
* traversing through.
*
* We will wait for some time before fetching
**/
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
this.__updateCollection(node.generate_url(item, 'dependent', data, true), node, item, data._type);
}, 400);
},
// Fetch the actual data and update the collection
__updateCollection: function(url, node, item, node_type) {
let self = this,
msg = gettext('Please select an object in the tree view.'),
panel = this.dependentsPanel,
$container = panel.layout().scene().find('.pg-panel-content'),
$msgContainer = $container.find('.pg-panel-depends-message'),
$gridContainer = $container.find('.pg-panel-dependents-container'),
treeHierarchy = node.getTreeNodeHierarchy(item),
n_type = data._type,
url = node.generate_url(item, 'dependent', data, true);
treeHierarchy = node.getTreeNodeHierarchy(item);
if (node) {
/* We fetch the Dependencies and Dependents tab only for
@@ -136,11 +176,23 @@ define('misc.dependents', [
*/
msg = gettext('No dependent information is available for the selected object.');
if (node.hasDepends) {
// Avoid unnecessary reloads
var cache_flag = {
node_type: node_type,
url: url,
};
if (_.isEqual($(panel).data('node-prop'), cache_flag)) {
return;
}
// Cache the current IDs for next time
$(panel).data('node-prop', cache_flag);
/* Updating the label for the 'field' type of the backbone model.
* Label should be "Database" if the node type is tablespace or role
* and dependent tab is selected. For other nodes and dependencies tab
* it should be 'Restriction'.
*/
this.__appendGridToPanel();
if (node.type == 'tablespace' || node.type == 'role') {
this.dependentGrid.columns.models[2].set({
'label': gettext('Database'),
@@ -156,85 +208,88 @@ define('misc.dependents', [
$gridContainer.removeClass('d-none');
var timer = '';
$.ajax({
url: url,
type: 'GET',
beforeSend: function(xhr) {
xhr.setRequestHeader(pgAdmin.csrf_token_header, pgAdmin.csrf_token);
// Generate a timer for the request
timer = setTimeout(function() {
// notify user if request is taking longer than 1 second
$msgContainer.text(gettext('Fetching dependent information from the server...'));
$msgContainer.removeClass('d-none');
msg = '';
}, 1000);
},
})
.done(function(res) {
clearTimeout(timer);
if (res.length > 0) {
if (!$msgContainer.hasClass('d-none')) {
$msgContainer.addClass('d-none');
}
$gridContainer.removeClass('d-none');
self.dependentData = res;
// Load only 100 rows
self.dependentCollection.reset(self.dependentData.splice(0, 100), {parse: true});
// Load more rows on scroll down
pgBrowser.Events.on(
'pgadmin-browser:panel-dependents:' +
wcDocker.EVENT.SCROLLED,
self.__loadMoreRows
);
} else {
// Do not listen the scroll event
pgBrowser.Events.off(
'pgadmin-browser:panel-dependents:' +
wcDocker.EVENT.SCROLLED
);
self.dependentCollection.reset({silent: true});
$msgContainer.text(msg);
$msgContainer.removeClass('d-none');
if (!$gridContainer.hasClass('d-none')) {
$gridContainer.addClass('d-none');
}
}
var ajaxHook = function() {
$.ajax({
url: url,
type: 'GET',
beforeSend: function(xhr) {
xhr.setRequestHeader(pgAdmin.csrf_token_header, pgAdmin.csrf_token);
// Generate a timer for the request
timer = setTimeout(function() {
// notify user if request is taking longer than 1 second
$msgContainer.text(gettext('Fetching dependent information from the server...'));
$msgContainer.removeClass('d-none');
msg = '';
}, 1000);
},
})
.fail(function(xhr, error, message) {
var _label = treeHierarchy[n_type].label;
pgBrowser.Events.trigger(
'pgadmin:node:retrieval:error', 'depends', xhr, error, message
);
if (!Alertify.pgHandleItemError(xhr, error, message, {
item: item,
info: treeHierarchy,
})) {
Alertify.pgNotifier(
error, xhr,
gettext('Error retrieving data from the server: %s', message || _label),
function(alertMsg) {
if(alertMsg === 'CRYPTKEY_SET') {
self.showDependents(item, data, node);
} else {
console.warn(arguments);
}
});
}
// show failed message.
$msgContainer.text(gettext('Failed to retrieve data from the server.'));
});
.done(function(res) {
clearTimeout(timer);
if (res.length > 0) {
if (!$msgContainer.hasClass('d-none')) {
$msgContainer.addClass('d-none');
}
$gridContainer.removeClass('d-none');
self.dependentData = res;
// Load only 100 rows
self.dependentCollection.reset(self.dependentData.splice(0, 100), {parse: true});
// Load more rows on scroll down
pgBrowser.Events.on(
'pgadmin-browser:panel-dependents:' +
wcDocker.EVENT.SCROLLED,
self.__loadMoreRows
);
} else {
// Do not listen the scroll event
pgBrowser.Events.off(
'pgadmin-browser:panel-dependents:' +
wcDocker.EVENT.SCROLLED
);
self.dependentCollection.reset({silent: true});
$msgContainer.text(msg);
$msgContainer.removeClass('d-none');
if (!$gridContainer.hasClass('d-none')) {
$gridContainer.addClass('d-none');
}
}
})
.fail(function(xhr, error, message) {
var _label = treeHierarchy[node_type].label;
pgBrowser.Events.trigger(
'pgadmin:node:retrieval:error', 'depends', xhr, error, message
);
if (!Alertify.pgHandleItemError(xhr, error, message, {
item: item,
info: treeHierarchy,
})) {
Alertify.pgNotifier(
error, xhr,
gettext('Error retrieving data from the server: %s', message || _label),
function(alertMsg) {
if(alertMsg === 'CRYPTKEY_SET') {
ajaxHook();
} else {
console.warn(arguments);
}
});
}
// show failed message.
$msgContainer.text(gettext('Failed to retrieve data from the server.'));
});
};
ajaxHook();
}
}
if (msg != '') {

117
web/pgadmin/misc/statistics/static/js/statistics.js
View File

@@ -116,12 +116,11 @@ define('misc.statistics', [
this.initialized = true;
_.bindAll(
this,
'showStatistics', 'panelVisibilityChanged',
'showStatistics', 'toggleVisibility',
'__createMultiLineStatistics', '__createSingleLineStatistics', '__loadMoreRows');
_.extend(
this, {
initialized: true,
collection: new(Backbone.Collection)(null),
statistic_columns: [{
editable: false,
@@ -136,66 +135,49 @@ define('misc.statistics', [
label: gettext('Value'),
cell: 'string',
}],
panel: pgBrowser.docker.findPanels('statistics'),
columns: null,
grid: null,
});
var self = this;
this.panel = pgBrowser.docker.findPanels('statistics');
if(this.panel.length > 0) this.toggleVisibility(this.panel[0].isVisible());
},
// We will listen to the visibility change of the statistics panel
pgBrowser.Events.on(
'pgadmin-browser:panel-statistics:' +
wcDocker.EVENT.VISIBILITY_CHANGED,
this.panelVisibilityChanged
);
toggleVisibility: function(visible, closed=false) {
if (visible) {
this.panel = pgBrowser.docker.findPanels('statistics');
var t = pgBrowser.tree,
i = t.selected(),
d = i && t.itemData(i),
n = i && d && pgBrowser.Nodes[d._type];
pgBrowser.Events.on(
'pgadmin:browser:node:updated',
function() {
if (this.panel && this.panel.length) {
$(this.panel[0]).data('node-prop', '');
this.panelVisibilityChanged(this.panel[0]);
}
}, this
);
pgBrowser.NodeStatistics.showStatistics.apply(
pgBrowser.NodeStatistics, [i, d, n]
);
// Hmm.. Did we find the statistics panel, and is it visible (openned)?
// If that is the case - we need to listen the browser tree selection
// events.
if (this.panel.length == 0) {
// We will start listening the tree selection event.
pgBrowser.Events.on(
'pgadmin-browser:panel-statistics:' + wcDocker.EVENT.INIT,
function() {
self.panel = pgBrowser.docker.findPanels('statistics');
if (self.panel[0].isVisible() ||
self.panel.length != 1) {
pgBrowser.Events.on(
'pgadmin-browser:tree:selected', this.showStatistics
);
pgBrowser.Events.on(
'pgadmin-browser:tree:refreshing', this.refreshStatistics, this
);
}
}.bind(this)
'pgadmin-browser:tree:selected',
pgBrowser.NodeStatistics.showStatistics
);
pgBrowser.Events.on(
'pgadmin-browser:tree:refreshing',
pgBrowser.NodeStatistics.refreshStatistics,
this
);
} else {
if (self.panel[0].isVisible() ||
self.panel.length != 1) {
pgBrowser.Events.on(
'pgadmin-browser:tree:selected', this.showStatistics
);
pgBrowser.Events.on(
'pgadmin-browser:tree:refreshing', this.refreshStatistics, this
);
if(closed) {
$(this.panel[0]).data('node-prop', '');
}
}
if (self.panel.length > 0 && self.panel[0].isVisible()) {
pgBrowser.Events.on(
'pgadmin-browser:tree:selected', this.showStatistics
// We don't need to listen the tree item selection event.
pgBrowser.Events.off(
'pgadmin-browser:tree:selected',
pgBrowser.NodeStatistics.showStatistics
);
pgBrowser.Events.on(
'pgadmin-browser:tree:refreshing', this.refreshStatistics, this
pgBrowser.Events.off(
'pgadmin-browser:tree:refreshing',
pgBrowser.NodeStatistics.refreshStatistics,
this
);
}
},
@@ -440,41 +422,6 @@ define('misc.statistics', [
this.collection.reset(res);
},
panelVisibilityChanged: function(panel) {
if (panel.isVisible()) {
var t = pgBrowser.tree,
i = t.selected(),
d = i && t.itemData(i),
n = i && d && pgBrowser.Nodes[d._type];
pgBrowser.NodeStatistics.showStatistics.apply(
pgBrowser.NodeStatistics, [i, d, n]
);
// We will start listening the tree selection event.
pgBrowser.Events.on(
'pgadmin-browser:tree:selected',
pgBrowser.NodeStatistics.showStatistics
);
pgBrowser.Events.on(
'pgadmin-browser:tree:refreshing',
pgBrowser.NodeStatistics.refreshStatistics,
this
);
} else {
// We don't need to listen the tree item selection event.
pgBrowser.Events.off(
'pgadmin-browser:tree:selected',
pgBrowser.NodeStatistics.showStatistics
);
pgBrowser.Events.off(
'pgadmin-browser:tree:refreshing',
pgBrowser.NodeStatistics.refreshStatistics,
this
);
}
},
});
return pgBrowser.NodeStatistics;