@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = useMetricPolling;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ahooks = require("ahooks");
+
+var _services = require("../services");
+
+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); }
+
+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; }
+
+// 资源节点上方色块展示资源的发送速率发送带宽利用率、接收速率发送接收利用率、总错包数
+function useMetricPolling(_ref) {
+  var linkCi = _ref.linkCi,
+      linkMetricCodes = _ref.linkMetricCodes;
+  var linkId = linkCi.id;
+
+  var _useState = (0, _react.useState)({
+    sourceMetrics: null,
+    destinationMetrics: null,
+    // 链路指标列表
+    linkMetrics: []
+  }),
+      data = _useState[0],
+      setData = _useState[1]; // 轮询hooks
+
+
+  var queryLinkMetricsRequest = (0, _ahooks.useRequest)(_services.queryLinkLatestMetrics, {
+    pollingInterval: 1000 * 15,
+    pollingWhenHidden: false,
+    debounceInterval: 200,
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      setData((0, _extends2["default"])({}, data, {
+        linkMetrics: result
+      }));
+      console.info('链路拓扑指标轮询', result);
+    }
+  });
+  var queryInterfaceMetricsRequest = (0, _ahooks.useRequest)(_services.queryLinkInterfacesLatestMetrics, {
+    pollingInterval: 1000 * 15,
+    pollingWhenHidden: false,
+    debounceInterval: 200,
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      setData((0, _extends2["default"])({}, data, result));
+      console.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 结果', result);
+    }
+  });
+  var linkMetricCodesStr = linkMetricCodes.map(function (item) {
+    return item;
+  }).sort().join(',');
+  (0, _react.useEffect)(function () {
+    console.info('链路拓扑指标轮询 切换', {
+      linkCi: linkCi,
+      linkMetricCodes: linkMetricCodes
+    });
+    queryLinkMetricsRequest.run(linkCi, linkMetricCodes);
+    return function () {};
+  }, [linkId, linkMetricCodesStr]);
+  (0, _react.useEffect)(function () {
+    console.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 开始', {
+      linkCi: linkCi
+    });
+    queryInterfaceMetricsRequest.run(linkCi);
+    return function () {};
+  }, [linkId]);
+  return data;
+}

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.queryAssetModel = queryAssetModel;
+exports.queryLatestMetrics = queryLatestMetrics;
+exports.queryLinkInterfacesLatestMetrics = queryLinkInterfacesLatestMetrics;
+exports.queryLinkLatestMetrics = queryLinkLatestMetrics;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _componentTopologyUtils = require("@riil-frontend/component-topology-utils");
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _attributeFormatter = require("../../../../../../../../../models/attributeFormatter");
+
+var _CiTypeCache = _interopRequireDefault(require("../../../../../../../../../models/cache/CiTypeCache"));
+
+var _constants = require("../constants");
+
+function queryAssetModel(_x) {
+  return _queryAssetModel.apply(this, arguments);
+}
+
+function _queryAssetModel() {
+  _queryAssetModel = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(code) {
+    var result;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _componentTopologyUtils.request.get("/mdc/v1/api/model-asset/" + code);
+
+          case 2:
+            result = _context.sent;
+            return _context.abrupt("return", result);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _queryAssetModel.apply(this, arguments);
+}
+
+function queryLatestMetrics(_x2) {
+  return _queryLatestMetrics.apply(this, arguments);
+}
+/**
+ * 查询链路及两端接口指标数据
+ * 
+ * @param {*} linkCi 
+ * @param {*} linkMetricCodes 
+ * @returns 
+ */
+
+
+function _queryLatestMetrics() {
+  _queryLatestMetrics = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(params) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", _componentTopologyUtils.request.post('/mdc/v1/api/cmdb/metric/queryLatestMetrics', params));
+
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _queryLatestMetrics.apply(this, arguments);
+}
+
+function queryLinkLatestMetrics(_x3, _x4) {
+  return _queryLinkLatestMetrics.apply(this, arguments);
+}
+
+function _queryLinkLatestMetrics() {
+  _queryLinkLatestMetrics = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(linkCi, linkMetricCodes) {
+    var linkMetrics, resultData;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _rlog["default"].debug('链路拓扑指标轮询 queryLinkLatestMetrics', linkCi, linkMetricCodes);
+
+            if (linkMetricCodes.length) {
+              _context3.next = 3;
+              break;
+            }
+
+            return _context3.abrupt("return", []);
+
+          case 3:
+            _context3.next = 5;
+            return queryLatestMetrics({
+              ciId: [linkCi.id],
+              'metricCode': linkMetricCodes
+            });
+
+          case 5:
+            linkMetrics = _context3.sent;
+            // format
+            resultData = linkMetricCodes.map(function (code) {
+              var _linkMetrics$find;
+
+              var value = (_linkMetrics$find = linkMetrics.find(function (m) {
+                return m.metricCode === code;
+              })) === null || _linkMetrics$find === void 0 ? void 0 : _linkMetrics$find.metricValue;
+
+              var metricDef = _CiTypeCache["default"].getMetric(linkCi.ciType, code);
+
+              return {
+                code: code,
+                name: metricDef.name,
+                value: (0, _attributeFormatter.formatMetric)(value, metricDef) || ''
+              };
+            });
+            return _context3.abrupt("return", resultData);
+
+          case 8:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+  return _queryLinkLatestMetrics.apply(this, arguments);
+}
+
+function queryLinkInterfacesLatestMetrics(_x5) {
+  return _queryLinkInterfacesLatestMetrics.apply(this, arguments);
+}
+
+function _queryLinkInterfacesLatestMetrics() {
+  _queryLinkInterfacesLatestMetrics = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(linkCi) {
+    var _linkCi$attributes, sourceType, sourceId, destinationId, destinationType, typeCodes, queryInterfaceMetricsParam, interfaceMetrics, resultData, parseInterfaceMetrics;
+
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            parseInterfaceMetrics = function _parseInterfaceMetric(subCiId) {
+              var metrics = interfaceMetrics.filter(function (metric) {
+                return metric.subCiId === subCiId;
+              });
+              return _constants.INTERFACE_METRIC_CODES.reduce(function (res, code) {
+                var _metrics$find;
+
+                var value = (_metrics$find = metrics.find(function (m) {
+                  return m.metricCode === code;
+                })) === null || _metrics$find === void 0 ? void 0 : _metrics$find.metricValue;
+
+                var metricDef = _CiTypeCache["default"].getMetric(linkCi.ciType, code);
+
+                var formatValue = (0, _attributeFormatter.formatMetric)(value, metricDef);
+                res[code] = formatValue === 'undefined' ? '-' : formatValue;
+                return res;
+              }, {});
+            };
+
+            _linkCi$attributes = linkCi.attributes, sourceType = _linkCi$attributes.source_type, sourceId = _linkCi$attributes.source_id, destinationId = _linkCi$attributes.destination_id, destinationType = _linkCi$attributes.destination_type;
+
+            _rlog["default"].debug('查询链路接口指标', linkCi); // 查询指标模型
+
+
+            typeCodes = [sourceType];
+            queryInterfaceMetricsParam = {
+              'subCiId': [sourceId],
+              'metricCode': [].concat(_constants.INTERFACE_METRIC_CODES)
+            };
+
+            if (destinationId) {
+              queryInterfaceMetricsParam.subCiId.push(destinationId);
+              typeCodes.push(destinationType);
+            }
+
+            _context4.next = 8;
+            return _CiTypeCache["default"].load(typeCodes);
+
+          case 8:
+            _context4.next = 10;
+            return queryLatestMetrics(queryInterfaceMetricsParam);
+
+          case 10:
+            interfaceMetrics = _context4.sent;
+            // format
+            resultData = {
+              sourceMetrics: parseInterfaceMetrics(sourceId),
+              destinationMetrics: destinationId ? parseInterfaceMetrics(destinationId) : null
+            };
+
+            _rlog["default"].debug('查询链路接口指标 结果', linkCi);
+
+            return _context4.abrupt("return", resultData);
+
+          case 14:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+  return _queryLinkInterfacesLatestMetrics.apply(this, arguments);
+}

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

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _EditButton = _interopRequireDefault(require("./widgets/EditButton"));
 
-var _NodesDragSwitch = _interopRequireDefault(require("./widgets/NodesDragSwitch"));
+var _NodesDragSwitchWrapper = _interopRequireDefault(require("./widgets/NodesDragSwitchWrapper"));
 
 var _AlarmListShowButton = _interopRequireDefault(require("./widgets/AlarmListShowButton"));
 
@@ -45,7 +45,7 @@ function BasicTools(props) {
   }, props, {
     alarmPanelIsOpen: alarmPanelIsOpen,
     alarmData: alarmData
-  })), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
+  })), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitchWrapper["default"], (0, _extends2["default"])({
     topo: topo
   }, props)), children);
 }

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodesDragSwitchWrapper;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NodesDragSwitch = _interopRequireDefault(require("./NodesDragSwitch"));
+
+var _topoPermissionUtil = _interopRequireDefault(require("../../../../../utils/topoPermissionUtil"));
+
+function NodesDragSwitchWrapper(props) {
+  var topo = props.topo;
+  var store = topo.store;
+
+  var _store$useModel = store.useModel('topoMod'),
+      topoState = _store$useModel[0];
+
+  var topoPermission = topoState.topoPermission;
+
+  if (!_topoPermissionUtil["default"].isEditable(topoPermission)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], props);
+}

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

@@ -31,10 +31,20 @@ function SettingButton(props) {
       visible = _useState[0],
       setVisible = _useState[1];
 
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded;
+
   var changeClick = function changeClick() {
     setVisible(true);
   };
 
+  (0, _react.useEffect)(function () {
+    if (graphLoaded) {
+      var _topo$viewProps$urlPa;
+
+      setVisible(!!((_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.showSetting));
+    }
+  }, [graphLoaded]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
     style: style,
     onClick: changeClick,

package/lib/networkTopo/components/TopoView.js

@@ -33,12 +33,12 @@ var _useLinkDynamicStyle = _interopRequireDefault(require("../hooks/useLinkDynam
 
 var _useRelateTopo = _interopRequireDefault(require("../hooks/viewer/useRelateTopo"));
 
-var _LinkTip = _interopRequireDefault(require("../../core/components/DisplaySettingDrawer/LinkTip"));
-
 var _ViewerTools = _interopRequireDefault(require("./viewer/titlebar/ViewerTools"));
 
 var _useEdgeFlow = _interopRequireDefault(require("../hooks/viewer/useEdgeFlow"));
 
+var _LinkTip = _interopRequireDefault(require("../../core/components/DisplaySettingDrawer/LinkTip"));
+
 var _LinkTagV = _interopRequireDefault(require("./viewer/displaySetting/LinkTagV2"));
 
 var _useEdgeExpand = _interopRequireDefault(require("../hooks/useEdgeExpand"));
@@ -210,5 +210,6 @@ function NetworkTopologyCore(props) {
   }, renderContent()));
 }
 
+NetworkTopologyCore.displayName = 'NetworkTopologyCore';
 var _default = NetworkTopologyCore;
 exports["default"] = _default;