Add filter to filter by topic name

Signed-off-by: hemahg <hhg@redhat.com>

Author: hemahg

ui/api/topics/actions.ts

@@ -17,6 +17,8 @@ import {
   Topic,
   TopicCreateResponse,
   TopicCreateResponseSchema,
+  TopicMetrics,
+  TopicMetricsResponseSchema,
   TopicResponse,
   TopicsResponse,
   TopicsResponseSchema,
@@ -206,3 +208,14 @@ export async function setTopicAsViewed(kafkaId: string, topicId: string) {
     return viewedTopics;
   }
 }
+
+export async function gettopicMetrics(
+  kafkaId: string,
+  topicId: number | string,
+): Promise<ApiResponse<TopicMetrics>> {
+  return fetchData(
+    `/api/kafkas/${kafkaId}/topics/${topicId}/metrics`,
+    "",
+    (rawData) => TopicMetricsResponseSchema.parse(rawData),
+  );
+}

ui/api/topics/schema.ts

@@ -71,10 +71,12 @@ export type TopicStatus = z.infer<typeof TopicStatusSchema>;
 const TopicSchema = z.object({
   id: z.string(),
   type: z.literal("topics"),
-  meta: z.object({
-    managed: z.boolean().optional(),
-    privileges: z.array(z.string()).optional(),
-  }).optional(),
+  meta: z
+    .object({
+      managed: z.boolean().optional(),
+      privileges: z.array(z.string()).optional(),
+    })
+    .optional(),
   attributes: z.object({
     name: z.string().optional(),
     status: TopicStatusSchema.optional(),
@@ -86,10 +88,13 @@ const TopicSchema = z.object({
     totalLeaderLogBytes: z.number().optional().nullable(),
   }),
   relationships: z.object({
-    consumerGroups: z.object({
-      meta: z.record(z.string(), z.any()).optional(),
-      data: z.array(z.any()),
-    }).optional().nullable(),
+    consumerGroups: z
+      .object({
+        meta: z.record(z.string(), z.any()).optional(),
+        data: z.array(z.any()),
+      })
+      .optional()
+      .nullable(),
   }),
 });
 export const TopicResponse = z.object({
@@ -115,7 +120,7 @@ const TopicListItemSchema = z.object({
     totalLeaderLogBytes: true,
   }),
   relationships: TopicSchema.shape.relationships.pick({
-    consumerGroups: true
+    consumerGroups: true,
   }),
 });
 export type TopicListItem = z.infer<typeof TopicListItemSchema>;
@@ -145,6 +150,36 @@ export const TopicsResponseSchema = z.object({
   }),
   data: z.array(TopicListItemSchema),
 });
+
+export const MetricsSchema = z.object({
+  values: z.record(
+    z.string(),
+    z.array(
+      z.object({
+        value: z.string(),
+      }),
+    ),
+  ),
+  ranges: z.record(
+    z.string(),
+    z.array(
+      z.object({
+        range: z.array(z.tuple([z.string(), z.string()])),
+      }),
+    ),
+  ),
+});
+
+export const TopicMetricsResponseSchema = z.object({
+  data: z.object({
+    id: z.string(),
+    type: z.literal("topicMetrics"),
+    attributes: z.object({
+      metrics: MetricsSchema.optional().nullable(),
+    }),
+  }),
+});
+
 export type TopicsResponse = z.infer<typeof TopicsResponseSchema>;
 
 export const TopicCreateResponseSchema = z.object({
@@ -154,3 +189,5 @@ export const TopicCreateResponseSchema = z.object({
 });
 
 export type TopicCreateResponse = z.infer<typeof TopicCreateResponseSchema>;
+
+export type TopicMetrics = z.infer<typeof TopicMetricsResponseSchema>;

ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedTopicChartsCard.tsx

@@ -1,4 +1,6 @@
+import { ApiResponse } from "@/api/api";
 import { ClusterDetail } from "@/api/kafka/schema";
+import { TopicsResponse } from "@/api/topics/schema";
 import { TopicChartsCard } from "@/components/ClusterOverview/TopicChartsCard";
 
 function timeSeriesMetrics(
@@ -21,13 +23,30 @@ function timeSeriesMetrics(
 
 export async function ConnectedTopicChartsCard({
   cluster,
+  topics,
 }: {
   cluster: Promise<ClusterDetail | null>;
+  topics: Promise<ApiResponse<TopicsResponse>>;
 }) {
   const res = await cluster;
 
+  const topicResponse = await topics;
+
+  const topicList =
+    topicResponse.payload?.data
+      ?.map((topic) => ({
+        id: topic.id,
+        name: topic.attributes.name,
+      }))
+      .filter(
+        (topic): topic is { id: string; name: string } =>
+          !!topic.id && !!topic.name,
+      ) ?? [];
+
   return (
     <TopicChartsCard
+      kafkaId={res?.id}
+      topicList={topicList}
       isLoading={false}
       isVirtualKafkaCluster={
         res?.meta?.kind === "virtualkafkaclusters.kroxylicious.io"

ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/page.tsx

@@ -28,7 +28,15 @@ export default async function OverviewPage({
       "name,namespace,creationTimestamp,status,kafkaVersion,nodes,listeners,conditions,metrics",
   }).then((r) => r.payload ?? null);
 
-  const topics = getTopics(params.kafkaId, { fields: "status", pageSize: 1 });
+  const topicsSummary = getTopics(params.kafkaId, {
+    fields: "status",
+    pageSize: 1,
+  });
+
+  const topicsForCharts = getTopics(params.kafkaId, {
+    fields: "name",
+    pageSize: 100,
+  });
   const consumerGroups = getConsumerGroups(params.kafkaId, {
     fields: "groupId,state",
   });
@@ -45,9 +53,14 @@ export default async function OverviewPage({
           consumerGroups={consumerGroups}
         />
       }
-      topicsPartitions={<ConnectedTopicsPartitionsCard data={topics} />}
+      topicsPartitions={<ConnectedTopicsPartitionsCard data={topicsSummary} />}
       clusterCharts={<ConnectedClusterChartsCard cluster={kafkaCluster} />}
-      topicCharts={<ConnectedTopicChartsCard cluster={kafkaCluster} />}
+      topicCharts={
+        <ConnectedTopicChartsCard
+          cluster={kafkaCluster}
+          topics={topicsForCharts}
+        />
+      }
       recentTopics={<ConnectedRecentTopics data={viewedTopics} />}
     />
   );

ui/components/ClusterOverview/ClusterChartsCard.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { ClusterChartsCard } from "./ClusterChartsCard";
 
+const brokers = ["broker1", "broker2"];
+
 // Mock data for charts
 const mockTimestamps = {
   "2024-01-01T00:00:00Z": 40,
@@ -37,6 +39,7 @@ export const Default: Story = {
     availableDiskSpace: sampleAvailable,
     memoryUsage: sampleUsages,
     cpuUsage: sampleUsages,
+    brokerList: brokers,
   },
 };
 

ui/components/ClusterOverview/ClusterChartsCard.tsx

@@ -19,6 +19,10 @@ import { FilterByBroker } from "./components/FilterByBroker";
 import { useState } from "react";
 import { useNodeMetrics } from "./components/useNodeMetric";
 
+function hasMetrics(metrics?: Record<string, TimeSeriesMetrics>) {
+  return metrics && Object.keys(metrics).length > 0;
+}
+
 type ClusterChartsCardProps = {
   brokerList: string[];
   usedDiskSpace: Record<string, TimeSeriesMetrics>;
@@ -51,6 +55,18 @@ export function ClusterChartsCard({
   const cpuMetrics = useNodeMetrics(kafkaId, cpuBroker);
   const memMetrics = useNodeMetrics(kafkaId, memBroker);
 
+  const diskHasMetrics = hasMetrics(
+    diskMetrics.data?.volume_stats_used_bytes ?? usedDiskSpace,
+  );
+
+  const cpuHasMetrics = hasMetrics(
+    cpuMetrics.data?.cpu_usage_seconds ?? cpuUsage,
+  );
+
+  const memHasMetrics = hasMetrics(
+    memMetrics.data?.memory_usage_bytes ?? memoryUsage,
+  );
+
   const disableFilter = isLoading || !kafkaId || brokerList.length <= 1;
 
   return (
@@ -74,12 +90,15 @@ export function ClusterChartsCard({
             <ChartSkeletonLoader />
           ) : (
             <>
-              <FilterByBroker
-                brokerList={brokerList}
-                selectedBroker={diskBroker}
-                onSetSelectedBroker={setDiskBroker}
-                disableToolbar={disableFilter || diskMetrics.isLoading}
-              />
+              {!isLoading && diskHasMetrics && (
+                <FilterByBroker
+                  brokerList={brokerList}
+                  selectedBroker={diskBroker}
+                  onSetSelectedBroker={setDiskBroker}
+                  disableToolbar={disableFilter || diskMetrics.isLoading}
+                />
+              )}
+
               <ChartDiskUsage
                 usages={
                   diskMetrics.data?.volume_stats_used_bytes ?? usedDiskSpace
@@ -103,12 +122,15 @@ export function ClusterChartsCard({
             <ChartSkeletonLoader />
           ) : (
             <>
-              <FilterByBroker
-                brokerList={brokerList}
-                selectedBroker={cpuBroker}
-                onSetSelectedBroker={setCpuBroker}
-                disableToolbar={disableFilter || cpuMetrics.isLoading}
-              />
+              {!isLoading && cpuHasMetrics && (
+                <FilterByBroker
+                  brokerList={brokerList}
+                  selectedBroker={cpuBroker}
+                  onSetSelectedBroker={setCpuBroker}
+                  disableToolbar={disableFilter || cpuMetrics.isLoading}
+                />
+              )}
+
               <ChartCpuUsage
                 usages={cpuMetrics.data?.cpu_usage_seconds ?? cpuUsage}
               />
@@ -126,12 +148,15 @@ export function ClusterChartsCard({
             <ChartSkeletonLoader />
           ) : (
             <>
-              <FilterByBroker
-                brokerList={brokerList}
-                selectedBroker={memBroker}
-                onSetSelectedBroker={setMemBroker}
-                disableToolbar={disableFilter || memMetrics.isLoading}
-              />
+              {!isLoading && memHasMetrics && (
+                <FilterByBroker
+                  brokerList={brokerList}
+                  selectedBroker={memBroker}
+                  onSetSelectedBroker={setMemBroker}
+                  disableToolbar={disableFilter || memMetrics.isLoading}
+                />
+              )}
+
               <ChartMemoryUsage
                 usages={memMetrics.data?.memory_usage_bytes ?? memoryUsage}
               />