Add dryrun page

Signed-off-by: hemahg <[email protected]>

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx

@@ -68,7 +68,7 @@ export function ResetConsumerOffset({
   };
 
   const openDryrun = () => {
-    router.push(`${baseurl}/reset-offset/dry-run`)
+    router.push(`${baseurl}/reset-offset/dryrun`)
   }
 
   const closeResetOffset = () => {

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/TypeaheadSelect.stories.tsx

@@ -9,6 +9,6 @@ type Story = StoryObj<typeof TypeaheadSelect>;
 
 export const Default: Story = {
   args: {
-    selectItems: ["console_datagen_002-a", "console_datagen_002-b", "console_datagen_002-c", "console_datagen_002-d"],
+    selectItems: ["console_datagen_002-a", "console_datagen_002-b", "console_datagen_002-c", "console_datagen_002-d", "console_datagen_002-a", "console_datagen_002-a", "console_datagen_002-b", "console_datagen_002-c", "console_datagen_002-d", "console_datagen_002-c"],
   },
 };

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/TypeaheadSelect.tsx

@@ -32,6 +32,8 @@ export function TypeaheadSelect({
 
   const NO_RESULTS = 'no results';
 
+  const uniqueItems = Array.from(new Set(selectItems));
+
   const onToggleClick = () => {
     setIsOpen(!isOpen);
     if (!isOpen) {
@@ -48,10 +50,10 @@ export function TypeaheadSelect({
   };
 
   const filteredItems = filterValue
-    ? selectItems.filter((item) =>
+    ? uniqueItems.filter((item) =>
       item.toString().toLowerCase().includes(filterValue.toLowerCase())
     )
-    : selectItems;
+    : uniqueItems;
 
   const options = filteredItems.length
     ? filteredItems.map((item) => (

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/dryrun/Dryrun.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Dryrun } from "./Dryrun";
+
+export default {
+  component: Dryrun,
+  args: {}
+} as Meta<typeof Dryrun>;
+
+type Story = StoryObj<typeof Dryrun>;
+
+const sampleTopics = [
+  { topicName: "Topic A", partition: 0, offset: 1234 },
+  { topicName: "Topic A", partition: 1, offset: 5678 },
+  { topicName: "Topic B", partition: 0, offset: 91011 },
+  { topicName: "Topic C", partition: 2, offset: 121314 },
+  { topicName: "Topic C", partition: 1, offset: 221222 },
+  { topicName: "Topic B", partition: 1, offset: 2341233 },
+  { topicName: "Topic B", partition: 1, offset: 675 },
+  { topicName: "Topic A", partition: 2, offset: 765 },
+];
+
+
+
+export const Default: Story = {
+  args: {
+    consumerGroupName: "console_datagen_002-a",
+    topics: sampleTopics
+
+  },
+};

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/dry-run/Dryrun.tsx → ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/dryrun/Dryrun.tsx

@@ -1,39 +1,56 @@
 "use client";
 
-import { Alert, Button, Card, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Divider, Flex, FlexItem, JumpLinks, JumpLinksItem, List, ListItem, Panel, PanelHeader, PanelMain, PanelMainBody, Sidebar, SidebarContent, SidebarPanel, Stack, StackItem } from "@/libs/patternfly/react-core";
+import {
+  Alert,
+  Button,
+  Card,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Divider,
+  Flex,
+  FlexItem,
+  JumpLinks,
+  JumpLinksItem,
+  List,
+  ListItem,
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+  Stack,
+  StackItem
+} from "@/libs/patternfly/react-core";
 import { TextContent, Text } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { DownloadIcon } from "@/libs/patternfly/react-icons";
 import { useRouter } from "@/navigation";
 
-type PartitionOffset = {
-  partition: string;
-  offset: number;
-};
-
-type TopicDetails = {
+export type Offset = {
   topicName: string;
-  topicId: string;
-  partitions: PartitionOffset[];
+  partition: number;
+  offset: number;
 };
 
-
 export function Dryrun({
   consumerGroupName,
   topics,
   baseurl
 }: {
   consumerGroupName: string;
-  topics: TopicDetails[];
+  topics: Offset[];
   baseurl: string;
 }) {
   const t = useTranslations("ConsumerGroupsTable");
-
   const router = useRouter();
 
   const onClickCloseDryrun = () => {
-    router.push(`${baseurl}`)
-  }
+    router.push(`${baseurl}`);
+  };
 
   const onClickDownload = () => {
     const data = {
@@ -52,6 +69,15 @@ export function Dryrun({
     URL.revokeObjectURL(url);
   };
 
+  // Group offsets by topic
+  const groupedTopics = topics.reduce<Record<string, Offset[]>>((acc, offset) => {
+    if (!acc[offset.topicName]) {
+      acc[offset.topicName] = [];
+    }
+    acc[offset.topicName].push(offset);
+    return acc;
+  }, {});
+
   return (
     <Panel>
       <PanelHeader>
@@ -63,8 +89,7 @@ export function Dryrun({
           </FlexItem>
           <FlexItem>
             <Button variant="link" onClick={onClickDownload}>
-              {<>{t("download_dryrun_result")}{" "}< DownloadIcon />
-              </>}
+              {<>{t("download_dryrun_result")} <DownloadIcon /></>}
             </Button>
           </FlexItem>
         </Flex>
@@ -84,36 +109,32 @@ export function Dryrun({
             <StackItem>
               <Sidebar>
                 <SidebarPanel>
-                  <JumpLinks isVertical
-                    label={t.rich("jump_to_topic")}
-                  >
-                    {topics.map((topic) => (
-                      <JumpLinksItem key={topic.topicId}
-                        href={`#topic-${topic.topicId}`}
-                      >
-                        {topic.topicName}
+                  <JumpLinks isVertical label={t.rich("jump_to_topic")}>
+                    {Object.keys(groupedTopics).map((topicName) => (
+                      <JumpLinksItem key={topicName} href={`#topic-${topicName}`}>
+                        {topicName}
                       </JumpLinksItem>
                     ))}
                   </JumpLinks>
                 </SidebarPanel>
                 <SidebarContent>
                   <Stack hasGutter>
-                    {topics.map((topic) => (
-                      <StackItem key={topic.topicId}>
+                    {Object.entries(groupedTopics).map(([topicName, offsets]) => (
+                      <StackItem key={topicName}>
                         <Card component="div">
-                          <DescriptionList id={`topic-${topic.topicId}`} >
+                          <DescriptionList id={`topic-${topicName}`}>
                             <DescriptionListGroup>
                               <DescriptionListTerm>{t("topic")}</DescriptionListTerm>
-                              <DescriptionListDescription>{topic.topicName}</DescriptionListDescription>
+                              <DescriptionListDescription>{topicName}</DescriptionListDescription>
                             </DescriptionListGroup>
                             <Flex>
                               <FlexItem>
                                 <DescriptionListGroup>
                                   <DescriptionListTerm>{t("partition")}</DescriptionListTerm>
                                   <DescriptionListDescription>
                                     <List isPlain>
-                                      {topic.partitions.map(partition => (
-                                        <ListItem key={partition.partition}>{partition.partition}</ListItem>
+                                      {offsets.map(({ partition }) => (
+                                        <ListItem key={partition}>{partition}</ListItem>
                                       ))}
                                     </List>
                                   </DescriptionListDescription>
@@ -124,8 +145,8 @@ export function Dryrun({
                                   <DescriptionListTerm>{t("new_offset")}</DescriptionListTerm>
                                   <DescriptionListDescription>
                                     <List isPlain>
-                                      {topic.partitions.map(partition => (
-                                        <ListItem key={partition.partition}>{partition.offset}</ListItem>
+                                      {offsets.map(({ partition, offset }) => (
+                                        <ListItem key={partition}>{offset}</ListItem>
                                       ))}
                                     </List>
                                   </DescriptionListDescription>
@@ -148,7 +169,7 @@ export function Dryrun({
             </StackItem>
           </Stack>
         </PanelMainBody>
-      </PanelMain >
-    </Panel >
-  )
+      </PanelMain>
+    </Panel>
+  );
 }

ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/dry-run/page.tsx → ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/dryrun/page.tsx

@@ -5,7 +5,7 @@ import { KafkaParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/kafka.p
 import { PageSection } from "@/libs/patternfly/react-core";
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
-import { Dryrun } from "./Dryrun";
+import { Dryrun, Offset } from "./Dryrun";
 
 export default function DryRunPage({
   params: { kafkaId, groupId },
@@ -33,20 +33,8 @@ async function ConnectedDryrun({
     notFound();
   }
 
-  const topics = consumerGroup.attributes.members
-    ?.flatMap((m) =>
-      m.assignments?.map((topic) => topic.topicName)
-    )
-    .filter(
-      (topicName): topicName is string => topicName !== undefined
-    ) || []
+  const offsets: Offset[] = consumerGroup.attributes.offsets || [];
 
-  const partitions = consumerGroup.attributes.members
-    ?.flatMap((m) =>
-      m.assignments?.map((topic) => topic.partition)
-    ).filter(
-      (partition): partition is number => partition !== undefined
-    ) || []
   return <Dryrun
-    consumerGroupName={consumerGroup.id} topics={[]} baseurl={`/kafka/${kafkaId}/consumer-groups/${consumerGroup.id}/reset-offset`} />;
+    consumerGroupName={consumerGroup.id} topics={offsets} baseurl={`/kafka/${kafkaId}/consumer-groups/${consumerGroup.id}/reset-offset`} />;
 }