oceanbase · powerfooI · Dec 26, 2024 · Dec 24, 2024 · Dec 24, 2024 · Dec 24, 2024
diff --git a/ui/src/components/SelectWithTooltip/index.tsx b/ui/src/components/SelectWithTooltip/index.tsx
@@ -13,7 +13,6 @@ export default function SelectWithTooltip({
   selectList,
   form,
   name,
-  type,
   TooltipItemContent,
 }: SelectWithTooltipProps) {
   const filterOption = (
@@ -61,11 +60,7 @@ export default function SelectWithTooltip({
       filterOption={filterOption}
       options={formatData(selectList)}
       onChange={selectChange}
-      value={
-        type === 'observer' && formatData(selectList)?.length !== 1
-          ? ''
-          : form.getFieldValue(name)
-      }
+      value={form.getFieldValue(name)}
       // dropdownRender={DropDownComponent}
     />
   );

diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx
@@ -29,6 +29,7 @@ import { ReactNode, config } from './G6register';
 import {
   clusterOperate,
   clusterOperateOfTenant,
+  getClusterOperates,
   getServerOperateOfCluster,
   getZoneOperateOfCluster,
   getZoneOperateOfTenant,

diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
@@ -93,6 +93,7 @@ const TOPO_INFO_CONFIG = [
   'image',
   'mode',
   'rootPasswordSecret',
+  'deletionProtection',
 ];
 
 // use for tenant name or zone name

diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json
@@ -1244,5 +1244,9 @@
   "src.components.TopoComponent.96A4C193": "Are you sure you want to restart the server?",
   "src.components.TopoComponent.601BE33A": "Unlimited",
   "src.components.TopoComponent.0E4AAB80": "Unlimited",
-  "src.components.TopoComponent.2494A473": "Restart the server"
+  "src.components.TopoComponent.2494A473": "Restart the server",
+  "src.pages.Tenant.Detail.Overview.892E62C7": "Delete protection modified successfully",
+  "src.pages.Tenant.Detail.Overview.EE772326": "Delete protection",
+  "src.pages.Overview.E15A1FED": "metrics-server has not been installed in the K8s cluster, and the usage of node resources cannot be obtained.",
+  "src.pages.Cluster.Detail.Overview.FF85D01F": "Unmanaged Successfully"
 }
diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json
@@ -1266,5 +1266,9 @@
   "src.components.TopoComponent.96A4C193": "你确定重启该 server 吗？",
   "src.components.TopoComponent.601BE33A": "无限制",
   "src.components.TopoComponent.0E4AAB80": "无限制",
-  "src.components.TopoComponent.2494A473": "重启server"
+  "src.components.TopoComponent.2494A473": "重启server",
+  "src.pages.Tenant.Detail.Overview.892E62C7": "修改删除保护已成功",
+  "src.pages.Tenant.Detail.Overview.EE772326": "删除保护",
+  "src.pages.Overview.E15A1FED": "K8s 集群中尚未安装 metrics-server，无法获取节点资源用量",
+  "src.pages.Cluster.Detail.Overview.FF85D01F": "解除托管已成功"
 }
diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx
@@ -119,6 +119,23 @@ const ClusterOverview: React.FC = () => {
     },
   });
 
+  const { runAsync: patchOBCluster, loading: patchOBClusterloading } =
+    useRequest(obcluster.patchOBCluster, {
+      manual: true,
+      onSuccess: (res) => {
+        if (res.successful) {
+          message.success(
+            intl.formatMessage({
+              id: 'src.pages.Cluster.Detail.Overview.FF85D01F',
+              defaultMessage: '解除托管已成功',
+            }),
+          );
+          refresh();
+          clusterDetailRefresh();
+        }
+      },
+    });
+
   const handleDelete = async () => {
     const res = await deleteClusterReportWrap({ ns: ns!, name: name! });
     if (res.successful) {
@@ -156,8 +173,7 @@ const ClusterOverview: React.FC = () => {
         <Button
           onClick={handleAddZone}
           disabled={
-            clusterDetail?.status === 'operating' ||
-            clusterDetail?.status === 'failed'
+            !isEmpty(clusterDetail) && clusterDetail?.status !== 'running'
           }
           type="text"
         >
@@ -174,8 +190,7 @@ const ClusterOverview: React.FC = () => {
         <Button
           type="text"
           disabled={
-            clusterDetail?.status === 'operating' ||
-            clusterDetail?.status === 'failed'
+            !isEmpty(clusterDetail) && clusterDetail?.status !== 'running'
           }
           onClick={handleUpgrade}
         >
@@ -191,6 +206,10 @@ const ClusterOverview: React.FC = () => {
       label: (
         <Button
           type="text"
+          disabled={
+            !isEmpty(clusterDetail) &&
+            (clusterDetail?.status !== 'running' || deletionProtection)
+          }
           onClick={() =>
             showDeleteConfirm({
               onOk: handleDelete,
@@ -264,7 +283,8 @@ const ClusterOverview: React.FC = () => {
     };
   };
 
-  const { parameters, storage, resource } = clusterDetail?.info || {};
+  const { parameters, storage, resource, deletionProtection } =
+    clusterDetail?.info || {};
 
   const resourceinit = [
     {
@@ -350,6 +370,7 @@ const ClusterOverview: React.FC = () => {
           })}
         </Tag>
       ),
+
       value: true,
     },
     {
@@ -361,6 +382,7 @@ const ClusterOverview: React.FC = () => {
           })}
         </Tag>
       ),
+
       value: false,
     },
   ];
@@ -440,12 +462,10 @@ const ClusterOverview: React.FC = () => {
           })}
         />
       ),
+
       dataIndex: 'accordance',
       width: 100,
-      render: (text: boolean, record: any) => {
-        if (!record?.controlParameter) {
-          return '-';
-        }
+      render: (text: boolean) => {
         const tagColor = text ? 'green' : 'gold';
         const tagContent = text
           ? intl.formatMessage({
@@ -483,7 +503,15 @@ const ClusterOverview: React.FC = () => {
               })}
             </Button>
             {text && (
-              <Button type="link" onClick={() => {}}>
+              <Button
+                type="link"
+                loading={patchOBClusterloading}
+                onClick={() => {
+                  patchOBCluster(ns, name, {
+                    deletedParameters: [record.name],
+                  });
+                }}
+              >
                 {intl.formatMessage({
                   id: 'src.pages.Cluster.Detail.Overview.5FACF7C0',
                   defaultMessage: '解除托管',
@@ -641,30 +669,32 @@ const ClusterOverview: React.FC = () => {
                           const newParametersData = getNewData(
                             listOBClusterParameters?.data,
                           );
-
-                          if (name) {
+                          if (name !== undefined) {
                             setParametersData(
                               newParametersData?.filter((item) =>
                                 item.name?.includes(name),
                               ),
                             );
                           }
-                          if (controlParameter) {
+                          if (controlParameter !== undefined) {
                             setParametersData(
                               newParametersData?.filter(
                                 (item) =>
                                   item.controlParameter === controlParameter,
                               ),
                             );
                           }
-                          if (accordance) {
+                          if (accordance !== undefined) {
                             setParametersData(
                               newParametersData?.filter(
                                 (item) => item.accordance === accordance,
                               ),
                             );
                           }
-                          if (!!name && !!controlParameter) {
+                          if (
+                            name !== undefined &&
+                            controlParameter !== undefined
+                          ) {
                             setParametersData(
                               newParametersData?.filter(
                                 (item) =>
@@ -673,7 +703,7 @@ const ClusterOverview: React.FC = () => {
                               ),
                             );
                           }
-                          if (!!name && !!accordance) {
+                          if (name !== undefined && accordance !== undefined) {
                             setParametersData(
                               newParametersData?.filter(
                                 (item) =>
@@ -682,7 +712,11 @@ const ClusterOverview: React.FC = () => {
                               ),
                             );
                           }
-                          if (!!name && !!controlParameter && !!accordance) {
+                          if (
+                            name !== undefined &&
+                            controlParameter !== undefined &&
+                            accordance !== undefined
+                          ) {
                             setParametersData(
                               newParametersData?.filter(
                                 (item) =>

diff --git a/ui/src/pages/Cluster/New/Topo.tsx b/ui/src/pages/Cluster/New/Topo.tsx
@@ -27,8 +27,8 @@ export default function Topo({ form }) {
   const [showTopology, setShowTopology] = useState<boolean>(false);
   const [formsubIndex, setFromSubIndex] = useState({});
 
-  const [keyList, setKeyList] = useState<ListType[]>([]);
-  const [valList, setValList] = useState<ListType[]>([]);
+  const [keyList, setKeyList] = useState([]);
+  const [valList, setValList] = useState([]);
 
   const access = useAccess();
 
@@ -103,7 +103,7 @@ export default function Topo({ form }) {
       const promise = getNodeLabelsReq();
       promise.then((data) => {
         setKeyList(data.key);
-        setValList(data.value);
+        setValList(data.value?.filter((item) => item.label !== ''));
       });
     }
   }, []);

diff --git a/ui/src/pages/Overview/NodesTable.tsx b/ui/src/pages/Overview/NodesTable.tsx
@@ -4,7 +4,7 @@ import { getNodeInfoReq } from '@/services';
 import { intl } from '@/utils/intl';
 import { findByValue } from '@oceanbase/util';
 import { useRequest } from 'ahooks';
-import { Card, Col, Progress, Table, Tag } from 'antd';
+import { Card, Col, Progress, Table, Tag, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 
 interface DataType {
@@ -23,6 +23,21 @@ interface DataType {
   memory: string;
 }
 
+const progressContent = (value: number, resource: number) => {
+  return resource === 0 ? (
+    <Tooltip
+      title={intl.formatMessage({
+        id: 'src.pages.Overview.E15A1FED',
+        defaultMessage:
+          'K8s 集群中尚未安装 metrics-server，无法获取节点资源用量',
+      })}
+    >
+      - / -
+    </Tooltip>
+  ) : (
+    <Progress status="normal" strokeLinecap="butt" percent={value} />
+  );
+};
 const columns: ColumnsType<DataType> = [
   {
     title: intl.formatMessage({
@@ -132,9 +147,7 @@ const columns: ColumnsType<DataType> = [
     }),
     dataIndex: 'cpu',
     key: 'cpu',
-    render: (value) => (
-      <Progress status="normal" strokeLinecap="butt" percent={value} />
-    ),
+    render: (value, record) => progressContent(value, record.cpuTotal),
   },
   {
     title: intl.formatMessage({
@@ -143,9 +156,7 @@ const columns: ColumnsType<DataType> = [
     }),
     dataIndex: 'memory',
     key: 'memory',
-    render: (value) => (
-      <Progress status="normal" strokeLinecap="butt" percent={value} />
-    ),
+    render: (value, record) => progressContent(value, record.memoryTotal),
   },
 ];
 

diff --git a/ui/src/pages/Tenant/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Tenant/Detail/Overview/BasicInfo.tsx
@@ -85,7 +85,12 @@ export default function BasicInfo({
       manual: true,
       onSuccess: (res) => {
         if (res.successful) {
-          message.success('修改删除保护已成功');
+          message.success(
+            intl.formatMessage({
+              id: 'src.pages.Tenant.Detail.Overview.892E62C7',
+              defaultMessage: '修改删除保护已成功',
+            }),
+          );
         }
       },
     },
@@ -119,7 +124,12 @@ export default function BasicInfo({
           );
         })}
         {deletionProtection && (
-          <Descriptions.Item label={'删除保护'}>
+          <Descriptions.Item
+            label={intl.formatMessage({
+              id: 'src.pages.Tenant.Detail.Overview.EE772326',
+              defaultMessage: '删除保护',
+            })}
+          >
             <Checkbox
               // loading 态禁止操作，防止重复操作
               disabled={patchTenantLoading}