@riil-frontend/component-topology 2.7.2 → 2.8.0

package/es/components/ResourceList/ResourceSelect.js

@@ -23,7 +23,7 @@ var getTableData = /*#__PURE__*/function () {
         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\')';
+            condition = 'type(\'common_network\',\'switch\',\'switch_cluster\',\'linux\',\'windows\',\'oracle\',\'oracle.asm_disk_group\',\'tomcat\',\'application\',\'service\') && category(\'resource\')';
 
             if (like) {
               condition = {
@@ -67,7 +67,7 @@ var getTableData = /*#__PURE__*/function () {
 
               };
             });
-            return _context.abrupt("return", formatDataForTable(dataSource, data.total, data.page, data.pageSize));
+            return _context.abrupt("return", formatDataForTable(dataSource, data.totalRecord, data.pageIndex, data.pageSize));
 
           case 9:
           case "end":
@@ -149,7 +149,7 @@ var ResourceList = function ResourceList(props, ref) {
 
   };
   var defaultColumns = [{
-    title: '设备名称',
+    title: '资源名称',
     dataIndex: 'displayName',
     sortable: true,
     cell: getTitleCell
@@ -161,7 +161,7 @@ var ResourceList = function ResourceList(props, ref) {
       return getTitleCell(getIp(ip));
     }
   }, {
-    title: '类型',
+    title: '资源类型',
     dataIndex: 'typeCode',
     filters: filters.typeCode,
     cell: function cell(code) {
@@ -171,16 +171,17 @@ var ResourceList = function ResourceList(props, ref) {
       var name = dict && dict.label || code;
       return getTitleCell(name);
     }
-  }, {
-    title: '厂商',
-    sortable: true,
-    dataIndex: 'company',
-    cell: function cell(code) {
-      var dict = DICT.get(code);
-      var name = dict && dict.name || code;
-      return getTitleCell(name);
-    }
-  }];
+  } // {
+  //   title: '厂商',
+  //   sortable: true,
+  //   dataIndex: 'company',
+  //   cell: (code) => {
+  //     const dict = DICT.get(code);
+  //     const name = (dict && dict.name) || code;
+  //     return getTitleCell(name);
+  //   },
+  // }
+  ];
   return /*#__PURE__*/React.createElement(RiilTable, {
     className: className || styles.table,
     formProps: formProps,

package/es/components/TagSelect/index.js

@@ -0,0 +1,60 @@
+import _Box from "@alifd/next/lib/box";
+import _extends from "@babel/runtime/helpers/extends";
+import _Tag from "@alifd/next/lib/tag";
+import React, { useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import "./index.scss";
+var SelectableTag = _Tag.Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      dataSource = props.dataSource,
+      defaultValue = props.defaultValue,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = useState(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  useEffect(function () {
+    if (value) {
+      setCurrent(value);
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/React.createElement(_Box, _extends({
+    spacing: 8,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/React.createElement(SelectableTag, _extends({
+      key: item.key,
+      checked: current === item.key,
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), item.content));
+  })));
+};
+
+TagSelect.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  dataSource: PropTypes.array,
+  boxProps: PropTypes.any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+export default TagSelect;

package/es/components/TagSelect/index.scss

@@ -0,0 +1,27 @@
+/* write style here */
+@import '@alifd/next/variables.scss';
+.tag-select-wrap {
+	.tag-select-item {
+		text-align: -webkit-center;
+		.#{$css-prefix}tag {
+			height: auto;
+			line-height: 0;
+			&::before {
+				z-index: 1;
+			}
+			&::after {
+				z-index: 1;
+			}
+			.#{$css-prefix}tag-body {
+        width: 100%;
+				padding: 0;
+				.tag-select-img {
+				}
+			}
+		}
+		.tag-select-label {
+			margin-top: 4px;
+			max-width: fit-content;
+		}
+	}
+}

package/es/components/TemplateButton/index.js

@@ -7,8 +7,6 @@ import Icon from "./Icon";
 import styles from "./index.module.scss";
 
 var TemplateButton = function TemplateButton(props) {
-  var _classnames;
-
   var className = props.className,
       children = props.children,
       icon = props.icon,
@@ -24,7 +22,18 @@ var TemplateButton = function TemplateButton(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.card, className, (_classnames = {}, _classnames[styles.selected] = selected, _classnames[styles.sizeSmall] = size === 'small', _classnames[styles.sizeLarge] = size === 'large', _classnames)),
+    className: classnames(styles.card, className),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    className: styles.icon,
+    type: icon
+  }, rest))), /*#__PURE__*/React.createElement("div", {
+    className: styles.text
+  }, children));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.card, className),
     onClick: handleClick
   }, /*#__PURE__*/React.createElement(Icon, _extends({
     className: styles.icon,

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

@@ -1,41 +1,28 @@
 @import "@alifd/next/variables";
 
 .card {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #c4c6cf;
-  width: 120px;
-  height: 136px;
-  background-color: #fff;
-  text-align: center;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
-  vertical-align: middle;
-  margin-right: 12px;
-
-  &:hover, &:focus, &.selected {
-    border-color: $color-brand1-5;
-  }
-
-  &.sizeNormal {
-    width: 120px;
-    height: 136px;
-  }
+}
 
-  &.sizeSmall {
-    width: 50px;
-    height: 50px;
-  }
+.iconWrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
 }
 
 .icon {
-  width: 50%;
+  width: 120px;
 }
 
 .text {
-  font-size: $font-size-body-1;
-  margin-top: 10px;
+  font-size: 18px;
+  margin-top: 16px;
+  padding-bottom: 24px;
   color: $color-text1-3;
   outline: none;
 }

package/es/components/TemplateSelect/index.js

@@ -1,32 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _Tag from "@alifd/next/lib/tag";
 import React from 'react';
 import TemplateButton from "../TemplateButton";
 import styles from "./index.module.scss";
 import TemplateGroup from "../TemplateGroup";
+import TagSelect from "../TagSelect";
 var TagGroup = _Tag.Group,
     SelectableTag = _Tag.Selectable;
 
 var TemplateSelect = function TemplateSelect(props) {
-  return /*#__PURE__*/React.createElement(TemplateGroup, props); // const { data = [], size } = props;
+  var _data$filter$;
+
   // return (
-  //   <TagGroup>
-  //     {data.map((item) => (
-  //       <SelectableTag
-  //         key={item.name}
-  //         checked={item.selected}
-  //         onChange={() => {}}
-  //       >
-  //         <TemplateButton
-  //           key={item.id}
-  //           {...item}
-  //           size={size}
-  //         >
-  //           {item.name}
-  //         </TemplateButton>
-  //       </SelectableTag>
-  //     ))}
-  //   </TagGroup>
+  //   <TemplateGroup {...props}/>
   // )
+  var _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps;
+  var value = (_data$filter$ = data.filter(function (item) {
+    return item.selected;
+  })[0]) === null || _data$filter$ === void 0 ? void 0 : _data$filter$.id;
+  return /*#__PURE__*/React.createElement(TagSelect, {
+    defaultValue: value,
+    dataSource: data.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/React.createElement(TemplateButton, _extends({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  });
+  return /*#__PURE__*/React.createElement(TagGroup, null, data.map(function (item) {
+    return /*#__PURE__*/React.createElement(SelectableTag, {
+      key: item.name,
+      checked: item.selected,
+      onChange: function onChange() {}
+    }, /*#__PURE__*/React.createElement(TemplateButton, _extends({
+      key: item.id
+    }, item, {
+      size: size
+    }), item.name));
+  }));
 };
 
 export default TemplateSelect;

package/es/models/linkDynamicStyle.js

@@ -210,13 +210,28 @@ export default function (engine) {
 
                     links = [];
 
-                    if (isEdit && rootState.topoCreateMod.elements.links.length) {
-                      links = rootState.topoCreateMod.elements.links;
-                    } else {
-                      links = rootState.topoMod.topoData.links;
-                    } // 获取属性。无权限的属性为 []
+                    if (!(isEdit && rootState.topoCreateMod.elements.links.length)) {
+                      _context3.next = 9;
+                      break;
+                    }
+
+                    links = rootState.topoCreateMod.elements.links;
+                    _context3.next = 12;
+                    break;
+
+                  case 9:
+                    if (rootState.topoMod.topoData) {
+                      _context3.next = 11;
+                      break;
+                    }
+
+                    return _context3.abrupt("return");
 
+                  case 11:
+                    links = rootState.topoMod.topoData.links;
 
+                  case 12:
+                    // 获取属性。无权限的属性为 []
                     allLinkAttributes = rootState.topoBizMod.attrsAndMetrics; // 告警
 
                     alarmMap = rootState.topoBizMod.alarmDoc; // 如果是显示模式，过滤有告警的链路
@@ -268,7 +283,7 @@ export default function (engine) {
                       engine.view.topoClient.batchSetLineStyle(linkStyleMap);
                     }
 
-                  case 13:
+                  case 19:
                   case "end":
                     return _context3.stop();
                 }

package/es/models/topoMod.js

@@ -19,14 +19,13 @@ export default function (topoApp) {
       urlParams: {},
       topoLoading: true,
       topoLoadError: false,
-      topoId: '',
-      topoName: '',
-      topoPermission: undefined,
       viewState: 'view',
       // view, create, 2种模式
-      // lastRefresh: undefined,
+      topoId: '',
+      topoName: '',
       topoData: null,
       currentTopo: undefined,
+      topoPermission: undefined,
       currentNode: {
         id: '',
         name: '无数据'
@@ -175,7 +174,10 @@ export default function (topoApp) {
         },
         clearData: function clearData() {
           this.update({
-            topoData: null
+            topoId: '',
+            topoName: '',
+            topoData: null,
+            currentTopo: undefined
           });
         },
         switchToViewMode: function switchToViewMode(playload, rootState) {

package/es/topoCenter/store/topoTreeMod.js

@@ -4,31 +4,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import topoServer from '@riil-frontend/component-topology-common/es/services/topo';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import { treeMockData, topoInteData } from "../../utils/topoMocks";
-import { formatTree, loopTree, loopTreeFun, iconImg, treeNodeCount } from "../../utils/tree";
+import { formatTree, loopTree, loopTreeFun, findParentIdsById, treeNodeCount } from "../../utils/tree";
 
 var clone = function clone(data) {
   return JSON.parse(JSON.stringify(data));
-}; // 展开选中项
-
-
-function findSelectedParentIds(data, selectedId) {
-  // 选中 id 为 -1,则没有默认选中项
-  if (selectedId == '-1') return [];
-  var node = {};
-  loopTree(data, selectedId, function (item, index, arr, pid) {
-    node = {
-      item: item,
-      pid: pid
-    };
-  });
-  if (!node.item) return [];
-
-  if (node.pid != -1 && node.item.id) {
-    return node.item.type === 0 ? ["" + node.item.id].concat(findSelectedParentIds(data, node.pid)) : [].concat(findSelectedParentIds(data, node.pid));
-  } else {
-    return ["" + node.item.id];
-  }
-}
+};
 /**
  * TODO 导航树相关增删改移到拓扑中心
  */
@@ -81,7 +61,7 @@ export default function (topoApp) {
                       treeData: treeNodeCount(treeData),
                       defId: defId,
                       selectedNode: [selectedTopoId],
-                      expandedKeys: findSelectedParentIds(treeData, selectedTopoId)
+                      expandedKeys: findParentIdsById(treeData, selectedTopoId)
                     }); // console.log('resTreeData', resTreeData, rootState.topoMod.topoId);
 
 
@@ -366,10 +346,10 @@ export default function (topoApp) {
           }
 
           var expandedKeys = [].concat(treeState.expandedKeys || []);
-          var parentIds = findSelectedParentIds(treeState.treeData, id);
+          var parentIds = findParentIdsById(treeState.treeData, id);
           expandedKeys.push.apply(expandedKeys, parentIds);
           this.update({
-            selectedNode: [id],
+            selectedNode: ["" + id],
             expandedKeys: expandedKeys
           });
         }

package/es/utils/template.js

@@ -32,7 +32,7 @@ export var INIT_STATIC_STATE = {
  */
 
 export var DEFAULT_LAYOUT = {
-  id: 'circular'
+  id: 'hierarchical'
 };
 /**
  * 默认容器数据

package/es/utils/tree.js

@@ -87,6 +87,20 @@ export function findNodeById(tree, id) {
   });
   return node;
 }
+/**
+ * 按id查找祖先节点id列表
+ */
+
+export function findParentIdsById(tree, id) {
+  var node = findNodeById(tree, id);
+  var parentId = "" + node.parentId;
+
+  if (parentId === '-1') {
+    return [];
+  }
+
+  return [parentId].concat(findParentIdsById(tree, parentId));
+}
 /**
  * 递归循环遍历树匹配KEY
  * @param {array} json

package/lib/components/ResourceList/ResourceSelect.js

@@ -46,7 +46,7 @@ var getTableData = /*#__PURE__*/function () {
         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\')';
+            condition = 'type(\'common_network\',\'switch\',\'switch_cluster\',\'linux\',\'windows\',\'oracle\',\'oracle.asm_disk_group\',\'tomcat\',\'application\',\'service\') && category(\'resource\')';
 
             if (like) {
               condition = {
@@ -90,7 +90,7 @@ var getTableData = /*#__PURE__*/function () {
 
               };
             });
-            return _context.abrupt("return", (0, _format.formatDataForTable)(dataSource, data.total, data.page, data.pageSize));
+            return _context.abrupt("return", (0, _format.formatDataForTable)(dataSource, data.totalRecord, data.pageIndex, data.pageSize));
 
           case 9:
           case "end":
@@ -172,7 +172,7 @@ var ResourceList = function ResourceList(props, ref) {
 
   };
   var defaultColumns = [{
-    title: '设备名称',
+    title: '资源名称',
     dataIndex: 'displayName',
     sortable: true,
     cell: _table.getTitleCell
@@ -184,7 +184,7 @@ var ResourceList = function ResourceList(props, ref) {
       return (0, _table.getTitleCell)((0, _format.getIp)(ip));
     }
   }, {
-    title: '类型',
+    title: '资源类型',
     dataIndex: 'typeCode',
     filters: filters.typeCode,
     cell: function cell(code) {
@@ -194,17 +194,17 @@ var ResourceList = function ResourceList(props, ref) {
       var name = dict && dict.label || code;
       return (0, _table.getTitleCell)(name);
     }
-  }, {
-    title: '厂商',
-    sortable: true,
-    dataIndex: 'company',
-    cell: function cell(code) {
-      var dict = _storage.DICT.get(code);
-
-      var name = dict && dict.name || code;
-      return (0, _table.getTitleCell)(name);
-    }
-  }];
+  } // {
+  //   title: '厂商',
+  //   sortable: true,
+  //   dataIndex: 'company',
+  //   cell: (code) => {
+  //     const dict = DICT.get(code);
+  //     const name = (dict && dict.name) || code;
+  //     return getTitleCell(name);
+  //   },
+  // }
+  ];
   return /*#__PURE__*/_react["default"].createElement(_FormTable["default"], {
     className: className || _ResourceSelectModule["default"].table,
     formProps: formProps,

package/lib/components/TagSelect/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _tag = _interopRequireDefault(require("@alifd/next/lib/tag"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("./index.scss");
+
+var SelectableTag = _tag["default"].Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      dataSource = props.dataSource,
+      defaultValue = props.defaultValue,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = (0, _react.useState)(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setCurrent(value);
+    }
+  }, [value]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/_react["default"].createElement(_box["default"], (0, _extends2["default"])({
+    spacing: 8,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/_react["default"].createElement(SelectableTag, (0, _extends2["default"])({
+      key: item.key,
+      checked: current === item.key,
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), item.content));
+  })));
+};
+
+TagSelect.propTypes = {
+  onChange: _propTypes["default"].func,
+  value: _propTypes["default"].string,
+  defaultValue: _propTypes["default"].string,
+  dataSource: _propTypes["default"].array,
+  boxProps: _propTypes["default"].any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+var _default = TagSelect;
+exports["default"] = _default;

package/lib/components/TagSelect/index.scss

@@ -0,0 +1,27 @@
+/* write style here */
+@import '@alifd/next/variables.scss';
+.tag-select-wrap {
+	.tag-select-item {
+		text-align: -webkit-center;
+		.#{$css-prefix}tag {
+			height: auto;
+			line-height: 0;
+			&::before {
+				z-index: 1;
+			}
+			&::after {
+				z-index: 1;
+			}
+			.#{$css-prefix}tag-body {
+        width: 100%;
+				padding: 0;
+				.tag-select-img {
+				}
+			}
+		}
+		.tag-select-label {
+			margin-top: 4px;
+			max-width: fit-content;
+		}
+	}
+}

package/lib/components/TemplateButton/index.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _react = _interopRequireDefault(require("react"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 
@@ -20,8 +20,6 @@ var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
 
 var TemplateButton = function TemplateButton(props) {
-  var _classnames;
-
   var className = props.className,
       children = props.children,
       icon = props.icon,
@@ -37,7 +35,18 @@ var TemplateButton = function TemplateButton(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(_indexModule["default"].card, className, (_classnames = {}, _classnames[_indexModule["default"].selected] = selected, _classnames[_indexModule["default"].sizeSmall] = size === 'small', _classnames[_indexModule["default"].sizeLarge] = size === 'large', _classnames)),
+    className: (0, _classnames["default"])(_indexModule["default"].card, className),
+    onClick: handleClick
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].iconWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
+    className: _indexModule["default"].icon,
+    type: icon
+  }, rest))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].text
+  }, children));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_indexModule["default"].card, className),
     onClick: handleClick
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
     className: _indexModule["default"].icon,