@riil-frontend/component-topology 2.14.2-alpha.13 → 2.14.2-alpha.18

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

@@ -1,16 +1,131 @@
 import _Table from "@alifd/next/es/table";
 import _Divider from "@alifd/next/es/divider";
+import _Button from "@alifd/next/es/button";
+import _Icon from "@alifd/next/es/icon";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Link } from "react-router-dom";
+import { metricValueFormat } from '@riil-frontend/utils';
+import moment from "moment";
 import { TopoEvent } from '@riil-frontend/component-topology-graph';
 import { findItem } from "../../../../../../../utils/topoData";
+import alertService from '@riil-frontend/component-topology-common/es/services/alert'; // import riskService from '@riil-frontend/component-topology-common/es/services/risk';
+
+import topoService from '@riil-frontend/component-topology-common/es/services/topo';
+import service from "../../../../../../services/overview";
 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"; // 关键指标
+import DictCache from "../../../../../../models/cache/DictCache";
+import styles from "./index.module.scss"; // 基本信息
 
-function indicatorRander(data) {
+function BaseInfoRender(type, data) {
+  if (type === 'link') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles['base-info']
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.item,
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, "\u94FE\u8DEF\u5E26\u5BBD\uFF1A"), /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, data.rated_bandwidth))), /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.item
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, "\u6E90IP\u5730\u5740\uFF1A"), /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, data.source_ipv4)), /*#__PURE__*/React.createElement("div", {
+      className: styles.item
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, "\u76EE\u7684IP\u5730\u5740\uFF1A"), /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, data.destination_ipv4))), /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.item
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, "\u6E90\u63A5\u53E3\uFF1A"), /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, data.source_Interface)), /*#__PURE__*/React.createElement("div", {
+      className: styles.item
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, "\u76EE\u7684\u63A5\u53E3\uFF1A"), /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, data.destination_Interface))));
+  } else {
+    return /*#__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
+    }, data.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
+    }, data.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
+    }, data.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
+    }, data.ciName))), /*#__PURE__*/React.createElement("div", {
+      className: styles.row
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.item,
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, "\u8D44\u6E90\u4F4D\u7F6E\uFF1A"), /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, data.res_address))));
+  }
+} // 关键指标
+
+
+function indicatorRander(type, data) {
   console.log('indicatorRander', data);
+
+  function formatValue(itemData) {
+    var format = metricValueFormat({
+      value: itemData.value,
+      dataType: itemData.dataType,
+      dict: DictCache.getDictObject(),
+      unit: itemData.unit,
+      code: itemData.code
+    });
+    return format.value;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.indicator
   }, /*#__PURE__*/React.createElement("div", {
@@ -21,10 +136,10 @@ function indicatorRander(data) {
       key: item.code
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.content
-    }, item.value ? item.value + item.unit : '暂无数据'), /*#__PURE__*/React.createElement("span", {
+    }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
       className: styles.label
     }, item.name));
-  })), /*#__PURE__*/React.createElement("div", {
+  })), type === 'node' ? /*#__PURE__*/React.createElement("div", {
     className: styles.row
   }, data.slice(3, 6).map(function (item) {
     return /*#__PURE__*/React.createElement("div", {
@@ -32,10 +147,10 @@ function indicatorRander(data) {
       key: item.code
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.content
-    }, item.value ? item.value + item.unit : '暂无数据'), /*#__PURE__*/React.createElement("span", {
+    }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
       className: styles.label
     }, item.name));
-  })));
+  })) : '');
 }
 /**
  * 资源概览
@@ -45,23 +160,35 @@ function indicatorRander(data) {
 export default function ResourceOverview(props) {
   var topo = props.topo,
       id = props.id,
-      ciType = props.ciType;
+      type = props.type,
+      ciType = props.ciType,
+      ciName = props.ciName;
 
   var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
       attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
 
   var _useState = useState({
+    // 资源
     display_name: '',
     // 资源名称/显示名称
     ipv4_address: '',
     // IP地址
     asset_number: '',
     // 资产编号
-    type: '',
+    ciName: '',
     // 资源类型
-    b: '',
+    res_address: '',
     // 资源位置
-    c: '' // 责任人
+    // 链路
+    rated_bandwidth: '',
+    // 链路带宽
+    source_ipv4: '',
+    // 源IP地址
+    destination_ipv4: '',
+    // 目的IP地址
+    source_Interface: '',
+    // 源接口
+    destination_Interface: '' // 目的接口
 
   }),
       baseInfo = _useState[0],
@@ -71,113 +198,281 @@ export default function ResourceOverview(props) {
       indicator = _useState2[0],
       setIndicator = _useState2[1];
 
+  var _useState3 = useState([]),
+      alarmRiskList = _useState3[0],
+      setAlarmRiskList = _useState3[1];
+
   useEffect(function () {
     init();
-  }, [attrsAndMetrics]);
+  }, [attrsAndMetrics, id]);
 
   function init() {
-    var _findItem2, _findItem3, _findItem4, _findItem5;
+    var _topo$options$resourc, _attributeMap$source_, _attributeMap$destina;
+
+    // 指标模型
+    var _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType),
+        modelMetrics = _topo$ciTyeCache$getC.metrics;
+
+    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 _extends({}, item, {
+          value: _metrics[item.code] || ''
+        });
+      }));
+      setAlarmRiskList(alarms || []);
+      return;
+    } // 拓扑（默认） ---------------------------
+    // 基本信息
+
 
-    // 资源-基本信息
     console.log('资源-基本信息------------------------', id, attrsAndMetrics);
 
     var _findItem = findItem(attrsAndMetrics, 'id', id),
-        attributes = _findItem.attributes,
+        attributeMap = _findItem.attributeMap,
         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('attributeMap', attributeMap);
+    var res_address = '-';
 
-    console.log('资源/链路-关键指标------------------------', id, metrics);
+    if (attributeMap.owned_computer_room) {
+      res_address = attributeMap.owned_computer_room + " " + attributeMap.owned_cabinet + " " + attributeMap.start_u_location + "-" + attributeMap.end_u_location;
+    }
 
-    var _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType),
-        modelMetrics = _topo$ciTyeCache$getC.metrics;
+    setBaseInfo({
+      // 资源
+      display_name: attributeMap.display_name || '-',
+      ipv4_address: attributeMap.ipv4_address || '-',
+      asset_number: attributeMap.asset_number || '-',
+      // type: findItem(attributes, 'code', 'type')?.value || '-',
+      ciName: ciName || '-',
+      res_address: res_address,
+      // 链路
+      rated_bandwidth: attributeMap.rated_bandwidth || '-',
+      // 额定带宽
+      // rated_bandwidth:[network_link.actual_bandwidth] || '-',// 实际带宽
+      source_ipv4: attributeMap.source_ipv4 || '-',
+      destination_ipv4: attributeMap.destination_ipv4 || '-',
+      source_Interface: ((_attributeMap$source_ = attributeMap.source_id_object) === null || _attributeMap$source_ === void 0 ? void 0 : _attributeMap$source_.displayName) || '-',
+      destination_Interface: ((_attributeMap$destina = attributeMap.destination_id_object) === null || _attributeMap$destina === void 0 ? void 0 : _attributeMap$destina.displayName) || '-'
+    }); // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
 
-    setIndicator(modelMetrics.slice(0, 6).map(function (item) {
-      var _findItem6;
+    console.log('资源/链路-关键指标------------------------', id, metrics);
+    setIndicator(topModelMetrics.map(function (item) {
+      var _findItem2;
 
       return _extends({}, item, {
-        value: (_findItem6 = findItem(metrics, 'code', item.code)) === null || _findItem6 === void 0 ? void 0 : _findItem6.value
+        value: ((_findItem2 = findItem(metrics, 'code', item.code)) === null || _findItem2 === void 0 ? void 0 : _findItem2.value) || ''
       });
+    })); // 资源-告警/风险
+
+    getAlarmRiskData(id);
+  } // 获取属性信息（应用拓扑）
+
+
+  function getAttribute(_x) {
+    return _getAttribute.apply(this, arguments);
+  } // 获取告警/风险信息
+
+
+  function _getAttribute() {
+    _getAttribute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
+      var res, _ref, attributes, attributeMap, res_address;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return topoService.ciInfo.batchQueryCiInfo({
+                ciId: [{
+                  ciId: id,
+                  operation: 'delete'
+                }],
+                codes: [],
+                relationId: []
+              });
+
+            case 2:
+              res = _context.sent;
+              console.log('应用拓扑 查询结果 res', res);
+              _ref = res[0] || {}, attributes = _ref.attributes;
+              attributeMap = {};
+              attributes.forEach(function (item) {
+                attributeMap[item.code] = item.value;
+              });
+              res_address = '-';
+
+              if (attributeMap.owned_computer_room) {
+                res_address = attributeMap.owned_computer_room + " " + attributeMap.owned_cabinet + " " + attributeMap.start_u_location + "-" + attributeMap.end_u_location;
+              }
+
+              setBaseInfo({
+                // 资源
+                display_name: attributeMap.display_name || '-',
+                ipv4_address: attributeMap.ipv4_address || '-',
+                asset_number: attributeMap.asset_number || '-',
+                ciName: ciName || '-',
+                res_address: res_address
+              });
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
     }));
+    return _getAttribute.apply(this, arguments);
+  }
+
+  function getAlarmRiskData(_x2) {
+    return _getAlarmRiskData.apply(this, arguments);
+  }
+
+  function _getAlarmRiskData() {
+    _getAlarmRiskData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
+      var _yield$alertService$g, alarmList, _yield$service$getRis, riskList;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return alertService.getAlarmByIds({
+                ciIdList: [id],
+                alertStatusList: ['toDeal', 'dealing'],
+                // toDeal: 待处理, dealing：处理中
+                pageNum: 1,
+                pageSize: 10,
+                sortField: "alertLevel",
+                sortOrder: "asc"
+              });
+
+            case 2:
+              _yield$alertService$g = _context2.sent;
+              alarmList = _yield$alertService$g.datas;
+              alarmList = 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/" + record.alertId + "?alertId=" + record.alertId + "&resId=" + record.ciId + "&title=" + record.alertObject,
+                  time: item.createTime,
+                  status: item.status
+                };
+              });
+              _context2.next = 7;
+              return service.getRiskByIds({
+                ciIdList: [id],
+                statusList: ['toDeal', 'dealing'],
+                current: 1,
+                pageSize: 10
+              });
+
+            case 7:
+              _yield$service$getRis = _context2.sent;
+              riskList = _yield$service$getRis.content;
+              riskList = alarmList.map(function (item) {
+                return {
+                  type: 'risk',
+                  icon: 'Overall_risk_full',
+                  className: 'risk-icon',
+                  title: item.itemName,
+                  link: '/default/inspectionTaskList/inspectionReport?title=tomcat(172.17.162.192:8888)&reportId=20&reportTime=1644768602413&reportType=0&reportName=tomcat(172.17.162.192:8888)',
+                  time: ''
+                };
+              });
+              /* {
+                "id": "5815",
+                "executeId": "20",
+                "taskId": "5737",
+                "checkItemId": "5801",
+                "itemName": "tomcat(172.17.162.192:8888)存在运行风险",
+                "itemCode": "m.tomcat_metric_item",
+                "checkType": "速率类风险",
+                "ciId": "00000000aff84a9c",
+                "ciName": "tomcat(172.17.162.192:8888)",
+                "ciTypeCode": "tomcat",
+                "ipAddress": "172.17.162.192",
+                "firstFoundTime": 1644486885000,
+                "processTime": null,
+                "endTime": 1644894567198,
+                "state": 127,
+                "duration": 431239035,
+                "status": "closed",
+                "executeTime": 1644768602413,
+                "viewType": 0
+              } */
+
+              console.log('资源-告警/风险', alarmList, riskList);
+              setAlarmRiskList([].concat(alarmList, riskList));
+
+            case 12:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _getAlarmRiskData.apply(this, arguments);
   }
 
-  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>
-    // ),
-
+    dataIndex: 'alertTitle',
+    key: 'alertTitle',
+    cell: function cell(value, index, record) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon, {
+        type: "gaojing-3",
+        size: "xs",
+        className: styles["alarm-color-icon"] + " alarm-color-icon-lv" + record.alertLevel
+      }), /*#__PURE__*/React.createElement(Link, {
+        to: "/default/pagecenter/alertDetail/view/" + record.alertId + "?alertId=" + record.alertId + "&resId=" + record.ciId + "&title=" + record.alertObject
+      }, "[" + record.alertObject + "] " + value));
+    }
   }, {
     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>
-    // ),
-
+    width: 128,
+    cell: function cell(createTime, index, record) {
+      return /*#__PURE__*/React.createElement("div", {
+        title: moment(createTime).format('YYYY-MM-DD HH:mm')
+      }, moment(createTime).format('YYYY-MM-DD HH:mm'));
+    }
   }, {
     title: '操作',
-    dataIndex: 'alertType',
-    key: 'alertType',
-    width: 64 // cell: (alertType, index, record) => (
-    //   <div title={alertType}>{alertType}</div>
-    // ),
-
+    dataIndex: 'status',
+    key: 'status',
+    width: 64,
+    cell: function cell(status, index, record) {
+      return status === 'toDeal' ? /*#__PURE__*/React.createElement(_Button, {
+        text: true,
+        type: "primary"
+      }, "\u53D7\u7406") : /*#__PURE__*/React.createElement(_Button, {
+        disabled: true,
+        text: true,
+        type: "primary"
+      }, "\u5DF2\u53D7\u7406");
+    }
   }];
-  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", {
@@ -188,51 +483,7 @@ export default function ResourceOverview(props) {
     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", {
+  }, BaseInfoRender(type, baseInfo))), /*#__PURE__*/React.createElement("div", {
     className: styles['block-box']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.title
@@ -242,7 +493,7 @@ export default function ResourceOverview(props) {
     className: styles.body
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.indicator
-  }, indicatorRander(indicator)))), /*#__PURE__*/React.createElement("div", {
+  }, indicatorRander(type, indicator)))), /*#__PURE__*/React.createElement("div", {
     className: styles['block-box']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.title
@@ -255,7 +506,7 @@ export default function ResourceOverview(props) {
   }, /*#__PURE__*/React.createElement(_Table, {
     hasBorder: false,
     columns: columns,
-    dataSource: dataSource,
+    dataSource: alarmRiskList,
     emptyContent: /*#__PURE__*/React.createElement(NoDataPage, {
       type: "table"
     })

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

@@ -67,7 +67,18 @@
       }
     }
   }
-  .alarm{
+  .alarm {
     margin-top: 12px;
+    .alarm-color-icon {
+      width: 12px;
+      height: 12px;
+      font-size: 12px;
+      margin-right: 4px;
+    }
+    :global {
+      .#{$css-prefix}btn-helper{
+        vertical-align: baseline;
+      }
+    }
   }
 }