chore: add models and gpus in cluster detail page

src/atoms/clusters.ts

@@ -1,3 +1,4 @@
+import { ClusterListItem } from '@/pages/cluster-management/config/types';
 import { atom } from 'jotai';
 
 // models expand keys: create, update , delete,
@@ -63,3 +64,5 @@ export const clusterSessionAtom = atom<{
   firstAddWorker: boolean;
   firstAddCluster: boolean;
 } | null>(null);
+
+export const clusterDetailAtom = atom<ClusterListItem | null>(null);

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

@@ -1,7 +1,11 @@
+import { clusterDetailAtom } from '@/atoms/clusters';
 import IconFont from '@/components/icon-font';
+import Deployments from '@/pages/llmodels/index';
+import GPUList from '@/pages/resources/components/gpus';
 import WorkerList from '@/pages/resources/components/workers';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { Tabs } from 'antd';
+import { useAtomValue } from 'jotai';
 import { PageContainerInner } from '../_components/page-box';
 import PageBreadcrumb from '../_components/page-breadcrumb';
 import ClusterBasic from './components/detail/cluster-basic';
@@ -13,6 +17,7 @@ const ClusterDetailModal = () => {
   const [searchParams] = useSearchParams();
   const id = searchParams.get('id');
   const clusterName = searchParams.get('name');
+  const clusterDetailData = useAtomValue(clusterDetailAtom);
 
   const breadcrumbItems = [
     {
@@ -39,7 +44,7 @@ const ClusterDetailModal = () => {
         items={[
           {
             key: 'workers',
-            label: 'Workers',
+            label: `Workers (${clusterDetailData?.workers ?? 0})`,
             icon: <IconFont type="icon-resources" />,
             children: (
               <WorkerList
@@ -53,15 +58,15 @@ const ClusterDetailModal = () => {
           },
           {
             key: 'deployments',
-            label: 'Deployments',
+            label: `Deployments (${clusterDetailData?.models ?? 0})`,
             icon: <IconFont type="icon-rocket-launch1" />,
-            children: <div>Deployments Content</div>
+            children: <Deployments clusterId={Number(id)}></Deployments>
           },
           {
             key: 'gpus',
-            label: 'GPUs',
+            label: `GPUs (${clusterDetailData?.gpus ?? 0})`,
             icon: <IconFont type="icon-gpu1" />,
-            children: <div>GPUs Content</div>
+            children: <GPUList clusterId={Number(id)} widths={{ input: 360 }} />
           }
         ]}
       />

src/pages/cluster-management/clusters.tsx

@@ -254,7 +254,7 @@ const Clusters: React.FC = () => {
   const handleOnCell = useMemoizedFn((record: ClusterListItem, dataIndex) => {
     if (dataIndex === 'name') {
       navigate(
-        `/cluster-management/clusters/detail?id=${record.id}&name=${record.name}`
+        `/cluster-management/clusters/detail?id=${record.id}&name=${record.name}&page=clusters`
       );
     }
   });

src/pages/cluster-management/components/detail/cluster-system-load.tsx

@@ -1,5 +1,5 @@
 import CardWrapper from '@/components/card-wrapper';
-import { Col, Progress, Row } from 'antd';
+import { Col, Progress, Row, Tag } from 'antd';
 import { round } from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
@@ -11,9 +11,12 @@ const Container = styled.div`
   height: 86px;
   gap: 16px;
   .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     font-size: 14px;
     font-weight: 500;
-    color: var(--ant-color-text-secondary);
+    color: var(--ant-color-text-tertiary);
   }
 
   .value-wrapper {
@@ -42,26 +45,30 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
     }
   }, [clusterId]);
 
-  const renderStepsProgress = (percent: number) => {
+  const renderStepsProgress = (
+    percent: number,
+    tag: { color: string; text: string }
+  ) => {
     return (
       <Progress
         percent={percent}
-        size={{
+        type="circle"
-          height: 8
+        size={50}
-        }}
+        strokeWidth={8}
-        styles={{
+        showInfo={true}
-          root: {
+        format={() => (
-            width: '100%'
+          <Tag
-          },
+            color={tag?.color || 'blue'}
-          track: {
+            style={{
-            flex: 1
+              fontSize: 11,
-          },
+              borderRadius: 12,
-          body: {
+              backgroundColor: 'unset',
-            display: 'flex',
+              fontWeight: 500
-            width: '100%'
+            }}
-          }
+          >
-        }}
+            {tag?.text || ''}
-        showInfo={false}
+          </Tag>
+        )}
       ></Progress>
     );
   };
@@ -73,11 +80,18 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
       <Col span={6}>
         <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
-            <div className="title">GPU Utilization</div>
+            <div className="title">
+              <span>GPU Utilization</span>
+            </div>
             <div className="value-wrapper">
               <div className="value">
                 <span>{`${round(systemLoad.current.gpu, 1)}%`}</span>
-                {renderStepsProgress(round(systemLoad.current.gpu, 1))}
+              </div>
+              <div className="chart">
+                {renderStepsProgress(round(systemLoad.current.gpu, 1), {
+                  color: 'magenta',
+                  text: 'GPU'
+                })}
               </div>
             </div>
           </Container>
@@ -86,17 +100,16 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
       <Col span={6}>
         <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
-            <div className="title">VRAM Utilization</div>
+            <div className="title">
+              <span>VRAM Utilization</span>
+            </div>
             <div className="value-wrapper">
               <div className="value">{`${round(systemLoad.current.vram, 1)}%`}</div>
               <div className="chart">
-                <Progress
+                {renderStepsProgress(round(systemLoad.current.vram, 1), {
-                  percent={round(systemLoad.current.vram, 1)}
+                  color: 'purple',
-                  type="circle"
+                  text: 'VRAM'
-                  size={50}
+                })}
-                  strokeWidth={8}
-                  showInfo={false}
-                ></Progress>
               </div>
             </div>
           </Container>
@@ -105,11 +118,18 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
       <Col span={6}>
         <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
-            <div className="title">CPU Utilization</div>
+            <div className="title">
+              <span>CPU Utilization</span>
+            </div>
             <div className="value-wrapper">
               <div className="value">
                 <span>{`${round(systemLoad.current.cpu, 1)}%`}</span>
-                {renderStepsProgress(round(systemLoad.current.cpu, 1))}
+              </div>
+              <div className="chart">
+                {renderStepsProgress(round(systemLoad.current.cpu, 1), {
+                  color: 'cyan',
+                  text: 'CPU'
+                })}
               </div>
             </div>
           </Container>
@@ -118,19 +138,18 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
       <Col span={6}>
         <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
-            <div className="title">Memo Utilization</div>
+            <div className="title">
+              <span>Memo Utilization</span>
+            </div>
             <div className="value-wrapper">
               <div className="value">
                 <span>{`${round(systemLoad.current.ram, 1)}%`}</span>
               </div>
               <div className="chart">
-                <Progress
+                {renderStepsProgress(round(systemLoad.current.ram, 1), {
-                  percent={round(systemLoad.current.ram, 1)}
+                  color: 'green',
-                  type="circle"
+                  text: 'RAM'
-                  size={50}
+                })}
-                  strokeWidth={8}
-                  showInfo={false}
-                ></Progress>
               </div>
             </div>
           </Container>

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

@@ -6,7 +6,7 @@ import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
 import { StarFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Tooltip } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
@@ -42,10 +42,9 @@ const useClusterColumns = (
         render: (text: string, record: ClusterListItem) => (
           <>
             <AutoTooltip ghost title={text}>
-              {/* <Typography.Link onClick={() => onCellClick?.(record, 'name')}>
+              <Typography.Link onClick={() => onCellClick?.(record, 'name')}>
                 {record.name}
-              </Typography.Link> */}
+              </Typography.Link>
-              {record.name}
             </AutoTooltip>
             {record.is_default && (
               <Tooltip
@@ -101,11 +100,12 @@ const useClusterColumns = (
         title: intl.formatMessage({ id: 'common.table.status' }),
         dataIndex: 'state',
         span: 3,
-        render: (value: number) => (
+        render: (value: number, record: ClusterListItem) => (
           <StatusTag
             statusValue={{
               status: ClusterStatus[value],
-              text: ClusterStatusLabelMap[value]
+              text: ClusterStatusLabelMap[value],
+              message: record.state_message || undefined
             }}
           />
         )

src/pages/cluster-management/services/use-cluster-detail.ts

@@ -1,6 +1,8 @@
+import { clusterDetailAtom } from '@/atoms/clusters';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { useRequest } from 'ahooks';
 import { CancelTokenSource } from 'axios';
+import { useAtom } from 'jotai';
 import { useEffect, useRef, useState } from 'react';
 import { queryClusterDetail, queryClusterItem } from '../apis';
 import { ClusterListItem } from '../config/types';
@@ -79,6 +81,7 @@ export const useClusterDetail = () => {
   const [clusterDetail, setClusterDetail] = useState<ClusterListItem>(
     {} as ClusterListItem
   );
+  const [, setClusterDetailAtom] = useAtom(clusterDetailAtom);
 
   const {
     run: fetchClusterDetail,
@@ -96,9 +99,11 @@ export const useClusterDetail = () => {
       manual: true,
       onSuccess: (response) => {
         setClusterDetail(response);
+        setClusterDetailAtom(response);
       },
       onError: () => {
         setClusterDetail({} as ClusterListItem);
+        setClusterDetailAtom(null);
       }
     }
   );

src/pages/llmodels/components/instance-item.tsx

@@ -526,6 +526,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
         is_main: false,
         vram: calcTotalVram(item.computed_resource_claim?.vram || {}),
         gpu_index: _.keys(item.computed_resource_claim?.vram)
+          .map((i: string) => Number(i))
+          .sort((a: number, b: number) => a - b)
       };
     });
 

src/pages/llmodels/components/table-list.tsx

@@ -17,7 +17,7 @@ import PageBox from '@/pages/_components/page-box';
 import useNoResourceResult from '@/pages/llmodels/hooks/use-no-resource-result';
 import { handleBatchRequest } from '@/utils';
 import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
-import { useIntl, useNavigate } from '@umijs/max';
+import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Input, Space, message } from 'antd';
 import { useAtom } from 'jotai';
@@ -139,6 +139,8 @@ const Models: React.FC<ModelsProps> = ({
     getWorkerList,
     workerList
   } = useFormInitialValues();
+  const [searchParams] = useSearchParams();
+  const page = searchParams.get('page');
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [updateFormInitials, setUpdateFormInitials] = useState<{
     data: any;
@@ -656,18 +658,20 @@ const Models: React.FC<ModelsProps> = ({
                 onChange={handleCategoryChange}
                 options={modelCategories.filter((item) => item.value)}
               ></BaseSelect>
-              <BaseSelect
+              {page !== 'clusters' && (
-                allowClear
+                <BaseSelect
-                showSearch={false}
+                  allowClear
-                placeholder={intl.formatMessage({
+                  showSearch={false}
-                  id: 'clusters.filterBy.cluster'
+                  placeholder={intl.formatMessage({
-                })}
+                    id: 'clusters.filterBy.cluster'
-                style={{ width: 160 }}
+                  })}
-                size="large"
+                  style={{ width: 160 }}
-                maxTagCount={1}
+                  size="large"
-                onChange={handleClusterChange}
+                  maxTagCount={1}
-                options={clusterList}
+                  onChange={handleClusterChange}
-              ></BaseSelect>
+                  options={clusterList}
+                ></BaseSelect>
+              )}
               <BaseSelect
                 allowClear
                 showSearch={false}
@@ -690,21 +694,23 @@ const Models: React.FC<ModelsProps> = ({
           }
           right={
             <Space size={20}>
-              <DropDownActions
+              {page !== 'clusters' && (
-                menu={{
+                <DropDownActions
-                  items: sourceOptions,
+                  menu={{
-                  onClick: handleClickDropdown
+                    items: sourceOptions,
-                }}
+                    onClick: handleClickDropdown
-                placement="bottomRight"
+                  }}
-              >
+                  placement="bottomRight"
-                <Button
-                  icon={<DownOutlined></DownOutlined>}
-                  type="primary"
-                  iconPlacement="end"
                 >
-                  {intl?.formatMessage?.({ id: 'models.button.deploy' })}
+                  <Button
-                </Button>
+                    icon={<DownOutlined></DownOutlined>}
-              </DropDownActions>
+                    type="primary"
+                    iconPlacement="end"
+                  >
+                    {intl?.formatMessage?.({ id: 'models.button.deploy' })}
+                  </Button>
+                </DropDownActions>
+              )}
               <DropdownButtons
                 items={ButtonList}
                 extra={

src/pages/llmodels/index.tsx

@@ -16,7 +16,7 @@ import {
 import TableList from './components/table-list';
 import { ListItem } from './config/types';
 
-const Models: React.FC = () => {
+const Models: React.FC<{ clusterId?: number }> = ({ clusterId }) => {
   const { sortOrder, handleMultiSortChange } = useTableMultiSort();
   const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
   const { setChunkRequest: setModelInstanceChunkRequest } =
@@ -45,7 +45,7 @@ const Models: React.FC = () => {
     page: 1,
     perPage: 10,
     search: '',
-    cluster_id: 0,
+    cluster_id: clusterId || 0,
     categories: [],
     state: '',
     sort_by: ''

src/pages/resources/components/gpus.tsx

@@ -5,7 +5,7 @@ import useTableFetch from '@/hooks/use-table-fetch';
 import NoResult from '@/pages/_components/no-result';
 import PageBox from '@/pages/_components/page-box';
 import { queryClusterList } from '@/pages/cluster-management/apis';
-import { useIntl } from '@umijs/max';
+import { useIntl, useSearchParams } from '@umijs/max';
 import { ConfigProvider, Table } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
@@ -13,7 +13,10 @@ import { GPU_DEVICES_API, queryGpuDevicesList } from '../apis';
 import { GPUDeviceItem } from '../config/types';
 import useGPUColumns from '../hooks/use-gpu-columns';
 
-const GPUList: React.FC = () => {
+const GPUList: React.FC<{ clusterId?: number; widths: { input: number } }> = ({
+  clusterId,
+  widths
+}) => {
   const {
     dataSource,
     queryParams,
@@ -27,9 +30,13 @@ const GPUList: React.FC = () => {
   } = useTableFetch<GPUDeviceItem>({
     fetchAPI: queryGpuDevicesList,
     polling: true,
-    API: GPU_DEVICES_API
+    API: GPU_DEVICES_API,
+    defaultQueryParams: {
+      cluster_id: clusterId
+    }
   });
-
+  const [searchParams] = useSearchParams();
+  const page = searchParams.get('page');
   const intl = useIntl();
   const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
     []
@@ -97,8 +104,8 @@ const GPUList: React.FC = () => {
           handleInputChange={handleNameChange}
           handleSelectChange={handleClusterChange}
           selectOptions={clusterList}
-          showSelect
+          showSelect={page !== 'clusters'}
-          widths={{ input: 200 }}
+          widths={{ input: widths?.input || 200 }}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table

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

@@ -274,10 +274,7 @@ const useWorkerColumns = ({
   return useMemo<ColumnsType<ListItem>>(
     () => [
       {
-        title:
+        title: intl.formatMessage({ id: 'common.table.name' }),
-          sourceType === 'resources'
-            ? intl.formatMessage({ id: 'common.table.name' })
-            : intl.formatMessage({ id: 'resources.table.workername' }),
         dataIndex: 'name',
         width: 100,
         sorter: tableSorter(1),