@riil-frontend/component-topology 2.14.2-alpha.2 → 2.14.2-alpha.6

package/es/core/viewer/components/plugins/BaseInfo/index.js

@@ -0,0 +1,127 @@
+import _Drawer from "@alifd/next/es/drawer";
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import _MenuButton from "@alifd/next/es/menu-button";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { TopoEvent } from '@riil-frontend/component-topology-graph'; // import ResourceDiplayInfoSetting from './Setting';
+// bimport '@riil-frontend/css/lib/index.scss';
+
+import styles from "./index.module.scss";
+import ResourceOverview from "./components/ResourceOverview";
+
+function Title(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      type = _ref.type,
+      onChange = _ref.onChange;
+
+  if (type === 'node') {
+    // 查询资源列表
+    var nodes = topo.store.getModelState('topoMod').data.nodes;
+    console.log('查询资源列表', nodes);
+    return /*#__PURE__*/React.createElement(_MenuButton, {
+      text: true,
+      label: name,
+      onItemClick: function onItemClick(key) {
+        return onChange(nodes.find(function (item) {
+          return item.id === key;
+        }) || '');
+      }
+    }, nodes.filter(function (item) {
+      return item.id !== id;
+    }).map(function (item) {
+      return /*#__PURE__*/React.createElement(_MenuButton.Item, {
+        key: item.id
+      }, item.name);
+    }));
+  } else {
+    return name;
+  }
+} // 基本信息
+
+
+function BaseInfo(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
+  var _useState = useState(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = useState({
+    id: '',
+    name: '',
+    type: '',
+    // 类型： node、link
+    ciType: ''
+  }),
+      activeData = _useState2[0],
+      setActiveData = _useState2[1];
+
+  useEffect(function () {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+    return function () {
+      notifier.off(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+    };
+  }, []);
+
+  function openOverview(data) {
+    console.log('openOverview data', data);
+    var id = data.id,
+        name = data.name,
+        type = data.type,
+        ciType = data.ciType;
+    setActiveData({
+      id: id,
+      name: name,
+      type: type,
+      ciType: ciType
+    });
+
+    var _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType),
+        metrics = _topo$ciTyeCache$getC.metrics;
+
+    console.log('openOverview metrics', metrics);
+    topoDispatchers.update({
+      id: id,
+      metricCodes: metrics.slice(0, 6).map(function (item) {
+        return item.code;
+      }) // 需要展示的关键指标 code
+
+    });
+    setVisible(true);
+  }
+
+  function onChangeActive(activeNode) {
+    console.log('activeNode', activeNode);
+    activeNode && openOverview(_extends({}, activeNode, {
+      type: 'node'
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Drawer, {
+    className: styles.baseInfo,
+    closeMode: ['close', 'esc'],
+    visible: visible,
+    title: /*#__PURE__*/React.createElement(Title, _extends({}, activeData, {
+      onChange: onChangeActive
+    })),
+    width: 580,
+    hasMask: false,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, visible && /*#__PURE__*/React.createElement(_Tab, {
+    className: styles.tab
+  }, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8D44\u6E90\u6982\u89C8",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData))))));
+}
+
+;
+export default BaseInfo;

package/es/core/viewer/components/plugins/BaseInfo/index.module.scss

@@ -0,0 +1,24 @@
+@import '~@alifd/next/variables.scss';
+
+.baseInfo {
+  z-index: 1009;
+  :global {
+    .#{$css-prefix}drawer-body {
+      height: calc(100% - 46px);
+      padding: 16px 24px;
+      .#{$css-prefix}tabs-content{
+        height: calc(100% - 31px);
+        overflow: auto;
+      }
+    }
+  }
+  .tab{
+    height: 100%;
+    :global {
+      .#{$css-prefix}tabs-content{
+        height: calc(100% - 31px);
+        overflow: auto;
+      }
+    }
+  }
+}

package/es/core/viewer/components/plugins/ViewerPlugin.js

@@ -3,11 +3,12 @@ import React from 'react';
 import ResourceWebControllUrlSettingDialog from "./ResourceWebControllUrlSettingDialog";
 import ResourceDetailDrawerPlugin from "./ResourceDetail/ResourceDetailDrawerPlugin";
 import MetricPollingPlugin from "./MetricPollingPlugin";
+import BaseInfo from "./BaseInfo";
 export default function ViewerPlugin(props) {
   var topo = props.topo,
       viewerProps = props.viewerProps;
   var store = topo.store;
-  var plugins = [MetricPollingPlugin, ResourceDetailDrawerPlugin, ResourceWebControllUrlSettingDialog].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
+  var plugins = [MetricPollingPlugin, ResourceDetailDrawerPlugin, ResourceWebControllUrlSettingDialog, BaseInfo].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

package/es/core/viewer/components/titlebar/widgets/MoreButtonMenu.js

@@ -4,6 +4,7 @@ import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import useSetDefaultTopo from "../useSetDefaultTopo";
+import exportData from "../../../../utils/exportData";
 export default function MoreButtonMenu(props) {
   var topo = props.topo,
       style = props.style;
@@ -18,6 +19,10 @@ export default function MoreButtonMenu(props) {
     })),
     triggerType: "click"
   }, /*#__PURE__*/React.createElement(_Menu, null, setDefaultTopo.renderMenuItem(), /*#__PURE__*/React.createElement(_Menu.Item, {
+    onClick: function onClick() {
+      exportData(topo);
+    }
+  }, "\u5BFC\u51FA\u6570\u636E"), /*#__PURE__*/React.createElement(_Menu.Item, {
     onClick: function onClick() {
       topo.exportImage();
     }

package/es/getStoreModels.js

@@ -15,6 +15,7 @@ import topoAlarm from "./models/topoAlarm";
 import topoGraphView from "./models/topoGraphView";
 import linkManager from "./models/linkManager";
 import displayConfig from "./models/displayConfig";
+import topoBaseInfoOverview from "./models/topoBaseInfoOverview";
 export default {
   topoMod: topoMod,
   iconManage: iconManage,
@@ -32,5 +33,6 @@ export default {
   topoView: topoView,
   topoGraphView: topoGraphView,
   topoAlarm: topoAlarm,
-  displayConfig: displayConfig
+  displayConfig: displayConfig,
+  topoBaseInfoOverview: topoBaseInfoOverview
 };

package/es/hooks/useAlarm.js

@@ -78,7 +78,7 @@ export default function useAlarm(options) {
               _store$getModelState = store.getModelState("topoMod"), viewState = _store$getModelState.viewState; // 添加事件
 
               type = data.type, alertData = data.data;
-              console.log("getAlarmByEE", type, alertData);
+              console.log("getAlarmByEE-type, alertData", type, alertData);
 
               if (!(viewState === "view" && type === "alarm" && isAvailableArray(alertData))) {
                 _context.next = 12;

package/es/hooks/usePolling.js

@@ -21,6 +21,7 @@ var usePolling = function usePolling(props) {
   var resAndMetrics = bizState.resAndMetrics,
       pollingSwitch = bizState.pollingSwitch;
   var displayConfig = topo.store.useModelState('displayConfig');
+  var resourceOverviewState = topo.store.useModelState('topoBaseInfoOverview');
   var linkDynamicStyleDispatcher = store.useModelDispatchers('linkDynamicStyle');
   var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList; // 轮询hooks
 
@@ -71,7 +72,7 @@ var usePolling = function usePolling(props) {
       rlog.debug('usePolling.useEffect: 结束轮询', resAndMetrics);
       stopPoll();
     };
-  }, [pollingSwitch, resIdsList, displayConfig]);
+  }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
   /**
    * 
    * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标

package/es/models/topoAlarm.js

@@ -18,6 +18,7 @@ export default {
     alarmOpening: false,
     alarmIsOpened: true,
     alarmRecord: [],
+    alarmDoc: {},
     alarmDatas: [],
     alarmPanelIsOpen: false
   },
@@ -30,31 +31,54 @@ export default {
   // 定义处理该模型副作用的函数
   effects: function effects(dispatch) {
     return {
-      // 初始化，统一获取指标和属性
-      combAlarmData: function combAlarmData(conditions, state) {
+      resetAlarmDoc: function resetAlarmDoc(conditions, state) {
         var _this = this;
 
         return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-          var alarmdata, _state$topoAlarm, alarmDoc, alarmRecord, _state$topoMod, resAndMetrics, topoData, resIdsList, alarmCiDoc, doc, record, i, item, rid, obj, sliceTag, alarmList;
-
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
+                case 0:
+                  _this.update({
+                    alarmDoc: {},
+                    alarmRecord: []
+                  });
+
+                  return _context.abrupt("return", 'resetAlarmDoc Over');
+
+                case 2:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      },
+      // 归档处理告警信息
+      combAlarmData: function combAlarmData(conditions, state) {
+        var _this2 = this;
+
+        return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          var alarmdata, _state$topoAlarm, alarmDoc, alarmRecord, _state$topoMod, resAndMetrics, topoData, resIdsList, alarmCiDoc, doc, record, i, item, rid, obj, sliceTag, alarmList;
+
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
                 case 0:
                   alarmdata = conditions.alarmdata;
                   _state$topoAlarm = state.topoAlarm, alarmDoc = _state$topoAlarm.alarmDoc, alarmRecord = _state$topoAlarm.alarmRecord;
                   _state$topoMod = state.topoMod, resAndMetrics = _state$topoMod.resAndMetrics, topoData = _state$topoMod.topoData;
                   resIdsList = resAndMetrics.resIdsList, alarmCiDoc = resAndMetrics.alarmCiDoc;
                   doc = _extends({}, alarmDoc);
-                  rlog.debug("topoAlarmMod.combAlarmData--state", state, _this);
-                  rlog.debug("topoAlarmMod.combAlarmData--alarmdata-resIdsList", conditions.alarmdata, resAndMetrics, resIdsList);
-                  rlog.debug("topoAlarmMod.combAlarmData-alarmDoc, alarmRecord ", alarmDoc, alarmRecord);
-                  record = _.uniq(alarmRecord); // rlog.debug('告警归档', doc, record, alarmRecord);
+                  rlog.debug("topoAlarmMod.combAlarmData--alarmdata-resIdsList", alarmdata, resIdsList); // rlog.debug("topoAlarmMod.combAlarmData-alarmDoc, alarmRecord ", alarmDoc, alarmRecord );
+
+                  record = _.uniq(alarmRecord);
+                  rlog.debug('告警归档-doc, record, alarmRecord', doc, record, alarmRecord);
 
                   for (i = 0; i < alarmdata.length; i++) {
                     item = _extends({}, alarmdata[i]);
                     rid = alarmCiDoc[item.id];
-                    rlog.debug('接到一条告警', item, rid, item.id, item.alertId, item.status);
+                    rlog.debug('处理一条告警', item, rid, item.id, item.alertId, item.status);
 
                     if ((resIdsList || []).indexOf(rid) >= 0) {
                       obj = item.obj;
@@ -79,8 +103,9 @@ export default {
 
                           if (sliceTag >= 0) {
                             doc[rid].splice(sliceTag, 1);
-                          } // rlog.debug('该告警移除状态', sliceTag, doc[item.id]);
+                          }
 
+                          rlog.debug('该告警移除状态', sliceTag, doc[rid], doc);
 
                           if (doc[rid].length === 0) {
                             delete doc[rid];
@@ -88,9 +113,9 @@ export default {
                         }
 
                         record.splice(record.indexOf(obj.alertId), 1);
-                      } else {// rlog.debug('重复告警', item);
+                      } else {
+                        rlog.debug('重复告警', item);
                       }
-                    } else {// rlog.debug('这条告警不属于当前拓扑', resIdsList, item.id);
                     }
                   }
 
@@ -107,21 +132,22 @@ export default {
                     } else {
                       return null;
                     }
-                  }); // rlog.debug('告警归档结束', alarmList, doc, record);
+                  });
+                  rlog.debug('告警归档结束', alarmList, doc, record);
 
-                  _this.update({
+                  _this2.update({
                     alarmDoc: doc,
                     alarmRecord: record
                   });
 
-                  return _context.abrupt("return", _.compact(alarmList));
+                  return _context2.abrupt("return", _.compact(alarmList));
 
                 case 14:
                 case "end":
-                  return _context.stop();
+                  return _context2.stop();
               }
             }
-          }, _callee);
+          }, _callee2);
         }))();
       }
     };

package/es/models/topoBaseInfoOverview.js

@@ -0,0 +1,43 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/**
+ * 拓扑图 基本信息-概览
+ */
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import topoService from '@riil-frontend/component-topology-common/es/services/topo';
+export default {
+  // 定义 model 的初始 state
+  state: {
+    id: '',
+    // 当前 id
+    metricCodes: [] // 当前资源/链路需要的关键指标（模型前6个）
+
+  },
+  // 定义改变该模型状态的纯函数
+  reducers: {
+    update: function update(prevState, payload) {
+      console.log('payload', payload);
+      return _extends({}, prevState, payload);
+    }
+  },
+  // 定义处理该模型副作用的函数
+  effects: function effects(dispatch) {
+    return {
+      init: function init(payload, rootState) {
+        return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      }
+    };
+  }
+};

package/es/models/topoBizMod.js

@@ -173,76 +173,6 @@ export default function (engine) {
         },
 
         /**
-         * 以下内容转移至topoAlarm
-         ** /
-        // async combAlarmData(conditions, state) {
-        //   const { alarmdata } = conditions;
-        //   const { alarmDoc, alarmRecord } = state.topoBizMod;
-        //   const { resIdsList } = state.topoBizMod.resAndMetrics;
-        //   const doc = { ...alarmDoc };
-        //   rlog.debug('topoBizMod.combAlarmData', conditions.alarmdata, resIdsList);
-        //   const record = _.uniq(alarmRecord);
-        //   // rlog.debug('告警归档', doc, record, alarmRecord);
-        //   for (let i = 0; i < alarmdata.length; i++) {
-        //     const item = { ...alarmdata[i] };
-        //     // rlog.debug('接到一条告警', item.id, item.alertId, item.status);
-        //     if ((resIdsList || []).indexOf(item.id) >= 0) {
-        //       const { obj } = item;
-        //       if (record.indexOf(item.alertId) < 0 && item.status === 'toDeal') {
-        //       // rlog.debug('这是一条新告警');
-        //         record.push(item.alertId);
-        //         if (doc.hasOwnProperty(item.id)) {
-        //           if (
-        //             findItem(doc[item.id], 'alertId', item.alertId) === undefined
-        //           ) {
-        //             doc[item.id].push(item);
-        //           }
-        //           doc[item.id] = doc[item.id].sort(sortList);
-        //         } else {
-        //           doc[item.id] = [item];
-        //         }
-        //       } else if (item.status !== 'toDeal') {
-        //       // rlog.debug('该告警移除', item.status, doc[item.id]);
-        //         if (doc.hasOwnProperty(item.id)) {
-        //           const sliceTag = findItemIndex(
-        //             doc[item.id],
-        //             'alertId',
-        //             item.alertId
-        //           );
-        //           if (sliceTag >= 0) {
-        //             doc[item.id].splice(sliceTag, 1);
-        //           }
-        //           // rlog.debug('该告警移除状态', sliceTag, doc[item.id]);
-          //           if (doc[item.id].length === 0) {
-        //             delete doc[item.id];
-        //           }
-        //         }
-          //         record.splice(record.indexOf(obj.alertId), 1);
-        //       } else {
-        //       // rlog.debug('重复告警', item);
-        //       }
-        //     } else {
-        //     // rlog.debug('这条告警不属于当前拓扑', resIdsList, item.id);
-        //     }
-        //   }
-        //   // rlog.debug('准备发送的告警', doc, record);
-        //   const alarmList = Object.keys(doc).map((id) => {
-        //     if (doc[id].length > 0) {
-        //       const alarmObj = doc[id][0];
-        //       // rlog.debug('xxxxxxxxxxxxxxxxxxxx', doc[id][0], alarmObj.status);
-        //       return alarmObj.status === 'toDeal' ? alarmObj : null;
-        //     } else {
-        //       return null;
-        //     }
-        //   });
-        //   // rlog.debug('告警归档结束', alarmList, doc, record);
-        //   this.update({
-        //     alarmDoc: doc,
-        //     alarmRecord: record,
-        //   });
-        //   return _.compact(alarmList);
-        // },
-          /**
         * 设置属性和指标
         * @param attrsAndMetrics
         */

package/es/style.js

@@ -14,29 +14,30 @@ import '@alifd/next/es/select/style';
 import '@riil-frontend/component-riil-rule-tree/es/style';
 import '@alifd/next/es/balloon/style';
 import '@alifd/next/es/drawer/style';
-import '@alifd/next/es/table/style';
-import '@alifd/next/es/grid/style';
-import '@riil-frontend/component-action-tree/es/style';
-import '@riil-frontend/component-table-layout/es/style';
-import '@riil-frontend/hooks/es/style';
 import '@alifd/next/es/loading/style';
 import '@riil-frontend/component-extra-title/es/style';
 import '@riil-frontend/next-collapse/es/style';
 import '@riil-frontend/component-more-buttons-menu/es/style';
 import '@riil-frontend/component-row-delete-ballon/es/style';
+import '@alifd/next/es/grid/style';
 import '@riil-frontend/component-topology-common/es/style';
 import '@riil-frontend/component-common-res-list/es/style';
 import '@riil-frontend/component-no-data-page/es/style';
 import '@alifd/next/es/box/style';
+import '@alifd/next/es/tab/style';
+import '@alifd/next/es/menu-button/style';
+import '@alifd/next/es/table/style';
+import '@alifd/next/es/divider/style';
 import '@alifd/next/es/dropdown/style';
 import '@alifd/next/es/menu/style';
 import '@alifd/next/es/radio/style';
 import '@alifd/next/es/checkbox/style';
+import '@riil-frontend/component-action-tree/es/style';
+import '@riil-frontend/component-table-layout/es/style';
+import '@riil-frontend/hooks/es/style';
 import '@alifd/next/es/search/style';
-import '@alifd/next/es/tab/style';
 import '@alifd/next/es/collapse/style';
 
-import '@alifd/next/es/divider/style';
 import '@alifd/next/es/list/style';
 import '@alifd/next/es/tag/style';
 import '@riil-frontend/component-topology-utils/es/style';