Executive Dashboard

The Executive Dashboard provides a high-level overview of platform health, usage metrics, cost allocation, and key performance indicators for platform administrators and tenant executives. It aggregates data from multiple backend services into a single unified view.

Dashboard Layout

The dashboard is organized into four sections:

KPI Cards

Usage Charts

Time-series visualizations powered by TanStack Query for data fetching and Recharts for rendering:

Health Indicators

Service health is polled from the Observability API:

Health Status

Data Fetching

const useDashboardMetrics = (timeRange: string) => {
  return useQuery({
    queryKey: ['dashboard-metrics', timeRange],
    queryFn: () => apiClient.get('/api/v1/metrics/dashboard', {
      params: { time_range: timeRange }
    }),
    refetchInterval: 30000, // Refresh every 30 seconds
  });
};

Real-Time Updates

The dashboard uses WebSocket connections for real-time metric updates:

Permissions