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

style: providers selection, remove fallback form

Browse Source
This commit is contained in:
jialin
2026-02-03 18:21:08 +08:00
parent 5fcdf4ea00
commit 15cd9795d5
18 changed files with 200 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/maas-provider/components/provider-models.tsx
+16 -4
View File
@@ -1,3 +1,4 @@
import AutoTooltip from '@/components/auto-tooltip';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import {
CheckCircleOutlined,
@@ -54,17 +55,28 @@ const ProviderModels: React.FC<ProviderModelProps> = () => {
<Tag
key={model.name}
icon={iconsMap[model.status]}
variant="outlined"
styles={{
root: {
display: 'flex',
alignItems: 'center'
}
}}
color={
model.status === 'accessible'
? 'success'
: model.status === 'inaccessible'
? 'red'
: 'gray'
: 'default'
}
>
{model.name}
<span style={{ marginLeft: 8 }}>
{categoryConfig[model.type]?.icon}
<span className="flex-center">
<AutoTooltip ghost maxWidth={'120px'}>
{model.name}
</AutoTooltip>
<span style={{ marginLeft: 8 }}>
{categoryConfig[model.type]?.icon}
</span>
</span>
</Tag>
))}
src/pages/maas-provider/config/index.ts
+4 -39
View File
@@ -1,47 +1,12 @@
import icons from '@/components/icon-font/icons';
import { StatusMaps } from '@/config';
import { StatusType } from '@/config/types';
import { ProviderEnum } from './providers';
export { maasProviderLabelMap, maasProviderOptions } from './providers';
export type maasProviderType =
| 'doubao'
| 'qwen'
| 'openai'
| 'deepseek'
| 'anthropic';
export type maasProviderType = ProviderEnum[keyof ProviderEnum];
export const maasProviderValueMap = {
Doubao: 'doubao',
Qwen: 'qwen',
OpenAI: 'openai',
Deepseek: 'deepseek',
Anthropic: 'anthropic'
};
export const maasProviderLabelMap = {
[maasProviderValueMap.Doubao]: 'Doubao',
[maasProviderValueMap.Qwen]: 'Qwen',
[maasProviderValueMap.OpenAI]: 'OpenAI',
[maasProviderValueMap.Deepseek]: 'DeepSeek',
[maasProviderValueMap.Anthropic]: 'Anthropic'
};
export const providerIconsMap = {
[maasProviderValueMap.Doubao]: 'icon-doubao',
[maasProviderValueMap.Qwen]: 'icon-qwen',
[maasProviderValueMap.OpenAI]: 'icon-openai',
[maasProviderValueMap.Deepseek]: 'icon-deepseek',
[maasProviderValueMap.Anthropic]: 'icon-anthropic'
};
export const maasProviderOptions = Object.entries(maasProviderValueMap).map(
([key, value]) => ({
label: maasProviderLabelMap[value],
value: value,
key: value,
locale: false,
icon: providerIconsMap[value]
})
);
export const maasProviderValueMap = ProviderEnum;
export const ProviderStatusValueMap: Record<string, string> = {
Ready: 'ready',
src/pages/maas-provider/config/mock.ts
+9 -5
View File
@@ -9,7 +9,8 @@ export const mockDataList: MaasProviderItem[] = [
models: 5,
state_message: '',
provider: 'doubao',
proxy_config: {},
api_tokens: ['token1', 'token2'],
proxy_url: 'http://proxy.example.com',
builtIn: false
},
{
@@ -19,7 +20,8 @@ export const mockDataList: MaasProviderItem[] = [
state: 'inactive',
state_message: 'Provider is inactive',
provider: 'qwen',
proxy_config: false,
proxy_url: 'http://proxy2.example.com',
builtIn: true
},
{
@@ -28,7 +30,8 @@ export const mockDataList: MaasProviderItem[] = [
name: 'OpenAI',
state: 'ready',
state_message: '',
proxy_config: null,
proxy_url: null,
api_tokens: ['tokenA'],
provider: 'openai',
builtIn: false
},
@@ -39,7 +42,8 @@ export const mockDataList: MaasProviderItem[] = [
state: 'ready',
state_message: '',
provider: 'deepseek',
proxy_config: null,
proxy_url: null,
api_tokens: ['tokenX', 'tokenY'],
builtIn: false
},
{
@@ -49,7 +53,7 @@ export const mockDataList: MaasProviderItem[] = [
state: 'inactive',
state_message: 'Provider is inactive',
provider: 'anthropic',
proxy_config: {},
proxy_url: {},
builtIn: true
}
];
src/pages/maas-provider/config/providers.ts
+56
View File
@@ -0,0 +1,56 @@
export enum ProviderEnum {
AI360 = 'ai360',
AZURE = 'azure',
BAICHUAN = 'baichuan',
BAIDU = 'baidu',
BEDROCK = 'bedrock',
CLAUDE = 'claude',
CLOUDFLARE = 'cloudflare',
COHERE = 'cohere',
COZE = 'coze',
DEEPL = 'deepl',
DEEPSEEK = 'deepseek',
DIFY = 'dify',
DOUBAO = 'doubao',
FIREWORKS = 'fireworks',
GEMINI = 'gemini',
GITHUB = 'github',
GROK = 'grok',
GROQ = 'groq',
HUNYUAN = 'hunyuan',
LONGCAT = 'longcat',
MINIMAX = 'minimax',
MISTRAL = 'mistral',
MOONSHOT = 'moonshot',
OLLAMA = 'ollama',
OPENAI = 'openai',
OPENROUTER = 'openrouter',
QWEN = 'qwen',
SPARK = 'spark',
STEPFUN = 'stepfun',
TOGETHERAI = 'together-ai',
TRITON = 'triton',
YI = 'yi',
ZHIPUAI = 'zhipuai'
}
// generate provider list: {label: string;value:string}[]
export const maasProviderOptions = Object.entries(ProviderEnum).map(
([key, value]) => ({
locale: false,
label: key,
value: value,
key: value
})
);
// generate provider value to label map
export const maasProviderLabelMap: Record<string, string> = Object.entries(
ProviderEnum
).reduce(
(acc, [key, value]) => {
acc[value] = key;
return acc;
},
{} as Record<string, string>
);
src/pages/maas-provider/config/types.ts
+22 -6
View File
@@ -2,15 +2,31 @@ import { maasProviderType } from '.';
export interface MaasProviderItem {
id: number;
created_at: string;
updated_at: string;
deleted_at: string;
name: string;
models?: number;
state: string;
state_message: string;
provider: maasProviderType;
proxy_config?: any;
builtIn: boolean;
description: string;
api_tokens: string[];
timeout: number;
config: {
type: maasProviderType;
[key: string]: any;
};
support_models: unknown[];
proxy_url: string;
proxy_timeout: number;
builtin: boolean;
provider_model_count: number;
api_token_count: number;
}
export interface FormData {
name: string;
description: string;
api_tokens: string[];
config: {
type: maasProviderType;
[key: string]: any;
};
}
src/pages/maas-provider/forms/basic.tsx
+7 -4
View File
@@ -1,6 +1,8 @@
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { maasProviderOptions } from '../config/providers';
import { FormData } from '../config/types';
const Basic = () => {
@@ -8,7 +10,7 @@ const Basic = () => {
const form = Form.useFormInstance<FormData>();
return (
<>
<Form.Item name="name" data-field="name">
<Form.Item<FormData> name="name" data-field="name">
<SealInput.Input
required
label={intl.formatMessage({
@@ -16,14 +18,15 @@ const Basic = () => {
})}
/>
</Form.Item>
<Form.Item name="provider" hidden>
<SealInput.Input
<Form.Item<FormData> name={['config', 'type']}>
<SealSelect
options={maasProviderOptions}
label={intl.formatMessage({
id: 'providers.table.providerName'
})}
/>
</Form.Item>
<Form.Item name="description">
<Form.Item<FormData> name="description">
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({
src/pages/maas-provider/hooks/use-provider-columns.tsx
+20 -17
View File
@@ -1,20 +1,16 @@
// 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 { StatusMaps } from '@/config';
import { tableSorter } from '@/config/settings';
import { CheckCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import {
maasProviderLabelMap,
providerIconsMap,
ProviderStatus,
rowActionList
} from '../config';
import { maasProviderLabelMap, rowActionList } from '../config';
import { MaasProviderItem } from '../config/types';
const useProviderColumns = (
@@ -35,7 +31,7 @@ const useProviderColumns = (
<AutoTooltip ghost title={text}>
{text}
</AutoTooltip>
{record.builtIn && (
{record.builtin && (
<Tag color="blue" style={{ marginLeft: 8 }}>
BuiltIn
</Tag>
@@ -50,10 +46,6 @@ const useProviderColumns = (
span: 4,
render: (value: string) => (
<>
<IconFont
type={providerIconsMap[value]}
style={{ marginRight: 8, fontSize: 16 }}
></IconFont>
<AutoTooltip ghost minWidth={20}>
{maasProviderLabelMap[value]}
</AutoTooltip>
@@ -69,19 +61,30 @@ const useProviderColumns = (
},
{
title: intl.formatMessage({ id: 'providers.table.proxy' }),
dataIndex: 'proxy_config',
dataIndex: 'proxy_url',
span: 3,
render: (value: number) => <span>{value ? 'Configured' : 'None'}</span>
render: (value: number) => (
<span>
{value ? (
<CheckCircleOutlined
style={{ color: 'var(--ant-color-success)' }}
/>
) : (
'-'
)}
</span>
)
},
{
title: 'Token Settings',
dataIndex: 'tokens',
dataIndex: 'api_tokens',
span: 3,
render: (value: string, record: MaasProviderItem) => (
<StatusTag
statusValue={{
status: ProviderStatus['ready'],
text: 'Configured',
status:
value?.length > 0 ? StatusMaps.success : StatusMaps.inactive,
text: value?.length > 0 ? 'Configured' : 'Unconfigured',
message: ''
}}
/>
src/pages/maas-provider/index.tsx
-1
View File
@@ -166,7 +166,6 @@ const MaasProvider: React.FC = () => {
<>
<PageBox>
<FilterBar
actionType="dropdown"
showSelect={false}
marginBottom={22}
marginTop={30}