@riil-frontend/component-topology 3.1.4 → 3.1.7

package/es/core/viewer/components/plugins/BaseInfo/components/ResourceOverview/BaseInfo.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styles from "./index.module.scss"; // url 处理，UICBB 的地址需截取前缀
+
+function formatUrl(url) {
+  var _window, _window$location;
+
+  var prefix = '/default/pagecenter';
+
+  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) {
+    return url.split(prefix)[1];
+  } else {
+    return url;
+  }
+}
+
+function AttributeItem(props) {
+  var style = props.style,
+      key = props.key,
+      label = props.label,
+      contentTitle = props.contentTitle,
+      children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.item,
+    style: style || {},
+    key: key
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, label), /*#__PURE__*/React.createElement("span", {
+    className: styles.content,
+    title: contentTitle
+  }, children));
+}
+
+function BaseInfoContent(props) {
+  var _itemCols$type;
+
+  var topo = props.topo,
+      type = props.type,
+      data = props.data;
+  var itemCols = {
+    node: [{
+      label: '资源名称：',
+      objKey: 'resource',
+      render: function render(valueData, key) {
+        var display_name = valueData.display_name,
+            link = valueData.link;
+        return /*#__PURE__*/React.createElement(AttributeItem, {
+          key: key,
+          label: "\u8D44\u6E90\u540D\u79F0\uFF1A",
+          contentTitle: display_name
+        }, valueData ? /*#__PURE__*/React.createElement(Link, {
+          className: styles.link,
+          to: formatUrl(link)
+        }, display_name || '-') : '-');
+      }
+    }, {
+      label: 'IP地址：',
+      objKey: 'ipv4_address'
+    }, {
+      label: '资产编号：',
+      objKey: 'asset_number'
+    }, {
+      label: '资源类型：',
+      objKey: 'ciName'
+    }, {
+      label: '资源位置：',
+      objKey: 'res_address'
+    } // {
+    //   label: '负责人：',
+    //   objKey: 'principal'
+    // },
+    ],
+    link: [{
+      label: '链路带宽：',
+      objKey: 'rated_bandwidth',
+      style: {
+        width: '100%'
+      }
+    }, {
+      label: '源IP地址：',
+      objKey: 'source_ipv4'
+    }, {
+      label: '目的IP地址：',
+      objKey: 'destination_ipv4'
+    }, {
+      label: '源端口：',
+      objKey: 'source_Interface'
+    }, {
+      label: '目的端口：',
+      objKey: 'destination_Interface'
+    }]
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (_itemCols$type = itemCols[type]) === null || _itemCols$type === void 0 ? void 0 : _itemCols$type.map(function (_ref, key) {
+    var label = _ref.label,
+        objKey = _ref.objKey,
+        style = _ref.style,
+        render = _ref.render;
+    return data[objKey] === false ? '' : render ? render(data[objKey], key) : /*#__PURE__*/React.createElement(AttributeItem, {
+      key: key,
+      label: label,
+      style: style || {},
+      contentTitle: data[objKey]
+    }, data[objKey] || '-');
+  }));
+} // 基本信息
+
+
+export default function BaseInfo(props) {
+  var topo = props.topo,
+      type = props.type,
+      data = props.data,
+      resourceOverviewProps = props.resourceOverviewProps;
+  var content;
+
+  if (resourceOverviewProps !== null && resourceOverviewProps !== void 0 && resourceOverviewProps.renderBaseInfoContent) {
+    content = resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.renderBaseInfoContent({
+      type: type,
+      DefaultBaseInfoContent: BaseInfoContent,
+      AttributeItem: AttributeItem
+    });
+  } else {
+    content = /*#__PURE__*/React.createElement(BaseInfoContent, props);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['base-info']
+  }, content);
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { metricValueFormat } from '@riil-frontend/utils';
+import styles from "./index.module.scss"; // 关键指标
+
+export default function ResourceOverviewMetric(props) {
+  var topo = props.topo,
+      type = props.type,
+      data = props.data;
+
+  function formatValue(itemData) {
+    var format = metricValueFormat({
+      value: itemData.value,
+      dataType: itemData.dataType,
+      dict: topo.dictCache.getDictObject(),
+      unit: itemData.unit,
+      code: itemData.code
+    });
+    return format.value + " " + (format.value === '-' ? '' : format.unit);
+  }
+
+  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));
+  })) : '');
+}

package/es/core/viewer/components/plugins/BaseInfo/components/ResourceOverview/index.js

@@ -5,20 +5,20 @@ import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { metricValueFormat } from '@riil-frontend/utils';
 import moment from 'moment';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
 import topoService from '@riil-frontend/component-topology-common/es/services/topo';
 import { findItem } from "../../../../../../../utils/topoData";
 import service from "../../../../../../services/overview";
 import alarmService from "../../../../../../services/alarm";
-import DictCache from "../../../../../../models/cache/DictCache";
 import { queryCisByIds } from "../../../../../../services";
 import styles from "./index.module.scss";
 import SingleResourceStrategyLink from "./SingleResourceStrategyLink";
-import BlockBox from "./BlockBox"; // url 处理，UICBB 的地址需截取前缀
+import BlockBox from "./BlockBox";
+import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
+import ResourceOverviewMetric from "./ResourceOverviewMetric";
+import BaseInfo from "./BaseInfo"; // url 处理，UICBB 的地址需截取前缀
 
 function formatUrl(url) {
   var _window, _window$location;
@@ -30,127 +30,6 @@ function formatUrl(url) {
   } else {
     return url;
   }
-} // 基本信息
-
-
-function BaseInfoRender(type, data) {
-  var _itemCols$type;
-
-  var itemCols = {
-    node: [{
-      label: '资源名称：',
-      objKey: 'resource',
-      render: function render(valueData, key) {
-        var display_name = valueData.display_name,
-            link = valueData.link;
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.item,
-          key: key
-        }, /*#__PURE__*/React.createElement("span", {
-          className: styles.label
-        }, "\u8D44\u6E90\u540D\u79F0\uFF1A"), /*#__PURE__*/React.createElement("span", {
-          className: styles.content,
-          title: display_name
-        }, valueData ? /*#__PURE__*/React.createElement(Link, {
-          className: styles.link,
-          to: formatUrl(link)
-        }, display_name) : '-'));
-      }
-    }, {
-      label: 'IP地址：',
-      objKey: 'ipv4_address'
-    }, {
-      label: '资产编号：',
-      objKey: 'asset_number'
-    }, {
-      label: '资源类型：',
-      objKey: 'ciName'
-    }, {
-      label: '资源位置：',
-      objKey: 'res_address'
-    } // {
-    //   label: '负责人：',
-    //   objKey: 'principal'
-    // },
-    ],
-    link: [{
-      label: '链路带宽：',
-      objKey: 'rated_bandwidth',
-      style: {
-        width: '100%'
-      }
-    }, {
-      label: '源IP地址：',
-      objKey: 'source_ipv4'
-    }, {
-      label: '目的IP地址：',
-      objKey: 'destination_ipv4'
-    }, {
-      label: '源端口：',
-      objKey: 'source_Interface'
-    }, {
-      label: '目的端口：',
-      objKey: 'destination_Interface'
-    }]
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles['base-info']
-  }, (_itemCols$type = itemCols[type]) === null || _itemCols$type === void 0 ? void 0 : _itemCols$type.map(function (_ref, key) {
-    var label = _ref.label,
-        objKey = _ref.objKey,
-        style = _ref.style,
-        render = _ref.render;
-    return data[objKey] === false ? '' : render ? render(data[objKey], key) : /*#__PURE__*/React.createElement("div", {
-      className: styles.item,
-      style: style || {},
-      key: key
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, label), /*#__PURE__*/React.createElement("span", {
-      className: styles.content,
-      title: data[objKey]
-    }, data[objKey] || '-'));
-  }));
-} // 关键指标
-
-
-function indicatorRender(type, data) {
-  function formatValue(itemData) {
-    var format = metricValueFormat({
-      value: itemData.value,
-      dataType: itemData.dataType,
-      dict: DictCache.getDictObject(),
-      unit: itemData.unit,
-      code: itemData.code
-    });
-    return format.value + " " + (format.value === '-' ? '' : format.unit);
-  }
-
-  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));
-  })) : '');
 }
 /**
  * 资源概览
@@ -158,18 +37,19 @@ function indicatorRender(type, data) {
 
 
 export default function ResourceOverview(props) {
+  var _viewerProps$resource;
+
   var topo = props.topo,
       id = props.id,
       type = props.type,
       ciType = props.ciType,
-      userId = props.userId;
-
-  var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
-      attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
-
-  var _topo$store$useModelS2 = topo.store.useModelState('topoMod').data,
-      linkGroups = _topo$store$useModelS2.linkGroups,
-      links = _topo$store$useModelS2.links;
+      userId = props.userId,
+      viewerProps = props.viewerProps;
+  var resourceOverviewProps = viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$resource = viewerProps.resourceDetailProps) === null || _viewerProps$resource === void 0 ? void 0 : _viewerProps$resource.resourceOverviewProps;
+  var ciAttrAndMetricData = useCiAttrAndMetricData({
+    topo: topo,
+    id: id
+  });
 
   var _useState = useState({
     // 资源
@@ -215,9 +95,25 @@ export default function ResourceOverview(props) {
       isAppTopo = _useState4[0],
       setIsAppTopo = _useState4[1];
 
+  var ciTypeMeta = useMemo(function () {
+    var typeMeta;
+
+    if (ciType === 'network_link') {
+      // 网络链路要按链路类型查询属性、指标
+      var link = topo.dataModel.getDataById(id);
+      var linkConnectType = link.attributes['network_link.connect_type'];
+      typeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
+    } else {
+      typeMeta = topo.ciTyeCache.getCiType(ciType);
+    }
+
+    return typeMeta;
+  }, [id]);
   useEffect(function () {
-    init();
-  }, [attrsAndMetrics, id]);
+    if (ciAttrAndMetricData) {
+      init();
+    }
+  }, [ciAttrAndMetricData, ciTypeMeta, id]);
 
   function init() {
     return _init.apply(this, arguments);
@@ -227,27 +123,15 @@ export default function ResourceOverview(props) {
     _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _topo$options$resourc, _modelAttributeMap$ow, _modelAttributeMap$, _modelAttributeMap$2, _modelAttributeMap$3, _modelAttributeMap$di, _modelAttributeMap$ip, _modelAttributeMap$as, _modelAttributeMap$5, _modelAttributeMap$6, _modelAttributeMap$so, _attributeMap$source_, _modelAttributeMap$de, _attributeMap$destina;
 
-      var ciTypeMeta, link, linkConnectType, _ciTypeMeta, modelMetrics, ciName, modelAttributeMap, domain, topModelMetrics, isAppTopoFlag, _findItem, attributeMap, metrics, res_address, _attributeMap$, rated_bandwidth, _modelAttributeMap$4;
+      var modelMetrics, ciName, modelAttributeMap, domain, topModelMetrics, isAppTopoFlag, attributeMap, metrics, res_address, _attributeMap$, rated_bandwidth, _modelAttributeMap$4;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              console.log('初始化/更新概览 props', props);
-
-              if (ciType === 'network_link') {
-                // 网络链路要按链路类型查询属性、指标
-                link = [].concat(linkGroups, links).find(function (item) {
-                  return item.id === id;
-                });
-                linkConnectType = link.attributes['network_link.connect_type'];
-                ciTypeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
-              } else {
-                ciTypeMeta = topo.ciTyeCache.getCiType(ciType);
-              } // 指标模型
-
+              console.log('初始化/更新概览 props', props); // 指标模型
 
-              _ciTypeMeta = ciTypeMeta, modelMetrics = _ciTypeMeta.metrics, ciName = _ciTypeMeta.displayName, modelAttributeMap = _ciTypeMeta.attributeMap, domain = _ciTypeMeta.domain;
+              modelMetrics = ciTypeMeta.metrics, ciName = ciTypeMeta.displayName, modelAttributeMap = ciTypeMeta.attributeMap, domain = ciTypeMeta.domain;
               topModelMetrics = modelMetrics.slice(0, 6); // 应用拓扑处理
 
               isAppTopoFlag = !!((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData);
@@ -255,41 +139,41 @@ export default function ResourceOverview(props) {
               setIsAppTopo(isAppTopoFlag);
 
               if (!isAppTopoFlag) {
-                _context.next = 10;
+                _context.next = 9;
                 break;
               }
 
               initAppTopo(topModelMetrics, modelAttributeMap, ciName, domain);
               return _context.abrupt("return");
 
-            case 10:
+            case 9:
               // 拓扑（默认） ---------------------------
               // 基本信息
-              _findItem = findItem(attrsAndMetrics, 'id', id), attributeMap = _findItem.attributeMap, metrics = _findItem.metrics;
-              console.log('基本信息', attributeMap, attrsAndMetrics, modelAttributeMap); // userVisible
+              attributeMap = ciAttrAndMetricData.attributeMap, metrics = ciAttrAndMetricData.metrics;
+              console.log('基本信息', attributeMap, modelAttributeMap); // userVisible
               // 位置
 
               res_address = false;
 
               if (!((_modelAttributeMap$ow = modelAttributeMap.owned_computer_room) !== null && _modelAttributeMap$ow !== void 0 && _modelAttributeMap$ow.userVisible)) {
-                _context.next = 19;
+                _context.next = 18;
                 break;
               }
 
-              _context.next = 16;
+              _context.next = 15;
               return getAddressFormat(attributeMap);
 
-            case 16:
+            case 15:
               res_address = _context.sent;
-              _context.next = 20;
+              _context.next = 19;
               break;
 
-            case 19:
+            case 18:
               if ((_modelAttributeMap$ = modelAttributeMap[ciType + ".computer_room"]) !== null && _modelAttributeMap$ !== void 0 && _modelAttributeMap$.userVisible || (_modelAttributeMap$2 = modelAttributeMap[ciType + ".area"]) !== null && _modelAttributeMap$2 !== void 0 && _modelAttributeMap$2.userVisible) {
                 res_address = attributeMap[ciType + ".computer_room "] || attributeMap[ciType + ".area"] ? " " + (((_attributeMap$ = attributeMap[ciType + ".area_object"]) === null || _attributeMap$ === void 0 ? void 0 : _attributeMap$.displayName) || '') + " " + (attributeMap[ciType + ".computer_room"] || '') : false;
               }
 
-            case 20:
+            case 19:
               // 链路带宽(取实际带宽)
               rated_bandwidth = false;
 
@@ -320,16 +204,16 @@ export default function ResourceOverview(props) {
               }); // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
 
               setIndicator(topModelMetrics.map(function (item) {
-                var _findItem2;
+                var _findItem;
 
                 return _extends({}, item, {
-                  value: ((_findItem2 = findItem(metrics, 'code', item.code)) === null || _findItem2 === void 0 ? void 0 : _findItem2.value) || ''
+                  value: ((_findItem = findItem(metrics, 'code', item.code)) === null || _findItem === void 0 ? void 0 : _findItem.value) || ''
                 });
               })); // 资源-告警/风险
 
               getAlarmRiskData(id);
 
-            case 25:
+            case 24:
             case "end":
               return _context.stop();
           }
@@ -453,7 +337,7 @@ export default function ResourceOverview(props) {
 
   function _getAttribute() {
     _getAttribute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
-      var res, _ref3, attributes, attributeMap;
+      var res, _ref2, attributes, attributeMap;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -471,7 +355,7 @@ export default function ResourceOverview(props) {
 
             case 2:
               res = _context3.sent;
-              _ref3 = res[0] || {}, attributes = _ref3.attributes;
+              _ref2 = res[0] || {}, attributes = _ref2.attributes;
               attributeMap = {};
               attributes.forEach(function (item) {
                 attributeMap[item.code] = item.value;
@@ -494,14 +378,14 @@ export default function ResourceOverview(props) {
 
 
   function _getAddressFormat() {
-    _getAddressFormat = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref2) {
+    _getAddressFormat = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref) {
       var owned_computer_room, owned_cabinet, start_u_location, end_u_location, address, _res$find, _res$find$attributes, _res$find2, _res$find2$attributes, res, u;
 
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              owned_computer_room = _ref2.owned_computer_room, owned_cabinet = _ref2.owned_cabinet, start_u_location = _ref2.start_u_location, end_u_location = _ref2.end_u_location;
+              owned_computer_room = _ref.owned_computer_room, owned_cabinet = _ref.owned_cabinet, start_u_location = _ref.start_u_location, end_u_location = _ref.end_u_location;
               console.log('获取地址信息：', {
                 owned_computer_room: owned_computer_room,
                 owned_cabinet: owned_cabinet,
@@ -726,11 +610,19 @@ export default function ResourceOverview(props) {
       ciType: ciType,
       name: baseInfo.resource.display_name
     })
-  }, BaseInfoRender(type, baseInfo)), /*#__PURE__*/React.createElement(BlockBox, {
+  }, /*#__PURE__*/React.createElement(BaseInfo, {
+    topo: topo,
+    type: type,
+    data: baseInfo,
+    ciTypeMeta: ciTypeMeta,
+    resourceOverviewProps: resourceOverviewProps
+  })), /*#__PURE__*/React.createElement(BlockBox, {
     headerTitle: "\u5173\u952E\u6307\u6807"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.indicator
-  }, indicatorRender(type, indicator))), /*#__PURE__*/React.createElement(BlockBox, {
+  }, /*#__PURE__*/React.createElement(ResourceOverviewMetric, {
+    topo: topo,
+    type: type,
+    data: indicator
+  })), /*#__PURE__*/React.createElement(BlockBox, {
     headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.alarm

package/es/core/viewer/components/plugins/BaseInfo/components/ResourceOverview/useCiAttrAndMetricData.js

@@ -0,0 +1,12 @@
+export default function useCiAttrAndMetricData(props) {
+  var topo = props.topo,
+      id = props.id;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
+      attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
+
+  var data = attrsAndMetrics.find(function (item) {
+    return item.id === id;
+  });
+  return data;
+}