Service dashboard
A data-dense dashboard: a KPI stat strip, a health Gauge, resource Meters, and a services DataTable — all bound to one data model.
[ { "createSurface": { "surfaceId": "main", "catalogId": "urn:flab-ui:a2ui:catalog:v1" }, "version": "v1.0" }, { "updateComponents": { "surfaceId": "main", "components": [ { "id": "root", "component": "Column", "children": [ "title", "stats", "charts", "table" ], "gap": "lg" }, { "id": "title", "component": "Text", "text": "Service dashboard", "variant": "title" }, { "id": "stats", "component": "Row", "children": [ "s1", "s2", "s3" ], "gap": "lg" }, { "id": "s1", "component": "Stat", "label": "Active users", "value": { "path": "/stats/users" }, "hint": "+12%" }, { "id": "s2", "component": "Stat", "label": "Avg latency", "value": { "path": "/stats/latency" }, "hint": "On target" }, { "id": "s3", "component": "Stat", "label": "Error rate", "value": { "path": "/stats/errors" }, "hint": "-0.1%" }, { "id": "charts", "component": "Row", "children": [ "gauge", "meters" ], "gap": "lg", "align": "stretch" }, { "id": "gauge", "component": "Gauge", "value": { "path": "/health" }, "max": 100, "caption": "Health", "tone": "success" }, { "id": "meters", "component": "Column", "children": [ "m1", "m2", "m3" ], "gap": "md" }, { "id": "m1", "component": "Meter", "label": "CPU", "value": { "path": "/usage/cpu" }, "valueLabel": { "path": "/usage/cpuLabel" }, "tone": "info" }, { "id": "m2", "component": "Meter", "label": "Memory", "value": { "path": "/usage/mem" }, "valueLabel": { "path": "/usage/memLabel" }, "tone": "warning" }, { "id": "m3", "component": "Meter", "label": "Disk", "value": { "path": "/usage/disk" }, "valueLabel": { "path": "/usage/diskLabel" }, "tone": "neutral" }, { "id": "table", "component": "DataTable", "columns": [ { "key": "service", "header": "Service" }, { "key": "status", "header": "Status" }, { "key": "p99", "header": "p99" } ], "rows": { "path": "/services" } } ] }, "version": "v1.0" }, { "updateDataModel": { "surfaceId": "main", "value": { "stats": { "users": "1,284", "latency": "120ms", "errors": "0.4%" }, "health": 82, "usage": { "cpu": 63, "cpuLabel": "63%", "mem": 78, "memLabel": "78%", "disk": 41, "diskLabel": "41%" }, "services": [ { "service": "api", "status": "healthy", "p99": "180ms" }, { "service": "worker", "status": "healthy", "p99": "90ms" }, { "service": "database", "status": "degraded", "p99": "420ms" } ] } }, "version": "v1.0" }]Rendered with Flab components
Service dashboard
Active users
1,284+12%
Avg latency
120msOn target
Error rate
0.4%-0.1%
82Health
CPU63%
Memory78%
Disk41%
| api | healthy | 180ms |
| worker | healthy | 90ms |
| database | degraded | 420ms |