@riil-frontend/component-topology 11.0.10 → 11.0.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.
- package/build/1.js +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +30 -30
- package/es/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js +82 -0
- package/es/components/ModelAttrSelectDrawer/index.js +2 -2
- package/es/components/VerticalIconTab/VerticalIconTab.js +1 -1
- package/es/core/components/DisplaySettingDrawer/NodeTag.js +6 -3
- package/es/core/components/DisplaySettingDrawer/NodeTip.js +7 -4
- package/es/core/components/DisplaySettingDrawer/components/NodeAttrSettingDrawer.js +40 -0
- package/es/core/components/ResourceViewAttributeSetting/nodeCiTypeAttrUtil.js +87 -10
- package/es/core/components/TopoView/topoView.js +3 -0
- package/es/core/editor/components/BottomFloatTool/HelpIcon.js +96 -3
- package/es/core/editor/components/BottomFloatTool/HelpIcon.module.scss +74 -0
- package/es/core/editor/hooks/useNewElementTheme.js +5 -1
- package/es/core/hooks/useCanvasThemeConfig.js +16 -4
- package/es/core/hooks/useTopoEdit.js +12 -8
- package/es/core/models/AttributeMetricDisplay.js +10 -58
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/tagstips/ElementTagTipConfig.js +43 -37
- package/es/core/models/utils/nodeNameVisibleUtil.js +116 -0
- package/es/utils/topoData.js +10 -2
- package/lib/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js +97 -0
- package/lib/components/ModelAttrSelectDrawer/index.js +2 -2
- package/lib/components/VerticalIconTab/VerticalIconTab.js +2 -2
- package/lib/core/components/DisplaySettingDrawer/NodeTag.js +7 -3
- package/lib/core/components/DisplaySettingDrawer/NodeTip.js +8 -4
- package/lib/core/components/DisplaySettingDrawer/components/NodeAttrSettingDrawer.js +60 -0
- package/lib/core/components/ResourceViewAttributeSetting/nodeCiTypeAttrUtil.js +88 -10
- package/lib/core/components/TopoView/topoView.js +4 -0
- package/lib/core/editor/components/BottomFloatTool/HelpIcon.js +104 -3
- package/lib/core/editor/components/BottomFloatTool/HelpIcon.module.scss +74 -0
- package/lib/core/editor/hooks/useNewElementTheme.js +6 -1
- package/lib/core/hooks/useCanvasThemeConfig.js +16 -4
- package/lib/core/hooks/useTopoEdit.js +12 -8
- package/lib/core/models/AttributeMetricDisplay.js +11 -61
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/tagstips/ElementTagTipConfig.js +43 -37
- package/lib/core/models/utils/nodeNameVisibleUtil.js +128 -0
- package/lib/utils/topoData.js +11 -2
- package/package.json +2 -2
|
@@ -2,10 +2,95 @@
|
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.getNodeCiModSet = getNodeCiModSet;
|
|
5
|
+
exports.getNodeModels = getNodeModels;
|
|
5
6
|
|
|
6
7
|
var _topoData = require("../../../utils/topoData");
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
/**
|
|
10
|
+
* 获取节点标注、悬浮框配置
|
|
11
|
+
* @param {*} topo
|
|
12
|
+
* @returns
|
|
13
|
+
*/
|
|
14
|
+
function getNodeModels(topo) {
|
|
15
|
+
var data = topo.store.getModelState('topoMod').data;
|
|
16
|
+
var ciTypeMap = topo.ciTyeCache.ciTypes;
|
|
17
|
+
return getNodeModSet();
|
|
18
|
+
|
|
19
|
+
function getNodeModSet() {
|
|
20
|
+
var ciTypes = (0, _topoData.getCiTypesFromCiElements)(data.nodes);
|
|
21
|
+
return getMods(ciTypes);
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
*
|
|
25
|
+
* @param {array} ciTypeCodes
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
function getMods(ciTypeCodes) {
|
|
31
|
+
return Object.keys(ciTypeMap).filter(function (item) {
|
|
32
|
+
return ciTypeCodes.includes(item);
|
|
33
|
+
}).map(function (key) {
|
|
34
|
+
var ciTypeObj = ciTypeMap[key];
|
|
35
|
+
return {
|
|
36
|
+
id: ciTypeObj.code,
|
|
37
|
+
label: ciTypeObj.displayName,
|
|
38
|
+
icon: ciTypeObj.icon,
|
|
39
|
+
list: ciModfilter(ciTypeObj, 'node')
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* 过滤ci元数据中的属性和指标,用于属性和指标显示设置
|
|
45
|
+
* @param {} ciTypeObj
|
|
46
|
+
* @returns
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
function ciModfilter(ciTypeObj, type) {
|
|
51
|
+
var custom = [];
|
|
52
|
+
|
|
53
|
+
if (type === 'node') {
|
|
54
|
+
custom.push.apply(custom, [{
|
|
55
|
+
id: 'graph:name',
|
|
56
|
+
code: 'name',
|
|
57
|
+
name: '图片名称',
|
|
58
|
+
type: 'custom'
|
|
59
|
+
}, {
|
|
60
|
+
id: 'ciType:display_name',
|
|
61
|
+
code: 'ciType',
|
|
62
|
+
name: '资源类型',
|
|
63
|
+
type: 'custom'
|
|
64
|
+
}]);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
var attributes = ciTypeObj.attributes.filter(function (attr) {
|
|
68
|
+
return !!attr.userVisible;
|
|
69
|
+
}).map(function (item) {
|
|
70
|
+
return {
|
|
71
|
+
type: 'attribute',
|
|
72
|
+
id: "attribute:" + item.code,
|
|
73
|
+
code: "attribute:" + item.code,
|
|
74
|
+
name: item.name,
|
|
75
|
+
typeName: '属性'
|
|
76
|
+
};
|
|
77
|
+
});
|
|
78
|
+
var metrics = ciTypeObj.metrics.map(function (item) {
|
|
79
|
+
return {
|
|
80
|
+
type: 'metric',
|
|
81
|
+
id: "metric:" + item.code,
|
|
82
|
+
code: "metric:" + item.code,
|
|
83
|
+
name: item.name,
|
|
84
|
+
typeName: '指标'
|
|
85
|
+
};
|
|
86
|
+
});
|
|
87
|
+
return [].concat(custom, attributes, metrics);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
;
|
|
91
|
+
} // 资源类型含有属性和指标集合
|
|
92
|
+
|
|
93
|
+
|
|
9
94
|
function getNodeCiModSet(params) {
|
|
10
95
|
var topo = params.topo;
|
|
11
96
|
var data = topo.store.getModelState('topoMod').data;
|
|
@@ -35,8 +120,7 @@ function getNodeCiModSet(params) {
|
|
|
35
120
|
icon: ciTypeObj.icon,
|
|
36
121
|
list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
|
|
37
122
|
};
|
|
38
|
-
});
|
|
39
|
-
|
|
123
|
+
});
|
|
40
124
|
return modSet;
|
|
41
125
|
}
|
|
42
126
|
/**
|
|
@@ -66,13 +150,7 @@ function getNodeCiModSet(params) {
|
|
|
66
150
|
(_tags$data$code = tags.data[code]) === null || _tags$data$code === void 0 ? void 0 : _tags$data$code.map(function (item) {
|
|
67
151
|
tagArr.push(item.code + "-" + item.type);
|
|
68
152
|
});
|
|
69
|
-
}
|
|
70
|
-
// "过滤ci元数据中的属性和指标,用于属性和指标显示设置",
|
|
71
|
-
// globalSetting,
|
|
72
|
-
// tipArr,
|
|
73
|
-
// tagArr
|
|
74
|
-
// );
|
|
75
|
-
|
|
153
|
+
}
|
|
76
154
|
|
|
77
155
|
var custom = [];
|
|
78
156
|
|
|
@@ -57,6 +57,8 @@ var _basicIcons = _interopRequireDefault(require("../../common/icons/basicIcons"
|
|
|
57
57
|
|
|
58
58
|
var _HelpIcon = _interopRequireDefault(require("../../editor/components/BottomFloatTool/HelpIcon"));
|
|
59
59
|
|
|
60
|
+
var _nodeNameVisibleUtil = require("../../models/utils/nodeNameVisibleUtil");
|
|
61
|
+
|
|
60
62
|
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); }
|
|
61
63
|
|
|
62
64
|
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; }
|
|
@@ -159,6 +161,7 @@ var Topology = function Topology(props) {
|
|
|
159
161
|
htElements: topo.getDataModel().getDatas().toArray()
|
|
160
162
|
});
|
|
161
163
|
|
|
164
|
+
(0, _nodeNameVisibleUtil.updateNodesNameVisible)(topo);
|
|
162
165
|
(0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
|
|
163
166
|
(0, _graphLinkUtil.fixLink)(topo);
|
|
164
167
|
(0, _clusterUtil.handleClusterNoPermission)(topo);
|
|
@@ -185,6 +188,7 @@ var Topology = function Topology(props) {
|
|
|
185
188
|
htElements: topo.getDataModel().getDatas().toArray()
|
|
186
189
|
});
|
|
187
190
|
|
|
191
|
+
(0, _nodeNameVisibleUtil.updateNodesNameVisible)(topo);
|
|
188
192
|
(0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
|
|
189
193
|
(0, _graphLinkUtil.fixLink)(topo);
|
|
190
194
|
(0, _clusterUtil.handleClusterNoPermission)(topo);
|
|
@@ -5,11 +5,112 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
exports.__esModule = true;
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
|
|
9
|
+
|
|
10
|
+
var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _HelpIconModule = _interopRequireDefault(require("./HelpIcon.module.scss"));
|
|
15
|
+
|
|
16
|
+
var _useCanvasThemeConfig2 = _interopRequireDefault(require("../../../hooks/useCanvasThemeConfig"));
|
|
17
|
+
|
|
18
|
+
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); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
9
21
|
|
|
10
22
|
function HelpIcon(props) {
|
|
11
|
-
var topo = props.topo
|
|
12
|
-
|
|
23
|
+
var topo = props.topo,
|
|
24
|
+
topoType = props.topoType;
|
|
25
|
+
var localStorageVal = localStorage.getItem(topoType + 'helpBoxHidden');
|
|
26
|
+
|
|
27
|
+
var _useState = (0, _react.useState)(),
|
|
28
|
+
helpBoxIsShow = _useState[0],
|
|
29
|
+
setHelpBoxIsShow = _useState[1]; //TODO:在主得style里面需要增加color与background属性,根据外部传值进行改变,默认值为$color-text1-4,#fff
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
var Row = _grid["default"].Row,
|
|
33
|
+
Col = _grid["default"].Col;
|
|
34
|
+
|
|
35
|
+
var _useCanvasThemeConfig = (0, _useCanvasThemeConfig2["default"])({
|
|
36
|
+
topo: topo
|
|
37
|
+
}),
|
|
38
|
+
themeConfig = _useCanvasThemeConfig.themeConfig;
|
|
39
|
+
|
|
40
|
+
var helpIconNames = themeConfig.editor.helpIcon;
|
|
41
|
+
|
|
42
|
+
var onChange = function onChange(visible, type) {
|
|
43
|
+
if (type != 'docClick') {
|
|
44
|
+
setHelpBoxIsShow(visible);
|
|
45
|
+
localStorage.setItem(topoType + 'helpBoxHidden', !visible);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
var topoModState = topo.store.useModelState('topoMod');
|
|
50
|
+
var graphLoaded = topoModState.graphLoaded;
|
|
51
|
+
(0, _react.useEffect)(function () {
|
|
52
|
+
if (graphLoaded) {
|
|
53
|
+
setHelpBoxIsShow(localStorageVal == 'true' ? false : true);
|
|
54
|
+
}
|
|
55
|
+
}, [topo, graphLoaded]);
|
|
56
|
+
return /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
|
|
57
|
+
triggerType: "click",
|
|
58
|
+
align: "t",
|
|
59
|
+
trigger: /*#__PURE__*/_react["default"].createElement("div", {
|
|
60
|
+
className: _HelpIconModule["default"].topoHelpIconBtn,
|
|
61
|
+
onClick: function onClick() {
|
|
62
|
+
open;
|
|
63
|
+
}
|
|
64
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
|
65
|
+
src: "/img/topo/editor/bottomFloatTool/default.svg",
|
|
66
|
+
alt: "",
|
|
67
|
+
style: {
|
|
68
|
+
width: '15px',
|
|
69
|
+
height: '15px'
|
|
70
|
+
}
|
|
71
|
+
})),
|
|
72
|
+
closable: true,
|
|
73
|
+
visible: helpBoxIsShow,
|
|
74
|
+
onVisibleChange: onChange,
|
|
75
|
+
shouldUpdatePosition: true,
|
|
76
|
+
id: helpIconNames
|
|
77
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
|
+
className: _HelpIconModule["default"].topoHelpIcon
|
|
79
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
80
|
+
className: _HelpIconModule["default"][helpIconNames + 'Box']
|
|
81
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
82
|
+
className: _HelpIconModule["default"].title
|
|
83
|
+
}, "\u5FEB\u6377\u952E"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
84
|
+
className: _HelpIconModule["default"].conten
|
|
85
|
+
}, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
86
|
+
span: "16"
|
|
87
|
+
}, "\u590D\u5236"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
88
|
+
span: "8"
|
|
89
|
+
}, "ctrl/\u2318+c")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
90
|
+
span: "16"
|
|
91
|
+
}, "\u7C98\u8D34"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
92
|
+
span: "8"
|
|
93
|
+
}, "ctrl/\u2318+v")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
94
|
+
span: "16"
|
|
95
|
+
}, "\u64A4\u9500"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
96
|
+
span: "8"
|
|
97
|
+
}, "ctrl/\u2318+z")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
98
|
+
span: "16"
|
|
99
|
+
}, "\u6062\u590D"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
100
|
+
span: "8"
|
|
101
|
+
}, "ctrl/\u2318+y")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
102
|
+
span: "16"
|
|
103
|
+
}, "\u6587\u5B57\u52A0\u7C97"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
104
|
+
span: "8"
|
|
105
|
+
}, "ctrl/\u2318+b")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
106
|
+
span: "16"
|
|
107
|
+
}, "\u9009\u62E9-\u62D6\u5230"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
108
|
+
span: "8"
|
|
109
|
+
}, "\u7A7A\u683C")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
|
|
110
|
+
span: "16"
|
|
111
|
+
}, "\u9000\u51FA\u94FE\u8DEF/\u7EBF\u7ED8\u5236"), /*#__PURE__*/_react["default"].createElement(Col, {
|
|
112
|
+
span: "8"
|
|
113
|
+
}, "\u9F20\u6807\u53F3\u952E"))))));
|
|
13
114
|
}
|
|
14
115
|
|
|
15
116
|
var _default = HelpIcon;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
.topoHelpIconBtn{
|
|
2
|
+
width: '100%';
|
|
3
|
+
height: '100%';
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
border: 0;
|
|
7
|
+
}
|
|
8
|
+
:global{
|
|
9
|
+
#white.next-overlay-inner{
|
|
10
|
+
padding: 10px;
|
|
11
|
+
.next-balloon-close{
|
|
12
|
+
right: 10px;
|
|
13
|
+
top:8px
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
#dark.next-overlay-inner{
|
|
17
|
+
padding: 10px;
|
|
18
|
+
background-color: #063658;
|
|
19
|
+
border-color: #08A5F4;
|
|
20
|
+
.next-balloon-close{
|
|
21
|
+
right: 10px;
|
|
22
|
+
/* color:$color-text1-5; */
|
|
23
|
+
color:#fff;
|
|
24
|
+
top:8px
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
#dark.next-overlay-inner:after{
|
|
28
|
+
border-color: #08A5F4;
|
|
29
|
+
background: #063658;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.topoHelpIcon{
|
|
33
|
+
width: 187px;
|
|
34
|
+
.whiteBox,.darkBox{
|
|
35
|
+
color:$color-text1-4;
|
|
36
|
+
font-size: 12px;
|
|
37
|
+
font-family: PingFangSC-Medium, PingFang SC;
|
|
38
|
+
width: 187px;
|
|
39
|
+
background: #FFFFFF;
|
|
40
|
+
.title{
|
|
41
|
+
line-height: 15px;
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
}
|
|
44
|
+
.colse{
|
|
45
|
+
float: right;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
}
|
|
48
|
+
.conten{
|
|
49
|
+
color:$color-text1-6;
|
|
50
|
+
font-weight: 400;
|
|
51
|
+
line-height: 20px;
|
|
52
|
+
margin-top: 8px;
|
|
53
|
+
:global{
|
|
54
|
+
.next-row{
|
|
55
|
+
margin: 4px 0;
|
|
56
|
+
}
|
|
57
|
+
.next-col-8{
|
|
58
|
+
text-align: right;
|
|
59
|
+
color:$color-text1-4;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
}
|
|
65
|
+
.darkBox{
|
|
66
|
+
background: #063658;
|
|
67
|
+
color:$color-text1-5;
|
|
68
|
+
opacity: 0.85;
|
|
69
|
+
.conten{
|
|
70
|
+
color:$color-text1-5;
|
|
71
|
+
opacity: 0.85;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -11,6 +11,8 @@ var _themes = _interopRequireDefault(require("../config/themes"));
|
|
|
11
11
|
|
|
12
12
|
var _themeUtil = _interopRequireDefault(require("../utils/themeUtil"));
|
|
13
13
|
|
|
14
|
+
var _nodeNameVisibleUtil = require("../../models/utils/nodeNameVisibleUtil");
|
|
15
|
+
|
|
14
16
|
function useNewElementTheme(props) {
|
|
15
17
|
var topo = props.topo;
|
|
16
18
|
var topoModState = topo.store.useModelState('topoMod');
|
|
@@ -29,6 +31,7 @@ function useNewElementTheme(props) {
|
|
|
29
31
|
data = e.data;
|
|
30
32
|
|
|
31
33
|
if (kind === 'add') {
|
|
34
|
+
// 设置主题样式
|
|
32
35
|
var displayConfig = topo.store.getModelState('displayConfig');
|
|
33
36
|
var theme = displayConfig.canvasTheme || 'white';
|
|
34
37
|
|
|
@@ -41,7 +44,9 @@ function useNewElementTheme(props) {
|
|
|
41
44
|
}),
|
|
42
45
|
setElementTheme = _ThemeUtil.setElementTheme;
|
|
43
46
|
|
|
44
|
-
setElementTheme(data, themeConfig);
|
|
47
|
+
setElementTheme(data, themeConfig); // 临时放这里,新加入节点按配置显示隐藏名称
|
|
48
|
+
|
|
49
|
+
(0, _nodeNameVisibleUtil.setNewNodeNameVisible)(topo, data);
|
|
45
50
|
}
|
|
46
51
|
}
|
|
47
52
|
|
|
@@ -15,12 +15,16 @@ var themeMap = [{
|
|
|
15
15
|
color: '#FFFFFF',
|
|
16
16
|
editor: {
|
|
17
17
|
// 快捷帮助
|
|
18
|
-
helpIcon:
|
|
18
|
+
helpIcon: 'white'
|
|
19
19
|
}
|
|
20
20
|
}, {
|
|
21
21
|
name: 'lightblue',
|
|
22
22
|
label: '蓝色',
|
|
23
|
-
color: '#F9FBFF'
|
|
23
|
+
color: '#F9FBFF',
|
|
24
|
+
editor: {
|
|
25
|
+
// 快捷帮助
|
|
26
|
+
helpIcon: 'white'
|
|
27
|
+
}
|
|
24
28
|
}, // {
|
|
25
29
|
// name: 'yellow',
|
|
26
30
|
// label: '黄色',
|
|
@@ -34,11 +38,19 @@ var themeMap = [{
|
|
|
34
38
|
{
|
|
35
39
|
name: 'dark',
|
|
36
40
|
label: '深色',
|
|
37
|
-
color: '#031425'
|
|
41
|
+
color: '#031425',
|
|
42
|
+
editor: {
|
|
43
|
+
// 快捷帮助
|
|
44
|
+
helpIcon: 'dark'
|
|
45
|
+
}
|
|
38
46
|
}, {
|
|
39
47
|
name: 'poly',
|
|
40
48
|
label: 'Poly',
|
|
41
|
-
backgroundImage: '/img/topo/themes/poly.png'
|
|
49
|
+
backgroundImage: '/img/topo/themes/poly.png',
|
|
50
|
+
editor: {
|
|
51
|
+
// 快捷帮助
|
|
52
|
+
helpIcon: 'dark'
|
|
53
|
+
}
|
|
42
54
|
}].reduce(function (map, item) {
|
|
43
55
|
var _extends2;
|
|
44
56
|
|
|
@@ -263,7 +263,8 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
|
263
263
|
content: "是否仅删除区域或将区域包含的内容一同删除?",
|
|
264
264
|
//footer:()=>{return <><Button type="primary" onClick={doDeleteOnlyGroup}>仅删除区域</Button><Button type="primary" onClick={doDeleteOnlyGroup}>确定</Button></>},
|
|
265
265
|
okProps: {
|
|
266
|
-
children: "仅删除区域"
|
|
266
|
+
children: "仅删除区域",
|
|
267
|
+
type: "normal"
|
|
267
268
|
},
|
|
268
269
|
cancelProps: {
|
|
269
270
|
children: "全部删除"
|
|
@@ -318,27 +319,30 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
|
318
319
|
});
|
|
319
320
|
|
|
320
321
|
function doDeleteOnlyGroup() {
|
|
321
|
-
// console.log("仅删除区域", topo.view.topoClient, data);
|
|
322
|
+
topo.historyManager.beginTransaction(); // console.log("仅删除区域", topo.view.topoClient, data);
|
|
323
|
+
|
|
322
324
|
var children = (0, _htElementUtils.getGroupChildren)(group);
|
|
323
325
|
children.map(function (child) {
|
|
324
|
-
child.setParent(null);
|
|
325
|
-
var
|
|
326
|
-
|
|
327
|
-
|
|
326
|
+
child.setParent(null); // var viewRect = topo.getGraphView().getViewRect();
|
|
327
|
+
// var nodeRect = child.getRect();
|
|
328
|
+
// child.setPosition(
|
|
329
|
+
// viewRect.x + nodeRect.width + 2,
|
|
330
|
+
// viewRect.y + nodeRect.height + 4
|
|
331
|
+
// ); // 解决集群从区域内移出时,连线位置未更新的问题
|
|
328
332
|
|
|
329
333
|
setTimeout(function () {
|
|
330
334
|
child.iv();
|
|
331
335
|
topo.historyManager.endTransaction();
|
|
332
336
|
}, 50);
|
|
333
337
|
});
|
|
334
|
-
topo.view.topoClient.deleteGroup(data);
|
|
338
|
+
topo.view.topoClient.deleteGroup(data);
|
|
339
|
+
topo.historyManager.endTransaction(); // console.log("仅删除区域", children, group);
|
|
335
340
|
}
|
|
336
341
|
|
|
337
342
|
function doDelete() {
|
|
338
343
|
topo.historyManager.beginTransaction(); // FIXME 。如果命中其他的动态条件,则立即显示
|
|
339
344
|
|
|
340
345
|
topo.view.topoClient.deleteGroup(data);
|
|
341
|
-
topo.historyManager.endTransaction();
|
|
342
346
|
}
|
|
343
347
|
};
|
|
344
348
|
|
|
@@ -11,22 +11,18 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
|
|
|
11
11
|
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
14
|
-
var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
|
|
15
|
-
|
|
16
14
|
var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
|
|
17
15
|
|
|
18
|
-
var _lodash = require("lodash");
|
|
19
|
-
|
|
20
16
|
var _ResourceInfoDisplay = require("../../constants/ResourceInfoDisplay");
|
|
21
17
|
|
|
22
|
-
var _services = require("../services");
|
|
23
|
-
|
|
24
18
|
var _manageStatusUtil = require("../utils/manageStatusUtil");
|
|
25
19
|
|
|
26
20
|
var _attributeFormatter = _interopRequireDefault(require("./attributeFormatter"));
|
|
27
21
|
|
|
28
22
|
var _DictCache = _interopRequireDefault(require("./cache/DictCache"));
|
|
29
23
|
|
|
24
|
+
var _nodeNameVisibleUtil = require("./utils/nodeNameVisibleUtil");
|
|
25
|
+
|
|
30
26
|
function isGraphField(item) {
|
|
31
27
|
return item.type === 'graph';
|
|
32
28
|
}
|
|
@@ -310,67 +306,21 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
|
310
306
|
});
|
|
311
307
|
});
|
|
312
308
|
return metricCodes;
|
|
313
|
-
}
|
|
314
|
-
/**
|
|
315
|
-
* 从配置获得节点名称是否显示
|
|
316
|
-
* @param {*} node
|
|
317
|
-
* @returns
|
|
318
|
-
*/
|
|
319
|
-
;
|
|
320
|
-
|
|
321
|
-
_proto.getNodeNameVisible = function getNodeNameVisible(node) {
|
|
322
|
-
// if (!this.topo.isViewMode()) {
|
|
323
|
-
// return true;
|
|
324
|
-
// }
|
|
325
|
-
var _this$getConfig3 = this.getConfig(),
|
|
326
|
-
nodeTag = _this$getConfig3.nodeTag;
|
|
327
|
-
|
|
328
|
-
var visible = true;
|
|
329
|
-
|
|
330
|
-
if (nodeTag) {
|
|
331
|
-
var isCustom = nodeTag.isCustom,
|
|
332
|
-
data = nodeTag.data;
|
|
333
|
-
var items = (isCustom ? data[node.ciType] : data) || [];
|
|
334
|
-
visible = !!items.filter(function (item) {
|
|
335
|
-
return item.type === 'graph';
|
|
336
|
-
}).length; // ipNode逻辑
|
|
337
|
-
|
|
338
|
-
if (isCustom && node.bindType === 'ip') {
|
|
339
|
-
visible = true;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
return visible;
|
|
344
309
|
};
|
|
345
310
|
|
|
346
311
|
_proto.getNodesNameVisible = function getNodesNameVisible() {
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
var nodes = this.topo.dataModel.getNodes();
|
|
350
|
-
return nodes.map(function (node) {
|
|
351
|
-
// console.log("getNodesNameVisible", node);
|
|
352
|
-
return {
|
|
353
|
-
id: node.id,
|
|
354
|
-
visible: _this4.getNodeNameVisible(node)
|
|
355
|
-
};
|
|
356
|
-
});
|
|
312
|
+
return (0, _nodeNameVisibleUtil.getNodesNameVisible)(this.topo);
|
|
357
313
|
}
|
|
358
314
|
/**
|
|
359
315
|
* 根据配置执行节点名称显示隐藏
|
|
316
|
+
* 1. 资源根据标注配置显示隐藏
|
|
317
|
+
* 2. 默认标注配置不勾选图片名称,图片节点名称不显示
|
|
318
|
+
* 3. 自定义标注配置,图片名称显示
|
|
360
319
|
*/
|
|
361
320
|
;
|
|
362
321
|
|
|
363
322
|
_proto.updateNodesNameVisible = function updateNodesNameVisible() {
|
|
364
|
-
|
|
365
|
-
this.getNodesNameVisible().forEach(function (_ref) {
|
|
366
|
-
var id = _ref.id,
|
|
367
|
-
visible = _ref.visible;
|
|
368
|
-
var ele = dm.getDataByTag(id); //
|
|
369
|
-
|
|
370
|
-
if (ele) {
|
|
371
|
-
ele.a('isShowName', visible);
|
|
372
|
-
}
|
|
373
|
-
});
|
|
323
|
+
(0, _nodeNameVisibleUtil.updateNodesNameVisible)(this.topo);
|
|
374
324
|
}
|
|
375
325
|
/**
|
|
376
326
|
* 加载标注、悬浮框数据
|
|
@@ -474,7 +424,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
|
474
424
|
/*#__PURE__*/
|
|
475
425
|
function () {
|
|
476
426
|
var _translateRefAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(ciDatas) {
|
|
477
|
-
var
|
|
427
|
+
var _this4 = this;
|
|
478
428
|
|
|
479
429
|
var refIdMap, ciRefAttributeMap, refIds, refCiMap;
|
|
480
430
|
return _regenerator["default"].wrap(function _callee3$(_context3) {
|
|
@@ -490,7 +440,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
|
490
440
|
attributeMap = ciData.attributeMap;
|
|
491
441
|
ciRefAttributeMap[id] = [];
|
|
492
442
|
|
|
493
|
-
var ciTypeMeta =
|
|
443
|
+
var ciTypeMeta = _this4.topo.ciTyeCache.getCiType(ciType);
|
|
494
444
|
|
|
495
445
|
if (ciTypeMeta) {
|
|
496
446
|
ciTypeMeta.attributes.filter(function (attributeMeta) {
|
|
@@ -667,14 +617,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
|
|
|
667
617
|
;
|
|
668
618
|
|
|
669
619
|
_proto.buildTagsTips = function buildTagsTips() {
|
|
670
|
-
var
|
|
620
|
+
var _this5 = this,
|
|
671
621
|
_this$extElementTagTi;
|
|
672
622
|
|
|
673
623
|
// 获取标注、悬浮框配置
|
|
674
624
|
var ciConfigs = this.getResourceTagTipConfig(); // console.log("buildTagsTips---ciConfigs", ciConfigs);
|
|
675
625
|
|
|
676
626
|
var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
|
|
677
|
-
return
|
|
627
|
+
return _this5.buildElementTagsTips(ciConfig.id);
|
|
678
628
|
}); // console.log("ciTagsAndTips", ciTagsAndTips);
|
|
679
629
|
|
|
680
630
|
var extTagsAndTips = ((_this$extElementTagTi = this.extElementTagTipBuilder) === null || _this$extElementTagTi === void 0 ? void 0 : _this$extElementTagTi.getExtElementTagsAndTips()) || [];
|
|
@@ -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 "11.0.
|
|
59
|
+
var version = typeof "11.0.11" === 'string' ? "11.0.11" : null;
|
|
60
60
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
61
61
|
/**
|
|
62
62
|
* 拓扑显示和编辑
|