feat: add watch api in cluster

src/components/collapse-container/index.tsx

@@ -14,11 +14,15 @@ const CardStyled = styled(Card)`
     }
   }
   .ant-card-head {
+    cursor: pointer;
     background-color: var(--ant-color-fill-quaternary);
     border-bottom: none;
     border-radius: var(--ant-border-radius);
     &:hover {
       background-color: var(--ant-color-fill-secondary);
+      .del-btn {
+        display: block;
+      }
     }
   }
 `;
@@ -28,12 +32,17 @@ const useStyles = createStyles(({ css, token }) => {
     title: css`
       font-weight: 400;
       height: 56px;
-      font-size: ${token.fontSizeLG};
+      font-size: var(--font-size-base);
       display: flex;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
     `,
+    expandIcon: css`
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    `,
     subtitle: css`
       font-size: 12px;
       color: ${token.colorTextSecondary};
@@ -48,6 +57,9 @@ const useStyles = createStyles(({ css, token }) => {
       display: flex;
       align-items: center;
       gap: 8px;
+      .del-btn {
+        display: none;
+      }
     `
   };
 });
@@ -56,6 +68,7 @@ export interface CollapsibleContainerProps {
   title?: React.ReactNode;
   subtitle?: React.ReactNode;
   right?: React.ReactNode;
+  deleteBtn?: React.ReactNode;
   defaultOpen?: boolean;
   open?: boolean;
   collapsible?: boolean;
@@ -70,6 +83,7 @@ export default function CollapsibleContainer({
   title,
   subtitle,
   right,
+  deleteBtn,
   defaultOpen = true,
   open,
   onToggle,
@@ -105,19 +119,22 @@ export default function CollapsibleContainer({
     return (
       <div className={styles.title} onClick={toggle}>
         <div className={styles.left}>
-          {title && <div>{title}</div>}
+          <div className={styles.expandIcon}>
+            <IconFont
+              rotate={isOpen ? 180 : 0}
+              type="icon-down"
+              style={{
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                fontSize: 12
+              }}
+            />
+            {title && <div>{title}</div>}
+          </div>
           {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
         </div>
         <div className={styles.right}>
-          {right}
+          {right && <span>{right}</span>}
-          <IconFont
+          {deleteBtn && <span className="del-btn">{deleteBtn}</span>}
-            rotate={isOpen ? 180 : 0}
-            type="icon-down"
-            style={{
-              cursor: disabled ? 'not-allowed' : 'pointer',
-              fontSize: 12
-            }}
-          />
         </div>
       </div>
     );

src/components/seal-table/components/cell-content.tsx

@@ -0,0 +1,178 @@
+import { CheckOutlined, FormOutlined, UndoOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Input, InputNumber, Tooltip } from 'antd';
+import _ from 'lodash';
+import React, { useContext, useEffect } from 'react';
+import styled from 'styled-components';
+import RowContext from '../row-context';
+import { CellContentProps } from '../types';
+
+const CellContentWrapper = styled.div`
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+interface EditButtonsProps {
+  isEditing: boolean;
+  editable?: any;
+  handleSubmit: () => void;
+  handleUndo: () => void;
+  handleEdit: () => void;
+}
+
+interface ContentProps {
+  isEditing: boolean;
+  current: any;
+  editable: any;
+  onChange: (val: any) => void;
+  row?: any;
+  render?: (text: any, record: any) => React.ReactNode;
+}
+
+const EditButtons: React.FC<EditButtonsProps> = (props) => {
+  const intl = useIntl();
+  const { isEditing, editable, handleSubmit, handleUndo, handleEdit } = props;
+  if (!editable) {
+    return null;
+  }
+
+  if (isEditing) {
+    return (
+      <span className="flex-column">
+        <Tooltip
+          key="confirm"
+          title={intl.formatMessage({ id: 'common.button.confirm' })}
+        >
+          <Button
+            type="text"
+            size="small"
+            className="m-l-10"
+            onClick={handleSubmit}
+          >
+            <CheckOutlined />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          title={intl.formatMessage({ id: 'common.button.cancel' })}
+          key="undo"
+        >
+          <Button
+            type="text"
+            size="small"
+            className="m-l-10"
+            onClick={handleUndo}
+          >
+            <UndoOutlined />
+          </Button>
+        </Tooltip>
+      </span>
+    );
+  }
+  return (
+    <span className="flex-column">
+      <Tooltip
+        key="edit"
+        title={
+          _.isBoolean(editable) ? (
+            intl.formatMessage({ id: 'common.button.edit' })
+          ) : (
+            <span>{editable.title || ''}</span>
+          )
+        }
+      >
+        <Button
+          type="text"
+          size="small"
+          className="m-l-10"
+          onClick={handleEdit}
+        >
+          <FormOutlined />
+        </Button>
+      </Tooltip>
+    </span>
+  );
+};
+
+const Content: React.FC<ContentProps> = (props) => {
+  const { editable, current, isEditing, row, render, onChange } = props;
+  if (isEditing && editable) {
+    const isNumType =
+      typeof editable === 'object' && editable?.valueType === 'number';
+    return isNumType ? (
+      <InputNumber
+        style={{ width: '80px' }}
+        min={0}
+        value={current}
+        onChange={onChange}
+      />
+    ) : (
+      <Input value={current} onChange={(e) => onChange(e.target.value)} />
+    );
+  }
+
+  if (render) {
+    return render(current, row);
+  }
+  return current;
+};
+
+const CellContent: React.FC<CellContentProps> = (props) => {
+  const { row, onCell } = useContext(RowContext);
+  const { dataIndex, render, editable } = props;
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [current, setCurrent] = React.useState(row[dataIndex]);
+  const cachedValue = React.useRef(null);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleSubmit = async () => {
+    cachedValue.current = current;
+    await onCell?.(
+      {
+        ...row,
+        [dataIndex]: current
+      },
+      dataIndex
+    );
+    setIsEditing(false);
+  };
+
+  const handleUndo = () => {
+    setCurrent(cachedValue.current);
+    setIsEditing(false);
+  };
+
+  const handleValueChange = (val: any) => {
+    setCurrent(val);
+  };
+
+  useEffect(() => {
+    cachedValue.current = row[dataIndex];
+    setCurrent(row[dataIndex]);
+  }, [row[dataIndex]]);
+
+  return (
+    <CellContentWrapper>
+      <Content
+        onChange={handleValueChange}
+        isEditing={isEditing}
+        editable={editable}
+        current={current}
+        row={row}
+        render={render}
+      ></Content>
+      <EditButtons
+        editable={editable}
+        isEditing={isEditing}
+        handleEdit={handleEdit}
+        handleSubmit={handleSubmit}
+        handleUndo={handleUndo}
+      ></EditButtons>
+    </CellContentWrapper>
+  );
+};
+
+export default CellContent;

src/components/seal-table/components/header.tsx

@@ -18,6 +18,7 @@ const Header: React.FC<HeaderProps> = (props) => {
           title,
           dataIndex,
           align,
+          width,
           span,
           headerStyle,
           sortOrder,
@@ -31,6 +32,7 @@ const Header: React.FC<HeaderProps> = (props) => {
               sorter={sorter}
               dataIndex={dataIndex}
               sortOrder={sortOrder}
+              width={width}
               defaultSortOrder={defaultSortOrder}
               title={title}
               style={headerStyle}

src/components/seal-table/components/table-cell.tsx

@@ -4,9 +4,34 @@ import { Button, Input, InputNumber, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useContext, useEffect } from 'react';
+import styled from 'styled-components';
 import RowContext from '../row-context';
-import '../styles/cell.less';
 import { SealColumnProps } from '../types';
+import CellContent from './cell-content';
+
+const CellWrapper = styled.div`
+  padding: var(--ant-table-cell-padding-block)
+    var(--ant-table-cell-padding-inline);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 68px;
+  word-break: break-word;
+  min-width: 20px;
+  overflow: hidden;
+
+  &.left {
+    justify-content: flex-start;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
+
+  &.center {
+    justify-content: center;
+  }
+`;
 
 interface EditButtonsProps {
   isEditing: boolean;
@@ -89,7 +114,7 @@ const EditButtons: React.FC<EditButtonsProps> = (props) => {
   );
 };
 
-const CellContent: React.FC<CellContentProps> = (props) => {
+const Content: React.FC<CellContentProps> = (props) => {
   const { editable, current, isEditing, row, render, onChange } = props;
   if (isEditing && editable) {
     const isNumType =
@@ -112,7 +137,7 @@ const CellContent: React.FC<CellContentProps> = (props) => {
   return current;
 };
 
-const SealColumn: React.FC<SealColumnProps> = (props) => {
+const TableCell: React.FC<SealColumnProps> = (props) => {
   const { row, onCell } = useContext(RowContext);
   const { dataIndex, render, align, editable } = props;
   const [isEditing, setIsEditing] = React.useState(false);
@@ -150,22 +175,22 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
   }, [row[dataIndex]]);
 
   return (
-    <div
+    <CellWrapper
       className={classNames('cell', {
-        'cell-left': align === 'left',
+        left: align === 'left',
-        'cell-center': align === 'center',
+        center: align === 'center',
-        'cell-right': align === 'right'
+        right: align === 'right'
       })}
     >
-      <span className="cell-content flex-center">
+      {/* <span className="cell-content flex-center">
-        <CellContent
+        <Content
           onChange={handleValueChange}
           isEditing={isEditing}
           editable={editable}
           current={current}
           row={row}
           render={render}
-        ></CellContent>
+        ></Content>
         <EditButtons
           editable={editable}
           isEditing={isEditing}
@@ -173,9 +198,14 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
           handleSubmit={handleSubmit}
           handleUndo={handleUndo}
         ></EditButtons>
-      </span>
+      </span> */}
-    </div>
+      <CellContent
+        dataIndex={dataIndex}
+        render={render}
+        editable={editable}
+      ></CellContent>
+    </CellWrapper>
   );
 };
 
-export default SealColumn;
+export default TableCell;

src/components/seal-table/components/table-header.tsx

@@ -15,6 +15,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
     sortOrder,
     onSort,
     sorter,
+    width,
     dataIndex
   } = props;
 
@@ -27,7 +28,7 @@ const TableHeader: React.FC<TableHeaderProps> = (props) => {
   };
   return (
     <div
-      style={{ ...style }}
+      style={{ width, ...style }}
       className={classNames('table-header', {
         'table-header-left': align === 'left',
         'table-header-center': align === 'center',

src/components/seal-table/components/table-row.tsx

@@ -8,7 +8,7 @@ import RowContext from '../row-context';
 import TableContext from '../table-context';
 import { RowContextProps, SealTableProps } from '../types';
 import RowPrefix from './row-prefix';
-import TableColumn from './seal-column';
+import TableCell from './table-cell';
 
 const TableRow: React.FC<
   RowContextProps &
@@ -209,7 +209,7 @@ const TableRow: React.FC<
                   key={`${restProps.dataIndex}-${rowIndex}`}
                   span={restProps.span}
                 >
-                  <TableColumn {...restProps}></TableColumn>
+                  <TableCell {...restProps}></TableCell>
                 </Col>
               );
             })}

src/components/seal-table/row-context.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 
-const RowContext = React.createContext<any>({});
+interface RowContextType {
+  row: Record<string, any>;
+  onCell?: (record: any, dataIndex: string) => any;
+}
+
+const RowContext = React.createContext<RowContextType>({} as RowContextType);
 
 export default RowContext;

src/components/seal-table/styles/cell.less

@@ -14,15 +14,15 @@
     line-height: 18px;
   }
 
-  &-left {
+  &.left {
     justify-content: flex-start;
   }
 
-  &-right {
+  &.right {
     justify-content: flex-end;
   }
 
-  &-center {
+  &.center {
     justify-content: center;
   }
 }

src/components/seal-table/types.ts

@@ -1,5 +1,16 @@
 import React from 'react';
 
+export interface CellContentProps {
+  dataIndex: string;
+  render?: (text: any, record: any) => React.ReactNode;
+  editable?:
+    | boolean
+    | {
+        valueType?: 'text' | 'number' | 'date' | 'datetime' | 'time';
+        title?: React.ReactNode;
+      };
+}
+
 export interface SealColumnProps {
   title: React.ReactNode;
   render?: (text: any, record: any) => React.ReactNode;
@@ -33,6 +44,7 @@ export interface TableHeaderProps {
   firstCell?: boolean;
   lastCell?: boolean;
   align?: 'left' | 'center' | 'right';
+  width?: number | string;
 }
 
 export interface RowSelectionProps {

src/components/status-tag/index.tsx

@@ -20,6 +20,7 @@ export const StatusMaps = {
 };
 
 type StatusTagProps = {
+  style?: React.CSSProperties;
   statusValue: {
     status: StatusType;
     text: string;
@@ -42,6 +43,7 @@ type StatusTagProps = {
 };
 
 const StatusTag: React.FC<StatusTagProps> = ({
+  style,
   statusValue,
   download,
   extra,
@@ -149,7 +151,8 @@ const StatusTag: React.FC<StatusTagProps> = ({
       })}
       style={{
         color: statusColor?.text,
-        border: `1px solid ${statusColor?.border || statusColor?.text}`
+        border: `1px solid ${statusColor?.border || statusColor?.text}`,
+        ...style
       }}
     >
       {statusValue.message ? (

src/components/templates/card.tsx

@@ -70,12 +70,12 @@ const Icon = styled.div`
   display: flex;
   align-items: center;
   margin-right: 16px;
-  font-size: 46px;
+  font-size: 32px;
 `;
 
 const Header = styled.div`
   font-weight: bold;
-  font-size: 16px;
+  font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: space-between;

src/config/theme/dark.ts

@@ -7,6 +7,9 @@ export default {
       inputFontSize: 14,
       inputFontSizeLG: 14
     },
+    Steps: {
+      descriptionMaxWidth: 200
+    },
     Table: {
       headerBorderRadius: 4,
       cellPaddingInline: 16,

src/config/theme/light.ts

@@ -7,6 +7,9 @@ export default {
       inputFontSize: 14,
       inputFontSizeLG: 14
     },
+    Steps: {
+      descriptionMaxWidth: 200
+    },
     Table: {
       headerBorderRadius: 4,
       cellPaddingInline: 16,

src/global.less

@@ -827,6 +827,7 @@ body {
 
 .ant-pro-page-container-affix .ant-affix .ant-pro-page-container-warp {
   box-shadow: none;
+  border-bottom: 1px solid var(--ant-color-split);
 }
 
 .ant-page-header .ant-page-header-heading-extra {

src/hooks/use-watch-list.ts

@@ -0,0 +1,83 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
+import { request } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import _ from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+
+export default function useWatchList<T = Record<string, any>>(API: string) {
+  const watchAPI = API;
+  const [watchDataList, setWatchDataList] = useState<T[]>([]);
+  const chunkRequestRef = useRef<any>(null);
+  const listRequestTokenRef = useRef<any>(null);
+
+  const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
+
+  const { updateChunkedList, cacheDataListRef: cacheWatchDataListRef } =
+    useUpdateChunkedList({
+      dataList: watchDataList,
+      limit: 100,
+      setDataList: setWatchDataList
+    });
+
+  const updateWatchDataListHandler = (list: any) => {
+    // filter the data
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+  };
+
+  const createWatchChunkRequest = useMemoizedFn(async () => {
+    chunkRequestRef.current?.current?.cancel?.();
+    try {
+      chunkRequestRef.current = setChunkRequest({
+        url: `${watchAPI}`,
+        params: {},
+        handler: updateWatchDataListHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  });
+
+  const queryAllDataList = async (
+    params: Global.SearchParams,
+    options?: any
+  ) => {
+    return request<Global.PageResponse<T>>(watchAPI, {
+      params,
+      method: 'GET',
+      cancelToken: options?.token
+    });
+  };
+
+  const getAllDataList = useMemoizedFn(async () => {
+    try {
+      listRequestTokenRef.current?.cancel?.();
+      listRequestTokenRef.current = createAxiosToken();
+      const params = {
+        page: 1,
+        perPage: 100
+      };
+      const res: any = await queryAllDataList(params, {
+        token: listRequestTokenRef.current.token
+      });
+      cacheWatchDataListRef.current = res.items || [];
+      setWatchDataList(res.items || []);
+    } catch (error) {
+      // ignore
+    }
+  });
+
+  useEffect(() => {
+    createWatchChunkRequest();
+    return () => {
+      chunkRequestRef.current?.cancel?.();
+      listRequestTokenRef.current?.cancel?.();
+    };
+  }, []);
+
+  return {
+    watchDataList
+  };
+}

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

@@ -5,11 +5,11 @@ import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { createCluster, queryCredentialList } from './apis';
+import { createCluster, queryClusterToken, queryCredentialList } from './apis';
 import ClusterSteps from './components/cluster-steps';
 import FooterButtons from './components/footer-buttons';
 import ProviderCatalog from './components/provider-catalog';
-import { providerList, ProviderType } from './config';
+import { providerList, ProviderType, ProviderValueMap } from './config';
 import { ClusterFormData } from './config/types';
 import { moduleMap, moduleRegistry } from './step-forms/module-registry';
 import useStepList from './step-forms/use-step-list';
@@ -21,6 +21,19 @@ const Container = styled.div`
   align-items: center;
 `;
 
+const Nav = styled.div`
+  display: flex;
+  align-items: center;
+  height: 72px;
+  font-weight: 400;
+  font-size: 20px;
+  color: var(--ant-color-text-tertiary);
+  .level-2 {
+    color: var(--ant-color-text);
+    font-weight: 600;
+  }
+`;
+
 const Content = styled.div`
   width: 600px;
 `;
@@ -28,11 +41,9 @@ const Content = styled.div`
 const HeaderContainer = styled.div`
   position: relative;
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 1fr;
   align-items: center;
   padding-inline: var(--layout-content-header-inlinepadding);
-  border-bottom: 1px solid var(--ant-color-split);
-  min-height: 72px;
   .text {
     margin-right: 16px;
     padding-right: 16px;
@@ -67,7 +78,7 @@ const ClusterCreate = () => {
     cluster_id: 0
   });
   const [extraData, setExtraData] = useState<ClusterFormData>({
-    provider: null
+    provider: ProviderValueMap.Custom
   } as ClusterFormData);
   const [formValues, setFormValues] = useState<Record<string, any>>({});
 
@@ -237,7 +248,12 @@ const ClusterCreate = () => {
       ...extraData,
       ...(typeof values === 'object' ? values : {})
     };
-    await createCluster({ data });
+    const res = await createCluster({ data });
+    const info = await queryClusterToken({ id: res.id });
+    setRegistrationInfo({
+      ...info,
+      cluster_id: res.id
+    });
     return true;
   };
 
@@ -252,10 +268,6 @@ const ClusterCreate = () => {
   return (
     <PageContainer
       ghost
-      fixedHeader
-      affixProps={{
-        offsetTop: 0
-      }}
       footer={[
         <FooterButtons
           key="buttons"
@@ -266,11 +278,47 @@ const ClusterCreate = () => {
           showButtons={showButtons}
         />
       ]}
+      header={{
+        title: (
+          <div>
+            <Nav>
+              <span className="level-1">Cluster</span>
+              <span
+                style={{
+                  marginInline: 20,
+                  color: 'var(--ant-color-split)'
+                }}
+              >
+                /
+              </span>
+              <span className="level-2">create</span>
+            </Nav>
+            <ClusterSteps
+              steps={steps}
+              currentStep={currentStep}
+              onChange={handleStepChange}
+            ></ClusterSteps>
+          </div>
+        ),
+        style: {
+          paddingInline: 'var(--layout-content-header-inlinepadding)'
+        },
+        breadcrumb: {}
+      }}
       pageHeaderRender={() => (
         <HeaderContainer>
-          <span className="text">
+          <Nav>
-            <span>Create Cluster</span>
+            <span className="level-1">Cluster</span>
-          </span>
+            <span
+              style={{
+                marginInline: 20,
+                color: 'var(--ant-color-split)'
+              }}
+            >
+              /
+            </span>
+            <span className="level-2">create</span>
+          </Nav>
           <ClusterSteps
             steps={steps}
             currentStep={currentStep}

src/pages/cluster-management/clusters.tsx

@@ -2,10 +2,12 @@ import { expandKeysAtom } from '@/atoms/clusters';
 import DeleteModal from '@/components/delete-modal';
 import { FilterBar } from '@/components/page-tools';
 import SealTable from '@/components/seal-table';
+import TableContext from '@/components/seal-table/table-context';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableFetch from '@/hooks/use-table-fetch';
+import useWatchList from '@/hooks/use-watch-list';
 import AddWorker from '@/pages/resources/components/add-worker';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
@@ -14,6 +16,7 @@ import { message } from 'antd';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import {
+  CLUSTERS_API,
   createCluster,
   createWorkerPool,
   deleteCluster,
@@ -21,7 +24,8 @@ import {
   queryClusterToken,
   queryCredentialList,
   queryWorkerPools,
-  updateCluster
+  updateCluster,
+  WORKER_POOLS_API
 } from './apis';
 import AddCluster from './components/add-cluster';
 import AddPool from './components/add-pool';
@@ -52,8 +56,11 @@ const Credentials: React.FC = () => {
   } = useTableFetch<ListItem>({
     fetchAPI: queryClusterList,
     deleteAPI: deleteCluster,
+    watch: true,
+    API: CLUSTERS_API,
     contentForDelete: 'menu.clusterManagement.clusters'
   });
+  const { watchDataList: allWorkerPoolList } = useWatchList(WORKER_POOLS_API);
   const [expandAtom, setExpandAtom] = useAtom(expandKeysAtom);
   const {
     handleExpandChange,
@@ -103,13 +110,13 @@ const Credentials: React.FC = () => {
     action: PageActionType;
     currentData?: ListItem;
     title: string;
-    provider: string;
+    provider: ProviderType;
   }>({
     open: false,
     action: PageAction.CREATE,
     currentData: undefined,
     title: '',
-    provider: ''
+    provider: null
   });
 
   const [credentialList, setCredentialList] = useState<
@@ -145,7 +152,7 @@ const Credentials: React.FC = () => {
         { id: 'clusters.add.cluster' },
         { cluster: clusterLabel }
       ),
-      provider: value
+      provider: value as ProviderType
     });
   };
 
@@ -154,14 +161,13 @@ const Credentials: React.FC = () => {
       open: true,
       action: PageAction.CREATE,
       title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
-      provider: row.provider,
+      provider: row.provider as ProviderType,
       clusterId: row.id
     });
   };
 
   const handleClickDropdown = (item: any) => {
     navigate(`/cluster-management/clusters/create?action=${PageAction.CREATE}`);
-    // handleAddCluster(item.key);
   };
 
   const handleModalOk = async (data: FormData) => {
@@ -183,7 +189,7 @@ const Credentials: React.FC = () => {
         action: PageAction.CREATE,
         currentData: undefined,
         title: '',
-        provider: ''
+        provider: null
       });
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {
@@ -192,7 +198,7 @@ const Credentials: React.FC = () => {
         action: PageAction.CREATE,
         currentData: undefined,
         title: '',
-        provider: ''
+        provider: null
       });
     }
   };
@@ -204,7 +210,7 @@ const Credentials: React.FC = () => {
       action: PageAction.CREATE,
       currentData: undefined,
       title: '',
-      provider: ''
+      provider: null
     });
   };
 
@@ -300,6 +306,10 @@ const Credentials: React.FC = () => {
     }
   );
 
+  const setDisableExpand = (row: ClusterListItem) => {
+    return row.provider !== ProviderValueMap.DigitalOcean;
+  };
+
   useEffect(() => {
     const fetchCredentialList = async () => {
       const data = await queryCredentialList({ page: 1, perPage: 100 });
@@ -356,60 +366,39 @@ const Credentials: React.FC = () => {
           handleDeleteByBatch={handleDeleteBatch}
           handleClickPrimary={handleClickDropdown}
         ></FilterBar>
-        <SealTable
+        <TableContext.Provider
-          rowKey="id"
+          value={{
-          tableLayout="fixed"
+            allChildren: allWorkerPoolList,
-          style={{ width: '100%' }}
+            setDisableExpand: setDisableExpand
-          loadChildren={getWorkerPoolList}
-          onChange={handleTableChange}
-          expandedRowKeys={expandedRowKeys}
-          onExpand={handleExpandChange}
-          onExpandAll={handleToggleExpandAll}
-          renderChildren={renderChildren}
-          dataSource={dataSource.dataList}
-          loading={dataSource.loading}
-          loadend={dataSource.loadend}
-          rowSelection={rowSelection}
-          columns={columns}
-          childParentKey="cluster_id"
-          expandable={true}
-          pagination={{
-            showSizeChanger: true,
-            pageSize: queryParams.perPage,
-            current: queryParams.page,
-            total: dataSource.total,
-            hideOnSinglePage: queryParams.perPage === 10,
-            onChange: handlePageChange
           }}
-        ></SealTable>
+        >
-        {/* <SealTable
+          <SealTable
-          columns={columns}
+            rowKey="id"
-          dataSource={dataSource}
+            tableLayout="fixed"
-          rowSelection={rowSelection}
+            style={{ width: '100%' }}
-          expandedRowKeys={expandedRowKeys}
+            loadChildren={getWorkerPoolList}
-          onExpand={handleExpandChange}
+            onChange={handleTableChange}
-          onExpandAll={handleToggleExpandAll}
+            expandedRowKeys={expandedRowKeys}
-          loading={loading}
+            onExpand={handleExpandChange}
-          loadend={loadend}
+            onExpandAll={handleToggleExpandAll}
-          rowKey="id"
+            renderChildren={renderChildren}
-          childParentKey="model_id"
+            dataSource={dataSource.dataList}
-          expandable={true}
+            loading={dataSource.loading}
-          onSort={handleOnSort}
+            loadend={dataSource.loadend}
-          onCell={handleOnCell}
+            rowSelection={rowSelection}
-          pollingChildren={false}
+            columns={columns}
-          watchChildren={true}
+            childParentKey="cluster_id"
-          loadChildren={getModelInstances}
+            expandable={true}
-          loadChildrenAPI={generateChildrenRequestAPI}
+            pagination={{
-          renderChildren={renderChildren}
+              showSizeChanger: true,
-          pagination={{
+              pageSize: queryParams.perPage,
-            showSizeChanger: true,
+              current: queryParams.page,
-            pageSize: queryParams.perPage,
+              total: dataSource.total,
-            current: queryParams.page,
+              hideOnSinglePage: queryParams.perPage === 10,
-            total: total,
+              onChange: handlePageChange
-            hideOnSinglePage: queryParams.perPage === 10,
+            }}
-            onChange: handlePageChange
+          ></SealTable>
-          }}
+        </TableContext.Provider>
-        ></SealTable> */}
       </PageContainer>
       <AddCluster
         provider={openAddModal.provider}
@@ -457,7 +446,7 @@ const Credentials: React.FC = () => {
             open: false,
             action: PageAction.CREATE,
             title: '',
-            provider: ProviderValueMap.DigitalOcean,
+            provider: ProviderValueMap.DigitalOcean as ProviderType,
             clusterId: 0
           });
         }}

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

@@ -2,6 +2,7 @@ import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal/index';
 import { PageActionType } from '@/config/types';
 import React, { useRef } from 'react';
+import { ProviderType } from '../config';
 import {
   ClusterFormData as FormData,
   ClusterListItem as ListItem
@@ -13,7 +14,7 @@ type AddModalProps = {
   action: PageActionType;
   open: boolean;
   currentData?: ListItem; // Used when action is EDIT
-  provider: string;
+  provider: ProviderType;
   credentialList: Global.BaseOption<number>[];
   onOk: (values: FormData) => void;
   onCancel: () => void;

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

@@ -20,10 +20,10 @@ type AddModalProps = {
 const AddWorkerStep: React.FC<AddModalProps> = ({ registrationInfo }) => {
   return (
     <div>
-      <Title>Supported Hardware Platforms</Title>
+      <Title>Execute Command</Title>
-      <SupportedHardware />
-      <Title style={{ marginTop: 32 }}>Execute Command</Title>
       <RegisterClusterInner registrationInfo={registrationInfo} />
+      <Title style={{ marginTop: 32 }}>Supported GPUs</Title>
+      <SupportedHardware />
     </div>
   );
 };

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

@@ -92,12 +92,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
+            message: getRuleMessage('input', 'clusters.credential.title')
-              { id: 'common.form.rule.input' },
-              {
-                name: 'credential'
-              }
-            )
           }
         ]}
       >

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

@@ -5,14 +5,24 @@ import styled from 'styled-components';
 const { Step } = Steps;
 
 const Wrapper = styled.div`
-  padding-block: 20px;
+  padding-block: 30px;
   background-color: var(--ant-color-bg-container);
   .ant-steps-item-description {
     max-width: 300px !important;
     color: var(--ant-color-text-description) !important;
   }
   .ant-steps-item-content > .ant-steps-item-title {
-    font-weight: 600;
+    // font-weight: 600;
+  }
+  .ant-steps-item {
+    .ant-steps-item-container {
+      // .ant-steps-item-icon {
+      //   margin-inline-start: 0 !important;
+      // }
+      // .ant-steps-item-tail {
+      //   margin-inline-start: 0 !important;
+      // }
+    }
   }
 `;
 
@@ -25,7 +35,7 @@ const ClusterSteps: React.FC<{
 
   return (
     <Wrapper>
-      <Steps current={currentStep} size="small" onChange={onChange}>
+      <Steps current={currentStep} size="small" onChange={onChange} progressDot>
         {steps.map((step) => (
           <Step
             disabled={step.disabled}

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

@@ -29,6 +29,9 @@ const Container = styled.div`
   .ant-form-item:nth-child(6) {
     grid-column: 1 / 3;
   }
+  .ant-form-item:nth-child(7) {
+    grid-column: 1 / 3;
+  }
 `;
 
 type AddModalProps = {
@@ -57,7 +60,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
   const intl = useIntl();
   const { getRuleMessage } = useAppUtils();
   const labels = Form.useWatch('labels', form);
-  const instance_type = Form.useWatch('instance_type', form);
+  const title = Form.useWatch('name', form);
 
   useEffect(() => {
     if (currentData) {
@@ -88,13 +91,12 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
 
   return (
     <CollapsibleContainer
-      title={instance_type}
+      {...restCollapseProps}
+      title={title}
       collapsible={collapsible}
       onToggle={onToggle}
-      {...restCollapseProps}
+      deleteBtn={
-    >
+        showDelete && (
-      {showDelete && (
-        <div className="flex-end" style={{ marginBlock: '8px 16px' }}>
           <Button
             onClick={onDelete}
             icon={<DeleteOutlined />}
@@ -104,8 +106,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
             color="danger"
             size="small"
           ></Button>
-        </div>
+        )
-      )}
+      }
+    >
       <Form
         name={name}
         form={form}
@@ -118,6 +121,22 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
         }}
       >
         <Container>
+          <Form.Item<FormData>
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'common.table.name')
+              }
+            ]}
+          >
+            <SealInput.Input
+              label={intl.formatMessage({
+                id: 'common.table.name'
+              })}
+              required
+            ></SealInput.Input>
+          </Form.Item>
           <Form.Item<FormData>
             name="instance_type"
             rules={[
@@ -135,6 +154,7 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
                 id: 'clusters.workerpool.instanceType'
               })}
               required
+              disabled={action === PageAction.EDIT}
             ></SealInput.Input>
           </Form.Item>
           <Form.Item<FormData>

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

@@ -1,5 +1,7 @@
 import DeleteModal from '@/components/delete-modal';
+import CellContent from '@/components/seal-table/components/cell-content';
 import RowChildren from '@/components/seal-table/components/row-children';
+import RowContext from '@/components/seal-table/row-context';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
@@ -11,7 +13,6 @@ import { ProviderType } from '../config';
 import { NodePoolFormData, NodePoolListItem } from '../config/types';
 import usePoolsColumns from '../hooks/use-pools-columns';
 import AddPool from './add-pool';
-
 interface PoolRowsProps {
   dataList: NodePoolListItem[];
   provider: ProviderType;
@@ -58,6 +59,18 @@ const PoolRows: React.FC<PoolRowsProps> = ({
     }
   };
 
+  const handleOnCell = async (row: NodePoolListItem, dataIndex: string) => {
+    console.log('handleOncell===', row, dataIndex);
+    try {
+      await updateWorkerPool({
+        data: row,
+        id: row.id
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {
+      // error
+    }
+  };
   const handleEdit = (action: string, record: NodePoolListItem) => {
     if (action === 'edit') {
       setAddPoolStatus({
@@ -97,6 +110,7 @@ const PoolRows: React.FC<PoolRowsProps> = ({
   });
 
   const columns = usePoolsColumns(onSelect);
+
   return (
     <>
       {dataList?.map((data: NodePoolListItem) => {
@@ -105,23 +119,32 @@ const PoolRows: React.FC<PoolRowsProps> = ({
             key={data.id}
             style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
           >
-            <RowChildren>
+            <RowContext.Provider value={{ row: data, onCell: handleOnCell }}>
-              <Row style={{ width: '100%' }} align="middle">
+              <RowChildren>
-                {columns.map((col: Record<string, any>) => {
+                <Row style={{ width: '100%' }} align="middle">
-                  return (
+                  {columns.map((col: Record<string, any>) => {
-                    <Col
+                    return (
-                      key={col.dataIndex as string}
+                      <Col
-                      span={col.span}
+                        key={col.dataIndex as string}
-                      style={col.style}
+                        span={col.span}
-                    >
+                        style={{
-                      {col.render
+                          paddingInline: 0,
+                          ...(col.style || {})
+                        }}
+                      >
+                        {/* {col.render
                         ? col.render(data[col.dataIndex as string], data)
-                        : data[col.dataIndex as string]}
+                        : data[col.dataIndex as string]} */}
-                    </Col>
+                        <CellContent
-                  );
+                          {...col}
-                })}
+                          dataIndex={col.dataIndex}
-              </Row>
+                        ></CellContent>
-            </RowChildren>
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </RowChildren>
+            </RowContext.Provider>
           </div>
         );
       })}

src/pages/cluster-management/components/provider-catalog.tsx

@@ -21,7 +21,7 @@ const Title = styled.span`
   align-items: center;
   justify-content: space-between;
   font-weight: 700;
-  font-size: 18px;
+  font-size: 16px;
   margin-block: 16px 24px;
 `;
 

src/pages/cluster-management/components/support-hardware.tsx

@@ -13,10 +13,9 @@ const ProviderImage = ({ src, showBg }: { src: string; showBg?: boolean }) => {
     <img
       src={src}
       style={{
-        width: 46,
+        width: 32,
         objectFit: 'contain'
       }}
-      width={46}
     />
   );
 };
@@ -37,7 +36,7 @@ const supportedHardPlatforms = [
     icon: (
       <IconFont
         type="icon-amd"
-        style={{ fontSize: 46, color: 'var(--ant-color-text)' }}
+        style={{ fontSize: 32, color: 'var(--ant-color-text)' }}
       />
     )
   },

src/pages/cluster-management/components/worker-pools.tsx

@@ -14,7 +14,7 @@ import {
   updateWorkerPool,
   WORKER_POOLS_API
 } from '../apis';
-import { ProviderValueMap } from '../config';
+import { ProviderType, ProviderValueMap } from '../config';
 import {
   NodePoolListItem as ListItem,
   NodePoolFormData
@@ -60,7 +60,7 @@ const WorkerPools = () => {
     open: false,
     action: PageAction.CREATE,
     title: '',
-    provider: ProviderValueMap.DigitalOcean,
+    provider: ProviderValueMap.DigitalOcean as ProviderType,
     currentData: null as ListItem | null,
     clusterId: 0 as number | string
   });
@@ -75,7 +75,7 @@ const WorkerPools = () => {
           { id: 'common.button.edit.item' },
           { name: record.instance_type }
         ),
-        provider: searchParams.get('provider') || '',
+        provider: searchParams.get('provider') as ProviderType,
         currentData: record,
         clusterId: searchParams.get('id') || 0
       });
@@ -87,7 +87,7 @@ const WorkerPools = () => {
       open: true,
       action: PageAction.CREATE,
       title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
-      provider: searchParams.get('provider') || '',
+      provider: searchParams.get('provider') as ProviderType,
       clusterId: searchParams.get('id') || 0,
       currentData: null
     });
@@ -177,7 +177,7 @@ const WorkerPools = () => {
             open: false,
             action: PageAction.CREATE,
             title: '',
-            provider: ProviderValueMap.DigitalOcean,
+            provider: ProviderValueMap.DigitalOcean as ProviderType,
             currentData: null,
             clusterId: 0
           });

src/pages/cluster-management/config/index.ts

@@ -56,7 +56,7 @@ export const providerList = [
     icon: React.cloneElement(icons.Docker, {
       style: { color: 'var(--ant-color-primary)' }
     }),
-    group: 'default'
+    group: 'Self-Managed'
   },
   {
     label: 'Kubernetes',
@@ -66,7 +66,7 @@ export const providerList = [
     icon: React.cloneElement(icons.KubernetesOutlined, {
       style: { color: 'var(--ant-color-primary)' }
     }),
-    group: 'default'
+    group: 'Self-Managed'
   },
   {
     label: 'DigitalOcean',

src/pages/cluster-management/config/types.ts

@@ -22,10 +22,21 @@ export interface CredentialListItem {
   updated_at: string;
 }
 
-export interface NodePoolListItem {
+export interface NodePoolFormData {
+  name: string;
+  instance_type: string;
+  os_image: string;
+  replicas: number;
+  batch_size: number;
+  labels: Record<string, string>;
+  cloud_options: Record<string, any>;
+}
+
+export interface NodePoolListItem extends NodePoolFormData {
   id: number;
   instance_type: string;
   replicas: number;
+  workers: number;
   batch_size: number;
   labels: Record<string, string>;
   cloud_options: Record<string, any>;
@@ -35,20 +46,11 @@ export interface NodePoolListItem {
   cluster_id: number;
 }
 
-export interface NodePoolFormData {
-  instance_type: string;
-  os_image: string;
-  replicas: number;
-  batch_size: number;
-  labels: Record<string, string>;
-  cloud_options: Record<string, any>;
-}
-
 export interface ClusterListItem {
   name: string;
   display_name: string;
   description: string;
-  provider: string;
+  provider: ProviderType;
   credential_id: number;
   zone: string;
   region: string;

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -48,7 +48,11 @@ const useClusterColumns = (
         title: intl.formatMessage({ id: 'clusters.table.provider' }),
         dataIndex: 'provider',
         span: 3,
-        render: (value: string) => <span>{ProviderLabelMap[value]}</span>
+        render: (value: string) => (
+          <AutoTooltip ghost minWidth={20}>
+            {ProviderLabelMap[value]}
+          </AutoTooltip>
+        )
       },
       {
         title: intl.formatMessage({ id: 'common.table.status' }),
@@ -90,7 +94,9 @@ const useClusterColumns = (
         dataIndex: 'created_at',
         span: 4,
         render: (value: string) => (
-          <span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
+          <AutoTooltip ghost minWidth={20}>
+            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
         )
       },
       {

src/pages/cluster-management/hooks/use-pools-columns.tsx

@@ -1,6 +1,5 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
-import LabelsCell from '@/components/label-cell';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { ColumnsType } from 'antd/es/table';
@@ -34,9 +33,9 @@ const usePoolsColumns = (
   return useMemo(() => {
     return [
       {
-        title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
+        title: intl.formatMessage({ id: 'common.table.name' }),
-        dataIndex: 'instance_type',
+        dataIndex: 'name',
-        key: 'instance_type',
+        key: 'name',
         ellipsis: {
           showTitle: false
         },
@@ -51,16 +50,21 @@ const usePoolsColumns = (
         )
       },
       {
-        title: intl.formatMessage({ id: 'clusters.workerpool.replicas' }),
+        title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
-        dataIndex: 'replicas',
+        dataIndex: 'instance_type',
+        key: 'instance_type',
+        ellipsis: {
+          showTitle: false
+        },
         span: 3,
-        key: 'replicas'
+        style: {
-      },
+          paddingLeft: 12
-      {
+        },
-        title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
+        render: (text: string) => (
-        dataIndex: 'batch_size',
+          <AutoTooltip title={text} ghost minWidth={20}>
-        key: 'batch_size',
+            {text}
-        span: 3
+          </AutoTooltip>
+        )
       },
       {
         title: intl.formatMessage({ id: 'clusters.workerpool.osImage' }),
@@ -70,6 +74,9 @@ const usePoolsColumns = (
         ellipsis: {
           showTitle: false
         },
+        style: {
+          paddingLeft: 16
+        },
         render: (text: string) => (
           <AutoTooltip title={text} ghost minWidth={20}>
             {text}
@@ -77,21 +84,46 @@ const usePoolsColumns = (
         )
       },
       {
-        title: intl.formatMessage({ id: 'resources.table.labels' }),
+        title: 'Workers',
-        dataIndex: 'labels',
+        dataIndex: 'replicas',
-        key: 'labels',
+        span: 3,
-        width: 200,
+        key: 'replicas',
-        span: 4,
+        style: {
+          // textAlign: 'center'
+          paddingLeft: 4
+        },
+        editable: {
+          valueType: 'number',
+          title: intl.formatMessage({ id: 'models.table.replicas.edit' })
+        },
         render: (text: string, record: ListItem) => (
-          <LabelsCell labels={record.labels}></LabelsCell>
+          <span>
+            {record.workers} / {record.replicas}
+          </span>
         )
       },
+      {
+        title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
+        dataIndex: 'batch_size',
+        key: 'batch_size',
+        span: 4
+      },
+      // {
+      //   title: intl.formatMessage({ id: 'resources.table.labels' }),
+      //   dataIndex: 'labels',
+      //   key: 'labels',
+      //   width: 200,
+      //   span: 4,
+      //   render: (text: string, record: ListItem) => (
+      //     <LabelsCell labels={record.labels}></LabelsCell>
+      //   )
+      // },
       {
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'create_at',
         key: 'created_at',
         span: 4,
-        showSorterTooltip: false,
+        showSorterTootip: false,
         defaultSortOrder: 'descend',
         sortOrder: sortOrder,
         sorter: false,
@@ -101,7 +133,11 @@ const usePoolsColumns = (
         style: {
           paddingLeft: 42
         },
-        render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+        render: (text: string) => (
+          <AutoTooltip ghost minWidth={20}>
+            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
       },
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),

src/pages/cluster-management/step-forms/use-step-list.tsx

@@ -15,7 +15,7 @@ export default function useStepList() {
     () => [
       {
         title: 'Select Cloud Provider',
-        content: 'Choose the cloud provider for your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,
@@ -31,7 +31,7 @@ export default function useStepList() {
       },
       {
         title: 'Configure Cluster Settings',
-        content: 'Set up the basic configuration for your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: true,
@@ -47,7 +47,7 @@ export default function useStepList() {
       },
       {
         title: 'Add Worker Pools',
-        content: 'Define the worker pools for your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: true,
@@ -64,7 +64,7 @@ export default function useStepList() {
       },
       {
         title: 'Add Worker',
-        content: 'Add a worker node to your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,
@@ -80,7 +80,7 @@ export default function useStepList() {
       },
       {
         title: 'Register Cluster',
-        content: 'Register your cluster with the chosen provider.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,

src/pages/cluster-management/step-forms/worker-pools-form.tsx

@@ -53,7 +53,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       [
         0,
         {
-          instance_type: 'Pool-1'
+          name: 'Pool-1'
         }
       ]
     ]) as Map<number, NodePoolFormData>
@@ -70,7 +70,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
     const newId = updateCount();
     setWorkerPoolList((prev) =>
       new Map(prev).set(newId, {
-        instance_type: `Pool-${newId + 1}`
+        name: `Pool-${newId + 1}`
       } as NodePoolFormData)
     );
     setActiveKey((prev) => new Set([newId]));
@@ -193,32 +193,30 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       ></PageTools>
 
       {Array.from(workerPoolList.keys()).map((key, index) => (
-        <div key={key}>
+        <PoolContainer key={key}>
-          <PoolContainer>
+          <PoolFormWrapper>
-            <PoolFormWrapper>
+            <WorkerPoolForm
-              <WorkerPoolForm
+              name={`workerPoolForm_${key}`}
-                name={`workerPoolForm_${key}`}
+              action={action}
-                action={action}
+              ref={(el: any) => {
-                ref={(el: any) => {
+                if (el) {
-                  if (el) {
+                  formRefs.current[key] = el;
-                    formRefs.current[key] = el;
+                }
-                  }
+              }}
-                }}
+              collapseProps={{
-                collapseProps={{
+                collapsible: true,
-                  collapsible: true,
+                open: activeKey.has(key),
-                  open: activeKey.has(key),
+                defaultOpen: activeKey.has(key),
-                  defaultOpen: activeKey.has(key),
+                onToggle: (open: boolean) => handleOnToggle(open, key)
-                  onToggle: (open: boolean) => handleOnToggle(open, key)
+              }}
-                }}
+              showDelete={workerPoolList.size > 1}
-                showDelete={workerPoolList.size > 1}
+              onFinish={handleOnFinish}
-                onFinish={handleOnFinish}
+              provider={provider}
-                provider={provider}
+              currentData={workerPoolList.get(key)}
-                currentData={workerPoolList.get(key)}
+              onDelete={() => handleRemovePool(key)}
-                onDelete={() => handleRemovePool(key)}
+            ></WorkerPoolForm>
-              ></WorkerPoolForm>
+          </PoolFormWrapper>
-            </PoolFormWrapper>
+        </PoolContainer>
-          </PoolContainer>
-        </div>
       ))}
     </div>
   );

src/pages/login/components/login-form.tsx

@@ -106,7 +106,7 @@ const LoginForm = () => {
           <img
             src={LogoIcon}
             alt="logo"
-            style={{ height: '24px', marginLeft: 10 }}
+            style={{ height: '36px', marginLeft: 10 }}
           />
         </div>
       </div>

src/pages/resources/apis/index.ts

@@ -7,6 +7,14 @@ export const WORKERS_API = '/workers';
 export const GPU_DEVICES_API = '/gpu-devices';
 export const MODEL_FILES_API = '/model-files';
 
+const matchFilename = (disposition: string | null): string | undefined => {
+  if (!disposition) return '';
+
+  const match = disposition.match(/filename="?([^"]+)"?/);
+  const filename = match ? match[1] : '';
+  return filename;
+};
+
 // download stream data and save as a csv file
 export async function downloadWorkerPrivateKey({
   id,
@@ -17,9 +25,13 @@ export async function downloadWorkerPrivateKey({
 }) {
   try {
     const res = await fetch(`/v1${WORKERS_API}/${id}/privatekey`);
+    // header
+    const contentDispostion = res.headers.get('content-Disposition');
+    const filename =
+      matchFilename(contentDispostion) || `${name}-privatekey.pem`;
     if (res.ok) {
       const blob = await res.blob();
-      downloadFile(blob, `${name}-privatekey.csv`);
+      downloadFile(blob, filename);
     }
   } catch (error) {
     message.error('Download failed');