Incorporate review comments

Signed-off-by: hemahg <[email protected]>
streamshub · Oct 3, 2024 · 0e6b29a · 0e6b29a
1 parent ca88cd2
commit 0e6b29a
Show file tree

Hide file tree

Showing 11 changed files with 421 additions and 239 deletions.
diff --git a/ui/api/rebalance/actions.ts b/ui/api/rebalance/actions.ts
@@ -9,14 +9,15 @@ import {
 } from "./schema";
 import { filterUndefinedFromObj } from "@/utils/filterUndefinedFromObj";
 import { getHeaders } from "@/api/api";
+import { RebalanceMode } from "./schema";
 
 const log = logger.child({ module: "rebalance-api" });
 
 export async function getRebalancesList(
   kafkaId: string,
   params: {
     name?: string;
-    mode?: string;
+    mode?: RebalanceMode[];
     status?: RebalanceStatus[];
     pageSize?: number;
     pageCursor?: string;
@@ -27,13 +28,16 @@ export async function getRebalancesList(
   const sp = new URLSearchParams(
     filterUndefinedFromObj({
       "fields[kafkaRebalances]":
-        "name,namespace,creationTimestamp,status,mode,brokers",
+        "name,namespace,creationTimestamp,status,mode,brokers,optimizationResult",
       "filter[name]": params.name ? `like,*${params.name}*` : undefined,
       "filter[status]":
         params.status && params.status.length > 0
           ? `in,${params.status.join(",")}`
           : undefined,
-      "filter[mode]": params.mode ? `like,*${params.mode}*` : undefined,
+      "filter[mode]":
+        params.mode && params.mode.length > 0
+          ? `in,${params.mode.join(",")}`
+          : undefined,
       "page[size]": params.pageSize,
       "page[after]": params.pageCursor,
       sort: params.sort

diff --git a/ui/api/rebalance/schema.ts b/ui/api/rebalance/schema.ts
@@ -11,22 +11,28 @@ const RebalanceStatusSchema = z.union([
   z.literal("ReconciliationPaused"),
 ]);
 
+const ModeSchema = z.union([
+  z.literal("full"),
+  z.literal("add-brokers"),
+  z.literal("remove-brokers"),
+]);
+
 const OptimizationResultSchema = z.object({
-  numIntraBrokerReplicaMovements: z.number(),
-  numReplicaMovements: z.number(),
-  onDemandBalancednessScoreAfter: z.number(),
-  afterBeforeLoadConfigMap: z.string(),
-  intraBrokerDataToMoveMB: z.number(),
-  monitoredPartitionsPercentage: z.number(),
-  provisionRecommendation: z.string(),
-  excludedBrokersForReplicaMove: z.array(z.string()).nullable(),
-  excludedBrokersForLeadership: z.array(z.string()).nullable(),
-  provisionStatus: z.string(),
-  onDemandBalancednessScoreBefore: z.number(),
-  recentWindows: z.number(),
-  dataToMoveMB: z.number(),
-  excludedTopics: z.array(z.string()).nullable(),
-  numLeaderMovements: z.number(),
+  numIntraBrokerReplicaMovements: z.number().optional(),
+  numReplicaMovements: z.number().optional(),
+  onDemandBalancednessScoreAfter: z.number().optional(),
+  afterBeforeLoadConfigMap: z.string().optional(),
+  intraBrokerDataToMoveMB: z.number().optional(),
+  monitoredPartitionsPercentage: z.number().optional(),
+  provisionRecommendation: z.string().optional(),
+  excludedBrokersForReplicaMove: z.array(z.string()).nullable().optional(),
+  excludedBrokersForLeadership: z.array(z.string()).nullable().optional(),
+  provisionStatus: z.string().optional(),
+  onDemandBalancednessScoreBefore: z.number().optional(),
+  recentWindows: z.number().optional(),
+  dataToMoveMB: z.number().optional(),
+  excludedTopics: z.array(z.string()).nullable().optional(),
+  numLeaderMovements: z.number().optional(),
 });
 
 export const RebalanceSchema = z.object({
@@ -43,7 +49,7 @@ export const RebalanceSchema = z.object({
     namespace: z.string(),
     creationTimestamp: z.string(),
     status: RebalanceStatusSchema,
-    mode: z.string().optional(),
+    mode: ModeSchema,
     brokers: z.array(z.number()).nullable(),
     sessionId: z.string().nullable(),
     optimizationResult: OptimizationResultSchema,
@@ -67,6 +73,7 @@ const RebalancesListSchema = z.object({
     creationTimestamp: true,
     mode: true,
     brokers: true,
+    optimizationResult: true
   }),
 });
 
@@ -91,3 +98,5 @@ export type RebalancesResponse = z.infer<typeof RebalanceResponseSchema>;
 export type RebalanceResponse = z.infer<typeof RebalanceSchema>;
 
 export type RebalanceStatus = z.infer<typeof RebalanceStatusSchema>;
+
+export type RebalanceMode = z.infer<typeof ModeSchema>;
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/page.tsx
@@ -1,5 +1,5 @@
 import { BreadcrumbItem } from "@/libs/patternfly/react-core";
 
-export default function TopicsActiveBreadcrumb() {
+export default function NodesActiveBreadcrumb() {
   return <BreadcrumbItem showDivider={true}>Brokers</BreadcrumbItem>;
 }
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/rebalances/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@activeBreadcrumb/nodes/rebalances/page.tsx
@@ -0,0 +1,5 @@
+import { BreadcrumbItem } from "@/libs/patternfly/react-core";
+
+export default function RebalanceActiveBreadcrumb() {
+  return <BreadcrumbItem showDivider={true}>Brokers</BreadcrumbItem>;
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/nodes/rebalances/page.tsx
@@ -0,0 +1,87 @@
+import { getKafkaCluster } from "@/api/kafka/actions";
+import { KafkaParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/kafka.params";
+import { AppHeader } from "@/components/AppHeader";
+import { Number } from "@/components/Format/Number";
+import { NavItemLink } from "@/components/Navigation/NavItemLink";
+import {
+  Label,
+  Nav,
+  NavList,
+  PageNavigation,
+  Spinner,
+  Split,
+  SplitItem,
+} from "@/libs/patternfly/react-core";
+import { CheckCircleIcon } from "@/libs/patternfly/react-icons";
+import { Suspense } from "react";
+
+export default function NodesHeader({ params }: { params: KafkaParams }) {
+  return (
+    <Suspense
+      fallback={<Header kafkaId={undefined} cruiseControlEnable={false} />}
+    >
+      <ConnectedHeader params={params} />
+    </Suspense>
+  );
+}
+
+async function ConnectedHeader({ params }: { params: KafkaParams }) {
+  const cluster = await getKafkaCluster(params.kafkaId);
+  return (
+    <Header
+      total={cluster?.attributes.nodes.length || 0}
+      kafkaId={cluster?.id}
+      cruiseControlEnable={cluster?.attributes.cruiseControlEnabled || false}
+    />
+  );
+}
+
+function Header({
+  total,
+  kafkaId,
+  cruiseControlEnable,
+}: {
+  total?: number;
+  kafkaId: string | undefined;
+  cruiseControlEnable: boolean;
+}) {
+  return (
+    <AppHeader
+      title={
+        <Split hasGutter={true}>
+          <SplitItem>Brokers</SplitItem>
+          <SplitItem>
+            <Label
+              color={"green"}
+              icon={
+                total === undefined ? (
+                  <Spinner size={"sm"} />
+                ) : (
+                  <CheckCircleIcon />
+                )
+              }
+            >
+              {total && <Number value={total} />}
+            </Label>
+          </SplitItem>
+        </Split>
+      }
+      navigation={
+        <PageNavigation>
+          <Nav aria-label="Node navigation" variant="tertiary">
+            <NavList>
+              <NavItemLink url={`/kafka/${kafkaId}/nodes`}>
+                Overview
+              </NavItemLink>
+              {cruiseControlEnable && (
+                <NavItemLink url={`/kafka/${kafkaId}/nodes/rebalances`}>
+                  Rebalance
+                </NavItemLink>
+              )}
+            </NavList>
+          </Nav>
+        </PageNavigation>
+      }
+    />
+  );
+}