DevOps Dashboard

DevOps Dashboard
TypeScript React Kubernetes Prometheus

DevOps Dashboard is a single-page application that aggregates metrics from Prometheus and the Kubernetes API to give platform engineers a unified view of cluster health, deployment status, and service-level indicators. The UI renders a live node graph of the cluster topology and overlays CPU, memory, and error-rate time series directly onto service nodes — eliminating the context switching between Grafana dashboards and kubectl.

On the frontend, React Query manages data fetching with a 15-second polling interval and optimistic cache updates so the graph never flickers on refresh. The Kubernetes node graph is rendered with a custom force-directed layout using D3.js, with edges color-coded by traffic volume derived from Prometheus counters. All metric queries are expressed as PromQL and evaluated server-side to keep the client bundle small.

The project eliminated the need for four separate Grafana dashboards that the team had been maintaining. Deployment health checks that previously took 3–5 minutes of manual kubectl inspection are now visible at a glance. The dashboard is deployed as a Kubernetes Deployment behind an Ingress and auto-updates its own metrics in the cluster topology view.

← All Projects