From b397ba778780aeb3c9f80c854782a15d6918a90f Mon Sep 17 00:00:00 2001 From: Pradip Parkale Date: Mon, 4 Apr 2022 17:42:42 +0530 Subject: [PATCH] Fixed issues related to porting of properties collection and dashboard. refs #7132 --- web/package.json | 7 -- .../extensions/static/js/extension.js | 3 +- .../extensions/static/js/extension.ui.js | 8 ++ .../schemas/operators/static/js/operator.js | 1 + .../tables/partitions/static/js/partition.js | 2 +- web/pgadmin/browser/static/js/collection.js | 8 +- web/pgadmin/browser/static/js/node.js | 9 +- web/pgadmin/browser/static/js/panel.js | 12 ++- web/pgadmin/browser/static/js/panel_view.jsx | 4 +- .../dashboard/static/js/ActiveQuery.ui.js | 4 +- web/pgadmin/dashboard/static/js/Dashboard.jsx | 49 +++++++++-- .../dependencies/static/js/Dependencies.jsx | 1 + .../misc/dependents/static/js/Dependents.jsx | 4 +- .../properties/CollectionNodeProperties.jsx | 86 ++++++++++--------- .../misc/statistics/static/js/Statistics.jsx | 1 + web/pgadmin/static/js/components/PgTable.jsx | 72 +++++++++++++--- 16 files changed, 178 insertions(+), 93 deletions(-) diff --git a/web/package.json b/web/package.json index 2379e9188..d708b05e4 100644 --- a/web/package.json +++ b/web/package.json @@ -82,11 +82,6 @@ "@date-io/core": "^1.3.6", "@date-io/date-fns": "1.x", "@emotion/sheet": "^1.0.1", - "@fortawesome/fontawesome-free": "^5.14.0", - "@fortawesome/fontawesome-svg-core": "^6.1.0", - "@fortawesome/free-regular-svg-icons": "^6.1.0", - "@fortawesome/free-solid-svg-icons": "^6.1.0", - "@fortawesome/react-fontawesome": "^0.1.18", "@material-ui/core": "4.11.0", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "4.0.0-alpha.58", @@ -128,7 +123,6 @@ "date-fns": "^2.24.0", "diff-arrays-of-objects": "^1.1.8", "dropzone": "^5.9.3", - "html-loader": "^3.1.0", "html2canvas": "^1.0.0-rc.7", "immutability-helper": "^3.0.0", "imports-loader": "^2.0.0", @@ -162,7 +156,6 @@ "react-dom": "^17.0.1", "react-draggable": "^4.4.4", "react-rnd": "^10.3.5", - "react-fontawesome": "^1.7.1", "react-router-dom": "^6.2.2", "react-select": "^4.2.1", "react-table": "^7.6.3", diff --git a/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.js b/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.js index 82001e107..d288a6734 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.js +++ b/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.js @@ -8,7 +8,7 @@ ////////////////////////////////////////////////////////////// -import { getNodeAjaxOptions,getNodeListByName } from '../../../../../../static/js/node_ajax'; +import { getNodeAjaxOptions, getNodeListByName } from '../../../../../../static/js/node_ajax'; import ExtensionsSchema from './extension.ui'; define('pgadmin.node.extension', [ @@ -99,6 +99,7 @@ define('pgadmin.node.extension', [ let nodeObj = pgAdmin.Browser.Nodes['extension']; return new ExtensionsSchema( { + role:()=>getNodeListByName('role', treeNodeInfo, itemNodeData), extensionsList:()=>getNodeAjaxOptions('avails', nodeObj, treeNodeInfo, itemNodeData, { cacheLevel: 'server'}, (data)=>{ let res = []; diff --git a/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.ui.js b/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.ui.js index 918faee7f..b0fcc6bd3 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.ui.js +++ b/web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.ui.js @@ -24,11 +24,13 @@ export default class ExtensionsSchema extends BaseUISchema { }); fieldOptions = { extensionsList: [], + role:[], schemaList: [], ...fieldOptions, }; this.extensionsList = fieldOptions.extensionsList; this.schemaList = fieldOptions.schemaList; + this.role = fieldOptions.role; } get idAttribute() { @@ -89,6 +91,12 @@ export default class ExtensionsSchema extends BaseUISchema { id: 'oid', label: gettext('OID'), type: 'text', mode: ['properties'], }, + { + id: 'owner', label: gettext('Owner'), + options: this.role, + type: 'select', + mode: ['properties'], controlProps: { allowClear: false}, + }, { id: 'schema', label: gettext('Schema'), type: 'select', mode: ['properties', 'create', 'edit'], group: gettext('Definition'), diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/operators/static/js/operator.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/operators/static/js/operator.js index 3a2bb65a8..576220638 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/operators/static/js/operator.js +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/operators/static/js/operator.js @@ -24,6 +24,7 @@ define('pgadmin.node.operator', [ columns: ['name', 'owner', 'description'], canDrop: false, canDropCascade: false, + canSelect: false }); } diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/partitions/static/js/partition.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/partitions/static/js/partition.js index b360c6b8d..93944e3b9 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/partitions/static/js/partition.js +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/partitions/static/js/partition.js @@ -29,7 +29,7 @@ function( label: gettext('Partitions'), type: 'coll-partition', columns: [ - 'name', 'schema', 'partition_value', 'is_partitioned', 'description', + 'name', 'schema', 'partition_scheme', 'partition_value', 'is_partitioned', 'description', ], canDrop: SchemaChildTreeNode.isTreeItemOfChildOfSchema, canDropCascade: SchemaChildTreeNode.isTreeItemOfChildOfSchema, diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js index 240665432..78760632d 100644 --- a/web/pgadmin/browser/static/js/collection.js +++ b/web/pgadmin/browser/static/js/collection.js @@ -6,9 +6,6 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// - -// import {removeNodeView} from './node_view'; -// import Notify from '../../../static/js/helpers/Notifier'; import {getPanelView} from './panel_view'; define([ @@ -92,11 +89,10 @@ define([ canDropCascade: true, selectParentNodeOnDelete: false, showProperties: function(item, data, panel) { - - let container = panel.$container[0]; + let container = panel.$container.find('.obj_properties').first(); getPanelView( pgBrowser.tree, - container, + container[0], pgBrowser, panel._type ); diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js index 21ae4c06d..9e5244b7b 100644 --- a/web/pgadmin/browser/static/js/node.js +++ b/web/pgadmin/browser/static/js/node.js @@ -1261,16 +1261,11 @@ define('pgadmin.browser.node', [ $(this).data('node-prop', treeHierarchy); /* Remove any dom rendered by getNodeView */ - removeNodeView(pgBrowser.panels['properties'].panel.$container[0]); - - var containerProperties = pgBrowser.panels['properties'].panel.$container; - containerProperties.addClass('pg-panel-content pg-no-overflow pg-el-container'); - - + removeNodeView(j[0]); if(that.getSchema) { let treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(item); getNodeView( - that.type, treeNodeInfo, 'properties', data, 'tab', containerProperties[0], this, onEdit + that.type, treeNodeInfo, 'properties', data, 'tab', j[0], this, onEdit ); return; } diff --git a/web/pgadmin/browser/static/js/panel.js b/web/pgadmin/browser/static/js/panel.js index c0bd9178f..b76a90c1c 100644 --- a/web/pgadmin/browser/static/js/panel.js +++ b/web/pgadmin/browser/static/js/panel.js @@ -122,8 +122,6 @@ define( that.resizedContainer.apply(myPanel); } - - if (myPanel._type == 'dashboard') { getPanelView( pgBrowser.tree, @@ -150,7 +148,7 @@ define( pgBrowser.Events.on('pgadmin-browser:tree:selected', () => { - if(myPanel.isVisible()) { + if(myPanel.isVisible() && myPanel._type !== 'properties') { getPanelView( pgBrowser.tree, $container[0], @@ -162,7 +160,7 @@ define( pgBrowser.Events.on('pgadmin-browser:tree:refreshing', () => { - if(myPanel.isVisible()) { + if(myPanel.isVisible() && myPanel._type !== 'properties') { getPanelView( pgBrowser.tree, $container[0], @@ -177,7 +175,6 @@ define( }, eventFunc: function(eventName) { var name = $(this).data('pgAdminName'); - try { pgBrowser.Events.trigger( 'pgadmin-browser:panel', eventName, this, arguments @@ -244,10 +241,11 @@ define( .scene() .find('.pg-panel-content'); - if (isPanelVisible) { + if (isPanelVisible && selectedPanel._type !== 'properties') { if (eventName == 'panelClosed') { removePanelView($container[0]); - } else if (eventName == 'panelVisibilityChanged') { + } + else if (eventName == 'panelVisibilityChanged' && selectedPanel._type !== 'properties') { getPanelView( pgBrowser.tree, $container[0], diff --git a/web/pgadmin/browser/static/js/panel_view.jsx b/web/pgadmin/browser/static/js/panel_view.jsx index 39122755d..f212debbf 100644 --- a/web/pgadmin/browser/static/js/panel_view.jsx +++ b/web/pgadmin/browser/static/js/panel_view.jsx @@ -53,8 +53,6 @@ export function getPanelView( container ); } - - if (panelType == 'statistics') { ReactDOM.render( @@ -69,7 +67,7 @@ export function getPanelView( container ); } - if (panelType == 'properties') { + if (panelType == 'properties' && nodeData?.is_collection) { ReactDOM.render( ({ ...theme.mixins.panelBorder, flexDirection: 'column', overflow: 'hidden !important', - flexGrow: 1 + flexGrow: 1, + minWidth: '300px', + minHeight: '300px' + }, + arrowButton: { + fontSize: '2rem !important', + margin: '-7px' }, terminateButton: { color: theme.palette.error.main }, buttonClick: { backgroundColor: theme.palette.grey[400] + }, + refreshButton: { + marginLeft: 'auto', + height: '1.9rem', + width: '2.2rem', + ...theme.mixins.panelBorder, } })); @@ -114,6 +127,7 @@ export default function Dashboard({ const [msg, setMsg] = useState(''); const[infoMsg, setInfo] = useState(''); const [val, setVal] = useState(0); + const [refresh, setRefresh] = useState(); const [schemaDict, setSchemaDict] = React.useState({}); if (!did) { @@ -145,7 +159,7 @@ export default function Dashboard({ }, { accessor: 'setting', - Header: gettext('Setting'), + Header: gettext('Value'), sortble: true, resizable: true, disableGlobalFilter: false, @@ -273,7 +287,7 @@ export default function Dashboard({ } + icon={} onClick={() => { if (!canTakeAction(row, 'cancel')) return; @@ -328,12 +342,11 @@ export default function Dashboard({ className={row.isExpanded ?classes.buttonClick : ''} icon={ row.isExpanded ? ( - + ) : ( - + ) } - size="xs" noBorder onClick={(e) => { e.preventDefault(); @@ -753,7 +766,28 @@ export default function Dashboard({ if (message != '') { setMsg(message); } - }, [nodeData, val, did, preferences, infoMsg]); + return () => { + setRefresh(); + }; + }, [nodeData, val, did, preferences, infoMsg, refresh]); + + const RefreshButton = () =>{ + return( + } + onClick={(e) => { + e.preventDefault(); + setRefresh(true); + }} + color="default" + aria-label="Refresh" + title={gettext('Refresh')} + > + ); + }; return ( <> @@ -783,6 +817,7 @@ export default function Dashboard({ {tab.map((tabValue, i) => { return ; })} + { setTableData([]); diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx index 867368b97..6b66e1c50 100644 --- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx +++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx @@ -141,13 +141,14 @@ export default function Dependents({ nodeData, item, node, ...props }) { } } if (message != '') { + setLoaderText(''); setMsg(message); } return () => { setTableData([]); }; - }, [nodeData]); + }, [nodeData, item]); return ( <> @@ -162,7 +163,6 @@ export default function Dependents({ nodeData, item, node, ...props }) { ) : (
{loaderText ? () : -
{gettext(msg)} diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx index db20331a9..fb16de07d 100644 --- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx +++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx @@ -19,6 +19,8 @@ import PgTable from 'sources/components/PgTable'; import Theme from 'sources/Theme'; import PropTypes from 'prop-types'; import { PgIconButton } from '../../static/js/components/Buttons'; +import DeleteIcon from '@material-ui/icons/Delete'; +import DeleteSweepIcon from '@material-ui/icons/DeleteSweep'; const useStyles = makeStyles((theme) => ({ emptyPanel: { @@ -56,6 +58,8 @@ const useStyles = makeStyles((theme) => ({ width: '100% !important', background: theme.palette.grey[400], padding: '8px', + overflow: 'hidden !important', + overflowX: 'auto !important' }, dropButton: { marginRight: '5px !important' @@ -155,24 +159,13 @@ export function CollectionNodeView({ .then(function (res) { if (res.success == 0) { pgBrowser.report_error(res.errormsg, res.info); - } else { - pgBrowser.Events.trigger( - 'pgadmin:browser:tree:refresh', - selItem || pgBrowser.tree.selected(), - { - success: function () { - pgBrowser.tree.select(selItem); - selNode.callbacks.selected.apply(selNode, [selItem]); - }, - } - ); } setReload(true); }) .catch(function (error) { - Notify.error( + Notify.alert( gettext('Error dropping %s', selectedItemData._label.toLowerCase()), - error.message + error.response.data.errormsg ); }); }; @@ -190,7 +183,6 @@ export function CollectionNodeView({ let nodeObj = pgAdmin.Browser.Nodes[itemNodeData?._type.replace('coll-', '')]; - let schema = nodeObj.getSchema.call(nodeObj, treeNodeInfo, itemNodeData); let url = generateCollectionURL.call(nodeObj, item, 'properties'); const api = getApiInstance(); @@ -198,7 +190,8 @@ export function CollectionNodeView({ let tableColumns = []; var column = {}; - if (itemNodeData._type.indexOf('coll-') > -1) { + if (itemNodeData._type.indexOf('coll-') > -1 && !_.isUndefined(nodeObj.getSchema)) { + let schema = nodeObj.getSchema?.call(nodeObj, treeNodeInfo, itemNodeData); schema.fields.forEach((field) => { if (node.columns.indexOf(field.id) > -1) { if (field.label.indexOf('?') > -1) { @@ -208,6 +201,7 @@ export function CollectionNodeView({ sortble: true, resizable: false, disableGlobalFilter: false, + minWidth: 100, // eslint-disable-next-line react/display-name Cell: ({ value }) => { return (); @@ -220,30 +214,45 @@ export function CollectionNodeView({ sortble: true, resizable: false, disableGlobalFilter: false, + minWidth: 100, }; } tableColumns.push(column); } }); - api({ - url: url, - type: 'GET', - }) - .then((res) => { - res.data.forEach((element) => { - element['icon'] = ''; - }); - setPgTableColumns(tableColumns); - setData(res.data); - setInfoMsg('No properties are available for the selected object.'); - }) - .catch((err) => { - Notify.alert( - gettext('Failed to retrieve data from the server.'), - gettext(err.message) - ); - }); + }else{ + node.columns.forEach((field) => { + column = { + Header: field, + accessor: field, + sortble: true, + resizable: false, + disableGlobalFilter: false, + minWidth: 100, + }; + tableColumns.push(column); + + }); } + + api({ + url: url, + type: 'GET', + }) + .then((res) => { + res.data.forEach((element) => { + element['icon'] = ''; + }); + setPgTableColumns(tableColumns); + setData(res.data); + setInfoMsg('No properties are available for the selected object.'); + }) + .catch((err) => { + Notify.alert( + gettext('Failed to retrieve data from the server.'), + gettext(err.message) + ); + }); } }, [itemNodeData, node, item, reload]); @@ -252,8 +261,8 @@ export function CollectionNodeView({