merge

react-ui/src/pages/Experiment/index.jsx

@@ -21,6 +21,25 @@ const Experiment = React.FC = () => {
       "Skipped":'未执行',
       "Omitted":'未执行',
     }
+    const statusColorObj={
+      "Running":'#165bff',
+      "Succeeded":'#63a728',
+      "Pending":'#f981eb',
+      "Failed":'#c73131',
+      "Error":'#c73131',
+      "Terminated":'#8a8a8a',
+      "Skipped":'#8a8a8a',
+      "Omitted":'#8a8a8ae',
+    }
+    const statusImgObj={
+      'Running':'/assets/images/running-icon.png',
+      'Succeeded':'/assets/images/success-icon.png',
+      'Pending':'/assets/images/pending-icon.png',
+      'Failed':'/assets/images/fail-icon.png',
+      'Terminated':'/assets/images/omitted-icon.png',
+      'Skipped':'/assets/images/omitted-icon.png',
+      'Omitted':'/assets/images/omitted-icon.png',
+    }
     const [experimentList, setExperimentList] = useState([]);
     
     const [workflowList, setWorkflowList] = useState([]);
@@ -59,10 +78,11 @@ const Experiment = React.FC = () => {
         setExpandedRowKeys(val)
         if(ret.code==200&&ret.data&&ret.data.length>0){
           setExperimentInList(ret.data)
-          
+          getList()
         }
         else{
           setExperimentInList([])
+          getList()
         }
       })
     }
@@ -160,7 +180,6 @@ const Experiment = React.FC = () => {
         if(ret.code==200){
           message.success('运行成功')
           getQueryByExperiment(id)
-        getList()
         }
         else{
           message.error('运行失败')
@@ -230,8 +249,14 @@ const Experiment = React.FC = () => {
         },
         {
           title: '最近五次运行状态',
-          dataIndex: 'state',
-          key: 'state',
+          dataIndex: 'status_list',
+          key: 'status_list',
+          render: (text) => {
+
+            let newText=text&&text.replace(/\s+/g,'').split(',')
+            console.log(newText);
+            return <>{ newText&&newText.length>0?newText.map((item,index)=>{console.log(item,statusImgObj[item]); return <img style={{width:'17px',marginRight:'6px'}} key={index} src={statusImgObj[item]} />}):null}</>
+          }
         },
         
         {
@@ -321,7 +346,7 @@ const Experiment = React.FC = () => {
         {experimentInList&&experimentInList.length>0?experimentInList.map((item,index)=>(
           <div  className={Styles.tableExpandBox} style={{border:'1px solid #eaeaea',backgroundColor:'#fff',height:'45px'}}>
           <a style={{width:'50px'}} onClick={(e)=>routerToText(e,item,record)}>{index+1}</a>
-          <div style={{width:'200px'}}>{statusObj[item.status]}</div>
+          <div className={Styles.statusBox} style={{width:'200px'}}><img style={{width:'17px',marginRight:'7px'}} src={statusImgObj[item.status]}/> <span style={{color:statusColorObj[item.status]}} className={Styles.statusIcon}>{statusObj[item.status]}</span></div>
           <div style={{width:'300px'}}>{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())}</div>
           <div style={{width:'300px'}}>{momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}</div>
           <div style={{width:'300px'}}>

react-ui/src/pages/Experiment/index.less

@@ -32,4 +32,16 @@
     font-size:15px;
     
     padding: 0 65px 0 40px;
+}
+.statusBox{
+    display: flex;
+    align-items: center;
+
+    .statusIcon{
+        visibility: hidden;
+        transition: all 0.2s;
+    }
+}
+.statusBox:hover .statusIcon{
+    visibility: visible;
 }

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -13,6 +13,7 @@ import { useNavigate} from 'react-router-dom';
 const editPipeline = React.FC = () => {
     const propsRef=useRef()
     const navgite=useNavigate();
+    const [contextMenu,setContextMenu]=useState({})
     const locationParams =useParams () //新版本获取路由参数接口
     let graph=null
     const pipelineContainer = useEmotionCss(() => {
@@ -30,6 +31,7 @@ const editPipeline = React.FC = () => {
         };
       });
       const graphRef=useRef()
+     
       const onDragEnd=(val)=>{
         console.log(val,'eee');
         const _x = val.x
@@ -117,9 +119,49 @@ const editPipeline = React.FC = () => {
           // graph.render()
         })
       }
+      const handlerContextMenu=(e)=> {
+        e.stopPropagation();
+        // this.menuType = e.item._cfg.type;
+      }
+      const initMenu=()=> {
+        // const selectedNodes = this.selectedNodes;
+        setContextMenu(new G6.Menu({
+          getContent(evt) {
+            console.log(11111, evt);
+  
+            let ul = `<ul>
+           <li class="rightmenu-item" code="undo" disabled>撤销</li>
+           <li class="rightmenu-item" code="redo" >恢复</li>
+           <li class="rightmenu-item" code="delete" >删除</li>
+           `;
+            },
+            
+          
+          handleMenuClick:(target, item) => {
+            switch (target.getAttribute('code')) {
+              // case 'undo':
+              //   this.$emit('handleMenuCall', { code: 'undo' });
+              //   break;
+              // case 'redo':
+              //   this.$emit('handleMenuCall', { code: 'redo' });
+              //   break;
+              case 'delete':
+                graph.removeItem(item);
+  
+                break;
+              default:
+                break;
+            }
+          },
+          offsetX: 16 + 20,
+          offsetY: 0,
+          itemTypes: ['node', 'canvas',  'edge'],
+        }));
+      };
       useEffect(()=>{
         getFirstWorkflow(locationParams.id)
         initGraph()
+        initMenu()
       },[])
       const initGraph=()=>{
         G6.registerNode(
@@ -224,7 +266,7 @@ const editPipeline = React.FC = () => {
         animate: false,
         groupByTypes: false,
         fitView:true,
-        plugins: [],
+        plugins: [contextMenu],
         enabledStack: true,
         modes: {
           default: [
@@ -345,6 +387,7 @@ const editPipeline = React.FC = () => {
           });
         });
       });
+      graph.on('contextmenu', handlerContextMenu);
       window.onresize = () => {
         if (!graph || graph.get('destroyed')) return;
         if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight) return;

react-ui/src/pages/Pipeline/editPipeline/props.jsx

@@ -49,8 +49,8 @@ const Props = forwardRef(({onParentChange}, ref) =>{
     };
     useImperativeHandle(ref, () => ({
         showDrawer (e)  {
-          console.log(e.item.getModel());
-            // console.log(e.item.getModel().in_parameters);
+            if(e.item&&e.item.getModel()){
+              // console.log(e.item.getModel().in_parameters);
             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)})
@@ -60,6 +60,8 @@ const Props = forwardRef(({onParentChange}, ref) =>{
             //   console.log(stagingItem);
             // }, (500));
             setOpen(true);
+            }
+            
           },
          
       }));