Improve Stream overview UI (#20250)

* use proper hook to get pipeline connected stream

* fix archiving status on stream overview

* add a disable state to streamOverview count badge

- change color for count that have value 0

* add space to stream destination section

* reduce contrast of stream overview counter badge

graylog2-web-interface/src/components/streams/StreamCountBadge.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import styled, { css } from 'styled-components';
+
+import { CountBadge } from 'components/common';
+
+const StreamCountBadge = styled(CountBadge)<{ $disabled: boolean }>(({ $disabled, theme }) => css`
+  cursor: pointer;
+  background-color: ${$disabled ? theme.colors.variant.default : theme.colors.variant.light.info};
+`);
+
+export default StreamCountBadge;

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

@@ -17,6 +17,7 @@
 
 import * as React from 'react';
 import { PluginStore } from 'graylog-web-plugin/plugin';
+import styled, { css } from 'styled-components';
 
 import type { Stream } from 'stores/streams/StreamsStore';
 import useSingleIndexSet from 'components/indices/hooks/useSingleIndexSet';
@@ -27,17 +28,23 @@ type Props = {
   stream: Stream;
 };
 
+const Container = styled.div(({ theme }) => css`
+  > div {
+    margin-bottom: ${theme.spacings.sm};
+  }
+`);
+
 const StreamDataRoutingDestinations = ({ stream }: Props) => {
   const { index_set_id: indexSetId } = stream;
   const { data: indexSet, isSuccess } = useSingleIndexSet(indexSetId);
   const StreamDataWarehouseComponent = PluginStore.exports('dataWarehouse')?.[0]?.StreamDataWarehouse;
 
   return (
-    <>
+    <Container>
       {isSuccess && <DestinationIndexSetSection indexSet={indexSet} stream={stream} />}
       {StreamDataWarehouseComponent && <StreamDataWarehouseComponent />}
       <DestinationOutputs stream={stream} />
-    </>
+    </Container>
   );
 };
 

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

@@ -25,7 +25,7 @@ type Props = {
   streamId: string,
 }
 const Wrapper = styled.div<{ $enabled: boolean }>(({ theme, $enabled }) => css`
-  color: ${$enabled ? theme.colors.variant.success : theme.colors.variant.darker};
+  color: ${$enabled ? theme.colors.variant.success : theme.colors.variant.darker.default};
 `);
 const StyledDiv = styled.div`
   display: flex;

graylog2-web-interface/src/components/streams/StreamsOverview/cells/ArchivingsCell.tsx

@@ -40,7 +40,7 @@ const ArchivingsCell = ({ stream, indexSets }: Props) => {
 
   const indexSet = indexSets.find((is) => is.id === stream.index_set_id);
 
-  const archivingEnabled = indexSet?.retention_strategy_class === ARCHIVE_RETENTION_STRATEGY || indexSet?.data_tiering?.archive_before_deletion;
+  const archivingEnabled = (indexSet?.use_legacy_rotation && indexSet?.retention_strategy_class === ARCHIVE_RETENTION_STRATEGY) || indexSet?.data_tiering?.archive_before_deletion;
 
   return (
     <Tooltip withArrow position="right" label={`Archiving is ${archivingEnabled ? 'enabled' : 'disabled'}`}>

graylog2-web-interface/src/components/streams/StreamsOverview/cells/OutputsCell.tsx

@@ -17,14 +17,9 @@
 
 import { useRef } from 'react';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import type { Stream } from 'stores/streams/StreamsStore';
-import { CountBadge } from 'components/common';
-
-const StyledCountBadge = styled(CountBadge)`
-  cursor: pointer;
-`;
+import StreamCountBadge from 'components/streams/StreamCountBadge';
 
 type Props = {
   stream: Stream
@@ -37,10 +32,12 @@ const OutputsCell = ({ stream }: Props) => {
     return null;
   }
 
+  const outputCount = stream.outputs?.length || 0;
+
   return (
-    <StyledCountBadge ref={buttonRef} title="Stream Outputs">
-      {stream.outputs?.length || 0}
-    </StyledCountBadge>
+    <StreamCountBadge $disabled={outputCount === 0} ref={buttonRef} title="Stream Outputs">
+      {outputCount}
+    </StreamCountBadge>
   );
 };
 

graylog2-web-interface/src/components/streams/StreamsOverview/cells/PipelinesCell.tsx

@@ -17,32 +17,29 @@
 
 import { useRef } from 'react';
 import * as React from 'react';
-import styled from 'styled-components';
 
-import useStreamOutputs from 'hooks/useStreamOutputs';
+import StreamCountBadge from 'components/streams/StreamCountBadge';
 import type { Stream } from 'stores/streams/StreamsStore';
-import { CountBadge } from 'components/common';
-
-const StyledCountBadge = styled(CountBadge)`
-  cursor: pointer;
-`;
+import usePipelinesConnectedStream from 'hooks/usePipelinesConnectedStream';
 
 type Props = {
   stream: Stream
 }
 
 const PipelinesCell = ({ stream }: Props) => {
   const buttonRef = useRef();
-  const { data, isInitialLoading, isError } = useStreamOutputs(stream.id);
+  const { data } = usePipelinesConnectedStream(stream.id);
 
-  if (stream.is_default || !stream.is_editable || isInitialLoading || isError) {
+  if (stream.is_default || !stream.is_editable) {
     return null;
   }
 
+  const pipelinesCount = data?.length || 0;
+
   return (
-    <StyledCountBadge ref={buttonRef} title="Connected pipelines">
-      {data.outputs.length}
-    </StyledCountBadge>
+    <StreamCountBadge $disabled={pipelinesCount === 0} ref={buttonRef} title="Connected pipelines">
+      {pipelinesCount}
+    </StreamCountBadge>
   );
 };
 

graylog2-web-interface/src/components/streams/StreamsOverview/cells/StreamRulesCell.tsx

@@ -17,15 +17,10 @@
 
 import { useRef, useCallback } from 'react';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import StreamCountBadge from 'components/streams/StreamCountBadge';
 import type { Stream } from 'stores/streams/StreamsStore';
 import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections';
-import { CountBadge } from 'components/common';
-
-const StyledCountBadge = styled(CountBadge)`
-  cursor: pointer;
-`;
 
 type Props = {
   stream: Stream
@@ -44,9 +39,12 @@ const StreamRulesCell = ({ stream }: Props) => {
   const streamRulesSectionIsOpen = expandedSections?.[stream.id]?.includes('rules');
 
   return (
-    <StyledCountBadge onClick={toggleRulesSection} ref={buttonRef} title={`${streamRulesSectionIsOpen ? 'Hide' : 'Show'} stream rules`}>
+    <StreamCountBadge $disabled={stream.rules.length === 0}
+                      onClick={toggleRulesSection}
+                      ref={buttonRef}
+                      title={`${streamRulesSectionIsOpen ? 'Hide' : 'Show'} stream rules`}>
       {stream.rules.length}
-    </StyledCountBadge>
+    </StreamCountBadge>
   );
 };
 

graylog2-web-interface/src/hooks/usePipelinesConnectedStream.ts

@@ -31,8 +31,9 @@ const usePipelinesConnectedStream = (streamId: string): {
   refetch: () => void,
   isInitialLoading: boolean,
   error: FetchError,
+  isError: boolean,
 } => {
-  const { data, refetch, isInitialLoading, error } = useQuery<StreamConnectedPipelines, FetchError>(
+  const { data, refetch, isInitialLoading, error, isError } = useQuery<StreamConnectedPipelines, FetchError>(
     ['stream', 'pipelines', streamId],
     () => fetchPipelinesConnectedStream(streamId),
     {
@@ -45,6 +46,7 @@ const usePipelinesConnectedStream = (streamId: string): {
     refetch,
     isInitialLoading,
     error,
+    isError,
   });
 };