diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index cf4e1aaf..faa18dba 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -155,7 +155,7 @@ export default [ component: './AutoML/List/index', }, { - name: '自动机器学习详情', + name: '实验详情', path: 'info/:id', component: './AutoML/Info/index', }, @@ -170,7 +170,7 @@ export default [ component: './AutoML/Create/index', }, { - name: '实验实例', + name: '实验实例详情', path: 'instance/:autoMLId/:id', component: './AutoML/Instance/index', }, @@ -261,25 +261,46 @@ export default [ path: '', component: './ModelDeployment/List', }, - { - name: '服务详情', - path: 'serviceInfo/:id', - component: './ModelDeployment/ServiceInfo', - }, - { - name: '服务版本详情', - path: 'versionInfo/:id', - component: './ModelDeployment/VersionInfo', - }, { name: '创建推理服务', path: 'createService', component: './ModelDeployment/CreateService', }, { - name: '新增服务版本', - path: 'addVersion/:id', - component: './ModelDeployment/CreateVersion', + name: '编辑推理服务', + path: 'editService/:serviceId', + component: './ModelDeployment/CreateService', + }, + { + name: '服务详情', + path: 'serviceInfo/:serviceId', + routes: [ + { + name: '服务详情', + path: '', + component: './ModelDeployment/ServiceInfo', + }, + { + name: '新增服务版本', + path: 'createVersion', + component: './ModelDeployment/CreateVersion', + }, + { + name: '更新服务版本', + path: 'updateVersion', + component: './ModelDeployment/CreateVersion', + }, + { + name: '重启服务版本', + path: 'restartVersion', + component: './ModelDeployment/CreateVersion', + }, + { + name: '服务版本详情', + path: 'versionInfo/:id', + component: './ModelDeployment/VersionInfo', + }, + ], }, ], }, diff --git a/react-ui/src/hooks/sessionStorage.ts b/react-ui/src/hooks/sessionStorage.ts index 7f528cfe..8cf3c921 100644 --- a/react-ui/src/hooks/sessionStorage.ts +++ b/react-ui/src/hooks/sessionStorage.ts @@ -1,3 +1,9 @@ +/* + * @Author: 赵伟 + * @Date: 2024-11-06 14:53:37 + * @Description: SessionStorage hook + */ + import SessionStorage from '@/utils/sessionStorage'; import { useEffect, useState } from 'react'; diff --git a/react-ui/src/pages/AutoML/Create/index.tsx b/react-ui/src/pages/AutoML/Create/index.tsx index 1dc2c3cc..93e4c2c6 100644 --- a/react-ui/src/pages/AutoML/Create/index.tsx +++ b/react-ui/src/pages/AutoML/Create/index.tsx @@ -4,7 +4,6 @@ * @Description: 创建服务版本 */ import PageTitle from '@/components/PageTitle'; - import { AutoMLEnsembleClass, AutoMLTaskType } from '@/enums'; import { addAutoMLReq, getAutoMLInfoReq, updateAutoMLReq } from '@/services/autoML'; import { convertEmptyStringToUndefined, parseJsonText, trimCharacter } from '@/utils'; diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx index 73a2006f..90ad4d15 100644 --- a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx +++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx @@ -167,7 +167,7 @@ function EditorCreate() { - + - + (undefined); const { message } = App.useApp(); + const params = useParams(); + const serviceId = params.serviceId; useEffect(() => { - const res = SessionStorage.getItem(SessionStorage.serviceInfoKey, true); - if (res) { - setOperationType(res.operationType); - setServiceInfo(res); - form.setFieldsValue(pick(res, ['service_name', 'service_type', 'description'])); + if (serviceId) { + getServiceInfo(); } - return () => { - SessionStorage.removeItem(SessionStorage.serviceInfoKey); - }; }, []); + // 获取服务详情 + const getServiceInfo = async () => { + const [res] = await to(getServiceInfoReq(serviceId)); + if (res && res.data) { + setServiceInfo(res.data); + const { service_type, service_name, description } = res.data; + form.setFieldsValue({ + service_type, + service_name, + description, + }); + } + }; + // 创建、更新服务 const createService = async (formData: FormData) => { - const request = - operationType === ServiceOperationType.Create ? createServiceReq : updateServiceReq; - const params = - operationType === ServiceOperationType.Create - ? formData - : { - id: serviceInfo?.id, - ...formData, - }; + const request = serviceId ? updateServiceReq : createServiceReq; + const params = serviceId + ? { + id: serviceId, + ...formData, + } + : formData; const [res] = await to(request(params)); if (res && res.data) { message.success('操作成功'); navigate(-1); - setTimeout(() => { - window.postMessage({ type: createServiceVersionMessage, payload: res.data.id }); - }, 500); + if (!serviceId) { + setTimeout(() => { + window.postMessage({ type: createServiceVersionMessage, payload: res.data.id }); + }, 500); + } } }; @@ -74,8 +81,8 @@ function CreateService() { navigate(-1); }; - const disabled = operationType !== ServiceOperationType.Create; - const title = operationType === ServiceOperationType.Create ? '创建推理服务' : '更新推理服务'; + const disabled = !!serviceId; + const title = serviceId ? '编辑推理服务' : '创建推理服务'; return (
diff --git a/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx b/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx index 56aeb333..06a71073 100644 --- a/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx +++ b/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx @@ -27,12 +27,7 @@ import { useNavigate, useParams } from '@umijs/max'; import { App, Button, Col, Flex, Form, Input, InputNumber, Row, Select } from 'antd'; import { omit, pick } from 'lodash'; import { useEffect, useState } from 'react'; -import { - CreateServiceVersionFrom, - ServiceData, - ServiceOperationType, - ServiceVersionData, -} from '../types'; +import { CreateServiceVersionFrom, ServiceOperationType, ServiceVersionData } from '../types'; import styles from './index.less'; // 表单数据 @@ -49,6 +44,11 @@ export type FormData = { env_variables: { key: string; value: string }[]; // 环境变量 }; +type ServiceVersionCache = ServiceVersionData & { + operationType: ServiceOperationType; + lastPage: CreateServiceVersionFrom; +}; + function CreateServiceVersion() { const navigate = useNavigate(); const [form] = Form.useForm(); @@ -56,18 +56,16 @@ function CreateServiceVersion() { const [operationType, setOperationType] = useState(ServiceOperationType.Create); const [lastPage, setLastPage] = useState(CreateServiceVersionFrom.ServiceInfo); const { message } = App.useApp(); - const [serviceInfo, setServiceInfo] = useState(undefined); + // const [serviceInfo, setServiceInfo] = useState(undefined); const [versionInfo, setVersionInfo] = useState(undefined); const params = useParams(); - const id = params.id; + const serviceId = params.serviceId; useEffect(() => { - const res: - | (ServiceVersionData & { - operationType: ServiceOperationType; - lastPage: CreateServiceVersionFrom; - }) - | undefined = SessionStorage.getItem(SessionStorage.serviceVersionInfoKey, true); + const res: ServiceVersionCache | undefined = SessionStorage.getItem( + SessionStorage.serviceVersionInfoKey, + true, + ); if (res) { setOperationType(res.operationType); setLastPage(res.lastPage); @@ -109,9 +107,9 @@ function CreateServiceVersion() { // 获取服务详情 const getServiceInfo = async () => { - const [res] = await to(getServiceInfoReq(id)); + const [res] = await to(getServiceInfoReq(serviceId)); if (res && res.data) { - setServiceInfo(res.data); + // setServiceInfo(res.data); form.setFieldsValue({ service_name: res.data.service_name, }); @@ -144,12 +142,15 @@ function CreateServiceVersion() { showValue: 'show_value', }) : undefined, - service_id: serviceInfo?.id, + service_id: serviceId, }; const params = operationType === ServiceOperationType.Create - ? object + ? { + ...object, + deploy_type: 'web', + } : { id: versionInfo?.id, rerun: operationType === ServiceOperationType.Restart ? true : false, @@ -168,7 +169,7 @@ function CreateServiceVersion() { if (lastPage === CreateServiceVersionFrom.ServiceInfo) { navigate(-1); } else { - navigate(`/modelDeployment/serviceInfo/${serviceInfo?.id}`, { replace: true }); + navigate(`serviceInfo/${serviceId}`, { replace: true }); } } }; diff --git a/react-ui/src/pages/ModelDeployment/List/index.tsx b/react-ui/src/pages/ModelDeployment/List/index.tsx index 21e9b514..6e61c3ab 100644 --- a/react-ui/src/pages/ModelDeployment/List/index.tsx +++ b/react-ui/src/pages/ModelDeployment/List/index.tsx @@ -116,23 +116,18 @@ function ModelDeployment() { }; // 创建、更新服务 - const createService = (type: ServiceOperationType, record?: ServiceData) => { - SessionStorage.setItem( - SessionStorage.serviceInfoKey, - { - ...record, - operationType: type, - }, - true, - ); - + const createService = (record?: ServiceData) => { setCacheState({ pagination, searchText, serviceType: serviceType, }); - navigate(`/modelDeployment/createService`); + if (record) { + navigate(`editService/${record.id}`); + } else { + navigate('createService'); + } }; // 查看详情 @@ -143,7 +138,7 @@ function ModelDeployment() { serviceType: serviceType, }); - navigate(`/modelDeployment/serviceInfo/${record.id}`); + navigate(`serviceInfo/${record.id}`); }; const handleMessage = (e: MessageEvent) => { @@ -172,7 +167,7 @@ function ModelDeployment() { true, ); - navigate(`/modelDeployment/addVersion/${serviceId}`); + navigate(`serviceInfo/${serviceId}/createVersion`); }; // 分页切换 @@ -248,7 +243,7 @@ function ModelDeployment() { size="small" key="edit" icon={} - onClick={() => createService(ServiceOperationType.Update, record)} + onClick={() => createService(record)} > 编辑 @@ -307,7 +302,7 @@ function ModelDeployment() {