Skip to content

Commit

Permalink
consumer group reset offset
Browse files Browse the repository at this point in the history 
Signed-off-by: hemahg <[email protected]>
  • Loading branch information
@hemahg
hemahg committed Aug 20, 2024
1 parent bb418d2 commit 806aa96
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 96 deletions.
4 changes: 2 additions & 2 deletions ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConnectedConsumerGroupTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,11 +144,11 @@ export function ConnectedConsumerGroupsTable({
onResetOffset={(row) => {
startTransition(() => {
if (row.attributes.state === "STABLE") {
router.push(`${baseurl}/${row.id}/reset-offset`);
} else if (row.attributes.state === "EMPTY") {
setResetOffsetModalOpen(true)
setConsumerGroupMembers(row.attributes.members?.map((member) => member.memberId) || []);
router.push(`${baseurl}/${row.id}/reset-offset`);
} else if (row.attributes.state === "EMPTY") {
router.push(`${baseurl}/${row.id}/reset-offset`);
}
});
}}
Expand Down
1 change: 1 addition & 0 deletions ...cale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type Story = StoryObj<typeof ResetOffsetModal>;

export const Default: Story = {
args: {
isResetOffsetModalOpen: true,
members: ["console-datagen-consumer-0", "console-datagen-consumer-1"]
},
};
6 changes: 4 additions & 2 deletions ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export function ResetOffsetModal({
titleIconVariant="warning"
isOpen={isResetOffsetModalOpen}
variant={ModalVariant.medium}
description={t("consumer_group_must_be_empty_description")}
onClose={onClickClose}
actions={[
<Button key="close" variant="primary" onClick={onClickClose}>
Expand All @@ -39,7 +38,7 @@ export function ResetOffsetModal({
]}>
<Stack hasGutter>
<StackItem>
<Text>{t("member_list_to_shutdown")}</Text>
<Text>{t("member_shutdown_helper_text")}</Text>
</StackItem>
<StackItem>
<List>
Expand All @@ -48,6 +47,9 @@ export function ResetOffsetModal({
))}
</List>
</StackItem>
<StackItem>
<Text>{t("shutdown_active_members")}</Text>
</StackItem>
<StackItem>
<ExternalLink
testId={"learn_to_shutdown_members"}
Expand Down
178 changes: 88 additions & 90 deletions ...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,98 +62,96 @@ export function ResetConsumerOffset({
};

return (
<PageSection>
<Panel>
<PanelHeader>
<TextContent>
<Text component={TextVariants.h1}>{t("reset_consumer_offset")}</Text>
</TextContent>
<TextContent>
<Text>{t.rich("consumer_name", { consumerGroupName })}</Text>
</TextContent>
</PanelHeader>
<Divider />
<PanelMain>
<PanelMainBody>
<Form>
<FormSection title={t("target")}>
<FormGroup role="radiogroup" isInline fieldId="select-consumer" hasNoPaddingTop label={t("apply_action_on")}>
<Radio name={"consumer-topic-select"} id={"all-consumer-topic"} label={t("all_consumer_topics")}
isChecked={selectedConsumerTopic === "allTopics"}
onChange={() => onTopicSelect("allTopics")} />
<Radio name={"consumer-topic-select"} id={"selected-topic"} label={t("selected_topic")} isChecked={selectedConsumerTopic === "selectedTopic"}
onChange={() => onTopicSelect("selectedTopic")} />
</FormGroup>
{selectedConsumerTopic === "selectedTopic" && (
<TypeaheadSelect
value={selectedTopic}
selectItems={topics}
onChange={handleTopicChange} placeholder={"Select topic"} />
)}
<FormGroup label={t("partitions")} isInline>
<Radio name={"partition-select"} id={"all-partitions"} label={t("all_partitions")}
isChecked={selectedPartition === "allPartitions"}
onChange={() => onPartitionSelect("allPartitions")} />
<Radio name={"partition-select"} id={"selected_partition"} label={t("selected_partition")}
isChecked={selectedPartition === "selectedPartition"}
onChange={() => onPartitionSelect("selectedPartition")} />
</FormGroup>
{selectedConsumerTopic === "selectedTopic" && selectedPartition === "selectedPartition" && (
<TypeaheadSelect
value={selectPartition}
selectItems={partitions}
onChange={handlePartitionChange}
placeholder={"Select partition"}
<Panel>
<PanelHeader>
<TextContent>
<Text component={TextVariants.h1}>{t("reset_consumer_offset")}</Text>
</TextContent>
<TextContent>
<Text>{t.rich("consumer_name", { consumerGroupName })}</Text>
</TextContent>
</PanelHeader>
<Divider />
<PanelMain>
<PanelMainBody>
<Form>
<FormSection title={t("target")}>
<FormGroup role="radiogroup" isInline fieldId="select-consumer" hasNoPaddingTop label={t("apply_action_on")}>
<Radio name={"consumer-topic-select"} id={"all-consumer-topic"} label={t("all_consumer_topics")}
isChecked={selectedConsumerTopic === "allTopics"}
onChange={() => onTopicSelect("allTopics")} />
<Radio name={"consumer-topic-select"} id={"selected-topic"} label={t("selected_topic")} isChecked={selectedConsumerTopic === "selectedTopic"}
onChange={() => onTopicSelect("selectedTopic")} />
</FormGroup>
{selectedConsumerTopic === "selectedTopic" && (
<TypeaheadSelect
value={selectedTopic}
selectItems={topics}
onChange={handleTopicChange} placeholder={"Select topic"} />
)}
<FormGroup label={t("partitions")} isInline>
<Radio name={"partition-select"} id={"all-partitions"} label={t("all_partitions")}
isChecked={selectedPartition === "allPartitions"}
onChange={() => onPartitionSelect("allPartitions")} />
<Radio name={"partition-select"} id={"selected_partition"} label={t("selected_partition")}
isChecked={selectedPartition === "selectedPartition"}
onChange={() => onPartitionSelect("selectedPartition")} />
</FormGroup>
{selectedConsumerTopic === "selectedTopic" && selectedPartition === "selectedPartition" && (
<TypeaheadSelect
value={selectPartition}
selectItems={partitions}
onChange={handlePartitionChange}
placeholder={"Select partition"}
/>
)}
</FormSection>
<FormSection title={t("offset_details")}>
<FormGroup label={t("new_offset")}>
<OffsetSelect
value={selectedOffset}
onChange={setSelectedOffset} />
</FormGroup>
{selectedOffset === "custom" &&
<FormGroup
label={t("custom_offset")}
fieldId="custom-offset-input"
>
<TextInput
id="custom-offset-input"
name={t("custom_offset")}
value={customOffsetValue}
onChange={(_event, value) => setcustomOffsetValue(value)}
type="number"
/>
)}
</FormSection>
<FormSection title={t("offset_details")}>
<FormGroup label={t("new_offset")}>
<OffsetSelect
value={selectedOffset}
onChange={setSelectedOffset} />
</FormGroup>
{selectedOffset === "custom" &&
<FormGroup
label={t("custom_offset")}
fieldId="custom-offset-input"
>
</FormGroup>}
{selectedOffset === "specificDateTime" &&
<>
<FormGroup role="radiogroup" isInline fieldId="select-consumer" hasNoPaddingTop label={t("select_date_time")}>
<Radio name={"select_time"} id={"iso_date_format"} label={t("iso_date_format")}
isChecked={selectDateTimeFormat === "ISO"}
onChange={() => onDateTimeSelect("ISO")} />
<Radio name={"select_time"} id={"unix_date_format"} label={t("unix_date_format")}
isChecked={selectDateTimeFormat === "Epoch"}
onChange={() => onDateTimeSelect("Epoch")} />
</FormGroup>
<FormGroup>
<TextInput
id="custom-offset-input"
name={t("custom_offset")}
value={customOffsetValue}
onChange={(_event, value) => setcustomOffsetValue(value)}
type="number"
id="date-input"
name={"date-input"}
type="datetime-local"
/>
</FormGroup>}
{selectedOffset === "specificDateTime" &&
<>
<FormGroup role="radiogroup" isInline fieldId="select-consumer" hasNoPaddingTop label={t("select_date_time")}>
<Radio name={"select_time"} id={"iso_date_format"} label={t("iso_date_format")}
isChecked={selectDateTimeFormat === "ISO"}
onChange={() => onDateTimeSelect("ISO")} />
<Radio name={"select_time"} id={"unix_date_format"} label={t("unix_date_format")}
isChecked={selectDateTimeFormat === "Epoch"}
onChange={() => onDateTimeSelect("Epoch")} />
</FormGroup>
<FormGroup>
<TextInput
id="date-input"
name={"date-input"}
type="datetime-local"
/>
</FormGroup>
</>}
</FormSection>
<ActionGroup>
<Button variant="primary">{t("save")}</Button>
<Button variant="secondary">{t("dry_run")}</Button>
<Button variant="link">{t("cancel")}</Button>
</ActionGroup>
</Form>
</PanelMainBody>
</PanelMain>
</Panel >
</PageSection>
</FormGroup>
</>}
</FormSection>
<ActionGroup>
<Button variant="primary">{t("save")}</Button>
<Button variant="secondary">{t("dry_run")}</Button>
<Button variant="link">{t("cancel")}</Button>
</ActionGroup>
</Form>
</PanelMainBody>
</PanelMain>
</Panel >
)
}
9 changes: 7 additions & 2 deletions ui/messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,8 @@
"cancel": "Cancel",
"reset_offset": "Reset consumer offset",
"reset_offset_description": "Consumer group must be empty to reset offsets.",
"member_list_to_shutdown": "Active members of the group that need to shutdown:",
"member_shutdown_helper_text": "To reset the consumer group offsets, all the active members must be shut down.",
"shutdown_active_members": "Shut down active members before proceeding",
"learn_to_shutdown_members": "Learn how to shut down members",
"reset_consumer_offset": "Reset consumer offset",
"consumer_name": "Consumer group: <b>{consumerGroupName}</b>",
Expand All @@ -412,7 +413,11 @@
"selected_partition": "A selected partition",
"select_date_time": "Select Date time",
"iso_date_format": "ISO 8601 Date-Time Format",
"unix_date_format": "Unix Epoch Milliseconds"
"unix_date_format": "Unix Epoch Milliseconds",
"dry_run_result": "<b>Dry Run results</b>",
"download_dryrun_result": "Download Dry Run results",
"jump_to_topic": "Jump to topic"

},
"CreateTopic": {
"title": "Topic creation wizard",
Expand Down

0 comments on commit 806aa96

Please sign in to comment.