resolve merge conflict

Signed-off-by: hemahg <[email protected]>
streamshub · Aug 12, 2024 · 1c9dfbb · 1c9dfbb
1 parent 915812d
commit 1c9dfbb
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 2 deletions.
diff --git a/...e]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetConsumerOffset.stories.tsx b/...e]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetConsumerOffset.stories.tsx
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ResetConsumerOffset } from "./ResetConsumerOffset";
+
+export default {
+  component: ResetConsumerOffset,
+} as Meta<typeof ResetConsumerOffset>;
+
+type Story = StoryObj<typeof ResetConsumerOffset>;
+
+export const Default: Story = {
+  args: {
+    consumerGroupName: "console-consumer-01"
+  },
+};
diff --git a/...p/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetConsumerOffset.tsx b/...p/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetConsumerOffset.tsx
@@ -0,0 +1,134 @@
+import { Divider, Panel, PanelHeader, PanelMain, PanelMainBody, TextContent, Text, TextVariants, Radio, Form, FormGroup, FormSection, Select, SelectList, SelectOption, MenuToggle, MenuToggleElement, TextInput, ActionGroup, Button } from "@/libs/patternfly/react-core";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import { formatISO } from "date-fns";
+
+export function ResetConsumerOffset({
+  consumerGroupName,
+  members
+}: {
+  consumerGroupName: string;
+  members: string[];
+}) {
+
+  const date = new Date()
+  console.log(date)
+
+  const t = useTranslations("ConsumerGroupsTable");
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const [selectedOffset, setSelectedOffset] = useState<string>("select offset");
+
+  const [selectedTopic, setSelectedTopic] = useState<boolean>(false)
+
+  const [customOffsetValue, setcustomOffsetValue] = useState<string>();
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelectedOffset(value as string);
+    setIsOpen(false);
+  };
+
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggle}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selectedOffset}
+    </MenuToggle>
+  );
+
+
+  return (
+    <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={"all-consumer-topic"} id={"all-consumer-topic"} label={t("all_consumer_topics")} />
+                <Radio name={"selected-topic"} id={"selected-topic"} label={t("selected_topic")} />
+              </FormGroup>
+
+              <FormGroup label={t("partitions")} isInline>
+                <Radio name={"all-partitions"} id={"all-partitions"} label={t("all_partitions")} />
+                <Radio name={"selected_partition"} id={"selected_partition"} label={t("selected_partition")} />
+              </FormGroup>
+            </FormSection>
+            <FormSection title={t("offset_details")}>
+              <FormGroup label={t("new_offset")}>
+                <Select
+                  id="offset-select"
+                  isOpen={isOpen}
+                  selected={selectedOffset}
+                  onSelect={onSelect}
+                  toggle={toggle}>
+                  <SelectList>
+                    <SelectOption value={t("offset.custom")}>{t("offset.custom")}</SelectOption>
+                    <SelectOption value={t("offset.earliest")}>{t("offset.earliest")}</SelectOption>
+                    <SelectOption value={t("offset.latest")}>{t("offset.latest")}</SelectOption>
+                    <SelectOption value={t("offset.specific_date_time")}>{t("offset.specific_date_time")}</SelectOption>
+                  </SelectList>
+                </Select>
+              </FormGroup>
+              {selectedOffset === "Custom offset" &&
+                <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"
+                  />
+                </FormGroup>}
+              {selectedOffset === "Specific Date time" &&
+                <>
+                  <FormGroup role="radiogroup" isInline fieldId="select-consumer" hasNoPaddingTop label={t("select_date_time")}>
+                    <Radio name={"iso_date_format"} id={"iso_date_format"} label={t("iso_date_format")} />
+                    <Radio name={"unix_date_format"} id={"unix_date_format"} label={t("unix_date_format")} />
+                  </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 >
+  )
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/ResetOffsetModal.tsx
@@ -30,7 +30,7 @@ export function ResetOffsetModal({
         </Button>
       ]}
     >
-      <Stack>
+      <Stack hasGutter>
         <StackItem>
           <Text>{t("member_list_to_shutdown")}</Text>
         </StackItem>

diff --git a/ui/messages/en.json b/ui/messages/en.json
@@ -389,7 +389,30 @@
     "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:",
-    "learn_to_shutdown_members": "Learn how to shut down members"
+    "learn_to_shutdown_members": "Learn how to shut down members",
+    "reset_consumer_offset": "Reset consumer offset",
+    "consumer_name": "Consumer group: <b>{consumerGroupName}</b>",
+    "target": "Target",
+    "apply_action_on": "Apply action on",
+    "all_consumer_topics": "All consumer topics",
+    "selected_topic": "A selected topic",
+    "offset_details": "Offset details",
+    "new_offset": "New offset",
+    "offset": {
+      "custom": "Custom offset",
+      "earliest": "Earliest offset",
+      "latest": "Latest offset",
+      "specific_date_time": "Specific Date time"
+    },
+    "custom_offset": "Custom offset",
+    "save": "Save",
+    "dry_run": "Dry run",
+    "partitions": "Partitions",
+    "all_partitions": "All partitions",
+    "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"
   },
   "CreateTopic": {
     "title": "Topic creation wizard",
@@ -423,7 +446,13 @@
     "review_topic": "Review your topic",
     "name": "Name",
     "empty": "Empty",
+<<<<<<< HEAD
     "no_advanced_options_specified": "No advanced options specified."
+=======
+    "no_advanced_options_specified": "No advanced options specified.",
+    "target": "Target"
+
+>>>>>>> 8d8a751 (consumer group reset offset modal)
   },
   "DistributionChart": {
     "partitions_distribution_of_total": "Partitions distribution (% of total)",