Bug fix in reset offset page (#1319)

* bug fix in reset offset page * Add onclick function for dryrun page * Disable save until all fields are entered * Incorporate review comment Signed-off-by: hemahg <[email protected]>
streamshub · Jan 3, 2025 · d678ab1 · d678ab1
1 parent 94dcc02
commit d678ab1
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 28 deletions.
diff --git a/...orized)/kafka/[kafkaId]/@activeBreadcrumb/consumer-groups/[groupId]/reset-offset/page.tsx b/...orized)/kafka/[kafkaId]/@activeBreadcrumb/consumer-groups/[groupId]/reset-offset/page.tsx
@@ -0,0 +1,22 @@
+import { KafkaConsumerGroupMembersParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/KafkaConsumerGroupMembers.params";
+import { BreadcrumbLink } from "@/components/Navigation/BreadcrumbLink";
+import { BreadcrumbItem } from "@/libs/patternfly/react-core";
+
+export default function ConsumerGroupsActiveBreadcrumb({
+  params: { groupId, kafkaId },
+}: {
+  params: KafkaConsumerGroupMembersParams;
+}) {
+  return [
+    <BreadcrumbLink
+      key={"cg"}
+      href={`/kafka/${kafkaId}/consumer-groups`}
+      showDivider={true}
+    >
+      Consumer groups
+    </BreadcrumbLink>,
+    <BreadcrumbItem key={"cgm"} showDivider={true} isActive={true}>
+      {decodeURIComponent(groupId) === "+" ? <i>Empty Name</i> : groupId}
+    </BreadcrumbItem>,
+  ];
+}
diff --git a/...ale]/(authorized)/kafka/[kafkaId]/@header/consumer-groups/[groupId]/reset-offset/page.tsx b/...ale]/(authorized)/kafka/[kafkaId]/@header/consumer-groups/[groupId]/reset-offset/page.tsx
@@ -0,0 +1,38 @@
+import { KafkaConsumerGroupMembersParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/KafkaConsumerGroupMembers.params";
+import { AppHeader } from "@/components/AppHeader";
+import { Suspense } from "react";
+import { useTranslations } from "next-intl";
+
+export default function Page({
+  params: { kafkaId, groupId },
+}: {
+  params: KafkaConsumerGroupMembersParams;
+}) {
+  return (
+    <Suspense fallback={<Header params={{ kafkaId, groupId }} />}>
+      <ConnectedAppHeader params={{ kafkaId, groupId }} />
+    </Suspense>
+  );
+}
+
+async function ConnectedAppHeader({
+  params: { kafkaId, groupId },
+}: {
+  params: KafkaConsumerGroupMembersParams;
+}) {
+  return <Header params={{ kafkaId, groupId }} />;
+}
+
+function Header({
+  params: { kafkaId, groupId },
+}: {
+  params: KafkaConsumerGroupMembersParams;
+}) {
+  const t = useTranslations();
+
+  return (
+    <AppHeader
+      title={decodeURIComponent(groupId) === "+" ? <i>Empty Name</i> : groupId}
+    />
+  );
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConsumerGroupsTable.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/ConsumerGroupsTable.tsx
@@ -196,26 +196,24 @@ export function ConsumerGroupsTable({
             const allTopics: Record<string, string | undefined> = {};
             row.attributes.members
               ?.flatMap((m) => m.assignments ?? [])
-              .forEach((a) =>
-                allTopics[a.topicName] = a.topicId,
-              );
-            row.attributes.offsets?.forEach((a) =>
-              allTopics[a.topicName] = a.topicId,
+              .forEach((a) => (allTopics[a.topicName] = a.topicId));
+            row.attributes.offsets?.forEach(
+              (a) => (allTopics[a.topicName] = a.topicId),
             );
             return (
               <Td key={key} dataLabel={t("ConsumerGroupsTable.topics")}>
                 <LabelGroup>
-                  {Object.entries(allTopics).map(
-                    ([topicName, topicId]) => (
-                      <LabelLink
-                        key={topicName}
-                        color={"blue"}
-                        href={topicId ? `/kafka/${kafkaId}/topics/${topicId}` : "#"}
-                      >
-                        {topicName}
-                      </LabelLink>
-                    )
-                  )}
+                  {Object.entries(allTopics).map(([topicName, topicId]) => (
+                    <LabelLink
+                      key={topicName}
+                      color={"blue"}
+                      href={
+                        topicId ? `/kafka/${kafkaId}/topics/${topicId}` : "#"
+                      }
+                    >
+                      {topicName}
+                    </LabelLink>
+                  ))}
                 </LabelGroup>
               </Td>
             );
@@ -232,7 +230,10 @@ export function ConsumerGroupsTable({
           items={[
             {
               title: t("ConsumerGroupsTable.reset_offset"),
-              description: t("ConsumerGroupsTable.reset_offset_description"),
+              description:
+                row.attributes.state === "EMPTY"
+                  ? null
+                  : t("ConsumerGroupsTable.reset_offset_description"),
               onClick: () => onResetOffset(row),
             },
           ]}

diff --git a/...ale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx b/...ale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/DryrunSelect.tsx
@@ -15,9 +15,11 @@ import { useState } from "react";
 export function DryrunSelect({
   openDryrun,
   cliCommand,
+  isDisabled,
 }: {
   openDryrun: () => void;
   cliCommand: string;
+  isDisabled: boolean;
 }) {
   const t = useTranslations("ConsumerGroupsTable");
 
@@ -44,6 +46,8 @@ export function DryrunSelect({
                 id="split-button-action-secondary-with-toggle-button"
                 key="split-action-secondary"
                 aria-label={t("dry_run")}
+                onClick={openDryrun}
+                isDisabled={isDisabled}
               >
                 {t("dry_run")}
               </MenuToggleAction>,
@@ -59,6 +63,7 @@ export function DryrunSelect({
           value={0}
           key={t("run_and_show_result")}
           onClick={openDryrun}
+          isDisabled={isDisabled}
         >
           <PlayIcon /> {t("run_and_show_result")}
         </DropdownItem>
@@ -71,6 +76,7 @@ export function DryrunSelect({
           }}
           aria-describedby="tooltip-ref1"
           ref={tooltipRef}
+          isDisabled={isDisabled}
         >
           <CopyIcon /> {t("copy_dry_run_command")}
           {isCopied && (

diff --git a/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx b/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
@@ -12,7 +12,7 @@ import { updateConsumerGroup } from "@/api/consumerGroups/actions";
 import { Dryrun } from "./Dryrun";
 import { LoadingPage } from "./LoadingPage";
 import { ResetOffset } from "./ResetOffset";
-import { Page } from "@/libs/patternfly/react-core";
+import { Page, PageSection } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { useAlert } from "@/components/AlertContext";
 
@@ -208,19 +208,21 @@ export function ResetConsumerOffset({
       kafkaId,
       consumerGroupName,
       uniqueOffsets,
-      true // dryRun
+      true, // dryRun
     );
 
     if (response.payload) {
       const res = response.payload;
-      const offsets: Offset[] = Array.from(res.attributes?.offsets ?? []).map(o => {
-        return {
+      const offsets: Offset[] = Array.from(res.attributes?.offsets ?? []).map(
+        (o) => {
+          return {
             topicId: o.topicId!,
             topicName: o.topicName,
             partition: o.partition,
             offset: o.offset,
-        }
-      });
+          };
+        },
+      );
 
       setNewOffsetData(offsets);
       setShowDryRun(true);
@@ -280,7 +282,7 @@ export function ResetConsumerOffset({
   };
 
   return (
-    <Page>
+    <PageSection isFilled={true} hasOverflowScroll={true}>
       {isLoading ? (
         <LoadingPage />
       ) : showDryRun ? (
@@ -316,6 +318,6 @@ export function ResetConsumerOffset({
           cliCommand={generateCliCommand()}
         />
       )}
-    </Page>
+    </PageSection>
   );
 }
diff --git a/...cale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx b/...cale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetOffset.tsx
@@ -83,6 +83,20 @@ export function ResetOffset({
   onOffsetSelect: (value: OffsetValue) => void;
 }) {
   const t = useTranslations("ConsumerGroupsTable");
+
+  const isEnabled =
+    (selectTopic === "allTopics" ||
+      (selectTopic === "selectedTopic" &&
+        offset.topicName &&
+        (selectPartition === "allPartitions" ||
+          (selectPartition === "selectedPartition" &&
+            offset.partition !== undefined)))) &&
+    (selectOffset === "custom"
+      ? offset.offset
+      : selectOffset === "specificDateTime"
+        ? offset.offset
+        : selectOffset === "latest" || selectOffset === "earliest");
+
   return (
     <Panel>
       <PanelHeader>
@@ -170,8 +184,13 @@ export function ResetOffset({
                     id="custom-offset-input"
                     name={t("custom_offset")}
                     value={offset.offset}
-                    onChange={(_event, value) => handleOffsetChange(value)}
+                    onChange={(_event, value) => {
+                      if (/^\d*$/.test(value)) {
+                        handleOffsetChange(value);
+                      }
+                    }}
                     type="number"
+                    min={0}
                   />
                 </FormGroup>
               )}
@@ -219,11 +238,15 @@ export function ResetOffset({
               <Button
                 variant="primary"
                 onClick={handleSave}
-                isDisabled={isLoading}
+                isDisabled={isLoading || !isEnabled}
               >
                 {t("save")}
               </Button>
-              <DryrunSelect openDryrun={openDryrun} cliCommand={cliCommand} />
+              <DryrunSelect
+                openDryrun={openDryrun}
+                cliCommand={cliCommand}
+                isDisabled={!isEnabled}
+              />
               <Button
                 variant="link"
                 onClick={closeResetOffset}