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

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { metricValueFormat } from '@riil-frontend/utils';
-import styles from "./index.module.scss"; // 关键指标
-
+import NoDataPage from '@riil-frontend/component-no-data-page';
+import styles from "./index.module.scss";
+// 关键指标
 export default function ResourceOverviewMetric(props) {
   var topo = props.topo,
       type = props.type,
-      data = props.data;
+      data = props.data,
+      loading = props.loading;
 
   function formatValue(itemData) {
     var format = metricValueFormat({
@@ -18,29 +20,40 @@ export default function ResourceOverviewMetric(props) {
     return format.value + " " + (format.value === '-' ? '' : format.unit);
   }
 
+  var content;
+
+  if (data.length) {
+    content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, data.slice(0, 3).map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.item,
+        key: item.code
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.content
+      }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
+        className: styles.label
+      }, item.name));
+    })), type === 'node' ? /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, data.slice(3, 6).map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.item,
+        key: item.code
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.content
+      }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
+        className: styles.label
+      }, item.name));
+    })) : '');
+  } else if (loading) {
+    // content = <Loading style={{width: '100%'}} />
+    content = null;
+  } else {
+    content = /*#__PURE__*/React.createElement(NoDataPage, null);
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.indicator
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.row
-  }, data.slice(0, 3).map(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.item,
-      key: item.code
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.content
-    }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, item.name));
-  })), type === 'node' ? /*#__PURE__*/React.createElement("div", {
-    className: styles.row
-  }, data.slice(3, 6).map(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.item,
-      key: item.code
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.content
-    }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, item.name));
-  })) : '');
+  }, content);
 }

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

@@ -0,0 +1,143 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import queryCiMonitorMetricModels from "../../../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 = useState(null),
+      metricModels = _useState[0],
+      setMetricModels = _useState[1];
+
+  var _useState2 = useState(true),
+      initLoading = _useState2[0],
+      setInitLoading = _useState2[1];
+
+  function fetchData() {
+    return _fetchData.apply(this, arguments);
+  } // 轮询hooks
+
+
+  function _fetchData() {
+    _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var mmm, displayMetricModels, _metricCodes;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return queryCiMonitorMetricModels(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 = 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);
+    }
+  });
+  useEffect(function () {
+    setMetricModels([]);
+    setInitLoading(true);
+  }, [id]);
+  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(',');
+  useEffect(function () {
+    // 同步需要实时展示的指标
+    topoDispatchers.update({
+      id: id,
+      metricCodes: metricCodes
+    });
+  }, [id, metricCodesStr]);
+  return {
+    loading: request.loading,
+    metricModels: metricModels,
+    initLoading: initLoading
+  };
+};
+
+export default useMetricModels;

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

@@ -0,0 +1,37 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+export default function queryCiMonitorMetricModels(_x, _x2) {
+  return _queryCiMonitorMetricModels.apply(this, arguments);
+}
+
+function _queryCiMonitorMetricModels() {
+  _queryCiMonitorMetricModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id, metricModels) {
+    var map, monitorMetrics;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return 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/es/core/viewer/components/titlebar/BasicTools.js

@@ -10,6 +10,13 @@ export default 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.createElement(_Box, {
     direction: "row",
     spacing: 8
@@ -17,7 +24,10 @@ export default function BasicTools(props) {
     topo: topo
   }, props)), /*#__PURE__*/React.createElement(AlarmListShowButton, _extends({
     topo: topo
-  }, props)), /*#__PURE__*/React.createElement(SettingButton, props), /*#__PURE__*/React.createElement(NodesDragSwitch, _extends({
+  }, props, {
+    alarmPanelIsOpen: alarmPanelIsOpen,
+    alarmData: alarmData
+  })), /*#__PURE__*/React.createElement(SettingButton, props), /*#__PURE__*/React.createElement(NodesDragSwitch, _extends({
     topo: topo
   }, props)), children);
 }

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

@@ -1,9 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import _Overlay from "@alifd/next/es/overlay";
 import React, { useEffect, useRef, useState } from "react";
-import { TopoEvent } from "@riil-frontend/component-topology-graph";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import AlarmListPanel from "../../../../components/AlarmListPanel";
 var Popup = _Overlay.Popup;
 /**
@@ -16,22 +15,28 @@ export default 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 = useState(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  useEffect(function () {
+    setVisible(alarmPanelIsOpen);
+  }, [alarmPanelIsOpen]); // const { alarmPanelIsOpen,alarmData } = alarmState;
 
-  var alarmPanelIsOpen = topoState.alarmPanelIsOpen;
   var alarmBtn = 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.createElement(Popup, {
@@ -45,12 +50,15 @@ export default 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.createElement(AlarmListPanel, props));
+  }, /*#__PURE__*/React.createElement(AlarmListPanel, _extends({}, props, {
+    alarmData: alarmData,
+    onClose: onClose
+  })));
 }

package/es/hooks/useGraphAlarmDisplay.js

@@ -8,7 +8,6 @@ import { getElements } from "../utils/htElementUtils";
  */
 
 export default function useGraphAlarmDisplay(options) {
-  rlog.debug('此内容废弃,发现调用后修改-----------------------------------------------');
   var topo = options.topo;
   var store = topo.store;
 
@@ -22,10 +21,10 @@ export default function useGraphAlarmDisplay(options) {
       alarmIsOpened = _topo$alarm$useState.alarmIsOpened,
       alarmList = _topo$alarm$useState.alarmList;
 
-  var resources = topo.dataModel.useResources();
+  var resources = topo.dataModel.useCis();
   useEffect(function () {
     var showAlarm = function showAlarm() {
-      if (!graphLoaded || !alarmList) {
+      if (!graphLoaded || !alarmList || !alarmIsOpened) {
         return;
       }
 
@@ -56,5 +55,5 @@ export default function useGraphAlarmDisplay(options) {
     };
 
     showAlarm();
-  }, [graphLoaded, alarmList, resources]);
+  }, [graphLoaded, alarmIsOpened, alarmList, resources]);
 }

package/es/hooks/useManageStatus.js

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