From b0d047fedb57c6cb3f1df6c7949ad6668672b912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E7=94=9C?= <759644414@qq.com>
Date: Thu, 9 Jan 2025 17:07:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=82=E6=95=B0=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=EF=BC=8C=E5=8C=B9=E9=85=8D=E6=A0=87=E8=AF=86=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Cluster/Detail/Overview/index.tsx   | 97 +++++++++++--------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx
index 448f7de3..48986dfd 100644
--- a/ui/src/pages/Cluster/Detail/Overview/index.tsx
+++ b/ui/src/pages/Cluster/Detail/Overview/index.tsx
@@ -60,43 +60,24 @@ const ClusterOverview: React.FC = () => {
 
   const { setFieldsValue, validateFields } = form;
 
-  const {
-    data: listOBClusterParameters,
-    loading,
-    refresh,
-  } = useRequest(obcluster.listOBClusterParameters, {
-    defaultParams: [ns, name],
-    onSuccess: (res) => {
-      const newData = getNewData(res?.data);
-      setParametersData(newData);
-    },
-  });
-
   const getNewData = (data) => {
-    const obt = data
-      ?.map((element) => {
-        // obcluster 的 parameters 里面加了个 specValue 的字段，
-        // 如果 specValue 不等于 value，状态写 "不匹配" (黄色tag)，如果两个值相等，写"已匹配"(绿色tag)
-        const findSpec = parameters?.find(
-          (item: any) => item.value === item.specValue,
-        );
-        if (!isEmpty(findSpec)) {
-          return { ...element, accordance: true };
-        } else if (isEmpty(findSpec)) {
-          return { ...element, accordance: false };
-        }
-      })
-      ?.map((element: any) => {
-        // 在 obcluster 的 parameters  里面的就是托管给 operator
-        const findName = parameters?.find(
-          (item: any) => element.name === item.name,
-        );
-        if (!isEmpty(findName)) {
-          return { ...element, controlParameter: true };
-        } else if (isEmpty(findName)) {
-          return { ...element, controlParameter: false };
-        }
-      });
+    const obt = data?.map((element: any) => {
+      // 在 obcluster 的 parameters  里面的就是托管给 operator
+      const findName = parameters?.find(
+        (item: any) => element.name === item.name,
+      );
+
+      if (!isEmpty(findName)) {
+        return {
+          ...element,
+          controlParameter: true,
+          accordance: findName?.value === findName?.specValue,
+        };
+      } else if (isEmpty(findName)) {
+        return { ...element, controlParameter: false, accordance: undefined };
+      }
+    });
+
     return obt;
   };
 
@@ -112,6 +93,7 @@ const ClusterOverview: React.FC = () => {
       if (data.status === 'operating') {
         timerRef.current = setTimeout(() => {
           getClusterDetail({ ns: ns!, name: name! });
+          refresh();
         }, REFRESH_CLUSTER_TIME);
       } else if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -119,6 +101,19 @@ const ClusterOverview: React.FC = () => {
     },
   });
 
+  const {
+    data: listOBClusterParameters,
+    loading,
+    refresh,
+  } = useRequest(obcluster.listOBClusterParameters, {
+    defaultParams: [ns, name],
+    refreshDeps: [clusterDetail?.status],
+    onSuccess: (res) => {
+      const newData = getNewData(res?.data);
+      setParametersData(newData);
+    },
+  });
+
   const { runAsync: patchOBCluster, loading: patchOBClusterloading } =
     useRequest(obcluster.patchOBCluster, {
       manual: true,
@@ -402,6 +397,12 @@ const ClusterOverview: React.FC = () => {
         defaultMessage: '参数值',
       }),
       dataIndex: 'value',
+      render: (text: string, record) => {
+        const content =
+          parameters?.find((item) => item.name === record.name)?.value || text;
+
+        return <span>{content}</span>;
+      },
     },
     {
       title: intl.formatMessage({
@@ -456,7 +457,7 @@ const ClusterOverview: React.FC = () => {
 
       dataIndex: 'accordance',
       width: 100,
-      render: (text: boolean, record) => {
+      render: (text) => {
         const tagColor = text ? 'green' : 'gold';
         const tagContent = text
           ? intl.formatMessage({
@@ -468,10 +469,10 @@ const ClusterOverview: React.FC = () => {
               defaultMessage: '不匹配',
             });
 
-        return record?.controlParameter ? (
-          <Tag color={tagColor}>{tagContent}</Tag>
-        ) : (
+        return text === undefined ? (
           '/'
+        ) : (
+          <Tag color={tagColor}>{tagContent}</Tag>
         );
       },
     },
@@ -491,13 +492,20 @@ const ClusterOverview: React.FC = () => {
           'max_syslog_file_count',
         ];
 
+        const valueContent =
+          parameters?.find((item) => item.name === record.name)?.value ||
+          record?.value;
+
         return (
           <Space size={1}>
             <Button
               type="link"
               onClick={() => {
                 setIsDrawerOpen(true);
-                setParametersRecord(record);
+                setParametersRecord({
+                  ...record,
+                  value: valueContent,
+                });
               }}
             >
               {intl.formatMessage({
@@ -839,6 +847,13 @@ const ClusterOverview: React.FC = () => {
         onSuccess={() => {
           setIsDrawerOpen(false);
           clusterDetailRefresh();
+          // 编辑成功后，清空搜索条件，刷新参数列表
+          setFieldsValue({
+            name: undefined,
+            controlParameter: undefined,
+            accordance: undefined,
+          });
+          refresh();
         }}
         initialValues={parametersRecord}
         {...(clusterDetail?.info as API.ClusterInfo)}