fix: show cluster in table

src/pages/gpu-service/instances/hooks/use-instances-columns.tsx

@@ -70,11 +70,13 @@ const getConnectEntries = (record: ListItem): ConnectEntry[] => {
 
 interface ColumnsHookProps {
   handleSelect: (val: string, record: ListItem) => void;
+  clusterList: Global.BaseOption<string>[];
   sortOrder: string[];
 }
 
 const useInstancesColumns = ({
   handleSelect,
+  clusterList,
   sortOrder
 }: ColumnsHookProps): ColumnsType<ListItem> => {
   const intl = useIntl();
@@ -242,6 +244,15 @@ const useInstancesColumns = ({
           </div>
         )
       },
+      {
+        title: intl.formatMessage({ id: 'clusters.title' }),
+        dataIndex: 'clusterId',
+        render: (id: number) => (
+          <AutoTooltip ghost maxWidth={240}>
+            {_.find(clusterList, { value: id })?.label || id || '-'}
+          </AutoTooltip>
+        )
+      },
       {
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
@@ -271,7 +282,7 @@ const useInstancesColumns = ({
         )
       }
     ];
-  }, [handleSelect, sortOrder, intl]);
+  }, [handleSelect, sortOrder, clusterList, intl]);
 };
 
 export default useInstancesColumns;

src/pages/gpu-service/instances/index.tsx

@@ -1,11 +1,13 @@
 import { PageAction } from '@/config';
 import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
 import useTableFetch from '@/hooks/use-table-fetch';
+import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
 import { DeleteModal, FilterBar, IconFont, NoResult } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { ConfigProvider, message, Modal, Table } from 'antd';
 import _ from 'lodash';
+import { useEffect } from 'react';
 import PageBox from '../../_components/page-box';
 import {
   deleteGPUServiceInstance,
@@ -66,6 +68,15 @@ const GPUService: React.FC = () => {
     closeViewEventsModal,
     openViewEventsModalStatus
   } = useViewEvents();
+  const {
+    fetchClusterList,
+    cancelRequest: cancelClusterRequest,
+    clusterList
+  } = useQueryClusterList();
+
+  useEffect(() => {
+    fetchClusterList({ page: -1 });
+  }, []);
 
   const handleModalOk = async (data: FormData) => {
     try {
@@ -142,6 +153,7 @@ const GPUService: React.FC = () => {
 
   const columns = useInstancesColumns({
     handleSelect,
+    clusterList,
     sortOrder
   });