@riil-frontend/component-topology 8.0.10 → 9.0.0-a.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/1.js +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +17 -17
- package/es/core/event/topoEventListener.js +22 -0
- package/es/core/hooks/useAlarm.js +18 -12
- package/es/core/hooks/useTopoEventListener.js +4 -18
- package/es/core/models/Alarm.js +4 -13
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/store/models/viewer/resourceDetail.js +7 -0
- package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +10 -9
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +99 -6
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +5 -2
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +78 -3
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +50 -6
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js +80 -0
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js +25 -2
- package/lib/core/event/topoEventListener.js +27 -0
- package/lib/core/hooks/useAlarm.js +19 -12
- package/lib/core/hooks/useTopoEventListener.js +3 -17
- package/lib/core/models/Alarm.js +5 -16
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/store/models/viewer/resourceDetail.js +7 -0
- package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +10 -9
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +99 -5
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +5 -2
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +85 -3
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +49 -5
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js +86 -0
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js +25 -2
- package/package.json +3 -3
@@ -15,6 +15,7 @@ var useMetricModels = function useMetricModels(props) {
|
|
15
15
|
ciType = _props$data.ciType,
|
16
16
|
isMonite = props.isMonite,
|
17
17
|
ciTypeMeta = props.ciTypeMeta,
|
18
|
+
resourceData = props.resourceData,
|
18
19
|
topo = props.topo,
|
19
20
|
resourceOverviewProps = props.resourceOverviewProps;
|
20
21
|
|
@@ -48,7 +49,29 @@ var useMetricModels = function useMetricModels(props) {
|
|
48
49
|
return !!monitorMetrics.find(function (item) {
|
49
50
|
return item === m.code;
|
50
51
|
});
|
51
|
-
});
|
52
|
+
});
|
53
|
+
|
54
|
+
if (resourceData.attributes['network_link.is_crucial']) {
|
55
|
+
ciMonitorMetricModels.unshift({
|
56
|
+
changeValue: null,
|
57
|
+
code: "netDelayRatio",
|
58
|
+
id: "netDelayRatio",
|
59
|
+
isGoldMetric: true,
|
60
|
+
key: null,
|
61
|
+
name: "RTT时延",
|
62
|
+
unit: "ms"
|
63
|
+
});
|
64
|
+
ciMonitorMetricModels.unshift({
|
65
|
+
changeValue: null,
|
66
|
+
code: "retansRatio",
|
67
|
+
id: "retansRatio",
|
68
|
+
isGoldMetric: true,
|
69
|
+
key: null,
|
70
|
+
name: "重传率",
|
71
|
+
unit: "%"
|
72
|
+
});
|
73
|
+
} // 未监控不显示指标,临时在这里处理
|
74
|
+
|
52
75
|
|
53
76
|
if (!isMonite) {
|
54
77
|
ciMonitorMetricModels = [];
|
@@ -81,7 +104,7 @@ var useMetricModels = function useMetricModels(props) {
|
|
81
104
|
|
82
105
|
return _context.abrupt("return", displayMetricModels);
|
83
106
|
|
84
|
-
case
|
107
|
+
case 10:
|
85
108
|
case "end":
|
86
109
|
return _context.stop();
|
87
110
|
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
exports.createTopoEventListener = createTopoEventListener;
|
5
|
+
var n = 0;
|
6
|
+
|
7
|
+
function createTopoEventListener(type, onMessage) {
|
8
|
+
var eventListenerName = "topo_" + n++;
|
9
|
+
var EE = window.EE;
|
10
|
+
|
11
|
+
if (EE) {
|
12
|
+
EE.on('topo', eventListenerName, function (data) {
|
13
|
+
if (data.type === type) {
|
14
|
+
onMessage(data.data);
|
15
|
+
}
|
16
|
+
});
|
17
|
+
}
|
18
|
+
|
19
|
+
return {
|
20
|
+
eventListenerName: eventListenerName,
|
21
|
+
close: function close() {
|
22
|
+
if (EE) {
|
23
|
+
window.EE.removeListener('topo', eventListenerName);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
};
|
27
|
+
}
|
@@ -11,10 +11,10 @@ var _react = require("react");
|
|
11
11
|
|
12
12
|
var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
|
13
13
|
|
14
|
-
var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
|
15
|
-
|
16
14
|
var _useGraphAlarmDisplay = _interopRequireDefault(require("./useGraphAlarmDisplay"));
|
17
15
|
|
16
|
+
var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
|
17
|
+
|
18
18
|
/**
|
19
19
|
*
|
20
20
|
*
|
@@ -117,20 +117,27 @@ function useAlarm(options) {
|
|
117
117
|
received: data,
|
118
118
|
all: relateTopoAlarm
|
119
119
|
});
|
120
|
-
};
|
120
|
+
}; // 订阅消息
|
121
121
|
|
122
|
-
|
123
|
-
|
122
|
+
|
123
|
+
(0, _useTopoEventListener["default"])({
|
124
|
+
type: 'alarm',
|
124
125
|
onMessage: function onMessage(data) {
|
125
126
|
_rlog["default"].debug("Topoget--AlertMesage------------", topo, data);
|
126
127
|
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
128
|
+
topo.alarm.handleAlarmEvent(data);
|
129
|
+
}
|
130
|
+
});
|
131
|
+
(0, _useTopoEventListener["default"])({
|
132
|
+
type: 'risk',
|
133
|
+
onMessage: function onMessage(data) {
|
134
|
+
handleRiskData(data);
|
135
|
+
}
|
136
|
+
});
|
137
|
+
(0, _useTopoEventListener["default"])({
|
138
|
+
type: 'relateTopoAlarm',
|
139
|
+
onMessage: function onMessage(data) {
|
140
|
+
handleRelateTopoAlarm(data);
|
134
141
|
}
|
135
142
|
});
|
136
143
|
}
|
@@ -5,29 +5,15 @@ exports["default"] = useTopoEventListener;
|
|
5
5
|
|
6
6
|
var _react = require("react");
|
7
7
|
|
8
|
-
var
|
8
|
+
var _topoEventListener = require("../event/topoEventListener");
|
9
9
|
|
10
10
|
function useTopoEventListener(props) {
|
11
11
|
var type = props.type,
|
12
12
|
onMessage = props.onMessage;
|
13
|
-
var eventListenerName = (0, _react.useMemo)(function () {
|
14
|
-
return "topo_" + n++;
|
15
|
-
}, []);
|
16
13
|
(0, _react.useEffect)(function () {
|
17
|
-
var
|
18
|
-
|
19
|
-
if (EE) {
|
20
|
-
window.EE.on('topo', eventListenerName, function (data) {
|
21
|
-
if (data.type === type) {
|
22
|
-
onMessage(data.data);
|
23
|
-
}
|
24
|
-
});
|
25
|
-
}
|
26
|
-
|
14
|
+
var listener = (0, _topoEventListener.createTopoEventListener)(type, onMessage);
|
27
15
|
return function () {
|
28
|
-
|
29
|
-
window.EE.removeListener('topo', eventListenerName);
|
30
|
-
}
|
16
|
+
listener.close();
|
31
17
|
};
|
32
18
|
}, [type, onMessage]);
|
33
19
|
}
|
package/lib/core/models/Alarm.js
CHANGED
@@ -19,8 +19,8 @@ var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-em
|
|
19
19
|
|
20
20
|
var _utils = require("@riil-frontend/utils");
|
21
21
|
|
22
|
-
|
23
|
-
|
22
|
+
var _topoEventListener = require("../event/topoEventListener");
|
23
|
+
|
24
24
|
var Alarm = /*#__PURE__*/function () {
|
25
25
|
function Alarm() {
|
26
26
|
this.topo = void 0;
|
@@ -394,8 +394,6 @@ var Alarm = /*#__PURE__*/function () {
|
|
394
394
|
/*#__PURE__*/
|
395
395
|
function () {
|
396
396
|
var _openTopoAlarm = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(id) {
|
397
|
-
var _this2 = this;
|
398
|
-
|
399
397
|
var _this$getState2, alarmOpening, topoAlarmIsOpen, alarmDispatchers;
|
400
398
|
|
401
399
|
return _regenerator["default"].wrap(function _callee6$(_context6) {
|
@@ -427,20 +425,13 @@ var Alarm = /*#__PURE__*/function () {
|
|
427
425
|
|
428
426
|
case 10:
|
429
427
|
this.secretKey = _context6.sent;
|
430
|
-
|
431
428
|
// rlog.debug("openTopoAlarm 获取初始化告警-------------------开始");
|
432
|
-
_componentRiilEventEmitter.EE.on("topo", "topo", function (data, other) {
|
433
|
-
_rlog["default"].debug("openTopoAlarm 获取初始化告警------收到信息", data);
|
434
|
-
|
435
|
-
_this2.handleAlarmEvent(data);
|
436
|
-
});
|
437
|
-
|
438
429
|
this.updateState({
|
439
430
|
alarmOpening: false,
|
440
431
|
alarmIsOpened: true
|
441
432
|
});
|
442
433
|
|
443
|
-
case
|
434
|
+
case 12:
|
444
435
|
case "end":
|
445
436
|
return _context6.stop();
|
446
437
|
}
|
@@ -486,17 +477,15 @@ var Alarm = /*#__PURE__*/function () {
|
|
486
477
|
|
487
478
|
_rlog["default"].debug("useAlarm.useEffect 告警WebSocket 结束");
|
488
479
|
|
489
|
-
_componentRiilEventEmitter.EE.removeListener("topo", "topo");
|
490
|
-
|
491
480
|
this.updateState({
|
492
481
|
topoAlarmIsOpen: false,
|
493
482
|
alarmOpening: false,
|
494
483
|
alarmPanelIsOpen: false
|
495
484
|
});
|
496
|
-
_context7.next =
|
485
|
+
_context7.next = 8;
|
497
486
|
return this.topo.serverApi.closeTopoAlarm(id, this.secretKey);
|
498
487
|
|
499
|
-
case
|
488
|
+
case 8:
|
500
489
|
case "end":
|
501
490
|
return _context7.stop();
|
502
491
|
}
|
@@ -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 "
|
59
|
+
var version = typeof "9.0.0-a.10" === 'string' ? "9.0.0-a.10" : null;
|
60
60
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
61
61
|
/**
|
62
62
|
* 拓扑显示和编辑
|
@@ -98,9 +98,7 @@ function ResourceDetailDrawer(props) {
|
|
98
98
|
}, []); // 解决切换拓扑图隐藏概览
|
99
99
|
|
100
100
|
(0, _react.useEffect)(function () {
|
101
|
-
|
102
|
-
visible: false
|
103
|
-
}); // TODO 其他数据重置
|
101
|
+
close(); // TODO 其他数据重置
|
104
102
|
}, [topoId]);
|
105
103
|
|
106
104
|
function getUser() {
|
@@ -176,6 +174,12 @@ function ResourceDetailDrawer(props) {
|
|
176
174
|
}
|
177
175
|
}
|
178
176
|
|
177
|
+
function close() {
|
178
|
+
resourceDetailDispatchers.update({
|
179
|
+
visible: false
|
180
|
+
});
|
181
|
+
}
|
182
|
+
|
179
183
|
function init(data, targetType) {
|
180
184
|
// console.log('初始化基本信息', data, targetType);
|
181
185
|
var id = data.id,
|
@@ -236,7 +240,8 @@ function ResourceDetailDrawer(props) {
|
|
236
240
|
topo: topo,
|
237
241
|
userId: userId,
|
238
242
|
activeData: activeData,
|
239
|
-
resourceData: resourceData
|
243
|
+
resourceData: resourceData,
|
244
|
+
onClose: close
|
240
245
|
}));
|
241
246
|
};
|
242
247
|
|
@@ -250,11 +255,7 @@ function ResourceDetailDrawer(props) {
|
|
250
255
|
})),
|
251
256
|
width: 580,
|
252
257
|
hasMask: false,
|
253
|
-
onClose:
|
254
|
-
return resourceDetailDispatchers.update({
|
255
|
-
visible: false
|
256
|
-
});
|
257
|
-
}
|
258
|
+
onClose: close
|
258
259
|
}, visible && resourceData && renderContent()));
|
259
260
|
}
|
260
261
|
|
@@ -53,6 +53,8 @@ var _LinkTopoCard = _interopRequireDefault(require("./components/LinkTopo/LinkTo
|
|
53
53
|
|
54
54
|
var _EventsCard = _interopRequireDefault(require("./EventsCard"));
|
55
55
|
|
56
|
+
var _services2 = require("./components/LinkTopo/services");
|
57
|
+
|
56
58
|
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); }
|
57
59
|
|
58
60
|
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; }
|
@@ -166,7 +168,8 @@ function ResourceOverview(props) {
|
|
166
168
|
isMonite: data.manageStatus !== 0,
|
167
169
|
ciTypeMeta: ciTypeMeta,
|
168
170
|
topo: topo,
|
169
|
-
resourceOverviewProps: resourceOverviewProps
|
171
|
+
resourceOverviewProps: resourceOverviewProps,
|
172
|
+
resourceData: data
|
170
173
|
}),
|
171
174
|
monitorMetricModels = _useMetricModels.metricModels;
|
172
175
|
|
@@ -723,7 +726,7 @@ function ResourceOverview(props) {
|
|
723
726
|
_metricColChange = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8(col) {
|
724
727
|
var _col2, _col3;
|
725
728
|
|
726
|
-
var codes, endTime, params, _ref5, times, metricList;
|
729
|
+
var codes, endTime, params, _ref5, times, metricList, newMetricList, metricLists;
|
727
730
|
|
728
731
|
return _regenerator["default"].wrap(function _callee8$(_context8) {
|
729
732
|
while (1) {
|
@@ -771,8 +774,18 @@ function ResourceOverview(props) {
|
|
771
774
|
|
772
775
|
case 11:
|
773
776
|
metricList = _context8.sent;
|
777
|
+
_context8.next = 14;
|
778
|
+
return queryMetricList({
|
779
|
+
'name': data.attributes.display_name
|
780
|
+
}, {
|
781
|
+
'id': data.attributes.name
|
782
|
+
});
|
783
|
+
|
784
|
+
case 14:
|
785
|
+
newMetricList = _context8.sent;
|
786
|
+
metricLists = metricList.concat(getNewMetricList(newMetricList));
|
774
787
|
|
775
|
-
_rlog.rlog.debug('metricColChange',
|
788
|
+
_rlog.rlog.debug('metricColChange', metricLists, monitorMetricModels);
|
776
789
|
|
777
790
|
setMetric(col.map(function (item, key) {
|
778
791
|
return {
|
@@ -783,7 +796,7 @@ function ResourceOverview(props) {
|
|
783
796
|
metricItem: monitorMetricModels.find(function (m_item) {
|
784
797
|
return m_item.code === item.dataIndex;
|
785
798
|
}),
|
786
|
-
list:
|
799
|
+
list: metricLists.filter(function (m_item) {
|
787
800
|
return m_item.metricCode === item.dataIndex;
|
788
801
|
})
|
789
802
|
};
|
@@ -798,7 +811,7 @@ function ResourceOverview(props) {
|
|
798
811
|
}, 60000);
|
799
812
|
}
|
800
813
|
|
801
|
-
case
|
814
|
+
case 20:
|
802
815
|
case "end":
|
803
816
|
return _context8.stop();
|
804
817
|
}
|
@@ -808,6 +821,87 @@ function ResourceOverview(props) {
|
|
808
821
|
return _metricColChange.apply(this, arguments);
|
809
822
|
}
|
810
823
|
|
824
|
+
function queryMetricList(_x9, _x10) {
|
825
|
+
return _queryMetricList.apply(this, arguments);
|
826
|
+
}
|
827
|
+
|
828
|
+
function _queryMetricList() {
|
829
|
+
_queryMetricList = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(data, param) {
|
830
|
+
var checkMenus, isOpen, list;
|
831
|
+
return _regenerator["default"].wrap(function _callee9$(_context9) {
|
832
|
+
while (1) {
|
833
|
+
switch (_context9.prev = _context9.next) {
|
834
|
+
case 0:
|
835
|
+
if (!(ciType !== 'network_link')) {
|
836
|
+
_context9.next = 2;
|
837
|
+
break;
|
838
|
+
}
|
839
|
+
|
840
|
+
return _context9.abrupt("return", []);
|
841
|
+
|
842
|
+
case 2:
|
843
|
+
_context9.next = 4;
|
844
|
+
return (0, _services2.checkMenu)();
|
845
|
+
|
846
|
+
case 4:
|
847
|
+
checkMenus = _context9.sent;
|
848
|
+
|
849
|
+
if (!(checkMenus[0].passed == 'PASS')) {
|
850
|
+
_context9.next = 14;
|
851
|
+
break;
|
852
|
+
}
|
853
|
+
|
854
|
+
_context9.next = 8;
|
855
|
+
return (0, _services2.isOpenFlow)(data);
|
856
|
+
|
857
|
+
case 8:
|
858
|
+
isOpen = _context9.sent;
|
859
|
+
|
860
|
+
if (!isOpen) {
|
861
|
+
_context9.next = 14;
|
862
|
+
break;
|
863
|
+
}
|
864
|
+
|
865
|
+
_context9.next = 12;
|
866
|
+
return (0, _services2.queryLastestValue)(param);
|
867
|
+
|
868
|
+
case 12:
|
869
|
+
list = _context9.sent;
|
870
|
+
return _context9.abrupt("return", list);
|
871
|
+
|
872
|
+
case 14:
|
873
|
+
return _context9.abrupt("return", []);
|
874
|
+
|
875
|
+
case 15:
|
876
|
+
case "end":
|
877
|
+
return _context9.stop();
|
878
|
+
}
|
879
|
+
}
|
880
|
+
}, _callee9);
|
881
|
+
}));
|
882
|
+
return _queryMetricList.apply(this, arguments);
|
883
|
+
}
|
884
|
+
|
885
|
+
var getNewMetricList = function getNewMetricList(data) {
|
886
|
+
return [{
|
887
|
+
errorMsg: null,
|
888
|
+
mainCiId: "netDelayRatio",
|
889
|
+
metricCode: "netDelayRatio",
|
890
|
+
metricValue: data.upNetDelayRatio + ' ms' + '|' + data.downNetDelayRatio + ' ms',
|
891
|
+
subCiId: '',
|
892
|
+
subCiType: null,
|
893
|
+
mainCiType: null
|
894
|
+
}, {
|
895
|
+
errorMsg: null,
|
896
|
+
mainCiId: "retansRatio",
|
897
|
+
metricCode: "retansRatio",
|
898
|
+
metricValue: data.upRetransRatio + ' %' + '|' + data.downRetansRatio + ' %',
|
899
|
+
subCiId: '',
|
900
|
+
subCiType: null,
|
901
|
+
mainCiType: null
|
902
|
+
}];
|
903
|
+
};
|
904
|
+
|
811
905
|
var defaultCols = (0, _react.useMemo)(function () {
|
812
906
|
var baseInfo = [];
|
813
907
|
var keyIndicators = [];
|
@@ -19,7 +19,8 @@ var _LinkTopoModule = _interopRequireDefault(require("./LinkTopo.module.scss"));
|
|
19
19
|
|
20
20
|
function LinkTopo(props) {
|
21
21
|
var data = props.data,
|
22
|
-
linkMetricCodes = props.linkMetricCodes
|
22
|
+
linkMetricCodes = props.linkMetricCodes,
|
23
|
+
openFlow = props.openFlow;
|
23
24
|
var metricData = (0, _useMetricPolling["default"])({
|
24
25
|
linkCi: data,
|
25
26
|
linkMetricCodes: linkMetricCodes
|
@@ -32,5 +33,7 @@ function LinkTopo(props) {
|
|
32
33
|
,
|
33
34
|
isNarrow: true,
|
34
35
|
jumpto: (0, _componentTopologyUtils.getHistory)().push
|
35
|
-
}, metricData
|
36
|
+
}, metricData, {
|
37
|
+
openFlow: openFlow
|
38
|
+
})));
|
36
39
|
}
|
@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports["default"] = LinkTopoCard;
|
7
7
|
|
8
|
-
var
|
8
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
9
|
+
|
10
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
11
|
+
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
13
|
|
10
14
|
var _BlockBox = _interopRequireDefault(require("../../BlockBox"));
|
11
15
|
|
@@ -13,6 +17,12 @@ var _Configurator = _interopRequireDefault(require("../Configurator"));
|
|
13
17
|
|
14
18
|
var _LinkTopo = _interopRequireDefault(require("./LinkTopo"));
|
15
19
|
|
20
|
+
var _services = require("./services");
|
21
|
+
|
22
|
+
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); }
|
23
|
+
|
24
|
+
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; }
|
25
|
+
|
16
26
|
function LinkTopoCard(props) {
|
17
27
|
var _data$attributes;
|
18
28
|
|
@@ -25,7 +35,76 @@ function LinkTopoCard(props) {
|
|
25
35
|
|
26
36
|
var supportTemplates = (data === null || data === void 0 ? void 0 : (_data$attributes = data.attributes) === null || _data$attributes === void 0 ? void 0 : _data$attributes.support_templates) || ''; // 该资源监控模板
|
27
37
|
|
28
|
-
var isCrucial = data === null || data === void 0 ? void 0 : data.attributes['network_link.is_crucial'];
|
38
|
+
var isCrucial = data === null || data === void 0 ? void 0 : data.attributes['network_link.is_crucial']; //是不是关键链路
|
39
|
+
|
40
|
+
var _useState = (0, _react.useState)(null),
|
41
|
+
openFlow = _useState[0],
|
42
|
+
setOpenFlow = _useState[1];
|
43
|
+
|
44
|
+
var analysisUrl = "../../default/trafficControl/linkConfigure?id=" + data.attributes.name + "&num=0";
|
45
|
+
var linkDetailsUrl = "/default/pagecenter/linkDetail/view/" + data.id + "?resId=" + data.id + "&domainCode=network&title=" + data.attributes.name + "&ciCode=network_link&tabByComType=uicbb-res-crucial-link-flow";
|
46
|
+
|
47
|
+
var isOpenFlows = /*#__PURE__*/function () {
|
48
|
+
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
49
|
+
var checkMenus, isOpen;
|
50
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
51
|
+
while (1) {
|
52
|
+
switch (_context.prev = _context.next) {
|
53
|
+
case 0:
|
54
|
+
_context.next = 2;
|
55
|
+
return (0, _services.checkMenu)();
|
56
|
+
|
57
|
+
case 2:
|
58
|
+
checkMenus = _context.sent;
|
59
|
+
|
60
|
+
if (!(checkMenus[0].passed == 'PASS' && isCrucial)) {
|
61
|
+
_context.next = 10;
|
62
|
+
break;
|
63
|
+
}
|
64
|
+
|
65
|
+
_context.next = 6;
|
66
|
+
return (0, _services.isOpenFlow)({
|
67
|
+
'name': data.attributes.display_name
|
68
|
+
});
|
69
|
+
|
70
|
+
case 6:
|
71
|
+
isOpen = _context.sent;
|
72
|
+
|
73
|
+
//判断是不是有流量分析
|
74
|
+
if (isOpen) {
|
75
|
+
setOpenFlow({
|
76
|
+
name: '查看流量构成',
|
77
|
+
url: linkDetailsUrl
|
78
|
+
});
|
79
|
+
} else {
|
80
|
+
setOpenFlow({
|
81
|
+
name: '配置流量分析',
|
82
|
+
url: analysisUrl
|
83
|
+
});
|
84
|
+
}
|
85
|
+
|
86
|
+
_context.next = 11;
|
87
|
+
break;
|
88
|
+
|
89
|
+
case 10:
|
90
|
+
setOpenFlow(null);
|
91
|
+
|
92
|
+
case 11:
|
93
|
+
case "end":
|
94
|
+
return _context.stop();
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}, _callee);
|
98
|
+
}));
|
99
|
+
|
100
|
+
return function isOpenFlows() {
|
101
|
+
return _ref.apply(this, arguments);
|
102
|
+
};
|
103
|
+
}();
|
104
|
+
|
105
|
+
(0, _react.useEffect)(function () {
|
106
|
+
isOpenFlows();
|
107
|
+
}, [data]);
|
29
108
|
return /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
|
30
109
|
headerTitle: "\u8FD0\u884C\u60C5\u51B5",
|
31
110
|
headerExtra: /*#__PURE__*/_react["default"].createElement(_Configurator["default"], {
|
@@ -40,6 +119,9 @@ function LinkTopoCard(props) {
|
|
40
119
|
})
|
41
120
|
}, /*#__PURE__*/_react["default"].createElement(_LinkTopo["default"], {
|
42
121
|
data: data,
|
43
|
-
linkMetricCodes: metricCodes
|
122
|
+
linkMetricCodes: openFlow && openFlow.name == '查看流量构成' ? metricCodes : metricCodes.filter(function (i) {
|
123
|
+
return i != 'netDelayRatio' && i != 'retansRatio';
|
124
|
+
}),
|
125
|
+
openFlow: openFlow
|
44
126
|
}));
|
45
127
|
}
|
@@ -24,17 +24,55 @@ function useMetricPolling(_ref) {
|
|
24
24
|
var linkCi = _ref.linkCi,
|
25
25
|
linkMetricCodes = _ref.linkMetricCodes;
|
26
26
|
var linkId = linkCi.id;
|
27
|
+
var arr = ['netDelayRatio', 'retansRatio'];
|
28
|
+
var oldCodes = [];
|
29
|
+
var newCodes = [];
|
30
|
+
linkMetricCodes.map(function (item) {
|
31
|
+
arr.indexOf(item) > -1 ? newCodes.push(item) : oldCodes.push(item);
|
32
|
+
});
|
27
33
|
|
28
34
|
var _useState = (0, _react.useState)({
|
29
35
|
sourceMetrics: null,
|
30
36
|
destinationMetrics: null,
|
31
37
|
// 链路指标列表
|
32
38
|
linkMetrics: [],
|
33
|
-
linkMetricsTs: null
|
39
|
+
linkMetricsTs: null,
|
40
|
+
linkOther: []
|
34
41
|
}),
|
35
42
|
data = _useState[0],
|
36
|
-
setData = _useState[1];
|
43
|
+
setData = _useState[1];
|
37
44
|
|
45
|
+
var queryLastestValues = (0, _ahooks.useRequest)(_services.queryLastestValue, {
|
46
|
+
pollingInterval: 1000 * 15,
|
47
|
+
pollingWhenHidden: false,
|
48
|
+
debounceInterval: 200,
|
49
|
+
manual: true,
|
50
|
+
onSuccess: function onSuccess(result) {
|
51
|
+
var datas = {
|
52
|
+
linkOther: []
|
53
|
+
};
|
54
|
+
|
55
|
+
if (newCodes.includes('netDelayRatio')) {
|
56
|
+
datas.linkOther.push({
|
57
|
+
'code': 'netDelayRatio',
|
58
|
+
'name': '下行RTT时延',
|
59
|
+
'ts': result.time,
|
60
|
+
'value': result.upNetDelayRatio + ' ms' + '|' + result.downNetDelayRatio + ' ms'
|
61
|
+
});
|
62
|
+
}
|
63
|
+
|
64
|
+
if (newCodes.includes('retansRatio')) {
|
65
|
+
datas.linkOther.push({
|
66
|
+
'code': 'retansRatio',
|
67
|
+
'name': '重传率',
|
68
|
+
'ts': result.time,
|
69
|
+
'value': result.upRetransRatio + ' %' + '|' + result.downRetansRatio + ' %'
|
70
|
+
});
|
71
|
+
}
|
72
|
+
|
73
|
+
setData((0, _extends2["default"])({}, data, datas));
|
74
|
+
}
|
75
|
+
}); // 轮询hooks
|
38
76
|
|
39
77
|
var queryLinkMetricsRequest = (0, _ahooks.useRequest)(_services.queryLinkLatestMetrics, {
|
40
78
|
pollingInterval: 60 * 1000,
|
@@ -58,17 +96,23 @@ function useMetricPolling(_ref) {
|
|
58
96
|
_rlog["default"].info('链路拓扑指标轮询 queryInterfaceMetricsRequest 结果', result);
|
59
97
|
}
|
60
98
|
});
|
61
|
-
var linkMetricCodesStr =
|
99
|
+
var linkMetricCodesStr = oldCodes.map(function (item) {
|
62
100
|
return item;
|
63
101
|
}).sort().join(',');
|
64
102
|
(0, _react.useEffect)(function () {
|
65
103
|
if (linkId) {
|
66
104
|
_rlog["default"].info('链路拓扑指标轮询 切换', {
|
67
105
|
linkCi: linkCi,
|
68
|
-
|
106
|
+
oldCodes: oldCodes
|
69
107
|
});
|
70
108
|
|
71
|
-
queryLinkMetricsRequest.run(linkCi,
|
109
|
+
queryLinkMetricsRequest.run(linkCi, oldCodes);
|
110
|
+
|
111
|
+
if (newCodes.length > 0) {
|
112
|
+
queryLastestValues.run({
|
113
|
+
'id': linkCi.attributes.name
|
114
|
+
});
|
115
|
+
}
|
72
116
|
}
|
73
117
|
|
74
118
|
return function () {};
|