Add filters to Overview page: Filter by Broker, Time, and Topic

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

Author: hemahg

ui/api/nodes/actions.ts

@@ -16,6 +16,8 @@ import {
   NodeRoles,
   BrokerStatus,
   ControllerStatus,
+  NodeMetricsResponseSchema,
+  NodeMetrics,
 } from "@/api/nodes/schema";
 import { filterUndefinedFromObj } from "@/utils/filterUndefinedFromObj";
 
@@ -67,3 +69,14 @@ export async function getNodeConfiguration(
     (rawData) => ConfigResponseSchema.parse(rawData).data,
   );
 }
+
+export async function getNodeMetrics(
+  kafkaId: string,
+  nodeId: number | string,
+): Promise<ApiResponse<NodeMetrics>> {
+  return fetchData(
+    `/api/kafkas/${kafkaId}/nodes/${nodeId}/metrics`,
+    "",
+    (rawData) => NodeMetricsResponseSchema.parse(rawData),
+  );
+}

ui/api/nodes/schema.ts

@@ -19,10 +19,13 @@ const ControllerStatusSchema = z.union([
   z.literal("Unknown"),
 ]);
 
-const NodePoolsSchema = z.record(z.string(), z.object({
-  roles: z.array(z.string()),
-  count: z.number(),
-}));
+const NodePoolsSchema = z.record(
+  z.string(),
+  z.object({
+    roles: z.array(z.string()),
+    count: z.number(),
+  }),
+);
 
 export const NodeSchema = z.object({
   id: z.string(),
@@ -116,6 +119,35 @@ const ConfigSchema = z.object({
   ),
 });
 
+export const MetricsSchema = z.object({
+  values: z.record(
+    z.string(),
+    z.array(
+      z.object({
+        value: z.string(),
+        nodeId: z.string(),
+      }),
+    ),
+  ),
+  ranges: z.record(
+    z.string(),
+    z.array(
+      z.object({
+        range: z.array(z.tuple([z.string(), z.string()])),
+        nodeId: z.string().optional(),
+      }),
+    ),
+  ),
+});
+
+export const NodeMetricsResponseSchema = z.object({
+  data: z.object({
+    attributes: z.object({
+      metrics: MetricsSchema.optional().nullable(),
+    }),
+  }),
+});
+
 export type NodeConfig = z.infer<typeof ConfigSchema>;
 
 export type BrokerStatus = z.infer<typeof BrokerStatusSchema>;
@@ -129,3 +161,5 @@ export type Statuses = z.infer<typeof StatusesSchema>;
 export const ConfigResponseSchema = z.object({
   data: ConfigSchema,
 });
+
+export type NodeMetrics = z.infer<typeof NodeMetricsResponseSchema>;

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/ConnectedClusterChartsCard.tsx

@@ -8,28 +8,10 @@ import {
   CardTitle,
   Title,
 } from "@/libs/patternfly/react-core";
-
 import { useTranslations } from "next-intl";
 import { ClusterDetail } from "@/api/kafka/schema";
 import { ClusterChartsCard } from "@/components/ClusterOverview/ClusterChartsCard";
-
-function timeSeriesMetrics(
-  ranges: Record<string, { range: string[][]; nodeId?: string }[]> | undefined,
-  rangeName: string,
-): Record<string, TimeSeriesMetrics> {
-  const series: Record<string, TimeSeriesMetrics> = {};
-
-  if (ranges) {
-    Object.values(ranges[rangeName] ?? {}).forEach((r) => {
-      series[r.nodeId!] = r.range.reduce(
-        (a, v) => ({ ...a, [v[0]]: parseFloat(v[1]) }),
-        {} as TimeSeriesMetrics,
-      );
-    });
-  }
-
-  return series;
-}
+import { timeSeriesMetrics } from "@/components/ClusterOverview/components/timeSeriesMetrics";
 
 export async function ConnectedClusterChartsCard({
   cluster,
@@ -42,6 +24,9 @@ export async function ConnectedClusterChartsCard({
   const isVirtualKafkaCluster =
     res?.meta?.kind === "virtualkafkaclusters.kroxylicious.io";
 
+  const brokerList =
+    res?.relationships?.nodes?.data?.map((n) => `Node ${n.id}`) ?? [];
+
   const metricsUnavailable = res?.attributes.metrics === null;
 
   console.log("is virtual kafka cluster", isVirtualKafkaCluster);
@@ -79,7 +64,9 @@ export async function ConnectedClusterChartsCard({
 
   return (
     <ClusterChartsCard
+      kafkaId={res?.id}
       isLoading={false}
+      brokerList={brokerList}
       usedDiskSpace={timeSeriesMetrics(
         res?.attributes.metrics?.ranges,
         "volume_stats_used_bytes",

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,
   },
 };