在微服务架构下，服务之间的关系是非常复杂的，是一个典型的有向有环图，在一个中等规模的项目中，一般会有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>
最终运行的效果如下：