{log_type === 'resource' && (
-
-
{pod_name}
+
+
)}
- {showLog && {pod_name}
{collapse ? {logText}
}
-
+ {showLog && [];
- status: ExperimentStatus;
-};
-
-function LogList({ list = [], status }: LogListProps) {
- return (
-
{logText}
}
+
{showMoreBtn && (
+ );
+}
+
+export default LogList;
diff --git a/react-ui/src/pages/Experiment/experimentText/LogList.tsx b/react-ui/src/pages/Experiment/experimentText/LogList.tsx
deleted file mode 100644
index 0aff6360..00000000
--- a/react-ui/src/pages/Experiment/experimentText/LogList.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ExperimentStatus } from '../status';
-import LogGroup, { type LogGroupProps } from './logGroup';
-
-type LogListProps = {
- list: Omit
- {list.map((v) => (
-
- );
-}
-
-export default LogList;
diff --git a/react-ui/src/pages/Experiment/experimentText/index.jsx b/react-ui/src/pages/Experiment/experimentText/index.jsx
index 6d70e060..08603e3c 100644
--- a/react-ui/src/pages/Experiment/experimentText/index.jsx
+++ b/react-ui/src/pages/Experiment/experimentText/index.jsx
@@ -1,11 +1,10 @@
-import { useVisible } from '@/hooks';
+import { useStateRef, useVisible } from '@/hooks';
import { getExperimentIns } from '@/services/experiment/index.js';
import { getWorkflowById } from '@/services/pipeline/index.js';
import { elapsedTime, formatDate } from '@/utils/date';
-import { useEmotionCss } from '@ant-design/use-emotion-css';
import G6 from '@antv/g6';
import { Button } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { s8 } from '../../../utils';
import ParamsModal from '../components/ViewParamsModal';
@@ -13,38 +12,15 @@ import { experimentStatusInfo } from '../status';
import styles from './index.less';
import Props from './props';
+let graph = null;
+
function ExperimentText() {
- const [message, setMessage] = useState({});
- const messageRef = useRef(message);
+ const [message, setMessage, messageRef] = useStateRef({});
const propsRef = useRef();
const navgite = useNavigate();
const locationParams = useParams(); //新版本获取路由参数接口
- let graph = null;
const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
- const timers = (time) => {
- let timer = new Date(time);
- let hours = timer.getHours(); //转换成时
- let minutes = timer.getMinutes(); //转换成分
- let secend = timer.getSeconds(); //转换成秒
-
- let str = `${minutes}分${secend}秒`;
- return str;
- };
- const pipelineContainer = useEmotionCss(() => {
- return {
- display: 'flex',
- backgroundColor: '#fff',
- height: '98vh',
- };
- });
- const graphStyle = useEmotionCss(() => {
- return {
- width: '100%',
- backgroundColor: '#f9fafb',
- flex: 1,
- };
- });
const graphRef = useRef();
const onDragEnd = (val) => {
console.log(val, 'eee');
@@ -60,12 +36,8 @@ function ExperimentText() {
id: val.component_name + '-' + s8(),
isCluster: false,
};
- console.log(graph, model);
-
graph.addItem('node', model, true);
- console.log(graph);
};
- const formChange = (val) => {};
const handlerClick = (e) => {
if (e.target.get('name') !== 'anchor-point' && e.item) {
propsRef.current.showDrawer(e, locationParams.id, messageRef.current);
@@ -73,7 +45,6 @@ function ExperimentText() {
};
const getGraphData = (data) => {
if (graph) {
- console.log(graph);
graph.data(data);
graph.render();
} else {
@@ -83,77 +54,39 @@ function ExperimentText() {
}
};
const getFirstWorkflow = (val) => {
- getWorkflowById(val).then((ret) => {
- if (graph && ret.data && ret.data.dag) {
- console.log(JSON.parse(ret.data.dag));
- getExperimentIns(locationParams.id).then((res) => {
- if (res.code == 200) {
- console.log(ret.data, 'data');
- setMessage(res.data);
- const experimentStatusObjs = JSON.parse(res.data.nodes_status);
- const newNodeList = JSON.parse(ret.data.dag).nodes.map((item) => {
- console.log(experimentStatusObjs);
+ 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 &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].finishedAt,
- experimentStartTime:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].startedAt,
- experimentStatus:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].phase,
- component_id:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].id,
- img:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].phase
- ? item.img.slice(0, item.img.length - 4) +
- '-' +
- experimentStatusObjs[item.id].phase +
- '.png'
- : item.img,
+ 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(ret.data.dag), nodes: newNodeList };
-
+ const newData = { ...JSON.parse(pipelineRes.data.dag), nodes: newNodeList };
getGraphData(newData);
- // setExperimentStatusObj(JSON.parse(ret.data.nodes_status))
}
});
}
- // graph&&graph.data(JSON.parse(ret.dag))
- // graph.render()
});
};
- // const getExperimentIn=(val)=>{
- // getExperimentIns(val).then(ret=>{
- // if(ret.code==200){
- // console.log(JSON.parse(ret.data.nodes_status));
- // setExperimentStatusObj(JSON.parse(ret.data.nodes_status))
- // setTimeout(() => {
- // console.log(experimentStatusObj);
-
- // }, 1000);
- // }
- // })
- // }
useEffect(() => {
initGraph();
getFirstWorkflow(locationParams.workflowId);
}, []);
- useEffect(() => {
- // Update the refs whenever the state changes
- messageRef.current = message;
- }, [message]);
const initGraph = () => {
const fittingString = (str, maxWidth, fontSize) => {
@@ -374,6 +307,8 @@ function ExperimentText() {
},
// linkCenter: true,
fitView: true,
+ minZoom: 0.5,
+ maxZoom: 3,
fitViewPadding: [320, 320, 220, 320],
});
graph.on('node:click', handlerClick);
@@ -385,38 +320,39 @@ function ExperimentText() {
};
};
return (
-
-
-
-
diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx
index 0c067f58..fe421514 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx
+++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx
@@ -606,6 +606,8 @@ const EditPipeline = () => {
},
// linkCenter: true,
fitView: true,
+ minZoom: 0.5,
+ maxZoom: 3,
fitViewPadding: [320, 320, 220, 320],
});
// graph.on('dblclick', (e) => {
diff --git a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx
index 181a4139..59a5bba1 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx
+++ b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx
@@ -19,7 +19,7 @@ const ModelMenus = ({ onParDragEnd }) => {
x: e.clientX,
y: e.clientY,
label: data.component_label,
- img: `/assets/images/pipeline/${data.icon_path}.png`,
+ img: `/assets/images/${data.icon_path}.png`,
});
};
const { Panel } = Collapse;
@@ -45,11 +45,13 @@ const ModelMenus = ({ onParDragEnd }) => {
}}
className={Styles.collapseItem}
>
- 
+ {ele.icon_path && (
+ 
+ )}
{ele.component_label}
))
diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx
index 6f7d2586..179cd152 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx
+++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx
@@ -1,4 +1,5 @@
import KFIcon from '@/components/KFIcon';
+import SubAreaTitle from '@/components/SubAreaTitle';
import { getComputingResourceReq } from '@/services/pipeline';
import { openAntdModal } from '@/utils/modal';
import { to } from '@/utils/promise';
@@ -7,7 +8,7 @@ import { pick } from 'lodash';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import PropsLabel from '../components/PropsLabel';
import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal';
-import Styles from './editPipeline.less';
+import styles from './editPipeline.less';
import { createMenuItems } from './utils';
const { TextArea } = Input;
@@ -18,7 +19,8 @@ const Props = forwardRef(({ onParentChange }, ref) => {
const [selectedModel, setSelectedModel] = useState(undefined); // 选择的模型，为了再次打开时恢复原来的选择
const [selectedDataset, setSelectedDataset] = useState(undefined); // 选择的数据集，为了再次打开时恢复原来的选择
const [resourceStandardList, setResourceStandardList] = useState([]); // 资源规模列表
- const [items, setItems] = useState([]);
+ const [menuItems, setMenuItems] = useState([]);
+
useEffect(() => {
getComputingResource();
}, []);
@@ -38,7 +40,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
const afterOpenChange = () => {
if (!open) {
- // console.log('zzzz', stagingItem, form.getFieldsValue());
+ console.log('zzzz', form.getFieldsValue());
const control_strategy = form.getFieldValue('control_strategy');
const in_parameters = form.getFieldValue('in_parameters');
const out_parameters = form.getFieldValue('out_parameters');
@@ -68,29 +70,32 @@ const Props = forwardRef(({ onParentChange }, ref) => {
if (e.item && e.item.getModel()) {
form.resetFields();
const model = e.item.getModel();
- const nodeData = {
- ...model,
- in_parameters: JSON.parse(model.in_parameters),
- out_parameters: JSON.parse(model.out_parameters),
- control_strategy: JSON.parse(model.control_strategy),
- };
- setStagingItem({
- ...nodeData,
- });
- form.setFieldsValue({
- ...nodeData,
- });
+ try {
+ const nodeData = {
+ ...model,
+ in_parameters: JSON.parse(model.in_parameters),
+ out_parameters: JSON.parse(model.out_parameters),
+ control_strategy: JSON.parse(model.control_strategy),
+ };
+ setStagingItem({
+ ...nodeData,
+ });
+ form.setFieldsValue({
+ ...nodeData,
+ });
+ } catch (error) {
+ console.log(error);
+ }
setSelectedModel(undefined);
setSelectedDataset(undefined);
setOpen(true);
- setItems(createMenuItems(params, parentNodes));
+ // 参数下拉菜单
+ setMenuItems(createMenuItems(params, parentNodes));
}
},
- propClose: async () => {
- setOpen(false);
- const [openRes, propsError] = await to(setOpen(false));
- console.log(setOpen(false));
+ propClose: () => {
+ close();
},
}));
@@ -161,6 +166,11 @@ const Props = forwardRef(({ onParentChange }, ref) => {
return computing_resource.toLocaleLowerCase().includes(input.toLocaleLowerCase());
};
+ // 参数回填
+ const handleParameterClick = (name, value) => {
+ form.setFieldValue(name, value);
+ };
+
// 控制策略
const controlStrategyList = Object.entries(stagingItem.control_strategy ?? {}).map(
([key, value]) => ({ key, value }),
@@ -189,7 +199,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
afterOpenChange={afterOpenChange}
open={open}
width={520}
- className={Styles.editPipelineProps}
+ className={styles.editPipelineProps}
>
启动时间：{formatDate(message.create_time)}
-
- 执行时长：
- {message.finish_time
- ? elapsedTime(new Date(message.create_time), new Date(message.finish_time))
- : elapsedTime(new Date(message.create_time), new Date())}
-
-
- 状态：
-
-
- {experimentStatusInfo[message.status]?.label}
-
-
-
+
+ .ant-tabs-nav .ant-tabs-nav-list{
- margin-left: 24px;
- }
- .ant-drawer .ant-drawer-body{
- overflow-y: hidden;
+ background-color: #fff;
+
+ &__top {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 56px;
+ padding: 0 30px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
+
+ &__info {
+ display: flex;
+ align-items: center;
+ margin-right: 30px;
+ color: rgba(29, 29, 32, 0.8);
+ font-size: 15px;
}
- .ant-tabs {
- height: calc(100% - 160px);
- overflow-y: auto;
+ &__param-button {
+ margin-right: 0;
+ margin-left: auto;
}
}
-
-}
-.detailBox {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- color: #1d1d20;
- font-size: 15px;
- padding-left: 24px;
-
-}
-.allMessageItem {
- display: flex;
- align-items: center;
- margin-right: 30px;
- color: rgba(29, 29, 32, 0.8);
- font-size: 15px;
-}
-.param_button {
- margin-right: 0;
- margin-left: auto;
-}
-.resultTop {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 0;
- border-bottom: 1px solid #eee;
-}
-.resultContent {
- display: flex;
-
- align-items: center;
- justify-content: space-between;
- width: 100%;
- margin-bottom: 10px;
- padding: 0 20px 0 0;
+ &__graph {
+ width: 100%;
+ height: calc(100% - 56px);
+ background-color: @background-color;
+ }
}
diff --git a/react-ui/src/pages/Experiment/experimentText/logGroup.less b/react-ui/src/pages/Experiment/experimentText/logGroup.less
deleted file mode 100644
index 4eee30d3..00000000
--- a/react-ui/src/pages/Experiment/experimentText/logGroup.less
+++ /dev/null
@@ -1,34 +0,0 @@
-.log_group {
- padding-bottom: 10px;
-}
-
-.log_group_pod {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 15px;
- background: rgba(234, 234, 234, 0.5);
- cursor: pointer;
-
- &_name {
- margin-right: 10px;
- color: #1d1d20;
- font-size: 14px;
- }
-}
-
-.log_group_detail {
- padding: 15px;
- color: white;
- font-size: 14px;
- white-space: pre-line;
- word-break: break-all;
- background: #19253b;
-}
-
-.log_group_more_button {
- display: flex;
- justify-content: center;
- color: white;
- background: #19253b;
-}
diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx
deleted file mode 100644
index 98ef4984..00000000
--- a/react-ui/src/pages/Experiment/experimentText/props.jsx
+++ /dev/null
@@ -1,439 +0,0 @@
-import { getNodeResult, getQueryByExperimentLog } from '@/services/experiment/index.js';
-import { elapsedTime, formatDate } from '@/utils/date';
-import { downLoadZip } from '@/utils/downloadfile';
-import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
-import { Drawer, Form, Input, Tabs, message } from 'antd';
-import moment from 'moment';
-import { forwardRef, useImperativeHandle, useState } from 'react';
-import LogList from './LogList';
-import Styles from './index.less';
-const { TextArea } = Input;
-const Props = forwardRef(({ onParentChange }, ref) => {
- const [form] = Form.useForm();
- const [stagingItem, setStagingItem] = useState({});
- const [resultObj, setResultObj] = useState([]);
- const [logList, setLogList] = useState([]);
- const statusObj = {
- Running: '运行中',
- Succeeded: '成功',
- Pending: '等待中',
- Failed: '失败',
- Error: '错误',
- Terminated: '终止',
- Skipped: '未执行',
- Omitted: '未执行',
- };
- const statusColorObj = {
- Running: '#165bff',
- Succeeded: '#63a728',
- Pending: '#f981eb',
- Failed: '#c73131',
- Error: '#c73131',
- Terminated: '#8a8a8a',
- Skipped: '#8a8a8a',
- Omitted: '#8a8a8ae',
- };
- const exportResult = (e, val) => {
- const hide = message.loading('正在下载');
- hide();
- downLoadZip(`/api/mmp/minioStorage/download`, { path: val });
- };
- const timers = (time) => {
- let timer = new Date(time);
- let hours = timer.getHours(); //转换成时
- let minutes = timer.getMinutes(); //转换成分
- let secend = timer.getSeconds(); //转换成秒
-
- let str = `${minutes}分${secend}秒`;
- return str;
- };
- const items = [
- {
- key: '1',
- label: '日志详情',
- children: (
+ {} as PipelineNodeModelSerialize,
+ );
+ const [experimentResults, setExperimentResults] = useState([]);
+ const [experimentLogList, setExperimentLogList] = useState([]);
+
+ const items = [
+ {
+ key: '1',
+ label: '日志详情',
+ children: (
+
+
+ );
+});
+
+export default Props;
diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx
index 43db02f9..56548d6e 100644
--- a/react-ui/src/pages/Experiment/index.jsx
+++ b/react-ui/src/pages/Experiment/index.jsx
@@ -437,9 +437,7 @@ function Experiment() {
+
-
+ 启动时间：{formatDate(message.create_time)}
+
+
+ 执行时长：
+ {elapsedTime(message.create_time, message.finish_time)}
+
+
+ 状态：
+
+
+ {experimentStatusInfo[message.status]?.label}
+
-
+
- {resultObj && resultObj.length > 0
- ? resultObj.map((item) => (
-
- ),
- icon:
-
- ))
- : null}
-
- {item.name}
-
-
-
- 文件名称
- 文件大小
-
- {item.value && item.value.length > 0
- ? item.value.map((ele) => (
-
- {ele.name}
- {ele.size}
-
- ))
- : null}
-
-
-
-
- );
-});
-
-export default Props;
diff --git a/react-ui/src/pages/Experiment/experimentText/props.less b/react-ui/src/pages/Experiment/experimentText/props.less
new file mode 100644
index 00000000..b3294d55
--- /dev/null
+++ b/react-ui/src/pages/Experiment/experimentText/props.less
@@ -0,0 +1,37 @@
+.experiment-drawer {
+ :global {
+ .ant-drawer-body {
+ overflow-y: hidden;
+ }
+ }
+
+ &__tabs {
+ height: calc(100% - 170px);
+ :global {
+ .ant-tabs-nav {
+ padding-left: 24px;
+ background-color: #f8fbff;
+ border: 1px solid #e0eaff;
+ }
+ .ant-tabs-content-holder {
+ overflow-y: auto;
+ }
+ }
+ }
+
+ &__info {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ padding-left: 24px;
+ color: @text-color;
+ font-size: 15px;
+ }
+
+ &__status-dot {
+ width: 8px;
+ height: 8px;
+ margin-right: 6px;
+ border-radius: 50%;
+ }
+}
diff --git a/react-ui/src/pages/Experiment/experimentText/props.tsx b/react-ui/src/pages/Experiment/experimentText/props.tsx
new file mode 100644
index 00000000..ccd51997
--- /dev/null
+++ b/react-ui/src/pages/Experiment/experimentText/props.tsx
@@ -0,0 +1,171 @@
+import { getNodeResult, getQueryByExperimentLog } from '@/services/experiment/index.js';
+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 ExperimentParameter from '../components/ExperimentParameter';
+import ExperimentResult from '../components/ExperimentResult';
+import LogList from '../components/LogList';
+import { experimentStatusInfo } from '../status';
+import styles from './props.less';
+
+export type ExperimentLog = {
+ log_type: 'normal' | 'resource'; // 日志类型
+ pod_name?: string; // 分布式名称
+ log_content?: string; // 日志内容
+ start_time?: string; // 日志开始时间
+};
+
+const Props = forwardRef((_, ref) => {
+ const [form] = Form.useForm();
+ const [experimentNodeData, setExperimentNodeData] = useState
- 任务名称：{stagingItem.label}
-
-
- 执行状态：
-
-
- {statusObj[stagingItem.experimentStatus]}
-
-
-
- 启动时间：{formatDate(stagingItem.experimentStartTime)}
-
-
- 耗时：
- {stagingItem.experimentEndTime
- ? elapsedTime(
- new Date(stagingItem.experimentStartTime),
- new Date(stagingItem.experimentEndTime),
- )
- : elapsedTime(new Date(stagingItem.experimentStartTime), new Date())}
-
-
+
+
+ 任务名称：{experimentNodeData.label}
+
+
+ 执行状态：
+
+
+ {experimentStatusInfo[experimentNodeData.experimentStatus]?.label}
+
+
+
+ 启动时间：{formatDate(experimentNodeData.experimentStartTime)}
+
+
+ 耗时：
+ {elapsedTime(
+ experimentNodeData.experimentStartTime,
+ experimentNodeData.experimentEndTime,
+ )}
+
+
- {item.finish_time
- ? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
- : elapsedTime(new Date(item.create_time), new Date())}
+ {elapsedTime(item.create_time, item.finish_time)}
{formatDate(item.create_time)}
+ {ele.icon_path && (
+
+ )}
{ele.component_label}