@riil-frontend/component-topology 9.0.0-a.11 → 9.0.0-a.12

package/es/core/editor/components/settings/core/updateElementProperty.js

@@ -1,6 +1,11 @@
 export default function updateElementProperty(topo, name, value) {
   // const element = topo.getDataModel().getDataById(selection[0].id);
-  var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
+  var element = topo.getSelectionModel().getFirstData();
+  console.info("updateElementProperty", topo.getSelectionModel().getSelection(), {
+    element: element,
+    name: name,
+    value: value
+  });
 
   if (name.startsWith('attrObject.')) {
     element.setAttr(name.replace('attrObject.', ''), value);

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

@@ -0,0 +1,61 @@
+import _Button from "@alifd/next/es/button";
+import _Input from "@alifd/next/es/input";
+import React, { useState } from "react";
+
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function BindIpInput(props) {
+  var _node$attrObjectIpv;
+
+  var nodeElement = props.nodeElement,
+      topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      node = props.node,
+      onChange = props.onChange,
+      value = props.value; // const currentResId = node.tag;
+
+  console.log("nodeElement, topo, topoEditApi, node", nodeElement, topo, topoEditApi, node, value);
+
+  var _useState = useState(''),
+      error = _useState[0],
+      setError = _useState[1];
+
+  var _useState2 = useState((_node$attrObjectIpv = node["attrObject.ipv4"]) !== null && _node$attrObjectIpv !== void 0 ? _node$attrObjectIpv : ""),
+      txtValue = _useState2[0],
+      setTxtValue = _useState2[1];
+
+  var saveIp = function saveIp(v) {
+    console.log("saveIp", txtValue);
+    var rex = /^((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)))$/;
+    var reg = txtValue.match(rex);
+
+    if (reg === null) {
+      setError('error');
+    } else {
+      setError('');
+      onChange(txtValue);
+      topoEditApi.relateNodeIp(txtValue, nodeElement);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    placeholder: "\u8BF7\u8F93\u5165Ip\u5730\u5740",
+    name: "attrObject.ipv4",
+    state: error,
+    value: txtValue,
+    maxLength: 128,
+    onChange: setTxtValue
+  }), /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    text: true,
+    onClick: saveIp,
+    style: {
+      marginLeft: 10
+    }
+  }, "\u4FDD\u5B58"));
+}

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

@@ -9,19 +9,21 @@ import React, { useEffect } from "react";
 import textStyles from "../../../../../../common/text.module.scss";
 import NodeRelateResourceButton from "./NodeRelateResourceButton";
 import PlatformDisplay from "./PlatformDisplay";
+import BindIpInput from "./BindIpInput";
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
 
 function parseValues(values) {
   return _extends({}, values, {
     "attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
-    "attrObject.bindTopo": values["attrObject.bindTopo"] || "" // 解决切换节点时关联拓扑选项未重置
-
+    "attrObject.bindTopo": values["attrObject.bindTopo"] || "",
+    // 解决切换节点时关联拓扑选项未重置
+    "attrObject.ipv4": values["attrObject.ipv4"] || ""
   });
 }
 
 function getBindType(values) {
-  if (values.tag) {
+  if (values.tag && !values.tag.startsWith('Ip_')) {
     return "resource";
   }
 
@@ -40,6 +42,7 @@ export default function Data(props) {
       _onChange = props.onChange,
       editorProps = props.editorProps;
   var bindType = getBindType(values);
+  console.log("node, values", node, values);
 
   var field = _Field.useField({
     autoUnmount: false,
@@ -107,7 +110,7 @@ export default function Data(props) {
   }, /*#__PURE__*/React.createElement(_Form, {
     field: field,
     labelAlign: "top"
-  }, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
+  }, (!values.tag || bindType === "ip") && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u7C7B\u578B"
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "bindType",
@@ -121,7 +124,9 @@ export default function Data(props) {
     value: "none"
   }, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
     value: "resource"
-  }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
+  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(Option, {
+    value: "ip"
+  }, "\u5173\u8054IP"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
     value: "topo"
   }, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u8D44\u6E90"
@@ -135,7 +140,7 @@ export default 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.createElement(NodeRelateResourceButton, {
@@ -144,13 +149,27 @@ export default function Data(props) {
     topo: topo,
     topoEditApi: topoEditApi,
     nodeBindResourceDrawerComponent: editorProps.nodeBindResourceDrawerComponent
-  }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
+  }))), bindType === "ip" && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054IP" // 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\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E"
+  }, /*#__PURE__*/React.createElement(BindIpInput, {
+    nodeElement: node,
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi,
+    placeholder: "\u8BF7\u8F93\u5165",
+    name: "attrObject.ipv4",
+    maxLength: 128
+  })), bindType === "topo" && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/React.createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",
     topo: topo,
     onChange: handleBindTopoChange
-  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === 'cmpTopo' && node.getTag() && /*#__PURE__*/React.createElement(_Form.Item, {
+  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === "cmpTopo" && node.getTag() && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6240\u5C5E\u5E73\u53F0"
   }, /*#__PURE__*/React.createElement(PlatformDisplay, props)))));
 }

package/es/core/hooks/useTopoEdit.js

@@ -8,12 +8,13 @@ import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import { TPL_BLANK, TPL_TREE } from "../../utils/template";
 import topoPermissonUtil from "../../utils/topoPermissionUtil";
-import { getElements, getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode } from "../../utils/htElementUtils";
+import { getElements, getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode, getNodes } from "../../utils/htElementUtils";
 import useResourceConfig from "./useResourceConfig";
 import useGroupAddResource from "./useGroupAddResource";
 import { findGroupChildren } from "../../utils/topoData";
 import { getGroupChildrenResourceElements } from "../../utils/htElementDataUtil";
 import { isClusterHtElement, isClusterMemberHtElement } from "../../utils/clusterUtil";
+import { mergeExportLinkData } from "../models/utils/linkUtils";
 
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
@@ -315,7 +316,7 @@ var useTopoEdit = function useTopoEdit(params) {
 
               edges.map(function (edge) {
                 if (edge.a("dtype") === "link" && exportLinkIdList.indexOf(edge.getTag()) >= 0) {
-                  // exLink.push(edge);      
+                  // exLink.push(edge);
                   topo.getGraphView().dm().remove(edge);
                   exportLinkIdList.splice(config.exportLinkIdList.indexOf(edge.getTag()), 1);
                 }
@@ -378,8 +379,8 @@ var useTopoEdit = function useTopoEdit(params) {
   };
   /**
    * 获得未存在的连线元素
-   * @param {*} elements 
-   * @returns 
+   * @param {*} elements
+   * @returns
    */
 
 
@@ -392,8 +393,8 @@ var useTopoEdit = function useTopoEdit(params) {
   }
   /**
    * 获得未存在的元素
-   * @param {Array} elements 
-   * @returns 
+   * @param {Array} elements
+   * @returns
    */
 
 
@@ -569,7 +570,7 @@ var useTopoEdit = function useTopoEdit(params) {
               elements = _yield$editDispatcher4.elements;
               // 2022-11-10 修复 添加资源后分层重新布局问题，仅布局新增资源。替换api topo.updateElements(data)
               newElements = findUNExistedElements(elements);
-              rlog.debug('添加分层资源', {
+              rlog.debug("添加分层资源", {
                 layer: group,
                 newElements: newElements
               });
@@ -642,8 +643,8 @@ var useTopoEdit = function useTopoEdit(params) {
   }
   /**
    * 未选中元素添加资源
-   * 
-   * @param {*} data 
+   *
+   * @param {*} data
    */
 
 
@@ -800,7 +801,7 @@ var useTopoEdit = function useTopoEdit(params) {
                           newLinkElements = findUNExistedLinkElements(elements);
                           createElementsData = null;
 
-                          if (newData.type === 'group') {
+                          if (newData.type === "group") {
                             groupChildren = findGroupChildren(elements, newData);
                             newGroupChildren = [];
                             existedGroupChildren = [];
@@ -817,10 +818,10 @@ var useTopoEdit = function useTopoEdit(params) {
                               groups: [newData],
                               nodes: newGroupChildren,
                               links: newLinkElements.filter(function (item) {
-                                return item.type === 'link';
+                                return item.type === "link";
                               }),
                               linkGroups: newLinkElements.filter(function (item) {
-                                return item.type === 'linkGroup';
+                                return item.type === "linkGroup";
                               })
                             };
                             htTopo.createElements(createElementsData); // 切换前图上如果存在集群内的节点，切换节点为集群后，移到集群内
@@ -835,16 +836,16 @@ var useTopoEdit = function useTopoEdit(params) {
                               groups: [],
                               nodes: [newData],
                               links: newLinkElements.filter(function (item) {
-                                return item.type === 'link';
+                                return item.type === "link";
                               }),
                               linkGroups: newLinkElements.filter(function (item) {
-                                return item.type === 'linkGroup';
+                                return item.type === "linkGroup";
                               })
                             };
                             htTopo.createElements(createElementsData);
                           }
 
-                          rlog.debug('批量创建元素', createElementsData); // 恢复图标、大小、位置
+                          rlog.debug("批量创建元素", createElementsData); // 恢复图标、大小、位置
 
                           newElement = dm.getDataByTag(newData.id);
 
@@ -960,6 +961,117 @@ var useTopoEdit = function useTopoEdit(params) {
       return _ref8.apply(this, arguments);
     };
   }();
+  /**
+   * 关联IP的图片节点
+   */
+
+
+  function relateNodeIp(_x15, _x16) {
+    return _relateNodeIp.apply(this, arguments);
+  }
+
+  function _relateNodeIp() {
+    _relateNodeIp = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16(txtValue, nodeElement) {
+      var dm, htTopo, elements, _yield$editDispatcher5, elementDatas, isUnique, ipTxt, ids, ip, re, config, linksData, createElementsData;
+
+      return _regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              // console.log("bindIPtoNode", data);
+              // 根据配置查询拓扑数据
+              dm = topo.getDataModel();
+              htTopo = topo.getHtTopo();
+              elements = getNodes(dm);
+              _context16.next = 5;
+              return editDispatchers.fetchDataByConfig();
+
+            case 5:
+              _yield$editDispatcher5 = _context16.sent;
+              elementDatas = _yield$editDispatcher5.elementDatas;
+              console.log("bindIPtoNode", txtValue, nodeElement, elements);
+              console.log("elementDatas", elementDatas);
+              isUnique = true;
+              ipTxt = txtValue;
+              ids = []; // 执行唯一性验证
+
+              elements.map(function (element) {
+                // if (node.getId() !== element.getId()) {
+                // }
+                if (element.getTag()) {
+                  ids.push(element.getTag());
+                }
+              });
+              ip = {
+                id: "ip_1.1.1.1",
+                name: "1.1.1.1",
+                customName: null,
+                // 'groupId': null,
+                // 'groupTag': null,
+                ipAddress: "1.1.1.1",
+                // 'attributes': [],
+                // 'metrics': [],
+                type: "node" // 'dtype': 'device'
+
+              }; // 获取关联链路
+
+              if (!isUnique) {
+                _context16.next = 27;
+                break;
+              }
+
+              nodeElement.a(ip);
+              nodeElement.setName(txtValue);
+              nodeElement.a("name", txtValue);
+              nodeElement.a("customName", null);
+              nodeElement.setTag("ip_" + txtValue);
+              _context16.next = 22;
+              return editDispatchers.queryAllLinkByIp({
+                ids: ids,
+                ip: txtValue
+              });
+
+            case 22:
+              re = _context16.sent;
+              console.log("queryAllLinkByIp", re);
+              config = resourceConfig.getConfig();
+              console.log("resourceConfig.getConfig", config);
+
+              if (re && re.length > 0) {
+                linksData = [];
+                re.map(function (link) {
+                  var sourceId = link.attributes["network_link.source_device_id"];
+                  var source = dm.getDataByTag(sourceId);
+                  var target = nodeElement; // console.log("source, nodeElement, link", source, target, link);
+
+                  if (source && target) {
+                    var linkData = mergeExportLinkData({
+                      source: source,
+                      target: target,
+                      link: link
+                    });
+                    console.log("linkData", linkData);
+                    linksData.push(linkData); // htTopo.createEdge(source, target, link);
+                  }
+                });
+                createElementsData = {
+                  groups: [],
+                  nodes: [],
+                  links: [].concat(linksData),
+                  linkGroups: []
+                };
+                htTopo.createElements(createElementsData); // htTopo.addElements({ lines: [...re] });
+              }
+
+            case 27:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    }));
+    return _relateNodeIp.apply(this, arguments);
+  }
 
   var onEvent = function onEvent(e) {
     var map = {};
@@ -977,7 +1089,7 @@ var useTopoEdit = function useTopoEdit(params) {
    */
 
   var setViewMouseMode = function setViewMouseMode(mode) {
-    rlog.debug('设置视图鼠标模式', mode);
+    rlog.debug("设置视图鼠标模式", mode);
     topo.getHtTopo().setViewMouseMode(mode);
     topoEditDispatchers.update({
       viewMouseMode: mode
@@ -1055,6 +1167,11 @@ var useTopoEdit = function useTopoEdit(params) {
      */
     onDeleteElement: onDeleteElement,
 
+    /**
+     * 绑定图片ip
+     */
+    relateNodeIp: relateNodeIp,
+
     /**
      * 拓扑图保存回调
      */

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "9.0.0-a.11" === 'string' ? "9.0.0-a.11" : null;
+var version = typeof "9.0.0-a.12" === 'string' ? "9.0.0-a.12" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -188,4 +188,22 @@ export var showLinkByConfig = function showLinkByConfig(props) {
       }
     });
   }
+};
+export var mergeExportLinkData = function mergeExportLinkData(props) {
+  var source = props.source,
+      target = props.target,
+      link = props.link;
+  var attrObj = link.attributes;
+
+  var linkData = _extends({}, link, {
+    name: attrObj.name,
+    source: attrObj["network_link.source_device_id"],
+    target: attrObj.destination_type === 'ip' ? target.getTag() : attrObj["network_link.destination_device_id"],
+    operation: attrObj.operation,
+    interfaceSource: attrObj["source_id"],
+    interfaceTarget: attrObj["destination_id"],
+    ciType: link.typeCode
+  });
+
+  return linkData;
 };

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

@@ -13,6 +13,7 @@ import { removeFromArray } from "../../../utils/format";
 import { DEFAULT_GROUP } from "../../../utils/template";
 import { combTopoData, getCiTypes } from "../../../utils/topoData";
 import { saveTopo as _saveTopo, resToConditions, getLayoutId } from "../../../core/models/topoData";
+import networkLinkServer from "../../../networkTopo/services/topo/networkLink";
 import { addLinkData, buildData as buildTopoData } from "../../../networkTopo/getTopoData";
 
 var newGroupWithUUID = function newGroupWithUUID(group) {
@@ -244,19 +245,20 @@ export default function (topoApp) {
           var _this2 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-            var editState, resources, _editState$groups, groups, _editState$exportLink, exportLinkIdList, query, data;
+            var editState, resources, _editState$groups, groups, _editState$exportLink, exportLinkIdList, _editState$ipNodes, ipNodes, query, data;
 
             return _regeneratorRuntime.wrap(function _callee2$(_context2) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
                     editState = rootState.topoConfig;
-                    resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, _editState$exportLink = editState.exportLinkIdList, exportLinkIdList = _editState$exportLink === void 0 ? [] : _editState$exportLink;
+                    resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, _editState$exportLink = editState.exportLinkIdList, exportLinkIdList = _editState$exportLink === void 0 ? [] : _editState$exportLink, _editState$ipNodes = editState.ipNodes, ipNodes = _editState$ipNodes === void 0 ? [] : _editState$ipNodes;
                     query = {
                       id: rootState.topoMod.topoId,
                       resources: resources,
                       groups: groups,
-                      exportLinkIdList: exportLinkIdList
+                      exportLinkIdList: exportLinkIdList,
+                      ipNodes: ipNodes
                     };
                     _context2.next = 5;
                     return _this2.getTopoByConditions(query);
@@ -308,14 +310,14 @@ export default function (topoApp) {
           var _this4 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-            var topoId, resources, groups, exportLinkIdList, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
+            var topoId, resources, groups, exportLinkIdList, ipNodes, viewConditions, groupInfo, data, _yield$Promise$all, dataWithLinkDetail, _combTopoData, topoData, resAndMetrics, topoDataTrans;
 
             return _regeneratorRuntime.wrap(function _callee4$(_context4) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
                   case 0:
                     // rlog.debug("getTopoByConditions--------", params);
-                    topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList;
+                    topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList, ipNodes = params.ipNodes;
                     viewConditions = resToConditions(resources);
                     groupInfo = isAvailableArray(groups) && groups.map(function (group) {
                       return _extends({}, group, {
@@ -325,7 +327,7 @@ export default function (topoApp) {
                     }); // rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
 
                     _context4.next = 5;
-                    return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList);
+                    return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList, ipNodes);
 
                   case 5:
                     data = _context4.sent;
@@ -393,7 +395,7 @@ export default function (topoApp) {
                         }].concat(displayConfig.saveHistories || [])
                       }))
                     };
-                    rlog.debug('saveGlobalConfig', config);
+                    rlog.debug("saveGlobalConfig", config);
                     _context5.next = 5;
                     return topoApp.serverApi.saveTopoSettings(topoApp.id, config);
 
@@ -461,6 +463,33 @@ export default function (topoApp) {
         switchToViewMode: function switchToViewMode() {
           this.reset();
           dispatch.topoMod.switchToViewMode();
+        },
+        queryAllLinkByIp: function queryAllLinkByIp(data) {
+          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+            var _result$data;
+
+            var ids, ip, result;
+            return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+              while (1) {
+                switch (_context8.prev = _context8.next) {
+                  case 0:
+                    ids = data.ids, ip = data.ip;
+                    console.log("queryAllLinkByIp", ids, ip);
+                    _context8.next = 4;
+                    return networkLinkServer.queryLinksByIp(ids, ip);
+
+                  case 4:
+                    result = _context8.sent;
+                    console.log("queryAllLinkByIp-result", result);
+                    return _context8.abrupt("return", (_result$data = result === null || result === void 0 ? void 0 : result.data) !== null && _result$data !== void 0 ? _result$data : []);
+
+                  case 7:
+                  case "end":
+                    return _context8.stop();
+                }
+              }
+            }, _callee8);
+          }))();
         }
       };
     }

package/es/core/test/Test.js

@@ -22,6 +22,58 @@ var Test = /*#__PURE__*/function () {
   _proto.onReady = function onReady() {// TODO 待移除测试代码
     // this.iconManage.openUpload()
     // this.topo.store.getModelDispatchers('linkDynamicStyleConfig').open({type: 'networkLink'});
+  }
+  /**
+   * 关联IP示例代码
+   */
+  ;
+
+  _proto.createExportLink = function createExportLink() {
+    var htTopo = this.topo.getHtTopo();
+    var dm = htTopo.getGraphView().dm(); // 设置节点关联IP
+
+    var nodeElement = htTopo.getGraphView().sm().fd();
+    var ip = {
+      'id': 'ip_1.1.1.1',
+      'name': '1.1.1.1',
+      customName: null,
+      // 'groupId': null,
+      // 'groupTag': null,
+      'ipAddress': '1.1.1.1',
+      // 'attributes': [],
+      // 'metrics': [],
+      'type': 'node' // 'dtype': 'device'
+
+    };
+    nodeElement.a(ip);
+    nodeElement.setTag('ip_1.1.1.1');
+    var link = {
+      'id': '0000000019b462d1',
+      'name': '172.17.160.116(Gi2/2/0/1) - 172.27.130.13(Gi 0/9)',
+      'source': '00000000029f9411',
+      'target': 'ip_1.1.1.1',
+      'operation': 'delete',
+      'interfaceSource': '0000000018080aee',
+      'interfaceTarget': '000000000341b015',
+      'ciType': 'network_link',
+      'attributes': [],
+      'manageStatus': 0,
+      'permission': {
+        'readable': true,
+        'writeable': true,
+        'deleteable': true
+      },
+      'metrics': [],
+      'type': 'link',
+      'dtype': 'link'
+    };
+    var createElementsData = {
+      groups: [],
+      nodes: [],
+      links: [link],
+      linkGroups: []
+    };
+    htTopo.createElements(createElementsData);
   };
 
   return Test;