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

Added the ability to resize columns on dashboard tables. Fixes #7364

Browse Source
This commit is contained in:
Pradip Parkale 2022-05-18 17:49:54 +05:30 committed by Akshay Joshi
parent 5e0dfff42a
commit 11cfea3860
5 changed files with 72 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en_US/release_notes_6_10.rst
View File

@ -9,12 +9,13 @@ This release contains a number of bug fixes and new features since the release o
New features New features
************ ************
| `Issue #7364 <https://redmine.postgresql.org/issues/7364>`_ - Added the ability to resize columns on dashboard tables.
Housekeeping Housekeeping
************ ************
| `Issue #7337 <https://redmine.postgresql.org/issues/7337>`_ - Port connect server password dialog to React.
| `Issue #7283 <https://redmine.postgresql.org/issues/7283>`_ - PG 15 compatibility issues fixed. | `Issue #7283 <https://redmine.postgresql.org/issues/7283>`_ - PG 15 compatibility issues fixed.
| `Issue #7337 <https://redmine.postgresql.org/issues/7337>`_ - Port connect server password dialog to React.
Bug fixes Bug fixes
********* *********

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

@ -147,7 +147,8 @@ export default function Dashboard({
resizable: true, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 50,
maxWidth: 110, width: 100,
minResizeWidth: 150,
}, },
{ {
accessor: 'category', accessor: 'category',
@ -156,7 +157,6 @@ export default function Dashboard({
resizable: true, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 50,
maxWidth: 150,
}, },
{ {
accessor: 'setting', accessor: 'setting',
@ -165,7 +165,7 @@ export default function Dashboard({
resizable: true, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 50,
maxWidth: 50, width: 100,
}, },
{ {
accessor: 'unit', accessor: 'unit',
@ -174,13 +174,13 @@ export default function Dashboard({
resizable: true, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 30, width: 30,
}, },
{ {
accessor: 'short_desc', accessor: 'short_desc',
Header: gettext('Description'), Header: gettext('Description'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
]; ];
@ -190,7 +190,7 @@ export default function Dashboard({
accessor: 'terminate_query', accessor: 'terminate_query',
Header: () => null, Header: () => null,
sortble: true, sortble: true,
resizable: true, resizable: false,
disableGlobalFilter: false, disableGlobalFilter: false,
width: 35, width: 35,
minWidth: 0, minWidth: 0,
@ -262,7 +262,7 @@ export default function Dashboard({
accessor: 'cancel_Query', accessor: 'cancel_Query',
Header: () => null, Header: () => null,
sortble: true, sortble: true,
resizable: true, resizable: false,
disableGlobalFilter: false, disableGlobalFilter: false,
width: 35, width: 35,
minWidth: 0, minWidth: 0,
@ -331,7 +331,7 @@ export default function Dashboard({
accessor: 'view_active_query', accessor: 'view_active_query',
Header: () => null, Header: () => null,
sortble: true, sortble: true,
resizable: true, resizable: false,
disableGlobalFilter: false, disableGlobalFilter: false,
width: 35, width: 35,
minWidth: 0, minWidth: 0,
@ -375,81 +375,77 @@ export default function Dashboard({
accessor: 'pid', accessor: 'pid',
Header: gettext('PID'), Header: gettext('PID'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 60, width: 60,
}, },
{ {
accessor: 'datname', accessor: 'datname',
Header: gettext('Database'), Header: gettext('Database'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 80, width: 80,
isVisible: !did ? true: false isVisible: !did ? true: false
}, },
{ {
accessor: 'usename', accessor: 'usename',
Header: gettext('User'), Header: gettext('User'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 80, width: 60
}, },
{ {
accessor: 'application_name', accessor: 'application_name',
Header: gettext('Application'), Header: gettext('Application'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 150,
}, },
{ {
accessor: 'client_addr', accessor: 'client_addr',
Header: gettext('Client'), Header: gettext('Client'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 60,
}, },
{ {
accessor: 'backend_start', accessor: 'backend_start',
Header: gettext('Backend start'), Header: gettext('Backend start'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 100,
maxWidth: 150,
}, },
{ {
accessor: 'xact_start', accessor: 'xact_start',
Header: gettext('Transaction start'), Header: gettext('Transaction start'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 150,
}, },
{ {
accessor: 'state', accessor: 'state',
Header: gettext('State'), Header: gettext('State'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 60, width:40
}, },
{ {
accessor: 'waiting', accessor: 'waiting',
Header: gettext('Waiting'), Header: gettext('Waiting'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
isVisible: treeNodeInfo?.server?.version < 90600 isVisible: treeNodeInfo?.server?.version < 90600
}, },
@ -457,14 +453,14 @@ export default function Dashboard({
accessor: 'wait_event', accessor: 'wait_event',
Header: gettext('Wait event'), Header: gettext('Wait event'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
accessor: 'blocking_pids', accessor: 'blocking_pids',
Header: gettext('Blocking PIDs'), Header: gettext('Blocking PIDs'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
]; ];
@ -474,105 +470,104 @@ export default function Dashboard({
accessor: 'pid', accessor: 'pid',
Header: gettext('PID'), Header: gettext('PID'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 50, width: 50,
}, },
{ {
accessor: 'datname', accessor: 'datname',
Header: gettext('Database'), Header: gettext('Database'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 80, isVisible: !did ? true: false,
isVisible: !did ? true: false width: 80
}, },
{ {
accessor: 'locktype', accessor: 'locktype',
Header: gettext('Lock type'), Header: gettext('Lock type'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 60, width: 80,
}, },
{ {
accessor: 'relation', accessor: 'relation',
Header: gettext('Target relation'), Header: gettext('Target relation'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
accessor: 'page', accessor: 'page',
Header: gettext('Page'), Header: gettext('Page'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 50, width: 80,
}, },
{ {
accessor: 'tuple', accessor: 'tuple',
Header: gettext('Tuple'), Header: gettext('Tuple'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 50,
}, },
{ {
accessor: 'virtualxid', accessor: 'virtualxid',
Header: gettext('vXID (target)'), Header: gettext('vXID (target)'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 100, minWidth: 50,
maxWidth: 100, width: 80
}, },
{ {
accessor: 'transactionid', accessor: 'transactionid',
Header: gettext('XID (target)'), Header: gettext('XID (target)'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 50,
maxWidth: 100, width: 80,
}, },
{ {
accessor: 'classid', accessor: 'classid',
Header: gettext('Class'), Header: gettext('Class'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 50, width: 80,
}, },
{ {
accessor: 'objid', accessor: 'objid',
Header: gettext('Object ID'), Header: gettext('Object ID'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 50,
maxWidth: 100, width: 80,
}, },
{ {
accessor: 'virtualtransaction', accessor: 'virtualtransaction',
Header: gettext('vXID (owner)'), Header: gettext('vXID (owner)'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 50,
maxWidth: 80,
}, },
{ {
accessor: 'mode', accessor: 'mode',
Header: gettext('Mode'), Header: gettext('Mode'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
@ -580,10 +575,10 @@ export default function Dashboard({
accessor: 'granted', accessor: 'granted',
Header: gettext('Granted?'), Header: gettext('Granted?'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 50, minWidth: 30,
maxWidth: 80, width: 80,
Cell: ({ value }) => String(value) Cell: ({ value }) => String(value)
}, },
]; ];
@ -593,38 +588,38 @@ export default function Dashboard({
accessor: 'git', accessor: 'git',
Header: gettext('Name'), Header: gettext('Name'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
accessor: 'datname', accessor: 'datname',
Header: gettext('Database'), Header: gettext('Database'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 26, minWidth: 26,
maxWidth: 80, width: 80,
isVisible: !did ? true: false isVisible: !did ? true: false
}, },
{ {
accessor: 'Owner', accessor: 'Owner',
Header: gettext('Owner'), Header: gettext('Owner'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
accessor: 'transaction', accessor: 'transaction',
Header: gettext('XID'), Header: gettext('XID'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
accessor: 'prepared', accessor: 'prepared',
Header: gettext('Prepared at'), Header: gettext('Prepared at'),
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
]; ];

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

@ -100,14 +100,14 @@ export function CollectionNodeView({
Header: 'properties', Header: 'properties',
accessor: 'Properties', accessor: 'Properties',
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
{ {
Header: 'value', Header: 'value',
accessor: 'value', accessor: 'value',
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}, },
]); ]);
@ -210,7 +210,7 @@ export function CollectionNodeView({
Header: field.label, Header: field.label,
accessor: field.id, accessor: field.id,
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 0, minWidth: 0,
// eslint-disable-next-line react/display-name // eslint-disable-next-line react/display-name
@ -223,7 +223,7 @@ export function CollectionNodeView({
Header: field.label, Header: field.label,
accessor: field.id, accessor: field.id,
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 0, minWidth: 0,
}; };
@ -237,7 +237,7 @@ export function CollectionNodeView({
Header: field, Header: field,
accessor: field, accessor: field,
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
minWidth: 0, minWidth: 0,
}; };

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

@ -66,7 +66,7 @@ function getColumn(data, singleLineStatistics) {
Header: row.name, Header: row.name,
accessor: row.name, accessor: row.name,
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
sortType: ((rowA, rowB, id) => { sortType: ((rowA, rowB, id) => {
let val1 = rowA.values[id]; let val1 = rowA.values[id];
@ -98,7 +98,7 @@ function getColumn(data, singleLineStatistics) {
Header: row.name, Header: row.name,
accessor: row.name, accessor: row.name,
sortble: true, sortble: true,
resizable: false, resizable: true,
disableGlobalFilter: false, disableGlobalFilter: false,
}; };

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

@ -291,6 +291,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
// Let's make a column for selection // Let's make a column for selection
{ {
id: 'selection', id: 'selection',
resizable: false,
// The header can use the table's getToggleAllRowsSelectedProps method // The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox // to render a checkbox
Header: ({ getToggleAllRowsSelectedProps, toggleRowSelected, isAllRowsSelected, rows }) => { Header: ({ getToggleAllRowsSelectedProps, toggleRowSelected, isAllRowsSelected, rows }) => {
@ -343,11 +344,6 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
return [...CLOUMNS]; return [...CLOUMNS];
} }
}); });
hooks.useInstanceBeforeDimensions.push(({ headerGroups }) => {
// fix the parent group of the selection button to not be resizable
const selectionGroupHeader = headerGroups[0].headers[0];
selectionGroupHeader.resizable = false;
});
} }
); );
@ -486,13 +482,13 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
: ' 🔼' : ' 🔼'
: ''} : ''}
</span> </span>
{column.resizable && (
<div
{...column.getResizerProps()}
className={classes.resizer}
/>
)}
</div> </div>
{column.resizable && (
<div
{...column.getResizerProps()}
className={classes.resizer}
/>
)}
</div> </div>
))} ))}
</div> </div>