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

fix: backend selection

Browse Source
This commit is contained in:
jialin
2026-01-30 20:48:55 +08:00
committed by Lawrence Li
parent a2be7f6b36
commit 4000aacb2c
27 changed files with 317 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/backends/components/add-modal.tsx
+7 -3
View File
@@ -11,6 +11,7 @@ import React, { useEffect, useId, useRef, useState } from 'react';
import styled from 'styled-components';
import ColumnWrapper from '../../_components/column-wrapper';
import {
BackendSourceValueMap,
builtInBackendFields,
customBackendFields,
json2Yaml
@@ -55,7 +56,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
'image_name',
'run_command',
'custom_framework',
'entrypoint'
'entrypoint',
'environment'
];
// remove '-custom' suffix from version_no in currentData, when action is EDIT
@@ -64,7 +66,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
data.version_configs = Object.entries(data.version_configs || {}).reduce(
(acc, [key, value]) => {
const version = key.replace(/-custom$/, '');
acc[version] = { ...value };
acc[version] = { ...value, backend_source: data.backend_source };
return acc;
},
{} as any
@@ -128,7 +130,9 @@ const AddModal: React.FC<AddModalProps> = (props) => {
is_default: key === values.default_version,
built_in_frameworks:
values.built_in_version_configs?.[key]?.built_in_frameworks || [],
is_built_in: true,
is_built_in:
data.is_built_in &&
data.backend_source === BackendSourceValueMap.BUILTIN,
..._.pick(values.built_in_version_configs?.[key], [
'image_name',
'run_command',
src/pages/backends/components/backend-card.tsx
+55 -38
View File
@@ -5,7 +5,7 @@ import TagWrapper from '@/components/tags-wrapper';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import Card from '@/components/templates/card';
import { useIntl } from '@umijs/max';
import { Button, Tag } from 'antd';
import { Button, Flex, Tag, Tooltip } from 'antd';
import _ from 'lodash';
import { useMemo } from 'react';
import semverCoerce from 'semver/functions/coerce';
@@ -18,7 +18,8 @@ import {
builtInBackendLogos,
customColors,
customIcons,
getGpuColor
getGpuColor,
TagColorMap
} from '../config';
import { ListItem } from '../config/types';
@@ -142,12 +143,6 @@ interface BackendCardProps {
data: ListItem;
}
const TagColorMap: Record<string, string> = {
[BackendSourceValueMap.CUSTOM]: 'purple',
[BackendSourceValueMap.BUILTIN]: 'geekblue',
[BackendSourceValueMap.COMMUNITY]: 'cyan'
};
const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
const intl = useIntl();
@@ -254,22 +249,65 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
};
const renderRecommendModels = () => {
const recommnadedModels = data.recommend_models || [];
if (recommnadedModels.length === 0) {
const recommendedModels = data.recommend_models || [];
if (recommendedModels.length === 0) {
return null;
}
return (
<div className="flex-center">
<span className="dot"></span>
<TagWrapper
gap={8}
dataList={recommnadedModels}
renderTag={renderModel}
></TagWrapper>
<Tooltip
title={
<Flex gap={4} wrap="wrap">
{recommendedModels.map((item) => (
<Tag style={{ margin: 0 }} key={item}>
{item}
</Tag>
))}
</Flex>
}
>
<span>
<ThemeTag color="default">
{intl.formatMessage({ id: 'backend.recommendModels' })}
</ThemeTag>
</span>
</Tooltip>
</div>
);
};
const renderSource = () => {
const source = data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN] || ''
: BackendSourceLabelMap[data.backend_source] || '';
if (!source) {
return null;
}
return (
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: source
})}
</ThemeTag>
);
};
return (
<StyledCard
onClick={handleClick}
@@ -308,28 +346,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
<IconFont type="icon-source" className="icon" />
<span>Source:</span>
</span>
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN]
: BackendSourceLabelMap[data.backend_source]
})}
</ThemeTag>
{renderSource()}
{data.backend_source === BackendSourceValueMap.COMMUNITY && (
<>
<ThemeTag
@@ -349,7 +366,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
</>
)}
</InfoItem>
{/* {renderRecommendModels()} */}
{renderRecommendModels()}
</SourceWrapper>
{renderFrameworks()}
</Content>
src/pages/backends/components/version-info-modal.tsx
+12 -5
View File
@@ -2,7 +2,9 @@ import ScrollerModal from '@/components/scroller-modal';
import { PlusOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { BackendSourceValueMap } from '../config';
import { VersionListItem } from '../config/types';
import VersionInfo from '../forms/version-info';
@@ -26,10 +28,11 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
if (open && currentData) {
// add is_built_in field to built_in_version_configs
const builtInVersions = currentData.built_in_version_configs || {};
for (const key in builtInVersions) {
if (builtInVersions?.hasOwnProperty(key)) {
builtInVersions[key].is_built_in = true;
builtInVersions[key].is_built_in =
currentData.backend_source === BackendSourceValueMap.BUILTIN &&
currentData.is_built_in;
}
}
@@ -41,9 +44,13 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
const versionList: VersionListItem[] = Object.entries(versions).map(
([key, value]: [string, any]) => ({
version_no: key,
image_name: value.image_name,
run_command: value.run_command,
entrypoint: value.entrypoint,
..._.pick(value, [
'image_name',
'run_command',
'entrypoint',
'environment',
'backend_source'
]),
is_default: key === currentData.default_version,
availableFrameworks: [
...(value.built_in_frameworks || []),
src/pages/backends/config/index.ts
+8 -2
View File
@@ -43,6 +43,12 @@ export const BackendSourceLabelMap: Record<string, string> = {
[BackendSourceValueMap.USER_DEFINED]: 'models.form.backend.custom'
};
export const TagColorMap: Record<string, string> = {
[BackendSourceValueMap.CUSTOM]: 'purple',
[BackendSourceValueMap.BUILTIN]: 'geekblue',
[BackendSourceValueMap.COMMUNITY]: 'cyan'
};
export const backendActions = [
{
label: 'common.button.edit',
@@ -63,7 +69,7 @@ export const backendActions = [
value: 'enable',
key: 'enable',
locale: true,
icon: icons.Yaml,
icon: icons.Charger,
show: (record: any) =>
!record.enabled &&
record.backend_source === BackendSourceValueMap.COMMUNITY
@@ -73,7 +79,7 @@ export const backendActions = [
value: 'disable',
key: 'disable',
locale: true,
icon: icons.Yaml,
icon: icons.Disabled,
show: (record: any) =>
record.enabled &&
record.backend_source === BackendSourceValueMap.COMMUNITY
src/pages/backends/config/types.ts
+4
View File
@@ -7,6 +7,8 @@ export interface VersionConfigs {
entrypoint?: string;
version_no?: string;
is_built_in?: boolean;
backend_source?: string;
environment: Record<string, any>;
}
export interface VersionListItem extends VersionConfigs {
@@ -24,6 +26,8 @@ export interface FormData {
allowed_proxy_uris?: string[];
content?: string;
enabled?: boolean;
backend_source?: string;
default_environment?: Record<string, any>;
}
export interface ListItem extends FormData {
src/pages/backends/forms/basic.tsx
+29 -1
View File
@@ -1,3 +1,4 @@
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
@@ -6,7 +7,8 @@ import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import React, { useEffect } from 'react';
import { BackendSourceValueMap } from '../config';
import { FormData, ListItem } from '../config/types';
type AddModalProps = {
@@ -17,6 +19,17 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const form = Form.useFormInstance();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const defaultEnvs = Form.useWatch('default_environment', form);
const handleEnviromentVarsChange = (labels: Record<string, any>) => {
form.setFieldValue('env', labels);
};
useEffect(() => {
if (action === PageAction.CREATE) {
form.setFieldValue('backend_source', BackendSourceValueMap.CUSTOM);
}
}, [action]);
return (
<>
@@ -37,6 +50,11 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
required
></SealInput.Input>
</Form.Item>
{action === PageAction.CREATE && (
<Form.Item<FormData> hidden name="backend_source">
<SealInput.Input></SealInput.Input>
</Form.Item>
)}
{!currentData?.is_built_in && (
<>
<Form.Item<FormData>
@@ -86,6 +104,16 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
})}
></ListInput>
</Form.Item>
<Form.Item<FormData> name="default_environment">
<LabelSelector
label={intl.formatMessage({
id: 'backend.form.defaultEnvironment'
})}
labels={defaultEnvs}
btnText={intl.formatMessage({ id: 'common.button.vars' })}
onChange={handleEnviromentVarsChange}
></LabelSelector>
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
src/pages/backends/forms/version-info.tsx
+40 -10
View File
@@ -5,7 +5,13 @@ import { useIntl } from '@umijs/max';
import { Empty } from 'antd';
import { useState } from 'react';
import styled from 'styled-components';
import { frameworks, getGpuColor } from '../config';
import {
BackendSourceLabelMap,
BackendSourceValueMap,
frameworks,
getGpuColor,
TagColorMap
} from '../config';
import { VersionListItem } from '../config/types';
const ItemWrapper = styled.div`
@@ -76,19 +82,43 @@ interface VersionItemProps {
export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
const intl = useIntl();
const renderSource = () => {
console.log('data.is_built_in', data.is_built_in);
const source = data.is_built_in
? BackendSourceLabelMap[BackendSourceValueMap.BUILTIN] || ''
: BackendSourceLabelMap[data.backend_source || ''] || '';
if (!source) {
return null;
}
return (
<ThemeTag
color={
TagColorMap[
data.is_built_in
? BackendSourceValueMap.BUILTIN
: data.backend_source || ''
]
}
className="font-400"
variant="outlined"
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{intl.formatMessage({
id: source
})}
</ThemeTag>
);
};
return (
<ItemWrapper>
<div className="title">
<span>{data.version_no}</span>
{data.is_built_in && (
<ThemeTag
color="geekblue"
className="font-400"
style={{ marginRight: 0 }}
>
{intl.formatMessage({ id: 'backend.builtin' })}
</ThemeTag>
)}
{renderSource()}
{!data.is_built_in && data.is_default && (
<ThemeTag
color="geekblue"
src/pages/backends/forms/versions-config.tsx
+38 -6
View File
@@ -1,4 +1,5 @@
import CollapsibleContainer from '@/components/collapse-container';
import LabelSelector from '@/components/label-selector';
import BaseSelect from '@/components/seal-form/base/select';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
@@ -75,7 +76,8 @@ const VersionsForm: React.FC<AddModalProps> = ({
run_command: '',
entrypoint: '',
isBuiltin: false,
is_default: false
is_default: false,
environment: {}
}
];
@@ -102,7 +104,8 @@ const VersionsForm: React.FC<AddModalProps> = ({
run_command: '',
entrypoint: '',
isBuiltin: false,
is_default: false
is_default: false,
environment: {}
};
form.setFieldValue('version_configs', [...versions, newVersion]);
};
@@ -136,6 +139,25 @@ const VersionsForm: React.FC<AddModalProps> = ({
setDefaultVersion(value);
};
const handleEnviromentVarsChange = (
envs: Record<string, any>,
name: number
) => {
const versions = form.getFieldValue('version_configs') || [];
const updatedVersions = versions.map((version: any, idx: number) => {
if (idx === name) {
return {
...version,
environment: {
...envs
}
};
}
return version;
});
form.setFieldValue('version_configs', updatedVersions);
};
useEffect(() => {
const versions = form.getFieldValue('version_configs') || [];
@@ -227,6 +249,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
{ add, remove }
) => {
const versionConfigs = form.getFieldValue('version_configs');
console.log('versionConfigs', versionConfigs);
return fields?.map(({ key, name }) => (
<div
key={name}
@@ -356,10 +379,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
})}
></SealInput.TextArea>
</Form.Item>
<Form.Item
name={[name, 'run_command']}
style={{ marginBottom: 0 }}
>
<Form.Item name={[name, 'run_command']}>
<SealTextArea
allowClear
alwaysFocus={true}
@@ -376,6 +396,18 @@ const VersionsForm: React.FC<AddModalProps> = ({
label={intl.formatMessage({ id: 'backend.runCommand' })}
></SealTextArea>
</Form.Item>
<Form.Item name={[name, 'environment']}>
<LabelSelector
label={intl.formatMessage({
id: 'models.form.env'
})}
labels={versionConfigs.environment}
btnText={intl.formatMessage({ id: 'common.button.vars' })}
onChange={(envs) =>
handleEnviromentVarsChange(envs, name)
}
></LabelSelector>
</Form.Item>
</CollapsibleContainer>
</div>
));
src/pages/backends/index.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { useIntl } from '@umijs/max';
@@ -122,7 +123,7 @@ const BackendList = () => {
const handleAddBackend = () => {
setOpenModalStatus({
open: true,
action: 'create'
action: PageAction.CREATE
});
};
@@ -161,6 +162,7 @@ const BackendList = () => {
enabled: item.action === 'enable'
}
});
handleSearch();
}
};