@riil-frontend/component-topology 7.0.0-dev.1 → 7.0.0-dev.2

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+
+var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _BlockBox = _interopRequireDefault(require("./BlockBox"));
+
+var _Link = _interopRequireDefault(require("../../../../../../../components/Link"));
+
+var _overview = _interopRequireDefault(require("../../../../../../services/overview"));
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+// url 处理，UICBB 的地址需截取前缀
+function formatUrl(url) {
+  var _window, _window$location;
+
+  var prefix = '/default/pagecenter';
+
+  if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
+    return url.split(prefix)[1];
+  } else {
+    return url;
+  }
+}
+
+function EventsCard(props) {
+  var alarmRiskList = props.alarmRiskList,
+      closeDetailDrawer = props.closeDetailDrawer,
+      onHandleAlarm = props.onHandleAlarm; // 告警table列配置
+
+  var columns = [{
+    title: '描述',
+    dataIndex: 'title',
+    key: 'title',
+    cell: function cell(value, index, record) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _indexModule["default"]['alarm-title'],
+        title: value,
+        onClick: closeDetailDrawer
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: record.icon,
+        size: "xs",
+        className: _indexModule["default"]['alarm-color-icon'] + " " + record.className
+      }), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        className: _indexModule["default"].link,
+        to: formatUrl(record.link)
+      }, value));
+    }
+  }, {
+    title: '时间',
+    dataIndex: 'time',
+    key: 'time',
+    width: 144,
+    cell: function cell(value, index, record) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        title: (0, _moment["default"])(value).format('YYYY-MM-DD HH:mm:ss')
+      }, (0, _moment["default"])(value).format('YYYY-MM-DD HH:mm:ss'));
+    }
+  }, {
+    title: '操作',
+    dataIndex: 'status',
+    key: 'status',
+    width: 64,
+    cell: function cell(status, index, record) {
+      if (record.type === 'alarm') {
+        return status === 'toDeal' ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
+          text: true,
+          type: "primary",
+          onClick: function onClick() {
+            return alarmRiskOperation(record.type, record.params);
+          }
+        }, "\u53D7\u7406") : /*#__PURE__*/_react["default"].createElement(_button["default"], {
+          disabled: true,
+          text: true,
+          type: "primary"
+        }, "\u5DF2\u53D7\u7406");
+      } else {
+        // return <Button text type="primary" onClick={() => alarmRiskOperation(record.type, record)}>受理</Button>
+        return '';
+      }
+    }
+  }]; // 告警/风险 操作 (受理)
+
+  function alarmRiskOperation(_x, _x2) {
+    return _alarmRiskOperation.apply(this, arguments);
+  }
+
+  function _alarmRiskOperation() {
+    _alarmRiskOperation = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(type, params) {
+      var res;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(type === 'alarm')) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 3;
+              return _overview["default"].handleAlarm(params);
+
+            case 3:
+              res = _context.sent;
+
+              _message["default"].success('受理成功');
+
+              onHandleAlarm();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _alarmRiskOperation.apply(this, arguments);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
+    headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].alarm
+  }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
+    hasBorder: false,
+    fixedHeader: true,
+    columns: columns,
+    maxBodyHeight: "auto",
+    dataSource: alarmRiskList,
+    emptyContent: /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"]['no-data']
+    }, "\u6682\u65E0\u6570\u636E")
+  })));
+}
+
+var _default = EventsCard;
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js

@@ -9,8 +9,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
 
-var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
@@ -51,6 +49,8 @@ var _LinkTopoCard = _interopRequireDefault(require("./components/LinkTopo/LinkTo
 
 var _rlog = require("@riil-frontend/component-topology-utils/lib/rlog");
 
+var _EventsCard = _interopRequireDefault(require("./EventsCard"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -978,18 +978,11 @@ function ResourceOverview(props) {
     },
     data: metric,
     loading: metricInitLoading
-  })), /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
-    headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].alarm
-  }, /*#__PURE__*/_react["default"].createElement(_table["default"], {
-    hasBorder: false,
-    fixedHeader: true,
-    columns: columns,
-    maxBodyHeight: "auto",
-    dataSource: alarmRiskList,
-    emptyContent: /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"]['no-data']
-    }, "\u6682\u65E0\u6570\u636E")
-  }))));
+  })), /*#__PURE__*/_react["default"].createElement(_EventsCard["default"], {
+    alarmRiskList: alarmRiskList,
+    closeDetailDrawer: onClose,
+    onHandleAlarm: function onHandleAlarm() {
+      getAlarmRiskData(id);
+    }
+  }));
 }

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverviewMetric.js

@@ -138,7 +138,7 @@ function ResourceOverviewMetric(props) {
         padding: 0,
         appendPadding: [2, 0],
         smooth: true,
-        tooltip: false,
+        tooltip: true,
         line: {
           color: "l(0) 0:" + hexToRgb(rgbToHex(color).hex, 0.05).rgba + " 0.5:" + color + " 1:" + color,
           size: 2

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss

@@ -1,135 +1,137 @@
 @import "~@alifd/next/variables.scss";
 
 .resource-overview {
-  .base-info {
-    margin-top: 16px;
-    margin-right: -25px;
-    overflow: hidden;
-    .item {
-      width: 220px;
-      max-width: 100%;
-      margin-right: 25px;
-      margin-bottom: 8px;
-      display: flex;
-      float: left;
-      .label {
-        white-space: nowrap;
-      }
-      .content {
-        flex: 1;
+
+}
+
+.base-info {
+  margin-top: 16px;
+  margin-right: -25px;
+  overflow: hidden;
+  .item {
+    width: 220px;
+    max-width: 100%;
+    margin-right: 25px;
+    margin-bottom: 8px;
+    display: flex;
+    float: left;
+    .label {
+      white-space: nowrap;
+    }
+    .content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #4d6277;
+      .link {
+        width: 100%;
+        display: block;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: #4d6277;
-        .link {
-          width: 100%;
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
       }
     }
   }
-  .indicator {
-    width: 525px;
-    margin: 20px 0 12px;
-    display: flex;
-    flex-wrap: wrap;
-    .no-data{
-      width: 100%;
-      height: 120px;
-      line-height: 120px;
-      text-align: center;
+}
+.indicator {
+  width: 525px;
+  margin: 20px 0 12px;
+  display: flex;
+  flex-wrap: wrap;
+  .no-data{
+    width: 100%;
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+  }
+  .item {
+    width: 240px;
+    margin-bottom: 24px;
+    &:nth-child(2n + 1) {
+      margin-right: 24px;
     }
-    .item {
-      width: 240px;
-      margin-bottom: 24px;
-      &:nth-child(2n + 1) {
-        margin-right: 24px;
-      }
-      .title {
-        font-size: 13px;
-        color: #78849c;
-      }
-      .content {
-        margin-top: 10px;
-        font-size: 26px;
-        color: #4d6277;
-      }
-      .chart {
-        margin-top: 16px;
-      }
+    .title {
+      font-size: 13px;
+      color: #78849c;
     }
-    // .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;
-    .alarm-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .content {
+      margin-top: 10px;
+      font-size: 26px;
+      color: #4d6277;
     }
-    .alarm-color-icon {
-      width: 12px;
-      height: 12px;
-      font-size: 12px;
-      margin-right: 4px;
+    .chart {
+      margin-top: 16px;
     }
-    .no-data {
-      font-size: 14px;
-      text-align: center;
-      color: var(--color-text1-4);
-      height: 120px;
-      line-height: 120px;
+  }
+  // .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;
+  .alarm-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .alarm-color-icon {
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+    margin-right: 4px;
+  }
+  .no-data {
+    font-size: 14px;
+    text-align: center;
+    color: var(--color-text1-4);
+    height: 120px;
+    line-height: 120px;
+  }
+  :global {
+    .#{$css-prefix}btn-helper {
+      vertical-align: baseline;
     }
-    :global {
-      .#{$css-prefix}btn-helper {
-        vertical-align: baseline;
-      }
-      .risk-icon {
-        color: #ff7843;
-      }
-      .#{$css-prefix}table .#{$css-prefix}table-body tr:last-child td {
-        border-bottom: none;
-      }
-      // .#{$css-prefix}btn{
-      //   height: 28px !important;
-      // }
+    .risk-icon {
+      color: #ff7843;
     }
+    .#{$css-prefix}table .#{$css-prefix}table-body tr:last-child td {
+      border-bottom: none;
+    }
+    // .#{$css-prefix}btn{
+    //   height: 28px !important;
+    // }
   }
 }
 

package/lib/networkTopo/store/topoCenter.js

@@ -110,22 +110,45 @@ var _default = {
                   });
 
                 case 22:
-                  _context.next = 26;
+                  _context.next = 29;
                   break;
 
                 case 24:
-                  _context.next = 26;
+                  if (!params.selectedElementTag) {
+                    _context.next = 27;
+                    break;
+                  }
+
+                  _context.next = 27;
+                  return dispatch.selection.update({
+                    initSelectionId: params.selectedElementTag
+                  });
+
+                case 27:
+                  _context.next = 29;
                   return dispatch.topoMod.initData((0, _extends2["default"])({}, params, {
                     type: params.type,
                     id: id
                   }));
 
-                case 26:
+                case 29:
                   _this.update({
                     loading: false
+                  }); // 是否打开概览
+
+
+                  if (!params.openResourceOverview) {
+                    _context.next = 33;
+                    break;
+                  }
+
+                  _context.next = 33;
+                  return dispatch.resourceDetail.update({
+                    visible: true,
+                    id: params.openResourceOverview
                   });
 
-                case 27:
+                case 33:
                 case "end":
                   return _context.stop();
               }

package/lib/style.js

@@ -25,9 +25,9 @@ require('@alifd/next/lib/menu/style');
 require('@alifd/next/lib/dialog/style');
 require('@riil-frontend/utils/lib/style');
 require('@riil-frontend/component-riil-event-emitter/lib/style');
+require('@alifd/next/lib/menu-button/style');
 require('@alifd/next/lib/tab/style');
 require('@riil-frontend/component-pager/lib/style');
-require('@alifd/next/lib/menu-button/style');
 require('@alifd/next/lib/loading/style');
 require('@alifd/next/lib/divider/style');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "7.0.0-dev.1",
+  "version": "7.0.0-dev.2",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@7.0.0-dev.1/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@7.0.0-dev.2/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }