@riil-frontend/component-topology 2.1.5-dev.3 → 2.1.9

package/demo/1/345/237/272/346/234/254/usage.md

@@ -4,4 +4,8 @@ order: 1
 ---
 
 
+```jsx
+<DemoCode src="../../demo-src/basic/Simple.jsx" />
+
+```
 

package/demo/1/345/237/272/346/234/254//345/221/212/350/255/246/346/216/250/351/200/201.md

@@ -10,6 +10,6 @@ order: 8
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CustomAlarm.jsx" />
+<DemoCode src="../../demo-src/basic/CustomAlarm.jsx" />
 ```
 

package/demo/1/345/237/272/346/234/254//350/207/252/345/256/232/344/271/211/345/233/276/346/240/207.md

@@ -8,6 +8,6 @@ order: 5
 - 支持按节点参数适配不同的默认图标
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CustomNodeIcon.jsx" />
+<DemoCode src="../../demo-src/basic/CustomNodeIcon.jsx" />
 ```
 

package/demo/1/345/237/272/346/234/254//350/207/252/345/256/232/344/271/211/345/261/236/346/200/247/345/222/214/346/214/207/346/240/207.md

@@ -11,6 +11,6 @@ order: 8
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/CustomAttrAndMetric.jsx" />
+<DemoCode src="../../demo-src/basic/CustomAttrAndMetric.jsx" />
 ```
 

package/demo/2/347/274/226/350/276/221/346/250/241/345/274/217//345/210/206/345/261/202/346/267/273/345/212/240/350/265/204/346/272/220.md

@@ -0,0 +1,11 @@
+---
+title: 分层添加资源
+order: 3
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/editor/layer/LayerAddResource.jsx" />
+```

package/demo/2/347/274/226/350/276/221/346/250/241/345/274/217//346/226/260/345/273/272/350/277/233/345/205/245/347/274/226/350/276/221/346/250/241/345/274/217.md

@@ -0,0 +1,11 @@
+---
+title: 新建进入编辑模式
+order: 1
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/editor/CreateTopo.jsx" />
+```

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//346/233/277/346/215/242/350/212/202/347/202/271.md

@@ -9,6 +9,6 @@ order: 20
 - 替换节点时，相关联的连线保留
 
 ```jsx
-<DemoCode src="../../demo-src/basic/ReplaceNode.jsx" />
+<DemoCode src="../../demo-src/editor/ReplaceNode.jsx" />
 ```
 

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//347/246/201/347/224/250/345/205/263/350/201/224/350/265/204/346/272/220.md

@@ -12,6 +12,6 @@ order: 10
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/DisableNodeRelateResource.jsx" />
+<DemoCode src="../../demo-src/editor/DisableNodeRelateResource.jsx" />
 ```
 

package/demo/{1/345/237/272/346/234/254 → 2/347/274/226/350/276/221/346/250/241/345/274/217}//347/274/226/350/276/221/346/250/241/345/274/217/345/217/263/351/224/256/350/217/234/345/215/225.md

@@ -11,6 +11,6 @@ order: 6
 <br/>
 
 ```jsx
-<DemoCode src="../3业务监控拓扑/src/EditorContextMenu.jsx" />
+<DemoCode src="../../demo-src/editor/EditorContextMenu.jsx" />
 ```
 

package/demo/2/347/274/226/350/276/221/346/250/241/345/274/217//350/207/252/345/256/232/344/271/211/345/210/206/345/261/202/346/267/273/345/212/240/350/265/204/346/272/220.md

@@ -0,0 +1,11 @@
+---
+title: 自定义分层添加资源
+order: 4
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/editor/layer/CustomLayerAddResource.jsx" />
+```

package/demo/{2 → 3}/346/213/223/346/211/221/344/270/255/345/277/203/js/TopoFull.jsx

@@ -67,8 +67,7 @@ function TopoTreeSelect(props) {
     .map(item => <Item key={item.id}>{item.name}</Item>);
 
   return (
-    <div>
-    </div>
+    <div />
   )
 }
 

package/demo/3/346/213/223/346/211/221/344/270/255/345/277/203/js/request.js

@@ -0,0 +1,7 @@
+import createMockRequest from '../../../demo-src/createMockRequest';
+
+const request = createMockRequest({
+  baseURL: '/demo/3拓扑中心/js/mock'
+});
+
+export default request;

package/demo/{3 → 4}/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221//345/272/224/347/224/250/351/203/250/347/275/262/346/213/223/346/211/221.md

@@ -6,6 +6,6 @@ order: 1
 <br/>
 
 ```jsx
-<DemoCode src="./src/AppInstallTopo.jsx" />
+<DemoCode src="../../demo-src/biz/AppInstallTopo.jsx" />
 ```
 

package/demo/{3 → 4}/344/270/232/345/212/241/347/233/221/346/216/247/346/213/223/346/211/221//346/225/260/346/215/256/346/265/201/346/213/223/346/211/221.md

@@ -11,5 +11,5 @@ order: 2
 
 
 ```jsx
-<DemoCode src="./src/DataStreamTopo.jsx" />
+<DemoCode src="../../demo-src/biz/DataStreamTopo.jsx" />
 ```

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//351/200/211/346/213/251/350/265/204/346/272/220/346/214/211/351/222/256.md

@@ -0,0 +1,12 @@
+---
+title: 选择资源按钮
+order: 2
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/components/ResourceSelect/ResourceSelectButtonDemo.jsx" />
+```
+

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//351/200/211/346/213/251/350/265/204/346/272/220/347/273/204/344/273/266.md

@@ -0,0 +1,12 @@
+---
+title: 选择资源组件
+order: 1
+---
+
+<br/>
+
+
+```jsx
+<DemoCode src="../../demo-src/components/ResourceSelect/ResourceSelectDemo.jsx" />
+```
+

package/demo/API/API.md

@@ -4,7 +4,7 @@ order: 4
 ---
 ## 模型
 
-### createTopo(options)
+### createTopo(options): Topo
 
 - 返回：Topo
 
@@ -15,21 +15,31 @@ order: 4
     - 返回：
 ```
     {
+        groups: [],
         nodes: [],
         lines: [],
         customNodes: [],
         customLines: [],
     }
 ```
+- `getGroups()` 获取分层/容器数据
+    - 返回：
+```
+    [{
+        id: 20, // 业务id
+        name: "业务层",
+        tag: 56, // 图形元素id
+        image: "row", // 容器时有
+    }]
+```
 
 - `updateData(data)` 更新数据
     - 参数：
 ```
     {
+        groups: [],
         nodes: [],
         lines: [],
-        customNodes: [],
-        customLines: [],
     }
 ```
 
@@ -40,12 +50,18 @@ order: 4
 
 | 参数 | 说明 | 类型   | 默认值 |
 | ---- | ---- | ------ | ------ |
-| topo |      | Topo |        |
-| titleBar     |      |  ReactNode\|false      |        |
-| editorProps     |      |  EditorProps      |        |
-| onRefresh     |      |  function      |        |
-| onSave     |      |  function      |        |
-| onRemoveElements     |      |  function      |        |
+| topo |  拓扑模型实例    | `Topo` |        |
+| titleBar     |  工具栏    |  `ReactNode\|false`      |        |
+| editorProps     |  编辑器参数    |  `EditorProps`      |        |
+| onRefresh     |   刷新回调   |  `function`      |        |
+| onSave     |  保存回调    |  `function`      |        |
+| onRemoveElements     |  删除元素回调    |  `function`      |        |
+| onConnect     |  called when user connects two nodes    |  `function({ source, target })`      |        |
+| onConnectStart     |   called when user starts to drag connection line   |  `function(event, { nodeId, handleType })`      |        |
+| onConnectStop     |   called when user stops to drag connection line   |  `function(event)`      |        |
+| onConnectEnd     |    called after user stops or connects nodes  |  `function(event)`      |        |
+| onLoad     |      |  `function(topoInstance)`      |        |
+| onSelectionChange     |    called when user selects one or multiple elements  |  `function(elements)`      |        |
 
 ##### EditorProps
 
@@ -65,10 +81,13 @@ order: 4
         // 从拓扑图查询已有资源列表
         // TODO 查询数据
         return {
-          dataSource: [],
-          total: 100,
-          current: 1,
-          pageSize,
+            success: true,
+            data: {
+              dataSource: [],
+              total: 100,
+              current: 1,
+              pageSize,
+            }
         }
       },
       onOk: async (selected) => {

package/es/common/components/ResourceTable/ResourceTable.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["selectionMode", "defaultSelected", "disabledKeys", "typeDicts", "getTableData"];
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ResourceList from "../../../components/ResourceList/ResourceSelect";
+import styles from './ResourceTable.module.scss';
+
+function ResourceTable(props, ref) {
+  var selectionMode = props.selectionMode,
+      _props$defaultSelecte = props.defaultSelected,
+      defaultSelected = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
+      disabledKeys = props.disabledKeys,
+      typeDicts = props.typeDicts,
+      getTableData = props.getTableData,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var initialData = {
+    selected: defaultSelected,
+    total: []
+  };
+  return /*#__PURE__*/React.createElement(ResourceList, _extends({
+    ref: ref,
+    className: styles.container,
+    selectionMode: selectionMode,
+    getTableData: getTableData,
+    initialData: initialData,
+    typeDicts: typeDicts
+  }, otherProps));
+}
+
+export default /*#__PURE__*/React.forwardRef(ResourceTable);

package/es/common/components/ResourceTable/ResourceTable.module.scss

@@ -0,0 +1,9 @@
+.container {
+  height: 100%;
+  :global {
+    .next-table-body {
+      height: 480px !important;
+      max-height: 480px !important;
+    }
+  }
+}

package/es/components/ResourceList/ResourceSelect.js

@@ -0,0 +1,200 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import { isAvailableArray } from '@riil-frontend/utils';
+import useNextFormTable from '@ahooksjs/next-form-table';
+import useFilterPlugin from '@ahooksjs/use-filter-plugin';
+import useSortablePlugin from '@ahooksjs/use-sortable-plugin';
+import useSelectionPlugin from '@riil-frontend/component-topology-utils/es/plugins/useSelectionPlugin';
+import { fetchCommonQuery } from '@riil-frontend/component-topology-utils/es/services/cmdb';
+import { getTitleCell } from '@riil-frontend/component-topology-utils/es/utils/table';
+import { DICT } from '@riil-frontend/component-topology-utils/es/utils/storage';
+import { formatDataForTable, getIp } from '../../utils/format';
+import RiilTable from '../FormTable';
+var PRIMARY_KEY = 'id';
+
+var getTableData = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+    var _params$current, current, _params$pageSize, pageSize, _params$sortBy, sortBy, _params$sortOrder, sortOrder, like, typeCode, condition, ciType, data, dataSource;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _params$current = params.current, current = _params$current === void 0 ? 1 : _params$current, _params$pageSize = params.pageSize, pageSize = _params$pageSize === void 0 ? 20 : _params$pageSize, _params$sortBy = params.sortBy, sortBy = _params$sortBy === void 0 ? 'displayName' : _params$sortBy, _params$sortOrder = params.sortOrder, sortOrder = _params$sortOrder === void 0 ? 'asc' : _params$sortOrder, like = params.like, typeCode = params.typeCode;
+            condition = 'category(\'resource\')';
+
+            if (like) {
+              condition = {
+                conditions: condition,
+                searchValue: like,
+                searchIndexArray: ['displayName', 'ipAddress']
+              };
+            }
+
+            if (typeCode) {
+              ciType = typeCode.split(',');
+
+              if (typeof condition === 'string') {
+                condition = {
+                  conditions: condition,
+                  ciType: ciType
+                };
+              } else {
+                condition.ciType = ciType;
+              }
+            }
+
+            _context.next = 6;
+            return fetchCommonQuery(condition, sortBy, sortOrder, current, pageSize, '', {
+              usingExtraConditions: false // 绕过权限过滤
+
+            });
+
+          case 6:
+            data = _context.sent;
+            dataSource = data.content && data.content.map(function (item) {
+              var _item$operation;
+
+              return {
+                id: item.id,
+                displayName: item.attributes.displayName,
+                ipAddress: item.attributes.ipAddress,
+                company: item.attributes.company,
+                typeCode: item.typeCode,
+                operation: (_item$operation = item.operation) !== null && _item$operation !== void 0 ? _item$operation : null // 权限字段
+
+              };
+            });
+            return _context.abrupt("return", formatDataForTable(dataSource, data.total, data.page, data.pageSize));
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getTableData(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var ResourceList = function ResourceList(props, ref) {
+  var customGetTableData = props.getTableData,
+      initialData = props.initialData,
+      selectionMode = props.selectionMode,
+      typeDicts = props.typeDicts,
+      className = props.className,
+      _props$showCompanyCol = props.showCompanyColumn,
+      showCompanyColumn = _props$showCompanyCol === void 0 ? true : _props$showCompanyCol,
+      children = props.children;
+  var _initialData$selected = initialData.selected,
+      selectedByMe = _initialData$selected === void 0 ? [] : _initialData$selected,
+      _initialData$total = initialData.total,
+      total = _initialData$total === void 0 ? selectedByMe : _initialData$total;
+
+  var disabledKeys = _.difference(total, selectedByMe);
+
+  var plugins = [useSortablePlugin({
+    resetWhenQuery: false,
+    defaultValue: {
+      displayName: 'asc'
+    }
+  }), useFilterPlugin(), useSelectionPlugin({
+    primaryKey: PRIMARY_KEY,
+    mode: selectionMode,
+    checkIsNeedReset: function checkIsNeedReset() {
+      return false;
+    },
+    checkIsDisabled: function checkIsDisabled(record) {
+      return disabledKeys.some(function (item) {
+        return item === record[PRIMARY_KEY];
+      });
+    }
+  })];
+
+  var _useNextFormTable = useNextFormTable(customGetTableData || getTableData, {
+    plugins: plugins
+  }),
+      formProps = _useNextFormTable.formProps,
+      tableProps = _useNextFormTable.tableProps,
+      paginationProps = _useNextFormTable.paginationProps,
+      getSelectedRowKeys = _useNextFormTable.getSelectedRowKeys,
+      setSelectedRowKeys = _useNextFormTable.setSelectedRowKeys;
+
+  useEffect(function () {
+    if (setSelectedRowKeys) {
+      setSelectedRowKeys(selectedByMe);
+    }
+  }, [selectedByMe]);
+  var selectedKeys = getSelectedRowKeys && getSelectedRowKeys();
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectedData: function getSelectedData() {
+        return selectedKeys;
+      }
+    };
+  });
+
+  if (selectedKeys) {
+    paginationProps.checkedLen = selectedKeys.length;
+  }
+
+  var filters = {
+    typeCode: typeDicts // company: [],
+
+  };
+  var columns = [{
+    title: '设备名称',
+    dataIndex: 'displayName',
+    sortable: true,
+    cell: getTitleCell
+  }, {
+    title: 'IP地址',
+    dataIndex: 'ipAddress',
+    sortable: true,
+    cell: function cell(ip) {
+      return getTitleCell(getIp(ip));
+    }
+  }, {
+    title: '类型',
+    dataIndex: 'typeCode',
+    filters: filters.typeCode,
+    cell: function cell(code) {
+      var dict = typeDicts && typeDicts.find(function (item) {
+        return item.value === code;
+      });
+      var name = dict && dict.label || code;
+      return getTitleCell(name);
+    }
+  }];
+
+  if (showCompanyColumn) {
+    columns.push({
+      title: '厂商',
+      sortable: true,
+      dataIndex: 'company',
+      cell: function cell(code) {
+        var dict = DICT.get(code);
+        var name = dict && dict.name || code;
+        return getTitleCell(name);
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(RiilTable, {
+    className: className,
+    formProps: formProps,
+    tableProps: tableProps,
+    paginationProps: paginationProps,
+    filters: filters,
+    columns: columns,
+    showChecked: !!selectionMode,
+    showPageSizeSelector: true
+  }, children);
+};
+
+export default /*#__PURE__*/React.forwardRef(ResourceList);