125 lines
3.3 KiB
TypeScript
125 lines
3.3 KiB
TypeScript
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 });
|
|
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}
|
|
selectHolder={intl.formatMessage({ id: 'resources.filter.status' })}
|
|
showSelect={true}
|
|
selectOptions={statusList}
|
|
widths={{ 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={{
|
|
size: 'middle',
|
|
showSizeChanger: true,
|
|
pageSize: queryParams.perPage,
|
|
current: queryParams.page,
|
|
total: dataSource.total,
|
|
hideOnSinglePage: queryParams.perPage === 10,
|
|
onChange: handlePageChange
|
|
}}
|
|
></Table>
|
|
</ConfigProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default WorkerDetailContent;
|