---
id: w3/m4.5/t003
title: "Network filters: Status Code dropdown (metricsFilters) + Group by on Total Requests"
worker: worker3
status: done
estimate: 45m
depends_on: []
---

## Objective

Add the two Render network-metric controls the backend already supports: a Status Code filter (populated from real discovered values) and a Group-by (All requests / Status / Method) on the Total Requests chart.

## Context

- Render's toolbar: `Status Code: All`, `Host: All`, `Path: All` dropdowns above Network Metrics, and a per-chart `Group by: All requests` on Total Requests. Host/Path are out of scope (backend can't apply them — documented deviation).
- Backend, all shipped in w3/m2: GraphQL `metricsFilters` returns discovered `STATUS_CODE` values for the app; `metrics(query: {...})` accepts `statusCode` ("2xx"/"5xx"/exact) and `groupBy` ("status"/"method"), returning one labeled series per group.
- `dashboard/src/features/metrics/components/metrics-filters.tsx` holds the existing toolbar (range buttons, Percentage/Total tabs, percentile select) — add the new controls there; the bar chart must render grouped series as stacked or colored-per-series bars (svg-bar-chart currently draws one series).

## Steps

1. Query `metricsFilters` for STATUS_CODE values; render the dropdown (All + 2xx/4xx/5xx classes + discovered exact codes) and thread `statusCode` into the request-metric queries.
2. Add the Group-by control on Total Requests; render multi-series output with a small legend (per-status/method colors).
3. Empty-value handling: no discovered codes ⇒ dropdown shows only the class presets.

## Files

- `dashboard/src/features/metrics/components/metrics-filters.tsx`
- `dashboard/src/features/metrics/components/network-metrics-card.tsx`
- `dashboard/src/features/metrics/components/svg-bar-chart.tsx`
- `dashboard/src/features/metrics/hooks/use-metrics.ts`

## Acceptance criteria

- [ ] Selecting `5xx` (or an exact code) visibly changes Total Requests/Bandwidth to the filtered subset on live data.
- [ ] Group by Status renders one colored series per status code with a legend; Group by Method likewise.
- [ ] No Host/Path controls appear (documented deviation, not dead UI).

## Out of scope

- Host/Path filters; event overlays.
