From ce20d11b740c4c2d99f660619e95f47c3614a1e1 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Thu, 30 Jul 2026 09:24:41 +0200 Subject: [PATCH 1/6] Ensure details icon in event definition scheduling does not infer with line height. --- .../src/components/common/Icon/Icon.tsx | 2 +- .../event-definitions/SchedulingCell.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/graylog2-web-interface/src/components/common/Icon/Icon.tsx b/graylog2-web-interface/src/components/common/Icon/Icon.tsx index 3bd76b9fe5ba..9f6fd4272ac6 100644 --- a/graylog2-web-interface/src/components/common/Icon/Icon.tsx +++ b/graylog2-web-interface/src/components/common/Icon/Icon.tsx @@ -41,7 +41,7 @@ const spinAnimation = keyframes` } `; -type ColorVariants = 'success' | 'warning'; +type ColorVariants = 'success' | 'warning' | 'info'; const StyledSpan = styled.span<{ $size: string; diff --git a/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx b/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx index 24fd324992b4..da74020bcd4b 100644 --- a/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx +++ b/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx @@ -20,7 +20,7 @@ import styled, { css } from 'styled-components'; import { useQueryClient } from '@tanstack/react-query'; import { describeExpression } from 'util/CronUtils'; -import { OverlayTrigger, Icon, Timestamp } from 'components/common'; +import { OverlayTrigger, Icon, Timestamp, IconButton } from 'components/common'; import Button from 'components/bootstrap/Button'; import { clearNotificationQueue, @@ -51,8 +51,8 @@ const DetailValue = styled.dd( `, ); -const DetailsButton = styled(Button)` - padding: 6px 8px; +const DetailsOverlayTrigger = styled(OverlayTrigger)` + vertical-align: bottom; `; const getTimeRange = (scheduler: Scheduler) => { @@ -144,17 +144,15 @@ const SchedulingInfo = ({ return ( <> {`Runs ${executeEveryFormatted}${searchWithinMessage} `} - - - - - + + ); }; From ac0902a18b78218c3ddf27ba50837aa64be72601 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Thu, 30 Jul 2026 14:16:00 +0200 Subject: [PATCH 2/6] Create shared component for `ExpandedSectionToggleWrapper`. --- .../ExpandedSectionToggleWrapper.tsx | 34 +++++++++++++++ .../common/EntityDataTable/index.ts | 3 +- .../inputs/InputsOveriew/ColumnRenderers.tsx | 23 +++++++---- .../ExpandedSectionToggleWrapper.tsx | 41 ------------------- .../components/inputs/InputsOveriew/index.tsx | 1 - 5 files changed, 50 insertions(+), 52 deletions(-) create mode 100644 graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx delete mode 100644 graylog2-web-interface/src/components/inputs/InputsOveriew/ExpandedSectionToggleWrapper.tsx diff --git a/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx b/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx new file mode 100644 index 000000000000..3b02c96ddb31 --- /dev/null +++ b/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { styled, css } from 'styled-components'; + +import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections'; + +const StyledWrapper = styled.div<{ $align?: 'right' }>( + ({ $align }) => css` + display: flex; + cursor: pointer; + height: 100%; + width: 100%; + align-items: center; + justify-content: ${$align === 'right' ? 'flex-end' : 'flex-start'}; + `, +); + +type Props = React.PropsWithChildren<{ + id: string; + align?: 'right'; + section: string; +}>; + +const ExpandedSectionToggleWrapper = ({ id, section, align = undefined, children = undefined }: Props) => { + const { toggleSection } = useExpandedSections(); + const _toggleSection = () => toggleSection(id, section); + + return ( + + {children} + + ); +}; + +export default ExpandedSectionToggleWrapper; diff --git a/graylog2-web-interface/src/components/common/EntityDataTable/index.ts b/graylog2-web-interface/src/components/common/EntityDataTable/index.ts index dd72357ebb2d..dbed1bfe14a4 100644 --- a/graylog2-web-interface/src/components/common/EntityDataTable/index.ts +++ b/graylog2-web-interface/src/components/common/EntityDataTable/index.ts @@ -17,8 +17,9 @@ import EntityDataTable from './EntityDataTable'; import MoreActions from './MoreActions'; import type { ColumnRenderers, ColumnSchema } from './types'; +import ExpandedSectionToggleWrapper from './ExpandedSectionToggleWrapper'; export { default as useTableEventHandlers } from './hooks/useTableEventHandlers'; -export { ColumnRenderers, ColumnSchema, MoreActions }; +export { ColumnRenderers, ColumnSchema, MoreActions, ExpandedSectionToggleWrapper }; export default EntityDataTable; diff --git a/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx b/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx index 6627b69ce936..34ad11749398 100644 --- a/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx +++ b/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx @@ -17,10 +17,11 @@ import * as React from 'react'; import type { ColumnRenderers } from 'components/common/EntityDataTable'; +import { ExpandedSectionToggleWrapper } from 'components/common/EntityDataTable'; import type { InputSummary } from 'hooks/usePaginatedInputs'; import type { InputTypesSummary } from 'hooks/useInputTypes'; import type { InputStates } from 'hooks/useInputsStates'; -import { TypeCell, NodeCell, ThroughputCell, ExpandedSectionToggleWrapper } from 'components/inputs/InputsOveriew'; +import { TypeCell, NodeCell, ThroughputCell } from 'components/inputs/InputsOveriew'; import FailuresCell from 'components/inputs/InputsOveriew/cells/FailuresCell'; import MessageCountCell from 'components/inputs/InputsOveriew/cells/MessageCountCell'; import ExtractorCountCell from 'components/inputs/InputsOveriew/cells/ExtractorCountCell'; @@ -30,6 +31,8 @@ import { InputStateBadge } from 'components/inputs'; import Routes from 'routing/Routes'; import { Link } from 'components/common'; +const EXPANDED_SECTION = 'EXPANDED_SECTION'; + type Props = { inputTypes: InputTypesSummary; inputStates?: InputStates; @@ -39,7 +42,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender attributes: { title: { renderCell: (_title: string, input: InputSummary) => ( - + {input.title} @@ -49,7 +52,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, type: { renderCell: (type: string, input: InputSummary) => ( - + ), @@ -57,7 +60,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, desired_state: { renderCell: (_state: string, input: InputSummary) => ( - + ), @@ -65,7 +68,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, node_id: { renderCell: (_type: string, input: InputSummary) => ( - + ), @@ -73,7 +76,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, traffic: { renderCell: (_traffic: string, input: InputSummary) => ( - + ), @@ -82,7 +85,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, input_failures: { renderCell: (_failures: string, input: InputSummary) => ( - + ), @@ -91,7 +94,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, address: { renderCell: (_address: string, input: InputSummary) => ( - + {input.attributes?.bind_address || 'N/A'} ), @@ -99,7 +102,9 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, port: { renderCell: (_port: string, input: InputSummary) => ( - {input.attributes?.port || 'N/A'} + + {input.attributes?.port || 'N/A'} + ), staticWidth: 'matchHeader', }, diff --git a/graylog2-web-interface/src/components/inputs/InputsOveriew/ExpandedSectionToggleWrapper.tsx b/graylog2-web-interface/src/components/inputs/InputsOveriew/ExpandedSectionToggleWrapper.tsx deleted file mode 100644 index 1305db6bdf4e..000000000000 --- a/graylog2-web-interface/src/components/inputs/InputsOveriew/ExpandedSectionToggleWrapper.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright (C) 2020 Graylog, Inc. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the Server Side Public License, version 1, - * as published by MongoDB, Inc. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * Server Side Public License for more details. - * - * You should have received a copy of the Server Side Public License - * along with this program. If not, see - * . - */ -import React from 'react'; -import { styled } from 'styled-components'; - -import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections'; - -const StyledWrapper = styled.div` - cursor: pointer; -`; - -type Props = React.PropsWithChildren<{ - id: string; -}>; - -const ExpandedSectionToggleWrapper = ({ id, children = undefined }: Props) => { - const { toggleSection } = useExpandedSections(); - const _toggleSection = () => toggleSection(id, 'configuration'); - - return ( - - {children} - - ); -}; - -export default ExpandedSectionToggleWrapper; diff --git a/graylog2-web-interface/src/components/inputs/InputsOveriew/index.tsx b/graylog2-web-interface/src/components/inputs/InputsOveriew/index.tsx index ea512aad87b8..11bb62c62d5a 100644 --- a/graylog2-web-interface/src/components/inputs/InputsOveriew/index.tsx +++ b/graylog2-web-interface/src/components/inputs/InputsOveriew/index.tsx @@ -25,7 +25,6 @@ export { default as FailuresCell } from './cells/FailuresCell'; export { default as MessageCountCell } from './cells/MessageCountCell'; export { default as ExtractorCountCell } from './cells/ExtractorCountCell'; export { default as AssociatedStreamsCell } from './cells/AssociatedStreamsCell'; -export { default as ExpandedSectionToggleWrapper } from './ExpandedSectionToggleWrapper'; export { default as ThroughputSection } from './expanded-sections/ThroughputSection'; export { default as Connections } from './expanded-sections/Connections'; export { default as NetworkIOStats } from './expanded-sections/NetworkIOStats'; From 9ea82a764d059cc936d6741a5723a10aa57cea65 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Thu, 30 Jul 2026 14:16:45 +0200 Subject: [PATCH 3/6] Remove not needed import. --- .../event-definitions/event-definitions/SchedulingCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx b/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx index da74020bcd4b..cd83521e05f9 100644 --- a/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx +++ b/graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx @@ -20,7 +20,7 @@ import styled, { css } from 'styled-components'; import { useQueryClient } from '@tanstack/react-query'; import { describeExpression } from 'util/CronUtils'; -import { OverlayTrigger, Icon, Timestamp, IconButton } from 'components/common'; +import { OverlayTrigger, Icon, Timestamp } from 'components/common'; import Button from 'components/bootstrap/Button'; import { clearNotificationQueue, From a4fd7bb8db19917223376493ee0aecb5b64bddee Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Thu, 30 Jul 2026 14:21:52 +0200 Subject: [PATCH 4/6] Add missing license header --- .../ExpandedSectionToggleWrapper.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx b/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx index 3b02c96ddb31..361cf1495d83 100644 --- a/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx +++ b/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx @@ -1,3 +1,19 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ import React from 'react'; import { styled, css } from 'styled-components'; From e48a5be2cbc9b035a7792183e929d027be3accbc Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Thu, 30 Jul 2026 14:46:52 +0200 Subject: [PATCH 5/6] Fix alignment of input ports cell. --- .../src/components/inputs/InputsOveriew/ColumnRenderers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx b/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx index 34ad11749398..11eae92e8788 100644 --- a/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx +++ b/graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx @@ -102,7 +102,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender }, port: { renderCell: (_port: string, input: InputSummary) => ( - + {input.attributes?.port || 'N/A'} ), From 9933dc0a226759c4d7b8ed3dd171ea7259aa8264 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Thu, 30 Jul 2026 16:16:54 +0200 Subject: [PATCH 6/6] Implement `ExpandedSectionToggleWrapper` for input profile types. --- .../hooks/useCustomColumnRenderers.tsx | 6 +-- .../originBadges/ExpandedRowToggleWrapper.tsx | 37 ------------------- 2 files changed, 3 insertions(+), 40 deletions(-) delete mode 100644 graylog2-web-interface/src/components/indices/IndexSetFieldTypes/originBadges/ExpandedRowToggleWrapper.tsx diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/hooks/useCustomColumnRenderers.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/hooks/useCustomColumnRenderers.tsx index fc642328d0ef..4e1a0b288252 100644 --- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/hooks/useCustomColumnRenderers.tsx +++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/hooks/useCustomColumnRenderers.tsx @@ -17,10 +17,10 @@ import React, { useMemo } from 'react'; import type { FieldTypeOrigin } from 'components/indices/IndexSetFieldTypes/types'; -import ExpandedRowToggleWrapper from 'components/indices/IndexSetFieldTypes/originBadges/ExpandedRowToggleWrapper'; import { Icon } from 'components/common'; import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings'; import OriginCell from 'components/indices/IndexSetFieldTypes/originBadges/OriginCell'; +import { ExpandedSectionToggleWrapper } from 'components/common/EntityDataTable'; const useCustomColumnRenderers = () => { const { @@ -35,9 +35,9 @@ const useCustomColumnRenderers = () => { }, origin: { renderCell: (origin: FieldTypeOrigin, { id }) => ( - + - + ), staticWidth: 200, }, diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/originBadges/ExpandedRowToggleWrapper.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/originBadges/ExpandedRowToggleWrapper.tsx deleted file mode 100644 index 561b415c5085..000000000000 --- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/originBadges/ExpandedRowToggleWrapper.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright (C) 2020 Graylog, Inc. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the Server Side Public License, version 1, - * as published by MongoDB, Inc. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * Server Side Public License for more details. - * - * You should have received a copy of the Server Side Public License - * along with this program. If not, see - * . - */ -import React from 'react'; -import { styled } from 'styled-components'; - -import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections'; - -const StyledWrapper = styled.div` - cursor: pointer; -`; - -type Props = React.PropsWithChildren<{ - id: string; -}>; - -const ExpandedRowToggleWrapper = ({ id, children = undefined }: Props) => { - const { toggleSection } = useExpandedSections(); - const _toggleSection = () => toggleSection(id, 'overriddenProfile'); - - return {children}; -}; - -export default ExpandedRowToggleWrapper;