Small styling improvements for stream data routing page.

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) => (
   <StyledSectionGrid $rows="1fr 1fr">
     <Section title="Input appears in Pipeline Rules">
@@ -69,7 +63,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => (
         match on gl2_source_input/gl2_forwarder_input).
       </p>
       <Row>
-        <ListCol md={12}>
+        <Col md={12}>
           <PaginatedEntityTable<InputPipelineRule>
             humanName="pipeline rules"
             tableLayout={PIPELINE_RULES_LAYOUT}
@@ -81,7 +75,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => (
             fetchOptions={{ refetchInterval: 5000 }}
             withoutURLParams
           />
-        </ListCol>
+        </Col>
       </Row>
     </Section>
 
@@ -92,7 +86,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => (
         be listed.
       </p>
       <Row>
-        <ListCol md={12}>
+        <Col md={12}>
           <PaginatedEntityTable<InputStreamRule>
             humanName="stream rules"
             tableLayout={STREAM_RULES_LAYOUT}
@@ -104,7 +98,7 @@ const InputDiagnosisRulesTab = ({ inputId }: Props) => (
             fetchOptions={{ refetchInterval: 5000 }}
             withoutURLParams
           />
-        </ListCol>
+        </Col>
       </Row>
     </Section>
   </StyledSectionGrid>

graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingIntake/StreamConnectedPipelines.tsx

@@ -15,7 +15,6 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 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) => (
   <Section title="Routing from other Streams" collapsible>
     <Row>
-      <ListCol md={12}>
+      <Col md={12}>
         <PaginatedEntityTable<StreamConnectedPipeline>
           humanName="pipelines"
           tableLayout={DEFAULT_LAYOUT}
@@ -62,7 +55,7 @@ const StreamConnectedPipelines = ({ stream }: Props) => (
           externalSearch={EXTERNAL_SEARCH}
           columnRenderers={customColumnRenderers}
         />
-      </ListCol>
+      </Col>
     </Row>
   </Section>
 );

graylog2-web-interface/src/components/streams/StreamDetails/StreamDataRoutingProcessing.tsx

@@ -15,14 +15,13 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 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) => {
         <Table condensed>
           <thead>
             <tr>
-              <th colSpan={2}>Pipeline</th>
+              <th>Pipeline</th>
             </tr>
           </thead>
           <tbody>
             {hasConnectedPipelines &&
               sortPipelines(connectedPipelines).map((pipeline) => (
                 <tr key={pipeline.id}>
-                  <td>{pipeline.title}</td>
-                  {}
                   <td>
-                    <ActionButtonsWrap className="align-right">
-                      <LinkContainer to={Routes.SYSTEM.PIPELINES.PIPELINE(pipeline.id)}>
-                        <Button bsStyle="default" bsSize="xsmall" title="View">
-                          <Icon name="pageview" type="regular" />
-                        </Button>
-                      </LinkContainer>
-                    </ActionButtonsWrap>
+                    <Link to={Routes.SYSTEM.PIPELINES.PIPELINE(pipeline.id)}>{pipeline.title}</Link>
                   </td>
                 </tr>
               ))}
             {!hasConnectedPipelines && (
               <tr>
-                <td colSpan={2}>This stream is not connected to any Pipeline.</td>
+                <td>This stream is not connected to any Pipeline.</td>
               </tr>
             )}
           </tbody>

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) => (
-  <ActionWrapper>
+  <StyledButtonToolbar>
     <FilterRuleEditButton filterRule={filterRule} destinationType={destinationType} streamId={filterRule.stream_id} />
     <FilterDeleteButton streamId={filterRule.stream_id} filterOutputRule={filterRule} />
-  </ActionWrapper>
+  </StyledButtonToolbar>
 );
 
 export default FilterActions;

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,15 +70,15 @@ const FilterRuleEditButton = ({ streamId, filterRule, destinationType }: Props)
 
   return (
     <>
-      <StyledButton bsStyle={isNew ? 'default' : 'default'} bsSize={isNew ? 'sm' : 'xs'} onClick={onClick} title="Edit">
+      <Button bsStyle={isNew ? 'default' : 'default'} bsSize={isNew ? 'sm' : 'xs'} onClick={onClick} title="Edit">
         {isNew ? (
           <>
             <Icon name="add" size="sm" /> Create rule
           </>
         ) : (
           <Icon name="edit_square" />
         )}
-      </StyledButton>
+      </Button>
       {showForm && (
         <FilterRuleForm
           title={title}

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) => {
             <td>Name</td>
             <td>Total size</td>
             <td>Oldest Message (date)</td>
-            <td colSpan={2}>Archiving</td>
+            <td>Archiving</td>
           </tr>
         </thead>
         <tbody>
           {indexSet && (
             <tr>
-              <td>{indexSet?.title}</td>
+              <td>
+                <Link to={Routes.SYSTEM.INDEX_SETS.SHOW(indexSet?.id)}>{indexSet?.title}</Link>
+              </td>
               <td>{isStatsLoaded && indexSetStats?.size ? NumberUtils.formatBytes(indexSetStats.size) : 0}</td>
               <td>
                 {isLoadingIndexerOverviewSuccess && (
@@ -136,15 +131,6 @@ const DestinationIndexSetSection = ({ stream }: Props) => {
               <td>
                 <IndexSetArchivingCell isArchivingEnabled={archivingEnabled} streamId={stream.id} />
               </td>
-              <td>
-                <ActionButtonsWrap>
-                  <LinkContainer to={Routes.SYSTEM.INDEX_SETS.SHOW(indexSet?.id)}>
-                    <Button bsStyle="default" bsSize="xsmall" onClick={() => {}} title="View index set">
-                      <Icon name="pageview" type="regular" />
-                    </Button>
-                  </LinkContainer>
-                </ActionButtonsWrap>
-              </td>
             </tr>
           )}
         </tbody>

graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/EditOutputButton.tsx

@@ -22,8 +22,7 @@ import URI from 'urijs';
 import type { ConfigurationFormData } from 'components/configurationforms';
 import { ConfigurationForm } from 'components/configurationforms';
 import type { Output } from 'hooks/useOutputs';
-import { Button } from 'components/bootstrap';
-import { Icon, IfPermitted } from 'components/common';
+import { IconButton, IfPermitted } from 'components/common';
 import type { AvailableOutputRequestedConfiguration } from 'components/streams/useAvailableOutputTypes';
 import useQuery from 'routing/useQuery';
 import useHistory from 'routing/useHistory';
@@ -67,9 +66,7 @@ const EditOutputButton = ({ output, disabled = false, onUpdate, getTypeDefinitio
 
   return (
     <IfPermitted permissions={`outputs:edit:${output.id}`}>
-      <Button bsStyle="link" disabled={disabled} bsSize="xsmall" onClick={onClick} title="Edit Output">
-        <Icon name="edit_square" />
-      </Button>
+      <IconButton name="edit_square" title="Edit Output" bsStyle="default" disabled={disabled} onClick={onClick} />
       <ConfigurationForm<Output['configuration']>
         ref={configFormRef}
         key={`configuration-form-output-${output.id}`}

graylog2-web-interface/src/components/streams/StreamDetails/routing-destination/OutputItem.tsx

@@ -15,14 +15,15 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 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';
 import type { AvailableOutputRequestedConfiguration } from 'components/streams/useAvailableOutputTypes';
 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) => (
   <tr>
@@ -46,7 +44,7 @@ const OutputItem = ({ output, streamId, isLoadingOutputTypes, onUpdate, getTypeD
     </td>
     {}
     <td>
-      <ActionButtonsWrap className="align-right">
+      <StyledButtonToolbar>
         <IfPermitted permissions="stream_outputs:create">
           <EditOutputButton
             disabled={isLoadingOutputTypes}
@@ -58,7 +56,7 @@ const OutputItem = ({ output, streamId, isLoadingOutputTypes, onUpdate, getTypeD
         <IfPermitted permissions="stream_outputs:delete">
           <RemoveOutputButton output={output} streamId={streamId} />
         </IfPermitted>
-      </ActionButtonsWrap>
+      </StyledButtonToolbar>
     </td>
   </tr>
 );

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 (
     <>
-      <Button bsStyle="link" bsSize="xsmall" onClick={() => setShowConfirmRemove(true)} title="Edit Output">
-        <Icon name="delete" type="regular" />
-      </Button>
+      <IconButton
+        name="delete"
+        iconType="regular"
+        title="Remove Output"
+        bsStyle="danger"
+        onClick={() => setShowConfirmRemove(true)}
+      />
       <ConfirmDialog
         show={showConfirmRemove}
         onConfirm={onConfirmRemoveOutput}