diff --git a/ui/apps/pmm/src/components/grafana-page-frame/GrafanaPageFrame.tsx b/ui/apps/pmm/src/components/grafana-page-frame/GrafanaPageFrame.tsx index 5e64ff66313..04b92d92b81 100644 --- a/ui/apps/pmm/src/components/grafana-page-frame/GrafanaPageFrame.tsx +++ b/ui/apps/pmm/src/components/grafana-page-frame/GrafanaPageFrame.tsx @@ -1,3 +1,4 @@ +import GlobalStyles from '@mui/material/GlobalStyles'; import Stack from '@mui/material/Stack'; import { useHeader } from 'hooks/useHeader'; import { FC, PropsWithChildren } from 'react'; @@ -6,7 +7,17 @@ const GrafanaPageFrame: FC = ({ children }) => { const { visible: headerVisible } = useHeader(); return ( - + {headerVisible && ( + ({ + 'html, body': { + backgroundColor: theme.palette.background.paper, + }, + })} + /> + )} + = ({ children }) => { headerVisible && { border: '1px solid', borderColor: 'divider', - borderRadius: 4, + borderRadius: '5px', overflow: 'hidden', }, ]} @@ -33,6 +44,7 @@ const GrafanaPageFrame: FC = ({ children }) => { {children} + ); }; diff --git a/ui/apps/pmm/src/components/main/MainWithNav.tsx b/ui/apps/pmm/src/components/main/MainWithNav.tsx index 74df618ecee..0c77cafc9bc 100644 --- a/ui/apps/pmm/src/components/main/MainWithNav.tsx +++ b/ui/apps/pmm/src/components/main/MainWithNav.tsx @@ -30,9 +30,9 @@ export const MainWithNav = () => { } return ( - + {!isFullScreen && !isRenderingServer() && } - + {!isFullScreen &&
} diff --git a/ui/apps/pmm/src/components/main/header/Header.constants.ts b/ui/apps/pmm/src/components/main/header/Header.constants.ts index ff8ddf28899..8868592e1f6 100644 --- a/ui/apps/pmm/src/components/main/header/Header.constants.ts +++ b/ui/apps/pmm/src/components/main/header/Header.constants.ts @@ -1 +1 @@ -export const HEADER_HEIGHT = 64; +export const HEADER_HEIGHT = 56; diff --git a/ui/apps/pmm/src/components/main/header/Header.tsx b/ui/apps/pmm/src/components/main/header/Header.tsx index 5ddf2a83c57..b4600095a6b 100644 --- a/ui/apps/pmm/src/components/main/header/Header.tsx +++ b/ui/apps/pmm/src/components/main/header/Header.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { useHeader } from 'hooks/useHeader'; import Stack from '@mui/material/Stack'; -import { HEADER_HEIGHT } from './Header.constants'; + const Header: FC = () => { const { visible, Component } = useHeader(); @@ -11,7 +11,7 @@ const Header: FC = () => { } return ( - + ); diff --git a/ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx b/ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx index 22ee42cecbe..bdac3c892eb 100644 --- a/ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx +++ b/ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx @@ -1,24 +1,35 @@ +import GlobalStyles from '@mui/material/GlobalStyles'; import Stack, { StackProps } from '@mui/material/Stack'; import { HEADER_HEIGHT } from 'components/main/header/Header.constants'; import { FC } from 'react'; const RealtimePage: FC = ({ children }) => ( - + ({ + 'html, body': { + backgroundColor: theme.palette.background.paper, + }, + })} + /> + - {children} - + sx={{ + flex: 1, + height: '100%', + minHeight: 0, + position: 'relative', + maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, // Account for header height + // There should be a better way to avoid using maxHeight, or forcing hidden overflow. To be improved. + overflow: 'hidden', + display: 'flex', + }} + > + {children} + + ); export default RealtimePage; diff --git a/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx b/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx index 6bd354d709a..4065b474244 100644 --- a/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.constants.tsx @@ -27,7 +27,6 @@ export const OVERVIEW_TABLE_COLUMNS: MRT_ColumnDef[] = [ }), }, { - size: 150, header: Messages.columns.operationId, accessorKey: 'queryId', enableColumnFilter: false, @@ -38,7 +37,6 @@ export const OVERVIEW_TABLE_COLUMNS: MRT_ColumnDef[] = [ }), }, { - size: 150, header: Messages.columns.elapsedTime, accessorKey: 'queryExecutionDurationMs', filterVariant: 'range', diff --git a/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx b/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx index 006a961d9c2..49999aeb646 100644 --- a/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx @@ -43,6 +43,7 @@ const OverviewTable: FC = ({ }, }, }} + enableStickyHeader enableGlobalFilter={false} enableHiding={false} enableRowHoverAction @@ -53,6 +54,14 @@ const OverviewTable: FC = ({ timeRangeFilterFn: (row, id, filterValue) => filterElapsedTime(row as MRT_Row, id, filterValue), }} + muiTableContainerProps={{ + sx: { + flex: 1, + borderRadius: 2, + border: '1px solid', + borderColor: 'divider', + }, + }} muiTableBodyRowProps={({ row }) => ({ onMouseEnter: onRowHover, 'data-testid': `query-${row.original.queryId}-row`, diff --git a/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.tsx b/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.tsx index caca801097e..2d02c8358bc 100644 --- a/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.tsx +++ b/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.tsx @@ -35,7 +35,7 @@ export const RealtimeSelection: FC = () => { if (isLoading || isLoadingSessions) { return ( - + { } return ( - + { enableGlobalFilter={false} enableRowSelection onRowSelectionChange={setRowSelection} + displayColumnDefOptions={{ + 'mrt-row-select': { + size: 40, + muiTableHeadCellProps: { sx: { flex: '0 0 40px !important' } }, + muiTableBodyCellProps: { sx: { flex: '0 0 40px !important' } }, + }, + 'mrt-row-expand': { + size: 40, + }, + }} enableStickyHeader enableSubRowSelection enableExpanding @@ -161,17 +171,11 @@ const SessionsTable: FC = () => { } getSubRows={(row) => row.serviceSessions} muiTableContainerProps={{ - sx: (theme) => ({ - flex: 1, - backgroundColor: 'inherit', - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, - borderBottom: 0, - }), - }} - muiTableHeadProps={{ sx: { - backgroundColor: 'inherit', + flex: 1, + borderRadius: 2, + border: '1px solid', + borderColor: 'divider', }, }} muiTopToolbarProps={{ diff --git a/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx b/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx index 55d4abe3133..ba833ed9604 100644 --- a/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx +++ b/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx @@ -12,6 +12,7 @@ export const CodeBlock: FC = ({ children }) => { color: (theme) => theme.palette.action.hover, fontFamily: 'Roboto Mono, monospace', whiteSpace: 'pre', + overflowX: 'auto', }, (theme) => isSingleLine diff --git a/ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.tsx b/ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.tsx index a0e05c2d135..7e46b660fd5 100644 --- a/ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.tsx +++ b/ui/apps/pmm/src/pages/updates/change-log/release-notes/ReleaseNotes.tsx @@ -19,6 +19,10 @@ export const ReleaseNotes: FC = ({ content }) => { height: 'auto', maxWidth: '100%', }, + table: { + display: 'block', + overflowX: 'auto', + }, 'table, tr, th, td': { p: 1, textAlign: 'left',