@riil-frontend/component-topology 2.12.2 → 2.12.5-alpha.2

package/es/components/Link/index.js

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { useBoolean } from 'ahooks';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import TopoEvent from '@riil-frontend/component-topology-graph/es/event';
 import styles from "./index.module.scss";
 import LinkSetting from "./setting";
 /**

package/es/components/Link/index.module.scss

@@ -1,5 +1,5 @@
-@import '@riil-frontend/css/lib/index.scss';
-@import "@alifd/next/variables";
+//@import '@riil-frontend/css/lib/index.scss';
+@import "~@alifd/next/variables";
 
 .layout {
   height: 100%;

package/es/components/MultiResourceDrawer/index.js

@@ -34,9 +34,10 @@ var MultiResourceDrawer = function MultiResourceDrawer(props) {
                 };
               }
 
-              onSave(result);
+              _context.next = 4;
+              return onSave(result);
 
-            case 3:
+            case 4:
             case "end":
               return _context.stop();
           }

package/es/components/ResourceSelectDrawer/ResourceSelectDrawer.js

@@ -71,6 +71,7 @@ function ResourceSelectDrawer(props) {
     buttons: ['确定', '取消']
   }, visible && /*#__PURE__*/React.createElement(ResourceSelectList, {
     ref: resourceSelectRef,
+    selectionMode: selectionMode,
     excludeIds: excludeIds
   }));
 }

package/es/components/ResourceSelectDrawer/ResourceSelectList.js

@@ -10,7 +10,12 @@ function ResourceSelectList(props, ref) {
     ref: ref,
     limitTypes: RESOURCE_LIMIT_TYPES,
     defaultCondition: excludeIds.length ? "!id('" + excludeIds.join("','") + "')" : undefined,
-    request: getRequest()
+    request: getRequest(),
+    tableProps: selectionMode ? {
+      rowSelection: {
+        mode: selectionMode
+      }
+    } : undefined
   });
 }
 

package/es/components/SingleResourceDrawer/SelectDrawer.js

@@ -0,0 +1,54 @@
+import _Message from "@alifd/next/lib/message";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useRef } from 'react';
+import ResourceSelectDrawer from "../ResourceSelectDrawer";
+
+var SingleSelectDrawer = function SingleSelectDrawer(props) {
+  var visible = props.visible,
+      totalSelection = props.totalSelection,
+      onSave = props.onSave,
+      onClose = props.onClose;
+
+  var onDrawerSave = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selected) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (selected.length) {
+                _context.next = 3;
+                break;
+              }
+
+              _Message.error('请选择一项资源。');
+
+              return _context.abrupt("return", false);
+
+            case 3:
+              _context.next = 5;
+              return onSave(selected[0]);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onDrawerSave(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(ResourceSelectDrawer, {
+    visible: visible,
+    excludeIds: totalSelection,
+    selectionMode: "single",
+    onOk: onDrawerSave,
+    onClose: onClose
+  });
+};
+
+export default SingleSelectDrawer;

package/es/components/SingleResourceDrawer/index.js

@@ -8,7 +8,7 @@ var SingleResourceDrawer = function SingleResourceDrawer(props) {
   var store = props.store,
       visible = props.visible,
       loading = props.loading,
-      selectedKeys = props.selectedKeys,
+      selectedKey = props.selectedKey,
       totalSelection = props.totalSelection,
       onSave = props.onSave,
       onClose = props.onClose;
@@ -23,7 +23,7 @@ var SingleResourceDrawer = function SingleResourceDrawer(props) {
       return;
     }
 
-    var intercept = onSave(data);
+    var intercept = onSave(data[0]);
 
     if (!intercept) {
       onClose();
@@ -31,7 +31,7 @@ var SingleResourceDrawer = function SingleResourceDrawer(props) {
   };
 
   var initialData = {
-    selected: selectedKeys,
+    selected: [selectedKey],
     total: totalSelection
   };
   return /*#__PURE__*/React.createElement(Drawer, {

package/es/core/common/icons/defaultIcons.js

@@ -1,4 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+import { getIconMap } from '@riil-frontend/component-topology-graph/es/icons/ciTypeIcons';
+/**
+ * 默认节点图标
+ *
+ * @type {(*|{url: *})[]}
+ */
+
 export var DEFAULT_NODE_ICONS = [{
   id: 'ciType/network.switch',
   name: '交换机',
@@ -60,7 +67,7 @@ export var DEFAULT_NODE_ICONS = [{
 DEFAULT_NODE_ICONS.forEach(function (icon) {
   ht.Default.setImage(icon.id, icon.jsonUrl || icon.url);
 });
-export default {
+export default _extends({}, getIconMap(), {
   'editor.icon.cloud.small': {
     url: '/ht/image/topo/s/云_64.png',
     json: '/ht/image/topo/s/云_64.json'
@@ -127,4 +134,4 @@ export default {
   'editor.icon.library.small': '/ht/image/topo/s/库_48.json',
   'editor.icon.balanc.small': '/ht/image/topo/s/负载均衡_48.json',
   'editor.icon.calendar.small': '/ht/image/topo/s/日历_48.json'
-};
+});

package/es/core/components/TopoView/topoView.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import TopoContainer, { TopoEvent } from '@riil-frontend/component-topology-graph';
+import TopoContainer from '@riil-frontend/component-topology-graph/es/components/TopoGraph';
+import TopoEvent from '@riil-frontend/component-topology-graph/es/event';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useTopoEdit from "../../../hooks/useTopoEdit";
 import usePolling from "../../../hooks/usePolling";
@@ -244,7 +245,7 @@ var TopoView = function TopoView(props) {
     visible: showSingleResDrawer,
     loading: topoLoading,
     store: store,
-    selectedKeys: initialSingleRes,
+    selectedKey: initialSingleRes,
     totalSelection: resSelections,
     onSave: onSaveSingleRes,
     onClose: onCloseSigleResDrawer

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/ColorPicker.module.scss

@@ -1,4 +1,4 @@
-@import "@alifd/theme-19926/variables";
+@import "~@alifd/theme-19926/variables.scss";
 
 .swatch {
   background: #fff;

package/es/core/editor/components/ResourceViewAttributeSetting/ResourceViewAttributeSettingPlugin.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import TopoEvent from '@riil-frontend/component-topology-graph/es/event';
 import Setting from "./Setting";
 import '@riil-frontend/css/lib/index.scss';
 /**

package/es/core/editor/components/ResourceViewAttributeSetting/Setting.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, forwardRef } from 'react';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import TopoEvent from '@riil-frontend/component-topology-graph/es/event';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import BatchAttrMetricDrawer from "../../../../components/BatchAttrMetric";
 import { updateAllCiDoc, updateCiDoc } from "../../../../utils/topoData";

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

@@ -1,13 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import SettingsForm from "./SettingsForm";
-import LayerSettingsForm from "./layer/LayerSettingsForm";
 import styles from "./Settings.module.scss";
 import { isEdge, isGroup, isLayer, isNode, isText } from "../../../../utils/htElementDataUtil";
-import TextPropertyView from "./text/TextPropertyView";
-import NodePropertyView from "./node/NodePropertyView";
-import ViewPropertyView from "./view/ViewPropertyView";
-import LinkPropertyView from "./link/LinkPropertyView";
+import propertyPanelMap from "./propertyViews";
 import useSettingRuntimeState from "./useSettingRuntimeState";
 
 function getElementType(selection) {
@@ -45,26 +40,7 @@ export default function Settings(props) {
   }).join(',');
   useEffect(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
-  }, [selection]);
-  var propertyPanelMap = {
-    view: SettingsForm,
-    node: NodePropertyView,
-    layer: LayerSettingsForm,
-    text: TextPropertyView
-  };
-
-  if (localStorage.getItem('topo.debug') === 'true') {
-    Object.assign(propertyPanelMap, {
-      line: LinkPropertyView,
-      view: ViewPropertyView
-    });
-  } else {
-    if (!selectionSize) {
-      // 未选择元素
-      return null;
-    }
-  } // TODO 待优化
-
+  }, [selection]); // TODO 待优化
 
   var updateElementProperty = function updateElementProperty(name, value) {
     // const element = topo.getDataModel().getDataById(selection[0].id);
@@ -88,9 +64,9 @@ export default function Settings(props) {
   };
 
   var elementType = getElementType(selection);
-  var Component = propertyPanelMap[elementType];
+  var PropertyView = propertyPanelMap[elementType];
 
-  if (!Component) {
+  if (!PropertyView) {
     return null;
   }
 
@@ -107,7 +83,7 @@ export default function Settings(props) {
     className: styles.settingsPanel
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.settings
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(PropertyView, {
     type: elementType,
     topo: topo,
     topoEditApi: topoEditApi,

package/es/core/editor/components/settings/{group → common}/GroupNodeList/ResourceSelectButton.js

@@ -1,19 +1,16 @@
 import _Button from "@alifd/next/lib/button";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ResourceSelectDrawer from "../../../../../../components/ResourceSelect/ResourceSelectDrawer";
+import { TopoEvent } from "@riil-frontend/component-topology-graph";
 export default function ResourceSelectButton(props) {
   var topo = props.topo,
-      layer = props.layer,
-      resourceSelectComponent = props.resourceSelectComponent,
-      onAdd = props.onAdd;
+      group = props.group,
+      topoEditApi = props.topoEditApi;
 
   var _useState = useState(false),
       isSelectResource = _useState[0],
       setIsSelectResource = _useState[1];
 
-  var ResourceSelectComponent = resourceSelectComponent || ResourceSelectDrawer; // const ResourceSelectComponent = ResourceSelectDrawer;
-  // TODO
-
   return /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(e) {
       return e.stopPropagation();
@@ -23,14 +20,15 @@ export default function ResourceSelectButton(props) {
     type: "primary",
     onClick: function onClick(e) {
       e.stopPropagation();
-      setIsSelectResource(true);
+      topoEditApi.onBindData({
+        type: TopoEvent.DATA_TYPE_RESOURCE_COMBO,
+        data: {
+          dtype: 'container',
+          id: group.tag,
+          tag: group.attr.tag
+        }
+      });
     }
-  }, "\u9009\u62E9"), /*#__PURE__*/React.createElement(ResourceSelectComponent, {
-    layer: layer,
-    visible: isSelectResource,
-    setVisible: setIsSelectResource,
-    topo: topo,
-    existedIds: []
-  }));
+  }, "\u6DFB\u52A0\u8D44\u6E90"));
 }
 ;

package/es/core/editor/components/settings/common/text/FontStyleCheckbox.module.scss

@@ -1,4 +1,4 @@
-@import "@alifd/theme-19926/variables";
+@import "~@alifd/theme-19926/variables.scss";
 
 .buttonGroup {
   display: flex;

package/es/core/editor/components/settings/group/DataTab/GroupNodeList.js

@@ -0,0 +1,19 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ResourceList from "../../common/GroupNodeList/ResourceList";
+import { getGroupChildrenData } from "../../../../../../utils/htElementUtils";
+import { getIconById } from "../../common/GroupNodeList/icon";
+export default function GroupNodeList(props) {
+  var topo = props.topo,
+      group = props.group;
+  var nodes = getGroupChildrenData(topo.getDataModel().getDataById(group.id));
+  var data = nodes.map(function (node) {
+    return {
+      title: node.name,
+      img: getIconById(node.image, topo)
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ResourceList, {
+    data: data
+  }));
+}
+;

package/es/core/editor/components/settings/group/DataTab/RelateData.js

@@ -0,0 +1,45 @@
+import _Collapse from "@alifd/next/lib/collapse";
+import React from 'react';
+import ResourceSelectButton from "../../common/GroupNodeList/ResourceSelectButton";
+import GroupNodeList from "./GroupNodeList";
+var CollapsePanel = _Collapse.Panel;
+export default function GroupRelateData(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      editorProps = props.editorProps;
+
+  var createResourcePanel = function createResourcePanel() {
+    return /*#__PURE__*/React.createElement(CollapsePanel, {
+      key: "\u5173\u8054\u8D44\u6E90",
+      title: /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          paddingRight: 12
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          flex: 1
+        }
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(ResourceSelectButton, {
+        topo: topo,
+        topoEditApi: topoEditApi,
+        group: values,
+        onAdd: function onAdd() {
+          /*TODO 刷新列表 refreshList*/
+        },
+        resourceSelectComponent: editorProps === null || editorProps === void 0 ? void 0 : editorProps.groupResourceSelectComponent
+      }))
+    }, /*#__PURE__*/React.createElement(GroupNodeList, {
+      topo: topo,
+      group: values
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(_Collapse, {
+    defaultExpandedKeys: ['关联资源'],
+    style: {
+      border: 'none'
+    }
+  }, createResourcePanel());
+}

package/es/core/editor/components/settings/group/GroupPropertyView.js

@@ -0,0 +1,44 @@
+import _Tab from "@alifd/next/lib/tab";
+import React from 'react';
+import TabView from "../common/tab/TabView";
+import styles from "./GroupPropertyView.module.scss";
+import useGroup from "./hooks/useGroup";
+import GroupSetting from "./SettingTab/Setting";
+import GroupRelateData from "./DataTab/RelateData";
+export default function GroupPropertyView(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps;
+  var group = useGroup({
+    topo: topo,
+    id: values.id
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.GroupPropertyView
+  }, /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(GroupRelateData, {
+    group: group,
+    topo: topo,
+    topoEditApi: topoEditApi,
+    values: values,
+    onChange: onChange,
+    settingRuntimeState: settingRuntimeState,
+    editorProps: editorProps
+  })), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(GroupSetting, {
+    group: group,
+    topo: topo,
+    topoEditApi: topoEditApi,
+    values: values,
+    onChange: onChange,
+    settingRuntimeState: settingRuntimeState,
+    editorProps: editorProps
+  }))));
+}

package/es/core/editor/components/settings/group/GroupPropertyView.module.scss

@@ -0,0 +1,3 @@
+.GroupPropertyView {
+
+}

package/es/core/editor/components/settings/group/SettingTab/GroupExpandSetting.js

@@ -0,0 +1,27 @@
+import _Radio from "@alifd/next/lib/radio";
+import React from 'react';
+var list = [{
+  value: true,
+  label: '展开'
+}, {
+  value: false,
+  label: '收起'
+}];
+/**
+ * 区域展开折叠
+ *
+ * @param props
+ * @return {*}
+ * @constructor
+ */
+
+export default function GroupExpandSetting(props) {
+  var expanded = props.expanded,
+      setExpanded = props.setExpanded;
+  return /*#__PURE__*/React.createElement(_Radio.Group, {
+    dataSource: list,
+    value: expanded,
+    onChange: setExpanded
+  });
+}
+;

package/es/core/editor/components/settings/group/SettingTab/NodeIconSelect.js

@@ -0,0 +1,32 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { getIconGroups } from "../../common/GroupNodeList/icon";
+import IconSelect from '@riil-frontend/component-topo-icon-select';
+
+function NodeIconSelect(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  var iconGroups = getIconGroups(topo, 'node');
+  var newId = value;
+  var a = iconGroups[0].icons.filter(function (item) {
+    return newId.indexOf(item.oldId) !== -1;
+  });
+
+  if (a.length) {
+    newId = a[0].id;
+  }
+
+  useImperativeHandle(ref, function () {
+    return {};
+  });
+  return /*#__PURE__*/React.createElement(IconSelect, {
+    value: newId,
+    iconList: iconGroups,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  });
+}
+
+export default /*#__PURE__*/forwardRef(NodeIconSelect);

package/es/core/editor/components/settings/group/SettingTab/Setting.js

@@ -0,0 +1,86 @@
+import _Form from "@alifd/next/lib/form";
+import _Input from "@alifd/next/lib/input";
+import _Field from "@alifd/next/lib/field";
+import _Collapse from "@alifd/next/lib/collapse";
+import _Select from "@alifd/next/lib/select";
+import React, { useEffect } from 'react';
+import NodeSizeInput from "../../common/NodeSizeInput/NodeSizeInput";
+import NodeIconSelect from "./NodeIconSelect";
+import GroupExpandSetting from "./GroupExpandSetting";
+import useGroupExpand from "../hooks/useGroupExpand";
+var Option = _Select.Option;
+var CollapsePanel = _Collapse.Panel;
+export default function GroupSetting(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      _onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      group = props.group;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      if (values[name] !== value) {
+        _onChange(name, value, newValues);
+      }
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(values);
+  }, [values]);
+  var groupExpand = useGroupExpand({
+    group: group
+  });
+  var expanded = groupExpand.expanded;
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u533A\u57DF\u540D\u79F0",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    name: "attrObject.name"
+  })), /*#__PURE__*/React.createElement(_Collapse, {
+    defaultExpandedKeys: ['显示设置'],
+    style: {
+      border: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(CollapsePanel, {
+    key: "\u663E\u793A\u8BBE\u7F6E",
+    title: "\u663E\u793A\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u9ED8\u8BA4\u663E\u793A\u65B9\u5F0F"
+  }, /*#__PURE__*/React.createElement(GroupExpandSetting, {
+    group: group,
+    expanded: expanded,
+    setExpanded: groupExpand.setExpanded
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u663E\u793A\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(NodeIconSelect, {
+    name: "image",
+    topo: topo
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u5C3A\u5BF8"
+  }, /*#__PURE__*/React.createElement(NodeSizeInput, {
+    node: values,
+    value: {
+      width: values.width,
+      height: values.height
+    },
+    onChange: function onChange(size) {
+      _onChange('width', size.width);
+
+      _onChange('height', size.height);
+    },
+    settingRuntimeState: settingRuntimeState
+  }))))));
+}

package/es/core/editor/components/settings/group/hooks/useGroup.js

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+export default function useGroup(props) {
+  var topo = props.topo,
+      id = props.id;
+  var group = useMemo(function () {
+    return topo.getDataModel().getDataById(id);
+  }, [id]);
+  return group;
+}

package/es/core/editor/components/settings/group/hooks/useGroupExpand.js

@@ -0,0 +1,20 @@
+import { useEffect, useMemo, useState } from "react";
+export default function useGroupExpand(props) {
+  var group = props.group; // TODO 缺少：绘图区双击展开折叠后，更新状态
+
+  var _useState = useState(group.isExpanded()),
+      expanded = _useState[0],
+      _setExpanded = _useState[1];
+
+  useEffect(function () {
+    _setExpanded(group.isExpanded());
+  }, [group]);
+  return {
+    expanded: expanded,
+    setExpanded: function setExpanded(val) {
+      _setExpanded(val);
+
+      group.setExpanded(val);
+    }
+  };
+}

package/es/core/editor/components/settings/layer/LayerSettingsForm.js

@@ -9,8 +9,8 @@ import _Grid from "@alifd/next/lib/grid";
 import _Form from "@alifd/next/lib/form";
 import React, { useState, useEffect } from 'react';
 import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
-import GroupNodeList from "../group/GroupNodeList/GroupNodeList";
-import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
+import GroupNodeList from "./NodeList";
+import ResourceSelectButton from "../common/GroupNodeList/ResourceSelectButton";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;

package/es/core/editor/components/settings/{group/GroupNodeList/GroupNodeList.js → layer/NodeList.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import ResourceList from "./ResourceList";
-import { getGroupNodes } from "../../../../../../utils/htElementUtils";
-import { getIconById } from "./icon";
+import ResourceList from "../common/GroupNodeList/ResourceList";
+import { getGroupNodes } from "../../../../../utils/htElementUtils";
+import { getIconById } from "../common/GroupNodeList/icon";
 export default function GroupNodeList(props) {
   var topo = props.topo,
       group = props.group;