From b7594a239b30e28fe837b6eeae61e84be6a45217 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Wed, 2 Sep 2026 08:45:30 +0200 Subject: [PATCH 1/3] Use proper `IconButtons` for actions in output list. --- .../output-filter/FilterActions.tsx | 10 +++++----- .../output-filter/FilterRuleEditButton.tsx | 11 ++--------- .../routing-destination/EditOutputButton.tsx | 7 ++----- .../routing-destination/OutputItem.tsx | 16 +++++++--------- .../routing-destination/RemoveOutputButton.tsx | 13 ++++++++----- 5 files changed, 24 insertions(+), 33 deletions(-) diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterActions.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterActions.tsx index c06bf4d55104..07602b7143b0 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterActions.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterActions.tsx @@ -17,6 +17,7 @@ import React from 'react'; import styled from 'styled-components'; +import { ButtonToolbar } from 'components/bootstrap'; import FilterRuleEditButton from 'components/streams/StreamDetails/output-filter/FilterRuleEditButton'; import FilterDeleteButton from 'components/streams/StreamDetails/output-filter/FilterDeleteButton'; import type { StreamOutputFilterRule } from 'components/streams/StreamDetails/output-filter/Types'; @@ -25,17 +26,16 @@ type Props = { filterRule: StreamOutputFilterRule; destinationType: string; }; -const ActionWrapper = styled.div` - display: flex; - align-items: center; + +const StyledButtonToolbar = styled(ButtonToolbar)` justify-content: flex-end; `; const FilterActions = ({ filterRule, destinationType }: Props) => ( - + - + ); export default FilterActions; diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterRuleEditButton.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterRuleEditButton.tsx index d2d142e24edc..aa8d95e11338 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterRuleEditButton.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterRuleEditButton.tsx @@ -17,7 +17,6 @@ import * as React from 'react'; import { useState } from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import styled, { css } from 'styled-components'; import camelCase from 'lodash/camelCase'; import upperCase from 'lodash/upperCase'; @@ -35,12 +34,6 @@ type Props = { destinationType: string; }; -const StyledButton = styled(Button)( - ({ theme }) => css` - margin: 0 ${theme.spacings.xxs}; - `, -); - const FilterRuleEditButton = ({ streamId, filterRule, destinationType }: Props) => { const [showForm, setShowForm] = useState(false); const { createStreamOutputRule, updateStreamOutputRule } = useStreamOutputRuleMutation(); @@ -77,7 +70,7 @@ const FilterRuleEditButton = ({ streamId, filterRule, destinationType }: Props) return ( <> - + {showForm && ( - + ref={configFormRef} key={`configuration-form-output-${output.id}`} diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/OutputItem.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/OutputItem.tsx index 64c5b76138f2..0db88615f830 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/OutputItem.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/OutputItem.tsx @@ -15,7 +15,7 @@ * . */ import * as React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import type { Output } from 'hooks/useOutputs'; import type { ConfigurationFormData } from 'components/configurationforms'; @@ -23,6 +23,7 @@ import type { AvailableOutputRequestedConfiguration } from 'components/streams/u import EditOutputButton from 'components/streams/StreamDetails/routing-destination/EditOutputButton'; import RemoveOutputButton from 'components/streams/StreamDetails/routing-destination/RemoveOutputButton'; import { IfPermitted } from 'components/common'; +import { ButtonToolbar } from 'components/bootstrap'; type Props = { output: Output; @@ -32,12 +33,9 @@ type Props = { getTypeDefinition: (type: string) => undefined | AvailableOutputRequestedConfiguration; }; -const ActionButtonsWrap = styled.span( - ({ theme }) => css` - margin-right: ${theme.spacings.xs}; - float: right; - `, -); +const StyledButtonToolbar = styled(ButtonToolbar)` + justify-content: flex-end; +`; const OutputItem = ({ output, streamId, isLoadingOutputTypes, onUpdate, getTypeDefinition }: Props) => ( @@ -46,7 +44,7 @@ const OutputItem = ({ output, streamId, isLoadingOutputTypes, onUpdate, getTypeD {} - + - + ); diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/RemoveOutputButton.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/RemoveOutputButton.tsx index c51a7bc6afec..825c8eb2e757 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/RemoveOutputButton.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/RemoveOutputButton.tsx @@ -18,8 +18,7 @@ import * as React from 'react'; import { useState } from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import { Button } from 'components/bootstrap'; -import { ConfirmDialog, Icon } from 'components/common'; +import { ConfirmDialog, IconButton } from 'components/common'; import type { Output } from 'hooks/useOutputs'; import useStreamOutputMutation from 'hooks/useStreamOutputMutations'; import { keyFn } from 'hooks/useStreamOutputs'; @@ -42,9 +41,13 @@ const RemoveOutputButton = ({ output, streamId }: Props) => { return ( <> - + setShowConfirmRemove(true)} + /> Date: Wed, 2 Sep 2026 09:04:23 +0200 Subject: [PATCH 2/3] Remove not needed padding. --- .../InputDiagnosis/InputDiagnosisRulesTab.tsx | 14 ++++---------- .../StreamConnectedPipelines.tsx | 11 ++--------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/graylog2-web-interface/src/components/inputs/InputDiagnosis/InputDiagnosisRulesTab.tsx b/graylog2-web-interface/src/components/inputs/InputDiagnosis/InputDiagnosisRulesTab.tsx index 0c7a04ec74fa..14e2a1bc7ac5 100644 --- a/graylog2-web-interface/src/components/inputs/InputDiagnosis/InputDiagnosisRulesTab.tsx +++ b/graylog2-web-interface/src/components/inputs/InputDiagnosis/InputDiagnosisRulesTab.tsx @@ -55,12 +55,6 @@ const StyledSectionGrid = styled(SectionGrid)<{ $rows?: string }>( `, ); -const ListCol = styled(Col)( - ({ theme }) => css` - padding-top: ${theme.spacings.lg}; - `, -); - const InputDiagnosisRulesTab = ({ inputId }: Props) => (
@@ -69,7 +63,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => ( match on gl2_source_input/gl2_forwarder_input).

- + humanName="pipeline rules" tableLayout={PIPELINE_RULES_LAYOUT} @@ -81,7 +75,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => ( fetchOptions={{ refetchInterval: 5000 }} withoutURLParams /> - +
@@ -92,7 +86,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => ( be listed.

- + humanName="stream rules" tableLayout={STREAM_RULES_LAYOUT} @@ -104,7 +98,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => ( fetchOptions={{ refetchInterval: 5000 }} withoutURLParams /> - + diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingIntake/StreamConnectedPipelines.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingIntake/StreamConnectedPipelines.tsx index 0e47d8358bbb..bef58648589c 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingIntake/StreamConnectedPipelines.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingIntake/StreamConnectedPipelines.tsx @@ -15,7 +15,6 @@ * . */ import * as React from 'react'; -import styled, { css } from 'styled-components'; import { Col, Row } from 'components/bootstrap'; import type { Sort } from 'stores/PaginationTypes'; @@ -43,16 +42,10 @@ export const DEFAULT_LAYOUT = { defaultColumnOrder: ['rule', 'pipeline', 'connected_streams'], }; -const ListCol = styled(Col)( - ({ theme }) => css` - padding-top: ${theme.spacings.lg}; - `, -); - const StreamConnectedPipelines = ({ stream }: Props) => (
- + humanName="pipelines" tableLayout={DEFAULT_LAYOUT} @@ -62,7 +55,7 @@ const StreamConnectedPipelines = ({ stream }: Props) => ( externalSearch={EXTERNAL_SEARCH} columnRenderers={customColumnRenderers} /> - +
); From 33bfca836f1013c915392e0f4ba95322b809e5c6 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Wed, 2 Sep 2026 11:32:33 +0200 Subject: [PATCH 3/3] Unify how we link to details pages. --- .../StreamDataRoutingProcessing.tsx | 26 ++++--------------- .../DestinationIndexSetSection.tsx | 26 +++++-------------- 2 files changed, 11 insertions(+), 41 deletions(-) diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingProcessing.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingProcessing.tsx index f30ec5f80bf4..0120ce07e9ac 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingProcessing.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingProcessing.tsx @@ -15,14 +15,13 @@ * . */ import * as React from 'react'; -import styled, { css } from 'styled-components'; import { PluginStore } from 'graylog-web-plugin/plugin'; import { defaultCompare as naturalSort } from 'logic/DefaultCompare'; import usePipelinesConnectedStream, { type StreamConnectedPipelines } from 'hooks/usePipelinesConnectedStream'; -import { Table, Button } from 'components/bootstrap'; +import { Table } from 'components/bootstrap'; import Routes from 'routing/Routes'; -import { IfPermitted, Section, Icon, LinkContainer } from 'components/common'; +import { IfPermitted, Section, Link } from 'components/common'; import usePipelines from 'hooks/usePipelines'; import StreamPipelinesConnectionForm from 'components/streams/StreamDetails/StreamPipelinesConnectionForm'; import type { Stream } from 'logic/streams/types'; @@ -31,13 +30,6 @@ type Props = { stream: Stream; }; -const ActionButtonsWrap = styled.span( - ({ theme }) => css` - margin-right: ${theme.spacings.xxs}; - float: right; - `, -); - const StreamDataRoutingProcessing = ({ stream }: Props) => { const { id: streamId } = stream; const { data: connectedPipelines, isInitialLoading: isLoadingConnectPipelines } = @@ -65,29 +57,21 @@ const StreamDataRoutingProcessing = ({ stream }: Props) => { - + {hasConnectedPipelines && sortPipelines(connectedPipelines).map((pipeline) => ( - - {} ))} {!hasConnectedPipelines && ( - + )} diff --git a/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/DestinationIndexSetSection.tsx b/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/DestinationIndexSetSection.tsx index 5c13a8b9f669..5c342e057d85 100644 --- a/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/DestinationIndexSetSection.tsx +++ b/graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/DestinationIndexSetSection.tsx @@ -16,11 +16,10 @@ */ import * as React from 'react'; import { useState } from 'react'; -import styled, { css } from 'styled-components'; import { ARCHIVE_RETENTION_STRATEGY } from 'hooks/useIndices'; -import { Icon, Section, Spinner, LinkContainer } from 'components/common'; -import { Table, Button, Alert } from 'components/bootstrap'; +import { Section, Spinner, Link } from 'components/common'; +import { Table, Alert } from 'components/bootstrap'; import Routes from 'routing/Routes'; import useIndexSetsList from 'components/indices/hooks/useIndexSetsList'; import type { Stream } from 'logic/streams/types'; @@ -44,12 +43,6 @@ type Props = { stream: Stream; }; -const ActionButtonsWrap = styled.span( - () => css` - float: right; - `, -); - const DestinationIndexSetSection = ({ stream }: Props) => { const productName = useProductName(); const [pagination, setPagination] = useState(DEFAULT_PAGINATION); @@ -120,13 +113,15 @@ const DestinationIndexSetSection = ({ stream }: Props) => { - + {indexSet && ( - + - )}
PipelinePipeline
{pipeline.title} - - - - - + {pipeline.title}
This stream is not connected to any Pipeline.This stream is not connected to any Pipeline.
Name Total size Oldest Message (date)ArchivingArchiving
{indexSet?.title} + {indexSet?.title} + {isStatsLoaded && indexSetStats?.size ? NumberUtils.formatBytes(indexSetStats.size) : 0} {isLoadingIndexerOverviewSuccess && ( @@ -136,15 +131,6 @@ const DestinationIndexSetSection = ({ stream }: Props) => { - - - - - -