feat: add cluster detail page

src/components/icon-font/icons.ts

@@ -28,7 +28,8 @@ const icons = {
   ModelScope: React.createElement(IconFont, { type: 'icon-tu2' }),
   LocalPath: React.createElement(IconFont, { type: 'icon-hard-disk' }),
   Launch: React.createElement(IconFont, { type: 'icon-rocket-launch' }),
-  Deployment: React.createElement(IconFont, { type: 'icon-rocket-launch1' })
+  Deployment: React.createElement(IconFont, { type: 'icon-rocket-launch1' }),
+  Docker: React.createElement(IconFont, { type: 'icon-docker' })
 };
 
 export default icons;

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_pouhrqmodr9.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_arejw0wk0kd.js'
 });
 
 export default IconFont;

src/components/scroller-modal/gs-drawer.tsx

@@ -1,15 +1,40 @@
 import { useEscHint } from '@/hooks/use-esc-hint';
-import { Drawer, type DrawerProps } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Drawer, type DrawerProps } from 'antd';
 
 const ScrollerModal = (props: DrawerProps) => {
+  const { title, closable = true, ...restProps } = props;
   const { EscHint } = useEscHint({
     enabled: !props.keyboard && props.open
   });
-
+  const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
+    props.onClose?.(e);
+  };
   return (
     <>
-      <Drawer {...props}>
-        {props.children}
+      <Drawer
+        {...restProps}
+        closable={false}
+        title={
+          <div className="flex-between flex-center">
+            <span
+              style={{
+                color: 'var(--ant-color-text)',
+                fontWeight: 'var(--font-weight-medium)',
+                fontSize: 'var(--font-size-middle)'
+              }}
+            >
+              {title}
+            </span>
+            {closable && (
+              <Button type="text" size="small" onClick={handleCancel}>
+                <CloseOutlined></CloseOutlined>
+              </Button>
+            )}
+          </div>
+        }
+      >
+        {restProps.children}
         {EscHint}
       </Drawer>
     </>

src/pages/cluster-management/clusters.tsx

@@ -15,16 +15,16 @@ import {
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Empty, Table, message } from 'antd';
+import { Table, message } from 'antd';
 import { useState } from 'react';
-import styled from 'styled-components';
 import {
-  createCredential,
-  deleteCredential,
-  queryCredentialList,
-  updateCredential
+  createCluster,
+  deleteCluster,
+  queryClusterList,
+  updateCluster
 } from './apis';
 import AddCluster from './components/add-cluster';
+import ClusterDetailModal from './components/cluster-detail-modal';
 import ClusterItem from './components/cluster-item';
 import { ClusterDataList } from './config';
 import {
@@ -57,39 +57,6 @@ const addActions = [
   }
 ];
 
-const WorkerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: flex-start;
-  .worker {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .value {
-      line-height: 1em;
-      color: var(--ant-color-text-secondary);
-    }
-  }
-  .dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 4px;
-    &.ready {
-      background-color: var(--ant-color-success);
-    }
-    &.error {
-      background-color: var(--ant-color-error);
-    }
-
-    &.transition {
-      background-color: var(--ant-blue-5);
-    }
-  }
-`;
-
 const ActionList = [
   {
     key: 'edit',
@@ -139,13 +106,23 @@ const Credentials: React.FC = () => {
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
-    fetchAPI: queryCredentialList,
-    deleteAPI: deleteCredential,
+    fetchAPI: queryClusterList,
+    deleteAPI: deleteCluster,
     contentForDelete: 'users.table.user'
   });
 
   const intl = useIntl();
-  const [openAddWorker, setOpenAddWorker] = useState({
+  const [openClusterDetail, setOpenClusterDetail] = useState<{
+    open: boolean;
+    id: number;
+  }>({
+    open: false,
+    id: 0
+  });
+  const [openAddWorker, setOpenAddWorker] = useState<{
+    open: boolean;
+    token: string;
+  }>({
     open: false,
     token: ''
   });
@@ -202,14 +179,12 @@ const Credentials: React.FC = () => {
     };
     try {
       if (action === PageAction.EDIT) {
-        await updateCredential({
-          data: {
-            ...params,
-            id: currentData?.id
-          }
+        await updateCluster({
+          data: params,
+          id: currentData!.id
         });
       } else {
-        await createCredential({ data: params });
+        await createCluster({ data: params });
       }
       fetchData();
       setOpenAddModal(false);
@@ -244,6 +219,11 @@ const Credentials: React.FC = () => {
       setCurrentData(row);
     } else if (val === 'addPool') {
       handleAddPool(row.provider);
+    } else if (val === 'details') {
+      setOpenClusterDetail({
+        open: true,
+        id: row.id
+      });
     }
   };
 
@@ -251,18 +231,6 @@ const Credentials: React.FC = () => {
     return <ClusterItem data={item} onSelect={handleSelect}></ClusterItem>;
   };
 
-  const renderEmpty = (type?: string) => {
-    if (type !== 'Table') return;
-    if (
-      !dataSource.loading &&
-      dataSource.loadend &&
-      !dataSource.dataList.length
-    ) {
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
-    }
-    return <div></div>;
-  };
-
   return (
     <>
       <PageContainer
@@ -318,6 +286,11 @@ const Credentials: React.FC = () => {
         onCancel={() => setOpenAddWorker({ open: false, token: '' })}
         token={openAddWorker.token}
       ></AddWorker>
+      <ClusterDetailModal
+        open={openClusterDetail.open}
+        id={openClusterDetail.id}
+        onClose={() => setOpenClusterDetail({ open: false, id: 0 })}
+      ></ClusterDetailModal>
       <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );

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

@@ -16,9 +16,7 @@ const SubTitle = styled.div`
 `;
 
 interface ClusterDetailProps {
-  provider: string;
   data: ClusterListItem;
-  show: boolean;
 }
 
 const gaugeConfig = {
@@ -41,8 +39,9 @@ const gaugeConfig = {
   }
 };
 
-const ClusterDetail: React.FC<ClusterDetailProps> = ({ data, show }) => {
+const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   const chartHeight = 160;
+  const [show, setShow] = React.useState(false);
   const [addPoolStatus, setAddPoolStatus] = React.useState({
     open: false,
     action: PageAction.CREATE,

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

@@ -0,0 +1,42 @@
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import React from 'react';
+import ClusterDetailContent from './cluster-detail-content';
+
+interface ClusterDetailModalProps {
+  open: boolean;
+  onClose?: () => void;
+  id: number;
+}
+
+const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({
+  open,
+  onClose,
+  id: clusterId
+}) => {
+  const [data, setData] = React.useState<any>({
+    id: 1,
+    name: 'kubernetes-cluster',
+    provider: 'kubernetes',
+    clusterType: 'Kubernetes',
+    workers: 2,
+    gpus: 4,
+    status: 'ready',
+    deployments: 1
+  });
+  const handleOnClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <GSDrawer
+      width={800}
+      title={`Cluster Detail - ${clusterId}`}
+      open={open}
+      onClose={handleOnClose}
+    >
+      <ClusterDetailContent data={data} />
+    </GSDrawer>
+  );
+};
+
+export default ClusterDetailModal;

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

@@ -31,9 +31,9 @@ const actionItems = [
     icon: <EditOutlined />
   },
   {
-    key: 'view',
+    key: 'details',
     label: 'common.button.view',
-    icon: <EditOutlined />
+    icon: <IconFont type="icon-detail-info" className="font-size-16" />
   },
   {
     key: 'add_worker',

src/pages/cluster-management/credentials.tsx

@@ -34,7 +34,10 @@ import {
   updateCredential
 } from './apis';
 import AddModal from './components/add-credential';
-import { FormData, ListItem } from './config/types';
+import {
+  CredentialFormData as FormData,
+  CredentialListItem as ListItem
+} from './config/types';
 const { Column } = Table;
 
 const ActionList = [
@@ -127,9 +130,9 @@ const Credentials: React.FC = () => {
       if (openModalStatus.action === PageAction.EDIT) {
         await updateCredential({
           data: {
-            ...params,
-            id: currentData?.id
-          }
+            ...params
+          },
+          id: currentData!.id
         });
       } else {
         await createCredential({ data: params });

src/pages/llmodels/components/deploy-modal.tsx

@@ -3,7 +3,6 @@ import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
 import useDeferredRequest from '@/hooks/use-deferred-request';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import _ from 'lodash';
@@ -500,14 +499,7 @@ const AddModal: FC<AddModalProps> = (props) => {
 
   return (
     <GSDrawer
-      title={
-        <div className="flex-between flex-center">
-          <span>{title}</span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={title}
       open={open}
       onClose={handleCancel}
       destroyOnClose={true}

src/pages/llmodels/config/button-actions.ts

@@ -193,7 +193,6 @@ export const modelFileActions = [
 
 export const categoryToPathMap: Record<string, string> = {
   [modelCategoriesMap.llm]: '/playground/chat',
-  [modelCategoriesMap.image]: '/playground/text-to-image',
   [modelCategoriesMap.text_to_speech]: '/playground/speech?type=tts',
   [modelCategoriesMap.speech_to_text]: '/playground/speech?type=stt',
   [modelCategoriesMap.reranker]: '/playground/rerank',

src/pages/llmodels/config/index.ts

@@ -330,14 +330,17 @@ export const modelCategoriesMap = {
   llm: 'llm'
 };
 
+export const categoryOptions = [
+  { label: 'LLM', value: modelCategoriesMap.llm },
+  { label: 'Embedding', value: modelCategoriesMap.embedding },
+  { label: 'Reranker', value: modelCategoriesMap.reranker },
+  { label: 'Text-to-Speech', value: modelCategoriesMap.text_to_speech },
+  { label: 'Speech-to-Text', value: modelCategoriesMap.speech_to_text }
+];
+
 export const modelCategories = [
   { label: 'common.options.auto', value: null, locale: true },
-  { label: 'LLM', value: modelCategoriesMap.llm },
-  { label: 'Image', value: modelCategoriesMap.image },
-  { label: 'Text-to-Speech', value: modelCategoriesMap.text_to_speech },
-  { label: 'Speech-to-Text', value: modelCategoriesMap.speech_to_text },
-  { label: 'Embedding', value: modelCategoriesMap.embedding },
-  { label: 'Reranker', value: modelCategoriesMap.reranker }
+  ...categoryOptions
 ];
 
 export const sourceRepoConfig = {

src/pages/llmodels/config/types.ts

@@ -86,8 +86,6 @@ export interface DistributedServerItem {
 }
 
 export interface DistributedServers {
-  rpc_servers: DistributedServerItem[];
-  ray_actors: DistributedServerItem[];
   subordinate_workers: DistributedServerItem[];
 }
 export interface ModelInstanceListItem {

src/pages/llmodels/download/index.tsx

@@ -1,8 +1,6 @@
 import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button } from 'antd';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ColumnWrapper from '../components/column-wrapper';
@@ -127,22 +125,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
 
   return (
     <GSDrawer
-      title={
-        <div className="flex-between flex-center">
-          <span
-            style={{
-              color: 'var(--ant-color-text)',
-              fontWeight: 'var(--font-weight-medium)',
-              fontSize: 'var(--font-size-middle)'
-            }}
-          >
-            {title}
-          </span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={title}
       open={open}
       onClose={handleCancel}
       destroyOnClose={true}

src/pages/llmodels/user-models.tsx

@@ -5,19 +5,28 @@ import CardSkeleton from '@/components/templates/card-skelton';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Select, Space } from 'antd';
 import React from 'react';
 import { MODELS_API, queryModelsList } from './apis';
 import ModelItem from './components/model-item';
+import { categoryOptions, modelCategoriesMap } from './config';
+import { categoryToPathMap } from './config/button-actions';
 
 const UserModels: React.FC = () => {
-  const { dataSource, queryParams, fetchData, handleSearch, handleNameChange } =
-    useTableFetch<any>({
-      fetchAPI: queryModelsList,
-      API: MODELS_API,
-      watch: false
-    });
+  const navigate = useNavigate();
+  const {
+    dataSource,
+    queryParams,
+    fetchData,
+    handleSearch,
+    handleQueryChange,
+    handleNameChange
+  } = useTableFetch<any>({
+    fetchAPI: queryModelsList,
+    API: MODELS_API,
+    watch: false
+  });
   const intl = useIntl();
 
   const loadMore = () => {
@@ -27,8 +36,30 @@ const UserModels: React.FC = () => {
     });
   };
 
+  const handleCategoryChange = (value: string) => {
+    handleQueryChange({
+      categories: value
+    });
+  };
+
   const handleOnClick = (model: any) => {
-    console.log('Deploying model:', model);
+    for (const [category, path] of Object.entries(categoryToPathMap)) {
+      if (
+        model.categories?.includes(category) &&
+        [
+          modelCategoriesMap.text_to_speech,
+          modelCategoriesMap.speech_to_text
+        ].includes(category)
+      ) {
+        navigate(`${path}&model=${model.name}`);
+        return;
+      }
+      if (model.categories?.includes(category)) {
+        navigate(`${path}?model=${model.name}`);
+        return;
+      }
+    }
+    navigate(`/playground/chat?model=${model.name}`);
   };
 
   const renderCard = (data: any) => {
@@ -72,7 +103,8 @@ const UserModels: React.FC = () => {
               style={{ width: 180 }}
               size="large"
               maxTagCount={1}
-              options={[]}
+              options={categoryOptions}
+              onChange={handleCategoryChange}
             ></Select>
             <Button
               type="text"