From 1392cb7cd6bdb025f2d03015f1c21b4eeabcfba9 Mon Sep 17 00:00:00 2001 From: YaHoo94 <673964817@qq.com> Date: Sat, 27 Jan 2024 09:08:30 +0800 Subject: [PATCH] merge --- ...itted.png => component-icon-1-Skipped.png} | Bin .../images/component-icon-2-Skipped.png | Bin 0 -> 3596 bytes .../experimentText/editPipeline.less | 14 +++ .../pages/Experiment/experimentText/index.jsx | 53 ++++++++- .../pages/Experiment/experimentText/props.jsx | 58 +++++++--- react-ui/src/pages/Experiment/index.jsx | 103 ++++++++++++++++-- react-ui/src/services/experiment/index.js | 18 +++ 7 files changed, 220 insertions(+), 26 deletions(-) rename react-ui/public/assets/images/{component-icon-1--Omitted.png => component-icon-1-Skipped.png} (100%) create mode 100644 react-ui/public/assets/images/component-icon-2-Skipped.png diff --git a/react-ui/public/assets/images/component-icon-1--Omitted.png b/react-ui/public/assets/images/component-icon-1-Skipped.png similarity index 100% rename from react-ui/public/assets/images/component-icon-1--Omitted.png rename to react-ui/public/assets/images/component-icon-1-Skipped.png diff --git a/react-ui/public/assets/images/component-icon-2-Skipped.png b/react-ui/public/assets/images/component-icon-2-Skipped.png new file mode 100644 index 0000000000000000000000000000000000000000..6ee447f3e7cf9117f9ec7d2d557926163ca9fe80 GIT binary patch literal 3596 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 { const propsRef=useRef() const navgite=useNavigate(); const locationParams =useParams () //新版本获取路由参数接口 let graph=null const [experimentStatusObj,setExperimentStatusObj]=useState({}) + const [experimentAllMessage,setExperimentAllMessage]=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 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', @@ -88,11 +119,13 @@ const ExperimentText = React.FC = () => { console.log(JSON.parse(ret.data.dag)); getExperimentIns(locationParams.id).then(res=>{ if(res.code==200){ + console.log(ret.data,'data'); const experimentStatusObjs=JSON.parse(res.data.nodes_status) - const newNodeList= JSON.parse(ret.data.dag).nodes.map(item=>{console.log(experimentStatusObjs); return {...item,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}}) - const newData={...JSON.parse(ret.data.dag),nodes:newNodeList} - console.log(newData); - getGraphData(newData) + const newNodeList= JSON.parse(ret.data.dag).nodes.map(item=>{console.log(experimentStatusObjs); 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}}) + const newData={...JSON.parse(ret.data.dag),nodes:newNodeList} + console.log(newData); + setExperimentAllMessage(res.data) + getGraphData(newData) // setExperimentStatusObj(JSON.parse(ret.data.nodes_status)) } @@ -327,6 +360,16 @@ const ExperimentText = React.FC = () => { return (
+
启动时间：{momnet(experimentAllMessage.create_time).format('YYYY-MM-DD HH:mm:ss')}
+
执行时长：{experimentAllMessage.finish_time?timers(new Date(experimentAllMessage.finish_time).getTime()-new Date(experimentAllMessage.create_time).getTime()):timers(new Date().getTime()-new Date(experimentAllMessage.create_time).getTime())}
+
状态： +
+ {statusObj[experimentAllMessage.status]}
diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx index 3bf1029b..2b2fec99 100644 --- a/react-ui/src/pages/Experiment/experimentText/props.jsx +++ b/react-ui/src/pages/Experiment/experimentText/props.jsx @@ -3,19 +3,48 @@ import { Button, Drawer,Form, Input ,Tabs } from 'antd'; import Styles from './editPipeline.less' import{getQueryByExperimentLog}from '@/services/experiment/index.js' import { ProfileOutlined, DatabaseOutlined} from '@ant-design/icons'; +import momnet from 'moment' const { TextArea } = Input; const Props = forwardRef(({onParentChange}, ref) =>{ const [form] = Form.useForm(); const [stagingItem,setStagingItem]=useState({}) const [messageItem,setMessageItem]=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 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:
, icon: @@ -226,11 +255,6 @@ const Props = forwardRef(({onParentChange}, ref) =>{ form.resetFields(); form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters),control_strategy:JSON.parse(e.item.getModel().control_strategy)}) setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters),control_strategy:JSON.parse(e.item.getModel().control_strategy)}) - // form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) - // setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) - // setTimeout(() => { - // console.log(stagingItem); - // }, (500)); setOpen(true); }) } @@ -238,11 +262,6 @@ const Props = forwardRef(({onParentChange}, ref) =>{ form.resetFields(); form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters),control_strategy:JSON.parse(e.item.getModel().control_strategy)}) setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters),control_strategy:JSON.parse(e.item.getModel().control_strategy)}) - // form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) - // setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)}) - // setTimeout(() => { - // console.log(stagingItem); - // }, (500)); setOpen(true); } // console.log(e.item.getModel().in_parameters); @@ -252,7 +271,18 @@ const Props = forwardRef(({onParentChange}, ref) =>{ })); return ( <> - + +
任务名称：{stagingItem.label}
+
执行状态： +
+ {statusObj[stagingItem.experimentStatus]}
+
启动时间：{momnet(stagingItem.experimentStartTime).format('YYYY-MM-DD HH:mm:ss')}
+
耗时：{stagingItem.experimentEndTime?timers(new Date(stagingItem.experimentEndTime).getTime()-new Date(stagingItem.experimentStartTime).getTime()):timers(new Date().getTime()-new Date(stagingItem.experimentStartTime).getTime())}
diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index 91aa7704..2751ee34 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -1,8 +1,8 @@ import React ,{ useState,useEffect,useRef }from 'react'; import { Space, Table, Tag,Button,Modal, Form, Input ,message, Select,} from 'antd'; -import { PlusOutlined, EditOutlined ,PlayCircleOutlined} from '@ant-design/icons'; -import {getWorkflow,addWorkflow,removeWorkflow,cloneWorkflow} from '@/services/pipeline/index.js' -import {getExperiment,runExperiments,getExperimentById,postExperiment,putExperiment,getQueryByExperimentId} from '@/services/experiment/index.js' +import { PlusOutlined, EditOutlined ,PlayCircleOutlined,DeleteOutlined,FieldTimeOutlined} from '@ant-design/icons'; +import {getWorkflow,} from '@/services/pipeline/index.js' +import {getExperiment,runExperiments,getExperimentById,postExperiment,putExperiment,getQueryByExperimentId,deleteExperimentById,deleteQueryByExperimentInsId,putQueryByExperimentInsId} from '@/services/experiment/index.js' import Styles from './index.less' import { useNavigate} from 'react-router-dom'; import momnet from 'moment' @@ -14,9 +14,12 @@ const Experiment = React.FC = () => { const statusObj={ "Running":'运行中', "Succeeded":'成功', + "Pending":'等待中', "Failed":'失败', "Error":'错误', - "Teminated":'终止' + "Terminated":'终止', + "Skipped":'未执行', + "Omitted":'未执行', } const [experimentList, setExperimentList] = useState([]); @@ -258,7 +261,41 @@ const Experiment = React.FC = () => { > 编辑 - + ), }, @@ -278,14 +315,66 @@ const Experiment = React.FC = () => {
状态
运行时长
开始时间
+
操作
:''} {experimentInList&&experimentInList.length>0?experimentInList.map((item,index)=>(
routerToText(e,item,record)}>{index+1}
{statusObj[item.status]}
-
{item.finish_time?timers(new Date(item.finish_time).getTime()-new Date(item.start_time).getTime()):timers(new Date().getTime()-new Date(item.start_time).getTime())}
-
{momnet(item.start_time).format('YYYY-MM-DD HH:mm:ss')}
+
{item.finish_time?timers(new Date(item.finish_time).getTime()-new Date(item.create_time).getTime()):timers(new Date().getTime()-new Date(item.create_time).getTime())}
+
{momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
+
+ + +
)):''} diff --git a/react-ui/src/services/experiment/index.js b/react-ui/src/services/experiment/index.js index af4a3264..5409d042 100644 --- a/react-ui/src/services/experiment/index.js +++ b/react-ui/src/services/experiment/index.js @@ -21,12 +21,30 @@ export function getExperimentById(id) { method: 'GET', }); } +// 根据id删除实验 +export function deleteExperimentById(id) { + return request(`/api/mmp/experiment/${id}`, { + method: 'DELETE', + }); +} // 根据id查询实验实例 export function getQueryByExperimentId(id) { return request(`/api/mmp/experimentIns/queryByExperimentId/${id}`, { method: 'GET', }); } +// 根据id删除实验实例 +export function deleteQueryByExperimentInsId(id) { + return request(`/api/mmp/experimentIns/${id}`, { + method: 'DELETE', + }); +} +// 根据id终止实验实例 +export function putQueryByExperimentInsId(id) { + return request(`/api/mmp/experimentIns/${id}`, { + method: 'PUT', + }); +} // 根据id查询查询日志 export function getQueryByExperimentLog(params) { return request(`/api/mmp/experimentIns/log/`, {