fix(api): flatten v2 error envelope in ErrorResponseHandler

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

@@ -1,45 +1,54 @@
 ---
 name: playwright-test-generator
-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
+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
 model: sonnet
 color: blue
 ---
 
-You are the Playwright Test Generator for the SigNoz frontend. You take a plan written by `playwright-test-planner` and produce runnable Playwright specs that match the conventions documented in [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) and [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md). **Read both first.** Adhere to them.
+You are the Playwright Test Generator for the SigNoz frontend. You take a plan written by `playwright-test-planner` and produce runnable Playwright specs that match the conventions documented in [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md). **Read that doc first.** Adhere to it.
 
 # 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/search.spec.ts`, not `dashboards/list/dashboards-list-search.spec.ts`.
-- **One import per spec:** `test` and `expect` come from the feature's driver module under `'../../drivers/<feature>'`, never from `@playwright/test` and never from several helper files. Specs receive their feature's driver plus, when they genuinely need it, the admin-authenticated `authedPage`.
+- **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).
   ```ts
-  import { expect, PATH, test } from '../../drivers/routing';
+  import { test, expect } from '../../fixtures/auth';
 
-  test('TC-09 RouteTab switches the url', async ({ routing }) => {
-    await routing.goto(PATH.metricsSummary);
-    await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
+  test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
+    await page.goto('/alerts');
+    await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
   });
   ```
-  - 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.
-  - 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.
-- **Seeds are layers on the feature's `test`.** A spec destructures the seed it needs (`alertList`, `ownedRules`, `resolvedHistory` for alerts) instead of importing a fixtures module. A new seed goes in the feature's driver directory: `seeded()` for read-only data shared by a worker, a test-scoped layer for anything a test mutates.
+- **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.
+  - `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
+  // Alert list tests - need rules, no history
+  import { test, expect } from '../../../fixtures/alerts/alert-rules';
+  
+  // Alert history tests - need evaluated history rows
+  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, and scope every assertion to names the spec seeded. Pick the scope per the Seeding table in [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md): test scope (a test-scoped layer, or `try / finally` through the driver) for mutations, worker scope (`seeded()`) for read-only data, suite `beforeAll` for a dataset only one file uses.
-- **Drive everything through the feature's driver** in `tests/e2e/drivers/`. A spec that reaches for `page.locator(...)` or `page.getByTestId(...)` is missing a driver method — add the method instead. `onAdminPage(browser, …)` from `drivers/kit.ts` is what suite hooks use, because `authedPage` is test-scoped and not visible to them.
-- **Seed through the kit when the UI flow is not under test.** Control-plane objects go through the feature driver (`dashboards.seed`, `alerts.seed.threshold`), which uses `apiDriver(page)` from `drivers/api.ts`; telemetry goes to the seeder. `page.request.*` does **not** carry the token, so never seed with it.
-- **Golden telemetry is pre-seeded.** `bootstrap/global.setup.ts` loads logs, traces and metrics over the last 6h (constants in `GOLDEN`, `drivers/dashboard-spec.ts`). Query within ≤ 6h and assert structure (series, rows, request payload), never exact counts.
-- **`query_range` mocks** in [`drivers/query-range-mock.ts`](../../tests/e2e/drivers/query-range-mock.ts) are for error / no-data / warning / loading states only; install before `goto`.
-- **Reusable payloads live in [tests/e2e/testdata/](../../tests/e2e/testdata/)** (traces and logs POSTed to the seeder, `dashboards/panels.ts`). Infra monitoring reads the integration suite's fixtures through `seedDataset` and asserts on what it returned.
-- **Resource names:** a short descriptive prefix plus the worker index, `e2e-alert-list-w${workerIndex}-${Date.now()}`. Six workers share one stack, so a name without the stamp collides.
+- **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.
 - **Serial mode** when tests in a file mutate the same list page:
   ```ts
   test.describe.configure({ mode: 'serial' });
   ```
-- **Locate by testid, in the driver.** A missing testid is added to the product source. Role, label and CSS lookups are a stopgap; antd internals (`.ant-select-dropdown`, in `antd.ts`) are the exception.
-- **A driver method is navigation or a locator, never a scenario.** A method that exists for one spec belongs in that spec.
-- **No `test.slow()` in drivers.** It compounds when called in a loop; use `allowFor(floor)` from `drivers/kit.ts`.
-- **Keep driver changes separate from spec changes**, so they land in different commits (see Commits in [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md)).
+- **Locator priority** (matches Playwright best practice):
+  1. `data-testid` (preferred — these are stable, app-author-provided handles)
+  2. `getByRole('button', { name: 'Submit' })`
+  3. `getByLabel('Email')`, `getByPlaceholder(...)`, `getByText(...)`
+  4. CSS / `locator('.ant-…')` — last resort
 - **Never commit `test.only`.** CI runs with `forbidOnly: true`.
 - **No `page.waitForTimeout(ms)`** — always prefer `await expect(locator).toBe…()`.
 
@@ -55,14 +64,13 @@ 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/search.spec.ts`, not `dashboards/list/dashboards-list-search.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.spec.ts`, not `dashboards/dashboards-list.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 `../../drivers/<feature>`. **Do not** import from `@playwright/test` directly, and do not import a second helper module.
-   - **Cleanup** comes from the seed layer or the driver's `dispose`. Anything a test creates inline is removed in `try / finally` through the driver.
-   - **Move recorded locators and waits into the driver.** The log gives raw `page.*` calls; the spec should read as driver actions.
+   - **Imports** from `../../fixtures/auth`. **Do not** import from `@playwright/test` directly.
+   - **Try / finally** cleanup using the API (delete the resources you seeded).
 
 # Quality bar — what to write, what to skip
 
@@ -80,57 +88,81 @@ When you cut, merge, or renumber TCs vs the plan, note it in your final summary.
 For a plan section:
 
 ```markdown
-### 1. Search
+### 1. Page Load
 
-#### 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).
+#### TC-01 page chrome and core controls render
 **Steps:**
-1. Open the dashboards list.
-2. Search `name CONTAINS '<name>'`.
-**Expected:** the `query` URL param carries the search; only the seeded dashboard is listed.
+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.
 ```
 
-You produce:
+You produce (suite-level shape, preferred for files with multiple scenarios):
 
 ```ts
-// tests/e2e/tests/dashboards/list/search.spec.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';
 import {
-  expect,
-  listDashboard,
-  nameContains,
-  test,
-  uniqueName,
-} from '../../../drivers/dashboard-list';
+  authToken,
+  createDashboardViaApi,
+  deleteDashboardViaApi,
+  gotoDashboardsList,
+} from '../../helpers/dashboards';
 
-test.describe('Dashboards — list search', () => {
-  test('TC-01 searching by name writes the query to the URL and lists the match', async ({
+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 ({
     authedPage: page,
-    dashboards,
-    dashboardList,
   }) => {
-    const name = uniqueName('search');
-    await dashboards.seed(listDashboard(name));
-    await dashboardList.open();
+    await seed(page, 'list-chrome');
 
-    await dashboardList.runSearch(nameContains(name));
+    await gotoDashboardsList(page);
 
-    expect(new URL(page.url()).searchParams.get('query')).toBe(
-      nameContains(name),
-    );
-    await expect(dashboardList.rows()).toHaveText([name]);
+    await expect(page).toHaveTitle('SigNoz | All Dashboards');
+    await expect(
+      page.getByRole('heading', { name: 'Dashboards', level: 1 }),
+    ).toBeVisible();
   });
 });
 ```
 
-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. If a step needs an element the driver does not expose, add a method to the driver; do not reach for `page.getByTestId(...)` in the spec. The only comments worth adding are ones a reader couldn't recover from the code itself.
+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.
 
 # 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, inside the driver action.
+- **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.
 - **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 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.
+- **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.
 
 # Quality bar
 

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

@@ -1,12 +1,12 @@
 ---
 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/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>
+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>
 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
 ---
 
-You are the Playwright Test Healer for the SigNoz E2E suite. You debug and fix red specs with a methodical approach. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) and [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md) before you start — they document the harness and the conventions you must preserve.
+You are the Playwright Test Healer for the SigNoz E2E suite. You debug and fix red specs with a methodical approach. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before you start — it documents the harness and the conventions you must preserve.
 
 # Preconditions
 
@@ -29,9 +29,9 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 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 through its seed layer or driver (a driver's `dispose` cleans up), scopes its assertions to the names it seeded (with the worker index), and cleans up. 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.
+   - **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.
    - **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 driver first, the spec second. A driver change must keep every other spec importing it green, so run them too. Preserve TC-NN titles, the feature's `test` import, the spec's 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. 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.
 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,20 +41,18 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 
 # Repo-specific signals
 
-- **Fix it in the driver, not in the spec.** Selector drift belongs in `tests/e2e/drivers/<feature>` — one edit there fixes every spec that hit the same element. A `page.locator(...)` added to a spec body is a regression, not a fix.
+- **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.
 - **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. Add `scrollIntoViewIfNeeded` before the click, in the driver action (`dashboardList.openRowMenu(name)`).
+- **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.
 - **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 `dashboards.seed(...)`.
-- **Auth.** `tests/e2e/drivers/auth.ts` logs in once per worker and caches `storageState` (localStorage with `AUTH_TOKEN`). For API-driven seeding and cleanup use `apiDriver(page)` from `drivers/api.ts`, which attaches the header for you. Never re-implement login.
-- **Seeds.** Feature seeds are layers on the feature's `test`, e.g. `alertList`, `ownedRules` and `resolvedHistory` in `drivers/alerts/seeds.ts`. When a test fails on missing data, check which seed it destructures and whether it scopes to that seed's names.
-- **Timeouts.** Never add `test.slow()` to a driver: it triples the remaining budget per call and compounds in loops. Use `allowFor(floor)` from `drivers/kit.ts`. Budgets and their measurements are in `tests/e2e/docs/flake-notes.md`.
-- **CI-only failures.** Reproduce with `STRESS=1 CI=1 pnpm test <path>` from `tests/e2e/` before calling it a product bug.
-- **Commits.** Driver fixes and spec fixes go in separate commits (see Commits in `tests/e2e/AGENTS.md`).
+- **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.
+- **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.
-- **Type-check.** After edits, run `pnpm typecheck` and `pnpm lint` from `tests/e2e/`.
+- **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.
 
 # Hard rules
 

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

@@ -6,7 +6,7 @@ model: sonnet
 color: green
 ---
 
-You are an expert E2E test planner for the SigNoz frontend, working inside the SigNoz monorepo. Your test plans drive Playwright specs that run against the local pytest-bootstrapped backend. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) and [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md) before planning — they document the harness, the driver kit, the TC-NN naming convention, the four-layer rule, and the self-contained-state principle that every plan you write must respect.
+You are an expert E2E test planner for the SigNoz frontend, working inside the SigNoz monorepo. Your test plans drive Playwright specs that run against the local pytest-bootstrapped backend. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before planning — it documents the harness, the `authedPage` fixture, the TC-NN naming convention, and the self-contained-state principle that every plan you write must respect.
 
 You will:
 
@@ -16,71 +16,35 @@ You will:
      - Interactive elements and their `data-testid` attributes (preferred locators)
      - Conditional rendering (empty states, loading, error, role-gated UI)
      - URL query-param state (search, sort, pagination)
-     - API endpoints the UI calls — these tell the generator which seed and cleanup calls the driver needs
-   - Seeding goes through the feature driver (`apiDriver` underneath) for control-plane objects and through the seeder for telemetry, never through `page.request.*`. Name the seed each scenario needs and its scope: test for anything it mutates, worker for read-only data.
+     - API endpoints the UI calls — these inform what cleanup endpoints exist for `try/finally` teardown
+   - 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. **Work out which layer each scenario belongs to — before planning it.**
+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.
 
-   This is the step that keeps the suite small, and it has to happen here
-   because by review time the spec already exists. Read
-   [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md) for the full rule. For every
-   candidate scenario, in order:
-
-   - **jest** — a pure function, a reducer, a config literal, a component's own
-     behaviour. Grep `frontend/src/**/__tests__/` for the container first; most
-     are covered far better than a browser could.
-   - **Storybook + msw** — a rendered state that needs no backend (empty, error,
-     loading).
-   - **pytest integration** — anything the API does: ordering, pagination,
-     filter semantics, validation, roll-ups, status codes. **Grep
-     `tests/integration/` and name the test you found.** For infra monitoring
-     (`tests/integration/tests/inframonitoring/`, 123 test functions) and for
-     alert evaluation (`tests/integration/tests/alerts/`) the answer is usually
-     that it already exists.
-   - **E2E** — only when a real response has to reach a real DOM: URL and
-     history, a write path that must persist, cross-page navigation, one seeded
-     proof per surface.
-
-   The plan must say, per scenario, why it is not one of the cheaper three. A
-   scenario that cannot answer that does not go in the plan.
-
-3. **Check what's already wired up.**
-   - [tests/e2e/drivers/](../../tests/e2e/drivers/) holds one driver module per
-     feature plus the shared ones (`tanstack`, `querysearch`, `antd`, `api`,
-     `storage`, `console`). Reference driver methods by name in the steps so the
-     generator reuses them rather than reinventing a locator.
-   - If a step needs something the driver does not expose, say so — the
-     generator adds a driver method, not a `page.locator` in the spec.
-   - **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 `drivers/dashboard-spec.ts`). Plans that query data use a
-     window ≤ 6h and assert structure, not exact counts.
-   - [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.
-
-4. **Navigate and explore**
+3. **Navigate and explore**
    - Invoke `planner_setup_page` once before any other browser tool.
    - Use `browser_snapshot` to read the page's accessibility tree. **Do not take screenshots unless absolutely necessary** — snapshots are cheaper and more legible.
    - Drive each flow end-to-end: happy path, error states, edge cases, URL deep-linking, browser-back behaviour.
 
-5. **Design comprehensive scenarios**
+4. **Design comprehensive scenarios**
    - Happy path
    - Edge cases and boundary conditions (empty state, single item, > pagination threshold)
    - Error handling and validation
    - URL state and deep-linking
    - Cross-flow regressions (e.g. searching while paginated)
 
-6. **Structure the test plan**
+5. **Structure the test plan**
 
    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.** (only the golden telemetry), so plans must seed their own resources).
+   - 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).
    - Step-by-step user actions.
    - Expected outcomes per step.
    - Cleanup notes (what gets created and how to remove it — usually via API).
 
-7. **Save the plan and the checklist**
+6. **Save the plan and the checklist**
    - **Plan:** `tests/e2e/specs/<feature>/<feature>-test-plan.md`. **`tests/e2e/specs/` is gitignored** — plans are scratch artifacts: working input for the generator, regenerable, not committed. Don't treat them as durable documentation. The committed tests are the source of truth.
    - **Checklist:** `tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`. A manual-verification runbook that mirrors the TC list one-to-one (one checkbox per TC) for QA hand-off. Same gitignore, same scratch status.
    - **The checklist must stay in sync with the TCs.** When you regenerate the plan, regenerate the checklist alongside it — they share TC IDs and titles, and the checklist ordering must match. If the existing spec under `tests/e2e/tests/<feature>/` has more / fewer / different TCs than the prior plan, the spec is authoritative: re-derive plan and checklist from it.
@@ -100,7 +64,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 seeds its own through the `dashboards` driver (`dashboards.seed(...)`, deleted when the test ends).
+**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.
 
 **Known limitations:**
 - Ascending sort is not yet implemented — repeated clicks on the sort button keep `order=descend`.
@@ -123,7 +87,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:** none in the spec — the `dashboards` driver deletes what it seeded.
+**Cleanup:** delete the seeded dashboard via `DELETE /api/v1/dashboards/<id>`.
 
 #### TC-02 ...
 </example-spec>
@@ -131,8 +95,8 @@ 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, and assert only on names it seeded. **Never depend on data another spec file created.** Files run in parallel. Pick the seed scope from the Seeding table in [tests/e2e/AGENTS.md](../../tests/e2e/AGENTS.md); a driver's self-cleaning seed (`dispose`) or a worker-scoped `seeded(...)` layer covers most cases.
-- Note the `data-testid` for every element a step touches. Where none exists, say so: the generator adds it to the product rather than falling back to roles or CSS (antd internals aside).
+- 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.
+- 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.
 - **Smoke-checks aren't TCs.** "Heading is visible" belongs as the first assertion inside a real scenario, not as its own numbered case.

.claude/skills/signoz-page-story/references/controls.md

@@ -46,9 +46,9 @@ One endpoint feeding several widgets stays one handler that reads the request. `
 
 ```ts
 rest.get(
-	'http://localhost/api/v2/saved_views',
+	'http://localhost/api/v1/explorer/views',
 	response.json((req) =>
-		savedViews(values.savedViews, req.url.searchParams.get('source') ?? 'logs'),
+		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
 	),
 ),
 ```

.claude/skills/signoz-page-story/references/discovery.md

@@ -14,7 +14,7 @@ Grep recipes, run against the page's directories:
 | endpoint URLs | the api module's `axios.get\|post` |
 | endpoint URLs behind a generated hook | the hook lives in `src/api/generated/services/<name>/index.ts` and the URL only appears in the fetcher body: `rg 'url: \`' src/api/generated/services/<name>/` |
 | url state | `useUrlQuery\|useUrlQueryData\|useUrlSearchState\|useQueryState\|QueryParams\.` |
-| navigation | `useSafeNavigate\|useAppNavigate\|navigate\|<AppLink` |
+| navigation | `useSafeNavigate\|history.push\|<Link` |
 | permissions | `useAuthZ\|AuthZGuard\|AuthZButton\|hasEditPermission\|routePermission` |
 | flags and prefs | `useFeatureFlag\|FeatureKeys\.\|USER_PREFERENCES\.\|userPreferences` |
 | empty and error branches | `isLoading\|isError\|isFetching\|length === 0\|!data` |

.gitattributes

@@ -2,9 +2,3 @@
 *.stories.mocks.tsx linguist-generated=true
 **/__story_mockdata__/** linguist-generated=true
 tests/e2e/drivers/** linguist-generated=true
-
-# Transcribed E2E data: seeded telemetry, golden payloads and the entity
-# datasets. Regenerated from the seeder rather than hand-edited, and re-derived
-# by the specs that read them, so they are collapsed in review.
-tests/e2e/testdata/** linguist-generated=true
-tests/e2e/**/__generated__/** linguist-generated=true

.github/workflows/e2eci.yaml

@@ -2,9 +2,6 @@ name: e2eci
 
 on:
   pull_request:
-  merge_group:
-    types:
-      - checks_requested
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -16,12 +13,8 @@ jobs:
     outputs:
       e2e: ${{ steps.changes.outputs.e2e }}
     steps:
-      - name: merge-queue-pass
-        if: github.event_name == 'merge_group'
-        run: echo "::notice::Merge queue run. E2E already gated the PR, so the required e2e check auto-passes."
       - name: changes
         id: changes
-        if: github.event_name == 'pull_request'
         env:
           GH_TOKEN: ${{ github.token }}
           PR_NUMBER: ${{ github.event.pull_request.number }}

.github/workflows/integrationci.yaml

@@ -106,8 +106,8 @@ jobs:
       - name: webdriver
         if: matrix.suite == 'callbackauthn' || matrix.suite == 'basepath'
         run: |
-          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo gpg --batch --yes --dearmor -o /usr/share/keyrings/google-chrome.gpg
-          echo "deb [signed-by=/usr/share/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/google-chrome.list
+          wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+          echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/google-chrome.list
           sudo apt-get update -qqy
           sudo apt-get -qqy install google-chrome-stable
           CHROME_VERSION=$(google-chrome-stable --version)

.mockery.yml

@@ -16,14 +16,6 @@ packages:
       filename: "maintenance.go"
       structname: 'Mock{{.InterfaceName}}'
       pkgname: '{{.SrcPackageName}}test'
-  github.com/SigNoz/signoz/pkg/types/telemetrytypes:
-    interfaces:
-      SchemaMetadataStore:
-    config:
-      dir: '{{.InterfaceDir}}/telemetrytypestest'
-      filename: "schema_metadata_store.go"
-      structname: 'Mock{{.InterfaceName}}'
-      pkgname: '{{.SrcPackageName}}test'
   github.com/SigNoz/signoz/pkg/tokenizer:
     config:
       all: true

conf/example.yaml

@@ -178,9 +178,6 @@ querier:
   # range with padding to include slightly delayed log exports. Logs only; set
   # to 0 to disable.
   log_trace_id_window_padding: 5m
-  schemametadatastore:
-    # How long found schema metadata stays cached; 0 caches it for the life of the process.
-    cache_ttl: 0s
 
 ##################### TelemetryStore #####################
 telemetrystore:

docs/api/openapi.yml

@@ -4224,13 +4224,6 @@ components:
           nullable: true
           type: number
       type: object
-    DashboardtypesAxisScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -5257,7 +5250,6 @@ 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'
@@ -5273,7 +5265,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -5287,7 +5278,6 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
-      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -5394,21 +5384,6 @@ 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:
@@ -5519,16 +5494,6 @@ 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:
@@ -5783,161 +5748,6 @@ 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
@@ -6104,11 +5914,6 @@ components:
       - value
       - name
       type: object
-    DashboardtypesThresholdAxis:
-      enum:
-      - x
-      - "y"
-      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -11584,7 +11389,8 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec.
+          description: The evaluation window, as a kind and spec. Required when schemaVersion
+            is v2alpha1; derived from evalWindow and frequency for v1.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11600,7 +11406,8 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour.
+          description: Grouping, re-notification and routing behaviour. Required when
+            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11613,30 +11420,26 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
-            queries and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder queries
+            and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: The rule payload schema.
-          enum:
-          - v2alpha1
+          description: 'The rule payload schema: v1 (the default when omitted) uses
+            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
+            and notificationSettings.'
           type: string
         source:
-          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
         version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
+          description: The query payload version. Only v5 is accepted and it is filled
+            in when omitted.
           type: string
       required:
       - alert
       - alertType
       - ruleType
       - condition
-      - evaluation
-      - schemaVersion
-      - notificationSettings
       type: object
     RuletypesPostableRuleView:
       properties:
@@ -11725,7 +11528,8 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec.
+          description: The evaluation window, as a kind and spec. Required when schemaVersion
+            is v2alpha1; derived from evalWindow and frequency for v1.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11744,7 +11548,8 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour.
+          description: Grouping, re-notification and routing behaviour. Required when
+            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11757,15 +11562,14 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
-            queries and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder queries
+            and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: The rule payload schema.
-          enum:
-          - v2alpha1
+          description: 'The rule payload schema: v1 (the default when omitted) uses
+            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
+            and notificationSettings.'
           type: string
         source:
-          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
@@ -11780,8 +11584,8 @@ components:
         updatedBy:
           type: string
         version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
+          description: The query payload version. Only v5 is accepted and it is filled
+            in when omitted.
           type: string
       required:
       - id
@@ -11790,9 +11594,6 @@ components:
       - alertType
       - ruleType
       - condition
-      - evaluation
-      - schemaVersion
-      - notificationSettings
       type: object
     RuletypesRuleCondition:
       properties:
@@ -11842,7 +11643,8 @@ components:
             against, hourly, daily or weekly.'
         selectedQueryName:
           description: The name of the query whose result is evaluated, such as A
-            or F1. Must match a query in compositeQuery.
+            or F1. Must match a query in compositeQuery. When omitted, F1 is used
+            if present, otherwise the enabled query with the highest name.
           type: string
         target:
           description: 'schemaVersion v1 only: the value compared against, in targetUnit.
@@ -11858,11 +11660,10 @@ components:
         thresholds:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleThresholdData'
-          description: The thresholds to evaluate, as a kind and spec.
+          description: The thresholds to evaluate, as a kind and spec. Required when
+            schemaVersion is v2alpha1; derived from op, target and matchType for v1.
       required:
       - compositeQuery
-      - selectedQueryName
-      - thresholds
       type: object
     RuletypesRuleThresholdData:
       discriminator:
@@ -12326,8 +12127,6 @@ components:
           additionalProperties:
             type: string
           type: object
-        scope:
-          $ref: '#/components/schemas/SpantypesScope'
         spanId:
           type: string
         timestamp:
@@ -12344,7 +12143,6 @@ components:
       - event
       - attributes
       - resource
-      - scope
       type: object
     SpantypesGettableFlamegraphTrace:
       properties:
@@ -12585,16 +12383,6 @@ components:
           nullable: true
           type: array
       type: object
-    SpantypesScope:
-      properties:
-        attributes:
-          additionalProperties: {}
-          type: object
-        name:
-          type: string
-        version:
-          type: string
-      type: object
     SpantypesSpanAggregation:
       properties:
         aggregation:
@@ -12964,8 +12752,6 @@ components:
           type: object
         response_status_code:
           type: string
-        scope:
-          $ref: '#/components/schemas/SpantypesScope'
         span_id:
           type: string
         status_code:
@@ -15274,9 +15060,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - planned-maintenance:list
+        - VIEWER
       - tokenizer:
-        - planned-maintenance:list
+        - VIEWER
       summary: List downtime schedules
       tags:
       - downtimeschedules
@@ -15331,13 +15117,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - planned-maintenance:create
-        - planned-maintenance:attach
-        - rule:attach
+        - EDITOR
       - tokenizer:
-        - planned-maintenance:create
-        - planned-maintenance:attach
-        - rule:attach
+        - EDITOR
       summary: Create downtime schedule
       tags:
       - downtimeschedules
@@ -15382,9 +15164,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - planned-maintenance:delete
+        - EDITOR
       - tokenizer:
-        - planned-maintenance:delete
+        - EDITOR
       summary: Delete downtime schedule
       tags:
       - downtimeschedules
@@ -15440,9 +15222,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - planned-maintenance:read
+        - VIEWER
       - tokenizer:
-        - planned-maintenance:read
+        - VIEWER
       summary: Get downtime schedule by ID
       tags:
       - downtimeschedules
@@ -15497,17 +15279,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - planned-maintenance:update
-        - planned-maintenance:attach
-        - planned-maintenance:detach
-        - rule:attach
-        - rule:detach
+        - EDITOR
       - tokenizer:
-        - planned-maintenance:update
-        - planned-maintenance:attach
-        - planned-maintenance:detach
-        - rule:attach
-        - rule:detach
+        - EDITOR
       summary: Update downtime schedule
       tags:
       - downtimeschedules
@@ -16918,9 +16692,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - route-policy:list
+        - VIEWER
       - tokenizer:
-        - route-policy:list
+        - VIEWER
       summary: List route policies
       tags:
       - routepolicies
@@ -16975,13 +16749,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - route-policy:create
-        - route-policy:attach
-        - notification-channel:attach
+        - ADMIN
       - tokenizer:
-        - route-policy:create
-        - route-policy:attach
-        - notification-channel:attach
+        - ADMIN
       summary: Create route policy
       tags:
       - routepolicies
@@ -17026,9 +16796,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - route-policy:delete
+        - ADMIN
       - tokenizer:
-        - route-policy:delete
+        - ADMIN
       summary: Delete route policy
       tags:
       - routepolicies
@@ -17084,9 +16854,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - route-policy:read
+        - VIEWER
       - tokenizer:
-        - route-policy:read
+        - VIEWER
       summary: Get route policy by ID
       tags:
       - routepolicies
@@ -17153,17 +16923,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - route-policy:update
-        - route-policy:attach
-        - route-policy:detach
-        - notification-channel:attach
-        - notification-channel:detach
+        - ADMIN
       - tokenizer:
-        - route-policy:update
-        - route-policy:attach
-        - route-policy:detach
-        - notification-channel:attach
-        - notification-channel:detach
+        - ADMIN
       summary: Update route policy
       tags:
       - routepolicies
@@ -25153,9 +24915,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:list
+        - VIEWER
       - tokenizer:
-        - rule:list
+        - VIEWER
       summary: List rule saved views
       tags:
       - rules
@@ -25211,9 +24973,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:list
+        - VIEWER
       - tokenizer:
-        - rule:list
+        - VIEWER
       summary: Create rule saved view
       tags:
       - rules
@@ -25265,9 +25027,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:list
+        - VIEWER
       - tokenizer:
-        - rule:list
+        - VIEWER
       summary: Delete rule saved view
       tags:
       - rules
@@ -25334,9 +25096,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:list
+        - VIEWER
       - tokenizer:
-        - rule:list
+        - VIEWER
       summary: Update rule saved view
       tags:
       - rules
@@ -25550,13 +25312,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -25591,36 +25353,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -26516,13 +26264,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -26557,36 +26305,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -27383,13 +27117,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -27424,36 +27158,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -28956,13 +28676,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -28997,36 +28717,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -32264,132 +31970,6 @@ paths:
         content:
           application/json:
             examples:
-              ai_traces_raw:
-                summary: 'Raw: LLM, tool, and agent spans of one service''s AI traces
-                  with many tool calls'
-                value:
-                  compositeQuery:
-                    queries:
-                    - spec:
-                        filter:
-                          expression: service.name = 'ai-agent' AND trace.tool_call_count
-                            > 10
-                        limit: 100
-                        name: A
-                        order:
-                        - direction: desc
-                          key:
-                            fieldContext: span
-                            name: timestamp
-                        signal: traces
-                      type: builder_ai_query
-                  end: 1640998800000
-                  requestType: raw
-                  schemaVersion: v1
-                  start: 1640995200000
-              ai_traces_raw_select_fields:
-                summary: 'Raw: the same spans with the span name and gen_ai model,
-                  tool, and token fields selected'
-                value:
-                  compositeQuery:
-                    queries:
-                    - spec:
-                        filter:
-                          expression: service.name = 'ai-agent' AND trace.tool_call_count
-                            > 10
-                        limit: 100
-                        name: A
-                        order:
-                        - direction: desc
-                          key:
-                            fieldContext: span
-                            name: timestamp
-                        selectFields:
-                        - fieldContext: span
-                          name: name
-                        - fieldContext: attribute
-                          name: gen_ai.request.model
-                        - fieldContext: attribute
-                          name: gen_ai.tool.name
-                        - fieldContext: attribute
-                          name: gen_ai.usage.input_tokens
-                        - fieldContext: attribute
-                          name: gen_ai.usage.output_tokens
-                        signal: traces
-                      type: builder_ai_query
-                  end: 1640998800000
-                  requestType: raw
-                  schemaVersion: v1
-                  start: 1640995200000
-              ai_traces_scalar:
-                summary: 'Scalar: average per-trace AI cost by model'
-                value:
-                  compositeQuery:
-                    queries:
-                    - spec:
-                        aggregations:
-                        - expression: avg(trace.estimated_total_cost)
-                        groupBy:
-                        - fieldContext: attribute
-                          name: gen_ai.request.model
-                        limit: 10
-                        name: A
-                        order:
-                        - direction: desc
-                          key:
-                            name: avg(trace.estimated_total_cost)
-                        signal: traces
-                      type: builder_ai_query
-                  end: 1640998800000
-                  requestType: scalar
-                  schemaVersion: v1
-                  start: 1640995200000
-              ai_traces_time_series:
-                summary: 'Time series: per-trace AI cost by model'
-                value:
-                  compositeQuery:
-                    queries:
-                    - spec:
-                        aggregations:
-                        - expression: sum(trace.estimated_total_cost)
-                        groupBy:
-                        - fieldContext: attribute
-                          name: gen_ai.request.model
-                        limit: 10
-                        name: A
-                        order:
-                        - direction: desc
-                          key:
-                            name: sum(trace.estimated_total_cost)
-                        signal: traces
-                        stepInterval: 60s
-                      type: builder_ai_query
-                  end: 1640998800000
-                  requestType: time_series
-                  schemaVersion: v1
-                  start: 1640995200000
-              ai_traces_trace:
-                summary: 'Trace list: AI traces with many tool calls, most expensive
-                  first'
-                value:
-                  compositeQuery:
-                    queries:
-                    - spec:
-                        filter:
-                          expression: trace.tool_call_count > 10 AND trace.distinct_tool_count
-                            < 3
-                        limit: 10
-                        name: A
-                        order:
-                        - direction: desc
-                          key:
-                            name: trace.estimated_total_cost
-                        signal: traces
-                      type: builder_ai_query
-                  end: 1640998800000
-                  requestType: trace
-                  schemaVersion: v1
-                  start: 1640995200000
               clickhouse_sql_logs_raw:
                 summary: 'ClickHouse SQL: raw logs with resource filter'
                 value:

docs/contributing/go/spanmapper.md

@@ -17,7 +17,7 @@ Condition: `model`, `llm.input_messages` (OpenInference sets `llm.model_name` fr
 | `gen_ai.response.model`, last source for the request model | vLLM, which writes only the response model |
 | `ai.model.id`, `ai.model.provider`, `ai.response.model`, `ai.response.finishReason`, `ai.prompt.messages`, `ai.response.text`, `ai.response.toolCalls`, `ai.usage.promptTokens`, `ai.usage.completionTokens` | Vercel AI SDK v4, Mastra |
 | `ai.usage.inputTokens`, `ai.usage.outputTokens`, `ai.usage.cachedInputTokens`, `ai.usage.reasoningTokens` | Vercel AI SDK v5 |
-| `langfuse.observation.model.name`, `langfuse.observation.input`, `langfuse.observation.output`, `langfuse.observation.type`, `langfuse.session.id` | Langfuse SDK v3 (Python) and v4 (JS), LiteLLM `langfuse_otel` callback |
+| `langfuse.observation.model.name`, `langfuse.session.id` | Langfuse SDK v3 |
 | `session.id` | OpenInference, Langfuse, Claude Code |
 | `gen_ai.client.session_id` | opentelemetry-hooks runner (Cursor, Copilot, Claude Code hooks) |
 | `model`, `input_tokens`, `output_tokens`, `cache_read_tokens`, `cache_creation_tokens` | Claude Code `claude_code.llm_request` spans ([docs](https://code.claude.com/docs/en/monitoring-usage#span-attributes)) |

docs/contributing/tests/e2e.md

@@ -11,7 +11,7 @@ Before running E2E tests, ensure you have the following installed:
 - Python 3.13+
 - [uv](https://docs.astral.sh/uv/getting-started/installation/)
 - Docker (for containerized services)
-- Node 18+ and pnpm
+- Node 18+ and Yarn
 
 ### Initial Setup
 
@@ -24,8 +24,8 @@ uv sync
 2. Install Node deps and Playwright browsers:
 ```bash
 cd e2e
-pnpm install
-pnpm install:browsers   # one-time Playwright browser install
+yarn install
+yarn install:browsers   # one-time Playwright browser install
 ```
 
 ### Starting the Test Environment
@@ -84,118 +84,126 @@ tests/
     ├── playwright.config.ts   # loads .env + .env.local via dotenv
     ├── .env.example           # staging-mode template
     ├── .env.local             # generated by bootstrap/setup.py (gitignored)
-    ├── AGENTS.md              # read this before writing a spec
     ├── bootstrap/
     │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
-    ├── drivers/               # the driver kit: one module per feature
-    │   ├── kit.ts             # layer(), seeded(), the root `test`
-    │   ├── auth.ts            # login + per-worker storageState
-    │   ├── api.ts             # authed HTTP client + seeder URL
-    │   ├── tanstack.ts        # the shared table driver
-    │   ├── alerts/            # feature driver, seeds, payloads
-    │   └── infra/             # feature driver, seeds, __generated__/datasets.ts
-    ├── docs/flake-notes.md    # measurements and timeout budgets
-    ├── testdata/              # static data files (marked generated)
-    ├── tests/                 # Playwright .spec.ts files, one dir per feature
+    ├── drivers/               # the driver kit and one driver per feature
+    │   ├── kit.ts
+    │   └── routing.ts
+    ├── fixtures/              # Playwright test fixtures (test.extend) only
+    │   └── auth.ts
+    ├── helpers/               # function helpers + the constants they share with tests
+    │   ├── auth.ts
+    │   └── dashboards.ts
+    ├── testdata/              # static data files (JSON) used by helpers and tests
+    │   └── apm-metrics.json   # (example)
+    ├── tests/                 # Playwright .spec.ts files, one dir per feature area
     │   └── alerts/
-    │       └── list.spec.ts   # (example)
+    │       └── alerts.spec.ts # (example)
     └── artifacts/             # per-run output (gitignored)
         ├── html/              # HTML reporter output
         ├── json/              # JSON reporter output
         └── results/           # per-test traces / screenshots / videos on failure
 ```
 
-### The driver kit
+### `fixtures/` vs `helpers/` — what goes where
 
-A spec imports **one** module: its feature's `test` constant. That constant is
-built by composing layers, and each layer adds one named driver to the test
-arguments — so a spec body never handles a `Page`:
+These two folders look similar but mean different things:
+
+- **`fixtures/`** holds *Playwright test fixtures* (created via `test.extend({...})`). By the canonical definition, a fixture is "a consistent, predefined set of data, objects, or environmental conditions used to ensure tests run in a stable state" — i.e. setup/teardown that runs *automatically* around each test or worker. `auth.ts` matches: it extends Playwright's `test` with an `authedPage` that's logged-in before every test runs and torn down after. If the only thing in this folder ever is `auth.ts`, that's fine — fixtures are a deliberately small surface.
+- **`helpers/`** holds plain function helpers that you call *explicitly* from a test or hook — they don't extend Playwright's `test`. This covers both behaviour helpers (e.g. `gotoDashboardsList(page)`) and the constants those helpers and the tests both refer to (e.g. `SEARCH_PLACEHOLDER`). Constants live next to the helpers that use them so a single import line in a test covers both.
+- **`testdata/`** holds static data files (typically JSON / YAML) consumed by the helpers — for example, `apm-metrics.json`, a real dashboard payload uploaded through the UI by an importer helper.
+
+Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
+
+### Drivers
+
+New suites use a driver rather than loose helpers. A driver is a function that closes over the page and returns the feature's actions and locators. `drivers/kit.ts` turns it into a fixture, so a spec imports one module and never passes a `page` around:
 
 ```ts
-import { expect, test } from '../../drivers/alerts';
+import { expect, PATH, test } from '../../drivers/routing';
 
-test('TC-01 seeded rules render', async ({ alerts, alertList }) => {
-  await alerts.list.goto({ search: alertList.namePrefix });
-  await expect(alerts.list.rows()).toHaveCount(10);
+test('TC-09 RouteTab switches the url', async ({ routing }) => {
+	await routing.goto(PATH.metricsSummary);
+	await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
 });
 ```
 
-- **`drivers/kit.ts`** holds the composition primitives. `driver(name, build, dispose?)`
-  binds a factory to the authenticated page, and `dispose` runs after the test
-  on the same page so a driver can delete what it seeded; `seeded(name, open, close)` seeds
-  data once per worker on a throwaway admin page and tears it down after;
-  `allowFor(floor)` raises the test timeout to a floor and never lowers it.
-  `test.slow()` is banned in drivers, because it compounds when called in a loop.
-- **`drivers/<feature>.ts`** (or `drivers/<feature>/`) exports the feature's
-  driver, its layers, and the composed `test`. A driver is a plain function
-  returning an object of closures — no classes, and no `page` parameter on
-  anything a spec calls.
-- **Shared drivers** — `tanstack.ts` (the table), `querysearch.ts` (the
-  expression editor), `antd.ts` (select primitives), `console.ts`, `api.ts`,
-  `storage.ts` — are composed into feature drivers by direct call, not by
-  reaching for another fixture.
-- **`drivers/` is AI-owned**: coding agents generate and maintain it with the
-  specs, and `.gitattributes` collapses it in diffs.
-- **`testdata/`** and any `__generated__/` directory hold transcribed data. Both
-  are marked `linguist-generated`; something in the suite re-derives them at
-  runtime, so a stale value fails loudly rather than silently.
+- `driver(name, build)` adds a test-scoped fixture built on `authedPage`.
+- `seeded(name, open, close)` adds a worker-scoped seed. `open` and `close` run on a throwaway admin page.
+- A driver reuses helpers by calling them, never by reaching for another fixture.
+- `drivers/` is AI-owned: coding agents generate and maintain it with the specs, and `.gitattributes` collapses it in diffs.
+
+### Extended fixtures
+
+For features needing complex setup (API-seeded data, ruler evaluation waits, cleanup), create domain-specific fixtures that extend `auth`. Group them in `fixtures/<domain>/`.
 
 **Fixture scopes:**
 - **test scope** — fresh data per test. Use for mutations (edit, delete, rename).
-- **worker scope** — shared across a worker. Use for read-only data; it pays the
-  setup cost once per worker instead of once per test. Playwright builds them
-  lazily, so a spec that never destructures a seed never pays for it.
-- **suite scope**: a dataset only one file uses. Seed it in `test.beforeAll`
-  through `onAdminPage(browser, …)`, since `authedPage` is test-scoped.
+- **worker scope** — shared across tests in one worker. Use for read-only data. Worker scope pays the setup cost once per worker instead of once per test.
 
-### Which layer does this test belong to?
+**The alerts pattern** (`fixtures/alerts/`) demonstrates extending fixtures:
 
-Four layers run against this codebase, in cost order: **jest → Storybook + msw →
-pytest integration → Playwright**. Before writing an E2E, check the cheaper
-three. [`tests/e2e/AGENTS.md`](../../../tests/e2e/AGENTS.md) has the full rule;
-the short version:
+```
+fixtures/alerts/
+├── alert-rules.ts   # extends auth — worker-scoped rule list + test-scoped factory
+└── alert-history.ts # extends alert-rules — adds history fixtures (waits on ruler)
+```
 
-- A pure function, a reducer, a config literal or a component's own behaviour is
-  a **jest** test. Most containers under `frontend/src/container/` already have
-  one.
-- A rendered state that needs no backend (empty, error, loading) is a
-  **Storybook** story or a jest test with a fixed mock.
-- Anything the **API** does — ordering, pagination, filter semantics, validation,
-  roll-ups — is a pytest integration test, and for infra monitoring and alert
-  evaluation it very likely already exists. Grep `tests/integration/` first.
-- An **E2E** is for a real response reaching a real DOM: URL and history, write
-  paths that must persist, cross-page navigation, and one seeded proof per
-  surface.
+Specs import from the fixture they need:
+
+```ts
+// List tests — just need rules, no history
+import { test, expect } from '../../../fixtures/alerts/alert-rules';
+
+// History tests — need history rows from ruler evaluation
+import { test, expect } from '../../../fixtures/alerts/alert-history';
+```
+
+**When creating new fixtures:**
+
+1. **Identify scope** — Will tests mutate the data? If yes, test-scoped. If read-only, worker-scoped.
+2. **Group by domain** — Put fixtures in `fixtures/<domain>/`. Helpers in `helpers/<domain>/`.
+3. **Extend existing fixtures** — Chain from `auth` or another fixture to inherit its setup.
+4. **Handle timeouts** — Worker-scoped fixtures that wait on backend processing need explicit timeouts.
+5. **Clean up** — Always delete seeded data in the fixture teardown (after `use()`).
+6. **Extract logic into functions** — Keep the `test.extend()` block lean; move setup/teardown logic to named functions so the extend block reads as a manifest of "what fixtures exist."
 
 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. To assert a write, attach `page.waitForResponse` before the click, then reload and re-read from the server.
-4. **Self-contained state**: each spec seeds its own data, scopes its assertions to the names it seeded, and cleans up. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. Names carry the worker index, so parallel workers never collide. Pick the scope from the list above.
-5. **Seed through the kit when the UI flow is not under test.** `apiDriver(page)` (`drivers/api.ts`) creates control-plane objects with the session's token, and the seeder takes telemetry. The JWT lives in `localStorage`, so a spec never improvises with `page.request.*`. Feature drivers wrap both (`dashboards.seed`, `alerts.seed.threshold`).
-6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `traces/large-trace.json` is POSTed to the seeder by `drivers/traces.ts`. Infra monitoring reads the integration suite's fixtures through `seedDataset` (`drivers/infra/seed.ts`) instead of keeping a copy, and asserts on what it returned.
-7. **Locate by testid, in the driver.** A missing testid is added to the product in the same change. Role, label and CSS lookups are a stopgap, converted as that code is touched; antd internals (`.ant-select-dropdown`) are the exception, since the markup is not ours.
+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.
+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(
+      () => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+    );
+    await page.request.post('/api/v1/dashboards', {
+      data: { title: 'my-name', uploadedGrafana: false },
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    ```
+    This is faster and more reliable than a multi-step UI seed. Reach for the UI flow only when the test's *purpose* is asserting that flow.
+6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `apm-metrics.json` is a real dashboard payload that `importApmMetricsDashboardViaUI` (in `helpers/dashboards.ts`) uploads through the actual Import JSON UI flow to seed a richly-tagged dashboard for search/list tests.
 
 ## How to write an E2E test?
 
 Create a new file `tests/e2e/tests/alerts/smoke.spec.ts`:
 
 ```typescript
-import { ALERT_LIST_PAGE_SIZE, expect, test } from '../../drivers/alerts';
+import { test, expect } from '../../fixtures/auth';
 
-test('TC-01 seeded rules render and paginate', async ({ alerts, alertList }) => {
-  await alerts.list.goto({ search: alertList.namePrefix });
-  await expect(alerts.list.table.totalCount()).toContainText(`of ${alertList.count}`);
-  await expect(alerts.list.rows()).toHaveCount(ALERT_LIST_PAGE_SIZE);
+test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
+  await page.goto('/alerts');
+  await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
+  await expect(page.getByRole('tab', { name: /configuration/i })).toBeVisible();
 });
 ```
 
-`alertList` is a worker-scoped seed: the rules exist before the test starts, are
-shared by every test in the worker that asks for them, and are deleted when the
-worker ends.
-
-The `authedPage` fixture (from `tests/e2e/drivers/kit.ts`, re-exported by every feature's `test`) gives you a `Page` whose browser context is already authenticated as the admin user. First use per worker triggers one login; the resulting `storageState` is held in memory and reused for later requests. Take it only when the driver genuinely does not cover what you need — navigation, `goBack`, `waitForResponse`, a second tab.
+The `authedPage` fixture (from `tests/e2e/fixtures/auth.ts`) gives you a `Page` whose browser context is already authenticated as the admin user. First use per worker triggers one login; the resulting `storageState` is held in memory and reused for later requests.
 
 To run just this test (assuming the stack is up via `test_setup`):
 
@@ -204,56 +212,52 @@ cd tests/e2e
 npx playwright test tests/alerts/smoke.spec.ts --project=chromium
 ```
 
-Here's a more comprehensive example, driven entirely through the feature's
-driver:
+Here's a more comprehensive example that exercises a CRUD flow via the UI:
 
 ```typescript
-import { expect, test } from '../../drivers/alerts';
+import { test, expect } from '../../fixtures/auth';
 
-test('TC-02 row actions persist: disable, then enable', async ({
-  authedPage: page,
-  alerts,
-  ownedRules,
-}) => {
-  const name = `smoke-rule-${Date.now()}`;
-  const ruleId = await ownedRules.threshold(name);
+test.describe.configure({ mode: 'serial' });
 
-  await alerts.list.goto({ search: name });
-  await expect(alerts.list.stateCell(ruleId)).toHaveText('OK');
+test('TC-02 alerts list — create, toggle, delete', async ({ authedPage: page }) => {
+  await page.goto('/alerts?tab=AlertRules');
+  const name = 'smoke-rule';
 
-  await alerts.list.openFirstRowActions();
-  await Promise.all([
-    // waitForResponse captures the call the UI triggers — no parallel fetch.
-    page.waitForResponse(
-      (res) =>
-        res.url().includes(`/api/v2/rules/${ruleId}`) &&
-        res.request().method() === 'PATCH',
-    ),
-    alerts.list.menuItem('Disable').click(),
-  ]);
+  // Seed via UI — click "New Alert", fill form, save.
+  await page.getByRole('button', { name: /new alert/i }).click();
+  await page.getByTestId('alert-name-input').fill(name);
+  // ... fill metric / threshold / save ...
 
-  // Re-read from the server rather than trusting the optimistic update.
-  await page.reload();
-  await expect(alerts.list.stateCell(ruleId)).toHaveText('Disabled');
+  // Find the row and exercise the action menu.
+  const row = page.locator('tr', { hasText: name });
+  await expect(row).toBeVisible();
+  await row.locator('[data-testid="alert-actions"] button').first().click();
+
+  // waitForResponse captures the network call the UI triggers — no parallel fetch needed.
+  const patchWait = page.waitForResponse(
+    (r) => r.url().includes('/rules/') && r.request().method() === 'PATCH',
+  );
+  await page.getByRole('menuitem').filter({ hasText: /^disable$/i }).click();
+  await patchWait;
+  await expect(row).toContainText(/disabled/i);
 });
 ```
 
-`ownedRules` is a test-scoped seed: every rule it creates is deleted when the
-test finishes, so the spec owns its data and nothing leaks into the next one.
+### Locator priority
 
-### Commits
-
-Commit driver changes apart from specs, product testids and tests moved to
-another layer, so each commit can be reviewed on its own.
-[`tests/e2e/AGENTS.md`](../../../tests/e2e/AGENTS.md#commits) has the order.
-`pnpm typecheck`, `pnpm lint` and `pnpm fmt:check` gate the suite.
+1. `getByTestId('...')` — preferred when the source exposes one. Stable, app-author-provided handle that survives copy-edits.
+2. `getByRole('button', { name: 'Submit' })`
+3. `getByLabel('Email')`
+4. `getByPlaceholder('...')`
+5. `getByText('...')`
+6. `locator('.ant-select')` — last resort (Ant Design dropdowns often have no semantic alternative)
 
 ## Agents
 
 Three Claude agents in `.claude/agents/` accelerate writing and maintaining E2E specs:
 
 - **`playwright-test-planner`** — explores a feature in a real browser plus the local frontend source and writes a test plan as a scratch markdown file (under `tests/e2e/specs/`, which is gitignored — plans are working artifacts for the generator, not committed docs).
-- **`playwright-test-generator`** — converts a test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Drives each scenario through MCP browser tools and emits TC-NN-titled tests on the feature's driver, adding the driver methods and seeds the plan needs.
+- **`playwright-test-generator`** — converts a test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Drives each scenario through MCP browser tools and emits TC-NN-titled tests using the `authedPage` fixture and the API-seed pattern.
 - **`playwright-test-healer`** — runs failing specs, debugs them with snapshots / console / network introspection, and edits the spec to fix selector drift, timing, or state-leak issues.
 
 The agents rely on the Playwright-test MCP server (`mcp__playwright-test__*` tools). Configure it in your Claude MCP settings; the permission allowlist lives in [.claude/settings.local.json](../../../.claude/settings.local.json).
@@ -265,15 +269,15 @@ The agents rely on the Playwright-test MCP server (`mcp__playwright-test__*` too
 With the stack already up, from `tests/e2e/`:
 
 ```bash
-pnpm test                 # headless, all projects
+yarn test                 # headless, all projects
 ```
 
 ### Running Specific Projects
 
 ```bash
-pnpm test:chromium        # chromium only
-pnpm test:firefox
-pnpm test:webkit
+yarn test:chromium        # chromium only
+yarn test:firefox
+yarn test:webkit
 ```
 
 ### Running Specific Tests
@@ -291,17 +295,17 @@ npx playwright test tests/alerts/history/ --project=chromium
 npx playwright test tests/alerts/page.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
+npx playwright test --project=chromium -g "AL-01"
 ```
 
 ### Iterative modes
 
 ```bash
-pnpm test:ui              # Playwright UI mode — watch + step through
-pnpm test:headed          # headed browser
-pnpm test:debug           # Playwright inspector, pause-on-breakpoint
-pnpm codegen              # record-and-replay locator generation
-pnpm report               # open the last HTML report (artifacts/html)
+yarn test:ui              # Playwright UI mode — watch + step through
+yarn test:headed          # headed browser
+yarn test:debug           # Playwright inspector, pause-on-breakpoint
+yarn codegen              # record-and-replay locator generation
+yarn report               # open the last HTML report (artifacts/html)
 ```
 
 ### Staging fallback
@@ -311,7 +315,7 @@ Point `SIGNOZ_E2E_BASE_URL` at a remote env via `.env` — no local backend brin
 ```bash
 cd tests/e2e
 cp .env.example .env      # fill SIGNOZ_E2E_USERNAME / PASSWORD
-pnpm test:staging
+yarn test:staging
 ```
 
 ## How to configure different options for E2E tests?
@@ -359,14 +363,12 @@ The same pytest flags integration tests expose work here, since E2E reuses the s
 - **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build on a cold start; later builds are incremental.
 - **Changed backend or frontend code? Re-run the setup command** — it passes `--rebuild`, swapping the SigNoz container for one built from your current sources while the rest of the stack stays up.
 - **Don't teardown before setup.** `--reuse` correctly handles partially-set-up state, so chaining teardown → setup wastes time.
-- **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Seed through the kit, never with `page.request.*`.
+- **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Drop to `page.request.*` only when the UI can't reach what you need.
 - **Use `page.waitForResponse` on UI clicks** to assert BE contracts — it still exercises the UI trigger path.
 - **Title every test `TC-NN <short description>`** — keeps the suite navigable and reportable.
 - **Split by resource, not by regression suite.** One spec per feature resource; cross-resource junction concerns (cascade-delete, linked-edit) get their own file.
-- **Name resources by what they are, plus the worker index** (`e2e-alert-list-w${workerIndex}-${Date.now()}`). Six workers share one stack, so assert only on names you seeded.
+- **Use short descriptive resource names** (`alerts-list-rule`, `labels-rule`, `downtime-once`) — no timestamp disambiguation. Each test owns its resources and cleans up in `try/finally`.
 - **Never commit `test.only`** — a pre-commit check or CI runs with `forbidOnly: true`.
 - **Prefer explicit waits over `page.waitForTimeout(ms)`.** `await expect(locator).toBeVisible()` is always better than `waitForTimeout(5000)`.
 - **Unique test names won't save you from shared-tenant state.** When two tests hit the same list page, either serialize (`describe.configure({ mode: 'serial' })`) or isolate cleanup religiously.
-- **Green locally, red on CI?** Run `STRESS=1 CI=1 pnpm test <path>` (4x CPU throttle, 2 workers, 2 retries) before filing a product bug.
-- **Commit drivers apart from specs.** One concern per commit; see [Commits](#commits).
 - **Artifacts go to `tests/e2e/artifacts/`** — HTML report at `artifacts/html`, traces at `artifacts/results/<test>/`. All gitignored; archive the dir in CI.

frontend/.husky/commit-msg

@@ -1,3 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
 cd frontend && pnpm run commitlint --edit $1
 
 branch="$(git rev-parse --abbrev-ref HEAD)"

frontend/.husky/pre-commit

@@ -1 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
 cd frontend && pnpm lint-staged

frontend/.oxlintrc.json

@@ -294,8 +294,6 @@
     // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "signoz/no-msw-in-story-file": "error",
     // Bans msw imports in *.stories.tsx; handlers/mock data belong in the sibling .stories.mocks.tsx
-    "signoz/no-direct-react-router-import": "error",
-    // Steers call sites to the src/lib/router facade (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -591,23 +589,6 @@
       "rules": {
         "no-redeclare": "off"
       }
-    },
-    {
-      // The react-router allowlist: the facade itself, the route table, `useSafeNavigate`,
-      // the history singleton and the test and story router mounts. Test files are
-      // deliberately absent: they render at a route or use tests/router-mocks.
-      "files": [
-        "src/lib/router/**",
-        "src/AppRoutes/**",
-        "src/hooks/useSafeNavigate.ts",
-        "src/lib/history.ts",
-        "src/tests/router.tsx",
-        "src/storybook/providers/StorybookProviders.tsx",
-        "src/storybook/renderAtRoute.tsx"
-      ],
-      "rules": {
-        "signoz/no-direct-react-router-import": "off"
-      }
     }
   ]
 }

frontend/.storybook/preview.tsx

@@ -127,7 +127,6 @@ const preview: Preview = {
 							'Detail',
 							[
 								'Overview',
-								'Panels',
 								'Settings',
 								'Variables',
 								'New Variable',
@@ -141,7 +140,7 @@ const preview: Preview = {
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',
-						['Explorer', 'Live Tail', 'Pipelines', 'Settings'],
+						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
 						'Traces',
 						['Explorer', 'Trace Details', 'Funnel Details'],
 						'Metrics',

frontend/__mocks__/uplotMock.ts

@@ -57,7 +57,6 @@ 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(
@@ -71,7 +70,6 @@ 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/i18-generate-hash.cjs

@@ -1,6 +1,6 @@
 const crypto = require('crypto');
 const fs = require('fs');
-const path = require('path');
+const glob = require('glob');
 
 function generateChecksum(str, algorithm, encoding) {
 	return crypto
@@ -9,17 +9,12 @@ function generateChecksum(str, algorithm, encoding) {
 		.digest(encoding || 'hex');
 }
 
-const localesDir = 'public/locales';
 const result = {};
 
-fs
-	.readdirSync(localesDir, { recursive: true, withFileTypes: true })
-	.filter((entry) => entry.isFile() && entry.name.endsWith('.json'))
-	.forEach((entry) => {
-		const file = path.join(entry.parentPath, entry.name);
-		const content = fs.readFileSync(file, { encoding: 'utf-8' });
-		const key = path.relative(localesDir, file).replace(/\.json$/, '');
-		result[`/${key}`] = generateChecksum(content);
-	});
+glob.sync(`public/locales/**/*.json`).forEach((path) => {
+	const [_, lang] = path.split('public/locales');
+	const content = fs.readFileSync(path, { encoding: 'utf-8' });
+	result[lang.replace('.json', '')] = generateChecksum(content);
+});
 
 fs.writeFileSync('./i18n-translations-hash.json', JSON.stringify(result));

frontend/package.json

@@ -24,8 +24,8 @@
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
-    "postinstall": "pnpm i18n:generate-hash && ([ -n \"$CI\" ] || pnpm husky:configure) && node scripts/update-registry.cjs",
-    "husky:configure": "cd .. && husky frontend/.husky",
+    "postinstall": "pnpm i18n:generate-hash && (is-ci || pnpm husky:configure)  && node scripts/update-registry.cjs",
+    "husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
     "commitlint": "commitlint --edit $1",
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
@@ -70,7 +70,7 @@
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
     "antlr4": "4.13.2",
-    "axios": "1.21.0",
+    "axios": "1.18.0",
     "babel-jest": "^29.6.4",
     "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "^2.0.0",
@@ -100,8 +100,10 @@
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
+    "rc-select": "14.10.0",
     "react": "18.2.0",
     "react-addons-update": "15.6.3",
+    "react-beautiful-dnd": "13.1.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
@@ -135,6 +137,7 @@
     "uplot": "1.6.31",
     "uuid": "14.0.1",
     "vite": "npm:rolldown-vite@7.3.1",
+    "vite-plugin-html": "3.2.2",
     "zod": "4.3.6",
     "zustand": "5.0.11"
   },
@@ -175,10 +178,11 @@
     "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^22.20.5",
+    "@types/node": "^16.10.3",
     "@types/papaparse": "5.3.7",
     "@types/react": "18.0.26",
     "@types/react-addons-update": "0.14.21",
+    "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-dom": "18.0.10",
     "@types/react-grid-layout": "^1.1.2",
     "@types/react-redux": "^7.1.11",
@@ -188,9 +192,12 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/uuid": "^8.3.1",
     "@typescript/native-preview": "7.0.0-dev.20260430.1",
     "eslint-plugin-sonarjs": "4.0.2",
-    "husky": "^9.1.7",
+    "glob": "^13.0.6",
+    "husky": "^7.0.4",
+    "is-ci": "^3.0.1",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
     "json-schema-to-typescript": "^15.0.4",

frontend/plugins/__tests__/no-direct-react-router-import.test.mjs

@@ -1,126 +0,0 @@
-import { ruleTester } from './rule-tester.mjs';
-
-const FACADE = 'src/lib/router facade';
-const HISTORY = 'lib/history singleton';
-const MOCK = 'tests/router-mocks helpers';
-
-await ruleTester({
-	rule: 'no-direct-react-router-import',
-	valid: [
-		{
-			name: 'facade import',
-			code: "import { useAppNavigate } from 'lib/router/useAppNavigate';",
-		},
-		{
-			name:
-				'the history package itself is a version-bump concern, not a facade one',
-			code: "import { createBrowserHistory } from 'history';",
-		},
-		{
-			name: 'unrelated module whose name contains history',
-			code: "import { useHistoryPanel } from 'container/HistoryPanel';",
-		},
-		{
-			name: 'mocking a facade module',
-			code: "jest.mock('lib/router/navigation');",
-		},
-		{
-			name: 'jest call that does not name a module',
-			code: 'jest.fn();',
-		},
-		{
-			name: 'require of an unrelated module',
-			code: "const x = require('lib/dashboardVariables');",
-		},
-		{
-			name: 'export without a source',
-			code: 'const a = 1;\nexport { a };',
-		},
-	],
-	invalid: [
-		{
-			name: 'jest.mock of react-router-dom',
-			code: "jest.mock('react-router-dom', () => ({}));",
-			errors: [{ message: MOCK, line: 1, column: 11 }],
-		},
-		{
-			name: 'jest.requireActual of react-router-dom',
-			code: "const actual = jest.requireActual('react-router-dom');",
-			errors: [{ message: MOCK }],
-		},
-		{
-			name: 'jest.mock of lib/history',
-			code: "jest.mock('lib/history');",
-			errors: [{ message: MOCK }],
-		},
-		{
-			name: 'jest.doMock of react-router-dom-v5-compat',
-			code: "jest.doMock('react-router-dom-v5-compat');",
-			errors: [{ message: MOCK }],
-		},
-		{
-			name: 'react-router-dom named import',
-			code: "import { useHistory } from 'react-router-dom';",
-			errors: [{ message: FACADE, line: 1, column: 28 }],
-		},
-		{
-			name: 'react-router named import',
-			code: "import { useLocation } from 'react-router';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'react-router-dom type-only import',
-			code: "import type { RouteProps } from 'react-router-dom';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'react-router-dom-v5-compat',
-			code: "import { useNavigate } from 'react-router-dom-v5-compat';",
-			errors: [{ message: 'compat package is an implementation detail' }],
-		},
-		{
-			name: 'lib/history default import',
-			code: "import history from 'lib/history';",
-			errors: [{ message: HISTORY }],
-		},
-		{
-			name: 'lib/history through the @/ alias',
-			code: "import history from '@/lib/history';",
-			errors: [{ message: HISTORY }],
-		},
-		{
-			name: 'jest.mock of lib/history through the @/ alias',
-			code: "jest.mock('@/lib/history');",
-			errors: [{ message: MOCK }],
-		},
-		{
-			name: 'lib/history require',
-			code: "const history = require('lib/history').default;",
-			errors: [{ message: HISTORY }],
-		},
-		{
-			name: 'dynamic import',
-			code: "const mod = await import('react-router-dom');",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 're-export',
-			code: "export { Link } from 'react-router-dom';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'export all',
-			code: "export * from 'react-router-dom';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'one report per import statement',
-			code:
-				"import { Link } from 'react-router-dom';\nimport history from 'lib/history';",
-			errors: [
-				{ message: FACADE, line: 1 },
-				{ message: HISTORY, line: 2 },
-			],
-		},
-	],
-});

frontend/plugins/rules/no-direct-react-router-import.mjs

@@ -1,123 +0,0 @@
-/**
- * Rule: no-direct-react-router-import
- *
- * Every router concern goes through the `src/lib/router/*` facade, so a router
- * upgrade is a change to one directory instead of ~300 call sites. This rule
- * keeps new call sites, and test mocks, from reaching past it.
- *
- * `history` (the package) is deliberately not flagged: it is a transitive concern of
- * the version bump, not something the facade replaces.
- *
- * The allowlist (the facade itself, the route table, `useSafeNavigate`, the history
- * singleton and the test and story router mounts) is applied via overrides in
- * .oxlintrc.json, not here, so the file list stays visible next to the severity.
- */
-
-import path from 'node:path';
-
-const HISTORY_MODULE_SUFFIX = path.join('src', 'lib', 'history');
-
-const JEST_MODULE_METHODS = new Set([
-	'mock',
-	'doMock',
-	'unmock',
-	'dontMock',
-	'setMock',
-	'requireActual',
-	'requireMock',
-	'createMockFromModule',
-]);
-
-const MESSAGE_IDS = {
-	'react-router': 'v5Router',
-	'react-router-dom': 'v5Router',
-	'react-router-dom-v5-compat': 'v6Compat',
-	'lib/history': 'historySingleton',
-	'@/lib/history': 'historySingleton',
-};
-
-/** Resolves `./history` / `../history` so files inside src/lib count too. */
-function isHistoryModule(specifier, filename) {
-	if (!specifier.startsWith('.') || !filename) {
-		return false;
-	}
-	const resolved = path.resolve(path.dirname(filename), specifier);
-	return (
-		resolved.endsWith(HISTORY_MODULE_SUFFIX) ||
-		resolved.endsWith(`${HISTORY_MODULE_SUFFIX}.ts`)
-	);
-}
-
-function messageIdFor(specifier, filename) {
-	if (MESSAGE_IDS[specifier] !== undefined) {
-		return MESSAGE_IDS[specifier];
-	}
-	return isHistoryModule(specifier, filename) ? 'historySingleton' : null;
-}
-
-export default {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow direct react-router / lib/history imports; import from src/lib/router instead',
-			category: 'React Router migration',
-		},
-		schema: [],
-		messages: {
-			v5Router:
-				'Do not import react-router-dom directly. Use the src/lib/router facade (useAppNavigate, useAppLocation, useAppParams, AppLink, Redirect, matchRoute) so a router upgrade stays contained.',
-			v6Compat:
-				'Do not import react-router-dom-v5-compat directly. Use the src/lib/router facade instead; the compat package is an implementation detail of the migration and disappears with it.',
-			historySingleton:
-				'Do not import the lib/history singleton. Use the helpers in src/lib/router/navigation.ts, or useAppNavigate() to follow the nearest router. history loses basename handling once the router owns it.',
-			mock:
-				'Do not mock the router directly. Render at a route with tests/test-utils, or spy on the facade with the tests/router-mocks helpers.',
-		},
-	},
-
-	create(context) {
-		const report = (sourceNode, overrideMessageId) => {
-			if (
-				sourceNode === null ||
-				sourceNode === undefined ||
-				typeof sourceNode.value !== 'string'
-			) {
-				return;
-			}
-			const messageId = messageIdFor(sourceNode.value, context.filename);
-			if (messageId !== null) {
-				context.report({
-					node: sourceNode,
-					messageId: overrideMessageId ?? messageId,
-				});
-			}
-		};
-
-		return {
-			ImportDeclaration: (node) => report(node.source),
-			ImportExpression: (node) => report(node.source),
-			ExportAllDeclaration: (node) => report(node.source),
-			ExportNamedDeclaration: (node) => report(node.source),
-			CallExpression(node) {
-				const { callee } = node;
-				if (
-					(callee.type === 'Identifier' && callee.name === 'require') ||
-					callee.type === 'Import'
-				) {
-					report(node.arguments[0]);
-					return;
-				}
-				if (
-					callee.type === 'MemberExpression' &&
-					callee.object.type === 'Identifier' &&
-					callee.object.name === 'jest' &&
-					callee.property.type === 'Identifier' &&
-					JEST_MODULE_METHODS.has(callee.property.name)
-				) {
-					report(node.arguments[0], 'mock');
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -16,7 +16,6 @@ import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
 import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
 import noMswInStoryFile from './rules/no-msw-in-story-file.mjs';
-import noDirectReactRouterImport from './rules/no-direct-react-router-import.mjs';
 
 export default {
 	meta: {
@@ -34,6 +33,5 @@ export default {
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
 		'no-return-text-nodes': noReturnTextNodes,
 		'no-msw-in-story-file': noMswInStoryFile,
-		'no-direct-react-router-import': noDirectReactRouterImport,
 	},
 };

frontend/pnpm-workspace.yaml

@@ -86,13 +86,6 @@ overrides:
  #      typescript-plugin-css-modules > postcss-load-config@3 (^1.10.2)
  # remove: blocked — babel-plugin-macros 3.1.0 (latest) still uses cosmiconfig@7
  yaml@>=1.0.0 <1.10.3: '>=1.10.3 <2'
- # via: jest (@jest/core, @jest/console, jest-config) declares @types/node '*',
- #      which kept 16.18.25 next to the direct ^22
- # remove: once `pnpm dedupe` passes trustPolicy and leaves one @types/node
- '@types/node': '$@types/node'
 trustPolicy: no-downgrade
 trustPolicyExclude:
  - 'semver@6.3.1 || 5.7.2'
- # via: @types/node@22 (undici-types ~6.21.0, no provenance)
- # remove: upgrade @types/node to >=24 (undici-types 7.x has provenance)
- - 'undici-types@6.21.0'

frontend/public/locales/en-GB/channels.json

@@ -17,9 +17,11 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to.",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
+  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
   "field_jira_site": "Site URL",
-  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net, or a proxy in front of it.",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
+  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
   "jira_required_fields": "Site URL, email, API token, project and issue type are required",
   "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
   "jira_service_account_tip_link": "Learn how",
@@ -80,6 +82,7 @@
   "field_incidentio_description": "Description",
   "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
   "incidentio_required_fields": "Alert source URL and token are required",
+  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
   "field_incidentio_metadata": "Additional metadata",
   "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
   "placeholder_incidentio_metadata_key": "Key",
@@ -89,8 +92,8 @@
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",
-  "field_webhook_username": "Username",
-  "field_webhook_password": "Password",
+  "field_webhook_username": "User Name (optional)",
+  "field_webhook_password": "Password (optional)",
   "field_pager_routing_key": "Routing Key",
   "field_pager_description": "Description",
   "field_pager_severity": "Severity",
@@ -103,16 +106,19 @@
   "placeholder_slack_description": "Description",
   "placeholder_pager_description": "Description",
   "help_pager_client": "Shows up as event source in Pagerduty",
-  "help_pager_client_url": "Shows up as event source link in Pagerduty. Leave empty to link to this SigNoz instance",
+  "help_pager_client_url": "Shows up as event source link in Pagerduty",
   "help_pager_class": "The class/type of the event",
   "help_pager_details": "Specify a key-value format (must be a valid json)",
   "help_pager_group": "A cluster or grouping of sources",
   "help_pager_component": "The part or component of the affected system that is broke",
   "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
+  "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
+  "help_webhook_password": "Specify a password or bearer token",
   "help_pager_description": "Shows up as description in pagerduty",
   "channel_creation_done": "Successfully created the channel",
   "channel_edit_done": "Channels Edited Successfully",
   "selected_channel_invalid": "Channel type selected is invalid",
+  "username_no_password": "A Password must be provided with user name",
   "channel_test_done": "An alert has been sent to this channel",
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",

frontend/public/locales/en-GB/explorer.json

@@ -0,0 +1,3 @@
+{
+    "name_of_the_view": "Name of the view"
+}

frontend/public/locales/en-GB/titles.json

@@ -47,6 +47,7 @@
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",

frontend/public/locales/en/channels.json

@@ -25,9 +25,11 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to.",
+  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
+  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
   "field_jira_site": "Site URL",
-  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net, or a proxy in front of it.",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
+  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
   "jira_required_fields": "Site URL, email, API token, project and issue type are required",
   "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
   "jira_service_account_tip_link": "Learn how",
@@ -88,8 +90,7 @@
   "field_incidentio_description": "Description",
   "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
   "incidentio_required_fields": "Alert source URL and token are required",
-  "incidentio_token_bearer_prefix": "Paste the token only, without the Bearer prefix",
-  "incidentio_token_whitespace": "Remove the spaces around the token",
+  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
   "field_incidentio_metadata": "Additional metadata",
   "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
   "placeholder_incidentio_metadata_key": "Key",
@@ -115,7 +116,6 @@
   "field_slack_field_short": "Short",
   "add_slack_field": "Add field",
   "remove_slack_field": "Remove field",
-  "slack_field_value_required": "Enter a value for this field",
   "field_slack_actions": "Actions",
   "help_slack_actions": "Buttons rendered under the attachment. A button with a URL links out.",
   "label_slack_action_text": "Text",
@@ -133,7 +133,6 @@
   "placeholder_slack_action_style": "Style: default, primary or danger",
   "placeholder_slack_action_confirm": "Confirmation prompt (optional)",
   "add_slack_action": "Add action",
-  "slack_action_url_or_name_required": "Enter a URL or a name for this button",
   "remove_slack_action": "Remove action",
   "field_opsgenie_api_key": "API Key",
   "field_opsgenie_description": "Description",
@@ -144,15 +143,9 @@
   "help_email_html": "Send email in html format",
   "field_email_html": "Email body template",
   "placeholder_email_html": "Email body template",
-  "field_webhook_username": "Username",
-  "field_webhook_password": "Password",
-  "field_webhook_bearer_token": "Bearer token",
-  "field_webhook_auth": "Authentication",
-  "option_webhook_auth_none": "None",
-  "option_webhook_auth_basic": "Basic auth",
-  "option_webhook_auth_bearer": "Bearer token",
-  "webhook_basic_auth_required": "Enter a username or password",
-  "webhook_bearer_token_required": "Enter a bearer token",
+  "field_webhook_username": "User Name (optional)",
+  "field_webhook_password": "Password (optional)",
+  "field_webhook_bearer_token": "Bearer token (optional)",
   "field_pager_routing_key": "Routing Key",
   "field_pager_description": "Description",
   "field_pager_severity": "Severity",
@@ -169,13 +162,15 @@
   "placeholder_opsgenie_message": "Message",
   "placeholder_opsgenie_priority": "Priority",
   "help_pager_client": "Shows up as event source in Pagerduty",
-  "help_pager_client_url": "Shows up as event source link in Pagerduty. Leave empty to link to this SigNoz instance",
+  "help_pager_client_url": "Shows up as event source link in Pagerduty",
   "help_pager_class": "The class/type of the event",
   "help_pager_details": "Specify a key-value format (must be a valid json)",
   "help_pager_group": "A cluster or grouping of sources",
   "help_pager_component": "The part or component of the affected system that is broke",
   "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
-  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header.",
+  "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
+  "help_webhook_password": "Specify a password or bearer token",
+  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header. Leave the username and password empty when using it.",
   "help_pager_description": "Shows up as description in pagerduty",
   "help_opsgenie_message": "Shows up as message in opsgenie",
   "help_opsgenie_priority": "Priority of the incident",
@@ -183,6 +178,7 @@
   "channel_creation_done": "Successfully created the channel",
   "channel_edit_done": "Channels Edited Successfully",
   "selected_channel_invalid": "Channel type selected is invalid",
+  "username_no_password": "A Password must be provided with user name",
   "channel_test_done": "An alert has been sent to this channel",
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",

frontend/public/locales/en/explorer.json

@@ -0,0 +1,4 @@
+{
+    "name_of_the_view": "Name of the view",
+    "delete_confirm_message": "Are you sure you want to delete {{viewName}} view? Deleting a view is irreversible and cannot be undone."
+}

frontend/public/locales/en/titles.json

@@ -50,6 +50,8 @@
 	"WORKSPACE_SUSPENDED": "SigNoz | Workspace Suspended",
 	"WORKSPACE_ACCESS_RESTRICTED": "SigNoz | Workspace Access Restricted",
 	"SUPPORT": "SigNoz | Support",
+	"LOGS_SAVE_VIEWS": "SigNoz | Logs Saved Views",
+	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"TRACES_FUNNELS": "SigNoz | Traces Funnels",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
@@ -64,8 +66,10 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -303,10 +303,10 @@ describe('PrivateRoute', () => {
 		it.each([
 			['/logs-save-views', ROUTES.LOGS_EXPLORER],
 			['/traces-save-views', ROUTES.TRACES_EXPLORER],
-			['/logs/saved-views', ROUTES.LOGS_EXPLORER],
-			['/traces/saved-views', ROUTES.TRACES_EXPLORER],
-			['/metrics-explorer/views', ROUTES.METRICS_EXPLORER_EXPLORER],
-			['/meter/explorer/views', ROUTES.METER_EXPLORER],
+			[ROUTES.LOGS_SAVE_VIEWS, ROUTES.LOGS_EXPLORER],
+			[ROUTES.TRACES_SAVE_VIEWS, ROUTES.TRACES_EXPLORER],
+			[ROUTES.METRICS_EXPLORER_VIEWS, ROUTES.METRICS_EXPLORER_EXPLORER],
+			[ROUTES.METER_EXPLORER_VIEWS, ROUTES.METER_EXPLORER],
 		])('should redirect the old views route %s to %s', (from, to) => {
 			renderPrivateRoute({ initialRoute: from });
 

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

@@ -1,140 +0,0 @@
-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

@@ -18,11 +18,11 @@ import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 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';
@@ -38,11 +38,6 @@ import defaultRoutes, {
 	LIST_LICENSES,
 	SUPPORT_ROUTE,
 } from './routes';
-import {
-	hasNoAppFrames,
-	isExternalIntegrationError,
-	SENTRY_IGNORE_ERRORS,
-} from './sentryFilters';
 
 const appRouter = (children: ReactNode): ReactNode => (
 	<Router history={history}>
@@ -71,6 +66,7 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
@@ -260,8 +256,18 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		// The bottom strip carries Support, so the floating bubble goes entirely.
-		window.Pylon?.('hideChatBubble');
-	}, [pathname]);
+		if (
+			isSavedViewEnabled ||
+			pathname === ROUTES.ONBOARDING ||
+			pathname.startsWith('/public/dashboard/') ||
+			pathname === '/ai-assistant' ||
+			pathname.startsWith('/ai-assistant/')
+		) {
+			window.Pylon?.('hideChatBubble');
+		} else {
+			window.Pylon?.('showChatBubble');
+		}
+	}, [pathname, isSavedViewEnabled]);
 
 	// Identity for the Pylon widget. Whether this user gets Pylon at all is
 	// `useChatSupport`'s call — this only fills in who they are.
@@ -316,7 +322,16 @@ function App(): JSX.Element {
 					tunnel: window.signozBootData.settings.sentry.tunnel,
 					environment: process.env.ENVIRONMENT,
 					release: process.env.VERSION,
-					ignoreErrors: 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.
+					ignoreErrors: [
+						/Unable to preload CSS for/,
+						/Failed to fetch dynamically imported module/,
+						/error loading dynamically imported module/,
+						/Importing a module script failed/,
+					],
 					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
@@ -351,15 +366,6 @@ 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/pageComponents.ts

@@ -26,6 +26,10 @@ export const ServiceMapPage = Loadable(
 	() => import(/* webpackChunkName: "ServiceMapPage" */ 'modules/Servicemap'),
 );
 
+export const LogsSaveViews = Loadable(
+	() => import(/* webpackChunkName: "LogsSaveViews" */ 'pages/LogsModulePage'), // TODO: Add a wrapper so that the same component can be used in traces
+);
+
 export const TracesExplorer = Loadable(
 	() =>
 		import(
@@ -33,6 +37,11 @@ export const TracesExplorer = Loadable(
 		),
 );
 
+export const TracesSaveViews = Loadable(
+	() =>
+		import(/* webpackChunkName: "Traces Save Views" */ 'pages/TracesModulePage'),
+);
+
 export const TracesFunnels = Loadable(
 	() =>
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),

frontend/src/AppRoutes/routes.ts

@@ -26,6 +26,7 @@ import {
 	Login,
 	Logs,
 	LogsIndexToFields,
+	LogsSaveViews,
 	MessagingQueuesMainPage,
 	MeterExplorerPage,
 	MetricsExplorer,
@@ -47,6 +48,7 @@ import {
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
+	TracesSaveViews,
 	UnAuthorized,
 	UsageExplorerPage,
 	WorkspaceAccessRestricted,
@@ -118,6 +120,13 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'SERVICE_MAP',
 	},
+	{
+		path: ROUTES.LOGS_SAVE_VIEWS,
+		component: LogsSaveViews,
+		isPrivate: true,
+		exact: true,
+		key: 'LOGS_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -209,6 +218,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
+	{
+		path: ROUTES.TRACES_SAVE_VIEWS,
+		exact: true,
+		component: TracesSaveViews,
+		isPrivate: true,
+		key: 'TRACES_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
 		exact: true,
@@ -398,6 +414,13 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 		exact: true,
@@ -420,6 +443,13 @@ const routes: AppRoutes[] = [
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METER_EXPLORER_VIEWS,
+		exact: true,
+		component: MeterExplorerPage,
+		key: 'METER_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.API_MONITORING,
 		exact: true,

frontend/src/AppRoutes/sentryFilters.ts

@@ -1,49 +0,0 @@
-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/ErrorResponseHandler.ts

@@ -2,6 +2,15 @@ import { AxiosError, AxiosResponse, isCancel } from 'axios';
 import { ErrorResponse } from 'types/api';
 import { ErrorStatusCode } from 'types/common';
 
+function getClientErrorMessage(data: AxiosResponse['data']): string {
+	const { errors, error } = data;
+	if (Array.isArray(errors) && errors.length >= 1) {
+		return errors[0].msg;
+	}
+	// v2 endpoints send `error` as an `{ code, message }` envelope.
+	return typeof error?.message === 'string' ? error.message : error;
+}
+
 export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 	const { response, request } = error;
 	if (response) {
@@ -21,15 +30,10 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				};
 			}
 
-			const { errors, error } = data;
-
-			const errorMessage =
-				Array.isArray(errors) && errors.length >= 1 ? errors[0].msg : error;
-
 			return {
 				statusCode,
 				payload: null,
-				error: errorMessage,
+				error: getClientErrorMessage(data),
 				message: (response.data as any)?.status,
 				body: JSON.stringify((response.data as any).data),
 			};

frontend/src/api/__tests__/ErrorResponseHandler.test.ts

@@ -21,4 +21,19 @@ describe('ErrorResponseHandler', () => {
 
 		consoleError.mockRestore();
 	});
+
+	it('flattens a v2 error envelope on a 4xx to its message', () => {
+		const error = new AxiosError('Request failed', '400', undefined, undefined, {
+			status: 400,
+			statusText: 'Bad Request',
+			headers: {},
+			config: {} as never,
+			data: {
+				status: 'error',
+				error: { code: 'invalid_input', message: 'Syntax error: bad query' },
+			},
+		});
+
+		expect(ErrorResponseHandler(error).error).toBe('Syntax error: bad query');
+	});
 });

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

@@ -5584,12 +5584,6 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
-export enum DashboardtypesAxisScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -6722,205 +6716,6 @@ 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
@@ -6931,8 +6726,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -8212,7 +8006,6 @@ 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.
@@ -12791,12 +12584,6 @@ export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
 
-/**
- * The rule payload schema.
- */
-export enum RuletypesPostableRuleDTOSchemaVersion {
-	v2alpha1 = 'v2alpha1',
-}
 export enum RuletypesSeasonalityDTO {
 	hourly = 'hourly',
 	daily = 'daily',
@@ -12873,9 +12660,9 @@ export interface RuletypesRuleConditionDTO {
 	seasonality?: RuletypesSeasonalityDTO;
 	/**
 	 * @type string
-	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery.
+	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery. When omitted, F1 is used if present, otherwise the enabled query with the highest name.
 	 */
-	selectedQueryName: string;
+	selectedQueryName?: string;
 	/**
 	 * @type number,null
 	 * @format double
@@ -12888,9 +12675,9 @@ export interface RuletypesRuleConditionDTO {
 	 */
 	targetUnit?: string;
 	/**
-	 * @description The thresholds to evaluate, as a kind and spec.
+	 * @description The thresholds to evaluate, as a kind and spec. Required when schemaVersion is v2alpha1; derived from op, target and matchType for v1.
 	 */
-	thresholds: RuletypesRuleThresholdDataDTO;
+	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
 export interface RuletypesPostableRuleDTO {
@@ -12928,9 +12715,9 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec.
+	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
 	 */
-	evaluation: RuletypesEvaluationEnvelopeDTO;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12942,24 +12729,23 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	labels?: RuletypesPostableRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour.
+	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
 	 */
-	notificationSettings: RuletypesNotificationSettingsDTO;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
-	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema.
+	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
 	 */
-	schemaVersion: RuletypesPostableRuleDTOSchemaVersion;
+	schemaVersion?: string;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12967,7 +12753,7 @@ export interface RuletypesPostableRuleDTO {
 	source?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Nothing reads it.
+	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
 	 */
 	version?: string;
 }
@@ -12990,12 +12776,6 @@ export type RuletypesRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesRuleDTOLabels = { [key: string]: string };
 
-/**
- * The rule payload schema.
- */
-export enum RuletypesRuleDTOSchemaVersion {
-	v2alpha1 = 'v2alpha1',
-}
 export interface RuletypesRuleDTO {
 	/**
 	 * @type string
@@ -13040,9 +12820,9 @@ export interface RuletypesRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec.
+	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
 	 */
-	evaluation: RuletypesEvaluationEnvelopeDTO;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -13059,24 +12839,23 @@ export interface RuletypesRuleDTO {
 	 */
 	labels?: RuletypesRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour.
+	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
 	 */
-	notificationSettings: RuletypesNotificationSettingsDTO;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
-	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema.
+	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
 	 */
-	schemaVersion: RuletypesRuleDTOSchemaVersion;
+	schemaVersion?: string;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -13097,7 +12876,7 @@ export interface RuletypesRuleDTO {
 	updatedBy?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Nothing reads it.
+	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
 	 */
 	version?: string;
 }
@@ -13471,23 +13250,6 @@ export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
 
 export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
 
-export type SpantypesScopeDTOAttributes = { [key: string]: unknown };
-
-export interface SpantypesScopeDTO {
-	/**
-	 * @type object
-	 */
-	attributes?: SpantypesScopeDTOAttributes;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	version?: string;
-}
-
 export interface SpantypesFlamegraphSpanDTO {
 	/**
 	 * @type object
@@ -13523,7 +13285,6 @@ export interface SpantypesFlamegraphSpanDTO {
 	 * @type object
 	 */
 	resource: SpantypesFlamegraphSpanDTOResource;
-	scope: SpantypesScopeDTO;
 	/**
 	 * @type string
 	 */
@@ -14069,7 +13830,6 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	response_status_code?: string;
-	scope?: SpantypesScopeDTO;
 	/**
 	 * @type string
 	 */

frontend/src/api/saveView/deleteView.ts

@@ -0,0 +1,5 @@
+import axios from 'api';
+import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
+
+export const deleteView = (uuid: string): Promise<DeleteViewPayloadProps> =>
+	axios.delete(`/explorer/views/${uuid}`);

frontend/src/api/saveView/getAllViews.ts

@@ -0,0 +1,9 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { AllViewsProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const getAllViews = (
+	sourcepage: DataSource | 'meter',
+): Promise<AxiosResponse<AllViewsProps>> =>
+	axios.get(`/explorer/views?sourcePage=${sourcepage}`);

frontend/src/api/saveView/getViewById.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { ViewProps } from 'types/api/saveViews/types';
+
+/**
+ * Fetches a single saved view by ID (`GET /api/v1/explorer/views/{viewId}`).
+ *
+ * Hand-maintained alongside the other `api/saveView/*` clients — explorer views
+ * are not in `docs/api/openapi.yml`, so Orval does not generate a hook here
+ * (unlike e.g. `useGetChannelByID` under `api/generated/services/channels`).
+ *
+ * Used by the AI assistant "Open view" action to load `compositeQuery` and
+ * navigate to the correct explorer without listing every view per source page.
+ * See `container/AIAssistant/components/ActionsSection/utils/openSavedView.ts`.
+ */
+export interface GetViewByIdProps {
+	status: string;
+	data: ViewProps;
+}
+
+export const getViewById = (
+	viewKey: string,
+): Promise<AxiosResponse<GetViewByIdProps>> =>
+	axios.get(`/explorer/views/${viewKey}`);

frontend/src/api/saveView/saveView.ts

@@ -0,0 +1,16 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
+
+export const saveView = ({
+	compositeQuery,
+	sourcePage,
+	viewName,
+	extraData,
+}: SaveViewProps): Promise<AxiosResponse<SaveViewPayloadProps>> =>
+	axios.post('/explorer/views', {
+		name: viewName,
+		sourcePage,
+		compositeQuery,
+		extraData,
+	});

frontend/src/api/saveView/updateView.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import {
+	UpdateViewPayloadProps,
+	UpdateViewProps,
+} from 'types/api/saveViews/types';
+
+export const updateView = ({
+	compositeQuery,
+	viewName,
+	extraData,
+	sourcePage,
+	viewKey,
+}: UpdateViewProps): Promise<UpdateViewPayloadProps> =>
+	axios.put(`/explorer/views/${viewKey}`, {
+		name: viewName,
+		compositeQuery,
+		extraData,
+		sourcePage,
+	});

frontend/src/api/utils.ts

@@ -1,7 +1,7 @@
 import deleteLocalStorageKey from 'api/browser/localstorage/remove';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 
 import deleteSession from './v2/sessions/delete';
 
@@ -21,5 +21,5 @@ export const Logout = async (): Promise<void> => {
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
-	navigate(ROUTES.LOGIN);
+	history.push(ROUTES.LOGIN);
 };

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

@@ -21,7 +21,6 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
-	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -905,12 +904,6 @@ 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,7 +51,6 @@ 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';
@@ -275,7 +274,6 @@ 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/assets/Logos/caddy.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#1F88C0" d="M11.094.47c-.842 0-1.696.092-2.552.288a11.37 11.37 0 0 0-4.87 2.423 10.632 10.632 0 0 0-2.36 2.826A10.132 10.132 0 0 0 .305 8.582c-.398 1.62-.4 3.336-.043 5.048.085.405.183.809.31 1.212a11.85 11.85 0 0 0 1.662 3.729 3.273 3.273 0 0 0-.086.427 3.323 3.323 0 0 0 2.848 3.71 3.279 3.279 0 0 0 1.947-.346c1.045.51 2.17.864 3.339 1.04a11.66 11.66 0 0 0 4.285-.155 11.566 11.566 0 0 0 4.936-2.485 10.643 10.643 0 0 0 2.352-2.894 11.164 11.164 0 0 0 1.356-4.424 11.214 11.214 0 0 0-.498-4.335c.175-.077.338-.175.486-.293a.444.444 89.992 0 0 .001 0c.402-.322.693-.794.777-1.342a2.146 2.146 0 0 0-1.79-2.434 2.115 2.115 0 0 0-1.205.171c-.038-.043-.078-.086-.113-.13a11.693 11.693 0 0 0-3.476-2.93 13.348 13.348 0 0 0-1.76-.81 13.55 13.55 0 0 0-2.06-.613A12.121 12.121 0 0 0 11.093.47Zm.714.328c.345-.004.688.01 1.028.042a9.892 9.892 0 0 1 2.743.639c.984.39 1.89.958 2.707 1.632.803.662 1.502 1.45 2.091 2.328.026.039.048.08.07.12a2.12 2.12 0 0 0-.435 2.646c-.158.114-.97.692-1.634 1.183-.414.308-.733.557-.733.557l.581.68s.296-.276.665-.638c.572-.562 1.229-1.233 1.395-1.403a2.122 2.122 0 0 0 1.907.677 11.229 11.229 0 0 1-.013 4.046 11.41 11.41 0 0 1-1.475 3.897 12.343 12.343 0 0 1-2.079 2.587c-1.19 1.125-2.633 2.022-4.306 2.531a10.826 10.826 0 0 1-3.973.484 11.04 11.04 0 0 1-3.057-.652 3.304 3.304 0 0 0 1.417-2.294 3.275 3.275 0 0 0-.294-1.842c.18-.162.403-.363.656-.6 1.015-.955 2.353-2.303 2.353-2.303l-.47-.599s-1.63.972-2.801 1.728c-.307.198-.573.378-.777.517a3.273 3.273 0 0 0-1.516-.611c-1.507-.198-2.927.672-3.487 2.017a10.323 10.323 0 0 1-.695-1.078A10.92 10.92 0 0 1 .728 14.8a10.35 10.35 0 0 1-.2-1.212c-.164-1.653.103-3.258.629-4.754a12.95 12.95 0 0 1 1.087-2.288c.57-.968 1.248-1.872 2.069-2.656A11.013 11.013 0 0 1 11.808.797Zm-.147 3.257a3.838 3.838 0 0 0-3.82 3.82v2.36h-.94c-.751 0-1.377.625-1.377 1.377v3.8h1.46v-3.718h9.354v6.264H10.02v1.46h6.4c.751 0 1.377-.625 1.377-1.377v-6.43c0-.751-.626-1.377-1.377-1.377h-.94v-2.36a3.838 3.838 0 0 0-3.82-3.819zm0 1.46a2.371 2.371 0 0 1 2.36 2.36v2.36H9.3v-2.36a2.372 2.372 0 0 1 2.36-2.36zm10.141.392a1.253 1.253 0 0 1 1.296 1.434c-.049.319-.217.59-.453.78-.266.213-.61.318-.968.264a1.253 1.253 0 0 1-1.045-1.42 1.255 1.255 0 0 1 1.17-1.058zM5.384 17.425a2.02 2.02 0 0 1 1.917 1.298c.116.3.159.628.114.967a2.015 2.015 0 0 1-2.249 1.728 2.016 2.016 0 0 1-1.727-2.25 2.017 2.017 0 0 1 1.945-1.743z"/></svg>

frontend/src/assets/Logos/hono.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#E36002" d="M12.445.002a45.529 45.529 0 0 0-5.252 8.146 8.595 8.595 0 0 1-.555-.53 27.796 27.796 0 0 0-1.205-1.542 8.762 8.762 0 0 0-1.251 2.12 20.743 20.743 0 0 0-1.448 5.88 8.867 8.867 0 0 0 .338 3.468c1.312 3.48 3.794 5.593 7.445 6.337 3.055.438 5.755-.333 8.097-2.312 2.677-2.59 3.359-5.634 2.047-9.132a33.287 33.287 0 0 0-2.988-5.59A91.34 91.34 0 0 0 12.615.053a.216.216 0 0 0-.17-.051Zm-.336 3.906a50.93 50.93 0 0 1 4.794 6.552c.448.767.817 1.57 1.108 2.41.606 2.386-.044 4.354-1.951 5.904-1.845 1.298-3.87 1.683-6.072 1.156-2.376-.737-3.75-2.335-4.121-4.794a5.107 5.107 0 0 1 .242-2.266c.358-.908.79-1.774 1.3-2.601l1.446-2.121a397.33 397.33 0 0 0 3.254-4.24Z"/></svg>

frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx

@@ -2,13 +2,6 @@ import { act, render, screen } from '@testing-library/react';
 
 import LabelColumn from './LabelColumn';
 
-// The global CSS mock maps every class to undefined; keep the names so overflow is assertable.
-jest.mock('./LabelColumn.module.scss', () => ({
-	labelColumn: 'labelColumn',
-	overflowed: 'overflowed',
-	shrinkable: 'shrinkable',
-}));
-
 const BADGE_WIDTH = 60;
 
 let resizeCallbacks: ResizeObserverCallback[] = [];
@@ -84,20 +77,6 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
 	});
 
-	it('should hide the labels past the visible count', () => {
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		// 3 badges (180px) + overflow reserve (40px)
-		mockLayout(220);
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		const isHidden = (label: string): boolean =>
-			screen.getByTestId(`label-tag-${label}`).closest('.overflowed') !== null;
-
-		expect(labels.filter(isHidden)).toStrictEqual(['team', 'owner', 'version']);
-		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
-	});
-
 	it('should render label with value when value prop provided', () => {
 		const labels = ['env'];
 		const value = { env: 'production' };

frontend/src/components/AuthError/AuthError.tsx

@@ -10,7 +10,7 @@ interface AuthErrorProps {
 
 function AuthError({ error }: AuthErrorProps): JSX.Element {
 	return (
-		<div className="auth-error-container" data-testid="auth-error">
+		<div className="auth-error-container">
 			<ErrorContent
 				error={error}
 				icon={<CircleAlert size={12} className="auth-error-icon" />}

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Row, Select, Spin } from 'antd';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
@@ -36,7 +35,8 @@ export function FilterSelect({
 		useCeleryFilterOptions(filterType);
 
 	const urlQuery = useUrlQuery();
-	const location = useAppLocation();
+	const history = useHistory();
+	const location = useLocation();
 
 	// Add state to track the current search input
 	const [searchValue, setSearchValue] = useState<string>('');
@@ -66,7 +66,7 @@ export function FilterSelect({
 				setQueryParamsFromOptions(
 					value as string[],
 					urlQuery,
-					navigate,
+					history,
 					location,
 					queryParam,
 				);
@@ -77,6 +77,7 @@ export function FilterSelect({
 			handleSearch,
 			shouldSetQueryParams,
 			urlQuery,
+			history,
 			location,
 			queryParam,
 			onChange,

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -512,7 +512,6 @@ export default function CeleryOverviewTable({
 				allowClear
 			/>
 			<ResizeTable
-				data-testid="mq-overview-table"
 				className="celery-overview-table"
 				pagination={paginationConfig}
 				size="middle"

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,5 @@
+import { useHistory, useLocation } from 'react-router-dom';
 import { Select, Spin } from 'antd';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { Typography } from '@signozhq/ui/typography';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
@@ -17,7 +16,8 @@ import './CeleryTaskConfigOptions.styles.scss';
 function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } =
 		useCeleryFilterOptions('celery.task_name');
-	const location = useAppLocation();
+	const history = useHistory();
+	const location = useLocation();
 
 	const urlQuery = useUrlQuery();
 
@@ -28,7 +28,6 @@ function CeleryTaskConfigOptions(): JSX.Element {
 					Task Name
 				</Typography.Text>
 				<Select
-					data-testid="celery-task-name-select"
 					placeholder="Task Name"
 					showSearch
 					mode="multiple"
@@ -53,7 +52,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 						setQueryParamsFromOptions(
 							value,
 							urlQuery,
-							navigate,
+							history,
 							location,
 							QueryParams.taskName,
 						);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/WidgetCard/config';
@@ -51,7 +50,8 @@ function CeleryTaskBar({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -68,13 +68,13 @@ function CeleryTaskBar({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/WidgetCard/config';
@@ -55,7 +54,8 @@ function CeleryTaskGraph({
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 	analyticsEvent?: string;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -83,13 +83,13 @@ function CeleryTaskGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	return (

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -105,10 +105,7 @@ export default function CeleryTaskGraphGrid({
 	};
 
 	return (
-		<div
-			className="celery-task-graph-grid-container"
-			data-testid="celery-graph-grid"
-		>
+		<div className="celery-task-graph-grid-container">
 			<div className="metric-based-graphs">
 				<CardContainer className="row-card" isDarkMode={isDarkMode}>
 					<div className="row-panel">

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Col, Row } from 'antd';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -49,7 +48,8 @@ function CeleryTaskLatencyGraph({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -80,13 +80,13 @@ function CeleryTaskLatencyGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	const selectedFilters = useMemo(

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx

@@ -80,7 +80,6 @@ function CeleryTaskStateGraphConfig({
 			{tabs.map((tab, index) => (
 				<Col
 					key={tab.key}
-					data-testid={`celery-state-tab-${tab.key}`}
 					onClick={(): void => handleTabClick(tab.key as CeleryTaskState)}
 					className={`celery-task-states__tab ${
 						tab.key === barState ? 'celery-task-states__tab--selected' : ''

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,5 +1,5 @@
 import { QueryParams } from 'constants/query';
-import type { AppLocation, NavigateFn } from 'lib/router/types';
+import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
 import { Widgets } from 'types/api/widgets/widget';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -17,13 +17,13 @@ export function getValuesFromQueryParams(
 export function setQueryParamsFromOptions(
 	value: string[],
 	urlQuery: URLSearchParams,
-	navigate: NavigateFn,
-	location: AppLocation,
+	history: History<unknown>,
+	location: Location<unknown>,
 	queryParams: QueryParams,
 ): void {
 	urlQuery.set(queryParams, value.join(','));
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-	navigate(generatedUrl, { replace: true });
+	history.replace(generatedUrl);
 }
 
 export function getFiltersFromQueryParams(

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import logEvent from 'api/common/logEvent';
+import { MessageSquareText } from '@signozhq/icons';
+
+export default function ChatSupportGateway(): JSX.Element {
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
+	const { pathname } = useLocation();
+
+	return (
+		<>
+			<div className="chat-support-gateway">
+				<Button
+					className="chat-support-gateway-btn"
+					onClick={(): void => {
+						logEvent('Disabled Chat Support: Clicked', {
+							source: `chat support icon`,
+							page: pathname,
+						});
+
+						setIsAddCreditCardModalOpen(true);
+					}}
+				>
+					<MessageSquareText size={24} />
+				</Button>
+			</div>
+
+			<AddCreditCardModal
+				open={isAddCreditCardModalOpen}
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
+		</>
+	);
+}

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -1,12 +1,20 @@
 import { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import dayjs from 'dayjs';
-import { mockAppLocation } from 'tests/router-mocks';
 import * as timeUtils from 'utils/timeUtils';
 
 import CustomTimePicker from './CustomTimePicker';
 
-mockAppLocation({ pathname: '/test-path' });
+jest.mock('react-router-dom', () => {
+	const actual = jest.requireActual('react-router-dom');
+
+	return {
+		...actual,
+		useLocation: jest.fn().mockReturnValue({
+			pathname: '/test-path',
+		}),
+	};
+});
 
 jest.mock('react-redux', () => ({
 	...jest.requireActual('react-redux'),

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
@@ -109,7 +109,7 @@ function CustomTimePicker({
 	const [inputErrorDetails, setInputErrorDetails] = useState<
 		TimeRangeValidationResult['errorDetails'] | null
 	>(null);
-	const location = useAppLocation();
+	const location = useLocation();
 
 	const inputRef = useRef<InputRef>(null);
 	const initialInputValueOnOpenRef = useRef<string>('');

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -114,7 +114,7 @@ function CustomTimePickerPopoverContent({
 	customDateTimeInputStatus = CustomTimePickerInputStatus.UNSET,
 	inputErrorDetails,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 
 	const isLogsExplorerPage = useMemo(
 		() => pathname === ROUTES.LOGS_EXPLORER,
@@ -251,7 +251,6 @@ function CustomTimePickerPopoverContent({
 						<Button
 							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
 							type="text"
-							data-testid="time-picker-live"
 							onClick={handleGoLive}
 						>
 							Live

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -88,7 +88,6 @@ function TimezoneItem({
 	return (
 		<button
 			type="button"
-			data-testid={`timezone-item-${timezone.value}`}
 			className={cx('timezone-picker__item', {
 				selected: isSelected,
 				'has-divider': timezone.hasDivider,

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryParams } from 'constants/query';
-import { mockAppLocation } from 'tests/router-mocks';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import CustomTimePicker from '../CustomTimePicker';
@@ -60,6 +59,10 @@ jest.mock('providers/Timezone', () => ({
 	}),
 }));
 
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const now = Date.now();
 const defaultProps = {
@@ -82,7 +85,6 @@ describe('CustomTimePicker - zoom out button', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-		mockAppLocation({ pathname: '/logs-explorer' });
 	});
 
 	afterEach(() => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { message } from 'antd';
 import configureStore from 'redux-mock-store';
 import store from 'store';
@@ -195,23 +194,6 @@ describe.each([
 		});
 	});
 
-	it('sends the chosen jsonl format and 30k row limit', async () => {
-		renderWithStore(dataSource);
-		await userEvent.click(screen.getByTestId(testId));
-		await userEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
-		await userEvent.click(screen.getByRole('radio', { name: '30k' }));
-		await userEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
-		});
-		const callArgs = mockDownloadExportData.mock.calls[0][0];
-		expect(callArgs.format).toBe(DownloadFormats.JSONL);
-		expect(callArgs.body.compositeQuery.queries[0].spec.limit).toBe(
-			DownloadRowCounts.THIRTY_K,
-		);
-	});
-
 	it('clears groupBy and having in the export payload', async () => {
 		const mockQuery = createMockStagedQuery(dataSource);
 		mockQuery.builder.queryData[0].groupBy = [

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -52,7 +52,6 @@ function DeleteMemberDialog({
 				variant="solid"
 				color="danger"
 				onClick={onConfirm}
-				testId="member-delete-confirm-btn"
 				loading={isDeleting}
 				prefix={<Trash2 size={12} />}
 			>

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -624,7 +624,6 @@ function EditMemberDrawer({
 							disabledTooltip={getDeleteTooltip(isRootUser, isSelf)}
 							size="md"
 							onClick={(): void => setShowDeleteConfirm(true)}
-							testId="member-delete-btn"
 							disabled={isRootUser || isSelf}
 							variant="link"
 							color="danger"
@@ -638,7 +637,6 @@ function EditMemberDrawer({
 							disabledTooltip={ROOT_USER_TOOLTIP}
 							size="md"
 							onClick={handleGenerateResetLink}
-							testId="member-reset-link-btn"
 							disabled={isRootUser}
 							loading={isGeneratingLink || isLoadingTokenStatus}
 							variant="link"
@@ -676,7 +674,6 @@ function EditMemberDrawer({
 							color="primary"
 							disabled={!isDirty || isRootUser}
 							onClick={handleSave}
-							testId="member-save-btn"
 							loading={isSaving}
 						>
 							{isSaving ? 'Saving...' : 'Save Member Details'}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -42,12 +42,7 @@ function ResetLinkDialog({
 				</p>
 				<div className="reset-link-dialog__link-row">
 					<div className="reset-link-dialog__link-text-wrap">
-						<span
-							className="reset-link-dialog__link-text"
-							data-testid="reset-link-text"
-						>
-							{resetLink}
-						</span>
+						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
 						size="md"

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -0,0 +1,252 @@
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Button, Col, Popover, Row, Select, Space } from 'antd';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { Typography } from '@signozhq/ui/typography';
+import axios from 'axios';
+import TextToolTip from 'components/TextToolTip';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useOptionsMenu } from 'container/OptionsMenu';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useDeleteView } from 'hooks/saveViews/useDeleteView';
+import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { useUpdateView } from 'hooks/saveViews/useUpdateView';
+import useErrorNotification from 'hooks/useErrorNotification';
+import { useNotifications } from 'hooks/useNotifications';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { ExploreHeaderToolTip, SaveButtonText } from './constants';
+import MenuItemGenerator from './MenuItemGenerator';
+import SaveViewWithName from './SaveViewWithName';
+import {
+	DropDownOverlay,
+	ExplorerCardHeadContainer,
+	OffSetCol,
+} from './styles';
+import { ExplorerCardProps } from './types';
+import { deleteViewHandler } from './utils';
+import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
+
+function ExplorerCard({
+	sourcepage,
+	children,
+}: ExplorerCardProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [, setCopyUrl] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+
+	const onCopyUrlHandler = (): void => {
+		setCopyUrl(window.location.href);
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};
+
+	const {
+		currentQuery,
+		panelType,
+		redirectWithQueryBuilderData,
+		updateAllQueriesOperators,
+		isStagedQueryUpdated,
+	} = useQueryBuilder();
+
+	const {
+		data: viewsData,
+		isLoading,
+		error,
+		isRefetching,
+		refetch: refetchAllView,
+	} = useGetAllViews(sourcepage);
+
+	useErrorNotification(error);
+
+	const handleOpenChange = (newOpen = false): void => {
+		setIsOpen(newOpen);
+	};
+
+	const { viewName, viewKey } = useGetSavedViewParams();
+
+	const { options } = useOptionsMenu({
+		storageKey:
+			sourcepage === DataSource.TRACES
+				? LOCALSTORAGE.TRACES_LIST_OPTIONS
+				: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: sourcepage,
+		aggregateOperator: StringOperators.NOOP,
+	});
+
+	const isQueryUpdated = isStagedQueryUpdated(
+		viewsData?.data?.data,
+		viewKey,
+		options,
+	);
+
+	const { mutateAsync: updateViewAsync } = useUpdateView({
+		compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
+		viewKey,
+		extraData: '',
+		sourcePage: sourcepage,
+		viewName,
+	});
+
+	const { mutateAsync: deleteViewAsync } = useDeleteView(viewKey);
+
+	const showErrorNotification = (err: Error): void => {
+		notifications.error({
+			message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+		});
+	};
+
+	const onDeleteHandler = (): void =>
+		deleteViewHandler({
+			deleteViewAsync,
+			notifications,
+			panelType,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			viewId: viewKey,
+			viewKey,
+			updateAllQueriesOperators,
+			sourcePage: sourcepage,
+		});
+
+	const onUpdateQueryHandler = (): void => {
+		updateViewAsync(
+			{
+				compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
+				viewKey,
+				extraData: '',
+				sourcePage: sourcepage,
+				viewName,
+			},
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'View Updated Successfully',
+					});
+					refetchAllView();
+				},
+				onError: (err) => {
+					showErrorNotification(err);
+				},
+			},
+		);
+	};
+
+	const moreOptionItems: DropdownItemType[] = [
+		{
+			type: 'item',
+			value: 'delete',
+			label: <Typography.Text strong>Delete</Typography.Text>,
+			onClick: onDeleteHandler,
+			prefix: <Trash2 size="md" />,
+		},
+	];
+
+	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
+	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
+
+	const showSaveView = false;
+
+	return (
+		<>
+			{showSaveView && (
+				<ExplorerCardHeadContainer size="small">
+					<Row align="middle">
+						<Col span={6}>
+							<Space>
+								<Typography>Query Builder</Typography>
+								<TextToolTip
+									url={ExploreHeaderToolTip.url}
+									text={ExploreHeaderToolTip.text}
+									useFilledIcon={false}
+								/>
+							</Space>
+						</Col>
+						<OffSetCol span={18}>
+							<Space size="large">
+								{viewsData?.data.data && viewsData?.data.data.length && (
+									<Space>
+										<Select
+											getPopupContainer={popupContainer}
+											loading={isLoading || isRefetching}
+											showSearch
+											placeholder="Select a view"
+											dropdownStyle={DropDownOverlay}
+											dropdownMatchSelectWidth={false}
+											optionLabelProp="value"
+											value={viewName || undefined}
+										>
+											{viewsData?.data.data.map((view) => (
+												<Select.Option key={view.id} value={view.name}>
+													<MenuItemGenerator
+														viewName={view.name}
+														viewKey={viewKey}
+														createdBy={view.createdBy}
+														uuid={view.id}
+														refetchAllView={refetchAllView}
+														viewData={viewsData.data.data}
+														sourcePage={sourcepage}
+													/>
+												</Select.Option>
+											))}
+										</Select>
+									</Space>
+								)}
+								{isQueryUpdated && (
+									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
+										Save changes
+									</Button>
+								)}
+								<Popover
+									getPopupContainer={popupContainer}
+									placement="bottomLeft"
+									trigger="click"
+									content={
+										<SaveViewWithName
+											sourcePage={sourcepage}
+											handlePopOverClose={handleOpenChange}
+											refetchAllView={refetchAllView}
+										/>
+									}
+									showArrow={false}
+									open={isOpen}
+									onOpenChange={handleOpenChange}
+								>
+									<Button
+										type={saveButtonType}
+										icon={saveButtonIcon}
+										data-testid="traces-save-view-action"
+									>
+										{isQueryUpdated
+											? SaveButtonText.SAVE_AS_NEW_VIEW
+											: SaveButtonText.SAVE_VIEW}
+									</Button>
+								</Popover>
+								<Share2 onClick={onCopyUrlHandler} size="md" />
+								{viewKey && (
+									<Dropdown
+										items={moreOptionItems}
+										nativeButton
+										align="end"
+										side="bottom"
+									>
+										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
+									</Dropdown>
+								)}
+							</Space>
+						</OffSetCol>
+					</Row>
+				</ExplorerCardHeadContainer>
+			)}
+
+			<div>{children}</div>
+		</>
+	);
+}
+
+export default ExplorerCard;

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -0,0 +1,103 @@
+import { MouseEvent, useCallback } from 'react';
+import { Trash2 } from '@signozhq/icons';
+import { Col, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useDeleteView } from 'hooks/saveViews/useDeleteView';
+import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
+import { useNotifications } from 'hooks/useNotifications';
+
+import { MenuItemContainer } from './styles';
+import { MenuItemLabelGeneratorProps } from './types';
+import {
+	deleteViewHandler,
+	getViewDetailsUsingViewKey,
+	trimViewName,
+} from './utils';
+
+function MenuItemGenerator({
+	viewName,
+	viewKey,
+	createdBy,
+	uuid,
+	viewData,
+	refetchAllView,
+	sourcePage,
+}: MenuItemLabelGeneratorProps): JSX.Element {
+	const { panelType, redirectWithQueryBuilderData, updateAllQueriesOperators } =
+		useQueryBuilder();
+	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+
+	const { notifications } = useNotifications();
+
+	const { mutateAsync: deleteViewAsync } = useDeleteView(uuid);
+
+	const onDeleteHandler = (event: MouseEvent<SVGSVGElement>): void => {
+		event.stopPropagation();
+		deleteViewHandler({
+			deleteViewAsync,
+			notifications,
+			panelType,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			viewId: uuid,
+			viewKey,
+			updateAllQueriesOperators,
+			sourcePage,
+		});
+	};
+
+	const onMenuItemSelectHandler = useCallback(
+		({ key }: { key: string }): void => {
+			const currentViewDetails = getViewDetailsUsingViewKey(key, viewData);
+			if (!currentViewDetails) {
+				return;
+			}
+			const { query, name, id, panelType: currentPanelType } = currentViewDetails;
+
+			handleExplorerTabChange(currentPanelType, {
+				query,
+				viewName: name,
+				viewKey: id,
+			});
+		},
+		[viewData, handleExplorerTabChange],
+	);
+
+	const onLabelClickHandler = (): void => {
+		onMenuItemSelectHandler({
+			key: uuid,
+		});
+	};
+
+	const newViewName = trimViewName(viewName);
+
+	return (
+		<MenuItemContainer onClick={onLabelClickHandler}>
+			<Row justify="space-between">
+				<Col span={22}>
+					<Row>
+						<Tooltip title={viewName}>
+							<Typography.Text strong>{newViewName}</Typography.Text>
+						</Tooltip>
+					</Row>
+					<Row>
+						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
+					</Row>
+				</Col>
+				<Col span={2}>
+					<Typography.Link>
+						<Trash2
+							role="img"
+							aria-label="Delete view"
+							onClick={onDeleteHandler}
+							size="md"
+						/>
+					</Typography.Link>
+				</Col>
+			</Row>
+		</MenuItemContainer>
+	);
+}
+
+export default MenuItemGenerator;

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSaveView } from 'hooks/saveViews/useSaveView';
+import { useNotifications } from 'hooks/useNotifications';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+
+import { SaveButton } from './styles';
+import { SaveViewFormProps, SaveViewWithNameProps } from './types';
+import { saveViewHandler } from './utils';
+
+function SaveViewWithName({
+	sourcePage,
+	handlePopOverClose,
+	refetchAllView,
+}: SaveViewWithNameProps): JSX.Element {
+	const [form] = Form.useForm<SaveViewFormProps>();
+	const { t } = useTranslation(['explorer']);
+	const { currentQuery, panelType, redirectWithQueryBuilderData } =
+		useQueryBuilder();
+	const { notifications } = useNotifications();
+	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
+
+	const { isLoading, mutateAsync: saveViewAsync } = useSaveView({
+		viewName: form.getFieldValue('viewName'),
+		compositeQuery,
+		sourcePage,
+		extraData: '',
+	});
+
+	const onSaveHandler = (): void => {
+		saveViewHandler({
+			compositeQuery,
+			handlePopOverClose,
+			extraData: '',
+			notifications,
+			panelType: panelType || PANEL_TYPES.LIST,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			saveViewAsync,
+			sourcePage,
+			viewName: form.getFieldValue('viewName'),
+			form,
+		});
+	};
+
+	return (
+		<Card>
+			<Typography>{t('name_of_the_view')}</Typography>
+			<Form form={form} onFinish={onSaveHandler} requiredMark>
+				<Form.Item
+					name={['viewName']}
+					required
+					rules={[
+						{
+							required: true,
+							message: 'Please enter view name',
+						},
+					]}
+				>
+					<Input placeholder="Enter Name" />
+				</Form.Item>
+				<SaveButton
+					htmlType="submit"
+					type="primary"
+					loading={isLoading}
+					data-testid="save-view-name-action-button"
+				>
+					Save
+				</SaveButton>
+			</Form>
+		</Card>
+	);
+}
+
+export default SaveViewWithName;

frontend/src/components/ExplorerCard/__mock__/viewData.ts

@@ -0,0 +1,32 @@
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const viewMockData: ViewProps[] = [
+	{
+		id: 'view1',
+		name: 'View 1',
+		createdBy: 'User 1',
+		category: 'category 1',
+		compositeQuery: {} as ICompositeMetricQuery,
+		createdAt: '2021-07-07T06:31:00.000Z',
+		updatedAt: '2021-07-07T06:33:00.000Z',
+		extraData: '',
+		sourcePage: DataSource.TRACES,
+		tags: [],
+		updatedBy: 'User 1',
+	},
+	{
+		id: 'view2',
+		name: 'View 2',
+		createdBy: 'User 2',
+		category: 'category 2',
+		compositeQuery: {} as ICompositeMetricQuery,
+		createdAt: '2021-07-07T06:30:00.000Z',
+		updatedAt: '2021-07-07T06:30:00.000Z',
+		extraData: '',
+		sourcePage: DataSource.TRACES,
+		tags: [],
+		updatedBy: 'User 2',
+	},
+];

frontend/src/components/ExplorerCard/constants.ts

@@ -0,0 +1,9 @@
+export const ExploreHeaderToolTip = {
+	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	text: 'More details on how to use query builder',
+};
+
+export const SaveButtonText = {
+	SAVE_AS_NEW_VIEW: 'Save as new view',
+	SAVE_VIEW: 'Save view',
+};

frontend/src/components/ExplorerCard/styles.ts

@@ -0,0 +1,29 @@
+import { Button, Card, Col } from 'antd';
+import styled, { CSSProperties } from 'styled-components';
+
+export const ExplorerCardHeadContainer = styled(Card)`
+	margin: 1rem 0;
+	padding: 0;
+`;
+
+export const OffSetCol = styled(Col)`
+	text-align: right;
+`;
+
+export const SaveButton = styled(Button)`
+	&&& {
+		margin: 1rem 0;
+		width: 5rem;
+	}
+`;
+
+export const DropDownOverlay: CSSProperties = {
+	maxHeight: '20rem',
+	overflowY: 'auto',
+	width: '20rem',
+	padding: 0,
+};
+
+export const MenuItemContainer = styled(Card)`
+	padding: 0;
+`;

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { viewMockData } from '../__mock__/viewData';
+import ExplorerCard from '../ExplorerCard';
+
+const historyReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
+	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useGetAllViews', () => ({
+	useGetAllViews: jest.fn(() => ({
+		data: { data: { data: viewMockData } },
+		isLoading: false,
+		error: null,
+		isRefetching: false,
+		refetch: jest.fn(),
+	})),
+}));
+
+jest.mock('hooks/saveViews/useUpdateView', () => ({
+	useUpdateView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+jest.mock('hooks/saveViews/useDeleteView', () => ({
+	useDeleteView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+// Mock usePreferenceSync
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): any => ({
+		preferences: {
+			columns: [],
+			formatting: {
+				maxLines: 1,
+				format: 'table',
+				fontSize: 'small',
+				version: 1,
+			},
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	}),
+}));
+
+describe('ExplorerCard', () => {
+	it('renders a card with a title and a description', () => {
+		render(
+			<MockQueryClientProvider>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
+			</MockQueryClientProvider>,
+		);
+		expect(screen.queryByText('Query Builder')).not.toBeInTheDocument();
+	});
+
+	it('renders a save view button', () => {
+		render(
+			<MockQueryClientProvider>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
+			</MockQueryClientProvider>,
+		);
+		expect(screen.queryByText('Save view')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { viewMockData } from '../__mock__/viewData';
+import MenuItemGenerator from '../MenuItemGenerator';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
+	}),
+}));
+
+jest.mock('antd', () => ({
+	...jest.requireActual('antd'),
+	useForm: jest.fn().mockReturnValue({
+		onFinish: jest.fn(),
+	}),
+}));
+
+describe('MenuItemGenerator', () => {
+	it('should render MenuItemGenerator component', () => {
+		const screen = render(
+			<MockQueryClientProvider>
+				<MenuItemGenerator
+					viewName={viewMockData[0].name}
+					viewKey={viewMockData[0].id}
+					createdBy={viewMockData[0].createdBy}
+					uuid={viewMockData[0].id}
+					refetchAllView={jest.fn()}
+					viewData={viewMockData}
+					sourcePage={DataSource.TRACES}
+				/>
+			</MockQueryClientProvider>,
+		);
+
+		expect(screen.getByText(viewMockData[0].name)).toBeInTheDocument();
+	});
+
+	it('should call onMenuItemSelectHandler on click of MenuItemGenerator', () => {
+		render(
+			<MockQueryClientProvider>
+				<MenuItemGenerator
+					viewName={viewMockData[0].name}
+					viewKey={viewMockData[0].id}
+					createdBy={viewMockData[0].createdBy}
+					uuid={viewMockData[0].id}
+					refetchAllView={jest.fn()}
+					viewData={viewMockData}
+					sourcePage={DataSource.TRACES}
+				/>
+			</MockQueryClientProvider>,
+		);
+
+		const spanElement = screen.getByRole('img', {
+			name: /delete view/i,
+		});
+
+		expect(spanElement).toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -0,0 +1,63 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { fireEvent, render } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SaveViewWithName from '../SaveViewWithName';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
+	}),
+}));
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+		},
+	},
+});
+
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useSaveView', () => ({
+	useSaveView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+describe('SaveViewWithName', () => {
+	it('should render SaveViewWithName component', () => {
+		const screen = render(
+			<QueryClientProvider client={queryClient}>
+				<SaveViewWithName
+					sourcePage={DataSource.TRACES}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
+				/>
+			</QueryClientProvider>,
+		);
+
+		expect(screen.getByText('Save')).toBeInTheDocument();
+	});
+
+	it('should call saveViewAsync on click of Save button', () => {
+		const screen = render(
+			<QueryClientProvider client={queryClient}>
+				<SaveViewWithName
+					sourcePage={DataSource.TRACES}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
+				/>
+			</QueryClientProvider>,
+		);
+
+		fireEvent.click(screen.getByText('Save'));
+
+		expect(screen.getByText('Save')).toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/types.ts

@@ -0,0 +1,92 @@
+import { UseMutateAsyncFunction } from 'react-query';
+import { FormInstance } from 'antd';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { AxiosResponse } from 'axios';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	DeleteViewPayloadProps,
+	SaveViewPayloadProps,
+	SaveViewProps,
+	ViewProps,
+} from 'types/api/saveViews/types';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
+
+export interface ExplorerCardProps {
+	sourcepage: DataSource;
+	children: React.ReactNode;
+}
+
+export type GetViewDetailsUsingViewKey = (
+	viewKey: string,
+	data: ViewProps[] | undefined,
+) =>
+	| {
+			query: Query;
+			name: string;
+			id: string;
+			panelType: PANEL_TYPES;
+			extraData?: string;
+	  }
+	| undefined;
+
+export interface IsQueryUpdatedInViewProps {
+	viewKey: string;
+	data: ViewProps[] | undefined;
+	stagedQuery: Query | null;
+	currentPanelType: PANEL_TYPES | null;
+	options: OptionsQuery;
+}
+
+export interface SaveViewWithNameProps {
+	sourcePage: ExplorerCardProps['sourcepage'];
+	handlePopOverClose: VoidFunction;
+	refetchAllView: VoidFunction;
+}
+
+export interface SaveViewFormProps {
+	viewName: string;
+}
+
+export interface MenuItemLabelGeneratorProps {
+	viewName: string;
+	viewKey: string;
+	createdBy: string;
+	uuid: string;
+	viewData: ViewProps[];
+	refetchAllView: VoidFunction;
+	sourcePage: ExplorerCardProps['sourcepage'];
+}
+
+export interface SaveViewHandlerProps {
+	viewName: string;
+	compositeQuery: ICompositeMetricQuery;
+	sourcePage: ExplorerCardProps['sourcepage'];
+	extraData: string;
+	panelType: PANEL_TYPES | null;
+	notifications: NotificationInstance;
+	refetchAllView: SaveViewWithNameProps['refetchAllView'];
+	saveViewAsync: UseMutateAsyncFunction<
+		AxiosResponse<SaveViewPayloadProps>,
+		Error,
+		SaveViewProps,
+		SaveViewPayloadProps
+	>;
+	handlePopOverClose: SaveViewWithNameProps['handlePopOverClose'];
+	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
+	form: FormInstance<SaveViewFormProps>;
+}
+
+export interface DeleteViewHandlerProps {
+	deleteViewAsync: UseMutateAsyncFunction<DeleteViewPayloadProps, Error, string>;
+	refetchAllView: MenuItemLabelGeneratorProps['refetchAllView'];
+	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
+	notifications: NotificationInstance;
+	panelType: PANEL_TYPES | null;
+	viewKey: string;
+	viewId: string;
+	updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'];
+	sourcePage: ExplorerCardProps['sourcepage'];
+}

frontend/src/components/ExplorerCard/utils.ts

@@ -0,0 +1,204 @@
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import axios from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import isEqual from 'lodash-es/isEqual';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	DeleteViewHandlerProps,
+	GetViewDetailsUsingViewKey,
+	IsQueryUpdatedInViewProps,
+	SaveViewHandlerProps,
+} from './types';
+
+export const showErrorNotification = (
+	notifications: NotificationInstance,
+	err: Error,
+): void => {
+	notifications.error({
+		message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+	});
+};
+
+export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
+	viewKey,
+	data,
+) => {
+	const selectedView = data?.find((view) => view.id === viewKey);
+	if (selectedView) {
+		const { compositeQuery, name, id, extraData } = selectedView;
+		const query = mapQueryDataFromApi(compositeQuery);
+		return { query, name, id, panelType: compositeQuery.panelType, extraData };
+	}
+	return undefined;
+};
+
+export const omitIdFromQuery = (query: Query | null): any => ({
+	...query,
+	builder: {
+		...query?.builder,
+		queryData: query?.builder.queryData.map((queryData) => {
+			const { id: _aggregateAttributeId, ...rest } =
+				queryData.aggregateAttribute || {};
+			const newAggregateAttribute = rest;
+			const newGroupByAttributes = queryData.groupBy.map((groupByAttribute) => {
+				const { id: _groupByAttributeId, ...rest } = groupByAttribute;
+				return rest;
+			});
+			const newItems = queryData.filters?.items?.map((item) => {
+				const { id: _itemId, ...newItem } = item;
+				if (item.key) {
+					const { id: _keyId, ...rest } = item.key;
+					return {
+						...newItem,
+						key: rest,
+					};
+				}
+				return newItem;
+			});
+			return {
+				...queryData,
+				aggregateAttribute: newAggregateAttribute,
+				groupBy: newGroupByAttributes,
+				filters: {
+					...queryData.filters,
+					items: newItems,
+				},
+				limit: queryData.limit ? queryData.limit : 0,
+				offset: queryData.offset ? queryData.offset : 0,
+				pageSize: queryData.pageSize ? queryData.pageSize : 0,
+			};
+		}),
+	},
+});
+
+export const isQueryUpdatedInView = ({
+	viewKey,
+	data,
+	stagedQuery,
+	currentPanelType,
+	options,
+}: IsQueryUpdatedInViewProps): boolean => {
+	const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data);
+	if (!currentViewDetails) {
+		return false;
+	}
+	const { query, panelType, extraData } = currentViewDetails;
+
+	// Omitting id from aggregateAttribute and groupBy
+	const updatedCurrentQuery = omitIdFromQuery(stagedQuery);
+
+	if (
+		updatedCurrentQuery?.builder === undefined ||
+		updatedCurrentQuery.clickhouse_sql === undefined ||
+		updatedCurrentQuery.promql === undefined
+	) {
+		return false;
+	}
+	return (
+		panelType !== currentPanelType ||
+		!isEqual(query.builder, updatedCurrentQuery?.builder) ||
+		!isEqual(query.clickhouse_sql, updatedCurrentQuery?.clickhouse_sql) ||
+		!isEqual(query.promql, updatedCurrentQuery?.promql) ||
+		!isEqual(
+			options?.selectColumns,
+			extraData && JSON.parse(extraData)?.selectColumns,
+		) ||
+		(stagedQuery?.builder?.queryData?.[0]?.dataSource === DataSource.LOGS &&
+			(!isEqual(options?.format, extraData && JSON.parse(extraData)?.format) ||
+				!isEqual(options?.maxLines, extraData && JSON.parse(extraData)?.maxLines) ||
+				!isEqual(options?.fontSize, extraData && JSON.parse(extraData)?.fontSize)))
+	);
+};
+
+export const saveViewHandler = ({
+	saveViewAsync,
+	refetchAllView,
+	notifications,
+	handlePopOverClose,
+	viewName,
+	compositeQuery,
+	sourcePage,
+	extraData,
+	redirectWithQueryBuilderData,
+	panelType,
+	form,
+}: SaveViewHandlerProps): void => {
+	saveViewAsync(
+		{
+			viewName,
+			compositeQuery,
+			sourcePage,
+			extraData,
+		},
+		{
+			onSuccess: (data) => {
+				refetchAllView();
+				redirectWithQueryBuilderData(mapQueryDataFromApi(compositeQuery), {
+					[QueryParams.panelTypes]: panelType,
+					[QueryParams.viewName]: viewName,
+					[QueryParams.viewKey]: data.data.data,
+				});
+				notifications.success({
+					message: 'View Saved Successfully',
+				});
+			},
+			onError: (err) => {
+				showErrorNotification(notifications, err);
+			},
+			onSettled: () => {
+				handlePopOverClose();
+				form.resetFields();
+			},
+		},
+	);
+};
+
+export const deleteViewHandler = ({
+	deleteViewAsync,
+	refetchAllView,
+	redirectWithQueryBuilderData,
+	notifications,
+	panelType,
+	viewKey,
+	viewId,
+	updateAllQueriesOperators,
+	sourcePage,
+}: DeleteViewHandlerProps): void => {
+	deleteViewAsync(viewKey, {
+		onSuccess: () => {
+			if (viewId === viewKey) {
+				redirectWithQueryBuilderData(
+					updateAllQueriesOperators(
+						initialQueriesMap[sourcePage],
+						panelType || PANEL_TYPES.LIST,
+						sourcePage,
+					),
+					{
+						[QueryParams.viewName]: '',
+						[QueryParams.panelTypes]: panelType,
+						[QueryParams.viewKey]: '',
+					},
+				);
+			}
+			notifications.success({
+				message: 'View Deleted Successfully',
+			});
+			refetchAllView();
+		},
+		onError: (err) => {
+			showErrorNotification(notifications, err);
+		},
+	});
+};
+
+export const trimViewName = (viewName: string): string => {
+	if (viewName.length > 20) {
+		return `${viewName.substring(0, 20)}...`;
+	}
+	return viewName;
+};

frontend/src/components/ExportMenu/__tests__/ExportMenu.test.tsx

@@ -1,5 +1,5 @@
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import { fireEvent, render, screen, userEvent } from 'tests/test-utils';
+import { fireEvent, render, screen } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
 import ExportMenu from '../ExportMenu';
@@ -76,17 +76,6 @@ describe('ExportMenu', () => {
 		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'jsonl' });
 	});
 
-	it('exports the picked jsonl format and closes the popover', async () => {
-		renderMenu();
-		await userEvent.click(screen.getByTestId(TEST_ID));
-		await userEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
-		await userEvent.click(screen.getByRole('button', { name: 'Export' }));
-
-		expect(mockHandleExport).toHaveBeenCalledTimes(1);
-		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'jsonl' });
-		expect(screen.queryByText('FORMAT')).not.toBeInTheDocument();
-	});
-
 	it('disables the trigger while an export is in progress', () => {
 		mockIsExporting = true;
 		renderMenu();

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
@@ -11,7 +11,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');
 	const [feedback, setFeedback] = useState('');
-	const location = useAppLocation();
+	const location = useLocation();
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const [isLoading, setIsLoading] = useState(false);
 

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { Dot, Globe, Inbox, SquarePen } from '@signozhq/icons';
+import { useLocation } from 'react-router-dom';
+import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
@@ -16,6 +16,7 @@ import {
 import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { Globe, Inbox, SquarePen } from '@signozhq/icons';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
@@ -38,7 +39,7 @@ function HeaderRightSection({
 	enableFeedback,
 	shareModalExtraOption,
 }: HeaderRightSectionProps): JSX.Element | null {
-	const location = useAppLocation();
+	const location = useLocation();
 
 	const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
 	const [openShareURLModal, setOpenShareURLModal] = useState(false);

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { matchRoute } from 'lib/router/matchRoute';
+import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
@@ -42,7 +41,7 @@ interface ShareURLModalProps {
 
 function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const location = useAppLocation();
+	const location = useLocation();
 	const { selectedTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -76,7 +75,7 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const isRouteToBeSharedWithTime = useMemo(
 		() =>
 			routesToBeSharedWithTime.some((route) =>
-				matchRoute(location.pathname, route, { exact: true }),
+				matchPath(location.pathname, { path: route, exact: true }),
 			),
 		[location.pathname],
 	);

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,5 +1,5 @@
 // Mock dependencies before imports
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -9,8 +9,9 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
-jest.mock('lib/router/useAppLocation', () => ({
-	useAppLocation: jest.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
 }));
 
 jest.mock('@signozhq/ui/sonner', () => ({
@@ -29,7 +30,7 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
-const mockUseAppLocation = useAppLocation as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
 const mockToast = toast as jest.Mocked<typeof toast>;
@@ -44,7 +45,7 @@ describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		logEventMock.mockReturnValue(Promise.resolve() as never);
-		mockUseAppLocation.mockReturnValue(mockLocation);
+		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
 		});

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -1,5 +1,5 @@
 // Mock dependencies before imports
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { logEventMock } from '__tests__/logEventMock';
@@ -7,8 +7,9 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
-jest.mock('lib/router/useAppLocation', () => ({
-	useAppLocation: jest.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
 }));
 
 jest.mock('../FeedbackModal', () => ({
@@ -44,7 +45,7 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
-const mockUseAppLocation = useAppLocation as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
 const defaultProps = {
@@ -60,7 +61,7 @@ const mockLocation = {
 describe('HeaderRightSection', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockUseAppLocation.mockReturnValue(mockLocation);
+		mockUseLocation.mockReturnValue(mockLocation);
 		// Default to licensed user (Enterprise or Cloud)
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: true,

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -1,8 +1,7 @@
 // Mock dependencies before imports
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { matchRoute } from 'lib/router/matchRoute';
+import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -13,12 +12,10 @@ import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
-jest.mock('lib/router/useAppLocation', () => ({
-	useAppLocation: jest.fn(),
-}));
-
-jest.mock('lib/router/matchRoute', () => ({
-	matchRoute: jest.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
+	matchPath: jest.fn(),
 }));
 
 jest.mock('hooks/useUrlQuery', () => ({
@@ -51,12 +48,12 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
-const mockUseAppLocation = useAppLocation as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
 const mockGetMinMax = GetMinMax as jest.Mock;
 const mockUseCopyToClipboard = useCopyToClipboard as jest.Mock;
-const mockMatchRoute = matchRoute as jest.Mock;
+const mockMatchPath = matchPath as jest.Mock;
 
 const mockUrlQuery = {
 	get: jest.fn(),
@@ -74,7 +71,7 @@ describe('ShareURLModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 
-		mockUseAppLocation.mockReturnValue({
+		mockUseLocation.mockReturnValue({
 			pathname: TEST_PATH,
 		});
 
@@ -91,7 +88,7 @@ describe('ShareURLModal', () => {
 
 		mockUseCopyToClipboard.mockReturnValue([null, mockHandleCopyToClipboard]);
 
-		mockMatchRoute.mockReturnValue(null);
+		mockMatchPath.mockReturnValue(false);
 
 		// Reset URL query mocks - all return null by default
 		mockUrlQuery.get.mockReturnValue(null);
@@ -129,7 +126,7 @@ describe('ShareURLModal', () => {
 	});
 
 	it('should show absolute time toggle when on time-enabled route', () => {
-		mockMatchRoute.mockReturnValue({}); // Simulate being on a route that supports time
+		mockMatchPath.mockReturnValue(true); // Simulate being on a route that supports time
 
 		render(<ShareURLModal />);
 
@@ -149,7 +146,7 @@ describe('ShareURLModal', () => {
 
 	it('should toggle absolute time switch', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min', // Non-custom time should enable absolute time by default
 		});
@@ -172,7 +169,7 @@ describe('ShareURLModal', () => {
 		// Invalid - missing start and end time for custom
 		mockUrlQuery.get.mockReturnValue(null);
 
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 
 		render(<ShareURLModal />);
 
@@ -184,7 +181,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with absolute time for non-custom time', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min',
 		});
@@ -203,7 +200,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with custom time parameters', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: 'custom',
 		});
@@ -231,7 +228,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with relative time when absolute time is disabled', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min',
 		});
@@ -252,12 +249,12 @@ describe('ShareURLModal', () => {
 
 	it('should handle routes that should be shared with time', async () => {
 		const user = userEvent.setup();
-		mockUseAppLocation.mockReturnValue({
+		mockUseLocation.mockReturnValue({
 			pathname: ROUTES.LOGS_EXPLORER,
 		});
 
-		mockMatchRoute.mockImplementation((pathname: string, route: string) =>
-			route === ROUTES.LOGS_EXPLORER ? {} : null,
+		mockMatchPath.mockImplementation(
+			(pathname: string, options: any) => options.path === ROUTES.LOGS_EXPLORER,
 		);
 
 		render(<ShareURLModal />);

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Button, Tooltip } from 'antd';
 import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
@@ -43,7 +43,7 @@ function LaunchChatSupport({
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 
 	const isChatSupportEnabled = useMemo(() => {
 		if (!isFetchingFeatureFlags && (featureFlags || featureFlagsFetchError)) {

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,5 +1,5 @@
 import { DrawerProps } from 'antd';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

frontend/src/components/LogDetail/LogHighlights/TraceIdField.tsx

@@ -1,4 +1,4 @@
-import { AppLink } from 'lib/router/AppLink';
+import { Link } from 'react-router-dom';
 
 import styles from './LogHighlights.module.scss';
 
@@ -8,7 +8,7 @@ interface TraceIdFieldProps {
 
 function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
 	return (
-		<AppLink
+		<Link
 			to={{ pathname: `/trace/${traceId}` }}
 			target="_blank"
 			rel="noreferrer"
@@ -16,7 +16,7 @@ function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
 			title={traceId}
 		>
 			{traceId}
-		</AppLink>
+		</Link>
 	);
 }
 

frontend/src/components/LogDetail/index.tsx

@@ -4,7 +4,6 @@ import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
-import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -148,7 +147,7 @@ function LogDetailInner({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		sourcePage: SavedviewtypesSourceDTO.logs,
+		dataSource: DataSource.LOGS,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
@@ -308,11 +307,7 @@ function LogDetailInner({
 							placement="left"
 							mouseLeaveDelay={0}
 						>
-							<div
-								className="log-body"
-								data-testid="log-detail-body"
-								dangerouslySetInnerHTML={htmlBody}
-							/>
+							<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
 						</Tooltip>
 
 						<div className="log-overflow-shadow">&nbsp;</div>

frontend/src/components/Logs/ListLogView/index.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import {
 	getBodyDisplayString,
 	getSanitizedLogBody,
@@ -182,7 +182,6 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				data-testid={`logs-list-row-${logData.id}`}
 				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
 				$isDarkMode={isDarkMode}
 				$logType={logType}

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -23,7 +23,6 @@ function LogLinesActionButtons({
 					icon={<TextSelect size={14} />}
 					className="show-context-btn"
 					onClick={handleShowContext}
-					data-testid="log-line-show-context"
 				/>
 			</Tooltip>
 			<Tooltip title="Copy Link">
@@ -32,7 +31,6 @@ function LogLinesActionButtons({
 					icon={<Link size={14} />}
 					onClick={onLogCopy}
 					className="copy-log-btn"
-					data-testid="log-line-copy-link"
 				/>
 			</Tooltip>
 		</div>

frontend/src/components/Logs/RawLogView/index.tsx

@@ -156,7 +156,6 @@ function RawLogView({
 
 	return (
 		<RawLogViewContainer
-			data-testid={`logs-raw-row-${data.id}`}
 			onClick={handleClickExpand}
 			wrap={false}
 			align="middle"

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -182,7 +182,6 @@ function OptionsMenu({
 								<div
 									className="item"
 									key={item.label}
-									data-testid={`format-option-${item.key}`}
 									onClick={(): void => handleMenuItemClick(item.key)}
 								>
 									<div className={cx('item-label')}>

frontend/src/components/MarkdownEditor/__tests__/InsertVariableMenu.test.tsx

@@ -1,72 +0,0 @@
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import { READ_ONLY_TOOLTIP } from '../constants';
-import InsertVariableMenu from '../InsertVariableMenu';
-import type { EditorVariable } from '../types';
-
-const VARIABLES: EditorVariable[] = [
-	{ name: 'environment', badge: 'QUERY' },
-	{ name: 'service', badge: 'CUSTOM' },
-	{ name: 'service_version' },
-];
-
-function renderMenu(disabled = false): jest.Mock {
-	const onSelect = jest.fn();
-	render(
-		<InsertVariableMenu
-			variables={VARIABLES}
-			onSelect={onSelect}
-			disabled={disabled}
-		/>,
-	);
-	return onSelect;
-}
-
-function rowNames(): string[] {
-	return screen
-		.queryAllByTestId(/^markdown-variable-/)
-		.map((row) => row.getAttribute('data-testid') ?? '');
-}
-
-describe('InsertVariableMenu', () => {
-	it('narrows the rows to names matching the search', async () => {
-		renderMenu();
-		await userEvent.click(screen.getByTestId('markdown-insert-variable'));
-		await screen.findByTestId('markdown-variable-environment');
-		expect(rowNames()).toHaveLength(3);
-
-		await userEvent.type(screen.getByPlaceholderText('Search variables'), 'SERV');
-
-		await waitFor(() =>
-			expect(rowNames()).toStrictEqual([
-				'markdown-variable-service',
-				'markdown-variable-service_version',
-			]),
-		);
-	});
-
-	it('hands the clicked variable name to onSelect', async () => {
-		const onSelect = renderMenu();
-		await userEvent.click(screen.getByTestId('markdown-insert-variable'));
-		await userEvent.click(await screen.findByTestId('markdown-variable-service'));
-
-		expect(onSelect).toHaveBeenCalledTimes(1);
-		expect(onSelect).toHaveBeenCalledWith('service');
-	});
-
-	it('stays closed and explains why when read-only', async () => {
-		const onSelect = renderMenu(true);
-		const trigger = screen.getByTestId('markdown-insert-variable');
-		expect(trigger).toHaveAttribute('aria-disabled', 'true');
-
-		await userEvent.click(trigger);
-		expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-		expect(rowNames()).toHaveLength(0);
-
-		await userEvent.hover(trigger);
-		await expect(screen.findByRole('tooltip')).resolves.toHaveTextContent(
-			READ_ONLY_TOOLTIP,
-		);
-		expect(onSelect).not.toHaveBeenCalled();
-	});
-});