root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: provider lsit

Browse Source
This commit is contained in:
jialin
2026-02-03 18:21:08 +08:00
parent 2dfdd4a0d9
commit 34331063eb
16 changed files with 135 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+1 -1
View File
@@ -106,7 +106,7 @@ export default [
component: './llmodels/index'
},
{
name: 'provider',
name: 'providers',
path: '/models/providers',
key: 'modelProviders',
icon: 'icon-extension-outline',
src/components/page-tools/index.tsx
+1 -3
View File
@@ -157,9 +157,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
actionType === 'dropdown' ? (
<DropDownActions
styles={{
root: {
minWidth: 140
}
root: { minWidth: '125px' }
}}
menu={{
items: actionItems,
src/locales/en-US/menu.ts
+1
View File
@@ -17,6 +17,7 @@ export default {
'menu.models.benchmark': 'Benchmarks',
'menu.models.benchmarkDetail': 'Benchmark Details',
'menu.models.provider': 'Provider',
'menu.models.providers': 'Provider',
'menu.modelCatalog': 'Catalog',
'menu.resources': 'Resources',
'menu.apikeys': 'API Keys',
src/locales/en-US/provider.ts
+6
View File
@@ -0,0 +1,6 @@
export default {
'providers.title': 'Providers',
'providers.button.add': 'Add Provider',
'providers.table.providerName': 'Provider',
'providers.table.modelsCounts': 'Models Count'
};
src/locales/ja-JP/menu.ts
+2 -1
View File
@@ -16,7 +16,7 @@ export default {
'menu.models.benchmark': 'Benchmarks',
'menu.models.benchmarkDetail': 'Benchmark Details',
'menu.modelCatalog': 'カタログ',
'menu.models.provider': 'Provider',
'menu.models.providers': 'Provider',
'menu.resources': 'リソース',
'menu.apikeys': 'APIキー',
'menu.users': 'ユーザー',
@@ -56,4 +56,5 @@ export default {
// 14. 'menu.resources.backendsList': 'Inference Backends',
// 15. 'menu.models.benchmark': 'Benchmarks',
// 15. 'menu.models.provider': 'Provider',
// 15. 'menu.models.providers': 'Provider',
// ========== End of To-Do List ==========
src/locales/ja-JP/provider.ts
+6
View File
@@ -0,0 +1,6 @@
export default {
'providers.title': 'Providers',
'providers.button.add': 'Add Provider',
'providers.table.providerName': 'Provider',
'providers.table.modelsCounts': 'Models Count'
};
src/locales/ru-RU/menu.ts
+5
View File
@@ -16,6 +16,7 @@ export default {
'menu.models.benchmark': 'Benchmarks',
'menu.models.benchmarkDetail': 'Benchmark Details',
'menu.models.provider': 'Provider',
'menu.models.providers': 'Provider',
'menu.modelCatalog': 'Каталог',
'menu.resources': 'Ресурсы',
'menu.apikeys': 'API-ключи',
@@ -40,7 +41,11 @@ export default {
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
<<<<<<< HEAD
// 1. 'menu.models.benchmark': 'Benchmarks',
// 2. 'menu.models.benchmarkDetail': 'Benchmark Details',
// 1. 'menu.models.provider': 'Provider',
=======
// 1. 'menu.models.providers': 'Provider',
>>>>>>> ddf1a270 (feat: provider lsit)
// ========== End of To-Do List ==========
src/locales/ru-RU/provider.ts
+6
View File
@@ -0,0 +1,6 @@
export default {
'providers.title': 'Providers',
'providers.button.add': 'Add Provider',
'providers.table.providerName': 'Provider',
'providers.table.modelsCounts': 'Models Count'
};
src/locales/zh-CN/menu.ts
+1
View File
@@ -16,6 +16,7 @@ export default {
'menu.models.benchmark': '基准测试',
'menu.models.benchmarkDetail': '基准测试详情',
'menu.models.provider': '渠道',
'menu.models.providers': '渠道',
'menu.modelCatalog': '模型库',
'menu.models.catalog': '模型库',
'menu.resources': '资源',
src/locales/zh-CN/provider.ts
+6
View File
@@ -0,0 +1,6 @@
export default {
'providers.title': '渠道',
'providers.button.add': '添加渠道',
'providers.table.providerName': '渠道',
'providers.table.modelsCounts': '模型数量'
};
src/pages/maas-provider/components/provider-models.tsx
+3 -1
View File
@@ -1,7 +1,9 @@
import React from 'react';
interface ProviderModelProps {
name: string;
dataList: any[];
provider: string;
providerId: number;
}
const ProviderModels: React.FC<ProviderModelProps> = () => {
src/pages/maas-provider/config/index.ts
+8 -5
View File
@@ -25,7 +25,7 @@ export const maasProviderLabelMap = {
[maasProviderValueMap.Anthropic]: 'Anthropic'
};
export const IconsMap = {
export const providerIconsMap = {
[maasProviderValueMap.Doubao]: 'icon-doubao',
[maasProviderValueMap.Qwen]: 'icon-qwen',
[maasProviderValueMap.OpenAI]: 'icon-openai',
@@ -33,10 +33,13 @@ export const IconsMap = {
[maasProviderValueMap.Anthropic]: 'icon-anthropic'
};
export const maasProviderOptions = Object.keys(maasProviderValueMap).map(
(key) => ({
label: maasProviderLabelMap[key],
value: maasProviderValueMap[key as keyof typeof maasProviderValueMap]
export const maasProviderOptions = Object.entries(maasProviderValueMap).map(
([key, value]) => ({
label: maasProviderLabelMap[value],
value: value,
key: value,
locale: false,
icon: providerIconsMap[value]
})
);
src/pages/maas-provider/config/mock.ts
+50
View File
@@ -0,0 +1,50 @@
import { MaasProviderItem } from '../config/types';
// mock data for MaasProviderItem 5 items
export const mockDataList: MaasProviderItem[] = [
{
id: 1,
name: 'Doubao',
state: 'Ready',
models: 5,
state_message: '',
provider: 'doubao',
builtIn: false
},
{
id: 2,
models: 3,
name: 'Qwen',
state: 'Inactive',
state_message: 'Provider is inactive',
provider: 'qwen',
builtIn: true
},
{
id: 3,
models: 8,
name: 'OpenAI',
state: 'Ready',
state_message: '',
provider: 'openai',
builtIn: false
},
{
id: 4,
models: 2,
name: 'Deepseek',
state: 'Ready',
state_message: '',
provider: 'deepseek',
builtIn: false
},
{
id: 5,
models: 4,
name: 'Anthropic',
state: 'Inactive',
state_message: 'Provider is inactive',
provider: 'anthropic',
builtIn: true
}
];
src/pages/maas-provider/config/types.ts
+2
View File
@@ -3,9 +3,11 @@ import { maasProviderType } from '.';
export interface MaasProviderItem {
id: number;
name: string;
models?: number;
state: string;
state_message: string;
provider: maasProviderType;
builtIn: boolean;
}
export interface FormData {
src/pages/maas-provider/hooks/use-provider-columns.tsx
+24 -40
View File
@@ -1,15 +1,17 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import { SealColumnProps } from '@/components/seal-table/types';
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 { Tag } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import {
maasProviderLabelMap,
providerIconsMap,
ProviderStatus,
ProviderStatusLabelMap,
rowActionList
@@ -28,66 +30,48 @@ const useProviderColumns = (
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'name',
sorter: tableSorter(1),
span: 3,
span: 5,
render: (text: string, record: MaasProviderItem) => (
<>
<AutoTooltip ghost title={text}>
{text}
</AutoTooltip>
{record.is_default && (
<Tooltip
title={intl.formatMessage({
id: 'clusters.form.setDefault.tips'
})}
>
<StarFilled
style={{ color: 'var(--ant-gold-4)', marginLeft: 4 }}
/>
</Tooltip>
{record.builtIn && (
<Tag color="blue" style={{ marginLeft: 8 }}>
BuiltIn
</Tag>
)}
</>
)
},
{
title: intl.formatMessage({ id: 'clusters.table.provider' }),
title: intl.formatMessage({ id: 'providers.table.providerName' }),
dataIndex: 'provider',
sorter: tableSorter(2),
span: 3,
span: 4,
render: (value: string) => (
<AutoTooltip ghost minWidth={20}>
{ProviderStatusLabelMap[value]}
</AutoTooltip>
<>
<IconFont
type={providerIconsMap[value]}
style={{ marginRight: 8, fontSize: 16 }}
></IconFont>
<AutoTooltip ghost minWidth={20}>
{maasProviderLabelMap[value]}
</AutoTooltip>
</>
)
},
{
title: 'GPUs',
dataIndex: 'gpus',
span: 2,
title: intl.formatMessage({ id: 'providers.table.modelsCounts' }),
dataIndex: 'models',
span: 3,
sorter: tableSorter(3),
render: (value: number) => <span>{value}</span>
},
{
title: intl.formatMessage({ id: 'clusters.table.deployments' }),
dataIndex: 'models',
sorter: tableSorter(4),
span: 3,
render: (value: number) => <span>{value}</span>
},
{
title: intl.formatMessage({ id: 'resources.nodes' }),
dataIndex: 'workers',
sorter: tableSorter(5),
span: 3,
render: (value: number, record: MaasProviderItem) => (
<span>
{record.ready_workers} / {record.workers}
</span>
)
},
{
title: intl.formatMessage({ id: 'common.table.status' }),
dataIndex: 'state',
span: 3,
span: 4,
render: (value: string, record: MaasProviderItem) => (
<StatusTag
statusValue={{
src/pages/maas-provider/index.tsx
+13 -4
View File
@@ -27,6 +27,8 @@ import {
} from './apis';
import AddMaasProvider from './components/add-provider-modal';
import ProviderModels from './components/provider-models';
import { maasProviderOptions } from './config';
import { mockDataList } from './config/mock';
import {
FormData,
MaasProviderItem as ListItem,
@@ -53,7 +55,7 @@ const MaasProvider: React.FC = () => {
deleteAPI: deleteProvider,
watch: true,
API: MAAS_PROVIDERS_API,
contentForDelete: 'menu.clusterManagement.clusters'
contentForDelete: 'menu.models.providers'
});
const { watchDataList: allProviderModels } =
useWatchList(PROVIDER_MODELS_API);
@@ -166,7 +168,7 @@ const MaasProvider: React.FC = () => {
<ProviderModels
dataList={list}
provider={options.parent?.provider}
clusterId={options.parent?.id}
providerId={options.parent?.id}
/>
);
};
@@ -177,16 +179,23 @@ const MaasProvider: React.FC = () => {
<>
<PageBox>
<FilterBar
actionType="dropdown"
showSelect={false}
marginBottom={22}
marginTop={30}
widths={{ input: 300 }}
buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
buttonText={intl.formatMessage({ id: 'providers.button.add' })}
rowSelection={rowSelection}
handleInputChange={handleNameChange}
handleSearch={handleSearch}
handleDeleteByBatch={handleDeleteBatch}
handleClickPrimary={handleClickDropdown}
actionItems={maasProviderOptions.map((option) => ({
...option,
icon: (
<IconFont type={option.icon as string} style={{ fontSize: 14 }} />
)
}))}
></FilterBar>
<TableContext.Provider
value={{
@@ -203,7 +212,7 @@ const MaasProvider: React.FC = () => {
renderChildren={renderChildren}
onTableSort={handleOnSortChange}
showSorterTooltip={false}
dataSource={dataSource.dataList}
dataSource={mockDataList}
loading={dataSource.loading}
loadend={dataSource.loadend}
rowSelection={rowSelection}