feat: cluster ux

src/pages/cluster-management/components/add-cluster.tsx

@@ -1,21 +1,23 @@
 import ModalFooter from '@/components/modal-footer';
-import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import ScrollerModal from '@/components/scroller-modal/index';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
+import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Button, Form } from 'antd';
 import React from 'react';
 import {
   ClusterFormData as FormData,
   ClusterListItem as ListItem
 } from '../config/types';
+import CloudProvider from './cloud-provider-form';
+import K8SProvider from './k8s-provider-form';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
-  clusterType: string; // 'kubernetes' | 'custom'
+  provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
   onOk: (values: FormData) => void;
   data?: ListItem;
   onCancel: () => void;
@@ -24,7 +26,7 @@ const AddCluster: React.FC<AddModalProps> = ({
   title,
   action,
   open,
-  clusterType,
+  provider,
   onOk,
   data,
   onCancel
@@ -36,9 +38,21 @@ const AddCluster: React.FC<AddModalProps> = ({
     form.submit();
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
   return (
-    <GSDrawer
-      title={title}
+    <ScrollerModal
+      title={
+        <div className="flex-between flex-center">
+          <span>{title}</span>
+          <Button type="text" size="small" onClick={handleCancel}>
+            <CloseOutlined></CloseOutlined>
+          </Button>
+        </div>
+      }
       open={open}
       onClose={onCancel}
       destroyOnClose={true}
@@ -53,7 +67,7 @@ const AddCluster: React.FC<AddModalProps> = ({
     >
       <Form form={form} onFinish={onOk} preserve={false}>
         <Form.Item<FormData>
-          name="name"
+          name="display_name"
           rules={[
             {
               required: true,
@@ -71,104 +85,15 @@ const AddCluster: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        {clusterType === 'kubernetes' && (
-          <>
-            {' '}
-            <Form.Item<FormData>
-              name="provider"
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage(
-                    { id: 'common.form.rule.input' },
-                    {
-                      name: 'Provider'
-                    }
-                  )
-                }
-              ]}
-            >
-              <SealSelect
-                label="Provider"
-                required
-                options={['Digital Ocean', 'AutoDL', 'Custom'].map((item) => ({
-                  label: item,
-                  value: item
-                }))}
-              ></SealSelect>
-            </Form.Item>
-            <Form.Item<FormData>
-              name="region"
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage(
-                    { id: 'common.form.rule.input' },
-                    {
-                      name: 'Region'
-                    }
-                  )
-                }
-              ]}
-            >
-              <SealSelect
-                label="Region"
-                required
-                options={['Hangzhou', 'Guangzhou', 'Shenzhen'].map((item) => ({
-                  label: item,
-                  value: item
-                }))}
-              ></SealSelect>
-            </Form.Item>
-          </>
-        )}
-        <Form.Item<FormData>
-          name="gpuPlan"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'GPU Plan'
-                }
-              )
-            }
-          ]}
-        >
-          <SealSelect
-            label="GPU Plan"
-            required
-            options={['A100', 'V100', 'T4'].map((item) => ({
-              label: item,
-              value: item
-            }))}
-          ></SealSelect>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="workers"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Workers'
-                }
-              )
-            }
-          ]}
-        >
-          <SealInput.Number label="Worker Number" required></SealInput.Number>
-        </Form.Item>
-
+        {provider === 'digitalocean' && <CloudProvider></CloudProvider>}
+        {provider === 'kubernetes' && <K8SProvider></K8SProvider>}
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealInput.TextArea
             label={intl.formatMessage({ id: 'common.table.description' })}
           ></SealInput.TextArea>
         </Form.Item>
       </Form>
-    </GSDrawer>
+    </ScrollerModal>
   );
 };
 

src/pages/cluster-management/components/add-credential.tsx

@@ -1,7 +1,6 @@
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
@@ -16,6 +15,7 @@ type AddModalProps = {
   onOk: (values: FormData) => void;
   data?: ListItem;
   onCancel: () => void;
+  provider: string; // 'kubernetes'  | 'digitalocean';
 };
 const AddModal: React.FC<AddModalProps> = ({
   title,
@@ -23,6 +23,7 @@ const AddModal: React.FC<AddModalProps> = ({
   open,
   onOk,
   data,
+  provider,
   onCancel
 }) => {
   const [form] = Form.useForm();
@@ -69,7 +70,7 @@ const AddModal: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData>
+        {/* <Form.Item<FormData>
           name="provider"
           rules={[
             {
@@ -86,42 +87,55 @@ const AddModal: React.FC<AddModalProps> = ({
           <SealSelect
             label="Provider"
             required
-            options={['Digital Ocean', 'AutoDL', 'Custom'].map((item) => ({
+            options={['Digital Ocean', 'Kubernetes', 'Custom'].map((item) => ({
               label: item,
               value: item
             }))}
           ></SealSelect>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="access_key"
-          rules={[
-            {
-              required: action === PageAction.CREATE,
-              pattern: PasswordReg,
-              message: intl.formatMessage({ id: 'users.form.rule.password' })
-            }
-          ]}
-        >
-          <SealInput.Password
-            label="Access Key"
-            required={action === PageAction.CREATE}
-          ></SealInput.Password>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="secret_key"
-          rules={[
-            {
-              required: action === PageAction.CREATE,
-              pattern: PasswordReg,
-              message: intl.formatMessage({ id: 'users.form.rule.password' })
-            }
-          ]}
-        >
-          <SealInput.Password
-            label="Secret Key"
-            required={action === PageAction.CREATE}
-          ></SealInput.Password>
-        </Form.Item>
+        </Form.Item> */}
+        {provider === 'digital_ocean' && (
+          <>
+            <Form.Item<FormData>
+              name="access_key"
+              rules={[
+                {
+                  required: action === PageAction.CREATE,
+                  pattern: PasswordReg,
+                  message: intl.formatMessage({
+                    id: 'users.form.rule.password'
+                  })
+                }
+              ]}
+            >
+              <SealInput.Password
+                label="Access Key"
+                required={action === PageAction.CREATE}
+              ></SealInput.Password>
+            </Form.Item>
+            <Form.Item<FormData>
+              name="secret_key"
+              rules={[
+                {
+                  required: action === PageAction.CREATE,
+                  pattern: PasswordReg,
+                  message: intl.formatMessage({
+                    id: 'users.form.rule.password'
+                  })
+                }
+              ]}
+            >
+              <SealInput.Password
+                label="Secret Key"
+                required={action === PageAction.CREATE}
+              ></SealInput.Password>
+            </Form.Item>
+          </>
+        )}
+        {provider === 'kubernetes' && (
+          <Form.Item<FormData> name="kubeconfig" rules={[{ required: false }]}>
+            <SealInput.TextArea label="Kubeconfig"></SealInput.TextArea>
+          </Form.Item>
+        )}
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealInput.TextArea
             label={intl.formatMessage({ id: 'common.table.description' })}

src/pages/cluster-management/components/add-pool.tsx

@@ -0,0 +1,186 @@
+import LabelSelector from '@/components/label-selector';
+import ModalFooter from '@/components/modal-footer';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import SealInputNumber from '@/components/seal-form/input-number';
+import SealInput from '@/components/seal-form/seal-input';
+import { PageActionType } from '@/config/types';
+import { CloseOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Form } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import {
+  NodePoolFormData as FormData,
+  NodePoolListItem as ListItem
+} from '../config/types';
+
+type AddModalProps = {
+  title: string;
+  action: PageActionType;
+  open: boolean;
+  provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
+  onOk: (values: FormData) => void;
+  data?: ListItem;
+  onCancel: () => void;
+};
+const AddCluster: React.FC<AddModalProps> = ({
+  title,
+  action,
+  open,
+  provider,
+  onOk,
+  data,
+  onCancel
+}) => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+
+  const handleSumit = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  return (
+    <GSDrawer
+      title={
+        <div className="flex-between flex-center">
+          <span>{title}</span>
+          <Button type="text" size="small" onClick={handleCancel}>
+            <CloseOutlined></CloseOutlined>
+          </Button>
+        </div>
+      }
+      open={open}
+      onClose={onCancel}
+      destroyOnClose={true}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{}}
+      footer={
+        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
+      }
+    >
+      <Form form={form} onFinish={onOk} preserve={false}>
+        <Form.Item<FormData>
+          name="instance_type"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({ id: 'common.table.name' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'common.table.name' })}
+            required
+          ></SealInput.Input>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="replicas"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: 'Replicas'
+                }
+              )
+            }
+          ]}
+        >
+          <SealInputNumber label="Replicas" required></SealInputNumber>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="batch_size"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: 'Batch Size'
+                }
+              )
+            }
+          ]}
+        >
+          <SealInputNumber label="Batch Size" required></SealInputNumber>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="labels"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: 'labels'
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            label="Labels"
+            labels={form.getFieldValue('labels') || {}}
+            btnText="Add Label"
+          ></LabelSelector>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="cloud_options"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: 'cloud_options'
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            label="Cloud Options"
+            labels={form.getFieldValue('cloud_options') || {}}
+            btnText="Add Option"
+          ></LabelSelector>
+        </Form.Item>
+      </Form>
+    </GSDrawer>
+  );
+};
+
+export default AddCluster;

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

@@ -0,0 +1,90 @@
+import SealSelect from '@/components/seal-form/seal-select';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import { ClusterFormData as FormData } from '../config/types';
+
+interface CloudProviderProps {
+  provider: string; // 'kubernetes' | 'digitalocean';
+}
+
+const CloudProvider: React.FC<CloudProviderProps> = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <Form.Item<FormData>
+        name="credential_id"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'credential'
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          label="Credential"
+          required
+          options={['credential1', 'credential2', 'credential3'].map(
+            (item) => ({
+              label: item,
+              value: item
+            })
+          )}
+        ></SealSelect>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="region"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'Region'
+              }
+            )
+          }
+        ]}
+      >
+        <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
+          }))}
+        ></SealSelect>
+      </Form.Item>
+    </>
+  );
+};
+
+export default CloudProvider;

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

@@ -0,0 +1,44 @@
+import SealSelect from '@/components/seal-form/seal-select';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import { ClusterFormData as FormData } from '../config/types';
+
+interface CloudProviderProps {
+  provider: string; // 'kubernetes' | 'digitalocean';
+}
+
+const CloudProvider: React.FC<CloudProviderProps> = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <Form.Item<FormData>
+        name="credential_id"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'credential'
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          label="Kubeconfig"
+          required
+          options={['credential1', 'credential2', 'credential3'].map(
+            (item) => ({
+              label: item,
+              value: item
+            })
+          )}
+        ></SealSelect>
+      </Form.Item>
+    </>
+  );
+};
+
+export default CloudProvider;