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

Fixed issues related to porting of properties collection and dashboard.

Browse Source 
refs #7132
This commit is contained in:
Pradip Parkale 2022-04-04 17:42:42 +05:30 committed by Akshay Joshi
parent c4d61f5a55
commit b397ba7787
16 changed files with 178 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/package.json
View File

@ -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",

1
web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.js
View File

@ -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 = [];

8
web/pgadmin/browser/server_groups/servers/databases/extensions/static/js/extension.ui.js
View File

@ -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'),

1
web/pgadmin/browser/server_groups/servers/databases/schemas/operators/static/js/operator.js
View File

@ -24,6 +24,7 @@ define('pgadmin.node.operator', [
columns: ['name', 'owner', 'description'],
canDrop: false,
canDropCascade: false,
canSelect: false
});
}

2
web/pgadmin/browser/server_groups/servers/databases/schemas/tables/partitions/static/js/partition.js
View File

@ -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,

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

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

9
web/pgadmin/browser/static/js/node.js
View File

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

12
web/pgadmin/browser/static/js/panel.js
View File

@ -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],

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

@ -53,8 +53,6 @@ export function getPanelView(
container
);
}
if (panelType == 'statistics') {
ReactDOM.render(
<Theme>
@ -69,7 +67,7 @@ export function getPanelView(
container
);
}
if (panelType == 'properties') {
if (panelType == 'properties' && nodeData?.is_collection) {
ReactDOM.render(
<Theme>
<CollectionNodeView

2
web/pgadmin/dashboard/static/js/ActiveQuery.ui.js
View File

@ -26,7 +26,7 @@ export default class ActiveQuery extends BaseUISchema {
label: gettext('Backend type'),
type: 'text',
editable: true,
noEmpty: true,
noEmpty: false,
readonly: true,
mode: ['properties'],
group: gettext('Details'),

49
web/pgadmin/dashboard/static/js/Dashboard.jsx
View File

@ -25,6 +25,7 @@ import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined
import WelcomeDashboard from './WelcomeDashboard';
import ActiveQuery from './ActiveQuery.ui';
import _ from 'lodash';
import CachedIcon from '@mui/icons-material/Cached';
function parseData(data) {
var res = [];
@ -86,13 +87,25 @@ const useStyles = makeStyles((theme) => ({
...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({
<PgIconButton
size="xs"
noBorder
icon={<SquareIcon fontSize="small" />}
icon={<SquareIcon/>}
onClick={() => {
if (!canTakeAction(row, 'cancel'))
return;
@ -328,12 +342,11 @@ export default function Dashboard({
className={row.isExpanded ?classes.buttonClick : ''}
icon={
row.isExpanded ? (
<ArrowDropDownOutlinedIcon />
<ArrowDropDownOutlinedIcon className={classes.arrowButton}/>
) : (
<ArrowRightOutlinedIcon />
<ArrowRightOutlinedIcon className={classes.arrowButton}/>
)
}
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(
<PgIconButton
size="xs"
noBorder
className={classes.refreshButton}
icon={<CachedIcon />}
onClick={(e) => {
e.preventDefault();
setRefresh(true);
}}
color="default"
aria-label="Refresh"
title={gettext('Refresh')}
></PgIconButton>
);
};
return (
<>
@ -783,6 +817,7 @@ export default function Dashboard({
{tab.map((tabValue, i) => {
return <Tab key={i} label={tabValue} />;
})}
<RefreshButton/>
</Tabs>
<PgTable

1
web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
View File

@ -142,6 +142,7 @@ export default function Dependencies({ nodeData, item, node, ...props }) {
}
if (message != '') {
setMsg(message);
setLoaderText('');
}
return () => {
setTableData([]);

4
web/pgadmin/misc/dependents/static/js/Dependents.jsx
View File

@ -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 }) {
) : (
<div className={classes.emptyPanel}>
{loaderText ? (<Loader message={loaderText} className={classes.loading} />) :
<div className={classes.panelIcon}>
<i className="fa fa-exclamation-circle"></i>
<span className={classes.panelMessage}>{gettext(msg)}</span>

52
web/pgadmin/misc/properties/CollectionNodeProperties.jsx
View File

@ -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 (<Switch color="primary" checked={value} className={classes.readOnlySwitch} value={value} readOnly title={String(value)} />);
@ -220,11 +214,27 @@ export function CollectionNodeView({
sortble: true,
resizable: false,
disableGlobalFilter: false,
minWidth: 100,
};
}
tableColumns.push(column);
}
});
}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',
@ -244,7 +254,6 @@ export function CollectionNodeView({
);
});
}
}
}, [itemNodeData, node, item, reload]);
const customHeader = () => {
@ -252,8 +261,8 @@ export function CollectionNodeView({
<Box >
<PgIconButton
className={classes.dropButton}
variant="outlined"
icon={<i className='fa fa-trash-alt delete_multiple' aria-hidden="true" role="img"></i>}
icon={<DeleteIcon/>}
aria-label="Delete/Drop"
title={gettext('Delete/Drop')}
onClick={() => {
@ -267,8 +276,7 @@ export function CollectionNodeView({
></PgIconButton>
<PgIconButton
className={classes.dropButton}
variant="outlined"
icon={<i className='pg-font-icon icon-drop_cascade delete_multiple_cascade' aria-hidden="true" role="img"></i>}
icon={<DeleteSweepIcon />}
aria-label="Drop Cascade"
title={gettext('Drop Cascade')}
onClick={() => {
@ -284,12 +292,12 @@ export function CollectionNodeView({
};
return (
<Theme>
<Theme className='obj_properties'>
<Box className={classes.propertiesPanel}>
{data.length > 0 ?
(
<PgTable
isSelectRow={!('catalog' in treeNodeInfo) && (itemNodeData.label !== 'Catalogs')}
isSelectRow={!('catalog' in treeNodeInfo) && (itemNodeData.label !== 'Catalogs') && _.isUndefined(node?.canSelect)}
customHeader={customHeader}
className={classes.autoResizer}
columns={pgTableColumns}

1
web/pgadmin/misc/statistics/static/js/Statistics.jsx
View File

@ -219,6 +219,7 @@ export default function Statistics({ nodeData, item, node, ...props }) {
}
if (message != '') {
setMsg(message);
setLoaderText('');
}
return () => {
setTableData([]);

68
web/pgadmin/static/js/components/PgTable.jsx
View File

@ -47,7 +47,7 @@ const useStyles = makeStyles((theme) => ({
overflow: 'overlay !important',
},
customHeader:{
marginTop: '12px',
marginTop: '8px',
marginLeft: '4px'
},
searchBox: {
@ -55,6 +55,13 @@ const useStyles = makeStyles((theme) => ({
display: 'flex',
background: theme.palette.background.default
},
warning: {
backgroundColor: theme.palette.warning.main + '!important'
},
alert: {
backgroundColor: theme.palette.error.main + '!important'
},
tableContentWidth: {
width: 'calc(100% - 3px)',
},
@ -105,10 +112,11 @@ const useStyles = makeStyles((theme) => ({
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
backgroundColor: theme.otherVars.tableBg,
userSelect: 'text'
},
selectCell: {
textAlign: 'center',
minWidth: '25px'
minWidth: 20
},
tableCellHeader: {
fontWeight: theme.typography.fontWeightBold,
@ -177,6 +185,10 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
const rowHeights = React.useRef({});
const rowRef = React.useRef({});
// Reset Search vakue in tab changed.
React.useEffect(()=>{
setSearchVal('');
},[columns]);
function getRowHeight(index, size) {
return rowHeights.current[index] + size || 35;
}
@ -257,21 +269,49 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
id: 'selection',
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
Header: ({ getToggleAllRowsSelectedProps, toggleRowSelected, isAllRowsSelected, rows }) => {
const modifiedOnChange = (event) => {
rows.forEach((row) => {
//check each row if it is not disabled
!(!_.isUndefined(row.original.canDrop) && !(row.original.canDrop)) && toggleRowSelected(row.id, event.currentTarget.checked);
});
};
let allTableRows = 0;
let selectedTableRows = 0;
rows.forEach((row) => {
row.isSelected && selectedTableRows++;
(_.isUndefined(row.original.canDrop) || row.original.canDrop) && allTableRows++;
});
const disabled = allTableRows === 0;
const checked =
(isAllRowsSelected ||
allTableRows === selectedTableRows) &&
!disabled;
return(
<div className={classes.selectCell}>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()
}
onChange={modifiedOnChange}
checked={checked}
/>
</div>
),
);},
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div className={classes.selectCell}>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()}
disabled={!_.isUndefined(row.original.canDrop) ? !(row.original.canDrop) : false}
/>
</div>
),
sortble: false,
width: 30,
minWidth: 0,
maxWidth: 30,
minWidth: 0
},
...CLOUMNS,
];
@ -337,8 +377,15 @@ export default function PgTable({ columns, data, isSelectRow, offset=105, ...pro
if(cell.column.id == 'btn-edit' && row.isExpanded) {
classNames.push(classes.expandedIconCell);
}
if (row.original.row_type === 'warning'){
classNames.push(classes.warning);
}
if (row.original.row_type === 'alert'){
classNames.push(classes.alert);
}
return (
<div key={cell.column.id} {...cell.getCellProps()} className={clsx(classNames, row.original.icon && row.original.icon[cell.column.id], row.original.icon[cell.column.id] && classes.cellIcon)} title={String(cell.value)}>
<div key={cell.column.id} {...cell.getCellProps()} className={clsx(classNames, row.original.icon && row.original.icon[cell.column.id], row.original.icon[cell.column.id] && classes.cellIcon)}
title={_.isUndefined(cell.value) || _.isNull(cell.value) ? '': String(cell.value)}>
{cell.render('Cell')}
</div>
);
@ -467,14 +514,17 @@ PgTable.propTypes = {
PropTypes.node,
]),
getToggleAllRowsSelectedProps: PropTypes.func,
toggleRowSelected: PropTypes.func,
columns: PropTypes.array,
data: PropTypes.array,
isSelectRow: PropTypes.bool,
isAllRowsSelected: PropTypes.bool,
row: PropTypes.func,
setSelectedRows: PropTypes.func,
getSelectedRows: PropTypes.func,
searchText: PropTypes.string,
type: PropTypes.string,
sortOptions: PropTypes.array,
schema: PropTypes.object
schema: PropTypes.object,
rows: PropTypes.object
};