@riil-frontend/component-topology 5.0.18 → 6.0.0-alpha.2

package/es/components/VerticalIconTab/VerticalIconTab.js

@@ -0,0 +1,58 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import styles from "./VerticalIconTab.module.scss";
+/**
+ * 自定义标题
+ * @param {*} param0 
+ * @returns 
+ */
+
+function CustomTabItem(_ref) {
+  var title = _ref.title,
+      icon = _ref.icon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "v-icon-tab-item"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: icon,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "tab-title"
+  }, title));
+}
+/**
+ * 竖向
+ * @param {*} props 
+ * @returns 
+ */
+
+
+function VerticalIconTab(props) {
+  var _classNames;
+
+  var activeKey = props.activeKey,
+      onChange = props.onChange;
+
+  var handleClick = function handleClick() {
+    onChange(null);
+  };
+
+  return /*#__PURE__*/React.createElement(_Tab, _extends({
+    shape: "wrapped",
+    tabPosition: "left",
+    tabRender: function tabRender(key, props) {
+      return /*#__PURE__*/React.createElement(CustomTabItem, _extends({
+        key: key
+      }, props));
+    }
+  }, props, {
+    className: styles.tabs,
+    navClassName: styles.nav,
+    contentClassName: classNames(styles.content, (_classNames = {}, _classNames[styles.hide] = !activeKey, _classNames)),
+    onClick: handleClick
+  }));
+}
+
+VerticalIconTab.Item = _Tab.Item;
+export default VerticalIconTab;

package/es/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -0,0 +1,63 @@
+@import '~@alifd/next/variables.scss';
+
+
+.tabs {
+  height: 100%;
+
+}
+
+// 导航
+.nav {
+  width: 60px;
+  height: 100%;
+  padding-top: 4px;
+  // border-right: 1px solid #E6E7EB;
+  background: none !important;
+
+  :global {
+
+    .#{$css-prefix}tabs-tab {
+      background-color: transparent !important;
+
+      &.active .v-icon-tab-item {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
+    }
+
+    // 图标区
+    .v-icon-tab-item {
+      height: 76px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 0 4px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
+    }
+  }
+}
+
+// 标签页内容区
+.content {
+  width: 260px;
+  height: 100%;
+  transition: all .1s linear;
+  border-right: 1px solid var(--tab-wrapped-border-line-color);
+
+  :global {
+    .#{$css-prefix}tabs-tabpane {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  &.hide {
+    width: 0;
+    border-right: none;
+  }
+}

package/es/components/VerticalIconTab/index.js

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

package/es/components/collapse/Collapse.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Collapse(props) {
+  return /*#__PURE__*/React.createElement("div", null, "Collapse");
+}
+
+export default Collapse;

package/es/components/collapse/Collapse.module.scss

@@ -0,0 +1,33 @@
+@import "@alifd/next/variables";
+
+.collapse {
+  :global {
+
+    // 折叠模板标题
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title:hover {
+      background: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      padding-left: 32px;
+
+      &>.#{$css-prefix}collapse-panel-icon {
+        left: 12px;
+        margin-top: 0;
+        margin-left: 0;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel-content,
+    .#{$css-prefix}collapse-panel-expanded>.#{$css-prefix}collapse-panel-content {
+      padding-left: 32px;
+      padding-top: 8px;
+    }
+  }
+}

package/es/components/collapse/CollapseFullheight.module.scss

@@ -0,0 +1,20 @@
+@import "@alifd/next/variables";
+
+.fullheight {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .panelFullHeight {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :global {
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
+}

package/es/components/collapse/Panel.js

@@ -52,6 +52,9 @@ function CollapsePanel(props) {
     },
     onBlur: function onBlur() {
       setHoverExtra(false);
+    },
+    style: {
+      height: 20
     }
   }, extra));
   return /*#__PURE__*/React.createElement(_Collapse.Panel, _extends({

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

@@ -12,6 +12,19 @@ export function getNodeDefaultIcons(topo) {
 export function getGroupDefaultIcons(topo) {
   return [].concat(topoManager.iconLibManager.getIcons());
 }
+export function getUserCustomIconsForHt(topo) {
+  return getUserCustomIcons(topo).map(function (_ref) {
+    var id = _ref.id,
+        name = _ref.name,
+        url = _ref.url,
+        jsonUrl = _ref.jsonUrl;
+    return {
+      id: id,
+      name: name,
+      url: jsonUrl || url
+    };
+  });
+}
 /**
  * 获取编辑模式左侧图片列表
  * @param {*} topo 
@@ -22,11 +35,11 @@ export function getEditorIcons(topo) {
     // 默认图标
     system: getNodeDefaultIcons(topo),
     // 自定义上传图标
-    custom: getUserCustomIcons(topo).map(function (_ref) {
-      var id = _ref.id,
-          name = _ref.name,
-          url = _ref.url,
-          jsonUrl = _ref.jsonUrl;
+    custom: getUserCustomIcons(topo).map(function (_ref2) {
+      var id = _ref2.id,
+          name = _ref2.name,
+          url = _ref2.url,
+          jsonUrl = _ref2.jsonUrl;
       return {
         id: id,
         name: name,

package/es/core/components/AlarmListPanel/components/AlarmListItem.js

@@ -1,15 +1,34 @@
 import _List from "@alifd/next/es/list";
 import _Icon from "@alifd/next/es/icon";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import styles from "./index.module.scss";
 import { PAGE_TYPE } from "../constants/uicbb";
 import Link from "../../../../components/Link";
 
 var alarmLink = function alarmLink(alarmInfo) {
-  // console.log("alarmLink", alarmInfo);
+  // console.log('alarmLink', alarmInfo);
   return "/default/pagecenter/" + PAGE_TYPE.ALERT_DETAIL + "/view/" + alarmInfo.alertId + "?alertId=" + alarmInfo.alertId + "&resId=" + alarmInfo.ciId + "&title=" + alarmInfo.alertObject + "&ruleId=" + alarmInfo.ruleId + "&ciCode=" + alarmInfo.ciTypeCode + "&ciType=" + alarmInfo.ciType;
 };
 
+var getNode = function getNode(topo, alarmInfo) {
+  var id = alarmInfo.resourceId || alarmInfo.ciId;
+  var node = topo.getHtTopo().getGraphView().dm().getDataByTag(id);
+
+  if (node.getParent()) {
+    var data = node.getParent();
+    topo.getHtTopo().getGraphView().fitData(data, true, 20, true); // eslint-disable-next-line no-underscore-dangle, eqeqeq
+
+    if (data._animation.start[0] != 'hide') {
+      topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(node);
+    } else {
+      topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(data);
+    }
+  } else {
+    topo.getHtTopo().getGraphView().fitData(node, true, 20, true);
+    topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(node);
+  }
+};
+
 function AlarmListItem(props) {
   // 传入参数
   var topo = props.topo,
@@ -20,13 +39,19 @@ function AlarmListItem(props) {
     media: /*#__PURE__*/React.createElement(_Icon, {
       type: "gaojing-3",
       size: "xs",
-      className: styles["alarm-color-icon"] + " alarm-color-icon-lv" + alarmInfo.alertLevel
+      className: styles['alarm-color-icon'] + " alarm-color-icon-lv" + alarmInfo.alertLevel
     })
-  }, /*#__PURE__*/React.createElement("span", {
-    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+    className: styles.list,
+    onClick: function onClick() {
+      getNode(topo, alarmInfo);
+    }
+  }, "" + alarmInfo.alertObject + alarmInfo.alertTitle), /*#__PURE__*/React.createElement("div", {
+    className: styles.listLink
   }, /*#__PURE__*/React.createElement(Link, {
+    onClick: onClick,
     to: alarmLink(alarmInfo)
-  }, "" + alarmInfo.alertObject + alarmInfo.alertTitle)));
+  }, "\u67E5\u770B\u8BE6\u60C5"))));
 }
 
 function RiskListItem(props) {
@@ -44,13 +69,19 @@ function RiskListItem(props) {
     media: /*#__PURE__*/React.createElement(_Icon, {
       type: "Overall_risk_full",
       size: "xs",
-      className: styles["alarm-color-icon"] + " alarm-color-icon-lv2"
+      className: styles['alarm-color-icon'] + " alarm-color-icon-lv2"
     })
-  }, /*#__PURE__*/React.createElement("span", {
-    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+    className: styles.list,
+    onClick: function onClick() {
+      getNode(topo, alarmInfo);
+    }
+  }, " ", "" + alarmInfo.ciName + alarmInfo.itemName), /*#__PURE__*/React.createElement("div", {
+    className: styles.listLink
   }, /*#__PURE__*/React.createElement(Link, {
+    onClick: onClick,
     to: riskLink(alarmInfo)
-  }, "" + alarmInfo.ciName + alarmInfo.itemName)));
+  }, "\u67E5\u770B\u8BE6\u60C5"))));
 }
 
 function ListItem(props) {

package/es/core/components/AlarmListPanel/components/index.module.scss

@@ -4,4 +4,30 @@
         height: 12px;
         font-size: 12px;
     }
+    :global{
+        .next-list-item-content>span{
+            width: 100%;
+            cursor: pointer;
+        }
+    }
+    
+}
+.list{
+    width: 81%;
+    float: left;
 }
+.listLink{
+    float: right;
+    width: 17%;
+    font-size: 12px;
+    color: #4C89FF;
+    height: 100%;
+    display:flex;
+    :global{
+        a{
+            color: #4C89FF !important;
+            align-self: center;
+          }
+    }
+  
+}

package/es/core/components/AlarmListPanel/index.js

@@ -1,12 +1,12 @@
 import _List from "@alifd/next/es/list";
 import _Button from "@alifd/next/es/button";
 import _Card from "@alifd/next/es/card";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
+import NoDataPage from '@riil-frontend/component-no-data-page';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import AlarmListItem from "./components/AlarmListItem";
-import NoDataPage from "@riil-frontend/component-no-data-page";
 import styles from "./index.module.scss";
 import { alarmListDemo } from "./mocks";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import Link from "../../../components/Link";
 import useAlarmList from "./hooks/useAlarmList";
 
@@ -37,7 +37,10 @@ function AlarmListPanel(props, ref) {
       className: styles.listTitleLink,
       to: "/default/alarmCenter/alarmList"
     }, "\u67E5\u770B\u6240\u6709\u544A\u8B66"))),
-    extra: /*#__PURE__*/React.createElement("a", {
+    extra:
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    React.createElement("a", {
       role: "button",
       "aria-label": "\u5173\u95ED",
       className: "next-dialog-close",
@@ -66,7 +69,8 @@ function AlarmListPanel(props, ref) {
         alarmInfo: item,
         key: index,
         Link: Link,
-        onClick: onClose
+        onClick: onClose,
+        topo: topo
       });
     }
   }))));

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, forwardRef, useMemo } from "react";
-import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import BatchAttrMetricDrawer from "../../../components/BatchAttrMetric";
 /**
@@ -47,28 +46,15 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var saveMarkSetting = function saveMarkSetting(showType, parm, selectType) {
     rlog.debug("saveMarkSetting", showType, parm);
-
-    if (elementType === "node") {
-      onChange({
-        isCustom: true,
-        data: parm
-      });
-    }
-
-    if (elementType === "link") {
-      onChange({
-        isCustom: true,
-        data: parm
-      });
-    }
+    onChange({
+      isCustom: true,
+      data: parm
+    });
   };
 
   useImperativeHandle(ref, function () {
     return {
-      show: openMarkSetting,
-      openGlobalTootipSetting: function openGlobalTootipSetting() {
-        openMarkSetting();
-      }
+      show: openMarkSetting
     };
   });
   var newValue = useMemo(function () {

package/es/core/components/TopoView/TopoView.module.scss

@@ -10,10 +10,6 @@
   flex: 1;
   overflow: hidden;
   position: relative;
-
-  &.viewPanelEditMode {
-    border-top: 1px solid #E6E7EB;
-  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题

package/es/core/components/TopoView/editor.module.scss

@@ -0,0 +1,3 @@
+.borderLine {
+  border-top: 1px solid #E6E7EB;
+}

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

@@ -1,5 +1,6 @@
+import _Box from "@alifd/next/es/box";
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
@@ -18,16 +19,19 @@ import useAlarm from "../../hooks/useAlarm";
 import useRouterAdapter from "../../hooks/useRouterAdapter";
 import { fixLink } from "../../utils/graphLinkUtil";
 import { handleClusterNoPermission, upgradeV103GraphClusterNode } from "../../../utils/clusterUtil";
-import SelectionManager from "../../models/SelectionManager";
+import EditorToolbar from "../../editor/components/Toolbar/EditorToolbar";
+import Sidebar from "../../editor/components/Sidebar/Sidebar";
 import HistoryManager from "../../models/HistoryManager";
 import styles from "./TopoView.module.scss";
+import editorStyles from "./editor.module.scss";
 
 var Topology = function Topology(props) {
-  var _classnames, _graphViewProps$creat;
+  var _classnames;
 
   var topo = props.topo,
       defaultEnterEditMode = props.defaultEnterEditMode,
       titleBar = props.titleBar,
+      toolbar = props.toolbar,
       buildLoadOptions = props.buildLoadOptions,
       onReady = props.onReady,
       onLoaded = props.onLoaded,
@@ -66,9 +70,7 @@ var Topology = function Topology(props) {
       setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
 
 
-  var selectionManager = useMemo(function () {
-    return new SelectionManager(topo);
-  }, []);
+  var selectionManager = topo.selectionManager;
   useRouterAdapter(props);
   var topoEdit = useTopoEdit({
     topo: topo,
@@ -123,7 +125,11 @@ var Topology = function Topology(props) {
     }
   }, []);
   var handleGraphDataLoaded = useCallback(function () {
-    rlog.info('TopoView.handleGraphDataLoaded', topoData, topo.getDataModel().getDatas().toArray());
+    rlog.info('TopoView.handleGraphDataLoaded', new Date().toString(), {
+      topoMod: topo.store.getState().topoMod,
+      topoData: topoData,
+      htElements: topo.getDataModel().getDatas().toArray()
+    });
     upgradeV103GraphClusterNode(topo, topoData);
     fixLink(topo);
     handleClusterNoPermission(topo);
@@ -144,7 +150,11 @@ var Topology = function Topology(props) {
     }
   }, [topoData]);
   var handleGraphLoaded = useCallback(function () {
-    rlog.info('TopoView.handleGraphLoaded', topoData, topo.getDataModel().getDatas().toArray());
+    rlog.info('TopoView.handleGraphLoaded', new Date().toString(), {
+      topoMod: topo.store.getState().topoMod,
+      topoData: topoData,
+      htElements: topo.getDataModel().getDatas().toArray()
+    });
     upgradeV103GraphClusterNode(topo, topoData);
     fixLink(topo);
     handleClusterNoPermission(topo);
@@ -240,6 +250,37 @@ var Topology = function Topology(props) {
     });
   };
 
+  var renderCanvas = function renderCanvas() {
+    var _graphViewProps$creat;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.viewPanel,
+      onKeyDown: function onKeyDown(e) {
+        topo.historyManager && topo.historyManager.handleKeyDown(e);
+      }
+    }, /*#__PURE__*/React.createElement(TopoGraph, _extends({}, graphViewProps, {
+      createHtTopoProps: _extends({}, graphViewProps.createHtTopoProps, {
+        editor: _extends({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
+      }),
+      data: tData,
+      defaultEnterEditMode: defaultEnterEditMode,
+      renderPropertyView: renderPropertyView,
+      renderBackgroundView: renderBackgroundView,
+      onCreate: onGraphCreated,
+      onLoaded: handleGraphLoaded,
+      onDataLoaded: handleGraphDataLoaded,
+      onDestroy: onDestroy,
+      onEvent: handleEvent,
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      debugId: topo.debugId
+    })));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.topoView,
     "data-version": topo.version
@@ -248,32 +289,25 @@ var Topology = function Topology(props) {
     viewerProps: viewerProps,
     onEnterEdit: onEnterEdit,
     topoEditApi: topoEdit
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.viewPanel, (_classnames = {}, _classnames[styles.viewPanelEditMode] = isEditMode, _classnames)),
-    onKeyDown: function onKeyDown(e) {
-      topo.historyManager && topo.historyManager.handleKeyDown(e);
-    }
-  }, /*#__PURE__*/React.createElement(TopoGraph, _extends({}, graphViewProps, {
-    createHtTopoProps: _extends({}, graphViewProps.createHtTopoProps, {
-      editor: _extends({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
-    }),
-    data: tData,
-    defaultEnterEditMode: defaultEnterEditMode,
-    renderPropertyView: renderPropertyView,
-    renderBackgroundView: renderBackgroundView,
-    onCreate: onGraphCreated,
-    onLoaded: handleGraphLoaded,
-    onDataLoaded: handleGraphDataLoaded,
-    onDestroy: onDestroy,
-    onEvent: handleEvent,
-    style: {
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden'
+  })), isEditMode && /*#__PURE__*/React.createElement(EditorToolbar, {
+    topo: topo,
+    topoEdit: topoEdit,
+    topoContext: {
+      urlParams: urlParams
+    },
+    editorProps: editorProps
+  }), /*#__PURE__*/React.createElement(_Box, {
+    direction: "row",
+    flex: 1,
+    className: classnames((_classnames = {}, _classnames[editorStyles.borderLine] = isEditMode, _classnames))
+  }, isEditMode && /*#__PURE__*/React.createElement(Sidebar, {
+    topo: topo,
+    topoEdit: topoEdit,
+    topoContext: {
+      urlParams: urlParams
     },
-    debugId: topo.debugId
-  }))), !isEditMode && /*#__PURE__*/React.createElement(ViewerPlugin, {
+    editorProps: editorProps
+  }), renderCanvas()), !isEditMode && /*#__PURE__*/React.createElement(ViewerPlugin, {
     topo: topo,
     viewerProps: viewerProps,
     topoContext: topoContext

package/es/core/editor/components/Sidebar/Sidebar.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import VerticalIconTab from "../../../../components/VerticalIconTab";
+import LinkPanel from "./views/LinkPanel";
+import ComponentPanel from "./views/ComponentPanel";
+import ImagePanel from "./views/ImagePanel";
+import BackgroundPanel from "./views/BackgroundPanel";
+import CanvasPanel from "./views/CanvasPanel";
+import styles from "./Sidebar.module.scss";
+
+function Sidebar(props) {
+  var topo = props.topo;
+
+  var _useState = useState(null),
+      activeKey = _useState[0],
+      setActivekey = _useState[1];
+
+  var panes = [{
+    title: '链路',
+    key: '1',
+    icon: '/img/topo/editor/sidebar/icon/链路.svg',
+    content: LinkPanel
+  }, {
+    title: '组件',
+    key: '2',
+    icon: '/img/topo/editor/sidebar/icon/组件.svg',
+    content: ComponentPanel
+  }, {
+    title: '图片',
+    key: '3',
+    icon: '/img/topo/editor/sidebar/icon/图片.svg',
+    content: ImagePanel
+  }, {
+    title: '背景',
+    key: '4',
+    icon: '/img/topo/editor/sidebar/icon/背景.svg',
+    content: BackgroundPanel
+  }, {
+    title: '画布',
+    key: '5',
+    icon: '/img/topo/editor/sidebar/icon/画布.svg',
+    content: CanvasPanel
+  }].map(function (item) {
+    var View = item.content;
+    return _extends({}, item, {
+      content: function content() {
+        return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+          topo: topo,
+          active: activeKey === item.key
+        }));
+      }
+    });
+  });
+
+  var renderTabItem = function renderTabItem(pane) {
+    var View = pane.content;
+    return /*#__PURE__*/React.createElement(VerticalIconTab.Item, _extends({
+      key: pane.key
+    }, pane), /*#__PURE__*/React.createElement(View, {
+      topo: topo,
+      active: activeKey === pane.key
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.sidebar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.tabsContainer
+  }, /*#__PURE__*/React.createElement(VerticalIconTab, {
+    activeKey: activeKey,
+    onChange: setActivekey
+  }, panes.map(renderTabItem))));
+}
+
+export default Sidebar;