@riil-frontend/component-topology 11.0.4 → 11.0.6
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 +21 -21
- package/es/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js +82 -0
- package/es/components/ModelAttrSelectDrawer/index.js +2 -2
- 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/GraphViewPanel.js +0 -3
- package/es/core/components/TopoView/topoView.js +6 -3
- package/es/core/hooks/useCanvasTheme.js +7 -32
- package/es/core/hooks/useCanvasThemeConfig.js +50 -0
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/tagstips/ElementTagTipConfig.js +43 -37
- package/lib/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js +97 -0
- package/lib/components/ModelAttrSelectDrawer/index.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/GraphViewPanel.js +0 -3
- package/lib/core/components/TopoView/topoView.js +6 -3
- package/lib/core/hooks/useCanvasTheme.js +8 -34
- package/lib/core/hooks/useCanvasThemeConfig.js +60 -0
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/tagstips/ElementTagTipConfig.js +43 -37
- package/package.json +2 -2
@@ -0,0 +1,82 @@
|
|
1
|
+
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
|
2
|
+
import rlog from '@riil-frontend/component-topology-utils/es/rlog';
|
3
|
+
import ModelAttrSelectDrawer from "./ModelAttrSelectDrawer";
|
4
|
+
|
5
|
+
function parseValue(value) {
|
6
|
+
var selected = {};
|
7
|
+
Object.keys(value).forEach(function (ciType) {
|
8
|
+
selected[ciType] = value[ciType].map(function (_ref) {
|
9
|
+
var type = _ref.type,
|
10
|
+
code = _ref.code;
|
11
|
+
return type + ":" + code;
|
12
|
+
});
|
13
|
+
});
|
14
|
+
return selected;
|
15
|
+
}
|
16
|
+
/**
|
17
|
+
* 资源显示属性、指标配置
|
18
|
+
*/
|
19
|
+
|
20
|
+
|
21
|
+
var MultipleTypeAttributeSelectDrawer = /*#__PURE__*/forwardRef(function (props, ref) {
|
22
|
+
var value = props.value,
|
23
|
+
data = props.data,
|
24
|
+
showType = props.showType,
|
25
|
+
limit = props.limit,
|
26
|
+
onChange = props.onChange,
|
27
|
+
queryData = props.queryData;
|
28
|
+
var batchAttrMetric = useRef();
|
29
|
+
|
30
|
+
var _useState = useState(parseValue((value === null || value === void 0 ? void 0 : value.data) || {})),
|
31
|
+
selected = _useState[0],
|
32
|
+
setSelected = _useState[1];
|
33
|
+
|
34
|
+
useEffect(function () {
|
35
|
+
setSelected(parseValue((value === null || value === void 0 ? void 0 : value.data) || {}));
|
36
|
+
}, [value]); // 点击选择数据,显示抽屉
|
37
|
+
|
38
|
+
var show = function show() {
|
39
|
+
queryData();
|
40
|
+
batchAttrMetric.current.show({
|
41
|
+
showType: showType
|
42
|
+
});
|
43
|
+
};
|
44
|
+
|
45
|
+
useImperativeHandle(ref, function () {
|
46
|
+
return {
|
47
|
+
show: show
|
48
|
+
};
|
49
|
+
}); // 保存指标设置
|
50
|
+
|
51
|
+
var save = function save(showType, parm) {
|
52
|
+
rlog.debug('saveMarkSetting', showType, parm);
|
53
|
+
var newSelected = {};
|
54
|
+
Object.keys(parm).forEach(function (ciType) {
|
55
|
+
newSelected[ciType] = parm[ciType].map(function (id) {
|
56
|
+
var _id$split = id.split(':'),
|
57
|
+
type = _id$split[0],
|
58
|
+
code = _id$split[1];
|
59
|
+
|
60
|
+
return {
|
61
|
+
code: code,
|
62
|
+
type: type
|
63
|
+
};
|
64
|
+
});
|
65
|
+
});
|
66
|
+
onChange({
|
67
|
+
isCustom: true,
|
68
|
+
data: newSelected
|
69
|
+
});
|
70
|
+
};
|
71
|
+
|
72
|
+
return /*#__PURE__*/React.createElement(ModelAttrSelectDrawer, {
|
73
|
+
ref: batchAttrMetric,
|
74
|
+
value: selected,
|
75
|
+
dataSource: data,
|
76
|
+
limit: limit,
|
77
|
+
showType: showType,
|
78
|
+
onOk: save
|
79
|
+
});
|
80
|
+
});
|
81
|
+
MultipleTypeAttributeSelectDrawer.displayName = 'MultipleTypeAttributeSelectDrawer';
|
82
|
+
export default MultipleTypeAttributeSelectDrawer;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import
|
2
|
-
export default
|
1
|
+
import MultipleTypeAttributeSelectDrawer from "./components/MultipleTypeAttributeSelectDrawer";
|
2
|
+
export default MultipleTypeAttributeSelectDrawer;
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
4
4
|
import { DEFAULT_NODE_TAG_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
|
5
5
|
import BasicConfig from "./ResourceDisplay/BasicConfig";
|
6
|
+
import NodeAttrSettingDrawer from "./components/NodeAttrSettingDrawer";
|
6
7
|
var defaultCommonOptions = [{
|
7
8
|
value: 'graph:name',
|
8
9
|
label: '图片名称'
|
@@ -19,15 +20,17 @@ var defaultCommonOptions = [{
|
|
19
20
|
var NodeTag = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
20
21
|
var commonOptions = props.commonOptions;
|
21
22
|
return /*#__PURE__*/React.createElement(BasicConfig, _extends({
|
22
|
-
ref: ref
|
23
|
-
}, props, {
|
23
|
+
ref: ref,
|
24
24
|
limit: 3,
|
25
25
|
elementType: "node",
|
26
26
|
showType: "tag",
|
27
27
|
commonOptions: commonOptions || defaultCommonOptions,
|
28
28
|
defaultCommonConfig: DEFAULT_NODE_TAG_COMMON_CONFIG,
|
29
|
+
customSettingDrawer: function customSettingDrawer(params) {
|
30
|
+
return /*#__PURE__*/React.createElement(NodeAttrSettingDrawer, params);
|
31
|
+
},
|
29
32
|
type: "node"
|
30
|
-
}));
|
33
|
+
}, props));
|
31
34
|
});
|
32
35
|
NodeTag.displayName = 'NodeTag';
|
33
36
|
NodeTag.propTypes = {
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
4
4
|
import { DEFAULT_TIP_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
|
5
5
|
import BasicConfig from "./ResourceDisplay/BasicConfig";
|
6
|
+
import NodeAttrSettingDrawer from "./components/NodeAttrSettingDrawer";
|
6
7
|
var defaultCommonOptions = [{
|
7
8
|
value: 'attribute:display_name',
|
8
9
|
label: '显示名称'
|
@@ -19,14 +20,16 @@ var defaultCommonOptions = [{
|
|
19
20
|
var NodeTip = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
20
21
|
var commonOptions = props.commonOptions;
|
21
22
|
return /*#__PURE__*/React.createElement(BasicConfig, _extends({
|
22
|
-
ref: ref
|
23
|
-
}, props, {
|
23
|
+
ref: ref,
|
24
24
|
limit: 4,
|
25
25
|
elementType: "node",
|
26
26
|
showType: "tip",
|
27
27
|
commonOptions: commonOptions || defaultCommonOptions,
|
28
|
-
defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG
|
29
|
-
|
28
|
+
defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG,
|
29
|
+
customSettingDrawer: function customSettingDrawer(params) {
|
30
|
+
return /*#__PURE__*/React.createElement(NodeAttrSettingDrawer, params);
|
31
|
+
}
|
32
|
+
}, props));
|
30
33
|
});
|
31
34
|
NodeTip.propTypes = {
|
32
35
|
commonOptions: PropTypes.array
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
3
|
+
var _excluded = ["topo", "showType", "value"];
|
4
|
+
import React, { forwardRef, useEffect, useState } from 'react';
|
5
|
+
import PropTypes from 'prop-types';
|
6
|
+
import rlog from '@riil-frontend/component-topology-utils/lib/rlog';
|
7
|
+
import ModelAttrSelectDrawer from "../../../../components/ModelAttrSelectDrawer";
|
8
|
+
import { getNodeModels } from "../../ResourceViewAttributeSetting/nodeCiTypeAttrUtil";
|
9
|
+
/**
|
10
|
+
* 节点标注、悬浮框设置
|
11
|
+
*/
|
12
|
+
|
13
|
+
var NodeAttrSettingDrawer = /*#__PURE__*/forwardRef(function (props, ref) {
|
14
|
+
var topo = props.topo,
|
15
|
+
showType = props.showType,
|
16
|
+
value = props.value,
|
17
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
18
|
+
|
19
|
+
var _useState = useState([]),
|
20
|
+
data = _useState[0],
|
21
|
+
setData = _useState[1];
|
22
|
+
|
23
|
+
var queryData = function queryData() {
|
24
|
+
rlog.info('属性配置:加载数据');
|
25
|
+
var items = getNodeModels(topo);
|
26
|
+
setData(items);
|
27
|
+
};
|
28
|
+
|
29
|
+
return /*#__PURE__*/React.createElement(ModelAttrSelectDrawer, _extends({
|
30
|
+
ref: ref
|
31
|
+
}, otherProps, {
|
32
|
+
value: value,
|
33
|
+
data: data,
|
34
|
+
showType: showType,
|
35
|
+
queryData: queryData
|
36
|
+
}));
|
37
|
+
});
|
38
|
+
NodeAttrSettingDrawer.displayName = 'NodeAttrSettingDrawer';
|
39
|
+
NodeAttrSettingDrawer.propTypes = {};
|
40
|
+
export default NodeAttrSettingDrawer;
|
@@ -1,4 +1,88 @@
|
|
1
|
-
import { getCiTypesFromCiElements } from "../../../utils/topoData";
|
1
|
+
import { getCiTypesFromCiElements } from "../../../utils/topoData";
|
2
|
+
/**
|
3
|
+
* 获取节点标注、悬浮框配置
|
4
|
+
* @param {*} topo
|
5
|
+
* @returns
|
6
|
+
*/
|
7
|
+
|
8
|
+
export function getNodeModels(topo) {
|
9
|
+
var data = topo.store.getModelState('topoMod').data;
|
10
|
+
var ciTypeMap = topo.ciTyeCache.ciTypes;
|
11
|
+
return getNodeModSet();
|
12
|
+
|
13
|
+
function getNodeModSet() {
|
14
|
+
var ciTypes = getCiTypesFromCiElements(data.nodes);
|
15
|
+
return getMods(ciTypes);
|
16
|
+
}
|
17
|
+
/**
|
18
|
+
*
|
19
|
+
* @param {array} ciTypeCodes
|
20
|
+
* @returns
|
21
|
+
*/
|
22
|
+
|
23
|
+
|
24
|
+
function getMods(ciTypeCodes) {
|
25
|
+
return Object.keys(ciTypeMap).filter(function (item) {
|
26
|
+
return ciTypeCodes.includes(item);
|
27
|
+
}).map(function (key) {
|
28
|
+
var ciTypeObj = ciTypeMap[key];
|
29
|
+
return {
|
30
|
+
id: ciTypeObj.code,
|
31
|
+
label: ciTypeObj.displayName,
|
32
|
+
icon: ciTypeObj.icon,
|
33
|
+
list: ciModfilter(ciTypeObj, 'node')
|
34
|
+
};
|
35
|
+
});
|
36
|
+
}
|
37
|
+
/**
|
38
|
+
* 过滤ci元数据中的属性和指标,用于属性和指标显示设置
|
39
|
+
* @param {} ciTypeObj
|
40
|
+
* @returns
|
41
|
+
*/
|
42
|
+
|
43
|
+
|
44
|
+
function ciModfilter(ciTypeObj, type) {
|
45
|
+
var custom = [];
|
46
|
+
|
47
|
+
if (type === 'node') {
|
48
|
+
custom.push.apply(custom, [{
|
49
|
+
id: 'graph:name',
|
50
|
+
code: 'name',
|
51
|
+
name: '图片名称',
|
52
|
+
type: 'custom'
|
53
|
+
}, {
|
54
|
+
id: 'ciType:display_name',
|
55
|
+
code: 'ciType',
|
56
|
+
name: '资源类型',
|
57
|
+
type: 'custom'
|
58
|
+
}]);
|
59
|
+
}
|
60
|
+
|
61
|
+
var attributes = ciTypeObj.attributes.filter(function (attr) {
|
62
|
+
return !!attr.userVisible;
|
63
|
+
}).map(function (item) {
|
64
|
+
return {
|
65
|
+
type: 'attribute',
|
66
|
+
id: "attribute:" + item.code,
|
67
|
+
code: "attribute:" + item.code,
|
68
|
+
name: item.name,
|
69
|
+
typeName: '属性'
|
70
|
+
};
|
71
|
+
});
|
72
|
+
var metrics = ciTypeObj.metrics.map(function (item) {
|
73
|
+
return {
|
74
|
+
type: 'metric',
|
75
|
+
id: "metric:" + item.code,
|
76
|
+
code: "metric:" + item.code,
|
77
|
+
name: item.name,
|
78
|
+
typeName: '指标'
|
79
|
+
};
|
80
|
+
});
|
81
|
+
return [].concat(custom, attributes, metrics);
|
82
|
+
}
|
83
|
+
|
84
|
+
;
|
85
|
+
} // 资源类型含有属性和指标集合
|
2
86
|
|
3
87
|
export function getNodeCiModSet(params) {
|
4
88
|
var topo = params.topo;
|
@@ -29,8 +113,7 @@ export function getNodeCiModSet(params) {
|
|
29
113
|
icon: ciTypeObj.icon,
|
30
114
|
list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
|
31
115
|
};
|
32
|
-
});
|
33
|
-
|
116
|
+
});
|
34
117
|
return modSet;
|
35
118
|
}
|
36
119
|
/**
|
@@ -60,13 +143,7 @@ export function getNodeCiModSet(params) {
|
|
60
143
|
(_tags$data$code = tags.data[code]) === null || _tags$data$code === void 0 ? void 0 : _tags$data$code.map(function (item) {
|
61
144
|
tagArr.push(item.code + "-" + item.type);
|
62
145
|
});
|
63
|
-
}
|
64
|
-
// "过滤ci元数据中的属性和指标,用于属性和指标显示设置",
|
65
|
-
// globalSetting,
|
66
|
-
// tipArr,
|
67
|
-
// tagArr
|
68
|
-
// );
|
69
|
-
|
146
|
+
}
|
70
147
|
|
71
148
|
var custom = [];
|
72
149
|
|
@@ -8,12 +8,9 @@ export default function GraphViewPanel(props) {
|
|
8
8
|
|
9
9
|
var topo = props.topo,
|
10
10
|
hideBackgroundColor = props.hideBackgroundColor;
|
11
|
-
var displayConfig = topo.store.useModelState('displayConfig');
|
12
|
-
var themeName = displayConfig.canvasTheme || 'white';
|
13
11
|
|
14
12
|
var _useCanvasTheme = useCanvasTheme({
|
15
13
|
topo: topo,
|
16
|
-
themeName: themeName,
|
17
14
|
hideBackgroundColor: hideBackgroundColor
|
18
15
|
}),
|
19
16
|
canvasColor = _useCanvasTheme.canvasColor,
|
@@ -299,7 +299,8 @@ var Topology = function Topology(props) {
|
|
299
299
|
}), /*#__PURE__*/React.createElement(PortalContainer, {
|
300
300
|
ref: helpIconPortalRef
|
301
301
|
}, /*#__PURE__*/React.createElement(HelpIcon, {
|
302
|
-
topo: topo
|
302
|
+
topo: topo,
|
303
|
+
topoType: props.topoType
|
303
304
|
}))));
|
304
305
|
};
|
305
306
|
|
@@ -317,6 +318,8 @@ Topology.propTypes = {
|
|
317
318
|
onLineDelete: PropTypes.func,
|
318
319
|
onLoaded: PropTypes.func,
|
319
320
|
onLoad: PropTypes.func,
|
321
|
+
// 拓扑类型,用于分别控制进入编辑模式默认显示帮助信息
|
322
|
+
topoType: PropTypes.string,
|
320
323
|
|
321
324
|
/**
|
322
325
|
* @deprecated 工具栏
|
@@ -327,8 +330,8 @@ Topology.defaultProps = {
|
|
327
330
|
defaultEnterEditMode: false,
|
328
331
|
viewerProps: {},
|
329
332
|
editorProps: {},
|
330
|
-
topoContext: {}
|
331
|
-
|
333
|
+
topoContext: {},
|
334
|
+
topoType: 'default'
|
332
335
|
};
|
333
336
|
Topology.displayName = 'Topology';
|
334
337
|
export default Topology;
|
@@ -1,43 +1,18 @@
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
2
1
|
import React, { useEffect } from 'react';
|
3
|
-
|
4
|
-
name: 'white',
|
5
|
-
label: '白色',
|
6
|
-
color: '#FFFFFF'
|
7
|
-
}, {
|
8
|
-
name: 'lightblue',
|
9
|
-
label: '蓝色',
|
10
|
-
color: '#F9FBFF'
|
11
|
-
}, {
|
12
|
-
name: 'yellow',
|
13
|
-
label: '黄色',
|
14
|
-
color: '#FFFDE6'
|
15
|
-
}, {
|
16
|
-
name: 'green',
|
17
|
-
label: '绿色',
|
18
|
-
color: '#EAFFE8'
|
19
|
-
}, {
|
20
|
-
name: 'dark',
|
21
|
-
label: '深色',
|
22
|
-
color: '#031425'
|
23
|
-
}, {
|
24
|
-
name: 'poly',
|
25
|
-
label: 'Poly',
|
26
|
-
backgroundImage: '/img/topo/themes/poly.png'
|
27
|
-
}].reduce(function (map, item) {
|
28
|
-
var _extends2;
|
29
|
-
|
30
|
-
return _extends({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
|
31
|
-
}, {});
|
2
|
+
import useCanvasThemeConfig from "./useCanvasThemeConfig";
|
32
3
|
export default function useCanvasTheme(props) {
|
33
4
|
var topo = props.topo,
|
34
|
-
themeName = props.themeName,
|
35
5
|
hideBackgroundColor = props.hideBackgroundColor; // 拓扑图是否加载
|
36
6
|
|
37
7
|
var _topo$store$useModelS = topo.store.useModelState('topoMod'),
|
38
8
|
graphLoaded = _topo$store$useModelS.graphLoaded;
|
39
9
|
|
40
|
-
var
|
10
|
+
var _useCanvasThemeConfig = useCanvasThemeConfig({
|
11
|
+
topo: topo
|
12
|
+
}),
|
13
|
+
themeName = _useCanvasThemeConfig.themeName,
|
14
|
+
themeConfig = _useCanvasThemeConfig.themeConfig;
|
15
|
+
|
41
16
|
var canvasColor = hideBackgroundColor ? null : themeConfig.color;
|
42
17
|
var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
|
43
18
|
useEffect(function () {
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import React from 'react';
|
3
|
+
var themeMap = [{
|
4
|
+
name: 'white',
|
5
|
+
label: '白色',
|
6
|
+
color: '#FFFFFF',
|
7
|
+
editor: {
|
8
|
+
// 快捷帮助
|
9
|
+
helpIcon: {}
|
10
|
+
}
|
11
|
+
}, {
|
12
|
+
name: 'lightblue',
|
13
|
+
label: '蓝色',
|
14
|
+
color: '#F9FBFF'
|
15
|
+
}, // {
|
16
|
+
// name: 'yellow',
|
17
|
+
// label: '黄色',
|
18
|
+
// color: '#FFFDE6',
|
19
|
+
// },
|
20
|
+
// {
|
21
|
+
// name: 'green',
|
22
|
+
// label: '绿色',
|
23
|
+
// color: '#EAFFE8',
|
24
|
+
// },
|
25
|
+
{
|
26
|
+
name: 'dark',
|
27
|
+
label: '深色',
|
28
|
+
color: '#031425'
|
29
|
+
}, {
|
30
|
+
name: 'poly',
|
31
|
+
label: 'Poly',
|
32
|
+
backgroundImage: '/img/topo/themes/poly.png'
|
33
|
+
}].reduce(function (map, item) {
|
34
|
+
var _extends2;
|
35
|
+
|
36
|
+
return _extends({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
|
37
|
+
}, {});
|
38
|
+
|
39
|
+
function useCanvasThemeConfig(props) {
|
40
|
+
var topo = props.topo;
|
41
|
+
var displayConfig = topo.store.useModelState('displayConfig');
|
42
|
+
var themeName = displayConfig.canvasTheme || 'white';
|
43
|
+
var themeConfig = themeMap[themeName || 'white'];
|
44
|
+
return {
|
45
|
+
themeName: themeName,
|
46
|
+
themeConfig: themeConfig
|
47
|
+
};
|
48
|
+
}
|
49
|
+
|
50
|
+
export default useCanvasThemeConfig;
|
@@ -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 "11.0.
|
27
|
+
var version = typeof "11.0.6" === 'string' ? "11.0.6" : null;
|
28
28
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
29
29
|
/**
|
30
30
|
* 拓扑显示和编辑
|
@@ -70,7 +70,7 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
|
|
70
70
|
|
71
71
|
_proto.getNodeFiedldMap = function getNodeFiedldMap() {
|
72
72
|
var mtCodes = getNodeMtCodes(this.topoData);
|
73
|
-
return this.
|
73
|
+
return this.getFiedldMapByMtCodes(mtCodes, 'node');
|
74
74
|
}
|
75
75
|
/**
|
76
76
|
* 获得节点字段配置项map
|
@@ -79,8 +79,13 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
|
|
79
79
|
|
80
80
|
_proto.getLinkFidldMap = function getLinkFidldMap() {
|
81
81
|
var mtCodes = getLinkMtCodes(this.topoData);
|
82
|
-
return this.
|
83
|
-
}
|
82
|
+
return this.getFiedldMapByMtCodes(mtCodes, 'link');
|
83
|
+
}
|
84
|
+
/**
|
85
|
+
* 获取链路标注悬浮框属性配置数据
|
86
|
+
* @returns
|
87
|
+
*/
|
88
|
+
;
|
84
89
|
|
85
90
|
_proto.getLinkConfigItems = function getLinkConfigItems() {
|
86
91
|
var mtCodes = getLinkMtCodes(this.topoData);
|
@@ -110,49 +115,50 @@ var ElementTagTipConfig = /*#__PURE__*/function () {
|
|
110
115
|
// ]
|
111
116
|
};
|
112
117
|
|
113
|
-
_proto.
|
118
|
+
_proto.getFiedldMapByMtCodes = function getFiedldMapByMtCodes(mtCodes, type) {
|
114
119
|
var _this = this;
|
115
120
|
|
116
121
|
var map = {};
|
117
122
|
mtCodes.forEach(function (mtCode) {
|
118
123
|
var ciType = _this.mtCiTypeMap[mtCode];
|
119
|
-
|
120
|
-
var attributes = _this.topo.ciTyeCache.getCiType(ciType).attributes.filter(function (attr) {
|
121
|
-
return !!attr.userVisible;
|
122
|
-
});
|
123
|
-
|
124
|
-
var metrics = _this.getMtMetricModels(mtCode);
|
125
|
-
|
126
|
-
var extItems = type === 'node' ? [{
|
127
|
-
lavel: '图片名称',
|
128
|
-
value: 'graph:name',
|
129
|
-
typeName: null
|
130
|
-
}, {
|
131
|
-
lavel: '资源类型',
|
132
|
-
value: 'ciType:name',
|
133
|
-
typeName: null
|
134
|
-
}] : [];
|
135
|
-
map[mtCode] = [].concat(extItems, attributes.map(function (item) {
|
136
|
-
return {
|
137
|
-
type: 'attribute',
|
138
|
-
id: "attribute:" + item.code,
|
139
|
-
code: "attribute:" + item.code,
|
140
|
-
name: item.name,
|
141
|
-
typeName: '属性'
|
142
|
-
};
|
143
|
-
}), metrics.map(function (item) {
|
144
|
-
return {
|
145
|
-
type: 'metric',
|
146
|
-
id: "metric:" + item.code,
|
147
|
-
code: "metric:" + item.code,
|
148
|
-
name: item.name,
|
149
|
-
typeName: '指标'
|
150
|
-
};
|
151
|
-
}));
|
124
|
+
map[mtCode] = _this.getFiedldMapByType(ciType, type, mtCode);
|
152
125
|
});
|
153
126
|
return map;
|
154
127
|
};
|
155
128
|
|
129
|
+
_proto.getFiedldMapByType = function getFiedldMapByType(ciType, type, mtCode) {
|
130
|
+
var attributes = this.topo.ciTyeCache.getCiType(ciType).attributes.filter(function (attr) {
|
131
|
+
return !!attr.userVisible;
|
132
|
+
});
|
133
|
+
var metrics = this.getMtMetricModels(mtCode);
|
134
|
+
var extItems = type === 'node' ? [{
|
135
|
+
lavel: '图片名称',
|
136
|
+
value: 'graph:name',
|
137
|
+
typeName: null
|
138
|
+
}, {
|
139
|
+
lavel: '资源类型',
|
140
|
+
value: 'ciType:name',
|
141
|
+
typeName: null
|
142
|
+
}] : [];
|
143
|
+
return [].concat(extItems, attributes.map(function (item) {
|
144
|
+
return {
|
145
|
+
type: 'attribute',
|
146
|
+
id: "attribute:" + item.code,
|
147
|
+
code: "attribute:" + item.code,
|
148
|
+
name: item.name,
|
149
|
+
typeName: '属性'
|
150
|
+
};
|
151
|
+
}), metrics.map(function (item) {
|
152
|
+
return {
|
153
|
+
type: 'metric',
|
154
|
+
id: "metric:" + item.code,
|
155
|
+
code: "metric:" + item.code,
|
156
|
+
name: item.name,
|
157
|
+
typeName: '指标'
|
158
|
+
};
|
159
|
+
}));
|
160
|
+
};
|
161
|
+
|
156
162
|
_proto.getMtMetricModels = function getMtMetricModels(mtCode) {
|
157
163
|
var _this2 = this;
|
158
164
|
|
@@ -0,0 +1,97 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
|
10
|
+
var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
|
11
|
+
|
12
|
+
var _ModelAttrSelectDrawer = _interopRequireDefault(require("./ModelAttrSelectDrawer"));
|
13
|
+
|
14
|
+
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); }
|
15
|
+
|
16
|
+
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; }
|
17
|
+
|
18
|
+
function parseValue(value) {
|
19
|
+
var selected = {};
|
20
|
+
Object.keys(value).forEach(function (ciType) {
|
21
|
+
selected[ciType] = value[ciType].map(function (_ref) {
|
22
|
+
var type = _ref.type,
|
23
|
+
code = _ref.code;
|
24
|
+
return type + ":" + code;
|
25
|
+
});
|
26
|
+
});
|
27
|
+
return selected;
|
28
|
+
}
|
29
|
+
/**
|
30
|
+
* 资源显示属性、指标配置
|
31
|
+
*/
|
32
|
+
|
33
|
+
|
34
|
+
var MultipleTypeAttributeSelectDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
35
|
+
var value = props.value,
|
36
|
+
data = props.data,
|
37
|
+
showType = props.showType,
|
38
|
+
limit = props.limit,
|
39
|
+
onChange = props.onChange,
|
40
|
+
queryData = props.queryData;
|
41
|
+
var batchAttrMetric = (0, _react.useRef)();
|
42
|
+
|
43
|
+
var _useState = (0, _react.useState)(parseValue((value === null || value === void 0 ? void 0 : value.data) || {})),
|
44
|
+
selected = _useState[0],
|
45
|
+
setSelected = _useState[1];
|
46
|
+
|
47
|
+
(0, _react.useEffect)(function () {
|
48
|
+
setSelected(parseValue((value === null || value === void 0 ? void 0 : value.data) || {}));
|
49
|
+
}, [value]); // 点击选择数据,显示抽屉
|
50
|
+
|
51
|
+
var show = function show() {
|
52
|
+
queryData();
|
53
|
+
batchAttrMetric.current.show({
|
54
|
+
showType: showType
|
55
|
+
});
|
56
|
+
};
|
57
|
+
|
58
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
59
|
+
return {
|
60
|
+
show: show
|
61
|
+
};
|
62
|
+
}); // 保存指标设置
|
63
|
+
|
64
|
+
var save = function save(showType, parm) {
|
65
|
+
_rlog["default"].debug('saveMarkSetting', showType, parm);
|
66
|
+
|
67
|
+
var newSelected = {};
|
68
|
+
Object.keys(parm).forEach(function (ciType) {
|
69
|
+
newSelected[ciType] = parm[ciType].map(function (id) {
|
70
|
+
var _id$split = id.split(':'),
|
71
|
+
type = _id$split[0],
|
72
|
+
code = _id$split[1];
|
73
|
+
|
74
|
+
return {
|
75
|
+
code: code,
|
76
|
+
type: type
|
77
|
+
};
|
78
|
+
});
|
79
|
+
});
|
80
|
+
onChange({
|
81
|
+
isCustom: true,
|
82
|
+
data: newSelected
|
83
|
+
});
|
84
|
+
};
|
85
|
+
|
86
|
+
return /*#__PURE__*/_react["default"].createElement(_ModelAttrSelectDrawer["default"], {
|
87
|
+
ref: batchAttrMetric,
|
88
|
+
value: selected,
|
89
|
+
dataSource: data,
|
90
|
+
limit: limit,
|
91
|
+
showType: showType,
|
92
|
+
onOk: save
|
93
|
+
});
|
94
|
+
});
|
95
|
+
MultipleTypeAttributeSelectDrawer.displayName = 'MultipleTypeAttributeSelectDrawer';
|
96
|
+
var _default = MultipleTypeAttributeSelectDrawer;
|
97
|
+
exports["default"] = _default;
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
-
var
|
8
|
+
var _MultipleTypeAttributeSelectDrawer = _interopRequireDefault(require("./components/MultipleTypeAttributeSelectDrawer"));
|
9
9
|
|
10
|
-
var _default =
|
10
|
+
var _default = _MultipleTypeAttributeSelectDrawer["default"];
|
11
11
|
exports["default"] = _default;
|