feat: add cluster detail

src/pages/resources/components/gpus.tsx

@@ -98,7 +98,7 @@ const GPUList: React.FC = () => {
           handleSelectChange={handleClusterChange}
           selectOptions={clusterList}
           showSelect
-          width={{ input: 200 }}
+          widths={{ input: 200 }}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
@@ -110,6 +110,7 @@ const GPUList: React.FC = () => {
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             rowKey="id"
+            scroll={{ x: true }}
             onChange={handleTableChange}
             pagination={{
               showSizeChanger: true,

src/pages/resources/components/worker-detail-content.tsx

@@ -95,7 +95,7 @@ const WorkerDetailContent: React.FC<{ worker_id: number | undefined }> = ({
         selectHolder={intl.formatMessage({ id: 'resources.filter.status' })}
         showSelect={true}
         selectOptions={statusList}
-        width={{ input: 300 }}
+        widths={{ input: 300 }}
       ></FilterBar>
       <ConfigProvider renderEmpty={renderEmpty}>
         <Table

src/pages/resources/components/workers.tsx

@@ -26,7 +26,19 @@ import useWorkerMaintenance from '../hooks/use-worker-maintenance';
 import UpdateLabels from './update-labels';
 import WorkerDetailModal from './worker-detail-modal';
 
-const Workers: React.FC = () => {
+const Workers: React.FC<{
+  cluster: ClusterListItem;
+  showSelect?: boolean;
+  showAddButton?: boolean;
+  widths?: { input: number };
+  sourceType?: string;
+}> = ({
+  cluster,
+  showSelect = true,
+  showAddButton = true,
+  widths = { input: 200 },
+  sourceType = 'resources'
+}) => {
   const {
     dataSource,
     rowSelection,
@@ -48,7 +60,10 @@ const Workers: React.FC = () => {
     events: ['UPDATE', 'DELETE', 'INSERT'],
     contentForDelete: 'resources.worker',
     watch: true,
-    API: WORKERS_API
+    API: WORKERS_API,
+    defaultQueryParams: {
+      cluster_id: cluster?.id || undefined
+    }
   });
   const { TerminalPanel, terminals, handleAddTerminal } = useTerminalTabs();
   const { MaintenanceModal, handleStopMaintenance, setOpenStatus } =
@@ -233,7 +248,8 @@ const Workers: React.FC = () => {
     loadend: dataSource.loadend,
     firstLoad: extraStatus.firstLoad,
     sortOrder,
-    handleSelect
+    handleSelect,
+    sourceType
   });
 
   useEffect(() => {
@@ -245,7 +261,7 @@ const Workers: React.FC = () => {
     <>
       <PageBox>
         <FilterBar
-          showSelect={true}
+          showSelect={showSelect}
           selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
           marginBottom={22}
           marginTop={30}
@@ -253,11 +269,11 @@ const Workers: React.FC = () => {
           handleDeleteByBatch={handleDeleteBatch}
           handleSearch={handleSearch}
           handleSelectChange={handleClusterChange}
-          handleClickPrimary={handleOnAddWorker}
+          handleClickPrimary={showAddButton ? handleOnAddWorker : undefined}
           handleInputChange={handleNameChange}
           rowSelection={rowSelection}
           selectOptions={clusterData.list}
-          width={{ input: 200 }}
+          widths={widths}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
@@ -269,6 +285,7 @@ const Workers: React.FC = () => {
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
             rowKey="id"
+            scroll={{ x: true }}
             onChange={handleTableChange}
             rowSelection={rowSelection}
             pagination={{

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

@@ -232,6 +232,7 @@ const useWorkerColumns = ({
   loadend,
   firstLoad,
   sortOrder,
+  sourceType,
   handleSelect
 }: {
   clusterData: {
@@ -241,6 +242,7 @@ const useWorkerColumns = ({
   loadend: boolean;
   firstLoad: boolean;
   sortOrder: string[];
+  sourceType: string;
   handleSelect: (action: string, record: ListItem) => void;
 }): ColumnsType<ListItem> => {
   const intl = useIntl();
@@ -272,7 +274,10 @@ const useWorkerColumns = ({
   return useMemo<ColumnsType<ListItem>>(
     () => [
       {
-        title: intl.formatMessage({ id: 'common.table.name' }),
+        title:
+          sourceType === 'resources'
+            ? intl.formatMessage({ id: 'common.table.name' })
+            : intl.formatMessage({ id: 'resources.table.workername' }),
         dataIndex: 'name',
         width: 100,
         sorter: tableSorter(1),
@@ -291,6 +296,7 @@ const useWorkerColumns = ({
       {
         title: intl.formatMessage({ id: 'clusters.title' }),
         dataIndex: 'cluster_id',
+        hidden: sourceType === 'cluster',
         render: (id: number) => (
           <AutoTooltip ghost maxWidth={240}>
             {_.get(clusterData.data, id, '')}
@@ -402,7 +408,7 @@ const useWorkerColumns = ({
         )
       }
     ],
-    [intl, sortOrder, clusterData, loadend, firstLoad, handleSelect]
+    [intl, sourceType, sortOrder, clusterData, loadend, firstLoad, handleSelect]
   );
 };