fix: cluster apis

2025-09-16 11:26:17 +08:00
parent f04f1f828f
commit 632f206228
34 changed files with 578 additions and 329 deletions
@@ -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',
@@ -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: {
-        //   color: new LinearGradient(0, 0, 0, 1, [
-        //     {
-        //       offset: 0,
-        //       color: colors[0]
-        //     },
-        //     {
-        //       offset: 1,
-        //       color: colors[1]
-        //     }
-        //   ])
-        // }
+        },
+        areaStyle: showArea
+          ? {
+              color: new LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: colors[0]
+                },
+                {
+                  offset: 1,
+                  color: colors[1]
+                }
+              ])
+            }
+          : null
      };
    });
    return {
@@ -5,6 +5,7 @@ import type {
 export interface ChartProps {
  seriesData: any[];
  showEmpty?: boolean;
+  showArea?: boolean;
  xAxisData: string[];
  legendData?: LegendComponentOption['data'];
  legendOptions?: {
@@ -15,6 +15,7 @@
    display: flex;
    align-items: center;
    height: 20px;
+    gap: 5px;

    &.err {
      cursor: default;
@@ -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>
+            <InfoCircleOutlined />
            {renderContent()}
+            {suffix && <span>{suffix}</span>}
          </span>
        </TooltipOverlayScroller>
      ) : (
-        <span className="txt">{renderContent()}</span>
+        <span className="txt">
+          {renderContent()}
+          {suffix && <span>{suffix}</span>}
+        </span>
      )}
    </span>
  );
@@ -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.add.credential': 'Add {provider} Credential'
+  'clusters.button.addNodePool': 'Add Worker Pool',
+  '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'
 };
@@ -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'
 };
@@ -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.add.credential': 'Add {provider} Credential'
+  'clusters.button.addNodePool': 'Add Worker Pool',
+  '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',
-// 13. 'clusters.button.add.credential': 'Add {provider} Credential'
+// 12. 'clusters.button.addNodePool': 'Add Worker Pool',
+// 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 ==========
@@ -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 ==========
@@ -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.add.credential': 'Add {provider} Credential'
+  'clusters.button.addNodePool': 'Add Worker Pool',
+  '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 ==========
@@ -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) ==========
@@ -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': '节点池'
 };
@@ -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': '下载私钥'
 };
@@ -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',
@@ -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;
@@ -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}
@@ -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>
@@ -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(
-                { id: 'common.form.rule.input' },
-                {
-                  name: intl.formatMessage({ id: 'common.table.name' })
-                }
+              message: getRuleMessage(
+                'input',
+                'clusters.workerpool.instanceType'
              )
            }
          ]}
        >
          <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(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Replicas'
-                }
-              )
+              message: getRuleMessage('input', 'clusters.workerpool.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(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Batch Size'
-                }
-              )
+              message: getRuleMessage('input', 'clusters.workerpool.batchSize')
            }
          ]}
        >
-          <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(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'OS Image'
-                }
-              )
+              message: getRuleMessage('input', 'clusters.workerpool.osImage')
            }
          ]}
        >
-          <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>
@@ -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(
-              { id: 'common.form.rule.input' },
-              {
-                name: 'Region'
-              }
-            )
+            message: getRuleMessage('input', 'clusters.workerpool.region')
          }
        ]}
      >
        <SealSelect
-          label="Region"
+          label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
          required
          options={regionList}
          labelRender={labelRender}
@@ -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;
@@ -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, NodePoolListItem } from '../config/types';
+import { ClusterListItem } 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 [addPoolStatus, setAddPoolStatus] = React.useState({
-    open: false,
-    action: PageAction.CREATE,
-    title: '',
-    provider: ProviderValueMap.DigitalOcean,
-    currentData: null as NodePoolListItem | null,
-    clusterId: 0
-  });
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('id');
+  const provider = searchParams.get('provider');
  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;
@@ -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}
@@ -1,12 +1,10 @@
 import DeleteModal from '@/components/delete-modal';
-import DropdownButtons from '@/components/drop-down-buttons';
-import LabelsCell from '@/components/label-cell';
+import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
+import { useIntl, useSearchParams } 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 = [
-  {
-    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 WorkerPools = () => {
+  const [searchParams] = useSearchParams();
  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',
-        provider: clusterData!.provider,
+        title: intl.formatMessage(
+          { 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,81 +127,64 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
    });
  };

-  const columns = [
-    {
-      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)}
-        />
-      )
-    }
-  ];
+  const columns = usePoolsColumns(sortOrder, onSelect);

  return (
    <>
      <SubTitle>
-        <span>Worker Pools</span>
+        <span>{intl.formatMessage({ id: 'clusters.workerpool.title' })}</span>
      </SubTitle>
-      <div style={{ height: height, overflow: 'hidden' }}>
-        <Table
-          dataSource={dataSource.dataList}
-          columns={columns}
-          loading={loading}
-          pagination={false}
-          rowKey="id"
-        />
-        <AddPool
-          provider={addPoolStatus.provider}
-          open={addPoolStatus.open}
-          action={addPoolStatus.action}
-          title={addPoolStatus.title}
-          currentData={addPoolStatus.currentData}
-          onCancel={() => {
-            setAddPoolStatus({
-              open: false,
-              action: PageAction.CREATE,
-              title: '',
-              provider: ProviderValueMap.DigitalOcean,
-              currentData: null,
-              clusterId: 0
-            });
-          }}
-          onOk={handleSubmitWorkerPool}
-        ></AddPool>
-        <DeleteModal ref={modalRef}></DeleteModal>
-      </div>
+      <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
+        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}
+        action={addPoolStatus.action}
+        title={addPoolStatus.title}
+        currentData={addPoolStatus.currentData}
+        onCancel={() => {
+          setAddPoolStatus({
+            open: false,
+            action: PageAction.CREATE,
+            title: '',
+            provider: ProviderValueMap.DigitalOcean,
+            currentData: null,
+            clusterId: 0
+          });
+        }}
+        onOk={handleSubmitWorkerPool}
+      ></AddPool>
+      <DeleteModal ref={modalRef}></DeleteModal>
    </>
  );
 };
@@ -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 2', value: 'nyc2' },
-  { label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3' },
-  { label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1' },
-  { label: 'San Francisco', datacenter: 'Datacenter 1', value: 'sfo1' },
-  { label: 'San Francisco', datacenter: 'Datacenter 2', value: 'sfo2' },
-  { label: 'San Francisco', datacenter: 'Datacenter 3', value: 'sfo3' },
-  { label: 'Atlanta', datacenter: 'Datacenter 1', value: 'atl1' },
-  { label: 'Singapore', datacenter: 'Datacenter 1', value: 'sgp1' },
-  { label: 'Bangalore', datacenter: 'Datacenter 1', value: 'blr1' },
-  { label: 'London', datacenter: 'Datacenter 1', value: 'lon1' },
-  { label: 'Amsterdam', datacenter: 'Datacenter 2', value: 'ams2' },
-  { label: 'Amsterdam', datacenter: 'Datacenter 3', value: 'ams3' },
-  { label: 'Frankfurt', datacenter: 'Datacenter 1', value: 'fra1' },
-  { label: 'Sydney', datacenter: 'Datacenter 1', value: 'syd1' }
+  { label: 'New York', datacenter: 'Datacenter 1', value: 'nyc1', icon: '🇺🇸' },
+  { label: 'New York', datacenter: 'Datacenter 2', value: 'nyc2', icon: '🇺🇸' },
+  { label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3', icon: '🇺🇸' },
+  { label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1', icon: '🇨🇦' },
+  {
+    label: 'San Francisco',
+    datacenter: 'Datacenter 1',
+    value: 'sfo1',
+    icon: '🇺🇸'
+  },
+  {
+    label: 'San Francisco',
+    datacenter: 'Datacenter 2',
+    value: 'sfo2',
+    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: '🇦🇺' }
 ];
@@ -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 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();
-  const setActionsItems = (row: ClusterListItem) => {
-    return clusterActionList.filter((item) => {
-      if (item.provider) {
-        return item.provider === row.provider;
-      }
-      return true;
-    });
-  };

  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' }),
@@ -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;
@@ -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;
@@ -146,34 +146,30 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
    onValuesChange?.(changedValues, allValues);
  };

-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        form: form,
-        submit: handleSumit,
-        resetFields: (fields: any[]) => {
-          form.resetFields(fields);
-        },
-        setFieldsValue: (values: FormData) => {
-          form.setFieldsValue(values);
-        },
-        setFieldValue: (name: string, value: any) => {
-          form.setFieldValue(name, value);
-        },
-        getFieldValue: (name: string) => {
-          return form.getFieldValue(name);
-        },
-        getFieldsValue: () => {
-          return form.getFieldsValue();
-        },
-        getGPUOptionList(params: { clusterId: number }) {
-          getGPUOptionList(params);
-        }
-      };
-    },
-    []
-  );
+  useImperativeHandle(ref, () => {
+    return {
+      form: form,
+      submit: handleSumit,
+      resetFields: (fields: any[]) => {
+        form.resetFields(fields);
+      },
+      setFieldsValue: (values: FormData) => {
+        form.setFieldsValue(values);
+      },
+      setFieldValue: (name: string, value: any) => {
+        form.setFieldValue(name, value);
+      },
+      getFieldValue: (name: string) => {
+        return form.getFieldValue(name);
+      },
+      getFieldsValue: () => {
+        return form.getFieldsValue();
+      },
+      getGPUOptionList(params: { clusterId: number }) {
+        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>
@@ -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
 ) {
@@ -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}'
    });
@@ -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) => {
@@ -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} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+    --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} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+    --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 \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} -310p \\
+    --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} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+    --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} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+    --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} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+    --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} \\
-    --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+    --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} \\
-     --server-url ${params.server} --registration ${params.token} --worker-ip ${params.workerip}`;
+    ${params.image} \\
+     --server-url ${params.server} --registration-token ${params.token} --worker-ip ${params.workerip}`;
    }
  },
  container: {
@@ -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;
@@ -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',
-    locale: false,
-    key: 'logs',
-    icon: <IconFont type="icon-logs" />
+    label: 'resources.worker.download.privatekey',
+    key: 'download_ssh_key',
+    icon: <DownloadOutlined />
  },
-  { 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) {
-      return true;
+    if (action.key === 'download_ssh_key') {
+      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],