@riil-frontend/component-topology 3.5.14 → 3.16.2
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 +16 -16
- package/es/constants/ResourceInfoDisplay.js +1 -1
- package/es/core/components/DisplaySettingDrawer/LinkTag.js +1 -1
- package/es/core/components/DisplaySettingDrawer/LinkTip.js +1 -1
- package/es/core/components/DisplaySettingDrawer/ResourceDisplay/CommonCheckboxGroup.js +4 -0
- package/es/core/editor/components/settings/common/LineType/AlignSetting.module.scss +36 -0
- package/es/core/editor/components/settings/common/LineType/index.js +86 -0
- package/es/core/editor/components/settings/common/LineType/lineTypeUtil.js +0 -0
- package/es/core/editor/components/settings/common/SizeInput/NodeSizeNumberPicker.js +1 -0
- package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js +60 -0
- package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js +20 -0
- package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js +7 -3
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/attributeFormatter/index.js +10 -15
- package/es/core/models/cache/CiTyeCache.js +2 -2
- package/es/hooks/useManageStatus.js +5 -3
- package/es/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/Setting/index.js +7 -5
- package/es/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer.js +18 -7
- package/es/topoCenter/models/LinkTagsTipsBuilder.js +16 -25
- package/es/utils/clusterUtil.js +39 -0
- package/es/utils/topoData.js +9 -2
- package/lib/constants/ResourceInfoDisplay.js +1 -1
- package/lib/core/components/DisplaySettingDrawer/LinkTag.js +1 -1
- package/lib/core/components/DisplaySettingDrawer/LinkTip.js +1 -1
- package/lib/core/components/DisplaySettingDrawer/ResourceDisplay/CommonCheckboxGroup.js +4 -0
- package/lib/core/editor/components/settings/common/LineType/AlignSetting.module.scss +36 -0
- package/lib/core/editor/components/settings/common/LineType/index.js +103 -0
- package/lib/core/editor/components/settings/common/LineType/lineTypeUtil.js +1 -0
- package/lib/core/editor/components/settings/common/SizeInput/NodeSizeNumberPicker.js +1 -0
- package/lib/core/editor/components/settings/propertyViews/multipleElements/{BatchSetNodeSize.js → BatchSetNodeSize/BatchSetNodeSize.js} +54 -2
- package/lib/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js +29 -0
- package/lib/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js +8 -4
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/attributeFormatter/index.js +10 -15
- package/lib/core/models/cache/CiTyeCache.js +2 -2
- package/lib/hooks/useManageStatus.js +5 -3
- package/lib/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/Setting/index.js +8 -5
- package/lib/topoCenter/components/editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer.js +18 -7
- package/lib/topoCenter/models/LinkTagsTipsBuilder.js +18 -26
- package/lib/utils/clusterUtil.js +50 -0
- package/lib/utils/topoData.js +10 -2
- package/package.json +2 -2
- package/es/core/editor/components/settings/common/LineType.js +0 -15
- package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize.js +0 -8
- package/lib/core/editor/components/settings/common/LineType.js +0 -30
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@import "@alifd/next/variables";
|
|
2
|
+
|
|
3
|
+
.AlignSetting {
|
|
4
|
+
:global {
|
|
5
|
+
.#{$css-prefix}divider-ver {
|
|
6
|
+
background: #EBECF0;
|
|
7
|
+
margin-right: 3px;
|
|
8
|
+
height: 16px;
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.redioBtn {
|
|
14
|
+
width: 24px;
|
|
15
|
+
height: 24px;
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
border: none !important;
|
|
18
|
+
color: #4D6277;
|
|
19
|
+
padding-left: 6px;
|
|
20
|
+
margin-right: 3px;
|
|
21
|
+
|
|
22
|
+
&:active {
|
|
23
|
+
background: #F2F7FD !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:hover {
|
|
27
|
+
background: #F2F7FD !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.selectedTag {
|
|
33
|
+
background: #F2F7FD;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
|
|
9
|
+
|
|
10
|
+
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
|
|
11
|
+
|
|
12
|
+
var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.module.scss"));
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
var TREE_LAYOUT_OPTIONS = [{
|
|
23
|
+
value: "left",
|
|
24
|
+
label: "左侧",
|
|
25
|
+
icon: "tuopu_zuoceduiqi"
|
|
26
|
+
}, {
|
|
27
|
+
value: "center",
|
|
28
|
+
label: "居中",
|
|
29
|
+
icon: "tuopu_shuipingjuzhongduiqi"
|
|
30
|
+
}, {
|
|
31
|
+
value: "right",
|
|
32
|
+
label: "右侧",
|
|
33
|
+
icon: "tuopu_youceduiqi"
|
|
34
|
+
}, {
|
|
35
|
+
value: "top",
|
|
36
|
+
label: "顶部",
|
|
37
|
+
icon: "tuopu_dingbuduiqi"
|
|
38
|
+
}, {
|
|
39
|
+
value: "middle",
|
|
40
|
+
label: "中部",
|
|
41
|
+
icon: "tuopu_chuizhijuzhongduiqi"
|
|
42
|
+
}, {
|
|
43
|
+
value: "bottom",
|
|
44
|
+
label: "底部",
|
|
45
|
+
icon: "tuopu_dibuduiqi"
|
|
46
|
+
}, {
|
|
47
|
+
value: "divide"
|
|
48
|
+
}, {
|
|
49
|
+
value: "distributeHorizontal",
|
|
50
|
+
label: "水平",
|
|
51
|
+
icon: "tuopu_shuipingdengjianjuduiqi"
|
|
52
|
+
}, {
|
|
53
|
+
value: "distributeVertical",
|
|
54
|
+
label: "垂直",
|
|
55
|
+
icon: "tuopu_chuizhidengjianjuduiqi"
|
|
56
|
+
}];
|
|
57
|
+
|
|
58
|
+
var AlignSetting = function AlignSetting(props) {
|
|
59
|
+
var getEdges = props.getEdges,
|
|
60
|
+
selected = props.selected,
|
|
61
|
+
onChange = props.onChange;
|
|
62
|
+
|
|
63
|
+
var _useState = (0, _react.useState)(selected),
|
|
64
|
+
value = _useState[0],
|
|
65
|
+
setValue = _useState[1];
|
|
66
|
+
|
|
67
|
+
var setLineType = function setLineType(type) {
|
|
68
|
+
var edges = getEdges();
|
|
69
|
+
edges.forEach(function (edge) {
|
|
70
|
+
edge.s('edge.type', 'v.h');
|
|
71
|
+
edge.s('edge.gap', 5);
|
|
72
|
+
edge.s('edge.center', true);
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
var handleChange = function handleChange(data) {
|
|
77
|
+
console.log("handleChange", data);
|
|
78
|
+
onChange && onChange(data.value);
|
|
79
|
+
setValue(data.value);
|
|
80
|
+
setLineType(data.value);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
return null;
|
|
84
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
85
|
+
className: _AlignSettingModule["default"].AlignSetting
|
|
86
|
+
}, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
|
|
87
|
+
return item.value === "divide" ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
|
|
88
|
+
key: index,
|
|
89
|
+
direction: "ver"
|
|
90
|
+
}) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
91
|
+
key: index,
|
|
92
|
+
className: "" + _AlignSettingModule["default"].redioBtn,
|
|
93
|
+
onClick: function onClick() {
|
|
94
|
+
handleChange(item);
|
|
95
|
+
}
|
|
96
|
+
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
97
|
+
type: item.icon
|
|
98
|
+
}));
|
|
99
|
+
}));
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
var _default = AlignSetting;
|
|
103
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -7,15 +7,67 @@ exports["default"] = BatchSetNodeSize;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
-
var _SizeInput = _interopRequireDefault(require("
|
|
10
|
+
var _SizeInput = _interopRequireDefault(require("../../../common/SizeInput"));
|
|
11
11
|
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
|
|
14
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
15
|
|
|
16
16
|
function BatchSetNodeSize(props) {
|
|
17
|
+
var topo = props.topo;
|
|
18
|
+
|
|
19
|
+
var _useState = (0, _react.useState)(undefined),
|
|
20
|
+
width = _useState[0],
|
|
21
|
+
setWidth = _useState[1];
|
|
22
|
+
|
|
23
|
+
var _useState2 = (0, _react.useState)(undefined),
|
|
24
|
+
height = _useState2[0],
|
|
25
|
+
setHeight = _useState2[1];
|
|
26
|
+
|
|
27
|
+
var _useState3 = (0, _react.useState)(true),
|
|
28
|
+
lock = _useState3[0],
|
|
29
|
+
setLock = _useState3[1];
|
|
30
|
+
|
|
31
|
+
var handleChange = function handleChange(name, value) {
|
|
32
|
+
var selection = topo.getSelectionModel().getSelection().toArray();
|
|
33
|
+
var nodes = selection.filter(function (element) {
|
|
34
|
+
return element instanceof ht.Node;
|
|
35
|
+
});
|
|
36
|
+
console.error('变化了', nodes, name, value); //
|
|
37
|
+
|
|
38
|
+
if (lock) {
|
|
39
|
+
console.error('锁定', value);
|
|
40
|
+
|
|
41
|
+
if (name === 'width') {
|
|
42
|
+
setHeight(undefined);
|
|
43
|
+
} else {
|
|
44
|
+
setWidth(undefined);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
nodes.forEach(function (node) {
|
|
49
|
+
if (name === 'width') {
|
|
50
|
+
node.setWidth(value);
|
|
51
|
+
} else {
|
|
52
|
+
node.setHeight(value);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var onLockChange = function onLockChange(isLock) {
|
|
58
|
+
setLock(isLock);
|
|
59
|
+
setWidth(undefined);
|
|
60
|
+
setHeight(undefined);
|
|
61
|
+
};
|
|
62
|
+
|
|
17
63
|
return /*#__PURE__*/_react["default"].createElement(_SizeInput["default"], {
|
|
18
|
-
value: {
|
|
64
|
+
value: {
|
|
65
|
+
width: width,
|
|
66
|
+
height: height
|
|
67
|
+
},
|
|
68
|
+
lock: lock,
|
|
69
|
+
onChange: handleChange,
|
|
70
|
+
onLockChange: onLockChange
|
|
19
71
|
});
|
|
20
72
|
}
|
|
21
73
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports["default"] = MultipleElementLineType;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _LineType = _interopRequireDefault(require("../../common/LineType"));
|
|
11
|
+
|
|
12
|
+
function MultipleElementLineType(props) {
|
|
13
|
+
var topo = props.topo;
|
|
14
|
+
|
|
15
|
+
var setLineType = function setLineType(type) {};
|
|
16
|
+
|
|
17
|
+
var getEdges = function getEdges() {
|
|
18
|
+
var selection = topo.getSelectionModel().getSelection().toArray();
|
|
19
|
+
var edges = selection.filter(function (element) {
|
|
20
|
+
return element instanceof ht.Edge;
|
|
21
|
+
});
|
|
22
|
+
return edges;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
|
|
26
|
+
getEdges: getEdges,
|
|
27
|
+
onChange: setLineType
|
|
28
|
+
});
|
|
29
|
+
}
|
|
@@ -15,14 +15,14 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _AlignSetting = _interopRequireDefault(require("../../common/AlignSetting"));
|
|
17
17
|
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
var _BatchSetNodeSize = _interopRequireDefault(require("./BatchSetNodeSize"));
|
|
18
|
+
var _BatchSetNodeSize = _interopRequireDefault(require("./BatchSetNodeSize/BatchSetNodeSize"));
|
|
21
19
|
|
|
22
20
|
var _template = require("../../../../../../utils/template");
|
|
23
21
|
|
|
24
22
|
var _ViewPropertyView = _interopRequireDefault(require("../view/ViewPropertyView"));
|
|
25
23
|
|
|
24
|
+
var _MultipleElementLineType = _interopRequireDefault(require("./MultipleElementLineType"));
|
|
25
|
+
|
|
26
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
27
|
|
|
28
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -68,6 +68,10 @@ function MultipleElementPropertyView(props) {
|
|
|
68
68
|
return /*#__PURE__*/_react["default"].createElement(_ViewPropertyView["default"], props);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
var getSelectedElements = function getSelectedElements() {
|
|
72
|
+
return topo.getSelectionModel().getSelection().toArray();
|
|
73
|
+
};
|
|
74
|
+
|
|
71
75
|
return /*#__PURE__*/_react["default"].createElement(_form["default"], {
|
|
72
76
|
field: field,
|
|
73
77
|
labelAlign: "top"
|
|
@@ -81,6 +85,6 @@ function MultipleElementPropertyView(props) {
|
|
|
81
85
|
title: "\u5BF9\u9F50\u65B9\u5F0F"
|
|
82
86
|
}, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
|
|
83
87
|
onChange: alignOnChange,
|
|
84
|
-
selected:
|
|
88
|
+
selected: "left"
|
|
85
89
|
})))));
|
|
86
90
|
}
|
|
@@ -48,7 +48,7 @@ var _PluginManager = _interopRequireDefault(require("./PluginManager"));
|
|
|
48
48
|
var _topoFactory = _interopRequireDefault(require("./topoFactory"));
|
|
49
49
|
|
|
50
50
|
// eslint-disable-next-line no-undef
|
|
51
|
-
var version = typeof "3.
|
|
51
|
+
var version = typeof "3.16.2" === 'string' ? "3.16.2" : null;
|
|
52
52
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
53
53
|
/**
|
|
54
54
|
* 拓扑显示和编辑
|
|
@@ -41,25 +41,20 @@ function formatMetric(val, metricInfo) {
|
|
|
41
41
|
function addLinkMetricUnderlineArrow(metricCode) {
|
|
42
42
|
var map = {
|
|
43
43
|
// 总流速和总带宽利用率:双向箭头
|
|
44
|
-
'
|
|
45
|
-
'
|
|
44
|
+
'interface_totalbps': 'both',
|
|
45
|
+
'bandwidth_utilization': 'both',
|
|
46
46
|
// 发送速率和发送带宽利用率:背向取值端口的箭头 指向目的
|
|
47
|
-
'
|
|
48
|
-
'
|
|
47
|
+
'out_rate': 'to',
|
|
48
|
+
'out_bandwidth_utilization': 'to',
|
|
49
49
|
// 接收速率和接收带宽利用率:指向取值端口的箭头 指向源
|
|
50
|
-
'
|
|
51
|
-
'
|
|
50
|
+
'in_rate': 'from',
|
|
51
|
+
'in_bandwidth_utilization': 'from'
|
|
52
52
|
};
|
|
53
|
-
var codes = Object.keys(map);
|
|
54
53
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return {
|
|
60
|
-
underlineArrow: map[code]
|
|
61
|
-
};
|
|
62
|
-
}
|
|
54
|
+
if (map[metricCode]) {
|
|
55
|
+
return {
|
|
56
|
+
underlineArrow: map[metricCode]
|
|
57
|
+
};
|
|
63
58
|
}
|
|
64
59
|
|
|
65
60
|
return {};
|
|
@@ -158,13 +158,13 @@ var CiTyeCache = /*#__PURE__*/function () {
|
|
|
158
158
|
var model = null;
|
|
159
159
|
types.forEach(function (type) {
|
|
160
160
|
if (type.id === connectType) {
|
|
161
|
-
var metrics = ciType.metrics //
|
|
161
|
+
var metrics = ciType.metrics // 仅出口链路有:ping状态、专线连通状态
|
|
162
162
|
.filter(function (metric) {
|
|
163
163
|
if (connectType === 'exit') {
|
|
164
164
|
return true;
|
|
165
165
|
}
|
|
166
166
|
|
|
167
|
-
return ['
|
|
167
|
+
return ['icmp_discards_rate', 'ping_status'].indexOf(metric.code) === -1;
|
|
168
168
|
}) // 按链路类型过滤对应指标
|
|
169
169
|
.filter(function (metric) {
|
|
170
170
|
return !excludeMetricPprefixs.filter(function (excludeMetricPprefix) {
|
|
@@ -43,7 +43,9 @@ function useManageStatus(props) {
|
|
|
43
43
|
topoState = _topo$store$useModel[0],
|
|
44
44
|
topoDispatchers = _topo$store$useModel[1];
|
|
45
45
|
|
|
46
|
-
var graphLoaded = topoState.graphLoaded
|
|
46
|
+
var graphLoaded = topoState.graphLoaded,
|
|
47
|
+
viewState = topoState.viewState;
|
|
48
|
+
var isEditMode = viewState === 'edit';
|
|
47
49
|
var resources = topo.dataModel.useCis();
|
|
48
50
|
(0, _useTopoEventListener["default"])({
|
|
49
51
|
type: 'manageStatus',
|
|
@@ -64,7 +66,7 @@ function useManageStatus(props) {
|
|
|
64
66
|
});
|
|
65
67
|
(0, _react.useEffect)(function () {
|
|
66
68
|
// 首次加载和监控状态变化后,更新节点和连线置灰状态
|
|
67
|
-
if (graphLoaded) {
|
|
69
|
+
if (!isEditMode && graphLoaded) {
|
|
68
70
|
resources.forEach(function (resource) {
|
|
69
71
|
var type = resource.type,
|
|
70
72
|
id = resource.id,
|
|
@@ -83,5 +85,5 @@ function useManageStatus(props) {
|
|
|
83
85
|
}
|
|
84
86
|
});
|
|
85
87
|
}
|
|
86
|
-
}, [graphLoaded, resources]);
|
|
88
|
+
}, [isEditMode, graphLoaded, resources]);
|
|
87
89
|
}
|
package/lib/topoCenter/components/editor/propertyViews/edge/LinkPropertyView/Setting/index.js
CHANGED
|
@@ -15,11 +15,12 @@ var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
|
|
|
15
15
|
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
|
18
|
+
var _LineType = _interopRequireDefault(require("../../../../../../../core/editor/components/settings/common/LineType"));
|
|
19
|
+
|
|
18
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
21
|
|
|
20
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
23
|
|
|
22
|
-
// import LineType from '../../../../../../../core/editor/components/settings/common/LineType';
|
|
23
24
|
var CollapsePanel = _collapse["default"].Panel;
|
|
24
25
|
|
|
25
26
|
function parseValues(values) {
|
|
@@ -49,12 +50,14 @@ function LinkSetting(props) {
|
|
|
49
50
|
field: field,
|
|
50
51
|
labelAlign: "top"
|
|
51
52
|
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
|
|
52
|
-
defaultExpandedKeys: ["
|
|
53
|
+
defaultExpandedKeys: ["线形"],
|
|
53
54
|
style: {
|
|
54
55
|
border: "none"
|
|
55
56
|
}
|
|
56
57
|
}, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
|
|
57
|
-
key: "\
|
|
58
|
-
title: "\
|
|
59
|
-
}
|
|
58
|
+
key: "\u7EBF\u5F62",
|
|
59
|
+
title: "\u7EBF\u5F62"
|
|
60
|
+
}, /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
|
|
61
|
+
topo: topo
|
|
62
|
+
})))));
|
|
60
63
|
}
|
|
@@ -101,24 +101,35 @@ function AddLinkDrawer(props) {
|
|
|
101
101
|
while (1) {
|
|
102
102
|
switch (_context.prev = _context.next) {
|
|
103
103
|
case 0:
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
if (!(id === null)) {
|
|
105
|
+
_context.next = 2;
|
|
106
|
+
break;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
return _context.abrupt("return", {
|
|
110
|
+
ports: [],
|
|
111
|
+
portsDoc: {}
|
|
112
|
+
});
|
|
106
113
|
|
|
107
114
|
case 2:
|
|
115
|
+
_context.next = 4;
|
|
116
|
+
return _server["default"].getPortsById(id);
|
|
117
|
+
|
|
118
|
+
case 4:
|
|
108
119
|
result = _context.sent;
|
|
109
|
-
_context.next =
|
|
120
|
+
_context.next = 7;
|
|
110
121
|
return _server["default"].queryLinksByNodeId(id);
|
|
111
122
|
|
|
112
|
-
case
|
|
123
|
+
case 7:
|
|
113
124
|
links = _context.sent;
|
|
114
125
|
ifTypes = result.map(function (item) {
|
|
115
126
|
return item.type;
|
|
116
127
|
}); // console.log("端口类型列表", ifTypes);
|
|
117
128
|
|
|
118
|
-
_context.next =
|
|
129
|
+
_context.next = 11;
|
|
119
130
|
return (0, _linkUtils.getInterfaceObject)(ifTypes);
|
|
120
131
|
|
|
121
|
-
case
|
|
132
|
+
case 11:
|
|
122
133
|
ifDoc = _context.sent;
|
|
123
134
|
// console.log("端口类型字典", ifDoc);
|
|
124
135
|
usedPorts = [];
|
|
@@ -152,7 +163,7 @@ function AddLinkDrawer(props) {
|
|
|
152
163
|
portsDoc: portsDoc
|
|
153
164
|
});
|
|
154
165
|
|
|
155
|
-
case
|
|
166
|
+
case 18:
|
|
156
167
|
case "end":
|
|
157
168
|
return _context.stop();
|
|
158
169
|
}
|
|
@@ -19,7 +19,7 @@ var _attributeFormatter = _interopRequireDefault(require("../../core/models/attr
|
|
|
19
19
|
// 参与计算的链路指标
|
|
20
20
|
var metrics = [// 总流速
|
|
21
21
|
{
|
|
22
|
-
code: '
|
|
22
|
+
code: 'interface_totalbps',
|
|
23
23
|
calcType: 'sum'
|
|
24
24
|
}, // 带宽利用率
|
|
25
25
|
{
|
|
@@ -44,10 +44,6 @@ var metrics = [// 总流速
|
|
|
44
44
|
calcType: 'sum',
|
|
45
45
|
showWhenSameSource: true
|
|
46
46
|
}];
|
|
47
|
-
var connectTypePrefixMap = {
|
|
48
|
-
phy: 'physical_link.',
|
|
49
|
-
exit: 'export_link.'
|
|
50
|
-
};
|
|
51
47
|
var calcFnMap = {
|
|
52
48
|
sum: function sum(values) {
|
|
53
49
|
return values.reduce(function (total, val) {
|
|
@@ -159,29 +155,27 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
|
|
|
159
155
|
config = _ref2.config,
|
|
160
156
|
linkChildren = _ref2.linkChildren,
|
|
161
157
|
data = _ref2.data;
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
var replaceMetricConfigCode = function replaceMetricConfigCode(item) {
|
|
165
|
-
var code = item.code;
|
|
166
|
-
connectTypes.forEach(function (prefix) {
|
|
167
|
-
code = code.replace(prefix, 'physical_link.');
|
|
168
|
-
});
|
|
169
|
-
return (0, _extends2["default"])({}, item, {
|
|
170
|
-
code: code
|
|
171
|
-
});
|
|
172
|
-
}; // 查询配置,过滤不在范围内的属性
|
|
173
|
-
|
|
174
|
-
|
|
158
|
+
// 查询配置,过滤不在范围内的属性
|
|
175
159
|
var finalConfig = (0, _extends2["default"])({}, config, {
|
|
176
160
|
tags: config.tags.filter(function (item) {
|
|
177
161
|
return _this2.filterField(item, linkChildren);
|
|
178
|
-
})
|
|
162
|
+
}),
|
|
179
163
|
tips: config.tips.filter(function (item) {
|
|
180
164
|
return _this2.filterField(item, linkChildren);
|
|
181
|
-
})
|
|
165
|
+
})
|
|
182
166
|
}); // 构造数据,计算指标值
|
|
183
167
|
|
|
184
|
-
var mergeData = this.buildData(data, linkChildren);
|
|
168
|
+
var mergeData = this.buildData(data, linkChildren);
|
|
169
|
+
|
|
170
|
+
_rlog["default"].debug('buildEdgeGroupTagTagsAndTips', {
|
|
171
|
+
groupId: groupId,
|
|
172
|
+
config: config,
|
|
173
|
+
linkChildren: linkChildren,
|
|
174
|
+
data: data,
|
|
175
|
+
finalConfig: finalConfig,
|
|
176
|
+
mergeData: mergeData
|
|
177
|
+
}); // 构造标注、悬浮框数据
|
|
178
|
+
|
|
185
179
|
|
|
186
180
|
var formatter = new _attributeFormatter["default"](this.topo);
|
|
187
181
|
return {
|
|
@@ -195,7 +189,7 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
|
|
|
195
189
|
|
|
196
190
|
_proto.filterField = function filterField(item, linkChildren) {
|
|
197
191
|
var fieldConfig = metrics.find(function (m) {
|
|
198
|
-
return item.code
|
|
192
|
+
return item.code === m.code;
|
|
199
193
|
});
|
|
200
194
|
|
|
201
195
|
if (item.type !== 'metric' || !fieldConfig) {
|
|
@@ -233,11 +227,9 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
|
|
|
233
227
|
metrics.forEach(function (m) {
|
|
234
228
|
try {
|
|
235
229
|
var values = linkChildrenData.map(function (linkData) {
|
|
236
|
-
|
|
237
|
-
var metricCode = "" + connectTypePrefixMap[connectType] + m.code;
|
|
238
|
-
return linkData.metricMap[metricCode];
|
|
230
|
+
return linkData.metricMap[m.code];
|
|
239
231
|
});
|
|
240
|
-
mergeData.metricMap[
|
|
232
|
+
mergeData.metricMap[m.code] = calcFnMap[m.calcType](values);
|
|
241
233
|
} catch (error) {
|
|
242
234
|
_rlog["default"].warn('连线组指标计算异常', error);
|
|
243
235
|
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.buildClusterGroups = buildClusterGroups;
|
|
7
|
+
exports.isCluster = isCluster;
|
|
8
|
+
exports.processClusterChildNode = processClusterChildNode;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* 集群处理工具类
|
|
14
|
+
*/
|
|
15
|
+
function isCluster(node) {
|
|
16
|
+
return !!node.cluster;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function buildClusterGroups(nodes) {
|
|
20
|
+
return nodes.filter(isCluster).map(function (g) {
|
|
21
|
+
return (0, _extends2["default"])({
|
|
22
|
+
tag: null,
|
|
23
|
+
parentId: g.groupId,
|
|
24
|
+
parentTag: g.groupTag
|
|
25
|
+
}, g);
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* 集群的节点 groupId 设置为所在集群id、groupTag设为空。所属集群不存在不处理
|
|
30
|
+
*
|
|
31
|
+
* @param {*} node
|
|
32
|
+
* @param {*} groups
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
function processClusterChildNode(node, groups) {
|
|
37
|
+
var ownerId = node.ownerId;
|
|
38
|
+
var ownerExisted = ownerId && groups.find(function (group) {
|
|
39
|
+
return group.id === ownerId;
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
if (!ownerId || !ownerExisted) {
|
|
43
|
+
return node;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return (0, _extends2["default"])({}, node, {
|
|
47
|
+
groupId: ownerId,
|
|
48
|
+
groupTag: null
|
|
49
|
+
});
|
|
50
|
+
}
|
package/lib/utils/topoData.js
CHANGED
|
@@ -37,6 +37,8 @@ var _icon = require("../core/common/icons/icon");
|
|
|
37
37
|
|
|
38
38
|
var _backgroundUtil = require("../core/utils/backgroundUtil");
|
|
39
39
|
|
|
40
|
+
var _clusterUtil = require("./clusterUtil");
|
|
41
|
+
|
|
40
42
|
var _excluded = ["extraConfig"];
|
|
41
43
|
|
|
42
44
|
/**
|
|
@@ -402,9 +404,15 @@ var combTopoData = function combTopoData(_ref3) {
|
|
|
402
404
|
engine: engine
|
|
403
405
|
}); // group
|
|
404
406
|
|
|
405
|
-
var groups = formatGroups((_result$groups = result.groups) !== null && _result$groups !== void 0 ? _result$groups : []); // nodes
|
|
407
|
+
var groups = formatGroups([].concat((_result$groups = result.groups) !== null && _result$groups !== void 0 ? _result$groups : [], (0, _clusterUtil.buildClusterGroups)(result.nodes))); // nodes
|
|
406
408
|
|
|
407
|
-
var nodes = result.nodes
|
|
409
|
+
var nodes = result.nodes // 过滤集群
|
|
410
|
+
.filter(function (node) {
|
|
411
|
+
return !(0, _clusterUtil.isCluster)(node);
|
|
412
|
+
}) // 修正集群节点数据
|
|
413
|
+
.map(function (node) {
|
|
414
|
+
return (0, _clusterUtil.processClusterChildNode)(node, groups);
|
|
415
|
+
}).map(function (node) {
|
|
408
416
|
return tfNode(engine, node);
|
|
409
417
|
}); // links
|
|
410
418
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riil-frontend/component-topology",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.2",
|
|
4
4
|
"description": "拓扑",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "build-scripts start",
|
|
@@ -110,6 +110,6 @@
|
|
|
110
110
|
"access": "public"
|
|
111
111
|
},
|
|
112
112
|
"license": "MIT",
|
|
113
|
-
"homepage": "https://unpkg.com/@riil-frontend/component-topology@3.
|
|
113
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@3.16.2/build/index.html",
|
|
114
114
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
|
115
115
|
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import _Button from "@alifd/next/es/button";
|
|
2
|
-
import _Icon from "@alifd/next/es/icon";
|
|
3
|
-
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
4
|
-
export default function LineType(props) {
|
|
5
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, null, /*#__PURE__*/React.createElement(_Icon, {
|
|
6
|
-
type: "UICBB_edit_Histogram"
|
|
7
|
-
})), "\xA0\xA0", /*#__PURE__*/React.createElement(_Button, null, /*#__PURE__*/React.createElement(_Icon, {
|
|
8
|
-
type: "UICBB_edit_Histogram"
|
|
9
|
-
})), "\xA0\xA0", /*#__PURE__*/React.createElement(_Button, null, /*#__PURE__*/React.createElement(_Icon, {
|
|
10
|
-
type: "UICBB_edit_Histogram"
|
|
11
|
-
})), "\xA0\xA0", /*#__PURE__*/React.createElement(_Button, null, /*#__PURE__*/React.createElement(_Icon, {
|
|
12
|
-
type: "UICBB_edit_Histogram"
|
|
13
|
-
})), "\xA0\xA0");
|
|
14
|
-
}
|
|
15
|
-
;
|