Skip to content

Commit 432b30a

Browse files
dyc3dyc3
committed
vis: implement RegionView (#1331)
* render region view * update provisioned dashboard * improve node layout a little * fix lints * remove unused code and add a test * fix lints
1 parent 5c5c00a commit 432b30a

File tree

6 files changed

+228
-82
lines changed

6 files changed

+228
-82
lines changed

‎packages/ott-vis/provisioning/dashboards/dashboard.json

+105-74
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"editable": true,
1919
"fiscalYearStartMonth": 0,
2020
"graphTooltip": 0,
21-
"id": 1,
2221
"links": [],
2322
"liveNow": false,
2423
"panels": [
@@ -37,7 +36,8 @@
3736
"options": {
3837
"seriesCountSize": "sm",
3938
"showSeriesCount": false,
40-
"text": "Default value of text input option"
39+
"text": "Default value of text input option",
40+
"view": "global"
4141
},
4242
"targets": [
4343
{
@@ -49,87 +49,39 @@
4949
"refId": "A"
5050
}
5151
],
52-
"title": "Panel Title",
52+
"title": "Global",
5353
"type": "ott-vis-panel"
5454
},
5555
{
5656
"datasource": {
57-
"type": "datasource",
57+
"type": "grafana",
5858
"uid": "grafana"
5959
},
60-
"fieldConfig": {
61-
"defaults": {
62-
"color": {
63-
"mode": "palette-classic"
64-
},
65-
"custom": {
66-
"axisCenteredZero": false,
67-
"axisColorMode": "text",
68-
"axisLabel": "",
69-
"axisPlacement": "auto",
70-
"barAlignment": 0,
71-
"drawStyle": "line",
72-
"fillOpacity": 0,
73-
"gradientMode": "none",
74-
"hideFrom": {
75-
"legend": false,
76-
"tooltip": false,
77-
"viz": false
78-
},
79-
"lineInterpolation": "linear",
80-
"lineWidth": 1,
81-
"pointSize": 5,
82-
"scaleDistribution": {
83-
"type": "linear"
84-
},
85-
"showPoints": "auto",
86-
"spanNulls": false,
87-
"stacking": {
88-
"group": "A",
89-
"mode": "none"
90-
},
91-
"thresholdsStyle": {
92-
"mode": "off"
93-
}
94-
},
95-
"mappings": [],
96-
"thresholds": {
97-
"mode": "absolute",
98-
"steps": [
99-
{
100-
"color": "green",
101-
"value": null
102-
},
103-
{
104-
"color": "red",
105-
"value": 80
106-
}
107-
]
108-
}
109-
},
110-
"overrides": []
111-
},
11260
"gridPos": {
11361
"h": 8,
11462
"w": 12,
11563
"x": 12,
11664
"y": 0
11765
},
118-
"id": 3,
66+
"id": 5,
11967
"options": {
120-
"legend": {
121-
"calcs": [],
122-
"displayMode": "list",
123-
"placement": "bottom",
124-
"showLegend": true
125-
},
126-
"tooltip": {
127-
"mode": "single",
128-
"sort": "none"
129-
}
68+
"seriesCountSize": "sm",
69+
"showSeriesCount": false,
70+
"text": "Default value of text input option",
71+
"view": "region"
13072
},
131-
"title": "Latency",
132-
"type": "timeseries"
73+
"targets": [
74+
{
75+
"datasource": {
76+
"type": "datasource",
77+
"uid": "grafana"
78+
},
79+
"queryType": "randomWalk",
80+
"refId": "A"
81+
}
82+
],
83+
"title": "Region",
84+
"type": "ott-vis-panel"
13385
},
13486
{
13587
"datasource": {
@@ -167,7 +119,7 @@
167119
},
168120
"gridPos": {
169121
"h": 8,
170-
"w": 12,
122+
"w": 9,
171123
"x": 0,
172124
"y": 8
173125
},
@@ -296,8 +248,8 @@
296248
},
297249
"gridPos": {
298250
"h": 8,
299-
"w": 12,
300-
"x": 12,
251+
"w": 7,
252+
"x": 9,
301253
"y": 8
302254
},
303255
"id": 2,
@@ -315,6 +267,85 @@
315267
},
316268
"title": "Traffic",
317269
"type": "timeseries"
270+
},
271+
{
272+
"datasource": {
273+
"type": "datasource",
274+
"uid": "grafana"
275+
},
276+
"fieldConfig": {
277+
"defaults": {
278+
"color": {
279+
"mode": "palette-classic"
280+
},
281+
"custom": {
282+
"axisCenteredZero": false,
283+
"axisColorMode": "text",
284+
"axisLabel": "",
285+
"axisPlacement": "auto",
286+
"barAlignment": 0,
287+
"drawStyle": "line",
288+
"fillOpacity": 0,
289+
"gradientMode": "none",
290+
"hideFrom": {
291+
"legend": false,
292+
"tooltip": false,
293+
"viz": false
294+
},
295+
"lineInterpolation": "linear",
296+
"lineWidth": 1,
297+
"pointSize": 5,
298+
"scaleDistribution": {
299+
"type": "linear"
300+
},
301+
"showPoints": "auto",
302+
"spanNulls": false,
303+
"stacking": {
304+
"group": "A",
305+
"mode": "none"
306+
},
307+
"thresholdsStyle": {
308+
"mode": "off"
309+
}
310+
},
311+
"mappings": [],
312+
"thresholds": {
313+
"mode": "absolute",
314+
"steps": [
315+
{
316+
"color": "green",
317+
"value": null
318+
},
319+
{
320+
"color": "red",
321+
"value": 80
322+
}
323+
]
324+
}
325+
},
326+
"overrides": []
327+
},
328+
"gridPos": {
329+
"h": 8,
330+
"w": 8,
331+
"x": 16,
332+
"y": 8
333+
},
334+
"id": 3,
335+
"options": {
336+
"legend": {
337+
"calcs": [],
338+
"displayMode": "list",
339+
"placement": "bottom",
340+
"showLegend": true
341+
},
342+
"tooltip": {
343+
"mode": "single",
344+
"sort": "none"
345+
}
346+
},
347+
"title": "Latency",
348+
"type": "timeseries"
318349
}
319350
],
320351
"refresh": "",
@@ -330,8 +361,8 @@
330361
},
331362
"timepicker": {},
332363
"timezone": "",
333-
"title": "Provisioned visualization-prototype dashboard",
364+
"title": "Provisioned ott-vis dashboard",
334365
"uid": "c5ea3bcd-f966-47d8-8456-4536ddc45ff0",
335-
"version": 6,
366+
"version": 1,
336367
"weekStart": ""
337368
}

‎packages/ott-vis/src/aggregate.spec.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { SystemState } from "types";
2-
import { aggMonolithRooms, countRoomClients } from "./aggregate";
2+
import { aggMonolithRooms, countRoomClients, groupMonolithsByRegion } from "./aggregate";
33

44
const sampleSystemState: SystemState = [
55
{
@@ -93,4 +93,11 @@ describe("aggregation helpers", () => {
9393
"0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac": ["qux"],
9494
});
9595
});
96+
97+
it("groups monoliths by region", () => {
98+
expect(groupMonolithsByRegion(sampleSystemState)).toEqual({
99+
ewr: ["2bd5e4a7-14f6-4da4-bedd-72946864a7bf", "419580cb-f576-4314-8162-45340c94bae1"],
100+
cdg: ["0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac"],
101+
});
102+
});
96103
});

‎packages/ott-vis/src/aggregate.ts

+12
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,15 @@ export function aggMonolithRooms(state: SystemState): Record<string, string[]> {
3434
}
3535
return Object.fromEntries(Object.entries(roomClients).map(([k, v]) => [k, Array.from(v)]));
3636
}
37+
38+
export function groupMonolithsByRegion(state: SystemState): Record<string, string[]> {
39+
const regionMonoliths: Record<string, Set<string>> = {};
40+
for (const balancer of state) {
41+
for (const monolith of balancer.monoliths) {
42+
const s = regionMonoliths[monolith.region] ?? new Set();
43+
s.add(monolith.id);
44+
regionMonoliths[monolith.region] = s;
45+
}
46+
}
47+
return Object.fromEntries(Object.entries(regionMonoliths).map(([k, v]) => [k, Array.from(v)]));
48+
}

‎packages/ott-vis/src/components/ForceGraph.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,12 @@ const ForceGraph: React.FC<ForceGraphProps> = ({
5353
d3.forceLink<Node, Link>(links).id(d => d.id)
5454
)
5555
.force("charge", d3.forceManyBody())
56-
.force("x", d3.forceX())
57-
.force("y", d3.forceY());
56+
.force("center", d3.forceCenter())
57+
.force("radial", d3.forceRadial(100))
58+
.force(
59+
"collide",
60+
d3.forceCollide(d => d.radius)
61+
);
5862

5963
useEffect(() => {
6064
const svg = d3

‎packages/ott-vis/src/components/views/GlobalView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function buildGraph(state: SystemState): [Node[], Link[]] {
5050
radius: 7,
5151
x: 0,
5252
y: 0,
53-
group: "Room",
53+
group: "room",
5454
color: "Blue", // TODO: use color from grafana theme/panel options
5555
};
5656
nodes.push(roomNode);
@@ -69,7 +69,7 @@ function buildGraph(state: SystemState): [Node[], Link[]] {
6969
radius: 4,
7070
x: 0,
7171
y: 0,
72-
group: "Client",
72+
group: "client",
7373
color: "Blue", // TODO: use color from grafana theme/panel options
7474
};
7575
nodes.push(clientNode);

0 commit comments

Comments
 (0)