@riil-frontend/component-topology 10.0.21 → 10.0.23
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 +1 -1
- package/es/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js +7 -0
- package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js +2 -0
- package/es/core/editor/config/themes.js +2 -6
- package/es/core/hooks/useCanvasTheme.js +3 -8
- package/es/core/models/AttributeMetricDisplay.js +79 -67
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/utils/linkUtils.js +1 -8
- package/es/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +16 -3
- package/es/core/viewer/components/plugins/ResourceDetail/DefaultDetailContent.js +0 -1
- package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +3 -3
- package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailPlugin.js +1 -1
- package/es/networkTopo/models/EdgeGroupTagTipBuilder.js +49 -0
- package/es/networkTopo/models/ExtElementTagTipBuilder.js +22 -0
- package/es/networkTopo/models/TopoCenter.js +2 -2
- package/es/networkTopo/utils/edgeGroupTagUtil.js +10 -0
- package/es/utils/htElementUtils.js +3 -0
- package/lib/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js +7 -0
- package/lib/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js +2 -0
- package/lib/core/editor/config/themes.js +2 -6
- package/lib/core/hooks/useCanvasTheme.js +3 -8
- package/lib/core/models/AttributeMetricDisplay.js +75 -64
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/utils/linkUtils.js +1 -8
- package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +15 -2
- package/lib/core/viewer/components/plugins/ResourceDetail/DefaultDetailContent.js +0 -1
- package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +3 -3
- package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailPlugin.js +1 -1
- package/lib/networkTopo/models/EdgeGroupTagTipBuilder.js +55 -0
- package/lib/networkTopo/models/ExtElementTagTipBuilder.js +30 -0
- package/lib/networkTopo/models/TopoCenter.js +2 -2
- package/lib/networkTopo/utils/edgeGroupTagUtil.js +15 -0
- package/lib/utils/htElementUtils.js +5 -0
- package/package.json +2 -2
@@ -52,13 +52,11 @@ var baseLightTheme = {
|
|
52
52
|
var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
|
53
53
|
name: 'white',
|
54
54
|
label: '白色',
|
55
|
-
color: '#FFFFFF'
|
56
|
-
toolsTheme: 'lightgrayblue'
|
55
|
+
color: '#FFFFFF'
|
57
56
|
}), (0, _extends2["default"])({}, baseLightTheme, {
|
58
57
|
name: 'lightblue',
|
59
58
|
label: '蓝色',
|
60
|
-
color: '#F9FBFF'
|
61
|
-
toolsTheme: 'white'
|
59
|
+
color: '#F9FBFF'
|
62
60
|
}), // {
|
63
61
|
// name: 'yellow',
|
64
62
|
// label: '黄色',
|
@@ -73,7 +71,6 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
|
|
73
71
|
name: 'dark',
|
74
72
|
label: '深色',
|
75
73
|
color: '#031425',
|
76
|
-
toolsTheme: 'black',
|
77
74
|
globalNodeLabelStyle: {
|
78
75
|
color: '#ffffff'
|
79
76
|
},
|
@@ -116,7 +113,6 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
|
|
116
113
|
}, {
|
117
114
|
name: 'poly',
|
118
115
|
label: 'Poly',
|
119
|
-
toolsTheme: 'black',
|
120
116
|
backgroundImage: '/img/topo/themes/poly.png',
|
121
117
|
backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
|
122
118
|
globalNodeLabelStyle: {
|
@@ -16,13 +16,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
16
16
|
var themeMap = [{
|
17
17
|
name: 'white',
|
18
18
|
label: '白色',
|
19
|
-
color: null
|
20
|
-
toolsTheme: 'white'
|
19
|
+
color: null
|
21
20
|
}, {
|
22
21
|
name: 'lightblue',
|
23
22
|
label: '蓝色',
|
24
|
-
color: '#F9FBFF'
|
25
|
-
toolsTheme: 'white'
|
23
|
+
color: '#F9FBFF'
|
26
24
|
}, {
|
27
25
|
name: 'yellow',
|
28
26
|
label: '黄色',
|
@@ -34,12 +32,10 @@ var themeMap = [{
|
|
34
32
|
}, {
|
35
33
|
name: 'dark',
|
36
34
|
label: '深色',
|
37
|
-
color: '#031425'
|
38
|
-
toolsTheme: 'dark'
|
35
|
+
color: '#031425'
|
39
36
|
}, {
|
40
37
|
name: 'poly',
|
41
38
|
label: 'Poly',
|
42
|
-
toolsTheme: 'dark',
|
43
39
|
backgroundImage: '/img/topo/themes/poly.png'
|
44
40
|
}].reduce(function (map, item) {
|
45
41
|
var _extends2;
|
@@ -63,7 +59,6 @@ function useCanvasTheme(props) {
|
|
63
59
|
if (graphLoaded && themeConfig) {
|
64
60
|
try {
|
65
61
|
topo.getHtTopo().setTheme(themeName);
|
66
|
-
topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
|
67
62
|
} catch (error) {
|
68
63
|
console.error('切换主题失败', error);
|
69
64
|
}
|
@@ -19,8 +19,6 @@ var _lodash = require("lodash");
|
|
19
19
|
|
20
20
|
var _ResourceInfoDisplay = require("../../constants/ResourceInfoDisplay");
|
21
21
|
|
22
|
-
var _topoData = require("../../utils/topoData");
|
23
|
-
|
24
22
|
var _services = require("../services");
|
25
23
|
|
26
24
|
var _manageStatusUtil = require("../utils/manageStatusUtil");
|
@@ -30,12 +28,12 @@ var _attributeFormatter = _interopRequireDefault(require("./attributeFormatter")
|
|
30
28
|
var _DictCache = _interopRequireDefault(require("./cache/DictCache"));
|
31
29
|
|
32
30
|
function isGraphField(item) {
|
33
|
-
return item.type ===
|
31
|
+
return item.type === 'graph';
|
34
32
|
}
|
35
33
|
|
36
34
|
function filterUnExistedFields(fields, ciTypeMeta) {
|
37
35
|
function isFieldExisted(item, ciTypeMeta) {
|
38
|
-
return item.type ===
|
36
|
+
return item.type === 'attribute' && ciTypeMeta.attributeMap[item.code] || item.type === 'metric' && ciTypeMeta.metricMap[item.code] || item.type !== 'attribute' && item.type !== 'metric';
|
39
37
|
}
|
40
38
|
|
41
39
|
return fields.filter(function (item) {
|
@@ -52,7 +50,8 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
52
50
|
var _this$topo$options$ta;
|
53
51
|
|
54
52
|
this.topo = topo;
|
55
|
-
|
53
|
+
this.formatter = new _attributeFormatter["default"](this.topo);
|
54
|
+
var ExtElementTagTipBuilder = (_this$topo$options$ta = this.topo.options.tagTip) === null || _this$topo$options$ta === void 0 ? void 0 : _this$topo$options$ta.extElementTagTipBuilder;
|
56
55
|
|
57
56
|
if (ExtElementTagTipBuilder) {
|
58
57
|
this.extElementTagTipBuilder = new ExtElementTagTipBuilder(this);
|
@@ -62,7 +61,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
62
61
|
var _proto = AttributeMetricDisplay.prototype;
|
63
62
|
|
64
63
|
_proto.getConfig = function getConfig() {
|
65
|
-
var _this$topo$store$getM = this.topo.store.getModelState(
|
64
|
+
var _this$topo$store$getM = this.topo.store.getModelState('displayConfig'),
|
66
65
|
nodeTag = _this$topo$store$getM.nodeTag,
|
67
66
|
nodeTip = _this$topo$store$getM.nodeTip,
|
68
67
|
linkTag = _this$topo$store$getM.linkTag,
|
@@ -126,7 +125,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
126
125
|
|
127
126
|
return [].concat(links.map(function (link) {
|
128
127
|
return (0, _extends2["default"])({}, link, {
|
129
|
-
type:
|
128
|
+
type: 'edge'
|
130
129
|
});
|
131
130
|
}));
|
132
131
|
};
|
@@ -139,14 +138,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
139
138
|
|
140
139
|
|
141
140
|
var nodeArr = [];
|
142
|
-
nodes.
|
143
|
-
if (
|
141
|
+
nodes.forEach(function (node) {
|
142
|
+
if (node.ciType) {
|
144
143
|
var ciType = node.ciType;
|
145
144
|
|
146
145
|
var ciTypeConfig = _this.getNodeCiTypeConfig(ciType);
|
147
146
|
|
148
147
|
nodeArr.push({
|
149
|
-
type:
|
148
|
+
type: 'node',
|
150
149
|
id: node.id,
|
151
150
|
ciType: ciType,
|
152
151
|
tags: _this.filterCiFiledConfigItems(node, ciTypeConfig.tags),
|
@@ -169,7 +168,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
169
168
|
|
170
169
|
if (!(0, _manageStatusUtil.isMonitoring)(data)) {
|
171
170
|
list = list.filter(function (item) {
|
172
|
-
return item.type !==
|
171
|
+
return item.type !== 'metric';
|
173
172
|
});
|
174
173
|
}
|
175
174
|
|
@@ -178,7 +177,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
178
177
|
;
|
179
178
|
|
180
179
|
_proto.getModelType = function getModelType(ci) {
|
181
|
-
if (ci.ciType ===
|
180
|
+
if (ci.ciType === 'network_link') {
|
182
181
|
return ci.attributes.support_templates;
|
183
182
|
}
|
184
183
|
|
@@ -218,9 +217,9 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
218
217
|
return {
|
219
218
|
tags: getItems(linkTagConfig),
|
220
219
|
tagLinkArrow: {
|
221
|
-
1:
|
222
|
-
2:
|
223
|
-
3:
|
220
|
+
1: 'both',
|
221
|
+
2: 'from',
|
222
|
+
3: 'to'
|
224
223
|
}[linkTagConfig === null || linkTagConfig === void 0 ? void 0 : linkTagConfig.type] || undefined,
|
225
224
|
tips: getItems(linkTip || defaultLinkTipConfig)
|
226
225
|
};
|
@@ -280,7 +279,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
280
279
|
}
|
281
280
|
}); // 增加概览需要的指标字段
|
282
281
|
|
283
|
-
var overviewState = _this3.topo.store.getModelState(
|
282
|
+
var overviewState = _this3.topo.store.getModelState('topoBaseInfoOverview');
|
284
283
|
|
285
284
|
if (overviewState.id === fields.id) {
|
286
285
|
overviewState.metricCodes.forEach(function (code) {
|
@@ -333,10 +332,10 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
333
332
|
data = nodeTag.data;
|
334
333
|
var items = (isCustom ? data[node.ciType] : data) || [];
|
335
334
|
visible = !!items.filter(function (item) {
|
336
|
-
return item.type ===
|
335
|
+
return item.type === 'graph';
|
337
336
|
}).length; // ipNode逻辑
|
338
337
|
|
339
|
-
if (isCustom && node.bindType ===
|
338
|
+
if (isCustom && node.bindType === 'ip') {
|
340
339
|
visible = true;
|
341
340
|
}
|
342
341
|
}
|
@@ -369,7 +368,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
369
368
|
var ele = dm.getDataByTag(id); //
|
370
369
|
|
371
370
|
if (ele) {
|
372
|
-
ele.a(
|
371
|
+
ele.a('isShowName', visible);
|
373
372
|
}
|
374
373
|
});
|
375
374
|
}
|
@@ -406,7 +405,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
406
405
|
|
407
406
|
case 4:
|
408
407
|
ciDatas = _context.sent;
|
409
|
-
bizDispatchers = topo.store.getModelDispatchers(
|
408
|
+
bizDispatchers = topo.store.getModelDispatchers('topoBizMod');
|
410
409
|
_context.next = 8;
|
411
410
|
return bizDispatchers.setAttrsAndMetrics(ciDatas);
|
412
411
|
|
@@ -573,7 +572,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
573
572
|
|
574
573
|
var elementTagsAndTips = this.buildTagsTips() // 开锁状态下禁用悬停展示悬浮框
|
575
574
|
.map(function (item) {
|
576
|
-
var _topo$store$getModelS = topo.store.getModelState(
|
575
|
+
var _topo$store$getModelS = topo.store.getModelState('lock'),
|
577
576
|
lock = _topo$store$getModelS.lock;
|
578
577
|
|
579
578
|
return lock ? item : (0, _extends2["default"])({}, item, {
|
@@ -583,9 +582,9 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
583
582
|
.map(function (item) {
|
584
583
|
var tags = item.tags;
|
585
584
|
|
586
|
-
if (item.type ===
|
585
|
+
if (item.type === 'edge') {
|
587
586
|
var allNoValue = tags.data.filter(function (tItem) {
|
588
|
-
return tItem.value ===
|
587
|
+
return tItem.value === '- ';
|
589
588
|
}).length === tags.data.length;
|
590
589
|
|
591
590
|
if (allNoValue) {
|
@@ -603,9 +602,9 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
603
602
|
if (htTopo) {
|
604
603
|
var _topo$historyManager, _topo$historyManager2;
|
605
604
|
|
606
|
-
(_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true,
|
605
|
+
(_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '加载标注');
|
607
606
|
htTopo.loadTagAndTip(JSON.parse(JSON.stringify(elementTagsAndTips)));
|
608
|
-
(_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false,
|
607
|
+
(_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '加载标注');
|
609
608
|
}
|
610
609
|
}
|
611
610
|
/**
|
@@ -615,7 +614,51 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
615
614
|
;
|
616
615
|
|
617
616
|
_proto.getData = function getData() {
|
618
|
-
return this.topo.store.getModelState(
|
617
|
+
return this.topo.store.getModelState('topoBizMod').attrsAndMetrics;
|
618
|
+
};
|
619
|
+
|
620
|
+
_proto.buildElementTagsTips = function buildElementTagsTips(id) {
|
621
|
+
var ciConfigs = this.getResourceTagTipConfig();
|
622
|
+
var ciConfig = ciConfigs.find(function (item) {
|
623
|
+
return item.id === id;
|
624
|
+
});
|
625
|
+
var ciDataItem = this.getData().find(function (item) {
|
626
|
+
return item.id === id;
|
627
|
+
}); // console.log("buildTagsTips-ciDataItem", ciDataItem);
|
628
|
+
|
629
|
+
if (!ciDataItem) {
|
630
|
+
return {
|
631
|
+
id: ciConfig.id,
|
632
|
+
tags: [],
|
633
|
+
tips: []
|
634
|
+
};
|
635
|
+
} // 获取ci数据
|
636
|
+
|
637
|
+
|
638
|
+
var ciData = (0, _extends2["default"])({}, ciDataItem, {
|
639
|
+
ciType: ciConfig.ciType
|
640
|
+
}); // console.log("AttributeFormatter-----", ciData, ciConfig);
|
641
|
+
|
642
|
+
var tags = this.formatter.formatAttrs(ciConfig.tags, ciData) // 展示的所有标注不带对应的名字(包括属性和指标)
|
643
|
+
.map(function (item) {
|
644
|
+
return (0, _extends2["default"])({}, item, {
|
645
|
+
name: ''
|
646
|
+
});
|
647
|
+
}); // 链路标注箭头
|
648
|
+
|
649
|
+
if (ciConfig.type === 'edge') {
|
650
|
+
tags = {
|
651
|
+
data: tags,
|
652
|
+
linkArrow: ciConfig.tagLinkArrow
|
653
|
+
};
|
654
|
+
}
|
655
|
+
|
656
|
+
return {
|
657
|
+
type: ciConfig.type,
|
658
|
+
id: ciConfig.id,
|
659
|
+
tags: tags,
|
660
|
+
tips: this.formatter.formatAttrs(ciConfig.tips, ciData)
|
661
|
+
};
|
619
662
|
}
|
620
663
|
/**
|
621
664
|
* 构造标注、悬浮框数据
|
@@ -624,50 +667,18 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
624
667
|
;
|
625
668
|
|
626
669
|
_proto.buildTagsTips = function buildTagsTips() {
|
627
|
-
var
|
670
|
+
var _this6 = this,
|
671
|
+
_this$extElementTagTi;
|
628
672
|
|
673
|
+
// 获取标注、悬浮框配置
|
629
674
|
var ciConfigs = this.getResourceTagTipConfig(); // console.log("buildTagsTips---ciConfigs", ciConfigs);
|
630
675
|
|
631
|
-
var formatter = new _attributeFormatter["default"](this.topo);
|
632
676
|
var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
|
633
|
-
|
634
|
-
|
635
|
-
if (!ciDataItem) {
|
636
|
-
return {
|
637
|
-
id: ciConfig.id,
|
638
|
-
tags: [],
|
639
|
-
tips: []
|
640
|
-
};
|
641
|
-
} // 获取ci数据
|
642
|
-
|
643
|
-
|
644
|
-
var ciData = (0, _extends2["default"])({}, ciDataItem, {
|
645
|
-
ciType: ciConfig.ciType
|
646
|
-
}); // console.log("AttributeFormatter-----", ciData, ciConfig);
|
647
|
-
|
648
|
-
var tags = formatter.formatAttrs(ciConfig.tags, ciData) // 展示的所有标注不带对应的名字(包括属性和指标)
|
649
|
-
.map(function (item) {
|
650
|
-
return (0, _extends2["default"])({}, item, {
|
651
|
-
name: ''
|
652
|
-
});
|
653
|
-
}); // 链路标注箭头
|
654
|
-
|
655
|
-
if (ciConfig.type === "edge") {
|
656
|
-
tags = {
|
657
|
-
data: tags,
|
658
|
-
linkArrow: ciConfig.tagLinkArrow
|
659
|
-
};
|
660
|
-
}
|
661
|
-
|
662
|
-
return {
|
663
|
-
type: ciConfig.type,
|
664
|
-
id: ciConfig.id,
|
665
|
-
tags: tags,
|
666
|
-
tips: formatter.formatAttrs(ciConfig.tips, ciData)
|
667
|
-
};
|
677
|
+
return _this6.buildElementTagsTips(ciConfig.id);
|
668
678
|
}); // console.log("ciTagsAndTips", ciTagsAndTips);
|
669
679
|
|
670
|
-
var
|
680
|
+
var extTagsAndTips = ((_this$extElementTagTi = this.extElementTagTipBuilder) === null || _this$extElementTagTi === void 0 ? void 0 : _this$extElementTagTi.getExtElementTagsAndTips()) || [];
|
681
|
+
var elementTagsAndTips = [].concat(ciTagsAndTips, extTagsAndTips); // 刷新标注、浮层
|
671
682
|
// rlog.debug('AttributeMetricDisplay.buildTagsTips', {tagsAndTips: elementTagsAndTips, ciConfigs});
|
672
683
|
|
673
684
|
return elementTagsAndTips;
|
@@ -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 "10.0.
|
59
|
+
var version = typeof "10.0.23" === 'string' ? "10.0.23" : null;
|
60
60
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
61
61
|
/**
|
62
62
|
* 拓扑显示和编辑
|
@@ -71,16 +71,9 @@ function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc) {
|
|
71
71
|
});
|
72
72
|
var targetNode = nodes.find(function (node) {
|
73
73
|
return node.id === attributes["network_link.destination_device_id"];
|
74
|
-
});
|
75
|
-
var target = link.target; // 目的端为ip节点
|
76
|
-
|
77
|
-
if (attributes["destination_type"] === "ip") {
|
78
|
-
target = "ip:" + attributes["network_link.destination_ipv4"];
|
79
|
-
} // 翻译
|
80
|
-
|
74
|
+
}); // 翻译
|
81
75
|
|
82
76
|
return (0, _extends2["default"])({}, link, {
|
83
|
-
target: target,
|
84
77
|
attributes: (0, _extends2["default"])({}, attributes, {
|
85
78
|
// 源/目的设备
|
86
79
|
"network_link.source_device_id_object": {
|
package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js
CHANGED
@@ -172,6 +172,7 @@ function useElementDetailManager(props) {
|
|
172
172
|
|
173
173
|
if (getCustomDetailContent) {
|
174
174
|
widget = getCustomDetailContent({
|
175
|
+
topo: topo,
|
175
176
|
id: id,
|
176
177
|
resourceData: resourceData,
|
177
178
|
htElement: htElement
|
@@ -190,18 +191,30 @@ function useElementDetailManager(props) {
|
|
190
191
|
}
|
191
192
|
|
192
193
|
function getDetailContentById(id) {
|
193
|
-
var htElement =
|
194
|
+
var htElement = getHtElement(id);
|
194
195
|
return getDetailContent({
|
195
196
|
id: id,
|
196
197
|
htElement: htElement
|
197
198
|
});
|
198
199
|
}
|
199
200
|
|
200
|
-
|
201
|
+
function getHtElement(id) {
|
202
|
+
var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
|
203
|
+
return htElement;
|
204
|
+
}
|
205
|
+
|
206
|
+
var htElement = (0, _react.useMemo)(function () {
|
207
|
+
return visible ? getHtElement(id) : null;
|
208
|
+
}, [visible, id]);
|
209
|
+
var Content = visible && id ? getDetailContent({
|
210
|
+
id: id,
|
211
|
+
htElement: htElement
|
212
|
+
}) : null;
|
201
213
|
var elementDetailManager = {
|
202
214
|
visible: visible,
|
203
215
|
id: id,
|
204
216
|
resourceData: resourceData,
|
217
|
+
htElement: htElement,
|
205
218
|
Content: Content,
|
206
219
|
init: init,
|
207
220
|
destroy: destroy,
|
@@ -36,6 +36,7 @@ function ResourceDetailDrawer(props) {
|
|
36
36
|
});
|
37
37
|
var visible = detailManager.visible,
|
38
38
|
id = detailManager.id,
|
39
|
+
htElement = detailManager.htElement,
|
39
40
|
resourceData = detailManager.resourceData,
|
40
41
|
Content = detailManager.Content;
|
41
42
|
(0, _react.useEffect)(function () {
|
@@ -59,11 +60,10 @@ function ResourceDetailDrawer(props) {
|
|
59
60
|
onClose: detailManager.close
|
60
61
|
}, visible && /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
|
61
62
|
topo: topo,
|
62
|
-
visible: visible,
|
63
63
|
id: id,
|
64
|
+
htElement: htElement,
|
64
65
|
viewerProps: viewerProps,
|
65
|
-
onClose: detailManager.close
|
66
|
-
onChangeActive: detailManager.open
|
66
|
+
onClose: detailManager.close
|
67
67
|
})));
|
68
68
|
}
|
69
69
|
|
@@ -20,7 +20,7 @@ function ResourceDetailPlugin(props) {
|
|
20
20
|
var _topo$store$useModelS = topo.store.useModelState('topoMod'),
|
21
21
|
graphLoaded = _topo$store$useModelS.graphLoaded;
|
22
22
|
|
23
|
-
if (graphLoaded || hideResourceDetailDrawer) {
|
23
|
+
if (!graphLoaded || hideResourceDetailDrawer) {
|
24
24
|
return null;
|
25
25
|
}
|
26
26
|
|
@@ -0,0 +1,55 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
exports["default"] = void 0;
|
5
|
+
|
6
|
+
var _htElementUtils = require("../../utils/htElementUtils");
|
7
|
+
|
8
|
+
var _edgeGroupTagUtil = require("../utils/edgeGroupTagUtil");
|
9
|
+
|
10
|
+
var EdgeGroupTagTipBuilder = /*#__PURE__*/function () {
|
11
|
+
function EdgeGroupTagTipBuilder(amDisplay) {
|
12
|
+
this.amDisplay = void 0;
|
13
|
+
this.topo = void 0;
|
14
|
+
this.amDisplay = amDisplay;
|
15
|
+
this.topo = amDisplay.topo;
|
16
|
+
}
|
17
|
+
|
18
|
+
var _proto = EdgeGroupTagTipBuilder.prototype;
|
19
|
+
|
20
|
+
_proto.getExtElementTagsAndTips = function getExtElementTagsAndTips() {
|
21
|
+
var _this = this;
|
22
|
+
|
23
|
+
var topo = this.topo;
|
24
|
+
var dm = this.topo.getDataModel();
|
25
|
+
var edgeGroupsTagsTips = (0, _htElementUtils.getEdgeGroups)(dm).map(function (edgeGroup) {
|
26
|
+
var edge = edgeGroup.getEdges().getArray()[0]; // 获取配置的链路
|
27
|
+
|
28
|
+
var linkId = (0, _edgeGroupTagUtil.getEdgeGroupLinkIdConfig)(edge, topo);
|
29
|
+
var edgeGroupId = [edge.getSource().getId(), edge.getTarget().getId()];
|
30
|
+
var data = {
|
31
|
+
tags: [],
|
32
|
+
tips: []
|
33
|
+
};
|
34
|
+
|
35
|
+
if (linkId) {
|
36
|
+
data = _this.amDisplay.buildElementTagsTips(linkId);
|
37
|
+
}
|
38
|
+
|
39
|
+
return {
|
40
|
+
// edgeGroupId,
|
41
|
+
tags: data.tags,
|
42
|
+
tips: data.tips,
|
43
|
+
type: 'edgeGroup'
|
44
|
+
};
|
45
|
+
}).filter(function (item) {
|
46
|
+
return !!item;
|
47
|
+
});
|
48
|
+
return edgeGroupsTagsTips;
|
49
|
+
};
|
50
|
+
|
51
|
+
return EdgeGroupTagTipBuilder;
|
52
|
+
}();
|
53
|
+
|
54
|
+
exports["default"] = EdgeGroupTagTipBuilder;
|
55
|
+
;
|
@@ -0,0 +1,30 @@
|
|
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 _IpNodeTagsTipsBuilder = _interopRequireDefault(require("./IpNodeTagsTipsBuilder"));
|
9
|
+
|
10
|
+
var _EdgeGroupTagTipBuilder = _interopRequireDefault(require("./EdgeGroupTagTipBuilder"));
|
11
|
+
|
12
|
+
var ExtElementTagTipBuilder = /*#__PURE__*/function () {
|
13
|
+
function ExtElementTagTipBuilder(amDisplay) {
|
14
|
+
this.amDisplay = void 0;
|
15
|
+
this.topo = void 0;
|
16
|
+
this.amDisplay = amDisplay;
|
17
|
+
this.topo = amDisplay.topo;
|
18
|
+
}
|
19
|
+
|
20
|
+
var _proto = ExtElementTagTipBuilder.prototype;
|
21
|
+
|
22
|
+
_proto.getExtElementTagsAndTips = function getExtElementTagsAndTips() {
|
23
|
+
return [].concat(new _IpNodeTagsTipsBuilder["default"](this.amDisplay).getExtElementTagsAndTips(), new _EdgeGroupTagTipBuilder["default"](this.amDisplay).getExtElementTagsAndTips());
|
24
|
+
};
|
25
|
+
|
26
|
+
return ExtElementTagTipBuilder;
|
27
|
+
}();
|
28
|
+
|
29
|
+
exports["default"] = ExtElementTagTipBuilder;
|
30
|
+
;
|
@@ -27,7 +27,7 @@ var _store = _interopRequireDefault(require("../store"));
|
|
27
27
|
|
28
28
|
var _ResourceInfoDisplay = require("../../constants/ResourceInfoDisplay");
|
29
29
|
|
30
|
-
var
|
30
|
+
var _ExtElementTagTipBuilder = _interopRequireDefault(require("./ExtElementTagTipBuilder"));
|
31
31
|
|
32
32
|
var TopoCenter = /*#__PURE__*/function (_TopoApp) {
|
33
33
|
(0, _inheritsLoose2["default"])(TopoCenter, _TopoApp);
|
@@ -48,7 +48,7 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
|
|
48
48
|
getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
|
49
49
|
return _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG;
|
50
50
|
},
|
51
|
-
|
51
|
+
extElementTagTipBuilder: _ExtElementTagTipBuilder["default"]
|
52
52
|
}
|
53
53
|
})) || this;
|
54
54
|
_this.resourceConfig = null;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
exports.getEdgeGroupLinkIdConfig = getEdgeGroupLinkIdConfig;
|
5
|
+
|
6
|
+
// 获得连线组标注配置的链路id。无配置时取默认链路
|
7
|
+
function getEdgeGroupLinkIdConfig(edgeGroup, topo) {
|
8
|
+
var _links$;
|
9
|
+
|
10
|
+
// const { } = options
|
11
|
+
var sourceId = edgeGroup.getSource().getTag();
|
12
|
+
var targetId = edgeGroup.getTarget().getTag();
|
13
|
+
var links = topo.dataModel.getEdgesBetweenTwoNodes(sourceId, targetId);
|
14
|
+
return (_links$ = links[0]) === null || _links$ === void 0 ? void 0 : _links$.id;
|
15
|
+
}
|
@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
4
4
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports.getEdgeDatas = getEdgeDatas;
|
7
|
+
exports.getEdgeGroupAgents = getEdgeGroupAgents;
|
7
8
|
exports.getEdgeGroupByNodeTags = getEdgeGroupByNodeTags;
|
8
9
|
exports.getEdgeGroupByNodes = getEdgeGroupByNodes;
|
9
10
|
exports.getEdgeGroups = getEdgeGroups;
|
@@ -265,6 +266,10 @@ function getEdgeGroups(dataModel) {
|
|
265
266
|
return edgeGroups;
|
266
267
|
}
|
267
268
|
|
269
|
+
function getEdgeGroupAgents(dataModel) {
|
270
|
+
return getEdges(dataModel).filter(isEdgeGroupAgent);
|
271
|
+
}
|
272
|
+
|
268
273
|
function getEdgeDatas(dataModel) {
|
269
274
|
return getEdges(dataModel).map(function (element) {
|
270
275
|
var _element$getSource, _element$getTarget;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@riil-frontend/component-topology",
|
3
|
-
"version": "10.0.
|
3
|
+
"version": "10.0.23",
|
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@10.0.
|
119
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@10.0.23/build/index.html",
|
120
120
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
121
121
|
}
|