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

chore: test by api

Browse Source
This commit is contained in:
jialin
2025-10-13 14:40:26 +08:00
parent 54703c67c1
commit a5c1b8e15f
29 changed files with 683 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_c06q7b0n32v.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_gacm1yqzw1w.js'
});
export default IconFont;
src/components/templates/card.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const CardWrapper = styled.div.attrs({
})`
overflow: hidden;
display: flex;
padding: 22px;
padding: 16px 20px;
justify-content: flex-start;
align-items: center;
border: 1px solid var(--ant-color-border);
src/locales/en-US/backends.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
'backends.title': 'Backends'
};
src/locales/ja-JP/backends.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
'backends.title': 'Backends'
};
src/locales/ru-RU/backends.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
'backends.title': 'Backends'
};
src/locales/zh-CN/backends.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
'backends.title': '后端'
};
src/pages/_components/collapse-panel/index.tsx
+9 -4
View File
@@ -30,15 +30,20 @@ const CollapseInner = styled(Collapse)`
}
`;
const CollapsePanel: React.FC<{ items: CollapseProps['items'] }> = ({
items
}) => {
const CollapsePanel: React.FC<{
items: CollapseProps['items'];
activeKey: string | string[];
accordion?: boolean;
onChange?: (key: string | string[]) => void;
}> = ({ items, activeKey, accordion, onChange }) => {
return (
<CollapseInner
expandIconPosition="start"
bordered={false}
ghost
accordion
accordion={accordion}
activeKey={activeKey}
onChange={onChange}
destroyOnHidden={false}
expandIcon={({ isActive }) => (
<IconFont
src/pages/api-keys/index.tsx
+11 -1
View File
@@ -5,7 +5,12 @@ import { PageAction } from '@/config';
import HotKeys from '@/config/hotkeys';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
import {
DeleteOutlined,
PlusOutlined,
SearchOutlined,
SyncOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import {
@@ -110,6 +115,11 @@ const APIKeys: React.FC = () => {
left={
<Space>
<Input
prefix={
<SearchOutlined
style={{ color: 'var(--ant-color-text-placeholder)' }}
></SearchOutlined>
}
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
src/pages/backends/apis/index.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { request } from '@umijs/max';
import { FormData, ListItem } from '../config/types';
export const INFERENCE_BACKEND_API = '/inference-backend';
export const INFERENCE_BACKEND_API = '/inference-backends';
export const FROM_YAML_API = '/from-yaml';
src/pages/backends/components/add-modal.tsx
+77 -7
View File
@@ -1,12 +1,15 @@
import IconFont from '@/components/icon-font';
import ModalFooter from '@/components/modal-footer';
import GSDrawer from '@/components/scroller-modal/gs-drawer';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Segmented, Tabs } from 'antd';
import React, { useRef, useState } from 'react';
import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import ColumnWrapper from '../../_components/column-wrapper';
import { backendFields, json2Yaml } from '../config';
import { FormData, ListItem } from '../config/types';
import BackendForm from '../forms';
import ImportYAML from './import-yaml';
@@ -35,23 +38,28 @@ interface AddModalProps {
currentData?: ListItem; // Used when action is EDIT
onClose: () => void;
onSubmit: (values: FormData) => void;
onSubmitYaml: (values: { content: string }) => void;
open: boolean;
title?: string;
}
const AddModal: React.FC<AddModalProps> = (props) => {
const { action, currentData, onClose, onSubmit, open, title } = props;
const { action, currentData, onClose, onSubmit, onSubmitYaml, open, title } =
props;
const formRef = useRef<any>(null);
const editorRef = useRef<any>(null);
const intl = useIntl();
const [activeKey, setActiveKey] = useState<string>('form');
const [yamlContent, setYamlContent] = useState<string>('');
const [formContent, setFormContent] = useState<FormData>({} as FormData);
const tabsRef = useRef<any>(null);
const onOk = () => {
if (activeKey === 'yaml') {
const content = editorRef.current?.getContent();
const valid = editorRef.current?.validate();
if (valid) {
onSubmit({ content: content });
onSubmitYaml({ content: content });
}
} else {
formRef.current?.submit();
@@ -59,9 +67,64 @@ const AddModal: React.FC<AddModalProps> = (props) => {
};
const onFinish = (values: FormData) => {
onSubmit(values);
console.log('Form values:', values);
const versionConfigs = values.version_configs?.reduce(
(acc: Record<string, any>, curr) => {
if (curr.version_no) {
acc[curr.version_no] = {
image_name: curr.image_name,
run_command: curr.run_command
};
}
return acc;
},
{}
);
const defaultVersion = values.version_configs?.find((v) => v.is_default);
onSubmit({
...values,
default_version: defaultVersion?.version_no || '',
// @ts-ignore
version_configs: versionConfigs
});
};
const iniFormContent = (values: any) => {
const versionConfigs = Object.keys(values.version_configs || {}).map(
(key) => ({
version_no: key,
image_name: values.version_configs[key].image_name,
run_command: values.version_configs[key].run_command,
is_default: key === values.default_version,
isBuiltin: true
})
);
return {
...values,
version_configs: versionConfigs
};
};
const initYamlContent = (values: any) => {
if (currentData?.is_build_in) {
return json2Yaml(_.pick(values, backendFields));
}
return json2Yaml(_.pick(values, [...backendFields, 'default_version']));
};
useEffect(() => {
if (action === PageAction.EDIT) {
const yaml = initYamlContent(currentData || {});
const formData = iniFormContent(currentData || {});
setYamlContent(yaml);
setFormContent(formData);
formRef.current?.setFieldsValue?.(formData);
editorRef.current?.setValue?.(yaml);
}
}, [action, currentData]);
return (
<GSDrawer
title={title}
@@ -115,7 +178,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}
>
<Tabs
renderTabBar={() => <></>}
renderTabBar={(agrs, tab) => <></>}
activeKey={activeKey}
defaultActiveKey={activeKey}
items={[
@@ -126,7 +189,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
<BackendForm
onFinish={onFinish}
action={action}
currentData={currentData}
currentData={formContent as ListItem}
ref={formRef}
/>
)
@@ -135,7 +198,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
key: 'yaml',
label: 'YAML',
children: (
<ImportYAML action={action} ref={editorRef}></ImportYAML>
<ImportYAML
actionStatus={{
action: action,
isBuiltIn: currentData?.is_build_in || false
}}
ref={editorRef}
content={yamlContent}
/>
)
}
]}
src/pages/backends/components/backend-card.tsx
+114 -29
View File
@@ -1,12 +1,30 @@
import DropDownActions from '@/components/drop-down-actions';
import IconFont from '@/components/icon-font';
import Card from '@/components/templates/card';
import { DockerOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { DockerOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { Button, Tag } from 'antd';
import _ from 'lodash';
import { useMemo } from 'react';
import styled from 'styled-components';
import { backendActions } from '../config';
import {
backendActions,
builtInBackendLogos,
customColors,
customIcons
} from '../config';
import { ListItem } from '../config/types';
const TagInner = styled(Tag)`
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
height: 28px;
width: 28px;
border-radius: 6px;
font-weight: 400;
`;
const Header = styled.div`
display: flex;
align-items: center;
@@ -15,16 +33,26 @@ const Header = styled.div`
.title {
display: flex;
align-items: center;
gap: 16px;
gap: 24px;
}
`;
const CardName = styled.div`
font-weight: 500;
font-size: 16px;
display: flex;
align-items: center;
color: var(--ant-color-text);
margin-bottom: 4px;
gap: 16px;
`;
const Content = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 8px;
gap: 12px;
margin-top: 12px;
gap: 16px;
color: var(--ant-color-text-secondary);
.description {
margin-block: 12px;
@@ -32,44 +60,81 @@ const Content = styled.div`
}
.text {
margin-left: 4px;
color: var(--ant-color-text-secondary);
color: var(--ant-color-text);
}
.title {
color: var(--ant-color-text);
font-weight: 500;
line-height: 1.5;
}
.info {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 8px;
color: var(--ant-color-text-tertiary);
.icon {
color: var(--ant-color-text-tertiary);
}
.label {
display: flex;
align-items: center;
gap: 4px;
}
}
`;
interface BackendCardProps {
onClick: (data: any) => void;
onClick?: (data: any) => void;
onSelect?: (item: any) => void;
data: ListItem;
}
const BackendCard: React.FC<BackendCardProps> = ({
onClick,
data,
onSelect
}) => {
const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
const handleOnSelect = (item: any) => {
onSelect?.({ action: item.key, data: data });
};
const handleClick = () => {
onSelect?.({ action: 'edit', data: data });
};
const renderIcon = () => {
if (builtInBackendLogos[data.backend_name]) {
return <img src={builtInBackendLogos[data.backend_name]} height={20} />;
}
const color = customColors[data.id % customColors.length];
const icon = customIcons[data.id % customIcons.length];
return (
<TagInner color={color} bordered={false}>
{icon}
</TagInner>
);
};
const actions = useMemo(() => {
if (data.is_build_in) {
return backendActions.filter((item) => item.key !== 'delete');
}
return backendActions;
}, [data.is_build_in]);
return (
<Card
onClick={() => onClick(data)}
onClick={handleClick}
clickable={true}
disabled={false}
height={'auto'}
height={160}
ghost
header={
<Header>
<div className="title">
<img src={data.icon} alt={data.backend_name} height={20} />
<span>{data.backend_name}</span>
</div>
<div className="title">{renderIcon()}</div>
<span>
<DropDownActions
menu={{
items: backendActions,
onClick: onSelect
items: actions,
onClick: handleOnSelect
}}
>
<Button
@@ -83,15 +148,35 @@ const BackendCard: React.FC<BackendCardProps> = ({
}
>
<Content>
<div className="description">This is a description</div>
<div>
<IconFont type="icon-version" style={{ marginRight: 4 }} /> Default
version: <span className="text">{data.default_version}</span>
</div>
<div>
<DockerOutlined style={{ marginRight: 4 }} /> Default Image:{' '}
<CardName>
<span>{data.backend_name}</span>
{data.is_build_in && (
<Tag
color="geekblue"
className="font-400"
bordered={false}
style={{ borderRadius: 'var(--ant-border-radius)' }}
>
Built-in
</Tag>
)}
</CardName>
<div className="info">
<span className="label">
<InfoCircleOutlined className="icon" />
<span>Default Version: </span>
</span>
<span className="text">{data.default_version}</span>
<span className="label">
<DockerOutlined className="icon" />
<span>Default Image: </span>
</span>
<span className="text">
{data.version_configs?.[data.default_version]?.image_name}
{_.get(data, [
'version_configs',
data.default_version,
'image_name'
])}
</span>
</div>
</Content>
src/pages/backends/components/backend-list.tsx
+6 -4
View File
@@ -29,6 +29,7 @@ interface BackendListProps {
loading: boolean;
activeId: Global.WithFalse<number>;
isFirst: boolean;
onSelect?: (item: any) => void;
}
const InnerSkeleton: React.FC<{
@@ -66,15 +67,16 @@ const CardList: React.FC<BackendListProps> = (props) => {
dataList,
loading,
isFirst,
defaultSpan = 6,
resizable = true
defaultSpan = 8,
resizable = true,
onSelect
} = props;
const [span, setSpan] = React.useState(defaultSpan);
const getSpanByWidth = (width: number) => {
if (width < breakpoints.md) return 24;
if (width < breakpoints.lg) return 12;
return 6;
return 8;
};
const handleResize = useCallback(
@@ -92,7 +94,7 @@ const CardList: React.FC<BackendListProps> = (props) => {
{dataList.map((item: any) => {
return (
<Col span={span} key={item.id}>
<BackendCard onClick={() => {}} data={item} />
<BackendCard data={item} onSelect={onSelect} />
</Col>
);
})}
src/pages/backends/components/import-yaml.tsx
+7 -3
View File
@@ -49,18 +49,21 @@ const Container = styled.div`
interface ImportYAMLProps {
ref?: any;
action: PageActionType;
actionStatus: {
action: PageActionType;
isBuiltIn: boolean;
};
content?: string;
onSubmit?: (content: string) => void;
}
const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
({ action, content = '' }, ref) => {
({ actionStatus, content = '' }, ref) => {
const intl = useIntl();
const { userSettings } = useUserSettings();
const editorRef = useRef<any>(null);
const [fileContent, setFileContent] = useState<string>(
action === PageAction.CREATE ? yamlTemplate : content
actionStatus.action === PageAction.CREATE ? yamlTemplate : content
);
const [error, setError] = useState<string>('');
@@ -131,6 +134,7 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
<YamlEditor
ref={editorRef}
lang="yaml"
actionStatus={actionStatus}
theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
value={fileContent}
height={'calc(100vh - 255px)'}
src/pages/backends/components/yaml-editor.tsx
+16 -5
View File
@@ -1,4 +1,6 @@
import EditorWrap from '@/components/editor-wrap';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { LoadingOutlined } from '@ant-design/icons';
import Editor, { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
@@ -9,7 +11,9 @@ import React, {
useImperativeHandle,
useRef
} from 'react';
import schema from '../config/schema.json';
import createSchema from '../config/schema/create.json';
import updateBuiltinSchema from '../config/schema/update-builtin.json';
import udpateCustomSchema from '../config/schema/update-custom.json';
loader.config({ monaco });
@@ -24,20 +28,22 @@ interface ViewerProps {
header?: React.ReactNode;
placeholder?: string;
variant?: 'bordered' | 'borderless';
actionStatus: {
action: PageActionType;
isBuiltIn: boolean;
};
}
const path = 'inmemory://model/config.yaml';
const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
const {
lang,
value,
config,
defaultLang,
height = 380,
theme = 'vs-dark',
header,
variant = 'borderless',
actionStatus,
placeholder
} = props;
@@ -53,7 +59,12 @@ const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
{
uri: 'http://example.com/schema-name.json',
fileMatch: [yamlUri.toString()],
schema
schema:
actionStatus.action === PageAction.CREATE
? createSchema
: actionStatus.isBuiltIn
? updateBuiltinSchema
: udpateCustomSchema
}
]
});
src/pages/backends/config/index.ts
+88 -26
View File
@@ -1,24 +1,47 @@
import MindIELogo from '@/assets/logo/ascend.png';
import SGLangLogo from '@/assets/logo/sglang.png';
import vLLMLogo from '@/assets/logo/vllm.png';
import icons from '@/components/icon-font/icons';
import jsYaml from 'js-yaml';
import { trim } from 'lodash';
const SealYamlType = new jsYaml.Type('!seal', {
kind: 'sequence', // See node kinds in YAML spec: http://www.yaml.org/spec/1.2/spec.html#kind//
construct(data: any) {
return data.map(function (str: string) {
return `seal${str}`;
});
}
});
const SEAL_SCHEMA = jsYaml.DEFAULT_SCHEMA.extend([SealYamlType]);
export const builtInBackends = {
SGLang: 'SGLang',
vLLM: 'vllm',
MindIE: 'mindie',
VoxBox: 'voxbox'
};
export const builtInBackendLogos: Record<string, string> = {
[builtInBackends.SGLang]: SGLangLogo,
[builtInBackends.vLLM]: vLLMLogo,
[builtInBackends.MindIE]: MindIELogo,
[builtInBackends.VoxBox]: ''
};
export const backendActions = [
{
label: 'Edit Versions',
value: 'version',
key: 'version',
icon: icons.EditContent,
locale: false
},
{
label: 'Edit Parameters',
value: 'parameter',
key: 'parameter',
icon: icons.Parameter,
locale: false
},
{
label: 'Edit by Yaml',
value: 'yaml',
label: 'Edit',
value: 'edit',
key: 'edit',
icon: icons.EditOutlined,
locale: false
},
{
label: 'Export YAML',
value: 'yaml',
key: 'export',
icon: icons.Yaml,
locale: false
},
@@ -32,20 +55,59 @@ export const backendActions = [
}
];
export const yamlTemplate = `
name: SGLang
export const json2Yaml = (obj: Record<string, any>) => {
if (!obj || !Object.keys(obj).length) return '';
const res = jsYaml.dump(JSON.parse(JSON.stringify(obj)));
return res;
};
export const yaml2Json = (input: string) => {
const str = trim(input);
const obj = jsYaml.load(str, { schema: SEAL_SCHEMA });
if (typeof obj !== 'object' || obj === null) {
return {};
}
const jsonStr = JSON.stringify(obj);
return JSON.parse(jsonStr);
};
export const customColors = [
'red',
'orange',
'gold',
'lime',
'volcano',
'green',
'magenta',
'cyan',
'purple',
'blue',
'geekblue'
];
export const customIcons = ['∑', '∏', '∫', '∂', '∞', 'θ', '∆', '∇'];
export const backendFields = [
'description',
'health_check_path',
'default_run_command',
'version_configs',
'default_backend_parameters'
];
export const yamlTemplate = `# backend configuration template
backend_name: SGLang
description: SGLang backend
default_version: v0.5.1
health_check_path: /health
allowed_proxy_uris:
- api/chat
- api/v1
versions:
default_run_command: run sglang
version_configs:
v0.0.1:
image: lm/sglang
command: run sglang
image_name: lm/sglang
run_command: run sglang
v0.0.2:
image: lm/sglang
command: run sglang
image_name: lm/sglang
run_command: run sglang
default_backend_parameters:
- --host
`;
src/pages/backends/config/schema.json → src/pages/backends/config/schema/create.json
+16 -15
View File
@@ -1,42 +1,43 @@
{
"type": "object",
"properties": {
"name": {
"backend_name": {
"type": "string",
"description": "backend name",
"severity": "error"
},
"description": {
"type": ["string", "null"],
"description": "backend description"
},
"default_version": {
"type": "string",
"description": "default backend version"
},
"default_run_command": {
"type": ["string", "null"],
"description": "default start command"
},
"health_check_path": {
"type": "string",
"type": ["string", "null"],
"description": "health check path"
},
"allowed_proxy_uris": {
"type": "array",
"items": {
"type": "string"
},
"description": "allowed proxy URIs"
},
"versions": {
"version_configs": {
"type": "object",
"patternProperties": {
"^[a-zA-Z0-9._-]+$": {
"type": "object",
"properties": {
"image": {
"image_name": {
"type": "string",
"description": "image name"
},
"command": {
"type": "string",
"run_command": {
"type": ["string", "null"],
"description": "start command"
}
},
"required": ["image", "command"],
"required": ["image_name", "run_command"],
"additionalProperties": false
}
},
@@ -51,6 +52,6 @@
"description": "default backend parameters"
}
},
"required": ["name", "default_version", "health_check_path", "versions"],
"required": ["backend_name", "default_version", "version_configs"],
"additionalProperties": false
}
src/pages/backends/config/schema/update-builtin.json
+48
View File
@@ -0,0 +1,48 @@
{
"type": "object",
"properties": {
"description": {
"type": ["string", "null"],
"description": "backend description"
},
"default_run_command": {
"type": ["string", "null"],
"description": "default start command"
},
"health_check_path": {
"type": ["string", "null"],
"description": "health check path"
},
"version_configs": {
"type": "object",
"patternProperties": {
"^[a-zA-Z0-9._-]+$": {
"type": "object",
"properties": {
"image_name": {
"type": "string",
"description": "image name"
},
"run_command": {
"type": ["string", "null"],
"description": "start command"
}
},
"required": ["image_name", "run_command"],
"additionalProperties": false
}
},
"additionalProperties": false,
"description": "multiple backend versions"
},
"default_backend_parameters": {
"type": "array",
"items": {
"type": "string"
},
"description": "default backend parameters"
}
},
"required": ["version_configs"],
"additionalProperties": false
}
src/pages/backends/config/schema/update-custom.json
+52
View File
@@ -0,0 +1,52 @@
{
"type": "object",
"properties": {
"description": {
"type": ["string", "null"],
"description": "backend description"
},
"default_version": {
"type": "string",
"description": "default backend version"
},
"default_run_command": {
"type": ["string", "null"],
"description": "default start command"
},
"health_check_path": {
"type": ["string", "null"],
"description": "health check path"
},
"version_configs": {
"type": "object",
"patternProperties": {
"^[a-zA-Z0-9._-]+$": {
"type": "object",
"properties": {
"image_name": {
"type": "string",
"description": "image name"
},
"run_command": {
"type": ["string", "null"],
"description": "start command"
}
},
"required": ["image_name", "run_command"],
"additionalProperties": false
}
},
"additionalProperties": false,
"description": "multiple backend versions"
},
"default_backend_parameters": {
"type": "array",
"items": {
"type": "string"
},
"description": "default backend parameters"
}
},
"required": ["default_version", "version_configs"],
"additionalProperties": false
}
src/pages/backends/config/test.ts
-54
View File
@@ -1,54 +0,0 @@
import lmDeployLogo from '@/assets/logo/lmdeploy.png';
import SGLangLogo from '@/assets/logo/sglang.png';
import vLLMLogo from '@/assets/logo/vllm.png';
export default [
{
id: 1,
backend_name: 'SGlang',
icon: SGLangLogo,
version_configs: {
'v1.0': {
image_name: 'example/image:v1.0',
run_command: 'run.sh'
}
},
compatibility_type: 'template_string',
health_check_path: '/v1/models',
default_version: 'v1.0',
default_backend_param: ['--param1', '--param2'],
description: 'sglang description'
},
{
id: 2,
backend_name: 'vLLM',
icon: vLLMLogo,
version_configs: {
'v1.0': {
image_name: 'example/image:v1.0',
run_command: 'run.sh'
}
},
compatibility_type: 'template_string',
health_check_path: '/v1/models',
default_version: 'v1.0',
default_backend_param: ['--param1', '--param2'],
description: 'vllm description'
},
{
id: 3,
backend_name: 'LMDeploy',
icon: lmDeployLogo,
version_configs: {
'v1.0': {
image_name: 'example/image:v1.0',
run_command: 'run.sh'
}
},
compatibility_type: 'template_string',
health_check_path: '/v1/models',
default_version: 'v1.0',
default_backend_param: ['--param1', '--param2'],
description: 'LMDeploy description'
}
];
src/pages/backends/config/types.ts
+9 -8
View File
@@ -1,15 +1,15 @@
export interface VersionConfigs {
[key: string]: {
image_name: string;
run_command: string;
};
image_name: string;
run_command: string;
is_default: boolean;
version_no?: string;
}
export interface FormData {
backend_name?: string;
backend_name: string;
description?: string;
version_configs?: VersionConfigs;
compatibility_type?: string;
version_configs?: VersionConfigs[];
default_run_command?: string;
health_check_path?: string;
default_version?: string;
default_backend_param?: string[];
@@ -18,7 +18,8 @@ export interface FormData {
}
export interface ListItem extends FormData {
id?: number;
id: number;
is_build_in?: boolean;
created_at?: string;
updated_at?: string;
}
src/pages/backends/forms/basic.tsx
+10 -31
View File
@@ -1,6 +1,5 @@
import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
@@ -28,43 +27,23 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
]}
>
<SealInput.Input
trim
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="compatibility_type"
rules={[
{
required: true,
message: getRuleMessage('select', 'template', false)
}
]}
>
<SealSelect
label={'Compatibility Template'}
required
options={[
{ label: 'Template 1', value: 'tensorflow' },
{ label: 'Template 2', value: 'torchserve' }
]}
></SealSelect>
</Form.Item>
<Form.Item<FormData>
name="allowed_proxy_uris"
name="health_check_path"
rules={[{ required: false }]}
>
<ListInput
dataList={form.getFieldValue('allowed_proxy_uris') || []}
onChange={(data: string[]) => {
form.setFieldValue('allowed_proxy_uris', data);
}}
btnText={'Add Allowed Proxy URI'}
label={'Proxy URI'}
></ListInput>
<SealInput.Input trim label={'Health Check Path'}></SealInput.Input>
</Form.Item>
<Form.Item name="default_run_command">
<SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
label={intl.formatMessage({ id: 'common.table.description' })}
src/pages/backends/forms/index.tsx
+33 -4
View File
@@ -1,6 +1,7 @@
import { PageActionType } from '@/config/types';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { Form } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { FormData, ListItem } from '../config/types';
import BasicForm from './basic';
@@ -9,16 +10,34 @@ import VersionsForm from './versions-config';
type AddModalProps = {
action: PageActionType;
currentData?: ListItem; // Used when action is EDIT
currentData?: ListItem;
onFinish: (values: FormData) => void;
ref?: any;
};
const BackendForm: React.FC<AddModalProps> = forwardRef(
({ action, currentData, onFinish }, ref) => {
const [form] = Form.useForm();
const [activeKey, setActiveKey] = React.useState<string[]>([]);
const onFinishFailed = (errorInfo: any) => {
const errorFields = errorInfo.errorFields || [];
if (errorFields.length > 0) {
const hasVersionsError = errorFields.some((field: any) =>
field.name.includes('version_configs')
);
if (hasVersionsError) {
setActiveKey([...new Set([...activeKey, 'version_configs'])]);
}
}
};
const handleOnCollapseChange = (keys: string | string[]) => {
setActiveKey(Array.isArray(keys) ? keys : [keys]);
};
useEffect(() => {
if (currentData) {
console.log('currentData:', currentData);
form.setFieldsValue(currentData);
}
}, [currentData]);
@@ -48,15 +67,25 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
onFinish={onFinish}
preserve={false}
scrollToFirstError={true}
initialValues={currentData}
initialValues={_.omit(currentData, ['version_configs'])}
onFinishFailed={onFinishFailed}
>
<BasicForm action={action}></BasicForm>
<CollapsePanel
activeKey={activeKey}
accordion={false}
onChange={handleOnCollapseChange}
items={[
{
key: 'versions',
key: 'version_configs',
label: 'Versions',
children: <VersionsForm action={action}></VersionsForm>
forceRender: true,
children: (
<VersionsForm
action={action}
currentData={currentData}
></VersionsForm>
)
},
{
key: 'parameters',
src/pages/backends/forms/versions-config.tsx
+53 -39
View File
@@ -1,9 +1,10 @@
import SealInput from '@/components/seal-form/seal-input';
import { PageActionType } from '@/config/types';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Checkbox, Divider, Form } from 'antd';
import { Button, Checkbox, Divider, Form, Radio } from 'antd';
import React, { useEffect } from 'react';
import styled from 'styled-components';
import { ListItem } from '../config/types';
const Box = styled.div`
display: grid;
@@ -12,36 +13,36 @@ const Box = styled.div`
align-items: center;
`;
const ItemWrapper = styled.div`
&:hover {
.divider {
border-top: 1px dashed var(--ant-color-primary) !important;
}
}
`;
const Label = styled.div`
color: var(--ant-color-text-tertiary);
font-size: var(--font-size-base);
margin-bottom: 10px;
`;
const ItemWrapper = styled.div``;
type AddModalProps = {
action: PageActionType;
currentData?: ListItem;
};
const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const form = Form.useFormInstance();
const versionList = [
{
version_no: '',
image_name: '',
run_command: '',
is_default: false
isBuiltin: false,
is_default: true
}
];
const handleSetDefaultVersion = (e: any, index: number) => {
const versions = form.getFieldValue('version_configs') || [];
const updatedVersions = versions.map((version: any, idx: number) => ({
...version,
is_default: idx === index
}));
form.setFieldValue('version_configs', updatedVersions);
};
useEffect(() => {
const versions = form.getFieldValue('version_configs') || [];
console.log('versions:', versions);
if (Array.isArray(versions) && versions.length === 0) {
form.setFieldValue('version_configs', versionList);
}
@@ -64,12 +65,11 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
<Form.Item
{...restField}
name={[name, 'version_no']}
rules={[
{ required: true, message: 'Version No. is required' }
]}
rules={[{ required: true, message: 'Version is required' }]}
>
<SealInput.Input
label="Version No."
trim
label="Version"
required
></SealInput.Input>
</Form.Item>
@@ -81,6 +81,7 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
]}
>
<SealInput.Input
trim
label="Image Name"
required
></SealInput.Input>
@@ -89,29 +90,42 @@ const VersionsForm: React.FC<AddModalProps> = ({ action }) => {
<Form.Item name={[name, 'run_command']} {...restField}>
<SealInput.TextArea label="Execution Command"></SealInput.TextArea>
</Form.Item>
<Form.Item name={[name, 'isBuiltin']} {...restField} hidden>
<Checkbox></Checkbox>
</Form.Item>
<div className="flex justify-between items-center">
<span className="flex-center">
<Form.Item
{...restField}
name={[name, 'is_default']}
valuePropName="checked"
initialValue={false}
noStyle
>
<Checkbox>Set as Default Version</Checkbox>
</Form.Item>
</span>
<div className="flex-center gap-16">
{fields.length > 1 && (
<Button
size="small"
onClick={() => remove(name)}
shape="circle"
{!currentData?.is_build_in && (
<Form.Item
{...restField}
name={[name, 'is_default']}
valuePropName="checked"
initialValue={false}
noStyle
>
<MinusOutlined />
</Button>
<Radio
onChange={(e: any) =>
handleSetDefaultVersion(e, index)
}
>
Set as Default Version
</Radio>
</Form.Item>
)}
</div>
</span>
{
<div className="flex-center gap-16">
{fields.length > 1 && (
<Button
size="small"
onClick={() => remove(name)}
shape="circle"
>
<MinusOutlined />
</Button>
)}
</div>
}
</div>
<Divider
className="divider"
src/pages/backends/hooks/use-export-yaml.ts
+14
View File
@@ -0,0 +1,14 @@
import { downloadFile } from '@/utils/download-stream';
import { json2Yaml } from '../config';
const useExportYAML = () => {
const exportYAML = (currentData?: any) => {
const yaml = json2Yaml(currentData || {});
const blob = new Blob([yaml], { type: 'text/yaml;charset=utf-8' });
downloadFile(blob, `${currentData.backend_name}.yml`);
};
return { exportYAML };
};
export default useExportYAML;
src/pages/backends/list.tsx
+82 -13
View File
@@ -1,3 +1,4 @@
import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
@@ -5,14 +6,19 @@ import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { useState } from 'react';
import {
createBackend,
createBackendFromYAML,
deleteBackend,
INFERENCE_BACKEND_API,
queryBackendsList
queryBackendsList,
updateBackend,
updateBackendFromYAML
} from './apis';
import AddModal from './components/add-modal';
import BackendCardList from './components/backend-list';
import dataList from './config/test';
import { json2Yaml, yaml2Json } from './config';
import { FormData, ListItem } from './config/types';
import useExportYAML from './hooks/use-export-yaml';
const BackendList = () => {
const intl = useIntl();
@@ -35,21 +41,62 @@ const BackendList = () => {
deleteAPI: deleteBackend,
API: INFERENCE_BACKEND_API,
watch: false,
contentForDelete: 'resources.modelfiles.modelfile'
contentForDelete: 'backends.title',
defaultQueryParams: {
perPage: 100
}
});
const { exportYAML } = useExportYAML();
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData?: Partial<FormData>;
currentData?: Partial<ListItem>;
}>({ open: false, action: 'create' });
const handleOnSubmit = (values: FormData) => {
console.log('yaml content:', values);
setOpenModalStatus({
open: false,
action: 'create',
currentData: undefined
});
const handleOnSubmit = async (values: FormData) => {
try {
if (openModalStatus.action === 'create') {
await createBackend({ data: values });
} else {
await updateBackend(openModalStatus.currentData!.id!, {
data: {
...values
}
});
}
setOpenModalStatus({
open: false,
action: 'create',
currentData: undefined
});
handleSearch();
} catch (error) {}
};
const handleOnSubmitYaml = async (values: { content: string }) => {
try {
if (openModalStatus.action === 'create') {
await createBackendFromYAML({ data: values });
} else {
const jsonData = yaml2Json(values.content);
const yamlContent = json2Yaml({
backend_name: openModalStatus.currentData?.backend_name,
default_version: openModalStatus.currentData?.default_version,
...jsonData
});
await updateBackendFromYAML(openModalStatus.currentData!.id!, {
data: {
content: yamlContent
}
});
}
setOpenModalStatus({
open: false,
action: 'create',
currentData: undefined
});
handleSearch();
} catch (error) {}
};
const handleAddBackend = () => {
@@ -59,6 +106,25 @@ const BackendList = () => {
});
};
const handleOnSelect = (item: any) => {
console.log('selected item:', item);
if (item.action === 'edit') {
setOpenModalStatus({
open: true,
action: 'edit',
currentData: item.data
});
} else if (item.action === 'delete') {
handleDelete(item.data, {
name: item.data.backend_name
});
} else if (item.action === 'export') {
// Export YAML action
console.log('Export YAML for:', item.data);
exportYAML(item.data);
}
};
return (
<PageContainer
ghost
@@ -88,16 +154,18 @@ const BackendList = () => {
></FilterBar>
<BackendCardList
dataList={dataList}
dataList={dataSource.dataList}
loading={dataSource.loading}
activeId={false}
isFirst={!dataSource.loadend}
onSelect={handleOnSelect}
></BackendCardList>
<AddModal
action={openModalStatus.action}
onClose={() => setOpenModalStatus({ open: false, action: 'create' })}
onSubmit={handleOnSubmit}
currentData={openModalStatus.currentData}
onSubmitYaml={handleOnSubmitYaml}
currentData={openModalStatus.currentData as ListItem}
open={openModalStatus.open}
title={
openModalStatus.action === 'create'
@@ -105,6 +173,7 @@ const BackendList = () => {
: 'Edit Backend'
}
></AddModal>
<DeleteModal ref={modalRef}></DeleteModal>
</PageContainer>
);
};
src/pages/llmodels/apis/index.ts
+13 -49
View File
@@ -20,7 +20,7 @@ export const MODEL_INSTANCE_API = '/model-instances';
export const MODEL_EVALUATIONS = '/model-evaluations';
export const BACKEND_LIST_API = '/inference-backend/list';
export const BACKEND_LIST_API = '/inference-backends/list';
const setProxyUrl = (url: string) => {
return `/proxy?url=${encodeURIComponent(url)}`;
@@ -400,52 +400,16 @@ export async function evaluationsModelSpec(
}
export async function queryBackendList() {
// return request<{
// items: {
// backend_name: string;
// backend_show_name: string;
// from_config: boolean;
// default_version: string;
// default_backend_param: string[];
// versions: string[];
// }[];
// }>(BACKEND_LIST_API, {
// method: 'GET'
// });
return {
items: [
{
backend_name: 'vllm',
backend_show_name: 'vLLM',
from_config: false,
default_version: '0.10.1.1',
default_backend_param: null,
versions: ['0.10.1.1', '0.10.0', '0.9.2', '0.8.5', '0.8.3']
},
{
backend_name: 'ascend-mindie',
backend_show_name: 'Ascend MindIE',
from_config: false,
default_version: null,
default_backend_param: null,
versions: null
},
{
backend_name: 'custom',
backend_show_name: 'Custom',
from_config: false,
default_version: null,
default_backend_param: null,
versions: null
},
{
backend_name: 'test',
backend_show_name: null,
from_config: true,
default_version: 'v1',
default_backend_param: ['--host=0.0.0.0'],
versions: ['v1']
}
]
};
return request<{
items: {
backend_name: string;
backend_show_name: string;
from_config: boolean;
default_version: string;
default_backend_param: string[];
versions: string[];
}[];
}>(BACKEND_LIST_API, {
method: 'GET'
});
}
src/pages/llmodels/components/table-list.tsx
+3 -3
View File
@@ -61,7 +61,7 @@ import useQueryBackends from '../hooks/use-query-backends';
import APIAccessInfoModal from './api-access-info';
import DeployModal from './deploy-modal';
import Instances from './instances';
import UpdateModel from './update-modal';
import UpdateModelModal from './update-modal';
import ViewLogsModal from './view-logs-modal';
interface ModelsProps {
handleSearch: (params?: any) => void;
@@ -685,7 +685,7 @@ const Models: React.FC<ModelsProps> = ({
}}
></SealTable>
</PageContainer>
<UpdateModel
<UpdateModelModal
open={openAddModal}
action={PageAction.EDIT}
title={intl.formatMessage({ id: 'models.title.edit' })}
@@ -694,7 +694,7 @@ const Models: React.FC<ModelsProps> = ({
onCancel={handleModalCancel}
onOk={handleModalOk}
backendOptions={backendOptions}
></UpdateModel>
></UpdateModelModal>
<DeployModal
open={openDeployModal.show}
action={PageAction.CREATE}
src/pages/users/index.tsx
+6
View File
@@ -11,6 +11,7 @@ import {
DeleteOutlined,
EditOutlined,
PlusOutlined,
SearchOutlined,
SyncOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
@@ -195,6 +196,11 @@ const Users: React.FC = () => {
left={
<Space>
<Input
prefix={
<SearchOutlined
style={{ color: 'var(--ant-color-text-placeholder)' }}
></SearchOutlined>
}
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
typings.d.ts
Vendored
+1
View File
@@ -27,5 +27,6 @@ declare module 'node-vibrant';
declare module 'lamejs';
declare module 'file-saver';
declare module 'tinycolor2';
declare module 'js-yaml';
declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;