diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx index 656ab7434..47fe421eb 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx @@ -21,6 +21,7 @@ import {useInterval, usePrevious} from 'sources/custom_hooks'; import axios from 'axios'; import { getStatsUrl, transformData, statsReducer, X_AXIS_LENGTH } from './utility.js'; import { toPrettySize } from '../../../../static/js/utils'; +import SectionContainer from '../components/SectionContainer.jsx'; const useStyles = makeStyles((theme) => ({ autoResizer: { @@ -252,7 +253,7 @@ export function CPUWrapper(props) { lineBorderWidth: props.lineBorderWidth, }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]); return ( - <> + @@ -265,22 +266,20 @@ export function CPUWrapper(props) { - -
+ + { - return
{gettext('Process CPU usage')}
; - }} columns={props.tableHeader} data={props.processCpuUsageStats} msg={props.errorMsg} type={'panel'} caveTable={false} + tableNoBorder={false} > -
- - + + + ); } diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx index 442d25cdf..9e00b6029 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx @@ -20,6 +20,7 @@ import {useInterval, usePrevious} from 'sources/custom_hooks'; import axios from 'axios'; import { getStatsUrl, transformData, statsReducer, X_AXIS_LENGTH } from './utility.js'; import { toPrettySize } from '../../../../static/js/utils'; +import SectionContainer from '../components/SectionContainer.jsx'; const useStyles = makeStyles((theme) => ({ autoResizer: { @@ -255,7 +256,7 @@ export function MemoryWrapper(props) { }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]); return ( - <> + @@ -270,22 +271,20 @@ export function MemoryWrapper(props) { - -
+ + { - return
{gettext('Process memory usage')}
; - }} columns={props.tableHeader} data={props.processMemoryUsageStats} msg={props.errorMsg} type={'panel'} caveTable={false} + tableNoBorder={false} > -
- - + + + ); } diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx index 7a44951b2..4a720ea65 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx @@ -23,6 +23,7 @@ import { getStatsUrl, transformData, X_AXIS_LENGTH } from './utility.js'; import { toPrettySize } from '../../../../static/js/utils'; import clsx from 'clsx'; import { commonTableStyles } from '../../../../static/js/Theme'; +import SectionContainer from '../components/SectionContainer.jsx'; const useStyles = makeStyles((theme) => ({ container: { @@ -33,20 +34,8 @@ const useStyles = makeStyles((theme) => ({ driveContainer: { width: '100%', }, - diskInfoContainer: { - height: 'auto', - padding: '8px 8px 0px 8px', - marginBottom: '0px', - }, - diskInfoSummary: { - height: 'auto', - padding: '0px 0px 4px 0px', - marginBottom: '0px', - }, diskInfoCharts: { - height: 'auto', - padding: '0px 0px 2px 0px', - marginBottom: '0px', + marginBottom: '4px', }, containerHeaderText: { fontWeight: 'bold', @@ -54,13 +43,12 @@ const useStyles = makeStyles((theme) => ({ }, tableContainer: { background: theme.otherVars.tableBg, - padding: '0px', border: '1px solid '+theme.otherVars.borderColor, borderCollapse: 'collapse', borderRadius: '4px', overflow: 'auto', width: '100%', - margin: '4px 4px 4px 4px', + marginBottom: '4px', }, tableWhiteSpace: { '& td, & th': { @@ -143,7 +131,7 @@ const DiskStatsTable = (props) => { {tableHeader.map((item, index) => ( - {item.Header} + {item.header} ))} @@ -151,7 +139,7 @@ const DiskStatsTable = (props) => { {data.map((item, index) => ( {tableHeader.map((header, id) => ( - {item[header.accessor]} + {item[header.accessorKey]} ))} ))} @@ -428,112 +416,101 @@ export function StorageWrapper(props) { return ( <> - - -
-
{gettext('Disk information')}
- -
- - - - ({ - borderColor: colors[(index + 2) % colors.length], - label: item.mount_point !== '' ? item.mount_point : item.drive_letter !== '' ? item.drive_letter : 'disk' + index, - }))} - errorMsg={props.errorMsg} - isTest={props.isTest}> - item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index), - datasets: [ - { - data: props.diskStats.map((item) => item.total_space_actual?item.total_space_actual:0), - backgroundColor: props.diskStats.map((item, index) => colors[(index + 2) % colors.length]), - }, - ], - }} - options={{ - animation: false, - ...chartJsExtraOptions, - }} - /> - - - - - item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index), - datasets: [ - { - label: 'Used space', - data: props.diskStats.map((item) => item.used_space_actual?item.used_space_actual:0), - backgroundColor: '#FF6384', - borderColor: '#FF6384', - borderWidth: 1, - }, - { - label: 'Available space', - data: props.diskStats.map((item) => item.free_space_actual?item.free_space_actual:0), - backgroundColor: '#36a2eb', - borderColor: '#36a2eb', - borderWidth: 1, - }, - ], - }} - options={ +
+
{gettext('Disk information')}
+ +
+ + + ({ + borderColor: colors[(index + 2) % colors.length], + label: item.mount_point !== '' ? item.mount_point : item.drive_letter !== '' ? item.drive_letter : 'disk' + index, + }))} + errorMsg={props.errorMsg} + isTest={props.isTest}> + item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index), + datasets: [ { - scales: { - x: { + data: props.diskStats.map((item) => item.total_space_actual?item.total_space_actual:0), + backgroundColor: props.diskStats.map((item, index) => colors[(index + 2) % colors.length]), + }, + ], + }} + options={{ + animation: false, + ...chartJsExtraOptions, + }} + /> + + + + + item.mount_point!=''?item.mount_point:item.drive_letter!=''?item.drive_letter:'disk'+index), + datasets: [ + { + label: 'Used space', + data: props.diskStats.map((item) => item.used_space_actual?item.used_space_actual:0), + backgroundColor: '#FF6384', + borderColor: '#FF6384', + borderWidth: 1, + }, + { + label: 'Available space', + data: props.diskStats.map((item) => item.free_space_actual?item.free_space_actual:0), + backgroundColor: '#36a2eb', + borderColor: '#36a2eb', + borderWidth: 1, + }, + ], + }} + options={ + { + scales: { + x: { + display: true, + stacked: true, + ticks: { display: true, - stacked: true, - ticks: { - display: true, - }, }, - y: { - beginAtZero: true, - stacked: true, - ticks: { - callback: function (value) { - return toPrettySize(value); - }, + }, + y: { + beginAtZero: true, + stacked: true, + ticks: { + callback: function (value) { + return toPrettySize(value); }, }, }, - ...chartJsExtraOptions, - } + }, + ...chartJsExtraOptions, } - /> - - + } + /> + - - {Object.keys(props.ioInfo).map((drive, index) => ( - -
- -
{gettext(drive)}
+ {Object.keys(props.ioInfo).map((drive) => ( + + + {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => ( + + + { + return type.endsWith('_time_rw') ? toPrettySize(v, 'ms') : type.endsWith('_total_rw') ? toPrettySize(v, ''): toPrettySize(v); + }} /> + - - {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => ( - - - { - return type.endsWith('_time_rw') ? toPrettySize(v, 'ms') : type.endsWith('_total_rw') ? toPrettySize(v, ''): toPrettySize(v); - }} /> - - - ))} - -
+ ))} - ))} - + + ))} ); } diff --git a/web/pgadmin/static/js/SchemaView/DataGridView.jsx b/web/pgadmin/static/js/SchemaView/DataGridView.jsx index 1b1fb8eb7..5458e03e3 100644 --- a/web/pgadmin/static/js/SchemaView/DataGridView.jsx +++ b/web/pgadmin/static/js/SchemaView/DataGridView.jsx @@ -317,7 +317,7 @@ DataGridHeader.propTypes = { onSearchTextChange: PropTypes.func, }; -function DataGridView({ +export default function DataGridView({ value, viewHelperProps, schema, accessPath, dataDispatch, containerClassName, fixedRows, ...props}) { const classes = useStyles(); @@ -639,14 +639,6 @@ function DataGridView({ ); } -export default function DataGridViewMoized({memoDeps, ...props}) { - return useMemo(()=>, memoDeps??[]); -} - -DataGridViewMoized.propTypes = { - memoDeps: PropTypes.array, -}; - DataGridView.propTypes = { label: PropTypes.string, value: PropTypes.array, diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index 41bfa3d4c..94eb32ead 100644 --- a/web/pgadmin/static/js/SchemaView/FormView.jsx +++ b/web/pgadmin/static/js/SchemaView/FormView.jsx @@ -305,12 +305,7 @@ export default function FormView({ if(CustomControl) { tabs[group].push(); } else { - tabs[group].push(value[dep]), - ]} />); + tabs[group].push(); } } else { /* Its a form control */ diff --git a/web/pgadmin/static/js/components/PgReactTableStyled.jsx b/web/pgadmin/static/js/components/PgReactTableStyled.jsx index 77321d487..32ca616df 100644 --- a/web/pgadmin/static/js/components/PgReactTableStyled.jsx +++ b/web/pgadmin/static/js/components/PgReactTableStyled.jsx @@ -7,7 +7,7 @@ // ////////////////////////////////////////////////////////////// -import React, { forwardRef } from 'react'; +import React, { forwardRef, useEffect } from 'react'; import { flexRender } from '@tanstack/react-table'; import { styled } from '@mui/styles'; import PropTypes from 'prop-types'; @@ -58,6 +58,12 @@ const StyledDiv = styled('div')(({theme})=>({ ...theme.mixins.panelBorder.bottom, ...theme.mixins.panelBorder.right, + '& > div': { + overflow: 'hidden', + textOverflow: 'ellipsis', + textWrap: 'nowrap' + }, + '& .pgrt-header-resizer': { display: 'inline-block', width: '5px', @@ -160,8 +166,8 @@ export const PgReactTableCell = forwardRef(({row, cell, children, className}, re return (
-
+
{flexRender(header.column.columnDef.header, header.getContext())} {header.column.getCanSort() && header.column.getIsSorted() && @@ -280,22 +286,32 @@ PgReactTableBody.propTypes = { export const PgReactTable = forwardRef(({children, table, rootClassName, tableClassName, ...props}, ref)=>{ const columns = table.getAllColumns(); - // Render the UI for your table - const maxExpandWidth = (ref.current?.getBoundingClientRect().width ?? 430) - 30; //margin,scrollbar,etc. + + useEffect(()=>{ + const setMaxExpandWidth = ()=>{ + if(ref.current) { + ref.current.style['--expand-width'] = (ref.current.getBoundingClientRect().width ?? 430) - 30; //margin,scrollbar,etc. + } + }; + const tableResizeObserver = new ResizeObserver(()=>{ + setMaxExpandWidth(); + }); + tableResizeObserver.observe(ref.current); + }, []); const columnSizeVars = React.useMemo(() => { const headers = table.getFlatHeaders(); const colSizes = {}; for (let i = 0; i < headers.length; i++) { const header = headers[i]; - colSizes[`--header-${header.id}-size`] = header.getSize(); - colSizes[`--col-${header.column.id}-size`] = header.column.getSize(); + colSizes[`--header-${header.id.replace(/\W/g, '_')}-size`] = header.getSize(); + colSizes[`--col-${header.column.id.replace(/\W/g, '_')}-size`] = header.column.getSize(); } return colSizes; }, [columns, table.getState().columnSizingInfo]); return ( - +
{children}
diff --git a/web/regression/javascript/setup-jest.js b/web/regression/javascript/setup-jest.js index b17906cdb..be98ea2db 100644 --- a/web/regression/javascript/setup-jest.js +++ b/web/regression/javascript/setup-jest.js @@ -22,13 +22,14 @@ global.matchMedia = (query)=>({ dispatchEvent: jest.fn(), }); -class IntersectionObserver { +class GeneralObserver { observe() {return null;} unobserve() {return null;} disconnect() {return null;} } -global.IntersectionObserver = IntersectionObserver; +global.IntersectionObserver = GeneralObserver; +global.ResizeObserver = GeneralObserver; import lodash from 'lodash'; global._ = lodash;