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

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

• 1 背景
• 2 效果展示
• 3 后端实现逻辑
• • 3.1 前提
    • 3.2 生成场景
• 4 前端实现逻辑
• • 4.1 创建画布高宽并对中英文展示长度处理
    • 4.2 自定义节点样式
    • 4.3 对节点或画布双击、单击事件

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: