@riil-frontend/component-topology 2.8.0 → 2.10.0-alpha-3

package/es/components/LayoutDirectionSelect/Item.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TemplateButton from "../TemplateButton";
+import styles from "./Item.module.scss";
+export default function Item(props) {
+  return /*#__PURE__*/React.createElement(TemplateButton, _extends({}, props, {
+    iconClassName: styles.icon,
+    textClassName: styles.text
+  }));
+}
+;

package/es/components/LayoutDirectionSelect/Item.module.scss

@@ -0,0 +1,9 @@
+.icon {
+  width: 72px;
+}
+
+.text {
+  font-size: 12px;
+  margin-top: 15px;
+  padding-bottom: 18px;
+}

package/es/components/LayoutDirectionSelect/LayoutDirectionSelect.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TagImageSelect from "../TagImageSelect";
+import styles from "./LayoutDirectionSelect.module.scss";
+import Item from "./Item";
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+export default function LayoutDirectionSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return _extends({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/React.createElement(TagImageSelect, {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: styles.layoutSelectItem
+    },
+    ItemComponent: Item
+  });
+}
+;

package/es/components/LayoutDirectionSelect/LayoutDirectionSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px !important;
+}

package/es/components/LayoutDirectionSelect/index.js

@@ -0,0 +1,2 @@
+import LayoutDirectionSelect from "./LayoutDirectionSelect";
+export default LayoutDirectionSelect;

package/es/components/LayoutSelect/LayoutSelect.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import TagImageSelect from "../TagImageSelect";
+import styles from "./LayoutSelect.module.scss";
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+export default function LayoutSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return _extends({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/React.createElement(TagImageSelect, {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: styles.layoutSelectItem
+    }
+  });
+}
+;

package/es/components/LayoutSelect/LayoutSelect.module.scss

@@ -0,0 +1,4 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px;
+}

package/es/components/LayoutSelect/README.md

@@ -0,0 +1 @@
+自动布局选择

package/es/components/LayoutSelect/index.js

@@ -0,0 +1,2 @@
+import LayoutSelect from "./LayoutSelect";
+export default LayoutSelect;

package/es/components/{TemplateSelect → TagImageSelect}/index.js

@@ -1,34 +1,28 @@
 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) {
+var TagImageSelect = function TagImageSelect(props) {
   var _data$filter$;
 
-  // return (
-  //   <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;
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent;
   var value = (_data$filter$ = data.filter(function (item) {
     return item.selected;
   })[0]) === null || _data$filter$ === void 0 ? void 0 : _data$filter$.id;
+  var Item = ItemComponent || TemplateButton;
   return /*#__PURE__*/React.createElement(TagSelect, {
     defaultValue: value,
     dataSource: data.map(function (item) {
       return {
         key: item.id,
-        content: /*#__PURE__*/React.createElement(TemplateButton, _extends({
+        content: /*#__PURE__*/React.createElement(Item, _extends({
           key: item.id
         }, item, {
           size: size
@@ -38,17 +32,6 @@ var TemplateSelect = function TemplateSelect(props) {
     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;
+export default TagImageSelect;

package/es/components/TagSelect/index.js

@@ -9,8 +9,8 @@ var SelectableTag = _Tag.Selectable;
 var TagSelect = function TagSelect(props) {
   var _onChange = props.onChange,
       value = props.value,
-      dataSource = props.dataSource,
       defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
       boxProps = props.boxProps,
       tagProps = props.tagProps;
 
@@ -26,7 +26,7 @@ var TagSelect = function TagSelect(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "tag-select-wrap"
   }, /*#__PURE__*/React.createElement(_Box, _extends({
-    spacing: 8,
+    spacing: 12,
     wrap: true,
     direction: "row"
   }, boxProps), dataSource.map(function (item) {

package/es/components/TagSelect/index.scss

@@ -19,9 +19,5 @@
 				}
 			}
 		}
-		.tag-select-label {
-			margin-top: 4px;
-			max-width: fit-content;
-		}
 	}
 }

package/es/components/TemplateButton/Icon.js

@@ -4,13 +4,14 @@ import Icons from "./assets";
 var Icon = function Icon(props) {
   var _props$alt = props.alt,
       alt = _props$alt === void 0 ? '' : _props$alt,
+      img = props.img,
       type = props.type,
       className = props.className,
       rotate = props.rotate;
   var style = rotate ? {
     transform: "rotate(" + rotate + "deg)"
   } : null;
-  var src = Icons[type];
+  var src = img || Icons[type];
   return /*#__PURE__*/React.createElement("img", {
     className: className,
     style: style,

package/es/components/TemplateButton/assets/index.js

@@ -1,12 +1,8 @@
-import IconTplBlank from "./topo_tpl_blank.svg";
-import IconTplRegion from "./topo_tpl_region.svg"; // import IconTplLayeredRing from './topo_tpl_layered_ring.svg';
-
+// import IconTplLayeredRing from './topo_tpl_layered_ring.svg';
 import IconLayoutCircular from "./topo_layout_circular.svg";
 import IconLayoutHierarchical from "./topo_layout_hierarchical.svg";
 import IconLayoutToward from "./topo_layout_toward.svg";
 export default {
-  'tpl_blank': IconTplBlank,
-  'tpl_region': IconTplRegion,
   // 'tpl_layered_ring': IconTplLayeredRing,
   'layout_circular': IconLayoutCircular,
   'layout_hierarchical': IconLayoutHierarchical,

package/es/components/TemplateButton/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "img", "iconClassName", "textClassName"];
 import React from 'react';
 import classnames from 'classnames';
 import Icon from "./Icon";
@@ -14,7 +14,9 @@ var TemplateButton = function TemplateButton(props) {
       selected = props.selected,
       _props$onSelect = props.onSelect,
       onSelect = _props$onSelect === void 0 ? function () {} : _props$onSelect,
-      size = props.size,
+      img = props.img,
+      iconClassName = props.iconClassName,
+      textClassName = props.textClassName,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
   var handleClick = function handleClick() {
@@ -27,21 +29,11 @@ var TemplateButton = function TemplateButton(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.iconWrapper
   }, /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
+    className: classnames(styles.icon, iconClassName),
+    img: img,
     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,
-    type: icon
-  }, rest)), /*#__PURE__*/React.createElement("div", {
-    tabIndex: "0",
-    role: "button",
-    className: styles.text
+    className: classnames(styles.text, textClassName)
   }, children));
 };
 

package/es/core/editor/components/settings/common/LayoutSettings.js

@@ -1,6 +1,6 @@
 import _Radio from "@alifd/next/lib/radio";
 import React, { useState } from 'react';
-import TemplateGroup from "../../../../../components/TemplateGroup";
+import TemplateGroup from "../../../../../components/TagImageSelect";
 import styles from "./LayoutSettings.module.scss";
 var LAYOUTS = {
   circular: '星型布局',

package/es/core/models/cache/CiTyeCache.js

@@ -30,7 +30,7 @@ var CiTyeCache = /*#__PURE__*/function () {
             case 5:
               _context.prev = 5;
               _context.t0 = _context["catch"](0);
-              console.error('查询Ci模型异常');
+              console.error('查询Ci模型异常', _context.t0);
 
             case 8:
               return _context.abrupt("return", this.cache);

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

@@ -7,8 +7,8 @@ export function mergeLinksData(links, relationDetails) {
   return links.map(function (link) {
     var relation = findItem(relationDetails, 'id', link.id);
     return _extends({}, link, {
-      ciType: relation.typeCode,
-      name: relation.attributes.name,
+      ciType: relation === null || relation === void 0 ? void 0 : relation.typeCode,
+      name: relation === null || relation === void 0 ? void 0 : relation.attributes.name,
       detail: relation
     });
   });

package/es/core/viewer/components/titlebar/ViewerTools.js

@@ -6,10 +6,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 import EditButton from "./widgets/EditButton";
+import useSetDefaultTopo from "./useSetDefaultTopo";
 export default function ViewerTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton;
+  var setDefaultTopo = useSetDefaultTopo({
+    topo: topo
+  });
   return /*#__PURE__*/React.createElement("div", null, showEditButton && /*#__PURE__*/React.createElement(EditButton, _extends({
     topo: topo
   }, props)), /*#__PURE__*/React.createElement(_Dropdown, {
@@ -19,7 +23,7 @@ export default function ViewerTools(props) {
       type: "ellipsis-vertical"
     })),
     triggerType: "click"
-  }, /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, {
+  }, /*#__PURE__*/React.createElement(_Menu, null, setDefaultTopo.renderMenuItem(), /*#__PURE__*/React.createElement(_Menu.Item, {
     onClick: function onClick() {
       topo.exportImage();
     }

package/es/core/viewer/components/titlebar/useSetDefaultTopo.js

@@ -0,0 +1,30 @@
+import _Menu from "@alifd/next/lib/menu";
+import React from 'react';
+import { findNodeById } from "../../../../utils/tree";
+export default function useSetDefaultTopo(props) {
+  var _findNodeById;
+
+  var topo = props.topo;
+  var store = topo.store;
+  var functionAuthState = store.useModelState('functionAuth');
+  var topoModState = store.useModelState('topoMod');
+
+  var _store$useModel = store.useModel('topoTreeMod'),
+      topoTreeState = _store$useModel[0],
+      topoTreeDispatchers = _store$useModel[1];
+
+  var isDefault = (_findNodeById = findNodeById(topoTreeState.treeData, topoModState.topoId)) === null || _findNodeById === void 0 ? void 0 : _findNodeById.showDefault;
+  var showButton = !!functionAuthState.permissions.manageNavTree && !isDefault;
+
+  var setDefault = function setDefault() {
+    topoTreeDispatchers.setDefTopoOnTree(topoModState.topoId);
+  };
+
+  return {
+    renderMenuItem: function renderMenuItem() {
+      return showButton && /*#__PURE__*/React.createElement(_Menu.Item, {
+        onClick: setDefault
+      }, "\u8BBE\u4E3A\u9ED8\u8BA4\u62D3\u6251");
+    }
+  };
+}

package/es/models/topoCreateMod.js

@@ -54,6 +54,7 @@ var regionTplState = {
 };
 
 var initialState = _extends({
+  viewGroup: undefined,
   topo: [],
   // 拓扑结构（点线）
   elements: {
@@ -268,7 +269,7 @@ export default function (topoApp) {
           var _this = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-            var data, groupTopo, resources, groups;
+            var data, isViewGroup, parseGroup, viewGroup, resources, groups;
             return _regeneratorRuntime.wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
@@ -287,15 +288,13 @@ export default function (topoApp) {
                     return _context.abrupt("return");
 
                   case 5:
-                    // 视图
-                    groupTopo = data.findIndex(function (item) {
+                    isViewGroup = function isViewGroup(item) {
                       var _item$topoGroup;
 
                       return ((_item$topoGroup = item.topoGroup) === null || _item$topoGroup === void 0 ? void 0 : _item$topoGroup.parentId) === TOPO_PARENT_ID;
-                    });
-                    resources = conditionToRes(groupTopo >= 0 ? data[groupTopo].condition : {}); // 容器
+                    };
 
-                    groups = removeFromArray(data, groupTopo).map(function (item) {
+                    parseGroup = function parseGroup(item) {
                       var _item$topoGroup2 = item.topoGroup,
                           topoGroup = _item$topoGroup2 === void 0 ? {} : _item$topoGroup2,
                           condition = item.condition;
@@ -315,14 +314,23 @@ export default function (topoApp) {
                         expanded: groupStyles.expanded || false,
                         resources: conditionToRes(condition)
                       };
-                    });
+                    }; // 视图
+
+
+                    viewGroup = data.filter(isViewGroup).map(parseGroup)[0];
+                    resources = viewGroup ? viewGroup.resources : {}; // 容器
+
+                    groups = data.filter(function (item) {
+                      return !isViewGroup(item);
+                    }).map(parseGroup);
 
                     _this.update({
+                      viewGroup: viewGroup,
                       resources: resources,
                       groups: groups
                     });
 
-                  case 9:
+                  case 11:
                   case "end":
                     return _context.stop();
                 }
@@ -437,7 +445,8 @@ export default function (topoApp) {
         },
         saveTopo: function saveTopo(data, state) {
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-            var topoId, template, layout, global, resources, groups, serialize, layoutId, conditions, groupInfo;
+            var topoId, template, layout, global, resources, groups, serialize, layoutId, _state$topoCreateMod$, groupInfo, viewGroupId, conditions;
+
             return _regeneratorRuntime.wrap(function _callee4$(_context4) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
@@ -477,21 +486,38 @@ export default function (topoApp) {
 
                   case 11:
                     if (!(resources || groups)) {
-                      _context4.next = 16;
+                      _context4.next = 19;
                       break;
                     }
 
+                    groupInfo = [];
+
+                    if (isAvailableArray(groups)) {
+                      groupInfo = groups.map(function (group) {
+                        return _extends({}, group, {
+                          layout: getLayoutId(group.layout),
+                          resources: resToConditions(group.resources, true)
+                        });
+                      });
+                    } // 视图
+
+
+                    viewGroupId = (_state$topoCreateMod$ = state.topoCreateMod.viewGroup) === null || _state$topoCreateMod$ === void 0 ? void 0 : _state$topoCreateMod$.id;
                     conditions = resToConditions(resources, true);
-                    groupInfo = isAvailableArray(groups) && groups.map(function (group) {
-                      return _extends({}, group, {
-                        layout: getLayoutId(group.layout),
-                        resources: resToConditions(group.resources, true)
+
+                    if (conditions) {
+                      groupInfo.push({
+                        id: viewGroupId,
+                        parentId: TOPO_PARENT_ID,
+                        order: 100,
+                        resources: conditions
                       });
-                    });
-                    _context4.next = 16;
-                    return topoService.bindResourceToTopo(topoId, conditions, groupInfo);
+                    }
 
-                  case 16:
+                    _context4.next = 19;
+                    return topoService.bindResourceToTopo(topoId, null, groupInfo);
+
+                  case 19:
                   case "end":
                     return _context4.stop();
                 }

package/es/models/topoMod.js

@@ -21,6 +21,7 @@ export default function (topoApp) {
       topoLoadError: false,
       viewState: 'view',
       // view, create, 2种模式
+      id: undefined,
       topoId: '',
       topoName: '',
       topoData: null,
@@ -35,9 +36,9 @@ export default function (topoApp) {
       topoAlarmIsOpen: false,
       // 拓扑通道是否打开
       alarmData: null,
-      // 概览抽屉中告警列表相关数据
+      // 概览抽屉中告警列表相关数据 TODO 抽取
       currentCiInfo: null,
-      // 概览抽屉当前CI元数据
+      // 概览抽屉当前CI元数据 TODO 抽取
       resAndMetrics: {
         res: [],
         metrics: [],

package/es/style.js

@@ -25,7 +25,7 @@ import '@alifd/next/lib/radio/style';
 import '@alifd/next/lib/collapse/style';
 import '@alifd/next/lib/list/style';
 import '@alifd/next/lib/tree-select/style';
-
+import '@alifd/next/lib/tag/style';
 
 
 import './index.scss';

package/es/utils/tree.js

@@ -93,6 +93,11 @@ export function findNodeById(tree, id) {
 
 export function findParentIdsById(tree, id) {
   var node = findNodeById(tree, id);
+
+  if (!node) {
+    return [];
+  }
+
   var parentId = "" + node.parentId;
 
   if (parentId === '-1') {

package/lib/components/LayoutDirectionSelect/Item.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = Item;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
+
+var _ItemModule = _interopRequireDefault(require("./Item.module.scss"));
+
+function Item(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TemplateButton["default"], (0, _extends2["default"])({}, props, {
+    iconClassName: _ItemModule["default"].icon,
+    textClassName: _ItemModule["default"].text
+  }));
+}
+
+;

package/lib/components/LayoutDirectionSelect/Item.module.scss

@@ -0,0 +1,9 @@
+.icon {
+  width: 72px;
+}
+
+.text {
+  font-size: 12px;
+  margin-top: 15px;
+  padding-bottom: 18px;
+}

package/lib/components/LayoutDirectionSelect/LayoutDirectionSelect.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LayoutDirectionSelect;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TagImageSelect = _interopRequireDefault(require("../TagImageSelect"));
+
+var _LayoutDirectionSelectModule = _interopRequireDefault(require("./LayoutDirectionSelect.module.scss"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var LAYOUTS = [{
+  id: 'towardsouth',
+  name: '自上向下',
+  icon: 'layout_toward'
+}, // {
+//   id: 'towardnorth',
+//   name: '自下向上',
+//   icon: 'layout_toward',
+//   rotate: 180,
+// },
+{
+  id: 'towardeast',
+  name: '自左向右',
+  icon: 'layout_toward',
+  rotate: 270
+} // {
+//   id: 'towardwest',
+//   name: '自右向左',
+//   icon: 'layout_toward',
+//   rotate: 90,
+// },
+];
+
+function LayoutDirectionSelect(props) {
+  var value = props.value,
+      onSelect = props.onSelect;
+  var layoutOptions = LAYOUTS.map(function (item) {
+    return (0, _extends2["default"])({}, item, {
+      selected: value === item.id,
+      onSelect: onSelect
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement(_TagImageSelect["default"], {
+    data: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: _LayoutDirectionSelectModule["default"].layoutSelectItem
+    },
+    ItemComponent: _Item["default"]
+  });
+}
+
+;