@riil-frontend/component-topology 6.0.20 → 7.0.0-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/build/1.js +1 -1
  2. package/build/index.css +1 -1
  3. package/build/index.js +12 -12
  4. package/es/core/components/TopoView/topoView.js +13 -1
  5. package/es/core/editor/components/Toolbar/widgets/FontStyleButton.js +1 -9
  6. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +10 -11
  7. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/nodeTag.js +12 -13
  8. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +4 -4
  9. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/globalTag.js +16 -9
  10. package/es/core/editor/hooks/useUpdateHtTopoDefaultTagStyle.js +2 -2
  11. package/es/core/models/TopoApp.js +1 -1
  12. package/es/core/store/coreModels.js +2 -0
  13. package/es/core/store/models/selection.js +3 -1
  14. package/es/core/store/models/viewer/resourceDetail.js +31 -0
  15. package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetail.js +2 -5
  16. package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +61 -43
  17. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +136 -0
  18. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +9 -16
  19. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverviewMetric.js +1 -1
  20. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss +119 -117
  21. package/es/networkTopo/store/topoCenter.js +27 -4
  22. package/es/style.js +1 -1
  23. package/lib/core/components/TopoView/topoView.js +13 -1
  24. package/lib/core/editor/components/Toolbar/widgets/FontStyleButton.js +1 -9
  25. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +10 -12
  26. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/nodeTag.js +12 -14
  27. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +4 -4
  28. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/globalTag.js +16 -10
  29. package/lib/core/editor/hooks/useUpdateHtTopoDefaultTagStyle.js +2 -2
  30. package/lib/core/models/TopoApp.js +1 -1
  31. package/lib/core/store/coreModels.js +3 -0
  32. package/lib/core/store/models/selection.js +3 -1
  33. package/lib/core/store/models/viewer/resourceDetail.js +40 -0
  34. package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetail.js +2 -5
  35. package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js +60 -46
  36. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +156 -0
  37. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +9 -16
  38. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverviewMetric.js +1 -1
  39. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss +119 -117
  40. package/lib/networkTopo/store/topoCenter.js +27 -4
  41. package/lib/style.js +1 -1
  42. package/package.json +2 -2
@@ -149,7 +149,19 @@ var Topology = function Topology(props) {
149
149
  topo.selectionModel.init();
150
150
  topoDispatchers.update({
151
151
  graphLoaded: true
152
- });
152
+ }); // url选中元素
153
+
154
+ var _topo$store$getModelS = topo.store.getModelState('selection'),
155
+ initSelectionId = _topo$store$getModelS.initSelectionId;
156
+
157
+ if (initSelectionId) {
158
+ var ele = topo.getHtTopo().getGraphView().dm().getDataByTag(initSelectionId);
159
+ topo.getHtTopo().getGraphView().sm().setSelection([ele]);
160
+ var selectionDispatchers = topo.store.getModelDispatchers('selection');
161
+ selectionDispatchers.update({
162
+ initSelectionId: null
163
+ });
164
+ }
153
165
 
154
166
  if (onLoaded) {
155
167
  onLoaded(topoData);
@@ -52,16 +52,8 @@ function FontStyleButton(props) {
52
52
  underline: underline
53
53
  })),
54
54
  value = _useState2[0],
55
- setValue = _useState2[1]; // 选中的元素
55
+ setValue = _useState2[1];
56
56
 
57
-
58
- var selection = topo.selectionModel.useHtSelection();
59
- useEffect(function () {
60
- var containText = selection.filter(function (ele) {
61
- return isText(ele);
62
- }).length;
63
- setDisabled(!containText);
64
- }, [selection]);
65
57
  useEffect(function () {
66
58
  setValue(buildValue({
67
59
  bold: bold,
@@ -4,21 +4,20 @@ var _excluded = ["color", "background", "opacity", "bold", "italic"];
4
4
  import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
5
5
  import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
6
6
  export function getTextStyle(element) {
7
- var underline = null;
8
7
  return _extends({
9
8
  color: parseColor(element.a('edge.tag.color')),
10
9
  fontFamily: element.a('edge.tag.fontFamily') || '微软雅黑',
11
- underline: underline
10
+ bold: !!element.a('edge.tag.fontBold'),
11
+ itatic: !!element.a('edge.tag.fontItalic')
12
12
  }, parseBackground(element.a('edge.tag.background')));
13
13
  }
14
14
  export function setTextStyle(element, style, topo) {
15
- var _fontStyleUtil$remove = fontStyleUtil.removeBoldItalic(style),
16
- color = _fontStyleUtil$remove.color,
17
- background = _fontStyleUtil$remove.background,
18
- opacity = _fontStyleUtil$remove.opacity,
19
- bold = _fontStyleUtil$remove.bold,
20
- italic = _fontStyleUtil$remove.italic,
21
- otherStyle = _objectWithoutPropertiesLoose(_fontStyleUtil$remove, _excluded);
15
+ var color = style.color,
16
+ background = style.background,
17
+ opacity = style.opacity,
18
+ bold = style.bold,
19
+ italic = style.italic,
20
+ otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
22
21
 
23
22
  var tagStyle = _extends({}, otherStyle);
24
23
 
@@ -55,11 +54,11 @@ export function setTextStyle(element, style, topo) {
55
54
  */
56
55
 
57
56
  export function getEnabledFields(element) {
58
- return ['fontFamily', 'color', 'background', 'opacity'];
57
+ return ['fontFamily', 'color', 'background', 'opacity', 'fontSize', 'bold', 'italic'];
59
58
  }
60
59
  export function getFieldDisabled(element) {
61
60
  return {
62
- fontSize: true
61
+ fontSize: false
63
62
  };
64
63
  }
65
64
  export default {
@@ -4,20 +4,19 @@ var _excluded = ["color", "background", "opacity", "bold", "italic"];
4
4
  import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
5
5
  import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
6
6
  export function getTextStyle(element) {
7
- var underline = null;
7
+ var underline = !!element.a('node.tag.fontUnderline');
8
8
  return _extends({
9
9
  color: parseColor(element.a('ht.color')),
10
10
  underline: underline
11
11
  }, fontStyleUtil.toMap(element.a('ht.font')), parseBackground(element.a('ht.background')));
12
12
  }
13
13
  export function setTextStyle(element, style, topo) {
14
- var _fontStyleUtil$remove = fontStyleUtil.removeBoldItalic(style),
15
- color = _fontStyleUtil$remove.color,
16
- background = _fontStyleUtil$remove.background,
17
- opacity = _fontStyleUtil$remove.opacity,
18
- bold = _fontStyleUtil$remove.bold,
19
- italic = _fontStyleUtil$remove.italic,
20
- otherStyle = _objectWithoutPropertiesLoose(_fontStyleUtil$remove, _excluded);
14
+ var color = style.color,
15
+ background = style.background,
16
+ opacity = style.opacity,
17
+ bold = style.bold,
18
+ italic = style.italic,
19
+ otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
21
20
 
22
21
  var tagStyle = _extends({}, otherStyle);
23
22
 
@@ -48,7 +47,7 @@ export function setTextStyle(element, style, topo) {
48
47
  }
49
48
  }
50
49
  export function getEnabledFields(element) {
51
- return ['fontFamily', 'color', 'background', 'opacity'];
50
+ return ['fontFamily', 'color', 'background', 'opacity', 'fontSize', 'bold', 'italic', 'underline'];
52
51
  }
53
52
  /**
54
53
  * 获得字段是否禁用
@@ -59,10 +58,10 @@ export function getEnabledFields(element) {
59
58
 
60
59
  export function getFieldDisabled(element) {
61
60
  return {
62
- fontSize: true,
63
- bold: true,
64
- italic: true,
65
- underline: true
61
+ fontSize: false,
62
+ bold: false,
63
+ italic: false,
64
+ underline: false
66
65
  };
67
66
  }
68
67
  export default {
@@ -4,10 +4,10 @@ var _excluded = ["Component"];
4
4
  import React, { useMemo } from 'react';
5
5
  import { setGlobalTagStyle, useValues } from "./globalTag";
6
6
  var fieldDisabled = {
7
- fontSize: true,
8
- bold: true,
9
- italic: true,
10
- underline: true
7
+ fontSize: false,
8
+ bold: false,
9
+ italic: false,
10
+ underline: false
11
11
  };
12
12
 
13
13
  function GlobalTagStyleSetting(props) {
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  var _excluded = ["color", "background", "opacity"],
4
- _excluded2 = ["color", "background", "opacity", "bold", "italic"];
4
+ _excluded2 = ["color", "background", "opacity", "bold", "italic", "underline"];
5
5
  import fontStyleUtil from "../../../../../settings/common/text/fontStyleUtil";
6
6
  import { formatBackgroundRgbaColor, parseBackground, formatRgbaColor } from "../ElementTextStyleSetting/colorUtil";
7
7
  var defaultStyle = {
@@ -15,7 +15,10 @@ export function useValues(topo) {
15
15
  return _extends({
16
16
  color: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.color) || defaultStyle.color,
17
17
  fontFamily: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontFamily) || defaultStyle.fontFamily,
18
- fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize
18
+ fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize,
19
+ bold: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.bold,
20
+ italic: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.italic,
21
+ underline: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.underline
19
22
  }, parseBackground(nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.background));
20
23
  }
21
24
  export var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
@@ -61,13 +64,13 @@ function buildStyle(styleData, prevTagStyle) {
61
64
  }
62
65
 
63
66
  function buildGlobalStyle(styleData) {
64
- var _fontStyleUtil$remove = fontStyleUtil.removeBoldItalic(styleData),
65
- color = _fontStyleUtil$remove.color,
66
- background = _fontStyleUtil$remove.background,
67
- opacity = _fontStyleUtil$remove.opacity,
68
- bold = _fontStyleUtil$remove.bold,
69
- italic = _fontStyleUtil$remove.italic,
70
- otherStyle = _objectWithoutPropertiesLoose(_fontStyleUtil$remove, _excluded2);
67
+ var color = styleData.color,
68
+ background = styleData.background,
69
+ opacity = styleData.opacity,
70
+ bold = styleData.bold,
71
+ italic = styleData.italic,
72
+ underline = styleData.underline,
73
+ otherStyle = _objectWithoutPropertiesLoose(styleData, _excluded2);
71
74
 
72
75
  var tagStyle = _extends({}, otherStyle);
73
76
 
@@ -83,6 +86,10 @@ function buildGlobalStyle(styleData) {
83
86
  tagStyle.fontItalic = italic;
84
87
  }
85
88
 
89
+ if ('underline' in styleData) {
90
+ tagStyle.fontUnderline = underline;
91
+ }
92
+
86
93
  if ('background' in styleData) {
87
94
  // 背景颜色
88
95
  tagStyle.background = formatRgbaColor(background);
@@ -13,12 +13,12 @@ function useUpdateHtTopoDefaultTagStyle(props) {
13
13
  var nodeLabelStyle = displayConfig.nodeLabelStyle,
14
14
  defaultEdgeLabelStyle = displayConfig.defaultEdgeLabelStyle;
15
15
  useEffect(function () {
16
- if (nodeLabelStyle) {
16
+ if (nodeLabelStyle && topo.getHtTopo().setDefaultNodeLabelStyle) {
17
17
  topo.getHtTopo().setDefaultNodeLabelStyle(nodeLabelStyle);
18
18
  }
19
19
  }, [nodeLabelStyle]);
20
20
  useEffect(function () {
21
- if (defaultEdgeLabelStyle) {
21
+ if (defaultEdgeLabelStyle && topo.getHtTopo().setDefaultEdgeTagStyle) {
22
22
  topo.getHtTopo().setDefaultEdgeTagStyle(defaultEdgeLabelStyle);
23
23
  }
24
24
  }, [defaultEdgeLabelStyle]);
@@ -23,7 +23,7 @@ import topoFactory from "./topoFactory";
23
23
  import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
24
24
  import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
25
25
 
26
- var version = typeof "6.0.20" === 'string' ? "6.0.20" : null;
26
+ var version = typeof "7.0.0-dev.2" === 'string' ? "7.0.0-dev.2" : null;
27
27
  console.info("\u62D3\u6251\u7248\u672C: " + version);
28
28
  /**
29
29
  * 拓扑显示和编辑
@@ -11,6 +11,7 @@ import selection from "./models/selection"; // 显示模式
11
11
 
12
12
  import topoAlarm from "./models/topoAlarm";
13
13
  import displayConfig from "./models/displayConfig";
14
+ import resourceDetail from "./models/viewer/resourceDetail";
14
15
  import topoBaseInfoOverview from "./models/topoBaseInfoOverview";
15
16
  import lock from "./models/viewer/lock";
16
17
  export default {
@@ -26,6 +27,7 @@ export default {
26
27
  // 显示模式
27
28
  topoAlarm: topoAlarm,
28
29
  displayConfig: displayConfig,
30
+ resourceDetail: resourceDetail,
29
31
  topoBaseInfoOverview: topoBaseInfoOverview,
30
32
  lock: lock
31
33
  };
@@ -10,7 +10,9 @@ export default {
10
10
  // 定义 model 的初始 state
11
11
  state: {
12
12
  selection: [],
13
- selectionIds: []
13
+ selectionIds: [],
14
+ initSelectionId: null // 初始化选中元素
15
+
14
16
  },
15
17
  // 定义改变该模型状态的纯函数
16
18
  reducers: {
@@ -0,0 +1,31 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+
3
+ /**
4
+ * 资源概览
5
+ */
6
+ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
7
+ export default {
8
+ // 定义 model 的初始 state
9
+ state: {
10
+ visible: false,
11
+ id: null // 资源id
12
+
13
+ },
14
+ // 定义改变该模型状态的纯函数
15
+ reducers: {
16
+ update: function update(prevState, payload) {
17
+ return _extends({}, prevState, payload);
18
+ },
19
+ reset: function reset(prevState, payload) {
20
+ return {
21
+ visible: false,
22
+ id: null // 资源id
23
+
24
+ };
25
+ }
26
+ },
27
+ // 定义处理该模型副作用的函数
28
+ effects: function effects(dispatch) {
29
+ return {};
30
+ }
31
+ };
@@ -11,10 +11,7 @@ export default function ResourceDetail(props) {
11
11
  var topo = props.topo,
12
12
  userId = props.userId,
13
13
  activeData = props.activeData,
14
- resourceData = props.resourceData; // {/* <Tab.Item title="操作" key="2">操作</Tab.Item>
15
- // <Tab.Item title="网络信息表" key="3">网络信息表</Tab.Item>
16
- // <Tab.Item title="Web工作台" key="4">Web工作台</Tab.Item> */}
17
-
14
+ resourceData = props.resourceData;
18
15
  var tabBodys = [{
19
16
  title: '资源概览',
20
17
  content: /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
@@ -33,7 +30,7 @@ export default function ResourceDetail(props) {
33
30
  data: resourceData,
34
31
  topo: topo
35
32
  }),
36
- visible: activeData.type === 'node' && !!((_topo$viewProps = topo.viewProps) !== null && _topo$viewProps !== void 0 && (_topo$viewProps$topoC = _topo$viewProps.topoContext) !== null && _topo$viewProps$topoC !== void 0 && _topo$viewProps$topoC.isNetworkTopo)
33
+ visible: resourceData.type === 'node' && !!((_topo$viewProps = topo.viewProps) !== null && _topo$viewProps !== void 0 && (_topo$viewProps$topoC = _topo$viewProps.topoContext) !== null && _topo$viewProps$topoC !== void 0 && _topo$viewProps$topoC.isNetworkTopo)
37
34
  }].filter(function (item) {
38
35
  return item.visible !== false;
39
36
  });
@@ -4,19 +4,16 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
4
4
  import _regeneratorRuntime from "@babel/runtime/regenerator";
5
5
  import { TopoEvent } from '@riil-frontend/component-topology-graph';
6
6
  import PropTypes from 'prop-types';
7
- import React, { useEffect, useId, useState } from 'react';
8
- import Tab from "../../../../../components/FullheightTab";
7
+ import React, { useEffect, useMemo, useState } from 'react';
9
8
  import service from "../../../../services/overview";
10
- import ClusterMemberTable from "./components/ClusterMemberTable";
11
9
  import Title from "./components/DrawerTitle";
12
- import ResourceOverview from "./components/ResourceOverview";
13
- import WebConsole from "./components/WebConsole/WebConsoleContainer";
14
10
  import styles from "./index.module.scss";
15
11
  import ResourceDetail from "./ResourceDetail"; // 基本信息
16
12
 
17
13
  function ResourceDetailDrawer(props) {
18
14
  var topo = props.topo,
19
- canShow = props.canShow;
15
+ canShow = props.canShow,
16
+ viewerProps = props.viewerProps;
20
17
 
21
18
  var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
22
19
  topoState = _topo$store$useModel[0],
@@ -29,26 +26,35 @@ function ResourceDetailDrawer(props) {
29
26
  var _topo$store$useModelS2 = topo.store.useModelState("lock"),
30
27
  lock = _topo$store$useModelS2.lock;
31
28
 
32
- var _useState = useState(false),
33
- visible = _useState[0],
34
- setVisible = _useState[1];
35
-
36
- var _useState2 = useState({
37
- id: '',
38
- name: '',
39
- type: '',
40
- // 类型: node、link
41
- ciType: '',
42
- ciName: ''
43
- }),
44
- activeData = _useState2[0],
45
- setActiveData = _useState2[1];
46
-
47
- var _useState3 = useState(''),
48
- userId = _useState3[0],
49
- setUserId = _useState3[1];
50
-
51
- var resourceData = topo.dataModel.useDataById(activeData.id);
29
+ var _topo$store$useModel2 = topo.store.useModel('resourceDetail'),
30
+ resourceDetailState = _topo$store$useModel2[0],
31
+ resourceDetailDispatchers = _topo$store$useModel2[1];
32
+
33
+ var visible = resourceDetailState.visible,
34
+ id = resourceDetailState.id;
35
+ var resourceData = topo.dataModel.useDataById(id);
36
+ var activeData = useMemo(function () {
37
+ return resourceData ? {
38
+ id: resourceData.id,
39
+ name: resourceData.name,
40
+ type: resourceData.type === 'node' ? 'node' : 'link',
41
+ // 类型: node、link
42
+ ciType: resourceData.ciType,
43
+ ciName: resourceData.ciName
44
+ } : {
45
+ id: '',
46
+ name: '',
47
+ type: '',
48
+ // 类型: node、link
49
+ ciType: '',
50
+ ciName: ''
51
+ };
52
+ }, [resourceData]);
53
+
54
+ var _useState = useState(''),
55
+ userId = _useState[0],
56
+ setUserId = _useState[1];
57
+
52
58
  useEffect(function () {
53
59
  var notifier = topo.view.topoClient.notifier;
54
60
  notifier.on(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
@@ -62,10 +68,17 @@ function ResourceDetailDrawer(props) {
62
68
  metricCodes: []
63
69
  });
64
70
  };
65
- }, [lock]); // 解决切换拓扑图隐藏概览
71
+ }, [lock]);
72
+ useEffect(function () {
73
+ return function () {
74
+ resourceDetailDispatchers.reset();
75
+ };
76
+ }, []); // 解决切换拓扑图隐藏概览
66
77
 
67
78
  useEffect(function () {
68
- setVisible(false); // TODO 其他数据重置
79
+ resourceDetailDispatchers.update({
80
+ visible: false
81
+ }); // TODO 其他数据重置
69
82
  }, [topoId]);
70
83
 
71
84
  function getUser() {
@@ -164,28 +177,31 @@ function ResourceDetailDrawer(props) {
164
177
 
165
178
  if (!canShow(htElement)) {
166
179
  return;
167
- }
180
+ } // 显示隐藏
181
+
168
182
 
169
- setActiveData({
170
- id: id,
171
- name: name,
172
- type: {
173
- linkGroup: 'link',
174
- group: 'node'
175
- }[type] || type,
176
- ciType: ciType,
177
- ciName: ciName
178
- }); // 显示隐藏
183
+ if (targetType === 'doubleClick') {
184
+ resourceDetailDispatchers.update({
185
+ visible: true,
186
+ id: id
187
+ });
188
+ } else {
189
+ resourceDetailDispatchers.update({
190
+ id: id
191
+ });
192
+ } // userId
179
193
 
180
- targetType === 'doubleClick' && setVisible(true); // userId
181
194
 
182
195
  getUser();
183
196
  }
184
197
 
185
198
  var renderContent = function renderContent() {
186
- return /*#__PURE__*/React.createElement(ResourceDetail, _extends({}, props, {
199
+ var _viewerProps$resource;
200
+
201
+ var ResourceDetailWidget = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$resource = viewerProps.resourceDetailProps) === null || _viewerProps$resource === void 0 ? void 0 : _viewerProps$resource.ResourceDetailWidget) || ResourceDetail;
202
+ return /*#__PURE__*/React.createElement(ResourceDetailWidget, _extends({}, props, {
187
203
  topo: topo,
188
- userId: useId,
204
+ userId: userId,
189
205
  activeData: activeData,
190
206
  resourceData: resourceData
191
207
  }));
@@ -202,7 +218,9 @@ function ResourceDetailDrawer(props) {
202
218
  width: 580,
203
219
  hasMask: false,
204
220
  onClose: function onClose() {
205
- return setVisible(false);
221
+ return resourceDetailDispatchers.update({
222
+ visible: false
223
+ });
206
224
  }
207
225
  }, visible && resourceData && renderContent()));
208
226
  }
@@ -0,0 +1,136 @@
1
+ import _Message from "@alifd/next/es/message";
2
+ import _Table from "@alifd/next/es/table";
3
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
4
+ import _Button from "@alifd/next/es/button";
5
+ import _Icon from "@alifd/next/es/icon";
6
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
7
+ import React from 'react';
8
+ import moment from 'moment';
9
+ import BlockBox from "./BlockBox";
10
+ import Link from "../../../../../../../components/Link";
11
+ import service from "../../../../../../services/overview";
12
+ import styles from "./index.module.scss"; // url 处理,UICBB 的地址需截取前缀
13
+
14
+ function formatUrl(url) {
15
+ var _window, _window$location;
16
+
17
+ var prefix = '/default/pagecenter';
18
+
19
+ 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) {
20
+ return url.split(prefix)[1];
21
+ } else {
22
+ return url;
23
+ }
24
+ }
25
+
26
+ function EventsCard(props) {
27
+ var alarmRiskList = props.alarmRiskList,
28
+ closeDetailDrawer = props.closeDetailDrawer,
29
+ onHandleAlarm = props.onHandleAlarm; // 告警table列配置
30
+
31
+ var columns = [{
32
+ title: '描述',
33
+ dataIndex: 'title',
34
+ key: 'title',
35
+ cell: function cell(value, index, record) {
36
+ return /*#__PURE__*/React.createElement("div", {
37
+ className: styles['alarm-title'],
38
+ title: value,
39
+ onClick: closeDetailDrawer
40
+ }, /*#__PURE__*/React.createElement(_Icon, {
41
+ type: record.icon,
42
+ size: "xs",
43
+ className: styles['alarm-color-icon'] + " " + record.className
44
+ }), /*#__PURE__*/React.createElement(Link, {
45
+ className: styles.link,
46
+ to: formatUrl(record.link)
47
+ }, value));
48
+ }
49
+ }, {
50
+ title: '时间',
51
+ dataIndex: 'time',
52
+ key: 'time',
53
+ width: 144,
54
+ cell: function cell(value, index, record) {
55
+ return /*#__PURE__*/React.createElement("div", {
56
+ title: moment(value).format('YYYY-MM-DD HH:mm:ss')
57
+ }, moment(value).format('YYYY-MM-DD HH:mm:ss'));
58
+ }
59
+ }, {
60
+ title: '操作',
61
+ dataIndex: 'status',
62
+ key: 'status',
63
+ width: 64,
64
+ cell: function cell(status, index, record) {
65
+ if (record.type === 'alarm') {
66
+ return status === 'toDeal' ? /*#__PURE__*/React.createElement(_Button, {
67
+ text: true,
68
+ type: "primary",
69
+ onClick: function onClick() {
70
+ return alarmRiskOperation(record.type, record.params);
71
+ }
72
+ }, "\u53D7\u7406") : /*#__PURE__*/React.createElement(_Button, {
73
+ disabled: true,
74
+ text: true,
75
+ type: "primary"
76
+ }, "\u5DF2\u53D7\u7406");
77
+ } else {
78
+ // return <Button text type="primary" onClick={() => alarmRiskOperation(record.type, record)}>受理</Button>
79
+ return '';
80
+ }
81
+ }
82
+ }]; // 告警/风险 操作 (受理)
83
+
84
+ function alarmRiskOperation(_x, _x2) {
85
+ return _alarmRiskOperation.apply(this, arguments);
86
+ }
87
+
88
+ function _alarmRiskOperation() {
89
+ _alarmRiskOperation = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type, params) {
90
+ var res;
91
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
92
+ while (1) {
93
+ switch (_context.prev = _context.next) {
94
+ case 0:
95
+ if (!(type === 'alarm')) {
96
+ _context.next = 6;
97
+ break;
98
+ }
99
+
100
+ _context.next = 3;
101
+ return service.handleAlarm(params);
102
+
103
+ case 3:
104
+ res = _context.sent;
105
+
106
+ _Message.success('受理成功');
107
+
108
+ onHandleAlarm();
109
+
110
+ case 6:
111
+ case "end":
112
+ return _context.stop();
113
+ }
114
+ }
115
+ }, _callee);
116
+ }));
117
+ return _alarmRiskOperation.apply(this, arguments);
118
+ }
119
+
120
+ return /*#__PURE__*/React.createElement(BlockBox, {
121
+ headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
122
+ }, /*#__PURE__*/React.createElement("div", {
123
+ className: styles.alarm
124
+ }, /*#__PURE__*/React.createElement(_Table, {
125
+ hasBorder: false,
126
+ fixedHeader: true,
127
+ columns: columns,
128
+ maxBodyHeight: "auto",
129
+ dataSource: alarmRiskList,
130
+ emptyContent: /*#__PURE__*/React.createElement("div", {
131
+ className: styles['no-data']
132
+ }, "\u6682\u65E0\u6570\u636E")
133
+ })));
134
+ }
135
+
136
+ export default EventsCard;
@@ -1,5 +1,4 @@
1
1
  import _Message from "@alifd/next/es/message";
2
- import _Table from "@alifd/next/es/table";
3
2
  import _extends from "@babel/runtime/helpers/extends";
4
3
  import _Button from "@alifd/next/es/button";
5
4
  import _Icon from "@alifd/next/es/icon";
@@ -28,7 +27,8 @@ import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
28
27
  import Configurator from "./components/Configurator";
29
28
  import { formatMetric } from "../../../../../../models/attributeFormatter";
30
29
  import LinkTopoCard from "./components/LinkTopo/LinkTopoCard";
31
- import { rlog } from '@riil-frontend/component-topology-utils/lib/rlog'; // url 处理,UICBB 的地址需截取前缀
30
+ import { rlog } from '@riil-frontend/component-topology-utils/lib/rlog';
31
+ import EventsCard from "./EventsCard"; // url 处理,UICBB 的地址需截取前缀
32
32
 
33
33
  function formatUrl(url) {
34
34
  var _window, _window$location;
@@ -943,18 +943,11 @@ export default function ResourceOverview(props) {
943
943
  },
944
944
  data: metric,
945
945
  loading: metricInitLoading
946
- })), /*#__PURE__*/React.createElement(BlockBox, {
947
- headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
948
- }, /*#__PURE__*/React.createElement("div", {
949
- className: styles.alarm
950
- }, /*#__PURE__*/React.createElement(_Table, {
951
- hasBorder: false,
952
- fixedHeader: true,
953
- columns: columns,
954
- maxBodyHeight: "auto",
955
- dataSource: alarmRiskList,
956
- emptyContent: /*#__PURE__*/React.createElement("div", {
957
- className: styles['no-data']
958
- }, "\u6682\u65E0\u6570\u636E")
959
- }))));
946
+ })), /*#__PURE__*/React.createElement(EventsCard, {
947
+ alarmRiskList: alarmRiskList,
948
+ closeDetailDrawer: onClose,
949
+ onHandleAlarm: function onHandleAlarm() {
950
+ getAlarmRiskData(id);
951
+ }
952
+ }));
960
953
  }
@@ -120,7 +120,7 @@ export default function ResourceOverviewMetric(props) {
120
120
  padding: 0,
121
121
  appendPadding: [2, 0],
122
122
  smooth: true,
123
- tooltip: false,
123
+ tooltip: true,
124
124
  line: {
125
125
  color: "l(0) 0:" + hexToRgb(rgbToHex(color).hex, 0.05).rgba + " 0.5:" + color + " 1:" + color,
126
126
  size: 2