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/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
}
]
});