@riil-frontend/component-topology 9.0.0-a.1 → 9.0.0-a.11

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.
Files changed (59) hide show
  1. package/build/index.css +1 -1
  2. package/build/index.js +7 -7
  3. package/es/components/VerticalIconTab/VerticalIconTab.module.scss +11 -5
  4. package/es/core/editor/components/BackgroundView/index.module.scss +3 -0
  5. package/es/core/editor/components/Sidebar/Sidebar.module.scss +7 -7
  6. package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss +1 -0
  7. package/es/core/editor/components/Sidebar/views/ComponentPanel.js +1 -1
  8. package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js +2 -1
  9. package/es/core/editor/components/Sidebar/views/LinkPanel.js +1 -1
  10. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +1 -1
  11. package/es/core/event/topoEventListener.js +22 -0
  12. package/es/core/hooks/useAlarm.js +18 -12
  13. package/es/core/hooks/useCiAttributeChange.js +60 -0
  14. package/es/core/hooks/usePolling.js +163 -60
  15. package/es/core/hooks/useTopoEventListener.js +4 -18
  16. package/es/core/models/Alarm.js +4 -13
  17. package/es/core/models/AttributeMetricDisplay.js +44 -127
  18. package/es/core/models/TopoApp.js +4 -2
  19. package/es/core/models/attributeFormatter/index.js +5 -6
  20. package/es/core/models/cache/CiCache.d.ts +18 -0
  21. package/es/core/models/cache/CiCache.js +78 -0
  22. package/es/core/models/utils/linkUtils.js +10 -13
  23. package/es/core/store/models/topoBizMod.js +4 -0
  24. package/es/core/store/models/viewer/resourceDetail.js +7 -0
  25. package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +10 -9
  26. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +100 -46
  27. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +8 -6
  28. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +8 -26
  29. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js +13 -52
  30. package/es/style.js +1 -1
  31. package/lib/components/VerticalIconTab/VerticalIconTab.module.scss +11 -5
  32. package/lib/core/editor/components/BackgroundView/index.module.scss +3 -0
  33. package/lib/core/editor/components/Sidebar/Sidebar.module.scss +7 -7
  34. package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss +1 -0
  35. package/lib/core/editor/components/Sidebar/views/ComponentPanel.js +1 -1
  36. package/lib/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js +2 -1
  37. package/lib/core/editor/components/Sidebar/views/LinkPanel.js +1 -1
  38. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +1 -1
  39. package/lib/core/event/topoEventListener.js +27 -0
  40. package/lib/core/hooks/useAlarm.js +19 -12
  41. package/lib/core/hooks/useCiAttributeChange.js +70 -0
  42. package/lib/core/hooks/usePolling.js +166 -61
  43. package/lib/core/hooks/useTopoEventListener.js +3 -17
  44. package/lib/core/models/Alarm.js +5 -16
  45. package/lib/core/models/AttributeMetricDisplay.js +44 -126
  46. package/lib/core/models/TopoApp.js +4 -1
  47. package/lib/core/models/attributeFormatter/index.js +5 -7
  48. package/lib/core/models/cache/CiCache.d.ts +18 -0
  49. package/lib/core/models/cache/CiCache.js +89 -0
  50. package/lib/core/models/utils/linkUtils.js +10 -12
  51. package/lib/core/store/models/topoBizMod.js +4 -0
  52. package/lib/core/store/models/viewer/resourceDetail.js +7 -0
  53. package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +10 -9
  54. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +99 -45
  55. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +8 -6
  56. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +8 -26
  57. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js +13 -53
  58. package/lib/style.js +1 -1
  59. package/package.json +3 -3
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ exports.__esModule = true;
6
+ exports["default"] = useCiAttributeChange;
7
+
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+
10
+ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
11
+
12
+ var _react = require("react");
13
+
14
+ var _CiCache = _interopRequireDefault(require("../models/cache/CiCache"));
15
+
16
+ var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
17
+
18
+ function mergeData(cis, ciChangeData) {
19
+ if (!cis.find(function (item) {
20
+ return item.id === ciChangeData.id;
21
+ })) {
22
+ return cis;
23
+ }
24
+
25
+ return cis.map(function (ci) {
26
+ if (ci.id === ciChangeData.id) {
27
+ return (0, _extends2["default"])({}, ci, {
28
+ attributes: (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes)
29
+ });
30
+ }
31
+
32
+ return ci;
33
+ });
34
+ }
35
+ /**
36
+ * 监听ci属性变更
37
+ *
38
+ * @param {*} props
39
+ */
40
+
41
+
42
+ function useCiAttributeChange(props) {
43
+ var topo = props.topo;
44
+ (0, _useTopoEventListener["default"])({
45
+ type: 'attribute',
46
+ onMessage: function onMessage(ciChangeData) {
47
+ // 更新拓扑数据
48
+ var topoData = topo.store.getModelState('topoMod').data;
49
+
50
+ if (topoData) {
51
+ var newData = (0, _extends2["default"])({}, topoData, {
52
+ nodes: mergeData(topoData.nodes, ciChangeData),
53
+ links: mergeData(topoData.links, ciChangeData),
54
+ linkGroups: mergeData(topoData.linkGroups, ciChangeData)
55
+ });
56
+ var topoDispatchers = topo.store.getModelDispatchers('topoMod');
57
+ topoDispatchers.update({
58
+ data: newData
59
+ });
60
+ } // 更新缓存
61
+
62
+
63
+ var ci = _CiCache["default"].getCi(ciChangeData.id);
64
+
65
+ if (ci) {
66
+ ci.attributes = (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes);
67
+ }
68
+ }
69
+ });
70
+ }
@@ -7,10 +7,10 @@ exports["default"] = void 0;
7
7
 
8
8
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
9
9
 
10
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
-
12
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
11
 
12
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
13
+
14
14
  var _react = require("react");
15
15
 
16
16
  var _ahooks = require("ahooks");
@@ -19,6 +19,14 @@ var _lodash = _interopRequireDefault(require("lodash"));
19
19
 
20
20
  var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
21
21
 
22
+ var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
23
+
24
+ var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
25
+
26
+ var _DictCache = _interopRequireDefault(require("../models/cache/DictCache"));
27
+
28
+ var _useCiAttributeChange = _interopRequireDefault(require("./useCiAttributeChange"));
29
+
22
30
  /**
23
31
  * 轮询获取指标hooks
24
32
  * @param {*} props
@@ -26,12 +34,156 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
26
34
  var usePolling = function usePolling(props) {
27
35
  var topo = props.topo;
28
36
  var store = topo.store;
37
+ (0, _useCiAttributeChange["default"])({
38
+ topo: topo
39
+ });
29
40
  var bizState = store.useModelState('topoBizMod');
30
41
  var resAndMetrics = bizState.resAndMetrics,
31
42
  pollingSwitch = bizState.pollingSwitch;
32
43
  var displayConfig = topo.store.useModelState('displayConfig');
33
44
  var resourceOverviewState = topo.store.useModelState('topoBaseInfoOverview');
34
- var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList; // 轮询hooks
45
+ var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList;
46
+ /**
47
+ * 查询拓扑图资源的属性指标
48
+ *
49
+ * @returns {array}
50
+ */
51
+
52
+ function fetchData() {
53
+ return _fetchData.apply(this, arguments);
54
+ }
55
+ /**
56
+ *
57
+ * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
58
+ */
59
+
60
+
61
+ function _fetchData() {
62
+ _fetchData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
63
+ var _topo$store$getModelS, resIdsList, nodeIdsList, codes, param, _yield$Promise$all, ciMetricResult, transformLinkData;
64
+
65
+ return _regenerator["default"].wrap(function _callee$(_context) {
66
+ while (1) {
67
+ switch (_context.prev = _context.next) {
68
+ case 0:
69
+ transformLinkData = function _transformLinkData(data) {
70
+ var _topo$dataModel$getDa = topo.dataModel.getData(),
71
+ links = _topo$dataModel$getDa.links,
72
+ linkGroups = _topo$dataModel$getDa.linkGroups;
73
+
74
+ var link = [].concat(links, linkGroups).find(function (item) {
75
+ return item.id === data.id;
76
+ });
77
+
78
+ if (!link) {
79
+ return data;
80
+ }
81
+
82
+ return (0, _extends2["default"])({}, data, {
83
+ attributeMap: link.attributes || {}
84
+ });
85
+ };
86
+
87
+ _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);
88
+ // 无资源,不查询
89
+
90
+ if (resIdsList.length) {
91
+ _context.next = 4;
92
+ break;
93
+ }
94
+
95
+ return _context.abrupt("return", []);
96
+
97
+ case 4:
98
+ // 需要查询的指标列表
99
+ codes = topo.attributeMetricDisplay.getResourceMetricCodes();
100
+ param = {
101
+ ciId: nodeIdsList,
102
+ codes: codes,
103
+ // 过滤掉不需要查询的
104
+ relationId: topo.attributeMetricDisplay.getEdges().map(function (edge) {
105
+ return {
106
+ ciId: edge.id,
107
+ operation: edge.operation
108
+ };
109
+ })
110
+ };
111
+ _context.t0 = Promise;
112
+ _context.t1 = // 查询指标值
113
+ _topo["default"].ciInfo.batchQueryCiInfo(param);
114
+ _context.next = 10;
115
+ return _DictCache["default"].init();
116
+
117
+ case 10:
118
+ _context.t2 = _context.sent;
119
+ _context.t3 = [_context.t1, _context.t2];
120
+ _context.next = 14;
121
+ return _context.t0.all.call(_context.t0, _context.t3);
122
+
123
+ case 14:
124
+ _yield$Promise$all = _context.sent;
125
+ ciMetricResult = _yield$Promise$all[0];
126
+ return _context.abrupt("return", ciMetricResult.map(function (data) {
127
+ var ci = topo.dataModel.getDataById(data.id);
128
+ var resultData = (0, _extends2["default"])({}, data, ci, {
129
+ attributeMap: (0, _extends2["default"])({}, (ci === null || ci === void 0 ? void 0 : ci.attributes) || {})
130
+ });
131
+ resultData = transformLinkData(resultData); // 特殊处理:ipv6 从ipv6_address_list取第一个
132
+
133
+ // 特殊处理:ipv6 从ipv6_address_list取第一个
134
+ if (resultData.attributeMap.ipv6_address_list && !resultData.attributeMap.ipv6_address) {
135
+ resultData.attributeMap.ipv6_address = (resultData.attributeMap.ipv6_address_list || '').split(',')[0];
136
+ }
137
+
138
+ return resultData;
139
+ }));
140
+
141
+ case 17:
142
+ case "end":
143
+ return _context.stop();
144
+ }
145
+ }
146
+ }, _callee);
147
+ }));
148
+ return _fetchData.apply(this, arguments);
149
+ }
150
+
151
+ function refresh() {
152
+ return _refresh.apply(this, arguments);
153
+ } // 轮询hooks
154
+
155
+
156
+ function _refresh() {
157
+ _refresh = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
158
+ var data;
159
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
160
+ while (1) {
161
+ switch (_context2.prev = _context2.next) {
162
+ case 0:
163
+ if (!(!pollingSwitch || !(resAndMetrics !== null && resAndMetrics !== void 0 && resAndMetrics.resIdsList.length))) {
164
+ _context2.next = 2;
165
+ break;
166
+ }
167
+
168
+ return _context2.abrupt("return");
169
+
170
+ case 2:
171
+ _context2.next = 4;
172
+ return fetchData();
173
+
174
+ case 4:
175
+ data = _context2.sent;
176
+ return _context2.abrupt("return", data);
177
+
178
+ case 6:
179
+ case "end":
180
+ return _context2.stop();
181
+ }
182
+ }
183
+ }, _callee2);
184
+ }));
185
+ return _refresh.apply(this, arguments);
186
+ }
35
187
 
36
188
  var _useRequest = (0, _ahooks.useRequest)(refresh, {
37
189
  pollingInterval: 60 * 1000,
@@ -42,30 +194,13 @@ var usePolling = function usePolling(props) {
42
194
  if (result) {
43
195
  var dd = _lodash["default"].cloneDeep(result);
44
196
 
45
- topo.attributeMetricDisplay.loadAttributeAndMetric(dd);
197
+ topo.attributeMetricDisplay.loadData(dd);
46
198
  }
47
199
  }
48
200
  }),
49
201
  loading = _useRequest.loading,
50
202
  startPoll = _useRequest.run,
51
- stopPoll = _useRequest.cancel;
52
-
53
- function convertData(data) {
54
- return data.map(function (item) {
55
- return (0, _extends2["default"])({}, item, {
56
- attributes: convertAttrMap(item.attributes),
57
- metrics: convertAttrMap(item.metrics)
58
- });
59
- });
60
- }
61
-
62
- function convertAttrMap(attrs) {
63
- var map = {};
64
- attrs.forEach(function (attr) {
65
- map[attr.code] = attr.value;
66
- });
67
- return map;
68
- } // 需要刷新数据的场景:显示模式、资源变化、配置变化、开关开启、概览
203
+ stopPoll = _useRequest.cancel; // 需要刷新数据的场景:显示模式、资源变化、配置变化、开关开启、概览
69
204
 
70
205
 
71
206
  (0, _react.useEffect)(function () {
@@ -87,46 +222,16 @@ var usePolling = function usePolling(props) {
87
222
  stopPoll();
88
223
  }
89
224
  };
90
- }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
91
- /**
92
- *
93
- * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
94
- */
95
-
96
- function refresh() {
97
- return _refresh.apply(this, arguments);
98
- }
99
-
100
- function _refresh() {
101
- _refresh = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
102
- return _regenerator["default"].wrap(function _callee$(_context) {
103
- while (1) {
104
- switch (_context.prev = _context.next) {
105
- case 0:
106
- if (!(!pollingSwitch || !(resAndMetrics !== null && resAndMetrics !== void 0 && resAndMetrics.resIdsList.length))) {
107
- _context.next = 2;
108
- break;
109
- }
110
-
111
- return _context.abrupt("return");
112
-
113
- case 2:
114
- _context.next = 4;
115
- return topo.attributeMetricDisplay.fetchData();
116
-
117
- case 4:
118
- return _context.abrupt("return", _context.sent);
119
-
120
- case 5:
121
- case "end":
122
- return _context.stop();
123
- }
124
- }
125
- }, _callee);
126
- }));
127
- return _refresh.apply(this, arguments);
128
- }
225
+ }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]); // 属性变更监听更新
129
226
 
227
+ (0, _componentRiilEventEmitter.useCbbEventListener)('topo', {
228
+ name: 'topo',
229
+ onMessage: function onMessage(message) {
230
+ if (message.type === 'attribute') {
231
+ var data = message.data;
232
+ }
233
+ }
234
+ });
130
235
  return {
131
236
  startPoll: startPoll,
132
237
  stopPoll: stopPoll
@@ -5,29 +5,15 @@ exports["default"] = useTopoEventListener;
5
5
 
6
6
  var _react = require("react");
7
7
 
8
- var n = 0;
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 EE = window.EE;
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
- if (EE) {
29
- window.EE.removeListener('topo', eventListenerName);
30
- }
16
+ listener.close();
31
17
  };
32
18
  }, [type, onMessage]);
33
19
  }
@@ -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
- // import moment from "moment";
23
- // import { alarmListDemo } from "./mocks";
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 13:
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 = 9;
485
+ _context7.next = 8;
497
486
  return this.topo.serverApi.closeTopoAlarm(id, this.secretKey);
498
487
 
499
- case 9:
488
+ case 8:
500
489
  case "end":
501
490
  return _context7.stop();
502
491
  }