test(dashboards): type scatter prune fixtures

Bindings the edited query no longer produces are cleared so the save matches the
preview's fallback columns instead of failing API validation.

.claude/agents/playwright-test-generator.md

@@ -1,7 +1,7 @@
 ---
 name: playwright-test-generator
-description: Use this agent to convert a SigNoz E2E test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Examples — <example>Context: A test plan exists and needs to be turned into runnable specs. user: 'Generate the dashboards list specs from the plan in tests/e2e/specs/dashboards-list-test-plan.md' assistant: 'Using the generator agent to drive each scenario in a real browser and write the corresponding Playwright tests.'</example>
-tools: Glob, Grep, Read, Bash, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
+description: Use this agent to convert a SigNoz E2E test plan into Playwright spec files under `tests/e2e/tests/<feature>/`, adding or extending the feature's driver under `tests/e2e/drivers/`. Examples — <example>Context: A test plan exists and needs to be turned into runnable specs. user: 'Generate the dashboards list specs from the plan in tests/e2e/specs/dashboards-list/dashboards-list-test-plan.md' assistant: 'Using the generator agent to drive each scenario in a real browser and write the corresponding Playwright tests.'</example>
+tools: Glob, Grep, Read, Write, Edit, Bash, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
 model: sonnet
 color: blue
 ---
@@ -10,17 +10,23 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
 
 # Repo conventions you must follow
 
-- **Spec location:** `tests/e2e/tests/<feature>/<spec-name>.spec.ts`. One file per resource; cross-resource concerns get their own file. Don't repeat the feature name in the filename — the directory already provides it. `dashboards/list.spec.ts`, not `dashboards/dashboards-list.spec.ts`.
-- **Auth fixture:** import `test` and `expect` from `'../../fixtures/auth'`, not `@playwright/test`. Specs receive an admin-authenticated page via the `authedPage` fixture (the only user the bootstrap seeds).
+- **Spec location:** `tests/e2e/tests/<feature>/<spec-name>.spec.ts`. One file per resource; cross-resource concerns get their own file. Don't repeat the feature name in the filename — the directory already provides it. `dashboards/list/search.spec.ts`, not `dashboards/list/dashboards-list-search.spec.ts`.
+- **Drivers first.** New specs import `test`, `expect` and constants from one driver module in [tests/e2e/drivers/](../../tests/e2e/drivers/) and receive the feature's driver as a fixture. A spec never passes `page` around.
   ```ts
-  import { test, expect } from '../../fixtures/auth';
+  import { expect, PATH, test } from '../../drivers/routing';
 
-  test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
-    await page.goto('/alerts');
-    await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
+  test('TC-09 RouteTab switches the url', async ({ routing }) => {
+    await routing.goto(PATH.metricsSummary);
+    await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
   });
   ```
-- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
+  - A driver is a function closing over the page that returns `Locator` getters and async actions. Actions wait inside themselves (e.g. `run()` pairs the click with `waitForResponse(/query_range/)`), so specs don't.
+  - `driver(name, build, dispose?)` in `drivers/kit.ts` makes it a test-scoped fixture on `authedPage`; `dispose` deletes what it seeded. `seeded(name, open, close)` makes a worker-scoped seed.
+  - Layers compose: `withNewPanel(withEditor(panelsTest))`. Extend the closest existing driver instead of starting a parallel one.
+  - When no driver covers the feature, add `drivers/<feature>.ts` with the spec. Locators live in the driver, not the spec. `drivers/` is AI-owned: keep the banner, and change a driver only alongside a spec that needs it.
+  - Read [tests/e2e/tests/dashboards/editor/query.spec.ts](../../tests/e2e/tests/dashboards/editor/query.spec.ts) and [drivers/panel-editor.ts](../../tests/e2e/drivers/panel-editor.ts) for the canonical shape.
+- **Plain auth fixture** only for a spec no driver fits: import `test` and `expect` from `'../../fixtures/auth'` (never `@playwright/test`) and use the `authedPage` fixture (the admin, the only user the bootstrap seeds).
+- **Extended fixtures:** older suites import domain fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md).
   - `fixtures/alerts/alert-rules` — worker-scoped rule list + test-scoped rule factory
   - `fixtures/alerts/alert-history` — extends alert-rules, adds history fixtures (waits on ruler evaluation)
   ```ts
@@ -31,15 +37,18 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
   import { test, expect } from '../../../fixtures/alerts/alert-history';
   ```
 - **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
-- **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two cleanup shapes are valid; pick based on the spec size:
-  - **Per-test `try / finally`** — small specs (~ <10 scenarios) where each test owns its data.
-  - **Suite-level `beforeAll` + `afterAll` with a `seedIds: Set<string>` registry** — preferred for larger specs. Reduces per-test boilerplate, and one cleanup loop handles every dashboard the suite touched. See [tests/e2e/tests/dashboards/list.spec.ts](../../tests/e2e/tests/dashboards/list.spec.ts) for the canonical shape.
-- **Reuse helpers from `tests/e2e/helpers/`.** Don't reinvent. The current set:
-  - [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) — `newAdminContext(browser)` for `beforeAll` / `afterAll` (the `authedPage` fixture is test-scoped and not visible to suite hooks).
-  - [`helpers/dashboards.ts`](../../tests/e2e/helpers/dashboards.ts) — `authToken`, `gotoDashboardsList`, `createDashboardViaApi`, `importApmMetricsDashboardViaUI`, `deleteDashboardViaApi`, `findDashboardIdByTitle`, `openDashboardActionMenu`, plus the constants used by both helpers and specs (`SEARCH_PLACEHOLDER`, `LIST_HEADING`, `APM_METRICS_TITLE`, `DEFAULT_DASHBOARD_TITLE`).
-- **Seed via API when the UI flow is multi-step or brittle.** Implementation lives in `createDashboardViaApi` — use it. `page.request.*` does **not** auto-attach `Authorization`; the helpers handle that for you. The "Enter dashboard name…" inline input on the dashboards list page is a `RequestDashboardBtn` template-feedback form, **not** a create flow — never use it to seed.
-- **Reusable JSON fixtures live in [tests/e2e/fixtures/](../../tests/e2e/fixtures/).** `apm-metrics.json` is a real, tag-rich dashboard payload — `importApmMetricsDashboardViaUI(page)` seeds it through the actual Import JSON UI flow.
-- **Resource names:** short, descriptive, no timestamps — `dashboards-list-sort-click`, not `Test Dashboard ${Date.now()}`. Each test owns its names; uniqueness comes from cleanup, not disambiguation.
+- **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing resources. Cleanup shapes, in order of preference:
+  - **A driver's `dispose`** — the driver tracks what it seeded and deletes it after the test (`dashboards.seed(...)` in `drivers/dashboards.ts`). The spec has no cleanup code.
+  - **A worker-scoped `seeded(...)` layer** — read-only data shared by a worker's tests.
+  - **Per-test `try / finally`** or **suite-level `afterAll` with an id registry** — specs without a driver. Suite hooks can't see `authedPage`; use `newAdminContext(browser)` from `helpers/auth.ts`.
+- **Golden telemetry is pre-seeded.** `bootstrap/global.setup.ts` loads logs, traces and metrics over the last 6h (constants in `GOLDEN`, `helpers/dashboard-spec.ts`). Query within ≤ 6h and assert structure (series, rows, request payload), never exact counts: per-test seeds from parallel workers land in the same tenant. Seed missing shapes through the seeder with unique service names (`helpers/alerts/seeding.ts`).
+- **Reuse helpers from `tests/e2e/helpers/`** inside drivers. Don't reinvent:
+  - [`helpers/common.ts`](../../tests/e2e/helpers/common.ts) — `authToken`, `watchConsole`, `collectRequests`, `requestUrl`, `seederUrl`.
+  - [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) — `newAdminContext(browser)`.
+  - [`helpers/query-range-mock.ts`](../../tests/e2e/helpers/query-range-mock.ts) — `query_range` mocks for error / no-data / warning / loading states only; install before `goto`.
+- **Seed via API when the UI flow is multi-step or brittle**, through the driver (`dashboards.seed`, `seedAndOpen`, `seedAndEdit`). `page.request.*` does **not** auto-attach `Authorization`; drivers add `authToken(page)`.
+- **Static payloads live in [tests/e2e/testdata/](../../tests/e2e/testdata/)** (`dashboards/panels.ts`, `traces/large-trace.json`).
+- **Resource names:** short and descriptive, no timestamps. Where parallel workers share a list, add a random suffix as `uniqueName` in `drivers/dashboard-list.ts` does.
 - **Serial mode** when tests in a file mutate the same list page:
   ```ts
   test.describe.configure({ mode: 'serial' });
@@ -64,13 +73,14 @@ For each scenario in the plan:
    - For verifications, use the dedicated `browser_verify_*` tools — they capture the assertion as Playwright code in the log.
 4. **Read the log.** Call `generator_read_log` immediately after the last step. Don't intersperse other tool calls.
 5. **Write the spec.** Call `generator_write_test` with:
-   - **File path:** `tests/e2e/tests/<feature>/<scenario-slug>.spec.ts` — fs-friendly slug from the scenario title. Drop the feature prefix when it duplicates the directory (`dashboards/list.spec.ts`, not `dashboards/dashboards-list.spec.ts`).
+   - **File path:** `tests/e2e/tests/<feature>/<scenario-slug>.spec.ts` — fs-friendly slug from the scenario title. Drop the feature prefix when it duplicates the directory (`dashboards/list/search.spec.ts`, not `dashboards/list/dashboards-list-search.spec.ts`).
    - **Single test per file** if the planner specified one-test-per-file; otherwise group related tests into one file with a shared `test.describe('<Feature>', () => { … })`.
    - **`describe` block** matches the top-level plan section.
    - **Title** matches `TC-NN <description>` exactly.
    - **Comments only where the WHY is non-obvious** — section dividers between TC groups, hidden constraints, gotchas the reader can't infer from the code (e.g. "Monaco swallows Escape — click the title to blur first"). **Do not narrate steps** by pasting the plan's bullets back as `// 1. Navigate…` `// 2. Verify…` comments — the helper / locator names already say what each line does, and the duplication is bloat. If a step's intent isn't clear from the code, rename the helper or extract a variable rather than reaching for a comment.
-   - **Imports** from `../../fixtures/auth`. **Do not** import from `@playwright/test` directly.
-   - **Try / finally** cleanup using the API (delete the resources you seeded).
+   - **Imports** from the feature's driver module (or `../../fixtures/auth` when none fits). **Do not** import from `@playwright/test` directly.
+   - **Cleanup** through the driver's `dispose`; `try / finally` only without a driver.
+   - **Move recorded locators and waits into the driver.** The log gives raw `page.*` calls; the spec should read as driver actions.
 
 # Quality bar — what to write, what to skip
 
@@ -88,81 +98,57 @@ When you cut, merge, or renumber TCs vs the plan, note it in your final summary.
 For a plan section:
 
 ```markdown
-### 1. Page Load
+### 1. Search
 
-#### TC-01 page chrome and core controls render
+#### TC-01 searching by name writes the query to the URL and lists the match
+**Preconditions:** one dashboard with a unique name (seed via the `dashboards` driver).
 **Steps:**
-1. Navigate to `/dashboard`
-2. Verify the page title is "SigNoz | All Dashboards"
-3. Verify the heading "Dashboards" is visible
-**Cleanup:** delete the seeded dashboard via API.
+1. Open the dashboards list.
+2. Search `name CONTAINS '<name>'`.
+**Expected:** the `query` URL param carries the search; only the seeded dashboard is listed.
 ```
 
-You produce (suite-level shape, preferred for files with multiple scenarios):
+You produce:
 
 ```ts
-// tests/e2e/tests/dashboards/list.spec.ts
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
+// tests/e2e/tests/dashboards/list/search.spec.ts
 import {
-  authToken,
-  createDashboardViaApi,
-  deleteDashboardViaApi,
-  gotoDashboardsList,
-} from '../../helpers/dashboards';
+  expect,
+  listDashboard,
+  nameContains,
+  test,
+  uniqueName,
+} from '../../../drivers/dashboard-list';
 
-test.describe.configure({ mode: 'serial' });
-
-const seedIds = new Set<string>();
-
-async function seed(page: Page, title: string): Promise<string> {
-  const id = await createDashboardViaApi(page, title);
-  seedIds.add(id);
-  return id;
-}
-
-test.afterAll(async ({ browser }) => {
-  if (seedIds.size === 0) return;
-  const ctx = await newAdminContext(browser);
-  const page = await ctx.newPage();
-  try {
-    const token = await authToken(page);
-    for (const id of [...seedIds]) {
-      await deleteDashboardViaApi(ctx.request, id, token);
-      seedIds.delete(id);
-    }
-  } finally {
-    await ctx.close();
-  }
-});
-
-test.describe('Dashboards List Page', () => {
-  test('TC-01 page chrome and core controls render', async ({
+test.describe('Dashboards — list search', () => {
+  test('TC-01 searching by name writes the query to the URL and lists the match', async ({
     authedPage: page,
+    dashboards,
+    dashboardList,
   }) => {
-    await seed(page, 'list-chrome');
+    const name = uniqueName('search');
+    await dashboards.seed(listDashboard(name));
+    await dashboardList.open();
 
-    await gotoDashboardsList(page);
+    await dashboardList.runSearch(nameContains(name));
 
-    await expect(page).toHaveTitle('SigNoz | All Dashboards');
-    await expect(
-      page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-    ).toBeVisible();
+    expect(new URL(page.url()).searchParams.get('query')).toBe(
+      nameContains(name),
+    );
+    await expect(dashboardList.rows()).toHaveText([name]);
   });
 });
 ```
 
-Note how the example carries no `// 1. …` `// 2. …` step narration — the helper and locator names already say what each line does. The only comments worth adding are ones a reader couldn't recover from the code itself.
+Note: no cleanup code (the `dashboards` driver deletes its seed), no raw locators (they live in `drivers/dashboard-list.ts`), and no `// 1. …` step narration. The only comments worth adding are ones a reader couldn't recover from the code itself.
 
 # Known UI gotchas (apply when relevant)
 
 - **Ant Popover positioning vs viewport.** Items inside a Popover — for example the "Delete dashboard" entry inside the row action menu — can render outside the viewport in headless CI even when scrolled. `click({ force: true })` skips actionability checks but Playwright still requires the click coordinates to land inside the viewport. Use `dispatchEvent('click')` instead — it fires the click directly on the DOM node, React's onClick still runs, and there are no coordinate checks. Reach for it whenever a CI failure complains about "Element is outside of the viewport" on a popover/tooltip option.
-- **Sticky-header rows below the fold.** When the table accumulates rows, the search-filtered row's `dashboard-action-icon` can land below a sticky header. Always `await actionIcon.scrollIntoViewIfNeeded()` before clicking. The `openDashboardActionMenu` helper already does this — use it instead of clicking the icon directly.
+- **Sticky-header rows below the fold.** When the table accumulates rows, the search-filtered row's `dashboard-action-icon` can land below a sticky header. Always `await actionIcon.scrollIntoViewIfNeeded()` before clicking, inside the driver action.
 - **React Query mutations vs navigation.** UI delete clicks fire an async DELETE through React Query. Navigating away before the mutation completes cancels it. Pair the click with `page.waitForResponse((r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()))` and `await expect(dialog).not.toBeVisible()` before the next `page.goto(...)`.
-- **Monaco editor swallows Escape.** Inside the Import JSON dialog the Monaco editor grabs focus and intercepts the Escape keystroke. Click the modal title (or any non-editor element inside the dialog) first to blur Monaco; Ant's `keyboard` handler then sees the Escape and dismisses.
-- **Empty zero-state hides controls.** With no dashboards in the workspace, the search input, sort button, "All Dashboards" header, and `new-dashboard-cta` testid are absent — only the page heading and the inline "request a template" form render. Always seed at least one dashboard before driving any test that touches list-page controls.
+- **Monaco editor swallows Escape.** Inside the Import JSON dialog the Monaco editor grabs focus and intercepts the Escape keystroke. Click the modal title first to blur Monaco; `dashboardList.dismissWithEscape()` does this.
+- **Empty zero-state hides controls.** With no dashboards in the workspace, the list controls and `new-dashboard-cta` are absent. Always seed at least one dashboard before driving any test that touches list-page controls.
 
 # Quality bar
 

.claude/agents/playwright-test-healer.md

@@ -1,6 +1,6 @@
 ---
 name: playwright-test-healer
-description: Use this agent to debug and fix failing SigNoz E2E Playwright tests. Examples — <example>Context: A spec is red. user: 'tests/e2e/tests/dashboards/list.spec.ts is failing, fix it' assistant: 'Using the healer agent to debug each failing scenario and adjust the spec.'</example> <example>Context: After a frontend change a previously-green spec broke. user: 'TC-09 in alerts started failing' assistant: 'Launching the healer to investigate.'</example>
+description: Use this agent to debug and fix failing SigNoz E2E Playwright tests. Examples — <example>Context: A spec is red. user: 'tests/e2e/tests/dashboards/list/search.spec.ts is failing, fix it' assistant: 'Using the healer agent to debug each failing scenario and adjust the spec.'</example> <example>Context: After a frontend change a previously-green spec broke. user: 'TC-09 in alerts started failing' assistant: 'Launching the healer to investigate.'</example>
 tools: Glob, Grep, Read, Write, Edit, Bash, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run
 model: sonnet
 color: red
@@ -27,11 +27,11 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
    - `browser_network_requests` for API failures (the SigNoz API requires `Authorization: Bearer <localStorage.AUTH_TOKEN>`; 401s usually mean the test bypassed the fixture).
    - `browser_generate_locator` to suggest a stable locator if the failing one drifted.
 4. **Root-cause.** Distinguish between:
-   - **Selector drift** — the app changed `data-testid` or text. Fix the locator. Prefer `data-testid` (grep `frontend/src/<feature-dir>/` for the new one).
-   - **Timing** — the test races a load. Replace `waitForTimeout` with `await expect(locator).toBe…()` or `page.waitForResponse(...)` on the triggering action.
-   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Ensure the test seeds via API and cleans up in `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts.
+   - **Selector drift** — the app changed `data-testid` or text. Fix the locator where it lives: in the driver under `tests/e2e/drivers/` when the spec uses one, so every spec sharing it heals at once. Prefer `data-testid` (grep `frontend/src/<feature-dir>/` for the new one).
+   - **Timing** — the test races a load. Replace `waitForTimeout` with `await expect(locator).toBe…()` or `page.waitForResponse(...)` on the triggering action — inside the driver action when there is one.
+   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Seed through the driver (its `dispose` cleans up) or via API with `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts and only the golden telemetry; parallel per-test seeds share the tenant, so an exact-count assertion on telemetry is a test bug — assert structure instead.
    - **Genuine app bug** — the app is broken, not the test. Mark the test with `test.fixme(...)` and add a one-line `// known: <description>` comment. Don't silently change the assertion to make it pass.
-5. **Fix.** Edit the spec. Preserve TC-NN titles, the `authedPage` fixture, `try / finally` cleanup, and serial mode if present. If you renumber, retitle, or `test.fixme(...)` any TC, flag it in your final summary so the user can re-run the planner — the plan and the QA checklist (`tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`) re-derive from the current `.spec.ts` and will otherwise drift.
+5. **Fix.** Edit the spec or its driver. Preserve TC-NN titles, the driver / `authedPage` fixtures, cleanup, and serial mode if present. A driver change must keep every other spec importing it green — run them too. If you renumber, retitle, or `test.fixme(...)` any TC, flag it in your final summary so the user can re-run the planner — the plan and the QA checklist (`tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`) re-derive from the current `.spec.ts` and will otherwise drift.
 6. **Re-run only the fixed test** before moving to the next failure. Three options:
    - `npx playwright test -g 'TC-09' --project=chromium` — target a single TC by title
    - `npx playwright test --last-failed --project=chromium` — replay everything that failed last run
@@ -41,14 +41,13 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 
 # Repo-specific signals
 
-- **Reuse helpers before adding new code.** [`tests/e2e/helpers/dashboards.ts`](../../tests/e2e/helpers/dashboards.ts) and [`tests/e2e/helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) already export the API-seed, cleanup, navigation, and action-menu helpers most fixes need. Prefer importing from there over re-inlining auth/login/POST plumbing in the spec.
+- **Reuse drivers and helpers before adding new code.** [`tests/e2e/drivers/`](../../tests/e2e/drivers/) holds the per-feature seed, cleanup, navigation and action methods (`kit.ts` explains `driver` / `seeded`); [`helpers/common.ts`](../../tests/e2e/helpers/common.ts) and [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) the plain plumbing. Prefer them over re-inlining auth/login/POST code in the spec.
 - **Ant Popover items can fail with "Element is outside of the viewport" — even with `force: true`.** `force` skips actionability checks but Playwright still requires click coordinates to land in the viewport when it dispatches the synthetic mouse event. The robust fix is `tooltip.getByText('…').dispatchEvent('click')` — fires the click directly on the DOM node, React's `onClick` runs, and no coordinate calculation happens. Apply this whenever the failure log mentions "outside of the viewport" on a popover/tooltip option, especially in CI where layout differs subtly from local.
-- **Action-icon rows below the fold.** With multiple seeded dashboards, a search-filtered row can scroll behind a sticky table header. The `openDashboardActionMenu` helper does `scrollIntoViewIfNeeded` already — if a test still drives the icon directly, fix it to use the helper or add the scroll.
+- **Action-icon rows below the fold.** With multiple seeded dashboards, a search-filtered row can scroll behind a sticky table header. Add `scrollIntoViewIfNeeded` before the click, in the driver action.
 - **React Query mutations vs page.goto.** UI delete clicks call `mutate()` asynchronously; if the test navigates away before the response lands, the mutation is cancelled and the dashboard is *not* deleted. Wait for the DELETE response and the dialog dismissal explicitly: `page.waitForResponse((r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()))` plus `await expect(dialog).not.toBeVisible()`.
 - **Monaco editor swallows Escape inside the Import JSON dialog.** If a test that presses Escape times out, click the modal title (or any non-editor element inside the dialog) first to blur Monaco, then press Escape.
-- **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `createDashboardViaApi`.
-- **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create paths are the "New dashboard" dropdown → "Create dashboard" (default name "Sample Title", see `DEFAULT_DASHBOARD_TITLE`) or "Import JSON".
-- **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/dashboards.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
+- **The list pages render zero-state when the workspace is empty.** List controls and the `new-dashboard-cta` testid are absent in zero-state. A timeout on those usually means the workspace was empty — seed first via `dashboards.seed(...)`.
+- **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/common.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
 - **Extended fixtures.** Domain-specific fixtures extend `auth` and add seeded data. Alerts uses `fixtures/alerts/alert-rules` (worker-scoped rule list, test-scoped factory) and `fixtures/alerts/alert-history` (extends alert-rules, waits on ruler evaluation). See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the pattern. When a test fails on missing data, check if it imports the wrong fixture level.
 - **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
 - **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.

.claude/agents/playwright-test-planner.md

@@ -20,8 +20,10 @@ You will:
    - The frontend stores its JWT in `localStorage` under `AUTH_TOKEN` and the API requires `Authorization: Bearer <token>` for protected endpoints. Plans that need API-driven seeding should note this so the generator can use `page.request.*`.
 
 2. **Check what's already wired up.**
-   - [tests/e2e/helpers/dashboards.ts](../../tests/e2e/helpers/dashboards.ts) and [tests/e2e/helpers/auth.ts](../../tests/e2e/helpers/auth.ts) hold reusable helpers (`createDashboardViaApi`, `gotoDashboardsList`, `openDashboardActionMenu`, `newAdminContext`, `importApmMetricsDashboardViaUI`, etc.). When the plan touches dashboards, reference these by name in the steps so the generator can reuse them rather than reinvent.
-   - [tests/e2e/fixtures/apm-metrics.json](../../tests/e2e/fixtures/apm-metrics.json) is a real-world dashboard payload (rich tags, panels, description) suitable as a seed fixture — note in the plan if a scenario benefits from it.
+   - [tests/e2e/drivers/](../../tests/e2e/drivers/) holds one driver per feature (e.g. `dashboards.ts`, `dashboard-list.ts`, `panel-editor.ts`, `routing.ts`, `channels.ts`). A driver is a fixture exposing the feature's locators and actions, including API seeding that cleans itself up (`dashboards.seed(...)`). When one covers the feature, write steps in terms of its actions by name so the generator reuses them. When none does, say so: the generator adds one.
+   - [tests/e2e/helpers/](../../tests/e2e/helpers/) holds plain helpers: `common.ts` (`authToken`, `watchConsole`, `collectRequests`, `seederUrl`), `auth.ts` (`newAdminContext`), `query-range-mock.ts` (mock `query_range` for error, no-data, warning and loading states only).
+   - **Telemetry is pre-seeded.** `bootstrap/global.setup.ts` loads a golden OTel-demo dataset (logs, traces, metrics over the last 6h; constants in `GOLDEN` in `helpers/dashboard-spec.ts`). Plans that query data use a window ≤ 6h and assert structure, not exact counts. Data the golden set lacks is seeded per test through the seeder (`helpers/alerts/seeding.ts` shows how).
+   - [tests/e2e/testdata/](../../tests/e2e/testdata/) holds static payloads (`dashboards/panels.ts`, `traces/large-trace.json`) — note in the plan if a scenario benefits from one.
 
 3. **Navigate and explore**
    - Invoke `planner_setup_page` once before any other browser tool.
@@ -39,7 +41,7 @@ You will:
 
    Each scenario must include:
    - **TC-NN** title — `TC-NN <short description>` (matches the naming this repo uses for test titles).
-   - Preconditions (what state the test expects — note that the bootstrap creates a fresh stack with **zero dashboards / alerts / etc.**, so plans must seed their own data).
+   - Preconditions (what state the test expects — note that the bootstrap creates a fresh stack with **zero dashboards / alerts / etc.** (only the golden telemetry), so plans must seed their own resources).
    - Step-by-step user actions.
    - Expected outcomes per step.
    - Cleanup notes (what gets created and how to remove it — usually via API).
@@ -64,7 +66,7 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 - Open per-row actions: View, Open in New Tab, Copy Link, Export JSON, Delete dashboard
 - Create a new dashboard via the "New dashboard" dropdown (Create dashboard / Import JSON / View templates)
 
-**Bootstrap state:** the pytest harness creates a fresh stack with no pre-seeded dashboards. Every test must seed its own data. The "Enter dashboard name…" inline input is a "request a new template" feedback form — **not** a create flow. The only UI create path is the dropdown.
+**Bootstrap state:** the pytest harness creates a fresh stack with no pre-seeded dashboards. Every test seeds its own through the `dashboards` driver (`dashboards.seed(...)`, deleted when the test ends).
 
 **Known limitations:**
 - Ascending sort is not yet implemented — repeated clicks on the sort button keep `order=descend`.
@@ -87,7 +89,7 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 - All Dashboards section header rendered.
 - Search input, sort button, and at least one dashboard thumbnail visible.
 
-**Cleanup:** delete the seeded dashboard via `DELETE /api/v1/dashboards/<id>`.
+**Cleanup:** none in the spec — the `dashboards` driver deletes what it seeded.
 
 #### TC-02 ...
 </example-spec>
@@ -95,7 +97,7 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 **Quality bar:**
 - Steps must be specific enough that any tester (or the generator agent) can follow without ambiguity.
 - Include negative scenarios — empty state, no-match search, validation errors.
-- Each scenario must own its preconditions and cleanup. **Do not invent cross-file global fixtures** — they break parallel-by-file execution. Suite-level `beforeAll` / `afterAll` *within* a single spec file is fine and is the preferred shape for files with > ~10 scenarios; per-test `try / finally` is fine for smaller specs.
+- Each scenario must own its preconditions and cleanup. **Do not invent cross-file global fixtures** — they break parallel-by-file execution. Prefer a driver's self-cleaning seed (`dispose`) or worker-scoped `seeded(...)` layer; without a driver, suite-level `beforeAll` / `afterAll` within one spec file or per-test `try / finally` both work.
 - Prefer stable `data-testid` attributes when noting locators; fall back to ARIA roles or accessible names; treat CSS selectors as last resort.
 - **Don't pad coverage.** Every TC must catch a regression that would actually ship if the test were missing — a real branch in the source, a real user-visible failure mode. A TC that asserts a hard-coded string is still rendered, or that a button is still a button, adds nothing but maintenance cost: it inflates the suite, slows CI, and trains readers to skim past the directory. Before writing a scenario, ask "what code change would break this?" — if the only answer is "deleting the literal under test," cut it or fold it into a richer scenario as one assertion among many.
 - **Collapse near-duplicates.** Two TCs that differ only in input value (search by title vs search by description, when the underlying code path is the same) should merge into one parameterised scenario unless each input genuinely exercises a distinct branch. Prefer one assertion-rich TC over three thin ones.

docs/api/openapi.yml

@@ -4224,6 +4224,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -5250,6 +5257,7 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -5265,6 +5273,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -5278,6 +5287,7 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -5384,6 +5394,21 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          description: The panel kind.
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+          description: The options for this panel kind. {} accepts every default.
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -5494,6 +5519,16 @@ components:
           - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
           description: The time range the slices are computed over.
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -5748,6 +5783,161 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+          description: The axis dimensions.x is plotted along.
+        "y":
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+          description: The axis dimensions.y is plotted along.
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none; the tooltip still names the column.
+          type: string
+        scale:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesAxisScale'
+          description: auto (default) uses log, or symlog when values include zero
+            or negatives, when that spreads the dots clearly more than linear does;
+            otherwise linear. log cannot place a value at or below zero and leaves
+            that dot out; symlog is log-like but places it.
+        softMax:
+          description: The highest value the axis always shows; data above it still
+            extends the axis, as does a threshold on it. Null fits the data.
+          nullable: true
+          type: number
+        softMin:
+          description: The lowest value the axis always shows; data below it still
+            extends the axis, as does a threshold on it. Null fits the data. A log
+            axis ignores a bound at or below zero.
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+          description: Dot size and opacity.
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values color the dots and drive the legend. Empty colors by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales each dot's area between chartAppearance.points.minSize
+            and maxSize. Empty draws every dot at chartAppearance.points.size, as
+            does a dot with no value.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty, or a key the result
+            lacks, uses the first value column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty, or a key the
+            result lacks, uses the first value column x does not use.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+          description: Title, bounds and scale of each axis.
+        chartAppearance:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+          description: Dot drawing options.
+        dimensions:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+          description: 'Which result columns place, size and color the dots. Each
+            dot is one row of the joined scalar result: one group.'
+        formatting:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesTableFormatting'
+          description: Per-column units and decimal precision. The x and y columns'
+            units label their axes; every bound column's unit shows in the tooltip.
+        legend:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesLegend'
+          description: Legend placement and series colors. A series is one color group,
+            labeled by its colorBy values joined with a comma, or All when nothing
+            is grouped.
+        thresholds:
+          description: Reference lines drawn at fixed values across the x or y axis.
+          items:
+            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
+          nullable: true
+          type: array
+        visualization:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+          description: The time range the groups are computed over.
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of the largest dot when dimensions.sizeBy is set,
+            in CSS pixels from 2 to 40. Null means 24.
+        minSize:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of the smallest dot when dimensions.sizeBy is set,
+            in CSS pixels from 2 to 40. Null means 4.
+        opacity:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointOpacity'
+          description: Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+        size:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of every dot when dimensions.sizeBy is unset, in CSS
+            pixels from 2 to 40. Null means 6.
+      type: object
+    DashboardtypesScatterPlotThreshold:
+      properties:
+        axis:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesThresholdAxis'
+          description: 'The axis the line marks: y (default) draws it horizontally,
+            x vertically. Unit converts against that axis''s column unit, and the
+            axis extends to keep the line in view.'
+        color:
+          description: 'The CSS color of the line, for example #F1575F, which matches
+            the SigNoz red preset; CSS named colors such as red also work.'
+          type: string
+        label:
+          description: The caption shown on the line.
+          type: string
+        unit:
+          description: The unit id of value, such as ms or percent. Empty means the
+            panel's unit, or the column's unit for a table threshold. Prefer the panel's
+            unit; a different unit works only when it converts to it, such as s against
+            a panel in ms.
+          type: string
+        value:
+          description: The value the line is drawn at, in unit.
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -5914,6 +6104,11 @@ components:
       - value
       - name
       type: object
+    DashboardtypesThresholdAxis:
+      enum:
+      - x
+      - "y"
+      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -16696,9 +16891,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - route-policy:list
       - tokenizer:
-        - VIEWER
+        - route-policy:list
       summary: List route policies
       tags:
       - routepolicies
@@ -16753,9 +16948,13 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - route-policy:create
+        - route-policy:attach
+        - notification-channel:attach
       - tokenizer:
-        - ADMIN
+        - route-policy:create
+        - route-policy:attach
+        - notification-channel:attach
       summary: Create route policy
       tags:
       - routepolicies
@@ -16800,9 +16999,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - route-policy:delete
       - tokenizer:
-        - ADMIN
+        - route-policy:delete
       summary: Delete route policy
       tags:
       - routepolicies
@@ -16858,9 +17057,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - route-policy:read
       - tokenizer:
-        - VIEWER
+        - route-policy:read
       summary: Get route policy by ID
       tags:
       - routepolicies
@@ -16927,9 +17126,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - route-policy:update
+        - route-policy:attach
+        - route-policy:detach
+        - notification-channel:attach
+        - notification-channel:detach
       - tokenizer:
-        - ADMIN
+        - route-policy:update
+        - route-policy:attach
+        - route-policy:detach
+        - notification-channel:attach
+        - notification-channel:detach
       summary: Update route policy
       tags:
       - routepolicies

docs/contributing/tests/e2e.md

@@ -173,9 +173,10 @@ Each spec follows these principles:
 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
 2. **Test titles use `TC-NN`**: `test('TC-01 alerts page — tabs render', ...)`. Preserves ordering at a glance and maps to external coverage tracking.
 3. **UI-first**: drive flows through the UI. Playwright traces capture every BE request/response the UI triggers, so asserting on UI outcomes implicitly validates BE contracts. Reach for direct `page.request.*` only when the test's *purpose* is asserting a response contract (use `page.waitForResponse` on a UI click) or when a specific UI step is structurally flaky (e.g. Ant DatePicker calendar-cell indices) — and even then try UI first.
-4. **Self-contained state**: each spec seeds its own data and cleans up at suite teardown. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two patterns work:
-    - **Per-test seed + cleanup in `try / finally`** — small specs where each test owns its data.
-    - **Suite-level seed + `afterAll` teardown** — preferred for larger specs. Each `createDashboard(...)` call adds the resulting ID to a module-level `Set<string>`, and one `test.afterAll(...)` deletes everything in the set. See `tests/e2e/tests/dashboards/list.spec.ts` for the full pattern. `test.beforeAll` / `test.afterAll` cannot use `authedPage` directly (it's test-scoped); use `newAdminContext(browser)` from `helpers/auth.ts` instead — it performs one fresh login per suite hook.
+4. **Self-contained state**: each spec seeds its own data and cleans up at suite teardown. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Patterns, in order of preference:
+    - **Driver `dispose`** — the driver tracks what it seeded and deletes it after the test, so the spec has no cleanup code. See `dashboards.seed(...)` in `tests/e2e/drivers/dashboards.ts`.
+    - **Per-test seed + cleanup in `try / finally`** — small specs without a driver, where each test owns its data.
+    - **Suite-level seed + `afterAll` teardown** — larger specs without a driver. One `test.afterAll(...)` deletes everything the suite seeded. See `tests/e2e/tests/llm-o11y/llm-pricing.spec.ts`. `test.beforeAll` / `test.afterAll` cannot use `authedPage` directly (it's test-scoped); use `newAdminContext(browser)` from `helpers/auth.ts` instead — it performs one fresh login per suite hook.
 5. **Seed via API when the UI flow is multi-step or brittle.** The frontend stores its JWT in `localStorage` under `AUTH_TOKEN`; `page.request.*` inherits the auth fixture's storage state. A typical pattern:
     ```ts
     const token = await page.evaluate(

frontend/__mocks__/uplotMock.ts

@@ -57,6 +57,7 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
+const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -70,6 +71,7 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/src/AppRoutes/__tests__/sentryFilters.test.ts

@@ -0,0 +1,140 @@
+import type { ErrorEvent, StackFrame } from '@sentry/react';
+
+import {
+	hasNoAppFrames,
+	isExternalIntegrationError,
+	SENTRY_IGNORE_ERRORS,
+} from '../sentryFilters';
+
+const APP_BUNDLE = 'https://example.us.signoz.cloud/assets/index-B3QqK3ie.js';
+
+function eventWithFrames(...filenames: string[]): ErrorEvent {
+	return {
+		type: undefined,
+		exception: {
+			values: [
+				{
+					type: 'TypeError',
+					value: 'Failed to fetch',
+					stacktrace: {
+						frames: filenames.map((filename) => ({ filename, lineno: 1, colno: 1 })),
+					},
+				},
+			],
+		},
+	};
+}
+
+describe('isExternalIntegrationError', () => {
+	it.each([
+		[
+			'PostHog recorder',
+			'https://us-assets.i.posthog.com/static/posthog-recorder.js?v=1.298.0',
+		],
+		[
+			'Pylon widget',
+			'https://widget.usepylon.com/widget/00000000-0000-0000-0000-000000000000',
+		],
+		['Appcues', 'https://fast.appcues.com/123456.js'],
+	])('drops an error with a %s frame', (_, url) => {
+		expect(isExternalIntegrationError(eventWithFrames(APP_BUNDLE, url))).toBe(
+			true,
+		);
+	});
+
+	it('drops it when the top frame is our bundle', () => {
+		expect(
+			isExternalIntegrationError(
+				eventWithFrames(
+					'https://us-assets.i.posthog.com/static/posthog-recorder.js?v=1.298.0',
+					'<anonymous>',
+					APP_BUNDLE,
+				),
+			),
+		).toBe(true);
+	});
+
+	it('keeps an error from our bundle only', () => {
+		expect(
+			isExternalIntegrationError(eventWithFrames(APP_BUNDLE, '<anonymous>')),
+		).toBe(false);
+	});
+
+	it('keeps an error from a host that only contains an integration name', () => {
+		expect(
+			isExternalIntegrationError(
+				eventWithFrames(
+					'https://posthog.example.com/app.js',
+					'https://notusepylon.com/widget.js',
+				),
+			),
+		).toBe(false);
+	});
+
+	it('keeps an error without a stack trace', () => {
+		expect(isExternalIntegrationError({ type: undefined })).toBe(false);
+	});
+});
+
+describe('hasNoAppFrames', () => {
+	const PAGE_URL = 'https://example.us.signoz.cloud/dashboard/01a081e1';
+
+	function eventWithStackFrames(frames: StackFrame[]): ErrorEvent {
+		return {
+			type: undefined,
+			exception: {
+				values: [{ type: 'SyntaxError', stacktrace: { frames } }],
+			},
+		};
+	}
+
+	it('drops a script appended to the page', () => {
+		expect(
+			hasNoAppFrames(
+				eventWithStackFrames([
+					{ filename: PAGE_URL, lineno: 1, colno: 30, function: 'global code' },
+					{ filename: '[native code]', function: 'eval' },
+					{ filename: '[native code]', function: 'append' },
+				]),
+			),
+		).toBe(true);
+	});
+
+	it('drops a browser extension error', () => {
+		expect(
+			hasNoAppFrames(
+				eventWithStackFrames([
+					{ filename: 'chrome-extension://abc/content.js', lineno: 4, colno: 12 },
+				]),
+			),
+		).toBe(true);
+	});
+
+	it('keeps an error with a frame from our bundle', () => {
+		expect(hasNoAppFrames(eventWithFrames(PAGE_URL, APP_BUNDLE))).toBe(false);
+	});
+
+	it('keeps an error without a stack trace', () => {
+		expect(hasNoAppFrames({ type: undefined })).toBe(false);
+	});
+
+	it('keeps an error whose frames have no position', () => {
+		expect(
+			hasNoAppFrames(
+				eventWithStackFrames([{ filename: '[native code]', function: 'eval' }]),
+			),
+		).toBe(false);
+	});
+});
+
+describe('SENTRY_IGNORE_ERRORS', () => {
+	it('ignores the bundled PostHog recorder load failure', () => {
+		expect(
+			SENTRY_IGNORE_ERRORS.some((pattern) =>
+				pattern.test(
+					'Error: Called on script loaded before session recording is available',
+				),
+			),
+		).toBe(true);
+	});
+});

frontend/src/AppRoutes/index.tsx

@@ -22,6 +22,7 @@ import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
+import { IS_PROD } from 'lib/env';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
@@ -37,6 +38,11 @@ import defaultRoutes, {
 	LIST_LICENSES,
 	SUPPORT_ROUTE,
 } from './routes';
+import {
+	hasNoAppFrames,
+	isExternalIntegrationError,
+	SENTRY_IGNORE_ERRORS,
+} from './sentryFilters';
 
 const appRouter = (children: ReactNode): ReactNode => (
 	<Router history={history}>
@@ -310,16 +316,7 @@ function App(): JSX.Element {
 					tunnel: window.signozBootData.settings.sentry.tunnel,
 					environment: process.env.ENVIRONMENT,
 					release: process.env.VERSION,
-					// A tab that outlived a deploy requests hashed assets the new build no longer
-					// has. `lazyRetry` recovers by reloading once, so this class is not worth
-					// reporting. The stylesheet message is Vite's own; the module ones are the
-					// same failure worded differently by Chromium, Firefox and Safari.
-					ignoreErrors: [
-						/Unable to preload CSS for/,
-						/Failed to fetch dynamically imported module/,
-						/error loading dynamically imported module/,
-						/Importing a module script failed/,
-					],
+					ignoreErrors: SENTRY_IGNORE_ERRORS,
 					integrations: [
 						// Kept for the `transaction` tag used in routing, even though
 						// tracing is disabled. Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
@@ -354,6 +351,15 @@ function App(): JSX.Element {
 							return null;
 						}
 
+						if (isExternalIntegrationError(event)) {
+							return null;
+						}
+
+						// Dev serves source from /src/, so every frame would look foreign there.
+						if (IS_PROD && hasNoAppFrames(event)) {
+							return null;
+						}
+
 						const sessionReplayUrl = posthog.get_session_replay_url?.({
 							withTimestamp: true,
 						});

frontend/src/AppRoutes/sentryFilters.ts

@@ -0,0 +1,49 @@
+import type { ErrorEvent } from '@sentry/react';
+
+export const SENTRY_IGNORE_ERRORS = [
+	// A tab that outlived a deploy requests hashed assets the new build no longer
+	// has. `lazyRetry` recovers by reloading once, so this class is not worth
+	// reporting. The stylesheet message is Vite's own; the module ones are the
+	// same failure worded differently by Chromium, Firefox and Safari.
+	/Unable to preload CSS for/,
+	/Failed to fetch dynamically imported module/,
+	/error loading dynamically imported module/,
+	/Importing a module script failed/,
+	// Thrown by the bundled posthog-js when its recorder script fails to load, so
+	// its frames point at our own bundle and the URL check below misses it.
+	/Called on script loaded before session recording is available/,
+];
+
+const APP_ASSETS_PATH = '/assets/';
+
+// Frames without a position are `[native code]`, which says nothing about the
+// script that threw.
+export function hasNoAppFrames(event: ErrorEvent): boolean {
+	const frames = (event.exception?.values ?? [])
+		.flatMap((exception) => exception.stacktrace?.frames ?? [])
+		.filter(
+			(frame) => frame.filename && (frame.lineno != null || frame.colno != null),
+		);
+
+	return (
+		frames.length > 0 &&
+		!frames.some((frame) => frame.filename?.includes(APP_ASSETS_PATH))
+	);
+}
+
+// PostHog's lazy recorder, the Pylon widget and Appcues.
+const EXTERNAL_SCRIPT_URLS = [
+	/^https?:\/\/[^/]+\.posthog\.com\//,
+	/^https?:\/\/(?:[^/]+\.)?usepylon\.com\//,
+	/^https?:\/\/(?:[^/]+\.)?appcues\.(?:com|net)\//,
+];
+
+// Checks every frame, not only the top one: a failed fetch from the recorder
+// tops out in Sentry's own fetch wrapper, which is bundled with the app.
+export function isExternalIntegrationError(event: ErrorEvent): boolean {
+	return (event.exception?.values ?? []).some((exception) =>
+		(exception.stacktrace?.frames ?? []).some((frame) =>
+			EXTERNAL_SCRIPT_URLS.some((url) => url.test(frame.filename ?? '')),
+		),
+	);
+}

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -5584,6 +5584,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -6716,6 +6722,205 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesHeatmapPanelSpecDTO;
 }
 
+/**
+ * The panel kind.
+ */
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+}
+export interface DashboardtypesScatterPlotAxisDTO {
+	/**
+	 * @type string
+	 * @description Axis title. Empty draws none; the tooltip still names the column.
+	 */
+	label?: string;
+	/**
+	 * @description auto (default) uses log, or symlog when values include zero or negatives, when that spreads the dots clearly more than linear does; otherwise linear. log cannot place a value at or below zero and leaves that dot out; symlog is log-like but places it.
+	 */
+	scale?: DashboardtypesAxisScaleDTO;
+	/**
+	 * @type number,null
+	 * @description The highest value the axis always shows; data above it still extends the axis, as does a threshold on it. Null fits the data.
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 * @description The lowest value the axis always shows; data below it still extends the axis, as does a threshold on it. Null fits the data. A log axis ignores a bound at or below zero.
+	 */
+	softMin?: number | null;
+}
+
+export interface DashboardtypesScatterPlotAxesDTO {
+	/**
+	 * @description The axis dimensions.x is plotted along.
+	 */
+	x?: DashboardtypesScatterPlotAxisDTO;
+	/**
+	 * @description The axis dimensions.y is plotted along.
+	 */
+	y?: DashboardtypesScatterPlotAxisDTO;
+}
+
+/**
+ * @minimum 2
+ * @maximum 40
+ * @nullable
+ */
+export type DashboardtypesPointDiameterDTO = number | null;
+
+/**
+ * @minimum 0.1
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesPointOpacityDTO = number | null;
+
+/**
+ * Diameter of the largest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 24.
+ */
+export type DashboardtypesScatterPlotPointsDTOMaxSize = DashboardtypesPointDiameterDTO | null;
+
+/**
+ * Diameter of the smallest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 4.
+ */
+export type DashboardtypesScatterPlotPointsDTOMinSize = DashboardtypesPointDiameterDTO | null;
+
+/**
+ * Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+ */
+export type DashboardtypesScatterPlotPointsDTOOpacity = DashboardtypesPointOpacityDTO | null;
+
+/**
+ * Diameter of every dot when dimensions.sizeBy is unset, in CSS pixels from 2 to 40. Null means 6.
+ */
+export type DashboardtypesScatterPlotPointsDTOSize = DashboardtypesPointDiameterDTO | null;
+
+export interface DashboardtypesScatterPlotPointsDTO {
+	/**
+	 * @description Diameter of the largest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 24.
+	 */
+	maxSize?: DashboardtypesScatterPlotPointsDTOMaxSize;
+	/**
+	 * @description Diameter of the smallest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 4.
+	 */
+	minSize?: DashboardtypesScatterPlotPointsDTOMinSize;
+	/**
+	 * @description Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+	 */
+	opacity?: DashboardtypesScatterPlotPointsDTOOpacity;
+	/**
+	 * @description Diameter of every dot when dimensions.sizeBy is unset, in CSS pixels from 2 to 40. Null means 6.
+	 */
+	size?: DashboardtypesScatterPlotPointsDTOSize;
+}
+
+export interface DashboardtypesScatterPlotChartAppearanceDTO {
+	/**
+	 * @description Dot size and opacity.
+	 */
+	points?: DashboardtypesScatterPlotPointsDTO;
+}
+
+export interface DashboardtypesScatterPlotDimensionsDTO {
+	/**
+	 * @type array,null
+	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values color the dots and drive the legend. Empty colors by every group-by label.
+	 */
+	colorBy?: string[] | null;
+	/**
+	 * @type string
+	 * @description Value column key that scales each dot's area between chartAppearance.points.minSize and maxSize. Empty draws every dot at chartAppearance.points.size, as does a dot with no value.
+	 */
+	sizeBy?: string;
+	/**
+	 * @type string
+	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty, or a key the result lacks, uses the first value column.
+	 */
+	x?: string;
+	/**
+	 * @type string
+	 * @description Value column key plotted on the y axis. Empty, or a key the result lacks, uses the first value column x does not use.
+	 */
+	y?: string;
+}
+
+export enum DashboardtypesThresholdAxisDTO {
+	x = 'x',
+	y = 'y',
+}
+export interface DashboardtypesScatterPlotThresholdDTO {
+	/**
+	 * @description The axis the line marks: y (default) draws it horizontally, x vertically. Unit converts against that axis's column unit, and the axis extends to keep the line in view.
+	 */
+	axis?: DashboardtypesThresholdAxisDTO;
+	/**
+	 * @type string
+	 * @description The CSS color of the line, for example #F1575F, which matches the SigNoz red preset; CSS named colors such as red also work.
+	 */
+	color: string;
+	/**
+	 * @type string
+	 * @description The caption shown on the line.
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 * @description The unit id of value, such as ms or percent. Empty means the panel's unit, or the column's unit for a table threshold. Prefer the panel's unit; a different unit works only when it converts to it, such as s against a panel in ms.
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 * @description The value the line is drawn at, in unit.
+	 */
+	value: number;
+}
+
+export interface DashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @description Title, bounds and scale of each axis.
+	 */
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	/**
+	 * @description Dot drawing options.
+	 */
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	/**
+	 * @description Which result columns place, size and color the dots. Each dot is one row of the joined scalar result: one group.
+	 */
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	/**
+	 * @description Per-column units and decimal precision. The x and y columns' units label their axes; every bound column's unit shows in the tooltip.
+	 */
+	formatting?: DashboardtypesTableFormattingDTO;
+	/**
+	 * @description Legend placement and series colors. A series is one color group, labeled by its colorBy values joined with a comma, or All when nothing is grouped.
+	 */
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 * @description Reference lines drawn at fixed values across the x or y axis.
+	 */
+	thresholds?: DashboardtypesScatterPlotThresholdDTO[] | null;
+	/**
+	 * @description The time range the groups are computed over.
+	 */
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 * @description The panel kind.
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	/**
+	 * @description The options for this panel kind. {} accepts every default.
+	 */
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -6726,7 +6931,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -8006,6 +8212,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
 	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
 }
 /**
  * The RFC 6902 operations, applied in order against the dashboard's postable shape.

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -21,6 +21,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
+	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -904,6 +905,12 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });
 
+describe('mapPanelTypeToRequestType', () => {
+	it('sends a scatter plot as scalar, like a table', () => {
+		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
+	});
+});
+
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -51,6 +51,7 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
 			return 'scalar';
@@ -274,6 +275,7 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
 			panelType === PANEL_TYPES.VALUE);
 

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -106,9 +106,17 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[resolvedConfig],
 	);
 
+	const traceOperatorField = useMemo(
+		() =>
+			resolveQueryBuilderField(QueryBuilderField.TraceOperator, resolvedConfig),
+		[resolvedConfig],
+	);
+
+	const canShowTraceOperator = showTraceOperator && !traceOperatorField.hidden;
+
 	const isMultiQueryAllowed = useMemo(
-		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
-		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+		() => !additionalQueries.hidden && (!isRawQuery || canShowTraceOperator),
+		[additionalQueries.hidden, canShowTraceOperator, isRawQuery],
 	);
 
 	const queryDataSources = useMemo(
@@ -146,13 +154,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	);
 
 	const hasTraceOperator = useMemo(
-		() => showTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+		() =>
+			canShowTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
+		[canShowTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
-		[isRawQuery, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isRawQuery) || canShowTraceOperator,
+		[isRawQuery, showOnlyWhereClause, canShowTraceOperator],
 	);
 
 	const showFormula = useMemo(() => {
@@ -168,8 +177,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	}, [formula.hidden, isRawQuery, currentDataSource]);
 
 	const showAddTraceOperator = useMemo(
-		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+		() => canShowTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
+		[canShowTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
 	// Nothing left to add means no footer at all, rather than an empty bar under the
@@ -178,13 +187,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		() =>
 			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
 			((!showOnlyWhereClause && !isRawQuery) ||
-				(currentDataSource === DataSource.TRACES && showTraceOperator)),
+				(currentDataSource === DataSource.TRACES && canShowTraceOperator)),
 		[
 			additionalQueries.hidden,
 			showFormula,
 			showAddTraceOperator,
 			isRawQuery,
-			showTraceOperator,
+			canShowTraceOperator,
 			showOnlyWhereClause,
 			currentDataSource,
 		],
@@ -222,7 +231,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							fieldsConfig={fieldsConfig}
 							allowedDataSources={queryDataSources}
 							isMultiQueryAllowed={isMultiQueryAllowed}
-							showTraceOperator={showTraceOperator}
+							showTraceOperator={canShowTraceOperator}
 							hasTraceOperator={hasTraceOperator}
 							version={version}
 							isAvailableToDisable={false}
@@ -247,7 +256,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
-								showTraceOperator={showTraceOperator}
+								showTraceOperator={canShowTraceOperator}
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -129,6 +129,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										onChange={handleChangeOperator}
 										operators={operators}
 										className="metrics-operators-select"
+										data-testid="metrics-time-aggregation"
 									/>
 								</div>
 							</div>
@@ -192,7 +193,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										AGGREGATE ACROSS TIME SERIES
 									</div>
 								</Tooltip>
-								<div className="metrics-aggregation-section-content-item-value">
+								<div
+									className="metrics-aggregation-section-content-item-value"
+									data-testid="metrics-space-aggregation"
+								>
 									<SpaceAggregationOptions
 										panelType={panelType}
 										key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}
@@ -229,7 +233,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 				<div className="metrics-space-aggregation-section">
 					<div className="metrics-aggregation-section-content">
 						<div className="metrics-aggregation-section-content-item">
-							<div className="metrics-aggregation-section-content-item-value">
+							<div
+								className="metrics-aggregation-section-content-item-value"
+								data-testid="metrics-space-aggregation"
+							>
 								<SpaceAggregationOptions
 									panelType={panelType}
 									key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -332,6 +332,7 @@ function HavingFilter({
 					value={input}
 					onChange={handleChange}
 					theme={isDarkMode ? copilot : githubLight}
+					data-testid="having-editor"
 					className="having-filter-select-editor"
 					width="100%"
 					extensions={[

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/types.ts

@@ -6,7 +6,8 @@ export type NonAddOnField =
 	| QueryBuilderField.StepInterval
 	| QueryBuilderField.Functions
 	| QueryBuilderField.Formula
-	| QueryBuilderField.AdditionalQueries;
+	| QueryBuilderField.AdditionalQueries
+	| QueryBuilderField.TraceOperator;
 
 export type AddOnField = Exclude<QueryBuilderField, NonAddOnField>;
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -18,6 +18,7 @@ import {
 	STEP_INTERVAL_PLACEHOLDER,
 } from '../../queryBuilderFields.utils';
 
+import { isScalarPanelType } from '../panelTypes';
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -45,10 +46,7 @@ function QueryAggregationOptions({
 		const isNonMetricSource =
 			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
 
-		if (
-			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
-		) {
+		if (isNonMetricSource && isScalarPanelType(panelType)) {
 			return { hidden: true, disabled: false, pinned: false };
 		}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -615,6 +615,7 @@ function QueryAggregationSelect({
 					setInput(value);
 					onChange?.(value);
 				}}
+				data-testid="query-aggregation-editor"
 				className={`query-aggregation-select-editor ${
 					validationError ? 'error' : ''
 				}`}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1607,6 +1607,7 @@ function QuerySearch({
 					onChange={handleChange}
 					onUpdate={handleUpdate}
 					onCreateEditor={handleEditorCreate}
+					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1680,6 +1681,7 @@ function QuerySearch({
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,
 						})}
+						data-testid="query-validation-status"
 					>
 						<Popover
 							placement="bottomRight"

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -9,7 +9,6 @@ import {
 import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
 import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
@@ -27,6 +26,7 @@ import {
 	resolveQueryBuilderField,
 } from '../queryBuilderFields.utils';
 
+import { isScalarPanelType } from './panelTypes';
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -112,11 +112,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	}
 
 	const showReduceTo = useMemo(
-		() =>
-			dataSource === DataSource.METRICS &&
-			(panelType === PANEL_TYPES.TABLE ||
-				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
+		() => dataSource === DataSource.METRICS && isScalarPanelType(panelType),
 		[dataSource, panelType],
 	);
 
@@ -183,6 +179,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		<div
 			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
 			ref={ref}
+			data-testid={`query-${query.queryName}`}
 		>
 			<div className="qb-content-section">
 				{(!showOnlyWhereClause || showTraceOperator) && (
@@ -246,6 +243,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							{isMultiQueryAllowed && (
 								<Dropdown
 									items={queryActionItems}
+									testId="query-actions"
 									nativeButton={false}
 									align="end"
 									side="bottom"

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -61,7 +61,10 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
+		<div
+			className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}
+			data-testid="trace-operator"
+		>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -378,6 +378,7 @@ function TraceOperatorEditor({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
+					data-testid="trace-operator-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,

frontend/src/components/QueryBuilderV2/QueryV2/panelTypes.ts

@@ -0,0 +1,13 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+/** Panels that reduce each query to one value per group over the whole window. */
+const SCALAR_PANEL_TYPES: ReadonlySet<string> = new Set<string>([
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.SCATTER,
+	PANEL_TYPES.PIE,
+	PANEL_TYPES.VALUE,
+]);
+
+export function isScalarPanelType(panelType?: string | null): boolean {
+	return panelType != null && SCALAR_PANEL_TYPES.has(panelType);
+}

frontend/src/components/QueryBuilderV2/__tests__/QueryAggregation.test.tsx

@@ -14,6 +14,17 @@ jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
 const queryData = initialQueriesMap.traces.builder
 	.queryData[0] as IBuilderQuery;
 
+function renderFor(panelType: PANEL_TYPES, dataSource: DataSource): void {
+	render(
+		<QueryAggregationOptions
+			dataSource={dataSource}
+			panelType={panelType}
+			onAggregationIntervalChange={jest.fn()}
+			queryData={queryData}
+		/>,
+	);
+}
+
 describe('QueryAggregationOptions step interval placeholder', () => {
 	it('shows the configured placeholder', () => {
 		render(
@@ -34,14 +45,27 @@ describe('QueryAggregationOptions step interval placeholder', () => {
 	});
 
 	it('falls back to Auto', () => {
-		render(
-			<QueryAggregationOptions
-				dataSource={DataSource.TRACES}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				onAggregationIntervalChange={jest.fn()}
-				queryData={queryData}
-			/>,
-		);
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
 		expect(screen.getByPlaceholderText('Auto')).toBeInTheDocument();
 	});
 });
+
+describe('QueryAggregationOptions step interval', () => {
+	it.each([PANEL_TYPES.TABLE, PANEL_TYPES.SCATTER, PANEL_TYPES.PIE])(
+		'is hidden for a %s panel over traces, which reduces the whole window',
+		(panelType) => {
+			renderFor(panelType, DataSource.TRACES);
+			expect(screen.queryByText('every')).not.toBeInTheDocument();
+		},
+	);
+
+	it('stays for a scatter plot over metrics, where it sets the series step', () => {
+		renderFor(PANEL_TYPES.SCATTER, DataSource.METRICS);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+
+	it('stays for a time series over traces', () => {
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+});

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -20,6 +20,7 @@ export enum QueryBuilderField {
 	// Builder level
 	Formula = 'formula',
 	AdditionalQueries = 'additional_queries',
+	TraceOperator = 'trace_operator',
 }
 
 /** Per-query builder fields that can be kept equal across a panel's queries. */

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -65,13 +65,13 @@ export function resolveQueryBuilderFields(
 
 /**
  * The surface a raw-row builder starts from, layered under a caller's own config.
- * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
- * queries when trace matching is on. Omit rather than Partial, so a field added to the
- * enum has to be placed on one side.
+ * `AdditionalQueries` and `TraceOperator` are deliberately absent — a raw trace builder
+ * still takes several queries, and their trace operator, when trace matching is on.
+ * Omit rather than Partial, so a field added to the enum has to be placed on one side.
  */
 export const RAW_QUERY_FIELDS: Omit<
 	Record<QueryBuilderField, QueryBuilderFieldRule>,
-	QueryBuilderField.AdditionalQueries
+	QueryBuilderField.AdditionalQueries | QueryBuilderField.TraceOperator
 > = {
 	[QueryBuilderField.Aggregation]: { state: 'hidden' },
 	[QueryBuilderField.StepInterval]: { state: 'hidden' },

frontend/src/constants/panelTypes.ts

@@ -36,6 +36,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
+		[PANEL_TYPES.SCATTER]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -337,6 +337,7 @@ export enum PANEL_TYPES {
 	TRACE = 'trace',
 	BAR = 'bar',
 	AREA = 'area',
+	SCATTER = 'scatter',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	HEATMAP = 'heatmap',

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -147,6 +147,28 @@ describe('getAutoContexts', () => {
 				metadata: { page: 'alert_list' },
 			},
 		]);
+
+		expect(
+			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=RoutingPolicies'),
+		).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: { page: 'alert_list' },
+			},
+		]);
+
+		expect(
+			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=PlannedDowntime'),
+		).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: { page: 'alert_list' },
+			},
+		]);
 	});
 
 	it('returns dashboard detail context on dashboard page', () => {

frontend/src/container/AIAssistant/__tests__/resolvePageType.test.ts

@@ -58,6 +58,12 @@ describe('resolvePageType', () => {
 		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=Configuration')).toBe(
 			PageTypeDTO.alert_list,
 		);
+		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=RoutingPolicies')).toBe(
+			PageTypeDTO.alert_list,
+		);
+		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=PlannedDowntime')).toBe(
+			PageTypeDTO.alert_list,
+		);
 	});
 
 	it('returns log_detail when logs explorer has activeLogId', () => {

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/__tests__/AccountSettingsDrawer.test.tsx

@@ -30,6 +30,19 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	},
 }));
 
+// jsdom has no layout, and Floating UI's getComputedStyle walk over every
+// popover ancestor costs ~1 s per open here, enough to time out under load.
+jest.mock('@floating-ui/dom', () => ({
+	...jest.requireActual('@floating-ui/dom'),
+	autoUpdate: (): (() => void) => (): void => {},
+	computePosition: (
+		_reference: unknown,
+		_floating: unknown,
+		{ placement = 'bottom', strategy = 'absolute' } = {},
+	): Promise<unknown> =>
+		Promise.resolve({ x: 0, y: 0, placement, strategy, middlewareData: {} }),
+}));
+
 type AccountSettingsDrawerProps = ComponentProps<typeof AccountSettingsDrawer>;
 
 const onClose = jest.fn() as jest.MockedFunction<
@@ -90,7 +103,7 @@ describe('GCP AccountSettingsDrawer', () => {
 	});
 
 	it('keeps save disabled until the project IDs actually change', async () => {
-		const user = userEvent.setup();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderDrawer();
 
 		expect(screen.getByTestId('gcp-update-account-btn')).toHaveAttribute(
@@ -109,7 +122,7 @@ describe('GCP AccountSettingsDrawer', () => {
 	});
 
 	it('sends the updated project IDs while preserving the immutable deployment fields', async () => {
-		const user = userEvent.setup();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderDrawer();
 
 		await addProjectIds(user, 'gcp-edit-project-ids-select', ['project-c']);
@@ -152,7 +165,7 @@ describe('GCP AccountSettingsDrawer', () => {
 	});
 
 	it('blocks the update and shows a validation error when every project ID is removed', async () => {
-		const user = userEvent.setup();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderDrawer();
 
 		// Strip every tag via its remove icon; the list shrinks as we go.
@@ -188,7 +201,7 @@ describe('GCP AccountSettingsDrawer', () => {
 			),
 		);
 
-		const user = userEvent.setup();
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderDrawer();
 
 		await addProjectIds(user, 'gcp-edit-project-ids-select', ['project-c']);

frontend/src/container/PlannedDowntime/AlertRuleTags.tsx

@@ -0,0 +1,55 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Pill } from '@signozhq/ui/pill';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
+
+import type { DowntimeAlertOption } from './types';
+
+interface AlertRuleTagsProps {
+	selectedTags: DowntimeAlertOption[];
+	closable: boolean;
+	handleClose?: (removedTag: DowntimeAlertOption['value']) => void;
+	classname?: string;
+}
+export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
+	const { closable, selectedTags, handleClose, classname } = props;
+	return (
+		<div
+			style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 8 }}
+			className={cx('alert-rule-tags', classname)}
+		>
+			{selectedTags?.map((tag: DowntimeAlertOption, index: number) => {
+				if (closable) {
+					return (
+						<Pill.Closeable
+							key={tag.value}
+							maxWidth={200}
+							onClose={(): void => handleClose?.(tag.value)}
+						>
+							{tag.label}
+						</Pill.Closeable>
+					);
+				}
+
+				const isLongTag = (tag?.label as string)?.length > 20;
+				const tagElem = (
+					<Badge
+						textTransform="none"
+						key={tag.value}
+						color={index % 2 ? 'highlight-danger' : 'primary'}
+						variant="outlined"
+					>
+						{isLongTag
+							? `${(tag?.label as string | null)?.slice(0, 20)}...`
+							: tag?.label}
+					</Badge>
+				);
+				return (
+					<Tooltip title={isLongTag ? tag?.label : undefined} key={tag?.value}>
+						{tagElem}
+					</Tooltip>
+				);
+			})}
+		</div>
+	);
+}

frontend/src/container/PlannedDowntime/PlannedDowntime.module.scss

@@ -0,0 +1,176 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.headerBand {
+	--control-height: 2rem;
+	--input-height: var(--control-height);
+	--input-wrapper-height: var(--control-height);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	flex-shrink: 0;
+	padding: 0 var(--spacing-8) var(--spacing-6) var(--spacing-8);
+}
+
+.commandHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.headingBlock {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.title {
+	margin: 0;
+	color: var(--l1-foreground);
+	font-size: var(--font-size-lg);
+	font-weight: var(--font-weight-medium);
+	line-height: 28px;
+	letter-spacing: -0.09px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.countPill {
+	padding: 2px 9px;
+	border-radius: 999px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	color: var(--l2-foreground);
+	font-size: var(--font-size-xs);
+	font-variant-numeric: tabular-nums;
+}
+
+.grow {
+	flex: 1;
+}
+
+.filtersRow {
+	position: relative;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.searchInput {
+	flex: 1 1 0;
+	min-width: 220px;
+}
+
+.searchIcon {
+	color: var(--l2-foreground);
+}
+
+.actionsHeader {
+	display: block;
+	text-align: right;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.tableContainer {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	--tanstack-table-row-hover-bg: var(--l2-background-hover);
+	--tanstack-table-row-active-bg: var(--l2-background-active);
+	--tanstack-table-row-height: 42px;
+
+	--tanstack-cell-padding-top-override: 5px;
+	--tanstack-cell-padding-bottom-override: 5px;
+	--tanstack-cell-padding-left-override: 16px;
+	--tanstack-cell-padding-right-override: 16px;
+
+	--tanstack-table-row-odd-bg: color-mix(
+		in srgb,
+		var(--l1-foreground) 2%,
+		transparent
+	);
+	--tanstack-table-row-even-bg: color-mix(
+		in srgb,
+		var(--l1-foreground) 1%,
+		transparent
+	);
+}
+
+.paginationContainer {
+	padding-right: var(--spacing-12);
+	height: 62px;
+}
+
+.expression {
+	font-family: var(--font-mono, monospace);
+	font-size: 13px;
+}
+
+.badges {
+	display: flex;
+	gap: var(--spacing-2);
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.timeText {
+	display: inline-block;
+	white-space: nowrap;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: inherit;
+}
+
+.emptyState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-3);
+	padding: 48px 24px;
+	text-align: center;
+}
+
+.emptyIcon {
+	color: var(--l2-foreground);
+}
+
+.emptyTitle {
+	color: var(--l1-foreground);
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.emptySubtitle {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	line-height: 20px;
+	max-width: 420px;
+}
+
+.docsLink {
+	color: var(--l2-foreground);
+	font-size: 13px;
+	text-decoration: none;
+
+	&:hover {
+		color: var(--l1-foreground);
+		text-decoration: underline;
+	}
+}

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -109,191 +109,6 @@
 	}
 }
 
-.planned-downtime-container {
-	display: flex;
-	justify-content: center;
-	width: 100%;
-
-	.planned-downtime-content {
-		width: calc(100% - 30px);
-		max-width: 736px;
-
-		.title {
-			color: var(--l1-foreground);
-			font-size: var(--font-size-lg);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-			line-height: 28px;
-			letter-spacing: -0.09px;
-		}
-
-		.subtitle {
-			color: var(---bg-vanilla-400);
-			font-size: var(--font-size-sm);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-input-affix-wrapper {
-			margin-top: 16px;
-			margin-bottom: 8px;
-		}
-
-		.toolbar {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			margin-top: 12px;
-		}
-
-		.schedule-created-at {
-			border: 1px solid var(--l1-border);
-			background-color: var(--l2-background);
-			border-top: 0px;
-			width: 100%;
-			padding: 8px 16px;
-			gap: 6px;
-			height: 40px;
-			border-bottom-left-radius: 6px;
-			border-bottom-right-radius: 6px;
-
-			display: flex;
-			align-items: center;
-			.ant-typography {
-				color: var(--l2-foreground);
-				font-variant-numeric: lining-nums tabular-nums stacked-fractions
-					slashed-zero;
-				font-feature-settings:
-					'dlig' on,
-					'salt' on,
-					'cpsp' on,
-					'case' on;
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-			}
-		}
-
-		.ant-collapse-header {
-			height: 56px;
-			align-items: center;
-		}
-
-		.header-content {
-			display: flex;
-			gap: 8px;
-
-			.ant-typography {
-				color: var(--l2-foreground);
-				font-variant-numeric: lining-nums tabular-nums stacked-fractions
-					slashed-zero;
-				font-feature-settings:
-					'dlig' on,
-					'salt' on,
-					'cpsp' on,
-					'case' on;
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-			}
-
-			.action-btn {
-				display: flex;
-				align-items: center;
-				gap: 20px;
-				cursor: pointer;
-
-				.hidden {
-					display: none;
-				}
-			}
-		}
-	}
-}
-
-.new-downtime-menu {
-	.create-downtime-menu-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-}
-
-.planned-downtime-table {
-	.ant-table {
-		background: none !important;
-	}
-	.ant-table-cell {
-		padding: 0 !important;
-		border: 0 !important;
-		width: 736px;
-	}
-
-	.ant-table-tbody {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.collapse-list {
-			border: 1px solid var(--l1-border);
-			background-color: var(--l2-background);
-			border-top-left-radius: 6px;
-			border-top-right-radius: 6px;
-
-			.render-item-collapse-list {
-				margin-bottom: 13px;
-				display: grid;
-				grid-template-columns: 128px 1fr;
-			}
-
-			.alert-rule-collapse-list {
-				width: 540px;
-				max-height: 100px;
-				overflow: auto;
-			}
-			.ant-collapse-content-active {
-				border-top: 0;
-			}
-
-			.ant-collapse-item {
-				border: none;
-			}
-			.ant-collapse-content-box {
-				padding: 8px 20px 12px 38px;
-
-				.render-item-value {
-					.ant-typography {
-						color: var(--l1-foreground);
-						font-family: Inter;
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 18px;
-					}
-				}
-			}
-
-			.ant-typography {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-}
-
 .delete-schedule-modal {
 	width: calc(100% - 30px) !important; /* Adjust the 20px as needed */
 	max-width: 384px;

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -1,36 +1,51 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, {
+	ChangeEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
+import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Form } from 'antd';
 import {
 	useDeleteDowntimeScheduleByID,
 	useListDowntimeSchedules,
 } from 'api/generated/services/downtimeschedules';
 import { useListRules } from 'api/generated/services/rules';
 import type { AlertmanagertypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
+import { ColumnSelector } from 'components/TanStackTableView';
+import TextToolTip from 'components/TextToolTip';
 import dayjs from 'dayjs';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { useTimezone } from 'providers/Timezone';
 import { USER_ROLES } from 'types/roles';
 
 import 'dayjs/locale/en';
 
+import styles from './PlannedDowntime.module.scss';
 import { PlannedDowntimeDeleteModal } from './PlannedDowntimeDeleteModal';
 import { PlannedDowntimeForm } from './PlannedDowntimeForm';
-import { PlannedDowntimeList } from './PlannedDowntimeList';
+import PlannedDowntimeList from './PlannedDowntimeList';
 import {
 	defaultInitialValues,
 	deleteDowntimeHandler,
 } from './PlannedDowntimeutils';
+import { getPlannedDowntimeColumns } from './table.config';
+import { DowntimeSchedulesTableData } from './types';
+import usePlannedDowntimeTable from './usePlannedDowntimeTable';
 
 import './PlannedDowntime.styles.scss';
 
+const COLUMNS_STORAGE_KEY = 'planned-downtime-columns';
+
 dayjs.locale('en');
 
 export function PlannedDowntime(): JSX.Element {
@@ -69,7 +84,7 @@ export function PlannedDowntime(): JSX.Element {
 		}
 	}, [form, isOpen]);
 
-	const [searchValue, setSearchValue] = React.useState<string | number>(
+	const [searchValue, setSearchValue] = React.useState<string>(
 		urlQuery.get('search') || '',
 	);
 	const [deleteData, setDeleteData] = useState<{ id: string; name: string }>();
@@ -86,16 +101,62 @@ export function PlannedDowntime(): JSX.Element {
 		history.replace(url);
 	}, 300);
 
+	const {
+		containerRef,
+		calculatedPageSize,
+		filteredDowntimes,
+		pagedDowntimes,
+		setPage,
+		setLimit,
+	} = usePlannedDowntimeTable(
+		downtimeSchedules.data?.data || [],
+		alertOptions || [],
+		searchValue,
+	);
+
 	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
 		setSearchValue(e.target.value);
 		updateUrlWithSearch(e.target.value);
+		setPage(1);
 	};
 
 	const clearSearch = (): void => {
 		setSearchValue('');
 		updateUrlWithSearch('');
+		setPage(1);
 	};
 
+	const canEdit = user?.role !== USER_ROLES.VIEWER;
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const columns = React.useMemo(
+		() => getPlannedDowntimeColumns(formatTimezoneAdjustedTimestamp),
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	const handleCreate = useCallback((): void => {
+		setInitialValues(defaultInitialValues);
+		setIsOpen(true);
+		setEditMode(false);
+		form.resetFields();
+	}, [form]);
+
+	const handleEdit = useCallback(
+		(downtime: DowntimeSchedulesTableData): void => {
+			setInitialValues({ ...downtime });
+			setIsOpen(true);
+			setEditMode(true);
+		},
+		[],
+	);
+
+	const handleDelete = useCallback(
+		(downtime: DowntimeSchedulesTableData): void => {
+			setDeleteData({ id: downtime.id, name: downtime.name });
+			setIsDeleteModalOpen(true);
+		},
+		[],
+	);
+
 	// Delete Downtime Schedule
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 	const { notifications } = useNotifications();
@@ -125,78 +186,107 @@ export function PlannedDowntime(): JSX.Element {
 		});
 	};
 
+	const isFetching = useMemo(
+		() => downtimeSchedules.isLoading || downtimeSchedules.isFetching,
+		[downtimeSchedules.isLoading, downtimeSchedules.isFetching],
+	);
+	const totalDowntimes = useMemo(
+		() => downtimeSchedules.data?.data?.length ?? 0,
+		[downtimeSchedules.data?.data?.length],
+	);
+	const isEmpty = useMemo(
+		() => !isFetching && !searchValue && totalDowntimes === 0,
+		[isFetching, searchValue, totalDowntimes],
+	);
+
 	return (
-		<div className="planned-downtime-container">
-			<div className="planned-downtime-content">
-				<Typography.Title className="title">Planned Downtime</Typography.Title>
-				<Typography.Text className="subtitle">
-					Create and manage planned downtimes.
-				</Typography.Text>
-				<Flex className="toolbar">
+		<div className={styles.container}>
+			<header className={styles.headerBand}>
+				<div className={styles.commandHeader}>
+					<div className={styles.headingBlock}>
+						<Typography.Title className={styles.title}>
+							Planned Downtime
+						</Typography.Title>
+						<span className={styles.countPill}>{totalDowntimes}</span>
+					</div>
+					<div className={styles.grow} />
+					{!isEmpty && (
+						<ColumnSelector
+							columns={columns}
+							storageKey={COLUMNS_STORAGE_KEY}
+							testId="planned-downtime-columns"
+						/>
+					)}
+					<Button
+						variant="solid"
+						color="primary"
+						size="sm"
+						prefix={<Plus size={14} />}
+						onClick={handleCreate}
+						disabled={!canEdit}
+						disabledTooltip="You need edit permissions to create a planned downtime"
+						testId="planned-downtime-create"
+					>
+						New downtime
+					</Button>
+					<TextToolTip
+						text="More details on how to schedule planned downtime"
+						url="https://signoz.io/docs/alerts-management/planned-maintenance/"
+						urlText="Learn More"
+					/>
+				</div>
+
+				<div className={styles.filtersRow}>
 					<Input
-						placeholder="Search for a planned downtime..."
-						prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+						containerClassName={styles.searchInput}
+						placeholder="Search by name"
 						value={searchValue}
 						onChange={handleSearch}
+						suffix={<Search size={14} className={styles.searchIcon} />}
+						testId="planned-downtime-search"
 					/>
-					<Tooltip
-						title={
-							user?.role === USER_ROLES.VIEWER
-								? 'You need edit permissions to create a planned downtime'
-								: ''
-						}
-					>
-						<Button
-							type="primary"
-							onClick={(): void => {
-								setInitialValues(defaultInitialValues);
-								setIsOpen(true);
-								setEditMode(false);
-								form.resetFields();
-							}}
-							disabled={user?.role === USER_ROLES.VIEWER}
-						>
-							<Flex align="center" gap={4}>
-								<Plus size={16} />
-								New downtime
-							</Flex>
-						</Button>
-					</Tooltip>
-				</Flex>
-				<br />
+				</div>
+			</header>
+
+			<div ref={containerRef} className={styles.tableContainer}>
 				<PlannedDowntimeList
-					downtimeSchedules={downtimeSchedules}
-					alertOptions={alertOptions || []}
-					setInitialValues={setInitialValues}
-					setModalOpen={setIsOpen}
-					handleDeleteDowntime={(id, name): void => {
-						setDeleteData({ id, name });
-						setIsDeleteModalOpen(true);
-					}}
-					setEditMode={setEditMode}
-					searchValue={searchValue}
-				/>
-				{isOpen && (
-					<PlannedDowntimeForm
-						alertOptions={alertOptions || []}
-						initialValues={initialValues}
-						isError={isError}
-						isLoading={isLoading}
-						isOpen={isOpen}
-						setIsOpen={setIsOpen}
-						refetchAllSchedules={refetchAllSchedules}
-						isEditMode={isEditMode}
-						form={form}
-					/>
-				)}
-				<PlannedDowntimeDeleteModal
-					isDeleteLoading={isDeleteLoading}
-					isDeleteModalOpen={isDeleteModalOpen}
-					onDeleteHandler={onDeleteHandler}
-					setIsDeleteModalOpen={setIsDeleteModalOpen}
-					downtimeSchedule={deleteData?.name || ''}
+					columns={columns}
+					downtimes={filteredDowntimes}
+					pagedDowntimes={pagedDowntimes}
+					calculatedPageSize={calculatedPageSize}
+					onLimitChange={setLimit}
+					isFetching={isFetching}
+					isError={downtimeSchedules.isError}
+					refetch={refetchAllSchedules}
+					canEdit={canEdit}
+					onEdit={handleEdit}
+					onDelete={handleDelete}
+					onCreate={handleCreate}
+					hasSearchTerm={searchValue.length > 0}
+					onClearSearch={clearSearch}
 				/>
 			</div>
+
+			{isOpen && (
+				<PlannedDowntimeForm
+					alertOptions={alertOptions || []}
+					initialValues={initialValues}
+					isError={isError}
+					isLoading={isLoading}
+					isOpen={isOpen}
+					setIsOpen={setIsOpen}
+					refetchAllSchedules={refetchAllSchedules}
+					isEditMode={isEditMode}
+					form={form}
+				/>
+			)}
+			<PlannedDowntimeDeleteModal
+				isDeleteLoading={isDeleteLoading}
+				isDeleteModalOpen={isDeleteModalOpen}
+				onDeleteHandler={onDeleteHandler}
+				setIsDeleteModalOpen={setIsDeleteModalOpen}
+				downtimeSchedule={deleteData?.name || ''}
+			/>
 		</div>
 	);
 }

frontend/src/container/PlannedDowntime/PlannedDowntimeActionsMenu.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+
+import styles from './PlannedDowntime.module.scss';
+import { DowntimeSchedulesTableData } from './types';
+
+interface PlannedDowntimeActionsMenuProps {
+	downtime: DowntimeSchedulesTableData;
+	onEdit: (downtime: DowntimeSchedulesTableData) => void;
+	onDelete: (downtime: DowntimeSchedulesTableData) => void;
+}
+
+function PlannedDowntimeActionsMenu({
+	downtime,
+	onEdit,
+	onDelete,
+}: PlannedDowntimeActionsMenuProps): JSX.Element {
+	const menuItems = useMemo<DropdownItemType[]>(
+		() => [
+			{
+				type: 'item',
+				value: 'edit',
+				label: 'Edit',
+				prefix: <PenLine size={14} />,
+				onClick: (): void => onEdit(downtime),
+			},
+			{ type: 'separator', value: 'before-delete' },
+			{
+				type: 'item',
+				value: 'delete',
+				label: 'Delete',
+				prefix: <Trash2 size={14} />,
+				danger: true,
+				onClick: (): void => onDelete(downtime),
+			},
+		],
+		[downtime, onEdit, onDelete],
+	);
+
+	return (
+		// the row itself opens the downtime, so the actions keep their clicks
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div
+			className={styles.actions}
+			onClick={(event): void => event.stopPropagation()}
+		>
+			<Dropdown items={menuItems} nativeButton align="end" side="bottom">
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="sm"
+					icon
+					testId={`downtime-actions-${downtime.id}`}
+					aria-label={`Actions for ${downtime.name}`}
+				>
+					<Ellipsis size={16} />
+				</Button>
+			</Dropdown>
+		</div>
+	);
+}
+
+export default PlannedDowntimeActionsMenu;

frontend/src/container/PlannedDowntime/PlannedDowntimeEmptyState.tsx

@@ -0,0 +1,53 @@
+import { CalendarClock, Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './PlannedDowntime.module.scss';
+
+const DOCS_URL =
+	'https://signoz.io/docs/alerts-management/planned-maintenance/';
+
+interface PlannedDowntimeEmptyStateProps {
+	canCreate: boolean;
+	onCreate: () => void;
+}
+
+function PlannedDowntimeEmptyState({
+	canCreate,
+	onCreate,
+}: PlannedDowntimeEmptyStateProps): JSX.Element {
+	return (
+		<div className={styles.emptyState} data-testid="planned-downtime-empty-state">
+			<CalendarClock className={styles.emptyIcon} size={16} />
+			<Typography.Text className={styles.emptyTitle}>
+				No planned downtime yet
+			</Typography.Text>
+			<Typography.Text className={styles.emptySubtitle}>
+				A planned downtime silences alert rules for a window you schedule, once or
+				on repeat, so maintenance does not page anyone.
+			</Typography.Text>
+			{canCreate && (
+				<Button
+					variant="solid"
+					color="primary"
+					size="md"
+					prefix={<Plus size={14} />}
+					onClick={onCreate}
+					testId="planned-downtime-empty-create"
+				>
+					New downtime
+				</Button>
+			)}
+			<a
+				className={styles.docsLink}
+				href={DOCS_URL}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Read the planned downtime guide
+			</a>
+		</div>
+	);
+}
+
+export default PlannedDowntimeEmptyState;

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -43,7 +43,7 @@ import { ALL_TIME_ZONES } from 'utils/timeZoneUtil';
 
 import 'dayjs/locale/en';
 
-import { AlertRuleTags } from './PlannedDowntimeList';
+import { AlertRuleTags } from './AlertRuleTags';
 import {
 	getAlertOptionsFromIds,
 	getDurationInfo,

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -1,379 +1,109 @@
-import React, { ReactNode, useEffect } from 'react';
-import { UseQueryResult } from 'react-query';
-import { Color } from '@signozhq/design-tokens';
-import { Collapse, Flex, Space, Table, TableProps, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Pill } from '@signozhq/ui/pill';
-import { Typography } from '@signozhq/ui/typography';
-import type { DefaultOptionType } from 'antd/es/select';
-import type {
-	ListDowntimeSchedules200,
-	RenderErrorResponseDTO,
-	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesScheduleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { ErrorType } from 'api/generatedAPIInstance';
-import cx from 'classnames';
-import dayjs from 'dayjs';
-import { useNotifications } from 'hooks/useNotifications';
-import { defaultTo } from 'lodash-es';
-import { CalendarClock, PenLine, Trash2 } from '@signozhq/icons';
-import { useAppContext } from 'providers/App/App';
-import { USER_ROLES } from 'types/roles';
+import { useMemo } from 'react';
+import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
+import NoResultsEmptyState from 'components/Alerts/NoResultsEmptyState';
+import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 
-import { showErrorNotification } from 'utils/error';
-import {
-	formatDateTime,
-	getAlertOptionsFromIds,
-	getDuration,
-	recurrenceInfo,
-} from './PlannedDowntimeutils';
+import styles from './PlannedDowntime.module.scss';
+import PlannedDowntimeActionsMenu from './PlannedDowntimeActionsMenu';
+import PlannedDowntimeEmptyState from './PlannedDowntimeEmptyState';
+import { DowntimeSchedulesTableData, PlannedDowntimeListProps } from './types';
+import { PLANNED_DOWNTIME_QUERY_PARAMS } from './usePlannedDowntimeTable';
 
-import './PlannedDowntime.styles.scss';
-
-const { Panel } = Collapse;
-
-interface AlertRuleTagsProps {
-	selectedTags: DefaultOptionType | DefaultOptionType[];
-	closable: boolean;
-	handleClose?: (removedTag: DefaultOptionType['value']) => void;
-	classname?: string;
-}
-export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
-	const { closable, selectedTags, handleClose, classname } = props;
-	return (
-		<Space
-			wrap
-			style={{ marginBottom: 8 }}
-			className={cx('alert-rule-tags', classname)}
-		>
-			{selectedTags?.map((tag: DefaultOptionType, index: number) => {
-				if (closable) {
-					return (
-						<Pill.Closeable
-							key={tag.value}
-							maxWidth={200}
-							onClose={(): void => handleClose?.(tag.value)}
-						>
-							{tag.label}
-						</Pill.Closeable>
-					);
-				}
-
-				const isLongTag = (tag?.label as string)?.length > 20;
-				const tagElem = (
-					<Badge
-						textTransform="none"
-						key={tag.value}
-						color={index % 2 ? 'highlight-danger' : 'primary'}
-						variant="outlined"
-					>
-						{isLongTag
-							? `${(tag?.label as string | null)?.slice(0, 20)}...`
-							: tag?.label}
-					</Badge>
-				);
-				return (
-					<Tooltip title={isLongTag ? tag?.label : undefined} key={tag?.value}>
-						{tagElem}
-					</Tooltip>
-				);
-			})}
-		</Space>
-	);
-}
-
-function HeaderComponent({
-	name,
-	duration,
-	handleEdit,
-	handleDelete,
-}: {
-	name: string;
-	duration: string;
-	handleEdit: () => void;
-	handleDelete: () => void;
-}): JSX.Element {
-	const { user } = useAppContext();
-	const isCrudEnabled = user?.role !== USER_ROLES.VIEWER;
-	return (
-		<Flex className="header-content" justify="space-between">
-			<Flex gap={8}>
-				<Typography>{name}</Typography>
-				<Badge textTransform="none" variant="solid" color="secondary">
-					{duration}
-				</Badge>
-			</Flex>
-
-			{isCrudEnabled && (
-				<div className="action-btn">
-					<PenLine
-						size={14}
-						onClick={(e): void => {
-							e.preventDefault();
-							e.stopPropagation();
-							handleEdit();
-						}}
-					/>
-					<Trash2
-						size={14}
-						color={Color.BG_CHERRY_500}
-						onClick={(e): void => {
-							e.preventDefault();
-							e.stopPropagation();
-							handleDelete();
-						}}
-					/>
-				</div>
-			)}
-		</Flex>
-	);
-}
-
-export function CollapseListContent({
-	created_at,
-	created_by_name,
-	created_by_email,
-	schedule,
-	updated_at,
-	updated_by_name,
-	alertOptions,
-}: {
-	created_at?: string;
-	created_by_name?: string;
-	created_by_email?: string;
-	schedule?: AlertmanagertypesScheduleDTO;
-	updated_at?: string;
-	updated_by_name?: string;
-	alertOptions?: DefaultOptionType[];
-}): JSX.Element {
-	const renderItems = (title: string, value: ReactNode): JSX.Element => (
-		<div className="render-item-collapse-list">
-			<Typography>{title}</Typography>
-			<div className="render-item-value">{value}</div>
-		</div>
-	);
-	const startTime = formatDateTime(schedule?.startTime, schedule?.timezone);
-	const endTime = formatDateTime(schedule?.endTime, schedule?.timezone);
-
-	return (
-		<Flex vertical>
-			{renderItems(
-				'Created by',
-				created_by_name ? (
-					<Flex gap={8}>
-						<Typography>{created_by_name}</Typography>
-						{created_by_email && (
-							<Badge textTransform="none" variant="solid" color="secondary">
-								{created_by_email}
-							</Badge>
-						)}
-					</Flex>
-				) : (
-					'-'
-				),
-			)}
-			{renderItems(
-				'Created on',
-				created_at ? (
-					<Typography>{`${formatDateTime(created_at)}`}</Typography>
-				) : (
-					'-'
-				),
-			)}
-			{updated_at &&
-				renderItems(
-					'Updated on',
-					<Typography>{`${formatDateTime(updated_at)}`}</Typography>,
-				)}
-			{updated_by_name &&
-				renderItems('Updated by', <Typography>{updated_by_name}</Typography>)}
-
-			{renderItems(
-				'Timeframe',
-				schedule?.startTime ? (
-					<Typography>{`${startTime} ⎯ ${endTime}`}</Typography>
-				) : (
-					'-'
-				),
-			)}
-			{renderItems(
-				'Timezone',
-				<Typography>{schedule?.timezone || '-'}</Typography>,
-			)}
-			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
-			{renderItems(
-				'Alerts silenced',
-				alertOptions?.length ? (
-					<AlertRuleTags
-						closable={false}
-						classname="alert-rule-collapse-list"
-						selectedTags={alertOptions}
-					/>
-				) : (
-					<Badge variant="solid" color="secondary">
-						All alert rules
-					</Badge>
-				),
-			)}
-		</Flex>
-	);
-}
-
-export function CustomCollapseList(
-	props: DowntimeSchedulesTableData & {
-		setInitialValues: React.Dispatch<
-			React.SetStateAction<Partial<AlertmanagertypesPlannedMaintenanceDTO>>
-		>;
-		setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-		handleDeleteDowntime: (id: string, name: string) => void;
-		setEditMode: React.Dispatch<React.SetStateAction<boolean>>;
-	},
-): JSX.Element {
-	const {
-		createdAt,
-		createdBy,
-		schedule,
-		updatedAt,
-		updatedBy,
-		name,
-		id,
-		alertOptions,
-		setInitialValues,
-		setModalOpen,
-		handleDeleteDowntime,
-		setEditMode,
-	} = props;
-
-	const scheduleTime = schedule?.startTime
-		? dayjs(schedule.startTime).tz(schedule.timezone)
-		: createdAt || '';
-	const formattedDateAndTime = `Start time ⎯ ${formatDateTime(scheduleTime)} ${schedule?.timezone}`;
-
-	return (
-		<>
-			<Collapse accordion className="collapse-list">
-				<Panel
-					header={
-						<HeaderComponent
-							duration={
-								schedule?.recurrence?.duration
-									? schedule.recurrence.duration
-									: getDuration(schedule?.startTime || '', schedule?.endTime || '')
-							}
-							name={defaultTo(name, '')}
-							handleEdit={() => {
-								setInitialValues({ ...props });
-								setModalOpen(true);
-								setEditMode(true);
-							}}
-							handleDelete={() => handleDeleteDowntime(id ?? '', name || '')}
-						/>
-					}
-					key={id ?? ''}
-				>
-					<CollapseListContent
-						created_at={createdAt ? dayjs(createdAt).toISOString() : ''}
-						created_by_name={defaultTo(createdBy, '')}
-						schedule={schedule}
-						updated_at={updatedAt ? dayjs(updatedAt).toISOString() : ''}
-						updated_by_name={defaultTo(updatedBy, '')}
-						alertOptions={alertOptions}
-					/>
-				</Panel>
-			</Collapse>
-			<div className="schedule-created-at">
-				<CalendarClock size={14} />
-				<Typography.Text>{formattedDateAndTime}</Typography.Text>
-			</div>
-		</>
-	);
-}
-
-export type DowntimeSchedulesTableData =
-	AlertmanagertypesPlannedMaintenanceDTO & {
-		alertOptions: DefaultOptionType[];
-	};
-
-export function PlannedDowntimeList({
-	downtimeSchedules,
-	alertOptions,
-	setInitialValues,
-	setModalOpen,
-	handleDeleteDowntime,
-	setEditMode,
-	searchValue,
-}: {
-	downtimeSchedules: UseQueryResult<
-		ListDowntimeSchedules200,
-		ErrorType<RenderErrorResponseDTO>
-	>;
-	alertOptions: DefaultOptionType[];
-	setInitialValues: React.Dispatch<
-		React.SetStateAction<Partial<AlertmanagertypesPlannedMaintenanceDTO>>
-	>;
-	setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
-	handleDeleteDowntime: (id: string, name: string) => void;
-	setEditMode: React.Dispatch<React.SetStateAction<boolean>>;
-	searchValue: string | number;
-}): JSX.Element {
-	const columns: TableProps<DowntimeSchedulesTableData>['columns'] = [
-		{
-			title: 'Downtime',
-			key: 'downtime',
-			render: (data: DowntimeSchedulesTableData): JSX.Element =>
-				CustomCollapseList({
-					...data,
-					setInitialValues,
-					setModalOpen,
-					handleDeleteDowntime,
-					setEditMode,
-				}),
-		},
-	];
-	const { notifications } = useNotifications();
-
-	const tableData = [...(downtimeSchedules.data?.data || [])]
-		.sort((a, b): number => {
-			if (a?.updatedAt && b?.updatedAt) {
-				return dayjs(b.updatedAt).diff(dayjs(a.updatedAt));
+function PlannedDowntimeList({
+	columns,
+	downtimes,
+	pagedDowntimes,
+	calculatedPageSize,
+	onLimitChange,
+	isFetching,
+	isError,
+	refetch,
+	canEdit,
+	onEdit,
+	onDelete,
+	onCreate,
+	hasSearchTerm,
+	onClearSearch,
+}: PlannedDowntimeListProps): JSX.Element {
+	const columnsWithActions =
+		useMemo((): TableColumnDef<DowntimeSchedulesTableData>[] => {
+			if (!canEdit) {
+				return columns;
 			}
-			return 0;
-		})
-		.filter(
-			(data) =>
-				data.name.includes(searchValue.toLocaleString()) ||
-				data.id === searchValue.toLocaleString(),
-		)
-		.map((data) => {
-			const specificAlertOptions = getAlertOptionsFromIds(
-				data.alertIds || [],
-				alertOptions,
-			);
 
-			return { ...data, alertOptions: specificAlertOptions };
-		});
+			return [
+				...columns,
+				{
+					id: 'actions',
+					header: (): JSX.Element => (
+						<span className={styles.actionsHeader}>Actions</span>
+					),
+					accessorKey: 'id',
+					width: { fixed: '96px', ignoreLastColumnFill: true },
+					enableSort: false,
+					enableResize: false,
+					enableRemove: false,
+					enableMove: false,
+					pin: 'right',
+					cell: ({ row }): JSX.Element => (
+						<PlannedDowntimeActionsMenu
+							downtime={row}
+							onEdit={onEdit}
+							onDelete={onDelete}
+						/>
+					),
+				},
+			];
+		}, [canEdit, columns, onEdit, onDelete]);
 
-	useEffect(() => {
-		if (downtimeSchedules.isError) {
-			showErrorNotification(notifications, downtimeSchedules.error);
-		}
-	}, [downtimeSchedules.error, downtimeSchedules.isError, notifications]);
+	const isEmpty = !isFetching && downtimes.length === 0;
+
+	if (isError) {
+		return (
+			<ErrorEmptyState
+				title="Failed to load planned downtime"
+				onRefresh={refetch}
+			/>
+		);
+	}
+
+	if (isEmpty && hasSearchTerm) {
+		return (
+			<NoResultsEmptyState
+				title="No matching planned downtime"
+				subtitle="No planned downtime matches your search. Try adjusting your search criteria."
+				onClear={onClearSearch}
+				clearButtonText="Clear Search"
+			/>
+		);
+	}
+
+	if (isEmpty) {
+		return <PlannedDowntimeEmptyState canCreate={canEdit} onCreate={onCreate} />;
+	}
 
-	const paginationConfig = {
-		pageSize: 5,
-		showSizeChanger: false,
-		hideOnSinglePage: true,
-	};
 	return (
-		<Table<DowntimeSchedulesTableData>
-			columns={columns}
-			className="planned-downtime-table"
-			bordered={false}
-			dataSource={tableData || []}
-			loading={downtimeSchedules.isLoading || downtimeSchedules.isFetching}
-			showHeader={false}
-			pagination={paginationConfig}
+		<TanStackTable<DowntimeSchedulesTableData>
+			data={pagedDowntimes}
+			columns={columnsWithActions}
+			isLoading={isFetching}
+			getRowKey={(row): string => row.id}
+			getItemKey={(row): string => row.id}
+			getRowTestId={(row): string => `downtime-row-${row.id}`}
+			columnStorageKey="planned-downtime-columns"
+			enableQueryParams={PLANNED_DOWNTIME_QUERY_PARAMS}
+			onRowClick={canEdit ? onEdit : undefined}
+			pagination={{
+				total: downtimes.length,
+				calculatedPageSize,
+				onLimitChange,
+				showTotalCount: true,
+			}}
+			paginationClassname={styles.paginationContainer}
+			enableAlternatingRowColors
+			plainTextCellLineClamp={1}
 		/>
 	);
 }
+
+export default PlannedDowntimeList;

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -1,6 +1,5 @@
 import { UseMutateAsyncFunction } from 'react-query';
 import type { NotificationInstance } from 'antd/es/notification/interface';
-import type { DefaultOptionType } from 'antd/es/select';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type {
 	DeleteDowntimeScheduleByIDPathParameters,
@@ -13,6 +12,8 @@ import { AxiosError } from 'axios';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs, { Dayjs } from 'dayjs';
 import { isEmpty } from 'lodash-es';
+
+import type { DowntimeAlertOption } from './types';
 import APIError from 'types/api/error';
 
 type DateTimeString = string | null | undefined;
@@ -56,8 +57,8 @@ export const formatDateTime = (
 
 export const getAlertOptionsFromIds = (
 	alertIds: string[],
-	alertOptions: DefaultOptionType[],
-): DefaultOptionType[] =>
+	alertOptions: DowntimeAlertOption[],
+): DowntimeAlertOption[] =>
 	alertOptions.filter(
 		(alert) =>
 			alert !== undefined &&
@@ -221,3 +222,48 @@ export const recurrenceOptionWithSubmenu: Option[] = [
 export const isScheduleRecurring = (
 	schedule?: AlertmanagertypesPlannedMaintenanceDTO['schedule'] | null,
 ): boolean => (schedule ? !isEmpty(schedule?.recurrence) : false);
+
+const REPEAT_TYPE_LABEL: Record<string, string> = {
+	daily: 'Daily',
+	weekly: 'Weekly',
+	monthly: 'Monthly',
+};
+
+export const formatRepeats = (
+	schedule: AlertmanagertypesScheduleDTO,
+): string => {
+	const recurrence = schedule.recurrence;
+	if (!recurrence) {
+		return 'Does not repeat';
+	}
+
+	const label =
+		REPEAT_TYPE_LABEL[recurrence.repeatType] ?? recurrence.repeatType;
+	const days = recurrence.repeatOn?.length
+		? ` on ${recurrence.repeatOn
+				.map((day) => day.charAt(0).toUpperCase() + day.slice(1, 3))
+				.join(', ')}`
+		: '';
+	const duration = recurrence.duration ? ` · ${recurrence.duration}` : '';
+	return `${label}${days}${duration}`;
+};
+
+export const formatWindow = (
+	schedule: AlertmanagertypesScheduleDTO,
+): string => {
+	if (!schedule.startTime) {
+		return '-';
+	}
+	const start = formatDateTime(schedule.startTime, schedule.timezone);
+	const timezone = schedule.timezone ? ` (${schedule.timezone})` : '';
+	if (!schedule.endTime) {
+		return `From ${start}${timezone}`;
+	}
+	return `${start} ⎯ ${formatDateTime(schedule.endTime, schedule.timezone)}${timezone}`;
+};
+
+export const formatScheduleDuration = (
+	schedule: AlertmanagertypesScheduleDTO,
+): string =>
+	schedule.recurrence?.duration ||
+	getDuration(schedule.startTime, schedule.endTime);

frontend/src/container/PlannedDowntime/__test__/AlertRuleTags.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'tests/test-utils';
 
-import { AlertRuleTags } from '../PlannedDowntimeList';
+import { AlertRuleTags } from '../AlertRuleTags';
 
 const RULES = [
 	{ label: 'Postgres connections near limit', value: 'rule-5' },

frontend/src/container/PlannedDowntime/__test__/PlannedDowntime.test.tsx

@@ -1,21 +1,34 @@
 import { UseQueryResult } from 'react-query';
+import { VirtuosoMockContext } from 'react-virtuoso';
 import { fireEvent, screen } from '@testing-library/react';
 import type {
 	ListDowntimeSchedules200,
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { ErrorType } from 'api/generatedAPIInstance';
 import {
-	mockLocation,
-	mockQueryParams,
-} from 'container/RoutingPolicies/__tests__/testUtils';
-import { render } from 'tests/test-utils';
+	AlertmanagertypesRepeatOnDTO,
+	AlertmanagertypesRepeatTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { ErrorType } from 'api/generatedAPIInstance';
+import { mockLocation } from 'container/RoutingPolicies/__tests__/testUtils';
+import { render, userEvent } from 'tests/test-utils';
 import { USER_ROLES } from 'types/roles';
 
 import { PlannedDowntime } from '../PlannedDowntime';
 import { buildSchedule, createMockDowntime } from './testUtils';
 
-const SEARCH_PLACEHOLDER = 'Search for a planned downtime...';
+const SEARCH_TEST_ID = 'planned-downtime-search';
+const CREATE_TEST_ID = 'planned-downtime-create';
+
+function renderPage(role: string = USER_ROLES.ADMIN): void {
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 800, itemHeight: 46 }}>
+			<PlannedDowntime />
+		</VirtuosoMockContext.Provider>,
+		{},
+		{ role },
+	);
+}
 
 const MOCK_DOWNTIME_1_NAME = 'Mock Downtime 1';
 const MOCK_DOWNTIME_2_NAME = 'Mock Downtime 2';
@@ -27,11 +40,19 @@ const MOCK_DATE_3 = '2024-01-03';
 const MOCK_DOWNTIME_1 = createMockDowntime({
 	id: '1',
 	name: MOCK_DOWNTIME_1_NAME,
+	description: 'Database maintenance',
 	createdAt: MOCK_DATE_1,
+	createdBy: 'creator@signoz.io',
 	updatedAt: MOCK_DATE_1,
+	updatedBy: 'editor@signoz.io',
 	schedule: buildSchedule({
 		startTime: MOCK_DATE_1,
-		timezone: 'UTC',
+		timezone: 'Asia/Kolkata',
+		recurrence: {
+			duration: '2h',
+			repeatType: AlertmanagertypesRepeatTypeDTO.weekly,
+			repeatOn: [AlertmanagertypesRepeatOnDTO.monday],
+		},
 	}),
 	alertIds: [],
 });
@@ -126,113 +147,152 @@ jest.mock('api/generated/services/rules', () => ({
 describe('PlannedDowntime Component', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockUrlQuery = mockQueryParams({});
+		mockUrlQuery = new URLSearchParams();
 		mockLocation('/alerts');
 	});
 
-	it('renders the PlannedDowntime component properly', () => {
-		render(<PlannedDowntime />, {}, { role: 'ADMIN' });
+	it('renders the header, search and create action', () => {
+		renderPage();
 
-		// Check if title is rendered
 		expect(screen.getByText('Planned Downtime')).toBeInTheDocument();
-
-		// Check if subtitle is rendered
-		expect(
-			screen.getByText('Create and manage planned downtimes.'),
-		).toBeInTheDocument();
-
-		// Check if search input is rendered
-		expect(screen.getByPlaceholderText(SEARCH_PLACEHOLDER)).toBeInTheDocument();
-
-		// Check if "New downtime" button is enabled for ADMIN
-		const newDowntimeButton = screen.getByRole('button', {
-			name: /new downtime/i,
-		});
-		expect(newDowntimeButton).toBeInTheDocument();
-		expect(newDowntimeButton).not.toBeDisabled();
+		expect(screen.getByTestId(SEARCH_TEST_ID)).toBeInTheDocument();
+		expect(screen.getByTestId(CREATE_TEST_ID)).toHaveAttribute(
+			'aria-disabled',
+			'false',
+		);
 	});
 
 	it('disables the "New downtime" button for users with VIEWER role', () => {
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.VIEWER });
+		renderPage(USER_ROLES.VIEWER);
 
-		// Check if "New downtime" button is disabled for VIEWER
-		const newDowntimeButton = screen.getByRole('button', {
-			name: /new downtime/i,
-		});
-		expect(newDowntimeButton).toBeInTheDocument();
-		expect(newDowntimeButton).toBeDisabled();
-
-		expect(newDowntimeButton).toHaveAttribute('disabled');
+		expect(screen.getByTestId(CREATE_TEST_ID)).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
 	});
 
 	it('should load with search term from URL query params', () => {
 		const searchTerm = 'existing search';
-		mockUrlQuery = mockQueryParams({ search: searchTerm });
+		mockUrlQuery = new URLSearchParams({ search: searchTerm });
 
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.ADMIN });
+		renderPage();
 
-		const searchInput = screen.getByPlaceholderText(
-			SEARCH_PLACEHOLDER,
-		) as HTMLInputElement;
+		const searchInput = screen.getByTestId(SEARCH_TEST_ID) as HTMLInputElement;
 		expect(searchInput.value).toBe(searchTerm);
 	});
 
 	it('should initialize with empty search when no search param is in URL', () => {
-		mockUrlQuery = mockQueryParams({});
+		renderPage();
 
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.ADMIN });
-
-		const searchInput = screen.getByPlaceholderText(
-			SEARCH_PLACEHOLDER,
-		) as HTMLInputElement;
+		const searchInput = screen.getByTestId(SEARCH_TEST_ID) as HTMLInputElement;
 		expect(searchInput.value).toBe('');
 	});
 
 	it('should display all downtime schedules when no search term is entered', async () => {
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.ADMIN });
+		renderPage();
 
-		expect(screen.getByText(MOCK_DOWNTIME_1_NAME)).toBeInTheDocument();
+		await expect(
+			screen.findByText(MOCK_DOWNTIME_1_NAME),
+		).resolves.toBeInTheDocument();
 		expect(screen.getByText(MOCK_DOWNTIME_2_NAME)).toBeInTheDocument();
 		expect(screen.getByText(MOCK_DOWNTIME_3_NAME)).toBeInTheDocument();
 	});
 
+	it('shows the key schedule details and hides secondary columns by default', async () => {
+		renderPage();
+
+		await screen.findByText(MOCK_DOWNTIME_1_NAME);
+		expect(screen.getByText(/\(Asia\/Kolkata\)$/)).toBeInTheDocument();
+		expect(screen.getByText('Weekly on Mon · 2h')).toBeInTheDocument();
+		expect(screen.queryByText('Asia/Kolkata')).not.toBeInTheDocument();
+		expect(screen.queryByText('2h')).not.toBeInTheDocument();
+		expect(screen.queryByText('Database maintenance')).not.toBeInTheDocument();
+		expect(screen.queryByText('creator@signoz.io')).not.toBeInTheDocument();
+		expect(screen.queryByText('editor@signoz.io')).not.toBeInTheDocument();
+		expect(screen.getAllByText('All alert rules')).toHaveLength(3);
+		expect(screen.getAllByText('Active')).toHaveLength(3);
+	});
+
+	it('lets every data column be resized', async () => {
+		renderPage();
+
+		await screen.findByText(MOCK_DOWNTIME_1_NAME);
+		const resizable = Array.from(document.querySelectorAll('th'))
+			.filter((th) => th.querySelector('[title="Drag to resize column"]'))
+			.map((th) => th.textContent?.trim());
+		expect(resizable).toStrictEqual([
+			'Downtime',
+			'Status',
+			'Schedule',
+			'Repeats',
+			'Alerts Silenced',
+		]);
+	});
+
 	it('should filter downtime schedules by name when searching', async () => {
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.ADMIN });
+		renderPage();
 
-		expect(screen.getByText(MOCK_DOWNTIME_1_NAME)).toBeInTheDocument();
+		await expect(
+			screen.findByText(MOCK_DOWNTIME_1_NAME),
+		).resolves.toBeInTheDocument();
 
-		const searchInput = screen.getByPlaceholderText(SEARCH_PLACEHOLDER);
+		fireEvent.change(screen.getByTestId(SEARCH_TEST_ID), {
+			target: { value: MOCK_DOWNTIME_1_NAME },
+		});
 
-		fireEvent.change(searchInput, { target: { value: MOCK_DOWNTIME_1_NAME } });
-
-		expect(screen.getByText(MOCK_DOWNTIME_1_NAME)).toBeInTheDocument();
+		await expect(
+			screen.findByText(MOCK_DOWNTIME_1_NAME),
+		).resolves.toBeInTheDocument();
 		expect(screen.queryByText(MOCK_DOWNTIME_2_NAME)).not.toBeInTheDocument();
 		expect(screen.queryByText(MOCK_DOWNTIME_3_NAME)).not.toBeInTheDocument();
 	});
 
 	it('should filter downtime schedules with partial name match', async () => {
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.ADMIN });
+		renderPage();
 
-		expect(screen.getByText(MOCK_DOWNTIME_1_NAME)).toBeInTheDocument();
+		await expect(
+			screen.findByText(MOCK_DOWNTIME_1_NAME),
+		).resolves.toBeInTheDocument();
 
-		const searchInput = screen.getByPlaceholderText(SEARCH_PLACEHOLDER);
+		fireEvent.change(screen.getByTestId(SEARCH_TEST_ID), {
+			target: { value: '2' },
+		});
 
-		fireEvent.change(searchInput, { target: { value: '2' } });
-
-		expect(screen.getByText(MOCK_DOWNTIME_2_NAME)).toBeInTheDocument();
+		await expect(
+			screen.findByText(MOCK_DOWNTIME_2_NAME),
+		).resolves.toBeInTheDocument();
 		expect(screen.queryByText(MOCK_DOWNTIME_1_NAME)).not.toBeInTheDocument();
 		expect(screen.queryByText(MOCK_DOWNTIME_3_NAME)).not.toBeInTheDocument();
 	});
 
 	it('should show no results when search term matches nothing', async () => {
-		render(<PlannedDowntime />, {}, { role: USER_ROLES.ADMIN });
+		renderPage();
 
-		const searchInput = screen.getByPlaceholderText(SEARCH_PLACEHOLDER);
-
-		fireEvent.change(searchInput, { target: { value: 'NonExistentDowntime' } });
+		fireEvent.change(screen.getByTestId(SEARCH_TEST_ID), {
+			target: { value: 'NonExistentDowntime' },
+		});
 
+		await expect(
+			screen.findByTestId('no-results-empty-state'),
+		).resolves.toBeInTheDocument();
 		expect(screen.queryByText(MOCK_DOWNTIME_1_NAME)).not.toBeInTheDocument();
-		expect(screen.queryByText(MOCK_DOWNTIME_2_NAME)).not.toBeInTheDocument();
-		expect(screen.queryByText(MOCK_DOWNTIME_3_NAME)).not.toBeInTheDocument();
+	});
+
+	it('opens the delete confirmation from the row actions', async () => {
+		renderPage();
+
+		await userEvent.click(await screen.findByTestId('downtime-actions-1'));
+		await userEvent.click(await screen.findByText('Delete'));
+
+		await expect(
+			screen.findByRole('button', { name: 'Delete Schedule' }),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('hides row actions for viewers', async () => {
+		renderPage(USER_ROLES.VIEWER);
+
+		await screen.findByText(MOCK_DOWNTIME_1_NAME);
+		expect(screen.queryByTestId('downtime-actions-1')).not.toBeInTheDocument();
 	});
 });

frontend/src/container/PlannedDowntime/table.config.tsx

@@ -0,0 +1,236 @@
+import { Badge } from '@signozhq/ui/badge';
+import { AlertmanagertypesMaintenanceStatusDTO } from 'api/generated/services/sigNoz.schemas';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { toRelativeTime } from 'pages/AlertList/NotificationChannels/utils/relativeTime';
+
+import styles from './PlannedDowntime.module.scss';
+import {
+	formatRepeats,
+	formatScheduleDuration,
+	formatWindow,
+} from './PlannedDowntimeutils';
+import { DowntimeSchedulesTableData } from './types';
+
+const STATUS_BADGE: Record<
+	AlertmanagertypesMaintenanceStatusDTO,
+	{ label: string; color: 'success' | 'info' | 'secondary' }
+> = {
+	[AlertmanagertypesMaintenanceStatusDTO.active]: {
+		label: 'Active',
+		color: 'success',
+	},
+	[AlertmanagertypesMaintenanceStatusDTO.upcoming]: {
+		label: 'Upcoming',
+		color: 'info',
+	},
+	[AlertmanagertypesMaintenanceStatusDTO.expired]: {
+		label: 'Expired',
+		color: 'secondary',
+	},
+};
+
+export function getPlannedDowntimeColumns(
+	formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
+): TableColumnDef<DowntimeSchedulesTableData>[] {
+	const textCell = (value: string | undefined): JSX.Element => (
+		<TanStackTable.Text title={value || undefined}>
+			{value || '-'}
+		</TanStackTable.Text>
+	);
+
+	const timestampCell = (
+		row: DowntimeSchedulesTableData,
+		value: string | undefined,
+	): JSX.Element => {
+		if (!value) {
+			return <TanStackTable.Text>-</TanStackTable.Text>;
+		}
+
+		return (
+			<TanStackTable.HoverTooltip
+				rowId={row.id}
+				title={formatTimezoneAdjustedTimestamp(
+					value,
+					DATE_TIME_FORMATS.DASH_DATETIME,
+				)}
+			>
+				<span className={styles.timeText}>{toRelativeTime(value)}</span>
+			</TanStackTable.HoverTooltip>
+		);
+	};
+
+	return [
+		{
+			id: 'name',
+			header: 'Downtime',
+			accessorKey: 'name',
+			width: { default: '100%', min: '200px' },
+			enableSort: true,
+			enableResize: true,
+			enableRemove: false,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<TanStackTable.Text
+					title={row.name}
+					data-testid={`downtime-row-${row.id}-name`}
+				>
+					{row.name}
+				</TanStackTable.Text>
+			),
+		},
+		{
+			id: 'status',
+			header: 'Status',
+			accessorKey: 'status',
+			width: { default: '110px', min: '100px' },
+			enableSort: true,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => {
+				const status = STATUS_BADGE[row.status];
+				return status ? (
+					<Badge textTransform="none" variant="outlined" color={status.color}>
+						{status.label}
+					</Badge>
+				) : (
+					textCell(row.status)
+				);
+			},
+		},
+		{
+			id: 'window',
+			header: 'Schedule',
+			accessorFn: (row) => row.schedule?.startTime,
+			width: { default: '340px', min: '220px' },
+			enableSort: true,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(formatWindow(row.schedule)),
+		},
+		{
+			id: 'timezone',
+			header: 'Timezone',
+			accessorFn: (row) => row.schedule?.timezone,
+			width: { default: '130px', min: '110px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(row.schedule?.timezone),
+		},
+		{
+			id: 'repeats',
+			header: 'Repeats',
+			accessorFn: (row) => row.schedule?.recurrence?.repeatType,
+			width: { default: '180px', min: '120px' },
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(formatRepeats(row.schedule)),
+		},
+		{
+			id: 'duration',
+			header: 'Duration',
+			accessorFn: (row) => row.schedule?.recurrence?.duration,
+			width: { default: '110px', min: '90px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element =>
+				textCell(formatScheduleDuration(row.schedule)),
+		},
+		{
+			id: 'alertsSilenced',
+			header: 'Alerts Silenced',
+			accessorKey: 'alertIds',
+			width: { default: '200px', min: '140px' },
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element =>
+				row.alertOptions.length ? (
+					<div
+						className={styles.badges}
+						title={row.alertOptions
+							.flatMap((alert) =>
+								typeof alert.label === 'string' ? [alert.label] : [],
+							)
+							.join(', ')}
+					>
+						{row.alertOptions.map((alert) => (
+							<Badge
+								key={alert.value}
+								textTransform="none"
+								variant="solid"
+								color="secondary"
+							>
+								{alert.label}
+							</Badge>
+						))}
+					</div>
+				) : (
+					<Badge textTransform="none" variant="solid" color="secondary">
+						All alert rules
+					</Badge>
+				),
+		},
+		{
+			id: 'description',
+			header: 'Description',
+			accessorKey: 'description',
+			width: { default: '200px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(row.description),
+		},
+		{
+			id: 'createdBy',
+			header: 'Created By',
+			accessorKey: 'createdBy',
+			width: { default: '180px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(row.createdBy),
+		},
+		{
+			id: 'createdAt',
+			header: 'Created At',
+			accessorKey: 'createdAt',
+			width: { default: '150px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: true,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => timestampCell(row, row.createdAt),
+		},
+		{
+			id: 'updatedBy',
+			header: 'Updated By',
+			accessorKey: 'updatedBy',
+			width: { default: '180px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(row.updatedBy),
+		},
+		{
+			id: 'updatedAt',
+			header: 'Updated At',
+			accessorKey: 'updatedAt',
+			width: { default: '150px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: true,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => timestampCell(row, row.updatedAt),
+		},
+	];
+}

frontend/src/container/PlannedDowntime/types.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { AlertmanagertypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import type { SelectOption } from 'types/common/select';
+
+export type DowntimeAlertOption = Omit<
+	SelectOption<string | number | null, ReactNode>,
+	'value'
+> & {
+	value?: string | number | null;
+};
+
+export type DowntimeSchedulesTableData =
+	AlertmanagertypesPlannedMaintenanceDTO & {
+		alertOptions: DowntimeAlertOption[];
+	};
+
+export interface PlannedDowntimeListProps {
+	columns: TableColumnDef<DowntimeSchedulesTableData>[];
+	downtimes: DowntimeSchedulesTableData[];
+	pagedDowntimes: DowntimeSchedulesTableData[];
+	calculatedPageSize: number | null;
+	onLimitChange: (limit: number) => void;
+	isFetching: boolean;
+	isError: boolean;
+	refetch: () => void;
+	canEdit: boolean;
+	onEdit: (downtime: DowntimeSchedulesTableData) => void;
+	onDelete: (downtime: DowntimeSchedulesTableData) => void;
+	onCreate: () => void;
+	hasSearchTerm: boolean;
+	onClearSearch: () => void;
+}

frontend/src/container/PlannedDowntime/usePlannedDowntimeTable.ts

@@ -0,0 +1,108 @@
+import { RefObject, useMemo } from 'react';
+import type { AlertmanagertypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
+import { sortByColumn } from 'components/Alerts/utils';
+import type { SortState } from 'components/TanStackTableView/types';
+import { useCalculatedPageSize } from 'components/TanStackTableView/useCalculatedPageSize';
+import { useTableParams } from 'components/TanStackTableView/useTableParams';
+
+import { getAlertOptionsFromIds } from './PlannedDowntimeutils';
+import { DowntimeAlertOption, DowntimeSchedulesTableData } from './types';
+
+export const PLANNED_DOWNTIME_QUERY_PARAMS = {
+	orderBy: 'orderBy',
+	page: 'page',
+	limit: 'limit',
+} as const;
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+const DEFAULT_SORT: SortState = { columnName: 'updatedAt', order: 'desc' };
+
+const toTime = (value: string | undefined): number =>
+	value ? new Date(value).getTime() : 0;
+
+function getSortValue(
+	downtime: DowntimeSchedulesTableData,
+	columnName: string,
+): string | number {
+	switch (columnName) {
+		case 'name':
+			return downtime.name.toLowerCase();
+		case 'status':
+			return downtime.status;
+		case 'window':
+			return toTime(downtime.schedule?.startTime);
+		case 'createdAt':
+			return toTime(downtime.createdAt);
+		case 'updatedAt':
+			return toTime(downtime.updatedAt);
+		default:
+			return '';
+	}
+}
+
+interface UsePlannedDowntimeTableReturn {
+	containerRef: RefObject<HTMLDivElement>;
+	calculatedPageSize: number | null;
+	filteredDowntimes: DowntimeSchedulesTableData[];
+	pagedDowntimes: DowntimeSchedulesTableData[];
+	setPage: (page: number) => void;
+	setLimit: (limit: number) => void;
+}
+
+function usePlannedDowntimeTable(
+	downtimes: AlertmanagertypesPlannedMaintenanceDTO[],
+	alertOptions: DowntimeAlertOption[],
+	searchValue: string,
+): UsePlannedDowntimeTableReturn {
+	const { containerRef, calculatedPageSize } = useCalculatedPageSize({
+		rowHeight: 46,
+	});
+
+	const { orderBy, page, limit, setLimit, setPage } = useTableParams(
+		PLANNED_DOWNTIME_QUERY_PARAMS,
+		{
+			page: DEFAULT_PAGE,
+			limit: DEFAULT_LIMIT,
+			storageKey: 'planned-downtime',
+			calculatedPageSize,
+			cleanupOnUnmount: true,
+		},
+	);
+
+	const filteredDowntimes = useMemo(() => {
+		const search = searchValue.toLowerCase();
+		return downtimes
+			.filter(
+				(downtime) =>
+					downtime.name.toLowerCase().includes(search) ||
+					downtime.id === searchValue,
+			)
+			.map((downtime) => ({
+				...downtime,
+				alertOptions: getAlertOptionsFromIds(downtime.alertIds || [], alertOptions),
+			}));
+	}, [downtimes, alertOptions, searchValue]);
+
+	const pagedDowntimes = useMemo(() => {
+		const sorted = sortByColumn(
+			filteredDowntimes,
+			orderBy,
+			getSortValue,
+			DEFAULT_SORT,
+		);
+		const start = (page - 1) * limit;
+		return sorted.slice(start, start + limit);
+	}, [filteredDowntimes, orderBy, page, limit]);
+
+	return {
+		containerRef,
+		calculatedPageSize,
+		filteredDowntimes,
+		pagedDowntimes,
+		setPage,
+		setLimit,
+	};
+}
+
+export default usePlannedDowntimeTable;

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -112,7 +112,7 @@ export function Formula({
 	);
 
 	return (
-		<Row gutter={[0, 15]}>
+		<Row gutter={[0, 15]} data-testid={`formula-${formula.queryName}`}>
 			<QBEntityOptions
 				isCollapsed={isCollapse}
 				showFunctions={false}
@@ -130,6 +130,7 @@ export function Formula({
 						<Input.TextArea
 							name="expression"
 							className="formula-expression"
+							data-testid="formula-expression"
 							onChange={handleChange}
 							size="middle"
 							value={formula.expression}
@@ -141,6 +142,7 @@ export function Formula({
 						<Input
 							name="legend"
 							className="formula-legend"
+							data-testid="formula-legend"
 							onChange={handleChange}
 							size="middle"
 							value={formula.legend}

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -98,6 +98,7 @@ export default function QBEntityOptions({
 									value="search"
 									className="periscope-btn collapse"
 									onClick={onCollapseEntity}
+									data-testid="qb-entity-collapse"
 								>
 									{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
 								</Button>
@@ -108,6 +109,7 @@ export default function QBEntityOptions({
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
 									disabled={isRawQuery && !showTraceOperator}
+									data-testid="qb-entity-visibility"
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -115,7 +117,11 @@ export default function QBEntityOptions({
 
 							{entityType === 'query' && showCloneOption && (
 								<Tooltip title={`Clone Query ${entityData.queryName}`}>
-									<Button className={cx('periscope-btn')} onClick={handleCloneEntity}>
+									<Button
+										className={cx('periscope-btn')}
+										onClick={handleCloneEntity}
+										data-testid="qb-entity-clone"
+									>
 										<Copy size={14} />
 									</Button>
 								</Tooltip>
@@ -131,6 +137,7 @@ export default function QBEntityOptions({
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
 								)}
+								data-testid="qb-entity-name"
 							>
 								{entityData.queryName}
 							</Button>
@@ -185,7 +192,11 @@ export default function QBEntityOptions({
 				</div>
 
 				{showDeleteButton && !isRawQuery && (
-					<Button className="periscope-btn ghost" onClick={onDelete}>
+					<Button
+						className="periscope-btn ghost"
+						onClick={onDelete}
+						data-testid="qb-entity-delete"
+					>
 						<Trash2 size={14} />
 					</Button>
 				)}

frontend/src/container/RoutingPolicies/RoutingPolicies.module.scss

@@ -0,0 +1,176 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.headerBand {
+	--control-height: 2rem;
+	--input-height: var(--control-height);
+	--input-wrapper-height: var(--control-height);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	flex-shrink: 0;
+	padding: 0 var(--spacing-8) var(--spacing-6) var(--spacing-8);
+}
+
+.commandHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.headingBlock {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.title {
+	margin: 0;
+	color: var(--l1-foreground);
+	font-size: var(--font-size-lg);
+	font-weight: var(--font-weight-medium);
+	line-height: 28px;
+	letter-spacing: -0.09px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.countPill {
+	padding: 2px 9px;
+	border-radius: 999px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	color: var(--l2-foreground);
+	font-size: var(--font-size-xs);
+	font-variant-numeric: tabular-nums;
+}
+
+.grow {
+	flex: 1;
+}
+
+.filtersRow {
+	position: relative;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.searchInput {
+	flex: 1 1 0;
+	min-width: 220px;
+}
+
+.searchIcon {
+	color: var(--l2-foreground);
+}
+
+.actionsHeader {
+	display: block;
+	text-align: right;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.tableContainer {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	--tanstack-table-row-hover-bg: var(--l2-background-hover);
+	--tanstack-table-row-active-bg: var(--l2-background-active);
+	--tanstack-table-row-height: 42px;
+
+	--tanstack-cell-padding-top-override: 5px;
+	--tanstack-cell-padding-bottom-override: 5px;
+	--tanstack-cell-padding-left-override: 16px;
+	--tanstack-cell-padding-right-override: 16px;
+
+	--tanstack-table-row-odd-bg: color-mix(
+		in srgb,
+		var(--l1-foreground) 2%,
+		transparent
+	);
+	--tanstack-table-row-even-bg: color-mix(
+		in srgb,
+		var(--l1-foreground) 1%,
+		transparent
+	);
+}
+
+.paginationContainer {
+	padding-right: var(--spacing-12);
+	height: 62px;
+}
+
+.expression {
+	font-family: var(--font-mono, monospace);
+	font-size: 13px;
+}
+
+.badges {
+	display: flex;
+	gap: var(--spacing-2);
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.timeText {
+	display: inline-block;
+	white-space: nowrap;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: inherit;
+}
+
+.emptyState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-3);
+	padding: 48px 24px;
+	text-align: center;
+}
+
+.emptyIcon {
+	color: var(--l2-foreground);
+}
+
+.emptyTitle {
+	color: var(--l1-foreground);
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.emptySubtitle {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	line-height: 20px;
+	max-width: 420px;
+}
+
+.docsLink {
+	color: var(--l2-foreground);
+	font-size: 13px;
+	text-decoration: none;
+
+	&:hover {
+		color: var(--l1-foreground);
+		text-decoration: underline;
+	}
+}

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,21 +1,30 @@
-import { ChangeEvent, useMemo } from 'react';
+import { ChangeEvent, useCallback, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
+import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { Button, Flex, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { ColumnSelector } from 'components/TanStackTableView';
+import TextToolTip from 'components/TextToolTip';
 import { useAppContext } from 'providers/App/App';
+import { useTimezone } from 'providers/Timezone';
 import { USER_ROLES } from 'types/roles';
 
 import DeleteRoutingPolicy from './DeleteRoutingPolicy';
+import styles from './RoutingPolicies.module.scss';
 import RoutingPolicyDetails from './RoutingPolicyDetails';
 import RoutingPolicyList from './RoutingPolicyList';
+import { getRoutingPolicyColumns } from './table.config';
+import { RoutingPolicy } from './types';
 import useRoutingPolicies from './useRoutingPolicies';
+import useRoutingPoliciesTable from './useRoutingPoliciesTable';
 
 import './styles.scss';
 
+const COLUMNS_STORAGE_KEY = 'routing-policies-columns';
+
 function RoutingPolicies(): JSX.Element {
 	const { user } = useAppContext();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 	const {
 		// Routing Policies
 		selectedRoutingPolicy,
@@ -46,79 +55,136 @@ function RoutingPolicies(): JSX.Element {
 		isPolicyDetailsModalActionLoading,
 	} = useRoutingPolicies();
 
-	const disableCreateButton = user?.role === USER_ROLES.VIEWER;
+	const { containerRef, calculatedPageSize, pagedPolicies, setPage, setLimit } =
+		useRoutingPoliciesTable(routingPoliciesData);
 
-	const tooltipTitle = useMemo(() => {
-		if (user?.role === USER_ROLES.VIEWER) {
-			return 'You need edit permissions to create a routing policy';
-		}
-		return '';
-	}, [user?.role]);
+	const canEdit = user?.role !== USER_ROLES.VIEWER;
+
+	const columns = useMemo(
+		() => getRoutingPolicyColumns(formatTimezoneAdjustedTimestamp),
+		[formatTimezoneAdjustedTimestamp],
+	);
 
 	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
 		setSearchTerm(e.target.value || '');
+		setPage(1);
 	};
 
+	const handleClearSearch = useCallback((): void => {
+		setSearchTerm('');
+		setPage(1);
+	}, [setSearchTerm, setPage]);
+
+	const handleCreate = useCallback(
+		(): void => handlePolicyDetailsModalOpen('create', null),
+		[handlePolicyDetailsModalOpen],
+	);
+
+	const handleEdit = useCallback(
+		(routingPolicy: RoutingPolicy): void =>
+			handlePolicyDetailsModalOpen('edit', routingPolicy),
+		[handlePolicyDetailsModalOpen],
+	);
+
+	const isFetching = useMemo(
+		() => isLoadingRoutingPolicies || isFetchingRoutingPolicies,
+		[isLoadingRoutingPolicies, isFetchingRoutingPolicies],
+	);
+	const hasSearchTerm = useMemo(() => searchTerm.length > 0, [searchTerm]);
+	const isEmpty = useMemo(
+		() => !isFetching && !hasSearchTerm && routingPoliciesData.length === 0,
+		[isFetching, hasSearchTerm, routingPoliciesData.length],
+	);
+
 	return (
-		<div className="routing-policies-container">
-			<div className="routing-policies-content">
-				<Typography.Title className="title">Routing Policies</Typography.Title>
-				<Typography.Text className="subtitle">
-					Create and manage routing policies.
-				</Typography.Text>
-				<Flex className="toolbar">
+		<div className={styles.container}>
+			<header className={styles.headerBand}>
+				<div className={styles.commandHeader}>
+					<div className={styles.headingBlock}>
+						<Typography.Title className={styles.title}>
+							Routing Policies
+						</Typography.Title>
+						<span className={styles.countPill}>{routingPoliciesData.length}</span>
+					</div>
+					<div className={styles.grow} />
+					{!isEmpty && (
+						<ColumnSelector
+							columns={columns}
+							storageKey={COLUMNS_STORAGE_KEY}
+							testId="routing-policies-columns"
+						/>
+					)}
+					<Button
+						variant="solid"
+						color="primary"
+						size="sm"
+						prefix={<Plus size={14} />}
+						onClick={handleCreate}
+						disabled={!canEdit}
+						disabledTooltip="You need edit permissions to create a routing policy"
+						testId="routing-policies-create"
+					>
+						New routing policy
+					</Button>
+					<TextToolTip
+						text="More details on how to configure routing policies"
+						url="https://signoz.io/docs/alerts-management/routing-policy"
+						urlText="Learn More"
+					/>
+				</div>
+
+				<div className={styles.filtersRow}>
 					<Input
-						placeholder="Search for a routing policy..."
-						prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+						containerClassName={styles.searchInput}
+						placeholder="Search by name or description"
 						value={searchTerm}
 						onChange={handleSearch}
+						suffix={<Search size={14} className={styles.searchIcon} />}
+						testId="routing-policies-search"
 					/>
-					<Tooltip title={tooltipTitle}>
-						<Button
-							type="primary"
-							onClick={(): void => handlePolicyDetailsModalOpen('create', null)}
-							disabled={disableCreateButton}
-						>
-							<Flex gap={4} align="center">
-								<Plus size={16} />
-								New routing policy
-							</Flex>
-						</Button>
-					</Tooltip>
-				</Flex>
-				<br />
+				</div>
+			</header>
+
+			<div ref={containerRef} className={styles.tableContainer}>
 				<RoutingPolicyList
+					columns={columns}
 					routingPolicies={routingPoliciesData}
-					refetchRoutingPolicies={refetchRoutingPolicies}
-					isRoutingPoliciesFetching={isFetchingRoutingPolicies}
-					isRoutingPoliciesLoading={isLoadingRoutingPolicies}
-					isRoutingPoliciesError={isErrorRoutingPolicies}
-					handlePolicyDetailsModalOpen={handlePolicyDetailsModalOpen}
-					handleDeleteModalOpen={handleDeleteModalOpen}
-					hasSearchTerm={(searchTerm?.length ?? 0) > 0}
+					pagedPolicies={pagedPolicies}
+					calculatedPageSize={calculatedPageSize}
+					onLimitChange={setLimit}
+					isFetching={isFetching}
+					isError={isErrorRoutingPolicies}
+					refetch={refetchRoutingPolicies}
+					canEdit={canEdit}
+					onEdit={handleEdit}
+					onDelete={handleDeleteModalOpen}
+					onCreate={handleCreate}
+					hasSearchTerm={hasSearchTerm}
+					onClearSearch={handleClearSearch}
 				/>
-				{policyDetailsModalState.isOpen && (
-					<RoutingPolicyDetails
-						routingPolicy={selectedRoutingPolicy}
-						closeModal={handlePolicyDetailsModalClose}
-						mode={policyDetailsModalState.mode}
-						channels={channels}
-						isErrorChannels={isErrorChannels}
-						isLoadingChannels={isLoadingChannels}
-						handlePolicyDetailsModalAction={handlePolicyDetailsModalAction}
-						isPolicyDetailsModalActionLoading={isPolicyDetailsModalActionLoading}
-						refreshChannels={refreshChannels}
-					/>
-				)}
-				{isDeleteModalOpen && (
-					<DeleteRoutingPolicy
-						isDeletingRoutingPolicy={isDeletingRoutingPolicy}
-						handleDelete={handleDeleteRoutingPolicy}
-						handleClose={handleDeleteModalClose}
-						routingPolicy={selectedRoutingPolicy}
-					/>
-				)}
 			</div>
+
+			{policyDetailsModalState.isOpen && (
+				<RoutingPolicyDetails
+					routingPolicy={selectedRoutingPolicy}
+					closeModal={handlePolicyDetailsModalClose}
+					mode={policyDetailsModalState.mode}
+					channels={channels}
+					isErrorChannels={isErrorChannels}
+					isLoadingChannels={isLoadingChannels}
+					handlePolicyDetailsModalAction={handlePolicyDetailsModalAction}
+					isPolicyDetailsModalActionLoading={isPolicyDetailsModalActionLoading}
+					refreshChannels={refreshChannels}
+				/>
+			)}
+			{isDeleteModalOpen && (
+				<DeleteRoutingPolicy
+					isDeletingRoutingPolicy={isDeletingRoutingPolicy}
+					handleDelete={handleDeleteRoutingPolicy}
+					handleClose={handleDeleteModalClose}
+					routingPolicy={selectedRoutingPolicy}
+				/>
+			)}
 		</div>
 	);
 }

frontend/src/container/RoutingPolicies/RoutingPoliciesEmptyState.tsx

@@ -0,0 +1,52 @@
+import { Plus, Route } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './RoutingPolicies.module.scss';
+
+const DOCS_URL = 'https://signoz.io/docs/alerts-management/routing-policy';
+
+interface RoutingPoliciesEmptyStateProps {
+	canCreate: boolean;
+	onCreate: () => void;
+}
+
+function RoutingPoliciesEmptyState({
+	canCreate,
+	onCreate,
+}: RoutingPoliciesEmptyStateProps): JSX.Element {
+	return (
+		<div className={styles.emptyState} data-testid="routing-policies-empty-state">
+			<Route className={styles.emptyIcon} size={16} />
+			<Typography.Text className={styles.emptyTitle}>
+				No routing policies yet
+			</Typography.Text>
+			<Typography.Text className={styles.emptySubtitle}>
+				A routing policy sends alerts matching an expression to the channels you
+				pick, without editing each alert rule.
+			</Typography.Text>
+			{canCreate && (
+				<Button
+					variant="solid"
+					color="primary"
+					size="md"
+					prefix={<Plus size={14} />}
+					onClick={onCreate}
+					testId="routing-policies-empty-create"
+				>
+					New routing policy
+				</Button>
+			)}
+			<a
+				className={styles.docsLink}
+				href={DOCS_URL}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Read the routing policy guide
+			</a>
+		</div>
+	);
+}
+
+export default RoutingPoliciesEmptyState;

frontend/src/container/RoutingPolicies/RoutingPolicyActionsMenu.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+
+import styles from './RoutingPolicies.module.scss';
+import { RoutingPolicy } from './types';
+
+interface RoutingPolicyActionsMenuProps {
+	routingPolicy: RoutingPolicy;
+	onEdit: (routingPolicy: RoutingPolicy) => void;
+	onDelete: (routingPolicy: RoutingPolicy) => void;
+}
+
+function RoutingPolicyActionsMenu({
+	routingPolicy,
+	onEdit,
+	onDelete,
+}: RoutingPolicyActionsMenuProps): JSX.Element {
+	const menuItems = useMemo<DropdownItemType[]>(
+		() => [
+			{
+				type: 'item',
+				value: 'edit',
+				label: 'Edit',
+				prefix: <PenLine size={14} />,
+				onClick: (): void => onEdit(routingPolicy),
+			},
+			{ type: 'separator', value: 'before-delete' },
+			{
+				type: 'item',
+				value: 'delete',
+				label: 'Delete',
+				prefix: <Trash2 size={14} />,
+				danger: true,
+				onClick: (): void => onDelete(routingPolicy),
+			},
+		],
+		[routingPolicy, onEdit, onDelete],
+	);
+
+	return (
+		// the row itself opens the policy, so the actions keep their clicks
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div
+			className={styles.actions}
+			onClick={(event): void => event.stopPropagation()}
+		>
+			<Dropdown items={menuItems} nativeButton align="end" side="bottom">
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="sm"
+					icon
+					testId={`routing-policy-actions-${routingPolicy.id}`}
+					aria-label={`Actions for ${routingPolicy.name}`}
+				>
+					<Ellipsis size={16} />
+				</Button>
+			</Dropdown>
+		</div>
+	);
+}
+
+export default RoutingPolicyActionsMenu;

frontend/src/container/RoutingPolicies/RoutingPolicyList.tsx

@@ -1,98 +1,106 @@
 import { useMemo } from 'react';
-import { Button, Table, TableProps } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { RotateCw } from '@signozhq/icons';
+import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
+import NoResultsEmptyState from 'components/Alerts/NoResultsEmptyState';
+import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 
-import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
-import RoutingPolicyListItem from './RoutingPolicyListItem';
+import RoutingPoliciesEmptyState from './RoutingPoliciesEmptyState';
+import RoutingPolicyActionsMenu from './RoutingPolicyActionsMenu';
+import styles from './RoutingPolicies.module.scss';
 import { RoutingPolicy, RoutingPolicyListProps } from './types';
+import { ROUTING_POLICIES_QUERY_PARAMS } from './useRoutingPoliciesTable';
 
 function RoutingPolicyList({
+	columns,
 	routingPolicies,
-	refetchRoutingPolicies,
-	isRoutingPoliciesFetching,
-	isRoutingPoliciesLoading,
-	isRoutingPoliciesError,
-	handlePolicyDetailsModalOpen,
-	handleDeleteModalOpen,
+	pagedPolicies,
+	calculatedPageSize,
+	onLimitChange,
+	isFetching,
+	isError,
+	refetch,
+	canEdit,
+	onEdit,
+	onDelete,
+	onCreate,
 	hasSearchTerm,
+	onClearSearch,
 }: RoutingPolicyListProps): JSX.Element {
-	const columns: TableProps<RoutingPolicy>['columns'] = [
-		{
-			title: 'Routing Policy',
-			key: 'routingPolicy',
-			render: (data: RoutingPolicy): JSX.Element => (
-				<RoutingPolicyListItem
-					routingPolicy={data}
-					handlePolicyDetailsModalOpen={handlePolicyDetailsModalOpen}
-					handleDeleteModalOpen={handleDeleteModalOpen}
-				/>
-			),
-		},
-	];
+	const columnsWithActions = useMemo((): TableColumnDef<RoutingPolicy>[] => {
+		if (!canEdit) {
+			return columns;
+		}
 
-	const showLoading = isRoutingPoliciesLoading || isRoutingPoliciesFetching;
-	const showError = !showLoading && isRoutingPoliciesError;
-
-	const localeEmptyState = useMemo(
-		() => (
-			<div className="no-routing-policies-message-container">
-				{showError ? (
-					<img src={awwSnapUrl} alt="aww-snap" className="error-state-svg" />
-				) : (
-					<img
-						src={emptyStateUrl}
-						alt="thinking-emoji"
-						className="empty-state-svg"
+		return [
+			...columns,
+			{
+				id: 'actions',
+				header: (): JSX.Element => (
+					<span className={styles.actionsHeader}>Actions</span>
+				),
+				accessorKey: 'id',
+				width: { fixed: '96px', ignoreLastColumnFill: true },
+				enableSort: false,
+				enableResize: false,
+				enableRemove: false,
+				enableMove: false,
+				pin: 'right',
+				cell: ({ row }): JSX.Element => (
+					<RoutingPolicyActionsMenu
+						routingPolicy={row}
+						onEdit={onEdit}
+						onDelete={onDelete}
 					/>
-				)}
-				{showError ? (
-					<div className="error-state">
-						<Typography.Text>
-							Something went wrong while fetching routing policies.
-						</Typography.Text>
-						<Button icon={<RotateCw size={14} />} onClick={refetchRoutingPolicies}>
-							Retry
-						</Button>
-					</div>
-				) : hasSearchTerm ? (
-					<Typography.Text>No matching routing policies found.</Typography.Text>
-				) : (
-					<Typography.Text>
-						No routing policies yet,{' '}
-						<a
-							href="https://signoz.io/docs/alerts-management/routing-policy"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							Learn more here
-						</a>
-					</Typography.Text>
-				)}
-			</div>
-		),
-		[showError, hasSearchTerm, refetchRoutingPolicies],
-	);
+				),
+			},
+		];
+	}, [canEdit, columns, onEdit, onDelete]);
+
+	const isEmpty = !isFetching && routingPolicies.length === 0;
+
+	if (isError) {
+		return (
+			<ErrorEmptyState
+				title="Failed to load routing policies"
+				onRefresh={refetch}
+			/>
+		);
+	}
+
+	if (isEmpty && hasSearchTerm) {
+		return (
+			<NoResultsEmptyState
+				title="No matching routing policies"
+				subtitle="No routing policies match your search. Try adjusting your search criteria."
+				onClear={onClearSearch}
+				clearButtonText="Clear Search"
+			/>
+		);
+	}
+
+	if (isEmpty) {
+		return <RoutingPoliciesEmptyState canCreate={canEdit} onCreate={onCreate} />;
+	}
 
 	return (
-		<Table<RoutingPolicy>
-			columns={columns}
-			className="routing-policies-table"
-			bordered={false}
-			dataSource={routingPolicies}
-			loading={showLoading}
-			showHeader={false}
-			rowKey="id"
+		<TanStackTable<RoutingPolicy>
+			data={pagedPolicies}
+			columns={columnsWithActions}
+			isLoading={isFetching}
+			getRowKey={(row): string => row.id}
+			getItemKey={(row): string => row.id}
+			getRowTestId={(row): string => `routing-policy-row-${row.id}`}
+			columnStorageKey="routing-policies-columns"
+			enableQueryParams={ROUTING_POLICIES_QUERY_PARAMS}
+			onRowClick={canEdit ? onEdit : undefined}
 			pagination={{
-				pageSize: 5,
-				showSizeChanger: false,
-				hideOnSinglePage: true,
-			}}
-			locale={{
-				emptyText: showLoading ? null : localeEmptyState,
+				total: routingPolicies.length,
+				calculatedPageSize,
+				onLimitChange,
+				showTotalCount: true,
 			}}
+			paginationClassname={styles.paginationContainer}
+			enableAlternatingRowColors
+			plainTextCellLineClamp={1}
 		/>
 	);
 }

frontend/src/container/RoutingPolicies/RoutingPolicyListItem.tsx

@@ -1,162 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { PenLine, Trash2 } from '@signozhq/icons';
-import { useAppContext } from 'providers/App/App';
-import { useTimezone } from 'providers/Timezone';
-import { USER_ROLES } from 'types/roles';
-
-import {
-	PolicyListItemContentProps,
-	PolicyListItemHeaderProps,
-	RoutingPolicyListItemProps,
-} from './types';
-
-function PolicyListItemHeader({
-	name,
-	handleEdit,
-	handleDelete,
-}: PolicyListItemHeaderProps): JSX.Element {
-	const { user } = useAppContext();
-
-	const isEditEnabled = user?.role !== USER_ROLES.VIEWER;
-
-	return (
-		<Flex
-			className="policy-list-item-header"
-			justify="space-between"
-			align="center"
-		>
-			<Typography.Text className="policy-list-item-header-title" truncate={1}>
-				{name}
-			</Typography.Text>
-			{isEditEnabled && (
-				<div className="action-btn">
-					<Button
-						onClick={(e): void => {
-							e.preventDefault();
-							e.stopPropagation();
-							handleEdit();
-						}}
-						type="text"
-						shape="circle"
-						icon={<PenLine size={14} data-testid="edit-routing-policy" />}
-					/>
-					<Button
-						onClick={(e): void => {
-							e.preventDefault();
-							e.stopPropagation();
-							handleDelete();
-						}}
-						type="text"
-						shape="circle"
-						icon={
-							<Trash2
-								size={14}
-								color={Color.BG_CHERRY_500}
-								data-testid="delete-routing-policy"
-							/>
-						}
-					/>
-				</div>
-			)}
-		</Flex>
-	);
-}
-
-function PolicyListItemContent({
-	routingPolicy,
-}: PolicyListItemContentProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	return (
-		<div className="policy-list-item-content">
-			<div className="policy-list-item-content-row">
-				<Typography>Created by</Typography>
-				<Typography>{routingPolicy.createdBy}</Typography>
-			</div>
-			<div className="policy-list-item-content-row">
-				<Typography>Created on</Typography>
-				<Typography>
-					{routingPolicy.createdAt
-						? formatTimezoneAdjustedTimestamp(
-								routingPolicy.createdAt,
-								DATE_TIME_FORMATS.MONTH_DATETIME,
-							)
-						: '-'}
-				</Typography>
-			</div>
-			<div className="policy-list-item-content-row">
-				<Typography>Updated by</Typography>
-				<Typography>{routingPolicy.updatedBy || '-'}</Typography>
-			</div>
-			<div className="policy-list-item-content-row">
-				<Typography>Updated on</Typography>
-				<Typography>
-					{routingPolicy.updatedAt
-						? formatTimezoneAdjustedTimestamp(
-								routingPolicy.updatedAt,
-								DATE_TIME_FORMATS.MONTH_DATETIME,
-							)
-						: '-'}
-				</Typography>
-			</div>
-			<div className="policy-list-item-content-row">
-				<Typography>Expression</Typography>
-				<Typography.Text truncate={1}>
-					{routingPolicy.expression || '-'}
-				</Typography.Text>
-			</div>
-			<div className="policy-list-item-content-row">
-				<Typography>Description</Typography>
-				<Typography.Text truncate={1}>
-					{routingPolicy.description || '-'}
-				</Typography.Text>
-			</div>
-			<div className="policy-list-item-content-row">
-				<Typography>Channels</Typography>
-				<div>
-					{routingPolicy.channels.map((channel) => (
-						<Badge
-							textTransform="none"
-							variant="solid"
-							key={channel}
-							color="secondary"
-						>
-							{channel}
-						</Badge>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function RoutingPolicyListItem({
-	routingPolicy,
-	handlePolicyDetailsModalOpen,
-	handleDeleteModalOpen,
-}: RoutingPolicyListItemProps): JSX.Element {
-	return (
-		<Collapse accordion className="policy-list-item">
-			<Collapse.Panel
-				header={
-					<PolicyListItemHeader
-						name={routingPolicy.name}
-						handleEdit={(): void =>
-							handlePolicyDetailsModalOpen('edit', routingPolicy)
-						}
-						handleDelete={(): void => handleDeleteModalOpen(routingPolicy)}
-					/>
-				}
-				key={routingPolicy.id}
-			>
-				<PolicyListItemContent routingPolicy={routingPolicy} />
-			</Collapse.Panel>
-		</Collapse>
-	);
-}
-
-export default RoutingPolicyListItem;

frontend/src/container/RoutingPolicies/__tests__/RoutingPolicies.test.tsx

@@ -1,5 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
 import * as appHooks from 'providers/App/App';
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 import RoutingPolicies from '../RoutingPolicies';
 import * as routingPoliciesHooks from '../useRoutingPolicies';
@@ -7,34 +7,14 @@ import {
 	getAppContextMockState,
 	getUseRoutingPoliciesMockData,
 	MOCK_ROUTING_POLICY_1,
-	mockLocation,
-	mockQueryParams,
 } from './testUtils';
 
 const ROUTING_POLICY_DETAILS_TEST_ID = 'routing-policy-details';
-const SEARCH_PLACEHOLDER = 'Search for a routing policy...';
+const SEARCH_TEST_ID = 'routing-policies-search';
+const CREATE_TEST_ID = 'routing-policies-create';
 
 jest.spyOn(appHooks, 'useAppContext').mockReturnValue(getAppContextMockState());
 
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): URLSearchParams => mockQueryParams({}),
-}));
-
-const mockHistoryReplace = jest.fn();
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useHistory: (): any => ({
-		replace: mockHistoryReplace,
-	}),
-	useLocation: (): any => ({
-		pathname: '/alerts',
-		search: '',
-		hash: '',
-		state: null,
-	}),
-}));
-
 jest.mock('../RoutingPolicyList', () => ({
 	__esModule: true,
 	default: jest.fn(() => (
@@ -66,20 +46,13 @@ jest.spyOn(routingPoliciesHooks, 'default').mockReturnValue(
 describe('RoutingPolicies', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockQueryParams({});
-		mockLocation('/alerts');
 	});
 
 	it('should render components properly', () => {
 		render(<RoutingPolicies />);
 		expect(screen.getByText('Routing Policies')).toBeInTheDocument();
-		expect(
-			screen.getByText('Create and manage routing policies.'),
-		).toBeInTheDocument();
-		expect(screen.getByPlaceholderText(SEARCH_PLACEHOLDER)).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /New routing policy/ }),
-		).toBeInTheDocument();
+		expect(screen.getByTestId(SEARCH_TEST_ID)).toBeInTheDocument();
+		expect(screen.getByTestId(CREATE_TEST_ID)).toBeInTheDocument();
 		expect(screen.getByTestId('routing-policy-list')).toBeInTheDocument();
 		expect(
 			screen.queryByTestId(ROUTING_POLICY_DETAILS_TEST_ID),
@@ -89,9 +62,10 @@ describe('RoutingPolicies', () => {
 
 	it('should enable the "New routing policy" button for users with ADMIN role', () => {
 		render(<RoutingPolicies />);
-		expect(
-			screen.getByRole('button', { name: /New routing policy/ }),
-		).toBeEnabled();
+		expect(screen.getByTestId(CREATE_TEST_ID)).toHaveAttribute(
+			'aria-disabled',
+			'false',
+		);
 	});
 
 	it('should disable the "New routing policy" button for users with VIEWER role', () => {
@@ -99,14 +73,15 @@ describe('RoutingPolicies', () => {
 			.spyOn(appHooks, 'useAppContext')
 			.mockReturnValueOnce(getAppContextMockState({ role: 'VIEWER' }));
 		render(<RoutingPolicies />);
-		expect(
-			screen.getByRole('button', { name: /New routing policy/ }),
-		).toBeDisabled();
+		expect(screen.getByTestId(CREATE_TEST_ID)).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
 	});
 
 	it('filters routing policies by search term', () => {
 		render(<RoutingPolicies />);
-		const searchInput = screen.getByPlaceholderText(SEARCH_PLACEHOLDER);
+		const searchInput = screen.getByTestId(SEARCH_TEST_ID);
 		fireEvent.change(searchInput, {
 			target: { value: MOCK_ROUTING_POLICY_1.name },
 		});
@@ -116,10 +91,7 @@ describe('RoutingPolicies', () => {
 
 	it('clicking on the "New routing policy" button opens the policy details modal', () => {
 		render(<RoutingPolicies />);
-		const newRoutingPolicyButton = screen.getByRole('button', {
-			name: /New routing policy/,
-		});
-		fireEvent.click(newRoutingPolicyButton);
+		fireEvent.click(screen.getByTestId(CREATE_TEST_ID));
 		expect(mockHandlePolicyDetailsModalOpen).toHaveBeenCalledWith('create', null);
 	});
 
@@ -148,9 +120,8 @@ describe('RoutingPolicies', () => {
 		expect(screen.getByTestId('delete-routing-policy')).toBeInTheDocument();
 	});
 
-	it('should load with search term from URL query params', () => {
+	it('should show the current search term', () => {
 		const searchTerm = 'existing search';
-		mockQueryParams({ search: searchTerm });
 		jest.spyOn(routingPoliciesHooks, 'default').mockReturnValue(
 			getUseRoutingPoliciesMockData({
 				searchTerm,
@@ -159,14 +130,11 @@ describe('RoutingPolicies', () => {
 
 		render(<RoutingPolicies />);
 
-		const searchInput = screen.getByPlaceholderText(
-			SEARCH_PLACEHOLDER,
-		) as HTMLInputElement;
+		const searchInput = screen.getByTestId(SEARCH_TEST_ID) as HTMLInputElement;
 		expect(searchInput.value).toBe(searchTerm);
 	});
 
-	it('should initialize with empty search when no search param is in URL', () => {
-		mockQueryParams({});
+	it('should show an empty search when there is no search term', () => {
 		jest.spyOn(routingPoliciesHooks, 'default').mockReturnValue(
 			getUseRoutingPoliciesMockData({
 				searchTerm: '',
@@ -175,9 +143,7 @@ describe('RoutingPolicies', () => {
 
 		render(<RoutingPolicies />);
 
-		const searchInput = screen.getByPlaceholderText(
-			SEARCH_PLACEHOLDER,
-		) as HTMLInputElement;
+		const searchInput = screen.getByTestId(SEARCH_TEST_ID) as HTMLInputElement;
 		expect(searchInput.value).toBe('');
 	});
 });

frontend/src/container/RoutingPolicies/__tests__/RoutingPoliciesList.test.tsx

@@ -1,126 +1,159 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, screen, userEvent } from 'tests/test-utils';
 
-import RoutingPoliciesList from '../RoutingPolicyList';
-import { RoutingPolicyListItemProps } from '../types';
-import { getUseRoutingPoliciesMockData } from './testUtils';
+import RoutingPolicyList from '../RoutingPolicyList';
+import { getRoutingPolicyColumns } from '../table.config';
+import { RoutingPolicyListProps } from '../types';
+import { MOCK_ROUTING_POLICY_1, MOCK_ROUTING_POLICY_2 } from './testUtils';
 
-const useRoutingPolicesMockData = getUseRoutingPoliciesMockData();
-const mockHandlePolicyDetailsModalOpen = jest.fn();
-const mockHandleDeleteModalOpen = jest.fn();
-const mockRefetchRoutingPolicies = jest.fn();
+const POLICIES = [MOCK_ROUTING_POLICY_1, MOCK_ROUTING_POLICY_2];
 
-jest.mock('../RoutingPolicyListItem', () => ({
-	__esModule: true,
-	default: jest.fn(({ routingPolicy }: RoutingPolicyListItemProps) => (
-		<div data-testid="routing-policy-list-item">{routingPolicy.name}</div>
-	)),
-}));
+function renderList(
+	overrides: Partial<RoutingPolicyListProps> = {},
+): RoutingPolicyListProps {
+	const props: RoutingPolicyListProps = {
+		columns: getRoutingPolicyColumns((date) => date),
+		routingPolicies: POLICIES,
+		pagedPolicies: POLICIES,
+		calculatedPageSize: null,
+		onLimitChange: jest.fn(),
+		isFetching: false,
+		isError: false,
+		refetch: jest.fn(),
+		canEdit: true,
+		onEdit: jest.fn(),
+		onDelete: jest.fn(),
+		onCreate: jest.fn(),
+		hasSearchTerm: false,
+		onClearSearch: jest.fn(),
+		...overrides,
+	};
+	render(
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 800, itemHeight: 46 }}>
+			<RoutingPolicyList {...props} />
+		</VirtuosoMockContext.Provider>,
+	);
+	return props;
+}
 
-const ROUTING_POLICY_LIST_ITEM_TEST_ID = 'routing-policy-list-item';
+describe('RoutingPolicyList', () => {
+	it('renders the key policy fields and hides audit columns by default', async () => {
+		renderList();
 
-describe('RoutingPoliciesList', () => {
-	it('renders base layout with routing policies', () => {
-		render(
-			<RoutingPoliciesList
-				routingPolicies={useRoutingPolicesMockData.routingPoliciesData}
-				isRoutingPoliciesLoading={
-					useRoutingPolicesMockData.isLoadingRoutingPolicies
-				}
-				isRoutingPoliciesError={useRoutingPolicesMockData.isErrorRoutingPolicies}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-				hasSearchTerm={false}
-				refetchRoutingPolicies={mockRefetchRoutingPolicies}
-				isRoutingPoliciesFetching={false}
-			/>,
-		);
-
-		const routingPolicyItems = screen.getAllByTestId(
-			ROUTING_POLICY_LIST_ITEM_TEST_ID,
-		);
-		expect(routingPolicyItems).toHaveLength(2);
-		expect(routingPolicyItems[0]).toHaveTextContent(
-			useRoutingPolicesMockData.routingPoliciesData[0].name,
-		);
-		expect(routingPolicyItems[1]).toHaveTextContent(
-			useRoutingPolicesMockData.routingPoliciesData[1].name,
-		);
-	});
-
-	it('renders loading state', () => {
-		render(
-			<RoutingPoliciesList
-				routingPolicies={useRoutingPolicesMockData.routingPoliciesData}
-				isRoutingPoliciesLoading
-				isRoutingPoliciesError={false}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-				hasSearchTerm={false}
-				refetchRoutingPolicies={mockRefetchRoutingPolicies}
-				isRoutingPoliciesFetching={false}
-			/>,
-		);
-		// Check for loading spinner by class name
-		expect(document.querySelector('.ant-spin-spinning')).toBeInTheDocument();
-		// Check that the table is in loading state (blurred)
-		expect(document.querySelector('.ant-spin-blur')).toBeInTheDocument();
-	});
-
-	it('renders loading state when data is being fetched', () => {
-		render(
-			<RoutingPoliciesList
-				routingPolicies={useRoutingPolicesMockData.routingPoliciesData}
-				isRoutingPoliciesLoading={false}
-				isRoutingPoliciesError={false}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-				hasSearchTerm={false}
-				refetchRoutingPolicies={mockRefetchRoutingPolicies}
-				isRoutingPoliciesFetching
-			/>,
-		);
-		// Check for loading spinner by class name
-		expect(document.querySelector('.ant-spin-spinning')).toBeInTheDocument();
-		// Check that the table is in loading state (blurred)
-		expect(document.querySelector('.ant-spin-blur')).toBeInTheDocument();
-	});
-
-	it('renders error state', () => {
-		render(
-			<RoutingPoliciesList
-				routingPolicies={[]}
-				isRoutingPoliciesLoading={false}
-				isRoutingPoliciesError
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-				hasSearchTerm={false}
-				refetchRoutingPolicies={mockRefetchRoutingPolicies}
-				isRoutingPoliciesFetching={false}
-			/>,
-		);
+		await expect(
+			screen.findByTestId(`routing-policy-row-${MOCK_ROUTING_POLICY_1.id}-name`),
+		).resolves.toHaveTextContent(MOCK_ROUTING_POLICY_1.name);
 		expect(
-			screen.getByText('Something went wrong while fetching routing policies.'),
-		).toBeInTheDocument();
+			screen.getByTestId(`routing-policy-row-${MOCK_ROUTING_POLICY_2.id}-name`),
+		).toHaveTextContent(MOCK_ROUTING_POLICY_2.name);
 
-		const retryButton = screen.getByRole('button', { name: 'Retry' });
-		expect(retryButton).toBeInTheDocument();
-		fireEvent.click(retryButton);
-		expect(mockRefetchRoutingPolicies).toHaveBeenCalled();
+		expect(
+			screen.getByText(MOCK_ROUTING_POLICY_1.expression),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByText(MOCK_ROUTING_POLICY_1.description as string),
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByText(MOCK_ROUTING_POLICY_1.channels?.[0] || ''),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByText(MOCK_ROUTING_POLICY_1.createdBy as string),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(MOCK_ROUTING_POLICY_2.updatedBy as string),
+		).not.toBeInTheDocument();
 	});
 
-	it('renders empty state', () => {
-		render(
-			<RoutingPoliciesList
-				routingPolicies={[]}
-				isRoutingPoliciesLoading={false}
-				isRoutingPoliciesError={false}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-				hasSearchTerm={false}
-				refetchRoutingPolicies={mockRefetchRoutingPolicies}
-				isRoutingPoliciesFetching={false}
-			/>,
+	it('lets every data column be resized', async () => {
+		renderList();
+
+		await screen.findByText(MOCK_ROUTING_POLICY_1.name);
+		const resizable = Array.from(document.querySelectorAll('th'))
+			.filter((th) => th.querySelector('[title="Drag to resize column"]'))
+			.map((th) => th.textContent?.trim());
+		expect(resizable).toStrictEqual(['Routing Policy', 'Expression', 'Channels']);
+	});
+
+	it('opens the policy on row click', async () => {
+		const { onEdit } = renderList();
+
+		await userEvent.click(
+			await screen.findByTestId(
+				`routing-policy-row-${MOCK_ROUTING_POLICY_1.id}-name`,
+			),
 		);
-		expect(screen.getByText('No routing policies yet,')).toBeInTheDocument();
+
+		expect(onEdit).toHaveBeenCalledWith(
+			MOCK_ROUTING_POLICY_1,
+			MOCK_ROUTING_POLICY_1.id,
+			expect.anything(),
+		);
+	});
+
+	it('edits and deletes from the actions menu', async () => {
+		const { onEdit, onDelete } = renderList();
+		const actions = `routing-policy-actions-${MOCK_ROUTING_POLICY_1.id}`;
+
+		await userEvent.click(await screen.findByTestId(actions));
+		await userEvent.click(await screen.findByText('Edit'));
+		expect(onEdit).toHaveBeenCalledWith(MOCK_ROUTING_POLICY_1);
+
+		await userEvent.click(screen.getByTestId(actions));
+		await userEvent.click(await screen.findByText('Delete'));
+		expect(onDelete).toHaveBeenCalledWith(MOCK_ROUTING_POLICY_1);
+	});
+
+	it('hides actions and row click for viewers', async () => {
+		const { onEdit } = renderList({ canEdit: false });
+
+		await userEvent.click(
+			await screen.findByTestId(
+				`routing-policy-row-${MOCK_ROUTING_POLICY_1.id}-name`,
+			),
+		);
+
+		expect(
+			screen.queryByTestId(`routing-policy-actions-${MOCK_ROUTING_POLICY_1.id}`),
+		).not.toBeInTheDocument();
+		expect(onEdit).not.toHaveBeenCalled();
+	});
+
+	it('renders the error state with a refresh', async () => {
+		const { refetch } = renderList({ isError: true, routingPolicies: [] });
+
+		expect(screen.getByTestId('error-title')).toHaveTextContent(
+			'Failed to load routing policies',
+		);
+		await userEvent.click(screen.getByTestId('error-refresh-button'));
+		expect(refetch).toHaveBeenCalled();
+	});
+
+	it('renders the no-results state when a search matches nothing', async () => {
+		const { onClearSearch } = renderList({
+			routingPolicies: [],
+			pagedPolicies: [],
+			hasSearchTerm: true,
+		});
+
+		await userEvent.click(screen.getByTestId('no-results-clear-button'));
+		expect(onClearSearch).toHaveBeenCalled();
+	});
+
+	it('renders the empty state with a create action', async () => {
+		const { onCreate } = renderList({ routingPolicies: [], pagedPolicies: [] });
+
+		expect(
+			screen.getByTestId('routing-policies-empty-state'),
+		).toBeInTheDocument();
+		await userEvent.click(screen.getByTestId('routing-policies-empty-create'));
+		expect(onCreate).toHaveBeenCalled();
+	});
+
+	it('hides the empty-state create action for viewers', () => {
+		renderList({ routingPolicies: [], pagedPolicies: [], canEdit: false });
+
+		expect(
+			screen.queryByTestId('routing-policies-empty-create'),
+		).not.toBeInTheDocument();
 	});
 });

frontend/src/container/RoutingPolicies/__tests__/RoutingPolicyListItem.test.tsx

@@ -1,126 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import * as appHooks from 'providers/App/App';
-import { ROLES, USER_ROLES } from 'types/roles';
-
-import RoutingPolicyListItem from '../RoutingPolicyListItem';
-import { getAppContextMockState, MOCK_ROUTING_POLICY_1 } from './testUtils';
-
-const mockFormatTimezoneAdjustedTimestamp = jest.fn();
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): any => ({
-		formatTimezoneAdjustedTimestamp: mockFormatTimezoneAdjustedTimestamp,
-	}),
-}));
-
-jest.spyOn(appHooks, 'useAppContext').mockReturnValue(getAppContextMockState());
-
-const mockRoutingPolicy = MOCK_ROUTING_POLICY_1;
-const mockHandlePolicyDetailsModalOpen = jest.fn();
-const mockHandleDeleteModalOpen = jest.fn();
-
-const EDIT_ROUTING_POLICY_TEST_ID = 'edit-routing-policy';
-const DELETE_ROUTING_POLICY_TEST_ID = 'delete-routing-policy';
-
-describe('RoutingPolicyListItem', () => {
-	it('should render properly in collapsed state', () => {
-		render(
-			<RoutingPolicyListItem
-				routingPolicy={mockRoutingPolicy}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-			/>,
-		);
-		expect(screen.getByText(mockRoutingPolicy.name)).toBeInTheDocument();
-		expect(screen.getByTestId(EDIT_ROUTING_POLICY_TEST_ID)).toBeInTheDocument();
-		expect(screen.getByTestId(DELETE_ROUTING_POLICY_TEST_ID)).toBeInTheDocument();
-	});
-
-	it('should render properly in expanded state', () => {
-		render(
-			<RoutingPolicyListItem
-				routingPolicy={mockRoutingPolicy}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-			/>,
-		);
-		expect(screen.getByText(mockRoutingPolicy.name)).toBeInTheDocument();
-
-		fireEvent.click(screen.getByText(mockRoutingPolicy.name));
-
-		expect(screen.getByText(mockRoutingPolicy.expression)).toBeInTheDocument();
-		expect(screen.getByText(mockRoutingPolicy.channels[0])).toBeInTheDocument();
-		expect(
-			screen.getByText(mockRoutingPolicy.createdBy || 'user1@signoz.io'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByText(mockRoutingPolicy.description || 'description 1'),
-		).toBeInTheDocument();
-	});
-
-	it('should call handlePolicyDetailsModalOpen when edit button is clicked', () => {
-		render(
-			<RoutingPolicyListItem
-				routingPolicy={mockRoutingPolicy}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-			/>,
-		);
-		fireEvent.click(screen.getByTestId(EDIT_ROUTING_POLICY_TEST_ID));
-		expect(mockHandlePolicyDetailsModalOpen).toHaveBeenCalledWith(
-			'edit',
-			mockRoutingPolicy,
-		);
-	});
-
-	it('should call handleDeleteModalOpen when delete button is clicked', () => {
-		render(
-			<RoutingPolicyListItem
-				routingPolicy={mockRoutingPolicy}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-			/>,
-		);
-		fireEvent.click(screen.getByTestId(DELETE_ROUTING_POLICY_TEST_ID));
-		expect(mockHandleDeleteModalOpen).toHaveBeenCalledWith(mockRoutingPolicy);
-	});
-
-	it('edit and delete buttons should not be rendered for viewer role', () => {
-		jest
-			.spyOn(appHooks, 'useAppContext')
-			.mockReturnValue(
-				getAppContextMockState({ role: USER_ROLES.VIEWER as ROLES }),
-			);
-		render(
-			<RoutingPolicyListItem
-				routingPolicy={mockRoutingPolicy}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-			/>,
-		);
-		expect(
-			screen.queryByTestId(EDIT_ROUTING_POLICY_TEST_ID),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId(DELETE_ROUTING_POLICY_TEST_ID),
-		).not.toBeInTheDocument();
-	});
-
-	it('in details panel, show "-" for undefined values', () => {
-		render(
-			<RoutingPolicyListItem
-				routingPolicy={mockRoutingPolicy}
-				handlePolicyDetailsModalOpen={mockHandlePolicyDetailsModalOpen}
-				handleDeleteModalOpen={mockHandleDeleteModalOpen}
-			/>,
-		);
-
-		// Expand the details panel
-		fireEvent.click(screen.getByText(mockRoutingPolicy.name));
-
-		const updatedByRow = screen.getByText('Updated by').parentElement;
-		expect(updatedByRow).toHaveTextContent('-');
-
-		const updatedOnRow = screen.getByText('Updated on').parentElement;
-		expect(updatedOnRow).toHaveTextContent('-');
-	});
-});

frontend/src/container/RoutingPolicies/__tests__/testUtils.ts

@@ -11,7 +11,7 @@ export const MOCK_ROUTING_POLICY_1: RoutingPolicy = {
 	description: 'description 1',
 	channels: ['Channel 1'],
 	createdAt: '2021-01-04',
-	updatedAt: undefined,
+	updatedAt: '2021-01-04',
 	createdBy: 'user1@signoz.io',
 	updatedBy: undefined,
 };
@@ -149,7 +149,7 @@ export function convertRoutingPolicyToApiResponse(
 		id: routingPolicy.id,
 		name: routingPolicy.name,
 		expression: routingPolicy.expression,
-		channels: routingPolicy.channels,
+		channels: routingPolicy.channels ?? [],
 		description: routingPolicy.description || '',
 		createdAt: routingPolicy.createdAt || '',
 		updatedAt: routingPolicy.updatedAt || '',

frontend/src/container/RoutingPolicies/styles.scss

@@ -1,173 +1,3 @@
-.routing-policies-container {
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	margin-top: 8px;
-
-	.routing-policies-content {
-		width: calc(100% - 30px);
-		max-width: 736px;
-
-		.title {
-			color: var(--l1-foreground);
-			font-size: var(--font-size-lg);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-			line-height: 28px;
-			letter-spacing: -0.09px;
-		}
-
-		.subtitle {
-			color: var(--l2-foreground);
-			font-size: var(--font-size-sm);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-input-affix-wrapper {
-			margin-top: 16px;
-			margin-bottom: 8px;
-		}
-
-		.toolbar {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			margin-top: 12px;
-		}
-
-		.routing-policies-table {
-			.no-routing-policies-message-container {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				gap: 16px;
-				min-height: 200px;
-
-				.error-state {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					gap: 16px;
-
-					.ant-btn {
-						display: flex;
-						align-items: center;
-					}
-				}
-
-				.empty-state-svg {
-					width: 40px;
-					height: 40px;
-				}
-
-				.ant-typography {
-					color: var(--l2-foreground);
-				}
-			}
-		}
-	}
-}
-
-.routing-policies-table {
-	.ant-table {
-		background: none !important;
-	}
-	.ant-table-cell {
-		padding: 0 !important;
-		border: 0 !important;
-		width: 736px;
-	}
-
-	.ant-table-tbody {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.policy-list-item {
-			border: 1px solid var(--l1-border);
-			background-color: var(--l2-background);
-			border-radius: 6px;
-
-			.ant-collapse-header {
-				height: 56px;
-				align-items: center;
-			}
-
-			.policy-list-item-header {
-				.ant-typography {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-weight: 400;
-					line-height: 18px;
-				}
-
-				.policy-list-item-header-title {
-					min-width: 0;
-					display: block;
-					flex: 0 1 500px;
-					max-width: 100%;
-					overflow: hidden;
-				}
-
-				.action-btn {
-					display: flex;
-					align-items: center;
-					cursor: pointer;
-
-					.ant-btn {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-					}
-				}
-			}
-
-			.policy-list-item-content {
-				.policy-list-item-content-row {
-					display: grid;
-					grid-template-columns: 128px 1fr;
-					margin-bottom: 13px;
-
-					.ant-typography:first-child {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 13px;
-						font-weight: 400;
-						line-height: 20px;
-					}
-
-					.ant-typography:last-child,
-					div .ant-typography {
-						color: var(--l1-foreground);
-						font-family: Inter;
-						font-size: 13px;
-						font-weight: 400;
-						line-height: 18px;
-					}
-				}
-			}
-
-			.ant-collapse-content-box {
-				padding: 12px 20px 12px 38px;
-			}
-
-			.ant-collapse-content-active {
-				border-top: none;
-			}
-
-			.ant-collapse-item {
-				border: none;
-			}
-		}
-	}
-}
-
 .create-policy-modal {
 	.ant-modal-content {
 		padding: 16px;

frontend/src/container/RoutingPolicies/table.config.tsx

@@ -0,0 +1,144 @@
+import { Badge } from '@signozhq/ui/badge';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { toRelativeTime } from 'pages/AlertList/NotificationChannels/utils/relativeTime';
+
+import styles from './RoutingPolicies.module.scss';
+import { RoutingPolicy } from './types';
+
+export function getRoutingPolicyColumns(
+	formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
+): TableColumnDef<RoutingPolicy>[] {
+	const textCell = (value: string | null | undefined): JSX.Element => (
+		<TanStackTable.Text title={value ?? undefined}>
+			{value || '-'}
+		</TanStackTable.Text>
+	);
+
+	const timestampCell = (
+		row: RoutingPolicy,
+		value: string | null | undefined,
+	): JSX.Element => {
+		if (!value) {
+			return <TanStackTable.Text>-</TanStackTable.Text>;
+		}
+
+		return (
+			<TanStackTable.HoverTooltip
+				rowId={row.id}
+				title={formatTimezoneAdjustedTimestamp(
+					value,
+					DATE_TIME_FORMATS.DASH_DATETIME,
+				)}
+			>
+				<span className={styles.timeText}>{toRelativeTime(value)}</span>
+			</TanStackTable.HoverTooltip>
+		);
+	};
+
+	return [
+		{
+			id: 'name',
+			header: 'Routing Policy',
+			accessorKey: 'name',
+			width: { default: '100%', min: '220px' },
+			enableSort: true,
+			enableResize: true,
+			enableRemove: false,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<TanStackTable.Text
+					title={row.name}
+					data-testid={`routing-policy-row-${row.id}-name`}
+				>
+					{row.name}
+				</TanStackTable.Text>
+			),
+		},
+		{
+			id: 'expression',
+			header: 'Expression',
+			accessorKey: 'expression',
+			width: { default: '260px', min: '160px' },
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<TanStackTable.Text className={styles.expression} title={row.expression}>
+					{row.expression}
+				</TanStackTable.Text>
+			),
+		},
+		{
+			id: 'channels',
+			header: 'Channels',
+			accessorKey: 'channels',
+			width: { default: '220px', min: '140px' },
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element =>
+				row.channels?.length ? (
+					<div className={styles.badges} title={row.channels.join(', ')}>
+						{row.channels.map((channel) => (
+							<Badge
+								key={channel}
+								textTransform="none"
+								variant="solid"
+								color="secondary"
+							>
+								{channel}
+							</Badge>
+						))}
+					</div>
+				) : (
+					<TanStackTable.Text>-</TanStackTable.Text>
+				),
+		},
+		{
+			id: 'createdBy',
+			header: 'Created By',
+			accessorKey: 'createdBy',
+			width: { default: '180px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(row.createdBy),
+		},
+		{
+			id: 'createdAt',
+			header: 'Created At',
+			accessorKey: 'createdAt',
+			width: { default: '150px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: true,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => timestampCell(row, row.createdAt),
+		},
+		{
+			id: 'updatedBy',
+			header: 'Updated By',
+			accessorKey: 'updatedBy',
+			width: { default: '180px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: false,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => textCell(row.updatedBy),
+		},
+		{
+			id: 'updatedAt',
+			header: 'Updated At',
+			accessorKey: 'updatedAt',
+			width: { default: '150px', min: '120px' },
+			defaultVisibility: false,
+			enableSort: true,
+			enableResize: true,
+			enableMove: false,
+			cell: ({ row }): JSX.Element => timestampCell(row, row.updatedAt),
+		},
+	];
+}

frontend/src/container/RoutingPolicies/types.ts

@@ -1,16 +1,8 @@
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import type { AlertmanagertypesGettableRoutePolicyDTO } from 'api/generated/services/sigNoz.schemas';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import type { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
-export interface RoutingPolicy {
-	id: string;
-	name: string;
-	expression: string;
-	channels: string[];
-	description: string | undefined;
-	createdAt: string | undefined;
-	updatedAt: string | undefined;
-	createdBy: string | undefined;
-	updatedBy: string | undefined;
-}
+export type RoutingPolicy = AlertmanagertypesGettableRoutePolicyDTO;
 
 type HandlePolicyDetailsModalOpen = (
 	mode: PolicyDetailsModalMode,
@@ -32,30 +24,20 @@ type HandleDeleteModalOpen = (routingPolicy: RoutingPolicy) => void;
 export type PolicyDetailsModalMode = 'create' | 'edit' | null;
 
 export interface RoutingPolicyListProps {
+	columns: TableColumnDef<RoutingPolicy>[];
 	routingPolicies: RoutingPolicy[];
-	refetchRoutingPolicies: () => void;
-	isRoutingPoliciesLoading: boolean;
-	isRoutingPoliciesFetching: boolean;
-	isRoutingPoliciesError: boolean;
-	handlePolicyDetailsModalOpen: HandlePolicyDetailsModalOpen;
-	handleDeleteModalOpen: HandleDeleteModalOpen;
+	pagedPolicies: RoutingPolicy[];
+	calculatedPageSize: number | null;
+	onLimitChange: (limit: number) => void;
+	isFetching: boolean;
+	isError: boolean;
+	refetch: () => void;
+	canEdit: boolean;
+	onEdit: (routingPolicy: RoutingPolicy) => void;
+	onDelete: HandleDeleteModalOpen;
+	onCreate: () => void;
 	hasSearchTerm: boolean;
-}
-
-export interface RoutingPolicyListItemProps {
-	routingPolicy: RoutingPolicy;
-	handlePolicyDetailsModalOpen: HandlePolicyDetailsModalOpen;
-	handleDeleteModalOpen: HandleDeleteModalOpen;
-}
-
-export interface PolicyListItemHeaderProps {
-	name: string;
-	handleEdit: () => void;
-	handleDelete: () => void;
-}
-
-export interface PolicyListItemContentProps {
-	routingPolicy: RoutingPolicy;
+	onClearSearch: () => void;
 }
 
 export interface RoutingPolicyDetailsProps {

frontend/src/container/RoutingPolicies/useRoutingPolicies.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
@@ -88,22 +88,22 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 	} = useChannelOptions();
 
 	const refreshChannels = (): void => {
-		refetchChannels();
+		void refetchChannels();
 	};
 
 	// Handlers
-	const handlePolicyDetailsModalOpen = (
-		mode: PolicyDetailsModalMode,
-		routingPolicy: RoutingPolicy | null,
-	): void => {
-		if (routingPolicy) {
-			setSelectedRoutingPolicy(routingPolicy);
-		}
-		setPolicyDetailsModalState({
-			isOpen: true,
-			mode,
-		});
-	};
+	const handlePolicyDetailsModalOpen = useCallback(
+		(mode: PolicyDetailsModalMode, routingPolicy: RoutingPolicy | null): void => {
+			if (routingPolicy) {
+				setSelectedRoutingPolicy(routingPolicy);
+			}
+			setPolicyDetailsModalState({
+				isOpen: true,
+				mode,
+			});
+		},
+		[],
+	);
 
 	const handlePolicyDetailsModalClose = (): void => {
 		setSelectedRoutingPolicy(null);
@@ -113,10 +113,13 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 		});
 	};
 
-	const handleDeleteModalOpen = (routingPolicy: RoutingPolicy): void => {
-		setSelectedRoutingPolicy(routingPolicy);
-		setIsDeleteModalOpen(true);
-	};
+	const handleDeleteModalOpen = useCallback(
+		(routingPolicy: RoutingPolicy): void => {
+			setSelectedRoutingPolicy(routingPolicy);
+			setIsDeleteModalOpen(true);
+		},
+		[],
+	);
 
 	const handleDeleteModalClose = (): void => {
 		setSelectedRoutingPolicy(null);
@@ -154,7 +157,7 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 				{
 					onSuccess: () => {
 						toast.success('Routing policy created successfully');
-						queryClient.invalidateQueries(REACT_QUERY_KEY.GET_ROUTING_POLICIES);
+						void queryClient.invalidateQueries(REACT_QUERY_KEY.GET_ROUTING_POLICIES);
 						handlePolicyDetailsModalClose();
 					},
 					onError: (error) => {
@@ -176,7 +179,7 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 				{
 					onSuccess: () => {
 						toast.success('Routing policy updated successfully');
-						queryClient.invalidateQueries(REACT_QUERY_KEY.GET_ROUTING_POLICIES);
+						void queryClient.invalidateQueries(REACT_QUERY_KEY.GET_ROUTING_POLICIES);
 						handlePolicyDetailsModalClose();
 					},
 					onError: () => {
@@ -209,7 +212,7 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 		deleteRoutingPolicy(selectedRoutingPolicy.id, {
 			onSuccess: () => {
 				toast.success('Routing policy deleted successfully');
-				queryClient.invalidateQueries(REACT_QUERY_KEY.GET_ROUTING_POLICIES);
+				void queryClient.invalidateQueries(REACT_QUERY_KEY.GET_ROUTING_POLICIES);
 				handleDeleteModalClose();
 			},
 			onError: () => {

frontend/src/container/RoutingPolicies/useRoutingPoliciesTable.ts

@@ -0,0 +1,74 @@
+import { RefObject, useMemo } from 'react';
+import { sortByColumn } from 'components/Alerts/utils';
+import { useCalculatedPageSize } from 'components/TanStackTableView/useCalculatedPageSize';
+import { useTableParams } from 'components/TanStackTableView/useTableParams';
+
+import { RoutingPolicy } from './types';
+
+export const ROUTING_POLICIES_QUERY_PARAMS = {
+	orderBy: 'orderBy',
+	page: 'page',
+	limit: 'limit',
+} as const;
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+function getSortValue(
+	policy: RoutingPolicy,
+	columnName: string,
+): string | number {
+	switch (columnName) {
+		case 'name':
+			return policy.name.toLowerCase();
+		case 'createdAt':
+			return policy.createdAt ? new Date(policy.createdAt).getTime() : 0;
+		case 'updatedAt':
+			return policy.updatedAt ? new Date(policy.updatedAt).getTime() : 0;
+		default:
+			return '';
+	}
+}
+
+interface UseRoutingPoliciesTableReturn {
+	containerRef: RefObject<HTMLDivElement>;
+	calculatedPageSize: number | null;
+	pagedPolicies: RoutingPolicy[];
+	setPage: (page: number) => void;
+	setLimit: (limit: number) => void;
+}
+
+function useRoutingPoliciesTable(
+	routingPolicies: RoutingPolicy[],
+): UseRoutingPoliciesTableReturn {
+	const { containerRef, calculatedPageSize } = useCalculatedPageSize({
+		rowHeight: 46,
+	});
+
+	const { orderBy, page, limit, setLimit, setPage } = useTableParams(
+		ROUTING_POLICIES_QUERY_PARAMS,
+		{
+			page: DEFAULT_PAGE,
+			limit: DEFAULT_LIMIT,
+			storageKey: 'routing-policies',
+			calculatedPageSize,
+			cleanupOnUnmount: true,
+		},
+	);
+
+	const pagedPolicies = useMemo(() => {
+		const sorted = sortByColumn(routingPolicies, orderBy, getSortValue);
+		const start = (page - 1) * limit;
+		return sorted.slice(start, start + limit);
+	}, [routingPolicies, orderBy, page, limit]);
+
+	return {
+		containerRef,
+		calculatedPageSize,
+		pagedPolicies,
+		setPage,
+		setLimit,
+	};
+}
+
+export default useRoutingPoliciesTable;

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -28,6 +28,7 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		TRACE: false,
 		BAR: true,
 		AREA: true,
+		SCATTER: false,
 		PIE: false,
 		HISTOGRAM: false,
 		HEATMAP: false,

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -16,6 +16,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	// Dashboards v2 renders this kind; the V1 wrapper map is never asked for it.
 	[PANEL_TYPES.TEXT]: null,
+	[PANEL_TYPES.SCATTER]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -21,7 +21,15 @@ export default {
 			{
 				kind: 'notification-channel',
 				type: 'metaresource',
-				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
+				allowedVerbs: [
+					'attach',
+					'create',
+					'delete',
+					'detach',
+					'list',
+					'read',
+					'update',
+				],
 			},
 			{
 				kind: 'quick-filter',

frontend/src/lib/query/__tests__/handleQueryChange.test.ts

@@ -76,3 +76,39 @@ describe('handleQueryChange bucket options', () => {
 		});
 	});
 });
+
+describe('handleQueryChange trace operator', () => {
+	function queryWithTraceOperator(): Query {
+		const base = initialQueriesMap[DataSource.TRACES];
+		return {
+			...base,
+			builder: {
+				...base.builder,
+				queryTraceOperator: [
+					{ ...base.builder.queryData[0], queryName: 'T1', expression: 'A => B' },
+				],
+			},
+		};
+	}
+
+	// The API rejects a trace operator on a scatter plot, so the switch sheds it.
+	it('drops the trace operator when switching to a scatter plot', () => {
+		const result = handleQueryChange(
+			PANEL_TYPES.SCATTER,
+			queryWithTraceOperator(),
+			PANEL_TYPES.TABLE,
+		);
+
+		expect(result.builder.queryTraceOperator).toStrictEqual([]);
+	});
+
+	it('keeps the trace operator when switching to a table', () => {
+		const result = handleQueryChange(
+			PANEL_TYPES.TABLE,
+			queryWithTraceOperator(),
+			PANEL_TYPES.TIME_SERIES,
+		);
+
+		expect(result.builder.queryTraceOperator).toHaveLength(1);
+	});
+});

frontend/src/lib/query/panelQuery.ts

@@ -165,7 +165,7 @@ export function handleQueryChange(
 				newPanelType,
 			),
 			queryTraceOperator:
-				newPanelType === PANEL_TYPES.LIST
+				newPanelType === PANEL_TYPES.LIST || newPanelType === PANEL_TYPES.SCATTER
 					? []
 					: supersetQuery.builder.queryTraceOperator,
 		},

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -14,6 +14,7 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.AREA]: 'area';
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
+	[PANEL_TYPES.SCATTER]: 'scatter';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
 	[PANEL_TYPES.HEATMAP]: 'heatmap';
 };
@@ -150,6 +151,7 @@ export const panelTypeDataSourceFormValuesMap: Record<
 	[PANEL_TYPES.HEATMAP]: bySource(HEATMAP, HEATMAP_METRICS),
 	[PANEL_TYPES.TABLE]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.PIE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.SCATTER]: bySource(SERIES, SCALAR_METRICS),
 	[PANEL_TYPES.VALUE]: bySource(SINGLE_VALUE, SINGLE_VALUE_METRICS),
 	[PANEL_TYPES.LIST]: bySource(RAW_ROWS, RAW_ROWS_METRICS),
 };

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.module.scss

@@ -0,0 +1,94 @@
+// Sections own the padding so the footer spans edge to edge.
+.container {
+	// Same inset as the heatmap tooltip.
+	--gutter: 14px;
+
+	font-family: 'Inter';
+	font-size: 12px;
+	background: var(--l2-background);
+	-webkit-font-smoothing: antialiased;
+	color: var(--l2-foreground);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+	display: flex;
+	flex-direction: column;
+	min-width: 220px;
+
+	&.pinned {
+		border-color: var(--ring);
+	}
+}
+
+.divider {
+	display: block;
+	width: 100%;
+	height: 1px;
+	background-color: var(--l2-border);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: var(--spacing-6) var(--gutter);
+}
+
+// Matches the legend row's marker.
+.marker {
+	box-sizing: border-box;
+	width: 12px;
+	height: 12px;
+	border: 1.5px solid;
+	border-radius: var(--radius);
+	flex-shrink: 0;
+}
+
+.title {
+	flex: 1;
+	min-width: 0;
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	font-weight: 600;
+	color: var(--text-vanilla-100);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-5) var(--gutter);
+}
+
+.row {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	font-family: var(--font-mono);
+	font-size: var(--font-size-xs);
+	font-variant-numeric: tabular-nums;
+	color: var(--text-vanilla-100);
+}
+
+.rowMuted {
+	color: var(--text-vanilla-400);
+}
+
+.rowLabel {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.rowValue {
+	flex: 0 0 auto;
+	max-width: 60%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

frontend/src/lib/uPlotV2/components/Tooltip/ScatterTooltip.tsx

@@ -0,0 +1,139 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import { Pin } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import { ScatterTooltipProps } from '../types';
+import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
+
+import Styles from './ScatterTooltip.module.scss';
+
+/** Own component: the shared Tooltip lists one row per series at a shared x. */
+export default function ScatterTooltip({
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	channels,
+	resolvePointGroupValues,
+	decimalPrecision,
+	isPinned,
+	dismiss,
+	renderTooltipFooter,
+}: ScatterTooltipProps): JSX.Element | null {
+	const hoveredPoint = useMemo(
+		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
+		[uPlotInstance, seriesIndex, dataIndexes],
+	);
+
+	const rows = useMemo(
+		() =>
+			hoveredPoint
+				? buildChannelRows(hoveredPoint, channels, decimalPrecision)
+				: [],
+		[hoveredPoint, channels, decimalPrecision],
+	);
+
+	const labels = useMemo(
+		() =>
+			hoveredPoint
+				? (resolvePointGroupValues?.(
+						hoveredPoint.seriesIndex,
+						hoveredPoint.dataIndex,
+					) ?? [])
+				: [],
+		[hoveredPoint, resolvePointGroupValues],
+	);
+
+	if (!hoveredPoint) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
+			data-pinned={isPinned}
+			data-testid="scatter-tooltip"
+		>
+			<div className={Styles.header}>
+				<span
+					className={Styles.marker}
+					style={{
+						backgroundColor: hoveredPoint.color,
+						borderColor: hoveredPoint.color,
+					}}
+				/>
+				<Typography.Text
+					as="span"
+					className={Styles.title}
+					title={hoveredPoint.label}
+					testId="scatter-tooltip-title"
+				>
+					{hoveredPoint.label}
+				</Typography.Text>
+				{isPinned && (
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						prefix={<Pin size={12} />}
+						testId="scatter-tooltip-status"
+					>
+						Pinned
+					</Button>
+				)}
+			</div>
+
+			<span className={Styles.divider} />
+
+			<div className={Styles.rows}>
+				{rows.map((row) => (
+					<div
+						key={row.label}
+						className={Styles.row}
+						data-testid="scatter-tooltip-row"
+					>
+						<Typography.Text as="span" className={Styles.rowLabel}>
+							{row.label}
+						</Typography.Text>
+						<Typography.Text as="span" className={Styles.rowValue}>
+							{row.value}
+						</Typography.Text>
+					</div>
+				))}
+			</div>
+
+			{labels.length > 0 && (
+				<>
+					<span className={Styles.divider} />
+					<div className={Styles.rows}>
+						{labels.map((label) => (
+							<div
+								key={label.key}
+								className={cx(Styles.row, Styles.rowMuted)}
+								data-testid="scatter-tooltip-label"
+							>
+								<Typography.Text
+									as="span"
+									className={Styles.rowLabel}
+									title={label.key}
+								>
+									{label.key}
+								</Typography.Text>
+								<Typography.Text
+									as="span"
+									className={Styles.rowValue}
+									title={label.value}
+								>
+									{label.value}
+								</Typography.Text>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+
+			{renderTooltipFooter?.({ isPinned, dismiss })}
+		</div>
+	);
+}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/scatterTooltipContent.test.ts

@@ -0,0 +1,107 @@
+import type uPlot from 'uplot';
+
+import {
+	buildChannelRows,
+	resolveHoveredPoint,
+	ScatterHoveredPoint,
+} from '../scatterTooltipContent';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getToolTipValue: jest.fn((value: number | string, unit?: string) =>
+		`${value} ${unit ?? ''}`.trim(),
+	),
+}));
+
+const plot = {
+	data: [
+		null,
+		[
+			[10, 20],
+			[100, 200],
+			[5, null],
+		],
+		[[30], [300]],
+	],
+	series: [
+		{},
+		{ label: 'cart', stroke: '#ff0000' },
+		{ label: 'checkout', stroke: (): string => '#00ff00' },
+	],
+} as unknown as uPlot;
+
+describe('resolveHoveredPoint', () => {
+	it('reads the focused series at its own data index', () => {
+		expect(resolveHoveredPoint(plot, 1, [null, 1, null])).toStrictEqual({
+			seriesIndex: 1,
+			dataIndex: 1,
+			label: 'cart',
+			color: '#ff0000',
+			x: 20,
+			y: 200,
+			size: null,
+		});
+	});
+
+	it('carries the size column when present and resolves function strokes', () => {
+		expect(resolveHoveredPoint(plot, 1, [null, 0, null])?.size).toBe(5);
+		expect(resolveHoveredPoint(plot, 2, [null, null, 0])).toMatchObject({
+			label: 'checkout',
+			color: '#00ff00',
+			size: null,
+		});
+	});
+
+	it('is null without a focused series or an index for it', () => {
+		expect(resolveHoveredPoint(plot, null, [null, 0, null])).toBeNull();
+		expect(resolveHoveredPoint(plot, 0, [0, 0, null])).toBeNull();
+		expect(resolveHoveredPoint(plot, 1, [null, null, null])).toBeNull();
+	});
+});
+
+describe('buildChannelRows', () => {
+	const point: ScatterHoveredPoint = {
+		seriesIndex: 1,
+		dataIndex: 0,
+		label: 'cart',
+		color: '#f00',
+		x: 12,
+		y: 340,
+		size: 7,
+	};
+
+	it('formats x and y with their own units', () => {
+		const rows = buildChannelRows(point, {
+			x: { label: 'Throughput', unit: 'reqps' },
+			y: { label: 'p99', unit: 'ms' },
+		});
+
+		expect(rows).toStrictEqual([
+			{ label: 'Throughput', value: '12 reqps' },
+			{ label: 'p99', value: '340 ms' },
+		]);
+	});
+
+	it('adds the size row only when the channel is mapped and the point has one', () => {
+		const channels = {
+			x: { label: 'x' },
+			y: { label: 'y' },
+			size: { label: 'Errors' },
+		};
+
+		expect(buildChannelRows(point, channels)).toHaveLength(3);
+		expect(buildChannelRows({ ...point, size: null }, channels)).toHaveLength(2);
+	});
+
+	it('leaves out a size row that repeats the x row', () => {
+		const rows = buildChannelRows(
+			{ ...point, size: point.x },
+			{
+				x: { label: 'A.count()' },
+				y: { label: 'p99' },
+				size: { label: 'A.count()' },
+			},
+		);
+
+		expect(rows.map((row) => row.label)).toStrictEqual(['A.count()', 'p99']);
+	});
+});

frontend/src/lib/uPlotV2/components/Tooltip/scatterTooltipContent.ts

@@ -0,0 +1,97 @@
+import { PrecisionOption } from 'components/Graph/types';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import type uPlot from 'uplot';
+
+import type {
+	ScatterChannel,
+	ScatterChannels,
+	ScatterSeriesData,
+} from '../../plugins/ScatterPlugin/types';
+import { resolveSeriesColor } from './utils';
+
+export interface ScatterHoveredPoint {
+	seriesIndex: number;
+	dataIndex: number;
+	label: string;
+	color: string;
+	x: number;
+	y: number;
+	size: number | null;
+}
+
+export interface ScatterTooltipRow {
+	label: string;
+	value: string;
+}
+
+export function resolveHoveredPoint(
+	u: uPlot,
+	seriesIndex: number | null,
+	dataIndexes: Array<number | null>,
+): ScatterHoveredPoint | null {
+	if (seriesIndex == null || seriesIndex < 1) {
+		return null;
+	}
+	const dataIndex = dataIndexes[seriesIndex];
+	const series = u.series[seriesIndex];
+	const columns = u.data[seriesIndex] as unknown as
+		| ScatterSeriesData
+		| undefined;
+	if (dataIndex == null || !series || !columns) {
+		return null;
+	}
+	const x = columns[0][dataIndex];
+	const y = columns[1][dataIndex];
+	if (x == null || y == null) {
+		return null;
+	}
+	return {
+		seriesIndex,
+		dataIndex,
+		label: String(series.label ?? ''),
+		color: resolveSeriesColor(series.stroke, u, seriesIndex),
+		x,
+		y,
+		size: columns[2]?.[dataIndex] ?? null,
+	};
+}
+
+function formatChannel(
+	value: number,
+	channel: ScatterChannel,
+	decimalPrecision?: PrecisionOption,
+): string {
+	return getToolTipValue(value, channel.unit, decimalPrecision);
+}
+
+export function buildChannelRows(
+	point: ScatterHoveredPoint,
+	channels: ScatterChannels,
+	decimalPrecision?: PrecisionOption,
+): ScatterTooltipRow[] {
+	const rows: ScatterTooltipRow[] = [
+		{
+			label: channels.x.label,
+			value: formatChannel(point.x, channels.x, decimalPrecision),
+		},
+		{
+			label: channels.y.label,
+			value: formatChannel(point.y, channels.y, decimalPrecision),
+		},
+	];
+	if (channels.size && point.size != null) {
+		const sizeRow = {
+			label: channels.size.label,
+			value: formatChannel(point.size, channels.size, decimalPrecision),
+		};
+		// Size bound to the X or Y column would only repeat that row.
+		if (
+			!rows.some(
+				(row) => row.label === sizeRow.label && row.value === sizeRow.value,
+			)
+		) {
+			rows.push(sizeRow);
+		}
+	}
+	return rows;
+}

frontend/src/lib/uPlotV2/components/types.ts

@@ -6,6 +6,10 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
+import type {
+	ScatterChannels,
+	ScatterPointLabel,
+} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -119,6 +123,16 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
+export interface ScatterTooltipProps
+	extends BaseTooltipProps, TooltipRenderArgs {
+	channels: ScatterChannels;
+	/** The group values behind a point, e.g. `service.name` → `cart`. */
+	resolvePointGroupValues?: (
+		seriesIndex: number,
+		dataIndex: number,
+	) => ScatterPointLabel[];
+}
+
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -39,6 +39,16 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
+	/** Styled like the grid. */
+	private buildBorderConfig(
+		grid: uPlot.Axis.Grid | undefined,
+	): uPlot.Axis.Border | undefined {
+		if (this.props.showBorder === false || !grid || grid.show === false) {
+			return undefined;
+		}
+		return { show: true, stroke: grid.stroke, width: grid.width };
+	}
+
 	/**
 	 * Build ticks configuration
 	 */
@@ -59,31 +69,47 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 	/**
 	 * Build values formatter for X-axis (time)
+	 * A non-time x axis with a unit or precision formats like a value axis.
 	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis } = this.props;
+		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
+		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
+			return this.buildValueAxisFormatter();
+		}
+
 		return undefined;
 	}
 
 	/**
 	 * Build values formatter for Y-axis (values with units)
+	 * Blanks splits outside the scale; uPlot's asinh splits always include ±threshold.
 	 */
-	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision } = this.props;
+	private buildValueAxisFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
 
-		return (_, t): string[] =>
-			t.map((v) => {
-				if (v === null || v === undefined || Number.isNaN(v)) {
+		return (u, t): string[] => {
+			const scale = u?.scales?.[scaleKey];
+			const min = scale?.min ?? -Infinity;
+			const max = scale?.max ?? Infinity;
+			return t.map((v) => {
+				if (
+					v === null ||
+					v === undefined ||
+					Number.isNaN(v) ||
+					v < min ||
+					v > max
+				) {
 					return '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
+		};
 	}
 
 	/**
@@ -101,7 +127,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildYAxisValuesFormatter()
+				? this.buildValueAxisFormatter()
 				: undefined;
 	}
 
@@ -149,10 +175,12 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			side = 2, // bottom by default
 			space,
 			splits,
+			filter,
 			gap = 5, // default gap is 5
 		} = this.props;
 
 		const grid = this.buildGridConfig();
+		const border = this.buildBorderConfig(grid);
 		const ticks = this.buildTicksConfig();
 		const values = this.buildValuesFormatter();
 		const size = this.buildSizeCalculator();
@@ -177,6 +205,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (ticks) {
 			axisConfig.ticks = ticks;
 		}
+		if (border) {
+			axisConfig.border = border;
+		}
 		if (values) {
 			axisConfig.values = values;
 		}
@@ -189,6 +220,9 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (space !== undefined) {
 			axisConfig.space = space;
 		}
+		if (filter) {
+			axisConfig.filter = filter;
+		}
 		if (size) {
 			axisConfig.size = size;
 		}

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -20,6 +20,7 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
+	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -66,6 +67,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
+	private mode: PlotMode = PlotMode.Aligned;
+
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -163,6 +166,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
+	setMode(mode: PlotMode): void {
+		this.mode = mode;
+	}
+
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -519,6 +526,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			{} as Record<string, uPlot.Scale>,
 		);
 
+		if (this.mode === PlotMode.Faceted) {
+			config.mode = this.mode as number as uPlot.Mode;
+		}
+
 		config.hooks = this.hooks;
 		config.select = this.select;
 

frontend/src/lib/uPlotV2/config/UPlotScaleBuilder.ts

@@ -40,6 +40,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			range,
 			thresholds,
 			logBase = 10,
+			asinhThreshold,
 			padMinBy = 0,
 			padMaxBy = 0.05,
 		} = this.props;
@@ -99,6 +100,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
+			asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -88,6 +88,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
+		} else if (this.props.drawStyle === DrawStyle.Scatter) {
+			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -123,7 +125,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points) {
+		if (isMarkerOnlyDrawStyle(drawStyle)) {
 			return { paths: (): null => null };
 		}
 
@@ -195,6 +197,10 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
+		// The discs are the series path; uPlot's own points would double-draw them.
+		if (drawStyle === DrawStyle.Scatter) {
+			return false;
+		}
 		return !!showPoints;
 	}
 
@@ -226,6 +232,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			show = true,
 			metric,
 			partialTimestamps,
+			facets,
 		} = this.props;
 
 		const resolvedLineColor = this.getLineColor();
@@ -255,6 +262,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
 			...(partialTimestamps?.size ? { partialTimestamps } : {}),
+			...(facets && { facets }),
 		};
 	}
 }
@@ -267,6 +275,11 @@ interface PathBuilders {
 	[key: string]: Series.PathBuilder;
 }
 
+/** Draws standalone markers, never a connecting line. */
+function isMarkerOnlyDrawStyle(drawStyle: DrawStyle): boolean {
+	return drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter;
+}
+
 /**
  * Get path builder based on draw style and interpolation
  */

frontend/src/lib/uPlotV2/config/__tests__/UPlotAxisBuilder.test.ts

@@ -120,6 +120,41 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
+	it('draws the axis line by default, styled like the grid', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
+		).getConfig();
+
+		expect(config.border).toStrictEqual({
+			show: true,
+			stroke: config.grid?.stroke,
+			width: 0.5,
+		});
+	});
+
+	it('leaves the axis line off when showBorder is false', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('leaves the axis line off when the grid is hidden', () => {
+		expect(
+			new UPlotAxisBuilder(createAxisProps({ grid: { show: false } })).getConfig(),
+		).not.toHaveProperty('border');
+	});
+
+	it('passes explicit splits and a label filter through to uPlot', () => {
+		const splits = jest.fn();
+		const filter = jest.fn();
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ splits, filter }),
+		).getConfig();
+
+		expect(config.splits).toBe(splits);
+		expect(config.filter).toBe(filter);
+	});
+
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -376,3 +411,51 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
+
+describe('UPlotAxisBuilder value x axis', () => {
+	it('formats a non-time x axis with its unit', () => {
+		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
+		).getConfig();
+
+		const values = (config.values as uPlot.Axis.DynamicValues)(
+			{} as uPlot,
+			[1200],
+			0,
+			0,
+			0,
+		);
+
+		expect(values).toStrictEqual(['1.2K req/s']);
+		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
+	});
+
+	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
+		).getConfig();
+
+		expect(config.values).toBeUndefined();
+	});
+});
+
+describe('UPlotAxisBuilder out-of-range splits', () => {
+	it('leaves a split the scale cannot place unlabelled', () => {
+		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
+		const config = new UPlotAxisBuilder(
+			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
+		).getConfig();
+		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
+
+		const values = (config.values as uPlot.Axis.DynamicValues)(
+			u,
+			[-10, 0, 500, 5000],
+			0,
+			0,
+			0,
+		);
+
+		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
+	});
+});

frontend/src/lib/uPlotV2/config/__tests__/UPlotConfigBuilder.test.ts

@@ -5,7 +5,12 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
+import {
+	DrawStyle,
+	PlotMode,
+	SelectionPreferencesSource,
+	StackMode,
+} from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -667,3 +672,14 @@ describe('UPlotConfigBuilder stacking', () => {
 		expect(builder.getConfig().hooks?.draw).toHaveLength(1);
 	});
 });
+
+describe('UPlotConfigBuilder plot mode', () => {
+	it('leaves mode unset for aligned data and emits 2 when faceted', () => {
+		const aligned = new UPlotConfigBuilder({ id: 'aligned' });
+		expect(aligned.getConfig().mode).toBeUndefined();
+
+		const faceted = new UPlotConfigBuilder({ id: 'faceted' });
+		faceted.setMode(PlotMode.Faceted);
+		expect(faceted.getConfig().mode).toBe(2);
+	});
+});

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -425,3 +425,39 @@ describe('UPlotSeriesBuilder', () => {
 		);
 	});
 });
+
+describe('UPlotSeriesBuilder scatter', () => {
+	it('draws through the given path builder and hides uPlot points', () => {
+		const pathBuilder = jest.fn();
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Scatter,
+				pathBuilder,
+				facets: [{ scale: 'x' }, { scale: 'y' }],
+				lineColor: '#ff0000',
+				fillOpacity: 0.5,
+				lineWidth: 1,
+				pointSize: 8,
+			}),
+		).getConfig();
+
+		expect(config.paths).toBe(pathBuilder);
+		expect(config.facets).toStrictEqual([{ scale: 'x' }, { scale: 'y' }]);
+		expect(config.points?.show).toBe(false);
+		expect(config.points?.size).toBe(8);
+		expect(config.stroke).toBe('#ff0000');
+		expect(config.width).toBe(1);
+		expect(config.fill).toBe('#ff000080');
+	});
+
+	it('draws nothing without a path builder', () => {
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({ drawStyle: DrawStyle.Scatter }),
+		).getConfig();
+
+		expect(
+			(config.paths as uPlot.Series.PathBuilder)({} as uPlot, 1, 0, 0),
+		).toBeNull();
+		expect(config.facets).toBeUndefined();
+	});
+});

frontend/src/lib/uPlotV2/config/types.ts

@@ -80,6 +80,10 @@ export interface AxisProps {
 	values?: uPlot.Axis.Values;
 	/** Explicit axis splits, overriding the default tick calculation. */
 	splits?: uPlot.Axis.Splits;
+	/** Which splits get a label, replacing uPlot's per-distribution default. */
+	filter?: uPlot.Axis.Filter;
+	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
+	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -90,7 +94,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
+	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`); a non-time x axis reads it too. */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -109,6 +113,13 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
+	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
+	SymmetricLog = 'symlog',
+}
+
+export enum PlotMode {
+	Aligned = 1,
+	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -125,6 +136,8 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
+	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
+	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -146,6 +159,7 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
+	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -232,6 +246,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	metric?: { [key: string]: string };
 	/** Epoch-second x values whose bucket doesn't cover a full step; marked with a dotted ring. */
 	partialTimestamps?: Set<number>;
+	/** Mode 2 only: the scales the series' own x and y columns are read against. */
+	facets?: Series.Facet[];
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/hooks/__tests__/useThresholdsDrawHook.test.ts

@@ -0,0 +1,56 @@
+import type uPlot from 'uplot';
+
+import { thresholdsDrawHook } from '../useThresholdsDrawHook';
+
+function mockPlot(ori: 0 | 1): { plot: uPlot; ctx: Record<string, jest.Mock> } {
+	const ctx = {
+		save: jest.fn(),
+		restore: jest.fn(),
+		setLineDash: jest.fn(),
+		beginPath: jest.fn(),
+		moveTo: jest.fn(),
+		lineTo: jest.fn(),
+		stroke: jest.fn(),
+		fillText: jest.fn(),
+		measureText: jest.fn(() => ({ width: 40 })),
+	};
+	const plot = {
+		ctx: { ...ctx, canvas: { height: 300 } },
+		bbox: { left: 10, top: 20, width: 400, height: 200 },
+		scales: { s: { ori } },
+		valToPos: (): number => 100,
+	} as unknown as uPlot;
+	return { plot, ctx };
+}
+
+const draw = (plot: uPlot): void =>
+	(
+		thresholdsDrawHook({
+			scaleKey: 's',
+			thresholds: [{ thresholdValue: 5, thresholdLabel: 'SLO' }],
+		}) as (u: uPlot) => void
+	)(plot);
+
+describe('thresholdsDrawHook', () => {
+	it('draws a horizontal line across a vertical scale', () => {
+		const { plot, ctx } = mockPlot(1);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(10, 100);
+		expect(ctx.lineTo).toHaveBeenCalledWith(410, 100);
+		expect(ctx.fillText).toHaveBeenCalledWith('SLO', 350, 85);
+	});
+
+	it('draws a vertical line across a horizontal scale', () => {
+		const { plot, ctx } = mockPlot(0);
+		draw(plot);
+
+		expect(ctx.moveTo).toHaveBeenCalledWith(100, 20);
+		expect(ctx.lineTo).toHaveBeenCalledWith(100, 220);
+		expect(ctx.fillText).toHaveBeenCalledWith(
+			'SLO',
+			expect.any(Number),
+			expect.any(Number),
+		);
+	});
+});

frontend/src/lib/uPlotV2/hooks/useThresholdsDrawHook.ts

@@ -29,13 +29,42 @@ export function thresholdsDrawHook(
 
 			const scaleVal = u.valToPos(Number(yValue), scaleKey, true);
 
+			ctx.strokeStyle = color;
+
+			// A horizontal scale (e.g. a scatter plot's x) takes a vertical line.
+			if (u.scales[scaleKey]?.ori === 0) {
+				const x = Math.round(scaleVal);
+				const top = Math.round(u.bbox.top);
+
+				ctx.beginPath();
+				ctx.moveTo(x, top);
+				ctx.lineTo(x, Math.round(u.bbox.top + u.bbox.height));
+				ctx.stroke();
+
+				if (threshold.thresholdLabel) {
+					const gap = 6 * uPlot.pxRatio;
+					const textWidth = ctx.measureText(threshold.thresholdLabel).width;
+					const fitsRight = x + gap + textWidth <= u.bbox.left + u.bbox.width;
+					// uPlot leaves the last axis's text alignment on the context.
+					ctx.save();
+					ctx.fillStyle = color;
+					ctx.textAlign = 'left';
+					ctx.textBaseline = 'top';
+					ctx.fillText(
+						threshold.thresholdLabel,
+						fitsRight ? x + gap : x - gap - textWidth,
+						top + gap,
+					);
+					ctx.restore();
+				}
+				continue;
+			}
+
 			const x0 = Math.round(u.bbox.left);
 			const y0 = Math.round(scaleVal);
 			const x1 = Math.round(u.bbox.left + u.bbox.width);
 			const y1 = Math.round(scaleVal);
 
-			ctx.strokeStyle = color;
-
 			ctx.beginPath();
 			ctx.moveTo(x0, y0);
 			ctx.lineTo(x1, y1);

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/geometry.test.ts

@@ -0,0 +1,116 @@
+import type uPlot from 'uplot';
+
+import { Quadtree } from '../../../utils/quadtree';
+import {
+	resolveHit,
+	resolvePointDiameter,
+	resolveSizeDomain,
+} from '../geometry';
+import { ScatterHit, ScatterPointSize } from '../types';
+
+const POINT_SIZE: ScatterPointSize = { fixed: 6, min: 4, max: 20 };
+
+const asData = (columns: unknown[]): uPlot.AlignedData =>
+	columns as unknown as uPlot.AlignedData;
+
+describe('resolveSizeDomain', () => {
+	it('spans the size columns of every series, skipping nulls', () => {
+		const data = asData([
+			null,
+			[
+				[1, 2],
+				[1, 2],
+				[10, null],
+			],
+			[[3], [3], [40]],
+		]);
+
+		expect(resolveSizeDomain(data)).toStrictEqual({ min: 10, max: 40 });
+	});
+
+	it('is null when no series carries sizes', () => {
+		expect(resolveSizeDomain(asData([null, [[1], [1]]]))).toBeNull();
+		expect(resolveSizeDomain(asData([null, [[1], [1], [null]]]))).toBeNull();
+	});
+});
+
+describe('resolvePointDiameter', () => {
+	it('uses the fixed diameter without a size or a domain', () => {
+		expect(resolvePointDiameter(null, { min: 0, max: 10 }, POINT_SIZE)).toBe(6);
+		expect(resolvePointDiameter(5, null, POINT_SIZE)).toBe(6);
+	});
+
+	it('maps the domain ends to min and max', () => {
+		const domain = { min: 0, max: 100 };
+		expect(resolvePointDiameter(0, domain, POINT_SIZE)).toBe(4);
+		expect(resolvePointDiameter(100, domain, POINT_SIZE)).toBe(20);
+	});
+
+	it('scales by area, not diameter', () => {
+		const midArea = (4 ** 2 + 20 ** 2) / 2;
+		expect(
+			resolvePointDiameter(50, { min: 0, max: 100 }, POINT_SIZE),
+		).toBeCloseTo(Math.sqrt(midArea));
+	});
+
+	it('clamps values outside the domain', () => {
+		const domain = { min: 10, max: 20 };
+		expect(resolvePointDiameter(-5, domain, POINT_SIZE)).toBe(4);
+		expect(resolvePointDiameter(500, domain, POINT_SIZE)).toBe(20);
+	});
+
+	it('uses the midpoint when every size is the same', () => {
+		expect(resolvePointDiameter(7, { min: 7, max: 7 }, POINT_SIZE)).toBe(12);
+	});
+});
+
+describe('resolveHit', () => {
+	const hit = (
+		seriesIndex: number,
+		dataIndex: number,
+		x: number,
+		y: number,
+		d: number,
+	): ScatterHit => ({ seriesIndex, dataIndex, x, y, w: d, h: d });
+
+	it('returns the disc under the cursor', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+		tree.add(hit(2, 3, 50, 50, 6));
+
+		expect(resolveHit(tree, 13, 13, 0)).toMatchObject({
+			seriesIndex: 1,
+			dataIndex: 0,
+		});
+		expect(resolveHit(tree, 52, 52, 0)).toMatchObject({
+			seriesIndex: 2,
+			dataIndex: 3,
+		});
+	});
+
+	it('is null when the cursor is off every disc', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+
+		expect(resolveHit(tree, 30, 30, 0)).toBeNull();
+		// Inside the disc's bounding square, outside the disc.
+		expect(resolveHit(tree, 15.8, 15.8, 0)).toBeNull();
+	});
+
+	it('tolerance widens each disc', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 6));
+
+		expect(resolveHit(tree, 18, 13, 0)).toBeNull();
+		expect(resolveHit(tree, 18, 13, 3)).not.toBeNull();
+	});
+
+	it('prefers the disc whose centre is nearest when they overlap', () => {
+		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
+		tree.add(hit(1, 0, 10, 10, 10));
+		tree.add(hit(1, 1, 14, 10, 10));
+
+		expect(resolveHit(tree, 13, 15, 0)?.dataIndex).toBe(0);
+		expect(resolveHit(tree, 21, 15, 0)?.dataIndex).toBe(1);
+	});
+});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/scatterPlugin.test.ts

@@ -0,0 +1,290 @@
+import uPlot from 'uplot';
+
+import { UPlotConfigBuilder } from '../../../config/UPlotConfigBuilder';
+import {
+	applyScatterPlugin,
+	createScatterPlugin,
+	SCATTER_FACETS,
+} from '../scatterPlugin';
+
+jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
+	getStoredSeriesVisibility: jest.fn(),
+}));
+
+/** jsdom has no Path2D; the builder only needs something that takes the calls. */
+class FakePath2D {
+	moveTo = jest.fn();
+	arc = jest.fn();
+}
+
+type OrientCallback = Parameters<typeof uPlot.orient>[2];
+
+interface FakePlotArgs {
+	series: Array<{ xs: number[]; ys: number[]; sizes?: Array<number | null> }>;
+	cursor?: { left: number; top: number };
+	scaleX?: { min: number; max: number };
+	scaleY?: { min: number; max: number };
+}
+
+/**
+ * A 100×100 plot at the canvas origin with identity scales: value 10 draws at
+ * pixel 10 on x, and at 100 − 10 on y (uPlot's y grows downward).
+ */
+function createFakePlot({
+	series,
+	cursor = { left: -1, top: -1 },
+	scaleX = { min: 0, max: 100 },
+	scaleY = { min: 0, max: 100 },
+}: FakePlotArgs): uPlot {
+	const data = [
+		null,
+		...series.map((entry) =>
+			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
+		),
+	];
+	return {
+		data,
+		series: [{}, ...series.map((_, index) => ({ label: `s${index + 1}` }))],
+		bbox: { left: 0, top: 0, width: 100, height: 100 },
+		cursor,
+		scales: { x: scaleX, y: scaleY },
+	} as unknown as uPlot;
+}
+
+/** Stands in for `uPlot.orient`: identity x, flipped y, an `arc` that records. */
+function orientWithIdentityScales(
+	u: uPlot,
+	seriesIdx: number,
+	cb: OrientCallback,
+): void {
+	const columns = (u.data as unknown as Array<number[][] | null>)[seriesIdx];
+	if (!columns) {
+		return;
+	}
+	const scaleX = (u.scales as unknown as Record<string, uPlot.Scale>).x;
+	const scaleY = (u.scales as unknown as Record<string, uPlot.Scale>).y;
+	const valToPosX = (value: number): number => value;
+	const valToPosY = (value: number): number => 100 - value;
+	// Real uPlot's `arc` helper forwards to the path; the test counts those calls.
+	const arc = (path: FakePath2D, ...args: number[]): void => {
+		path.arc(...args);
+	};
+	cb(
+		u.series[seriesIdx],
+		columns[0],
+		columns[1],
+		scaleX,
+		scaleY,
+		valToPosX as unknown as uPlot.ValToPos,
+		valToPosY as unknown as uPlot.ValToPos,
+		0,
+		0,
+		100,
+		100,
+		jest.fn() as never,
+		jest.fn() as never,
+		jest.fn() as never,
+		arc as never,
+		jest.fn() as never,
+	);
+}
+
+describe('createScatterPlugin', () => {
+	beforeAll(() => {
+		(globalThis as { Path2D?: unknown }).Path2D = FakePath2D;
+	});
+
+	let orient: jest.SpyInstance;
+
+	beforeEach(() => {
+		orient = jest
+			.spyOn(uPlot, 'orient')
+			.mockImplementation(orientWithIdentityScales);
+	});
+
+	afterEach(() => {
+		orient.mockReset();
+	});
+
+	function drawAll(
+		u: uPlot,
+		plugin: ReturnType<typeof createScatterPlugin>,
+	): void {
+		plugin.hooks.drawClear(u);
+		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
+			const columns = (u.data as unknown as number[][][])[seriesIdx];
+			plugin.pathBuilder(u, seriesIdx, 0, columns[0].length - 1);
+		}
+	}
+
+	/** Runs the cursor scan the way uPlot does: every data series, in order. */
+	function scan(
+		u: uPlot,
+		plugin: ReturnType<typeof createScatterPlugin>,
+	): Array<number | null> {
+		const dataIdx = plugin.cursor.dataIdx as NonNullable<uPlot.Cursor['dataIdx']>;
+		const indexes: Array<number | null> = [null];
+		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
+			indexes.push(dataIdx(u, seriesIdx, 0, 0));
+		}
+		return indexes;
+	}
+
+	it('returns one path that strokes and fills the same discs', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({ series: [{ xs: [10, 20], ys: [10, 20] }] });
+		plugin.hooks.drawClear(u);
+
+		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
+
+		expect(paths.stroke).toBeInstanceOf(FakePath2D);
+		expect(paths.fill).toBe(paths.stroke);
+		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(2);
+	});
+
+	it('resolves the hovered point to its own series and index', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 6, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [
+				{ xs: [10, 50], ys: [10, 50] },
+				{ xs: [80], ys: [80] },
+			],
+			// Over the second series' only point: x 80, y drawn at 100 − 80.
+			cursor: { left: 80, top: 20 },
+		});
+		drawAll(u, plugin);
+
+		expect(scan(u, plugin)).toStrictEqual([null, null, 0]);
+		expect(plugin.getHit()).toMatchObject({ seriesIndex: 2, dataIndex: 0 });
+	});
+
+	it('returns null for every series when the cursor is off the plot or off any disc', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: -1, top: -1 },
+		});
+		drawAll(u, plugin);
+
+		expect(scan(u, plugin)).toStrictEqual([null, null]);
+
+		(u.cursor as { left: number; top: number }).left = 50;
+		(u.cursor as { left: number; top: number }).top = 50;
+		expect(scan(u, plugin)).toStrictEqual([null, null]);
+	});
+
+	it('skips points outside the visible scale range', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({
+			series: [{ xs: [10, 500], ys: [10, 10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+
+		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
+		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(1);
+		expect(scan(u, plugin)).toStrictEqual([null, 0]);
+	});
+
+	it('rings the hit disc, in CSS pixels, with a gap around it', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 8, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		const bbox = plugin.cursor.points?.bbox;
+		// The 8px disc spans 6..14; the ring sits 3px out and is 2px wide.
+		expect(bbox?.(u, 1)).toStrictEqual({
+			left: 1,
+			top: 81,
+			width: 18,
+			height: 18,
+		});
+		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
+	});
+
+	it('snaps the ring to whole pixels without moving its centre', () => {
+		const plugin = createScatterPlugin({
+			pointSize: { fixed: 7, min: 4, max: 20 },
+		});
+		const u = createFakePlot({
+			series: [{ xs: [10], ys: [10] }],
+			cursor: { left: 10, top: 90 },
+		});
+		drawAll(u, plugin);
+		scan(u, plugin);
+
+		// The 7px disc starts at 6.5, so the ring's edge would land on 1.5.
+		const ring = plugin.cursor.points?.bbox?.(u, 1);
+		expect(ring).toMatchObject({ left: 1, width: 18 });
+		expect((ring?.left ?? 0) + (ring?.width ?? 0) / 2).toBe(10);
+	});
+
+	it('draws the hover marker as an outline in the series colour', () => {
+		const plugin = createScatterPlugin();
+		const u = {
+			series: [{}, { stroke: (): string => '#E5484D' }, { stroke: '#30A46C' }],
+		} as unknown as uPlot;
+		const points = plugin.cursor.points as {
+			fill: (u: uPlot, seriesIdx: number) => string;
+			stroke: (u: uPlot, seriesIdx: number) => string;
+			width: (u: uPlot, seriesIdx: number, size: number) => number;
+		};
+
+		expect(points.fill(u, 1)).toBe('transparent');
+		expect(points.stroke(u, 1)).toBe('#E5484D');
+		expect(points.stroke(u, 2)).toBe('#30A46C');
+		expect(points.width(u, 1, 0)).toBe(2);
+	});
+
+	it('drawClear drops cached paths on data series only', () => {
+		const plugin = createScatterPlugin();
+		const u = createFakePlot({ series: [{ xs: [1], ys: [1] }] });
+		const [xSeries, dataSeries] = u.series as Array<{ _paths?: unknown }>;
+		xSeries._paths = 'x';
+		dataSeries._paths = 'cached';
+
+		plugin.hooks.drawClear(u);
+
+		expect(xSeries._paths).toBe('x');
+		expect(dataSeries._paths).toBeNull();
+	});
+
+	it('focus distance is zero, so the hit series wins focus', () => {
+		const plugin = createScatterPlugin();
+		expect(plugin.cursor.focus?.dist?.({} as uPlot, 1, 0, 0, 0)).toBe(0);
+	});
+});
+
+describe('applyScatterPlugin', () => {
+	it('switches the builder to faceted mode and disables drag selection', () => {
+		const builder = new UPlotConfigBuilder({ id: 'scatter' });
+		const plugin = createScatterPlugin();
+
+		applyScatterPlugin(builder, plugin);
+		const config = builder.getConfig();
+
+		expect(config.mode).toBe(2);
+		expect(config.cursor?.drag).toMatchObject({
+			x: false,
+			y: false,
+			setScale: false,
+		});
+		expect(config.hooks?.drawClear).toHaveLength(1);
+		expect(config.hooks?.destroy).toHaveLength(1);
+	});
+
+	it('facets read x and y against the shared scales', () => {
+		expect(SCATTER_FACETS).toStrictEqual([
+			{ scale: 'x', auto: true },
+			{ scale: 'y', auto: true },
+		]);
+	});
+});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/geometry.ts

@@ -0,0 +1,89 @@
+import type uPlot from 'uplot';
+
+import type { Quadtree } from '../../utils/quadtree';
+import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
+
+export interface SizeDomain {
+	min: number;
+	max: number;
+}
+
+/** Size extent across all series, so equal values draw equal discs. */
+export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
+	let min = Infinity;
+	let max = -Infinity;
+	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
+		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
+		if (!sizes) {
+			continue;
+		}
+		for (const size of sizes) {
+			if (size == null || !Number.isFinite(size)) {
+				continue;
+			}
+			min = Math.min(min, size);
+			max = Math.max(max, size);
+		}
+	}
+	return min <= max ? { min, max } : null;
+}
+
+/**
+ * Diameter for a size-channel value. Grows the disc's area, not its width,
+ * linearly with the value, so a value twice as large reads as twice the ink.
+ */
+export function resolvePointDiameter(
+	size: number | null | undefined,
+	domain: SizeDomain | null,
+	pointSize: ScatterPointSize,
+): number {
+	if (size == null || domain == null || !Number.isFinite(size)) {
+		return pointSize.fixed;
+	}
+	if (domain.max === domain.min) {
+		return (pointSize.min + pointSize.max) / 2;
+	}
+	const t = Math.min(
+		1,
+		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
+	);
+	const minArea = pointSize.min ** 2;
+	const maxArea = pointSize.max ** 2;
+	return Math.sqrt(minArea + (maxArea - minArea) * t);
+}
+
+/**
+ * The disc under the cursor, counting `tolerance` px beyond its edge as a hit.
+ * Where discs overlap, the one whose centre is closest wins; `null` if none.
+ */
+export function resolveHit(
+	tree: Quadtree<ScatterHit>,
+	cx: number,
+	cy: number,
+	tolerance: number,
+): ScatterHit | null {
+	let best: ScatterHit | null = null;
+	let bestDistance = Infinity;
+
+	tree.get(
+		cx - tolerance,
+		cy - tolerance,
+		tolerance * 2,
+		tolerance * 2,
+		(hit) => {
+			const dx = cx - (hit.x + hit.w / 2);
+			const dy = cy - (hit.y + hit.h / 2);
+			const distance = dx * dx + dy * dy;
+			const reach = hit.w / 2 + tolerance;
+			if (distance > reach * reach) {
+				return;
+			}
+			if (distance < bestDistance) {
+				best = hit;
+				bestDistance = distance;
+			}
+		},
+	);
+
+	return best;
+}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin.ts

@@ -0,0 +1,225 @@
+import uPlot, { Series } from 'uplot';
+
+import { DEFAULT_FOCUS_PROXIMITY_VALUE } from '../../constants';
+import { PlotMode } from '../../config/types';
+import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
+import { Quadtree } from '../../utils/quadtree';
+import {
+	resolveHit,
+	resolvePointDiameter,
+	resolveSizeDomain,
+	SizeDomain,
+} from './geometry';
+import {
+	DEFAULT_HOVER_TOLERANCE_PX,
+	DEFAULT_SCATTER_POINT_SIZE,
+	ScatterHit,
+	ScatterPluginOptions,
+	ScatterSeriesData,
+} from './types';
+
+export const SCATTER_FACETS: Series.Facet[] = [
+	{ scale: 'x', auto: true },
+	{ scale: 'y', auto: true },
+];
+
+const HIDDEN_BBOX: uPlot.BBox = { left: -10, top: -10, width: 0, height: 0 };
+
+const TWO_PI = 2 * Math.PI;
+
+/** CSS pixels between a hovered disc and the outline ring drawn around it. */
+const HOVER_RING_GAP_PX = 3;
+const HOVER_RING_WIDTH_PX = 2;
+
+/** uPlot ceils a cursor point's left/top but not its size; snap so the ring stays centred. */
+function snapToPixel(start: number, length: number): [number, number] {
+	const snapped = Math.floor(start);
+	return [snapped, length + (start - snapped) * 2];
+}
+
+export function getSeriesStroke(u: uPlot, seriesIdx: number): string {
+	const { stroke } = u.series[seriesIdx];
+	const color = typeof stroke === 'function' ? stroke(u, seriesIdx) : stroke;
+	return typeof color === 'string' ? color : '';
+}
+
+/** uPlot caches built paths on the series; the field is internal to it. */
+type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
+
+export interface ScatterPlugin {
+	pathBuilder: Series.PathBuilder;
+	/** Hover by disc rather than by nearest x: mode 2 has no shared x to scan. */
+	cursor: uPlot.Cursor;
+	hooks: {
+		drawClear: (u: uPlot) => void;
+		destroy: (u: uPlot) => void;
+	};
+	getHit: () => ScatterHit | null;
+}
+
+export function createScatterPlugin({
+	pointSize = DEFAULT_SCATTER_POINT_SIZE,
+	hoverTolerance = DEFAULT_HOVER_TOLERANCE_PX,
+}: ScatterPluginOptions = {}): ScatterPlugin {
+	let tree: Quadtree<ScatterHit> | null = null;
+	let hit: ScatterHit | null = null;
+
+	// Spans every series; cached per dataset.
+	let cachedData: uPlot.AlignedData | null = null;
+	let cachedDomain: SizeDomain | null = null;
+
+	function getSizeDomain(u: uPlot): SizeDomain | null {
+		if (cachedData !== u.data) {
+			cachedDomain = resolveSizeDomain(u.data);
+			cachedData = u.data;
+		}
+		return cachedDomain;
+	}
+
+	const pathBuilder: Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
+		const path = new Path2D();
+		const sizes = (u.data[seriesIdx] as unknown as ScatterSeriesData)[2];
+		const domain = getSizeDomain(u);
+		const { pxRatio } = uPlot;
+
+		uPlot.orient(
+			u,
+			seriesIdx,
+			(
+				_series,
+				dataX,
+				dataY,
+				scaleX,
+				scaleY,
+				valToPosX,
+				valToPosY,
+				xOff,
+				yOff,
+				xDim,
+				yDim,
+				_moveTo,
+				_lineTo,
+				_rect,
+				arc,
+			) => {
+				const xMin = scaleX.min ?? -Infinity;
+				const xMax = scaleX.max ?? Infinity;
+				const yMin = scaleY.min ?? -Infinity;
+				const yMax = scaleY.max ?? Infinity;
+
+				for (let i = idx0; i <= idx1; i++) {
+					const x = dataX[i];
+					const y = dataY[i];
+					if (
+						x == null ||
+						y == null ||
+						x < xMin ||
+						x > xMax ||
+						y < yMin ||
+						y > yMax
+					) {
+						continue;
+					}
+
+					const diameter =
+						resolvePointDiameter(sizes?.[i], domain, pointSize) * pxRatio;
+					const radius = diameter / 2;
+					const cx = valToPosX(x, scaleX, xDim, xOff);
+					const cy = valToPosY(y, scaleY, yDim, yOff);
+
+					path.moveTo(cx + radius, cy);
+					arc(path, cx, cy, radius, 0, TWO_PI);
+
+					tree?.add({
+						x: cx - radius - u.bbox.left,
+						y: cy - radius - u.bbox.top,
+						w: diameter,
+						h: diameter,
+						seriesIndex: seriesIdx,
+						dataIndex: i,
+					});
+				}
+			},
+		);
+
+		return { stroke: path, fill: path, clip: null };
+	};
+
+	const cursor: uPlot.Cursor = {
+		// Selection would set the dashboard time range; neither axis is time here.
+		drag: { x: false, y: false, setScale: false },
+		dataIdx: (u, seriesIdx): number | null => {
+			// uPlot asks series 1..n in order on every cursor move; resolve once.
+			if (seriesIdx === 1) {
+				const { left = -1, top = -1 } = u.cursor;
+				const { pxRatio } = uPlot;
+				hit =
+					tree && left >= 0 && top >= 0
+						? resolveHit(
+								tree,
+								left * pxRatio,
+								top * pxRatio,
+								hoverTolerance * pxRatio,
+							)
+						: null;
+			}
+			return hit?.seriesIndex === seriesIdx ? hit.dataIndex : null;
+		},
+		points: {
+			bbox: (_u, seriesIdx): uPlot.BBox => {
+				if (hit?.seriesIndex !== seriesIdx) {
+					return HIDDEN_BBOX;
+				}
+				const { pxRatio } = uPlot;
+				const inset = HOVER_RING_GAP_PX + HOVER_RING_WIDTH_PX;
+				const [left, width] = snapToPixel(
+					hit.x / pxRatio - inset,
+					hit.w / pxRatio + inset * 2,
+				);
+				const [top, height] = snapToPixel(
+					hit.y / pxRatio - inset,
+					hit.h / pxRatio + inset * 2,
+				);
+				return { left, top, width, height };
+			},
+			fill: (): string => 'transparent',
+			stroke: getSeriesStroke,
+			width: (): number => HOVER_RING_WIDTH_PX,
+		},
+		// uPlot only measures series that returned a data index, i.e. the hit one.
+		focus: { prox: DEFAULT_FOCUS_PROXIMITY_VALUE, dist: (): number => 0 },
+	};
+
+	return {
+		pathBuilder,
+		cursor,
+		hooks: {
+			drawClear: (u: uPlot): void => {
+				tree = new Quadtree<ScatterHit>(0, 0, u.bbox.width, u.bbox.height);
+				// The tree holds only what the path builder drew, so force a rebuild.
+				u.series.forEach((series, index) => {
+					if (index > 0) {
+						(series as SeriesWithPaths)._paths = null;
+					}
+				});
+			},
+			destroy: (): void => {
+				tree = null;
+				hit = null;
+				cachedData = null;
+				cachedDomain = null;
+			},
+		},
+		getHit: (): ScatterHit | null => hit,
+	};
+}
+
+export function applyScatterPlugin(
+	builder: UPlotConfigBuilder,
+	plugin: ScatterPlugin,
+): void {
+	builder.setMode(PlotMode.Faceted);
+	builder.setCursor(plugin.cursor);
+	builder.addHook('drawClear', plugin.hooks.drawClear);
+	builder.addHook('destroy', plugin.hooks.destroy);
+}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/types.ts

@@ -0,0 +1,54 @@
+import type { QuadtreeRect } from '../../utils/quadtree';
+
+/** Diameters in CSS pixels. `min`/`max` bound the area scale when a size column is mapped. */
+export interface ScatterPointSize {
+	fixed: number;
+	min: number;
+	max: number;
+}
+
+export const DEFAULT_SCATTER_POINT_SIZE: ScatterPointSize = {
+	fixed: 6,
+	min: 4,
+	max: 24,
+};
+
+/** CSS pixels around a point's disc that still register as a hover. */
+export const DEFAULT_HOVER_TOLERANCE_PX = 3;
+
+export interface ScatterPluginOptions {
+	pointSize?: ScatterPointSize;
+	hoverTolerance?: number;
+}
+
+/** Parallel columns; a `null` size draws at `fixed`. */
+export type ScatterSeriesData = [
+	xs: number[],
+	ys: number[],
+	sizes?: Array<number | null>,
+];
+
+/** Mode-2 data: series 0 is uPlot's x placeholder and carries nothing. */
+export type ScatterChartData = [null, ...ScatterSeriesData[]];
+
+/** A drawn point's disc, in canvas pixels relative to the plot area. */
+export interface ScatterHit extends QuadtreeRect {
+	seriesIndex: number;
+	dataIndex: number;
+}
+
+export interface ScatterChannel {
+	label: string;
+	unit?: string;
+}
+
+export interface ScatterChannels {
+	x: ScatterChannel;
+	y: ScatterChannel;
+	size?: ScatterChannel;
+}
+
+export interface ScatterPointLabel {
+	key: string;
+	value: string;
+}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/__tests__/buildClickData.test.ts

@@ -0,0 +1,52 @@
+import type uPlot from 'uplot';
+
+import { buildClickData } from '../utils';
+
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => ({ seriesIndex: 1 })),
+}));
+
+const event = {
+	offsetX: 10,
+	offsetY: 20,
+	clientX: 110,
+	clientY: 220,
+} as MouseEvent;
+
+describe('buildClickData', () => {
+	it('skips the x-index lookups on a faceted plot, which has no shared x series', () => {
+		const posToIdx = jest.fn(() => {
+			throw new Error('faceted data[0] is null');
+		});
+		const plot = {
+			data: [null],
+			posToVal: (pos: number): number => pos * 2,
+			posToIdx,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toStrictEqual({
+			xValue: 20,
+			yValue: 40,
+			focusedSeries: null,
+			clickedDataTimestamp: 20,
+			mouseX: 10,
+			mouseY: 20,
+			absoluteMouseX: 110,
+			absoluteMouseY: 220,
+		});
+		expect(posToIdx).not.toHaveBeenCalled();
+	});
+
+	it('resolves the focused series and clicked timestamp on an aligned plot', () => {
+		const plot = {
+			data: [[100, 200, 300]],
+			posToVal: (pos: number): number => pos,
+			posToIdx: (): number => 1,
+		} as unknown as uPlot;
+
+		expect(buildClickData(event, plot)).toMatchObject({
+			focusedSeries: { seriesIndex: 1 },
+			clickedDataTimestamp: 200,
+		});
+	});
+});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -174,6 +174,24 @@ export function createLayoutObserver(
 export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
+	const pointer = {
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
+	};
+
+	// Faceted (scatter): no shared x, so `posToIdx` would throw.
+	if (plot.data[0] == null) {
+		return {
+			xValue,
+			yValue,
+			focusedSeries: null,
+			clickedDataTimestamp: xValue,
+			...pointer,
+		};
+	}
+
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
 
 	const dataIndex = plot.posToIdx(event.offsetX);
@@ -193,9 +211,6 @@ export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 		yValue,
 		focusedSeries,
 		clickedDataTimestamp,
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
+		...pointer,
 	};
 }

frontend/src/lib/uPlotV2/utils/__tests__/logGridSplits.test.ts

@@ -0,0 +1,66 @@
+import type uPlot from 'uplot';
+
+import { logScaleSplits, spacedLogLabels } from '../logGridSplits';
+
+describe('logScaleSplits', () => {
+	const splitsFor = (min: number, max: number): number[] =>
+		(
+			logScaleSplits as (
+				u: uPlot,
+				axisIdx: number,
+				min: number,
+				max: number,
+			) => number[]
+		)({} as uPlot, 0, min, max);
+
+	it('splits at 1, 2 and 5 × 10ⁿ inside an unsnapped range', () => {
+		expect(splitsFor(10.6, 990)).toStrictEqual([20, 50, 100, 200, 500]);
+	});
+
+	it('includes the ends when they fall on a split', () => {
+		expect(splitsFor(0.1, 10)).toStrictEqual([0.1, 0.2, 0.5, 1, 2, 5, 10]);
+	});
+
+	it('steps evenly through a range too narrow for two 1/2/5 splits', () => {
+		expect(splitsFor(7.6, 9.4)).toStrictEqual([8, 9]);
+		expect(splitsFor(8.12, 8.19)).toStrictEqual([
+			8.12, 8.13, 8.14, 8.15, 8.16, 8.17, 8.18, 8.19,
+		]);
+	});
+
+	it('is empty for a range a log scale cannot hold', () => {
+		expect(splitsFor(0, 10)).toStrictEqual([]);
+		expect(splitsFor(5, 5)).toStrictEqual([]);
+	});
+});
+
+describe('spacedLogLabels', () => {
+	// 100px per decade.
+	const plot = {
+		axes: [{ scale: 'x' }],
+		valToPos: (value: number): number => Math.log10(value) * 100,
+	} as unknown as uPlot;
+	const label = (splits: number[], space: number): (number | null)[] =>
+		spacedLogLabels(plot, splits, 0, space, 0) as (number | null)[];
+
+	it('always labels the powers of ten', () => {
+		expect(label([10, 20, 50, 100], 200)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('adds a 2 or 5 that clears the labels already kept', () => {
+		// 20 is 30px from 10; 50 is 70px from 10 and 30px from 100.
+		expect(label([10, 20, 50, 100], 25)).toStrictEqual([10, 20, 50, 100]);
+		expect(label([10, 20, 50, 100], 40)).toStrictEqual([10, null, null, 100]);
+	});
+
+	it('labels both ends of a range spanning under a decade', () => {
+		// 100 sits at 200px; 20 (130px) and 500 (270px) clear it, 50 and 200 do not.
+		expect(label([20, 50, 100, 200, 500], 60)).toStrictEqual([
+			20,
+			null,
+			100,
+			null,
+			500,
+		]);
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/quadtree.test.ts

@@ -0,0 +1,64 @@
+import { Quadtree, QuadtreeRect } from '../quadtree';
+
+interface Item extends QuadtreeRect {
+	id: number;
+}
+
+function collect(
+	tree: Quadtree<Item>,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+): Set<number> {
+	const ids = new Set<number>();
+	tree.get(x, y, w, h, (item) => ids.add(item.id));
+	return ids;
+}
+
+describe('Quadtree', () => {
+	it('returns items in the queried region and not those far from it', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
+		tree.add({ id: 2, x: 80, y: 80, w: 5, h: 5 });
+
+		// Below the split threshold every item is visited; callers refine the hit.
+		expect(collect(tree, 9, 9, 8, 8)).toStrictEqual(new Set([1, 2]));
+	});
+
+	it('splits past the object limit and still finds every item', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		const total = 50;
+		for (let id = 0; id < total; id++) {
+			tree.add({ id, x: (id % 10) * 10, y: Math.floor(id / 10) * 10, w: 4, h: 4 });
+		}
+
+		expect(collect(tree, 0, 0, 100, 100).size).toBe(total);
+	});
+
+	it('after a split, a query in one quadrant skips items confined to another', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		for (let id = 0; id < 20; id++) {
+			// All in the north-west quadrant.
+			tree.add({ id, x: 1 + id, y: 1, w: 2, h: 2 });
+		}
+		tree.add({ id: 99, x: 90, y: 90, w: 2, h: 2 });
+
+		const northWest = collect(tree, 0, 0, 10, 10);
+		expect(northWest.has(99)).toBe(false);
+		expect(collect(tree, 85, 85, 10, 10).has(99)).toBe(true);
+	});
+
+	it('reports an item straddling the midline from either side', () => {
+		const tree = new Quadtree<Item>(0, 0, 100, 100);
+		for (let id = 0; id < 20; id++) {
+			tree.add({ id, x: 1, y: 1 + id, w: 2, h: 2 });
+		}
+		tree.add({ id: 99, x: 48, y: 48, w: 4, h: 4 });
+
+		expect(collect(tree, 40, 40, 5, 5).has(99)).toBe(true);
+		expect(collect(tree, 55, 55, 5, 5).has(99)).toBe(true);
+		// A zero-size query exactly on both midlines.
+		expect(collect(tree, 50, 50, 0, 0).has(99)).toBe(true);
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -195,3 +195,22 @@ describe('scale utils', () => {
 		});
 	});
 });
+
+describe('symmetric log scale', () => {
+	it('maps to uPlot arcsinh with the given linear threshold', () => {
+		expect(
+			scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.SymmetricLog,
+				asinhThreshold: 0.01,
+			}),
+		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
+
+		expect(
+			scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.SymmetricLog,
+			}).asinh,
+		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
+	});
+});

frontend/src/lib/uPlotV2/utils/logGridSplits.ts

@@ -0,0 +1,92 @@
+import type uPlot from 'uplot';
+
+const DECADE_TOLERANCE = 1e-9;
+
+function isDecade(value: number): boolean {
+	if (value === 0) {
+		return true;
+	}
+	const exponent = Math.log10(Math.abs(value));
+	return Math.abs(exponent - Math.round(exponent)) < DECADE_TOLERANCE;
+}
+
+const LOG_SPLIT_MULTIPLES = [1, 2, 5];
+
+/** Decades finer than the range's own span that the fallback steps through. */
+const FALLBACK_STEP_DECADES = 3;
+
+/** Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max]. */
+function roundSplit(value: number): number {
+	return Number(value.toPrecision(12));
+}
+
+/** Evenly stepped splits for a range too narrow to hold two 1/2/5 splits. */
+function narrowRangeSplits(min: number, max: number): number[] {
+	const coarsest = Math.floor(Math.log10(max - min));
+	for (
+		let exponent = coarsest;
+		exponent > coarsest - FALLBACK_STEP_DECADES;
+		exponent--
+	) {
+		const step = 10 ** exponent;
+		const first = Math.ceil(roundSplit(min / step));
+		const last = Math.floor(roundSplit(max / step));
+		if (last > first) {
+			return Array.from({ length: last - first + 1 }, (_, index) =>
+				roundSplit((first + index) * step),
+			);
+		}
+	}
+	return [];
+}
+
+/** 1, 2, 5 × 10ⁿ in range; uPlot's log splits step from an unsnapped min (10.79, 21.58…). */
+export const logScaleSplits: uPlot.Axis.Splits = (_u, _axisIdx, min, max) => {
+	if (!(min > 0) || !(max > min)) {
+		return [];
+	}
+	const splits: number[] = [];
+	for (
+		let exponent = Math.floor(Math.log10(min));
+		exponent <= Math.ceil(Math.log10(max));
+		exponent++
+	) {
+		LOG_SPLIT_MULTIPLES.forEach((multiple) => {
+			const split = roundSplit(multiple * 10 ** exponent);
+			if (split >= min && split <= max) {
+				splits.push(split);
+			}
+		});
+	}
+	if (splits.length >= 2) {
+		return splits;
+	}
+	const narrow = narrowRangeSplits(min, max);
+	return narrow.length > splits.length ? narrow : splits;
+};
+
+/** Labels every decade, plus any 2 or 5 at least `space` px clear. */
+export const spacedLogLabels: uPlot.Axis.Filter = (
+	u,
+	splits,
+	axisIdx,
+	space,
+) => {
+	const scaleKey = u.axes[axisIdx]?.scale ?? 'x';
+	const positions = splits.map((split) =>
+		split == null ? null : u.valToPos(split, scaleKey),
+	);
+	const kept = splits.map((split) => split != null && isDecade(split));
+	const isClear = (index: number): boolean =>
+		kept.every(
+			(isKept, other) =>
+				!isKept ||
+				Math.abs((positions[other] ?? 0) - (positions[index] ?? 0)) >= space,
+		);
+	splits.forEach((split, index) => {
+		if (split != null && !kept[index] && isClear(index)) {
+			kept[index] = true;
+		}
+	});
+	return splits.map((split, index) => (kept[index] ? split : null));
+};

frontend/src/lib/uPlotV2/utils/quadtree.ts

@@ -0,0 +1,101 @@
+export interface QuadtreeRect {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+const MAX_OBJECTS = 10;
+const MAX_LEVELS = 4;
+
+/** Rect index for cursor hit-testing; items straddling quadrants are stored in each, so `get` may repeat them. */
+export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
+	private items: T[] = [];
+	private quadrants: Quadtree<T>[] | null = null;
+
+	constructor(
+		private readonly x: number,
+		private readonly y: number,
+		private readonly w: number,
+		private readonly h: number,
+		private readonly level = 0,
+	) {}
+
+	add(item: T): void {
+		if (this.quadrants) {
+			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
+			return;
+		}
+
+		this.items.push(item);
+
+		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
+			this.split();
+			const items = this.items;
+			this.items = [];
+			for (const existing of items) {
+				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
+			}
+		}
+	}
+
+	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
+	get(
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		visit: (item: T) => void,
+	): void {
+		for (const item of this.items) {
+			visit(item);
+		}
+		if (this.quadrants) {
+			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
+				quadrant.get(x, y, w, h, visit),
+			);
+		}
+	}
+
+	private split(): void {
+		const w = this.w / 2;
+		const h = this.h / 2;
+		const level = this.level + 1;
+		// North-east, north-west, south-west, south-east.
+		this.quadrants = [
+			new Quadtree<T>(this.x + w, this.y, w, h, level),
+			new Quadtree<T>(this.x, this.y, w, h, level),
+			new Quadtree<T>(this.x, this.y + h, w, h, level),
+			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
+		];
+	}
+
+	private forEachQuadrant(
+		rect: QuadtreeRect,
+		visit: (quadrant: Quadtree<T>) => void,
+	): void {
+		if (!this.quadrants) {
+			return;
+		}
+		const midX = this.x + this.w / 2;
+		const midY = this.y + this.h / 2;
+		const startsNorth = rect.y < midY;
+		const startsWest = rect.x < midX;
+		// Inclusive, so a zero-size query on a midline still reaches a quadrant.
+		const endsEast = rect.x + rect.w >= midX;
+		const endsSouth = rect.y + rect.h >= midY;
+
+		if (startsNorth && endsEast) {
+			visit(this.quadrants[0]);
+		}
+		if (startsWest && startsNorth) {
+			visit(this.quadrants[1]);
+		}
+		if (startsWest && endsSouth) {
+			visit(this.quadrants[2]);
+		}
+		if (endsEast && endsSouth) {
+			visit(this.quadrants[3]);
+		}
+	}
+}

frontend/src/lib/uPlotV2/utils/scale.ts

@@ -58,18 +58,23 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
+export const DEFAULT_ASINH_THRESHOLD = 1;
+
 /**
- * Returns uPlot scale distribution options for the Y axis.
- * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for a value axis.
+ * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
+ * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
+	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
+	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -77,6 +82,14 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
+	if (distr === DistributionType.SymmetricLog) {
+		return {
+			distr: 4,
+			log: resolvedLogBase,
+			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
+		};
+	}
+
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -37,6 +37,7 @@ export default function ChartWrapper({
 	syncKey,
 	syncFilterMode,
 	onDestroy = noop,
+	plotRef,
 	children,
 	layoutChildren,
 	yAxisUnit,
@@ -123,6 +124,7 @@ export default function ChartWrapper({
 						height={chartHeight}
 						plotRef={(plot): void => {
 							plotInstanceRef.current = plot;
+							plotRef?.(plot);
 						}}
 						onDestroy={(plot: uPlot): void => {
 							plotInstanceRef.current = null;

frontend/src/lib/visualization/charts/ChartWrapper/__tests__/ChartWrapper.test.tsx

@@ -0,0 +1,45 @@
+import { render } from 'tests/test-utils';
+import type uPlot from 'uplot';
+
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+
+import ChartWrapper from '../ChartWrapper';
+
+const FAKE_PLOT = { id: 'plot' } as unknown as uPlot;
+
+jest.mock('lib/uPlotV2/components/UPlotChart/UPlotChart', () => ({
+	__esModule: true,
+	default: ({ plotRef }: { plotRef?: (plot: uPlot | null) => void }): null => {
+		plotRef?.(FAKE_PLOT);
+		return null;
+	},
+}));
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('ChartWrapper', () => {
+	it('hands the plot instance to the caller', () => {
+		const plotRef = jest.fn();
+		render(
+			<ChartWrapper
+				config={new UPlotConfigBuilder({ id: 'chart' })}
+				data={[[1], [2]]}
+				width={400}
+				height={300}
+				legendConfig={{ position: LegendPosition.BOTTOM }}
+				showLegend={false}
+				showTooltip={false}
+				plotRef={plotRef}
+			/>,
+		);
+
+		expect(plotRef).toHaveBeenCalledWith(FAKE_PLOT);
+	});
+});

frontend/src/lib/visualization/charts/Scatter/Scatter.stories.mocks.ts

@@ -0,0 +1,104 @@
+import type { Threshold } from 'lib/uPlotV2/hooks/types';
+
+import { ScatterAxisScale, type ScatterSeries } from './types';
+
+const SERVICES = [
+	'frontend',
+	'cart',
+	'checkout',
+	'payment',
+	'shipping',
+	'currency',
+	'email',
+	'recommendation',
+	'ads',
+	'product-catalog',
+];
+
+export type Shape = 'spread' | 'single' | 'sameX';
+
+export interface ScatterStoryProps {
+	groups: number;
+	pointsPerGroup: number;
+	/** Adds an error-count size column. */
+	sized: boolean;
+	xScale: ScatterAxisScale;
+	yScale: ScatterAxisScale;
+	/** Zeroes a share of y values, which forces the symmetric log. */
+	withZeros: boolean;
+	shape: Shape;
+	thresholds: boolean;
+	pointSize: number;
+	/** 0–1. */
+	fillOpacity: number;
+	width: number;
+	height: number;
+}
+
+/** Deterministic, so a story renders the same points on every run. */
+function createRng(seed: number): () => number {
+	let state = seed >>> 0;
+	return (): number => {
+		state = (state * 1664525 + 1013904223) >>> 0;
+		return state / 2 ** 32;
+	};
+}
+
+export function buildSeries({
+	groups,
+	pointsPerGroup,
+	sized,
+	withZeros,
+	shape,
+}: ScatterStoryProps): ScatterSeries[] {
+	const rng = createRng(42);
+	return Array.from({ length: groups }, (_, groupIndex) => {
+		const label = SERVICES[groupIndex % SERVICES.length];
+		// Each service sits in its own throughput/latency band, so groups are telling
+		// apart rather than one cloud.
+		const baseThroughput = 20 * 2 ** (groupIndex % 5);
+		const baseLatency = 40 + 60 * (groupIndex % 4);
+
+		const count = shape === 'single' ? 1 : pointsPerGroup;
+		const xs: number[] = [];
+		const ys: number[] = [];
+		const sizes: Array<number | null> = [];
+
+		for (let i = 0; i < count; i++) {
+			const throughput =
+				shape === 'sameX' ? baseThroughput : baseThroughput * (0.5 + rng() * 1.5);
+			// Latency grows with load, plus noise; the odd outlier keeps the axis honest.
+			const outlier = rng() < 0.03 ? 4 + rng() * 6 : 1;
+			let latency =
+				baseLatency *
+				(0.8 + (throughput / baseThroughput) * 0.4 + rng() * 0.3) *
+				outlier;
+			if (withZeros && rng() < 0.2) {
+				latency = 0;
+			}
+			xs.push(Number(throughput.toFixed(2)));
+			ys.push(Number(latency.toFixed(2)));
+			sizes.push(rng() < 0.1 ? null : Math.round(rng() * rng() * 500));
+		}
+
+		return sized ? { label, xs, ys, sizes } : { label, xs, ys };
+	});
+}
+
+export const Y_THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 300,
+		thresholdUnit: 'ms',
+		thresholdColor: '#E5484D',
+		thresholdLabel: 'p99 SLO',
+	},
+];
+
+export const X_THRESHOLDS: Threshold[] = [
+	{
+		thresholdValue: 60,
+		thresholdUnit: 'reqps',
+		thresholdColor: '#3E63DD',
+		thresholdLabel: 'Capacity',
+	},
+];

frontend/src/lib/visualization/charts/Scatter/Scatter.stories.tsx

@@ -0,0 +1,160 @@
+import { useMemo } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import type { ScatterPointLabel } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
+
+import Scatter from './Scatter';
+import {
+	buildSeries,
+	type ScatterStoryProps,
+	X_THRESHOLDS,
+	Y_THRESHOLDS,
+} from './Scatter.stories.mocks';
+import { ScatterAxisScale } from './types';
+import { buildScatterConfig, prepareScatterChartData } from './utils';
+
+function ScatterStory(props: ScatterStoryProps): JSX.Element {
+	const {
+		xScale,
+		yScale,
+		sized,
+		thresholds,
+		pointSize,
+		fillOpacity,
+		width,
+		height,
+	} = props;
+	const isDarkMode = useIsDarkMode();
+
+	const series = useMemo(() => buildSeries(props), [props]);
+
+	const config = useMemo(
+		() =>
+			buildScatterConfig({
+				id: 'scatter-story',
+				series,
+				isDarkMode,
+				x: {
+					unit: 'reqps',
+					scale: xScale,
+					thresholds: thresholds ? X_THRESHOLDS : undefined,
+				},
+				y: {
+					unit: 'ms',
+					scale: yScale,
+					thresholds: thresholds ? Y_THRESHOLDS : undefined,
+				},
+				pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
+				fillOpacity,
+			}),
+		[series, isDarkMode, xScale, yScale, pointSize, fillOpacity, thresholds],
+	);
+
+	const data = useMemo(() => prepareScatterChartData(series), [series]);
+
+	const resolvePointGroupValues = (
+		seriesIndex: number,
+		dataIndex: number,
+	): ScatterPointLabel[] => [
+		{ key: 'service.name', value: series[seriesIndex - 1]?.label ?? '' },
+		{
+			key: 'k8s.pod.name',
+			value: `pod-${dataIndex.toString().padStart(3, '0')}`,
+		},
+	];
+
+	return (
+		<div style={{ width, padding: 16 }}>
+			<Scatter
+				config={config}
+				data={data}
+				width={width}
+				height={height}
+				legendConfig={{ position: LegendPosition.BOTTOM }}
+				channels={{
+					x: { label: 'Throughput', unit: 'reqps' },
+					y: { label: 'p99 latency', unit: 'ms' },
+					...(sized && { size: { label: 'Errors', unit: 'short' } }),
+				}}
+				resolvePointGroupValues={resolvePointGroupValues}
+				canPinTooltip
+			/>
+		</div>
+	);
+}
+
+const meta = {
+	title: 'Charts/Scatter',
+	component: ScatterStory,
+	parameters: { layout: 'padded' },
+	args: {
+		groups: 1,
+		pointsPerGroup: 10,
+		sized: false,
+		xScale: ScatterAxisScale.Linear,
+		yScale: ScatterAxisScale.Linear,
+		withZeros: false,
+		shape: 'spread',
+		thresholds: false,
+		pointSize: 6,
+		fillOpacity: 0.7,
+		width: 800,
+		height: 420,
+	},
+	argTypes: {
+		shape: { control: 'radio', options: ['spread', 'single', 'sameX'] },
+		xScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
+		yScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
+		fillOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
+		pointSize: { control: { type: 'range', min: 2, max: 16, step: 1 } },
+	},
+} satisfies Meta<ScatterStoryProps>;
+
+export default meta;
+
+type Story = StoryObj<ScatterStoryProps>;
+
+/** One service, ten points: axes formatted with units, hover picks the right point. */
+export const Basic: Story = {};
+
+/** Five services, one legend entry each; toggling a row hides its points. */
+export const Grouped: Story = {
+	args: { groups: 5, pointsPerGroup: 40 },
+};
+
+/** Error count as disc area, between the configured min and max diameters. */
+export const Sized: Story = {
+	args: { groups: 5, pointsPerGroup: 40, sized: true, pointSize: 5 },
+};
+
+/** Log x; a fifth of the latencies are 0, so y falls back to the symmetric log. */
+export const LogAxes: Story = {
+	args: {
+		groups: 5,
+		pointsPerGroup: 60,
+		xScale: ScatterAxisScale.Log,
+		yScale: ScatterAxisScale.Log,
+		withZeros: true,
+	},
+};
+
+/** A single point still gets a padded range rather than an empty plot. */
+export const SinglePoint: Story = {
+	args: { shape: 'single' },
+};
+
+/** Fifty points sharing one x collide on nothing: no shared x array to align. */
+export const SameX: Story = {
+	args: { groups: 3, pointsPerGroup: 50, shape: 'sameX' },
+};
+
+/** Labelled lines on both axes; each scale stretches to include its line. */
+export const Thresholds: Story = {
+	args: { groups: 3, pointsPerGroup: 40, thresholds: true },
+};
+
+/** Perf harness: raise `pointsPerGroup` and read the draw time under the chart. */
+export const Dense: Story = {
+	args: { groups: 5, pointsPerGroup: 1000, pointSize: 4, fillOpacity: 0.5 },
+};