Skip to content

Commit

Permalink
Bug fixes in Dryrun page (#1380)
Browse files Browse the repository at this point in the history 
* fix bugs in dryrun page

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

* Remove consumer group header

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

* remove reset ffset header

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

---------

Signed-off-by: hemahg <[email protected]>
  • Loading branch information
@hemahg
hemahg authored Jan 23, 2025
1 parent 85cee62 commit 79eba99
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 70 deletions.
154 changes: 86 additions & 68 deletions ...p/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/Dryrun.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
StackItem,
TextContent,
Text,
CardBody,
} from "@/libs/patternfly/react-core";
import { useTranslations } from "next-intl";
import { DownloadIcon } from "@/libs/patternfly/react-icons";
Expand Down Expand Up @@ -100,7 +101,7 @@ export function Dryrun({
</FlexItem>
</Flex>
<TextContent>
<Text>{t.rich("consumer_name", { consumerGroupName })}</Text>
<Text>{t.rich("consumer_name", { groupId: consumerGroupName })}</Text>
</TextContent>
</PanelHeader>
<Divider />
Expand All @@ -114,79 +115,96 @@ export function Dryrun({
</StackItem>
<StackItem>
<Sidebar>
<SidebarPanel>
<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>
{Object.keys(groupedTopics).length >= 3 && (
<SidebarPanel>
<JumpLinks
isVertical
label={t.rich("jump_to_topic")}
offset={10}
>
{Object.keys(groupedTopics).map(
(topicName) =>
topicName && (
<JumpLinksItem
key={topicName}
href={`#${topicName}`}
>
{topicName}
</JumpLinksItem>
),
)}
</JumpLinks>
</SidebarPanel>
)}
<SidebarContent
style={{ overflowY: "auto", maxHeight: "500px" }}
>
<Flex
direction={{ default: "column" }}
spaceItems={{ default: "spaceItemsXl" }}
>
{Object.entries(groupedTopics).map(
([topicName, offsets]) => (
<StackItem key={topicName}>
<FlexItem key={topicName}>
<Card component="div">
<DescriptionList id={`topic-${topicName}`}>
<DescriptionListGroup>
<DescriptionListTerm>
{t("topic")}
</DescriptionListTerm>
<DescriptionListDescription>
{topicName}
</DescriptionListDescription>
</DescriptionListGroup>
<Flex>
<FlexItem>
<DescriptionListGroup>
<DescriptionListTerm>
{t("partition")}
</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
{offsets
.sort(
(a, b) => a.partition - b.partition,
)
.map(({ partition }) => (
<ListItem key={partition}>
{partition}
</ListItem>
))}
</List>
</DescriptionListDescription>
</DescriptionListGroup>
</FlexItem>
<FlexItem>
<DescriptionListGroup>
<DescriptionListTerm>
{t("new_offset")}
</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
{offsets.map(
({ partition, offset }) => (
<ListItem key={partition}>
{offset}
</ListItem>
),
)}
</List>
</DescriptionListDescription>
</DescriptionListGroup>
</FlexItem>
</Flex>
</DescriptionList>
<CardBody>
<DescriptionList id={`${topicName}`}>
<DescriptionListGroup>
<DescriptionListTerm>
{t("topic")}
</DescriptionListTerm>
<DescriptionListDescription>
{topicName}
</DescriptionListDescription>
</DescriptionListGroup>
<Flex>
<FlexItem>
<DescriptionListGroup>
<DescriptionListTerm>
{t("partition")}
</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
{offsets
.sort(
(a, b) =>
a.partition - b.partition,
)
.map(({ partition }) => (
<ListItem key={partition}>
{partition}
</ListItem>
))}
</List>
</DescriptionListDescription>
</DescriptionListGroup>
</FlexItem>
<FlexItem>
<DescriptionListGroup>
<DescriptionListTerm>
{t("new_offset")}
</DescriptionListTerm>
<DescriptionListDescription>
<List isPlain>
{offsets.map(
({ partition, offset }) => (
<ListItem key={partition}>
{offset}
</ListItem>
),
)}
</List>
</DescriptionListDescription>
</DescriptionListGroup>
</FlexItem>
</Flex>
</DescriptionList>
</CardBody>
</Card>
</StackItem>
</FlexItem>
),
)}
</Stack>
</Flex>
</SidebarContent>
</Sidebar>
</StackItem>
Expand Down
2 changes: 1 addition & 1 deletion ...cale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export function ResetOffset({
<Text component={TextVariants.h1}>{t("reset_consumer_offset")}</Text>
</TextContent>
<TextContent>
<Text>{t.rich("consumer_name", { consumerGroupName })}</Text>
<Text>{t.rich("consumer_name", { groupId: consumerGroupName })}</Text>
</TextContent>
</PanelHeader>
<Divider />
Expand Down
2 changes: 1 addition & 1 deletion ui/messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,7 +409,7 @@
"shutdown_active_members": "Shut down active members before proceeding",
"learn_to_shutdown_members": "Learn how to shut down members",
"reset_consumer_offset": "Reset consumer offsets",
"consumer_name": "Consumer group: <b>{consumerGroupName}</b>",
"consumer_name": "Consumer group: <b>{groupId}</b>",
"target": "Target",
"apply_action_on": "Apply action on",
"all_consumer_topics": "All consumer topics",
Expand Down

0 comments on commit 79eba99

Please sign in to comment.