fix: add do cluster

src/pages/cluster-management/components/cloud-provider-form.tsx

@@ -1,15 +1,82 @@
 import SealSelect from '@/components/seal-form/seal-select';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import _ from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
+import { regionList } from '../config';
 import { ClusterFormData as FormData } from '../config/types';
 
+type OptionData = {
+  label: string;
+  datacenter: string;
+  value: string;
+};
+
+const OptionItem = styled.div`
+  display: flex;
+  align-items: center;
+  .label {
+    font-weight: 500;
+  }
+  .dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--ant-color-text);
+    margin: 0 8px;
+  }
+  .datacenter,
+  .value {
+    color: var(--ant-color-text-secondary);
+  }
+`;
+
 interface CloudProviderProps {
   provider: string; // 'kubernetes' | 'digitalocean';
+  credentialList: Global.BaseOption<number>[];
 }
 
-const CloudProvider: React.FC<CloudProviderProps> = () => {
+const optionRender = (
+  option: Global.BaseOption<
+    number,
+    {
+      data: OptionData;
+    }
+  >
+): React.ReactNode => {
+  const { value } = option;
+  const data = option.data!;
+
+  return (
+    <OptionItem className="flex-center">
+      <span className="label">{data.label}</span> <span className="dot"></span>
+      <span className="datacenter">{data.datacenter}</span>{' '}
+      <span className="dot"></span>{' '}
+      <span className="value">{_.toUpper(value)}</span>
+    </OptionItem>
+  );
+};
+
+const labelRender = (props: {
+  label: string;
+  value: string;
+}): React.ReactNode => {
+  const data = regionList.find((item) => item.value === props.value);
+  return (
+    <OptionItem className="flex-center">
+      <span className="label">{data?.label}</span> <span className="dot"></span>
+      <span className="datacenter">{data?.datacenter}</span>{' '}
+      <span className="dot"></span>
+      <span className="value">{_.toUpper(data?.value)}</span>
+    </OptionItem>
+  );
+};
+
+const CloudProvider: React.FC<CloudProviderProps> = (props) => {
+  const { credentialList } = props;
   const intl = useIntl();
+
   return (
     <>
       <Form.Item<FormData>
@@ -29,12 +96,7 @@ const CloudProvider: React.FC<CloudProviderProps> = () => {
         <SealSelect
           label="Credential"
           required
-          options={['credential1', 'credential2', 'credential3'].map(
-            (item, i) => ({
-              label: item,
-              value: i
-            })
-          )}
+          options={credentialList}
         ></SealSelect>
       </Form.Item>
       <Form.Item<FormData>
@@ -54,33 +116,9 @@ const CloudProvider: React.FC<CloudProviderProps> = () => {
         <SealSelect
           label="Region"
           required
-          options={['Hangzhou', 'Guangzhou', 'Shenzhen'].map((item) => ({
-            label: item,
-            value: item
-          }))}
-        ></SealSelect>
-      </Form.Item>
-      <Form.Item<FormData>
-        name="zone"
-        rules={[
-          {
-            required: true,
-            message: intl.formatMessage(
-              { id: 'common.form.rule.input' },
-              {
-                name: 'Zone'
-              }
-            )
-          }
-        ]}
-      >
-        <SealSelect
-          label="Zone"
-          required
-          options={['A100', 'V100', 'T4'].map((item) => ({
-            label: item,
-            value: item
-          }))}
+          options={regionList}
+          labelRender={labelRender}
+          optionRender={optionRender}
         ></SealSelect>
       </Form.Item>
     </>