@riil-frontend/component-topology 13.0.0-dev.7 → 13.0.0-dev.9
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 +29 -29
- package/es/components/ColorPanel/index.js +68 -58
- package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +10 -4
- package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +21 -15
- package/es/core/hooks/useResourceConfig.js +1 -2
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/topoData.js +3 -4
- package/es/core/store/models/topoConfig.js +6 -7
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +4 -2
- package/es/networkTopo/services/topo/basic.js +20 -17
- package/es/networkTopo/utils/__tests__/relateTopoData.js +73 -1
- package/es/networkTopo/utils/exitLinkUtil.js +2 -2
- package/es/networkTopo/utils/relateTopoDataUtil.js +42 -5
- package/es/utils/ResourceConfigUtil.js +1 -16
- package/lib/components/ColorPanel/index.js +71 -59
- package/lib/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +10 -4
- package/lib/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +21 -15
- package/lib/core/hooks/useResourceConfig.js +1 -2
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/topoData.js +3 -4
- package/lib/core/store/models/topoConfig.js +6 -7
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +6 -2
- package/lib/networkTopo/services/topo/basic.js +20 -19
- package/lib/networkTopo/utils/__tests__/relateTopoData.js +73 -1
- package/lib/networkTopo/utils/exitLinkUtil.js +2 -2
- package/lib/networkTopo/utils/relateTopoDataUtil.js +44 -5
- package/lib/utils/ResourceConfigUtil.js +1 -16
- package/package.json +2 -2
|
@@ -1,14 +1,68 @@
|
|
|
1
1
|
import _Balloon from "@alifd/next/es/balloon";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
3
|
|
|
3
4
|
/* eslint-disable eqeqeq */
|
|
4
5
|
|
|
5
6
|
/* eslint-disable jsx-a11y/alt-text */
|
|
6
7
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
7
9
|
import classnames from 'classnames';
|
|
8
10
|
import Color from 'color';
|
|
9
11
|
import { SketchPicker } from 'react-color';
|
|
10
12
|
import ColorBlock from "./components/ColorBlock";
|
|
11
13
|
import styles from "./index.module.scss";
|
|
14
|
+
var defaultColorList = [{
|
|
15
|
+
color: 'rgba(255, 255, 255, 1)',
|
|
16
|
+
borderColor: 'rgba(219, 219, 219, 1)'
|
|
17
|
+
}, {
|
|
18
|
+
color: 'rgba(245, 245, 245, 1)',
|
|
19
|
+
borderColor: 'rgba(208, 208, 208, 1)'
|
|
20
|
+
}, {
|
|
21
|
+
color: 'rgba(230, 230, 230, 1)',
|
|
22
|
+
borderColor: 'rgba(196, 196, 196, 1)'
|
|
23
|
+
}, {
|
|
24
|
+
color: 'rgba(168, 168, 168, 1)',
|
|
25
|
+
borderColor: 'rgba(146, 146, 146, 1)'
|
|
26
|
+
}, {
|
|
27
|
+
color: 'rgba(97, 97, 97, 1)',
|
|
28
|
+
borderColor: 'rgba(85, 85, 85, 1)'
|
|
29
|
+
}, {
|
|
30
|
+
color: 'rgba(49, 49, 49, 1)',
|
|
31
|
+
borderColor: 'rgba(43, 43, 43, 1)'
|
|
32
|
+
}, {
|
|
33
|
+
color: 'rgba(251, 115, 80, 1)',
|
|
34
|
+
borderColor: 'rgba(213, 98, 69, 1)'
|
|
35
|
+
}, {
|
|
36
|
+
color: 'rgba(255, 166, 41, 1)',
|
|
37
|
+
borderColor: 'rgba(219, 144, 45, 1)'
|
|
38
|
+
}, {
|
|
39
|
+
color: 'rgba(255, 205, 42, 1)',
|
|
40
|
+
borderColor: 'rgba(216, 175, 37, 1)'
|
|
41
|
+
}, {
|
|
42
|
+
color: 'rgba(18, 174, 92, 1)',
|
|
43
|
+
borderColor: 'rgba(23, 148, 79, 1)'
|
|
44
|
+
}, {
|
|
45
|
+
color: 'rgba(83, 184, 255, 1)',
|
|
46
|
+
borderColor: 'rgba(74, 156, 217, 1)'
|
|
47
|
+
}, {
|
|
48
|
+
color: 'rgba(183, 128, 255, 1)',
|
|
49
|
+
borderColor: 'rgba(155, 109, 216, 1)'
|
|
50
|
+
}, {
|
|
51
|
+
color: 'rgba(254, 192, 174, 1)',
|
|
52
|
+
borderColor: 'rgba(217, 163, 148, 1)'
|
|
53
|
+
}, {
|
|
54
|
+
color: 'rgba(252, 209, 156, 1)',
|
|
55
|
+
borderColor: 'rgba(215, 178, 133, 1)'
|
|
56
|
+
}, {
|
|
57
|
+
color: 'rgba(255, 232, 163, 1)',
|
|
58
|
+
borderColor: 'rgba(217, 198, 139, 1)'
|
|
59
|
+
}, {
|
|
60
|
+
color: 'rgba(176, 244, 197, 1)',
|
|
61
|
+
borderColor: 'rgba(153, 209, 171, 1)'
|
|
62
|
+
}, {
|
|
63
|
+
color: 'rgba(189, 227, 255, 1)',
|
|
64
|
+
borderColor: 'rgba(161, 193, 217, 1)'
|
|
65
|
+
}];
|
|
12
66
|
/**
|
|
13
67
|
* 颜色选择
|
|
14
68
|
*
|
|
@@ -22,7 +76,9 @@ function ColorPanel(props) {
|
|
|
22
76
|
|
|
23
77
|
var value = props.value,
|
|
24
78
|
showClear = props.showClear,
|
|
25
|
-
dataSource = props.dataSource,
|
|
79
|
+
_props$dataSource = props.dataSource,
|
|
80
|
+
dataSource = _props$dataSource === void 0 ? defaultColorList : _props$dataSource,
|
|
81
|
+
colorPickerBalloonProps = props.colorPickerBalloonProps,
|
|
26
82
|
onChange = props.onChange,
|
|
27
83
|
onPickerFocus = props.onPickerFocus,
|
|
28
84
|
onPickerBlur = props.onPickerBlur;
|
|
@@ -169,9 +225,7 @@ function ColorPanel(props) {
|
|
|
169
225
|
onClick: function onClick() {
|
|
170
226
|
changClick('17');
|
|
171
227
|
}
|
|
172
|
-
}, /*#__PURE__*/React.createElement(_Balloon, {
|
|
173
|
-
visible: visible,
|
|
174
|
-
trigger: defaultTrigger,
|
|
228
|
+
}, /*#__PURE__*/React.createElement(_Balloon, _extends({
|
|
175
229
|
closable: false,
|
|
176
230
|
triggerType: "click",
|
|
177
231
|
animation: false,
|
|
@@ -180,9 +234,12 @@ function ColorPanel(props) {
|
|
|
180
234
|
alignEdge: true,
|
|
181
235
|
style: {
|
|
182
236
|
paddingBottom: 0
|
|
183
|
-
}
|
|
237
|
+
}
|
|
238
|
+
}, colorPickerBalloonProps, {
|
|
239
|
+
visible: visible,
|
|
240
|
+
trigger: defaultTrigger,
|
|
184
241
|
onClose: close
|
|
185
|
-
}, /*#__PURE__*/React.createElement(SketchPicker, {
|
|
242
|
+
}), /*#__PURE__*/React.createElement(SketchPicker, {
|
|
186
243
|
color: data !== null && data !== void 0 ? data : undefined // width={230}
|
|
187
244
|
,
|
|
188
245
|
disableAlpha: true,
|
|
@@ -198,61 +255,14 @@ function ColorPanel(props) {
|
|
|
198
255
|
}))))));
|
|
199
256
|
}
|
|
200
257
|
|
|
258
|
+
ColorPanel.propTypes = {
|
|
259
|
+
dataSource: PropTypes.array
|
|
260
|
+
};
|
|
201
261
|
ColorPanel.defaultProps = {
|
|
202
262
|
value: undefined,
|
|
203
263
|
showClear: false,
|
|
204
|
-
dataSource:
|
|
205
|
-
|
|
206
|
-
borderColor: 'rgba(219, 219, 219, 1)'
|
|
207
|
-
}, {
|
|
208
|
-
color: 'rgba(245, 245, 245, 1)',
|
|
209
|
-
borderColor: 'rgba(208, 208, 208, 1)'
|
|
210
|
-
}, {
|
|
211
|
-
color: 'rgba(230, 230, 230, 1)',
|
|
212
|
-
borderColor: 'rgba(196, 196, 196, 1)'
|
|
213
|
-
}, {
|
|
214
|
-
color: 'rgba(168, 168, 168, 1)',
|
|
215
|
-
borderColor: 'rgba(146, 146, 146, 1)'
|
|
216
|
-
}, {
|
|
217
|
-
color: 'rgba(97, 97, 97, 1)',
|
|
218
|
-
borderColor: 'rgba(85, 85, 85, 1)'
|
|
219
|
-
}, {
|
|
220
|
-
color: 'rgba(49, 49, 49, 1)',
|
|
221
|
-
borderColor: 'rgba(43, 43, 43, 1)'
|
|
222
|
-
}, {
|
|
223
|
-
color: 'rgba(251, 115, 80, 1)',
|
|
224
|
-
borderColor: 'rgba(213, 98, 69, 1)'
|
|
225
|
-
}, {
|
|
226
|
-
color: 'rgba(255, 166, 41, 1)',
|
|
227
|
-
borderColor: 'rgba(219, 144, 45, 1)'
|
|
228
|
-
}, {
|
|
229
|
-
color: 'rgba(255, 205, 42, 1)',
|
|
230
|
-
borderColor: 'rgba(216, 175, 37, 1)'
|
|
231
|
-
}, {
|
|
232
|
-
color: 'rgba(18, 174, 92, 1)',
|
|
233
|
-
borderColor: 'rgba(23, 148, 79, 1)'
|
|
234
|
-
}, {
|
|
235
|
-
color: 'rgba(83, 184, 255, 1)',
|
|
236
|
-
borderColor: 'rgba(74, 156, 217, 1)'
|
|
237
|
-
}, {
|
|
238
|
-
color: 'rgba(183, 128, 255, 1)',
|
|
239
|
-
borderColor: 'rgba(155, 109, 216, 1)'
|
|
240
|
-
}, {
|
|
241
|
-
color: 'rgba(254, 192, 174, 1)',
|
|
242
|
-
borderColor: 'rgba(217, 163, 148, 1)'
|
|
243
|
-
}, {
|
|
244
|
-
color: 'rgba(252, 209, 156, 1)',
|
|
245
|
-
borderColor: 'rgba(215, 178, 133, 1)'
|
|
246
|
-
}, {
|
|
247
|
-
color: 'rgba(255, 232, 163, 1)',
|
|
248
|
-
borderColor: 'rgba(217, 198, 139, 1)'
|
|
249
|
-
}, {
|
|
250
|
-
color: 'rgba(176, 244, 197, 1)',
|
|
251
|
-
borderColor: 'rgba(153, 209, 171, 1)'
|
|
252
|
-
}, {
|
|
253
|
-
color: 'rgba(189, 227, 255, 1)',
|
|
254
|
-
borderColor: 'rgba(161, 193, 217, 1)'
|
|
255
|
-
}],
|
|
264
|
+
dataSource: defaultColorList,
|
|
265
|
+
colorPickerBalloonProps: {},
|
|
256
266
|
onChange: function onChange() {},
|
|
257
267
|
onPickerFocus: function onPickerFocus() {},
|
|
258
268
|
onPickerBlur: function onPickerBlur() {}
|
|
@@ -15,6 +15,8 @@ function FontColorDropdown(props) {
|
|
|
15
15
|
background = props.background,
|
|
16
16
|
_props$fieldDisabled = props.fieldDisabled,
|
|
17
17
|
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
|
|
18
|
+
colorPickerBalloonProps = props.colorPickerBalloonProps,
|
|
19
|
+
backgroundPickerBalloonProps = props.backgroundPickerBalloonProps,
|
|
18
20
|
onChange = props.onChange,
|
|
19
21
|
onColorChange = props.onColorChange,
|
|
20
22
|
onBackgroundChange = props.onBackgroundChange,
|
|
@@ -27,11 +29,9 @@ function FontColorDropdown(props) {
|
|
|
27
29
|
var backgroundEnabled = fieldDisabled.background !== true;
|
|
28
30
|
var opacityEnabled = fieldDisabled.opacity !== true;
|
|
29
31
|
|
|
30
|
-
var onFocus = function onFocus() {
|
|
31
|
-
};
|
|
32
|
+
var onFocus = function onFocus() {};
|
|
32
33
|
|
|
33
|
-
var onBlur = function onBlur() {
|
|
34
|
-
};
|
|
34
|
+
var onBlur = function onBlur() {};
|
|
35
35
|
|
|
36
36
|
var icon = disabled ? /*#__PURE__*/React.createElement("img", {
|
|
37
37
|
src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
|
|
@@ -54,6 +54,7 @@ function FontColorDropdown(props) {
|
|
|
54
54
|
}
|
|
55
55
|
}, /*#__PURE__*/React.createElement(ColorPanel, {
|
|
56
56
|
value: color,
|
|
57
|
+
colorPickerBalloonProps: colorPickerBalloonProps,
|
|
57
58
|
onChange: onColorChange,
|
|
58
59
|
onPickerFocus: onFocus,
|
|
59
60
|
onPickerBlur: onBlur
|
|
@@ -80,6 +81,7 @@ function FontColorDropdown(props) {
|
|
|
80
81
|
}, /*#__PURE__*/React.createElement(ColorPanel, {
|
|
81
82
|
showClear: true,
|
|
82
83
|
value: background,
|
|
84
|
+
colorPickerBalloonProps: backgroundPickerBalloonProps,
|
|
83
85
|
onChange: onBackgroundChange,
|
|
84
86
|
onPickerFocus: onFocus,
|
|
85
87
|
onPickerBlur: onBlur
|
|
@@ -111,4 +113,8 @@ function FontColorD(props) {
|
|
|
111
113
|
}));
|
|
112
114
|
}
|
|
113
115
|
|
|
116
|
+
ColorPanel.defaultProps = {
|
|
117
|
+
colorPickerBalloonProps: {},
|
|
118
|
+
backgroundPickerBalloonProps: {}
|
|
119
|
+
};
|
|
114
120
|
export default FontColorD;
|
|
@@ -32,7 +32,25 @@ function FontStyleSelect(props) {
|
|
|
32
32
|
disabled = props.disabled,
|
|
33
33
|
onChange = props.onChange,
|
|
34
34
|
_props$fieldDisabled = props.fieldDisabled,
|
|
35
|
-
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled
|
|
35
|
+
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
|
|
36
|
+
hideItemTootip = props.hideItemTootip;
|
|
37
|
+
|
|
38
|
+
var renderMenuItemContent = function renderMenuItemContent(item) {
|
|
39
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
style: {
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center'
|
|
43
|
+
}
|
|
44
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
45
|
+
src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
|
|
46
|
+
alt: ""
|
|
47
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
48
|
+
style: fieldDisabled[item.key] ? {} : {
|
|
49
|
+
color: variables['$color-text1-4']
|
|
50
|
+
}
|
|
51
|
+
}, item.label));
|
|
52
|
+
};
|
|
53
|
+
|
|
36
54
|
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
37
55
|
value: value,
|
|
38
56
|
valueRender: function valueRender() {
|
|
@@ -48,20 +66,8 @@ function FontStyleSelect(props) {
|
|
|
48
66
|
return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
|
|
49
67
|
key: item.key,
|
|
50
68
|
disabled: !!fieldDisabled[item.key]
|
|
51
|
-
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
52
|
-
trigger:
|
|
53
|
-
style: {
|
|
54
|
-
display: 'flex',
|
|
55
|
-
alignItems: 'center'
|
|
56
|
-
}
|
|
57
|
-
}, /*#__PURE__*/React.createElement("img", {
|
|
58
|
-
src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
|
|
59
|
-
alt: ""
|
|
60
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
style: fieldDisabled[item.key] ? {} : {
|
|
62
|
-
color: variables['$color-text1-4']
|
|
63
|
-
}
|
|
64
|
-
}, item.label)),
|
|
69
|
+
}, hideItemTootip ? renderMenuItemContent(item) : /*#__PURE__*/React.createElement(Tooltip, {
|
|
70
|
+
trigger: renderMenuItemContent(item),
|
|
65
71
|
align: "r",
|
|
66
72
|
popupStyle: {}
|
|
67
73
|
}, item.tooltip));
|
|
@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
|
|
|
24
24
|
import SelectionModel from "./SelectionModel";
|
|
25
25
|
import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
|
|
26
26
|
|
|
27
|
-
var version = typeof "13.0.0-dev.
|
|
27
|
+
var version = typeof "13.0.0-dev.9" === 'string' ? "13.0.0-dev.9" : null;
|
|
28
28
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
29
29
|
/**
|
|
30
30
|
* 拓扑显示和编辑
|
|
@@ -41,11 +41,11 @@ export function saveTopo(_x) {
|
|
|
41
41
|
|
|
42
42
|
function _saveTopo() {
|
|
43
43
|
_saveTopo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
|
|
44
|
-
var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups,
|
|
44
|
+
var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, viewGroupId, groupInfo, viewResources;
|
|
45
45
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
46
46
|
while (1) switch (_context.prev = _context.next) {
|
|
47
47
|
case 0:
|
|
48
|
-
topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups,
|
|
48
|
+
topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups, viewGroupId = data.viewGroupId;
|
|
49
49
|
rlog.debug("saveTopo", data); // 保存布局
|
|
50
50
|
|
|
51
51
|
if (!(template && layout)) {
|
|
@@ -97,8 +97,7 @@ function _saveTopo() {
|
|
|
97
97
|
rlog.debug("saveTopo-groupInfo", groupInfo);
|
|
98
98
|
_context.next = 15;
|
|
99
99
|
return topoService.bindResourceToTopo(topoId, {
|
|
100
|
-
groups: groupInfo
|
|
101
|
-
relateTopoIdList: relateTopoIdList
|
|
100
|
+
groups: groupInfo
|
|
102
101
|
});
|
|
103
102
|
|
|
104
103
|
case 15:
|
|
@@ -243,18 +243,17 @@ export default function (topoApp) {
|
|
|
243
243
|
var _this2 = this;
|
|
244
244
|
|
|
245
245
|
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
246
|
-
var editState, resources, _editState$groups, groups,
|
|
246
|
+
var editState, resources, _editState$groups, groups, query, data;
|
|
247
247
|
|
|
248
248
|
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
249
249
|
while (1) switch (_context2.prev = _context2.next) {
|
|
250
250
|
case 0:
|
|
251
251
|
editState = rootState.topoConfig;
|
|
252
|
-
resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups
|
|
252
|
+
resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups;
|
|
253
253
|
query = {
|
|
254
254
|
id: rootState.topoMod.topoId,
|
|
255
255
|
resources: resources,
|
|
256
|
-
groups: groups
|
|
257
|
-
relateTopoIdList: relateTopoIdList
|
|
256
|
+
groups: groups
|
|
258
257
|
};
|
|
259
258
|
_context2.next = 5;
|
|
260
259
|
return _this2.getTopoByConditions(query);
|
|
@@ -297,13 +296,13 @@ export default function (topoApp) {
|
|
|
297
296
|
var _this4 = this;
|
|
298
297
|
|
|
299
298
|
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
|
|
300
|
-
var topoId, resources, groups,
|
|
299
|
+
var topoId, resources, groups, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
|
|
301
300
|
|
|
302
301
|
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
303
302
|
while (1) switch (_context4.prev = _context4.next) {
|
|
304
303
|
case 0:
|
|
305
304
|
rlog.debug("getTopoByConditions--------", params);
|
|
306
|
-
topoId = params.id, resources = params.resources, groups = params.groups
|
|
305
|
+
topoId = params.id, resources = params.resources, groups = params.groups;
|
|
307
306
|
viewConditions = resToConditions(resources);
|
|
308
307
|
groupInfo = isAvailableArray(groups) && groups.map(function (group) {
|
|
309
308
|
return _extends({}, group, {
|
|
@@ -313,7 +312,7 @@ export default function (topoApp) {
|
|
|
313
312
|
});
|
|
314
313
|
rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
|
|
315
314
|
_context4.next = 7;
|
|
316
|
-
return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo
|
|
315
|
+
return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo);
|
|
317
316
|
|
|
318
317
|
case 7:
|
|
319
318
|
data = _context4.sent;
|
package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js
CHANGED
|
@@ -10,11 +10,11 @@ import Link from "../../../../../../../components/Link";
|
|
|
10
10
|
import service from "../../../../../../services/overview";
|
|
11
11
|
import styles from "./index.module.scss";
|
|
12
12
|
import { getHistory } from '@riil-frontend/component-topology-utils';
|
|
13
|
+
import loglevel from 'loglevel';
|
|
13
14
|
|
|
14
15
|
function formatUrl(url) {
|
|
15
16
|
var _window, _window$location;
|
|
16
17
|
|
|
17
|
-
console.log(url);
|
|
18
18
|
var prefix = '/default/pagecenter';
|
|
19
19
|
|
|
20
20
|
if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
|
|
@@ -28,12 +28,14 @@ function EventsCard(props) {
|
|
|
28
28
|
var alarmRiskList = props.alarmRiskList,
|
|
29
29
|
closeDetailDrawer = props.closeDetailDrawer,
|
|
30
30
|
onHandleAlarm = props.onHandleAlarm;
|
|
31
|
+
var log = loglevel.getLogger('topo');
|
|
31
32
|
|
|
32
33
|
var jumpTo = function jumpTo(url) {
|
|
33
34
|
closeDetailDrawer();
|
|
34
35
|
|
|
35
36
|
if (topo.viewProps.jumpto) {
|
|
36
|
-
|
|
37
|
+
log.debug('formatUrl(url)', url);
|
|
38
|
+
topo.viewProps.jumpto(url);
|
|
37
39
|
} else {
|
|
38
40
|
getHistory().push(formatUrl(url));
|
|
39
41
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
2
1
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
4
|
-
var _excluded = ["groups", "resources"];
|
|
5
3
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
6
4
|
import { request } from '@riil-frontend/component-topology-utils';
|
|
7
5
|
import { rlog } from '@riil-frontend/component-topology-utils';
|
|
@@ -9,7 +7,7 @@ import blackList from "./blacklist";
|
|
|
9
7
|
import { TOPO_API_ROOT } from "./constants";
|
|
10
8
|
import { getBatchCi as _getBatchCi, getBatchCiMetric as _getBatchCiMetric } from "../model";
|
|
11
9
|
import { processByConditionResult, processExitLink } from "../../utils/exitLinkUtil";
|
|
12
|
-
import * as
|
|
10
|
+
import * as relateTopoDataUtil from "../../utils/relateTopoDataUtil";
|
|
13
11
|
var API_ROOT = TOPO_API_ROOT;
|
|
14
12
|
/**
|
|
15
13
|
* 拓扑图(看做一个容器)的“父容器”ID
|
|
@@ -99,7 +97,8 @@ function prepareGroupParams(modifiedGroups) {
|
|
|
99
97
|
};
|
|
100
98
|
}).filter(Boolean);
|
|
101
99
|
return {
|
|
102
|
-
groups: groups
|
|
100
|
+
groups: groups,
|
|
101
|
+
relateTopoIdList: relateTopoDataUtil.getRelateTopoIdListFromConfig(modifiedGroups)
|
|
103
102
|
};
|
|
104
103
|
}
|
|
105
104
|
|
|
@@ -396,10 +395,11 @@ export default _extends({
|
|
|
396
395
|
return _extends({}, item, {
|
|
397
396
|
ciType: 'network_link'
|
|
398
397
|
});
|
|
399
|
-
})
|
|
398
|
+
}),
|
|
399
|
+
serialize: result.serialize ? JSON.parse(result.serialize) : undefined
|
|
400
400
|
});
|
|
401
|
+
result = relateTopoDataUtil.processBothTopoData(result);
|
|
401
402
|
result = processExitLink(result);
|
|
402
|
-
result = processBothTopoDataUtil.processBothTopoData(result);
|
|
403
403
|
return _context12.abrupt("return", result);
|
|
404
404
|
|
|
405
405
|
case 7:
|
|
@@ -417,11 +417,11 @@ export default _extends({
|
|
|
417
417
|
* @param {Array} groups
|
|
418
418
|
* @returns
|
|
419
419
|
*/
|
|
420
|
-
getTopoDataByResource: function getTopoDataByResource(id, resources, groups
|
|
420
|
+
getTopoDataByResource: function getTopoDataByResource(id, resources, groups) {
|
|
421
421
|
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
|
|
422
422
|
var _result$nodes2, _result$links2;
|
|
423
423
|
|
|
424
|
-
var data,
|
|
424
|
+
var data, params, result;
|
|
425
425
|
return _regeneratorRuntime.wrap(function _callee13$(_context13) {
|
|
426
426
|
while (1) switch (_context13.prev = _context13.next) {
|
|
427
427
|
case 0:
|
|
@@ -435,11 +435,9 @@ export default _extends({
|
|
|
435
435
|
});
|
|
436
436
|
}
|
|
437
437
|
|
|
438
|
-
|
|
438
|
+
params = prepareGroupParams(data);
|
|
439
439
|
_context13.next = 5;
|
|
440
|
-
return request.post(API_ROOT + "/structure/byCondition/" + id,
|
|
441
|
-
relateTopoIdList: relateTopoIdList
|
|
442
|
-
}));
|
|
440
|
+
return request.post(API_ROOT + "/structure/byCondition/" + id, params);
|
|
443
441
|
|
|
444
442
|
case 5:
|
|
445
443
|
result = _context13.sent;
|
|
@@ -451,9 +449,14 @@ export default _extends({
|
|
|
451
449
|
});
|
|
452
450
|
})
|
|
453
451
|
});
|
|
454
|
-
|
|
452
|
+
result = relateTopoDataUtil.processByConditionTopoData({
|
|
453
|
+
data: result,
|
|
454
|
+
config: data
|
|
455
|
+
});
|
|
456
|
+
result = processByConditionResult(result, params.groups);
|
|
457
|
+
return _context13.abrupt("return", result);
|
|
455
458
|
|
|
456
|
-
case
|
|
459
|
+
case 10:
|
|
457
460
|
case "end":
|
|
458
461
|
return _context13.stop();
|
|
459
462
|
}
|
|
@@ -470,11 +473,11 @@ export default _extends({
|
|
|
470
473
|
*/
|
|
471
474
|
bindResourceToTopo: function bindResourceToTopo(id, config) {
|
|
472
475
|
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
|
|
473
|
-
var groups, resources,
|
|
476
|
+
var groups, resources, newGroups, obj;
|
|
474
477
|
return _regeneratorRuntime.wrap(function _callee14$(_context14) {
|
|
475
478
|
while (1) switch (_context14.prev = _context14.next) {
|
|
476
479
|
case 0:
|
|
477
|
-
groups = config.groups, resources = config.resources
|
|
480
|
+
groups = config.groups, resources = config.resources;
|
|
478
481
|
newGroups = Array.isArray(groups) ? groups : [];
|
|
479
482
|
|
|
480
483
|
if (resources) {
|
|
@@ -488,7 +491,7 @@ export default _extends({
|
|
|
488
491
|
|
|
489
492
|
obj = prepareGroupParams(newGroups);
|
|
490
493
|
_context14.next = 6;
|
|
491
|
-
return request.post(API_ROOT + "/resource/" + id,
|
|
494
|
+
return request.post(API_ROOT + "/resource/" + id, obj);
|
|
492
495
|
|
|
493
496
|
case 6:
|
|
494
497
|
return _context14.abrupt("return", _context14.sent);
|
|
@@ -1,4 +1,76 @@
|
|
|
1
|
-
export var topoLinks = [//
|
|
1
|
+
export var topoLinks = [// 子拓扑与资源间
|
|
2
|
+
{
|
|
3
|
+
"id": "1-2",
|
|
4
|
+
"name": "子拓扑链路",
|
|
5
|
+
'sourceType': 'topo',
|
|
6
|
+
"source": "3",
|
|
7
|
+
"target": "00000000010de861",
|
|
8
|
+
"operation": "delete",
|
|
9
|
+
"ciType": "network_link",
|
|
10
|
+
"attributes": {
|
|
11
|
+
"network_link.source_device_ipv4": "172.17.166.18",
|
|
12
|
+
"network_link.destination_ipv4": "1.5.5.5",
|
|
13
|
+
"network_link.work_mode": "AandS",
|
|
14
|
+
"support_templates": "m.ethernet_link",
|
|
15
|
+
"rated_bandwidth": 100,
|
|
16
|
+
"network_link.actual_bandwidth": 100,
|
|
17
|
+
"source_type": "network.interface",
|
|
18
|
+
"network_link.connect_type": "phy",
|
|
19
|
+
"display_name": "172.17.166.18(Fa 0/10) - 1.5.5.5",
|
|
20
|
+
"asset_status": "2",
|
|
21
|
+
"network_link_type": "2",
|
|
22
|
+
"destination_type": "ip",
|
|
23
|
+
"network_link.role": "master",
|
|
24
|
+
"network_link.network_category": "CAN",
|
|
25
|
+
"dcs": "331268969",
|
|
26
|
+
"network_link.source_ipv4": "172.17.166.18",
|
|
27
|
+
"name": "172.17.166.18(Fa 0/10) - 1.5.5.5",
|
|
28
|
+
"distance_outlet": 2147483647,
|
|
29
|
+
"network_link.is_crucial": false,
|
|
30
|
+
"source_id": "00000000010de8b2",
|
|
31
|
+
"network_link.source_device_id": "00000000010de861"
|
|
32
|
+
},
|
|
33
|
+
"sourceCode": null,
|
|
34
|
+
"level": null,
|
|
35
|
+
"customType": null,
|
|
36
|
+
"manageStatus": 3
|
|
37
|
+
}, // 子拓扑与IP间
|
|
38
|
+
{
|
|
39
|
+
"id": "3-2",
|
|
40
|
+
"name": "子拓扑链路",
|
|
41
|
+
'sourceType': 'topo',
|
|
42
|
+
"source": "3",
|
|
43
|
+
"target": "",
|
|
44
|
+
"operation": "delete",
|
|
45
|
+
"ciType": "network_link",
|
|
46
|
+
"attributes": {
|
|
47
|
+
"network_link.source_device_ipv4": "172.17.166.18",
|
|
48
|
+
"network_link.destination_ipv4": "1.5.5.5",
|
|
49
|
+
"network_link.work_mode": "AandS",
|
|
50
|
+
"support_templates": "m.ethernet_link",
|
|
51
|
+
"rated_bandwidth": 100,
|
|
52
|
+
"network_link.actual_bandwidth": 100,
|
|
53
|
+
"source_type": "network.interface",
|
|
54
|
+
"network_link.connect_type": "phy",
|
|
55
|
+
"display_name": "172.17.166.18(Fa 0/10) - 1.5.5.5",
|
|
56
|
+
"asset_status": "2",
|
|
57
|
+
"network_link_type": "2",
|
|
58
|
+
"destination_type": "ip",
|
|
59
|
+
"network_link.role": "master",
|
|
60
|
+
"network_link.network_category": "CAN",
|
|
61
|
+
"dcs": "331268969",
|
|
62
|
+
"network_link.source_ipv4": "172.17.166.18",
|
|
63
|
+
"name": "172.17.166.18(Fa 0/10) - 1.5.5.5",
|
|
64
|
+
"distance_outlet": 2147483647,
|
|
65
|
+
"network_link.is_crucial": false,
|
|
66
|
+
"source_id": "00000000010de8b2",
|
|
67
|
+
"network_link.source_device_id": "00000000010de861"
|
|
68
|
+
},
|
|
69
|
+
"sourceCode": null,
|
|
70
|
+
"level": null,
|
|
71
|
+
"customType": null,
|
|
72
|
+
"manageStatus": 3
|
|
73
|
+
}, // 子拓扑之间
|
|
2
74
|
{
|
|
3
75
|
"id": "2-2",
|
|
4
76
|
"name": "子拓扑链路",
|
|
@@ -36,11 +36,11 @@ export function buildIpNode(ip) {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
function getHtSerialize(serialize) {
|
|
39
|
-
if (serialize) {
|
|
39
|
+
if (serialize && typeof serialize === 'string') {
|
|
40
40
|
return JSON.parse(serialize);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
return
|
|
43
|
+
return serialize;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
function isExitLink(link) {
|
|
@@ -25,10 +25,29 @@ export function processBothTopoData(topoData) {
|
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
27
|
export function processByConditionTopoData(ctx) {
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
var data = ctx.data,
|
|
29
|
+
config = ctx.config;
|
|
30
|
+
var nodes = data.nodes,
|
|
31
|
+
links = data.links;
|
|
32
|
+
return _extends({}, data, {
|
|
33
|
+
nodes: [].concat(nodes, buildTopoNodeDatas(config)),
|
|
34
|
+
links: buildTopoLinks(links)
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
export function getRelateTopoIdListFromConfig(groups) {
|
|
38
|
+
var relateTopoIdList = [];
|
|
39
|
+
groups.forEach(function (g) {
|
|
40
|
+
g.resources["static"].filter(function (ciId) {
|
|
41
|
+
return ciId.startsWith('topo:');
|
|
42
|
+
}).map(function (ciId) {
|
|
43
|
+
return ciId.replace('topo:', '');
|
|
44
|
+
}).map(function (topoId) {
|
|
45
|
+
if (!relateTopoIdList.includes(topoId)) {
|
|
46
|
+
relateTopoIdList.push(topoId);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
return relateTopoIdList;
|
|
32
51
|
}
|
|
33
52
|
export function buildTopoNode(topoId) {
|
|
34
53
|
return {
|
|
@@ -50,7 +69,7 @@ export function buildTopoNode(topoId) {
|
|
|
50
69
|
}
|
|
51
70
|
|
|
52
71
|
function buildTopoLinks(links) {
|
|
53
|
-
links.push
|
|
72
|
+
// links.push(...topoLinks)
|
|
54
73
|
return links.map(function (link) {
|
|
55
74
|
return _extends({}, link, {
|
|
56
75
|
"source": link.sourceType ? link.sourceType + ':' + link.source : link.source,
|
|
@@ -104,6 +123,24 @@ function buildTopoNodeDatasFromSerialize(serialize) {
|
|
|
104
123
|
return topoNodeDatas;
|
|
105
124
|
}
|
|
106
125
|
|
|
126
|
+
function buildTopoNodeDatas(config) {
|
|
127
|
+
var topoNodeDatas = [];
|
|
128
|
+
config.forEach(function (g) {
|
|
129
|
+
g.resources["static"].filter(function (ciId) {
|
|
130
|
+
return ciId.startsWith('topo:');
|
|
131
|
+
}).map(function (ciId) {
|
|
132
|
+
return ciId.replace('topo:', '');
|
|
133
|
+
}).map(function (topoId) {
|
|
134
|
+
topoNodeDatas.push(_extends({}, buildTopoNode(topoId), {
|
|
135
|
+
// 添加资源拓扑节点消失的问题
|
|
136
|
+
'groupId': g.id,
|
|
137
|
+
'groupTag': g.tag
|
|
138
|
+
}));
|
|
139
|
+
});
|
|
140
|
+
});
|
|
141
|
+
return topoNodeDatas;
|
|
142
|
+
}
|
|
143
|
+
|
|
107
144
|
function getRelateTopoIdsFromSerialize(serialize) {
|
|
108
145
|
return serialize;
|
|
109
146
|
}
|