@riil-frontend/component-topology 2.14.2-alpha.21 → 2.14.2-alpha.25

package/lib/core/services/overview.js

@@ -35,6 +35,55 @@ var _default = {
         }
       }, _callee);
     }))();
+  },
+
+  /**
+   * 受理告警
+   * @param {*} params
+   */
+  handleAlarm: function handleAlarm(params) {
+    return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return (0, _request.getRequest)().post('/alert/v1/api/alert/handleAlerts', params);
+
+            case 2:
+              return _context2.abrupt("return", _context2.sent);
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  },
+
+  /**
+   * 获取用户id
+   */
+  getUserId: function getUserId() {
+    return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return (0, _request.getRequest)().post('/auth-ui/v1/api/user/token/checkToken');
+
+            case 2:
+              return _context3.abrupt("return", _context3.sent);
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }))();
   }
 };
 exports["default"] = _default;

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

@@ -7,6 +7,8 @@ exports["default"] = ResourceOverview;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+
 var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
 
 var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
@@ -65,7 +67,8 @@ function BaseInfoRender(type, data) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u94FE\u8DEF\u5E26\u5BBD\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.rated_bandwidth
     }, data.rated_bandwidth))), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].row
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -73,13 +76,15 @@ function BaseInfoRender(type, data) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u6E90IP\u5730\u5740\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.source_ipv4
     }, data.source_ipv4)), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].item
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u76EE\u7684IP\u5730\u5740\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.destination_ipv4
     }, data.destination_ipv4))), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].row
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -87,13 +92,15 @@ function BaseInfoRender(type, data) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u6E90\u63A5\u53E3\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.source_Interface
     }, data.source_Interface)), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].item
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u76EE\u7684\u63A5\u53E3\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.destination_Interface
     }, data.destination_Interface))));
   } else {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -105,13 +112,15 @@ function BaseInfoRender(type, data) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u8D44\u6E90\u540D\u79F0\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.display_name
     }, data.display_name)), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].item
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "IP\u5730\u5740\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.ipv4_address
     }, data.ipv4_address))), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].row
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -119,13 +128,15 @@ function BaseInfoRender(type, data) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u8D44\u4EA7\u7F16\u53F7\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.asset_number
     }, data.asset_number)), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].item
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u8D44\u6E90\u7C7B\u578B\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.ciName
     }, data.ciName))), /*#__PURE__*/_react["default"].createElement("div", {
       className: _indexModule["default"].row
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -136,7 +147,8 @@ function BaseInfoRender(type, data) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _indexModule["default"].label
     }, "\u8D44\u6E90\u4F4D\u7F6E\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
+      className: _indexModule["default"].content,
+      title: data.res_address
     }, data.res_address))));
   }
 } // 关键指标
@@ -153,7 +165,7 @@ function indicatorRander(type, data) {
       unit: itemData.unit,
       code: itemData.code
     });
-    return format.value;
+    return format.value + " " + (format.value === '-' ? '' : format.unit);
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -192,7 +204,8 @@ function ResourceOverview(props) {
       id = props.id,
       type = props.type,
       ciType = props.ciType,
-      ciName = props.ciName;
+      ciName = props.ciName,
+      userId = props.userId;
 
   var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
       attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
@@ -232,6 +245,10 @@ function ResourceOverview(props) {
       alarmRiskList = _useState3[0],
       setAlarmRiskList = _useState3[1];
 
+  var _useState4 = (0, _react.useState)(false),
+      isAppTopo = _useState4[0],
+      setIsAppTopo = _useState4[1];
+
   (0, _react.useEffect)(function () {
     init();
   }, [attrsAndMetrics, id]);
@@ -246,26 +263,11 @@ function ResourceOverview(props) {
     var topModelMetrics = modelMetrics.slice(0, 6);
     console.log('topModelMetrics', topModelMetrics); // 应用拓扑处理
 
-    if ((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData) {
-      var _topo$options$resourc3;
-
-      topo.resourceOverviewDrawer && (topo.resourceOverviewDrawer['refreshData'] = init);
-
-      var _topo$options$resourc2 = (_topo$options$resourc3 = topo.options.resourceOverviewDrawer) === null || _topo$options$resourc3 === void 0 ? void 0 : _topo$options$resourc3.getData({
-        id: id,
-        metrics: topModelMetrics
-      }),
-          _metrics = _topo$options$resourc2.metrics,
-          alarms = _topo$options$resourc2.alarms;
-
-      console.log('应用拓扑 参数获取', _metrics, alarms);
-      getAttribute(id);
-      setIndicator(topModelMetrics.map(function (item) {
-        return (0, _extends2["default"])({}, item, {
-          value: _metrics[item.code] || ''
-        });
-      }));
-      setAlarmRiskList(alarms || []);
+    var isAppTopo = !!((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData);
+    setIsAppTopo(isAppTopo);
+
+    if (isAppTopo) {
+      initAppTopo(topModelMetrics);
       return;
     } // 拓扑（默认） ---------------------------
     // 基本信息
@@ -312,23 +314,89 @@ function ResourceOverview(props) {
     })); // 资源-告警/风险
 
     getAlarmRiskData(id);
+  }
+
+  function initAppTopo(_x) {
+    return _initAppTopo.apply(this, arguments);
   } // 获取属性信息（应用拓扑）
 
 
-  function getAttribute(_x) {
+  function _initAppTopo() {
+    _initAppTopo = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(topModelMetrics) {
+      var _topo$options$resourc2, _alarmList;
+
+      var _yield$topo$options$r, metrics, alarmList;
+
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              console.log('应用拓扑 topo', topo);
+              topo.resourceOverviewDrawer = {
+                refreshData: function refreshData() {
+                  init();
+                }
+              };
+              _context.next = 4;
+              return (_topo$options$resourc2 = topo.options.resourceOverviewDrawer) === null || _topo$options$resourc2 === void 0 ? void 0 : _topo$options$resourc2.getData({
+                id: id,
+                metrics: topModelMetrics
+              });
+
+            case 4:
+              _yield$topo$options$r = _context.sent;
+              metrics = _yield$topo$options$r.metrics;
+              alarmList = _yield$topo$options$r.alarms;
+              console.log('应用拓扑 参数获取', metrics, alarmList);
+              getAttribute(id);
+              setIndicator(topModelMetrics.map(function (item) {
+                return (0, _extends2["default"])({}, item, {
+                  value: metrics[item.code] || ''
+                });
+              }));
+              alarmList = ((_alarmList = alarmList) === null || _alarmList === void 0 ? void 0 : _alarmList.map(function (item) {
+                return {
+                  type: 'alarm',
+                  icon: 'gaojing-3',
+                  className: "alarm-color-icon-lv" + item.alertLevel,
+                  title: "[" + item.alertObject + "] " + item.alertTitle,
+                  link: "/default/pagecenter/alertDetail/view/" + item.alertId + "?alertId=" + item.alertId + "&resId=" + item.ciId + "&title=" + item.alertObject,
+                  time: item.createTime,
+                  status: item.status,
+                  params: [{
+                    alertId: item.alertId,
+                    status: "dealing",
+                    userId: userId,
+                    isBaseAlert: false
+                  }]
+                };
+              })) || [];
+              setAlarmRiskList(alarmList);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _initAppTopo.apply(this, arguments);
+  }
+
+  function getAttribute(_x2) {
     return _getAttribute.apply(this, arguments);
   } // 获取告警/风险信息
 
 
   function _getAttribute() {
-    _getAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(id) {
+    _getAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(id) {
       var res, _ref, attributes, attributeMap, res_address;
 
-      return _regenerator["default"].wrap(function _callee$(_context) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
+              _context2.next = 2;
               return _topo["default"].ciInfo.batchQueryCiInfo({
                 ciId: [{
                   ciId: id,
@@ -339,7 +407,7 @@ function ResourceOverview(props) {
               });
 
             case 2:
-              res = _context.sent;
+              res = _context2.sent;
               console.log('应用拓扑 查询结果 res', res);
               _ref = res[0] || {}, attributes = _ref.attributes;
               attributeMap = {};
@@ -363,27 +431,27 @@ function ResourceOverview(props) {
 
             case 10:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     }));
     return _getAttribute.apply(this, arguments);
   }
 
-  function getAlarmRiskData(_x2) {
+  function getAlarmRiskData(_x3) {
     return _getAlarmRiskData.apply(this, arguments);
   }
 
   function _getAlarmRiskData() {
-    _getAlarmRiskData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(id) {
+    _getAlarmRiskData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(id) {
       var _yield$alertService$g, alarmList, _yield$service$getRis, riskList;
 
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.next = 2;
+              _context3.next = 2;
               return _alert["default"].getAlarmByIds({
                 ciIdList: [id],
                 alertStatusList: ['toDeal', 'dealing'],
@@ -395,8 +463,29 @@ function ResourceOverview(props) {
               });
 
             case 2:
-              _yield$alertService$g = _context2.sent;
+              _yield$alertService$g = _context3.sent;
               alarmList = _yield$alertService$g.datas;
+              //   {
+              //     "alertId": 13548,
+              //     "alertLevel": 3,
+              //     "alertObject": "交换机S2652G_166.18(172.17.166.18)",
+              //     "alertTitle": "CPU",
+              //     "createTime": 1644997596000,
+              //     "ruleId": "154",
+              //     "alertType": "速率类告警",
+              //     "duration": 7871000,
+              //     "ciType": "交换机",
+              //     "ciId": "000000001c52db09",
+              //     "ciName": "S2652G_166.18",
+              //     "processTime": 0,
+              //     "changeTime": null,
+              //     "recoverTime": 0,
+              //     "closeTime": 0,
+              //     "tags": null,
+              //     "status": "toDeal",
+              //     "alertAggInfo": null,
+              //     "hasAuth": null
+              // }
               alarmList = alarmList.map(function (item) {
                 return {
                   type: 'alarm',
@@ -405,10 +494,16 @@ function ResourceOverview(props) {
                   title: "[" + item.alertObject + "] " + item.alertTitle,
                   link: "/default/pagecenter/alertDetail/view/" + item.alertId + "?alertId=" + item.alertId + "&resId=" + item.ciId + "&title=" + item.alertObject,
                   time: item.createTime,
-                  status: item.status
+                  status: item.status,
+                  params: [{
+                    alertId: item.alertId,
+                    status: "dealing",
+                    userId: userId,
+                    isBaseAlert: false
+                  }]
                 };
               });
-              _context2.next = 7;
+              _context3.next = 7;
               return _overview["default"].getRiskByIds({
                 ciIdList: [id],
                 statusList: ['toDeal', 'dealing'],
@@ -417,18 +512,9 @@ function ResourceOverview(props) {
               });
 
             case 7:
-              _yield$service$getRis = _context2.sent;
+              _yield$service$getRis = _context3.sent;
               riskList = _yield$service$getRis.content;
-              riskList = riskList.map(function (item) {
-                return {
-                  type: 'risk',
-                  icon: 'Overall_risk_full',
-                  className: 'risk-icon',
-                  title: item.itemName,
-                  link: "/default/inspectionTaskList/inspectionReport?title=" + item.ciName + "&reportId=20&reportTime=1644768602413&reportType=0&reportName=" + item.ciName,
-                  time: item.firstFoundTime
-                };
-              });
+
               /* {
                 "id": "5815",
                 "executeId": "20",
@@ -450,16 +536,25 @@ function ResourceOverview(props) {
                 "executeTime": 1644768602413,
                 "viewType": 0
               } */
-
+              riskList = riskList.map(function (item) {
+                return {
+                  type: 'risk',
+                  icon: 'Overall_risk_full',
+                  className: 'risk-icon',
+                  title: item.itemName,
+                  link: "/default/inspectionTaskList/inspectionReport?title=" + item.ciName + "&reportId=20&reportTime=1644768602413&reportType=0&reportName=" + item.ciName,
+                  time: item.firstFoundTime
+                };
+              });
               console.log('资源-告警/风险', alarmList, riskList);
               setAlarmRiskList([].concat(alarmList, riskList));
 
             case 12:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return _getAlarmRiskData.apply(this, arguments);
   }
@@ -474,6 +569,7 @@ function ResourceOverview(props) {
         size: "xs",
         className: _indexModule["default"]["alarm-color-icon"] + " " + record.className
       }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+        className: _indexModule["default"].link,
         to: record.link
       }, value));
     }
@@ -496,20 +592,63 @@ function ResourceOverview(props) {
       if (record.type === 'alarm') {
         return status === 'toDeal' ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
           text: true,
-          type: "primary"
+          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 /*#__PURE__*/_react["default"].createElement(_button["default"], {
-          text: true,
-          type: "primary"
-        }, "\u53D6\u6D88\u5173\u6CE8");
+        // return <Button text type="primary" onClick={() => alarmRiskOperation(record.type, record)}>受理</Button>
+        return '';
       }
     }
-  }];
+  }]; // 告警/风险 操作 (受理)
+
+  function alarmRiskOperation(_x4, _x5) {
+    return _alarmRiskOperation.apply(this, arguments);
+  }
+
+  function _alarmRiskOperation() {
+    _alarmRiskOperation = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(type, params) {
+      var res;
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!(type === 'alarm')) {
+                _context4.next = 7;
+                break;
+              }
+
+              _context4.next = 3;
+              return _overview["default"].handleAlarm(params);
+
+            case 3:
+              res = _context4.sent;
+              console.log('告警/风险 操作 res', res);
+
+              _message["default"].success('受理成功');
+
+              if (isAppTopo) {
+                initAppTopo();
+              } else {
+                getAlarmRiskData();
+              }
+
+            case 7:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+    return _alarmRiskOperation.apply(this, arguments);
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]['resource-overview']
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -544,9 +683,9 @@ function ResourceOverview(props) {
     hasBorder: false,
     columns: columns,
     dataSource: alarmRiskList,
-    emptyContent: /*#__PURE__*/_react["default"].createElement(_NoDataPage["default"], {
-      type: "table"
-    })
+    emptyContent: /*#__PURE__*/_react["default"].createElement("div", {
+      className: _indexModule["default"]['no-data']
+    }, "\u6682\u65E0\u6570\u636E")
   })))));
 }
 

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

@@ -26,6 +26,17 @@
       .item {
         width: 220px;
         margin-right: 25px;
+        display: flex;
+        .label {
+          white-space: nowrap;
+        }
+        .content {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #4d6277;
+        }
       }
     }
   }
@@ -75,12 +86,27 @@
       font-size: 12px;
       margin-right: 4px;
     }
+    .link:hover {
+      color: var(--btn-text-primary-color-hover);
+      background-color: transparent;
+      border-color: transparent;
+    }
+    .no-data {
+      font-size: 14px;
+      line-height: 14px;
+      text-align: center;
+      color: #78849c;
+      height: 20px;
+    }
     :global {
-      .#{$css-prefix}btn-helper{
+      .#{$css-prefix}btn-helper {
         vertical-align: baseline;
       }
-      .risk-icon{
-        color: #FF7843;
+      .risk-icon {
+        color: #ff7843;
+      }
+      .#{$css-prefix}table .#{$css-prefix}table-body tr:last-child td {
+        border-bottom: none;
       }
     }
   }