{
const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useVisible(false);
const [globalParam, setGlobalParam, globalParamRef] = useStateRef([]);
const { message } = App.useApp();
- let sourceAnchorIdx, targetAnchorIdx;
+ let sourceAnchorIdx, targetAnchorIdx, dropAnchorIdx;
+ let dragSourceNode;
useEffect(() => {
initMenu();
@@ -35,9 +36,8 @@ const EditPipeline = () => {
}, []);
const onDragEnd = (val) => {
- const _x = val.x;
- const _y = val.y;
- const point = graph.getPointByClient(_x, _y);
+ const { x, y } = val;
+ const point = graph.getPointByClient(x, y);
// 元模型
const model = {
...val,
@@ -46,8 +46,8 @@ const EditPipeline = () => {
id: val.component_name + '-' + s8(),
isCluster: false,
};
- console.log('model', model);
- graph.addItem('node', model, true);
+ // console.log('model', model);
+ graph.addItem('node', model, false);
};
const formChange = (val) => {
if (graph) {
@@ -83,11 +83,11 @@ const EditPipeline = () => {
return;
}
- const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
- if (propsError) {
- message.error('基本信息必填项需配置');
- return;
- }
+ // const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
+ // if (propsError) {
+ // message.error('基本信息必填项需配置');
+ // return;
+ // }
propsRef.current.propClose();
setTimeout(() => {
const data = graph.save();
@@ -110,6 +110,10 @@ const EditPipeline = () => {
};
const getGraphData = (data) => {
if (graph) {
+ // 修改历史数据有蓝色边框的问题
+ data.nodes.forEach((item) => {
+ item.style.stroke = '#fff';
+ });
graph.data(data);
graph.render();
} else {
@@ -118,7 +122,6 @@ const EditPipeline = () => {
}, 500);
}
};
-
const processParallelEdgesOnAnchorPoint = (
edges,
offsetDiff = 15,
@@ -230,6 +233,15 @@ const EditPipeline = () => {
}
return edges;
};
+ // 判断两个节点之间是否有边
+ const hasEdge = (source, target) => {
+ const neighbors = source.getNeighbors();
+ for (const node of neighbors) {
+ // 新建边的时候，获取的 neighbors 的数据有问题，不全是 INode 类型，可能没有 getID 方法
+ if (node.getID?.() === target.getID?.()) return true;
+ }
+ return false;
+ };
const cloneElement = (item) => {
console.log(item);
let data = graph.save();
@@ -254,15 +266,13 @@ const EditPipeline = () => {
}
});
};
- const handlerContextMenu = (e) => {
- e.stopPropagation();
- // this.menuType = e.item._cfg.type;
- };
// 上下文菜单
const initMenu = () => {
// const selectedNodes = this.selectedNodes;
contextMenu = new G6.Menu({
getContent(evt) {
+ const type = evt.item.getType();
+ const cloneDisplay = type === 'node' ? 'block' : 'none';
return `
`;
},
@@ -314,11 +323,11 @@ const EditPipeline = () => {
getAnchorPoints(cfg) {
return (
cfg.anchorPoints || [
- // 四个
+ // 四个，上下左右
[0.5, 0],
[0.5, 1],
- // [0, 0.5],
- // [1, 0.5],
+ [0, 0.5],
+ [1, 0.5],
]
);
},
@@ -344,6 +353,7 @@ const EditPipeline = () => {
textAlign: 'left',
textBaseline: 'middle',
fill: '#000',
+ cursor: 'pointer',
},
name: 'text-shape',
draggable: true,
@@ -360,6 +370,7 @@ const EditPipeline = () => {
fill: '#fff',
stroke: '#a4a4a5',
cursor: 'crosshair',
+ lineWidth: 1,
},
name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point')
anchorPointIdx: i, // flag the idx of the anchor-point circle
@@ -380,10 +391,9 @@ const EditPipeline = () => {
// if (value || point.get('links') > 0) point.show();
// else point.hide();
// });
-
const group = item.getContainer();
const shape = group.get('children')[0];
- const anchorPoints = group.findAll((ele) => ele.get('name') === 'anchor-point');
+ const anchorPoints = group.findAll((item) => item.get('name') === 'anchor-point');
if (name === 'hover') {
if (value) {
shape.attr('stroke', themes['primaryColor']);
@@ -396,6 +406,18 @@ const EditPipeline = () => {
point.hide();
});
}
+ } else if (name === 'drag') {
+ if (sourceAnchorIdx !== null && sourceAnchorIdx !== undefined) {
+ const anchorPoint = anchorPoints[sourceAnchorIdx];
+ anchorPoint.attr('stroke', value ? themes['primaryColor'] : '#a4a4a5');
+ anchorPoint.attr('lineWidth', value ? 2 : 1);
+ }
+ } else if (name === 'drop') {
+ if (dropAnchorIdx !== null && dropAnchorIdx !== undefined) {
+ const anchorPoint = anchorPoints[dropAnchorIdx];
+ anchorPoint.attr('stroke', value ? themes['primaryColor'] : '#a4a4a5');
+ anchorPoint.attr('lineWidth', value ? 2 : 1);
+ }
}
},
},
@@ -407,10 +429,14 @@ const EditPipeline = () => {
width: graphRef.current.clientWidth || 500,
height: graphRef.current.clientHeight || '100%',
animate: false,
- groupByTypes: false,
+ groupByTypes: true,
fitView: true,
plugins: [contextMenu],
- enabledStack: true,
+ enabledStack: false,
+ fitView: true,
+ minZoom: 0.5,
+ maxZoom: 5,
+ fitViewPadding: 300,
modes: {
default: [
// config the shouldBegin for drag-node to avoid node moving while dragging on the anchor-point circles
@@ -420,10 +446,6 @@ const EditPipeline = () => {
if (e.target.get('name') === 'anchor-point') return false;
return true;
},
- // shouldEnd: e => {
- // console.log(e);
- // return false;
- // },
},
// config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles
{
@@ -434,11 +456,17 @@ const EditPipeline = () => {
if (e.target && e.target.get('name') !== 'anchor-point') return false;
sourceAnchorIdx = e.target.get('anchorPointIdx');
e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle
+ dragSourceNode = e.item;
return true;
},
shouldEnd: (e) => {
// avoid ending at other shapes on the node
if (e.target && e.target.get('name') !== 'anchor-point') return false;
+ if (!dragSourceNode || !e.item) return false;
+ // 不允许连接自己
+ if (dragSourceNode.getID() === e.item.getID()) return false;
+ // 两个节点不允许多条边
+ if (hasEdge(dragSourceNode, e.item)) return false;
if (e.target) {
targetAnchorIdx = e.target.get('anchorPointIdx');
e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle
@@ -450,22 +478,11 @@ const EditPipeline = () => {
},
'drag-canvas',
'zoom-canvas',
- // 'brush-select',
- 'drag-combo',
- ],
- altSelect: [
- {
- type: 'brush-select',
- trigger: 'drag',
- },
- 'drag-node',
],
},
-
defaultNode: {
type: 'rect-node',
size: [110, 36],
-
labelCfg: {
style: {
fill: 'transparent',
@@ -488,8 +505,7 @@ const EditPipeline = () => {
},
},
defaultEdge: {
- //type: 'cubic-vertical',
-
+ // type: 'cubic-vertical',
style: {
endArrow: {
// 设置终点箭头
@@ -503,15 +519,8 @@ const EditPipeline = () => {
stroke: '#CDD0DC',
radius: 1,
},
- nodeStateStyle: {
- hover: {
- opacity: 1,
- stroke: '#8fe8ff',
- },
- },
labelCfg: {
autoRotate: true,
- // refY: 10,
style: {
fontSize: 10,
fill: '#FFF',
@@ -528,20 +537,16 @@ const EditPipeline = () => {
cursor: 'pointer',
},
},
- // linkCenter: true,
- fitView: true,
- minZoom: 0.5,
- maxZoom: 5,
- fitViewPadding: 300,
});
graph.on('node:click', (e) => {
e.stopPropagation();
if (e.target.get('name') !== 'anchor-point' && e.item) {
- // graph.setItemState(e.item, 'nodeClicked', true);
+ // 获取所有的上游节点
const parentNodes = findAllParentNodes(graph, e.item);
// 如果没有打开过全局参数抽屉，获取不到全局参数
const globalParams =
paramsDrawerRef.current.getFieldsValue().global_param || globalParamRef.current;
+ // 打开节点编辑抽屉
propsRef.current.showDrawer(e, globalParams, parentNodes);
}
});
@@ -550,23 +555,26 @@ const EditPipeline = () => {
graph.updateItem(e.edge, {
sourceAnchor: sourceAnchorIdx,
targetAnchor: targetAnchorIdx,
+ type:
+ targetAnchorIdx === 0 || targetAnchorIdx === 1 ? 'cubic-vertical' : 'cubic-horizontal',
});
// update the curveOffset for parallel edges
- const edges = graph.save().edges;
- processParallelEdgesOnAnchorPoint(edges);
- graph.getEdges().forEach((edge, i) => {
- graph.updateItem(edge, {
- curveOffset: edges[i].curveOffset,
- curvePosition: edges[i].curvePosition,
- });
- });
+ // const edges = graph.save().edges;
+ // processParallelEdgesOnAnchorPoint(edges);
+ // graph.getEdges().forEach((edge, i) => {
+ // graph.updateItem(edge, {
+ // curveOffset: edges[i].curveOffset,
+ // curvePosition: edges[i].curvePosition,
+ // });
+ // });
});
+ // 删除边时，修改 anchor-point 的 links 值
graph.on('afterremoveitem', (e) => {
if (e.item && e.item.source && e.item.target) {
- const sourceNode = graph.findById(e.item.source);
- const targetNode = graph.findById(e.item.target);
- const { sourceAnchor, targetAnchor } = e.item;
+ const { source, target, sourceAnchor, targetAnchor } = e.item;
+ const sourceNode = graph.findById(source);
+ const targetNode = graph.findById(target);
if (sourceNode && !isNaN(sourceAnchor)) {
const sourceAnchorShape = sourceNode
.getContainer()
@@ -587,9 +595,10 @@ const EditPipeline = () => {
}
}
});
- // after clicking on the first node, the edge is created, update the sourceAnchor
+ // after drag on the first node, the edge is created, update the sourceAnchor
graph.on('afteradditem', (e) => {
- if (e.item && e.item.getType() === 'edge') {
+ const sourceAnchor = e.item.getModel().sourceAnchor;
+ if (e.item && e.item.getType() === 'edge' && !sourceAnchor) {
graph.updateItem(e.item, {
sourceAnchor: sourceAnchorIdx,
});
@@ -601,17 +610,34 @@ const EditPipeline = () => {
graph.on('node:mouseleave', (e) => {
graph.setItemState(e.item, 'hover', false);
});
- graph.on('node:dragenter', (e) => {
+ graph.on('node:dragstart', (e) => {
graph.setItemState(e.item, 'hover', true);
+ graph.setItemState(e.item, 'drag', true);
});
- graph.on('node:dragleave', (e) => {
+ graph.on('node:dragend', (e) => {
graph.setItemState(e.item, 'hover', false);
+ graph.setItemState(e.item, 'drag', false);
});
- graph.on('node:dragstart', (e) => {
+ graph.on('node:dragenter', (e) => {
+ if (e.item?.getID() === dragSourceNode?.getID()) return;
graph.setItemState(e.item, 'hover', true);
+ if (e.target.get('name') === 'anchor-point') {
+ dropAnchorIdx = e.target.get('anchorPointIdx');
+ graph.setItemState(e.item, 'drop', true);
+ } else {
+ graph.setItemState(e.item, 'drop', false);
+ }
});
- graph.on('node:drag', (e) => {
- graph.setItemState(e.item, 'hover', true);
+ graph.on('node:dragleave', (e) => {
+ if (e.item?.getID() === dragSourceNode?.getID()) return;
+ graph.setItemState(e.item, 'hover', false);
+ graph.setItemState(e.item, 'drop', false);
+ dropAnchorIdx = undefined;
+ });
+ graph.on('node:drop', (e) => {
+ graph.setItemState(e.item, 'hover', false);
+ graph.setItemState(e.item, 'drop', false);
+ dropAnchorIdx = undefined;
});
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx
index cf5fb571..12dbaae8 100644
--- a/react-ui/src/pages/Pipeline/index.jsx
+++ b/react-ui/src/pages/Pipeline/index.jsx
@@ -43,32 +43,30 @@ const Pipeline = () => {
};
const routeToEdit = (e, record) => {
e.stopPropagation();
- navgite({ pathname: `/pipeline/template/${record.id}/${record.name}` });
+ navgite({ pathname: `/pipeline/template/${record.id}` });
};
const showModal = () => {
form.resetFields();
+ setFormId(null);
setDialogTitle('新建流水线');
setIsModalOpen(true);
};
- const handleOk = () => {
- console.log(1111);
- setIsModalOpen(false);
- };
const handleCancel = () => {
setIsModalOpen(false);
};
const onFinish = (values) => {
if (formId) {
editWorkflow({ ...values, id: formId }).then((ret) => {
+ setIsModalOpen(false);
message.success('编辑成功');
getList();
- setIsModalOpen(false);
});
} else {
addWorkflow(values).then((ret) => {
- console.log(ret);
+ setIsModalOpen(false);
+ message.success('新建成功');
if (ret.code === 200) {
- navgite({ pathname: `/pipeline/template/${ret.data.id}/${ret.data.name}` });
+ navgite({ pathname: `/pipeline/template/${ret.data.id}` });
}
});
}
diff --git a/react-ui/src/pages/User/Login/index.tsx b/react-ui/src/pages/User/Login/index.tsx
index f531cbad..220a2b17 100644
--- a/react-ui/src/pages/User/Login/index.tsx
+++ b/react-ui/src/pages/User/Login/index.tsx
@@ -344,7 +344,7 @@ const Login: React.FC = () => {
}}
placeholder={intl.formatMessage({
id: 'pages.login.password.placeholder',
- defaultMessage: '密码: admin123',
+ defaultMessage: '请输入密码',
})}
rules={[
{
@@ -374,7 +374,7 @@ const Login: React.FC = () => {
required: true,
message: (
),
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 8a976abc..4934396c 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -9,12 +9,19 @@ import { clearSessionToken, getAccessToken } from './access';
import { setRemoteMenu } from './services/session';
import { gotoLoginPage } from './utils/ui';
+// [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.
+const popupError = (error: string) => {
+ // 直接调用 message.error 有时候不弹出来
+ setTimeout(() => {
+ message.error(error);
+ }, 100);
+};
+
/**
* Umi Max 网络请求配置
* @doc https://umijs.org/docs/max/request#配置
*/
export const requestConfig: RequestConfig = {
- errorConfig: {},
requestInterceptors: [
(url: string, options: AxiosRequestConfig) => {
const headers = options.headers ?? {};
@@ -30,26 +37,32 @@ export const requestConfig: RequestConfig = {
},
],
responseInterceptors: [
- (response: AxiosResponse) => {
- const { status, data } = response || {};
- if (status >= 200 && status < 300) {
- if (data && (data instanceof Blob || data.code === 200)) {
- return response;
- } else if (data && data.code === 401) {
- clearSessionToken();
- setRemoteMenu(null);
- gotoLoginPage(false);
- message.error('请重新登录');
- return Promise.reject(response);
+ [
+ (response: AxiosResponse) => {
+ const { status, data } = response || {};
+ console.log(message, data);
+ if (status >= 200 && status < 300) {
+ if (data && (data instanceof Blob || data.code === 200)) {
+ return response;
+ } else if (data && data.code === 401) {
+ clearSessionToken();
+ setRemoteMenu(null);
+ gotoLoginPage(false);
+ popupError('请重新登录');
+ return Promise.reject(response);
+ } else {
+ popupError(data?.msg ?? '请求失败');
+ return Promise.reject(response);
+ }
} else {
- console.log(message, data);
- message.error(data?.msg ?? '请求失败');
+ popupError('请求失败');
return Promise.reject(response);
}
- } else {
- message.error('请求失败');
- return Promise.reject(response);
- }
- },
+ },
+ (error: Error) => {
+ popupError(error.message ?? '请求失败');
+ return Promise.reject(error);
+ },
+ ],
],
};
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/scheduling/ExperimentInstanceStatusTask.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/scheduling/ExperimentInstanceStatusTask.java
index 91ed6847..4680285e 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/scheduling/ExperimentInstanceStatusTask.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/scheduling/ExperimentInstanceStatusTask.java
@@ -34,7 +34,7 @@ public class ExperimentInstanceStatusTask {
private ModelDependencyDao modelDependencyDao;
private List
experimentIds = new ArrayList<>();
- @Scheduled(cron = "0/30 * * * * ?") // 每30S执行一次
+ @Scheduled(cron = "0/14 * * * * ?") // 每30S执行一次
public void executeExperimentInsStatus() throws IOException {
// 首先查到所有非终止态的实验实例
List experimentInsList = experimentInsService.queryByExperimentIsNotTerminated();
@@ -49,7 +49,7 @@ public class ExperimentInstanceStatusTask {
}catch (Exception e){
experimentIns.setStatus("Failed");
}
- if (!StringUtils.equals(oldStatus,experimentIns.getStatus())){
+// if (!StringUtils.equals(oldStatus,experimentIns.getStatus())){
experimentIns.setUpdateTime(new Date());
// 线程安全的添加操作
synchronized (experimentIds) {
@@ -57,7 +57,7 @@ public class ExperimentInstanceStatusTask {
}
updateList.add(experimentIns);
- }
+// }
// experimentInsDao.update(experimentIns);
}
@@ -105,7 +105,7 @@ public class ExperimentInstanceStatusTask {
}
}
- @Scheduled(cron = "0/30 * * * * ?") // / 每30S执行一次
+ @Scheduled(cron = "0/17 * * * * ?") // / 每30S执行一次
public void executeExperimentStatus() throws IOException {
if (experimentIds.size()==0){
return;