Lightweight GPU utilization histogram widget for AbstractFramework clients (polls AbstractGateway host metrics with Bearer auth).
npm install @abstractframework/monitor-gpuSmall, dependency-free GPU utilization widget that renders a mini histogram and polls a secured backend endpoint.
In AbstractFramework deployments, the default backend endpoint is AbstractGateway:
- GET /api/gateway/host/metrics/gpu
- Auth: Authorization: Bearer
- Workspace: add a dependency on @abstractframework/monitor-gpu
- npm (once published): npm i @abstractframework/monitor-gpu
``js
import { registerMonitorGpuWidget } from "@abstractframework/monitor-gpu";
registerMonitorGpuWidget(); // defines
const el = document.createElement("monitor-gpu");
el.baseUrl = "http://localhost:8080"; // optional (defaults to same-origin)
el.token = "your-gateway-token"; // or el.getToken = async () => ...
el.tickMs = 1500;
el.historySize = 20;
el.mode = "full"; // "full" | "icon"
document.body.appendChild(el);
`
You can also set the non-secret options via attributes:
`html`
`js
import { createMonitorGpuWidget } from "@abstractframework/monitor-gpu";
const widget = createMonitorGpuWidget(document.querySelector("#gpu"), {
baseUrl: "http://localhost:8080",
token: "your-gateway-token",
tickMs: 1500,
historySize: 20,
});
// later
widget.destroy();
`
The widget treats the GPU metrics payload as “supported” unless supported === false and extracts utilization via extractUtilizationGpuPct(payload):
- payload.utilization_gpu_pct (number) orpayload.gpus[][].utilization_gpu_pct
- (numbers; averaged)
Minimal examples:
`json`
{ "supported": true, "utilization_gpu_pct": 23.0 }
`json`
{ "supported": true, "gpus": [{ "utilization_gpu_pct": 10.0 }, { "utilization_gpu_pct": 36.0 }] }
If supported=false, the widget shows N/A.
includes your UI origin (and serve behind HTTPS in production).Tests
`bash
cd monitor-gpu
npm test
`Related docs
docs/getting-started.md
- API reference: docs/api.md
- Architecture: docs/architecture.md`