UI changes for reconciliation pause

Signed-off-by: hemahg <[email protected]>
streamshub · Oct 15, 2024 · 4620e30 · 4620e30
1 parent 580b5a7
commit 4620e30
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 44 deletions.
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/ConnectButton.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/ConnectButton.tsx
@@ -3,13 +3,7 @@
 import { updateKafkaCluster } from "@/api/kafka/actions";
 import { useOpenClusterConnectionPanel } from "@/components/ClusterDrawerContext";
 import { ReconciliationModal } from "@/components/ClusterOverview/ReconciliationModal";
-import {
-  Button,
-  Flex,
-  FlexItem,
-  Grid,
-  GridItem,
-} from "@/libs/patternfly/react-core";
+import { Button, Flex, FlexItem } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
@@ -19,23 +13,37 @@ export function ConnectButton({ clusterId }: { clusterId: string }) {
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
-  const handleSave = async () => {
-    try {
-      const success = await updateKafkaCluster(clusterId, true);
-      if (success) {
-        setIsModalOpen(false);
-      }
-    } catch (e: unknown) {
-      console.log("Unknown error occurred");
+  const [isReconciliationPaused, setIsReconciliationPaused] =
+    useState<boolean>(false);
+
+  const updateReconciliation = async (reconciliationPaused: boolean) => {
+    const success = await updateKafkaCluster(clusterId, reconciliationPaused);
+
+    console.log("hello", success);
+    if (success) {
+      setIsModalOpen(false);
+      setIsReconciliationPaused(true);
+    } else {
+      alert("update failed");
+      setIsModalOpen(false);
     }
   };
 
   return (
     <>
       <Flex>
         <FlexItem>
-          <Button variant="secondary" onClick={() => setIsModalOpen(true)}>
-            {t("reconciliation.pause_reconciliation_button")}
+          <Button
+            variant="secondary"
+            onClick={
+              isReconciliationPaused
+                ? () => setIsModalOpen(true)
+                : () => updateReconciliation(false)
+            }
+          >
+            {isReconciliationPaused
+              ? t("reconciliation.reconciliation_paused")
+              : t("reconciliation.pause_reconciliation_button")}
           </Button>
         </FlexItem>
         <FlexItem>
@@ -48,7 +56,7 @@ export function ConnectButton({ clusterId }: { clusterId: string }) {
         <ReconciliationModal
           isModalOpen={isModalOpen}
           onClickClose={() => setIsModalOpen(false)}
-          onClickPauseReconciliation={handleSave}
+          onClickPauseReconciliation={() => updateReconciliation(true)}
         />
       )}
     </>

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx b/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"}
-        reconciliationPuased={res?.cluster.meta?.reconciliationPaused}
+        reconciliationPaused={res?.cluster.meta?.reconciliationPaused}
       />
     );
   }
@@ -56,7 +56,7 @@ export async function ConnectedClusterCard({
       brokersOnline={brokersOnline}
       brokersTotal={brokersTotal}
       kafkaVersion={res?.cluster.attributes.kafkaVersion || "n/a"}
-      reconciliationPuased={res?.cluster.meta?.reconciliationPaused}
+      reconciliationPaused={res?.cluster.meta?.reconciliationPaused}
     />
   );
 }
diff --git a/ui/app/[locale]/(authorized)/layout.tsx b/ui/app/[locale]/(authorized)/layout.tsx
@@ -2,8 +2,6 @@ import { getAuthOptions } from "@/app/api/auth/[...nextauth]/route";
 
 import { getServerSession } from "next-auth";
 import { ReactNode } from "react";
-import { AppLayout } from "../../../components/AppLayout";
-import { AppLayoutProvider } from "../../../components/AppLayoutProvider";
 import { AppSessionProvider } from "./AppSessionProvider";
 import { SessionRefresher } from "./SessionRefresher";
 

diff --git a/ui/components/AppLayout.tsx b/ui/components/AppLayout.tsx
@@ -25,6 +25,7 @@ export function AppLayout({
   sidebar?: ReactNode;
   reconciliationPaused?: boolean;
 }>) {
+  console.log("reconciliationPaused", reconciliationPaused);
   const t = useTranslations();
   return (
     <Page
@@ -42,20 +43,22 @@ export function AppLayout({
       {/*<HelpContainer>*/}
       <ClusterDrawerProvider>
         <ClusterDrawer>
-          <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>
+          {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>
       </ClusterDrawerProvider>

diff --git a/ui/components/ClusterOverview/ClusterCard.stories.tsx b/ui/components/ClusterOverview/ClusterCard.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof ClusterCard>;
 export const WithData: Story = {
   args: {
     isLoading: false,
-    reconciliationPuased: true,
+    reconciliationPaused: true,
     name: "my-kafka-cluster",
     status: "ready",
     brokersTotal: 9999,
@@ -72,7 +72,7 @@ export const NoMessages: Story = {
     brokersOnline: 9999,
     consumerGroups: 9999,
     kafkaVersion: "3.5.6",
-    reconciliationPuased: false,
+    reconciliationPaused: false,
     messages: [],
   },
 };

diff --git a/ui/components/ClusterOverview/ClusterCard.tsx b/ui/components/ClusterOverview/ClusterCard.tsx
@@ -30,6 +30,7 @@ import {
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
 import { ErrorsAndWarnings } from "./components/ErrorsAndWarnings";
+import { updateKafkaCluster } from "@/api/kafka/actions";
 
 type ClusterCardProps = {
   name: string;
@@ -38,7 +39,7 @@ type ClusterCardProps = {
   brokersTotal?: number;
   consumerGroups?: number;
   kafkaVersion: string;
-  reconciliationPuased?: boolean;
+  reconciliationPaused?: boolean;
   messages: Array<{
     variant: "danger" | "warning";
     subject: { type: "cluster" | "broker" | "topic"; name: string; id: string };
@@ -56,15 +57,18 @@ export function ClusterCard({
   consumerGroups,
   kafkaVersion,
   messages,
-  reconciliationPuased,
+  reconciliationPaused,
 }:
   | ({
       isLoading: false;
     } & ClusterCardProps)
   | ({ isLoading: true } & { [K in keyof ClusterCardProps]?: undefined })) {
   const t = useTranslations();
-  const warnings = messages?.filter((m) => m.variant === "warning").length || 0;
+  const warnings =
+    messages?.filter((m) => m.variant === "warning").length ||
+    0 + (reconciliationPaused ? 1 : 0);
   const dangers = messages?.filter((m) => m.variant === "danger").length || 0;
+
   return (
     <Card component={"div"}>
       <CardBody>
@@ -206,7 +210,7 @@ export function ClusterCard({
                   ))
                 ) : (
                   <>
-                    {!reconciliationPuased && messages.length === 0 && (
+                    {!reconciliationPaused && messages.length === 0 && (
                       <DataListItem aria-labelledby={`no-messages`}>
                         <DataListItemRow>
                           <DataListItemCells
@@ -221,7 +225,7 @@ export function ClusterCard({
                         </DataListItemRow>
                       </DataListItem>
                     )}
-                    {reconciliationPuased && (
+                    {reconciliationPaused && (
                       <DataListItem aria-labelledby={`reconciliation-warning`}>
                         <DataListItemRow>
                           <DataListItemCells
@@ -259,7 +263,7 @@ export function ClusterCard({
                                 width={1}
                                 className={"pf-v5-u-text-nowrap"}
                               >
-                                <Button variant="link" isInline>
+                                <Button variant="link" isInline on>
                                   {t("reconciliation.resume")}
                                 </Button>
                               </DataListCell>,