ss-tools/specs/007-migration-dashboard-grid/research.md

Research: Migration Dashboard Grid

Unknowns & Clarifications

1. Pagination vs Client-side Filtering

Context: The spec mentions "Client-side (Fetch all, filter locally)" (FR-004) but also "Pagination (e.g., 20 per page)" (FR-008). Resolution:

• We will fetch ALL dashboard metadata from the Superset API in one go. The metadata (ID, Title, Status, Date) is lightweight. Even for 1000 dashboards, the payload is small (~100KB).
• Client-side Pagination: We will implement pagination purely on the frontend. This satisfies "Pagination" for UI performance/usability while keeping the "Fetch all" requirement for fast filtering.
• Decision: Fetch all, paginate locally.

2. Superset API for Dashboard Metadata

Context: Need to fetch title, changed_on, published. Research:

• Superset API endpoint: /api/v1/dashboard/
• Standard response includes result array with dashboard_title, changed_on_utc, published.
• Decision: Use GET /api/v1/dashboard/ with q parameter to select specific columns to minimize payload.
  • Columns: id, dashboard_title, changed_on_utc, published.

3. Grid Component

Context: Need a grid with sorting, filtering, and selection. Options:

• Custom Svelte Table: Lightweight, full control.
• 3rd Party Lib (e.g. svelte-headless-table): Powerful but maybe overkill.
• Decision: Custom Svelte Component (DashboardGrid.svelte).
  • Why: Requirements are specific (Select All across pages, custom status pill, specific columns). A custom component using standard HTML table + Tailwind is simple and maintainable for this scope.

Design Decisions

Data Model

• Dashboard:
  • id: string (or int, depends on Superset version, usually int for dashboards but we treat as ID)
  • title: string
  • last_modified: string (ISO date)
  • status: 'published' | 'draft'

Architecture

• Backend:
  • SupersetClient.get_dashboards(): Fetches list from Superset.
  • GET /api/environments/{id}/dashboards: Proxy endpoint.
• Frontend:
  • DashboardGrid.svelte: Handles display, sorting, pagination, and selection logic.
  • migration/+page.svelte: Orchestrates fetching and passes data to Grid.

UX/UI

• Status Column: Badge (Green for Published, Gray for Draft).
• Selection: Checkbox in first column.
• Pagination: Simple "Prev 1 of 5 Next" controls at bottom.