UI changes for reconciliation

Signed-off-by: hemahg <[email protected]>

ui/api/kafka/actions.ts

@@ -384,7 +384,7 @@ export async function updateKafkaCluster(
       body: JSON.stringify(body),
     });
 
-    if (res.status === 204) {
+    if (res.status === 200) {
       return true;
     } else {
       return false;

ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/ConnectButton.tsx

@@ -3,6 +3,7 @@
 import { updateKafkaCluster } from "@/api/kafka/actions";
 import { useOpenClusterConnectionPanel } from "@/components/ClusterDrawerContext";
 import { ReconciliationModal } from "@/components/ClusterOverview/ReconciliationModal";
+import { useReconciliationContext } from "@/components/ReconciliationContext";
 import { Button, Flex, FlexItem } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
@@ -13,19 +14,19 @@ export function ConnectButton({ clusterId }: { clusterId: string }) {
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
-  const [isReconciliationPaused, setIsReconciliationPaused] =
-    useState<boolean>(false);
+  const { isReconciliationPaused, setReconciliationPaused } =
+    useReconciliationContext();
 
   const updateReconciliation = async (reconciliationPaused: boolean) => {
-    const success = await updateKafkaCluster(clusterId, reconciliationPaused);
+    try {
+      const success = await updateKafkaCluster(clusterId, reconciliationPaused);
 
-    console.log("hello", success);
-    if (success) {
-      setIsModalOpen(false);
-      setIsReconciliationPaused(true);
-    } else {
-      alert("update failed");
-      setIsModalOpen(false);
+      if (success) {
+        setIsModalOpen(false);
+        setReconciliationPaused(reconciliationPaused);
+      }
+    } catch (e: unknown) {
+      console.log("Unknown error occurred");
     }
   };
 
@@ -37,12 +38,12 @@ export function ConnectButton({ clusterId }: { clusterId: string }) {
             variant="secondary"
             onClick={
               isReconciliationPaused
-                ? () => setIsModalOpen(true)
-                : () => updateReconciliation(false)
+                ? () => updateReconciliation(false)
+                : () => setIsModalOpen(true)
             }
           >
             {isReconciliationPaused
-              ? t("reconciliation.reconciliation_paused")
+              ? t("reconciliation.resume_reconciliation")
               : t("reconciliation.pause_reconciliation_button")}
           </Button>
         </FlexItem>

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

@@ -11,7 +11,6 @@ import { getServerSession } from "next-auth";
 import { useTranslations } from "next-intl";
 import { PropsWithChildren, ReactNode, Suspense } from "react";
 import { KafkaParams } from "./kafka.params";
-import { getKafkaCluster } from "@/api/kafka/actions";
 
 export default async function AsyncLayout({
   children,
@@ -28,20 +27,13 @@ export default async function AsyncLayout({
   const authOptions = await getAuthOptions();
   const session = await getServerSession(authOptions);
 
-  const data = await getKafkaCluster(kafkaId);
-  if (!data) {
-    return null;
-  }
-  const reconciliationPaused = data.meta?.reconciliationPaused;
-
   return (
     <Layout
       username={(session?.user?.name || session?.user?.email) ?? "User"}
       kafkaId={kafkaId}
       activeBreadcrumb={activeBreadcrumb}
       header={header}
       modal={modal}
-      reconciliationPaused={reconciliationPaused && reconciliationPaused}
     >
       {children}
     </Layout>
@@ -55,22 +47,20 @@ function Layout({
   modal,
   kafkaId,
   username,
-  reconciliationPaused,
 }: PropsWithChildren<{
   kafkaId: string;
   username: string;
   header: ReactNode;
   activeBreadcrumb: ReactNode;
   modal: ReactNode;
-  reconciliationPaused?: boolean;
 }>) {
   const t = useTranslations();
   return (
     <AppLayoutProvider>
       <AppLayout
         username={username}
         sidebar={<ClusterLinks kafkaId={kafkaId} />}
-        reconciliationPaused={reconciliationPaused}
+        kafkaId={kafkaId}
       >
         <PageGroup stickyOnBreakpoint={{ default: "top" }}>
           <PageBreadcrumb>

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

@@ -21,7 +21,7 @@ export async function ConnectedClusterCard({
         brokersOnline={undefined}
         brokersTotal={undefined}
         kafkaVersion={res?.cluster.attributes.kafkaVersion || "n/a"}
-        reconciliationPaused={res?.cluster.meta?.reconciliationPaused}
+        kafkaId={res?.cluster.id}
       />
     );
   }
@@ -56,7 +56,7 @@ export async function ConnectedClusterCard({
       brokersOnline={brokersOnline}
       brokersTotal={brokersTotal}
       kafkaVersion={res?.cluster.attributes.kafkaVersion || "n/a"}
-      reconciliationPaused={res?.cluster.meta?.reconciliationPaused}
+      kafkaId={res.cluster.id}
     />
   );
 }

ui/components/AppLayout.tsx

@@ -1,32 +1,26 @@
-import {
-  Banner,
-  Bullseye,
-  Button,
-  Flex,
-  FlexItem,
-  Nav,
-  Page,
-} from "@/libs/patternfly/react-core";
+import { Nav, Page } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { PropsWithChildren, ReactNode } from "react";
 import { AppMasthead } from "./AppMasthead";
 import { AppSidebar } from "./AppSidebar";
 import { ClusterDrawer } from "./ClusterDrawer";
 
 import { ClusterDrawerProvider } from "./ClusterDrawerProvider";
+import { ReconciliationProvider } from "./ReconciliationProvider";
+import { ReconciliationPausedBanner } from "./ReconciliationPausedBanner";
 
 export function AppLayout({
   username,
   sidebar,
   children,
-  reconciliationPaused,
+  kafkaId,
 }: PropsWithChildren<{
   username?: string;
   sidebar?: ReactNode;
-  reconciliationPaused?: boolean;
+  kafkaId?: string;
 }>) {
-  console.log("reconciliationPaused", reconciliationPaused);
   const t = useTranslations();
+
   return (
     <Page
       header={<AppMasthead username={username} showSidebarToggle={!!sidebar} />}
@@ -42,25 +36,10 @@ export function AppLayout({
     >
       {/*<HelpContainer>*/}
       <ClusterDrawerProvider>
-        <ClusterDrawer>
-          {reconciliationPaused && (
-            <Banner variant="gold">
-              <Bullseye>
-                <Flex>
-                  <FlexItem spacer={{ default: "spacerNone" }}>
-                    {t("reconciliation.reconciliation_paused_warning")}
-                  </FlexItem>
-                  <FlexItem spacer={{ default: "spacerLg" }}>
-                    <Button variant="link" isInline>
-                      {t("reconciliation.resume")}
-                    </Button>
-                  </FlexItem>
-                </Flex>
-              </Bullseye>
-            </Banner>
-          )}
-          {children}
-        </ClusterDrawer>
+        <ReconciliationProvider>
+          <ReconciliationPausedBanner kafkaId={kafkaId} />
+          <ClusterDrawer>{children}</ClusterDrawer>
+        </ReconciliationProvider>
       </ClusterDrawerProvider>
       {/*</HelpContainer>*/}
     </Page>

ui/components/ClusterOverview/ClusterCard.tsx

@@ -31,6 +31,7 @@ import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
 import { ErrorsAndWarnings } from "./components/ErrorsAndWarnings";
 import { updateKafkaCluster } from "@/api/kafka/actions";
+import { useReconciliationContext } from "../ReconciliationContext";
 
 type ClusterCardProps = {
   name: string;
@@ -39,7 +40,7 @@ type ClusterCardProps = {
   brokersTotal?: number;
   consumerGroups?: number;
   kafkaVersion: string;
-  reconciliationPaused?: boolean;
+  kafkaId: string | undefined;
   messages: Array<{
     variant: "danger" | "warning";
     subject: { type: "cluster" | "broker" | "topic"; name: string; id: string };
@@ -57,16 +58,37 @@ export function ClusterCard({
   consumerGroups,
   kafkaVersion,
   messages,
-  reconciliationPaused,
+  kafkaId,
 }:
   | ({
       isLoading: false;
     } & ClusterCardProps)
   | ({ isLoading: true } & { [K in keyof ClusterCardProps]?: undefined })) {
   const t = useTranslations();
+
+  const { isReconciliationPaused, setReconciliationPaused } =
+    useReconciliationContext();
+
+  const resumeReconciliation = async () => {
+    if (!kafkaId) {
+      console.log("kafkaId is undefined");
+      return;
+    }
+
+    try {
+      const success = await updateKafkaCluster(kafkaId, false);
+
+      if (success) {
+        setReconciliationPaused(false);
+      }
+    } catch (e: unknown) {
+      console.log("Unknown error occurred");
+    }
+  };
+
   const warnings =
     messages?.filter((m) => m.variant === "warning").length ||
-    0 + (reconciliationPaused ? 1 : 0);
+    0 + (isReconciliationPaused ? 1 : 0);
   const dangers = messages?.filter((m) => m.variant === "danger").length || 0;
 
   return (
@@ -210,7 +232,7 @@ export function ClusterCard({
                   ))
                 ) : (
                   <>
-                    {!reconciliationPaused && messages.length === 0 && (
+                    {!isReconciliationPaused && messages.length === 0 && (
                       <DataListItem aria-labelledby={`no-messages`}>
                         <DataListItemRow>
                           <DataListItemCells
@@ -225,7 +247,7 @@ export function ClusterCard({
                         </DataListItemRow>
                       </DataListItem>
                     )}
-                    {reconciliationPaused && (
+                    {isReconciliationPaused && (
                       <DataListItem aria-labelledby={`reconciliation-warning`}>
                         <DataListItemRow>
                           <DataListItemCells
@@ -263,7 +285,11 @@ export function ClusterCard({
                                 width={1}
                                 className={"pf-v5-u-text-nowrap"}
                               >
-                                <Button variant="link" isInline>
+                                <Button
+                                  variant="link"
+                                  isInline
+                                  onClick={resumeReconciliation}
+                                >
                                   {t("reconciliation.resume")}
                                 </Button>
                               </DataListCell>,

ui/components/ReconciliationContext.tsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+
+export const ReconciliationContext = createContext<{
+  isReconciliationPaused: boolean;
+  setReconciliationPaused: (paused: boolean) => void;
+}>(null!);
+
+export function useReconciliationContext() {
+  return useContext(ReconciliationContext);
+}

ui/components/ReconciliationPausedBanner.tsx

@@ -0,0 +1,50 @@
+
+"use client";
+
+import { Banner, Bullseye, Button, FlexItem, Flex } from "@/libs/patternfly/react-core";
+import { useTranslations } from "next-intl";
+import { useReconciliationContext } from "./ReconciliationContext";
+import { updateKafkaCluster } from "@/api/kafka/actions";
+
+export function ReconciliationPausedBanner({ kafkaId }: { kafkaId: string | undefined }) {
+  const t = useTranslations();
+
+  const { isReconciliationPaused, setReconciliationPaused } = useReconciliationContext();
+
+  const resumeReconciliation = async () => {
+    if (!kafkaId) {
+      console.log("kafkaId is undefined");
+      return;
+    }
+
+    try {
+      const success = await updateKafkaCluster(kafkaId, false);
+
+      if (success) {
+        setReconciliationPaused(false);
+      }
+    } catch (e: unknown) {
+      console.log("Unknown error occurred");
+    }
+  }
+
+  return (
+    isReconciliationPaused && (
+      <Banner variant="gold">
+        <Bullseye>
+          <Flex>
+            <FlexItem spacer={{ default: "spacerNone" }}>
+              {t("reconciliation.reconciliation_paused_warning")}
+            </FlexItem>
+            <FlexItem spacer={{ default: "spacerLg" }}>
+              <Button variant="link" isInline onClick={resumeReconciliation}>
+                {t("reconciliation.resume")}
+              </Button>
+            </FlexItem>
+          </Flex>
+        </Bullseye>
+      </Banner>
+    )
+  )
+}
+

ui/components/ReconciliationProvider.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import { ReconciliationContext } from "./ReconciliationContext";
+
+export function ReconciliationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isReconciliationPaused, setIsReconciliationPaused] =
+    useState<boolean>(false);
+
+  const setReconciliationPaused = (paused: boolean) => {
+    setIsReconciliationPaused(paused);
+  };
+
+  return (
+    <ReconciliationContext.Provider
+      value={{ isReconciliationPaused, setReconciliationPaused }}
+    >
+      {children}
+    </ReconciliationContext.Provider>
+  );
+}

ui/messages/en.json

@@ -361,13 +361,14 @@
   },
   "reconciliation": {
     "pause_reconciliation_button": "Pause Reconciliation",
-    "pause_reconciliation": "Pause cluster reconciliation",
+    "pause_reconciliation": "Pause cluster reconciliation?",
     "pause_reconciliation_description": "While paused, any changes to the cluster configuration will be ignored until reconciliation is resumed",
     "confirm": "Confirm",
     "cancel": "Cancel",
     "reconciliation_paused_warning": "Reconciliation paused. Make sure to fetch the last transition time.",
     "resume": "Resume",
-    "reconciliation_paused": "Reconciliation paused"
+    "reconciliation_paused": "Reconciliation paused",
+    "resume_reconciliation": "Resume Reconciliation"
   },
   "AlertTopicGone": {
     "topic_not_found": "Topic not found",