feat: instances on worker

2025-09-16 11:26:17 +08:00
parent 949eded4ee
commit 43936e21d9
21 changed files with 589 additions and 184 deletions
@@ -0,0 +1,125 @@
+import { FilterBar } from '@/components/page-tools';
+import useTableFetch from '@/hooks/use-table-fetch';
+import { queryClusterList } from '@/pages/cluster-management/apis';
+import {
+  MODEL_INSTANCE_API,
+  queryModelsInstances
+} from '@/pages/llmodels/apis';
+import { InstanceStatusMap } from '@/pages/llmodels/config';
+import { ModelInstanceListItem } from '@/pages/llmodels/config/types';
+import { useIntl } from '@umijs/max';
+import { ConfigProvider, Empty, Table } from 'antd';
+import React, { useEffect, useState } from 'react';
+import useInstanceColumns from '../hooks/use-instances-columns';
+
+const statusList = Object.entries(InstanceStatusMap).map(([key, value]) => ({
+  label: key,
+  value: value
+}));
+
+const WorkerDetailContent: React.FC<{ worker_id: number | undefined }> = ({
+  worker_id
+}) => {
+  const {
+    dataSource,
+    queryParams,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleQueryChange,
+    handleNameChange
+  } = useTableFetch<ModelInstanceListItem>({
+    fetchAPI: queryModelsInstances,
+    polling: false,
+    API: MODEL_INSTANCE_API,
+    defaultQueryParams: {
+      worker_id
+    }
+  });
+
+  const intl = useIntl();
+  const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
+    []
+  );
+
+  const getClusterList = async () => {
+    try {
+      const res = await queryClusterList({ page: 1, perPage: 100 });
+      const list = res.items?.map((item) => ({
+        label: item.name,
+        value: item.id
+      }));
+      setClusterList(list || []);
+    } catch (error) {
+      setClusterList([]);
+    }
+  };
+
+  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>;
+  };
+
+  const handleSelectChange = (value: string) => {
+    handleQueryChange({ state: value });
+  };
+
+  const columns = useInstanceColumns({
+    clusterList
+  });
+
+  useEffect(() => {
+    console.log('columns changed!');
+  }, [columns]);
+
+  useEffect(() => {
+    getClusterList();
+  }, []);
+
+  return (
+    <>
+      <FilterBar
+        marginBottom={22}
+        marginTop={0}
+        buttonText={intl.formatMessage({ id: 'resources.button.create' })}
+        handleSearch={handleSearch}
+        handleSelectChange={handleSelectChange}
+        handleInputChange={handleNameChange}
+        showDeleteButton={false}
+        showPrimaryButton={false}
+        selectHolder={intl.formatMessage({ id: 'resources.filter.status' })}
+        showSelect={true}
+        selectOptions={statusList}
+        width={{ input: 300 }}
+      ></FilterBar>
+      <ConfigProvider renderEmpty={renderEmpty}>
+        <Table
+          columns={columns}
+          style={{ width: '100%' }}
+          tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
+          dataSource={dataSource.dataList}
+          loading={dataSource.loading}
+          rowKey="id"
+          onChange={handleTableChange}
+          pagination={{
+            showSizeChanger: true,
+            pageSize: queryParams.perPage,
+            current: queryParams.page,
+            total: dataSource.total,
+            hideOnSinglePage: queryParams.perPage === 10,
+            onChange: handlePageChange
+          }}
+        ></Table>
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default WorkerDetailContent;