{valueObj?.showValue}
{
- e.stopPropagation();
- onChange?.({
- ...valueObj,
- value: undefined,
- showValue: undefined,
- fromSelect: false,
- activeTab: undefined,
- expandedKeys: undefined,
- checkedKeys: undefined,
- });
- }}
+ onClick={handleRemove}
/>
) : (
@@ -83,6 +103,7 @@ function ParameterInput({
) : (
+ setSelectedResource(undefined)}
+ onClick={selectResource}
+ >
+
+
+ );
+}
+
+export default ResourceSelect;
diff --git a/react-ui/src/hooks/index.ts b/react-ui/src/hooks/index.ts
index b34d5156..adf61e7d 100644
--- a/react-ui/src/hooks/index.ts
+++ b/react-ui/src/hooks/index.ts
@@ -32,6 +32,7 @@ export function useStateRef
@@ -230,64 +167,46 @@ function EditorCreate() {
- selectResource('image', ResourceSelectorType.Mirror)}
/>
-
- selectResource('model', ResourceSelectorType.Model)}
/>
-
selectResource('dataset', ResourceSelectorType.Dataset)}
/>
-
diff --git a/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx
index c7b22c6a..38a98e6a 100644
--- a/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx
+++ b/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx
@@ -1,7 +1,7 @@
/*
* @Author: 赵伟
* @Date: 2024-04-16 13:58:08
- * @Description: 开发环境
+ * @Description: 开发环境列表
*/
import CommonTableCell from '@/components/CommonTableCell';
import DateTableCell from '@/components/DateTableCell';
diff --git a/react-ui/src/pages/Experiment/Comparison/config.tsx b/react-ui/src/pages/Experiment/Comparison/config.tsx
new file mode 100644
index 00000000..c6c53971
--- /dev/null
+++ b/react-ui/src/pages/Experiment/Comparison/config.tsx
@@ -0,0 +1,17 @@
+export enum ComparisonType {
+ Train = 'Train', // 训练
+ Evaluate = 'Evaluate', // 评估
+}
+
+type ComparisonTypeInfo = {
+ title: string;
+};
+
+export const comparisonConfig: Record = {
+ [ComparisonType.Train]: {
+ title: '训练',
+ },
+ [ComparisonType.Evaluate]: {
+ title: '评估',
+ },
+};
diff --git a/react-ui/src/pages/Experiment/Comparison/index.less b/react-ui/src/pages/Experiment/Comparison/index.less
index a491c621..7a97a588 100644
--- a/react-ui/src/pages/Experiment/Comparison/index.less
+++ b/react-ui/src/pages/Experiment/Comparison/index.less
@@ -22,6 +22,12 @@
.ant-table-container {
border: none !important;
}
+ .ant-table-thead {
+ .ant-table-cell {
+ background-color: rgb(247, 247, 247);
+ border-color: #e8e8e8 !important;
+ }
+ }
.ant-table-tbody {
.ant-table-cell {
border-right: none !important;
diff --git a/react-ui/src/pages/Experiment/Comparison/index.tsx b/react-ui/src/pages/Experiment/Comparison/index.tsx
index 59cd3f8b..3aca2028 100644
--- a/react-ui/src/pages/Experiment/Comparison/index.tsx
+++ b/react-ui/src/pages/Experiment/Comparison/index.tsx
@@ -7,17 +7,13 @@ import {
import { to } from '@/utils/promise';
import tableCellRender, { arrayFormatter, dateFormatter } from '@/utils/table';
import { useSearchParams } from '@umijs/max';
-import { App, Button, Table, /*TablePaginationConfig,*/ TableProps } from 'antd';
+import { App, Button, Table, /* TablePaginationConfig,*/ TableProps, Tooltip } from 'antd';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import ExperimentStatusCell from '../components/ExperimentStatusCell';
+import { ComparisonType, comparisonConfig } from './config';
import styles from './index.less';
-export enum ComparisonType {
- Train = 'Train', // 训练
- Evaluate = 'Evaluate', // 评估
-}
-
type TableData = {
experiment_ins_id: number;
run_id: string;
@@ -32,13 +28,15 @@ type TableData = {
function ExperimentComparison() {
const [searchParams] = useSearchParams();
- const comparisonType = searchParams.get('type');
+ const comparisonType = searchParams.get('type') as ComparisonType;
const experimentId = searchParams.get('id');
const [tableData, setTableData] = useState([]);
// const [cacheState, setCacheState] = useCacheState();
// const [total, setTotal] = useState(0);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [loading, setLoading] = useState(false);
const { message } = App.useApp();
+ const config = useMemo(() => comparisonConfig[comparisonType], [comparisonType]);
// const [pagination, setPagination] = useState(
// cacheState?.pagination ?? {
// current: 1,
@@ -52,9 +50,11 @@ function ExperimentComparison() {
// 获取对比数据列表
const getComparisonData = async () => {
+ setLoading(true);
const request =
comparisonType === ComparisonType.Train ? getExpTrainInfosReq : getExpEvaluateInfosReq;
const [res] = await to(request(experimentId));
+ setLoading(false);
if (res && res.data) {
// const { content = [], totalElements = 0 } = res.data;
setTableData(res.data);
@@ -91,6 +91,7 @@ function ExperimentComparison() {
// 选择行
const rowSelection: TableProps['rowSelection'] = {
type: 'checkbox',
+ fixed: 'left',
selectedRowKeys,
onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
@@ -108,7 +109,9 @@ function ExperimentComparison() {
title: '实例 ID',
dataIndex: 'experiment_ins_id',
key: 'experiment_ins_id',
- width: '20%',
+ width: 100,
+ fixed: 'left',
+ align: 'center',
render: tableCellRender(),
},
{
@@ -116,43 +119,61 @@ function ExperimentComparison() {
dataIndex: 'start_time',
key: 'start_time',
width: 180,
+ fixed: 'left',
+ align: 'center',
render: tableCellRender(false, dateFormatter),
},
{
title: '运行状态',
dataIndex: 'status',
key: 'status',
- width: '20%',
+ width: 100,
+ fixed: 'left',
+ align: 'center',
render: ExperimentStatusCell,
},
{
- title: '训练数据集',
+ title: `${config.title}数据集`,
dataIndex: 'dataset',
key: 'dataset',
- width: '20%',
+ width: 180,
+ fixed: 'left',
+ align: 'center',
render: tableCellRender(true, arrayFormatter()),
ellipsis: { showTitle: false },
},
],
},
{
- title: '训练参数',
+ title: `${config.title}参数`,
+ align: 'center',
children: first?.params_names.map((name) => ({
- title: name,
+ title: (
+
+ {name}
+
+ ),
dataIndex: ['params', name],
key: name,
- width: '20%',
+ width: 120,
+ align: 'center',
render: tableCellRender(true),
ellipsis: { showTitle: false },
})),
},
{
- title: '训练指标',
+ title: `${config.title}指标`,
+ align: 'center',
children: first?.metrics_names.map((name) => ({
- title: name,
+ title: (
+
+ {name}
+
+ ),
dataIndex: ['metrics', name],
key: name,
- width: '20%',
+ width: 120,
+ align: 'center',
render: tableCellRender(true),
ellipsis: { showTitle: false },
})),
@@ -177,9 +198,10 @@ function ExperimentComparison() {
dataSource={tableData}
columns={columns}
rowSelection={rowSelection}
- scroll={{ y: 'calc(100% - 55px)' }}
+ scroll={{ y: 'calc(100% - 55px)', x: '100%' }}
pagination={false}
bordered={true}
+ loading={loading}
// pagination={{
// ...pagination,
// total: total,
diff --git a/react-ui/src/pages/Experiment/Info/index.jsx b/react-ui/src/pages/Experiment/Info/index.jsx
index db217197..3c1eda2f 100644
--- a/react-ui/src/pages/Experiment/Info/index.jsx
+++ b/react-ui/src/pages/Experiment/Info/index.jsx
@@ -1,76 +1,158 @@
+import { ExperimentStatus } from '@/enums';
import { useStateRef, useVisible } from '@/hooks';
import { getExperimentIns } from '@/services/experiment/index.js';
import { getWorkflowById } from '@/services/pipeline/index.js';
import themes from '@/styles/theme.less';
import { fittingString } from '@/utils';
import { elapsedTime, formatDate } from '@/utils/date';
-import G6 from '@antv/g6';
+import { to } from '@/utils/promise';
+import G6, { Util } from '@antv/g6';
import { Button } from 'antd';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import ParamsModal from '../components/ViewParamsModal';
import { experimentStatusInfo } from '../status';
import styles from './index.less';
-import Props from './props';
+import ExperimentDrawer from './props';
let graph = null;
function ExperimentText() {
- const [message, setMessage, messageRef] = useStateRef({});
- const propsRef = useRef();
- const navgite = useNavigate();
- const locationParams = useParams(); //新版本获取路由参数接口
- const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
+ const [experimentIns, setExperimentIns] = useState(undefined);
+ const [experimentNodeData, setExperimentNodeData, experimentNodeDataRef] = useStateRef(undefined);
const graphRef = useRef();
+ const timerRef = useRef();
+ const workflowRef = useRef();
+ const locationParams = useParams(); // 新版本获取路由参数接口
+ const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
+ const [propsDrawerOpen, openPropsDrawer, closePropsDrawer, propsDrawerOpenRef] =
+ useVisible(false);
+ const navigate = useNavigate();
+ const width = 110;
+ const height = 36;
- const getGraphData = (data) => {
- if (graph) {
- // 修改历史数据有蓝色边框的问题
- data.nodes.forEach((item) => {
- item.style.stroke = '#fff';
+ useEffect(() => {
+ initGraph();
+ getWorkflow();
+
+ const changeSize = () => {
+ if (!graph || graph.get('destroyed')) return;
+ if (!graphRef.current) return;
+ graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight);
+ graph.fitView();
+ };
+
+ window.addEventListener('resize', changeSize);
+ return () => {
+ window.removeEventListener('resize', changeSize);
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ propsDrawerOpenRef.current = propsDrawerOpen;
+ }, [propsDrawerOpen]);
+
+ // 获取流水线模版
+ 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(true);
+ } catch (error) {
+ // JSON.parse 错误
+ console.log(error);
+ }
+ }
+ };
+
+ // 获取实验实例
+ const getExperimentInstance = async (first) => {
+ const [res] = await to(getExperimentIns(locationParams.id));
+ if (res && res.data && workflowRef.current) {
+ setExperimentIns(res.data);
+ const { status, nodes_status } = res.data;
+ const workflowData = workflowRef.current;
+ const experimentStatusObjs = JSON.parse(nodes_status);
+ workflowData.nodes.forEach((item) => {
+ const experimentNode = experimentStatusObjs?.[item.id] ?? {};
+ const { finishedAt, startedAt, phase, id } = experimentNode;
+ item.experimentStartTime = startedAt;
+ item.experimentEndTime = finishedAt;
+ item.experimentStatus = phase;
+ item.workflowId = id;
+ item.img = phase ? `${item.imgName}-${phase}.png` : `${item.imgName}.png`;
});
+
+ // 更新打开的抽屉数据
+ if (propsDrawerOpenRef.current && experimentNodeDataRef.current) {
+ const currentId = experimentNodeDataRef.current.id;
+ const node = workflowData.nodes.find((item) => item.id === currentId);
+ if (node) {
+ setExperimentNodeData(node);
+ }
+ }
+
+ getGraphData(workflowData, first);
+
+ // 运行中或者等待中，每5秒获取一次实验实例
+ if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) {
+ timerRef.current = setTimeout(() => {
+ getExperimentInstance(false);
+ }, 5 * 1000);
+ }
+
+ if (first && status === ExperimentStatus.Pending) {
+ const node = workflowData.nodes[0];
+ if (node) {
+ setExperimentNodeData(node);
+ openPropsDrawer();
+ }
+ } else if (first && status === ExperimentStatus.Running) {
+ const node =
+ workflowData.nodes.find((item) => item.experimentStatus === ExperimentStatus.Running) ??
+ workflowData.nodes[0];
+ if (node) {
+ setExperimentNodeData(node);
+ openPropsDrawer();
+ }
+ }
+ }
+ };
+
+ // 根据数据，渲染图
+ const getGraphData = (data, first) => {
+ if (graph) {
+ const zoom = graph.getZoom();
+ // 在拉取新数据重新渲染页面之前先获取点（0， 0）在画布上的位置
+ const lastPoint = graph.getCanvasByPoint(0, 0);
graph.data(data);
graph.render();
+ if (first) {
+ graph.fitView();
+ } else {
+ graph.zoomTo(zoom);
+ // 获取重新渲染之后点（0， 0）在画布的位置
+ const newPoint = graph.getCanvasByPoint(0, 0);
+ // 移动画布相对位移;
+ graph.translate(lastPoint.x - newPoint.x, lastPoint.y - newPoint.y);
+ }
} else {
setTimeout(() => {
getGraphData(data);
}, 500);
}
};
- const getFirstWorkflow = (val) => {
- getWorkflowById(val).then((pipelineRes) => {
- if (graph && pipelineRes.data && pipelineRes.data.dag) {
- getExperimentIns(locationParams.id).then((experimentRes) => {
- if (experimentRes.code === 200) {
- setMessage(experimentRes.data);
- const experimentStatusObjs = JSON.parse(experimentRes.data.nodes_status);
- const newNodeList = JSON.parse(pipelineRes.data.dag).nodes.map((item) => {
- return {
- ...item,
- experimentEndTime: experimentStatusObjs?.[item.id]?.finishedAt,
- experimentStartTime: experimentStatusObjs?.[item.id]?.startedAt,
- experimentStatus: experimentStatusObjs?.[item.id]?.phase,
- component_id: experimentStatusObjs?.[item.id]?.id,
- img: experimentStatusObjs?.[item.id]?.phase
- ? item.img.slice(0, item.img.length - 4) +
- '-' +
- experimentStatusObjs[item.id].phase +
- '.png'
- : item.img,
- };
- });
- const newData = { ...JSON.parse(pipelineRes.data.dag), nodes: newNodeList };
- getGraphData(newData);
- }
- });
- }
- });
- };
-
- useEffect(() => {
- initGraph();
- getFirstWorkflow(locationParams.workflowId);
- }, []);
const initGraph = () => {
G6.registerNode(
@@ -116,6 +198,54 @@ function ExperimentText() {
draggable: true,
});
}
+ const hasRightImg =
+ cfg.experimentStatus === ExperimentStatus.Pending ||
+ cfg.experimentStatus === ExperimentStatus.Running;
+ if (hasRightImg) {
+ const image = group.addShape('image', {
+ attrs: {
+ x: -10,
+ y: -10,
+ width: 20,
+ height: 20,
+ img:
+ cfg.experimentStatus === ExperimentStatus.Pending
+ ? require('@/assets/img/experiment-pending.png')
+ : require('@/assets/img/experiment-running.png'),
+ cursor: 'pointer',
+ },
+ draggable: false,
+ capture: false,
+ });
+
+ if (cfg.experimentStatus === ExperimentStatus.Running) {
+ image.animate(
+ (ratio) => {
+ const toMatrix = Util.transform(
+ [1, 0, 0, 0, 1, 0, 0, 0, 1],
+ [
+ ['r', ratio * Math.PI * 2],
+ ['t', width / 2 - 14 + 10, -height / 2 - 6 + 10],
+ ],
+ );
+ return {
+ matrix: toMatrix,
+ };
+ },
+ {
+ repeat: true, // 动画重复
+ duration: 1000,
+ easing: 'easeLinear',
+ },
+ );
+ } else if (cfg.experimentStatus === ExperimentStatus.Pending) {
+ const toMatrix = Util.transform(
+ [1, 0, 0, 0, 1, 0, 0, 0, 1],
+ [['t', width / 2 - 14 + 10, -height / 2 - 6 + 10]],
+ );
+ image.setMatrix(toMatrix);
+ }
+ }
const bbox = group.getBBox();
const anchorPoints = this.getAnchorPoints(cfg);
anchorPoints.forEach((anchorPos, i) => {
@@ -139,12 +269,12 @@ function ExperimentText() {
// response the state changes and show/hide the link-point circles
setState(name, value, item) {
const group = item.getContainer();
- const shape = group.get('children')[0];
+ const shape = group.get('children')?.[0];
if (name === 'hover') {
if (value) {
- shape.attr('stroke', themes['primaryColor']);
+ shape?.attr('stroke', themes['primaryColor']);
} else {
- shape.attr('stroke', '#fff');
+ shape?.attr('stroke', 'transparent');
}
}
},
@@ -181,7 +311,7 @@ function ExperimentText() {
defaultNode: {
type: 'rect-node',
- size: [110, 36],
+ size: [width, height],
labelCfg: {
style: {
@@ -196,8 +326,14 @@ function ExperimentText() {
},
style: {
fill: '#fff',
- stroke: '#fff',
- radius: 10,
+ stroke: 'transparent',
+ cursor: 'pointer',
+ radius: 8,
+ shadowColor: 'rgba(75, 84, 137, 0.4)',
+ shadowBlur: 6,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ overflow: 'hidden',
lineWidth: 0.5,
},
},
@@ -224,9 +360,28 @@ function ExperimentText() {
},
},
});
+
+ // 修改历史数据样式问题
+ graph.node((node) => {
+ return {
+ style: {
+ stroke: 'transparent',
+ radius: 8,
+ },
+ };
+ });
+
+ // 绑定事件
+ bindEvents();
+ };
+
+ // 绑定事件
+ const bindEvents = () => {
graph.on('node:click', (e) => {
if (e.target.get('name') !== 'anchor-point' && e.item) {
- propsRef.current.showDrawer(e, locationParams.id, messageRef.current);
+ const model = e.item.getModel();
+ setExperimentNodeData(model);
+ openPropsDrawer();
}
});
graph.on('node:mouseenter', (e) => {
@@ -235,22 +390,17 @@ function ExperimentText() {
graph.on('node:mouseleave', (e) => {
graph.setItemState(e.item, 'hover', false);
});
- window.onresize = () => {
- if (!graph || graph.get('destroyed')) return;
- if (!graphRef.current) return;
- graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight);
- graph.fitView();
- };
};
+
return (
-
);
diff --git a/react-ui/src/pages/Experiment/Info/index.less b/react-ui/src/pages/Experiment/Info/index.less
index f2f5510d..9004ce33 100644
--- a/react-ui/src/pages/Experiment/Info/index.less
+++ b/react-ui/src/pages/Experiment/Info/index.less
@@ -30,4 +30,10 @@
background-image: url(/assets/images/pipeline-canvas-back.png);
background-size: 100% 100%;
}
+
+ :global {
+ .ant-drawer-mask {
+ background: transparent !important;
+ }
+ }
}
diff --git a/react-ui/src/pages/Experiment/Info/props.less b/react-ui/src/pages/Experiment/Info/props.less
index b3294d55..1d5bdc34 100644
--- a/react-ui/src/pages/Experiment/Info/props.less
+++ b/react-ui/src/pages/Experiment/Info/props.less
@@ -14,7 +14,12 @@
border: 1px solid #e0eaff;
}
.ant-tabs-content-holder {
- overflow-y: auto;
+ .ant-tabs-content {
+ height: 100%;
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
}
}
}
diff --git a/react-ui/src/pages/Experiment/Info/props.tsx b/react-ui/src/pages/Experiment/Info/props.tsx
index 48d72c0d..5940756a 100644
--- a/react-ui/src/pages/Experiment/Info/props.tsx
+++ b/react-ui/src/pages/Experiment/Info/props.tsx
@@ -1,11 +1,9 @@
-import { getNodeResult, getQueryByExperimentLog } from '@/services/experiment/index.js';
+import { ExperimentStatus } from '@/enums';
import { PipelineNodeModelSerialize } from '@/types';
import { elapsedTime, formatDate } from '@/utils/date';
-import { to } from '@/utils/promise';
import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
-import { Drawer, Form, Tabs } from 'antd';
-import dayjs from 'dayjs';
-import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Drawer, Tabs } from 'antd';
+import { forwardRef, useImperativeHandle, useMemo } from 'react';
import ExperimentParameter from '../components/ExperimentParameter';
import ExperimentResult from '../components/ExperimentResult';
import LogList from '../components/LogList';
@@ -19,154 +17,130 @@ export type ExperimentLog = {
start_time?: string; // 日志开始时间
};
-const Props = forwardRef((_, ref) => {
- const [form] = Form.useForm();
- const [experimentNodeData, setExperimentNodeData] = useState
- 启动时间：{formatDate(message.create_time)}
+ 启动时间：{formatDate(experimentIns?.create_time)}
执行时长：
- {elapsedTime(message.create_time, message.finish_time)}
+ {elapsedTime(experimentIns?.create_time, experimentIns?.finish_time)}
状态：
@@ -260,11 +410,11 @@ function ExperimentText() {
height: '8px',
borderRadius: '50%',
marginRight: '6px',
- backgroundColor: experimentStatusInfo[message.status]?.color,
+ backgroundColor: experimentStatusInfo[experimentIns?.status]?.color,
}}
>
-
- {experimentStatusInfo[message.status]?.label}
+
+ {experimentStatusInfo[experimentIns?.status]?.label}
- ([]);
+
+ useEffect(() => {
+ getExperimentResult({ id: `${experimentInsId}`, node_id: pipelineNodeId });
+ }, []);
+
+ // 获取实验结果
+ const getExperimentResult = async (params: any) => {
+ const [res] = await to(getNodeResult(params));
+ if (res && res.data) {
+ setExperimentResults(res.data);
+ }
+ };
// 下载
const download = (path: string) => {
@@ -40,9 +57,9 @@ function ExperimentResult({ results }: ExperimentResultProps) {
return (
- 任务名称：{experimentNodeData.label}
-
-
- 执行状态：
-
-
- {experimentStatusInfo[experimentNodeData.experimentStatus]?.label}
-
-
-
- 启动时间：{formatDate(experimentNodeData.experimentStartTime)}
-
-
- 耗时：
- {elapsedTime(
- experimentNodeData.experimentStartTime,
- experimentNodeData.experimentEndTime,
- )}
+ return (
+
+
-
+
-
+ 任务名称：{instanceNodeData.label}
+
+
+ 执行状态：
+ {instanceNodeStatus ? (
+ <>
+
+
+ {experimentStatusInfo[instanceNodeStatus]?.label}
+
+
+ ) : (
+ '--'
+ )}
+
+
+ 启动时间：{formatDate(instanceNodeStartTime)}
+
+
+ 耗时：
+ {elapsedTime(instanceNodeStartTime, instanceNodeEndTime)}
+
+
+ );
+}
+
+export default ExperimentInstanceComponent;
diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.less b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.less
index 44b590ea..c5d9824e 100644
--- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.less
+++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.less
@@ -1,5 +1,7 @@
.experiment-parameter {
+ height: 100%;
padding-top: 8px;
+ overflow-y: auto;
&__title {
display: flex;
diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx
index 62be954f..eb516935 100644
--- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx
+++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx
@@ -3,16 +3,15 @@ import ParameterSelect from '@/components/ParameterSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { useComputingResource } from '@/hooks/resource';
import { PipelineNodeModelSerialize } from '@/types';
-import { Form, Input, Select, type FormProps } from 'antd';
+import { Form, Input, Select } from 'antd';
import styles from './index.less';
const { TextArea } = Input;
type ExperimentParameterProps = {
- form: FormProps['form'];
nodeData: PipelineNodeModelSerialize;
};
-function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
+function ExperimentParameter({ nodeData }: ExperimentParameterProps) {
const [resourceStandardList] = useComputingResource(); // 资源规模
// 控制策略
@@ -42,7 +41,7 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
wrapperCol={{
span: 24,
}}
- form={form}
+ initialValues={nodeData}
style={{
maxWidth: 600,
}}
diff --git a/react-ui/src/pages/Experiment/components/ExperimentResult/index.less b/react-ui/src/pages/Experiment/components/ExperimentResult/index.less
index 078fe4f2..78684d72 100644
--- a/react-ui/src/pages/Experiment/components/ExperimentResult/index.less
+++ b/react-ui/src/pages/Experiment/components/ExperimentResult/index.less
@@ -1,5 +1,7 @@
.experiment-result {
+ height: 100%;
padding: 8px;
+ overflow-y: auto;
color: @text-color;
font-size: 14px;
diff --git a/react-ui/src/pages/Experiment/components/ExperimentResult/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentResult/index.tsx
index e3cbd4da..feabcc3d 100644
--- a/react-ui/src/pages/Experiment/components/ExperimentResult/index.tsx
+++ b/react-ui/src/pages/Experiment/components/ExperimentResult/index.tsx
@@ -1,11 +1,15 @@
+import { getNodeResult } from '@/services/experiment/index.js';
import { downLoadZip } from '@/utils/downloadfile';
import { openAntdModal } from '@/utils/modal';
+import { to } from '@/utils/promise';
import { App, Button } from 'antd';
+import { useEffect, useState } from 'react';
import ExportModelModal from '../ExportModelModal';
import styles from './index.less';
type ExperimentResultProps = {
- results?: ExperimentResultData[] | null;
+ experimentInsId?: number; // 实验实例 id
+ pipelineNodeId?: string; // 流水线节点 id
};
type ExperimentResultData = {
@@ -18,8 +22,21 @@ type ExperimentResultData = {
}[];
};
-function ExperimentResult({ results }: ExperimentResultProps) {
+function ExperimentResult({ experimentInsId, pipelineNodeId }: ExperimentResultProps) {
const { message } = App.useApp();
+ const [experimentResults, setExperimentResults] = useState
+
+
+ {experimentInList.map((item, index) => (
+ 序号
+ 可视化
+
+
+ 运行时长
+ 开始时间
+ 状态
+ 操作
+
+ onClickInstance?.(item)}
+ >
+ {index + 1}
+
+
+ ))}
+ {experimentInsTotal > experimentInList.length ? (
+
+ {item.nodes_result?.tensorboard_log ? (
+ onClickTensorBoard?.(item)}
+ >
+ ) : (
+ '--'
+ )}
+
+
+
+ {elapsedTime(item.create_time, item.finish_time)}
+
+
+ {formatDate(item.create_time)}
+
+
+
+ 
+
+ {experimentStatusInfo[item.status as ExperimentStatus]?.label}
+
+
+
+ }
+ onClick={() => terminateExperimentInstance(item)}
+ >
+ 终止
+
+
+ }
+ onClick={() => handleRemove(item)}
+ >
+ 删除
+
+
+
+
+
+
+ ) : null}
+
- {results && results.length > 0 ? (
- results.map((item) => (
-
+ {experimentResults.length > 0 ? (
+ experimentResults.map((item) => (
+
{item.name}