fix: cluster apis

config/routes.ts

@@ -155,17 +155,27 @@ export default [
     routes: [
       {
         path: '/cluster-management',
-        redirect: '/cluster-management/clusters'
+        redirect: '/cluster-management/clusters/list'
       },
       {
         name: 'clusters',
-        path: '/cluster-management/clusters',
+        path: '/cluster-management/clusters/list',
         key: 'clusters',
         icon: 'icon-cluster2-outline',
         selectedIcon: 'icon-cluster2-filled',
         defaultIcon: 'icon-cluster2-outline',
         component: './cluster-management/clusters'
       },
+      {
+        name: 'clusterDetail',
+        path: '/cluster-management/cluster/detail',
+        key: 'clusterDetail',
+        icon: 'icon-cluster2-outline',
+        selectedIcon: 'icon-cluster2-filled',
+        defaultIcon: 'icon-cluster2-outline',
+        hideInMenu: true,
+        component: './cluster-management/cluster-detail'
+      },
       {
         name: 'credentials',
         path: '/cluster-management/credentials',

src/components/echarts/line-chart.tsx

@@ -22,7 +22,8 @@ const LineChart: React.FC<ChartProps> = (props) => {
     title,
     legendOptions,
     gridOptions,
-    titleOptions
+    titleOptions,
+    showArea
   } = props;
   const {
     grid,
@@ -100,19 +101,21 @@ const LineChart: React.FC<ChartProps> = (props) => {
         lineStyle: {
           ...lineItemConfig.lineStyle,
           color: item.color
+        },
+        areaStyle: showArea
+          ? {
+              color: new LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: colors[0]
+                },
+                {
+                  offset: 1,
+                  color: colors[1]
                 }
-        // areaStyle: {
+              ])
-        //   color: new LinearGradient(0, 0, 0, 1, [
+            }
-        //     {
+          : null
-        //       offset: 0,
-        //       color: colors[0]
-        //     },
-        //     {
-        //       offset: 1,
-        //       color: colors[1]
-        //     }
-        //   ])
-        // }
       };
     });
     return {

src/components/echarts/types.ts

@@ -5,6 +5,7 @@ import type {
 export interface ChartProps {
   seriesData: any[];
   showEmpty?: boolean;
+  showArea?: boolean;
   xAxisData: string[];
   legendData?: LegendComponentOption['data'];
   legendOptions?: {

src/components/status-tag/index.less

@@ -15,6 +15,7 @@
     display: flex;
     align-items: center;
     height: 20px;
+    gap: 5px;
 
     &.err {
       cursor: default;

src/components/status-tag/index.tsx

@@ -29,6 +29,7 @@ type StatusTagProps = {
   download?: {
     percent: number;
   };
+  suffix?: React.ReactNode;
   maxTooltipWidth?: number;
   extra?: React.ReactNode;
   actions?: {
@@ -46,7 +47,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
   extra,
   actions = [],
   maxTooltipWidth = 250,
-  type = 'tag'
+  suffix
 }) => {
   const { text, status } = statusValue;
 
@@ -140,6 +141,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
       </div>
     );
   }, [statusValue]);
+
   return (
     <span
       className={classNames('status-tag', {
@@ -161,14 +163,16 @@ const StatusTag: React.FC<StatusTagProps> = ({
           }}
         >
           <span className="txt err">
-            <span className="m-r-5">
             <InfoCircleOutlined />
-            </span>
             {renderContent()}
+            {suffix && <span>{suffix}</span>}
           </span>
         </TooltipOverlayScroller>
       ) : (
-        <span className="txt">{renderContent()}</span>
+        <span className="txt">
+          {renderContent()}
+          {suffix && <span>{suffix}</span>}
+        </span>
       )}
     </span>
   );

src/locales/en-US/clusters.ts

@@ -10,6 +10,18 @@ export default {
   'clusters.edit.cluster': 'Edit {cluster}',
   'clusters.provider.custom': 'Custom',
   'clusters.button.register': 'Register Cluster',
-  'clusters.button.addNodePool': 'Add Node Pool',
+  'clusters.button.addNodePool': 'Add Worker Pool',
-  'clusters.button.add.credential': 'Add {provider} Credential'
+  'clusters.button.add.credential': 'Add {provider} Credential',
+  'clusters.credential.title': 'Credential',
+  'clusters.credential.token': 'Access Token',
+  'clusters.workerpool.region': 'Region',
+  'clusters.workerpool.zone': 'Zone',
+  'clusters.workerpool.instanceType': 'Instance Type',
+  'clusters.workerpool.replicas': 'Replicas',
+  'clusters.workerpool.batchSize': 'Batch Size',
+  'clusters.workerpool.osImage': 'OS Image',
+  'clusters.workerpool.volumes': 'Volumes',
+  'clusters.workerpool.format': 'Format',
+  'clusters.workerpool.size': 'Size (GiB)',
+  'clusters.workerpool.title': 'Worker Pools'
 };

src/locales/en-US/resources.ts

@@ -92,5 +92,6 @@ export default {
     'Download and install the <a href={url} target="_blank">installer</a>. Only supported: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
   'resource.register.windows.support': 'win 10, win 11',
-  'resources.model.instance': 'Model Instance'
+  'resources.model.instance': 'Model Instance',
+  'resources.worker.download.privatekey': 'Download Private Key'
 };

src/locales/ja-JP/clusters.ts

@@ -10,8 +10,20 @@ export default {
   'clusters.edit.cluster': 'Edit {cluster}',
   'clusters.provider.custom': 'Custom',
   'clusters.button.register': 'Register Cluster',
-  'clusters.button.addNodePool': 'Add Node Pool',
+  'clusters.button.addNodePool': 'Add Worker Pool',
-  'clusters.button.add.credential': 'Add {provider} Credential'
+  'clusters.button.add.credential': 'Add {provider} Credential',
+  'clusters.credential.title': 'Credential',
+  'clusters.credential.token': 'Access Token',
+  'clusters.workerpool.region': 'Region',
+  'clusters.workerpool.zone': 'Zone',
+  'clusters.workerpool.instanceType': 'Instance Type',
+  'clusters.workerpool.replicas': 'Replicas',
+  'clusters.workerpool.batchSize': 'Batch Size',
+  'clusters.workerpool.osImage': 'OS Image',
+  'clusters.workerpool.volumes': 'Volumes',
+  'clusters.workerpool.format': 'Format',
+  'clusters.workerpool.size': 'Size (GiB)',
+  'clusters.workerpool.title': 'Worker Pools'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -26,6 +38,18 @@ export default {
 // 9. 'clusters.edit.cluster': 'Edit {cluster}',
 // 10. 'clusters.provider.custom': 'Custom',
 // 11. 'clusters.button.register': 'Register Cluster',
-// 12. 'clusters.button.addNodePool': 'Add Node Pool',
+// 12. 'clusters.button.addNodePool': 'Add Worker Pool',
-// 13. 'clusters.button.add.credential': 'Add {provider} Credential'
+// 13. 'clusters.button.add.credential': 'Add {provider} Credential',
+// 14. 'clusters.credential.token': 'Access Token',
+// 15. 'clusters.workerpool.region': 'Region',
+// 16. 'clusters.workerpool.zone': 'Zone',
+// 17. 'clusters.workerpool.instanceType': 'Instance Type',
+// 18. 'clusters.workerpool.replicas': 'Replicas',
+// 19. 'clusters.workerpool.batchSize': 'Batch Size',
+// 20. 'clusters.workerpool.osImage': 'OS Image',
+// 21. 'clusters.workerpool.volumes': 'Volumes',
+// 22. 'clusters.workerpool.format': 'Format',
+// 23. 'clusters.workerpool.size': 'Size (GiB)',
+// 24.  'clusters.credential.title': 'Credential',
+// 25. 'clusters.workerpool.title': 'Worker Pools'
 // ========== End of To-Do List ==========

src/locales/ja-JP/resources.ts

@@ -93,7 +93,8 @@ export default {
     'Download and install the <a href={url} target="_blank">installer</a>. Only supported: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
   'resource.register.windows.support': 'win 10, win 11',
-  'resources.model.instance': 'Model Instance'
+  'resources.model.instance': 'Model Instance',
+  'resources.worker.download.privatekey': 'Download Private Key'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -109,5 +110,6 @@ export default {
 // 10. 'resource.register.maos.support': 'Apple Silicon (M series), macOS 14+',
 // 11. 'resource.register.windows.support': 'win 10, win 11',
 // 12. 'resources.filter.status': 'Filter by Status',
-// 13. 'resources.model.instance': 'Model Instance'
+// 13. 'resources.model.instance': 'Model Instance',
+// 14. 'resources.worker.download.privatekey': 'Download Private Key'
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -10,8 +10,20 @@ export default {
   'clusters.edit.cluster': 'Edit {cluster}',
   'clusters.provider.custom': 'Custom',
   'clusters.button.register': 'Register Cluster',
-  'clusters.button.addNodePool': 'Add Node Pool',
+  'clusters.button.addNodePool': 'Add Worker Pool',
-  'clusters.button.add.credential': 'Add {provider} Credential'
+  'clusters.button.add.credential': 'Add {provider} Credential',
+  'clusters.credential.title': 'Credential',
+  'clusters.credential.token': 'Access Token',
+  'clusters.workerpool.region': 'Region',
+  'clusters.workerpool.zone': 'Zone',
+  'clusters.workerpool.instanceType': 'Instance Type',
+  'clusters.workerpool.replicas': 'Replicas',
+  'clusters.workerpool.batchSize': 'Batch Size',
+  'clusters.workerpool.osImage': 'OS Image',
+  'clusters.workerpool.volumes': 'Volumes',
+  'clusters.workerpool.format': 'Format',
+  'clusters.workerpool.size': 'Size (GiB)',
+  'clusters.workerpool.title': 'Worker Pools'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -26,6 +38,18 @@ export default {
 // 9. 'clusters.edit.cluster': 'Edit {cluster}',
 // 10. 'clusters.provider.custom': 'Custom',
 // 11. 'clusters.button.register': 'Register Cluster',
-// 12. 'clusters.button.addNodePool': 'Add Node Pool',
+// 12. 'clusters.button.addNodePool': 'Add Worker Pool',
 // 13. 'clusters.button.add.credential': 'Add {provider} Credential'
+// 14. 'clusters.credential.title': 'Credential',
+// 15. 'clusters.credential.token': 'Access Token',
+// 16. 'clusters.workerpool.region': 'Region',
+// 17. 'clusters.workerpool.zone': 'Zone',
+// 18. 'clusters.workerpool.instanceType': 'Instance Type',
+// 19. 'clusters.workerpool.replicas': 'Replicas',
+// 20. 'clusters.workerpool.batchSize': 'Batch Size',
+// 21. 'clusters.workerpool.osImage': 'OS Image',
+// 22. 'clusters.workerpool.volumes': 'Volumes',
+// 23. 'clusters.workerpool.format': 'Format',
+// 24. 'clusters.workerpool.size': 'Size (GiB)',
+// 25. 'clusters.workerpool.title': 'Worker Pools'
 // ========== End of To-Do List ==========

src/locales/ru-RU/resources.ts

@@ -91,7 +91,8 @@ export default {
     'Скачайте и установите <a href={url} target="_blank">инсталлятор</a>. Поддерживаемые версии: {versions}.',
   'resource.register.maos.support': 'Apple Silicon (серия M), macOS 14+',
   'resource.register.windows.support': 'Windows 10, Windows 11',
-  'resources.model.instance': 'Модель экземпляра'
+  'resources.model.instance': 'Модель экземпляра',
+  'resources.worker.download.privatekey': 'Скачать приватный ключ'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/zh-CN/clusters.ts

@@ -11,5 +11,17 @@ export default {
   'clusters.provider.custom': '自定义',
   'clusters.button.register': '注册集群',
   'clusters.button.addNodePool': '添加节点池',
-  'clusters.button.add.credential': '添加 {provider} 凭证'
+  'clusters.button.add.credential': '添加 {provider} 凭证',
+  'clusters.credential.title': '凭证',
+  'clusters.credential.token': '访问令牌',
+  'clusters.workerpool.region': '区域',
+  'clusters.workerpool.zone': '可用区',
+  'clusters.workerpool.instanceType': '实例类型',
+  'clusters.workerpool.replicas': '副本数',
+  'clusters.workerpool.batchSize': '批大小',
+  'clusters.workerpool.osImage': '操作系统镜像',
+  'clusters.workerpool.volumes': '存储卷',
+  'clusters.workerpool.format': '文件系统格式',
+  'clusters.workerpool.size': '容量（GiB）',
+  'clusters.workerpool.title': '节点池'
 };

src/locales/zh-CN/resources.ts

@@ -90,5 +90,6 @@ export default {
     '下载并安装<a href={url} target="_blank">安装包</a>，仅支持 {versions}。',
   'resource.register.maos.support': 'M 芯片，macOS 14+',
   'resource.register.windows.support': 'win 10, win 11',
-  'resources.model.instance': '模型实例'
+  'resources.model.instance': '模型实例',
+  'resources.worker.download.privatekey': '下载私钥'
 };

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

@@ -84,7 +84,9 @@ export async function deleteCluster(id: number) {
   });
 }
 
-export async function queryClusterDetail(params: { cluster_id: number }) {
+export async function queryClusterDetail(params: {
+  cluster_id: number | string;
+}) {
   return request(`${DASHBOARD_API}`, {
     method: 'GET',
     params
@@ -113,7 +115,7 @@ export async function queryWorkerPools(
 
 export async function createWorkerPool(params: {
   data: NodePoolFormData;
-  clusterId: number;
+  clusterId: number | string;
 }) {
   return request(`${CLUSTERS_API}/${params.clusterId}${WORKER_POOLS_API}`, {
     method: 'POST',

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

@@ -0,0 +1,33 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { useSearchParams } from '@umijs/max';
+import ClusterMetrics from './components/cluster-metrics';
+import WorkerPools from './components/worker-pools';
+import { ProviderValueMap } from './config';
+
+const ClusterDetailModal = () => {
+  const [searchParams] = useSearchParams();
+  const provider = searchParams.get('provider');
+  const clusterName = searchParams.get('name');
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: (
+          <span className="flex-center">
+            <span>{clusterName}</span>
+          </span>
+        ),
+        style: {
+          paddingInline: 'var(--layout-content-header-inlinepadding)'
+        },
+        breadcrumb: {}
+      }}
+      extra={[]}
+    >
+      <ClusterMetrics />
+      {provider === ProviderValueMap.DigitalOcean && <WorkerPools />}
+    </PageContainer>
+  );
+};
+
+export default ClusterDetailModal;

src/pages/cluster-management/clusters.tsx

@@ -5,7 +5,7 @@ import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import AddWorker from '@/pages/resources/components/add-worker';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl } from '@umijs/max';
+import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Table, message } from 'antd';
 import { useEffect, useState } from 'react';
@@ -20,7 +20,6 @@ import {
 } from './apis';
 import AddCluster from './components/add-cluster';
 import AddPool from './components/add-pool';
-import ClusterDetailModal from './components/cluster-detail-modal';
 import RegisterCluster from './components/register-cluster';
 import { ProviderLabelMap, ProviderValueMap, addActions } from './config';
 import {
@@ -49,6 +48,8 @@ const Credentials: React.FC = () => {
     contentForDelete: 'menu.clusterManagement.clusters'
   });
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
   const intl = useIntl();
   const [registerClusterStatus, setRegisterClusterStatus] = useState<{
     open: boolean;
@@ -67,13 +68,7 @@ const Credentials: React.FC = () => {
       cluster_id: 0
     }
   });
-  const [openClusterDetail, setOpenClusterDetail] = useState<{
+
-    open: boolean;
-    currentData: ListItem | null;
-  }>({
-    open: false,
-    currentData: {} as ListItem
-  });
   const [openAddWorker, setOpenAddWorker] = useState<{
     open: boolean;
     registrationInfo: {
@@ -144,7 +139,7 @@ const Credentials: React.FC = () => {
     setAddPoolStatus({
       open: true,
       action: PageAction.CREATE,
-      title: `Add Node Pool`,
+      title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
       provider: row.provider,
       clusterId: row.id
     });
@@ -245,11 +240,6 @@ const Credentials: React.FC = () => {
       handleAddWorker(row);
     } else if (val === 'addPool') {
       handleAddPool(row);
-    } else if (val === 'details') {
-      setOpenClusterDetail({
-        open: true,
-        currentData: row
-      });
     } else if (val === 'register_cluster') {
       handleRegisterCluster(row);
     }
@@ -355,13 +345,6 @@ const Credentials: React.FC = () => {
         }
         registrationInfo={openAddWorker.registrationInfo}
       ></AddWorker>
-      <ClusterDetailModal
-        open={openClusterDetail.open}
-        currentData={openClusterDetail.currentData}
-        onClose={() =>
-          setOpenClusterDetail({ open: false, currentData: {} as ListItem })
-        }
-      ></ClusterDetailModal>
       <RegisterCluster
         title={intl.formatMessage({ id: 'clusters.button.register' })}
         open={registerClusterStatus.open}

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

@@ -3,6 +3,7 @@ import ScrollerModal from '@/components/scroller-modal';
 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 { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
@@ -32,6 +33,7 @@ const AddModal: React.FC<AddModalProps> = ({
 }) => {
   const [form] = Form.useForm();
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
 
   const handleSumit = () => {
     form.submit();
@@ -93,12 +95,12 @@ const AddModal: React.FC<AddModalProps> = ({
               rules={[
                 {
                   required: action === PageAction.CREATE,
-                  message: 'Access Token is required'
+                  message: getRuleMessage('input', 'clusters.credential.token')
                 }
               ]}
             >
               <SealInput.Password
-                label="Access Token"
+                label={intl.formatMessage({ id: 'clusters.credential.token' })}
                 required={action === PageAction.CREATE}
               ></SealInput.Password>
             </Form.Item>

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

@@ -3,7 +3,9 @@ import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInputNumber from '@/components/seal-form/input-number';
 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 { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -33,6 +35,7 @@ const AddCluster: React.FC<AddModalProps> = ({
 }) => {
   const [form] = Form.useForm();
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
 
   const handleSumit = () => {
     form.submit();
@@ -97,17 +100,17 @@ const AddCluster: React.FC<AddModalProps> = ({
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
+              message: getRuleMessage(
-                { id: 'common.form.rule.input' },
+                'input',
-                {
+                'clusters.workerpool.instanceType'
-                  name: intl.formatMessage({ id: 'common.table.name' })
-                }
               )
             }
           ]}
         >
           <SealInput.Input
-            label={intl.formatMessage({ id: 'common.table.name' })}
+            label={intl.formatMessage({
+              id: 'clusters.workerpool.instanceType'
+            })}
             required
           ></SealInput.Input>
         </Form.Item>
@@ -116,49 +119,45 @@ const AddCluster: React.FC<AddModalProps> = ({
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
+              message: getRuleMessage('input', 'clusters.workerpool.replicas')
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Replicas'
-                }
-              )
             }
           ]}
         >
-          <SealInputNumber label="Replicas" required></SealInputNumber>
+          <SealInputNumber
+            label={intl.formatMessage({ id: 'clusters.workerpool.replicas' })}
+            required
+          ></SealInputNumber>
         </Form.Item>
         <Form.Item<FormData>
           name="batch_size"
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
+              message: getRuleMessage('input', 'clusters.workerpool.batchSize')
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Batch Size'
-                }
-              )
             }
           ]}
         >
-          <SealInputNumber label="Batch Size" required></SealInputNumber>
+          <SealInputNumber
+            label={intl.formatMessage({ id: 'clusters.workerpool.batchSize' })}
+            required
+          ></SealInputNumber>
         </Form.Item>
         <Form.Item<FormData>
           name="os_image"
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
+              message: getRuleMessage('input', 'clusters.workerpool.osImage')
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'OS Image'
-                }
-              )
             }
           ]}
         >
-          <SealInput.Input label={'OS Image'} required></SealInput.Input>
+          <SealInput.Input
+            disabled={action === PageAction.EDIT}
+            label={intl.formatMessage({ id: 'clusters.workerpool.osImage' })}
+            required
+          ></SealInput.Input>
         </Form.Item>
+
         <Form.Item<FormData>
           name="labels"
           rules={[
@@ -184,9 +183,9 @@ const AddCluster: React.FC<AddModalProps> = ({
           ]}
         >
           <LabelSelector
-            label="Labels"
+            label={intl.formatMessage({ id: 'resources.table.labels' })}
             labels={form.getFieldValue('labels') || {}}
-            btnText="Add Label"
+            btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
           ></LabelSelector>
         </Form.Item>
         <Form.Item<FormData>

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

@@ -1,4 +1,5 @@
 import SealSelect from '@/components/seal-form/seal-select';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -11,6 +12,7 @@ type OptionData = {
   label: string;
   datacenter: string;
   value: string;
+  icon: string;
 };
 
 const OptionItem = styled.div`
@@ -30,6 +32,9 @@ const OptionItem = styled.div`
   .value {
     color: var(--ant-color-text-secondary);
   }
+  .icon {
+    margin-right: 8px;
+  }
 `;
 
 interface CloudProviderProps {
@@ -50,6 +55,7 @@ const optionRender = (
 
   return (
     <OptionItem className="flex-center">
+      <span className="icon">{data.icon}</span>
       <span className="label">{data.label}</span> <span className="dot"></span>
       <span className="datacenter">{data.datacenter}</span>{' '}
       <span className="dot"></span>{' '}
@@ -65,6 +71,7 @@ const labelRender = (props: {
   const data = regionList.find((item) => item.value === props.value);
   return (
     <OptionItem className="flex-center">
+      <span className="icon">{data?.icon}</span>
       <span className="label">{data?.label}</span> <span className="dot"></span>
       <span className="datacenter">{data?.datacenter}</span>{' '}
       <span className="dot"></span>
@@ -76,6 +83,7 @@ const labelRender = (props: {
 const CloudProvider: React.FC<CloudProviderProps> = (props) => {
   const { credentialList } = props;
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
 
   return (
     <>
@@ -94,7 +102,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         ]}
       >
         <SealSelect
-          label="Credential"
+          label={intl.formatMessage({ id: 'clusters.credential.title' })}
           required
           options={credentialList}
         ></SealSelect>
@@ -104,17 +112,12 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
+            message: getRuleMessage('input', 'clusters.workerpool.region')
-              { id: 'common.form.rule.input' },
-              {
-                name: 'Region'
-              }
-            )
           }
         ]}
       >
         <SealSelect
-          label="Region"
+          label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
           required
           options={regionList}
           labelRender={labelRender}

src/pages/cluster-management/components/cluster-detail-modal.tsx

@@ -1,7 +1,7 @@
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import React from 'react';
 import { ClusterListItem } from '../config/types';
-import ClusterDetailContent from './cluster-detail-content';
+import ClusterDetailContent from './cluster-metrics';
 
 interface ClusterDetailModalProps {
   open: boolean;

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

@@ -1,15 +1,13 @@
 import GaugeChart from '@/components/echarts/gauge';
 import Card from '@/components/templates/card';
-import { PageAction } from '@/config';
+import { useSearchParams } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { queryClusterDetail } from '../apis';
-import { ProviderValueMap } from '../config';
+import { ClusterListItem } from '../config/types';
-import { ClusterListItem, NodePoolListItem } from '../config/types';
 import TrendChart from './trend-chart';
-import WorkerPools from './worker-pools';
 
 const metricsMap = {
   cpu: {
@@ -81,17 +79,11 @@ const formatValue = (value: number) => {
 
 const CardHeight = 336;
 
-const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
+const ClusterMetrics = () => {
   const chartHeight = 160;
-  const [show, setShow] = React.useState(false);
+  const [searchParams] = useSearchParams();
-  const [addPoolStatus, setAddPoolStatus] = React.useState({
+  const id = searchParams.get('id');
-    open: false,
+  const provider = searchParams.get('provider');
-    action: PageAction.CREATE,
-    title: '',
-    provider: ProviderValueMap.DigitalOcean,
-    currentData: null as NodePoolListItem | null,
-    clusterId: 0
-  });
   const [detailContent, setDetailContent] = useState<{
     current: {
       cpu: number;
@@ -111,12 +103,12 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   });
 
   const getClusterDetail = async () => {
-    if (!data) {
+    if (!id) {
       return;
     }
     try {
       const response = await queryClusterDetail({
-        cluster_id: data!.id
+        cluster_id: id
       });
       setDetailContent({
         current: response.system_load?.current,
@@ -137,10 +129,10 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   };
 
   useEffect(() => {
-    if (data?.id) {
+    if (id) {
       getClusterDetail();
     }
-  }, [data?.id]);
+  }, [id]);
 
   return (
     <div>
@@ -225,13 +217,8 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           </Card>
         </Col>
       </Row>
-      {data?.provider === ProviderValueMap.DigitalOcean && (
-        <>
-          <WorkerPools clusterData={data} height={'auto'} />
-        </>
-      )}
     </div>
   );
 };
 
-export default ClusterDetail;
+export default ClusterMetrics;

src/pages/cluster-management/components/trend-chart.tsx

@@ -63,6 +63,7 @@ const TrendChart: React.FC<TrendChartProps> = ({
       <LineChart
         height={320}
         title={title}
+        showArea={false}
         seriesData={generateData.seriesData}
         legendData={generateData.legendData}
         xAxisData={generateData.xAxisData}

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

@@ -1,12 +1,10 @@
 import DeleteModal from '@/components/delete-modal';
-import DropdownButtons from '@/components/drop-down-buttons';
+import { FilterBar } from '@/components/page-tools';
-import LabelsCell from '@/components/label-cell';
 import { PageAction } from '@/config';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { useIntl, useSearchParams } from '@umijs/max';
-import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
 import { message, Table } from 'antd';
-import dayjs from 'dayjs';
 import { useState } from 'react';
 import styled from 'styled-components';
 import {
@@ -18,10 +16,10 @@ import {
 } from '../apis';
 import { ProviderValueMap } from '../config';
 import {
-  ClusterListItem,
   NodePoolListItem as ListItem,
   NodePoolFormData
 } from '../config/types';
+import usePoolsColumns from '../hooks/use-pools-columns';
 import AddPool from './add-pool';
 
 const SubTitle = styled.div`
@@ -31,39 +29,14 @@ const SubTitle = styled.div`
   margin-block: 24px 16px;
 `;
 
-const actionItems = [
+const WorkerPools = () => {
-  {
+  const [searchParams] = useSearchParams();
-    key: 'edit',
-    label: 'common.button.edit',
-    icon: <EditOutlined />
-  },
-
-  {
-    key: 'delete',
-    label: 'common.button.delete',
-    icon: <DeleteOutlined />,
-    props: {
-      danger: true
-    }
-  }
-];
-
-interface WorkerPoolsProps {
-  loading?: boolean;
-  height?: string | number;
-  clusterData: ClusterListItem | null;
-}
-
-const WorkerPools: React.FC<WorkerPoolsProps> = ({
-  loading = false,
-  clusterData,
-  height = 'auto'
-}) => {
   const {
     dataSource,
     rowSelection,
     queryParams,
     modalRef,
+    sortOrder,
     fetchData,
     handleDelete,
     handleDeleteBatch,
@@ -77,9 +50,9 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     deleteAPI: deleteWorkerPool,
     API: WORKER_POOLS_API,
     watch: false,
-    contentForDelete: 'resources.modelfiles.modelfile',
+    contentForDelete: 'clusters.workerpool.title',
     defaultQueryParams: {
-      cluster_id: clusterData!.id
+      cluster_id: searchParams.get('id') || undefined
     }
   });
   const intl = useIntl();
@@ -89,7 +62,7 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     title: '',
     provider: ProviderValueMap.DigitalOcean,
     currentData: null as ListItem | null,
-    clusterId: 0
+    clusterId: 0 as number | string
   });
 
   // pool action handler
@@ -98,29 +71,43 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
       setAddPoolStatus({
         open: true,
         action: PageAction.EDIT,
-        title: 'Edit Worker Pool',
+        title: intl.formatMessage(
-        provider: clusterData!.provider,
+          { id: 'common.button.edit.item' },
+          { name: record.instance_type }
+        ),
+        provider: searchParams.get('provider') || '',
         currentData: record,
-        clusterId: clusterData!.id
+        clusterId: searchParams.get('id') || 0
       });
     }
   };
 
-  const onSelect = (key: string, record: ListItem) => {
+  const handleAddPool = (row: ListItem) => {
+    setAddPoolStatus({
+      open: true,
+      action: PageAction.CREATE,
+      title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
+      provider: searchParams.get('provider') || '',
+      clusterId: searchParams.get('id') || 0,
+      currentData: null
+    });
+  };
+
+  const onSelect = useMemoizedFn((key: string, record: ListItem) => {
     if (key === 'delete') {
       handleDelete({ ...record, name: record.instance_type });
     }
     if (key === 'edit') {
       handleEdit(key, record);
     }
-  };
+  });
 
   const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
     try {
       if (addPoolStatus.action === PageAction.CREATE) {
         await createWorkerPool({
           data: formdata,
-          clusterId: clusterData!.id
+          clusterId: searchParams.get('id') || 0
         });
       }
       if (addPoolStatus.action === PageAction.EDIT) {
@@ -140,61 +127,45 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     });
   };
 
-  const columns = [
+  const columns = usePoolsColumns(sortOrder, onSelect);
-    {
-      title: 'Instance Type',
-      dataIndex: 'instance_type',
-      key: 'instance_type'
-    },
-    {
-      title: 'Replicas',
-      dataIndex: 'replicas',
-      key: 'replicas'
-    },
-    {
-      title: 'Batch Size',
-      dataIndex: 'batch_size',
-      key: 'batch_size'
-    },
-    {
-      title: 'Labels',
-      dataIndex: 'labels',
-      key: 'labels',
-      render: (text: string, record: ListItem) => (
-        <LabelsCell labels={record.labels}></LabelsCell>
-      )
-    },
-    {
-      title: 'Create Time',
-      dataIndex: 'create_at',
-      key: 'created_at',
-      render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
-    },
-    {
-      title: 'Operations',
-      key: 'operations',
-      render: (text: string, record: ListItem) => (
-        <DropdownButtons
-          items={actionItems}
-          onSelect={(key) => onSelect?.(key, record)}
-        />
-      )
-    }
-  ];
 
   return (
     <>
       <SubTitle>
-        <span>Worker Pools</span>
+        <span>{intl.formatMessage({ id: 'clusters.workerpool.title' })}</span>
       </SubTitle>
-      <div style={{ height: height, overflow: 'hidden' }}>
+      <FilterBar
+        showSelect={false}
+        showPrimaryButton={true}
+        showDeleteButton={true}
+        marginBottom={22}
+        marginTop={22}
+        width={{ input: 300 }}
+        buttonText={intl.formatMessage({ id: 'clusters.button.addNodePool' })}
+        rowSelection={rowSelection}
+        handleInputChange={handleNameChange}
+        handleSearch={handleSearch}
+        handleDeleteByBatch={handleDeleteBatch}
+        handleClickPrimary={handleAddPool}
+      ></FilterBar>
       <Table
-          dataSource={dataSource.dataList}
-          columns={columns}
-          loading={loading}
-          pagination={false}
         rowKey="id"
-        />
+        tableLayout="fixed"
+        style={{ width: '100%' }}
+        onChange={handleTableChange}
+        dataSource={dataSource.dataList}
+        loading={dataSource.loading}
+        rowSelection={rowSelection}
+        columns={columns}
+        pagination={{
+          showSizeChanger: true,
+          pageSize: queryParams.perPage,
+          current: queryParams.page,
+          total: dataSource.total,
+          hideOnSinglePage: queryParams.perPage === 10,
+          onChange: handlePageChange
+        }}
+      ></Table>
       <AddPool
         provider={addPoolStatus.provider}
         open={addPoolStatus.open}
@@ -214,7 +185,6 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
         onOk={handleSubmitWorkerPool}
       ></AddPool>
       <DeleteModal ref={modalRef}></DeleteModal>
-      </div>
     </>
   );
 };

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

@@ -87,11 +87,6 @@ export const clusterActionList = [
     label: 'common.button.edit',
     icon: icons.EditOutlined
   },
-  {
-    key: 'details',
-    label: 'common.button.detail',
-    icon: icons.FileTextOutlined
-  },
   {
     key: 'add_worker',
     label: 'resources.button.create',
@@ -127,20 +122,36 @@ export const regionList: {
   label: string;
   datacenter: string;
   value: string;
+  icon: string;
 }[] = [
-  { label: 'New York', datacenter: 'Datacenter 1', value: 'nyc1' },
+  { label: 'New York', datacenter: 'Datacenter 1', value: 'nyc1', icon: '🇺🇸' },
-  { label: 'New York', datacenter: 'Datacenter 2', value: 'nyc2' },
+  { label: 'New York', datacenter: 'Datacenter 2', value: 'nyc2', icon: '🇺🇸' },
-  { label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3' },
+  { label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3', icon: '🇺🇸' },
-  { label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1' },
+  { label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1', icon: '🇨🇦' },
-  { label: 'San Francisco', datacenter: 'Datacenter 1', value: 'sfo1' },
+  {
-  { label: 'San Francisco', datacenter: 'Datacenter 2', value: 'sfo2' },
+    label: 'San Francisco',
-  { label: 'San Francisco', datacenter: 'Datacenter 3', value: 'sfo3' },
+    datacenter: 'Datacenter 1',
-  { label: 'Atlanta', datacenter: 'Datacenter 1', value: 'atl1' },
+    value: 'sfo1',
-  { label: 'Singapore', datacenter: 'Datacenter 1', value: 'sgp1' },
+    icon: '🇺🇸'
-  { label: 'Bangalore', datacenter: 'Datacenter 1', value: 'blr1' },
+  },
-  { label: 'London', datacenter: 'Datacenter 1', value: 'lon1' },
+  {
-  { label: 'Amsterdam', datacenter: 'Datacenter 2', value: 'ams2' },
+    label: 'San Francisco',
-  { label: 'Amsterdam', datacenter: 'Datacenter 3', value: 'ams3' },
+    datacenter: 'Datacenter 2',
-  { label: 'Frankfurt', datacenter: 'Datacenter 1', value: 'fra1' },
+    value: 'sfo2',
-  { label: 'Sydney', datacenter: 'Datacenter 1', value: 'syd1' }
+    icon: '🇺🇸'
+  },
+  {
+    label: 'San Francisco',
+    datacenter: 'Datacenter 3',
+    value: 'sfo3',
+    icon: '🇺🇸'
+  },
+  { label: 'Atlanta', datacenter: 'Datacenter 1', value: 'atl1', icon: '🇺🇸' },
+  { label: 'Singapore', datacenter: 'Datacenter 1', value: 'sgp1', icon: '🇸🇬' },
+  { label: 'Bangalore', datacenter: 'Datacenter 1', value: 'blr1', icon: '🇮🇳' },
+  { label: 'London', datacenter: 'Datacenter 1', value: 'lon1', icon: '🇬🇧' },
+  { label: 'Amsterdam', datacenter: 'Datacenter 2', value: 'ams2', icon: '🇳🇱' },
+  { label: 'Amsterdam', datacenter: 'Datacenter 3', value: 'ams3', icon: '🇳🇱' },
+  { label: 'Frankfurt', datacenter: 'Datacenter 1', value: 'fra1', icon: '🇩🇪' },
+  { label: 'Sydney', datacenter: 'Datacenter 1', value: 'syd1', icon: '🇦🇺' }
 ];

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

@@ -2,7 +2,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import StatusTag from '@/components/status-tag';
-import { useIntl } from '@umijs/max';
+import { Link, useIntl } from '@umijs/max';
 import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -14,25 +14,34 @@ import {
 } from '../config';
 import { ClusterListItem } from '../config/types';
 
-const useClusterColumns = (
+const setActionsItems = (row: ClusterListItem) => {
-  handleSelect: (val: string, record: ClusterListItem) => void
-): ColumnsType<ClusterListItem> => {
-  const intl = useIntl();
-  const setActionsItems = (row: ClusterListItem) => {
   return clusterActionList.filter((item) => {
     if (item.provider) {
       return item.provider === row.provider;
     }
     return true;
   });
-  };
+};
+
+const useClusterColumns = (
+  handleSelect: (val: string, record: ClusterListItem) => void
+): ColumnsType<ClusterListItem> => {
+  const intl = useIntl();
 
   return useMemo(() => {
     return [
       {
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
-        render: (text: string) => <AutoTooltip ghost>{text}</AutoTooltip>
+        render: (text: string, record: ClusterListItem) => (
+          <AutoTooltip ghost>
+            <Link
+              to={`/cluster-management/cluster/detail?id=${record.id}&provider=${record.provider}&name=${record.name}`}
+            >
+              {text}
+            </Link>
+          </AutoTooltip>
+        )
       },
       {
         title: intl.formatMessage({ id: 'clusters.table.provider' }),

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

@@ -0,0 +1,108 @@
+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';
+import type { SortOrder } from 'antd/es/table/interface';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { NodePoolListItem as ListItem } from '../config/types';
+
+const actionItems = [
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: <EditOutlined />
+  },
+
+  {
+    key: 'delete',
+    label: 'common.button.delete',
+    icon: <DeleteOutlined />,
+    props: {
+      danger: true
+    }
+  }
+];
+const usePoolsColumns = (
+  sortOrder: SortOrder,
+  handleSelect: (val: string, record: ListItem) => void
+): ColumnsType<ListItem> => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'clusters.workerpool.instanceType' }),
+        dataIndex: 'instance_type',
+        key: 'instance_type',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string) => (
+          <AutoTooltip title={text} ghost minWidth={20}>
+            {text}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.workerpool.replicas' }),
+        dataIndex: 'replicas',
+        key: 'replicas'
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.workerpool.batchSize' }),
+        dataIndex: 'batch_size',
+        key: 'batch_size'
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.workerpool.osImage' }),
+        dataIndex: 'os_image',
+        key: 'os_image',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string) => (
+          <AutoTooltip title={text} ghost minWidth={20}>
+            {text}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.labels' }),
+        dataIndex: 'labels',
+        key: 'labels',
+        width: 200,
+        render: (text: string, record: ListItem) => (
+          <LabelsCell labels={record.labels}></LabelsCell>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'create_at',
+        key: 'created_at',
+        showSorterTooltip: false,
+        defaultSortOrder: 'descend',
+        sortOrder: sortOrder,
+        sorter: false,
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        key: 'operations',
+        render: (text: string, record: ListItem) => (
+          <DropdownButtons
+            items={actionItems}
+            onSelect={(key) => handleSelect?.(key, record)}
+          />
+        )
+      }
+    ];
+  }, [sortOrder, handleSelect]);
+};
+
+export default usePoolsColumns;

src/pages/cluster-management/layout/index.tsx

@@ -0,0 +1,20 @@
+import { Outlet } from '@umijs/max';
+import React, { useEffect, useRef, useState } from 'react';
+
+const ListLayout: React.FC = () => {
+  const [listParams, setListParams] = useState({ page: 1, keyword: '' });
+  const scrollRef = useRef<number>(0);
+
+  useEffect(() => {
+    console.log('cluster layout:');
+  }, []);
+
+  return (
+    <div>
+      {/* 提供上下文给子路由：ListPage & DetailPage */}
+      <Outlet context={{ listParams, setListParams, scrollRef }} />
+    </div>
+  );
+};
+
+export default ListLayout;

src/pages/llmodels/components/data-form.tsx

@@ -146,9 +146,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onValuesChange?.(changedValues, allValues);
   };
 
-  useImperativeHandle(
+  useImperativeHandle(ref, () => {
-    ref,
-    () => {
     return {
       form: form,
       submit: handleSumit,
@@ -171,9 +169,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         getGPUOptionList(params);
       }
     };
-    },
+  }, []);
-    []
-  );
 
   return (
     <FormInnerContext.Provider
@@ -252,14 +248,14 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           rules={[
             {
               required: true,
-              message: getRuleMessage('select', 'Cluster', false)
+              message: getRuleMessage('select', 'clusters.title')
             }
           ]}
         >
           {
             <SealSelect
               onChange={handleClusterChange}
-              label="Cluster"
+              label={intl.formatMessage({ id: 'clusters.title' })}
               options={clusterList}
               required
             ></SealSelect>

src/pages/resources/apis/index.ts

@@ -5,6 +5,12 @@ export const WORKERS_API = '/workers';
 export const GPU_DEVICES_API = '/gpu-devices';
 export const MODEL_FILES_API = '/model-files';
 
+export async function downloadWorkerPrivateKey(id: string | number) {
+  return request(`${WORKERS_API}/${id}/privatekey`, {
+    method: 'GET'
+  });
+}
+
 export async function queryWorkersList<T extends Record<string, any>>(
   params: Global.SearchParams & T
 ) {

src/pages/resources/components/container-install.tsx

@@ -47,6 +47,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
     return commandCode?.registerWorker({
       server: registrationInfo.server_url || origin,
       tag: tag,
+      image: registrationInfo.image,
       token: registrationInfo.token || '${token}',
       workerip: '${workerip}'
     });

src/pages/resources/components/workers.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useState } from 'react';
 import {
   WORKERS_API,
   deleteWorker,
+  downloadWorkerPrivateKey,
   queryWorkersList,
   updateWorker
 } from '../apis';
@@ -144,6 +145,9 @@ const Workers: React.FC = () => {
     if (val === 'details') {
       handleViewDetail(record);
     }
+    if (val === 'download_ssh_key') {
+      downloadWorkerPrivateKey(record.id);
+    }
   });
 
   const renderEmpty = (type?: string) => {

src/pages/resources/config/index.ts

@@ -5,7 +5,8 @@ export const WorkerStatusMap = {
   not_ready: 'not_ready',
   unreachable: 'unreachable',
   provisioning: 'provisioning',
-  deleting: 'deleting'
+  deleting: 'deleting',
+  error: 'error'
 };
 
 export const WorkerStatusMapValue = {
@@ -13,7 +14,8 @@ export const WorkerStatusMapValue = {
   [WorkerStatusMap.not_ready]: 'Not Ready',
   [WorkerStatusMap.unreachable]: 'Unreachable',
   [WorkerStatusMap.provisioning]: 'Provisioning',
-  [WorkerStatusMap.deleting]: 'Deleting'
+  [WorkerStatusMap.deleting]: 'Deleting',
+  [WorkerStatusMap.error]: 'Error'
 };
 
 export const status: any = {
@@ -21,21 +23,22 @@ export const status: any = {
   [WorkerStatusMap.not_ready]: StatusMaps.error,
   [WorkerStatusMap.unreachable]: StatusMaps.error,
   [WorkerStatusMap.provisioning]: StatusMaps.transitioning,
-  [WorkerStatusMap.deleting]: StatusMaps.warning
+  [WorkerStatusMap.deleting]: StatusMaps.warning,
+  [WorkerStatusMap.error]: StatusMaps.error
 };
 
 export const addWorkerGuide: Record<string, any> = {
   mac: {
     getToken: 'cat /var/lib/gpustack/token',
     registerWorker(params: { server: string; token: string }) {
-      return `curl -sfL https://get.gpustack.ai | sh -s - --server-url ${params.server} --registration ${params.token}`;
+      return `curl -sfL https://get.gpustack.ai | sh -s - --server-url ${params.server} --registration-token ${params.token}`;
     }
   },
   win: {
     getToken:
       'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw',
     registerWorker(params: { server: string; token: string }) {
-      return `Invoke-Expression "& { $((Invoke-WebRequest -Uri 'https://get.gpustack.ai' -UseBasicParsing).Content) } --server-url '${params.server}' --registration '${params.token}'"`;
+      return `Invoke-Expression "& { $((Invoke-WebRequest -Uri 'https://get.gpustack.ai' -UseBasicParsing).Content) } --server-url '${params.server}' --registration-token '${params.token}'"`;
     }
   },
   cuda: {
@@ -45,6 +48,7 @@ export const addWorkerGuide: Record<string, any> = {
       server: string;
       tag: string;
       token: string;
+      image: string;
       workerip: string;
     }) {
       return `docker run -d --name gpustack \\
@@ -53,8 +57,8 @@ export const addWorkerGuide: Record<string, any> = {
     --network=host \\
     --ipc=host \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   npu: {
@@ -65,6 +69,7 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     --restart=unless-stopped \\
@@ -81,8 +86,8 @@ export const addWorkerGuide: Record<string, any> = {
     --network=host \\
     --ipc=host \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   npu310p: {
@@ -93,6 +98,7 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     --restart=unless-stopped \\
@@ -109,8 +115,8 @@ export const addWorkerGuide: Record<string, any> = {
     --network=host \\
     --ipc=host \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag}-310p \\
+    ${params.image} -310p \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   musa: {
@@ -121,14 +127,15 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     --restart=unless-stopped \\
     --network=host \\
     --ipc=host \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   cpu: {
@@ -139,13 +146,14 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     --restart=unless-stopped \\
     --network=host \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   rocm: {
@@ -154,6 +162,7 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     --restart=unless-stopped \\
@@ -165,8 +174,8 @@ export const addWorkerGuide: Record<string, any> = {
     --cap-add=SYS_PTRACE \\
     --security-opt seccomp=unconfined \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   dcu: {
@@ -175,6 +184,7 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     --restart=unless-stopped \\
@@ -188,8 +198,8 @@ export const addWorkerGuide: Record<string, any> = {
     --cap-add=SYS_PTRACE \\
     --security-opt seccomp=unconfined \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   corex: {
@@ -198,6 +208,7 @@ export const addWorkerGuide: Record<string, any> = {
       tag: string;
       token: string;
       workerip: string;
+      image: string;
     }) {
       return `docker run -d --name gpustack \\
     -v /lib/modules:/lib/modules \\
@@ -209,8 +220,8 @@ export const addWorkerGuide: Record<string, any> = {
     --network=host \\
     --ipc=host \\
     -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
+    ${params.image} \\
-     --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+     --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
     }
   },
   container: {

src/pages/resources/config/types.ts

@@ -66,6 +66,8 @@ export interface ListItem {
   ip: string;
   cluster_id: number;
   state_message: string;
+  ssh_key_id: string;
+  progress: string;
   status: {
     cpu: {
       total: number;

src/pages/resources/hooks/use-worker-columns.tsx

@@ -1,14 +1,13 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
-import IconFont from '@/components/icon-font';
 import LabelsCell from '@/components/label-cell';
 import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
 import { convertFileSize } from '@/utils';
 import {
-  CodeOutlined,
   DeleteOutlined,
+  DownloadOutlined,
   EditOutlined,
   FileTextOutlined,
   InfoCircleOutlined
@@ -18,7 +17,7 @@ import { Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import _ from 'lodash';
 import { useMemo } from 'react';
-import { WorkerStatusMap, WorkerStatusMapValue, status } from '../config';
+import { WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 
 const ActionList = [
@@ -29,12 +28,17 @@ const ActionList = [
     icon: <FileTextOutlined></FileTextOutlined>
   },
   {
-    label: 'common.button.logs',
+    label: 'resources.worker.download.privatekey',
-    locale: false,
+    key: 'download_ssh_key',
-    key: 'logs',
+    icon: <DownloadOutlined />
-    icon: <IconFont type="icon-logs" />
   },
-  { label: 'Terminal', locale: false, key: 'terminal', icon: <CodeOutlined /> },
+  // {
+  //   label: 'common.button.logs',
+  //   locale: false,
+  //   key: 'logs',
+  //   icon: <IconFont type="icon-logs" />
+  // },
+  // { label: 'Terminal', locale: false, key: 'terminal', icon: <CodeOutlined /> },
   {
     label: 'common.button.delete',
     key: 'delete',
@@ -45,8 +49,8 @@ const ActionList = [
 
 const setActions = (row: ListItem) => {
   return ActionList.filter((action) => {
-    if (action.key === 'details' && row.state === WorkerStatusMap.ready) {
+    if (action.key === 'download_ssh_key') {
-      return true;
+      return !!row.ssh_key_id;
     }
     return true;
   });
@@ -224,6 +228,7 @@ const useWorkerColumns = ({
         render: (_, record) => (
           <StatusTag
             maxTooltipWidth={400}
+            suffix={record.progress}
             statusValue={{
               status: status[record.state] as any,
               text: WorkerStatusMapValue[record.state],