修复前端缺陷问题 || Fix front-end defect problem (#779)

TianWuwt · web-flow · commit 5abf7dfa334a · 2025-04-02T22:12:36.000+08:00
diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx
@@ -485,6 +485,11 @@ export default function TopoComponent({
   }, []);
   const isCreateResourcePool = modalType.current === 'createResourcePools';
   // Use different pictures for nodes in different states
+
+  const topology = {
+    topology: originTopoData?.topoData?.children,
+    ...(originTopoData?.basicInfo as API.ClusterInfo),
+  };
   return (
     <div style={{ position: 'relative', height: '100vh' }}>
       {header
@@ -493,7 +498,7 @@ export default function TopoComponent({
             <BasicInfo
               extra={false}
               style={{ backgroundColor: '#f5f8fe', border: 'none' }}
-              {...(originTopoData.basicInfo as API.ClusterInfo)}
+              {...(topology as API.ClusterInfo)}
             />
           )}
 
diff --git a/ui/src/pages/Cluster/ClusterList.tsx b/ui/src/pages/Cluster/ClusterList.tsx
@@ -80,8 +80,8 @@ const columns: ColumnsType<DataType> = [
       const content = text
         ?.map((item) =>
           item.k8sCluster
-            ? `${item.zone}:${item.k8sCluster}:1`
-            : `${item.zone}:1`,
+            ? `${item.zone}:${item.k8sCluster}:${item.replicas}`
+            : `${item.zone}:${item.replicas}`,
         )
         .join(' - ');
       return <Text ellipsis={{ tooltip: content }}>{content}</Text>;
diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx
@@ -289,7 +289,9 @@ export default function BasicInfo({
           })}
         >
           {(
-            props.topology?.map((zone) => zone.observers?.length ?? ' / ') ?? []
+            props.topology?.map(
+              (zone) => (zone.observers || zone.children)?.length ?? ' / ',
+            ) ?? []
           ).join('-')}
         </Descriptions.Item>
         <Descriptions.Item
diff --git a/ui/src/pages/Cluster/Detail/Tenant/index.tsx b/ui/src/pages/Cluster/Detail/Tenant/index.tsx
@@ -27,7 +27,7 @@ export default function Tenant() {
     },
   });
   const tenantsList = tenantsListResponse?.data;
-  const handleAddCluster = () => navigate('/tenant/new');
+  const handleAddCluster = () => navigate(`/tenant/new?clusterName=${name}`);
   return (
     <PageContainer>
       <Row gutter={[16, 16]}>
diff --git a/ui/src/pages/K8sCluster/Createk8sClusterModal.tsx b/ui/src/pages/K8sCluster/Createk8sClusterModal.tsx
@@ -134,11 +134,7 @@ export default function Createk8sClusterModal({
           <Input placeholder="请输入" disabled={isEdit} />
         </Form.Item>
 
-        <Form.Item
-          name={'description'}
-          label={'描述信息'}
-          rules={[{ required: true, message: '请输入描述信息' }]}
-        >
+        <Form.Item name={'description'} label={'描述信息'}>
           <Input placeholder="请输入" />
         </Form.Item>
         <Form.Item
diff --git a/ui/src/pages/K8sCluster/K8sClusterList.tsx b/ui/src/pages/K8sCluster/K8sClusterList.tsx
@@ -26,6 +26,7 @@ export default function K8sClusterList() {
       onSuccess: ({ successful }) => {
         if (successful) {
           message.success('删除 k8s 集群成功');
+          refresh();
         }
       },
     },
diff --git a/ui/src/pages/Overview/BatchEditNodeDrawer.tsx b/ui/src/pages/Overview/BatchEditNodeDrawer.tsx
@@ -133,40 +133,24 @@ const BatchEditNodeDrawer: React.FC<BatchEditNodeDrawerProps> = ({
                   </Col>
                   <Col span={fromName ? 8 : 4}>
                     <Form.Item
-                      noStyle
-                      dependencies={[name, 'operation']}
-                      shouldUpdate
+                      {...restField}
+                      name={[name, 'key']}
+                      rules={[
+                        {
+                          required: true,
+                          message: '请输入 Keys',
+                        },
+                      ]}
                     >
-                      {({ getFieldValue }) => {
-                        return (
-                          <Form.Item
-                            {...restField}
-                            name={[name, 'key']}
-                            rules={[
-                              {
-                                required: true,
-                                message: '请输入 Keys',
-                              },
-                            ]}
-                          >
-                            {getFieldValue(title)[key]?.operation ===
-                            'delete' ? (
-                              <Select
-                                showSearch
-                                placeholder="请输入 Keys"
-                                optionFilterProp="label"
-                                options={
-                                  tabKey === 'labels'
-                                    ? labelsOption
-                                    : taintsOption
-                                }
-                              />
-                            ) : (
-                              <Input placeholder="请输入 Keys" />
-                            )}
-                          </Form.Item>
-                        );
-                      }}
+                      <Select
+                        mode="tags"
+                        maxCount={1}
+                        optionFilterProp="label"
+                        placeholder="请输入 Keys"
+                        options={
+                          tabKey === 'labels' ? labelsOption : taintsOption
+                        }
+                      />
                     </Form.Item>
                   </Col>
                   <Col span={fromName ? 10 : 16}>
diff --git a/ui/src/pages/Overview/EditNodeDrawer.tsx b/ui/src/pages/Overview/EditNodeDrawer.tsx
@@ -166,7 +166,7 @@ const EditNodeDrawer: React.FC<ParametersModalProps> = ({
                       rules={[{ required: true, message: '请输入 Keys' }]}
                       label={key === 0 && 'Key'}
                     >
-                      <Input placeholder="First Name" />
+                      <Input placeholder="请输入 " />
                     </Form.Item>
                   </Col>
                   {fromName && (
@@ -185,6 +185,7 @@ const EditNodeDrawer: React.FC<ParametersModalProps> = ({
                               {...restField}
                               label={key === 0 && <></>}
                               name={[name, 'operator']}
+                              initialValue={'Equal'}
                             >
                               <Select
                                 placeholder={'请选择'}
@@ -216,6 +217,17 @@ const EditNodeDrawer: React.FC<ParametersModalProps> = ({
                               {...restField}
                               name={[name, 'value']}
                               label={key === 0 && 'Value'}
+                              rules={[
+                                ...(getFieldValue(title)[key]?.operator ===
+                                'Equal'
+                                  ? [
+                                      {
+                                        required: true,
+                                        message: '请输入 Value',
+                                      },
+                                    ]
+                                  : []),
+                              ]}
                             >
                               <Input placeholder="请输入" />
                             </Form.Item>
diff --git a/ui/src/pages/Overview/NodesTable.tsx b/ui/src/pages/Overview/NodesTable.tsx
@@ -82,7 +82,7 @@ export default function NodesTable({
       width: 120,
       render: (val) => {
         return val?.length !== 0 ? (
-          <CustomTooltip text={val} width={100} />
+          <CustomTooltip text={val.join(',')} width={100} />
         ) : (
           '-'
         );
@@ -269,7 +269,7 @@ export default function NodesTable({
       </Card>
 
       <BatchEditNodeDrawer
-        type={'k8s'}
+        type={type}
         k8sClusterName={k8sClusterName}
         selectedRowKeys={selectedRowKeys}
         visible={batchNodeDrawerOpen}
@@ -287,7 +287,7 @@ export default function NodesTable({
         }}
       />
       <EditNodeDrawer
-        type={'k8s'}
+        type={type}
         k8sClusterName={k8sClusterName}
         visible={isDrawerOpen}
         onCancel={() => {
diff --git a/ui/src/pages/Tenant/Detail/Overview/index.tsx b/ui/src/pages/Tenant/Detail/Overview/index.tsx
@@ -13,7 +13,8 @@ import { DownOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { history, useAccess, useParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
-import { Button, Col, Dropdown, MenuProps, Row, Space, message } from 'antd';
+import type { MenuProps } from 'antd';
+import { Button, Col, Dropdown, Row, Space, message } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import {
   getClusterFromTenant,
@@ -134,6 +135,7 @@ export default function TenantOverview() {
               defaultMessage: '调整 Unit 数量',
             }),
             key: 'changeUnitCount',
+            disabled: tenantDetail?.info.status !== 'running',
           },
           {
             label: '创建租户恢复策略',
diff --git a/ui/src/pages/Tenant/New/BasicInfo.tsx b/ui/src/pages/Tenant/New/BasicInfo.tsx
@@ -4,6 +4,7 @@ import { resourceNameRule } from '@/constants/rules';
 import { intl } from '@/utils/intl';
 import { Card, Checkbox, Col, Form, Input, Row, Select, Space } from 'antd';
 import type { FormInstance } from 'antd/lib/form';
+import { useEffect } from 'react';
 
 const { Option } = Select;
 
@@ -35,6 +36,17 @@ export default function BasicInfo({
   const selectClusterChange = (id: number) => {
     setSelectClusterId(id);
   };
+  const path = window.location.hash.split('=')[1];
+
+  useEffect(() => {
+    if (path) {
+      const cluster = clusterOptions?.find((item) => item.label === path);
+      setSelectClusterId(cluster?.value || undefined);
+      form.setFieldsValue({
+        obcluster: cluster?.value,
+      });
+    }
+  }, [clusterList, path]);
   return (
     <Card
       title={intl.formatMessage({
diff --git a/ui/src/utils/component.tsx b/ui/src/utils/component.tsx
@@ -2,6 +2,7 @@ import TableFilterDropdown from '@/components/TableFilterDropdown';
 import { SearchOutlined } from '@ant-design/icons';
 import { token } from '@oceanbase/design';
 import type { FilterDropdownProps } from '@oceanbase/design/es/table/interface';
+import { trim } from 'lodash';
 
 export const getColumnSearchProps = ({
   frontEndSearch,
@@ -30,7 +31,9 @@ export const getColumnSearchProps = ({
   ...(frontEndSearch
     ? {
         onFilter: (value, record) => {
-          const realValue = (value && value.split(symbol)[0]).toLowerCase();
+          const realValue = trim(
+            (value && value.split(symbol)[0]).toLowerCase(),
+          );
 
           return arraySearch
             ? record[dataIndex].some(
@@ -39,10 +42,12 @@ export const getColumnSearchProps = ({
                   item.value.toLowerCase().includes(realValue),
               )
             : record[dataIndex] &&
-                record[dataIndex]
-                  .toString()
-                  .toLowerCase()
-                  .includes(value && value.toLowerCase());
+                trim(
+                  record[dataIndex]
+                    .toString()
+                    .toLowerCase()
+                    .includes(value && value.toLowerCase()),
+                );
         },
       }
     : {}),

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ export default function K8sClusterList() {`
`26`	`26`	`onSuccess: ({ successful }) => {`
`27`	`27`	`if (successful) {`
`28`	`28`	`message.success('删除 k8s 集群成功');`
	`29`	`+ refresh();`
`29`	`30`	`}`
`30`	`31`	`},`
`31`	`32`	`},`