Skip to content

Commit 3a9b43c

Browse files
jmcarpjmcarp
authored
Change utilization graphs to bar charts. (#45)
h/t @hermanol. <img width="565" height="293" alt="Screenshot 2026-03-24 at 3 05 11 PM" src="https://github.com/user-attachments/assets/63d33981-cbf1-4c03-9113-bac35bec26fe" />
1 parent 05de9f6 commit 3a9b43c

2 files changed

Lines changed: 54 additions & 150 deletions

File tree

‎example/e2e/dashboards.spec.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,13 @@ for (const dashboard of dashboards) {
6565
});
6666

6767
// Assert each panel has rendered content. For panels rendered
68-
// with <canvas>, the canvas shouldn't be empty. For tables,
69-
// there should be >0 rows.
68+
// with <canvas>, the canvas shouldn't be empty. For other panel
69+
// types, there should be >0 matching elements.
70+
const nonCanvasSelectors = [
71+
".unwrapped-log-line", // logs
72+
".rdg-row:not(.rdg-header-row)", // table
73+
"[data-testid='data-testid Bar gauge value']", // bar gauge
74+
];
7075
for (let i = 0; i < dashboard.panels.length; i++) {
7176
const panel = panelLocators.nth(i);
7277
const key = await panel.getAttribute("data-viz-panel-key");
@@ -100,12 +105,10 @@ for (const dashboard of dashboards) {
100105
});
101106
expect(isBlank, `panel ${key} canvas should not be blank`).toBe(false);
102107
} else {
103-
const content = panel.locator(
104-
".unwrapped-log-line, .rdg-row:not(.rdg-header-row)",
105-
);
108+
const content = panel.locator(nonCanvasSelectors.join(", "));
106109
await expect(
107110
content.first(),
108-
`panel ${key} should have log lines or table rows`,
111+
`panel ${key} should have log lines, table rows, or gauge values`,
109112
).toBeAttached({ timeout: 10_000 });
110113
}
111114
}

‎example/grafana/dashboards/quota-utilization.json‎

Lines changed: 45 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -42,43 +42,11 @@
4242
"fieldConfig": {
4343
"defaults": {
4444
"color": {
45-
"mode": "palette-classic"
46-
},
47-
"custom": {
48-
"axisBorderShow": false,
49-
"axisCenteredZero": false,
50-
"axisColorMode": "text",
51-
"axisLabel": "",
52-
"axisPlacement": "auto",
53-
"barAlignment": 0,
54-
"barWidthFactor": 0.6,
55-
"drawStyle": "line",
56-
"fillOpacity": 0,
57-
"gradientMode": "none",
58-
"hideFrom": {
59-
"legend": false,
60-
"tooltip": false,
61-
"viz": false
62-
},
63-
"insertNulls": false,
64-
"lineInterpolation": "linear",
65-
"lineWidth": 1,
66-
"pointSize": 5,
67-
"scaleDistribution": {
68-
"type": "linear"
69-
},
70-
"showPoints": "auto",
71-
"showValues": false,
72-
"spanNulls": false,
73-
"stacking": {
74-
"group": "A",
75-
"mode": "none"
76-
},
77-
"thresholdsStyle": {
78-
"mode": "off"
79-
}
45+
"mode": "continuous-GrYlRd"
8046
},
8147
"mappings": [],
48+
"max": 1,
49+
"min": 0,
8250
"thresholds": {
8351
"mode": "absolute",
8452
"steps": [
@@ -104,17 +72,16 @@
10472
},
10573
"id": 2,
10674
"options": {
107-
"legend": {
108-
"calcs": [],
109-
"displayMode": "list",
110-
"placement": "bottom",
111-
"showLegend": true
75+
"displayMode": "basic",
76+
"namePlacement": "left",
77+
"orientation": "horizontal",
78+
"reduceOptions": {
79+
"calcs": ["lastNotNull"],
80+
"fields": "",
81+
"values": false
11282
},
113-
"tooltip": {
114-
"hideZeros": false,
115-
"mode": "single",
116-
"sort": "none"
117-
}
83+
"showUnfilled": false,
84+
"valueMode": "color"
11885
},
11986
"pluginVersion": "12.2.1",
12087
"targets": [
@@ -125,13 +92,13 @@
12592
},
12693
"editorMode": "code",
12794
"expr": "sort_desc(sum by(silo_name) (silo_utilization_cpu{type=\"provisioned\", oxide_host=\"$oxide_host\", silo_name=~\"$silo_name\"}) / sum by(silo_name) (silo_utilization_cpu{type=\"allocated\", oxide_host=\"$oxide_host\", silo_name=~\"$silo_name\"}))",
128-
"legendFormat": "__auto",
129-
"range": true,
95+
"legendFormat": "{{silo_name}}",
96+
"instant": true,
13097
"refId": "A"
13198
}
13299
],
133100
"title": "Quota utilization (provisioned / allocated)",
134-
"type": "timeseries"
101+
"type": "bargauge"
135102
},
136103
{
137104
"datasource": {
@@ -252,43 +219,11 @@
252219
"fieldConfig": {
253220
"defaults": {
254221
"color": {
255-
"mode": "palette-classic"
256-
},
257-
"custom": {
258-
"axisBorderShow": false,
259-
"axisCenteredZero": false,
260-
"axisColorMode": "text",
261-
"axisLabel": "",
262-
"axisPlacement": "auto",
263-
"barAlignment": 0,
264-
"barWidthFactor": 0.6,
265-
"drawStyle": "line",
266-
"fillOpacity": 0,
267-
"gradientMode": "none",
268-
"hideFrom": {
269-
"legend": false,
270-
"tooltip": false,
271-
"viz": false
272-
},
273-
"insertNulls": false,
274-
"lineInterpolation": "linear",
275-
"lineWidth": 1,
276-
"pointSize": 5,
277-
"scaleDistribution": {
278-
"type": "linear"
279-
},
280-
"showPoints": "auto",
281-
"showValues": false,
282-
"spanNulls": false,
283-
"stacking": {
284-
"group": "A",
285-
"mode": "none"
286-
},
287-
"thresholdsStyle": {
288-
"mode": "off"
289-
}
222+
"mode": "continuous-GrYlRd"
290223
},
291224
"mappings": [],
225+
"max": 1,
226+
"min": 0,
292227
"thresholds": {
293228
"mode": "absolute",
294229
"steps": [
@@ -314,17 +249,16 @@
314249
},
315250
"id": 7,
316251
"options": {
317-
"legend": {
318-
"calcs": [],
319-
"displayMode": "list",
320-
"placement": "bottom",
321-
"showLegend": true
252+
"displayMode": "basic",
253+
"namePlacement": "left",
254+
"orientation": "horizontal",
255+
"reduceOptions": {
256+
"calcs": ["lastNotNull"],
257+
"fields": "",
258+
"values": false
322259
},
323-
"tooltip": {
324-
"hideZeros": false,
325-
"mode": "single",
326-
"sort": "none"
327-
}
260+
"showUnfilled": false,
261+
"valueMode": "color"
328262
},
329263
"pluginVersion": "12.2.1",
330264
"targets": [
@@ -335,13 +269,13 @@
335269
},
336270
"editorMode": "code",
337271
"expr": "sort_desc(sum by(silo_name) (silo_utilization_memory{type=\"provisioned\", oxide_host=\"$oxide_host\", silo_name=~\"$silo_name\"}) / sum by(silo_name) (silo_utilization_memory{type=\"allocated\", oxide_host=\"$oxide_host\", silo_name=~\"$silo_name\"}))",
338-
"legendFormat": "__auto",
339-
"range": true,
272+
"legendFormat": "{{silo_name}}",
273+
"instant": true,
340274
"refId": "A"
341275
}
342276
],
343277
"title": "Quota utilization (provisioned / allocated)",
344-
"type": "timeseries"
278+
"type": "bargauge"
345279
},
346280
{
347281
"datasource": {
@@ -463,43 +397,11 @@
463397
"fieldConfig": {
464398
"defaults": {
465399
"color": {
466-
"mode": "palette-classic"
467-
},
468-
"custom": {
469-
"axisBorderShow": false,
470-
"axisCenteredZero": false,
471-
"axisColorMode": "text",
472-
"axisLabel": "",
473-
"axisPlacement": "auto",
474-
"barAlignment": 0,
475-
"barWidthFactor": 0.6,
476-
"drawStyle": "line",
477-
"fillOpacity": 0,
478-
"gradientMode": "none",
479-
"hideFrom": {
480-
"legend": false,
481-
"tooltip": false,
482-
"viz": false
483-
},
484-
"insertNulls": false,
485-
"lineInterpolation": "linear",
486-
"lineWidth": 1,
487-
"pointSize": 5,
488-
"scaleDistribution": {
489-
"type": "linear"
490-
},
491-
"showPoints": "auto",
492-
"showValues": false,
493-
"spanNulls": false,
494-
"stacking": {
495-
"group": "A",
496-
"mode": "none"
497-
},
498-
"thresholdsStyle": {
499-
"mode": "off"
500-
}
400+
"mode": "continuous-GrYlRd"
501401
},
502402
"mappings": [],
403+
"max": 1,
404+
"min": 0,
503405
"thresholds": {
504406
"mode": "absolute",
505407
"steps": [
@@ -525,17 +427,16 @@
525427
},
526428
"id": 4,
527429
"options": {
528-
"legend": {
529-
"calcs": [],
530-
"displayMode": "list",
531-
"placement": "bottom",
532-
"showLegend": true
430+
"displayMode": "basic",
431+
"namePlacement": "left",
432+
"orientation": "horizontal",
433+
"reduceOptions": {
434+
"calcs": ["lastNotNull"],
435+
"fields": "",
436+
"values": false
533437
},
534-
"tooltip": {
535-
"hideZeros": false,
536-
"mode": "single",
537-
"sort": "none"
538-
}
438+
"showUnfilled": false,
439+
"valueMode": "color"
539440
},
540441
"pluginVersion": "12.2.1",
541442
"targets": [
@@ -546,13 +447,13 @@
546447
},
547448
"editorMode": "code",
548449
"expr": "sort_desc(sum by(silo_name) (silo_utilization_disk{type=\"provisioned\", oxide_host=\"$oxide_host\", silo_name=~\"$silo_name\"}) / sum by(silo_name) (silo_utilization_disk{type=\"allocated\", oxide_host=\"$oxide_host\", silo_name=~\"$silo_name\"}))",
549-
"legendFormat": "__auto",
550-
"range": true,
450+
"legendFormat": "{{silo_name}}",
451+
"instant": true,
551452
"refId": "A"
552453
}
553454
],
554455
"title": "Quota utilization (provisioned / allocated)",
555-
"type": "timeseries"
456+
"type": "bargauge"
556457
},
557458
{
558459
"datasource": {

0 commit comments

Comments
 (0)