Add some form fields for in cluster creation

TianWuwt · web-flow · commit b79187dbae6d · 2024-11-21T17:18:58.000+08:00
diff --git a/ui/src/components/SelectWithTooltip/index.tsx b/ui/src/components/SelectWithTooltip/index.tsx
@@ -5,24 +5,26 @@ interface SelectWithTooltipProps {
   selectList: API.TooltipData[];
   form: any;
   name: string | number | (string | number)[];
+  type: string;
   TooltipItemContent: (item: API.TooltipData) => JSX.Element;
 }
 
 export default function SelectWithTooltip({
   selectList,
   form,
   name,
-  TooltipItemContent
+  type,
+  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) => {
+    selectList?.forEach((item: API.TooltipData) => {
       item.label = (
         <Tooltip
           color="#fff"
@@ -34,7 +36,7 @@ export default function SelectWithTooltip({
               '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}/>}
+          title={<TooltipItemContent item={item} />}
         >
           <div>{item.value}</div>
         </Tooltip>
@@ -59,7 +61,11 @@ export default function SelectWithTooltip({
       filterOption={filterOption}
       options={formatData(selectList)}
       onChange={selectChange}
-      value={form.getFieldValue(name)}
+      value={
+        type === 'observer' && formatData(selectList)?.length !== 1
+          ? ''
+          : form.getFieldValue(name)
+      }
       // dropdownRender={DropDownComponent}
     />
   );
diff --git a/ui/src/constants/index.ts b/ui/src/constants/index.ts
@@ -473,3 +473,30 @@ export const EVENTSTABLE_STATUS_LIST = [
     badgeStatus: 'warning',
   },
 ];
+
+export const LOADTYPE_LIST = [
+  {
+    value: 'EXPRESS_OLTP',
+    label: 'Express OLTP',
+  },
+  {
+    value: 'EXPRESS_OLTP_PERF',
+    label: 'Express OLTP PERF',
+  },
+  {
+    value: 'COMPLEX_OLTP',
+    label: 'Complex OLTP',
+  },
+  {
+    value: 'HTAP',
+    label: 'HTAP',
+  },
+  {
+    value: 'OLAP',
+    label: 'OLAP',
+  },
+  {
+    value: 'KV',
+    label: 'KV',
+  },
+];
diff --git a/ui/src/pages/Cluster/New/BasicInfo.tsx b/ui/src/pages/Cluster/New/BasicInfo.tsx
@@ -1,13 +1,15 @@
 import { intl } from '@/utils/intl';
-import { Card, Col, Form, Input, Row, Select } from 'antd';
+import { Card, Checkbox, Col, Form, Input, Row, Select, Space } from 'antd';
 import type { FormInstance } from 'antd/lib/form';
 
 import PasswordInput from '@/components/PasswordInput';
 import SelectNSFromItem from '@/components/SelectNSFromItem';
 import TooltipPretty from '@/components/TooltipPretty';
-import { MODE_MAP } from '@/constants';
+import { LOADTYPE_LIST, MODE_MAP } from '@/constants';
 import { resourceNameRule } from '@/constants/rules';
 
+const { Option } = Select;
+
 interface BasicInfoProps {
   form: FormInstance<API.CreateClusterData>;
   passwordVal: string;
@@ -17,7 +19,9 @@ interface BasicInfoProps {
 export default function BasicInfo({
   form,
   passwordVal,
+  deleteValue,
   setPasswordVal,
+  setDeleteValue,
 }: BasicInfoProps) {
   return (
     <Card
@@ -147,7 +151,37 @@ export default function BasicInfo({
             />
           </Form.Item>
         </Col>
+        <Col span={8}>
+          <Form.Item
+            label={'优化场景'}
+            name={'loadType'}
+            initialValue="HTAP"
+            rules={[
+              {
+                required: true,
+                message: '请选择优化场景',
+              },
+            ]}
+          >
+            <Select>
+              {LOADTYPE_LIST?.map((item) => (
+                <Option key={item.value} value={item.value}>
+                  {item.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </Col>
       </Row>
+      <Space>
+        删除保护
+        <Checkbox
+          defaultChecked={deleteValue}
+          onChange={(e) => {
+            setDeleteValue(e.target.value);
+          }}
+        />
+      </Space>
     </Card>
   );
 }
diff --git a/ui/src/pages/Cluster/New/Observer.tsx b/ui/src/pages/Cluster/New/Observer.tsx
@@ -1,16 +1,30 @@
 import { CustomFormItem } from '@/components/CustomFormItem';
+import IconTip from '@/components/IconTip';
 import SelectWithTooltip from '@/components/SelectWithTooltip';
 import { MINIMAL_CONFIG, SUFFIX_UNIT } from '@/constants';
 import { MIRROR_SERVER } from '@/constants/doc';
 import { intl } from '@/utils/intl';
-import { Button, Card, Col, Input, InputNumber, Row, Tooltip } from 'antd';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Space,
+  Tooltip,
+} from 'antd';
 import { FormInstance } from 'antd/lib/form';
 import { clone } from 'lodash';
 import styles from './index.less';
 
 interface ObserverProps {
   storageClasses: API.TooltipData[] | undefined;
   form: FormInstance<API.CreateClusterData>;
+  setPvcValue: boolean;
+  pvcValue: boolean;
 }
 
 const observerToolTipText = intl.formatMessage({
@@ -59,7 +73,12 @@ export const TooltipItemContent = ({ item }) => {
   );
 };
 
-export default function Observer({ storageClasses, form }: ObserverProps) {
+export default function Observer({
+  storageClasses,
+  form,
+  pvcValue,
+  setPvcValue,
+}: ObserverProps) {
   const setMinimalConfiguration = () => {
     const originObserver = clone(form.getFieldsValue());
     form.setFieldsValue({
@@ -173,7 +192,21 @@ export default function Observer({ storageClasses, form }: ObserverProps) {
           </Col>
         </Row>
         <p className={styles.titleText}>storage</p>
-
+        <p className={styles.subTitleText}>存储卷配置</p>
+        <Space style={{ marginBottom: '10px' }}>
+          <IconTip
+            tip={
+              '勾选后，在删除 OBServer 资源之后不会级联删除 PVC；默认会进行级联删除'
+            }
+            content={'PVC 独立生命周期'}
+          />
+          <Checkbox
+            value={pvcValue}
+            onChange={(e) => {
+              setPvcValue(e.target.checked);
+            }}
+          />
+        </Space>
         <Row gutter={16}>
           <Col span={8}>
             <p className={styles.subTitleText}>
@@ -197,19 +230,18 @@ export default function Observer({ storageClasses, form }: ObserverProps) {
                   })}
                 />
               </CustomFormItem>
-              <CustomFormItem
+              <Form.Item
                 label="storageClass"
                 name={['observer', 'storage', 'data', 'storageClass']}
               >
-                {storageClasses && (
-                  <SelectWithTooltip
-                    name={['observer', 'storage', 'data', 'storageClass']}
-                    form={form}
-                    selectList={storageClasses}
-                    TooltipItemContent={TooltipItemContent}
-                  />
-                )}
-              </CustomFormItem>
+                <SelectWithTooltip
+                  type="observer"
+                  name={['observer', 'storage', 'data', 'storageClass']}
+                  form={form}
+                  selectList={storageClasses}
+                  TooltipItemContent={TooltipItemContent}
+                />
+              </Form.Item>
             </div>
           </Col>
           <Col span={8}>
@@ -234,19 +266,18 @@ export default function Observer({ storageClasses, form }: ObserverProps) {
                   })}
                 />
               </CustomFormItem>
-              <CustomFormItem
+              <Form.Item
                 label="storageClass"
                 name={['observer', 'storage', 'log', 'storageClass']}
               >
-                {storageClasses && (
-                  <SelectWithTooltip
-                    form={form}
-                    name={['observer', 'storage', 'log', 'storageClass']}
-                    selectList={storageClasses}
-                    TooltipItemContent={TooltipItemContent}
-                  />
-                )}
-              </CustomFormItem>
+                <SelectWithTooltip
+                  type="observer"
+                  name={['observer', 'storage', 'data', 'storageClass']}
+                  form={form}
+                  selectList={storageClasses}
+                  TooltipItemContent={TooltipItemContent}
+                />
+              </Form.Item>
             </div>
           </Col>
           <Col span={8}>
@@ -266,20 +297,19 @@ export default function Observer({ storageClasses, form }: ObserverProps) {
                   })}
                 />
               </CustomFormItem>
-              <CustomFormItem
+              <Form.Item
                 label="storageClass"
                 validateTrigger="onBlur"
                 name={['observer', 'storage', 'redoLog', 'storageClass']}
               >
-                {storageClasses && (
-                  <SelectWithTooltip
-                    form={form}
-                    name={['observer', 'storage', 'redoLog', 'storageClass']}
-                    selectList={storageClasses}
-                    TooltipItemContent={TooltipItemContent}
-                  />
-                )}
-              </CustomFormItem>
+                <SelectWithTooltip
+                  type="observer"
+                  name={['observer', 'storage', 'data', 'storageClass']}
+                  form={form}
+                  selectList={storageClasses}
+                  TooltipItemContent={TooltipItemContent}
+                />
+              </Form.Item>
             </div>
           </Col>
         </Row>
diff --git a/ui/src/pages/Cluster/New/index.tsx b/ui/src/pages/Cluster/New/index.tsx
@@ -19,7 +19,10 @@ import Topo from './Topo';
 export default function New() {
   const navigate = useNavigate();
   const [form] = Form.useForm<API.CreateClusterData>();
-  const [passwordVal, setPasswordVal] = useState('');
+  const [passwordVal, setPasswordVal] = useState<string>('');
+  const [pvcValue, setPvcValue] = useState<boolean>(false);
+  // 默认勾选
+  const [deleteValue, setDeleteValue] = useState<boolean>(true);
   const { data: storageClassesRes, run: fetchStorageClasses } = useRequest(
     getStorageClasses,
     {
@@ -53,6 +56,8 @@ export default function New() {
       message.success(res.message, 3);
       form.resetFields();
       setPasswordVal('');
+      setPvcValue(false);
+      setDeleteValue(true);
       history.back();
     }
   };
@@ -114,12 +119,19 @@ export default function New() {
           <Col span={24}>
             <BasicInfo
               passwordVal={passwordVal}
+              deleteValue={deleteValue}
               setPasswordVal={setPasswordVal}
+              setDeleteValue={setDeleteValue}
               form={form}
             />
           </Col>
           <Topo form={form} />
-          <Observer storageClasses={storageClasses} form={form} />
+          <Observer
+            storageClasses={storageClasses}
+            form={form}
+            pvcValue={pvcValue}
+            setPvcValue={setPvcValue}
+          />
           <Monitor />
           <Parameters />
           <BackUp />
diff --git a/ui/src/pages/Tenant/New/BasicInfo.tsx b/ui/src/pages/Tenant/New/BasicInfo.tsx
diff --git a/ui/src/pages/Tenant/New/index.tsx b/ui/src/pages/Tenant/New/index.tsx
