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

package/es/core/models/common/Alarm.js

@@ -119,7 +119,7 @@ var Alarm = /*#__PURE__*/function () {
 
   _proto.hmGetTopoAlarm = /*#__PURE__*/function () {
     var _hmGetTopoAlarm = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
-      var _this$topoApp$store$g, data, resAndMetrics, topoData, _this$getState, alarmIsOpened, alarmOpening, linkDynamicStyleDispatcher, nodes, links, alarmCiDoc, cids, componentIds, ids, idsx, endTime, startTime, parms, result;
+      var _this$topoApp$store$g, data, resAndMetrics, topoData, _this$getState, alarmIsOpened, alarmOpening, linkDynamicStyleDispatcher, alarmCiDoc, cids, componentIds, ids, idsx, endTime, startTime, parms, result;
 
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
@@ -127,20 +127,20 @@ var Alarm = /*#__PURE__*/function () {
             case 0:
               _this$topoApp$store$g = this.topoApp.store.getState().topoMod, data = _this$topoApp$store$g.data, resAndMetrics = _this$topoApp$store$g.resAndMetrics, topoData = _this$topoApp$store$g.topoData;
               _this$getState = this.getState(), alarmIsOpened = _this$getState.alarmIsOpened, alarmOpening = _this$getState.alarmOpening;
-              linkDynamicStyleDispatcher = this.topoApp.store.getModel("linkDynamicStyle")[1];
-              nodes = data.nodes, links = data.links;
+              linkDynamicStyleDispatcher = this.topoApp.store.getModel("linkDynamicStyle")[1]; // const { nodes, links } = data;
+
               alarmCiDoc = resAndMetrics.alarmCiDoc;
               rlog.debug("获取告警列表--resAndMetrics,topoData,data", this.topoApp, resAndMetrics, topoData, data);
               cids = Object.keys(alarmCiDoc);
-              _context2.next = 9;
+              _context2.next = 8;
               return topoService.getCisComponentIds(cids);
 
-            case 9:
+            case 8:
               componentIds = _context2.sent;
               ids = [].concat(cids);
               idsx = Object.keys(componentIds).map(function (k) {
                 ids = [].concat(ids, componentIds[k]);
-                return '';
+                return "";
               });
               rlog.debug("获取告警列表", componentIds, alarmCiDoc, ids);
               endTime = null; //new Date().valueOf();
@@ -163,7 +163,7 @@ var Alarm = /*#__PURE__*/function () {
               };
 
               if (!(ids.length === 0)) {
-                _context2.next = 19;
+                _context2.next = 18;
                 break;
               }
 
@@ -173,11 +173,11 @@ var Alarm = /*#__PURE__*/function () {
               });
               return _context2.abrupt("return");
 
-            case 19:
-              _context2.next = 21;
+            case 18:
+              _context2.next = 20;
               return topoService.getAlarmByIds(parms);
 
-            case 21:
+            case 20:
               result = _context2.sent;
               rlog.debug("getAlarmById-result", result); // if (alarmIsOpened) {
               //   //this.topoApp.loadAlarm(result.datas);
@@ -189,7 +189,7 @@ var Alarm = /*#__PURE__*/function () {
                 alarmPanelIsOpen: result.datas.length > 0
               });
 
-            case 24:
+            case 23:
             case "end":
               return _context2.stop();
           }
@@ -216,7 +216,7 @@ var Alarm = /*#__PURE__*/function () {
     var _openTopoAlarm = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
       var _this = this;
 
-      var _this$getState2, alarmOpening, topoAlarmIsOpen;
+      var _this$getState2, alarmOpening, topoAlarmIsOpen, alarmDispatchers;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -237,10 +237,15 @@ var Alarm = /*#__PURE__*/function () {
               this.updateState({
                 alarmOpening: true
               });
-              _context3.next = 7;
+              alarmDispatchers = this.topoApp.store.getModelDispatchers("topoAlarm");
+              _context3.next = 8;
+              return alarmDispatchers.resetAlarmDoc();
+
+            case 8:
+              _context3.next = 10;
               return topoService.openTopoAlarm(id);
 
-            case 7:
+            case 10:
               // rlog.debug("openTopoAlarm 获取初始化告警-------------------开始");
               EE.on("topo", "topo", function (data, other) {
                 rlog.debug("openTopoAlarm 获取初始化告警------收到信息", data);
@@ -252,7 +257,7 @@ var Alarm = /*#__PURE__*/function () {
                 alarmIsOpened: true
               });
 
-            case 9:
+            case 12:
             case "end":
               return _context3.stop();
           }
@@ -394,33 +399,31 @@ var Alarm = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _getAlarmByEE = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(alertData) {
-      var _this$getState4, alarmIsOpened, alarmOpening, bizState, bizDispatchers, alarmDispatchers, linkDynamicStyleDispatcher, al, alarmList;
+      var _this$getState4, alarmIsOpened, resAndMetrics, resIdsList, alarmCiDoc, alarmDispatchers, linkDynamicStyleDispatcher, sendAl, alarmList;
 
       return _regeneratorRuntime.wrap(function _callee7$(_context7) {
         while (1) {
           switch (_context7.prev = _context7.next) {
             case 0:
-              _this$getState4 = this.getState(), alarmIsOpened = _this$getState4.alarmIsOpened, alarmOpening = _this$getState4.alarmOpening; // const { viewState } = this.topoApp.store.getState().topoMod;
-
-              bizState = this.topoApp.store.getState().topoBizMod;
-              bizDispatchers = this.topoApp.store.getModelDispatchers("topoBizMod");
+              _this$getState4 = this.getState(), alarmIsOpened = _this$getState4.alarmIsOpened;
+              resAndMetrics = this.topoApp.store.getState().topoMod.resAndMetrics;
+              resIdsList = resAndMetrics.resIdsList, alarmCiDoc = resAndMetrics.alarmCiDoc;
               alarmDispatchers = this.topoApp.store.getModelDispatchers("topoAlarm");
               linkDynamicStyleDispatcher = this.topoApp.store.getModelDispatchers("linkDynamicStyle"); // 添加事件
-              // const { type, data: alertData } = data;
 
-              console.log("getAlarmByEE", alertData, this.topoApp.store);
+              console.log("getAlarmByEE-接收到推送的原始告警信息", alertData);
 
               if (!isAvailableArray(alertData)) {
-                _context7.next = 14;
+                _context7.next = 15;
                 break;
               }
 
-              rlog.debug("useAlarm.getAlarmByEE 告警原始数据", alertData);
-              al = alertData.map(function (item, index) {
+              sendAl = [];
+              alertData.map(function (item, index) {
                 var _item$resourceId;
 
                 var ciId = (_item$resourceId = item.resourceId) !== null && _item$resourceId !== void 0 ? _item$resourceId : item.ciId;
-                return {
+                var obj = {
                   id: ciId,
                   level: item.alertLevel,
                   alertId: item.alertId,
@@ -428,16 +431,27 @@ var Alarm = /*#__PURE__*/function () {
                   obj: item,
                   info: item.alertType
                 };
+
+                if (resIdsList.indexOf(ciId) >= 0) {
+                  sendAl.push(obj);
+                }
+
+                return obj;
               }); // rlog.debug("before-combAlarmData", al, bizState);
 
-              _context7.next = 11;
+              if (!(sendAl.length > 0)) {
+                _context7.next = 15;
+                break;
+              }
+
+              rlog.debug("过滤掉非本拓扑的告警信息 告警开关-推送告警到ht-alarmIsOpened-sendAl", alarmIsOpened, sendAl);
+              _context7.next = 13;
               return alarmDispatchers.combAlarmData({
-                alarmdata: al
+                alarmdata: sendAl
               });
 
-            case 11:
+            case 13:
               alarmList = _context7.sent;
-              rlog.debug("useAlarm.getAlarmByEE 推送告警到ht", alarmIsOpened, alarmList, bizState);
 
               if (alarmIsOpened) {
                 this.topoApp.loadAlarm(alarmList);
@@ -446,7 +460,7 @@ var Alarm = /*#__PURE__*/function () {
                 linkDynamicStyleDispatcher.execute();
               }
 
-            case 14:
+            case 15:
             case "end":
               return _context7.stop();
           }

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

@@ -2,7 +2,11 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import topoService from '@riil-frontend/component-topology-common/es/services/topo';
-import { findItem } from "../../../utils/topoData";
+var interfaceTypeMap = {
+  'network.interface': {
+    displayName: '网络接口'
+  }
+};
 export function mergeLinksData(links, relationDetails) {
   var relationDoc = {};
   relationDetails.map(function (item, index) {
@@ -12,10 +16,18 @@ export function mergeLinksData(links, relationDetails) {
   });
   return links.map(function (link) {
     var relation = relationDoc[link.id];
+
+    var attributes = _extends({}, relation === null || relation === void 0 ? void 0 : relation.attributes); // 接口翻译
+
+
     return _extends({}, link, {
       ciType: relation === null || relation === void 0 ? void 0 : relation.typeCode,
-      ciId: relation.id,
       name: relation === null || relation === void 0 ? void 0 : relation.attributes.name,
+      attributes: _extends({}, attributes, {
+        source_type_object: interfaceTypeMap[attributes.source_type],
+        destination_type_object: interfaceTypeMap[attributes.destination_type]
+      }),
+      ciId: relation.id,
       detail: relation
     });
   });

package/es/core/utils/exportData.js

@@ -0,0 +1,33 @@
+import { getRequest } from '@riil-frontend/component-topology-common/es/utils/request';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+export default function (topo) {
+  var _topo$store$getModelS = topo.store.getModelState('topoMod').data,
+      nodes = _topo$store$getModelS.nodes,
+      links = _topo$store$getModelS.links;
+  var params = {
+    id: topo.id,
+    'nodes': nodes.map(function (node) {
+      var element = topo.getDataModel().getDataByTag(node.id);
+      return {
+        'id': node.id,
+        'imageName': element.a('customName') || element.a('name') || element.getName()
+      };
+    }),
+    'linkes': links.map(function (link) {
+      var id = link.id,
+          source = link.source,
+          target = link.target,
+          interfaceSource = link.interfaceSource,
+          interfaceTarget = link.interfaceTarget;
+      return {
+        id: id,
+        source: source,
+        target: target,
+        interfaceSource: interfaceSource,
+        interfaceTarget: interfaceTarget
+      };
+    })
+  };
+  rlog.error('导出数据', params);
+  getRequest().post('/topo/v1/api/structure/excel', params);
+}

package/es/core/utils/linkPollingAttributesAdapter.js

@@ -0,0 +1,3 @@
+export default (function (first) {
+  ;
+});

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

@@ -0,0 +1,264 @@
+import _Table from "@alifd/next/es/table";
+import _Divider from "@alifd/next/es/divider";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import { findItem } from "../../../../../../../utils/topoData";
+import NoDataPage from '@riil-frontend/component-topology-common/es/components/NoDataPage'; // import ResourceDiplayInfoSetting from './Setting';
+// bimport '@riil-frontend/css/lib/index.scss';
+
+import styles from "./index.module.scss"; // 关键指标
+
+function indicatorRander(data) {
+  console.log('indicatorRander', data);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.indicator
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.row
+  }, data.slice(0, 3).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.item,
+      key: item.code
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, item.value ? item.value + item.unit : '暂无数据'), /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, item.name));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.row
+  }, data.slice(3, 6).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.item,
+      key: item.code
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, item.value ? item.value + item.unit : '暂无数据'), /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, item.name));
+  })));
+}
+/**
+ * 资源概览
+ */
+
+
+export default function ResourceOverview(props) {
+  var topo = props.topo,
+      id = props.id,
+      ciType = props.ciType;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
+      attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
+
+  var _useState = useState({
+    display_name: '',
+    // 资源名称/显示名称
+    ipv4_address: '',
+    // IP地址
+    asset_number: '',
+    // 资产编号
+    type: '',
+    // 资源类型
+    b: '',
+    // 资源位置
+    c: '' // 责任人
+
+  }),
+      baseInfo = _useState[0],
+      setBaseInfo = _useState[1];
+
+  var _useState2 = useState([]),
+      indicator = _useState2[0],
+      setIndicator = _useState2[1];
+
+  useEffect(function () {
+    init();
+  }, [attrsAndMetrics]);
+
+  function init() {
+    var _findItem2, _findItem3, _findItem4, _findItem5;
+
+    // 资源-基本信息
+    console.log('资源-基本信息------------------------', id, attrsAndMetrics);
+
+    var _findItem = findItem(attrsAndMetrics, 'id', id),
+        attributes = _findItem.attributes,
+        metrics = _findItem.metrics;
+
+    console.log('000', findItem(attrsAndMetrics, 'id', id));
+    console.log('111', attributes, findItem(attributes, 'code', 'display_name'));
+    setBaseInfo({
+      display_name: (_findItem2 = findItem(attributes, 'code', 'display_name')) === null || _findItem2 === void 0 ? void 0 : _findItem2.value,
+      ipv4_address: (_findItem3 = findItem(attributes, 'code', 'ipv4_address')) === null || _findItem3 === void 0 ? void 0 : _findItem3.value,
+      asset_number: (_findItem4 = findItem(attributes, 'code', 'asset_number')) === null || _findItem4 === void 0 ? void 0 : _findItem4.value,
+      type: (_findItem5 = findItem(attributes, 'code', 'type')) === null || _findItem5 === void 0 ? void 0 : _findItem5.value
+    }); // 链路-基本信息
+    // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
+
+    console.log('资源/链路-关键指标------------------------', id, metrics);
+
+    var _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType),
+        modelMetrics = _topo$ciTyeCache$getC.metrics;
+
+    setIndicator(modelMetrics.slice(0, 6).map(function (item) {
+      var _findItem6;
+
+      return _extends({}, item, {
+        value: (_findItem6 = findItem(metrics, 'code', item.code)) === null || _findItem6 === void 0 ? void 0 : _findItem6.value
+      });
+    }));
+  }
+
+  var topoBizMod = topo.store.useModelState('topoBizMod');
+  useEffect(function () {
+    console.log('topoBizMod', topoBizMod);
+  }, [topoBizMod]);
+  var columns = [{
+    title: '事件',
+    dataIndex: 'a',
+    key: 'a' // width: 144,
+    // cell: (alertTitle, index, record) => (
+    //   <Link
+    //     to={`/default/pagecenter/${PAGE_TYPE.ALERT_DETAIL}/view/${record.alertId}?alertId=${record.alertId}&resId=${record.ciId}&title=${record.alertObject}`}
+    //   >
+    //     <div title={alertTitle}>{alertTitle}</div>
+    //   </Link>
+    // ),
+
+  }, {
+    title: '时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 128 // cell: (createTime, index, record) => (
+    //   <div title={moment(createTime).format('YYYY-MM-DD HH:mm')}>
+    //     {moment(createTime).format('YYYY-MM-DD HH:mm')}
+    //   </div>
+    // ),
+
+  }, {
+    title: '操作',
+    dataIndex: 'alertType',
+    key: 'alertType',
+    width: 64 // cell: (alertType, index, record) => (
+    //   <div title={alertType}>{alertType}</div>
+    // ),
+
+  }];
+  var dataSource = [{
+    id: 1,
+    a: 12312
+  }, {
+    id: 2,
+    a: 12312
+  }, {
+    id: 3,
+    a: 12312
+  }, {
+    id: 4,
+    a: 12312
+  }, {
+    id: 5,
+    a: 12312
+  }, {
+    id: 6,
+    a: 12312
+  }, {
+    id: 7,
+    a: 12312
+  }, {
+    id: 8,
+    a: 12312
+  }, {
+    id: 9,
+    a: 12312
+  }, {
+    id: 10,
+    a: 12312
+  }];
+
+  function BaseInfo(type, data) {}
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['resource-overview']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['block-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/React.createElement(_Divider, {
+    direction: "ver"
+  }), "\u57FA\u672C\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['base-info']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.row
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.item
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, "\u8D44\u6E90\u540D\u79F0\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, baseInfo.display_name)), /*#__PURE__*/React.createElement("div", {
+    className: styles.item
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, "IP\u5730\u5740\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, baseInfo.ipv4_address))), /*#__PURE__*/React.createElement("div", {
+    className: styles.row
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.item
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, "\u8D44\u4EA7\u7F16\u53F7\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, baseInfo.asset_number)), /*#__PURE__*/React.createElement("div", {
+    className: styles.item
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, "\u8D44\u6E90\u7C7B\u578B\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, baseInfo.type))), /*#__PURE__*/React.createElement("div", {
+    className: styles.row
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.item
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, "\u8D44\u6E90\u4F4D\u7F6E\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, baseInfo.b)), /*#__PURE__*/React.createElement("div", {
+    className: styles.item
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, "\u8D23\u4EFB\u4EBA\uFF1A"), /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, baseInfo.c)))))), /*#__PURE__*/React.createElement("div", {
+    className: styles['block-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/React.createElement(_Divider, {
+    direction: "ver"
+  }), "\u5173\u952E\u6307\u6807"), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.indicator
+  }, indicatorRander(indicator)))), /*#__PURE__*/React.createElement("div", {
+    className: styles['block-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/React.createElement(_Divider, {
+    direction: "ver"
+  }), "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.alarm
+  }, /*#__PURE__*/React.createElement(_Table, {
+    hasBorder: false,
+    columns: columns,
+    dataSource: dataSource,
+    emptyContent: /*#__PURE__*/React.createElement(NoDataPage, {
+      type: "table"
+    })
+  })))));
+}
+;

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

@@ -0,0 +1,73 @@
+@import "~@alifd/next/variables.scss";
+
+.resource-overview {
+  .block-box {
+    color: #78849c;
+    overflow: hidden;
+    .title {
+      height: 20px;
+      line-height: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #4d6277;
+      margin-top: 16px;
+      :global {
+        .#{$css-prefix}divider-ver {
+          height: 1em;
+        }
+      }
+    }
+  }
+  .base-info {
+    margin-top: 16px;
+    .row {
+      display: flex;
+      margin-bottom: 8px;
+      .item {
+        width: 220px;
+        margin-right: 25px;
+      }
+    }
+  }
+  .indicator {
+    width: 525px;
+    margin: 12px 0 8px;
+    .row {
+      display: flex;
+      border-bottom: 1px solid #f2f5fa;
+      &:last-child {
+        border: none;
+      }
+      .item {
+        width: 175px;
+        height: 100px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        border-right: 1px solid #f2f5fa;
+        &:last-child {
+          border: none;
+        }
+        .content {
+          margin-top: 19px;
+          height: 32px;
+          line-height: 32px;
+          font-size: 32px;
+          color: #4d6277;
+        }
+        .label {
+          margin-top: 12px;
+          height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #78849c;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+  .alarm{
+    margin-top: 12px;
+  }
+}