@riil-frontend/component-topology 3.5.13 → 4.0.0-a.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/index.js +5 -5
- 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/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js +36 -0
- package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js +16 -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/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/editor/components/settings/propertyViews/multipleElements/{BatchSetNodeSize.js → BatchSetNodeSize/BatchSetNodeSize.js} +30 -2
- package/lib/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js +16 -3
- 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/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/propertyViews/multipleElements/BatchSetNodeSize.js +0 -8
|
@@ -5,7 +5,7 @@ import ResourceDiplayInfoSetting from "../ResourceViewAttributeSetting/Setting";
|
|
|
5
5
|
import BasicConfig from "./ResourceDisplay/BasicConfig"; // 默认中可配置内容包括总速率、带宽利用率、发送速率、发送带宽利用率、接收速率、接收带宽利用率
|
|
6
6
|
|
|
7
7
|
var CommonOptions = [{
|
|
8
|
-
value: 'metric:
|
|
8
|
+
value: 'metric:interface_totalbps',
|
|
9
9
|
label: '总流速'
|
|
10
10
|
}, {
|
|
11
11
|
value: 'metric:bandwidth_utilization',
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
2
|
+
import SizeInput from "../../../common/SizeInput";
|
|
3
|
+
export default function BatchSetNodeSize(props) {
|
|
4
|
+
var topo = props.topo;
|
|
5
|
+
|
|
6
|
+
var _useState = useState(''),
|
|
7
|
+
width = _useState[0],
|
|
8
|
+
setWidth = _useState[1];
|
|
9
|
+
|
|
10
|
+
var _useState2 = useState(undefined),
|
|
11
|
+
height = _useState2[0],
|
|
12
|
+
setHeight = _useState2[1];
|
|
13
|
+
|
|
14
|
+
var handleChange = function handleChange(name, value) {
|
|
15
|
+
var selection = topo.getSelectionModel().getSelection().toArray();
|
|
16
|
+
console.error(selection);
|
|
17
|
+
|
|
18
|
+
if (name === 'width') {
|
|
19
|
+
selection.forEach(function (node) {
|
|
20
|
+
node.setWidth(value);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var onLockChange = function onLockChange() {};
|
|
26
|
+
|
|
27
|
+
return /*#__PURE__*/React.createElement(SizeInput, {
|
|
28
|
+
value: {
|
|
29
|
+
width: width,
|
|
30
|
+
height: height
|
|
31
|
+
},
|
|
32
|
+
onChange: handleChange,
|
|
33
|
+
onLockChange: onLockChange
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
;
|
|
@@ -4,7 +4,7 @@ import _Collapse from "@alifd/next/es/collapse";
|
|
|
4
4
|
import React, { useState, useEffect } from 'react';
|
|
5
5
|
import AlignSetting from "../../common/AlignSetting";
|
|
6
6
|
import LineType from "../../common/LineType";
|
|
7
|
-
import BatchSetNodeSize from "./BatchSetNodeSize";
|
|
7
|
+
import BatchSetNodeSize from "./BatchSetNodeSize/BatchSetNodeSize";
|
|
8
8
|
import { TPL_TREE } from "../../../../../../utils/template";
|
|
9
9
|
import ViewPropertyView from "../view/ViewPropertyView";
|
|
10
10
|
var CollapsePanel = _Collapse.Panel;
|
|
@@ -57,10 +57,23 @@ export default function MultipleElementPropertyView(props) {
|
|
|
57
57
|
border: 'none'
|
|
58
58
|
}
|
|
59
59
|
}, /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
60
|
+
key: "\u56FE\u7247",
|
|
61
|
+
title: "\u56FE\u7247"
|
|
62
|
+
}, /*#__PURE__*/React.createElement(_Form.Item, {
|
|
63
|
+
label: "\u56FE\u7247\u5C3A\u5BF8",
|
|
64
|
+
style: {
|
|
65
|
+
marginBottom: 0
|
|
66
|
+
}
|
|
67
|
+
}, /*#__PURE__*/React.createElement(BatchSetNodeSize, {
|
|
68
|
+
topo: topo
|
|
69
|
+
}))), /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
60
70
|
key: "\u5BF9\u9F50\u65B9\u5F0F",
|
|
61
71
|
title: "\u5BF9\u9F50\u65B9\u5F0F"
|
|
62
72
|
}, /*#__PURE__*/React.createElement(AlignSetting, {
|
|
63
73
|
onChange: alignOnChange,
|
|
64
|
-
selected:
|
|
65
|
-
}))
|
|
74
|
+
selected: "left"
|
|
75
|
+
})), /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
76
|
+
key: "\u7EBF\u5F62",
|
|
77
|
+
title: "\u7EBF\u5F62"
|
|
78
|
+
}, /*#__PURE__*/React.createElement(LineType, null)))));
|
|
66
79
|
}
|
|
@@ -20,7 +20,7 @@ import { updateEdgeExpanded } from "../utils/edgeUtil";
|
|
|
20
20
|
import PluginManager from "./PluginManager";
|
|
21
21
|
import topoFactory from "./topoFactory"; // eslint-disable-next-line no-undef
|
|
22
22
|
|
|
23
|
-
var version = typeof "
|
|
23
|
+
var version = typeof "4.0.0-a.2" === 'string' ? "4.0.0-a.2" : null;
|
|
24
24
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
25
25
|
/**
|
|
26
26
|
* 拓扑显示和编辑
|
|
@@ -29,25 +29,20 @@ export function formatMetric(val, metricInfo) {
|
|
|
29
29
|
function addLinkMetricUnderlineArrow(metricCode) {
|
|
30
30
|
var map = {
|
|
31
31
|
// 总流速和总带宽利用率:双向箭头
|
|
32
|
-
'
|
|
33
|
-
'
|
|
32
|
+
'interface_totalbps': 'both',
|
|
33
|
+
'bandwidth_utilization': 'both',
|
|
34
34
|
// 发送速率和发送带宽利用率:背向取值端口的箭头 指向目的
|
|
35
|
-
'
|
|
36
|
-
'
|
|
35
|
+
'out_rate': 'to',
|
|
36
|
+
'out_bandwidth_utilization': 'to',
|
|
37
37
|
// 接收速率和接收带宽利用率:指向取值端口的箭头 指向源
|
|
38
|
-
'
|
|
39
|
-
'
|
|
38
|
+
'in_rate': 'from',
|
|
39
|
+
'in_bandwidth_utilization': 'from'
|
|
40
40
|
};
|
|
41
|
-
var codes = Object.keys(map);
|
|
42
41
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return {
|
|
48
|
-
underlineArrow: map[code]
|
|
49
|
-
};
|
|
50
|
-
}
|
|
42
|
+
if (map[metricCode]) {
|
|
43
|
+
return {
|
|
44
|
+
underlineArrow: map[metricCode]
|
|
45
|
+
};
|
|
51
46
|
}
|
|
52
47
|
|
|
53
48
|
return {};
|
|
@@ -146,13 +146,13 @@ var CiTyeCache = /*#__PURE__*/function () {
|
|
|
146
146
|
var model = null;
|
|
147
147
|
types.forEach(function (type) {
|
|
148
148
|
if (type.id === connectType) {
|
|
149
|
-
var metrics = ciType.metrics //
|
|
149
|
+
var metrics = ciType.metrics // 仅出口链路有:ping状态、专线连通状态
|
|
150
150
|
.filter(function (metric) {
|
|
151
151
|
if (connectType === 'exit') {
|
|
152
152
|
return true;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
return ['
|
|
155
|
+
return ['icmp_discards_rate', 'ping_status'].indexOf(metric.code) === -1;
|
|
156
156
|
}) // 按链路类型过滤对应指标
|
|
157
157
|
.filter(function (metric) {
|
|
158
158
|
return !excludeMetricPprefixs.filter(function (excludeMetricPprefix) {
|
|
@@ -33,7 +33,9 @@ export default function useManageStatus(props) {
|
|
|
33
33
|
topoState = _topo$store$useModel[0],
|
|
34
34
|
topoDispatchers = _topo$store$useModel[1];
|
|
35
35
|
|
|
36
|
-
var graphLoaded = topoState.graphLoaded
|
|
36
|
+
var graphLoaded = topoState.graphLoaded,
|
|
37
|
+
viewState = topoState.viewState;
|
|
38
|
+
var isEditMode = viewState === 'edit';
|
|
37
39
|
var resources = topo.dataModel.useCis();
|
|
38
40
|
useTopoEventListener({
|
|
39
41
|
type: 'manageStatus',
|
|
@@ -55,7 +57,7 @@ export default function useManageStatus(props) {
|
|
|
55
57
|
});
|
|
56
58
|
useEffect(function () {
|
|
57
59
|
// 首次加载和监控状态变化后,更新节点和连线置灰状态
|
|
58
|
-
if (graphLoaded) {
|
|
60
|
+
if (!isEditMode && graphLoaded) {
|
|
59
61
|
resources.forEach(function (resource) {
|
|
60
62
|
var type = resource.type,
|
|
61
63
|
id = resource.id,
|
|
@@ -74,5 +76,5 @@ export default function useManageStatus(props) {
|
|
|
74
76
|
}
|
|
75
77
|
});
|
|
76
78
|
}
|
|
77
|
-
}, [graphLoaded, resources]);
|
|
79
|
+
}, [isEditMode, graphLoaded, resources]);
|
|
78
80
|
}
|
|
@@ -9,7 +9,7 @@ import AttributeFormatter from "../../core/models/attributeFormatter"; // 参与
|
|
|
9
9
|
|
|
10
10
|
var metrics = [// 总流速
|
|
11
11
|
{
|
|
12
|
-
code: '
|
|
12
|
+
code: 'interface_totalbps',
|
|
13
13
|
calcType: 'sum'
|
|
14
14
|
}, // 带宽利用率
|
|
15
15
|
{
|
|
@@ -34,10 +34,6 @@ var metrics = [// 总流速
|
|
|
34
34
|
calcType: 'sum',
|
|
35
35
|
showWhenSameSource: true
|
|
36
36
|
}];
|
|
37
|
-
var connectTypePrefixMap = {
|
|
38
|
-
phy: 'physical_link.',
|
|
39
|
-
exit: 'export_link.'
|
|
40
|
-
};
|
|
41
37
|
var calcFnMap = {
|
|
42
38
|
sum: function sum(values) {
|
|
43
39
|
return values.reduce(function (total, val) {
|
|
@@ -149,30 +145,27 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
|
|
|
149
145
|
config = _ref2.config,
|
|
150
146
|
linkChildren = _ref2.linkChildren,
|
|
151
147
|
data = _ref2.data;
|
|
152
|
-
var connectTypes = ['physical_link.', 'export_link.'];
|
|
153
|
-
|
|
154
|
-
var replaceMetricConfigCode = function replaceMetricConfigCode(item) {
|
|
155
|
-
var code = item.code;
|
|
156
|
-
connectTypes.forEach(function (prefix) {
|
|
157
|
-
code = code.replace(prefix, 'physical_link.');
|
|
158
|
-
});
|
|
159
|
-
return _extends({}, item, {
|
|
160
|
-
code: code
|
|
161
|
-
});
|
|
162
|
-
}; // 查询配置,过滤不在范围内的属性
|
|
163
|
-
|
|
164
148
|
|
|
149
|
+
// 查询配置,过滤不在范围内的属性
|
|
165
150
|
var finalConfig = _extends({}, config, {
|
|
166
151
|
tags: config.tags.filter(function (item) {
|
|
167
152
|
return _this2.filterField(item, linkChildren);
|
|
168
|
-
})
|
|
153
|
+
}),
|
|
169
154
|
tips: config.tips.filter(function (item) {
|
|
170
155
|
return _this2.filterField(item, linkChildren);
|
|
171
|
-
})
|
|
156
|
+
})
|
|
172
157
|
}); // 构造数据,计算指标值
|
|
173
158
|
|
|
174
159
|
|
|
175
|
-
var mergeData = this.buildData(data, linkChildren);
|
|
160
|
+
var mergeData = this.buildData(data, linkChildren);
|
|
161
|
+
rlog.debug('buildEdgeGroupTagTagsAndTips', {
|
|
162
|
+
groupId: groupId,
|
|
163
|
+
config: config,
|
|
164
|
+
linkChildren: linkChildren,
|
|
165
|
+
data: data,
|
|
166
|
+
finalConfig: finalConfig,
|
|
167
|
+
mergeData: mergeData
|
|
168
|
+
}); // 构造标注、悬浮框数据
|
|
176
169
|
|
|
177
170
|
var formatter = new AttributeFormatter(this.topo);
|
|
178
171
|
return {
|
|
@@ -186,7 +179,7 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
|
|
|
186
179
|
|
|
187
180
|
_proto.filterField = function filterField(item, linkChildren) {
|
|
188
181
|
var fieldConfig = metrics.find(function (m) {
|
|
189
|
-
return item.code
|
|
182
|
+
return item.code === m.code;
|
|
190
183
|
});
|
|
191
184
|
|
|
192
185
|
if (item.type !== 'metric' || !fieldConfig) {
|
|
@@ -224,11 +217,9 @@ var LinkTagsTipsBuilder = /*#__PURE__*/function () {
|
|
|
224
217
|
metrics.forEach(function (m) {
|
|
225
218
|
try {
|
|
226
219
|
var values = linkChildrenData.map(function (linkData) {
|
|
227
|
-
|
|
228
|
-
var metricCode = "" + connectTypePrefixMap[connectType] + m.code;
|
|
229
|
-
return linkData.metricMap[metricCode];
|
|
220
|
+
return linkData.metricMap[m.code];
|
|
230
221
|
});
|
|
231
|
-
mergeData.metricMap[
|
|
222
|
+
mergeData.metricMap[m.code] = calcFnMap[m.calcType](values);
|
|
232
223
|
} catch (error) {
|
|
233
224
|
rlog.warn('连线组指标计算异常', error);
|
|
234
225
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 集群处理工具类
|
|
5
|
+
*/
|
|
6
|
+
export function isCluster(node) {
|
|
7
|
+
return !!node.cluster;
|
|
8
|
+
}
|
|
9
|
+
export function buildClusterGroups(nodes) {
|
|
10
|
+
return nodes.filter(isCluster).map(function (g) {
|
|
11
|
+
return _extends({
|
|
12
|
+
tag: null,
|
|
13
|
+
parentId: g.groupId,
|
|
14
|
+
parentTag: g.groupTag
|
|
15
|
+
}, g);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* 集群的节点 groupId 设置为所在集群id、groupTag设为空。所属集群不存在不处理
|
|
20
|
+
*
|
|
21
|
+
* @param {*} node
|
|
22
|
+
* @param {*} groups
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
export function processClusterChildNode(node, groups) {
|
|
26
|
+
var ownerId = node.ownerId;
|
|
27
|
+
var ownerExisted = ownerId && groups.find(function (group) {
|
|
28
|
+
return group.id === ownerId;
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
if (!ownerId || !ownerExisted) {
|
|
32
|
+
return node;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return _extends({}, node, {
|
|
36
|
+
groupId: ownerId,
|
|
37
|
+
groupTag: null
|
|
38
|
+
});
|
|
39
|
+
}
|
package/es/utils/topoData.js
CHANGED
|
@@ -10,6 +10,7 @@ import buildEditorContextMenu from "../core/editor/contextmenu/buildContextmenu"
|
|
|
10
10
|
import mergeContextmenu from "../core/common/contextmenu/mergeContextmenu";
|
|
11
11
|
import { getEditorIcons } from "../core/common/icons/icon";
|
|
12
12
|
import { getBackgroundImageUrl } from "../core/utils/backgroundUtil";
|
|
13
|
+
import { buildClusterGroups, isCluster, processClusterChildNode } from "./clusterUtil";
|
|
13
14
|
/**
|
|
14
15
|
* 查找数组中对应key的值为value的元素并返回,只查找第一个符合的元素
|
|
15
16
|
* @param {Array} arr 数组
|
|
@@ -362,9 +363,15 @@ export var combTopoData = function combTopoData(_ref3) {
|
|
|
362
363
|
engine: engine
|
|
363
364
|
}); // group
|
|
364
365
|
|
|
365
|
-
var groups = formatGroups((_result$groups = result.groups) !== null && _result$groups !== void 0 ? _result$groups : []); // nodes
|
|
366
|
+
var groups = formatGroups([].concat((_result$groups = result.groups) !== null && _result$groups !== void 0 ? _result$groups : [], buildClusterGroups(result.nodes))); // nodes
|
|
366
367
|
|
|
367
|
-
var nodes = result.nodes
|
|
368
|
+
var nodes = result.nodes // 过滤集群
|
|
369
|
+
.filter(function (node) {
|
|
370
|
+
return !isCluster(node);
|
|
371
|
+
}) // 修正集群节点数据
|
|
372
|
+
.map(function (node) {
|
|
373
|
+
return processClusterChildNode(node, groups);
|
|
374
|
+
}).map(function (node) {
|
|
368
375
|
return tfNode(engine, node);
|
|
369
376
|
}); // links
|
|
370
377
|
|
|
@@ -17,7 +17,7 @@ var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig
|
|
|
17
17
|
|
|
18
18
|
// 默认中可配置内容包括总速率、带宽利用率、发送速率、发送带宽利用率、接收速率、接收带宽利用率
|
|
19
19
|
var CommonOptions = [{
|
|
20
|
-
value: 'metric:
|
|
20
|
+
value: 'metric:interface_totalbps',
|
|
21
21
|
label: '总流速'
|
|
22
22
|
}, {
|
|
23
23
|
value: 'metric:bandwidth_utilization',
|
|
@@ -7,15 +7,43 @@ 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)(''),
|
|
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 handleChange = function handleChange(name, value) {
|
|
28
|
+
var selection = topo.getSelectionModel().getSelection().toArray();
|
|
29
|
+
console.error(selection);
|
|
30
|
+
|
|
31
|
+
if (name === 'width') {
|
|
32
|
+
selection.forEach(function (node) {
|
|
33
|
+
node.setWidth(value);
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
var onLockChange = function onLockChange() {};
|
|
39
|
+
|
|
17
40
|
return /*#__PURE__*/_react["default"].createElement(_SizeInput["default"], {
|
|
18
|
-
value: {
|
|
41
|
+
value: {
|
|
42
|
+
width: width,
|
|
43
|
+
height: height
|
|
44
|
+
},
|
|
45
|
+
onChange: handleChange,
|
|
46
|
+
onLockChange: onLockChange
|
|
19
47
|
});
|
|
20
48
|
}
|
|
21
49
|
|
|
@@ -17,7 +17,7 @@ var _AlignSetting = _interopRequireDefault(require("../../common/AlignSetting"))
|
|
|
17
17
|
|
|
18
18
|
var _LineType = _interopRequireDefault(require("../../common/LineType"));
|
|
19
19
|
|
|
20
|
-
var _BatchSetNodeSize = _interopRequireDefault(require("./BatchSetNodeSize"));
|
|
20
|
+
var _BatchSetNodeSize = _interopRequireDefault(require("./BatchSetNodeSize/BatchSetNodeSize"));
|
|
21
21
|
|
|
22
22
|
var _template = require("../../../../../../utils/template");
|
|
23
23
|
|
|
@@ -77,10 +77,23 @@ function MultipleElementPropertyView(props) {
|
|
|
77
77
|
border: 'none'
|
|
78
78
|
}
|
|
79
79
|
}, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
|
|
80
|
+
key: "\u56FE\u7247",
|
|
81
|
+
title: "\u56FE\u7247"
|
|
82
|
+
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
|
|
83
|
+
label: "\u56FE\u7247\u5C3A\u5BF8",
|
|
84
|
+
style: {
|
|
85
|
+
marginBottom: 0
|
|
86
|
+
}
|
|
87
|
+
}, /*#__PURE__*/_react["default"].createElement(_BatchSetNodeSize["default"], {
|
|
88
|
+
topo: topo
|
|
89
|
+
}))), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
|
|
80
90
|
key: "\u5BF9\u9F50\u65B9\u5F0F",
|
|
81
91
|
title: "\u5BF9\u9F50\u65B9\u5F0F"
|
|
82
92
|
}, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
|
|
83
93
|
onChange: alignOnChange,
|
|
84
|
-
selected:
|
|
85
|
-
}))
|
|
94
|
+
selected: "left"
|
|
95
|
+
})), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
|
|
96
|
+
key: "\u7EBF\u5F62",
|
|
97
|
+
title: "\u7EBF\u5F62"
|
|
98
|
+
}, /*#__PURE__*/_react["default"].createElement(_LineType["default"], null)))));
|
|
86
99
|
}
|
|
@@ -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 "
|
|
51
|
+
var version = typeof "4.0.0-a.2" === 'string' ? "4.0.0-a.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
|
}
|
|
@@ -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
|
}
|