Pass Kafka cluster from layout for drawer/paused banner

Signed-off-by: Michael Edgar <[email protected]>
streamshub · Oct 17, 2024 · 18d0ca0 · 18d0ca0
1 parent ae3275c
commit 18d0ca0
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 115 deletions.
diff --git a/ui/api/kafka/schema.ts b/ui/api/kafka/schema.ts
@@ -43,7 +43,7 @@ const ClusterDetailSchema = z.object({
   type: z.literal("kafkas"),
   meta: z
     .object({
-      reconciliationPaused: z.boolean(),
+      reconciliationPaused: z.boolean().optional(),
     })
     .optional(),
   attributes: z.object({

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/ClusterLinks.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/ClusterLinks.tsx
@@ -1,21 +1,16 @@
-import { getKafkaCluster } from "@/api/kafka/actions";
 import { NavItemLink } from "@/components/Navigation/NavItemLink";
 import { NavGroup, NavList } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
-import { Suspense } from "react";
+import { ClusterDetail } from "@/api/kafka/schema";
 
-export function ClusterLinks({ kafkaId }: { kafkaId: string }) {
+export function ClusterLinks({ kafkaCluster }: { kafkaCluster: ClusterDetail; }) {
   const t = useTranslations();
+  const kafkaId = kafkaCluster.id;
+
   return (
     <NavList>
       <NavGroup
-        title={
-          (
-            <Suspense>
-              <ClusterName kafkaId={kafkaId} />
-            </Suspense>
-          ) as unknown as string
-        }
+        title={ kafkaCluster?.attributes.name ?? `Cluster ${kafkaId}` }
       >
         <NavItemLink url={`/kafka/${kafkaId}/overview`}>
           {t("AppLayout.cluster_overview")}
@@ -26,20 +21,10 @@ export function ClusterLinks({ kafkaId }: { kafkaId: string }) {
         <NavItemLink url={`/kafka/${kafkaId}/nodes`}>
           {t("AppLayout.brokers")}
         </NavItemLink>
-        {/*
-      <NavItemLink url={`/kafka/${kafkaId}/service-registry`}>
-        Service registry
-      </NavItemLink>
-*/}
         <NavItemLink url={`/kafka/${kafkaId}/consumer-groups`}>
           {t("AppLayout.consumer_groups")}
         </NavItemLink>
       </NavGroup>
     </NavList>
   );
 }
-
-async function ClusterName({ kafkaId }: { kafkaId: string }) {
-  const cluster = await getKafkaCluster(kafkaId);
-  return cluster?.attributes.name ?? `Cluster ${kafkaId}`;
-}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/layout.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/layout.tsx
@@ -1,3 +1,5 @@
+import { notFound } from "next/navigation";
+import { getKafkaCluster } from "@/api/kafka/actions";
 import { ClusterLinks } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/ClusterLinks";
 import { getAuthOptions } from "@/app/api/auth/[...nextauth]/route";
 import { AppLayout } from "@/components/AppLayout";
@@ -8,9 +10,9 @@ import {
   PageGroup,
 } from "@/libs/patternfly/react-core";
 import { getServerSession } from "next-auth";
-import { useTranslations } from "next-intl";
 import { PropsWithChildren, ReactNode, Suspense } from "react";
 import { KafkaParams } from "./kafka.params";
+import { ClusterDetail } from "@/api/kafka/schema";
 
 export default async function AsyncLayout({
   children,
@@ -26,11 +28,16 @@ export default async function AsyncLayout({
 }>) {
   const authOptions = await getAuthOptions();
   const session = await getServerSession(authOptions);
+  const cluster = await getKafkaCluster(kafkaId);
+
+  if (!cluster) {
+    notFound();
+  }
 
   return (
     <Layout
-      username={(session?.user?.name || session?.user?.email) ?? "User"}
-      kafkaId={kafkaId}
+      username={(session?.user?.name ?? session?.user?.email) ?? "User"}
+      kafkaCluster={cluster}
       activeBreadcrumb={activeBreadcrumb}
       header={header}
       modal={modal}
@@ -45,22 +52,21 @@ function Layout({
   activeBreadcrumb,
   header,
   modal,
-  kafkaId,
+  kafkaCluster,
   username,
 }: PropsWithChildren<{
-  kafkaId: string;
+  kafkaCluster: ClusterDetail;
   username: string;
   header: ReactNode;
   activeBreadcrumb: ReactNode;
   modal: ReactNode;
 }>) {
-  const t = useTranslations();
   return (
     <AppLayoutProvider>
       <AppLayout
         username={username}
-        sidebar={<ClusterLinks kafkaId={kafkaId} />}
-        kafkaId={kafkaId}
+        sidebar={<ClusterLinks kafkaCluster={kafkaCluster} />}
+        kafkaCluster={kafkaCluster}
       >
         <PageGroup stickyOnBreakpoint={{ default: "top" }}>
           <PageBreadcrumb>

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx
@@ -14,31 +14,32 @@ export async function ConnectedClusterCard({
     return (
       <ClusterCard
         isLoading={false}
-        status={res?.cluster.attributes.status || "n/a"}
+        status={res?.cluster.attributes.status ?? "n/a"}
         messages={[]}
-        name={res?.cluster.attributes.name || "n/a"}
+        name={res?.cluster.attributes.name ?? "n/a"}
         consumerGroups={undefined}
         brokersOnline={undefined}
         brokersTotal={undefined}
-        kafkaVersion={res?.cluster.attributes.kafkaVersion || "n/a"}
+        kafkaVersion={res?.cluster.attributes.kafkaVersion ?? "n/a"}
         kafkaId={res?.cluster.id}
+        reconciliationPaused={res?.cluster.meta?.reconciliationPaused ?? false}
       />
     );
   }
   const groupCount = await consumerGroups.then(
     (grpResp) => grpResp?.meta.page.total ?? 0,
   );
-  const brokersTotal = Object.keys(res?.kpis.broker_state || {}).length;
+  const brokersTotal = Object.keys(res?.kpis.broker_state ?? {}).length;
   const brokersOnline =
-    Object.values(res?.kpis.broker_state || {}).filter((s) => s === 3).length ||
+    Object.values(res?.kpis.broker_state ?? {}).filter((s) => s === 3).length ||
     0;
   const messages = res?.cluster.attributes.conditions
     ?.filter((c) => "Ready" !== c.type)
     .map((c) => ({
       variant:
         c.type === "Error" ? "danger" : ("warning" as "danger" | "warning"),
       subject: {
-        type: "cluster" as "cluster" | "broker" | "topic",
+        type: c.type!,
         name: res?.cluster.attributes.name ?? "",
         id: res?.cluster.id ?? "",
       },
@@ -49,14 +50,15 @@ export async function ConnectedClusterCard({
   return (
     <ClusterCard
       isLoading={false}
-      status={res?.cluster.attributes.status || "n/a"}
+      status={res?.cluster.attributes.status ?? "n/a"}
       messages={messages ?? []}
       name={res?.cluster.attributes.name || "n/a"}
       consumerGroups={groupCount}
       brokersOnline={brokersOnline}
       brokersTotal={brokersTotal}
-      kafkaVersion={res?.cluster.attributes.kafkaVersion || "n/a"}
+      kafkaVersion={res?.cluster.attributes.kafkaVersion ?? "n/a"}
       kafkaId={res.cluster.id}
+      reconciliationPaused={res?.cluster.meta?.reconciliationPaused ?? false}
     />
   );
 }
diff --git a/ui/components/AppLayout.tsx b/ui/components/AppLayout.tsx
@@ -3,6 +3,7 @@ import { useTranslations } from "next-intl";
 import { PropsWithChildren, ReactNode } from "react";
 import { AppMasthead } from "./AppMasthead";
 import { AppSidebar } from "./AppSidebar";
+import { ClusterDetail } from "@/api/kafka/schema";
 import { ClusterDrawer } from "./ClusterDrawer";
 
 import { ClusterDrawerProvider } from "./ClusterDrawerProvider";
@@ -12,12 +13,12 @@ import { ReconciliationPausedBanner } from "./ReconciliationPausedBanner";
 export function AppLayout({
   username,
   sidebar,
+  kafkaCluster,
   children,
-  kafkaId,
 }: PropsWithChildren<{
   username?: string;
   sidebar?: ReactNode;
-  kafkaId?: string;
+  kafkaCluster?: ClusterDetail;
 }>) {
   const t = useTranslations();
 
@@ -37,7 +38,9 @@ export function AppLayout({
       {/*<HelpContainer>*/}
       <ClusterDrawerProvider>
         <ReconciliationProvider>
-          <ReconciliationPausedBanner kafkaId={kafkaId} />
+          {kafkaCluster && (
+            <ReconciliationPausedBanner kafkaCluster={kafkaCluster} />
+          )}
           <ClusterDrawer>{children}</ClusterDrawer>
         </ReconciliationProvider>
       </ClusterDrawerProvider>

diff --git a/ui/components/ClusterOverview/ClusterCard.tsx b/ui/components/ClusterOverview/ClusterCard.tsx
@@ -41,9 +41,10 @@ type ClusterCardProps = {
   consumerGroups?: number;
   kafkaVersion: string;
   kafkaId: string | undefined;
+  reconciliationPaused: boolean;
   messages: Array<{
     variant: "danger" | "warning";
-    subject: { type: "cluster" | "broker" | "topic"; name: string; id: string };
+    subject: { type: string; name: string; id: string };
     message: string;
     date: string;
   }>;
@@ -59,6 +60,7 @@ export function ClusterCard({
   kafkaVersion,
   messages,
   kafkaId,
+  reconciliationPaused,
 }:
   | ({
       isLoading: false;
@@ -69,6 +71,8 @@ export function ClusterCard({
   const { isReconciliationPaused, setReconciliationPaused } =
     useReconciliationContext();
 
+  setReconciliationPaused(reconciliationPaused as boolean);
+
   const resumeReconciliation = async () => {
     if (!kafkaId) {
       console.log("kafkaId is undefined");
@@ -232,7 +236,7 @@ export function ClusterCard({
                   ))
                 ) : (
                   <>
-                    {!isReconciliationPaused && messages.length === 0 && (
+                    {messages.length === 0 && (
                       <DataListItem aria-labelledby={`no-messages`}>
                         <DataListItemRow>
                           <DataListItemCells
@@ -247,69 +251,6 @@ export function ClusterCard({
                         </DataListItemRow>
                       </DataListItem>
                     )}
-                    {isReconciliationPaused && (
-                      <DataListItem aria-labelledby={`reconciliation-warning`}>
-                        <DataListItemRow>
-                          <DataListItemCells
-                            dataListCells={[
-                              <DataListCell
-                                key="warning-message"
-                                className={"pf-v5-u-text-nowrap"}
-                                width={2}
-                              >
-                                <Icon status={"warning"}>
-                                  <ExclamationTriangleIcon />
-                                </Icon>
-                                &nbsp;
-                                <Truncate
-                                  content={t(
-                                    "reconciliation.reconciliation_paused",
-                                  )}
-                                />
-                              </DataListCell>,
-                              <DataListCell key="message" width={3}>
-                                <div
-                                  className={
-                                    "pf-v5-u-display-none pf-v5-u-display-block-on-md"
-                                  }
-                                >
-                                  <Truncate
-                                    content={t(
-                                      "reconciliation.reconciliation_paused_warning",
-                                    )}
-                                  />
-                                </div>
-                              </DataListCell>,
-                              <DataListCell
-                                key="button"
-                                width={1}
-                                className={"pf-v5-u-text-nowrap"}
-                              >
-                                <Button
-                                  variant="link"
-                                  isInline
-                                  onClick={resumeReconciliation}
-                                >
-                                  {t("reconciliation.resume")}
-                                </Button>
-                              </DataListCell>,
-                              <DataListCell
-                                key="date"
-                                width={1}
-                                className={"pf-v5-u-text-nowrap"}
-                              >
-                                <DateTime
-                                  value={new Date(Date.now())}
-                                  tz={"UTC"}
-                                  dateStyle={"short"}
-                                  timeStyle={"short"}
-                                />
-                              </DataListCell>,
-                            ]}
-                          />
-                        </DataListItemRow>
-                      </DataListItem>
-                    )}
                     {messages
                       .sort((a, b) => a.date.localeCompare(b.date))
                       .reverse()
@@ -321,7 +262,7 @@ export function ClusterCard({
                                 <DataListCell
                                   key="name"
                                   className={"pf-v5-u-text-nowrap"}
-                                  width={2}
+                                  width={1}
                                 >
                                   <Icon status={m.variant}>
                                     {m.variant === "danger" && (
@@ -332,17 +273,26 @@ export function ClusterCard({
                                     )}
                                   </Icon>
                                   &nbsp;
-                                  <Link href={""} id={`message-${i}`}>
-                                    <Truncate content={m.subject.name} />
-                                  </Link>
+                                  {m.subject.type}
                                 </DataListCell>,
-                                <DataListCell key="message" width={4}>
+                                <DataListCell key="message" width={5}>
                                   <div
                                     className={
                                       "pf-v5-u-display-none pf-v5-u-display-block-on-md"
                                     }
                                   >
-                                    <Truncate content={m.message} />
+                                    <Truncate content={ m.subject.type === 'ReconciliationPaused'
+                                        ? t("reconciliation.reconciliation_paused_warning",)
+                                        : m.message}
+                                    />
+                                    {m.subject.type === 'ReconciliationPaused' && (
+                                      <>
+                                        &nbsp;
+                                        <Button variant="link" isInline onClick={resumeReconciliation}>
+                                          {t("reconciliation.resume")}
+                                        </Button>
+                                      </>
+                                    )}
                                   </div>
                                   <div
                                     className={

diff --git a/ui/components/ReconciliationPausedBanner.tsx b/ui/components/ReconciliationPausedBanner.tsx
@@ -5,20 +5,23 @@ import { Banner, Bullseye, Button, FlexItem, Flex } from "@/libs/patternfly/reac
 import { useTranslations } from "next-intl";
 import { useReconciliationContext } from "./ReconciliationContext";
 import { updateKafkaCluster } from "@/api/kafka/actions";
+import { ClusterDetail } from "@/api/kafka/schema";
 
-export function ReconciliationPausedBanner({ kafkaId }: { kafkaId: string | undefined }) {
+export function ReconciliationPausedBanner({ kafkaCluster }: { kafkaCluster: ClusterDetail; }) {
   const t = useTranslations();
 
   const { isReconciliationPaused, setReconciliationPaused } = useReconciliationContext();
 
+  setReconciliationPaused(kafkaCluster.meta?.reconciliationPaused ?? false);
+
   const resumeReconciliation = async () => {
-    if (!kafkaId) {
-      console.log("kafkaId is undefined");
+    if (!kafkaCluster) {
+      console.log("kafkaCluster is undefined");
       return;
     }
 
     try {
-      const success = await updateKafkaCluster(kafkaId, false);
+      const success = await updateKafkaCluster(kafkaCluster.id, false);
 
       if (success) {
         setReconciliationPaused(false);
@@ -36,6 +39,7 @@ export function ReconciliationPausedBanner({ kafkaId }: { kafkaId: string | unde
             <FlexItem spacer={{ default: "spacerNone" }}>
               {t("reconciliation.reconciliation_paused_warning")}
             </FlexItem>
+            &nbsp;
             <FlexItem spacer={{ default: "spacerLg" }}>
               <Button variant="link" isInline onClick={resumeReconciliation}>
                 {t("reconciliation.resume")}