@riil-frontend/component-topology 3.1.7 → 3.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -15
- package/build/index.css +1 -1
- package/build/index.js +8 -8
- package/demo/1/345/237/272/346/234/254//345/256/232/345/210/266/345/214/226/350/265/204/346/272/220/346/246/202/350/247/210.md +11 -0
- package/demo/1/345/237/272/346/234/254//350/207/252/345/256/232/344/271/211/346/240/207/346/263/250/345/222/214/346/202/254/346/265/256/346/241/206.md +11 -0
- package/demo/2/347/274/226/350/276/221/346/250/241/345/274/217//345/261/236/346/200/247/351/235/242/346/235/277.md +11 -0
- package/demo//346/240/207/346/263/250/345/222/214/346/202/254/346/265/256/346/241/206//350/207/252/345/256/232/344/271/211/345/261/236/346/200/247/345/222/214/346/214/207/346/240/207.md +1 -1
- package/es/core/components/DisplaySettingDrawer/hooks/useDisplaySetting.js +1 -3
- package/es/core/editor/components/settings/propertyViews/group/DataTab/RelateData.js +19 -6
- package/es/core/editor/components/settings/propertyViews/node/NodePropertyView.js +25 -160
- package/es/core/editor/components/settings/propertyViews/node/Setting/Setting.js +76 -0
- package/es/core/editor/components/settings/propertyViews/node/Setting/index.js +2 -0
- package/es/core/editor/components/settings/propertyViews/node/data/Data.js +125 -0
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/ResourceDetail.js +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/ResourceDetailPlugin.js +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/BaseInfo.js +10 -8
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/BaseInfoBlock.js +31 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/BlockBox.js +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/BlockBox.module.scss +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/ResourceOverviewMetric.js +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/SingleResourceStrategyLink.js +4 -2
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/index.js +15 -17
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/index.module.scss +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/useCiAttrAndMetricData.js +0 -0
- package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/index.js +0 -0
- package/es/core/viewer/components/plugins/ResourceDetail/index.module.scss +39 -30
- package/es/core/viewer/components/plugins/ViewerPlugin.js +2 -2
- package/es/models/customIcon.js +16 -11
- package/lib/core/components/DisplaySettingDrawer/hooks/useDisplaySetting.js +1 -3
- package/lib/core/editor/components/settings/propertyViews/group/DataTab/RelateData.js +20 -7
- package/lib/core/editor/components/settings/propertyViews/node/NodePropertyView.js +25 -171
- package/lib/core/editor/components/settings/propertyViews/node/Setting/Setting.js +95 -0
- package/lib/core/editor/components/settings/propertyViews/node/Setting/index.js +11 -0
- package/lib/core/editor/components/settings/propertyViews/node/data/Data.js +145 -0
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/ResourceDetail.js +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/ResourceDetailPlugin.js +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/BaseInfo.js +10 -8
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/BaseInfoBlock.js +42 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/BlockBox.js +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/BlockBox.module.scss +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/ResourceOverviewMetric.js +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/SingleResourceStrategyLink.js +4 -2
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/index.js +16 -17
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/index.module.scss +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/useCiAttrAndMetricData.js +0 -0
- package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/index.js +0 -0
- package/lib/core/viewer/components/plugins/ResourceDetail/index.module.scss +39 -30
- package/lib/core/viewer/components/plugins/ViewerPlugin.js +2 -2
- package/lib/models/customIcon.js +16 -11
- package/package.json +2 -2
- package/demo/1/345/237/272/346/234/254//350/207/252/345/256/232/344/271/211/345/261/236/346/200/247/345/222/214/346/214/207/346/240/207.md +0 -11
- package/es/core/viewer/components/plugins/BaseInfo/index.module.scss +0 -49
- package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawerPlugin.js +0 -37
- package/es/core/viewer/components/plugins/ResourceDetail/topoDrawer.js +0 -147
- package/lib/core/viewer/components/plugins/BaseInfo/index.module.scss +0 -49
- package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawerPlugin.js +0 -50
- package/lib/core/viewer/components/plugins/ResourceDetail/topoDrawer.js +0 -167
|
@@ -49,8 +49,6 @@ export default (function (props) {
|
|
|
49
49
|
|
|
50
50
|
var save = /*#__PURE__*/function () {
|
|
51
51
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
52
|
-
var _displaySettingProps$;
|
|
53
|
-
|
|
54
52
|
var values, prevDisplayConfig, displayConfig, displayConfigDispatchers, extraOnOk;
|
|
55
53
|
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
56
54
|
while (1) {
|
|
@@ -73,7 +71,7 @@ export default (function (props) {
|
|
|
73
71
|
displayConfigDispatchers.update(displayConfig); // 按配置执行
|
|
74
72
|
|
|
75
73
|
executeByConfig(displayConfig);
|
|
76
|
-
extraOnOk = (displaySettingProps === null || displaySettingProps === void 0 ? void 0 :
|
|
74
|
+
extraOnOk = (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onOk) || (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onDisplaySettingDrawerOk);
|
|
77
75
|
|
|
78
76
|
if (extraOnOk) {
|
|
79
77
|
extraOnOk();
|
|
@@ -2,8 +2,8 @@ import _Collapse from "@alifd/next/es/collapse";
|
|
|
2
2
|
import React, { useEffect } from 'react';
|
|
3
3
|
import GroupNodeList from "./GroupNodeList";
|
|
4
4
|
import GroupAddResourceButton from "./GroupAddResourceButton";
|
|
5
|
-
import CollapseFullheightStyles from "../../../common/GroupNodeList/CollapseFullheight.module.scss";
|
|
6
5
|
import CollapsePanel from "../../../../../../../components/collapse/Panel";
|
|
6
|
+
import CollapseFullheightStyles from "../../../common/GroupNodeList/CollapseFullheight.module.scss";
|
|
7
7
|
export default function GroupRelateData(props) {
|
|
8
8
|
var topo = props.topo,
|
|
9
9
|
topoEditApi = props.topoEditApi,
|
|
@@ -12,15 +12,28 @@ export default function GroupRelateData(props) {
|
|
|
12
12
|
editorProps = props.editorProps;
|
|
13
13
|
|
|
14
14
|
var createResourcePanel = function createResourcePanel() {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
var _groupDataViewProps$r;
|
|
16
|
+
|
|
17
|
+
var groupDataViewProps = editorProps.groupDataViewProps;
|
|
18
|
+
var headerExtra;
|
|
19
|
+
|
|
20
|
+
if ((groupDataViewProps === null || groupDataViewProps === void 0 ? void 0 : (_groupDataViewProps$r = groupDataViewProps.relateDataProps) === null || _groupDataViewProps$r === void 0 ? void 0 : _groupDataViewProps$r.headerExtra) !== undefined) {
|
|
21
|
+
var _groupDataViewProps$r2;
|
|
22
|
+
|
|
23
|
+
headerExtra = groupDataViewProps === null || groupDataViewProps === void 0 ? void 0 : (_groupDataViewProps$r2 = groupDataViewProps.relateDataProps) === null || _groupDataViewProps$r2 === void 0 ? void 0 : _groupDataViewProps$r2.headerExtra;
|
|
24
|
+
} else {
|
|
25
|
+
headerExtra = /*#__PURE__*/React.createElement(GroupAddResourceButton, {
|
|
19
26
|
topo: topo,
|
|
20
27
|
topoEdit: topoEditApi,
|
|
21
28
|
group: group,
|
|
22
29
|
groupData: values
|
|
23
|
-
})
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
34
|
+
key: "\u5173\u8054\u8D44\u6E90",
|
|
35
|
+
title: "\u5173\u8054\u8D44\u6E90",
|
|
36
|
+
extra: headerExtra,
|
|
24
37
|
className: CollapseFullheightStyles.panelFullHeight
|
|
25
38
|
}, /*#__PURE__*/React.createElement(GroupNodeList, {
|
|
26
39
|
topo: topo,
|
|
@@ -1,186 +1,51 @@
|
|
|
1
1
|
import _Tab from "@alifd/next/es/tab";
|
|
2
|
-
import _Input from "@alifd/next/es/input";
|
|
3
|
-
import _Form from "@alifd/next/es/form";
|
|
4
|
-
import _Field from "@alifd/next/es/field";
|
|
5
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
6
|
-
import
|
|
7
|
-
import _Select from "@alifd/next/es/select";
|
|
8
|
-
import React, { useEffect } from 'react';
|
|
9
|
-
import NodeSizeInput from "../../common/NodeSizeInput/NodeSizeInput";
|
|
10
|
-
import textStyles from "../../../../../common/text.module.scss";
|
|
11
|
-
import NodeIconSelect from "./NodeIconSelect";
|
|
12
|
-
import NodeRelateResourceButton from "./data/NodeRelateResourceButton";
|
|
13
|
-
import styles from "./NodePropertyView.module.scss";
|
|
14
|
-
import TabView from "../../common/tab/TabView";
|
|
3
|
+
import React from 'react';
|
|
15
4
|
import useHtElement from "../../../../../common/hooks/useHtElement";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return _extends({}, values, {
|
|
21
|
-
'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
|
|
22
|
-
'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
|
|
23
|
-
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function getBindType(values) {
|
|
28
|
-
if (values.tag) {
|
|
29
|
-
return 'resource';
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
if (values.attrObject.bindType) {
|
|
33
|
-
return values.attrObject.bindType;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
return 'none';
|
|
37
|
-
}
|
|
38
|
-
|
|
5
|
+
import TabView from "../../common/tab/TabView";
|
|
6
|
+
import Data from "./data/Data";
|
|
7
|
+
import styles from "./NodePropertyView.module.scss";
|
|
8
|
+
import Setting from "./Setting";
|
|
39
9
|
export default function NodePropertyView(props) {
|
|
40
10
|
var _topo$options$editor;
|
|
41
11
|
|
|
42
12
|
var topo = props.topo,
|
|
43
13
|
topoEditApi = props.topoEditApi,
|
|
44
14
|
values = props.values,
|
|
45
|
-
|
|
15
|
+
onChange = props.onChange,
|
|
46
16
|
editorProps = props.editorProps,
|
|
47
17
|
settingRuntimeState = props.settingRuntimeState;
|
|
48
|
-
var bindType = getBindType(values);
|
|
49
18
|
var node = useHtElement({
|
|
50
19
|
topo: topo,
|
|
51
20
|
id: values.id
|
|
52
21
|
});
|
|
53
22
|
|
|
54
|
-
var field = _Field.useField({
|
|
55
|
-
autoUnmount: false,
|
|
56
|
-
values: parseValues(values),
|
|
57
|
-
onChange: function onChange(name, value) {
|
|
58
|
-
var newValues = field.getValues();
|
|
59
|
-
|
|
60
|
-
_onChange(name, value, newValues);
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
useEffect(function () {
|
|
65
|
-
field.setValues(parseValues(values));
|
|
66
|
-
}, [values]);
|
|
67
|
-
|
|
68
|
-
var setBindType = function setBindType(newBindType) {
|
|
69
|
-
_onChange('attrObject.bindType', newBindType);
|
|
70
|
-
|
|
71
|
-
if (newBindType === 'topo') {//
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
var handleBindTopoChange = function handleBindTopoChange(value, data) {
|
|
76
|
-
// 设置名称为拓扑名称,清空自定义名称
|
|
77
|
-
node.a('name', data.label);
|
|
78
|
-
node.a('customName', null);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
23
|
var renderData = function renderData() {
|
|
82
|
-
|
|
83
|
-
return /*#__PURE__*/React.createElement(_Collapse, {
|
|
84
|
-
defaultExpandedKeys: ['相关资源'],
|
|
85
|
-
style: {
|
|
86
|
-
border: 'none'
|
|
87
|
-
}
|
|
88
|
-
}, /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
89
|
-
key: "\u76F8\u5173\u8D44\u6E90",
|
|
90
|
-
title: "\u76F8\u5173\u8D44\u6E90"
|
|
91
|
-
}, /*#__PURE__*/React.createElement(_Form, {
|
|
92
|
-
field: field,
|
|
93
|
-
labelAlign: "top"
|
|
94
|
-
}, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
95
|
-
label: "\u5173\u8054\u7C7B\u578B"
|
|
96
|
-
}, /*#__PURE__*/React.createElement(_Select, {
|
|
97
|
-
name: "bindType",
|
|
98
|
-
value: bindType,
|
|
99
|
-
style: {
|
|
100
|
-
width: '100%',
|
|
101
|
-
marginRight: 8
|
|
102
|
-
},
|
|
103
|
-
onChange: setBindType
|
|
104
|
-
}, /*#__PURE__*/React.createElement(Option, {
|
|
105
|
-
value: "none"
|
|
106
|
-
}, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
|
|
107
|
-
value: "resource"
|
|
108
|
-
}, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
|
|
109
|
-
value: "topo"
|
|
110
|
-
}, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
111
|
-
label: "\u5173\u8054\u8D44\u6E90"
|
|
112
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
113
|
-
style: {
|
|
114
|
-
display: 'flex'
|
|
115
|
-
}
|
|
116
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
117
|
-
className: textStyles.textEllipsis,
|
|
118
|
-
style: {
|
|
119
|
-
flex: 1,
|
|
120
|
-
paddingRight: 16,
|
|
121
|
-
color: '#4D6277'
|
|
122
|
-
},
|
|
123
|
-
title: values.tag ? values.name : null
|
|
124
|
-
}, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
|
|
125
|
-
node: values,
|
|
126
|
-
topo: topo,
|
|
127
|
-
topoEditApi: topoEditApi
|
|
128
|
-
}))), bindType === 'topo' && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
129
|
-
label: "\u5173\u8054\u62D3\u6251"
|
|
130
|
-
}, /*#__PURE__*/React.createElement(RelateTopoTree, {
|
|
131
|
-
name: "attrObject.bindTopo",
|
|
132
|
-
topo: topo,
|
|
133
|
-
onChange: handleBindTopoChange
|
|
134
|
-
})))));
|
|
24
|
+
return /*#__PURE__*/React.createElement(Data, props);
|
|
135
25
|
};
|
|
136
26
|
|
|
137
|
-
var
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
labelAlign: "top"
|
|
141
|
-
}, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
|
|
142
|
-
defaultExpandedKeys: ['显示设置'],
|
|
143
|
-
style: {
|
|
144
|
-
border: 'none'
|
|
145
|
-
}
|
|
146
|
-
}, /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
147
|
-
key: "\u663E\u793A\u8BBE\u7F6E",
|
|
148
|
-
title: "\u663E\u793A\u8BBE\u7F6E"
|
|
149
|
-
}, /*#__PURE__*/React.createElement(_Form.Item, {
|
|
150
|
-
label: "\u56FE\u7247\u540D\u79F0"
|
|
151
|
-
}, /*#__PURE__*/React.createElement(_Input, {
|
|
152
|
-
name: "attrObject.customName"
|
|
153
|
-
})), /*#__PURE__*/React.createElement(_Form.Item, {
|
|
154
|
-
label: "\u663E\u793A\u56FE\u7247"
|
|
155
|
-
}, /*#__PURE__*/React.createElement(NodeIconSelect, {
|
|
156
|
-
name: "image",
|
|
157
|
-
topo: topo
|
|
158
|
-
})), /*#__PURE__*/React.createElement(_Form.Item, {
|
|
159
|
-
label: "\u56FE\u7247\u5C3A\u5BF8"
|
|
160
|
-
}, /*#__PURE__*/React.createElement(NodeSizeInput, {
|
|
161
|
-
node: values.id,
|
|
162
|
-
value: {
|
|
163
|
-
width: values.width,
|
|
164
|
-
height: values.height
|
|
165
|
-
},
|
|
166
|
-
onChange: function onChange(size) {
|
|
167
|
-
_onChange('width', size.width);
|
|
168
|
-
|
|
169
|
-
_onChange('height', size.height);
|
|
170
|
-
},
|
|
171
|
-
settingRuntimeState: settingRuntimeState
|
|
172
|
-
}))))));
|
|
27
|
+
var renderSetting = function renderSetting() {
|
|
28
|
+
var nodeSettingViewProps = editorProps.nodeSettingViewProps;
|
|
29
|
+
return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
|
|
173
30
|
}; // 未绑定资源的节点,根据参数控制是否可关联资源
|
|
174
31
|
|
|
175
32
|
|
|
176
33
|
var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
|
|
34
|
+
var content;
|
|
35
|
+
|
|
36
|
+
if (showRelateResource) {
|
|
37
|
+
content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
|
|
38
|
+
title: "\u6570\u636E",
|
|
39
|
+
key: "1"
|
|
40
|
+
}, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
|
|
41
|
+
title: "\u8BBE\u7F6E",
|
|
42
|
+
key: "2"
|
|
43
|
+
}, renderSetting()));
|
|
44
|
+
} else {
|
|
45
|
+
content = renderSetting();
|
|
46
|
+
}
|
|
47
|
+
|
|
177
48
|
return /*#__PURE__*/React.createElement("div", {
|
|
178
49
|
className: styles.NodePropertyView
|
|
179
|
-
},
|
|
180
|
-
title: "\u6570\u636E",
|
|
181
|
-
key: "1"
|
|
182
|
-
}, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
|
|
183
|
-
title: "\u8BBE\u7F6E",
|
|
184
|
-
key: "2"
|
|
185
|
-
}, renderViewSetting())) : renderViewSetting());
|
|
50
|
+
}, content);
|
|
186
51
|
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import _Form from "@alifd/next/es/form";
|
|
2
|
+
import _Input from "@alifd/next/es/input";
|
|
3
|
+
import _Field from "@alifd/next/es/field";
|
|
4
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
5
|
+
import _Collapse from "@alifd/next/es/collapse";
|
|
6
|
+
import React, { useEffect } from 'react';
|
|
7
|
+
import NodeSizeInput from "../../../common/NodeSizeInput/NodeSizeInput";
|
|
8
|
+
import NodeIconSelect from "../NodeIconSelect";
|
|
9
|
+
var CollapsePanel = _Collapse.Panel;
|
|
10
|
+
|
|
11
|
+
function parseValues(values) {
|
|
12
|
+
return _extends({}, values, {
|
|
13
|
+
'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
|
|
14
|
+
'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
|
|
15
|
+
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default function Setting(props) {
|
|
20
|
+
var topo = props.topo,
|
|
21
|
+
values = props.values,
|
|
22
|
+
_onChange = props.onChange,
|
|
23
|
+
editorProps = props.editorProps,
|
|
24
|
+
settingRuntimeState = props.settingRuntimeState,
|
|
25
|
+
_props$showImageSetti = props.showImageSetting,
|
|
26
|
+
showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
|
|
27
|
+
|
|
28
|
+
var field = _Field.useField({
|
|
29
|
+
autoUnmount: false,
|
|
30
|
+
values: parseValues(values),
|
|
31
|
+
onChange: function onChange(name, value) {
|
|
32
|
+
var newValues = field.getValues();
|
|
33
|
+
|
|
34
|
+
_onChange(name, value, newValues);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
useEffect(function () {
|
|
39
|
+
field.setValues(parseValues(values));
|
|
40
|
+
}, [values]);
|
|
41
|
+
return /*#__PURE__*/React.createElement(_Form, {
|
|
42
|
+
field: field,
|
|
43
|
+
labelAlign: "top"
|
|
44
|
+
}, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
|
|
45
|
+
defaultExpandedKeys: ['显示设置'],
|
|
46
|
+
style: {
|
|
47
|
+
border: 'none'
|
|
48
|
+
}
|
|
49
|
+
}, /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
50
|
+
key: "\u663E\u793A\u8BBE\u7F6E",
|
|
51
|
+
title: "\u663E\u793A\u8BBE\u7F6E"
|
|
52
|
+
}, /*#__PURE__*/React.createElement(_Form.Item, {
|
|
53
|
+
label: "\u56FE\u7247\u540D\u79F01"
|
|
54
|
+
}, /*#__PURE__*/React.createElement(_Input, {
|
|
55
|
+
name: "attrObject.customName"
|
|
56
|
+
})), showImageSetting && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
57
|
+
label: "\u663E\u793A\u56FE\u7247"
|
|
58
|
+
}, /*#__PURE__*/React.createElement(NodeIconSelect, {
|
|
59
|
+
name: "image",
|
|
60
|
+
topo: topo
|
|
61
|
+
})), /*#__PURE__*/React.createElement(_Form.Item, {
|
|
62
|
+
label: "\u56FE\u7247\u5C3A\u5BF8"
|
|
63
|
+
}, /*#__PURE__*/React.createElement(NodeSizeInput, {
|
|
64
|
+
node: values.id,
|
|
65
|
+
value: {
|
|
66
|
+
width: values.width,
|
|
67
|
+
height: values.height
|
|
68
|
+
},
|
|
69
|
+
onChange: function onChange(size) {
|
|
70
|
+
_onChange('width', size.width);
|
|
71
|
+
|
|
72
|
+
_onChange('height', size.height);
|
|
73
|
+
},
|
|
74
|
+
settingRuntimeState: settingRuntimeState
|
|
75
|
+
}))))));
|
|
76
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import _Form from "@alifd/next/es/form";
|
|
2
|
+
import _Field from "@alifd/next/es/field";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
4
|
+
import _Collapse from "@alifd/next/es/collapse";
|
|
5
|
+
import _Select from "@alifd/next/es/select";
|
|
6
|
+
import React, { useEffect } from 'react';
|
|
7
|
+
import useHtElement from "../../../../../../common/hooks/useHtElement";
|
|
8
|
+
import textStyles from "../../../../../../common/text.module.scss";
|
|
9
|
+
import NodeRelateResourceButton from "./NodeRelateResourceButton";
|
|
10
|
+
var Option = _Select.Option;
|
|
11
|
+
var CollapsePanel = _Collapse.Panel;
|
|
12
|
+
|
|
13
|
+
function parseValues(values) {
|
|
14
|
+
return _extends({}, values, {
|
|
15
|
+
'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
|
|
16
|
+
'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
|
|
17
|
+
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function getBindType(values) {
|
|
22
|
+
if (values.tag) {
|
|
23
|
+
return 'resource';
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
if (values.attrObject.bindType) {
|
|
27
|
+
return values.attrObject.bindType;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return 'none';
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default function Data(props) {
|
|
34
|
+
var topo = props.topo,
|
|
35
|
+
topoEditApi = props.topoEditApi,
|
|
36
|
+
values = props.values,
|
|
37
|
+
_onChange = props.onChange,
|
|
38
|
+
editorProps = props.editorProps;
|
|
39
|
+
var bindType = getBindType(values);
|
|
40
|
+
var node = useHtElement({
|
|
41
|
+
topo: topo,
|
|
42
|
+
id: values.id
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
var field = _Field.useField({
|
|
46
|
+
autoUnmount: false,
|
|
47
|
+
values: parseValues(values),
|
|
48
|
+
onChange: function onChange(name, value) {
|
|
49
|
+
var newValues = field.getValues();
|
|
50
|
+
|
|
51
|
+
_onChange(name, value, newValues);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
field.setValues(parseValues(values));
|
|
57
|
+
}, [values]);
|
|
58
|
+
|
|
59
|
+
var setBindType = function setBindType(newBindType) {
|
|
60
|
+
_onChange('attrObject.bindType', newBindType);
|
|
61
|
+
|
|
62
|
+
if (newBindType === 'topo') {//
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var handleBindTopoChange = function handleBindTopoChange(value, data) {
|
|
67
|
+
// 设置名称为拓扑名称,清空自定义名称
|
|
68
|
+
node.a('name', data.label);
|
|
69
|
+
node.a('customName', null);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
|
|
73
|
+
return /*#__PURE__*/React.createElement(_Collapse, {
|
|
74
|
+
defaultExpandedKeys: ['相关资源'],
|
|
75
|
+
style: {
|
|
76
|
+
border: 'none'
|
|
77
|
+
}
|
|
78
|
+
}, /*#__PURE__*/React.createElement(CollapsePanel, {
|
|
79
|
+
key: "\u76F8\u5173\u8D44\u6E90",
|
|
80
|
+
title: "\u76F8\u5173\u8D44\u6E90"
|
|
81
|
+
}, /*#__PURE__*/React.createElement(_Form, {
|
|
82
|
+
field: field,
|
|
83
|
+
labelAlign: "top"
|
|
84
|
+
}, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
85
|
+
label: "\u5173\u8054\u7C7B\u578B"
|
|
86
|
+
}, /*#__PURE__*/React.createElement(_Select, {
|
|
87
|
+
name: "bindType",
|
|
88
|
+
value: bindType,
|
|
89
|
+
style: {
|
|
90
|
+
width: '100%',
|
|
91
|
+
marginRight: 8
|
|
92
|
+
},
|
|
93
|
+
onChange: setBindType
|
|
94
|
+
}, /*#__PURE__*/React.createElement(Option, {
|
|
95
|
+
value: "none"
|
|
96
|
+
}, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
|
|
97
|
+
value: "resource"
|
|
98
|
+
}, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
|
|
99
|
+
value: "topo"
|
|
100
|
+
}, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
101
|
+
label: "\u5173\u8054\u8D44\u6E90"
|
|
102
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
103
|
+
style: {
|
|
104
|
+
display: 'flex'
|
|
105
|
+
}
|
|
106
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
107
|
+
className: textStyles.textEllipsis,
|
|
108
|
+
style: {
|
|
109
|
+
flex: 1,
|
|
110
|
+
paddingRight: 16,
|
|
111
|
+
color: '#4D6277'
|
|
112
|
+
},
|
|
113
|
+
title: values.tag ? values.name : null
|
|
114
|
+
}, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
|
|
115
|
+
node: values,
|
|
116
|
+
topo: topo,
|
|
117
|
+
topoEditApi: topoEditApi
|
|
118
|
+
}))), bindType === 'topo' && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
|
|
119
|
+
label: "\u5173\u8054\u62D3\u6251"
|
|
120
|
+
}, /*#__PURE__*/React.createElement(RelateTopoTree, {
|
|
121
|
+
name: "attrObject.bindTopo",
|
|
122
|
+
topo: topo,
|
|
123
|
+
onChange: handleBindTopoChange
|
|
124
|
+
})))));
|
|
125
|
+
}
|
|
@@ -20,7 +20,7 @@ import { updateEdgeExpanded } from "../utils/edgeUtil";
|
|
|
20
20
|
import PluginManager from "./PluginManager";
|
|
21
21
|
import topoFactory from "./topoFactory"; // eslint-disable-next-line no-undef
|
|
22
22
|
|
|
23
|
-
var version = typeof "3.1.
|
|
23
|
+
var version = typeof "3.1.10" === 'string' ? "3.1.10" : null;
|
|
24
24
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
|
25
25
|
/**
|
|
26
26
|
* 拓扑显示和编辑
|
|
File without changes
|
package/es/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/ResourceDetailPlugin.js
RENAMED
|
File without changes
|
|
@@ -110,17 +110,19 @@ export default function BaseInfo(props) {
|
|
|
110
110
|
var topo = props.topo,
|
|
111
111
|
type = props.type,
|
|
112
112
|
data = props.data,
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
baseInfo = props.baseInfo,
|
|
114
|
+
renderContent = props.renderContent;
|
|
115
|
+
var content = renderContent ? renderContent({
|
|
116
|
+
type: type,
|
|
117
|
+
data: data,
|
|
118
|
+
AttributeItem: AttributeItem
|
|
119
|
+
}) : null;
|
|
115
120
|
|
|
116
|
-
if (
|
|
117
|
-
content =
|
|
121
|
+
if (!content) {
|
|
122
|
+
content = /*#__PURE__*/React.createElement(BaseInfoContent, {
|
|
118
123
|
type: type,
|
|
119
|
-
|
|
120
|
-
AttributeItem: AttributeItem
|
|
124
|
+
data: baseInfo
|
|
121
125
|
});
|
|
122
|
-
} else {
|
|
123
|
-
content = /*#__PURE__*/React.createElement(BaseInfoContent, props);
|
|
124
126
|
}
|
|
125
127
|
|
|
126
128
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import BaseInfo from "./BaseInfo";
|
|
3
|
+
import BlockBox from "./BlockBox";
|
|
4
|
+
import SingleResourceStrategyLink from "./SingleResourceStrategyLink";
|
|
5
|
+
export default function BaseInfoBlock(props) {
|
|
6
|
+
var topo = props.topo,
|
|
7
|
+
data = props.data,
|
|
8
|
+
ciTypeMeta = props.ciTypeMeta,
|
|
9
|
+
headerExtra = props.headerExtra,
|
|
10
|
+
renderContent = props.renderContent,
|
|
11
|
+
baseInfo = props.baseInfo;
|
|
12
|
+
var id = data.id,
|
|
13
|
+
ciType = data.ciType,
|
|
14
|
+
type = data.type,
|
|
15
|
+
name = data.name;
|
|
16
|
+
return /*#__PURE__*/React.createElement(BlockBox, {
|
|
17
|
+
headerTitle: "\u57FA\u672C\u4FE1\u606F",
|
|
18
|
+
headerExtra: headerExtra ? headerExtra(props) : ciType === 'network_link' && /*#__PURE__*/React.createElement(SingleResourceStrategyLink, {
|
|
19
|
+
id: id,
|
|
20
|
+
ciType: ciType,
|
|
21
|
+
name: name
|
|
22
|
+
})
|
|
23
|
+
}, /*#__PURE__*/React.createElement(BaseInfo, {
|
|
24
|
+
topo: topo,
|
|
25
|
+
type: type,
|
|
26
|
+
data: data,
|
|
27
|
+
ciTypeMeta: ciTypeMeta,
|
|
28
|
+
renderContent: renderContent,
|
|
29
|
+
baseInfo: baseInfo
|
|
30
|
+
}));
|
|
31
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -3,9 +3,11 @@ import { Link } from 'react-router-dom';
|
|
|
3
3
|
export default function SingleResourceStrategyLink(props) {
|
|
4
4
|
var id = props.id,
|
|
5
5
|
ciType = props.ciType,
|
|
6
|
-
name = props.name
|
|
6
|
+
name = props.name,
|
|
7
|
+
_props$label = props.label,
|
|
8
|
+
label = _props$label === void 0 ? '监控策略' : _props$label;
|
|
7
9
|
var url = "/default/singleResourceStrategy/" + id + "?title=" + encodeURIComponent(name) + "-\u76D1\u63A7\u914D\u7F6E&ciId=" + id + "&ciType=" + ciType + "&ciName=" + encodeURIComponent(name);
|
|
8
10
|
return /*#__PURE__*/React.createElement(Link, {
|
|
9
11
|
to: url
|
|
10
|
-
},
|
|
12
|
+
}, label);
|
|
11
13
|
}
|