Update topic partitions (#295)

* Reorder links in the topic pages header * Update partitons page
streamshub · Dec 20, 2023 · 7a4e2de · 7a4e2de
1 parent 02991a0
commit 7a4e2de
Show file tree

Hide file tree

Showing 6 changed files with 332 additions and 87 deletions.
diff --git a/ui/api/topics/actions.ts b/ui/api/topics/actions.ts
@@ -80,7 +80,7 @@ export async function getTopic(
     },
   });
   const rawData = await res.json();
-  //log.debug("getTopic", url, JSON.stringify(rawData, null, 2));
+  log.debug(rawData, "getTopic");
   return TopicResponse.parse(rawData).data;
 }
 

diff --git a/ui/api/topics/schema.ts b/ui/api/topics/schema.ts
@@ -9,9 +9,15 @@ const OffsetSchema = z.object({
   timestamp: z.string().optional(),
   leaderEpoch: z.number().optional(),
 });
+const PartitionStatusSchema = z.union([
+  z.literal("FullyReplicated"),
+  z.literal("UnderReplicated"),
+  z.literal("Offline"),
+]);
+export type PartitionStatus = z.infer<typeof PartitionStatusSchema>;
 const PartitionSchema = z.object({
   partition: z.number(),
-  status: z.string(),
+  status: PartitionStatusSchema,
   leaderId: z.number().optional(),
   replicas: z.array(
     z.object({

diff --git a/ui/app/[locale]/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx b/ui/app/[locale]/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx
@@ -40,26 +40,28 @@ export function TopicHeader({
                     </Label>
                   </NavItemLink>
                   <NavItemLink
-                    url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
+                    url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
                   >
-                    Consumer groups&nbsp;
+                    Partitions&nbsp;
                     <Label isCompact={true}>
                       <Spinner size="sm" />
                     </Label>
                   </NavItemLink>
                   <NavItemLink
-                    url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
+                    url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
                   >
-                    Partitions&nbsp;
+                    Consumer groups&nbsp;
                     <Label isCompact={true}>
                       <Spinner size="sm" />
                     </Label>
                   </NavItemLink>
+                  {/*
                   <NavItemLink
                     url={`/kafka/${kafkaId}/topics/${topicId}/schema-registry`}
                   >
                     Schema
                   </NavItemLink>
+*/}
                   <NavItemLink
                     url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
                   >
@@ -97,16 +99,6 @@ async function ConnectedTopicHeader({
               <NavItemLink url={`/kafka/${kafkaId}/topics/${topicId}/messages`}>
                 Messages&nbsp;
               </NavItemLink>
-              <NavItemLink
-                url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
-              >
-                Consumer groups&nbsp;
-                <Label isCompact={true}>
-                  <Number
-                    value={topic.relationships.consumerGroups.data.length}
-                  />
-                </Label>
-              </NavItemLink>
               <NavItemLink
                 url={`/kafka/${kafkaId}/topics/${topicId}/partitions`}
               >
@@ -117,11 +109,23 @@ async function ConnectedTopicHeader({
                   </Suspense>
                 </Label>
               </NavItemLink>
+              <NavItemLink
+                url={`/kafka/${kafkaId}/topics/${topicId}/consumer-groups`}
+              >
+                Consumer groups&nbsp;
+                <Label isCompact={true}>
+                  <Number
+                    value={topic.relationships.consumerGroups.data.length}
+                  />
+                </Label>
+              </NavItemLink>
+              {/*
               <NavItemLink
                 url={`/kafka/${kafkaId}/topics/${topicId}/schema-registry`}
               >
                 Schema
               </NavItemLink>
+              */}
               <NavItemLink
                 url={`/kafka/${kafkaId}/topics/${topicId}/configuration`}
               >

diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/partitions/NoResultsEmptyState.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/partitions/NoResultsEmptyState.tsx
@@ -0,0 +1,24 @@
+"use client";
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  Title,
+} from "@/libs/patternfly/react-core";
+import { SearchIcon } from "@/libs/patternfly/react-icons";
+
+export function NoResultsEmptyState({ onReset }: { onReset: () => void }) {
+  return (
+    <EmptyState variant={"lg"}>
+      <EmptyStateIcon icon={SearchIcon} />
+      <Title headingLevel="h4" size="lg">
+        No results
+      </Title>
+      <EmptyStateBody>No partitions matching the filter.</EmptyStateBody>
+      <Button variant={"link"} onClick={onReset}>
+        Reset filters
+      </Button>
+    </EmptyState>
+  );
+}