fix: gpu selector by cluster

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

@@ -19,6 +19,7 @@ type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
+  currentData?: ListItem; // Used when action is EDIT
   provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
   onOk: (values: FormData) => void;
   onCancel: () => void;
@@ -28,6 +29,7 @@ const AddCluster: React.FC<AddModalProps> = ({
   action,
   open,
   provider,
+  currentData,
   onOk,
   onCancel
 }) => {
@@ -36,12 +38,20 @@ const AddCluster: React.FC<AddModalProps> = ({
   const [submissionStatus, setSubmissionStatus] = React.useState<{
     success: boolean;
     data: ListItem;
-  }>({ success: true, data: {} as ListItem });
+  }>({ success: false, data: {} as ListItem });
 
   const handleSubmit = () => {
     form.submit();
   };
 
+  const handleOk = async (data: FormData) => {
+    console.log('handleOk===', data);
+    onOk({
+      ...data,
+      provider
+    });
+  };
+
   const handleCancel = () => {
     form.resetFields();
     onCancel();
@@ -109,9 +119,14 @@ const AddCluster: React.FC<AddModalProps> = ({
       {submissionStatus.success ? (
         renderAddWorkerContent()
       ) : (
-        <Form form={form} onFinish={onOk} preserve={false}>
+        <Form
+          form={form}
+          onFinish={handleOk}
+          preserve={false}
+          initialValues={currentData}
+        >
           <Form.Item<FormData>
-            name="display_name"
+            name="name"
             rules={[
               {
                 required: true,
@@ -129,7 +144,7 @@ const AddCluster: React.FC<AddModalProps> = ({
               required
             ></SealInput.Input>
           </Form.Item>
-          {provider === 'digitalocean' && (
+          {provider === ProviderValueMap.DigitalOcean && (
             <CloudProvider provider={provider}></CloudProvider>
           )}
           <Form.Item<FormData> name="description" rules={[{ required: false }]}>

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

@@ -1,19 +1,23 @@
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
-import { PageAction, PasswordReg } from '@/config';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { Button, Form } from 'antd';
 import React from 'react';
-import { FormData, ListItem } from '../config/types';
+import { ProviderValueMap } from '../config';
+import {
+  CredentialFormData as FormData,
+  CredentialListItem as ListItem
+} from '../config/types';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
   onOk: (values: FormData) => void;
-  data?: ListItem;
+  currentData?: ListItem;
   onCancel: () => void;
   provider: string; // 'kubernetes'  | 'digitalocean';
 };
@@ -22,7 +26,7 @@ const AddModal: React.FC<AddModalProps> = ({
   action,
   open,
   onOk,
-  data,
+  currentData,
   provider,
   onCancel
 }) => {
@@ -33,6 +37,10 @@ const AddModal: React.FC<AddModalProps> = ({
     form.submit();
   };
 
+  const handleOk = async (data: FormData) => {
+    onOk(data);
+  };
+
   return (
     <ScrollerModal
       title={title}
@@ -53,7 +61,12 @@ const AddModal: React.FC<AddModalProps> = ({
         ></ModalFooter>
       }
     >
-      <Form form={form} onFinish={onOk} preserve={false}>
+      <Form
+        form={form}
+        onFinish={handleOk}
+        preserve={false}
+        initialValues={currentData}
+      >
         <Form.Item<FormData>
           name="name"
           rules={[
@@ -73,14 +86,13 @@ const AddModal: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        {provider === 'digital_ocean' && (
+        {provider === ProviderValueMap.DigitalOcean && (
           <>
             <Form.Item<FormData>
-              name="access_key"
+              name="key"
               rules={[
                 {
                   required: action === PageAction.CREATE,
-                  pattern: PasswordReg,
                   message: intl.formatMessage({
                     id: 'users.form.rule.password'
                   })
@@ -93,11 +105,10 @@ const AddModal: React.FC<AddModalProps> = ({
               ></SealInput.Password>
             </Form.Item>
             <Form.Item<FormData>
-              name="secret_key"
+              name="secret"
               rules={[
                 {
                   required: action === PageAction.CREATE,
-                  pattern: PasswordReg,
                   message: intl.formatMessage({
                     id: 'users.form.rule.password'
                   })
@@ -105,17 +116,12 @@ const AddModal: React.FC<AddModalProps> = ({
               ]}
             >
               <SealInput.Password
-                label="Secret Key"
+                label="Access Secret"
                 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/cloud-provider-form.tsx

@@ -30,9 +30,9 @@ const CloudProvider: React.FC<CloudProviderProps> = () => {
           label="Credential"
           required
           options={['credential1', 'credential2', 'credential3'].map(
-            (item) => ({
+            (item, i) => ({
               label: item,
-              value: item
+              value: i
             })
           )}
         ></SealSelect>

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

@@ -5,78 +5,22 @@ import StatusTag from '@/components/status-tag';
 import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import Card from '@/components/templates/card';
 import { PageAction } from '@/config';
-import {
-  DeleteOutlined,
-  EditOutlined,
-  KubernetesOutlined
-} from '@ant-design/icons';
 import { Card as ACard, Col, Collapse, Row } from 'antd';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import { queryClusterToken } from '../apis';
 import {
   ClusterStatus,
   ClusterStatusLabelMap,
   ProviderLabelMap,
-  ProviderValueMap
+  ProviderValueMap,
+  poolActionList
 } from '../config';
 import { ClusterListItem as ListItem, NodePoolListItem } from '../config/types';
 import AddPool from './add-pool';
 import RegisterCluster from './register-cluster';
 import WorkerPools from './worker-pools';
 
-const actionItems = [
-  {
-    key: 'edit',
-    label: 'common.button.edit',
-    icon: <EditOutlined />
-  },
-  {
-    key: 'details',
-    label: 'common.button.view',
-    icon: <IconFont type="icon-detail-info" className="font-size-16" />
-  },
-  {
-    key: 'add_worker',
-    label: 'Add Worker',
-    provider: ProviderValueMap.Custom,
-    locale: false,
-    icon: <IconFont type="icon-docker" />
-  },
-  {
-    key: 'register_cluster',
-    label: 'Register Cluster',
-    provider: ProviderValueMap.Kubernetes,
-    locale: false,
-    icon: <KubernetesOutlined />
-  },
-  {
-    key: 'addPool',
-    label: 'Add Node Pool',
-    provider: ProviderValueMap.DigitalOcean,
-    locale: false,
-    icon: <IconFont type="icon-catalog1" />
-  },
-  {
-    key: 'delete',
-    label: 'common.button.delete',
-    icon: <DeleteOutlined />,
-    props: {
-      danger: true
-    }
-  }
-];
-
-const CollapseTitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: var(--font-size-middle);
-  font-weight: 500;
-  color: var(--ant-color-text);
-  height: 32px;
-  cursor: pointer;
-`;
-
 const Content = styled.div`
   display: flex;
   justify-content: space-between;
@@ -216,12 +160,39 @@ const CardItem: React.FC<CardProps> = (props) => {
     open: false,
     action: PageAction.CREATE,
     title: '',
-    provider: 'digitalocean'
+    provider: ProviderValueMap.DigitalOcean
   });
-  const [registerClusterStatus, setRegisterClusterStatus] = React.useState({
-    open: false
+  const [registerClusterStatus, setRegisterClusterStatus] = React.useState<{
+    open: boolean;
+    registrationInfo: {
+      token: string;
+      image: string;
+      server_url: string;
+      cluster_id: number;
+    };
+  }>({
+    open: false,
+    registrationInfo: {
+      token: '',
+      image: '',
+      server_url: '',
+      cluster_id: 0
+    }
   });
 
+  const handleRegisterCluster = async () => {
+    try {
+      const info = await queryClusterToken({ id: data.id });
+      setRegisterClusterStatus({
+        open: true,
+        registrationInfo: {
+          ...info,
+          cluster_id: data.id
+        }
+      });
+    } catch (error) {}
+  };
+
   // cluster action handler
   const handleOnSelect = (key: string) => {
     if (key === 'addPool') {
@@ -235,9 +206,7 @@ const CardItem: React.FC<CardProps> = (props) => {
     }
 
     if (key === 'register_cluster') {
-      setRegisterClusterStatus({
-        open: true
-      });
+      handleRegisterCluster();
       return;
     }
     onSelect?.(key, data);
@@ -256,7 +225,7 @@ const CardItem: React.FC<CardProps> = (props) => {
   };
 
   const actions = useMemo(() => {
-    return actionItems.filter((item) => {
+    return poolActionList.filter((item) => {
       if (item.provider) {
         return item.provider === data.provider;
       }
@@ -269,7 +238,7 @@ const CardItem: React.FC<CardProps> = (props) => {
       height={'auto'}
       clickable={false}
       ghost
-      footer={
+      footerHolder={
         <CollapseWrapper
           onChange={() => setShow(!show)}
           expandIconPosition="end"
@@ -340,11 +309,13 @@ const CardItem: React.FC<CardProps> = (props) => {
         <div className="title">
           <span className="flex-center gap-8">
             <span className="text">{data.name}</span>
-            <ThemeTag>{ProviderLabelMap[data.provider]}</ThemeTag>
+            <ThemeTag color="purple">
+              {ProviderLabelMap[data.provider]}
+            </ThemeTag>
             <StatusTag
               statusValue={{
-                status: ClusterStatus[data.status],
-                text: ClusterStatusLabelMap[data.status]
+                status: ClusterStatus[data.state],
+                text: ClusterStatusLabelMap[data.state]
               }}
             />
           </span>
@@ -359,15 +330,17 @@ const CardItem: React.FC<CardProps> = (props) => {
           <CardBox>
             <CardWrapper bordered={false}>
               <div className="label">Workers</div>
-              <div className="value">1/1</div>
+              <div className="value">
+                {data.ready_workers} / {data.workers}
+              </div>
             </CardWrapper>
             <CardWrapper bordered={false}>
               <div className="label">GPUs</div>
-              <div className="value">12</div>
+              <div className="value">{data.gpus}</div>
             </CardWrapper>
             <CardWrapper bordered={false}>
               <div className="label">Deployments</div>
-              <div className="value">2</div>
+              <div className="value">{data.models}</div>
             </CardWrapper>
           </CardBox>
         </Content>
@@ -397,10 +370,16 @@ const CardItem: React.FC<CardProps> = (props) => {
       <RegisterCluster
         title="Register Cluster"
         open={registerClusterStatus.open}
-        data={data}
+        registrationInfo={registerClusterStatus.registrationInfo}
         onCancel={() => {
           setRegisterClusterStatus({
-            open: false
+            open: false,
+            registrationInfo: {
+              token: '',
+              image: '',
+              server_url: '',
+              cluster_id: 0
+            }
           });
         }}
       ></RegisterCluster>

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

@@ -1,18 +1,22 @@
 import ScrollerModal from '@/components/scroller-modal/index';
 import React from 'react';
-import { ClusterListItem as ListItem } from '../config/types';
 import RegisterClusterInner from './resiter-cluster-inner';
 
 type AddModalProps = {
   title: string;
   open: boolean;
-  data: ListItem;
+  registrationInfo: {
+    token: string;
+    image: string;
+    server_url: string;
+    cluster_id: number;
+  };
   onCancel: () => void;
 };
 const AddCluster: React.FC<AddModalProps> = ({
   title,
   open,
-  data,
+  registrationInfo,
   onCancel
 }) => {
   const handleCancel = () => {
@@ -31,7 +35,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       width={600}
       footer={false}
     >
-      <RegisterClusterInner data={data} />
+      <RegisterClusterInner registrationInfo={registrationInfo} />
     </ScrollerModal>
   );
 };

src/pages/cluster-management/components/resiter-cluster-inner.tsx

@@ -1,41 +1,39 @@
 import HighlightCode from '@/components/highlight-code';
-import React, { useEffect } from 'react';
-import { queryClusterToken } from '../apis';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
 import { generateRegisterCommand } from '../config';
-import { ClusterListItem as ListItem } from '../config/types';
+
+const Title = styled.h3`
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin-bottom: 12px;
+  margin-top: 12px;
+  font-size: var(--font-size-normal);
+  .ant-tag {
+    color: var(--ant-color-text-secondary);
+    font-weight: 400;
+  }
+`;
 
 type AddModalProps = {
-  data: ListItem;
+  registrationInfo: {
+    token: string;
+    image: string;
+    server_url: string;
+    cluster_id: number;
+  };
 };
-const AddCluster: React.FC<AddModalProps> = ({ data }) => {
-  const [code, setCode] = React.useState<string>('');
-  const getToken = async () => {
-    const res = await queryClusterToken(data?.id);
-    return res.data?.token || '';
-  };
+const AddCluster: React.FC<AddModalProps> = ({ registrationInfo }) => {
+  const code = useMemo(() => {
+    return generateRegisterCommand({
+      server: registrationInfo?.server_url || window.location.origin,
+      clusterId: registrationInfo?.cluster_id,
+      registrationToken: registrationInfo?.token
+    });
+  }, [registrationInfo]);
 
-  const getCode = async () => {
-    try {
-      const token = await getToken();
-      const command = generateRegisterCommand({
-        server: window.location.origin,
-        clusterId: data?.id || 0,
-        registrationToken: token
-      });
-      setCode(command);
-    } catch (error) {
-      setCode(
-        generateRegisterCommand({
-          server: window.location.origin,
-          clusterId: data?.id || 0,
-          registrationToken: '{token}'
-        })
-      );
-    }
-  };
-
-  useEffect(() => {
-    getCode();
+  const applyCommand = useMemo(() => {
+    return `kubectl apply -f manifest.yaml`;
   }, []);
 
   return (