diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index 8ec050ae..ec2d251f 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -141,12 +141,18 @@ export default [ { name: '实验对比', path: 'compare', - component: './Experiment/Comparison/index', - }, - { - name: '实验可视化对比', - path: 'compare-visual', - component: './Experiment/Aim/index', + routes: [ + { + name: '实验对比', + path: '', + component: './Experiment/Comparison/index', + }, + { + name: '可视化对比', + path: 'compare-visual', + component: './Experiment/Aim/index', + }, + ], }, { name: '可视化', @@ -223,7 +229,18 @@ export default [ { name: '实验实例详情', path: 'instance/:experimentId/:id', - component: './HyperParameter/Instance/index', + routes: [ + { + name: '实验实例详情', + path: '', + component: './HyperParameter/Instance/index', + }, + { + name: '可视化对比', + path: 'compare-visual', + component: './HyperParameter/Aim/index', + }, + ], }, ], }, diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx index 686c495d..91b0389b 100644 --- a/react-ui/src/app.tsx +++ b/react-ui/src/app.tsx @@ -21,6 +21,7 @@ import { } from './services/session'; import './styles/menu.less'; import { needAuth } from './utils'; +// import { closeAllModals } from './utils/modal'; import { gotoLoginPage } from './utils/ui'; export { requestConfig as request } from './requestConfig'; @@ -96,6 +97,7 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => { }, onPageChange: () => { const { location } = history; + // closeAllModals(); // 如果没有登录，重定向到 login if (!initialState?.currentUser && needAuth(location.pathname)) { gotoLoginPage(); diff --git a/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx index c21984ac..4714a4f0 100644 --- a/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx @@ -98,7 +98,7 @@ function ResourcePage({ resourceType }: ResourcePageProps) { dataType={activeType} dataTag={activeTag} initialSearchText={cacheState?.searchText} - initialPagination={cacheState?.initialPagination} + initialPagination={cacheState?.pagination} setCacheState={setCacheState} > diff --git a/react-ui/src/pages/Experiment/Comparison/index.tsx b/react-ui/src/pages/Experiment/Comparison/index.tsx index 200b4ba1..d10e8069 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.tsx +++ b/react-ui/src/pages/Experiment/Comparison/index.tsx @@ -77,7 +77,7 @@ function ExperimentComparison() { const url = res.data; // window.open(url, '_blank'); SessionStorage.setItem(SessionStorage.aimUrlKey, url); - navigate('../compare-visual'); + navigate('compare-visual'); } }; diff --git a/react-ui/src/pages/Experiment/Info/index.jsx b/react-ui/src/pages/Experiment/Info/index.jsx index 1e96c34c..56f7e979 100644 --- a/react-ui/src/pages/Experiment/Info/index.jsx +++ b/react-ui/src/pages/Experiment/Info/index.jsx @@ -3,7 +3,6 @@ import { ExperimentStatus } from '@/enums'; import { useStateRef } from '@/hooks/useStateRef'; import { useVisible } from '@/hooks/useVisible'; import { getExperimentIns } from '@/services/experiment/index.js'; -import { getWorkflowById } from '@/services/pipeline/index.js'; import themes from '@/styles/theme.less'; import { fittingString, parseJsonText } from '@/utils'; import { formatDate } from '@/utils/date'; @@ -40,7 +39,7 @@ function ExperimentText() { useEffect(() => { initGraph(); - getWorkflow(); + getExperimentInstance(); return () => { if (evtSourceRef.current) { @@ -66,38 +65,54 @@ function ExperimentText() { }, []); // 获取流水线模版 - const getWorkflow = async () => { - const [res] = await to(getWorkflowById(locationParams.workflowId)); - if (res && res.data && res.data.dag) { - try { - const dag = JSON.parse(res.data.dag); - dag.nodes.forEach((item) => { - item.in_parameters = JSON.parse(item.in_parameters); - item.out_parameters = JSON.parse(item.out_parameters); - item.control_strategy = JSON.parse(item.control_strategy); - item.imgName = item.img.slice(0, item.img.length - 4); - }); - workflowRef.current = dag; - getExperimentInstance(); - } catch (error) { - // JSON.parse 错误 - console.error('JSON.parse error: ', error); - } - } - }; + // const getWorkflow = async () => { + // const [res] = await to(getWorkflowById(locationParams.workflowId)); + // if (res && res.data && res.data.dag) { + // try { + // const dag = JSON.parse(res.data.dag); + // dag.nodes.forEach((item) => { + // item.in_parameters = JSON.parse(item.in_parameters); + // item.out_parameters = JSON.parse(item.out_parameters); + // item.control_strategy = JSON.parse(item.control_strategy); + // item.imgName = item.img.slice(0, item.img.length - 4); + // }); + // workflowRef.current = dag; + // getExperimentInstance(); + // } catch (error) { + // // JSON.parse 错误 + // console.error('JSON.parse error: ', error); + // } + // } + // }; // 获取实验实例 const getExperimentInstance = async () => { const [res] = await to(getExperimentIns(locationParams.id)); - if (res && res.data && workflowRef.current) { + if (res && res.data) { setExperimentIns(res.data); - const { status, nodes_status, argo_ins_ns, argo_ins_name, finish_time } = res.data; - const workflowData = workflowRef.current; + const { status, nodes_status, argo_ins_ns, argo_ins_name, finish_time, dag } = res.data; + if (!dag) { + return; + } + + const workflow = parseJsonText(dag); const experimentStatusObjs = parseJsonText(nodes_status); + if (!workflow || !workflow.nodes) { + return; + } + + workflow.nodes.forEach((item) => { + item.in_parameters = parseJsonText(item.in_parameters); + item.out_parameters = parseJsonText(item.out_parameters); + item.control_strategy = parseJsonText(item.control_strategy); + item.imgName = item.img.slice(0, item.img.length - 4); + }); + workflowRef.current = workflow; + if (experimentStatusObjs) { // 更新各个节点 - workflowData.nodes.forEach((item) => { - const experimentNode = experimentStatusObjs?.[item.id]; + workflow.nodes.forEach((item) => { + const experimentNode = experimentStatusObjs[item.id]; updateWorkflowNode(item, experimentNode); }); @@ -113,20 +128,20 @@ function ExperimentText() { } // 绘制图 - getGraphData(workflowData, true); + getGraphData(workflow, true); if (status === ExperimentStatus.Pending) { // 如果状态是 Pending, 打开第一个节点 - const node = workflowData.nodes[0]; + const node = workflow.nodes[0]; if (node) { setExperimentNodeData(node); openPropsDrawer(); } } else if (status === ExperimentStatus.Running) { - // 如果状态是 Running，打开第一个运行中的节点，如果没有运行中的节点，则打开第一个节点 + // 如果状态是 Running，打开第一个 Running 或者 pending 的节点，如果没有，则打开第一个节点 const node = - workflowData.nodes.find((item) => item.experimentStatus === ExperimentStatus.Running) ?? - workflowData.nodes[0]; + workflow.nodes.find((item) => item.experimentStatus === ExperimentStatus.Running || item.experimentStatus === ExperimentStatus.Pending) ?? + workflow.nodes[0]; if (node) { setExperimentNodeData(node); openPropsDrawer(); @@ -153,13 +168,13 @@ function ExperimentText() { return; } try { - const dataJson = JSON.parse(data); + const dataJson = parseJsonText(data); const statusData = dataJson?.result?.object?.status; if (!statusData) { return; } const { finishedAt, phase, nodes = {} } = statusData; - + // 更新实验实例状态和结束时间 // setExperimentIns((prev) => ({ // ...prev, diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx index edb66534..2bd39c29 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx @@ -11,9 +11,15 @@ type ExperimentParameterProps = { function ExperimentParameter({ nodeData }: ExperimentParameterProps) { // 控制策略 - const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map( - ([key, value]) => ({ key, value }), - ); + // const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map( + // ([key, value]) => ({ key, value }), + // ); + const nodeId = nodeData.id; + const hasTaskInfo = + nodeId && + !nodeId.startsWith('git-clone') && + !nodeId.startsWith('dataset-export') && + !nodeId.startsWith('model-export'); // 输入参数 const inParametersList = Object.entries(nodeData.in_parameters ?? {}).map(([key, value]) => ({ @@ -74,54 +80,58 @@ function ExperimentParameter({ nodeData }: ExperimentParameterProps) { > -
- -
- - - - - - + {hasTaskInfo && ( + <> +
+ +
+ + + + + + - - - - - - - - - - - - - {controlStrategyList.map((item) => ( - - - - ))} + + + + + + + {/* + + */} + + + + {/* {controlStrategyList.map((item) => ( + + + + ))} */} + + )}
diff --git a/react-ui/src/pages/HyperParameter/Aim/index.tsx b/react-ui/src/pages/HyperParameter/Aim/index.tsx new file mode 100644 index 00000000..3a8d1d0d --- /dev/null +++ b/react-ui/src/pages/HyperParameter/Aim/index.tsx @@ -0,0 +1,12 @@ +/* + * @Author: 赵伟 + * @Date: 2025-03-31 16:38:59 + * @Description: 实验对比 Aim + */ + +import IframePage, { IframePageType } from '@/components/IFramePage'; + +function AimPage() { + return ; +} +export default AimPage; diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx b/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx index c9c9dce5..39ecebda 100644 --- a/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/ExperimentHistory/index.tsx @@ -3,7 +3,9 @@ import TrialStatusCell from '@/pages/HyperParameter/components/TrialStatusCell'; import { HyperParameterTrial } from '@/pages/HyperParameter/types'; import { getExpMetricsReq } from '@/services/hyperParameter'; import { to } from '@/utils/promise'; +import SessionStorage from '@/utils/sessionStorage'; import tableCellRender, { TableCellValueType } from '@/utils/table'; +import { useNavigate } from '@umijs/max'; import { App, Button, Table, type TableProps } from 'antd'; import classNames from 'classnames'; import { useEffect, useState } from 'react'; @@ -36,6 +38,7 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { const metricAnalysis: Record = first?.metric_analysis ?? {}; const paramsNames = Object.keys(config); const metricNames = Object.keys(metricAnalysis); + const navigate = useNavigate(); const trialColumns: TableProps['columns'] = [ { @@ -160,7 +163,8 @@ function ExperimentHistory({ trialList = [] }: ExperimentHistoryProps) { const [res] = await to(getExpMetricsReq(selectedRowKeys)); if (res && res.data) { const url = res.data; - window.open(url, '_blank'); + SessionStorage.setItem(SessionStorage.aimUrlKey, url); + navigate('compare-visual'); } }; diff --git a/react-ui/src/pages/ModelDeployment/components/ServerLog/index.less b/react-ui/src/pages/ModelDeployment/components/ServerLog/index.less index 11f3bf34..4b7f5762 100644 --- a/react-ui/src/pages/ModelDeployment/components/ServerLog/index.less +++ b/react-ui/src/pages/ModelDeployment/components/ServerLog/index.less @@ -20,5 +20,9 @@ &__more { padding: 20px 0; } + + &::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.5); + } } } diff --git a/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx b/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx index 9279e76d..4855eb00 100644 --- a/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx +++ b/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx @@ -35,6 +35,12 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete const [stagingItem, setStagingItem] = useState( {} as PipelineNodeModelSerialize, ); + const nodeId = Form.useWatch('id', form) as string; + const hasTaskInfo = + nodeId && + !nodeId.startsWith('git-clone') && + !nodeId.startsWith('dataset-export') && + !nodeId.startsWith('model-export'); const [open, setOpen] = useState(false); const [menuItems, setMenuItems] = useState([]); @@ -46,10 +52,11 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete const fields = form.getFieldsValue(); // 保存字段顺序 - const control_strategy = { - ...stagingItem.control_strategy, - ...fields.control_strategy, - }; + // const control_strategy = { + // ...stagingItem.control_strategy, + // ...fields.control_strategy, + // }; + const in_parameters = { ...stagingItem.in_parameters, ...fields.in_parameters, @@ -64,7 +71,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete const res = { ...stagingItem, ...fields, - control_strategy: JSON.stringify(control_strategy), + // control_strategy: JSON.stringify(control_strategy), in_parameters: JSON.stringify(in_parameters), out_parameters: JSON.stringify(out_parameters), formError: !!error, @@ -91,7 +98,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete ...model, in_parameters: JSON.parse(model.in_parameters), out_parameters: JSON.parse(model.out_parameters), - control_strategy: JSON.parse(model.control_strategy), + // control_strategy: JSON.parse(model.control_strategy), }; // console.log('model', nodeData); setStagingItem({ @@ -348,9 +355,9 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete }; // 控制策略 - const controlStrategyList = Object.entries(stagingItem.control_strategy ?? {}).map( - ([key, value]) => ({ key, value }), - ); + // const controlStrategyList = Object.entries(stagingItem.control_strategy ?? {}).map( + // ([key, value]) => ({ key, value }), + // ); // 输入参数 const inParametersList = Object.entries(stagingItem.in_parameters ?? {}).map(([key, value]) => ({ @@ -422,71 +429,73 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete > -
- -
- -
- - + {hasTaskInfo && ( + <> +
+ +
+ +
+ + + + + + +
- - + { + handleParameterClick('working_directory', value); + }} + /> + } + > + -
- - { - handleParameterClick('working_directory', value); - }} - /> - } - > - - - { - handleParameterClick('command', value); - }} - /> - } - > -