Skip to content

Commit 376ff37

Browse files
JCxianchengJCxiancheng
committed
controller fail over animate is done
1 parent 701cba7 commit 376ff37

File tree

6 files changed

+321
-41
lines changed

6 files changed

+321
-41
lines changed

‎kafka/broker.html

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Vizit</title>
5+
<link rel="stylesheet" href="css/style.css">
6+
<script src="node_modules/jquery/dist/jquery.js"></script>
7+
<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
8+
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
9+
</head>
10+
<body>
11+
12+
<script>
13+
// 定义svg对象, 在body里面添加一个svg
14+
let svg = SVG().addTo('body').attr({width: 1000, height: 800});
15+
// marker: arrow head
16+
let marker = svg.marker(13, 13, function (add) {
17+
add.path('M2,2 L2,11 L10,6 L2,2').fill('blue').stroke({width: 1, color: 'blue'})
18+
}).attr({"refX": "2", "refY": "6", "orient": "auto"});
19+
// Set the global configs to synchronous
20+
$.ajaxSetup({
21+
async: false
22+
});
23+
let version = Date.now();
24+
25+
function createNode(container, data) {
26+
// 用一个group把节点边框和文本放在一起，这样可以利用group的transform来定义
27+
// 整个group里面所有节点的坐标位置
28+
let translateX = data.group.transform.translateX;
29+
let translateY = data.group.transform.translateY;
30+
let width = data.label.text.length * 8 + 10;
31+
let height = 28;
32+
let group = container.group()
33+
.transform({translateX: translateX, translateY: translateY})
34+
.id(data.group.id)
35+
.data('leftTopX', translateX)
36+
.data('leftTopY', translateY)
37+
.data('width', width)
38+
.data('height', height)
39+
;
40+
// TODO style 的信息暂时hardcode, 后面会用程序控制动态变化的效果。
41+
let style = {fill: 'none', stroke: 'blue'};
42+
let attributes = {...style, ...data.shape.attributes};
43+
// 动态的调用函数，可以支持绘制各种图形，比如:rect, ellipse
44+
let rect = container[data.shape.type](width, height).attr(attributes);
45+
group.add(rect);
46+
47+
let label = container.text(data.label.text);
48+
label.attr(data.label.attributes);
49+
group.add(label);
50+
51+
return group.draggable(); // 支持拖拽
52+
}
53+
54+
function buildPathId(path) {
55+
let start = path.start;
56+
let end = path.end;
57+
return `${start}_${end}`;
58+
}
59+
60+
function createPath(container, path, marker) {
61+
let start = path.start;
62+
let end = path.end;
63+
let startNode = svg.findOne(`#${start}`);
64+
let endNode = svg.findOne(`#${end}`);
65+
let startX = startNode.data('leftTopX') + startNode.data('width') + path.startOffsetX;
66+
let startY = startNode.data('leftTopY') + startNode.data('height') + path.startOffsetY;
67+
let endX = endNode.data('leftTopX') + path.endOffsetX;
68+
let endY = endNode.data('leftTopY') + path.endOffsetY;
69+
let data = `M ${startX}, ${startY} L ${endX}, ${endY}`;
70+
let id = buildPathId(path);
71+
let result = container.path(data).id(id)
72+
.fill('blue')
73+
.stroke({width: 1, color: 'blue'})
74+
.marker('end', marker)
75+
.data('points', [startX, startY, endX, endY]);
76+
return result;
77+
}
78+
79+
function animate(path) {
80+
let id = buildPathId(path);
81+
let points = svg.findOne(`#${id}`).data('points');
82+
return svg.circle(20).attr({cx: points[0], cy: points[1]}).fill('green')
83+
.id('circle-' + id)
84+
.animate(2500, 100, 'now')
85+
.move(points[2] - 10, points[3] - 10)
86+
.loop(Number.MAX_SAFE_INTEGER, false, 200)
87+
// .loop(1, false, 200)
88+
;
89+
}
90+
91+
SVG.on(document, 'DOMContentLoaded', function () {
92+
$.getJSON("data/zookeeper.json?" + version, function (data) {
93+
data.forEach(node => createNode(svg, node))
94+
});
95+
96+
$.getJSON("data/brokers.json?" + version, function (data) {
97+
data.forEach(node => createNode(svg, node))
98+
});
99+
100+
$.getJSON("data/paths.json?" + version, function (data) {
101+
data.forEach(value => createPath(svg, value, marker));
102+
});
103+
104+
$.getJSON("data/paths.json?" + version, function (data) {
105+
data.forEach(value => animate(value));
106+
});
107+
108+
$("svg").find("g").attr("display", "none");
109+
$("svg").find("path").attr("display", "none");
110+
$("svg").find("circle").attr("display", "none");
111+
112+
$("#circle-broker2_zookeeper").attr("fill", "pink");
113+
$("#circle-zookeeper_brokers-ids-2").attr("fill", "pink");
114+
115+
$("#circle-broker3_zookeeper").attr("fill", "red");
116+
$("#circle-zookeeper_brokers-ids-3").attr("fill", "red");
117+
118+
// ['zookeeper',
119+
// 'broker1', 'broker1_zookeeper', 'circle-broker1_zookeeper', 'brokers-ids-1', 'zookeeper_brokers-ids-1', 'circle-zookeeper_brokers-ids-1',
120+
// 'controller', 'zookeeper_controller', 'circle-zookeeper_controller',
121+
// 'broker2', 'broker2_zookeeper', 'circle-broker2_zookeeper', 'brokers-ids-2', 'zookeeper_brokers-ids-2', 'circle-zookeeper_brokers-ids-2',
122+
// 'broker3', 'broker3_zookeeper', 'circle-broker3_zookeeper', 'brokers-ids-3', 'zookeeper_brokers-ids-3', 'circle-zookeeper_brokers-ids-3'
123+
// ]
124+
// .forEach(function (value, index) {
125+
// setTimeout(
126+
// function () {
127+
// $("#" + value).removeAttr("display");
128+
// }, 800 * index);
129+
// });
130+
//
131+
// setTimeout(
132+
// function () {
133+
// ['broker1', 'broker1_zookeeper', 'circle-broker1_zookeeper']
134+
// .forEach(function (value, index) {
135+
// $("#" + value).attr("display", "none");
136+
// });
137+
// }, 20000);
138+
//
139+
// setTimeout(
140+
// function () {
141+
// ['brokers-ids-1', 'zookeeper_brokers-ids-1', 'circle-zookeeper_brokers-ids-1']
142+
// .forEach(function (value, index) {
143+
// $("#" + value).attr("display", "none");
144+
// });
145+
// $("#circle-zookeeper_controller").attr("fill", "pink");
146+
// $('#controller').find('tspan').html('/controller (broker1)')
147+
// }, 22000);
148+
149+
let show_flow = ['zookeeper',
150+
'broker1', 'broker1_zookeeper', 'circle-broker1_zookeeper', 'brokers-ids-1', 'zookeeper_brokers-ids-1', 'circle-zookeeper_brokers-ids-1',
151+
'controller', 'zookeeper_controller', 'circle-zookeeper_controller',
152+
'broker2', 'broker2_zookeeper', 'circle-broker2_zookeeper', 'brokers-ids-2', 'zookeeper_brokers-ids-2', 'circle-zookeeper_brokers-ids-2',
153+
'broker3', 'broker3_zookeeper', 'circle-broker3_zookeeper', 'brokers-ids-3', 'zookeeper_brokers-ids-3', 'circle-zookeeper_brokers-ids-3'
154+
].concat(['broker1', 'broker1_zookeeper', 'circle-broker1_zookeeper'])
155+
.concat(['brokers-ids-1', 'zookeeper_brokers-ids-1', 'circle-zookeeper_brokers-ids-1']);
156+
let next = 0;
157+
$("#show_next").click(function () {
158+
let id = show_flow[next++];
159+
console.log(id);
160+
$("#" + id).removeAttr("display");
161+
});
162+
163+
164+
$("#hide_broker0").click(function () {
165+
['broker1', 'broker1_zookeeper', 'circle-broker1_zookeeper']
166+
.forEach(function (value, index) {
167+
$("#" + value).attr("display", "none");
168+
});
169+
});
170+
171+
$("#hide_brokerid0").click(function () {
172+
['brokers-ids-1', 'zookeeper_brokers-ids-1', 'circle-zookeeper_brokers-ids-1']
173+
.forEach(function (value, index) {
174+
$("#" + value).attr("display", "none");
175+
});
176+
});
177+
178+
$("#hide_controller").click(function () {
179+
['controller', 'zookeeper_controller', 'circle-zookeeper_controller']
180+
.forEach(function (value, index) {
181+
$("#" + value).attr("display", "none");
182+
});
183+
});
184+
185+
$("#change_controller").click(function () {
186+
['controller', 'zookeeper_controller', 'circle-zookeeper_controller']
187+
.forEach(function (value, index) {
188+
$("#" + value).removeAttr("display");
189+
});
190+
$("#circle-zookeeper_controller").attr("fill", "pink");
191+
$('#controller').find('tspan').html('/controller (broker1)')
192+
});
193+
194+
$("#show_all").click(function () {
195+
$("svg").find("g").removeAttr("display");
196+
$("svg").find("path").removeAttr("display");
197+
$("svg").find("circle").removeAttr("display");
198+
199+
});
200+
201+
202+
})
203+
</script>
204+
<input id="show_all" type="button" class="button" value="Show all" style="float: right;">
205+
<input id="change_controller" type="button" class="button" value="Change controller 1" style="float: right;">
206+
<input id="hide_controller" type="button" class="button" value="Hide controller 0" style="float: right;">
207+
<input id="hide_brokerid0" type="button" class="button" value="Hide Broker ID 0" style="float: right;">
208+
<input id="hide_broker0" type="button" class="button" value="Hide Broker0" style="float: right;">
209+
<input id="show_next" type="button" class="button" value="Show Next" style="float: right;">
210+
</body>
211+
</html>

‎kafka/css/style.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.button {
2+
background-color: #4CAF50; /* Green */
3+
border: none;
4+
color: white;
5+
padding: 15px 32px;
6+
text-align: center;
7+
text-decoration: none;
8+
display: inline-block;
9+
font-size: 16px;
10+
}

‎kafka/data/brokers.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"group": {
44
"id": "broker1",
55
"transform": {
6-
"translateX": 100,
6+
"translateX": 170,
77
"translateY": 200
88
}
99
},
@@ -17,7 +17,7 @@
1717
"label": {
1818
"text": "broker0",
1919
"attributes": {
20-
"x": 24,
20+
"x": 20,
2121
"y": 8
2222
}
2323
}
@@ -26,7 +26,7 @@
2626
"group": {
2727
"id": "broker2",
2828
"transform": {
29-
"translateX": 100,
29+
"translateX": 170,
3030
"translateY": 300
3131
}
3232
},
@@ -40,7 +40,7 @@
4040
"label": {
4141
"text": "broker1",
4242
"attributes": {
43-
"x": 24,
43+
"x": 20,
4444
"y": 8
4545
}
4646
}
@@ -49,7 +49,7 @@
4949
"group": {
5050
"id": "broker3",
5151
"transform": {
52-
"translateX": 100,
52+
"translateX": 170,
5353
"translateY": 400
5454
}
5555
},
@@ -63,7 +63,7 @@
6363
"label": {
6464
"text": "broker2",
6565
"attributes": {
66-
"x": 24,
66+
"x": 20,
6767
"y": 8
6868
}
6969
}

‎kafka/data/paths.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"end": "controller",
5353
"startOffsetX": -40,
5454
"startOffsetY": -25,
55-
"endOffsetX": 110,
55+
"endOffsetX": 95,
5656
"endOffsetY": 50
5757
}
5858
]

‎kafka/data/zookeeper.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"id": "controller",
2828
"transform": {
2929
"translateX": 350,
30-
"translateY": 100
30+
"translateY": 80
3131
}
3232
},
3333
"shape": {
@@ -49,7 +49,7 @@
4949
"group": {
5050
"id": "brokers-ids-1",
5151
"transform": {
52-
"translateX": 700,
52+
"translateX": 630,
5353
"translateY": 200
5454
}
5555
},
@@ -70,7 +70,7 @@
7070
"group": {
7171
"id": "brokers-ids-2",
7272
"transform": {
73-
"translateX": 700,
73+
"translateX": 630,
7474
"translateY": 300
7575
}
7676
},
@@ -91,7 +91,7 @@
9191
"group": {
9292
"id": "brokers-ids-3",
9393
"transform": {
94-
"translateX": 700,
94+
"translateX": 630,
9595
"translateY": 400
9696
}
9797
},

0 commit comments

Comments
 (0)