chore: get started for add cluster

src/pages/cluster-management/cluster-create.tsx

@@ -1,7 +1,9 @@
+import { clusterSessionAtom } from '@/atoms/clusters';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import PageBreadcrumb from '@/pages/_components/page-breadcrumb';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
+import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -39,6 +41,7 @@ const ClusterCreate = () => {
   const action =
     (searchParams.get('action') as PageActionType) || PageAction.CREATE;
   const navigate = useNavigate();
+  const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
   const [credentialList, setCredentialList] = useState<
     Global.BaseOption<number, { provider: ProviderType }>[]
   >([]);
@@ -253,6 +256,14 @@ const ClusterCreate = () => {
   };
 
   const handleCancel = () => {
+    if (clusterSession?.firstAddCluster) {
+      setClusterSession({
+        firstAddCluster: false,
+        firstAddWorker: false
+      });
+      navigate(`/cluster-management/clusters/list`);
+      return;
+    }
     navigate(-1);
   };
 

src/pages/cluster-management/clusters.tsx

@@ -1,4 +1,4 @@
-import { expandKeysAtom } from '@/atoms/clusters';
+import { clusterSessionAtom, expandKeysAtom } from '@/atoms/clusters';
 import DeleteModal from '@/components/delete-modal';
 import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
@@ -33,7 +33,11 @@ import {
   K8sStepsFromCluter
 } from './components/add-worker/config';
 import PoolRows from './components/pool-rows';
-import { ProviderType, ProviderValueMap } from './config';
+import {
+  ClusterStatusValueMap,
+  ProviderType,
+  ProviderValueMap
+} from './config';
 import {
   ClusterListItem,
   CredentialListItem,
@@ -65,6 +69,7 @@ const Clusters: React.FC = () => {
   });
   const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
   const [expandAtom] = useAtom(expandKeysAtom);
+  const [clusterSession, setClusterSession] = useAtom(clusterSessionAtom);
   const { handleExpandChange, handleExpandAll, expandedRowKeys } =
     useExpandedRowKeys(expandAtom);
   const navigate = useNavigate();
@@ -241,6 +246,27 @@ const Clusters: React.FC = () => {
     fetchCredentialList();
   }, []);
 
+  useEffect(() => {
+    if (
+      clusterSession?.firstAddWorker &&
+      dataSource.loadend &&
+      dataSource.dataList?.length > 0
+    ) {
+      const targetCluster = dataSource.dataList.find(
+        (cluster) =>
+          cluster.state === ClusterStatusValueMap.Ready &&
+          !cluster.workers &&
+          !cluster.worker_pools?.length
+      );
+
+      if (targetCluster) {
+        handleAddWorker(targetCluster);
+        // reset session
+        setClusterSession(null);
+      }
+    }
+  }, [clusterSession, dataSource.loadend, dataSource.dataList]);
+
   const renderChildren = (
     list: any,
     options: { parent?: any; [key: string]: any }

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

@@ -4,8 +4,9 @@ import SealInput from '@/components/seal-form/seal-input';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
+import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Form, Typography } from 'antd';
 import React, { useEffect } from 'react';
 import { ProviderType, ProviderValueMap } from '../config';
 import {
@@ -100,8 +101,21 @@ const AddModal: React.FC<AddModalProps> = ({
               ]}
             >
               <SealInput.Password
-                label={intl.formatMessage({ id: 'clusters.credential.token' })}
+                label={intl.formatMessage({
+                  id: 'clusters.credential.token'
+                })}
                 required={action === PageAction.CREATE}
+                labelExtra={
+                  <Typography.Link
+                    href="https://cloud.digitalocean.com/account/api/tokens"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ marginLeft: 8, lineHeight: 1 }}
+                  >
+                    {intl.formatMessage({ id: 'clusters.button.genToken' })}{' '}
+                    <ExportOutlined style={{ fontSize: 12 }} />
+                  </Typography.Link>
+                }
               ></SealInput.Password>
             </Form.Item>
           </>