chore: pluggable locale config
This commit is contained in:
jialin
@@ -67,7 +67,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
};
|
||||
|
||||
const onFinish = (values: FormData) => {
|
||||
console.log('Form values:', values);
|
||||
const versionConfigs = values.version_configs?.reduce(
|
||||
(acc: Record<string, any>, curr) => {
|
||||
if (curr.version_no) {
|
||||
@@ -176,12 +175,12 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
onChange={(value) => setActiveKey(value as string)}
|
||||
options={[
|
||||
{
|
||||
label: 'Form',
|
||||
label: intl.formatMessage({ id: 'backend.mode.form' }),
|
||||
value: 'form',
|
||||
icon: <IconFont type="icon-edit-content" />
|
||||
},
|
||||
{
|
||||
label: 'YAML',
|
||||
label: intl.formatMessage({ id: 'backend.mode.yaml' }),
|
||||
value: 'yaml',
|
||||
icon: <IconFont type="icon-code_block" />
|
||||
}
|
||||
@@ -207,7 +206,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
items={[
|
||||
{
|
||||
key: 'form',
|
||||
label: 'Form',
|
||||
label: intl.formatMessage({ id: 'backend.mode.form' }),
|
||||
children: (
|
||||
<BackendForm
|
||||
onFinish={onFinish}
|
||||
@@ -219,7 +218,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
},
|
||||
{
|
||||
key: 'yaml',
|
||||
label: 'YAML',
|
||||
label: intl.formatMessage({ id: 'backend.mode.yaml' }),
|
||||
children: (
|
||||
<ImportYAML
|
||||
actionStatus={{
|
||||
|
||||
@@ -3,7 +3,7 @@ import DropDownActions from '@/components/drop-down-actions';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import ThemeTag from '@/components/tags-wrapper/theme-tag';
|
||||
import Card from '@/components/templates/card';
|
||||
import { DockerOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tag } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
@@ -87,6 +87,22 @@ const Content = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const InfoItem = styled.div`
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
const BackendBox = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -100,12 +116,14 @@ interface BackendCardProps {
|
||||
}
|
||||
|
||||
const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleOnSelect = (item: any) => {
|
||||
onSelect?.({ action: item.key, data: data });
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
onSelect?.({ action: 'edit', data: data });
|
||||
onSelect?.({ action: 'view_versions', data: data });
|
||||
};
|
||||
|
||||
const renderIcon = () => {
|
||||
@@ -133,28 +151,30 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const renderDrivers = () => {
|
||||
if (data.is_build_in) {
|
||||
const backendList = _.get(
|
||||
data,
|
||||
[
|
||||
'build_in_version_configs',
|
||||
data.default_version,
|
||||
'build_in_frameworks'
|
||||
],
|
||||
[]
|
||||
);
|
||||
const renderFrameworks = () => {
|
||||
const frameworks = _.keys(data.framework_index_map || {});
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className="label">
|
||||
<IconFont className="icon" type="icon-gpu1" />
|
||||
<span>Supported Frameworks: </span>
|
||||
return (
|
||||
<InfoItem>
|
||||
<span className="label">
|
||||
<IconFont className="icon" type="icon-gpu1" />
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'backend.availableFrameworks' })}:{' '}
|
||||
</span>
|
||||
<AutoTooltip ghost maxWidth={'100%'}>
|
||||
<BackendBox>
|
||||
{_.take(backendList, 3).map((item: string) => {
|
||||
return (
|
||||
</span>
|
||||
|
||||
<BackendBox>
|
||||
{_.take(frameworks, 3).map((item: string) => {
|
||||
return (
|
||||
<div key={item}>
|
||||
<AutoTooltip
|
||||
ghost
|
||||
minWidth={20}
|
||||
showTitle
|
||||
title={
|
||||
_.join(data.framework_index_map?.[item], ', ') || false
|
||||
}
|
||||
>
|
||||
<ThemeTag
|
||||
key={item}
|
||||
style={{ marginRight: 0 }}
|
||||
@@ -162,29 +182,12 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
>
|
||||
{item}
|
||||
</ThemeTag>
|
||||
);
|
||||
})}
|
||||
</BackendBox>
|
||||
</AutoTooltip>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<span className="label">
|
||||
<DockerOutlined className="icon" />
|
||||
<span>Default Image: </span>
|
||||
</span>
|
||||
<span className="text">
|
||||
<AutoTooltip ghost maxWidth={'100%'}>
|
||||
{_.get(data, [
|
||||
'version_configs',
|
||||
data.default_version,
|
||||
'image_name'
|
||||
])}
|
||||
</AutoTooltip>
|
||||
</span>
|
||||
</>
|
||||
</AutoTooltip>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</BackendBox>
|
||||
</InfoItem>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -194,7 +197,7 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
clickable={true}
|
||||
hoverable={true}
|
||||
disabled={false}
|
||||
height={160}
|
||||
height={140}
|
||||
ghost
|
||||
header={
|
||||
<Header>
|
||||
@@ -226,18 +229,11 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
|
||||
bordered={false}
|
||||
style={{ borderRadius: 'var(--ant-border-radius)' }}
|
||||
>
|
||||
Built-in
|
||||
{intl.formatMessage({ id: 'backend.builtin' })}
|
||||
</Tag>
|
||||
)}
|
||||
</CardName>
|
||||
<div className="info">
|
||||
<span className="label">
|
||||
<InfoCircleOutlined className="icon" />
|
||||
<span>Default Version: </span>
|
||||
</span>
|
||||
<span className="text">{data.default_version}</span>
|
||||
{renderDrivers()}
|
||||
</div>
|
||||
{renderFrameworks()}
|
||||
</Content>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import ScrollerModal from '@/components/scroller-modal';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { VersionListItem } from '../config/types';
|
||||
import VersionInfo from '../forms/version-info';
|
||||
|
||||
interface VersionInfoModalProps {
|
||||
open?: boolean;
|
||||
currentData?: any;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
|
||||
open,
|
||||
currentData,
|
||||
onClose
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const [versionConfigs, setVersionConfigs] = useState<VersionListItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && currentData) {
|
||||
// add is_built_in field to build_in_version_configs
|
||||
const builtInVersions = currentData.build_in_version_configs || {};
|
||||
|
||||
for (const key in builtInVersions) {
|
||||
if (builtInVersions?.hasOwnProperty(key)) {
|
||||
builtInVersions[key].is_built_in = true;
|
||||
}
|
||||
}
|
||||
|
||||
const versions = {
|
||||
...builtInVersions,
|
||||
...currentData.version_configs
|
||||
};
|
||||
|
||||
const versionList: VersionListItem[] = Object.entries(versions).map(
|
||||
([key, value]: [string, any]) => ({
|
||||
version_no: key,
|
||||
image_name: value.image_name,
|
||||
run_command: value.run_command,
|
||||
is_default: key === currentData.default_version,
|
||||
availableFrameworks: [
|
||||
...(value.build_in_frameworks || []),
|
||||
...(value.custom_framework ? [value.custom_framework] : [])
|
||||
],
|
||||
is_built_in: value.is_built_in || false
|
||||
})
|
||||
);
|
||||
|
||||
setVersionConfigs(versionList);
|
||||
}
|
||||
}, [open, currentData]);
|
||||
|
||||
return (
|
||||
<ScrollerModal
|
||||
open={open}
|
||||
title={intl.formatMessage({ id: 'backend.versions' })}
|
||||
width={600}
|
||||
centered
|
||||
destroyOnHidden
|
||||
closable={true}
|
||||
maskClosable={false}
|
||||
onOk={onClose}
|
||||
onCancel={onClose}
|
||||
styles={{
|
||||
content: {
|
||||
padding: '0 0 16px 0'
|
||||
},
|
||||
header: {
|
||||
padding: 'var(--ant-modal-content-padding)',
|
||||
paddingBottom: '0'
|
||||
},
|
||||
body: {
|
||||
padding: '16px 24px 32px'
|
||||
},
|
||||
footer: {
|
||||
padding: '16px 24px',
|
||||
margin: '0'
|
||||
}
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<VersionInfo versionConfigs={versionConfigs} />
|
||||
</ScrollerModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default VersionInfoModal;
|
||||
@@ -1,76 +0,0 @@
|
||||
import ScrollerModal from '@/components/scroller-modal';
|
||||
import { Form } from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
import BuiltinVersions from '../forms/built-in-versions';
|
||||
|
||||
interface ViewBuiltinVersionsModalProps {
|
||||
open?: boolean;
|
||||
currentData?: any;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const ViewBuiltinVersionsModal: React.FC<ViewBuiltinVersionsModalProps> = ({
|
||||
open,
|
||||
currentData,
|
||||
onClose
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
if (open && currentData) {
|
||||
const builtInVersions = Object.keys(
|
||||
currentData.build_in_version_configs || {}
|
||||
).map((key) => ({
|
||||
version_no: key,
|
||||
image_name: currentData.build_in_version_configs[key].image_name,
|
||||
run_command: currentData.build_in_version_configs[key].run_command,
|
||||
is_default: key === currentData.default_version,
|
||||
build_in_frameworks:
|
||||
currentData.build_in_version_configs[key].build_in_frameworks || [],
|
||||
is_built_in: true
|
||||
}));
|
||||
form.setFieldsValue({
|
||||
build_in_version_configs: builtInVersions
|
||||
});
|
||||
}
|
||||
}, [open, currentData, form]);
|
||||
|
||||
return (
|
||||
<ScrollerModal
|
||||
open={open}
|
||||
style={{
|
||||
top: '20%'
|
||||
}}
|
||||
title="View Built-in Versions"
|
||||
width={550}
|
||||
destroyOnHidden
|
||||
closable={true}
|
||||
maskClosable={false}
|
||||
onOk={onClose}
|
||||
onCancel={onClose}
|
||||
styles={{
|
||||
content: {
|
||||
padding: '0 0 16px 0'
|
||||
},
|
||||
header: {
|
||||
padding: 'var(--ant-modal-content-padding)',
|
||||
paddingBottom: '0'
|
||||
},
|
||||
body: {
|
||||
padding: '16px 24px 32px'
|
||||
},
|
||||
footer: {
|
||||
padding: '16px 24px',
|
||||
margin: '0'
|
||||
}
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<Form form={form}>
|
||||
<BuiltinVersions />
|
||||
</Form>
|
||||
</ScrollerModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewBuiltinVersionsModal;
|
||||
@@ -74,29 +74,6 @@ const ViewerEditor: React.FC<ViewerProps> = forwardRef((props, ref) => {
|
||||
editorRef.current = editor;
|
||||
monacoRef.current = monaco;
|
||||
const uri = monaco.Uri.parse(path);
|
||||
|
||||
// monaco.editor.onDidChangeMarkers((uris: string[]) => {
|
||||
// if (!uris.some((u) => u.toString() === uri.toString())) return;
|
||||
|
||||
// const model = monaco.editor.getModel(uri);
|
||||
// if (!model) return;
|
||||
// console.log('Markers changed:', uris);
|
||||
// const markers = monaco.editor.getModelMarkers({ resource: uri });
|
||||
// const adjusted = markers.map((m: any) => {
|
||||
// if (m._adjusted) return m;
|
||||
// return {
|
||||
// ...m,
|
||||
// _adjusted: true,
|
||||
// severity: monaco.MarkerSeverity.ErrorText
|
||||
// };
|
||||
// });
|
||||
|
||||
// monaco.editor.setModelMarkers(
|
||||
// monaco.editor.getModel(uri),
|
||||
// 'yaml',
|
||||
// adjusted
|
||||
// );
|
||||
// });
|
||||
};
|
||||
|
||||
const formatCode = () => {
|
||||
|
||||
@@ -18,8 +18,8 @@ const SEAL_SCHEMA = jsYaml.DEFAULT_SCHEMA.extend([SealYamlType]);
|
||||
|
||||
export const builtInBackends = {
|
||||
SGLang: 'SGLang',
|
||||
vLLM: 'vllm',
|
||||
MindIE: 'mindie',
|
||||
vLLM: 'vLLM',
|
||||
MindIE: 'MindIE',
|
||||
VoxBox: 'voxbox'
|
||||
};
|
||||
|
||||
@@ -32,25 +32,25 @@ export const builtInBackendLogos: Record<string, string> = {
|
||||
|
||||
export const backendActions = [
|
||||
{
|
||||
label: 'Edit',
|
||||
label: 'common.button.edit',
|
||||
value: 'edit',
|
||||
key: 'edit',
|
||||
icon: icons.EditOutlined,
|
||||
locale: false
|
||||
locale: true,
|
||||
icon: icons.EditOutlined
|
||||
},
|
||||
{
|
||||
label: 'Export YAML',
|
||||
label: 'backend.export.yaml',
|
||||
value: 'yaml',
|
||||
key: 'export',
|
||||
icon: icons.Yaml,
|
||||
locale: false
|
||||
locale: true,
|
||||
icon: icons.Yaml
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
label: 'common.button.delete',
|
||||
value: 'delete',
|
||||
key: 'delete',
|
||||
icon: icons.DeleteOutlined,
|
||||
locale: false,
|
||||
locale: true,
|
||||
danger: true
|
||||
}
|
||||
];
|
||||
@@ -136,6 +136,10 @@ export const frameworks = [
|
||||
{
|
||||
label: 'CoreX',
|
||||
value: 'corex'
|
||||
},
|
||||
{
|
||||
label: 'CPU',
|
||||
value: 'cpu'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -3,11 +3,15 @@ export interface VersionConfigs {
|
||||
run_command: string;
|
||||
is_default: boolean;
|
||||
build_in_frameworks?: string[];
|
||||
custom_framework: string;
|
||||
custom_framework?: string;
|
||||
version_no?: string;
|
||||
is_built_in?: boolean;
|
||||
}
|
||||
|
||||
export interface VersionListItem extends VersionConfigs {
|
||||
availableFrameworks: string[];
|
||||
}
|
||||
|
||||
export interface FormData {
|
||||
backend_name: string;
|
||||
description?: string;
|
||||
@@ -26,4 +30,5 @@ export interface ListItem extends FormData {
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
build_in_version_configs?: Record<string, VersionConfigs>;
|
||||
framework_index_map?: Record<string, string[]>;
|
||||
}
|
||||
|
||||
@@ -38,11 +38,18 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
|
||||
name="health_check_path"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<SealInput.Input trim label={'Health Check Path'}></SealInput.Input>
|
||||
<SealInput.Input
|
||||
trim
|
||||
label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="default_run_command">
|
||||
<SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({
|
||||
id: 'backend.form.defaultExecuteCommand'
|
||||
})}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<FormData>
|
||||
@@ -54,8 +61,10 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
|
||||
onChange={(data: string[]) => {
|
||||
form.setFieldValue('default_backend_param', data);
|
||||
}}
|
||||
btnText={'Add Backend Parameter'}
|
||||
label={'Default Backend Parameters'}
|
||||
btnText={intl.formatMessage({ id: 'backend.form.addParameter' })}
|
||||
label={intl.formatMessage({
|
||||
id: 'backend.form.defaultBackendParameters'
|
||||
})}
|
||||
></ListInput>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
import ThemeTag from '@/components/tags-wrapper/theme-tag';
|
||||
import { Divider, Form } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
import { getGpuColor } from '../config';
|
||||
|
||||
const ItemWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
.title {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
`;
|
||||
|
||||
const RowWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
.label {
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
.drivers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
interface VersionItemProps {
|
||||
data: {
|
||||
build_in_frameworks: string[];
|
||||
custom_framework: string;
|
||||
version_no: string;
|
||||
image_name: string;
|
||||
run_command: string;
|
||||
isBuiltin: boolean;
|
||||
is_default: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
|
||||
return (
|
||||
<ItemWrapper>
|
||||
<div className="title">
|
||||
<span>{data.version_no}</span>
|
||||
{data.is_default && (
|
||||
<ThemeTag
|
||||
color="geekblue"
|
||||
className="font-400"
|
||||
style={{ marginRight: 0 }}
|
||||
>
|
||||
Default
|
||||
</ThemeTag>
|
||||
)}
|
||||
</div>
|
||||
<RowWrapper>
|
||||
<span className="text drivers">
|
||||
{data.build_in_frameworks?.map((item) => {
|
||||
return (
|
||||
<ThemeTag
|
||||
key={item}
|
||||
style={{ marginRight: 0 }}
|
||||
color={getGpuColor(item)}
|
||||
>
|
||||
{item}
|
||||
</ThemeTag>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
</RowWrapper>
|
||||
</ItemWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const BuiltInVersionsForm = () => {
|
||||
const form = Form.useFormInstance();
|
||||
const versionList = Form.useWatch('build_in_version_configs', form) || [];
|
||||
return (
|
||||
<Form.List name="build_in_version_configs">
|
||||
{() => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--ant-color-border)',
|
||||
borderRadius: 'var(--border-radius-base)',
|
||||
padding: '14px'
|
||||
}}
|
||||
>
|
||||
{versionList.map((version: any, index: number) => {
|
||||
return (
|
||||
<>
|
||||
<VersionItem key={index} data={version} />
|
||||
{index < versionList.length - 1 && (
|
||||
<Divider
|
||||
className="divider"
|
||||
style={{
|
||||
marginBlock: 16,
|
||||
borderTop: '1px dashed var(--ant-color-border)'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
);
|
||||
};
|
||||
|
||||
export default BuiltInVersionsForm;
|
||||
@@ -1,4 +1,5 @@
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
|
||||
@@ -14,6 +15,7 @@ type AddModalProps = {
|
||||
};
|
||||
const BackendForm: React.FC<AddModalProps> = forwardRef(
|
||||
({ action, currentData, onFinish }, ref) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm();
|
||||
const [activeKey, setActiveKey] = React.useState<string[]>([]);
|
||||
|
||||
@@ -33,7 +35,6 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
|
||||
|
||||
useEffect(() => {
|
||||
if (currentData) {
|
||||
console.log('currentData:', currentData);
|
||||
form.setFieldsValue(currentData);
|
||||
}
|
||||
}, [currentData]);
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import ListInput from '@/components/list-input';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { Form } from 'antd';
|
||||
import React from 'react';
|
||||
import { FormData } from '../config/types';
|
||||
|
||||
type AddModalProps = {
|
||||
action: PageActionType;
|
||||
};
|
||||
const ParametersForm: React.FC<AddModalProps> = ({ action }) => {
|
||||
const form = Form.useFormInstance();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item<FormData>
|
||||
name="default_backend_param"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<ListInput
|
||||
dataList={form.getFieldValue('default_backend_param') || []}
|
||||
onChange={(data: string[]) => {
|
||||
form.setFieldValue('default_backend_param', data);
|
||||
}}
|
||||
btnText={'Add Backend Parameter'}
|
||||
label={'Default Backend Parameters'}
|
||||
></ListInput>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParametersForm;
|
||||
@@ -0,0 +1,185 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import BaseSelect from '@/components/seal-form/base/select';
|
||||
import ThemeTag from '@/components/tags-wrapper/theme-tag';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Empty } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { frameworks, getGpuColor } from '../config';
|
||||
import { VersionListItem } from '../config/types';
|
||||
|
||||
const ItemWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--ant-border-radius);
|
||||
padding: 12px 16px;
|
||||
&:hover {
|
||||
background-color: var(--ant-color-fill-tertiary);
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
`;
|
||||
|
||||
const RowWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
.label {
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
.drivers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const InfoItem = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 8px;
|
||||
.label {
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
`;
|
||||
|
||||
const ListWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const FilterBox = styled.div`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
background-color: var(--ant-color-bg-container);
|
||||
`;
|
||||
|
||||
interface VersionItemProps {
|
||||
data: VersionListItem;
|
||||
}
|
||||
|
||||
export const VersionItem: React.FC<VersionItemProps> = ({ data }) => {
|
||||
const intl = useIntl();
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
<RowWrapper>
|
||||
{data.image_name && (
|
||||
<InfoItem>
|
||||
<span className="label">
|
||||
{intl.formatMessage({ id: 'backend.imageName' })}:
|
||||
</span>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{data.is_built_in
|
||||
? 'Selected dynamically at runtime'
|
||||
: data.image_name}
|
||||
</AutoTooltip>
|
||||
</InfoItem>
|
||||
)}
|
||||
{data.run_command && (
|
||||
<InfoItem>
|
||||
<span className="label">
|
||||
{intl.formatMessage({ id: 'backend.runCommand' })}:
|
||||
</span>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{data.run_command}
|
||||
</AutoTooltip>
|
||||
</InfoItem>
|
||||
)}
|
||||
<InfoItem>
|
||||
<span className="label">
|
||||
{intl.formatMessage({ id: 'backend.framework' })}:
|
||||
</span>
|
||||
<span className="text drivers">
|
||||
{data.availableFrameworks?.map((item) => {
|
||||
return (
|
||||
<ThemeTag
|
||||
key={item}
|
||||
style={{ marginRight: 0 }}
|
||||
color={getGpuColor(item)}
|
||||
>
|
||||
{item}
|
||||
</ThemeTag>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
</InfoItem>
|
||||
</RowWrapper>
|
||||
</ItemWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const VersionList: React.FC<{ versionConfigs: VersionListItem[] }> = ({
|
||||
versionConfigs
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const [dataList, setDataList] = useState<VersionListItem[]>(versionConfigs);
|
||||
|
||||
const handleChange = (value: string) => {
|
||||
if (value) {
|
||||
const filtered = versionConfigs.filter((item) =>
|
||||
item.availableFrameworks?.includes(value)
|
||||
);
|
||||
setDataList(filtered);
|
||||
} else {
|
||||
setDataList(versionConfigs);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FilterBox>
|
||||
<BaseSelect
|
||||
allowClear
|
||||
placeholder={intl.formatMessage({ id: 'backend.filter.framework' })}
|
||||
options={frameworks}
|
||||
style={{ width: '100%' }}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FilterBox>
|
||||
<ListWrapper>
|
||||
{dataList.length ? (
|
||||
dataList.map((version: VersionListItem, index: number) => {
|
||||
return <VersionItem key={index} data={version} />;
|
||||
})
|
||||
) : (
|
||||
<Empty
|
||||
style={{ width: '100%' }}
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description="Data not found"
|
||||
/>
|
||||
)}
|
||||
</ListWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VersionList;
|
||||
@@ -1,16 +1,15 @@
|
||||
import AutoTooltip from '@/components/auto-tooltip';
|
||||
import CollapsibleContainer from '@/components/collapse-container';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import useAppUtils from '@/hooks/use-app-utils';
|
||||
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Divider, Form, Radio } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Empty, Form, Select, Tag } from 'antd';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { frameworks } from '../config';
|
||||
import { ListItem } from '../config/types';
|
||||
import { VersionItem } from './built-in-versions';
|
||||
|
||||
const Box = styled.div`
|
||||
display: grid;
|
||||
@@ -26,86 +25,66 @@ const Label = styled.span`
|
||||
color: var(--ant-color-text-secondary);
|
||||
`;
|
||||
|
||||
const ImageInner = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 20px;
|
||||
const DefaultTag = styled(Tag)`
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
color: var(--ant-color-text);
|
||||
`;
|
||||
|
||||
const Title = styled.div`
|
||||
position: sticky;
|
||||
top: -16px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--ant-color-bg-container);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const VersionItemWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--ant-border-radius);
|
||||
background-color: var(--ant-color-fill-quaternary);
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
`;
|
||||
|
||||
type AddModalProps = {
|
||||
action: PageActionType;
|
||||
currentData?: ListItem;
|
||||
activeKey?: number[];
|
||||
activeKey?: Array<string | number>;
|
||||
};
|
||||
const VersionsForm: React.FC<AddModalProps> = ({
|
||||
action,
|
||||
currentData,
|
||||
activeKey
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const { getRuleMessage } = useAppUtils();
|
||||
const [defaultVersion, setDefaultVersion] = React.useState<string | null>(
|
||||
null
|
||||
);
|
||||
const defaultCollapseKey =
|
||||
action === 'edit' ? new Set<number>() : new Set([0]);
|
||||
const form = Form.useFormInstance();
|
||||
const version_configs = Form.useWatch('version_configs', form);
|
||||
const buildInVersionConfigs = Form.useWatch('build_in_version_configs', form);
|
||||
const [collapseKey, setCollapseKey] =
|
||||
React.useState<Set<number>>(defaultCollapseKey);
|
||||
React.useState<Set<number | string>>(defaultCollapseKey);
|
||||
const versionList = [
|
||||
{
|
||||
version_no: '',
|
||||
image_name: '',
|
||||
run_command: '',
|
||||
isBuiltin: false,
|
||||
is_default: true
|
||||
is_default: false
|
||||
}
|
||||
];
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
const handleVersionOnBlur = (
|
||||
e: React.FocusEvent<HTMLInputElement>,
|
||||
index: number
|
||||
) => {
|
||||
const inputValue = e.target.value.trim() || '';
|
||||
const versions = form.getFieldValue('version_configs') || [];
|
||||
console.log('inputValue:', version_configs, currentData);
|
||||
const isDuplicate =
|
||||
_.get(currentData, ['build_in_version_configs', inputValue]) ||
|
||||
versions.some(
|
||||
(version: any, idx: number) =>
|
||||
version?.version_no === inputValue && idx !== index
|
||||
);
|
||||
if (isDuplicate) {
|
||||
const updatedVersions = [...versions];
|
||||
updatedVersions[index].version_no = '';
|
||||
form.setFieldValue('version_configs', updatedVersions);
|
||||
}
|
||||
};
|
||||
const validVersions = useMemo(() => {
|
||||
return (version_configs || [])
|
||||
.filter((v: any) => v.version_no)
|
||||
?.map((v: any) => {
|
||||
return {
|
||||
label: v.version_no,
|
||||
value: v.version_no
|
||||
};
|
||||
});
|
||||
}, [version_configs]);
|
||||
|
||||
const onToggle = (open: boolean, key: number) => {
|
||||
setCollapseKey(open ? new Set([key]) : new Set());
|
||||
@@ -123,23 +102,11 @@ const VersionsForm: React.FC<AddModalProps> = ({
|
||||
form.setFieldValue('version_configs', [...versions, newVersion]);
|
||||
};
|
||||
|
||||
const remove = (versions: any[], index: number) => {
|
||||
const updatedVersions = versions.filter(
|
||||
(_: any, idx: number) => idx !== index
|
||||
);
|
||||
// If the removed version was the default, set the first version as default
|
||||
if (versions[index].is_default && updatedVersions.length > 0) {
|
||||
updatedVersions[0].is_default = true;
|
||||
}
|
||||
form.setFieldValue('version_configs', updatedVersions);
|
||||
};
|
||||
|
||||
const handleAdd = async () => {
|
||||
try {
|
||||
const isValid = await form.validateFields(['version_configs'], {
|
||||
recursive: true
|
||||
});
|
||||
console.log('isValid:', isValid, version_configs);
|
||||
if (isValid) {
|
||||
add();
|
||||
setTimeout(() => {
|
||||
@@ -154,6 +121,16 @@ const VersionsForm: React.FC<AddModalProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleDefaultChange = (value: string) => {
|
||||
const versions = form.getFieldValue('version_configs') || [];
|
||||
const updatedVersions = versions.map((version: any, idx: number) => ({
|
||||
...version,
|
||||
is_default: version.version_no === value
|
||||
}));
|
||||
form.setFieldValue('version_configs', updatedVersions);
|
||||
setDefaultVersion(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const versions = form.getFieldValue('version_configs') || [];
|
||||
|
||||
@@ -168,141 +145,185 @@ const VersionsForm: React.FC<AddModalProps> = ({
|
||||
}
|
||||
}, [activeKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentData?.default_version) {
|
||||
setDefaultVersion(currentData.default_version);
|
||||
}
|
||||
}, [currentData?.default_version]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item name="version_configs" hidden></Form.Item>
|
||||
<Form.Item name="build_in_version_configs" hidden></Form.Item>
|
||||
<Title>
|
||||
<span className="flex-center gap-8">
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'backend.form.versionConfig' })}
|
||||
</span>
|
||||
<Button onClick={handleAdd} type="link">
|
||||
<PlusOutlined /> {intl.formatMessage({ id: 'backend.addVersion' })}
|
||||
</Button>
|
||||
</span>
|
||||
{!currentData?.is_build_in && (
|
||||
<Select
|
||||
prefix={
|
||||
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
|
||||
{intl.formatMessage({ id: 'backend.isDefault' })}:
|
||||
</span>
|
||||
}
|
||||
value={defaultVersion}
|
||||
notFoundContent={
|
||||
<Empty
|
||||
style={{ marginBlock: 8 }}
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={intl.formatMessage({
|
||||
id: 'backend.form.noVersion'
|
||||
})}
|
||||
/>
|
||||
}
|
||||
placeholder={intl.formatMessage({ id: 'backend.version' })}
|
||||
options={validVersions}
|
||||
style={{ width: 200, fontWeight: 400 }}
|
||||
allowClear
|
||||
onChange={handleDefaultChange}
|
||||
/>
|
||||
)}
|
||||
</Title>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
}}
|
||||
>
|
||||
<Title>
|
||||
<span>Versions Config</span>
|
||||
<Button onClick={handleAdd} variant="filled" color="default">
|
||||
<PlusOutlined /> Add Version
|
||||
</Button>
|
||||
</Title>
|
||||
{buildInVersionConfigs?.map((item: any, index: number) => (
|
||||
<>
|
||||
<VersionItemWrapper>
|
||||
<VersionItem data={item} />
|
||||
</VersionItemWrapper>
|
||||
<Divider
|
||||
className="divider"
|
||||
style={{
|
||||
borderTop: '1px dashed var(--ant-color-border)'
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
))}
|
||||
{version_configs?.map((item: any, index: number) => (
|
||||
<>
|
||||
<CollapsibleContainer
|
||||
collapsible={true}
|
||||
showExpandIcon={true}
|
||||
key={index}
|
||||
defaultOpen
|
||||
open={collapseKey.has(index)}
|
||||
title={
|
||||
<Label>
|
||||
<span>Version:</span>
|
||||
<span>{item.version_no}</span>
|
||||
</Label>
|
||||
}
|
||||
subtitle={
|
||||
item.image_name && (
|
||||
<ImageInner>
|
||||
<span>Image:</span>
|
||||
<AutoTooltip ghost maxWidth={280}>
|
||||
{item.image_name}
|
||||
</AutoTooltip>
|
||||
</ImageInner>
|
||||
)
|
||||
}
|
||||
onToggle={(open) => onToggle(open, index)}
|
||||
deleteBtn={false}
|
||||
right={
|
||||
<div className="flex-center gap-8">
|
||||
<span
|
||||
className="flex-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{!currentData?.is_build_in && (
|
||||
<Form.Item
|
||||
name={['version_configs', index, 'is_default']}
|
||||
valuePropName="checked"
|
||||
initialValue={false}
|
||||
noStyle
|
||||
>
|
||||
<Radio
|
||||
onChange={(e: any) =>
|
||||
handleSetDefaultVersion(e, index)
|
||||
}
|
||||
>
|
||||
Default Version
|
||||
</Radio>
|
||||
</Form.Item>
|
||||
)}
|
||||
</span>
|
||||
{(version_configs.length > 1 || currentData?.is_build_in) && (
|
||||
<Button
|
||||
size="small"
|
||||
shape="circle"
|
||||
onClick={() => remove(version_configs, index)}
|
||||
>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Box>
|
||||
<Form.Item
|
||||
name={['version_configs', index, 'version_no']}
|
||||
rules={[{ required: true, message: 'Version is required' }]}
|
||||
>
|
||||
<SealInput.Input
|
||||
trim
|
||||
label="Version"
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['version_configs', index, 'image_name']}
|
||||
rules={[
|
||||
{ required: true, message: 'Image Name is required' }
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
trim
|
||||
label="Image Name"
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</Box>
|
||||
<Form.Item name={['version_configs', index, 'run_command']}>
|
||||
<SealInput.TextArea label="Execution Command"></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={['version_configs', index, 'custom_framework']}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<SealSelect label="Framework" options={frameworks} />
|
||||
</Form.Item>
|
||||
</CollapsibleContainer>
|
||||
{index < version_configs.length - 1 && (
|
||||
<Divider
|
||||
className="divider"
|
||||
<Form.List name="version_configs">
|
||||
{(
|
||||
fields: Array<{ key: React.Key; name: number }>,
|
||||
{ add, remove }
|
||||
) => {
|
||||
const versionConfigs = form.getFieldValue('version_configs');
|
||||
return fields?.map(({ key, name }) => (
|
||||
<div
|
||||
key={name}
|
||||
style={{
|
||||
borderTop: '1px dashed var(--ant-color-border)'
|
||||
borderRadius: 'var(--ant-border-radius)',
|
||||
border: '1px solid var(--ant-color-split)'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
>
|
||||
<CollapsibleContainer
|
||||
collapsible={true}
|
||||
showExpandIcon={true}
|
||||
key={name}
|
||||
defaultOpen
|
||||
styles={{
|
||||
body: collapseKey.has(name) ? { padding: 16 } : {},
|
||||
content: { paddingTop: 0 },
|
||||
header: {
|
||||
backgroundColor: 'unset'
|
||||
}
|
||||
}}
|
||||
open={collapseKey.has(name)}
|
||||
title={
|
||||
<Label>
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'backend.version' })}:
|
||||
</span>
|
||||
<span>{versionConfigs[name]?.version_no}</span>
|
||||
{versionConfigs[name]?.is_default && (
|
||||
<DefaultTag>
|
||||
{intl.formatMessage({ id: 'backend.isDefault' })}
|
||||
</DefaultTag>
|
||||
)}
|
||||
</Label>
|
||||
}
|
||||
onToggle={(open) => onToggle(open, name)}
|
||||
deleteBtn={false}
|
||||
right={
|
||||
<div className="flex-center gap-8">
|
||||
<span
|
||||
className="flex-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{!currentData?.is_build_in && (
|
||||
<Form.Item
|
||||
name={[name, 'is_default']}
|
||||
valuePropName="checked"
|
||||
initialValue={false}
|
||||
noStyle
|
||||
></Form.Item>
|
||||
)}
|
||||
</span>
|
||||
{(fields.length > 1 || currentData?.is_build_in) && (
|
||||
<Button
|
||||
size="small"
|
||||
shape="circle"
|
||||
onClick={(e: any) => remove(name)}
|
||||
>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Box>
|
||||
<Form.Item
|
||||
name={[name, 'version_no']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage(`input`, 'backend.version')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
trim
|
||||
label={intl.formatMessage({ id: 'backend.version' })}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[name, 'image_name']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage(`input`, 'backend.imageName')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealInput.Input
|
||||
trim
|
||||
label={intl.formatMessage({ id: 'backend.imageName' })}
|
||||
required
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</Box>
|
||||
<Form.Item
|
||||
name={[name, 'custom_framework']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: getRuleMessage('select', 'backend.framework')
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealSelect
|
||||
label={intl.formatMessage({ id: 'backend.framework' })}
|
||||
options={frameworks}
|
||||
required
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[name, 'run_command']}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<SealInput.TextArea
|
||||
label={intl.formatMessage({ id: 'backend.runCommand' })}
|
||||
></SealInput.TextArea>
|
||||
</Form.Item>
|
||||
</CollapsibleContainer>
|
||||
</div>
|
||||
));
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
} from './apis';
|
||||
import AddModal from './components/add-modal';
|
||||
import BackendCardList from './components/backend-list';
|
||||
import ViewBuiltinVersionsModal from './components/view-builtin-versions-modal';
|
||||
import VersionInfoModal from './components/version-info-modal';
|
||||
import { json2Yaml, yaml2Json } from './config';
|
||||
import { FormData, ListItem } from './config/types';
|
||||
import useExportYAML from './hooks/use-export-yaml';
|
||||
@@ -54,11 +54,10 @@ const BackendList = () => {
|
||||
action: PageActionType;
|
||||
currentData?: Partial<ListItem>;
|
||||
}>({ open: false, action: 'create' });
|
||||
const [openViewBuiltinVersionsModal, setOpenViewBuiltinVersionsModal] =
|
||||
useState<{
|
||||
open: boolean;
|
||||
currentData?: Partial<ListItem>;
|
||||
}>({ open: false });
|
||||
const [openVersionInfoModal, setOpenVersionInfoModal] = useState<{
|
||||
open: boolean;
|
||||
currentData?: Partial<ListItem>;
|
||||
}>({ open: false });
|
||||
|
||||
// build_in_version_configs is read-only, but needs to be included when updating
|
||||
const handleOnSubmit = async (values: FormData) => {
|
||||
@@ -133,10 +132,9 @@ const BackendList = () => {
|
||||
});
|
||||
} else if (item.action === 'export') {
|
||||
// Export YAML action
|
||||
console.log('Export YAML for:', item.data);
|
||||
exportYAML(item.data);
|
||||
} else if (item.action === 'view_versions') {
|
||||
setOpenViewBuiltinVersionsModal({
|
||||
setOpenVersionInfoModal({
|
||||
open: true,
|
||||
currentData: item.data
|
||||
});
|
||||
@@ -156,13 +154,14 @@ const BackendList = () => {
|
||||
extra={[]}
|
||||
>
|
||||
<FilterBar
|
||||
showDeleteButton={false}
|
||||
marginBottom={22}
|
||||
marginTop={30}
|
||||
width={{
|
||||
input: 300
|
||||
}}
|
||||
inputHolder={intl.formatMessage({ id: 'common.filter.name' })}
|
||||
buttonText={'Add Backend'}
|
||||
buttonText={intl.formatMessage({ id: 'backend.button.add' })}
|
||||
handleDeleteByBatch={handleDeleteBatch}
|
||||
handleClickPrimary={handleAddBackend}
|
||||
handleSearch={handleSearch}
|
||||
@@ -187,20 +186,20 @@ const BackendList = () => {
|
||||
open={openModalStatus.open}
|
||||
title={
|
||||
openModalStatus.action === 'create'
|
||||
? 'Create Backend'
|
||||
: 'Edit Backend'
|
||||
? intl.formatMessage({ id: 'backend.button.add' })
|
||||
: intl.formatMessage({ id: 'backend.button.edit' })
|
||||
}
|
||||
></AddModal>
|
||||
<ViewBuiltinVersionsModal
|
||||
open={openViewBuiltinVersionsModal.open}
|
||||
currentData={openViewBuiltinVersionsModal.currentData as ListItem}
|
||||
<VersionInfoModal
|
||||
open={openVersionInfoModal.open}
|
||||
currentData={openVersionInfoModal.currentData as ListItem}
|
||||
onClose={() =>
|
||||
setOpenViewBuiltinVersionsModal({
|
||||
setOpenVersionInfoModal({
|
||||
open: false,
|
||||
currentData: undefined
|
||||
})
|
||||
}
|
||||
></ViewBuiltinVersionsModal>
|
||||
></VersionInfoModal>
|
||||
<DeleteModal ref={modalRef}></DeleteModal>
|
||||
</PageContainer>
|
||||
);
|
||||
Reference in New Issue
Block a user