Skip to content

Commit db14867

Browse files
fylip97fylip97
authored
Added sidepanel for showing node statistics (#10)
1 parent cf7533a commit db14867

File tree

9 files changed

+491
-60
lines changed

9 files changed

+491
-60
lines changed

‎src/assets/balancer.png‎

2.36 KB
Loading

‎src/canvas/graph_canvas.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ export default class CanvasDrawer {
251251

252252
ctx.fillStyle = 'white';
253253
ctx.fill();
254-
ctx.restore();
254+
ctx.restore();
255255
}
256256

257257
_drawEdge(ctx: CanvasRenderingContext2D, edge: cytoscape.EdgeSingular, now: number) {
@@ -465,14 +465,13 @@ export default class CanvasDrawer {
465465
const requestCount = _.defaultTo(metrics.rate, 1);
466466
const errorCount = _.defaultTo(metrics.error_rate, 0);
467467

468-
const totalCount = requestCount + errorCount;
469-
var healthyPct;
470-
if (totalCount <= 0) {
471-
healthyPct = 1.0;
468+
var errorPct;
469+
if (errorCount <= 0) {
470+
errorPct = 0.0;
472471
} else {
473-
healthyPct = 1.0 / totalCount * requestCount;
472+
errorPct = 1.0 / requestCount * errorCount;
474473
}
475-
const errorPct = 1.0 - healthyPct;
474+
const healthyPct = 1.0 - errorPct;
476475

477476
// drawing the donut
478477
this._drawDonut(ctx, node, 15, 5, 0.5, [errorPct, 0, healthyPct])

‎src/css/novatec-service-dependency-graph-panel.css‎

100755100644
Lines changed: 71 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,90 @@
1-
.clock-panel {
1+
.service-dependency-graph-panel {
22
display: flex;
33
align-items: center;
44
justify-content: center;
55
flex-direction: column;
66
}
77

8-
.vizceral {
9-
display: block;
10-
box-sizing: border-box;
8+
.graph-container {
119
width: 100%;
1210
height: 100%;
11+
display: flex;
12+
flex-direction: row;
1313
}
1414

15-
.vizceral .vizceral-notice {
16-
display: block;
17-
position: absolute;
18-
padding: 0 3px;
19-
width: 200px;
20-
background-color: black;
21-
border-left: 2px solid grey;
22-
font-size: 11px;
23-
color: grey;
24-
}
25-
26-
.vizceral .vizceral-notice ul {
27-
list-style: none;
28-
padding: 0;
29-
margin: 0;
30-
}
31-
32-
.vizceral .vizceral-notice>ul>li {
33-
line-height: 12px;
34-
padding-top: 3px;
35-
padding-bottom: 3px;
15+
.service-dependency-graph {
16+
position: relative;
17+
flex-grow: 1;
18+
min-width: 0;
3619
}
3720

38-
.vizceral .vizceral-notice .subtitle {
39-
font-weight: 900;
21+
.canvas-container {
22+
width: 100%;
23+
height: 100%;
24+
overflow: hidden;
4025
}
4126

4227
.zoom-button-container {
4328
position: absolute;
4429
top: 0;
4530
right: 1rem;
4631
z-index: 99;
47-
}
32+
}
33+
34+
.statistics {
35+
flex-basis: 0;
36+
transition: flex-basis 250ms ease-in-out;
37+
overflow-y: scroll;
38+
39+
}
40+
41+
.statistics.show {
42+
flex-basis: 30rem;
43+
44+
}
45+
46+
.header--selection{
47+
font-size: 1.7em;
48+
display: block;
49+
text-align: center;
50+
padding-top: 15px;
51+
border-bottom: 1px solid white;
52+
}
53+
54+
.secondHeader--selection{
55+
56+
font-size: 1.5em;
57+
display: block;
58+
text-align: center;
59+
padding-top: 30px;
60+
padding-bottom: 10px;
61+
}
62+
.noSending--selection{
63+
font-size: 1.2em;
64+
display: block;
65+
text-align: center;
66+
}
67+
.table--selection {
68+
width: 99%;
69+
}
70+
71+
.table--th--selection {
72+
padding-left: 5px;
73+
}
74+
75+
.table--td--selection {
76+
padding: 0.25rem;
77+
border: 1px solid white;
78+
overflow: hidden;
79+
text-overflow: ellipsis;
80+
white-space: nowrap;
81+
max-width: 12rem;
82+
}
83+
84+
.table--th--selectionSmall {
85+
width: 6rem;
86+
}
87+
88+
.table--td--selectionSmall {
89+
width: 6rem;
90+
}

‎src/dummy_graph.ts‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import { IGraph, EGraphNodeType } from "./types";
2+
3+
const graph: IGraph = {
4+
nodes: [
5+
{
6+
name: "gateway",
7+
type: EGraphNodeType.INTERNAL,
8+
metrics: {
9+
rate: 550,
10+
error_rate: 25,
11+
response_time: 38
12+
}
13+
},
14+
{
15+
name: "customer-service-1",
16+
type: EGraphNodeType.INTERNAL,
17+
metrics: {
18+
rate: 125,
19+
error_rate: 100,
20+
response_time: 24
21+
}
22+
},
23+
{
24+
name: "customer-service-2",
25+
type: EGraphNodeType.INTERNAL,
26+
metrics: {
27+
rate: 225,
28+
error_rate: 5,
29+
response_time: 25
30+
}
31+
},
32+
{
33+
name: "payment-service",
34+
type: EGraphNodeType.INTERNAL,
35+
metrics: {
36+
rate: 300,
37+
error_rate: 30,
38+
response_time: 18
39+
}
40+
},
41+
{
42+
name: "api.finance.com",
43+
type: EGraphNodeType.EXTERNAL,
44+
external_type: "http",
45+
metrics: {
46+
rate: 750,
47+
error_rate: 0,
48+
response_time: 134
49+
}
50+
},
51+
{
52+
name: "https://lb-customer.local",
53+
type: EGraphNodeType.EXTERNAL,
54+
external_type: 'balancer',
55+
metrics: {
56+
rate: 350
57+
}
58+
},
59+
{
60+
name: "inventory-service",
61+
type: EGraphNodeType.INTERNAL,
62+
metrics: {
63+
rate: 200,
64+
error_rate: 0,
65+
response_time: 12
66+
}
67+
},
68+
{
69+
name: "jdbc:oracle:thin:@sample-oracle-db:1521",
70+
type: EGraphNodeType.EXTERNAL,
71+
external_type: 'jdbc',
72+
metrics: {
73+
rate: 1200,
74+
response_time: 2
75+
}
76+
},
77+
{
78+
name: "api.productsupplier.com",
79+
type: EGraphNodeType.EXTERNAL,
80+
external_type: "http",
81+
metrics: {
82+
rate: 600,
83+
response_time: 83
84+
}
85+
},
86+
{
87+
name: "tcp://localhost:61616",
88+
type: EGraphNodeType.EXTERNAL,
89+
external_type: "jms",
90+
metrics: {
91+
rate: 300,
92+
response_time: 7
93+
}
94+
},
95+
{
96+
name: "reporting-service",
97+
type: EGraphNodeType.INTERNAL,
98+
metrics: {
99+
rate: 160,
100+
response_time: 18
101+
}
102+
},
103+
{
104+
name: "controlling-service",
105+
type: EGraphNodeType.INTERNAL,
106+
metrics: {
107+
rate: 300,
108+
response_time: 45
109+
}
110+
}
111+
],
112+
edges: [
113+
{
114+
source: "tcp://localhost:61616",
115+
target: "reporting-service",
116+
metrics: {
117+
rate: 300,
118+
response_time: 20
119+
}
120+
},
121+
{
122+
source: "controlling-service",
123+
target: "reporting-service",
124+
metrics: {
125+
rate: 10,
126+
response_time: 12
127+
}
128+
},
129+
{
130+
source: "controlling-service",
131+
target: "jdbc:oracle:thin:@sample-oracle-db:1521",
132+
metrics: {
133+
rate: 300,
134+
response_time: 2
135+
}
136+
},
137+
{
138+
source: "tcp://localhost:61616",
139+
target: "controlling-service",
140+
metrics: {
141+
rate: 300,
142+
response_time: 45
143+
}
144+
},
145+
{
146+
source: "payment-service",
147+
target: "tcp://localhost:61616",
148+
metrics: {
149+
rate: 300,
150+
response_time: 7
151+
}
152+
},
153+
{
154+
source: "gateway",
155+
target: "https://lb-customer.local",
156+
metrics: {
157+
rate: 350,
158+
response_time: 35,
159+
error_rate: 30
160+
}
161+
},
162+
{
163+
source: "gateway",
164+
target: "inventory-service",
165+
metrics: {
166+
rate: 200,
167+
response_time: 15
168+
}
169+
},
170+
{
171+
source: "inventory-service",
172+
target: "jdbc:oracle:thin:@sample-oracle-db:1521",
173+
metrics: {
174+
rate: 400,
175+
response_time: 1
176+
}
177+
},
178+
{
179+
source: "payment-service",
180+
target: "jdbc:oracle:thin:@sample-oracle-db:1521",
181+
metrics: {
182+
rate: 500,
183+
response_time: 2
184+
}
185+
},
186+
{
187+
source: "https://lb-customer.local",
188+
target: "customer-service-1",
189+
metrics: {
190+
rate: 125,
191+
error_rate: 25,
192+
response_time: 45
193+
}
194+
},
195+
{
196+
source: "https://lb-customer.local",
197+
target: "customer-service-2",
198+
metrics: {
199+
rate: 225,
200+
error_rate: 5,
201+
response_time: 25
202+
}
203+
},
204+
{
205+
source: "customer-service-1",
206+
target: "payment-service",
207+
metrics: {
208+
rate: 125,
209+
error_rate: 100,
210+
response_time: 23
211+
}
212+
},
213+
{
214+
source: "customer-service-2",
215+
target: "payment-service",
216+
metrics: {
217+
rate: 225,
218+
error_rate: 5,
219+
response_time: 22
220+
}
221+
},
222+
{
223+
source: "payment-service",
224+
target: "api.finance.com",
225+
metrics: {
226+
rate: 750,
227+
response_time: 134
228+
}
229+
},
230+
{
231+
source: "inventory-service",
232+
target: "api.productsupplier.com",
233+
metrics: {
234+
rate: 600,
235+
response_time: 83
236+
}
237+
}
238+
]
239+
};
240+
241+
export default graph;

0 commit comments

Comments
 (0)