@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

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

@@ -26,7 +26,8 @@ import styles from "./index.module.scss";
 import ResourceOverviewMetric from "./ResourceOverviewMetric";
 import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
 import Configurator from "./components/Configurator";
-import { formatMetric } from "../../../../../../models/attributeFormatter"; // url 处理，UICBB 的地址需截取前缀
+import { formatMetric } from "../../../../../../models/attributeFormatter";
+import LinkTopoCard from "./components/LinkTopo/LinkTopoCard"; // url 处理，UICBB 的地址需截取前缀
 
 function formatUrl(url) {
   var _window, _window$location;
@@ -57,7 +58,6 @@ export default function ResourceOverview(props) {
   var resourceOverviewProps = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$resource = viewerProps.resourceDetailProps) === null || _viewerProps$resource === void 0 ? void 0 : _viewerProps$resource.resourceOverviewProps) || {}; // 是否是业务拓扑
 
   var isAppTopo = !!resourceOverviewProps.getData;
-  console.log('resourceOverviewProps', resourceOverviewProps);
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       topoId = _topo$store$useModelS.topoId; // 拓扑id
@@ -112,17 +112,7 @@ export default function ResourceOverview(props) {
       setInitFlag = _useState7[1];
 
   var ciTypeMeta = useMemo(function () {
-    var typeMeta;
-
-    if (ciType === 'network_link') {
-      // 网络链路要按链路类型查询属性、指标
-      var link = topo.dataModel.getDataById(id);
-      var linkConnectType = link.attributes['network_link.connect_type'];
-      typeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
-    } else {
-      typeMeta = topo.ciTyeCache.getCiType(ciType);
-    }
-
+    var typeMeta = topo.ciTyeCache.getCiType(ciType);
     return typeMeta;
   }, [id]);
 
@@ -538,7 +528,7 @@ export default function ResourceOverview(props) {
     _baseInfoColChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(col) {
       var _col;
 
-      var infoData, attributeMap, _iterator, _step, item, value, contentTitle, link, node, _data, _ref2, _ref2$, _item, _attributeMap, object, _object, displayName, attr;
+      var infoData, attributeMap, _iterator, _step, item, value, contentTitle, link, address, owned_computer_room, owned_cabinet, roomLink, node, _data, _ref2, _ref2$, _item, _attributeMap, object, _object, displayName, attr;
 
       return _regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
@@ -568,7 +558,7 @@ export default function ResourceOverview(props) {
 
             case 11:
               if ((_step = _iterator()).done) {
-                _context5.next = 46;
+                _context5.next = 48;
                 break;
               }
 
@@ -576,7 +566,7 @@ export default function ResourceOverview(props) {
               value = formatMetric(attributeMap[item.dataIndex], ciTypeMeta.attributeMap[item.dataIndex]);
               contentTitle = value;
               _context5.t0 = item.dataIndex;
-              _context5.next = _context5.t0 === 'display_name' ? 18 : _context5.t0 === 'ciName' ? 22 : _context5.t0 === 'res_address' ? 25 : _context5.t0 === 'imageName' ? 30 : 34;
+              _context5.next = _context5.t0 === 'display_name' ? 18 : _context5.t0 === 'ciName' ? 22 : _context5.t0 === 'res_address' ? 25 : _context5.t0 === 'imageName' ? 32 : 36;
               break;
 
             case 18:
@@ -586,36 +576,53 @@ export default function ResourceOverview(props) {
                 onClick: onClose
               }, /*#__PURE__*/React.createElement(Link, {
                 className: styles.link,
-                title: attributeMap.display_name || "",
+                title: attributeMap.display_name || '',
                 to: formatUrl(link)
-              }, attributeMap.display_name || "-"));
-              contentTitle = attributeMap.display_name || "-";
-              return _context5.abrupt("break", 35);
+              }, attributeMap.display_name || '-'));
+              contentTitle = attributeMap.display_name || '-';
+              return _context5.abrupt("break", 37);
 
             case 22:
               value = ciTypeMeta.displayName;
               contentTitle = value;
-              return _context5.abrupt("break", 35);
+              return _context5.abrupt("break", 37);
 
             case 25:
               _context5.next = 27;
               return getAddressFormat(attributeMap);
 
             case 27:
-              value = _context5.sent;
-              contentTitle = value;
-              return _context5.abrupt("break", 35);
+              address = _context5.sent;
+              owned_computer_room = attributeMap.owned_computer_room, owned_cabinet = attributeMap.owned_cabinet; // 跳转3D机房定位设备
+
+              if (owned_computer_room && owned_cabinet) {
+                // /visual/room/index_runtime.html?type=preview&room_id=00000000383e3381&rack_id=11&device_id=122
+                roomLink = "/visual/room/index_runtime.html?type=preview&room_id=" + owned_computer_room + "&rack_id=" + owned_cabinet + "&device_id=" + id;
+                value = /*#__PURE__*/React.createElement("span", {
+                  onClick: onClose
+                }, /*#__PURE__*/React.createElement(Link, {
+                  className: styles.link,
+                  title: address,
+                  to: roomLink,
+                  target: "_blank"
+                }, address));
+              } else {
+                value = address;
+              }
 
-            case 30:
+              contentTitle = address;
+              return _context5.abrupt("break", 37);
+
+            case 32:
               node = topo.getDataModel().getDataByTag(id);
               value = (node === null || node === void 0 ? void 0 : node.a('customName')) || (node === null || node === void 0 ? void 0 : node.a('name')) || '-';
               contentTitle = value;
-              return _context5.abrupt("break", 35);
+              return _context5.abrupt("break", 37);
 
-            case 34:
-              return _context5.abrupt("break", 35);
+            case 36:
+              return _context5.abrupt("break", 37);
 
-            case 35:
+            case 37:
               // 拿翻译字段属性数据
               if (attributeMap[item.dataIndex] && attributeMap[item.dataIndex + ".name"]) {
                 value = attributeMap[item.dataIndex + ".name"];
@@ -651,15 +658,15 @@ export default function ResourceOverview(props) {
                 contentTitle: contentTitle
               }));
 
-            case 44:
+            case 46:
               _context5.next = 11;
               break;
 
-            case 46:
+            case 48:
               settBaseInfoInitLoading(false);
               setBaseInfo(infoData);
 
-            case 48:
+            case 50:
             case "end":
               return _context5.stop();
           }
@@ -676,7 +683,7 @@ export default function ResourceOverview(props) {
 
   function _getAttribute() {
     _getAttribute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(id) {
-      var res, _ref3, attributes;
+      var _yield$resourceOvervi2, baseInfos, res, _ref3, attributes;
 
       return _regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
@@ -690,25 +697,46 @@ export default function ResourceOverview(props) {
               return _context6.abrupt("return");
 
             case 2:
-              _context6.next = 4;
+              if (!(resourceOverviewProps !== null && resourceOverviewProps !== void 0 && resourceOverviewProps.getData)) {
+                _context6.next = 9;
+                break;
+              }
+
+              _context6.next = 5;
+              return resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.getData({
+                id: id
+              });
+
+            case 5:
+              _yield$resourceOvervi2 = _context6.sent;
+              baseInfos = _yield$resourceOvervi2.baseInfos;
+
+              if (!baseInfos) {
+                _context6.next = 9;
+                break;
+              }
+
+              return _context6.abrupt("return", baseInfos);
+
+            case 9:
+              _context6.next = 11;
               return service.commonQueryCiData({
                 condition: "id('" + id + "')",
                 refAttribute: true,
                 orders: [{
-                  name: "CREATED_TIME",
-                  type: "asc"
+                  name: 'CREATED_TIME',
+                  type: 'asc'
                 }],
                 pageIndex: 1,
-                pageSize: 100000
+                pageSize: 10
               });
 
-            case 4:
+            case 11:
               res = _context6.sent;
-              console.log('getAttribute res', res);
               _ref3 = (res === null || res === void 0 ? void 0 : res.data[0]) || {}, attributes = _ref3.attributes;
-              return _context6.abrupt("return", attributes);
+              return _context6.abrupt("return", attributes || {});
 
-            case 8:
+            case 14:
             case "end":
               return _context6.stop();
           }
@@ -819,7 +847,7 @@ export default function ResourceOverview(props) {
         return item.dataIndex;
       });
     } else if (type === 'link') {
-      baseInfo = ['display_name', 'network_link.actual_bandwidth', 'network_link.source_ipv4', 'network_link.destination_ipv4', 'network_link.connect_type'];
+      baseInfo = ['display_name', 'network_link.actual_bandwidth', 'network_link.source_ipv4', 'network_link.destination_ipv4'];
       keyIndicators = metricCol.slice(0, 3).map(function (item) {
         return item.dataIndex;
       });
@@ -886,7 +914,15 @@ export default function ResourceOverview(props) {
         onChange: baseInfoColChange
       }));
     }
-  })), /*#__PURE__*/React.createElement(BlockBox, {
+  })), ciType === 'network_link' ? /*#__PURE__*/React.createElement(LinkTopoCard, {
+    data: data,
+    topoId: topoId,
+    metricCol: metricCol,
+    metricColChange: metricColChange,
+    metricCodes: metric.map(function (item) {
+      return item.code;
+    })
+  }) : /*#__PURE__*/React.createElement(BlockBox, {
     headerTitle: "\u5173\u952E\u6307\u6807",
     headerExtra: /*#__PURE__*/React.createElement(Configurator, {
       topoId: topoId,

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

@@ -68,7 +68,6 @@ export default function ResourceOverviewMetric(props) {
     var code = itemData.code,
         metricItem = itemData.metricItem,
         list = itemData.list;
-    console.log('formatValue', itemData);
     var format = metricValueFormat({
       value: (_list = list[list.length - 1]) === null || _list === void 0 ? void 0 : _list.metricValue,
       dataType: metricItem.dataType,
@@ -90,9 +89,9 @@ export default function ResourceOverviewMetric(props) {
         value: item.metricValue == -2 ? null : Number(item.metricValue)
       };
     });
-  }
+  } // console.log('ResourceOverviewMetric', data);
+
 
-  console.log('ResourceOverviewMetric', data);
   var content;
 
   if (data.length) {

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/Configurator/index.js

@@ -33,8 +33,8 @@ function Configurator(props) {
       type = props.type,
       max = props.max,
       _props$btnStyle = props.btnStyle,
-      btnStyle = _props$btnStyle === void 0 ? {} : _props$btnStyle;
-  console.log('Configurator props', props);
+      btnStyle = _props$btnStyle === void 0 ? {} : _props$btnStyle; // console.log('Configurator props', props);
+
   var buttonRef = useRef(null);
 
   var _useState = useState(false),

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import CrucialLinkTopo from '@riil-frontend/component-crucial-link-topo';
+import { request, getHistory } from '@riil-frontend/component-topology-utils';
+import useMetricPolling from "./hooks/useMetricPolling";
+import styles from "./LinkTopo.module.scss";
+export default function LinkTopo(props) {
+  var data = props.data,
+      linkMetricCodes = props.linkMetricCodes;
+  var metricData = useMetricPolling({
+    linkCi: data,
+    linkMetricCodes: linkMetricCodes
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(CrucialLinkTopo, _extends({
+    request: request,
+    data: data // 链路ci数据
+    ,
+    isNarrow: true,
+    jumpto: getHistory().push
+  }, metricData)));
+}

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.module.scss

@@ -0,0 +1,11 @@
+.container {
+  width: 100%;
+  height: 100%;
+  min-height: 250px;
+  position: relative;
+  .floatBox{
+    position: absolute;
+    top:50px;
+    left: 40px;
+  }
+}

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import BlockBox from "../../BlockBox";
+import Configurator from "../Configurator";
+import LinkTopo from "./LinkTopo";
+export default function LinkTopoCard(props) {
+  var _data$attributes;
+
+  var topoId = props.topoId,
+      data = props.data,
+      defaultCols = props.defaultCols,
+      metricCol = props.metricCol,
+      metricColChange = props.metricColChange,
+      metricCodes = props.metricCodes; // eslint-disable-next-line camelcase
+
+  var supportTemplates = (data === null || data === void 0 ? void 0 : (_data$attributes = data.attributes) === null || _data$attributes === void 0 ? void 0 : _data$attributes.support_templates) || ''; // 该资源监控模板
+
+  var isCrucial = data === null || data === void 0 ? void 0 : data.attributes['network_link.is_crucial'];
+  return /*#__PURE__*/React.createElement(BlockBox, {
+    headerTitle: "\u8FD0\u884C\u60C5\u51B5",
+    headerExtra: /*#__PURE__*/React.createElement(Configurator, {
+      topoId: topoId,
+      templateCode: supportTemplates,
+      type: "keyIndicators" // 关键链路默认展示的指标展示【端到端ping时延】和【端到端ping丢包率】
+      ,
+      defaultCol: isCrucial ? ['remote_ping_delayed', 'remote_ping_discards_rate'] : [],
+      max: 5,
+      columns: metricCol,
+      onChange: metricColChange
+    })
+  }, /*#__PURE__*/React.createElement(LinkTopo, {
+    data: data,
+    linkMetricCodes: metricCodes
+  }));
+}

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/constants.js

@@ -0,0 +1,6 @@
+export var INTERFACE_METRIC_CODES = ['out_rate', // 发送速率、接收速率发送接收利用率、总错包数
+'out_bandwidth_utilization', // 发送带宽利用率
+'in_rate', // 接收速率
+'in_bandwidth_utilization', // 接收带宽利用率
+'total_errors_packets' // 总错包数
+];

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { useRequest } from 'ahooks';
+import { queryLinkInterfacesLatestMetrics, queryLinkLatestMetrics } from "../services"; // 资源节点上方色块展示资源的发送速率发送带宽利用率、接收速率发送接收利用率、总错包数
+
+export default function useMetricPolling(_ref) {
+  var linkCi = _ref.linkCi,
+      linkMetricCodes = _ref.linkMetricCodes;
+  var linkId = linkCi.id;
+
+  var _useState = useState({
+    sourceMetrics: null,
+    destinationMetrics: null,
+    // 链路指标列表
+    linkMetrics: []
+  }),
+      data = _useState[0],
+      setData = _useState[1]; // 轮询hooks
+
+
+  var queryLinkMetricsRequest = useRequest(queryLinkLatestMetrics, {
+    pollingInterval: 1000 * 15,
+    pollingWhenHidden: false,
+    debounceInterval: 200,
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      setData(_extends({}, data, {
+        linkMetrics: result
+      }));
+      console.info('链路拓扑指标轮询', result);
+    }
+  });
+  var queryInterfaceMetricsRequest = useRequest(queryLinkInterfacesLatestMetrics, {
+    pollingInterval: 1000 * 15,
+    pollingWhenHidden: false,
+    debounceInterval: 200,
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      setData(_extends({}, data, result));
+      console.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 结果', result);
+    }
+  });
+  var linkMetricCodesStr = linkMetricCodes.map(function (item) {
+    return item;
+  }).sort().join(',');
+  useEffect(function () {
+    console.info('链路拓扑指标轮询 切换', {
+      linkCi: linkCi,
+      linkMetricCodes: linkMetricCodes
+    });
+    queryLinkMetricsRequest.run(linkCi, linkMetricCodes);
+    return function () {};
+  }, [linkId, linkMetricCodesStr]);
+  useEffect(function () {
+    console.info('链路拓扑指标轮询 queryInterfaceMetricsRequest 开始', {
+      linkCi: linkCi
+    });
+    queryInterfaceMetricsRequest.run(linkCi);
+    return function () {};
+  }, [linkId]);
+  return data;
+}

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js

@@ -0,0 +1,188 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { formatMetric } from "../../../../../../../../../models/attributeFormatter";
+import ciTypeCache from "../../../../../../../../../models/cache/CiTypeCache";
+import { INTERFACE_METRIC_CODES } from "../constants";
+export function queryAssetModel(_x) {
+  return _queryAssetModel.apply(this, arguments);
+}
+
+function _queryAssetModel() {
+  _queryAssetModel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(code) {
+    var result;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return request.get("/mdc/v1/api/model-asset/" + code);
+
+          case 2:
+            result = _context.sent;
+            return _context.abrupt("return", result);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _queryAssetModel.apply(this, arguments);
+}
+
+export function queryLatestMetrics(_x2) {
+  return _queryLatestMetrics.apply(this, arguments);
+}
+/**
+ * 查询链路及两端接口指标数据
+ * 
+ * @param {*} linkCi 
+ * @param {*} linkMetricCodes 
+ * @returns 
+ */
+
+function _queryLatestMetrics() {
+  _queryLatestMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", request.post('/mdc/v1/api/cmdb/metric/queryLatestMetrics', params));
+
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _queryLatestMetrics.apply(this, arguments);
+}
+
+export function queryLinkLatestMetrics(_x3, _x4) {
+  return _queryLinkLatestMetrics.apply(this, arguments);
+}
+
+function _queryLinkLatestMetrics() {
+  _queryLinkLatestMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(linkCi, linkMetricCodes) {
+    var linkMetrics, resultData;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            rlog.debug('链路拓扑指标轮询 queryLinkLatestMetrics', linkCi, linkMetricCodes);
+
+            if (linkMetricCodes.length) {
+              _context3.next = 3;
+              break;
+            }
+
+            return _context3.abrupt("return", []);
+
+          case 3:
+            _context3.next = 5;
+            return queryLatestMetrics({
+              ciId: [linkCi.id],
+              'metricCode': linkMetricCodes
+            });
+
+          case 5:
+            linkMetrics = _context3.sent;
+            // format
+            resultData = linkMetricCodes.map(function (code) {
+              var _linkMetrics$find;
+
+              var value = (_linkMetrics$find = linkMetrics.find(function (m) {
+                return m.metricCode === code;
+              })) === null || _linkMetrics$find === void 0 ? void 0 : _linkMetrics$find.metricValue;
+              var metricDef = ciTypeCache.getMetric(linkCi.ciType, code);
+              return {
+                code: code,
+                name: metricDef.name,
+                value: formatMetric(value, metricDef) || ''
+              };
+            });
+            return _context3.abrupt("return", resultData);
+
+          case 8:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+  return _queryLinkLatestMetrics.apply(this, arguments);
+}
+
+export function queryLinkInterfacesLatestMetrics(_x5) {
+  return _queryLinkInterfacesLatestMetrics.apply(this, arguments);
+}
+
+function _queryLinkInterfacesLatestMetrics() {
+  _queryLinkInterfacesLatestMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(linkCi) {
+    var _linkCi$attributes, sourceType, sourceId, destinationId, destinationType, typeCodes, queryInterfaceMetricsParam, interfaceMetrics, resultData, parseInterfaceMetrics;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            parseInterfaceMetrics = function _parseInterfaceMetric(subCiId) {
+              var metrics = interfaceMetrics.filter(function (metric) {
+                return metric.subCiId === subCiId;
+              });
+              return INTERFACE_METRIC_CODES.reduce(function (res, code) {
+                var _metrics$find;
+
+                var value = (_metrics$find = metrics.find(function (m) {
+                  return m.metricCode === code;
+                })) === null || _metrics$find === void 0 ? void 0 : _metrics$find.metricValue;
+                var metricDef = ciTypeCache.getMetric(linkCi.ciType, code);
+                var formatValue = formatMetric(value, metricDef);
+                res[code] = formatValue === 'undefined' ? '-' : formatValue;
+                return res;
+              }, {});
+            };
+
+            _linkCi$attributes = linkCi.attributes, sourceType = _linkCi$attributes.source_type, sourceId = _linkCi$attributes.source_id, destinationId = _linkCi$attributes.destination_id, destinationType = _linkCi$attributes.destination_type;
+            rlog.debug('查询链路接口指标', linkCi); // 查询指标模型
+
+            typeCodes = [sourceType];
+            queryInterfaceMetricsParam = {
+              'subCiId': [sourceId],
+              'metricCode': [].concat(INTERFACE_METRIC_CODES)
+            };
+
+            if (destinationId) {
+              queryInterfaceMetricsParam.subCiId.push(destinationId);
+              typeCodes.push(destinationType);
+            }
+
+            _context4.next = 8;
+            return ciTypeCache.load(typeCodes);
+
+          case 8:
+            _context4.next = 10;
+            return queryLatestMetrics(queryInterfaceMetricsParam);
+
+          case 10:
+            interfaceMetrics = _context4.sent;
+            // format
+            resultData = {
+              sourceMetrics: parseInterfaceMetrics(sourceId),
+              destinationMetrics: destinationId ? parseInterfaceMetrics(destinationId) : null
+            };
+            rlog.debug('查询链路接口指标 结果', linkCi);
+            return _context4.abrupt("return", resultData);
+
+          case 14:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+  return _queryLinkInterfacesLatestMetrics.apply(this, arguments);
+}

package/es/core/viewer/components/titlebar/BasicTools.js

@@ -2,7 +2,7 @@ import _Box from "@alifd/next/es/box";
 import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import EditButton from "./widgets/EditButton";
-import NodesDragSwitch from "./widgets/NodesDragSwitch";
+import NodesDragSwitch from "./widgets/NodesDragSwitchWrapper";
 import AlarmListShowButton from "./widgets/AlarmListShowButton";
 import SettingButton from "./widgets/SettingButtonWidget";
 import useEventData from "../../../hooks/useEventData";

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import NodesDragSwitch from "./NodesDragSwitch";
+import topoPermissonUtil from "../../../../../utils/topoPermissionUtil";
+export default function NodesDragSwitchWrapper(props) {
+  var topo = props.topo;
+  var store = topo.store;
+
+  var _store$useModel = store.useModel('topoMod'),
+      topoState = _store$useModel[0];
+
+  var topoPermission = topoState.topoPermission;
+
+  if (!topoPermissonUtil.isEditable(topoPermission)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(NodesDragSwitch, props);
+}

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

@@ -1,6 +1,6 @@
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import DisplaySettingDrawer from "../../../../components/DisplaySettingDrawer";
 /**
  * 设置按钮
@@ -17,10 +17,20 @@ export default function SettingButton(props) {
       visible = _useState[0],
       setVisible = _useState[1];
 
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded;
+
   var changeClick = function changeClick() {
     setVisible(true);
   };
 
+  useEffect(function () {
+    if (graphLoaded) {
+      var _topo$viewProps$urlPa;
+
+      setVisible(!!((_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.showSetting));
+    }
+  }, [graphLoaded]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
     style: style,
     onClick: changeClick,