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

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

View File

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

View File

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

View File

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

View File

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

View File

@ -291,6 +291,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
// Let's make a column for selection
{
id: 'selection',
resizable: false,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps, toggleRowSelected, isAllRowsSelected, rows }) => {
@ -343,11 +344,6 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
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>
{column.resizable && (
<div
{...column.getResizerProps()}
className={classes.resizer}
/>
)}
</div>
{column.resizable && (
<div
{...column.getResizerProps()}
className={classes.resizer}
/>
)}
</div>
))}
</div>