@riil-frontend/component-topology 3.5.0-a.9 → 3.5.2

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverviewMetric.js

@@ -9,13 +9,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("@riil-frontend/utils");
 
+var _componentNoDataPage = _interopRequireDefault(require("@riil-frontend/component-no-data-page"));
+
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
 // 关键指标
 function ResourceOverviewMetric(props) {
   var topo = props.topo,
       type = props.type,
-      data = props.data;
+      data = props.data,
+      loading = props.loading;
 
   function formatValue(itemData) {
     var format = (0, _utils.metricValueFormat)({
@@ -28,29 +31,40 @@ function ResourceOverviewMetric(props) {
     return format.value + " " + (format.value === '-' ? '' : format.unit);
   }
 
+  var content;
+
+  if (data.length) {
+    content = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].row
+    }, data.slice(0, 3).map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _indexModule["default"].item,
+        key: item.code
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: _indexModule["default"].content
+      }, formatValue(item)), /*#__PURE__*/_react["default"].createElement("span", {
+        className: _indexModule["default"].label
+      }, item.name));
+    })), type === 'node' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"].row
+    }, data.slice(3, 6).map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _indexModule["default"].item,
+        key: item.code
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: _indexModule["default"].content
+      }, formatValue(item)), /*#__PURE__*/_react["default"].createElement("span", {
+        className: _indexModule["default"].label
+      }, item.name));
+    })) : '');
+  } else if (loading) {
+    // content = <Loading style={{width: '100%'}} />
+    content = null;
+  } else {
+    content = /*#__PURE__*/_react["default"].createElement(_componentNoDataPage["default"], null);
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].indicator
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].row
-  }, data.slice(0, 3).map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"].item,
-      key: item.code
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
-    }, formatValue(item)), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].label
-    }, item.name));
-  })), type === 'node' ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].row
-  }, data.slice(3, 6).map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"].item,
-      key: item.code
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
-    }, formatValue(item)), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].label
-    }, item.name));
-  })) : '');
+  }, content);
 }

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useCiData.js

@@ -0,0 +1 @@
+"use strict";

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _ahooks = require("ahooks");
+
+var _react = require("react");
+
+var _getCiDisplayMetricModels = _interopRequireDefault(require("../../../getCiDisplayMetricModels"));
+
+/**
+ * 概览指标定义
+ * @param {*} props
+ */
+var useMetricModels = function useMetricModels(props) {
+  var _props$data = props.data,
+      type = _props$data.type,
+      id = _props$data.id,
+      ciType = _props$data.ciType,
+      isMonite = props.isMonite,
+      ciTypeMeta = props.ciTypeMeta,
+      topo = props.topo,
+      resourceOverviewProps = props.resourceOverviewProps;
+
+  var _useState = (0, _react.useState)(null),
+      metricModels = _useState[0],
+      setMetricModels = _useState[1];
+
+  var _useState2 = (0, _react.useState)(true),
+      initLoading = _useState2[0],
+      setInitLoading = _useState2[1];
+
+  function fetchData() {
+    return _fetchData.apply(this, arguments);
+  } // 轮询hooks
+
+
+  function _fetchData() {
+    _fetchData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var mmm, displayMetricModels, _metricCodes;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return (0, _getCiDisplayMetricModels["default"])(id, ciTypeMeta.metrics);
+
+            case 2:
+              mmm = _context.sent;
+
+              // 未监控不显示指标，临时在这里处理
+              if (!isMonite) {
+                mmm = [];
+              }
+
+              displayMetricModels = null; // 支持自定义显示指标范围
+
+              if (resourceOverviewProps !== null && resourceOverviewProps !== void 0 && resourceOverviewProps.getMetricCodes) {
+                _metricCodes = resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.getMetricCodes({
+                  type: type,
+                  id: id,
+                  ciType: ciType
+                });
+
+                if (_metricCodes) {
+                  displayMetricModels = _metricCodes.map(function (code) {
+                    return mmm.find(function (item) {
+                      return item.code === code;
+                    });
+                  }).filter(function (item) {
+                    return !!item;
+                  });
+                }
+              }
+
+              if (!displayMetricModels) {
+                displayMetricModels = mmm;
+              }
+
+              displayMetricModels = displayMetricModels.slice(0, 6);
+              return _context.abrupt("return", displayMetricModels);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _fetchData.apply(this, arguments);
+  }
+
+  var request = (0, _ahooks.useRequest)(fetchData, {
+    pollingInterval: 1000 * 5,
+    // pollingWhenHidden: false,
+    // debounceInterval: 1000,
+    manual: true,
+    onSuccess: function onSuccess(newMetricModels) {
+      var a = metricModels.map(function (item) {
+        return item.code;
+      }).join(',');
+      var b = newMetricModels.map(function (item) {
+        return item.code;
+      }).join(',');
+
+      if (a !== b) {
+        setMetricModels(newMetricModels);
+      }
+
+      setInitLoading(false);
+    }
+  });
+  (0, _react.useEffect)(function () {
+    setMetricModels([]);
+    setInitLoading(true);
+  }, [id]);
+  (0, _react.useEffect)(function () {
+    request.run();
+    return function () {
+      request.cancel();
+    };
+  }, [id, ciTypeMeta, isMonite]);
+
+  var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
+  var metricCodes = (metricModels || []).map(function (item) {
+    return item.code;
+  });
+  var metricCodesStr = metricCodes.join(',');
+  (0, _react.useEffect)(function () {
+    // 同步需要实时展示的指标
+    topoDispatchers.update({
+      id: id,
+      metricCodes: metricCodes
+    });
+  }, [id, metricCodesStr]);
+  return {
+    loading: request.loading,
+    metricModels: metricModels,
+    initLoading: initLoading
+  };
+};
+
+var _default = useMetricModels;
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/ResourceDetail/getCiDisplayMetricModels.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = queryCiMonitorMetricModels;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
+
+function queryCiMonitorMetricModels(_x, _x2) {
+  return _queryCiMonitorMetricModels.apply(this, arguments);
+}
+
+function _queryCiMonitorMetricModels() {
+  _queryCiMonitorMetricModels = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(id, metricModels) {
+    var map, monitorMetrics;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _componentTopologyUtils.request.post('/mdc/v1/api/strategy/queryMonitorMetrics', [id]);
+
+          case 2:
+            map = _context.sent;
+            monitorMetrics = (map[id] || []).filter(function (item) {
+              return item.metricType !== 'info';
+            });
+            return _context.abrupt("return", metricModels.filter(function (m) {
+              return !!monitorMetrics.find(function (item) {
+                return item.code === m.code;
+              });
+            }));
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _queryCiMonitorMetricModels.apply(this, arguments);
+}

package/lib/core/viewer/components/titlebar/BasicTools.js

@@ -24,6 +24,13 @@ function BasicTools(props) {
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton,
       children = props.children;
+
+  var _topo$store$useModel = topo.store.useModel("topoAlarm"),
+      alarmState = _topo$store$useModel[0],
+      alarmDispatchers = _topo$store$useModel[1];
+
+  var alarmPanelIsOpen = alarmState.alarmPanelIsOpen,
+      alarmData = alarmState.alarmData;
   return /*#__PURE__*/_react["default"].createElement(_box["default"], {
     direction: "row",
     spacing: 8
@@ -31,7 +38,10 @@ function BasicTools(props) {
     topo: topo
   }, props)), /*#__PURE__*/_react["default"].createElement(_AlarmListShowButton["default"], (0, _extends2["default"])({
     topo: topo
-  }, props)), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
+  }, props, {
+    alarmPanelIsOpen: alarmPanelIsOpen,
+    alarmData: alarmData
+  })), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
     topo: topo
   }, props)), children);
 }

package/lib/core/viewer/components/titlebar/widgets/AlarmListShowButton.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = AlarmListShowButton;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
 var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
@@ -13,10 +15,6 @@ var _overlay = _interopRequireDefault(require("@alifd/next/lib/overlay"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
-
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
-
 var _AlarmListPanel = _interopRequireDefault(require("../../../../components/AlarmListPanel"));
 
 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); }
@@ -34,22 +32,28 @@ function AlarmListShowButton(props) {
   var topo = props.topo,
       style = props.style,
       _props$offSetLeft = props.offSetLeft,
-      offSetLeft = _props$offSetLeft === void 0 ? 112 : _props$offSetLeft; // const { AlarmListPanel } = viewerProps;
+      offSetLeft = _props$offSetLeft === void 0 ? 112 : _props$offSetLeft,
+      alarmPanelIsOpen = props.alarmPanelIsOpen,
+      alarmData = props.alarmData; // const { AlarmListPanel } = viewerProps;
 
-  var store = topo.store;
+  var store = topo.store; // const [alarmState, alarmDispatchers] = store.useModel("topoAlarm");
 
-  var _store$useModel = store.useModel("topoAlarm"),
-      topoState = _store$useModel[0];
+  var _useState = (0, _react.useState)(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    setVisible(alarmPanelIsOpen);
+  }, [alarmPanelIsOpen]); // const { alarmPanelIsOpen,alarmData } = alarmState;
 
-  var alarmPanelIsOpen = topoState.alarmPanelIsOpen;
   var alarmBtn = (0, _react.useRef)();
 
-  var showAlarmList = function showAlarmList() {
-    topo.alarm.switchAlarmPopPanel(true);
+  var onVisibleChange = function onVisibleChange(visible) {
+    setVisible(visible);
   };
 
-  var onVisibleChange = function onVisibleChange(visible) {
-    topo.alarm.switchAlarmPopPanel(visible);
+  var onClose = function onClose() {
+    setVisible(false);
   };
 
   return /*#__PURE__*/_react["default"].createElement(Popup, {
@@ -63,12 +67,15 @@ function AlarmListShowButton(props) {
     defaultVisible: true,
     canCloseByOutSideClick: false,
     canCloseByTrigger: false,
-    visible: alarmPanelIsOpen,
+    visible: visible,
     onVisibleChange: onVisibleChange,
     offset: [offSetLeft, 5],
     triggerType: "click",
     safeNode: function safeNode() {
       return alarmBtn;
     }
-  }, /*#__PURE__*/_react["default"].createElement(_AlarmListPanel["default"], props));
+  }, /*#__PURE__*/_react["default"].createElement(_AlarmListPanel["default"], (0, _extends2["default"])({}, props, {
+    alarmData: alarmData,
+    onClose: onClose
+  })));
 }

package/lib/hooks/useGraphAlarmDisplay.js

@@ -17,8 +17,6 @@ var _htElementUtils = require("../utils/htElementUtils");
  * @param {*} options 
  */
 function useGraphAlarmDisplay(options) {
-  _rlog["default"].debug('此内容废弃,发现调用后修改-----------------------------------------------');
-
   var topo = options.topo;
   var store = topo.store;
 
@@ -32,10 +30,10 @@ function useGraphAlarmDisplay(options) {
       alarmIsOpened = _topo$alarm$useState.alarmIsOpened,
       alarmList = _topo$alarm$useState.alarmList;
 
-  var resources = topo.dataModel.useResources();
+  var resources = topo.dataModel.useCis();
   (0, _react.useEffect)(function () {
     var showAlarm = function showAlarm() {
-      if (!graphLoaded || !alarmList) {
+      if (!graphLoaded || !alarmList || !alarmIsOpened) {
         return;
       }
 
@@ -66,5 +64,5 @@ function useGraphAlarmDisplay(options) {
     };
 
     showAlarm();
-  }, [graphLoaded, alarmList, resources]);
+  }, [graphLoaded, alarmIsOpened, alarmList, resources]);
 }

package/lib/hooks/useManageStatus.js

@@ -44,7 +44,7 @@ function useManageStatus(props) {
       topoDispatchers = _topo$store$useModel[1];
 
   var graphLoaded = topoState.graphLoaded;
-  var resources = topo.dataModel.useResources();
+  var resources = topo.dataModel.useCis();
   (0, _useTopoEventListener["default"])({
     type: 'manageStatus',
     onMessage: function onMessage(manageStatusDatas) {