minor UI changes

Signed-off-by: hemahg <[email protected]>
streamshub · Sep 2, 2024 · 1646f72 · 1646f72
1 parent 3c26c8a
commit 1646f72
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 71 deletions.
diff --git a/ui/api/consumerGroups/actions.ts b/ui/api/consumerGroups/actions.ts
@@ -6,6 +6,7 @@
     ConsumerGroupsResponse,
     ConsumerGroupsResponseSchema,
     ConsumerGroupState,
+    UpdateConsumerGroupErrorSchema,
   } from "@/api/consumerGroups/schema";
   import { filterUndefinedFromObj } from "@/utils/filterUndefinedFromObj";
   import { logger } from "@/utils/logger";
@@ -33,7 +34,7 @@
     kafkaId: string,
     params: {
       fields?: string;
-      name?: string;
+      id?: string;
       state?: ConsumerGroupState[];
       pageSize?: number;
       pageCursor?: string;
@@ -47,7 +48,7 @@
           "fields[consumerGroups]":
             params.fields ?? "state,simpleConsumerGroup,members,offsets",
           // TODO: pass filter from UI
-          "filter[name]": params.name ? `like,*${params.name}*` : undefined,
+          "filter[id]": params.id ? `like,*${params.id}*` : undefined,
           "filter[state]":
           params.state && params.state.length > 0
             ? `in,${params.state.join(",")}`
@@ -115,38 +116,48 @@
     return ConsumerGroupsResponseSchema.parse(rawData);
   }
 
-  export async function updateConsumerGroup(
-      kafkaId: string,
-      consumerGroupId: string,
-      offsets: Array<{
-      topicId: string;
-      partition?: number;
-      offset: string | number;
-      metadata?: string;
-    }>
-  ):  Promise<boolean > {
-    const url = `${process.env.BACKEND_URL}/api/kafkas/${kafkaId}/consumerGroups/${consumerGroupId}`;
-      const body = {
-      data: {
-        type: "consumerGroups",
-        id: consumerGroupId,
-        attributes: {
-          offsets,
-        },
+export async function updateConsumerGroup(
+  kafkaId: string,
+  consumerGroupId: string,
+  offsets: Array<{
+    topicId: string;
+    partition?: number;
+    offset: string | number;
+    metadata?: string;
+  }>
+): Promise<boolean | UpdateConsumerGroupErrorSchema> {
+  const url = `${process.env.BACKEND_URL}/api/kafkas/${kafkaId}/consumerGroups/${consumerGroupId}`;
+  const body = {
+    data: {
+      type: "consumerGroups",
+      id: consumerGroupId,
+      attributes: {
+        offsets,
       },
-    };
-    log.debug({ url, body }, "calling updateConsumerGroup");
+    },
+  };
+
+  log.debug({ url, body }, "calling updateConsumerGroup");
+
+  try {
     const res = await fetch(url, {
       headers: await getHeaders(),
       method: "PATCH",
       body: JSON.stringify(body),
     });
-    try {
-    const success = res.status === 204;
-      log.debug({ status: res.status }, "updateConsumerGroup response");
-      return success
-    } catch (e) {
-      log.error(e, "updateConsumerGroup unknown error");
-    } 
-      return false;
+
+    log.debug({ status: res.status }, "updateConsumerGroup response");
+
+    if (res.status === 204) {
+      return true;
+    } else {
+      const rawData = await res.json();
+      return UpdateConsumerGroupErrorSchema.parse(rawData);
+    }
+  } catch (e) {
+    log.error(e, "updateConsumerGroup unknown error");
+    console.error("Unknown error occurred:", e);
+    return false;
   }
+}
+
diff --git a/ui/api/consumerGroups/schema.ts b/ui/api/consumerGroups/schema.ts
@@ -63,13 +63,34 @@ export const ConsumerGroupsResponseSchema = z.object({
   }),
   data: z.array(ConsumerGroupSchema),
 });
+
+export const UpdateConsumerGroupErrorSchema = z.object({
+  errors: z.array(
+    z.object({
+      id: z.string(),
+      status: z.string(),
+      code: z.string(),
+      title: z.string(),
+      detail: z.string(),
+      source: z
+        .object({
+          pointer: z.string().optional(),
+        })
+        .optional(),
+    }),
+  ),
+});
 export type ConsumerGroupsResponse = z.infer<
   typeof ConsumerGroupsResponseSchema
->;
+  >;
+
+export type UpdateConsumerGroupErrorSchema= z.infer<typeof UpdateConsumerGroupErrorSchema>;
 
 export const ConsumerGroupResponseSchema = z.object({
   data: ConsumerGroupSchema,
 });
 export type ConsumerGroupResponse = z.infer<
   typeof ConsumerGroupsResponseSchema
 >;
+
+
diff --git a/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx b/...uthorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/ResetConsumerOffset.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Divider, Panel, PanelHeader, PanelMain, PanelMainBody, TextContent, Text, TextVariants, Radio, Form, FormGroup, FormSection, Select, SelectList, SelectOption, MenuToggle, MenuToggleElement, TextInput, ActionGroup, Button, SelectProps, PageSection, Page, Bullseye, Spinner, Flex, FlexItem } from "@/libs/patternfly/react-core";
+import { Divider, Panel, PanelHeader, PanelMain, PanelMainBody, TextContent, Text, TextVariants, Radio, Form, FormGroup, FormSection, Select, SelectList, SelectOption, MenuToggle, MenuToggleElement, TextInput, ActionGroup, Button, SelectProps, PageSection, Page, Bullseye, Spinner, Flex, FlexItem, Grid, GridItem } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { DateTimeFormatSelection, OffsetValue, TopicSelection, partitionSelection } from "../types";
@@ -12,7 +12,7 @@ import { updateConsumerGroup } from "@/api/consumerGroups/actions";
 export type Offset = {
   topicName: string;
   partition: number;
-  offset: string;
+  offset: string | number;
 };
 
 export function ResetConsumerOffset({
@@ -66,7 +66,6 @@ export function ResetConsumerOffset({
       setOffset((prev) => ({ ...prev, topicName }));
     } else {
       console.warn('Expected a string, but got number:', topicName);
-
     }
   };
 
@@ -79,10 +78,13 @@ export function ResetConsumerOffset({
     }
   };
 
-  const handleOffsetChange = (offsetValue: string) => setOffset((prev) => ({ ...prev, offset: offsetValue }));
+  const handleOffsetChange = (value: string) => {
+    const numericValue = Number(value);
+    setOffset((prev) => ({ ...prev, offset: isNaN(numericValue) ? value : numericValue }));
+  };
 
   const openDryrun = () => {
-    router.push(`${baseurl}/reset-offset/dryrun`)
+    router.push(`${baseurl}/${consumerGroupName}/reset-offset/dryrun`)
   }
 
   const closeResetOffset = () => {
@@ -105,7 +107,6 @@ export function ResetConsumerOffset({
       }> = [];
 
       if (selectedConsumerTopic === "allTopics") {
-        // Apply changes to all topics and partitions
         offsets = topics.flatMap((topic) =>
           partitions.map((partition) => ({
             topicId: topic,
@@ -115,8 +116,9 @@ export function ResetConsumerOffset({
         );
 
       } else if (selectedConsumerTopic === "selectedTopic") {
-        // Apply changes to the selected topic and partition
-        const uniquePartitions = new Set(partitions.map(partition => selectedPartition === "allPartitions" ? partition : offset.partition));
+        const uniquePartitions = new Set(
+          partitions.map(partition => selectedPartition === "allPartitions" ? partition : offset.partition)
+        );
 
         offsets = Array.from(uniquePartitions).map((partition) => ({
           topicId: offset.topicName,
@@ -125,7 +127,6 @@ export function ResetConsumerOffset({
         }));
       }
 
-      // Ensure no duplicates are present in offsets array
       offsets = offsets.filter((value, index, self) =>
         index === self.findIndex((t) => (
           t.topicId === value.topicId && t.partition === value.partition
@@ -142,25 +143,28 @@ export function ResetConsumerOffset({
       }
     } catch (error) {
       console.error('Error updating consumer group:', error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
+
   return (
     <Page>
       {isLoading ? (
-        <>
-          <Bullseye>
-            <Flex direction={{ default: 'column' }}>
-              <FlexItem>
-                <Spinner size="xl" aria-label={t("resetting_spinner")}
-                  aria-valuetext={t("resetting_spinner")} />
-              </FlexItem>
-              <FlexItem>
-                {t("reseting_consumer_group_offsets_text")}
-              </FlexItem>
-            </Flex>
-          </Bullseye>
-        </>) : (
+        <Grid hasGutter={true}>
+          <GridItem>
+            <Bullseye>
+              <Spinner size="xl" aria-label={t("resetting_spinner")}
+                aria-valuetext={t("resetting_spinner")} />
+            </Bullseye>
+          </GridItem>
+          <GridItem>
+            <Bullseye>
+              {t("reseting_consumer_group_offsets_text")}
+            </Bullseye>
+          </GridItem>
+        </Grid>) : (
         <Panel>
           <PanelHeader>
             <TextContent>

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/[groupId]/reset-offset/page.tsx
@@ -30,12 +30,6 @@ async function ConnectedResetOffset({
 }: {
   params: KafkaParams & { groupId: string };
 }) {
-  async function refresh() {
-    "use server";
-    const res = await getConsumerGroup(kafkaId, groupId);
-    return res;
-  }
-
   const consumerGroup = await getConsumerGroup(kafkaId, groupId);
   if (!consumerGroup) {
     notFound();
@@ -48,12 +42,12 @@ async function ConnectedResetOffset({
     partition: o.partition,
   })) || []
 
-  const topicNames = topics.map(t => t.topicId);;
+  const topicDetails = topics.map((t) => t.topicName);
   const partitions = topics.map(t => t.partition);
 
 
   return <ResetConsumerOffset
     consumerGroupName={consumerGroup.id}
-    topics={topicNames}
-    partitions={partitions} baseurl={`/kafka/${kafkaId}/consumer-groups/${consumerGroup.id}`} kafkaId={kafkaId} />;
+    topics={topicDetails}
+    partitions={partitions} baseurl={`/kafka/${kafkaId}/consumer-groups`} kafkaId={kafkaId} />;
 }
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/consumer-groups/page.tsx
@@ -3,7 +3,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 { ConsumerGroupsTable, SortableColumns, SortableConsumerGroupTableColumns } from "./ConsumerGroupsTable";
+import { SortableColumns, SortableConsumerGroupTableColumns } from "./ConsumerGroupsTable";
 import { ConsumerGroup, ConsumerGroupState } from "@/api/consumerGroups/schema";
 import { stringToInt } from "@/utils/stringToInt";
 import { ConnectedConsumerGroupsTable } from "./ConnectedConsumerGroupTable";
@@ -19,15 +19,15 @@ export default function ConsumerGroupsPage({
 }: {
   params: KafkaParams;
   searchParams: {
-    name: string | undefined;
+    id: string | undefined;
     state: string | undefined;
     perPage: string | undefined;
     sort: string | undefined;
     sortDir: string | undefined;
     page: string | undefined;
   };
 }) {
-  const name = searchParams["name"];
+  const name = searchParams["id"];
   const pageSize = stringToInt(searchParams.perPage) || 20;
   const sort = (searchParams["sort"] || "name") as SortableConsumerGroupTableColumns;
   const sortDir = (searchParams["sortDir"] || "asc") as "asc" | "desc";
@@ -54,7 +54,7 @@ export default function ConsumerGroupsPage({
       }>
         <AsyncConnectedConsumerGroupsTable
           sort={sort}
-          name={name}
+          id={name}
           sortDir={sortDir}
           pageSize={pageSize}
           pageCursor={pageCursor}
@@ -67,15 +67,15 @@ export default function ConsumerGroupsPage({
 
 async function AsyncConnectedConsumerGroupsTable({
   kafkaId,
-  name,
+  id,
   sortDir,
   sort,
   pageCursor,
   pageSize,
   state,
 }: {
   sort: SortableConsumerGroupTableColumns;
-  name: string | undefined;
+  id: string | undefined;
   sortDir: "asc" | "desc";
   pageSize: number;
   pageCursor: string | undefined;
@@ -87,7 +87,7 @@ async function AsyncConnectedConsumerGroupsTable({
   async function refresh() {
     "use server";
     const res = await getConsumerGroups(kafkaId, {
-      name,
+      id,
       state,
       sort: sortMap[sort],
       sortDir,
@@ -99,7 +99,7 @@ async function AsyncConnectedConsumerGroupsTable({
 
 
   const consumerGroups = await getConsumerGroups(kafkaId, {
-    name,
+    id,
     state,
     sort: sortMap[sort],
     sortDir,
@@ -124,7 +124,7 @@ async function AsyncConnectedConsumerGroupsTable({
       kafkaId={kafkaId}
       consumerGroups={consumerGroups.data}
       consumerGroupCount={consumerGroups.meta.page.total || 0} page={0} perPage={0}
-      name={name}
+      name={id}
       sort={sort}
       sortDir={sortDir}
       state={state}