Skip to content

Commit e164086

Browse files
linuspahllinuspahl
authored
Pin actions column in entity tables (#24507)
* Calculate width of static columns based on title. * Implement appraoch based on resize observers instead of font width caluclation. * Cleanup * Improve column widths of dashboards overview. * Improve column widths of event definitions overview. * Improve column widths of events overview. * Use header width as min width in width calculation. * Imporve further static widths. * Create reusable hook to measure the width of multiple elements. * Simplify solution by using `useResizeObserver` in `TableHead`, instead of handling all header refs in parent component and using custom resize observer. * Updating tests * Cleanup code * Siplify implementation. * Cleanup code * Fixing issue with incalid CSS variable names. * Create separate hook for `useHeaderMinWidths`. * Fixing padding in drag overlay. * Calculate actions col width via resize observers. * Fix action col background problem. * Display box shadow for sticky actions column * Calculate min width based on currently visible rows. * FIxing issue with action col background on nodes page. * Cleanup hook usage in `EntityDataTable`. * Use intersection observer to identify if you can scroll to the right. * Cleanup * Improve handling of scroll shadow. * Cleanup * Display more actions dropdown in portal, to fix scroll issue. * Close menu for `OverlaydropdownButton` on click, when open. * Fixing issue with select all bulk select checkbox not changing status. * Allow resizing column as small as header. * Use smaller spinner for throughput cell. * Adding changelog * Fixing issue with text selection on resize, in safari. * Fix z-index issue in modal footer. * Properly send filters in saved searches overview to backend. * Fixing linter hints * Cleanup * Use z-index from theme.
1 parent 232bf70 commit e164086

File tree

54 files changed

+977
-497
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+977
-497
lines changed

‎changelog/unreleased/pr-24507.toml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
type = "c"
2+
message = "Pin actions column in entity tables (streams overview, event definitions overview, etc.)"
3+
4+
pulls = ["24507"]

‎graylog2-web-interface/src/components/bootstrap/ButtonToolbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ const StyledButtonToolbar = styled(OriginalButtonGroup)(
2525
`,
2626
);
2727

28-
const ButtonToolbar = ({ ...props }: React.ComponentProps<typeof StyledButtonToolbar>) => (
29-
<StyledButtonToolbar {...props} />
28+
const ButtonToolbar = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof StyledButtonToolbar>>(
29+
({ ...props }, ref) => <StyledButtonToolbar ref={ref} {...props} />,
3030
);
3131

3232
/** @component */

‎graylog2-web-interface/src/components/bootstrap/Modal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const StyledModalFooter = styled(MantineModal.Body)(
3939
bottom: 0;
4040
background-color: ${theme.colors.global.contentBackground};
4141
padding: ${theme.spacings.md};
42+
z-index: ${zIndices.modalBody};
4243
`,
4344
);
4445

‎graylog2-web-interface/src/components/cluster-configuration/data-nodes/DataNodesExpandable.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
* <http://www.mongodb.com/licensing/server-side-public-license>.
1616
*/
1717
import React, { useCallback, useMemo } from 'react';
18-
import styled from 'styled-components';
18+
import styled, { useTheme } from 'styled-components';
1919

2020
import { EntityDataTable, NoSearchResult, Spinner } from 'components/common';
2121
import type { ColumnSchema } from 'components/common/EntityDataTable';
@@ -46,6 +46,7 @@ const DataNodesExpandable = ({
4646
pageSizeLimit = undefined,
4747
refetchInterval = undefined,
4848
}: Props) => {
49+
const theme = useTheme();
4950
const {
5051
defaultDisplayedColumns,
5152
defaultColumnOrder,
@@ -111,6 +112,7 @@ const DataNodesExpandable = ({
111112
entityActions={renderActions}
112113
columnSchemas={columnSchemas}
113114
columnRenderers={columnRenderers}
115+
parentBgColor={theme.colors.section.filled.background}
114116
/>
115117
);
116118
})()}

‎graylog2-web-interface/src/components/cluster-configuration/graylog-nodes/GraylogNodesExpandable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
* <http://www.mongodb.com/licensing/server-side-public-license>.
1616
*/
1717
import React, { useCallback, useMemo } from 'react';
18-
import styled from 'styled-components';
18+
import styled, { useTheme } from 'styled-components';
1919

2020
import { EntityDataTable, NoSearchResult, Spinner } from 'components/common';
2121
import type { ColumnSchema } from 'components/common/EntityDataTable';
@@ -47,6 +47,7 @@ const GraylogNodesExpandable = ({
4747
pageSizeLimit = undefined,
4848
refetchInterval = undefined,
4949
}: Props) => {
50+
const theme = useTheme();
5051
const {
5152
defaultDisplayedColumns,
5253
defaultColumnOrder,
@@ -85,6 +86,7 @@ const GraylogNodesExpandable = ({
8586

8687
return (
8788
<EntityDataTable<GraylogNode>
89+
parentBgColor={theme.colors.section.filled.background}
8890
entities={graylogNodes}
8991
defaultDisplayedColumns={defaultDisplayedColumns}
9092
defaultColumnOrder={defaultColumnOrder}
@@ -97,7 +99,6 @@ const GraylogNodesExpandable = ({
9799
columnSchemas={columnSchemas}
98100
columnRenderers={columnRenderers}
99101
onResetLayoutPreferences={resetLayoutPreferences}
100-
minActionsCellWidth={160}
101102
/>
102103
);
103104
})()}

‎graylog2-web-interface/src/components/common/EntityDataTable/CSSVariables.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,5 @@ export const columnTransformVar = (colId: string) => `--col-${colId}-transform`;
1919
export const columnWidthVar = (colId: string) => `--col-${colId.replace(/\./g, '_')}-width`;
2020
export const columnOpacityVar = (colId: string) => `--col-${colId}-opacity`;
2121
export const columnTransition = () => `--col-transition`;
22+
export const actionsHeaderWidthVar = `--actions-header-width`;
23+
export const displayScrollRightIndicatorVar = `--display-scroll-right-indicator`;

‎graylog2-web-interface/src/components/common/EntityDataTable/Constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const DEFAULT_COL_WIDTH = 1; // fraction, similar to CSS unit fr.
2121
export const MORE_ACTIONS_TITLE = 'More';
2222
export const MORE_ACTIONS_HOVER_TITLE = 'More actions';
2323

24-
export const BULK_SELECT_COLUMN_WIDTH = 20; // px
24+
export const BULK_SELECT_COLUMN_WIDTH = 15 + CELL_PADDING * 2; // px
2525
export const BULK_SELECT_COL_ID = 'bulk-select';
2626

2727
export const ACTIONS_COL_ID = 'actions';

0 commit comments

Comments
 (0)