@riil-frontend/component-topology 2.8.1 → 2.10.0-alpha-4

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"], {
+    dataSource: layoutOptions,
+    boxProps: {
+      spacing: 12
+    },
+    tagProps: {
+      className: _LayoutDirectionSelectModule["default"].layoutSelectItem
+    },
+    ItemComponent: _Item["default"]
+  });
+}
+
+;

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

@@ -0,0 +1,5 @@
+.layoutSelectItem {
+  width: 120px;
+  height: 136px !important;
+  padding-top: 16px;
+}

package/lib/components/LayoutDirectionSelect/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _LayoutDirectionSelect = _interopRequireDefault(require("./LayoutDirectionSelect"));
+
+var _default = _LayoutDirectionSelect["default"];
+exports["default"] = _default;

package/lib/components/LayoutSelect/LayoutSelect.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LayoutSelect;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TagImageSelect = _interopRequireDefault(require("../TagImageSelect"));
+
+var _LayoutSelectModule = _interopRequireDefault(require("./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,
+// },
+];
+
+function LayoutSelect(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: _LayoutSelectModule["default"].layoutSelectItem
+    }
+  });
+}
+
+;

package/lib/components/LayoutSelect/LayoutSelect.module.scss

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

package/lib/components/LayoutSelect/README.md

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

package/lib/components/LayoutSelect/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _LayoutSelect = _interopRequireDefault(require("./LayoutSelect"));
+
+var _default = _LayoutSelect["default"];
+exports["default"] = _default;

package/lib/components/TagImageSelect/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TemplateButton = _interopRequireDefault(require("../TemplateButton"));
+
+var _TagSelect = _interopRequireDefault(require("../TagSelect"));
+
+var _excluded = ["dataSource", "size", "boxProps", "tagProps", "itemProps", "ItemComponent"];
+
+var TagImageSelect = function TagImageSelect(props) {
+  var dataSource = props.dataSource,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  var Item = ItemComponent || _TemplateButton["default"];
+  return /*#__PURE__*/_react["default"].createElement(_TagSelect["default"], (0, _extends2["default"])({}, otherProps, {
+    dataSource: dataSource.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  }));
+};
+
+var _default = TagImageSelect;
+exports["default"] = _default;

package/lib/components/TagSelect/index.js

@@ -24,8 +24,8 @@ var SelectableTag = _tag["default"].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;
 
@@ -41,7 +41,7 @@ var TagSelect = function TagSelect(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "tag-select-wrap"
   }, /*#__PURE__*/_react["default"].createElement(_box["default"], (0, _extends2["default"])({
-    spacing: 8,
+    spacing: 12,
     wrap: true,
     direction: "row"
   }, boxProps), dataSource.map(function (item) {

package/lib/components/TagSelect/index.scss

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

package/lib/components/TemplateButton/Icon.js

@@ -12,13 +12,14 @@ var _assets = _interopRequireDefault(require("./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 = _assets["default"][type];
+  var src = img || _assets["default"][type];
   return /*#__PURE__*/_react["default"].createElement("img", {
     className: className,
     style: style,

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

@@ -5,10 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _topo_tpl_blank = _interopRequireDefault(require("./topo_tpl_blank.svg"));
-
-var _topo_tpl_region = _interopRequireDefault(require("./topo_tpl_region.svg"));
-
 var _topo_layout_circular = _interopRequireDefault(require("./topo_layout_circular.svg"));
 
 var _topo_layout_hierarchical = _interopRequireDefault(require("./topo_layout_hierarchical.svg"));
@@ -17,8 +13,6 @@ var _topo_layout_toward = _interopRequireDefault(require("./topo_layout_toward.s
 
 // import IconTplLayeredRing from './topo_tpl_layered_ring.svg';
 var _default = {
-  'tpl_blank': _topo_tpl_blank["default"],
-  'tpl_region': _topo_tpl_region["default"],
   // 'tpl_layered_ring': IconTplLayeredRing,
   'layout_circular': _topo_layout_circular["default"],
   'layout_hierarchical': _topo_layout_hierarchical["default"],

package/lib/components/TemplateButton/index.js

@@ -17,45 +17,27 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
-var _excluded = ["className", "children", "icon", "id", "selected", "onSelect", "size"];
+var _excluded = ["className", "children", "icon", "img", "iconClassName", "textClassName"];
 
 var TemplateButton = function TemplateButton(props) {
   var className = props.className,
       children = props.children,
       icon = props.icon,
-      id = props.id,
-      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 = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
-
-  var handleClick = function handleClick() {
-    return onSelect(id);
-  };
-
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_indexModule["default"].card, className),
-    onClick: handleClick
+    className: (0, _classnames["default"])(_indexModule["default"].card, className)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].iconWrapper
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
-    className: _indexModule["default"].icon,
+    className: (0, _classnames["default"])(_indexModule["default"].icon, iconClassName),
+    img: img,
     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,
-    type: icon
-  }, rest)), /*#__PURE__*/_react["default"].createElement("div", {
-    tabIndex: "0",
-    role: "button",
-    className: _indexModule["default"].text
-  }, children));
+    className: (0, _classnames["default"])(_indexModule["default"].text, textClassName)
+  }, /*#__PURE__*/_react["default"].createElement("span", null, children)));
 };
 
 var _default = TemplateButton;

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

@@ -10,7 +10,6 @@
 
 .iconWrapper {
   display: flex;
-  flex: 1;
   justify-content: center;
   align-items: center;
 }
@@ -20,9 +19,10 @@
 }
 
 .text {
+  height: 20px;
+  line-height: 20px;
   font-size: 18px;
-  margin-top: 16px;
-  padding-bottom: 24px;
+  margin-top: 14px;
   color: $color-text1-3;
   outline: none;
 }

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

@@ -11,7 +11,7 @@ var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _TemplateGroup = _interopRequireDefault(require("../../../../../components/TemplateGroup"));
+var _TagImageSelect = _interopRequireDefault(require("../../../../../components/TagImageSelect"));
 
 var _LayoutSettingsModule = _interopRequireDefault(require("./LayoutSettings.module.scss"));
 
@@ -66,7 +66,7 @@ var LayoutSettings = function LayoutSettings(props) {
       onSelect: onLayoutSelect
     };
   });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TemplateGroup["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TagImageSelect["default"], {
     data: layoutGroup,
     size: size
   }), layoutId === 'toward' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {

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

@@ -40,7 +40,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/lib/core/models/utils/linkUtils.js

@@ -21,8 +21,8 @@ function mergeLinksData(links, relationDetails) {
   return links.map(function (link) {
     var relation = (0, _topoData.findItem)(relationDetails, 'id', link.id);
     return (0, _extends2["default"])({}, 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/lib/core/viewer/components/titlebar/ViewerTools.js

@@ -23,10 +23,15 @@ var _TitleBarModule = _interopRequireDefault(require("../../../components/titleb
 
 var _EditButton = _interopRequireDefault(require("./widgets/EditButton"));
 
+var _useSetDefaultTopo = _interopRequireDefault(require("./useSetDefaultTopo"));
+
 function ViewerTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,
       showEditButton = _props$showEditButton === void 0 ? true : _props$showEditButton;
+  var setDefaultTopo = (0, _useSetDefaultTopo["default"])({
+    topo: topo
+  });
   return /*#__PURE__*/_react["default"].createElement("div", null, showEditButton && /*#__PURE__*/_react["default"].createElement(_EditButton["default"], (0, _extends2["default"])({
     topo: topo
   }, props)), /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
@@ -36,7 +41,7 @@ function ViewerTools(props) {
       type: "ellipsis-vertical"
     })),
     triggerType: "click"
-  }, /*#__PURE__*/_react["default"].createElement(_menu["default"], null, /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
+  }, /*#__PURE__*/_react["default"].createElement(_menu["default"], null, setDefaultTopo.renderMenuItem(), /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
     onClick: function onClick() {
       topo.exportImage();
     }

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = useSetDefaultTopo;
+
+var _menu = _interopRequireDefault(require("@alifd/next/lib/menu"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tree = require("../../../../utils/tree");
+
+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 = (0, _tree.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["default"].createElement(_menu["default"].Item, {
+        onClick: setDefault
+      }, "\u8BBE\u4E3A\u9ED8\u8BA4\u62D3\u6251");
+    }
+  };
+}

package/lib/models/topoCreateMod.js

@@ -70,6 +70,7 @@ var regionTplState = {
   groups: initGroups(3)
 };
 var initialState = (0, _extends2["default"])({
+  viewGroup: undefined,
   topo: [],
   // 拓扑结构（点线）
   elements: {
@@ -282,7 +283,7 @@ function _default(topoApp) {
           var _this = this;
 
           return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-            var data, groupTopo, resources, groups;
+            var data, isViewGroup, parseGroup, viewGroup, resources, groups;
             return _regenerator["default"].wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
@@ -301,15 +302,13 @@ function _default(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.TOPO_PARENT_ID;
-                    });
-                    resources = conditionToRes(groupTopo >= 0 ? data[groupTopo].condition : {}); // 容器
+                    };
 
-                    groups = (0, _format.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;
@@ -329,14 +328,23 @@ function _default(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();
                 }
@@ -454,7 +462,8 @@ function _default(topoApp) {
         },
         saveTopo: function saveTopo(data, state) {
           return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].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 _regenerator["default"].wrap(function _callee4$(_context4) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
@@ -494,21 +503,38 @@ function _default(topoApp) {
 
                   case 11:
                     if (!(resources || groups)) {
-                      _context4.next = 16;
+                      _context4.next = 19;
                       break;
                     }
 
+                    groupInfo = [];
+
+                    if ((0, _utils.isAvailableArray)(groups)) {
+                      groupInfo = groups.map(function (group) {
+                        return (0, _extends2["default"])({}, 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 = (0, _utils.isAvailableArray)(groups) && groups.map(function (group) {
-                      return (0, _extends2["default"])({}, group, {
-                        layout: getLayoutId(group.layout),
-                        resources: resToConditions(group.resources, true)
+
+                    if (conditions) {
+                      groupInfo.push({
+                        id: viewGroupId,
+                        parentId: _topo.TOPO_PARENT_ID,
+                        order: 100,
+                        resources: conditions
                       });
-                    });
-                    _context4.next = 16;
-                    return _topo["default"].bindResourceToTopo(topoId, conditions, groupInfo);
+                    }
 
-                  case 16:
+                    _context4.next = 19;
+                    return _topo["default"].bindResourceToTopo(topoId, null, groupInfo);
+
+                  case 19:
                   case "end":
                     return _context4.stop();
                 }

package/lib/models/topoMod.js

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

package/lib/style.js

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

package/lib/utils/tree.js

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