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

package/lib/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js

@@ -11,8 +11,6 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
 
 var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
 
-var _htElementDataUtil = require("../../../../../../../../utils/htElementDataUtil");
-
 var _htElementUtils = require("../../../../../../../../utils/htElementUtils");
 
 function sortResourcesByName(resources) {
@@ -30,7 +28,9 @@ function useGroupRelateResource(props) {
   } : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
   // 过滤出资源
 
-  var resourceNodes = (0, _htElementDataUtil.getGroupChildrenResourceElements)(group); // 资源按名称排序
+  var resourceNodes = (0, _htElementUtils.getGroupChildren)(group).filter(function (item) {
+    return !!item.getTag();
+  }); // 资源按名称排序
 
   var useSortNodes = useGroupSortResources || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
   var data = useSortNodes(resourceNodes.map(function (node) {

package/lib/core/editor/components/settings/propertyViews/node/data/BindIpInput.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BindIpInput;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _exitLinkUtil = require("../../../../../../../networkTopo/utils/exitLinkUtil");
+
+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; }
+
+var FormItem = _form["default"].Item;
+/**
+ * @return {React.ReactNode | null}
+ */
+
+function BindIpInput(props) {
+  var _values$attrObjectBi;
+
+  var nodeElement = props.nodeElement,
+      topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      fieldItem = props.fieldItem; // const currentResId = node.tag;
+  // console.log(
+  //   "nodeElement, topo, topoEditApi, node",
+  //   nodeElement,
+  //   topo,
+  //   topoEditApi,
+  //   values
+  // );
+
+  var _useState = (0, _react.useState)(""),
+      error = _useState[0],
+      setError = _useState[1];
+
+  var _useState2 = (0, _react.useState)((_values$attrObjectBi = values["attrObject.bindIp"]) !== null && _values$attrObjectBi !== void 0 ? _values$attrObjectBi : ""),
+      txtValue = _useState2[0],
+      setTxtValue = _useState2[1];
+
+  var saveIp = function saveIp(v) {
+    fieldItem.validate(function (errors, vals) {
+      if (errors) {
+        console.error("saveIp-error", errors, vals);
+      } else {
+        setError("");
+        onChange(txtValue);
+        topoEditApi.relateNodeIp(txtValue, nodeElement);
+      }
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    fieldItem.reset();
+    setTxtValue(values["attrObject.bindIp"]);
+  }, [values]);
+
+  var inputChange = function inputChange(v) {
+    setTxtValue(v); // onChange(v);
+  }; // 图片节点验证ip唯一性
+
+
+  var checkIp = function checkIp(rule, value, callback) {
+    var dm = topo.getDataModel();
+    var isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, value, nodeElement); // console.log("checkIp", isUnique);
+
+    if (!isUnique) {
+      return callback("ip不能重复");
+    } else {
+      return callback();
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(FormItem, {
+    label: "\u5173\u8054IP",
+    pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
+    patternTrigger: "onBlur",
+    patternMessage: "IP\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E",
+    validator: checkIp
+  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    placeholder: "\u8BF7\u8F93\u5165Ip\u5730\u5740",
+    name: "attrObject.bindIp",
+    state: error,
+    value: txtValue,
+    maxLength: 128,
+    onChange: inputChange
+  })), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    type: "primary",
+    text: true,
+    onClick: saveIp,
+    style: {
+      marginLeft: 10,
+      marginTop: 27
+    }
+  }, "\u4FDD\u5B58"));
+}

package/lib/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -27,6 +27,10 @@ var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateReso
 
 var _PlatformDisplay = _interopRequireDefault(require("./PlatformDisplay"));
 
+var _BindIpInput = _interopRequireDefault(require("./BindIpInput"));
+
+var _exitLinkUtil = require("../../../../../../../networkTopo/utils/exitLinkUtil");
+
 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; }
@@ -37,20 +41,21 @@ var CollapsePanel = _collapse["default"].Panel;
 function parseValues(values) {
   return (0, _extends2["default"])({}, values, {
     "attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
-    "attrObject.bindTopo": values["attrObject.bindTopo"] || "" // 解决切换节点时关联拓扑选项未重置
-
+    "attrObject.bindTopo": values["attrObject.bindTopo"] || "",
+    // 解决切换节点时关联拓扑选项未重置
+    "attrObject.bindIp": values["attrObject.bindIp"] || ""
   });
 }
 
 function getBindType(values) {
-  if (values.tag) {
-    return "resource";
-  }
-
   if (values.attrObject.bindType) {
     return values.attrObject.bindType;
   }
 
+  if (values.tag && !values.tag.startsWith("ip:")) {
+    return "resource";
+  }
+
   return "none";
 }
 
@@ -61,15 +66,20 @@ function Data(props) {
       values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
-  var bindType = getBindType(values);
+  var bindType = getBindType(values); // console.log("node, values", node, values);
 
   var field = _field["default"].useField({
     autoUnmount: false,
     values: parseValues(values),
     onChange: function onChange(name, value) {
-      var newValues = field.getValues();
+      field.validate(function (errors, vals) {
+        if (errors) {// console.error("field-Data", errors, vals);
+        } else {
+          var newValues = field.getValues();
 
-      _onChange(name, value, newValues);
+          _onChange(name, value, newValues);
+        }
+      });
     }
   });
 
@@ -129,7 +139,7 @@ function Data(props) {
   }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
     labelAlign: "top"
-  }, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }, (!values.tag || bindType === "ip") && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u7C7B\u578B"
   }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
     name: "bindType",
@@ -143,7 +153,9 @@ function Data(props) {
     value: "none"
   }, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
     value: "resource"
-  }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/_react["default"].createElement(Option, {
+  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "ip"
+  }, "\u5173\u8054IP"), RelateTopoTree && /*#__PURE__*/_react["default"].createElement(Option, {
     value: "topo"
   }, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u8D44\u6E90"
@@ -157,7 +169,7 @@ function Data(props) {
       flex: 1,
       paddingRight: 16,
       color: "#4D6277",
-      lineHeight: '20px'
+      lineHeight: "20px"
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
@@ -166,13 +178,35 @@ function Data(props) {
     topo: topo,
     topoEditApi: topoEditApi,
     nodeBindResourceDrawerComponent: editorProps.nodeBindResourceDrawerComponent
-  }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }))), bindType === "ip" &&
+  /*#__PURE__*/
+  // <Form.Item
+  //   label="关联IP"
+  //   // style={{ display: "flex" }}
+  //   pattern={
+  //     /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/
+  //   }
+  //   patternTrigger="onBlur"
+  //   patternMessage="IP地址格式不正确"
+  // >
+  _react["default"].createElement(_BindIpInput["default"], {
+    nodeElement: node,
+    values: values,
+    topo: topo,
+    fieldItem: field,
+    topoEditApi: topoEditApi,
+    placeholder: "\u8BF7\u8F93\u5165",
+    name: "attrObject.bindIp",
+    onChange: _onChange,
+    maxLength: 128
+  }) // </Form.Item>
+  , bindType === "topo" && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/_react["default"].createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",
     topo: topo,
     onChange: handleBindTopoChange
-  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === 'cmpTopo' && node.getTag() && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === "cmpTopo" && node.getTag() && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u6240\u5C5E\u5E73\u53F0"
   }, /*#__PURE__*/_react["default"].createElement(_PlatformDisplay["default"], props)))));
 }

package/lib/core/editor/config/themes.js

@@ -30,7 +30,9 @@ var baseLightTheme = {
       'group.title.color': '#4D6277',
       // 标题文字颜色
       'group.background': 'rgba(255, 255, 255, 0.9)',
-      'group.border.color': '#E4E9EE' // 边框颜色
+      'group.border.color': '#E4E9EE',
+      // 边框颜色
+      'group.splitLine': false // 标题底部边框
 
     }
   },
@@ -92,7 +94,56 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
       'group.title.color': '#FFFFFF',
       // 标题文字颜色
       'group.background': 'rgba(29,55,113,0.6)',
-      'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
+      'group.border.color': 'rgba(8,165,244,0.8)',
+      // 边框颜色
+      'group.splitLine': false // 标题底部边框
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.title.background': 'rgba(14,44,69,1)',
+      // 标题背景颜色 #0E2C45
+      'group.background': 'rgba(14,44,69,1)',
+      // #0E2C45
+      'group.border.color': '#08A5F4',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png',
+  backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
+  globalEdgeTagStyle: {
+    color: '#E4E9EE',
+    background: 'rgba(6, 54, 88, 1)',
+    // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658 
+    borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': 'rgba(0,0,0,0.01)',
+      // 标题背景颜色 #08A5F4
+      'group.title.color': '#8FECFF',
+      // 标题文字颜色
+      'group.title.border.color': '#ffffff',
+      // 边框颜色
+      'group.background': 'rgba(0,0,0,0.01)',
+      'group.border.color': '#ffffff',
+      // 边框颜色
+      'group.splitLine': true // 标题底部边框
 
     }
   },

package/lib/core/event/topoEventListener.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createTopoEventListener = createTopoEventListener;
+var n = 0;
+
+function createTopoEventListener(type, onMessage) {
+  var eventListenerName = "topo_" + n++;
+  var EE = window.EE;
+
+  if (EE) {
+    EE.on('topo', eventListenerName, function (data) {
+      if (data.type === type) {
+        onMessage(data.data);
+      }
+    });
+  }
+
+  return {
+    eventListenerName: eventListenerName,
+    close: function close() {
+      if (EE) {
+        window.EE.removeListener('topo', eventListenerName);
+      }
+    }
+  };
+}

package/lib/core/hooks/useAlarm.js

@@ -11,10 +11,10 @@ var _react = require("react");
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _componentRiilEventEmitter = require("@riil-frontend/component-riil-event-emitter");
-
 var _useGraphAlarmDisplay = _interopRequireDefault(require("./useGraphAlarmDisplay"));
 
+var _useTopoEventListener = _interopRequireDefault(require("./useTopoEventListener"));
+
 /**
  * 
  * 
@@ -117,20 +117,27 @@ function useAlarm(options) {
       received: data,
       all: relateTopoAlarm
     });
-  };
+  }; // 订阅消息
 
-  (0, _componentRiilEventEmitter.useCbbEventListener)("topo", {
-    name: "topo",
+
+  (0, _useTopoEventListener["default"])({
+    type: 'alarm',
     onMessage: function onMessage(data) {
       _rlog["default"].debug("Topoget--AlertMesage------------", topo, data);
 
-      if (data.type === "alarm") {
-        topo.alarm.handleAlarmEvent(data.data);
-      } else if (data.type === "risk") {
-        handleRiskData(data.data);
-      } else if (data.type === "relateTopoAlarm") {
-        handleRelateTopoAlarm(data.data);
-      }
+      topo.alarm.handleAlarmEvent(data);
+    }
+  });
+  (0, _useTopoEventListener["default"])({
+    type: 'risk',
+    onMessage: function onMessage(data) {
+      handleRiskData(data);
+    }
+  });
+  (0, _useTopoEventListener["default"])({
+    type: 'relateTopoAlarm',
+    onMessage: function onMessage(data) {
+      handleRelateTopoAlarm(data);
     }
   });
 }

package/lib/core/hooks/useCanvasTheme.js

@@ -17,7 +17,7 @@ var themeMap = [{
   name: 'white',
   label: '白色',
   color: null,
-  toolsTheme: 'lightgrayblue'
+  toolsTheme: 'white'
 }, {
   name: 'lightblue',
   label: '蓝色',
@@ -35,7 +35,12 @@ var themeMap = [{
   name: 'dark',
   label: '深色',
   color: '#031425',
-  toolsTheme: 'black'
+  toolsTheme: 'dark'
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'dark',
+  backgroundImage: '/img/topo/themes/poly.png'
 }].reduce(function (map, item) {
   var _extends2;
 
@@ -52,12 +57,13 @@ function useCanvasTheme(props) {
 
   var themeConfig = themeMap[themeName || 'white'];
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
+  var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   (0, _react.useEffect)(function () {
     // 设置
     if (graphLoaded && themeConfig) {
       try {
         topo.getHtTopo().setTheme(themeName);
-        topo.getHtTopo().setToolsTheme(themeName);
+        topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
       } catch (error) {
         console.error('切换主题失败', error);
       }
@@ -68,12 +74,14 @@ function useCanvasTheme(props) {
     if (graphLoaded) {
       try {
         topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage);
       } catch (error) {
         console.error('切换主题失败', error);
       }
     }
   }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: canvasColor
+    canvasColor: canvasColor,
+    canvasbackgroundImage: canvasbackgroundImage
   };
 }

package/lib/core/hooks/useResourceConfig.js

@@ -59,7 +59,8 @@ function _default(props) {
       resources: config.resources,
       groups: config.groups,
       exportLinkIdList: config.exportLinkIdList,
-      relateTopoIdList: config.relateTopoIdList
+      relateTopoIdList: config.relateTopoIdList //linkIps: config.linkIps,
+
     };
   };