From 2b71e2fa420788f8b53ae7566fa650248cb63825 Mon Sep 17 00:00:00 2001
From: hemahg <hhg@redhat.com>
Date: Fri, 25 Oct 2024 12:17:58 +0530
Subject: [PATCH] incorporate review comment

Signed-off-by: hemahg <hhg@redhat.com>
---
 .../overview/ConnectedClusterCard.tsx         |  6 +-
 ui/components/AppLayout.tsx                   | 14 ++-
 ui/components/ClusterOverview/ClusterCard.tsx | 99 ++++++-------------
 ui/components/ReconciliationProvider.tsx      |  4 +
 4 files changed, 43 insertions(+), 80 deletions(-)

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx
index 551ed1873..9f29a655c 100644
--- a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx
+++ b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/overview/ConnectedClusterCard.tsx
@@ -25,13 +25,9 @@ export async function ConnectedClusterCard({
       />
     );
   }
-
-  console.log("response data", res)
   const groupCount = await consumerGroups.then(
     (grpResp) => grpResp?.meta.page.total ?? 0,
   );
-
-  console.log("group count", groupCount)
   const brokersTotal = Object.keys(res?.kpis.broker_state ?? {}).length;
   const brokersOnline =
     Object.values(res?.kpis.broker_state ?? {}).filter((s) => s === 3).length ||
@@ -42,7 +38,7 @@ export async function ConnectedClusterCard({
       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 ?? "",
       },
diff --git a/ui/components/AppLayout.tsx b/ui/components/AppLayout.tsx
index c460dcd12..8e755903a 100644
--- a/ui/components/AppLayout.tsx
+++ b/ui/components/AppLayout.tsx
@@ -20,6 +20,8 @@ export function AppLayout({
   kafkaId?: string;
 }>) {
   const t = useTranslations();
+
+  const isValidKafkaId = !!kafkaId;
   return (
     <Page
       header={<AppMasthead username={username} showSidebarToggle={!!sidebar} />}
@@ -35,10 +37,14 @@ export function AppLayout({
     >
       {/*<HelpContainer>*/}
       <ClusterDrawerProvider>
-        <ReconciliationProvider kafkaId={kafkaId || ""}>
-          <ReconciliationPausedBanner kafkaId={kafkaId || ""} />
-          <ClusterDrawer>{children}</ClusterDrawer>
-        </ReconciliationProvider>
+        {isValidKafkaId ? (
+          <ReconciliationProvider kafkaId={kafkaId}>
+            <ReconciliationPausedBanner kafkaId={kafkaId} />
+            <ClusterDrawer>{children}</ClusterDrawer>
+          </ReconciliationProvider>
+        ) : (
+          <></>
+        )}
       </ClusterDrawerProvider>
       {/*</HelpContainer>*/}
     </Page>
diff --git a/ui/components/ClusterOverview/ClusterCard.tsx b/ui/components/ClusterOverview/ClusterCard.tsx
index 68153c4cc..a65178eb0 100644
--- a/ui/components/ClusterOverview/ClusterCard.tsx
+++ b/ui/components/ClusterOverview/ClusterCard.tsx
@@ -43,7 +43,7 @@ type ClusterCardProps = {
   kafkaId: string | undefined;
   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;
   }>;
@@ -232,7 +232,7 @@ export function ClusterCard({
                   ))
                 ) : (
                   <>
-                    {!isReconciliationPaused && messages.length === 0 && (
+                    {messages.length === 0 && (
                       <DataListItem aria-labelledby={`no-messages`}>
                         <DataListItemRow>
                           <DataListItemCells
@@ -247,69 +247,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 +258,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 +269,37 @@ 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/ReconciliationProvider.tsx b/ui/components/ReconciliationProvider.tsx
index dccbf76f1..bc5ef0c6e 100644
--- a/ui/components/ReconciliationProvider.tsx
+++ b/ui/components/ReconciliationProvider.tsx
@@ -19,6 +19,10 @@ export function ReconciliationProvider({
   };
 
   useEffect(() => {
+    if (!kafkaId) {
+      return;
+    }
+
     const fetchReconciliationState = async () => {
       try {
         const cluster = await getKafkaCluster(kafkaId);