mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
Michael Suchacz
cf24c59b56
## What Replace the hardcoded 30-day date window on the Agents Settings Usage page (`/agents/settings/usage`) with an interactive date-range picker. ## Why The usage page previously showed a static 30-day lookback with no way for admins to adjust the time window. The backend API already supports `start_date`/`end_date` parameters — only the frontend was missing the controls. ## How - Reuse the existing `DateRange` picker component from Template Insights - Store selected dates in URL search params (`startDate`/`endDate`) for persistence across navigation - Default to last 30 days when no params are present - Memoize date range for stable React Query keys - Both the user list and per-user drill-in views respect the selected range - Normalize exclusive end-date boundaries for display - Preset clicks (Last 7 days, etc.) apply immediately with a single click - Semi-transparent loading overlay during data refetch ## Changes - `site/src/pages/AgentsPage/SettingsPageContent.tsx` — Replace hardcoded range with interactive picker, URL param state, memoized params, refetch overlay - `site/src/pages/AgentsPage/SettingsPageContent.stories.tsx` — Add stories for date filter interaction, preset single-click, and refetch overlay - `site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx` — Detect preset clicks and apply immediately (single-click) instead of requiring two clicks ## Validation - TypeScript ✅ - Biome lint ✅ - Storybook tests 13/13 ✅ - Visual verification via Storybook ✅