Sessions page: add status/author filters and sortable columns

[quay-devel]

Problem

The full sessions table (sessions-section.tsx) only supports free-text search. There's no way to filter by status or author, and the sort order is hardcoded to newest-first. In projects with many sessions across multiple collaborators, finding specific sessions requires scrolling through pages or guessing search terms.

Current State

Frontend (components/frontend/src/components/workspace-sections/sessions-section.tsx):

• Text search input (debounced 300ms, sent as search query param)
• Offset-based pagination (20 per page)
• Table columns: status dot, name, status, model, created, creator, artifacts, actions
• No structured filters, no sortable column headers

Backend (components/backend/handlers/sessions.go, ListSessions):

• PaginationParams supports only: limit, offset, search, continue
• Fetches all CRs from K8s into memory, then applies search filter and sorts by creationTimestamp desc
• No phase, userId, sortBy, or sortDirection query params
• Since all items are loaded before paginating, adding server-side filters is low-cost

API layer (components/frontend/src/services/api/sessions.ts, components/frontend/src/types/api/common.ts):

• PaginationParams type: { limit, offset, search, continue }
• listSessionsPaginated() builds query string from these params

Why server-side filtering matters

Filters must be applied server-side (not client-side) because the table is paginated. Client-side filtering of page 1 would silently miss matching sessions on subsequent pages, giving incorrect results.

Proposal

1. Status filter (high value)

Filter chips or a dropdown above the table to filter sessions by phase. The most useful groupings:

Filter	Phases included
Active	Running, Pending, Creating
Completed	Completed, Stopped
Failed	Failed

• Multiple statuses selectable simultaneously
• Active filters shown as removable chips
• Default: all (no filter applied)

Backend: add ?phase=Running,Pending query param (comma-separated, applied before pagination)

2. Author filter (high value)

A "My sessions" toggle or a creator dropdown.

• Toggle filters by spec.userContext.userId == <authenticated user>
• Could later extend to a dropdown listing all creators in the project

Backend: add ?userId=<id> query param (filter on spec.userContext.userId)

3. Sortable columns (medium value)

Make the "Created" column header clickable to toggle sort direction (desc/asc). The backend already sorts — just needs to respect a direction param.

• Visual indicator (arrow icon) on the active sort column
• Default: created desc (current behavior)
• Future: extend to name, status, creator columns

Backend: add ?sortBy=created&sortDirection=desc query params

4. Filter bar UX

Combine search + filters into a cohesive bar:

┌──────────────────────────────────────────────────────────┐
│ 🔍 Search sessions...    [Status ▾]  [👤 My sessions]   │
│ Active filters: [Running ✕] [My sessions ✕]             │
└──────────────────────────────────────────────────────────┘

• Persist filter state in URL query params for shareability and browser back/forward
• Reset pagination offset when any filter changes (already done for search)

Implementation Plan

Backend changes (components/backend/)

1. Extend types.PaginationParams with Phase, UserID, SortBy, SortDirection fields
2. In ListSessions: apply phase/userId filters after search, before sort
3. Make sort direction configurable (currently hardcoded desc)

Frontend changes (components/frontend/)

1. Extend PaginationParams type with phase, userId, sortBy, sortDirection
2. Update listSessionsPaginated() to pass new query params
3. Update useSessionsPaginated hook to accept filter params
4. Add filter UI components to SessionsSection header
5. Wire filter state to URL search params for persistence

Key Files

• components/frontend/src/components/workspace-sections/sessions-section.tsx — sessions table
• components/frontend/src/services/api/sessions.ts — API client
• components/frontend/src/services/queries/use-sessions.ts — React Query hooks
• components/frontend/src/types/api/common.ts — PaginationParams type
• components/backend/handlers/sessions.go — ListSessions handler
• components/backend/types/types.go — PaginationParams struct

Related

• Sessions sidenav: add filtering by author and status #1510 — Sidenav recents filtering (lighter-weight, client-side approach for the sidebar)