feat:Create resource pool & edit resource pool (#254)

* feat:Edit resource pool * feat:Create resource pool * fix:text
oceanbase · Mar 20, 2024 · 777bd39 · 777bd39
1 parent 8d239f7
commit 777bd39
Show file tree

Hide file tree

Showing 21 changed files with 723 additions and 334 deletions.
diff --git a/ui/src/components/ClassSelect/index.tsx b/ui/src/components/ClassSelect/index.tsx
diff --git a/ui/src/components/SelectWithTooltip/index.tsx b/ui/src/components/SelectWithTooltip/index.tsx
@@ -0,0 +1,66 @@
+import { intl } from '@/utils/intl';
+import { Select, Tooltip } from 'antd';
+
+interface SelectWithTooltipProps {
+  selectList: API.TooltipData[];
+  form: any;
+  name: string | number | (string | number)[];
+  TooltipItemContent: (item: API.TooltipData) => JSX.Element;
+}
+
+export default function SelectWithTooltip({
+  selectList,
+  form,
+  name,
+  TooltipItemContent
+}: SelectWithTooltipProps) {
+  const filterOption = (
+    input: string,
+    option: { label: string; value: string },
+  ) =>{
+    return (option?.value ?? '').toLowerCase().includes(input.toLowerCase());
+  }  
+
+  const formatData = (selectList: API.TooltipData[]) => {
+    selectList.forEach((item: API.TooltipData) => {
+      item.label = (
+        <Tooltip
+          color="#fff"
+          overlayInnerStyle={{ color: 'rgba(0,0,0,.85)' }}
+          overlayStyle={{
+            borderRadius: '2px',
+            maxWidth: '400px',
+            boxShadow:
+              '0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05)',
+          }}
+          placement="right"
+          title={<TooltipItemContent item={item}/>}
+        >
+          <div>{item.value}</div>
+        </Tooltip>
+      );
+    });
+    return selectList;
+  };
+
+  const selectChange = (val: string) => {
+    form.setFieldValue(name, val);
+    form.validateFields([name]);
+  };
+
+  return (
+    <Select
+      showSearch
+      placeholder={intl.formatMessage({
+        id: 'OBDashboard.components.ClassSelect.PleaseSelect',
+        defaultMessage: '请选择',
+      })}
+      optionFilterProp="value"
+      filterOption={filterOption}
+      options={formatData(selectList)}
+      onChange={selectChange}
+      value={form.getFieldValue(name)}
+      // dropdownRender={DropDownComponent}
+    />
+  );
+}
diff --git a/ui/src/components/customModal/AddZoneModal.tsx b/ui/src/components/customModal/AddZoneModal.tsx
@@ -1,7 +1,7 @@
 import { intl } from '@/utils/intl';
 import { Form, Input, InputNumber, message } from 'antd';
 
-import { TZ_NAME_REG } from '@/constants';
+import { RULER_ZONE } from '@/constants/rules';
 import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
 import { addObzone } from '@/services';
 import type { CommonModalType } from '.';
@@ -64,22 +64,7 @@ export default function AddZoneModal({
             defaultMessage: 'zone名称',
           })}
           name="zone"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage({
-                id: 'OBDashboard.components.customModal.AddZoneModal.EnterAZoneName',
-                defaultMessage: '请输入zone名称!',
-              }),
-            },
-            {
-              pattern: TZ_NAME_REG,
-              message: intl.formatMessage({
-                id: 'Dashboard.components.customModal.AddZoneModal.TheFirstCharacterMustBe',
-                defaultMessage: '首字符必须是字母或者下划线，不能包含 -',
-              }),
-            },
-          ]}
+          rules={RULER_ZONE}
         >
           <Input
             placeholder={intl.formatMessage({