请先关注 [低调大师] 公众号 优秀的自媒体个人博客,低调大师,许军

低调大师

您现在的位置是:首页>文章详情

文章详情

微服务架构下的服务关联图

2018-09-28 89热度

在微服务架构下,服务之间的关系是非常复杂的,是一个典型的有向有环图,在一个中等规模的项目中,一般会有100多个服务,而大型项目中,则会有数百个服务。

假设我们有如下6个服务:

每个服务都指定了自己依赖的服务:

AaaSvc:

BbbSvc:

CccSvc:

DddSvc:

EeeSvc:

FffSvc:

我们如何把如上6个服务中跟服务AaaSvc相关的服务可视化呢?如下图所示:

要完成这样的服务关联图,需要如下几个步骤:

1、遍历指定项目下的所有服务,构造两个map,serviceToServiceMap 和 reverseServiceToServiceMap,存储所有服务的直接依赖和反向直接依赖。

 public static void runService(String projectId, Map<String, Set<String>> serviceToServiceMap, Map<String, Set<String>> reverseServiceToServiceMap){ if(! (serviceToServiceMap instanceof ConcurrentHashMap) ){ throw new RuntimeException("参数serviceToServiceMap必须是ConcurrentHashMap的实例"); } if(! (reverseServiceToServiceMap instanceof ConcurrentHashMap) ){ throw new RuntimeException("参数reverseServiceToServiceMap必须是ConcurrentHashMap的实例"); } MetaServiceRepository metaServiceRepository = SpringContextUtils.getBean("metaServiceRepository"); List<MetaService> services = metaServiceRepository.findByProjectId(projectId); services.parallelStream().filter(item->!item.getName().contains("Deprecate")).forEach(item->{ List<DependencyService> dependencyServices = item.constructDependencyServices(); String key = item.getName()+"("+item.getDescription()+")"; if(dependencyServices != null){ dependencyServices.parallelStream().filter(dep->!dep.getName().contains("Deprecate")).forEach(dependencyService->{ String value = dependencyService.getName()+"("+dependencyService.getDescription()+")"; serviceToServiceMap.putIfAbsent(key, Collections.newSetFromMap(new ConcurrentHashMap<>())); serviceToServiceMap.get(key).add(value); reverseServiceToServiceMap.putIfAbsent(value, Collections.newSetFromMap(new ConcurrentHashMap<>())); reverseServiceToServiceMap.get(value).add(key); }); } }); }

2、以服务AaaSvc为入口,利用直接依赖和反向直接依赖,构造服务依赖图和反向服务依赖图。

String name = metaService.getName()+"("+metaService.getDescription()+")"; Set<String> set = serviceToServiceMap.get(name); ServiceDependencyGraph serviceDependencyGraph = new ServiceDependencyGraph(new HashMap<>(), name, set, serviceToServiceMap); set = reverseServiceToServiceMap.get(name); ServiceDependencyGraph reverseServiceDependencyGraph = new ServiceDependencyGraph(new HashMap<>(), name, set, reverseServiceToServiceMap); 
import org.apache.commons.collections4.CollectionUtils; import java.util.ArrayList; import java.util.List; import java.util.Map; import java.util.Set; import java.util.concurrent.atomic.AtomicInteger; /** * 服务依赖图 * @date 2017-09-2 * @author 杨尚川 */ public class ServiceDependencyGraph { private String name; private List<ServiceDependencyGraph> children = new ArrayList<>(); public ServiceDependencyGraph(Map<String, AtomicInteger> stopServiceNames, String name, Set<String> set, Map<String, Set<String>> serviceToServiceMap){ this.name = name; if(CollectionUtils.isNotEmpty(set)) { for (String item : set) { String key = name+"_"+item; stopServiceNames.putIfAbsent(key, new AtomicInteger()); stopServiceNames.get(key).incrementAndGet(); if(stopServiceNames.get(key).get()<10) { Set<String> sub = serviceToServiceMap.get(item); ServiceDependencyGraph serviceDependencyGraph = new ServiceDependencyGraph(stopServiceNames, item, sub, serviceToServiceMap); children.add(serviceDependencyGraph); } } } } public String getName() { return name; } public void setName(String name) { this.name = name; } public List<ServiceDependencyGraph> getChildren() { return children; } }

3、利用服务依赖图和反向服务依赖图,构造带有点和边描述信息的JSON结构:

List<Map<String, String>> nodes = new ArrayList<>(); addNode(serviceDependencyGraph, nodes); addNode(reverseServiceDependencyGraph, nodes); List<Map<String, Object>> edges = new ArrayList<>(); addEdge(reverseServiceToServiceMap, serviceDependencyGraph, edges, false); addEdge(reverseServiceToServiceMap, reverseServiceDependencyGraph, edges, true); Map<String, Object> graph = new HashMap<>(); graph.put("edges", edges); graph.put("nodes", nodes);
 private void addNode(String node, List<Map<String, String>> nodes){ for(Map<String, String> item : nodes){ if(node.equals(item.get("id"))){ return; } } Map<String, String> nodeMap = new HashMap<>(); nodeMap.put("id", node); nodeMap.put("name", node); nodes.add(nodeMap); } private void addNode(ServiceDependencyGraph serviceDependencyGraph, List<Map<String, String>> nodes){ if(serviceDependencyGraph == null){ return; } String node = serviceDependencyGraph.getName(); addNode(node, nodes); if(serviceDependencyGraph.getChildren() != null){ serviceDependencyGraph.getChildren().forEach(item->addNode(item, nodes)); } } private void addEdge(Map<String, Set<String>> reverseServiceToServiceMap, ServiceDependencyGraph serviceDependencyGraph, List<Map<String, Object>> edges, boolean reverse){ if(serviceDependencyGraph == null){ return; } String source = serviceDependencyGraph.getName(); serviceDependencyGraph.getChildren().forEach(target -> { boolean duplicate = false; Map<String, Object> map = new HashMap<>(); if(reverse){ String id = target.getName()+"-->"+source; for(Map<String, Object> item : edges){ if(id.equals(item.get("id"))){ duplicate = true; } } map.put("id", id); map.put("target", source); map.put("source", target.getName()); map.put("directed", true); map.put("source_score", reverseServiceToServiceMap.get(target.getName()) == null ? 0 : reverseServiceToServiceMap.get(target.getName()).size()); map.put("target_score", reverseServiceToServiceMap.get(source) == null ? 0 : reverseServiceToServiceMap.get(source).size()); }else { String id = source+"-->"+target.getName(); for(Map<String, Object> item : edges){ if(id.equals(item.get("id"))){ duplicate = true; } } map.put("id", id); map.put("source", source); map.put("target", target.getName()); map.put("directed", true); map.put("source_score", reverseServiceToServiceMap.get(source) == null ? 0 : reverseServiceToServiceMap.get(source).size()); map.put("target_score", reverseServiceToServiceMap.get(target.getName()) == null ? 0 : reverseServiceToServiceMap.get(target.getName()).size()); } if(!duplicate) { edges.add(map); } addEdge(reverseServiceToServiceMap, target, edges, reverse); }); }

生成的JSON结构如下所示:

{ "nodes":[ { "globalWeight":4, "name":"AaaSvc(服务Aaa)" }, { "globalWeight":4, "name":"CccSvc(服务Ccc)" }, { "globalWeight":5, "name":"DddSvc(服务Ddd)" }, { "globalWeight":4, "name":"EeeSvc(服务Eee)" }, { "globalWeight":4, "name":"FffSvc(服务Fff)" }, { "globalWeight":3, "name":"BbbSvc(服务Bbb)" } ], "edges":[ { "distance":8, "source":0, "target":1 }, { "distance":8, "source":1, "target":0 }, { "distance":9, "source":0, "target":2 }, { "distance":9, "source":2, "target":3 }, { "distance":9, "source":3, "target":2 }, { "distance":9, "source":2, "target":4 }, { "distance":8, "source":4, "target":3 }, { "distance":8, "source":3, "target":4 }, { "distance":9, "source":4, "target":2 }, { "distance":7, "source":0, "target":5 }, { "distance":7, "source":5, "target":1 }, { "distance":7, "source":1, "target":5 } ] } 

4、使用d3-force对如上的JSON进行展示:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>测试项目_testDemo -- 服务Aaa_AaaSvc -- 服务关联图</title> <style> .node { stroke: #fff; stroke-width: 1.5px; } .node-active{ stroke: #555; stroke-width: 1.5px; } .link { stroke: #555; stroke-opacity: .3; } .link-active { stroke-opacity: 1; stroke-width: 1.5px; } .overlay { fill: none; pointer-events: all; } #map{ height:100%; } #ex1Slider .slider-selection { background: #BABABA; } #ex2Slider .slider-selection { background: #BABABA; } #ex3Slider .slider-selection { background: #BABABA; } #ex4Slider .slider-selection { background: #BABABA; } #ex5Slider .slider-selection { background: #BABABA; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css"/> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js" charset="utf-8"></script> <script type="text/javascript"> var gravity = 0.03; var linkDistanceMultiFactor = 10; var linkDistance = 100; var circleRadiusMultiFactor = 2; var circleRadius = 4; var arrowhead = 10; var graph; function load(graph){ console.log("loading ...... "); console.log("gravity: "+gravity); console.log("linkDistanceMultiFactor: "+linkDistanceMultiFactor); console.log("linkDistance: "+linkDistance); console.log("circleRadiusMultiFactor: "+circleRadiusMultiFactor); console.log("circleRadius: "+circleRadius); var margin = {top: -5, right: -5, bottom: -5, left: -5}; var width = $(window).width() - margin.left - margin.right, height = $(window).height() - margin.top - margin.bottom; var color = d3.scale.category10(); var force = d3.layout.force() .charge(-200) .linkDistance(function(d) {return (d.source.weight+d.target.weight)*linkDistanceMultiFactor+linkDistance;}) .size([width + margin.left + margin.right, height + margin.top + margin.bottom]) .charge([-500]) .theta(0.1) .gravity(gravity); var zoom = d3.behavior.zoom() .scaleExtent([0.3, 10]) .on("zoom", zoomed); var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", dragstarted) .on("drag", dragged) .on("dragend", dragended); var svg = d3.select("#map").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.right + ")") .call(zoom); var rect = svg.append("rect") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all"); var container = svg.append("g"); force .nodes(graph.nodes) .links(graph.edges) .start(); var link = container.append("g") .attr("class", "links") .selectAll(".link") .data(force.links()) .enter() .append("line") .attr("class", "link") .attr('marker-end', function(d,i) { return d.rpm === 0 ? '' : 'url(#arrowhead)'}) .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = container.append("g") .attr("class", "nodes") .selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .call(drag); var nodeLabel = container.selectAll(".nodelabel") .data(force.nodes()) .enter() .append("text") .style("pointer-events", "none") .attr({"x":function(d){return d.x;}, "y":function(d){return d.y;}, "class":"nodelabel", "stroke":"#666"}) .text(function(d){return d.name;}); var linkPath = container.selectAll(".linkpath") .data(force.links()) .enter() .append('path') .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y}, 'class':'linkpath', 'fill-opacity':0, 'stroke-opacity':0, 'fill':'blue', 'stroke':'red', 'id':function(d,i) {return 'linkpath'+i}}) .style("pointer-events", "none"); var linkLabel = container.selectAll(".linklabel") .data(force.links()) .enter() .append('text') .style("pointer-events", "none") .attr({'class':'linklabel', 'id':function(d,i){return 'linklabel'+i}, 'dx':90, 'dy':-5, 'font-size':12, 'fill':'#666'}); linkLabel.append('textPath') .attr('xlink:href',function(d,i) {return '#linkpath'+i}) .style("pointer-events", "none") .text(function(d,i){ return d.rpm > 0 ? d.rpm + ' req/min' : ""; }); container.append('defs').append('marker') .attr({'id':'arrowhead', 'viewBox':'-0 -5 10 10', 'refX':25, 'refY':0, 'orient':'auto', 'markerWidth':arrowhead, 'markerHeight':arrowhead, 'xoverflow':'visible'}) .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#000') .attr('stroke','#000'); node.append("circle") .attr("r", function(d) { return d.weight*circleRadiusMultiFactor + circleRadius; }) .style("fill", function(d,i) { return "#e7ba52"; }); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); nodeLabel.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }); linkPath.attr('d', function(d) { var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y; return path; }); linkLabel.attr('transform',function(d){ if (d.target.x < d.source.x) { bbox = this.getBBox(); rx = bbox.x+bbox.width/2; ry = bbox.y+bbox.height/2; return 'rotate(180 ' + rx + ' ' + ry + ')'; } else { return 'rotate(0)'; } }); }); var linkedByIndex = {}; force.links().forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index]; } node.on("mouseover", function(d) { node.classed("node-active", function(o) { thisOpacity = isConnected(d, o) ? true : false; this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; }); link.classed("link-active", function(o) { return o.source === d || o.target === d ? true : false; }); d3.select(this).classed("node-active", true); d3.select(this).select("circle").transition() .duration(750) .attr("r", function(d) { return (d.weight*circleRadiusMultiFactor + circleRadius)*1.5; }); }) .on("mouseout", function(d){ node.classed("node-active", false); link.classed("link-active", false); d3.select(this).select("circle").transition() .duration(750) .attr("r", function(d) { return d.weight*circleRadiusMultiFactor + circleRadius; }); }); function dottype(d) { d.x = +d.x; d.y = +d.y; return d; } function zoomed() { container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); } function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true); force.start(); } function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); } function dragended(d) { d3.select(this).classed("dragging", false); } } $(function() { $('#ex1').slider({ tooltip: 'hide' }).on('slideStop', function (e) { //获取新值 gravity = e.value/100; load(graph); }); $('#ex2').slider({ tooltip: 'hide' }).on('slideStop', function (e) { //获取新值 linkDistance = e.value; load(graph); }); $('#ex3').slider({ tooltip: 'hide' }).on('slideStop', function (e) { //获取新值 linkDistanceMultiFactor = e.value; load(graph); }); $('#ex4').slider({ tooltip: 'hide' }).on('slideStop', function (e) { //获取新值 circleRadius = e.value; load(graph); }); $('#ex5').slider({ tooltip: 'hide' }).on('slideStop', function (e) { //获取新值 circleRadiusMultiFactor = e.value; load(graph); }); $('#ex6').slider({ tooltip: 'hide' }).on('slideStop', function (e) { //获取新值 arrowhead = e.value; load(graph); }); graph = JSON.parse('{"nodes":[{"globalWeight":4,"name":"AaaSvc(服务Aaa)"},{"globalWeight":4,"name":"CccSvc(服务Ccc)"},{"globalWeight":5,"name":"DddSvc(服务Ddd)"},{"globalWeight":4,"name":"EeeSvc(服务Eee)"},{"globalWeight":4,"name":"FffSvc(服务Fff)"},{"globalWeight":3,"name":"BbbSvc(服务Bbb)"}],"edges":[{"distance":8,"source":0,"target":1},{"distance":8,"source":1,"target":0},{"distance":9,"source":0,"target":2},{"distance":9,"source":2,"target":3},{"distance":9,"source":3,"target":2},{"distance":9,"source":2,"target":4},{"distance":8,"source":4,"target":3},{"distance":8,"source":3,"target":4},{"distance":9,"source":4,"target":2},{"distance":7,"source":0,"target":5},{"distance":7,"source":5,"target":1},{"distance":7,"source":1,"target":5}]}'); load(graph); }); </script> </head> <body> <h3>测试项目_testDemo -- 服务Aaa_AaaSvc -- 服务关联图</h3> <table> <tr> <td width="50"></td> <td> <span class="item"> 重力调节 <input id="ex1" type="text" data-slider-id="ex1Slider" class="span2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0.03"/> </span> </td> <td width="50"></td> <td> <span class="item"> 最短边长 <input id="ex2" type="text" data-slider-id="ex2Slider" class="span2" data-slider-min="0" data-slider-max="250" data-slider-step="1" data-slider-value="100"/> </span> </td> <td width="50"></td> <td> <span class="item"> 边长放大倍数 <input id="ex3" type="text" data-slider-id="ex3Slider" class="span2" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="10"/> </span> </td> <td width="50"></td> <td> <span class="item"> 最短半径 <input id="ex4" type="text" data-slider-id="ex4Slider" class="span2" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="4"/> </span> </td> <td width="50"></td> <td> <span class="item"> 半径放大倍数 <input id="ex5" type="text" data-slider-id="ex5Slider" class="span2" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="2"/> </span> </td> <td width="50"></td> <td> <span class="item"> 箭头大小 <input id="ex6" type="text" data-slider-id="ex5Slider" class="span2" data-slider-min="10" data-slider-max="30" data-slider-step="1" data-slider-value="10"/> </span> </td> </tr> </table> <div id="map"></div> </body> </html>

最终运行的效果如下:

 

 

收藏 (0)

相关文章

    文章评论

    共有0条评论来说两句吧...