@riil-frontend/component-topology 9.0.0-a.1 → 9.0.0-a.3

package/es/core/models/cache/CiCache.js

@@ -0,0 +1,78 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { queryCisByIds } from "../../services";
+/**
+ * Ci缓存
+ */
+
+var CiCache = /*#__PURE__*/function () {
+  function CiCache() {
+    this.ciMap = {};
+  }
+
+  var _proto = CiCache.prototype;
+
+  /**
+   * 
+   * @param ids {string[]}
+   * @returns {Promise<Object>}
+   */
+  _proto.load =
+  /*#__PURE__*/
+  function () {
+    var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(ids) {
+      var _this = this;
+
+      var unloadCiIds, cis, map;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              unloadCiIds = ids.filter(function (id) {
+                return !_this.ciMap[id];
+              });
+
+              if (!unloadCiIds.length) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 4;
+              return queryCisByIds(unloadCiIds);
+
+            case 4:
+              cis = _context.sent;
+              cis.forEach(function (ci) {
+                _this.ciMap[ci.id] = ci;
+              });
+
+            case 6:
+              map = {};
+              ids.forEach(function (id) {
+                map[id] = _this.ciMap[id];
+              });
+              return _context.abrupt("return", this.ciMap);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, this);
+    }));
+
+    function load(_x) {
+      return _load.apply(this, arguments);
+    }
+
+    return load;
+  }();
+
+  _proto.getCi = function getCi(id) {
+    return this.ciMap[id];
+  };
+
+  return CiCache;
+}();
+
+export default new CiCache();

package/es/core/models/utils/linkUtils.js

@@ -6,7 +6,8 @@ import _ from 'lodash';
 import { queryCisByIds, queryModelAsset } from "../../services"; // 查询所有连线
 
 import { getEdges } from "../../../utils/htElementUtils";
-import CiTypeCache from "../cache/CiTypeCache"; // const interfaceTypeMap = {
+import CiTypeCache from "../cache/CiTypeCache";
+import CiCache from "../cache/CiCache"; // const interfaceTypeMap = {
 //   "network.interface": {
 //     displayName: "网络接口",
 //   },
@@ -33,10 +34,10 @@ export function isCrucialLink(link) {
 export function isExitLink(link) {
   return (link === null || link === void 0 ? void 0 : link.attributes) && !(link !== null && link !== void 0 && link.attributes['destination_id']);
 }
-export function mergeLinksData(links, linkCis, nodes, interfaceCis, interfaceDoc) {
+export function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc) {
   var linkCiMap = keyBy(links, 'id');
   return links.map(function (link) {
-    var _interfaceCis$find, _interfaceCis$find2;
+    var _interfaceCiMap$attri, _interfaceCiMap$attri2;
 
     var linkCi = linkCiMap[link.id];
 
@@ -63,14 +64,10 @@ export function mergeLinksData(links, linkCis, nodes, interfaceCis, interfaceDoc
         destination_type_object: interfaceDoc[attributes.destination_type],
         // 源/目的接口
         source_id_object: {
-          displayName: (_interfaceCis$find = interfaceCis.find(function (node) {
-            return node.id === attributes.source_id;
-          })) === null || _interfaceCis$find === void 0 ? void 0 : _interfaceCis$find.attributes['display_name']
+          displayName: (_interfaceCiMap$attri = interfaceCiMap[attributes.source_id]) === null || _interfaceCiMap$attri === void 0 ? void 0 : _interfaceCiMap$attri.attributes['display_name']
         },
         destination_id_object: {
-          displayName: (_interfaceCis$find2 = interfaceCis.find(function (node) {
-            return node.id === attributes.destination_id;
-          })) === null || _interfaceCis$find2 === void 0 ? void 0 : _interfaceCis$find2.attributes['display_name']
+          displayName: (_interfaceCiMap$attri2 = interfaceCiMap[attributes.destination_id]) === null || _interfaceCiMap$attri2 === void 0 ? void 0 : _interfaceCiMap$attri2.attributes['display_name']
         }
       })
     });
@@ -82,7 +79,7 @@ export function getLinksDetail(_x, _x2) {
 
 function _getLinksDetail() {
   _getLinksDetail = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(links, nodes) {
-    var linkCis, interfaceIds, interfaceTypes, interfaceCis, interfaceDoc;
+    var linkCis, interfaceIds, interfaceTypes, interfaceCiMap, interfaceDoc;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -112,16 +109,16 @@ function _getLinksDetail() {
               return item !== 'ip';
             });
             _context.next = 7;
-            return queryCisByIds(interfaceIds);
+            return CiCache.load(interfaceIds);
 
           case 7:
-            interfaceCis = _context.sent;
+            interfaceCiMap = _context.sent;
             _context.next = 10;
             return CiTypeCache.getCiTypeMap(interfaceTypes);
 
           case 10:
             interfaceDoc = _context.sent;
-            return _context.abrupt("return", mergeLinksData(links, linkCis, nodes, interfaceCis, interfaceDoc));
+            return _context.abrupt("return", mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc));
 
           case 12:
           case "end":

package/es/core/store/models/topoBizMod.js

@@ -6,6 +6,10 @@ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 export default function (engine) {
   return {
     state: {
+      /**
+       * 格式：{id1: {attributes: {}}}
+       */
+      ciMap: {},
       // 指标默认设置
       resAndMetrics: {},
       metricDoc: {},

package/es/core/store/models/viewer/resourceDetail.js

@@ -21,6 +21,13 @@ export default {
         visible: false,
         id: null // 资源id
 
+      };
+    },
+    close: function close() {
+      return {
+        visible: false,
+        id: null // 资源id
+
       };
     }
   },

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

@@ -76,9 +76,7 @@ function ResourceDetailDrawer(props) {
   }, []); // 解决切换拓扑图隐藏概览
 
   useEffect(function () {
-    resourceDetailDispatchers.update({
-      visible: false
-    }); // TODO 其他数据重置
+    close(); // TODO 其他数据重置
   }, [topoId]);
 
   function getUser() {
@@ -154,6 +152,12 @@ function ResourceDetailDrawer(props) {
     }
   }
 
+  function close() {
+    resourceDetailDispatchers.update({
+      visible: false
+    });
+  }
+
   function init(data, targetType) {
     // console.log('初始化基本信息', data, targetType);
     var id = data.id,
@@ -214,7 +218,8 @@ function ResourceDetailDrawer(props) {
       topo: topo,
       userId: userId,
       activeData: activeData,
-      resourceData: resourceData
+      resourceData: resourceData,
+      onClose: close
     }));
   };
 
@@ -228,11 +233,7 @@ function ResourceDetailDrawer(props) {
     })),
     width: 580,
     hasMask: false,
-    onClose: function onClose() {
-      return resourceDetailDispatchers.update({
-        visible: false
-      });
-    }
+    onClose: close
   }, visible && resourceData && renderContent()));
 }
 

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

@@ -489,32 +489,39 @@ export default function ResourceOverview(props) {
                     switch (_context5.prev = _context5.next) {
                       case 0:
                         _context5.t0 = item.dataIndex;
-                        _context5.next = _context5.t0 === 'display_name' ? 3 : _context5.t0 === 'ciName' ? 7 : _context5.t0 === 'res_address' ? 10 : _context5.t0 === 'imageName' ? 17 : 21;
+                        _context5.next = _context5.t0 === 'display_name' ? 3 : _context5.t0 === 'ciName' ? 6 : _context5.t0 === 'res_address' ? 9 : _context5.t0 === 'imageName' ? 16 : 20;
                         break;
 
                       case 3:
-                        link = "/default/pagecenter/resDetail/view/" + id + "?resId=" + id + "&domainCode=" + ciTypeMeta.domain + "&title=" + attributeMap.display_name + "&ciCode=" + ciType; // 资源跳转链接
-
-                        value = /*#__PURE__*/React.createElement("span", {
-                          onClick: onClose
-                        }, /*#__PURE__*/React.createElement(Link, {
-                          className: styles.link,
-                          title: attributeMap.display_name || '',
-                          to: formatUrl(link)
-                        }, attributeMap.display_name || '-'));
+                        // 无监控模板不能跳转详情。跳转前需判定资源实例数据属性中是否包含support_templates属性。若不包含，则不能跳转
+                        if (attributeMap.support_templates) {
+                          link = "/default/pagecenter/resDetail/view/" + id + "?resId=" + id + "&domainCode=" + ciTypeMeta.domain + "&title=" + attributeMap.display_name + "&ciCode=" + ciType; // 资源跳转链接
+
+                          value = /*#__PURE__*/React.createElement("span", {
+                            onClick: onClose
+                          }, /*#__PURE__*/React.createElement(Link, {
+                            className: styles.link,
+                            disabled: true,
+                            title: attributeMap.display_name || '',
+                            to: formatUrl(link)
+                          }, attributeMap.display_name || '-'));
+                        } else {
+                          value = attributeMap.display_name || '-';
+                        }
+
                         contentTitle = attributeMap.display_name || '-';
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 7:
+                      case 6:
                         value = ciTypeMeta.displayName;
                         contentTitle = value;
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 10:
-                        _context5.next = 12;
+                      case 9:
+                        _context5.next = 11;
                         return getAddressFormat(attributeMap);
 
-                      case 12:
+                      case 11:
                         address = _context5.sent;
                         owned_computer_room = attributeMap.owned_computer_room, owned_cabinet = attributeMap.owned_cabinet; // 跳转3D机房定位设备
 
@@ -534,18 +541,18 @@ export default function ResourceOverview(props) {
                         }
 
                         contentTitle = address;
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 17:
+                      case 16:
                         node = topo.getDataModel().getDataByTag(id);
                         value = (node === null || node === void 0 ? void 0 : node.a('customName')) || (node === null || node === void 0 ? void 0 : node.a('name')) || '-';
                         contentTitle = value;
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 21:
-                        return _context5.abrupt("break", 22);
+                      case 20:
+                        return _context5.abrupt("break", 21);
 
-                      case 22:
+                      case 21:
                       case "end":
                         return _context5.stop();
                     }

package/es/style.js

@@ -3,10 +3,10 @@ import '@alifd/next/es/box/style';
 import '@alifd/next/es/message/style';
 import '@riil-frontend/component-topology-utils/es/style';
 import '@riil-frontend/component-riil-event-emitter/es/style';
+import '@riil-frontend/utils/es/style';
 import '@alifd/next/es/drawer/style';
 import '@alifd/next/es/menu-button/style';
 import '@alifd/next/es/search/style';
-import '@riil-frontend/utils/es/style';
 import '@alifd/next/es/tab/style';
 import '@alifd/next/es/table/style';
 import '@riil-frontend/component-table-layout/es/style';

package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -37,7 +37,7 @@ var LINE_TYPE_OPTIONS = [{
   label: '双折线',
   icon: 'topo_linear_icon_bilinear'
 }, {
-  value: 'flex',
+  value: 'doublearc',
   label: '双弧线',
   icon: 'topo_linear_icon_arcline'
 }];

package/lib/core/hooks/useCiAttributeChange.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = useCiAttributeChange;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _react = require("react");
+
+var _CiCache = _interopRequireDefault(require("../models/cache/CiCache"));
+
+var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
+
+function mergeData(cis, ciChangeData) {
+  if (!cis.find(function (item) {
+    return item.id === ciChangeData.id;
+  })) {
+    return cis;
+  }
+
+  return cis.map(function (ci) {
+    if (ci.id === ciChangeData.id) {
+      return (0, _extends2["default"])({}, ci, {
+        attributes: (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes)
+      });
+    }
+
+    return ci;
+  });
+}
+/**
+ * 监听ci属性变更
+ * 
+ * @param {*} props 
+ */
+
+
+function useCiAttributeChange(props) {
+  var topo = props.topo;
+  (0, _useTopoEventListener["default"])({
+    type: 'attribute',
+    onMessage: function onMessage(ciChangeData) {
+      // 更新拓扑数据
+      var topoData = topo.store.getModelState('topoMod').data;
+
+      if (topoData) {
+        var newData = (0, _extends2["default"])({}, topoData, {
+          nodes: mergeData(topoData.nodes, ciChangeData),
+          links: mergeData(topoData.links, ciChangeData),
+          linkGroups: mergeData(topoData.linkGroups, ciChangeData)
+        });
+        var topoDispatchers = topo.store.getModelDispatchers('topoMod');
+        topoDispatchers.update({
+          data: newData
+        });
+      } // 更新缓存
+
+
+      var ci = _CiCache["default"].getCi(ciChangeData.id);
+
+      if (ci) {
+        ci.attributes = (0, _extends2["default"])({}, ci.attributes, ciChangeData.attributes);
+      }
+    }
+  });
+}

package/lib/core/hooks/usePolling.js

@@ -7,10 +7,10 @@ exports["default"] = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("react");
 
 var _ahooks = require("ahooks");
@@ -19,6 +19,14 @@ var _lodash = _interopRequireDefault(require("lodash"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
+var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
+
+var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
+
+var _DictCache = _interopRequireDefault(require("../models/cache/DictCache"));
+
+var _useCiAttributeChange = _interopRequireDefault(require("./useCiAttributeChange"));
+
 /**
  * 轮询获取指标hooks
  * @param {*} props
@@ -26,12 +34,156 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 var usePolling = function usePolling(props) {
   var topo = props.topo;
   var store = topo.store;
+  (0, _useCiAttributeChange["default"])({
+    topo: topo
+  });
   var bizState = store.useModelState('topoBizMod');
   var resAndMetrics = bizState.resAndMetrics,
       pollingSwitch = bizState.pollingSwitch;
   var displayConfig = topo.store.useModelState('displayConfig');
   var resourceOverviewState = topo.store.useModelState('topoBaseInfoOverview');
-  var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList; // 轮询hooks
+  var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList;
+  /**
+   * 查询拓扑图资源的属性指标
+   * 
+   * @returns {array}
+   */
+
+  function fetchData() {
+    return _fetchData.apply(this, arguments);
+  }
+  /**
+   * 
+   * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
+   */
+
+
+  function _fetchData() {
+    _fetchData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var _topo$store$getModelS, resIdsList, nodeIdsList, codes, param, _yield$Promise$all, ciMetricResult, transformLinkData;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              transformLinkData = function _transformLinkData(data) {
+                var _topo$dataModel$getDa = topo.dataModel.getData(),
+                    links = _topo$dataModel$getDa.links,
+                    linkGroups = _topo$dataModel$getDa.linkGroups;
+
+                var link = [].concat(links, linkGroups).find(function (item) {
+                  return item.id === data.id;
+                });
+
+                if (!link) {
+                  return data;
+                }
+
+                return (0, _extends2["default"])({}, data, {
+                  attributeMap: link.attributes || {}
+                });
+              };
+
+              _topo$store$getModelS = topo.store.getModelState('topoBizMod').resAndMetrics, resIdsList = _topo$store$getModelS.resIdsList, nodeIdsList = _topo$store$getModelS.nodeIdsList; // rlog.debug('根据ci的id获取属性的值-getCiArrByIds', resIdsList, metrics);
+              // 无资源，不查询
+
+              if (resIdsList.length) {
+                _context.next = 4;
+                break;
+              }
+
+              return _context.abrupt("return", []);
+
+            case 4:
+              // 需要查询的指标列表
+              codes = topo.attributeMetricDisplay.getResourceMetricCodes();
+              param = {
+                ciId: nodeIdsList,
+                codes: codes,
+                // 过滤掉不需要查询的
+                relationId: topo.attributeMetricDisplay.getEdges().map(function (edge) {
+                  return {
+                    ciId: edge.id,
+                    operation: edge.operation
+                  };
+                })
+              };
+              _context.t0 = Promise;
+              _context.t1 = // 查询指标值
+              _topo["default"].ciInfo.batchQueryCiInfo(param);
+              _context.next = 10;
+              return _DictCache["default"].init();
+
+            case 10:
+              _context.t2 = _context.sent;
+              _context.t3 = [_context.t1, _context.t2];
+              _context.next = 14;
+              return _context.t0.all.call(_context.t0, _context.t3);
+
+            case 14:
+              _yield$Promise$all = _context.sent;
+              ciMetricResult = _yield$Promise$all[0];
+              return _context.abrupt("return", ciMetricResult.map(function (data) {
+                var ci = topo.dataModel.getDataById(data.id);
+                var resultData = (0, _extends2["default"])({}, data, ci, {
+                  attributeMap: (0, _extends2["default"])({}, (ci === null || ci === void 0 ? void 0 : ci.attributes) || {})
+                });
+                resultData = transformLinkData(resultData); // 特殊处理：ipv6 从ipv6_address_list取第一个
+
+                // 特殊处理：ipv6 从ipv6_address_list取第一个
+                if (resultData.attributeMap.ipv6_address_list && !resultData.attributeMap.ipv6_address) {
+                  resultData.attributeMap.ipv6_address = (resultData.attributeMap.ipv6_address_list || '').split(',')[0];
+                }
+
+                return resultData;
+              }));
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _fetchData.apply(this, arguments);
+  }
+
+  function refresh() {
+    return _refresh.apply(this, arguments);
+  } // 轮询hooks
+
+
+  function _refresh() {
+    _refresh = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var data;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(!pollingSwitch || !(resAndMetrics !== null && resAndMetrics !== void 0 && resAndMetrics.resIdsList.length))) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              _context2.next = 4;
+              return fetchData();
+
+            case 4:
+              data = _context2.sent;
+              return _context2.abrupt("return", data);
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _refresh.apply(this, arguments);
+  }
 
   var _useRequest = (0, _ahooks.useRequest)(refresh, {
     pollingInterval: 60 * 1000,
@@ -42,30 +194,13 @@ var usePolling = function usePolling(props) {
       if (result) {
         var dd = _lodash["default"].cloneDeep(result);
 
-        topo.attributeMetricDisplay.loadAttributeAndMetric(dd);
+        topo.attributeMetricDisplay.loadData(dd);
       }
     }
   }),
       loading = _useRequest.loading,
       startPoll = _useRequest.run,
-      stopPoll = _useRequest.cancel;
-
-  function convertData(data) {
-    return data.map(function (item) {
-      return (0, _extends2["default"])({}, item, {
-        attributes: convertAttrMap(item.attributes),
-        metrics: convertAttrMap(item.metrics)
-      });
-    });
-  }
-
-  function convertAttrMap(attrs) {
-    var map = {};
-    attrs.forEach(function (attr) {
-      map[attr.code] = attr.value;
-    });
-    return map;
-  } // 需要刷新数据的场景：显示模式、资源变化、配置变化、开关开启、概览
+      stopPoll = _useRequest.cancel; // 需要刷新数据的场景：显示模式、资源变化、配置变化、开关开启、概览
 
 
   (0, _react.useEffect)(function () {
@@ -87,46 +222,16 @@ var usePolling = function usePolling(props) {
         stopPoll();
       }
     };
-  }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
-  /**
-   * 
-   * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标
-   */
-
-  function refresh() {
-    return _refresh.apply(this, arguments);
-  }
-
-  function _refresh() {
-    _refresh = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!(!pollingSwitch || !(resAndMetrics !== null && resAndMetrics !== void 0 && resAndMetrics.resIdsList.length))) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              _context.next = 4;
-              return topo.attributeMetricDisplay.fetchData();
-
-            case 4:
-              return _context.abrupt("return", _context.sent);
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _refresh.apply(this, arguments);
-  }
+  }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]); // 属性变更监听更新
 
+  (0, _componentRiilEventEmitter.useCbbEventListener)('topo', {
+    name: 'topo',
+    onMessage: function onMessage(message) {
+      if (message.type === 'attribute') {
+        var data = message.data;
+      }
+    }
+  });
   return {
     startPoll: startPoll,
     stopPoll: stopPoll