@riil-frontend/component-topology 13.0.0-dev.16 → 13.0.0-dev.17
Sign up to get free protection for your applications and to get access to all the features.
- package/build/index.js +12 -12
- package/es/core/hooks/useGraphAlarmDisplay.js +45 -18
- package/es/core/hooks/useLinkAlarmDisplay.js +163 -0
- package/es/core/hooks/useManageStatus.js +1 -0
- package/es/core/hooks/usePolling.js +78 -24
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/utils/linkUtils.js +1 -0
- package/es/core/utils/edgeUtil.js +1 -1
- package/es/core/utils/graphLinkUtil.js +1 -0
- package/lib/core/hooks/useGraphAlarmDisplay.js +46 -18
- package/lib/core/hooks/useLinkAlarmDisplay.js +175 -0
- package/lib/core/hooks/useManageStatus.js +1 -0
- package/lib/core/hooks/usePolling.js +73 -19
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/utils/linkUtils.js +1 -0
- package/lib/core/utils/edgeUtil.js +1 -1
- package/lib/core/utils/graphLinkUtil.js +1 -0
- package/package.json +2 -2
@@ -0,0 +1,175 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
exports["default"] = useLinkAlarmDisplay;
|
7
|
+
|
8
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
9
|
+
|
10
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
11
|
+
|
12
|
+
var _react = require("react");
|
13
|
+
|
14
|
+
var _ahooks = require("ahooks");
|
15
|
+
|
16
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
17
|
+
|
18
|
+
var _DictCache = _interopRequireDefault(require("../models/cache/DictCache"));
|
19
|
+
|
20
|
+
function getLinkDev(datas) {
|
21
|
+
console.log("datas------------------", datas);
|
22
|
+
var linkDevDoc = {};
|
23
|
+
var linkIds = datas.filter(function (item) {
|
24
|
+
return item.ciType === "network_link";
|
25
|
+
}).map(function (item) {
|
26
|
+
linkDevDoc[item.id] = [item.source, item.target];
|
27
|
+
return item.id;
|
28
|
+
});
|
29
|
+
return {
|
30
|
+
linkIds: linkIds,
|
31
|
+
linkDevDoc: linkDevDoc
|
32
|
+
};
|
33
|
+
}
|
34
|
+
|
35
|
+
function getlinkAlarmLevels(alarmList, resources) {
|
36
|
+
var _getLinkDev = getLinkDev(resources),
|
37
|
+
linkDevDoc = _getLinkDev.linkDevDoc;
|
38
|
+
|
39
|
+
console.log("linkAlarmLevels-----------1", linkDevDoc, alarmList);
|
40
|
+
|
41
|
+
if (!alarmList) {
|
42
|
+
return [];
|
43
|
+
}
|
44
|
+
|
45
|
+
var alarms = alarmList.filter(function (alarm) {
|
46
|
+
return alarm.obj.alertTypeCode === "availAlert";
|
47
|
+
}).map(function (item) {
|
48
|
+
return item.id;
|
49
|
+
});
|
50
|
+
return Object.keys(linkDevDoc).filter(function (item) {
|
51
|
+
return _lodash["default"].intersection(linkDevDoc[item], alarms).length > 0;
|
52
|
+
}).map(function (item) {
|
53
|
+
return {
|
54
|
+
id: item,
|
55
|
+
level: 1
|
56
|
+
};
|
57
|
+
});
|
58
|
+
;
|
59
|
+
}
|
60
|
+
/**
|
61
|
+
* 处理链路显示
|
62
|
+
* @param {*} props
|
63
|
+
* @returns
|
64
|
+
*/
|
65
|
+
|
66
|
+
|
67
|
+
function useLinkAlarmDisplay(props) {
|
68
|
+
var topo = props.topo,
|
69
|
+
resources = props.resources,
|
70
|
+
graphLoaded = props.graphLoaded,
|
71
|
+
alarmList = props.alarmList;
|
72
|
+
|
73
|
+
var _useState = (0, _react.useState)(getLinkDev(resources).linkIds),
|
74
|
+
linkIds = _useState[0],
|
75
|
+
setLinkIds = _useState[1];
|
76
|
+
|
77
|
+
var _useState2 = (0, _react.useState)([]),
|
78
|
+
linkRunStatus = _useState2[0],
|
79
|
+
setLinkRunStatus = _useState2[1];
|
80
|
+
|
81
|
+
var _useState3 = (0, _react.useState)(getLinkDev(resources).linkDevDoc),
|
82
|
+
linkDev = _useState3[0],
|
83
|
+
setLinkDev = _useState3[1];
|
84
|
+
|
85
|
+
console.log("alarmList----------sssss", alarmList);
|
86
|
+
(0, _react.useEffect)(function () {
|
87
|
+
var ids = getLinkDev(resources).linkIds;
|
88
|
+
|
89
|
+
if (linkIds.join(",") !== ids.join(",")) {
|
90
|
+
setLinkIds(ids);
|
91
|
+
}
|
92
|
+
}, [resources]);
|
93
|
+
|
94
|
+
function getLinkRunStatus(_x) {
|
95
|
+
return _getLinkRunStatus.apply(this, arguments);
|
96
|
+
} // 轮询hooks
|
97
|
+
|
98
|
+
|
99
|
+
function _getLinkRunStatus() {
|
100
|
+
_getLinkRunStatus = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(ids) {
|
101
|
+
var _yield$Promise$all, ciMetricsResult;
|
102
|
+
|
103
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
104
|
+
while (1) switch (_context.prev = _context.next) {
|
105
|
+
case 0:
|
106
|
+
if (ids.length) {
|
107
|
+
_context.next = 2;
|
108
|
+
break;
|
109
|
+
}
|
110
|
+
|
111
|
+
return _context.abrupt("return", []);
|
112
|
+
|
113
|
+
case 2:
|
114
|
+
_context.t0 = Promise;
|
115
|
+
_context.t1 = // 查询指标值
|
116
|
+
topo.serverApi.ciInfo.batchQueryCiInfo({
|
117
|
+
ciId: [],
|
118
|
+
codes: ["run_status", "remote_ping_status"],
|
119
|
+
relationId: ids.map(function (id) {
|
120
|
+
return {
|
121
|
+
ciId: id,
|
122
|
+
operation: "delete"
|
123
|
+
};
|
124
|
+
})
|
125
|
+
});
|
126
|
+
_context.next = 6;
|
127
|
+
return _DictCache["default"].init();
|
128
|
+
|
129
|
+
case 6:
|
130
|
+
_context.t2 = _context.sent;
|
131
|
+
_context.t3 = [_context.t1, _context.t2];
|
132
|
+
_context.next = 10;
|
133
|
+
return _context.t0.all.call(_context.t0, _context.t3);
|
134
|
+
|
135
|
+
case 10:
|
136
|
+
_yield$Promise$all = _context.sent;
|
137
|
+
ciMetricsResult = _yield$Promise$all[0];
|
138
|
+
console.log("getLinkRunStatus", ciMetricsResult);
|
139
|
+
return _context.abrupt("return", ciMetricsResult);
|
140
|
+
|
141
|
+
case 14:
|
142
|
+
case "end":
|
143
|
+
return _context.stop();
|
144
|
+
}
|
145
|
+
}, _callee);
|
146
|
+
}));
|
147
|
+
return _getLinkRunStatus.apply(this, arguments);
|
148
|
+
}
|
149
|
+
|
150
|
+
var _useRequest = (0, _ahooks.useRequest)(getLinkRunStatus, {
|
151
|
+
pollingInterval: 60 * 1000,
|
152
|
+
pollingWhenHidden: false,
|
153
|
+
// debounceInterval: 200,
|
154
|
+
manual: true,
|
155
|
+
onSuccess: function onSuccess(result) {
|
156
|
+
setLinkRunStatus(result.map(function (item) {
|
157
|
+
return {
|
158
|
+
id: item.id,
|
159
|
+
runStatus: item.metrics.run_status
|
160
|
+
};
|
161
|
+
}));
|
162
|
+
}
|
163
|
+
}),
|
164
|
+
run = _useRequest.run;
|
165
|
+
|
166
|
+
(0, _react.useEffect)(function () {
|
167
|
+
if (graphLoaded) {
|
168
|
+
run(linkIds);
|
169
|
+
}
|
170
|
+
}, [graphLoaded, linkIds]);
|
171
|
+
return {
|
172
|
+
linkRunStatus: linkRunStatus,
|
173
|
+
getlinkAlarmLevels: getlinkAlarmLevels
|
174
|
+
};
|
175
|
+
}
|
@@ -12,6 +12,7 @@ var _react = require("react");
|
|
12
12
|
var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
|
13
13
|
|
14
14
|
ht.Default.setImage('resource.subIcon.unMoniter', '/img/topo/alarmStatusIcon/未监控.svg');
|
15
|
+
ht.Default.setImage('resource.link.linkbreak', '/img/topo/link-break.svg');
|
15
16
|
/**
|
16
17
|
* 监听监控状态推送
|
17
18
|
* 节点、连线监控状态置灰
|
@@ -27,7 +27,7 @@ var _useCiAttributeChange = _interopRequireDefault(require("./useCiAttributeChan
|
|
27
27
|
|
28
28
|
var _useHtDataPropertyChangeListener = _interopRequireDefault(require("./ht/useHtDataPropertyChangeListener"));
|
29
29
|
|
30
|
-
var rlog = _loglevel["default"].getLogger(
|
30
|
+
var rlog = _loglevel["default"].getLogger("topo");
|
31
31
|
/**
|
32
32
|
* 轮询获取指标hooks
|
33
33
|
* @param {*} props
|
@@ -40,15 +40,15 @@ var usePolling = function usePolling(props) {
|
|
40
40
|
(0, _useCiAttributeChange["default"])({
|
41
41
|
topo: topo
|
42
42
|
});
|
43
|
-
var bizState = store.useModelState(
|
43
|
+
var bizState = store.useModelState("topoBizMod");
|
44
44
|
var resAndMetrics = bizState.resAndMetrics,
|
45
45
|
pollingSwitch = bizState.pollingSwitch;
|
46
|
-
var displayConfig = topo.store.useModelState(
|
47
|
-
var resourceOverviewState = topo.store.useModelState(
|
46
|
+
var displayConfig = topo.store.useModelState("displayConfig");
|
47
|
+
var resourceOverviewState = topo.store.useModelState("topoBaseInfoOverview");
|
48
48
|
var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList;
|
49
49
|
/**
|
50
50
|
* 查询拓扑图资源的属性指标
|
51
|
-
*
|
51
|
+
*
|
52
52
|
* @returns {array}
|
53
53
|
*/
|
54
54
|
|
@@ -56,7 +56,7 @@ var usePolling = function usePolling(props) {
|
|
56
56
|
return _fetchData.apply(this, arguments);
|
57
57
|
}
|
58
58
|
/**
|
59
|
-
*
|
59
|
+
*
|
60
60
|
* @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
|
61
61
|
*/
|
62
62
|
|
@@ -72,7 +72,7 @@ var usePolling = function usePolling(props) {
|
|
72
72
|
var ipv6 = data.attributeMap.ipv6_address;
|
73
73
|
|
74
74
|
if (!ipv6 && data.attributeMap.ipv6_address_list) {
|
75
|
-
ipv6 = (data.attributeMap.ipv6_address_list ||
|
75
|
+
ipv6 = (data.attributeMap.ipv6_address_list || "").split(",")[0];
|
76
76
|
}
|
77
77
|
|
78
78
|
return (0, _extends2["default"])({}, data, {
|
@@ -104,9 +104,62 @@ var usePolling = function usePolling(props) {
|
|
104
104
|
// 合并属性、指标
|
105
105
|
var _topo$dataModel$getDa = topo.dataModel.getData(),
|
106
106
|
nodes = _topo$dataModel$getDa.nodes,
|
107
|
-
links = _topo$dataModel$getDa.links;
|
108
|
-
|
109
|
-
|
107
|
+
links = _topo$dataModel$getDa.links; // console.log('fetchData-mergeData',ciMetricsResult, nodes, links)
|
108
|
+
// 判断通断状态
|
109
|
+
|
110
|
+
|
111
|
+
var breakLinks = links.filter(function (item) {
|
112
|
+
return item.ciType === "network_link";
|
113
|
+
}).map(function (link) {
|
114
|
+
console.log("fetchData-mergeData", link);
|
115
|
+
var breakFlag = false;
|
116
|
+
ciMetricsResult.forEach(function (item) {
|
117
|
+
if (item.id === link.id) {
|
118
|
+
if (item.metrics.hasOwnProperty("run_status")) {
|
119
|
+
if (item.metrics.run_status !== "1") {
|
120
|
+
breakFlag = true;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
if (link.attributes["network_link.is_crucial"] && item.metrics.hasOwnProperty("remote_ping_status")) {
|
125
|
+
if (item.metrics.remote_ping_status !== "1") {
|
126
|
+
breakFlag = true;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}
|
130
|
+
});
|
131
|
+
var element = topo.getDataModel().getDataByTag(link.id);
|
132
|
+
|
133
|
+
if (!element) {
|
134
|
+
return;
|
135
|
+
}
|
136
|
+
|
137
|
+
if (breakFlag) {
|
138
|
+
console.log("link.setNodeStyleIcon-breakFlag", element);
|
139
|
+
topo.getHtTopo().setNodeStyleIcon(element, {
|
140
|
+
styleIcon: "linkbreak",
|
141
|
+
position: 17,
|
142
|
+
icon: "resource.link.linkbreak"
|
143
|
+
});
|
144
|
+
topo.dataModel.updateData([(0, _extends2["default"])({}, link, {
|
145
|
+
breakState: true
|
146
|
+
})]);
|
147
|
+
element === null || element === void 0 ? void 0 : element.s("edge.color", "#C9CED2");
|
148
|
+
return link.id; //element.a('linkbreak',true);
|
149
|
+
} else {
|
150
|
+
// 恢复状态
|
151
|
+
element.removeStyleIcon("linkbreak");
|
152
|
+
topo.dataModel.updateData([(0, _extends2["default"])({}, link, {
|
153
|
+
breakState: false
|
154
|
+
})]);
|
155
|
+
element === null || element === void 0 ? void 0 : element.a('linkbreak', false);
|
156
|
+
return undefined; // topo.getHtTopo().setNodeStyleIcon(element, { styleIcon: 'linkbreak',position: 17, icon: 'resource.link.linkbreak' });
|
157
|
+
}
|
158
|
+
});
|
159
|
+
console.log('link-break', breakLinks, links);
|
160
|
+
return [].concat(nodes, links.filter(function (link) {
|
161
|
+
return !breakLinks.includes(link.id);
|
162
|
+
})).filter(function (item) {
|
110
163
|
return !!item.ciType;
|
111
164
|
}).map(function (ciData) {
|
112
165
|
var resultData = (0, _extends2["default"])({}, ciData, {
|
@@ -125,7 +178,7 @@ var usePolling = function usePolling(props) {
|
|
125
178
|
});
|
126
179
|
};
|
127
180
|
|
128
|
-
_topo$store$getModelS = topo.store.getModelState(
|
181
|
+
_topo$store$getModelS = topo.store.getModelState("topoBizMod").resAndMetrics, resIdsList = _topo$store$getModelS.resIdsList, nodeIdsList = _topo$store$getModelS.nodeIdsList; // rlog.debug('根据ci的id获取属性的值-getCiArrByIds', resIdsList, metrics);
|
129
182
|
// 无资源,不查询
|
130
183
|
|
131
184
|
if (resIdsList.length) {
|
@@ -140,7 +193,8 @@ var usePolling = function usePolling(props) {
|
|
140
193
|
codes = topo.attributeMetricDisplay.getResourceMetricCodes();
|
141
194
|
param = {
|
142
195
|
ciId: nodeIdsList,
|
143
|
-
codes: codes,
|
196
|
+
codes: [].concat(codes, ["run_status", "remote_ping_status"]),
|
197
|
+
// 判断链路通断状态
|
144
198
|
// 过滤掉不需要查询的
|
145
199
|
relationId: topo.attributeMetricDisplay.getEdges().map(function (edge) {
|
146
200
|
return {
|
@@ -230,7 +284,7 @@ var usePolling = function usePolling(props) {
|
|
230
284
|
|
231
285
|
(0, _react.useEffect)(function () {
|
232
286
|
if (topo.options.enableDefaultMetricLoader) {
|
233
|
-
rlog.debug(
|
287
|
+
rlog.debug("usePolling.useEffect: 开始轮询", {
|
234
288
|
pollingSwitch: pollingSwitch,
|
235
289
|
resIdsList: resIdsList,
|
236
290
|
resourceOverviewState: resourceOverviewState,
|
@@ -241,16 +295,16 @@ var usePolling = function usePolling(props) {
|
|
241
295
|
|
242
296
|
return function () {
|
243
297
|
if (loading) {
|
244
|
-
rlog.debug(
|
298
|
+
rlog.debug("usePolling.useEffect: 结束轮询", resAndMetrics);
|
245
299
|
stopPoll();
|
246
300
|
}
|
247
301
|
};
|
248
302
|
}, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]); // 属性变更监听更新
|
249
303
|
|
250
|
-
(0, _componentRiilEventEmitter.useCbbEventListener)(
|
251
|
-
name:
|
304
|
+
(0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
|
305
|
+
name: "topo",
|
252
306
|
onMessage: function onMessage(message) {
|
253
|
-
if (message.type ===
|
307
|
+
if (message.type === "attribute") {
|
254
308
|
var data = message.data;
|
255
309
|
}
|
256
310
|
}
|
@@ -261,8 +315,8 @@ var usePolling = function usePolling(props) {
|
|
261
315
|
onChange: function onChange(e) {
|
262
316
|
var property = e.property,
|
263
317
|
data = e.data;
|
264
|
-
var isGroupExpandedChanged = data instanceof ht.Group && property ===
|
265
|
-
var isEdgeExpandedChanged = data instanceof ht.Edge && property ===
|
318
|
+
var isGroupExpandedChanged = data instanceof ht.Group && property === "expanded";
|
319
|
+
var isEdgeExpandedChanged = data instanceof ht.Edge && property === "edge.expanded";
|
266
320
|
|
267
321
|
if (isGroupExpandedChanged || isEdgeExpandedChanged) {
|
268
322
|
topo.attributeMetricDisplay.updateTagsTips();
|
@@ -54,7 +54,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
|
|
54
54
|
var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
|
55
55
|
|
56
56
|
// eslint-disable-next-line no-undef
|
57
|
-
var version = typeof "13.0.0-dev.
|
57
|
+
var version = typeof "13.0.0-dev.17" === 'string' ? "13.0.0-dev.17" : null;
|
58
58
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
59
59
|
/**
|
60
60
|
* 拓扑显示和编辑
|
@@ -81,6 +81,7 @@ function mergeLinksData(links, linkCis, nodes, ciMap, interfaceDoc) {
|
|
81
81
|
var attributes = (0, _extends2["default"])({}, linkCi === null || linkCi === void 0 ? void 0 : linkCi.attributes); // 翻译
|
82
82
|
|
83
83
|
return (0, _extends2["default"])({}, link, {
|
84
|
+
breakState: false,
|
84
85
|
attributes: (0, _extends2["default"])({}, attributes, {
|
85
86
|
// 源/目的设备
|
86
87
|
"network_link.source_device_id_object": {
|
@@ -53,7 +53,7 @@ var updateEdgeExpanded = function updateEdgeExpanded(topo) {
|
|
53
53
|
|
54
54
|
_rlog["default"].debug("updateEdgeExpanded 折叠");
|
55
55
|
} else {
|
56
|
-
htTopo.toggleAllEdgeGroups(true);
|
56
|
+
//htTopo.toggleAllEdgeGroups(true);
|
57
57
|
(0, _linkUtils.showLinkByConfig)({
|
58
58
|
topo: topo,
|
59
59
|
showType: expandAllEdges,
|
@@ -16,6 +16,7 @@ function fixLink(topo) {
|
|
16
16
|
edges.forEach(function (edge) {
|
17
17
|
var source = edge.getSource();
|
18
18
|
var target = edge.getTarget();
|
19
|
+
console.log('fixLink', edge, source, target);
|
19
20
|
var linkData = linkDatas.find(function (data) {
|
20
21
|
return data.id === edge.getTag();
|
21
22
|
}); // TODO 判断两端互相切换
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@riil-frontend/component-topology",
|
3
|
-
"version": "13.0.0-dev.
|
3
|
+
"version": "13.0.0-dev.17",
|
4
4
|
"description": "拓扑",
|
5
5
|
"scripts": {
|
6
6
|
"start": "build-scripts start",
|
@@ -123,6 +123,6 @@
|
|
123
123
|
"access": "public"
|
124
124
|
},
|
125
125
|
"license": "MIT",
|
126
|
-
"homepage": "https://unpkg.com/@riil-frontend/component-topology@13.0.0-dev.
|
126
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@13.0.0-dev.17/build/index.html",
|
127
127
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
128
128
|
}
|