微服务场景下基于监控指标数据按照场景入口自动生成链路数据图实时展示

已于 2024-03-28 15:11:27 修改
阅读量287 收藏 7
点赞数 5
文章标签： 微服务 django pycharm vue.js
于 2024-03-28 15:07:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40012925/article/details/137111191
版权

微服务场景下基于监控指标数据按照场景入口自动生成链路数据图实时展示前后端实现

1 背景

  日常运维工作中，面对日益复杂的交易链路，需要时刻关注生产环境中各个服务组件运行情况，当时随着微服务化后，各个系统的调用关系日趋复杂，难以按照传统方式靠人工进行绘图，获取指标进行实时链路观察，也即是云原生可观测性的实现。
  用到的技术主要是Django、VUE、Element、Antv G6等。

2 效果展示

在这里插入图片描述

3 后端实现逻辑

3.1 前提

  已知后端服务间两两调用关系逻辑，及（A,B）(B,C) (B,D) (C, D) (D,B)等这样的有向图，如何从大量的有向访问关系数据中自动生成按照入口起始服务形成交易链路，并实时展示相关指标。

3.2 生成场景

def queryServerByClient(dbcon, cloudtype, tenant, namespace, client, tplTupleList):
    # tplTupleList存放根据1个client查询所有相关的调用关系
    sql = "select distinct(server) from tb_trace_info " + \
          " where cloudType = '" + cloudtype + \
          "' and env = 'prod'" + \
          " and tenant = '" + tenant + \
          "' and nameSpace = '" + namespace + \
          "' and client = '" + client + "';"
    if int(dbcon.select(sql)['code']) != 1000:
        return {"code": 500,
                "context": "查询数据库失败"
                }
    else:
        if len(dbcon.select(sql)['context']) == 0:
            return {"code": 600,
                    "context": "查询数据为空"
                    }
    server_res = dbcon.select(sql)['context']
    if len(server_res) == 0:
        return tplTupleList
    else:
        for svc in server_res:
            server = svc[0]
            tpl = (client, server)
            if tpl in tplTupleList:
                break
            else:
                tplTupleList.append(tpl)
                queryServerByClient(dbcon, cloudtype, tenant, namespace, server, tplTupleList)

4 前端实现逻辑

4.1 创建画布高宽并对中英文展示长度处理

      const width = document.getElementById('mountNode').scrollWidth;
      const height = (document.getElementById('mountNode').scrollHeight * 0.8) || 600;
      const fittingString = (str, maxWidth, fontSize) => {
        let currentWidth = 0;
        let res = str;
        const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
        str.split('').forEach((letter, i) => {
          if (currentWidth > maxWidth) return;
          if (pattern.test(letter)) {
            // Chinese charactors
            currentWidth += fontSize;
          } else {
            // get the width of single letter according to the fontSize
            currentWidth += G6.Util.getLetterWidth(letter, fontSize);
          }
          if (currentWidth > maxWidth) {
            res = `${str.substr(0, i)}\n${str.substr(i)}`;
          }
        });
        return res;
      };
      const ICON_MAP = {
        pod: 'src/icons/pod.png',
        service: 'src/icons/service.png',
        trans: 'src/icons/trans.png',
        alarm: 'src/icons/alarm.png',
        useTime: 'src/icons/time.png',
        successRate: 'src/icons/success.png',
      };

4.2 自定义节点样式

// 自定义节点
      G6.registerNode(
          "service", //第一个参数自定义节点的名字
          // 第二个参数是这个节点的图形分组
          {
            draw: function (cfg, group){
              //根据数据动态改变颜色或者图片
              let duration_avg = cfg.statistics.duration_avg>1 ?"#F3FAFF" :"#F3FAFF";
              // let img2=cfg.statistics.duration_avg>1 ?require('../../../../../assets/shouye备份1.png') :require('../../../../../assets/shouye备份.png');
              let alert_num = cfg.statistics.alert_num>20 ?"#F3FAFF" :"#F3FAFF";
              // let img3=cfg.statistics.alert_num>20 ?require('../../../../../assets/a-fuwuqilan2.png') :require('../../../../../assets/fuwuqilan.png');
              let svc_fontsize = 10
              let metric_fontsize = 8
              // 增加一个图像 最外边的虚线框
              let keyShape=group.addShape('rect',{
                // 代表矩形的一些属性
                // 设置节点部署 相对定位，整个节点布局
                attrs:{
                  x: 0,
                  y: 0,
                  width: 130,
                  height: 80,
                  stroke: "#1a66b2",   //描边色
                  fill: "#d7dae0",     //填充颜色
                  radius: 3,
                  lineWidth: 2,
                  lineDash: [2,2]      //设置虚线的样式
                },
                name:"card-node-keyShape" //起个唯一名字便于识别
              });
              // 设置节点上方服务名显示布局
              group.addShape("rect",{
                attrs:{
                  x:5,
                  y:1,
                  width: 120,
                  height:25,
                  //  stroke:"pink",   //描边色
                  fill:"#3d8ad7",
                  radius:3,
                },
                name:"card-node-titleShape"
              });
              // 左上布局
              group.addShape("rect",{    // 指标部分展示
                attrs:{
                  x: 5,
                  y: 29,
                  width: 59,
                  height: 24,
                  //  stroke:"pink",   //描边色
                  fill: "#F3FAFF",
                  radius: 3,
                },
                name:"card-node-countShape"
              });
              // 右上布局
              group.addShape("rect",{    // 指标部分展示
                attrs:{
                  x: 66,
                  y: 29,
                  width: 59,
                  height: 24,
                  fill: duration_avg,
                  radius: 3,
                },
                name:"card-node-timeShape"
              });
              // 左下布局
              group.addShape("rect",{    // 指标部分展示
                attrs:{
                  x: 5,
                  y: 55,
                  width: 59,
                  height: 24,
                  fill: alert_num,
                  radius: 3,
                },
                name:"card-node-alarmShape"
              });
              // 右下布局
              group.addShape("rect",{    // 指标部分展示
                attrs:{
                  x: 66,
                  y: 55,
                  width: 59,
                  height: 24,
                  fill: "#F3FAFF",
                  radius: 3,
                },
                name:"card-node-successShape"
              });
              // 设置服务图标
              group.addShape('image', {
                attrs: {
                  x: 4,
                  y: 2,
                  height: 16,
                  width: 16,
                  cursor: 'pointer',
                  img: ICON_MAP[cfg.nodeType],
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: 'node-icon',
              });
              // 设置服务名称位置
              group.addShape('text',{
                attrs:{
                  text: fittingString(cfg.name,80, 8), //fittingString('Break the line if it is too long', 80, globalFontSize),
                  x: 20,
                  y: 2,
                  fontSize: svc_fontsize,
                  fill: "block",
                  textBaseline: "top"
                },
                name: "card-node-title"
              });
              // 交易量布局
              group.addShape("image",{
                attrs:{
                  x: 5,
                  y: 33,
                  width: 16,
                  height: 16,
                  img: ICON_MAP['trans'],
                },
                name:"card-node-countIco"
              });
              group.addShape("text",{
                attrs:{
                  text:cfg.statistics.trace_num,
                  x: 22,
                  y: 46,
                  fill: "#226DFF",
                  fontSize: metric_fontsize,
                },
                name:"card-node-count",
              });
              // 平均响应时长布局
              group.addShape("image",{
                attrs:{
                  x: 65,
                  y: 33,
                  width: 16,
                  height: 16,
                  img: ICON_MAP['useTime'],
                },
                name:"card-node-timeIco"
              });
              group.addShape("text",{
                attrs:{
                  text:cfg.statistics.duration_avg*1000+"ms",
                  x: 82,
                  y: 46,
                  fill: "#226DFF",
                  fontSize: metric_fontsize,
                },
                name:"card-node-time",
              });
              // 告警数
              group.addShape("image",{
                attrs:{
                  x: 5,
                  y: 57,
                  width: 16,
                  height: 16,
                  img: ICON_MAP['alarm'],
                },
                name:"card-node-alarmIco"
              });
              group.addShape("text",{
                attrs:{
                  text:cfg.statistics.alert_num,
                  x: 22,
                  y: 72,
                  fill: "#226DFF",
                  fontSize: metric_fontsize,
                },
                name:"card-node-alarm",
              });
              // 成功率模块
              group.addShape("image",{
                attrs:{
                  x: 65,
                  y: 57,
                  width: 16,
                  height: 16,
                  img: ICON_MAP['successRate'],
                },
                name:"card-node-successIco"
              });
              group.addShape("text",{
                attrs:{
                  text: cfg.statistics.situation_num + "%",
                  x: 82,
                  y: 72,
                  fill: "#226DFF",
                  fontSize: metric_fontsize,
                },
                name:"card-node-success",
              });
              return keyShape;
            },
          },'rect'); //第三个参数，是如果没有设置样式，会默认继承rect的样式

4.3 对节点或画布双击、单击事件

function clearAllStats() {
          graph.setAutoPaint(false);
          graph.getNodes().forEach(function (node) {
            graph.clearItemStates(node);
          });
          graph.getEdges().forEach(function (edge) {
            graph.clearItemStates(edge);
          });
          graph.paint();
          graph.setAutoPaint(true);
        };
        // graph.on('node:mouseleave', clearAllStats);
        // 单击画布
        graph.on('canvas:click', clearAllStats);
        // 双击节点
        graph.on('node:dblclick', function (e) {
          const item = e.item;
          graph.setAutoPaint(false);
          graph.getNodes().forEach(function (node) {
            graph.clearItemStates(node);
            graph.setItemState(node, 'dark', true);
          });
          graph.setItemState(item, 'dark', false);
          graph.setItemState(item, 'highlight', true);
          graph.getEdges().forEach(function (edge) {
            if (edge.getSource() === item) {
              graph.setItemState(edge.getTarget(), 'dark', false);
              graph.setItemState(edge.getTarget(), 'highlight', true);
              graph.setItemState(edge, 'highlight', true);
              edge.toFront();
            } else if (edge.getTarget() === item) {
              graph.setItemState(edge.getSource(), 'dark', false);
              graph.setItemState(edge.getSource(), 'highlight', true);
              graph.setItemState(edge, 'highlight', true);
              edge.toFront();
            } else {
              graph.setItemState(edge, 'highlight', false);
            }
          });
          graph.paint();
          graph.setAutoPaint(true);
        });
        // 鼠标进入节点 click dblclick mouseenter
        graph.on('node:click', (e) => {
          const nodeItem = e.item // 获取鼠标进入的节点元素对象
          console.log('单击节点: ', nodeItem._cfg)
        });
        graph.on('edge:click', (e) => {
          // console.log('单击边:', e)
          const nodeItem = e.item // 获取鼠标进入的节点元素对象
          console.log('单击边: ', nodeItem._cfg)
        });
        graph.on('canvas:dblclick', (e) => {
          // console.log('双击画布: ', e)
          console.log('双击画布: ', e.currentTarget.cfg.nodes)
          for( var k=0; k < e.currentTarget.cfg.nodes.length; k++) {
            var x = e.currentTarget.cfg.nodes[k]._cfg.bboxCache.centerX
            var y = e.currentTarget.cfg.nodes[k]._cfg.bboxCache.centerY
            console.log(e.currentTarget.cfg.nodes[k]._cfg.id, {"x": x,"y": y})
          }
        });

参考文件：
[1]: https://g6.antv.antgroup.com/
[2]: https://www.iconfont.cn/search/index?searchType=icon&q=time&page=1&fromCollection=-1

运维Math
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
不可靠链路下基于压缩感知的WSN数据收集算法
01-14
为了解决WSN中基于压缩感知（CS,compressive sensing）的数据收集方法会受不可靠链路影响的问题，首先通过实验对基于 CS 的数据收集算法中数据重构信噪比与链路误码率的关系进行了定量研究，根据 WSN 链路分组丢失...
几个id就生成调用链拓扑图，微服务全链路监控系统5分钟弄懂
lt_xiaodou的博客
09-25 818
这些微服务可能是由不同的开发团队维护、使用不同的编程语言实现、部署在不同的机房、每个微服务部署的服务器数量差异很大（几十台到几千台）、横跨多个数据中心等，归结成一点，就是。对原应用的影响应该足够小。全链路性能监控能从整体到局部展示各项指标，将跨应用的所有调用链上的性能信息集中展现，方便度量整体性能和局部性能，方便找到故障的来源，缩短故障排查时间。Trace是一个类似于树结构的Span集合，表示一次完整的跟踪，从请求到服务器开始，服务器返回响应结束，跟踪每次RPC调用的耗时，存在唯一标识traceId。
主流微服务全链路监控系统之战
架构文摘
03-07 150
点击蓝色“架构文摘”关注我哟加个“星标”，每天上午 09:25，干货推送！原文：https://www.jianshu.com/p/92a12de11f18问题背景随着微服务架构的流行，服...
【微服务】springcloud集成sleuth与zipkin实现链路追踪
congge
01-21 6766
springcloud集成sleuth与zipkin实现链路追踪
基于Flink的实时数据仓库实践分享
01-27
严选实时数仓项目是从17年下半年开始做的，背景总结为三个方面：第一个是长链路且快速变化的业务，严选作为一个ODM电商，整个业务链度从商品采购、生产、仓库、到销售这个阶段可以在主站APP上购买或者分厂购买，然后...
基于大数据交互的全链路数据多维分析技术研究
01-12
实验结果表明，传统的全链路数据处理技术只能对具有某种特征的数据进行处理，但是将数据升华为多维数据时，全链路数据的属性将会被混合，而基于大数据交互的全链路数据多维分析技术可以很好地分析数据属性，从而实现...
微服务架构—自动化测试全链路设计
02-25
从SOA架构到现在大行其道的微服务架构，系统越拆越小，整体架构的复杂度也是直线上升，我们一直老生常谈的微服务架构下的技术难点及解决方案也日渐成熟（包括典型的数据一致性，系统调用带来的一致性问题，还是跨...
微服务下的APM全链路监控.zip
09-02
融数数据北京研发中心 CTO 王东作了题为《微服务下的APM全链路监控》。分享分为五个部分，从性能管理一直到现在的 microservice 对 APM 的大影响，然后自然去构建适合微服务的 APM 平台。王东认为：因为监控不是目的...
19 做好微服务间依赖的治理和分布式事务
最新发布
周大壮的博客
04-30 660
本讲介绍了采用微服务架构后，不可避免的分布式事务的解决方案，同时介绍了微服务常见的依赖：数据库、消息中间件的基本治理原则。后续你可以将本讲学习到的内容应用到你所负责的微服务的依赖治理中去。最后，我再给你留一道讨论题，你所负责的微服务对于它的依赖的使用，有哪些基本原则？欢迎留言区留言，咱们一起讨论。再见。
18 如何设计微服务才能防止宕机？
周大壮的博客
04-30 661
本讲介绍了设计不规范的微服务会产生的典型线上问题：机器 CPU 被打满的详细处理过程。后续遇到此类线上问题时，你可以参考上述过程进行处理。然后通过部署和代码两个层面讲解了可以规避服务器宕机的一些设计和编码技巧。后续你在设计和开发中，可以进行参考使用。上述介绍的应用部署和代码编写的原则，都是为了防止微服务出现故障的手段。这些手段，换种说法就是做好自己，防止出现问题。除了上述介绍的一些原则，你们团队有哪些设计和编码规范呢？欢迎留言，我们一起讨论。再见。
【微服务】——Docker 基础知识
qq_53207874的博客
04-30 473
*数据卷（volume）**是一个虚拟目录，指向宿主机文件系统中的某个目录。一旦完成数据卷挂载，对容器的一切操作都会作用在数据卷对应的宿主机目录了。这样，我们操作宿主机的/var/lib/docker/volumes/html目录，就等于操作容器内的/usr/share/nginx/html目录了。
基于微服务和DDD的架构模板
ttyy1112的专栏
04-30 224
【代码】基于微服务和DDD的架构模板。
微服务之SpringCloud AlibabaSeata处理分布式事务
qq_62377885的博客
04-30 618
解决分布式事务的方案有很多，但实现起来都比较复杂，因此我们一般会使用开源的框架来解决分布式事务问题。在众多的开源分布式事务框架中，功能最完善、使用最多的就是阿里巴巴在2019年开源的Seata了。其实分布式事务产生的一个重要原因，就是参与事务的多个分支事务互相无感知，不知道彼此的执行状态。因此解决分布式事务的思想非常简单：就是找一个统一的事务协调者，与多个分支事务通信，检测每个分支事务的执行状态，保证全局事务下的每一个分支事务同时成功或失败即可。大多数的分布式事务框架都是基于这个理论来实现的。TC。
好用的电子文档管理系统应具备哪些功能？
MSaaS的博客
04-30 220
通过使用8Manage电子文档管理系统这样有效的解决方案，企业可以更好地存储、组织和访问数据文件，简化许多涉及数字文档的业务流程，从而提升业务办公效率。为了跟踪文档的处理方式，8Manage 保留不可擦除的审计跟踪，让你全面了解系统上任何人的每个操作。8Manage电子文档管理系统的索引查询、关键字查询和全文检索可以帮助你轻松找到查找的内容，你还可以定义知识层次结构并根据其知识分类搜索文档。得益于清晰的组织系统，你可以知道哪个文档版本有更新，团队成员可以从中央位置发表评论或更改文档的状态。
Django后台项目开发实战四
weixin_72949205的博客
04-30 275
用户可以浏览工作列表以及工作详情。
Django后台项目开发实战三
weixin_72949205的博客
04-30 294
优化添加职位功能。
Django模板查找顺序
m0_72839702的博客
04-29 288
，找到了后续就不找了；如果没有，就顺着app的注册顺序进行查找。如果有定义，首先去这个目录下面查找（根目录下。首先看django项目的。
微服务链路ip链路追踪的使用场景
11-20
微服务链路IP链路追踪是一种用于监控和调试...综上所述，微服务链路IP链路追踪的使用场景非常广泛，可以应用于微服务架构中的监控和调试、性能优化、故障排查等方面，帮助开发人员更好地管理和维护复杂的分布式系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值