monitoring(overview): add fixed labels to canvas 2x2 stat cards

This commit is contained in:
Brad Stein 2026-04-13 00:21:56 -03:00
parent e6785f7db1
commit f2aab54884
3 changed files with 643 additions and 37 deletions

View File

@ -1000,9 +1000,35 @@ def canvas_metric_grid_panel(
links=None,
description=None,
metric_size=26,
label_size=12,
):
"""Return a canvas panel with a deterministic 2x2 metric layout."""
def text_element(name, text, left, top):
return {
"type": "text",
"name": name,
"constraint": {"horizontal": "left", "vertical": "top"},
"placement": {
"left": left,
"top": top,
"width": 146,
"height": 14,
},
"background": {"color": {"fixed": "transparent"}},
"border": {"color": {"fixed": "transparent"}},
"config": {
"align": "left",
"valign": "middle",
"size": label_size,
"color": {"fixed": "text"},
"text": {
"fixed": text,
},
},
"links": [],
}
def metric_element(name, field, left, top):
return {
"type": "metric-value",
@ -1012,7 +1038,7 @@ def canvas_metric_grid_panel(
"left": left,
"top": top,
"width": 146,
"height": 48,
"height": 42,
},
"background": {"color": {"fixed": "transparent"}},
"border": {"color": {"fixed": "transparent"}},
@ -1060,10 +1086,14 @@ def canvas_metric_grid_panel(
"type": "frame",
"name": f"{title} frame",
"elements": [
metric_element("Cell 1", targets[0]["legendFormat"], 10, 14),
metric_element("Cell 2", targets[1]["legendFormat"], 166, 14),
metric_element("Cell 3", targets[2]["legendFormat"], 10, 72),
metric_element("Cell 4", targets[3]["legendFormat"], 166, 72),
text_element("Cell 1 label", targets[0]["legendFormat"], 10, 6),
metric_element("Cell 1", targets[0]["legendFormat"], 10, 20),
text_element("Cell 2 label", targets[1]["legendFormat"], 166, 6),
metric_element("Cell 2", targets[1]["legendFormat"], 166, 20),
text_element("Cell 3 label", targets[2]["legendFormat"], 10, 64),
metric_element("Cell 3", targets[2]["legendFormat"], 10, 78),
text_element("Cell 4 label", targets[3]["legendFormat"], 166, 64),
metric_element("Cell 4", targets[3]["legendFormat"], 166, 78),
],
"background": {"color": {"fixed": "transparent"}},
"border": {"color": {"fixed": "transparent"}},

View File

@ -1166,6 +1166,42 @@
"type": "frame",
"name": "UPS Current Load frame",
"elements": [
{
"type": "text",
"name": "Cell 1 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Pyrphoros Draw"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 1",
@ -1175,9 +1211,9 @@
},
"placement": {
"left": 10,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1205,6 +1241,42 @@
},
"links": []
},
{
"type": "text",
"name": "Cell 2 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Pyrphoros Runtime"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 2",
@ -1214,9 +1286,9 @@
},
"placement": {
"left": 166,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1244,6 +1316,42 @@
},
"links": []
},
{
"type": "text",
"name": "Cell 3 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Statera Draw"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 3",
@ -1253,9 +1361,9 @@
},
"placement": {
"left": 10,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1283,6 +1391,42 @@
},
"links": []
},
{
"type": "text",
"name": "Cell 4 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Statera Runtime"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 4",
@ -1292,9 +1436,9 @@
},
"placement": {
"left": 166,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1518,6 +1662,42 @@
"type": "frame",
"name": "Current Climate frame",
"elements": [
{
"type": "text",
"name": "Cell 1 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Temp \u00b0C"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 1",
@ -1527,9 +1707,9 @@
},
"placement": {
"left": 10,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1557,6 +1737,42 @@
},
"links": []
},
{
"type": "text",
"name": "Cell 2 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Temp \u00b0F"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 2",
@ -1566,9 +1782,9 @@
},
"placement": {
"left": 166,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1596,6 +1812,42 @@
},
"links": []
},
{
"type": "text",
"name": "Cell 3 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Humidity"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 3",
@ -1605,9 +1857,9 @@
},
"placement": {
"left": 10,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1635,6 +1887,42 @@
},
"links": []
},
{
"type": "text",
"name": "Cell 4 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Pressure"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 4",
@ -1644,9 +1932,9 @@
},
"placement": {
"left": 166,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {

View File

@ -1175,6 +1175,42 @@ data:
"type": "frame",
"name": "UPS Current Load frame",
"elements": [
{
"type": "text",
"name": "Cell 1 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Pyrphoros Draw"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 1",
@ -1184,9 +1220,9 @@ data:
},
"placement": {
"left": 10,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1214,6 +1250,42 @@ data:
},
"links": []
},
{
"type": "text",
"name": "Cell 2 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Pyrphoros Runtime"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 2",
@ -1223,9 +1295,9 @@ data:
},
"placement": {
"left": 166,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1253,6 +1325,42 @@ data:
},
"links": []
},
{
"type": "text",
"name": "Cell 3 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Statera Draw"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 3",
@ -1262,9 +1370,9 @@ data:
},
"placement": {
"left": 10,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1292,6 +1400,42 @@ data:
},
"links": []
},
{
"type": "text",
"name": "Cell 4 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Statera Runtime"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 4",
@ -1301,9 +1445,9 @@ data:
},
"placement": {
"left": 166,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1527,6 +1671,42 @@ data:
"type": "frame",
"name": "Current Climate frame",
"elements": [
{
"type": "text",
"name": "Cell 1 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Temp \u00b0C"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 1",
@ -1536,9 +1716,9 @@ data:
},
"placement": {
"left": 10,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1566,6 +1746,42 @@ data:
},
"links": []
},
{
"type": "text",
"name": "Cell 2 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 6,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Temp \u00b0F"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 2",
@ -1575,9 +1791,9 @@ data:
},
"placement": {
"left": 166,
"top": 14,
"top": 20,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1605,6 +1821,42 @@ data:
},
"links": []
},
{
"type": "text",
"name": "Cell 3 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 10,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Humidity"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 3",
@ -1614,9 +1866,9 @@ data:
},
"placement": {
"left": 10,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {
@ -1644,6 +1896,42 @@ data:
},
"links": []
},
{
"type": "text",
"name": "Cell 4 label",
"constraint": {
"horizontal": "left",
"vertical": "top"
},
"placement": {
"left": 166,
"top": 64,
"width": 146,
"height": 14
},
"background": {
"color": {
"fixed": "transparent"
}
},
"border": {
"color": {
"fixed": "transparent"
}
},
"config": {
"align": "left",
"valign": "middle",
"size": 12,
"color": {
"fixed": "text"
},
"text": {
"fixed": "Pressure"
}
},
"links": []
},
{
"type": "metric-value",
"name": "Cell 4",
@ -1653,9 +1941,9 @@ data:
},
"placement": {
"left": 166,
"top": 72,
"top": 78,
"width": 146,
"height": 48
"height": 42
},
"background": {
"color": {