@riil-frontend/component-topology 9.0.0-a.30 → 9.0.0-a.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/1.js +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +17 -17
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +10 -11
- package/es/core/editor/components/settings/core/getPropertyViewType.js +3 -0
- package/es/core/editor/utils/edgeTypeStyleUtil.js +38 -0
- package/es/core/hooks/useTopoEdit.js +52 -25
- package/es/core/hooks/useTopoFullscreen.js +1 -2
- package/es/core/models/TopoApp.js +1 -1
- package/es/networkTopo/utils/exitLinkUtil.js +10 -10
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +9 -10
- package/lib/core/editor/components/settings/core/getPropertyViewType.js +3 -0
- package/lib/core/editor/utils/edgeTypeStyleUtil.js +39 -0
- package/lib/core/hooks/useTopoEdit.js +52 -25
- package/lib/core/hooks/useTopoFullscreen.js +1 -2
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/networkTopo/utils/exitLinkUtil.js +10 -10
- package/package.json +2 -2
@@ -3,7 +3,7 @@ import _Field from "@alifd/next/es/field";
|
|
3
3
|
import _Select from "@alifd/next/es/select";
|
4
4
|
import _Form from "@alifd/next/es/form";
|
5
5
|
import React, { useEffect, useState } from 'react';
|
6
|
-
import { getEdgesBySelection, loopEdgesAndChildren } from "../../../../utils/edgeTypeStyleUtil";
|
6
|
+
import { getEdgesBySelection, loopEdgesAndChildren, isNodeAllEdges } from "../../../../utils/edgeTypeStyleUtil";
|
7
7
|
import styles from "./EdgeType.module.scss";
|
8
8
|
import LineType from "./LineType";
|
9
9
|
var FormItem = _Form.Item;
|
@@ -77,12 +77,12 @@ function getValuesByEdges(topo) {
|
|
77
77
|
})[0] || 'nil';
|
78
78
|
}
|
79
79
|
|
80
|
-
function getEdgesValues(edges
|
80
|
+
function getEdgesValues(edges) {
|
81
81
|
var edgeValues = [];
|
82
|
-
var htTopo = topo.getHtTopo();
|
83
82
|
edges.forEach(function (edge) {
|
84
83
|
edgeValues.push({
|
85
|
-
baseAgreement:
|
84
|
+
baseAgreement: false,
|
85
|
+
//,
|
86
86
|
lineButton: edge.s('edge.type'),
|
87
87
|
startPoint: getStartPoint(edge),
|
88
88
|
endPoint: getEndPoint(edge),
|
@@ -123,16 +123,12 @@ function EdgeType(props) {
|
|
123
123
|
|
124
124
|
var _useState = useState(false),
|
125
125
|
disable = _useState[0],
|
126
|
-
|
126
|
+
setDisable = _useState[1];
|
127
127
|
|
128
128
|
var field = _Field.useField({
|
129
129
|
autoUnmount: false,
|
130
130
|
values: getValuesByEdges(topo),
|
131
131
|
onChange: function onChange(name, value) {
|
132
|
-
if (name == 'baseAgreement') {
|
133
|
-
setDisabel(value);
|
134
|
-
}
|
135
|
-
|
136
132
|
if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
|
137
133
|
_onChange(name, null);
|
138
134
|
} else {
|
@@ -143,6 +139,8 @@ function EdgeType(props) {
|
|
143
139
|
|
144
140
|
useEffect(function () {
|
145
141
|
field.setValues(getValuesByEdges(topo));
|
142
|
+
field.setValue('baseAgreement', topo.getHtTopo().getEdgeMultarc(getEdgesBySelection(topo)));
|
143
|
+
setDisable(isNodeAllEdges(topo));
|
146
144
|
}, [selection]);
|
147
145
|
return /*#__PURE__*/React.createElement("div", {
|
148
146
|
className: styles.lineBox
|
@@ -152,10 +150,11 @@ function EdgeType(props) {
|
|
152
150
|
labelAlign: "top"
|
153
151
|
}, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(LineType, {
|
154
152
|
name: "lineButton",
|
155
|
-
disable:
|
153
|
+
disable: !!field.getValue('baseAgreement')
|
156
154
|
})), /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(_Checkbox, {
|
157
155
|
name: "baseAgreement",
|
158
|
-
onChange: _onChange
|
156
|
+
onChange: _onChange,
|
157
|
+
disabled: disable
|
159
158
|
}, "\u81EA\u52A8\u8C03\u6574")), /*#__PURE__*/React.createElement(FormItem, {
|
160
159
|
label: "\u8D77\u70B9"
|
161
160
|
}, /*#__PURE__*/React.createElement(_Select, {
|
@@ -8,6 +8,9 @@ function getPropertyViewType(selection) {
|
|
8
8
|
if (!selectionSize) {
|
9
9
|
// 未选
|
10
10
|
viewType = 'view';
|
11
|
+
} else if ((selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.getLayer()) === 'backgroundImage') {
|
12
|
+
// 背景图
|
13
|
+
viewType = 'view';
|
11
14
|
} else if (selectionSize >= 2) {
|
12
15
|
// 多选
|
13
16
|
viewType = 'multiple';
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { getEdges } from "../../../utils/htElementUtils";
|
2
|
+
import { getEdgesBetweenNodes } from "../../../utils/htElementUtils";
|
2
3
|
var ht = window.ht;
|
3
4
|
export function getEdgesBySelection(topo) {
|
4
5
|
var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
|
@@ -42,6 +43,43 @@ export function getEdgesBySelection(topo) {
|
|
42
43
|
|
43
44
|
return getSelectedEdges(topo.getGraphView());
|
44
45
|
}
|
46
|
+
/**
|
47
|
+
* 根据选中的线查找对应节点下所有的线是否都选中
|
48
|
+
* @param {*} topo
|
49
|
+
* @param {*} edges
|
50
|
+
* @param {*} operateEdgeFn
|
51
|
+
*/
|
52
|
+
|
53
|
+
export function isNodeAllEdges(topo) {
|
54
|
+
var selection = topo.getSelectionModel().getSelection().toArray(); // 选中的连线
|
55
|
+
|
56
|
+
var edges = selection.filter(function (element) {
|
57
|
+
return element instanceof ht.Edge;
|
58
|
+
});
|
59
|
+
var inEdges = false;
|
60
|
+
edges.forEach(function (edge) {
|
61
|
+
//根据两边节点查询到所有节点有关的线,过滤出相同的线(两个节点间的线)
|
62
|
+
var sourceNode = edge.getSource();
|
63
|
+
var targetNode = edge.getTarget();
|
64
|
+
var nodeLineList = getEdgesBetweenNodes(sourceNode, targetNode);
|
65
|
+
|
66
|
+
var _loop = function _loop(i) {
|
67
|
+
if (edges.filter(function (edge) {
|
68
|
+
return nodeLineList[i]._id == edge._id;
|
69
|
+
}).length == 0) {
|
70
|
+
inEdges = true;
|
71
|
+
return "break";
|
72
|
+
}
|
73
|
+
};
|
74
|
+
|
75
|
+
for (var i = 0; i < nodeLineList.length; i++) {
|
76
|
+
var _ret = _loop(i);
|
77
|
+
|
78
|
+
if (_ret === "break") break;
|
79
|
+
}
|
80
|
+
});
|
81
|
+
return inEdges;
|
82
|
+
}
|
45
83
|
/**
|
46
84
|
* 遍历连线及子连线
|
47
85
|
* @param {*} topo
|
@@ -973,58 +973,85 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
973
973
|
|
974
974
|
function _relateNodeIp() {
|
975
975
|
_relateNodeIp = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16(txtValue, nodeElement) {
|
976
|
-
var dm,
|
976
|
+
var dm, isUnique, ip, configObj, configData, _elements, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
|
977
977
|
|
978
978
|
return _regeneratorRuntime.wrap(function _callee16$(_context16) {
|
979
979
|
while (1) {
|
980
980
|
switch (_context16.prev = _context16.next) {
|
981
981
|
case 0:
|
982
|
-
|
982
|
+
console.log("bindIPtoNode", txtValue, nodeElement);
|
983
|
+
|
984
|
+
if (txtValue) {
|
985
|
+
_context16.next = 3;
|
986
|
+
break;
|
987
|
+
}
|
988
|
+
|
989
|
+
return _context16.abrupt("return");
|
990
|
+
|
991
|
+
case 3:
|
992
|
+
if (!(txtValue === nodeElement.a('bindIp'))) {
|
993
|
+
_context16.next = 5;
|
994
|
+
break;
|
995
|
+
}
|
996
|
+
|
997
|
+
return _context16.abrupt("return");
|
998
|
+
|
999
|
+
case 5:
|
983
1000
|
// 根据配置查询拓扑数据
|
984
|
-
dm = topo.getDataModel();
|
985
|
-
htTopo = topo.getHtTopo();
|
986
|
-
elementNodes = getNodes(dm); // 执行唯一性验证
|
1001
|
+
dm = topo.getDataModel(); // 执行唯一性验证
|
987
1002
|
|
988
|
-
isUnique = isUniqueIp(dm, txtValue, nodeElement);
|
989
|
-
ip = buildIpNode(txtValue); // 获取关联链路
|
1003
|
+
isUnique = isUniqueIp(dm, txtValue, nodeElement); // 获取关联链路
|
990
1004
|
|
991
1005
|
if (!isUnique) {
|
992
|
-
_context16.next =
|
1006
|
+
_context16.next = 26;
|
993
1007
|
break;
|
994
1008
|
}
|
995
1009
|
|
996
|
-
|
1010
|
+
ip = buildIpNode(txtValue);
|
1011
|
+
_context16.next = 11;
|
1012
|
+
return deleteExLink(nodeElement);
|
1013
|
+
|
1014
|
+
case 11:
|
997
1015
|
nodeElement.a(ip);
|
998
1016
|
nodeElement.setName(txtValue);
|
999
1017
|
nodeElement.setTag("ip:" + txtValue); // 获取配置
|
1000
1018
|
|
1001
1019
|
configObj = topo.resourceConfig.getConfig();
|
1002
|
-
_context16.next =
|
1020
|
+
_context16.next = 17;
|
1003
1021
|
return resourceConfig.updateConfig(configObj);
|
1004
1022
|
|
1005
|
-
case
|
1006
|
-
_context16.next =
|
1023
|
+
case 17:
|
1024
|
+
_context16.next = 19;
|
1007
1025
|
return editDispatchers.fetchDataByConfig();
|
1008
1026
|
|
1009
|
-
case
|
1027
|
+
case 19:
|
1010
1028
|
configData = _context16.sent;
|
1011
|
-
// console.log("configData", configData);
|
1029
|
+
// console.log("configData",configObj, configData);
|
1012
1030
|
_elements = configData.elements;
|
1013
|
-
newLinkElements = findUNExistedLinkElements(_elements);
|
1031
|
+
newLinkElements = findUNExistedLinkElements(_elements); // console.log("configData", configData, newLinkElements);
|
1032
|
+
|
1033
|
+
newLink = newLinkElements.filter(function (item) {
|
1034
|
+
return item.type === "link";
|
1035
|
+
});
|
1036
|
+
newLinkGroup = newLinkElements.filter(function (item) {
|
1037
|
+
return item.type === "linkGroup";
|
1038
|
+
}); // const newData = elements.find((item) => item.id === `ip:${txtValue}`);
|
1039
|
+
// console.log("newData",newLinkElements, newLink);
|
1040
|
+
|
1014
1041
|
createElementsData = {
|
1015
1042
|
groups: [],
|
1016
1043
|
nodes: [],
|
1017
|
-
links:
|
1018
|
-
|
1019
|
-
|
1020
|
-
|
1021
|
-
|
1022
|
-
|
1023
|
-
};
|
1024
|
-
console.log("createElementsData", createElementsData);
|
1025
|
-
htTopo.createElements(createElementsData);
|
1044
|
+
links: newLink,
|
1045
|
+
linkGroups: newLinkGroup
|
1046
|
+
}; // console.log("createElementsData", createElementsData);
|
1047
|
+
|
1048
|
+
if ([].concat(newLink, newLinkGroup).length > 0) {
|
1049
|
+
_htTopo = topo.getHtTopo();
|
1026
1050
|
|
1027
|
-
|
1051
|
+
_htTopo.createElements(createElementsData);
|
1052
|
+
}
|
1053
|
+
|
1054
|
+
case 26:
|
1028
1055
|
case "end":
|
1029
1056
|
return _context16.stop();
|
1030
1057
|
}
|
@@ -10,8 +10,7 @@ export default function useTopoFullscreen(props) {
|
|
10
10
|
var htTopo = topo.getHtTopo();
|
11
11
|
|
12
12
|
if ((graphLoaded || graphLoaded2) && topoData && htTopo.setFullScreenFunc) {
|
13
|
-
htTopo.setFullScreenFunc(function () {
|
14
|
-
panelRef.current.requestFullscreen();
|
13
|
+
htTopo.setFullScreenFunc(function () {// panelRef.current.requestFullscreen()
|
15
14
|
});
|
16
15
|
}
|
17
16
|
}, [topoData, graphLoaded, graphLoaded2]); // 监听退出全屏
|
@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
|
|
24
24
|
import SelectionModel from "./SelectionModel";
|
25
25
|
import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
|
26
26
|
|
27
|
-
var version = typeof "9.0.0-a.
|
27
|
+
var version = typeof "9.0.0-a.32" === 'string' ? "9.0.0-a.32" : null;
|
28
28
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
29
29
|
/**
|
30
30
|
* 拓扑显示和编辑
|
@@ -29,6 +29,7 @@ export function buildIpNode(ip) {
|
|
29
29
|
// 'attributes': [],
|
30
30
|
// 'metrics': [],
|
31
31
|
type: "node",
|
32
|
+
isbinding: true,
|
32
33
|
// 'dtype': 'device'
|
33
34
|
operation: "delete"
|
34
35
|
};
|
@@ -49,20 +50,15 @@ function isExitLink(link) {
|
|
49
50
|
|
50
51
|
export function isUniqueIp(dataModel, ip, nodeElement) {
|
51
52
|
var nodes = getNodes(dataModel);
|
52
|
-
var isUnique = true;
|
53
|
-
console.log("nodes-nodeElement", nodes, nodeElement);
|
53
|
+
var isUnique = true; // console.log("nodes-nodeElement", nodes, nodeElement);
|
54
54
|
|
55
55
|
if (nodeElement) {
|
56
|
-
console.log("nodes-nodeElement---filter", nodes.filter(function (node) {
|
57
|
-
return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
|
58
|
-
}));
|
59
56
|
var arr = nodes.filter(function (node) {
|
60
57
|
return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
|
61
58
|
}).filter(function (node) {
|
62
59
|
return isPingHtNode(node, ip) || isIpHtNode(node, ip);
|
63
60
|
});
|
64
61
|
isUnique = arr.length === 0;
|
65
|
-
console.log("nodes-nodeElement---filter", arr, isUnique);
|
66
62
|
} else {
|
67
63
|
isUnique = nodes.filter(function (node) {
|
68
64
|
return node.a("ipAddress") === ip;
|
@@ -97,7 +93,7 @@ export function processExitLink(topoData) {
|
|
97
93
|
return upgradeExitLinkTarget(link, serialize);
|
98
94
|
}); // 历史数据适配:同IP节点关联多个不同IP的链路、分级拓扑。target匹配不到元素时,根据序列化匹配
|
99
95
|
|
100
|
-
newLinks = upgradeLinkTargetNotExisted(
|
96
|
+
newLinks = upgradeLinkTargetNotExisted(newLinks); // IP节点构造为node。如果有相同ip的ping资源和图片节点,图片节点消失(不构造)
|
101
97
|
|
102
98
|
var ipNodes = getIpNodes(serialize, nodes);
|
103
99
|
return _extends({}, topoData, {
|
@@ -128,7 +124,9 @@ export function processExitLink(topoData) {
|
|
128
124
|
// 根据链路序列化数据找目的端节点
|
129
125
|
// eslint-disable-next-line no-underscore-dangle
|
130
126
|
var targetNodeSerialize = serialize.d.find(function (item) {
|
131
|
-
|
127
|
+
var _linkSerialize$p$targ;
|
128
|
+
|
129
|
+
return item.i === (linkSerialize === null || linkSerialize === void 0 ? void 0 : (_linkSerialize$p$targ = linkSerialize.p.target) === null || _linkSerialize$p$targ === void 0 ? void 0 : _linkSerialize$p$targ.__i);
|
132
130
|
});
|
133
131
|
|
134
132
|
if (targetNodeSerialize) {
|
@@ -184,10 +182,12 @@ export function processExitLink(topoData) {
|
|
184
182
|
// 根据链路序列化数据找目的端节点
|
185
183
|
// eslint-disable-next-line no-underscore-dangle
|
186
184
|
var targetNodeSerialize = serialize.d.find(function (item) {
|
187
|
-
|
185
|
+
var _linkSerialize$p$targ2;
|
186
|
+
|
187
|
+
return item.i === (linkSerialize === null || linkSerialize === void 0 ? void 0 : (_linkSerialize$p$targ2 = linkSerialize.p.target) === null || _linkSerialize$p$targ2 === void 0 ? void 0 : _linkSerialize$p$targ2.__i);
|
188
188
|
});
|
189
189
|
|
190
|
-
if (!targetNodeSerialize.p.tag) {
|
190
|
+
if (targetNodeSerialize && !targetNodeSerialize.p.tag) {
|
191
191
|
targetNodeSerialize.a = _extends({}, targetNodeSerialize.a, buildIpNode(destinationIp), {
|
192
192
|
isbinding: true
|
193
193
|
});
|
@@ -96,12 +96,12 @@ function getValuesByEdges(topo) {
|
|
96
96
|
})[0] || 'nil';
|
97
97
|
}
|
98
98
|
|
99
|
-
function getEdgesValues(edges
|
99
|
+
function getEdgesValues(edges) {
|
100
100
|
var edgeValues = [];
|
101
|
-
var htTopo = topo.getHtTopo();
|
102
101
|
edges.forEach(function (edge) {
|
103
102
|
edgeValues.push({
|
104
|
-
baseAgreement:
|
103
|
+
baseAgreement: false,
|
104
|
+
//,
|
105
105
|
lineButton: edge.s('edge.type'),
|
106
106
|
startPoint: getStartPoint(edge),
|
107
107
|
endPoint: getEndPoint(edge),
|
@@ -142,16 +142,12 @@ function EdgeType(props) {
|
|
142
142
|
|
143
143
|
var _useState = (0, _react.useState)(false),
|
144
144
|
disable = _useState[0],
|
145
|
-
|
145
|
+
setDisable = _useState[1];
|
146
146
|
|
147
147
|
var field = _field["default"].useField({
|
148
148
|
autoUnmount: false,
|
149
149
|
values: getValuesByEdges(topo),
|
150
150
|
onChange: function onChange(name, value) {
|
151
|
-
if (name == 'baseAgreement') {
|
152
|
-
setDisabel(value);
|
153
|
-
}
|
154
|
-
|
155
151
|
if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
|
156
152
|
_onChange(name, null);
|
157
153
|
} else {
|
@@ -162,6 +158,8 @@ function EdgeType(props) {
|
|
162
158
|
|
163
159
|
(0, _react.useEffect)(function () {
|
164
160
|
field.setValues(getValuesByEdges(topo));
|
161
|
+
field.setValue('baseAgreement', topo.getHtTopo().getEdgeMultarc((0, _edgeTypeStyleUtil.getEdgesBySelection)(topo)));
|
162
|
+
setDisable((0, _edgeTypeStyleUtil.isNodeAllEdges)(topo));
|
165
163
|
}, [selection]);
|
166
164
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
167
165
|
className: _EdgeTypeModule["default"].lineBox
|
@@ -171,10 +169,11 @@ function EdgeType(props) {
|
|
171
169
|
labelAlign: "top"
|
172
170
|
}, /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
|
173
171
|
name: "lineButton",
|
174
|
-
disable:
|
172
|
+
disable: !!field.getValue('baseAgreement')
|
175
173
|
})), /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
|
176
174
|
name: "baseAgreement",
|
177
|
-
onChange: _onChange
|
175
|
+
onChange: _onChange,
|
176
|
+
disabled: disable
|
178
177
|
}, "\u81EA\u52A8\u8C03\u6574")), /*#__PURE__*/_react["default"].createElement(FormItem, {
|
179
178
|
label: "\u8D77\u70B9"
|
180
179
|
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
|
@@ -13,6 +13,9 @@ function getPropertyViewType(selection) {
|
|
13
13
|
if (!selectionSize) {
|
14
14
|
// 未选
|
15
15
|
viewType = 'view';
|
16
|
+
} else if ((selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.getLayer()) === 'backgroundImage') {
|
17
|
+
// 背景图
|
18
|
+
viewType = 'view';
|
16
19
|
} else if (selectionSize >= 2) {
|
17
20
|
// 多选
|
18
21
|
viewType = 'multiple';
|
@@ -2,6 +2,7 @@
|
|
2
2
|
|
3
3
|
exports.__esModule = true;
|
4
4
|
exports.getEdgesBySelection = getEdgesBySelection;
|
5
|
+
exports.isNodeAllEdges = isNodeAllEdges;
|
5
6
|
exports.loopEdgesAndChildren = loopEdgesAndChildren;
|
6
7
|
exports.setEdgesAndChildren = setEdgesAndChildren;
|
7
8
|
exports.setEdgesType = setEdgesType;
|
@@ -52,6 +53,44 @@ function getEdgesBySelection(topo) {
|
|
52
53
|
|
53
54
|
return getSelectedEdges(topo.getGraphView());
|
54
55
|
}
|
56
|
+
/**
|
57
|
+
* 根据选中的线查找对应节点下所有的线是否都选中
|
58
|
+
* @param {*} topo
|
59
|
+
* @param {*} edges
|
60
|
+
* @param {*} operateEdgeFn
|
61
|
+
*/
|
62
|
+
|
63
|
+
|
64
|
+
function isNodeAllEdges(topo) {
|
65
|
+
var selection = topo.getSelectionModel().getSelection().toArray(); // 选中的连线
|
66
|
+
|
67
|
+
var edges = selection.filter(function (element) {
|
68
|
+
return element instanceof ht.Edge;
|
69
|
+
});
|
70
|
+
var inEdges = false;
|
71
|
+
edges.forEach(function (edge) {
|
72
|
+
//根据两边节点查询到所有节点有关的线,过滤出相同的线(两个节点间的线)
|
73
|
+
var sourceNode = edge.getSource();
|
74
|
+
var targetNode = edge.getTarget();
|
75
|
+
var nodeLineList = (0, _htElementUtils.getEdgesBetweenNodes)(sourceNode, targetNode);
|
76
|
+
|
77
|
+
var _loop = function _loop(i) {
|
78
|
+
if (edges.filter(function (edge) {
|
79
|
+
return nodeLineList[i]._id == edge._id;
|
80
|
+
}).length == 0) {
|
81
|
+
inEdges = true;
|
82
|
+
return "break";
|
83
|
+
}
|
84
|
+
};
|
85
|
+
|
86
|
+
for (var i = 0; i < nodeLineList.length; i++) {
|
87
|
+
var _ret = _loop(i);
|
88
|
+
|
89
|
+
if (_ret === "break") break;
|
90
|
+
}
|
91
|
+
});
|
92
|
+
return inEdges;
|
93
|
+
}
|
55
94
|
/**
|
56
95
|
* 遍历连线及子连线
|
57
96
|
* @param {*} topo
|
@@ -1014,58 +1014,85 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
1014
1014
|
|
1015
1015
|
function _relateNodeIp() {
|
1016
1016
|
_relateNodeIp = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16(txtValue, nodeElement) {
|
1017
|
-
var dm,
|
1017
|
+
var dm, isUnique, ip, configObj, configData, _elements, newLinkElements, newLink, newLinkGroup, createElementsData, _htTopo;
|
1018
1018
|
|
1019
1019
|
return _regenerator["default"].wrap(function _callee16$(_context16) {
|
1020
1020
|
while (1) {
|
1021
1021
|
switch (_context16.prev = _context16.next) {
|
1022
1022
|
case 0:
|
1023
|
-
|
1023
|
+
console.log("bindIPtoNode", txtValue, nodeElement);
|
1024
|
+
|
1025
|
+
if (txtValue) {
|
1026
|
+
_context16.next = 3;
|
1027
|
+
break;
|
1028
|
+
}
|
1029
|
+
|
1030
|
+
return _context16.abrupt("return");
|
1031
|
+
|
1032
|
+
case 3:
|
1033
|
+
if (!(txtValue === nodeElement.a('bindIp'))) {
|
1034
|
+
_context16.next = 5;
|
1035
|
+
break;
|
1036
|
+
}
|
1037
|
+
|
1038
|
+
return _context16.abrupt("return");
|
1039
|
+
|
1040
|
+
case 5:
|
1024
1041
|
// 根据配置查询拓扑数据
|
1025
|
-
dm = topo.getDataModel();
|
1026
|
-
htTopo = topo.getHtTopo();
|
1027
|
-
elementNodes = (0, _htElementUtils.getNodes)(dm); // 执行唯一性验证
|
1042
|
+
dm = topo.getDataModel(); // 执行唯一性验证
|
1028
1043
|
|
1029
|
-
isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, txtValue, nodeElement);
|
1030
|
-
ip = (0, _exitLinkUtil.buildIpNode)(txtValue); // 获取关联链路
|
1044
|
+
isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, txtValue, nodeElement); // 获取关联链路
|
1031
1045
|
|
1032
1046
|
if (!isUnique) {
|
1033
|
-
_context16.next =
|
1047
|
+
_context16.next = 26;
|
1034
1048
|
break;
|
1035
1049
|
}
|
1036
1050
|
|
1037
|
-
|
1051
|
+
ip = (0, _exitLinkUtil.buildIpNode)(txtValue);
|
1052
|
+
_context16.next = 11;
|
1053
|
+
return deleteExLink(nodeElement);
|
1054
|
+
|
1055
|
+
case 11:
|
1038
1056
|
nodeElement.a(ip);
|
1039
1057
|
nodeElement.setName(txtValue);
|
1040
1058
|
nodeElement.setTag("ip:" + txtValue); // 获取配置
|
1041
1059
|
|
1042
1060
|
configObj = topo.resourceConfig.getConfig();
|
1043
|
-
_context16.next =
|
1061
|
+
_context16.next = 17;
|
1044
1062
|
return resourceConfig.updateConfig(configObj);
|
1045
1063
|
|
1046
|
-
case
|
1047
|
-
_context16.next =
|
1064
|
+
case 17:
|
1065
|
+
_context16.next = 19;
|
1048
1066
|
return editDispatchers.fetchDataByConfig();
|
1049
1067
|
|
1050
|
-
case
|
1068
|
+
case 19:
|
1051
1069
|
configData = _context16.sent;
|
1052
|
-
// console.log("configData", configData);
|
1070
|
+
// console.log("configData",configObj, configData);
|
1053
1071
|
_elements = configData.elements;
|
1054
|
-
newLinkElements = findUNExistedLinkElements(_elements);
|
1072
|
+
newLinkElements = findUNExistedLinkElements(_elements); // console.log("configData", configData, newLinkElements);
|
1073
|
+
|
1074
|
+
newLink = newLinkElements.filter(function (item) {
|
1075
|
+
return item.type === "link";
|
1076
|
+
});
|
1077
|
+
newLinkGroup = newLinkElements.filter(function (item) {
|
1078
|
+
return item.type === "linkGroup";
|
1079
|
+
}); // const newData = elements.find((item) => item.id === `ip:${txtValue}`);
|
1080
|
+
// console.log("newData",newLinkElements, newLink);
|
1081
|
+
|
1055
1082
|
createElementsData = {
|
1056
1083
|
groups: [],
|
1057
1084
|
nodes: [],
|
1058
|
-
links:
|
1059
|
-
|
1060
|
-
|
1061
|
-
|
1062
|
-
|
1063
|
-
|
1064
|
-
};
|
1065
|
-
console.log("createElementsData", createElementsData);
|
1066
|
-
htTopo.createElements(createElementsData);
|
1085
|
+
links: newLink,
|
1086
|
+
linkGroups: newLinkGroup
|
1087
|
+
}; // console.log("createElementsData", createElementsData);
|
1088
|
+
|
1089
|
+
if ([].concat(newLink, newLinkGroup).length > 0) {
|
1090
|
+
_htTopo = topo.getHtTopo();
|
1067
1091
|
|
1068
|
-
|
1092
|
+
_htTopo.createElements(createElementsData);
|
1093
|
+
}
|
1094
|
+
|
1095
|
+
case 26:
|
1069
1096
|
case "end":
|
1070
1097
|
return _context16.stop();
|
1071
1098
|
}
|
@@ -20,8 +20,7 @@ function useTopoFullscreen(props) {
|
|
20
20
|
var htTopo = topo.getHtTopo();
|
21
21
|
|
22
22
|
if ((graphLoaded || graphLoaded2) && topoData && htTopo.setFullScreenFunc) {
|
23
|
-
htTopo.setFullScreenFunc(function () {
|
24
|
-
panelRef.current.requestFullscreen();
|
23
|
+
htTopo.setFullScreenFunc(function () {// panelRef.current.requestFullscreen()
|
25
24
|
});
|
26
25
|
}
|
27
26
|
}, [topoData, graphLoaded, graphLoaded2]); // 监听退出全屏
|
@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
|
|
56
56
|
var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
|
57
57
|
|
58
58
|
// eslint-disable-next-line no-undef
|
59
|
-
var version = typeof "9.0.0-a.
|
59
|
+
var version = typeof "9.0.0-a.32" === 'string' ? "9.0.0-a.32" : null;
|
60
60
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
61
61
|
/**
|
62
62
|
* 拓扑显示和编辑
|
@@ -40,6 +40,7 @@ function buildIpNode(ip) {
|
|
40
40
|
// 'attributes': [],
|
41
41
|
// 'metrics': [],
|
42
42
|
type: "node",
|
43
|
+
isbinding: true,
|
43
44
|
// 'dtype': 'device'
|
44
45
|
operation: "delete"
|
45
46
|
};
|
@@ -60,20 +61,15 @@ function isExitLink(link) {
|
|
60
61
|
|
61
62
|
function isUniqueIp(dataModel, ip, nodeElement) {
|
62
63
|
var nodes = (0, _htElementUtils.getNodes)(dataModel);
|
63
|
-
var isUnique = true;
|
64
|
-
console.log("nodes-nodeElement", nodes, nodeElement);
|
64
|
+
var isUnique = true; // console.log("nodes-nodeElement", nodes, nodeElement);
|
65
65
|
|
66
66
|
if (nodeElement) {
|
67
|
-
console.log("nodes-nodeElement---filter", nodes.filter(function (node) {
|
68
|
-
return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
|
69
|
-
}));
|
70
67
|
var arr = nodes.filter(function (node) {
|
71
68
|
return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
|
72
69
|
}).filter(function (node) {
|
73
70
|
return isPingHtNode(node, ip) || isIpHtNode(node, ip);
|
74
71
|
});
|
75
72
|
isUnique = arr.length === 0;
|
76
|
-
console.log("nodes-nodeElement---filter", arr, isUnique);
|
77
73
|
} else {
|
78
74
|
isUnique = nodes.filter(function (node) {
|
79
75
|
return node.a("ipAddress") === ip;
|
@@ -108,7 +104,7 @@ function processExitLink(topoData) {
|
|
108
104
|
return upgradeExitLinkTarget(link, serialize);
|
109
105
|
}); // 历史数据适配:同IP节点关联多个不同IP的链路、分级拓扑。target匹配不到元素时,根据序列化匹配
|
110
106
|
|
111
|
-
newLinks = upgradeLinkTargetNotExisted(
|
107
|
+
newLinks = upgradeLinkTargetNotExisted(newLinks); // IP节点构造为node。如果有相同ip的ping资源和图片节点,图片节点消失(不构造)
|
112
108
|
|
113
109
|
var ipNodes = getIpNodes(serialize, nodes);
|
114
110
|
return (0, _extends2["default"])({}, topoData, {
|
@@ -139,7 +135,9 @@ function processExitLink(topoData) {
|
|
139
135
|
// 根据链路序列化数据找目的端节点
|
140
136
|
// eslint-disable-next-line no-underscore-dangle
|
141
137
|
var targetNodeSerialize = serialize.d.find(function (item) {
|
142
|
-
|
138
|
+
var _linkSerialize$p$targ;
|
139
|
+
|
140
|
+
return item.i === (linkSerialize === null || linkSerialize === void 0 ? void 0 : (_linkSerialize$p$targ = linkSerialize.p.target) === null || _linkSerialize$p$targ === void 0 ? void 0 : _linkSerialize$p$targ.__i);
|
143
141
|
});
|
144
142
|
|
145
143
|
if (targetNodeSerialize) {
|
@@ -195,10 +193,12 @@ function processExitLink(topoData) {
|
|
195
193
|
// 根据链路序列化数据找目的端节点
|
196
194
|
// eslint-disable-next-line no-underscore-dangle
|
197
195
|
var targetNodeSerialize = serialize.d.find(function (item) {
|
198
|
-
|
196
|
+
var _linkSerialize$p$targ2;
|
197
|
+
|
198
|
+
return item.i === (linkSerialize === null || linkSerialize === void 0 ? void 0 : (_linkSerialize$p$targ2 = linkSerialize.p.target) === null || _linkSerialize$p$targ2 === void 0 ? void 0 : _linkSerialize$p$targ2.__i);
|
199
199
|
});
|
200
200
|
|
201
|
-
if (!targetNodeSerialize.p.tag) {
|
201
|
+
if (targetNodeSerialize && !targetNodeSerialize.p.tag) {
|
202
202
|
targetNodeSerialize.a = (0, _extends2["default"])({}, targetNodeSerialize.a, buildIpNode(destinationIp), {
|
203
203
|
isbinding: true
|
204
204
|
});
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@riil-frontend/component-topology",
|
3
|
-
"version": "9.0.0-a.
|
3
|
+
"version": "9.0.0-a.32",
|
4
4
|
"description": "拓扑",
|
5
5
|
"scripts": {
|
6
6
|
"start": "build-scripts start",
|
@@ -116,6 +116,6 @@
|
|
116
116
|
"access": "public"
|
117
117
|
},
|
118
118
|
"license": "MIT",
|
119
|
-
"homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.
|
119
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.32/build/index.html",
|
120
120
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
121
121
|
}
|