feat(streams): add Default/Routing/Performance view buttons to Streams table (#26555)

Co-authored-by: Ousmane SAMBA <ousmane.samba@graylog.com>

Author: laura-b-g

changelog/unreleased/pr-26555.toml

@@ -0,0 +1,4 @@
+type = "a"
+message = "Add Default, Routing, and Performance view buttons to the streams table for quickly switching between predefined column sets."
+
+pulls = ["26555", "Graylog2/graylog-plugin-enterprise#14711"]

graylog2-web-interface/src/@types/graylog-web-plugin/index.d.ts

@@ -202,6 +202,7 @@ type IndexRetentionConfig = {
 
 type StreamsOverviewTableElement = {
   attributeName: string;
+  group?: 'routing' | 'performance';
   attributes: Array<Attribute>;
   columnRenderers: ColumnRenderersByAttribute<Stream>;
   // Optional map of column id → backend metric fields. Plugins use this to plug their

graylog2-web-interface/src/components/streams/StreamsOverview/Constants.ts

@@ -16,70 +16,110 @@
  */
 import type { Attribute, Sort } from 'stores/PaginationTypes';
 
+import type { ExtensionColumnGroups } from './hooks/useStreamsOverviewExtensions';
 import { METRIC_COLUMN_IDS, METRIC_COLUMN_TITLES } from './metricColumns';
 
+export const STREAM_VIEW_VARIANTS = {
+  default: '' as const,
+  routing: 'routing' as const,
+  performance: 'performance' as const,
+};
+
+const SHARED_LAYOUT = {
+  entityTableId: 'streams',
+  defaultPageSize: 20,
+  defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
+};
+
 const getStreamTableElements = (
   isPipelineColumnPermitted: boolean,
   extensionAttributes?: {
     attributeNames?: Array<string>;
     attributes?: Array<Attribute>;
   },
+  extensionColumnGroups?: ExtensionColumnGroups,
 ) => {
-  const defaultLayout = {
-    entityTableId: 'streams',
-    defaultPageSize: 20,
-    defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
-    defaultDisplayedAttributes: [
-      'title',
-      'index_set_title',
-      'rules',
-      ...(isPipelineColumnPermitted ? ['pipelines'] : []),
-      'outputs',
-      'archiving',
-      ...(extensionAttributes?.attributeNames || []),
-      'destination_filters',
-      'disabled',
-      'throughput',
-    ],
-    defaultColumnOrder: [
-      'title',
-      'index_set_title',
-      'rules',
-      'outputs',
-      'archiving',
-      ...(extensionAttributes?.attributeNames || []),
-      'destination_filters',
-      'disabled',
-      'throughput',
-      METRIC_COLUMN_IDS.messageCount,
-      METRIC_COLUMN_IDS.avgProcessingTime,
-      METRIC_COLUMN_IDS.maxProcessingTime,
-      METRIC_COLUMN_IDS.associatedInputs,
-      ...(isPipelineColumnPermitted ? ['pipelines', METRIC_COLUMN_IDS.routingPipelines] : []),
-      'created_at',
-    ],
+  const extRouting = extensionColumnGroups?.routing ?? [];
+  const extPerformance = extensionColumnGroups?.performance ?? [];
+
+  const groupedIds = new Set([...extRouting, ...extPerformance]);
+  const ungroupedExtNames = (extensionAttributes?.attributeNames ?? []).filter((id) => !groupedIds.has(id));
+
+  const defaultCols = [
+    'title',
+    'index_set_title',
+    'rules',
+    ...(isPipelineColumnPermitted ? ['pipelines'] : []),
+    'destination_filters',
+    'disabled',
+    'throughput',
+  ];
+
+  const routingCols = [
+    METRIC_COLUMN_IDS.associatedInputs,
+    ...(isPipelineColumnPermitted ? [METRIC_COLUMN_IDS.routingPipelines] : []),
+    'outputs',
+    ...extRouting,
+    'archiving',
+  ];
+
+  const performanceCols = [
+    METRIC_COLUMN_IDS.messageCount,
+    ...extPerformance,
+    METRIC_COLUMN_IDS.avgProcessingTime,
+    METRIC_COLUMN_IDS.maxProcessingTime,
+  ];
+
+  const defaultColumnOrder = [
+    ...defaultCols,
+    ...routingCols,
+    ...performanceCols,
+    ...ungroupedExtNames,
+    'created_at',
+  ];
+
+  const defaultVariantLayout = {
+    ...SHARED_LAYOUT,
+    defaultColumnOrder,
+    defaultDisplayedAttributes: defaultCols,
+  };
+
+  const routingVariantLayout = {
+    ...SHARED_LAYOUT,
+    layoutVariant: STREAM_VIEW_VARIANTS.routing,
+    defaultColumnOrder,
+    defaultDisplayedAttributes: [...defaultCols, ...routingCols],
+  };
+
+  const performanceVariantLayout = {
+    ...SHARED_LAYOUT,
+    layoutVariant: STREAM_VIEW_VARIANTS.performance,
+    defaultColumnOrder,
+    defaultDisplayedAttributes: [...defaultCols, ...performanceCols],
   };
 
   const additionalAttributes: Array<Attribute> = [
     { id: 'index_set_title', title: 'Index Set', sortable: true, permissions: ['indexsets:read'] },
     { id: 'throughput', title: 'Throughput' },
     { id: 'rules', title: 'Stream Rules' },
     ...(isPipelineColumnPermitted ? [{ id: 'pipelines', title: 'Pipelines' }] : []),
-    { id: 'outputs', title: 'Outputs' },
-    { id: 'archiving', title: 'Archiving' },
-    ...(extensionAttributes?.attributes || []),
     { id: 'destination_filters', title: 'Filter Rules' },
-    { id: METRIC_COLUMN_IDS.messageCount, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.messageCount] },
-    { id: METRIC_COLUMN_IDS.avgProcessingTime, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.avgProcessingTime] },
-    { id: METRIC_COLUMN_IDS.maxProcessingTime, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.maxProcessingTime] },
     { id: METRIC_COLUMN_IDS.associatedInputs, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.associatedInputs] },
     ...(isPipelineColumnPermitted
       ? [{ id: METRIC_COLUMN_IDS.routingPipelines, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.routingPipelines] }]
       : []),
+    { id: 'outputs', title: 'Outputs' },
+    ...(extensionAttributes?.attributes || []),
+    { id: 'archiving', title: 'Archiving' },
+    { id: METRIC_COLUMN_IDS.messageCount, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.messageCount] },
+    { id: METRIC_COLUMN_IDS.avgProcessingTime, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.avgProcessingTime] },
+    { id: METRIC_COLUMN_IDS.maxProcessingTime, title: METRIC_COLUMN_TITLES[METRIC_COLUMN_IDS.maxProcessingTime] },
   ];
 
   return {
-    defaultLayout,
+    defaultVariantLayout,
+    routingVariantLayout,
+    performanceVariantLayout,
     additionalAttributes,
   };
 };

graylog2-web-interface/src/components/streams/StreamsOverview/StreamViewButtons.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 * as React from 'react';
+import { useCallback } from 'react';
+import styled, { css } from 'styled-components';
+
+import SegmentedControl from 'components/bootstrap/SegmentedControl';
+import useLayoutVariant from 'components/common/PaginatedEntityTable/hooks/useLayoutVariant';
+
+import { STREAM_VIEW_VARIANTS } from './Constants';
+
+const Container = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacings.sm};
+  `,
+);
+
+const Label = styled.span(
+  ({ theme }) => css`
+    color: ${theme.colors.text.secondary};
+    white-space: nowrap;
+  `,
+);
+
+const NarrowSegmentedControl = styled(SegmentedControl)`
+  width: fit-content;
+`;
+
+const SEGMENTS = [
+  { label: 'Default', value: STREAM_VIEW_VARIANTS.default },
+  { label: 'Routing', value: STREAM_VIEW_VARIANTS.routing },
+  { label: 'Performance', value: STREAM_VIEW_VARIANTS.performance },
+];
+
+type VariantValue = (typeof STREAM_VIEW_VARIANTS)[keyof typeof STREAM_VIEW_VARIANTS];
+
+const StreamViewButtons = () => {
+  const { activeLayoutVariant, selectLayoutVariant } = useLayoutVariant();
+
+  const onChange = useCallback(
+    (value: VariantValue) => {
+      if (value === STREAM_VIEW_VARIANTS.default) {
+        if (activeLayoutVariant) selectLayoutVariant(activeLayoutVariant);
+      } else {
+        selectLayoutVariant(value);
+      }
+    },
+    [activeLayoutVariant, selectLayoutVariant],
+  );
+
+  return (
+    <Container>
+      <Label>View:</Label>
+      <NarrowSegmentedControl<VariantValue>
+        data={SEGMENTS}
+        value={activeLayoutVariant as VariantValue}
+        onChange={onChange}
+      />
+    </Container>
+  );
+};
+
+export default StreamViewButtons;

graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.test.tsx

@@ -294,17 +294,28 @@ describe('StreamsOverview', () => {
     expect(screen.queryByText(/1 connected output\./i)).not.toBeInTheDocument();
   });
 
-  it('should render stream overview table elements from plugins', async () => {
+  it('should only show grouped plugin table elements in their matching view', async () => {
     const plugin = new PluginManifest(
       {},
       {
         'components.streams.overview.tableElements': [
           {
-            attributeName: 'data_lake',
-            attributes: [{ id: 'data_lake', title: 'Data Lake' }],
+            attributeName: 'my_plugin_column',
+            group: 'routing',
+            attributes: [{ id: 'my_plugin_column', title: 'My Plugin Column' }],
             columnRenderers: {
-              data_lake: {
-                renderCell: () => 'Preview logs',
+              my_plugin_column: {
+                renderCell: () => 'plugin cell',
+                staticWidth: 'matchHeader',
+              },
+            },
+          },
+          {
+            attributeName: 'my_ungrouped_column',
+            attributes: [{ id: 'my_ungrouped_column', title: 'My Ungrouped Column' }],
+            columnRenderers: {
+              my_ungrouped_column: {
+                renderCell: () => 'ungrouped cell',
                 staticWidth: 'matchHeader',
               },
             },
@@ -327,8 +338,15 @@ describe('StreamsOverview', () => {
     try {
       renderSut();
 
-      await screen.findByText('Data Lake');
-      await screen.findByText('Preview logs');
+      await screen.findByText('Title');
+      expect(screen.queryByText('My Plugin Column')).not.toBeInTheDocument();
+      expect(screen.queryByText('My Ungrouped Column')).not.toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('radio', { name: 'Routing' }));
+
+      await screen.findByText('My Plugin Column');
+      expect(screen.getByText('plugin cell')).toBeInTheDocument();
+      expect(screen.queryByText('My Ungrouped Column')).not.toBeInTheDocument();
     } finally {
       PluginStore.unregister(plugin);
     }

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

@@ -20,11 +20,12 @@ import QueryHelper from 'components/common/QueryHelper';
 import type { Stream } from 'logic/streams/types';
 import type { IndexSet } from 'stores/indices/IndexSetsStore';
 import { keyFn, fetchStreams } from 'components/streams/hooks/useStreams';
-import getStreamTableElements from 'components/streams/StreamsOverview/Constants';
+import getStreamTableElements, { STREAM_VIEW_VARIANTS } from 'components/streams/StreamsOverview/Constants';
 import FilterValueRenderers from 'components/streams/StreamsOverview/FilterValueRenderers';
 import useTableElements from 'components/streams/StreamsOverview/hooks/useTableComponents';
 import PaginatedEntityTable from 'components/common/PaginatedEntityTable';
 import useUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUserLayoutPreferences';
+import useLayoutVariant from 'components/common/PaginatedEntityTable/hooks/useLayoutVariant';
 import { ATTRIBUTE_STATUS } from 'components/common/EntityDataTable/Constants';
 import { CurrentUserStore } from 'stores/users/CurrentUserStore';
 import type { SearchParams } from 'stores/PaginationTypes';
@@ -33,6 +34,7 @@ import type { PaginatedResponse } from 'components/common/PaginatedEntityTable/u
 import CustomColumnRenderers from './ColumnRenderers';
 import usePipelineColumn from './hooks/usePipelineColumn';
 import useStreamsOverviewExtensions from './hooks/useStreamsOverviewExtensions';
+import StreamViewButtons from './StreamViewButtons';
 import { StreamMetricsProvider } from './StreamMetricsContext';
 import { backendFieldsForVisibleColumns } from './metricColumns';
 
@@ -48,17 +50,24 @@ const StreamsOverview = ({ indexSets }: Props) => {
   const {
     columnRenderers: extensionColumnRenderers,
     attributes: extensionAttributes,
+    columnGroups: extensionColumnGroups,
     expandedSections: pluggableExpandedSections,
     metricFields: extensionMetricFields,
   } = useStreamsOverviewExtensions();
 
   const { entityActions, expandedSections, bulkActions } = useTableElements({ indexSets, pluggableExpandedSections });
 
   const columnRenderers = CustomColumnRenderers(indexSets, isPipelineColumnPermitted, extensionColumnRenderers);
-  const { additionalAttributes, defaultLayout } = getStreamTableElements(
-    isPipelineColumnPermitted,
-    extensionAttributes,
-  );
+  const { defaultVariantLayout, routingVariantLayout, performanceVariantLayout, additionalAttributes } =
+    getStreamTableElements(isPipelineColumnPermitted, extensionAttributes, extensionColumnGroups);
+
+  const { activeLayoutVariant } = useLayoutVariant();
+
+  const variantLayouts: Record<string, typeof defaultVariantLayout> = {
+    [STREAM_VIEW_VARIANTS.routing]: routingVariantLayout,
+    [STREAM_VIEW_VARIANTS.performance]: performanceVariantLayout,
+  };
+  const activeLayout = variantLayouts[activeLayoutVariant] ?? defaultVariantLayout;
 
   const fetchEntities = (options: SearchParams): Promise<PaginatedResponse<Stream>> => {
     CurrentUserStore.update(CurrentUserStore.getInitialState().currentUser.username);
@@ -75,12 +84,12 @@ const StreamsOverview = ({ indexSets }: Props) => {
     );
   };
 
-  const { data: layoutPreferences } = useUserLayoutPreferences(defaultLayout.entityTableId);
+  const { data: layoutPreferences } = useUserLayoutPreferences(activeLayout.entityTableId, activeLayoutVariant);
   const userPrefs = layoutPreferences?.attributes ?? {};
   const userSelection = Object.entries(userPrefs)
     .filter(([, pref]) => pref.status === ATTRIBUTE_STATUS.show)
     .map(([attributeId]) => attributeId);
-  const visibleColumns = userSelection.length > 0 ? userSelection : defaultLayout.defaultDisplayedAttributes;
+  const visibleColumns = userSelection.length > 0 ? userSelection : activeLayout.defaultDisplayedAttributes;
   const requestedFields = backendFieldsForVisibleColumns(visibleColumns, extensionMetricFields);
 
   return (
@@ -90,7 +99,7 @@ const StreamsOverview = ({ indexSets }: Props) => {
         additionalAttributes={additionalAttributes}
         queryHelpComponent={<QueryHelper entityName="stream" />}
         entityActions={entityActions}
-        tableLayout={defaultLayout}
+        tableLayout={activeLayout}
         fetchEntities={fetchEntities}
         onDataLoaded={onDataLoaded}
         keyFn={keyFn}
@@ -99,6 +108,7 @@ const StreamsOverview = ({ indexSets }: Props) => {
         entityAttributesAreCamelCase={false}
         filterValueRenderers={FilterValueRenderers}
         columnRenderers={columnRenderers}
+        topSection={StreamViewButtons}
       />
     </StreamMetricsProvider>
   );

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

@@ -17,7 +17,7 @@
 import * as React from 'react';
 
 import type { Stream } from 'logic/streams/types';
-import { CountBadge, Spinner } from 'components/common';
+import { Spinner } from 'components/common';
 import { useStreamMetricsFor } from 'components/streams/StreamsOverview/StreamMetricsContext';
 import { formatCount } from 'components/inputs/helpers/InputThroughputUtils';
 
@@ -37,10 +37,7 @@ const MessageCountCell = ({ stream }: Props) => {
   }
 
   return (
-    <CountBadge
-      count={formatCount(metrics.message_count)}
-      title={`${metrics.message_count} messages in the last 24 hours`}
-    />
+    <span title={`${metrics.message_count} messages in the last 24 hours`}>{formatCount(metrics.message_count)}</span>
   );
 };