Merge pull request #2466 from redpanda-data/UX-407-show-unconsumed-partitions-in-consumer-groups

jvorcak · web-flow · commit c21853db93c5 · 2026-05-26T12:39:03.000+02:00
Show unconsumed partitions in consumer groups
diff --git a/backend/pkg/console/consumer_group_offsets.go b/backend/pkg/console/consumer_group_offsets.go
@@ -35,7 +35,7 @@ type PartitionOffsets struct {
 	// Error will be set when the high water mark could not be fetched
 	Error         string `json:"error,omitempty"`
 	PartitionID   int32  `json:"partitionId"`
-	GroupOffset   int64  `json:"groupOffset"`
+	GroupOffset   *int64 `json:"groupOffset"` // nil when no committed offset exists for this partition
 	HighWaterMark int64  `json:"highWaterMark"`
 	Lag           int64  `json:"lag"`
 }
@@ -183,6 +183,10 @@ func (s *Service) getConsumerGroupOffsets(ctx context.Context, adminCl *kadm.Cli
 
 				groupOffset, hasGroupOffset := partitionOffsets[pID]
 				if !hasGroupOffset {
+					t.PartitionOffsets = append(t.PartitionOffsets, PartitionOffsets{
+						PartitionID:   pID,
+						HighWaterMark: watermark.HighWaterMark,
+					})
 					continue
 				}
 				t.PartitionsWithOffset++
@@ -193,7 +197,7 @@ func (s *Service) getConsumerGroupOffsets(ctx context.Context, adminCl *kadm.Cli
 				t.SummedLag += lag
 				t.PartitionOffsets = append(t.PartitionOffsets, PartitionOffsets{
 					PartitionID:   pID,
-					GroupOffset:   groupOffset,
+					GroupOffset:   &groupOffset,
 					HighWaterMark: watermark.HighWaterMark,
 					Lag:           lag,
 				})
diff --git a/backend/pkg/console/consumer_group_offsets_test.go b/backend/pkg/console/consumer_group_offsets_test.go
@@ -194,7 +194,7 @@ func TestGetConsumerGroupOffsets_NonExistentTopicInMetadata(t *testing.T) {
 				PartitionOffsets: []PartitionOffsets{
 					{
 						PartitionID:   0,
-						GroupOffset:   1,
+						GroupOffset:   new(int64(1)),
 						HighWaterMark: 1,
 						Lag:           0,
 					},
diff --git a/frontend/src/components/pages/consumers/group-details.test.tsx b/frontend/src/components/pages/consumers/group-details.test.tsx
@@ -0,0 +1,140 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { screen, waitFor } from 'test-utils';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+const { refreshConsumerGroupMock, refreshConsumerGroupAclsMock } = vi.hoisted(() => ({
+  refreshConsumerGroupMock: vi.fn(),
+  refreshConsumerGroupAclsMock: vi.fn(),
+}));
+
+vi.mock('state/ui-state', () => ({
+  setPageHeader: vi.fn(),
+  uiState: {
+    pageTitle: '',
+    pageBreadcrumbs: [],
+  },
+}));
+
+vi.mock('state/app-global', () => ({
+  appGlobal: {
+    onRefresh: null,
+    historyPush: vi.fn(),
+  },
+}));
+
+vi.mock('state/backend-api', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('state/backend-api')>();
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      refreshConsumerGroup: refreshConsumerGroupMock,
+      refreshConsumerGroupAcls: refreshConsumerGroupAclsMock,
+      refreshPartitionsForTopic: vi.fn(),
+    },
+  };
+});
+
+vi.mock('config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('config')>();
+  return {
+    ...actual,
+    config: { jwt: '' },
+    isFeatureFlagEnabled: vi.fn(() => false),
+  };
+});
+
+import { useApiStore } from 'state/backend-api';
+import type { GroupDescription } from 'state/rest-interfaces';
+import { useSupportedFeaturesStore } from 'state/supported-features';
+import { renderWithFileRoutes } from 'test-utils';
+
+import GroupDetails from './group-details';
+
+const TOPIC = 'test-topic';
+const GROUP_ID = 'test-group';
+
+// Backend now returns all partitions in partitionOffsets.
+// Partition 0: committed offset 5. Partitions 1 and 2: no committed offset (groupOffset: null).
+const mockGroup: GroupDescription = {
+  groupId: GROUP_ID,
+  state: 'Empty',
+  protocol: '',
+  protocolType: 'consumer',
+  members: [],
+  coordinatorId: 0,
+  topicOffsets: [
+    {
+      topic: TOPIC,
+      summedLag: 1,
+      partitionCount: 3,
+      partitionsWithOffset: 1,
+      partitionOffsets: [
+        { partitionId: 0, groupOffset: 5, error: undefined, highWaterMark: 6, lag: 1 },
+        { partitionId: 1, groupOffset: null, error: undefined, highWaterMark: 5, lag: 0 },
+        { partitionId: 2, groupOffset: null, error: undefined, highWaterMark: 3, lag: 0 },
+      ],
+    },
+  ],
+  allowedActions: null,
+  lagSum: 1,
+  isInUse: false,
+  noEditPerms: false,
+  noDeletePerms: false,
+};
+
+const renderGroupDetails = () =>
+  renderWithFileRoutes(
+    <GroupDetails groupId={GROUP_ID} matchedPath={`/groups/${GROUP_ID}`} onSearchChange={() => {}} search={{}} />
+  );
+
+describe('GroupDetails - unconsumed partitions', () => {
+  beforeEach(() => {
+    useApiStore.setState({
+      consumerGroups: new Map([[GROUP_ID, mockGroup]]),
+      consumerGroupAcls: new Map(),
+    });
+    useSupportedFeaturesStore.setState({ patchGroup: true, deleteGroup: true, deleteGroupOffsets: true });
+  });
+
+  afterEach(() => {
+    useApiStore.setState({ consumerGroups: new Map(), consumerGroupAcls: new Map() });
+  });
+
+  test('edit button is enabled for consumed partition and disabled for unconsumed partitions', async () => {
+    renderGroupDetails();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('partition-edit-0')).toBeInTheDocument();
+    });
+
+    // Partition 0 has a committed offset → edit button renders as <button>
+    expect(screen.getByTestId('partition-edit-0').tagName).toBe('BUTTON');
+
+    // Partitions 1 and 2 have no committed offset → edit button renders as disabled <span>
+    expect(screen.getByTestId('partition-edit-1').tagName).toBe('SPAN');
+    expect(screen.getByTestId('partition-edit-2').tagName).toBe('SPAN');
+  });
+
+  test('unconsumed partitions render "—" for group offset and lag', async () => {
+    renderGroupDetails();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('partition-edit-1')).toBeInTheDocument();
+    });
+
+    // Each unconsumed partition (1 and 2) shows "—" for both group offset and lag = 4 dashes minimum
+    const dashes = screen.getAllByText('—');
+    expect(dashes.length).toBeGreaterThanOrEqual(4);
+  });
+});
diff --git a/frontend/src/components/pages/consumers/group-details.tsx b/frontend/src/components/pages/consumers/group-details.tsx
@@ -330,18 +330,18 @@ const GroupByTopics = (groupProps: {
       const assignedMember = allAssignments.find(
         (e) => e.topicName === topicLag.topic && e.partitions.includes(partLag.partitionId)
       );
-
+      const isUnconsumed = partLag.groupOffset === null;
       return {
         topicName: topicLag.topic,
         partitionId: partLag.partitionId,
         groupOffset: partLag.groupOffset,
-        highWaterMark: partLag.highWaterMark,
-        lag: partLag.lag,
-
+        highWaterMark: partLag.highWaterMark as number | null,
+        lag: isUnconsumed ? null : (partLag.lag as number | null),
         assignedMember: assignedMember?.member,
         id: assignedMember?.member.id,
         clientId: assignedMember?.member.clientId,
         host: assignedMember?.member.clientHost,
+        isUnconsumed,
       };
     })
   );
@@ -356,12 +356,16 @@ const GroupByTopics = (groupProps: {
     const totalLagAll = g.partitions.sum((c) => c.lag ?? 0);
     const partitionsAssigned = g.partitions.filter((c) => c.assignedMember).length;
 
-    const partitions = groupProps.onlyShowPartitionsWithLag ? g.partitions.filter((e) => e.lag !== 0) : g.partitions;
+    const partitions = groupProps.onlyShowPartitionsWithLag
+      ? g.partitions.filter((e) => e.isUnconsumed || (e.lag !== null && e.lag !== 0))
+      : g.partitions;
 
     if (partitions.length === 0) {
       return null;
     }
 
+    const consumedPartitions = g.partitions.filter((p) => !p.isUnconsumed);
+
     return {
       heading: (
         <Flex flexDirection="column" gap={4}>
@@ -373,18 +377,22 @@ const GroupByTopics = (groupProps: {
 
             <Flex gap={2}>
               <IconButton
-                disabledReason={cannotEditGroupReason(groupProps.group, featurePatchGroup)}
+                disabledReason={cannotEditGroupReason(groupProps.group, featurePatchGroup, consumedPartitions)}
                 onClick={(e) => {
-                  groupProps.onEditOffsets(g.partitions);
+                  groupProps.onEditOffsets(consumedPartitions);
                   e.stopPropagation();
                 }}
               >
                 <EditIcon />
               </IconButton>
               <IconButton
-                disabledReason={cannotDeleteGroupOffsetsReason(groupProps.group, featureDeleteGroupOffsets)}
+                disabledReason={cannotDeleteGroupOffsetsReason(
+                  groupProps.group,
+                  featureDeleteGroupOffsets,
+                  consumedPartitions
+                )}
                 onClick={(e) => {
-                  groupProps.onDeleteOffsets(g.partitions, 'topic');
+                  groupProps.onDeleteOffsets(consumedPartitions, 'topic');
                   e.stopPropagation();
                 }}
               >
@@ -409,13 +417,14 @@ const GroupByTopics = (groupProps: {
         <DataTable<{
           topicName: string;
           partitionId: number;
-          groupOffset: number;
-          highWaterMark: number;
-          lag: number;
+          groupOffset: number | null;
+          highWaterMark: number | null;
+          lag: number | null;
           assignedMember: GroupMemberDescription | undefined;
           id: string | undefined;
           clientId: string | undefined;
           host: string | undefined;
+          isUnconsumed: boolean;
         }>
           columns={[
             {
@@ -458,19 +467,22 @@ const GroupByTopics = (groupProps: {
               size: 120,
               header: 'Log End Offset',
               accessorKey: 'highWaterMark',
-              cell: ({ row: { original } }) => numberToThousandsString(original.highWaterMark),
+              cell: ({ row: { original } }) =>
+                original.highWaterMark !== null ? numberToThousandsString(original.highWaterMark) : '—',
             },
             {
               size: 120,
               header: 'Group Offset',
               accessorKey: 'groupOffset',
-              cell: ({ row: { original } }) => numberToThousandsString(original.groupOffset),
+              cell: ({ row: { original } }) =>
+                original.groupOffset !== null ? numberToThousandsString(original.groupOffset) : '—',
             },
             {
               size: 80,
               header: 'Lag',
               accessorKey: 'lag',
-              cell: ({ row: { original } }) => ShortNum({ value: original.lag, tooltip: true }),
+              cell: ({ row: { original } }) =>
+                original.lag !== null ? ShortNum({ value: original.lag, tooltip: true }) : '—',
             },
             {
               size: 1,
@@ -479,13 +491,23 @@ const GroupByTopics = (groupProps: {
               cell: ({ row: { original } }) => (
                 <Flex gap={1} pr={2}>
                   <IconButton
-                    disabledReason={cannotEditGroupReason(groupProps.group, featurePatchGroup)}
+                    data-testid={`partition-edit-${original.partitionId}`}
+                    disabledReason={cannotEditGroupReason(
+                      groupProps.group,
+                      featurePatchGroup,
+                      original.isUnconsumed ? [] : undefined
+                    )}
                     onClick={() => groupProps.onEditOffsets([original])}
                   >
                     <EditIcon />
                   </IconButton>
                   <IconButton
-                    disabledReason={cannotDeleteGroupOffsetsReason(groupProps.group, featureDeleteGroupOffsets)}
+                    data-testid={`partition-delete-${original.partitionId}`}
+                    disabledReason={cannotDeleteGroupOffsetsReason(
+                      groupProps.group,
+                      featureDeleteGroupOffsets,
+                      original.isUnconsumed ? [] : undefined
+                    )}
                     onClick={() => groupProps.onDeleteOffsets([original], 'partition')}
                   >
                     <TrashIcon />
@@ -612,7 +634,14 @@ const ProtocolType = (p: { group: GroupDescription }) => {
   return <Statistic title="Protocol" value={protocol} />;
 };
 
-function cannotEditGroupReason(group: GroupDescription, featurePatchGroup: boolean): string | undefined {
+function cannotEditGroupReason(
+  group: GroupDescription,
+  featurePatchGroup: boolean,
+  consumedPartitions?: readonly unknown[]
+): string | undefined {
+  if (consumedPartitions !== undefined && consumedPartitions.length === 0) {
+    return 'No committed offsets';
+  }
   if (group.noEditPerms) {
     return "You don't have 'editConsumerGroup' permissions for this group";
   }
@@ -638,8 +667,12 @@ function cannotDeleteGroupReason(group: GroupDescription, featureDeleteGroup: bo
 
 function cannotDeleteGroupOffsetsReason(
   group: GroupDescription,
-  featureDeleteGroupOffsets: boolean
+  featureDeleteGroupOffsets: boolean,
+  consumedPartitions?: readonly unknown[]
 ): string | undefined {
+  if (consumedPartitions !== undefined && consumedPartitions.length === 0) {
+    return 'No committed offsets';
+  }
   if (group.noEditPerms) {
     return "You don't have 'deleteConsumerGroup' permissions for this group";
   }
diff --git a/frontend/src/components/pages/consumers/modals.tsx b/frontend/src/components/pages/consumers/modals.tsx
@@ -537,7 +537,7 @@ export class EditOffsetsModal extends Component<{
           const getOffset = (topicName: string, partitionId: number): number | undefined =>
             other.topicOffsets
               .first((t) => t.topic === topicName)
-              ?.partitionOffsets.first((p) => p.partitionId === partitionId)?.groupOffset;
+              ?.partitionOffsets.first((p) => p.partitionId === partitionId)?.groupOffset ?? undefined;
 
           const currentOffsets = this.props.offsets;
           const alreadyExists = (topicName: string, partitionId: number): boolean =>
@@ -553,11 +553,13 @@ export class EditOffsetsModal extends Component<{
           // Extend our offsets with any offsets that our group currently doesn't have
           if (this.state.otherGroupCopyMode === 'all') {
             const otherFlat = other.topicOffsets.flatMap((x) =>
-              x.partitionOffsets.flatMap((p) => ({
-                topicName: x.topic,
-                partitionId: p.partitionId,
-                offset: p.groupOffset,
-              }))
+              x.partitionOffsets
+                .filter((p) => p.groupOffset !== null)
+                .flatMap((p) => ({
+                  topicName: x.topic,
+                  partitionId: p.partitionId,
+                  offset: p.groupOffset as number,
+                }))
             );
 
             for (const o of otherFlat) {
diff --git a/frontend/src/state/rest-interfaces.ts b/frontend/src/state/rest-interfaces.ts
@@ -366,7 +366,7 @@ export type GroupTopicOffsets = {
 // PartitionOffset describes the kafka lag for a partition for a single consumer group
 export type GroupPartitionOffset = {
   partitionId: number;
-  groupOffset: number;
+  groupOffset: number | null; // null when no committed offset exists for this partition
 
   error: string | undefined; // Error will be set when the high water mark could not be fetched
   highWaterMark: number;
diff --git a/frontend/src/utils/tsx-utils.tsx b/frontend/src/utils/tsx-utils.tsx
diff --git a/frontend/tests/test-variant-console/consumers/consumer-group-unconsumed-partitions.spec.ts b/frontend/tests/test-variant-console/consumers/consumer-group-unconsumed-partitions.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -194,7 +194,7 @@ func TestGetConsumerGroupOffsets_NonExistentTopicInMetadata(t *testing.T) {`
`194`	`194`	`PartitionOffsets: []PartitionOffsets{`
`195`	`195`	`{`
`196`	`196`	`PartitionID: 0,`
`197`		`- GroupOffset: 1,`
	`197`	`+ GroupOffset: new(int64(1)),`
`198`	`198`	`HighWaterMark: 1,`
`199`	`199`	`Lag: 0,`
`200`	`200`	`},`