Add refresh modal

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

Hide file tree

Showing 6 changed files with 40 additions and 9 deletions.
diff --git a/...p/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/schema-registry/page.tsx b/...p/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/schema-registry/page.tsx
@@ -1,3 +1,10 @@
-import { TopicHeader } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader";
+import {
+  TopicHeader,
+  TopicHeaderProps,
+} from "@/app/[locale]/(authorized)/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader";
 
-export default TopicHeader;
+export default function TopicHeaderNoRefresh(
+  props: Omit<TopicHeaderProps, "showRefresh">,
+) {
+  return <TopicHeader {...props} showRefresh={false} />;
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/ConnectedRebalancesTable.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/ConnectedRebalancesTable.tsx
@@ -68,7 +68,9 @@ export function ConnectedReabalancesTable({
 
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const [approvalStatus, setApprovalStatus] = useState<"approve" | "stop">("approve");
+  const [approvalStatus, setApprovalStatus] = useState<
+    "approve" | "stop" | "refresh"
+  >("approve");
 
   const [RebalanceId, setRebalanceId] = useState<string>("");
 
@@ -242,6 +244,11 @@ export function ConnectedReabalancesTable({
                 setApprovalStatus("approve");
                 setRebalanceId(row.id);
               }}
+              onRefresh={(row) => {
+                setModalOpen(true);
+                setApprovalStatus("refresh");
+                setRebalanceId(row.id);
+              }}
               onStop={(row) => {
                 setModalOpen(true);
                 setApprovalStatus("stop");

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/RebalanceTable.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/RebalanceTable.tsx
@@ -18,8 +18,8 @@ import {
   PendingIcon,
   ResourcesFullIcon,
 } from "@/libs/patternfly/react-icons";
-import { ReactNode } from "react";
 import Link from "next/link";
+import React, { ReactNode } from "react";
 
 export const RebalanceTableColumns = ["name", "status", "createdAt"] as const;
 
@@ -100,6 +100,7 @@ export type RebalanceTabelProps = {
   perPage: number;
   onApprove: (rebalanceName: RebalanceList) => void;
   onStop: (rebalanceName: RebalanceList) => void;
+  onRefresh: (rebalanceName: RebalanceList) => void;
   filterName: string | undefined;
   filterStatus: RebalanceStatus[] | undefined;
   filterMode: string | undefined;
@@ -126,6 +127,7 @@ export function RebalanceTable({
   page,
   perPage,
   onPageChange,
+  onRefresh,
 }: RebalanceTabelProps) {
   const t = useTranslations("Rebalancing");
   return (
@@ -197,7 +199,7 @@ export function RebalanceTable({
             },
             {
               title: t("refresh"),
-              onClick: () => {},
+              onClick: () => onRefresh(row),
             },
             {
               title: t("stop"),

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/ValidationModal.stories.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/ValidationModal.stories.tsx
@@ -20,3 +20,10 @@ export const ApproveRebalance: Story = {
     status: "approve",
   },
 };
+
+export const RefreshRebalance: Story = {
+  args: {
+    isModalOpen: true,
+    status: "approve",
+  },
+};
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/ValidationModal.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/nodes/rebalances/ValidationModal.tsx
@@ -13,7 +13,7 @@ export function ValidationModal({
   onCancel,
   isModalOpen,
 }: {
-  status: "approve" | "stop";
+  status: "approve" | "stop" | "refresh";
   isModalOpen: boolean;
   onConfirm: () => void;
   onCancel: () => void;
@@ -27,15 +27,19 @@ export function ValidationModal({
       title={
         status === "approve"
           ? t("approve_rebalance_proposal")
-          : t("stop_rebalance")
+          : status === "stop"
+            ? t("stop_rebalance")
+            : t("refresh_rebalance")
       }
       help={
         <Popover
           headerContent={
             status === "approve" ? (
               <div>{t("approve")}</div>
-            ) : (
+            ) : status === "stop" ? (
               <div>{t("stop")}</div>
+            ) : (
+              <div>{t("refresh")}</div>
             )
           }
           bodyContent={undefined}
@@ -56,7 +60,9 @@ export function ValidationModal({
     >
       {status === "approve"
         ? t("approve_rebalance_description")
-        : t("stop_rebalance_description")}
+        : status === "stop"
+          ? t("stop_rebalance_description")
+          : t("refresh_rebalance_description")}
     </Modal>
   );
 }
diff --git a/ui/messages/en.json b/ui/messages/en.json
@@ -524,6 +524,8 @@
   "Rebalancing": {
     "approve_rebalance_proposal": "Approve Rebalance Proposal?",
     "stop_rebalance": "Stop Rebalance",
+    "refresh_rebalance": "Refresh Rebalance",
+    "refresh_rebalance_description": "Refresh the optimization proposal to the latest cluster metrics",
     "approve_rebalance_description": "This will apply the optimization changes, Are you sure you want to proceed",
     "stop_rebalance_description": "Stopping will halt the current rebalancing process. You can start a new rebalance later. Are you sure you want to proceed?",
     "confirm": "Confirm",