feat(system): add storybook story for the workspace suspended page

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

@@ -20,16 +20,6 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
     await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
   });
   ```
-- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
-  - `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. 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.

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

@@ -49,7 +49,6 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 - **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 `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.

.claude/skills/signoz-page-story/SKILL.md

@@ -0,0 +1,206 @@
+---
+name: signoz-page-story
+description: Explore a SigNoz page, map the endpoints, states and query params it has, then write its Storybook page story with control-driven msw mocks that reach every state. Use when asked to create, extend or review a Storybook story for a page under frontend/src/pages, to add controls to an existing page story, or to write defineStoryMocks handlers and mock data for a page.
+---
+
+# SigNoz page stories
+
+A page story renders the real page inside the real app shell against msw, and its
+controls panel can reach every state the page has. The panel is the deliverable,
+not the story list.
+
+`frontend/src/storybook/README.md` is the API surface (providers, parameters,
+control builders, module mocks, navigation). Read it first; this skill is the
+process on top of it.
+
+## Workflow
+
+1. **Map the page**: [references/discovery.md](references/discovery.md). Produce
+   the inventory (endpoints, states, params, permissions, caps) before writing
+   code. No inventory, no story.
+2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console
+   names the endpoints step 1 missed.
+3. **Inventory to controls**: [references/controls.md](references/controls.md).
+4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's
+   mocks module.
+5. **Verify in the browser**: [references/verify.md](references/verify.md). Never
+   report the story as done without it.
+
+## Where it lands in the sidebar
+
+The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`), so
+a page sits where someone would click it in the product. Four things decide that,
+and all four are part of writing the story, not a follow-up.
+
+**Title.** `Pages/<Area>/<Page>`, where `<Area>` is the nav section and `<Page>`
+is the label the nav gives it.
+
+- The leaf is the product's label, never the component's name: `MetricsExplorer`
+  is `Metrics/Explorer`, `MeterExplorer` is `Metering/Cost Meter`,
+  `AIAssistantPage` is `Noz`.
+- Never repeat the area in the leaf: `Alerts/Rules`, not `Alerts/AlertRules`.
+- A leaf never shares its name with a sibling folder. The folder wins and the
+  page becomes `List`, or `Overview` for a tab strip: `Services/List` beside
+  `Services/Detail`.
+- Title Case with spaces. No camelCase, no kebab.
+- Four levels is the floor to stay under: `Pages/Alerts/Channels/New` is as deep
+  as it goes.
+- Pages nobody navigates to on purpose go under `Pages/System` (`Status`,
+  `Unauthorized`, `Workspace Locked`), and the pre-session pages under
+  `Pages/Auth`.
+
+**Order.** `src/storybook/docs/sidebarOrder.ts` carries the order for every
+level. A new page in an existing area is appended to that area's array, in the
+order the product lists it; a new area goes where the side nav puts it. Missing
+entries fall to the end of their level rather than disappearing, so a forgotten
+edit is a page at the bottom of its area, not a broken sidebar.
+
+**Tags.** Declared on the meta, right under `title`, and what the sidebar's tag
+filter answers questions with. Only these:
+
+| Tag | When |
+| --- | --- |
+| `authz` | The page gates UI on permission checks through `lib/authz` (`AuthZButton`, `AuthZGuard`, `useAuthZ`). |
+| `role-gated` | The page still branches on the legacy role (`user.role`, `hasEditPermission`) and has no authz check. |
+| `beta` | `isBeta` on its nav entry. Drop the tag when the product drops the badge. |
+| `legacy` | Superseded by another page but still routed. The doc comment names the page to start from instead. |
+| `play` | The story file has a `play` function, so at least one state is reached by an interaction. |
+
+`autodocs` comes from `preview.tsx` and is never written on a meta.
+
+**Doc comment on the meta.** What the page is, in the page's own terms, then a
+blank line, then the route:
+
+```tsx
+const pageStory = storyMocks(logsExplorerMocks, { route: explorerRoute('explorer') });
+
+/**
+ * The logs explorer: the query builder, the list, the frequency chart and the log
+ * detail drawer, with quick filters and saved views beside them.
+ *
+ * Route: `/logs/logs-explorer`.
+ */
+const meta = {
+	title: 'Pages/Logs/Explorer',
+	tags: ['play'],
+	component: LogsModulePage,
+	decorators: [withAppLayout],
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<LogsExplorerArgs>;
+```
+
+The `pageStory` const and the trailing `parameters` line are what make the doc
+comment safe. The comment compiles to a `parameters` property that the csf plugin
+appends after the spread, so a meta that spreads `storyMocks(...)` and stops
+there loses `parameters.signoz` and renders the page against the global handlers
+alone: every one of the page's endpoints misses. Restating `parameters` as a
+literal gives the plugin something to merge into. `resolveStory` logs the
+combination that says it happened, so the console names it rather than leaving it
+to be found by reading the page.
+
+It is the description on the page's Docs page, which is the only place a reader
+who is not in the code finds out what the page is for. Two or three sentences:
+what it shows, what drives it, and the gating worth knowing about (`Gated on
+authz permissions`, `follows the legacy editor role`). A control-driven route
+says so instead of a path: ``Route: `/metrics-explorer/*`, the tab control picks
+which``.
+
+## Rules
+
+- **Default is the loaded page.** `export const Default: Story = {}` with no args,
+  every widget carrying data. Empty, loading and failed are variants or control
+  values, never the default.
+- **A control is a knob on a response**, resolved through `handlers`, `config` or
+  `effect`. Never a component prop, never a module mock added for one story.
+- **Every branch in the inventory is reachable from the panel.** A state that
+  needs a code edit to see is a missing control.
+- **Never re-declare what every story already has**: banner, side nav, data state
+  (loaded/loading/error), access preset, permissions, check state.
+- **A variant earns a story only when it is worth linking to**: an empty
+  workspace, a viewer, a page mid-load. Everything else stays a control.
+- **Endpoints the page owns go through `response.json`**, so the Data control
+  covers loaded, loading and failed in one declaration. Endpoints the page cannot
+  render without (ingestion detection, preferences, feature payloads) take a
+  plain resolver so the shell survives the loading and error states.
+- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param
+  navigation works inside a story; a different pathname is blocked and reported
+  by the overlay. A control for a param is worth it only when the param is a page
+  mode someone would want to flip.
+- **File layout**: `src/pages/<Page>/<Page>.stories.tsx`,
+  `src/pages/<Page>/<Page>.stories.mocks.tsx`, payload builders in
+  `src/pages/<Page>/__story_mockdata__/<page>.ts`. Nothing page-specific in
+  `src/storybook/controls/`. A page that is a tab strip over several routes gets
+  one story file per tab, in its own folder under the module page
+  (`LogsModulePage/Pipelines/Pipelines.stories.tsx`), each with its own mocks and
+  `__story_mockdata__/`; the builders more than one tab needs stay in the module
+  page's own. Every one of them renders the module page, so the tab strip is
+  there, and the `route` its mocks return decides which tab is open.
+- **A state only a click reaches is a story with a `play` function**, not a
+  control: a drawer, a modal, an edit mode the page holds in component state.
+  Drive it with `userEvent` and the queries from `storybook/test`, take the first
+  of a repeated row action, and wait on the state's own text. The page fetches
+  before it renders a row, so the finder needs a timeout past the 1s default. A
+  state the app drops again on its own, such as one keyed on an array identity
+  that a refetch replaces, does not get a story: it would not survive being
+  looked at. A *sequence* of such states, a wizard's steps or a
+  questionnaire's pages, is still a control: declare the steps in the mocks
+  module and walk them from a `play` on the meta that destructures `mount`, which
+  is what makes Storybook replay it on an arg change. See
+  [references/controls.md](references/controls.md).
+- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
+  under a `__story_mockdata__/` open with this banner, above the imports:
+
+  ```ts
+  /**
+   * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+   * Do not hand-edit: regenerate instead.
+   */
+  ```
+
+  The root `.gitattributes` marks both paths `linguist-generated=true`, so the
+  reviewer gets them collapsed and spends the attention on the rendered page. The
+  story file is the human surface and never carries the banner. A file with the
+  banner has to stay regenerable from the page alone: no page knowledge in
+  `src/storybook/`, and builders typed from `src/api/generated` where the endpoint
+  has types, so a contract change is a compile error instead of a mock that lies.
+- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they
+  exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
+- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed
+  helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before
+  writing a response shape inline, check if a builder exists; if not and the
+  shape will repeat, add it there. Page-specific builders stay in the page's
+  `__story_mockdata__/`.
+- **The story's own doc comment is per state.** Every `export const` gets one:
+  what that state shows, not how it is built. It renders in the States list on
+  the page's Docs page, so `Undocumented.` there is a story nobody described.
+- **Story names come from a fixed vocabulary** where one fits: `Default`,
+  `Viewer`, `Empty`, `Loading`, `Error`. Page-specific states get page-specific
+  names (`NoIngestion`, `Unlicensed`), never a second spelling of one of those
+  (`ViewerAccess`, `NonAdmin`).
+- **No comment is the default.** Write one only for what the code cannot show:
+  a shape the backend dictates, an app bug the mock reproduces, an ordering or
+  cap the page depends on, a workaround and the reason for it. Never restate a
+  name, a type, or what a builder plainly builds; if the sentence reads as the
+  signature in prose, delete it. Nothing addressed to a reviewer. The one
+  comment a story always gets is its own doc comment: what it shows, in the
+  page's own terms.
+
+## Done means
+
+- [ ] `Default` shows the page with data, checked in dark and light
+- [ ] title follows the sidebar rules, tags declared, and the page's entry added
+      to `src/storybook/docs/sidebarOrder.ts`
+- [ ] the meta carries its doc comment with the `Route:` line, the meta restates
+      `parameters: { ...pageStory.parameters }` after the spread, and every story
+      export carries its own doc comment
+- [ ] the page's Docs page renders: description, controls table, and one row per
+      state with no `Undocumented.`
+- [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
+- [ ] every control flipped once, its effect seen on screen
+- [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled
+      request, no React warning
+- [ ] no navigation overlay on mount
+- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`,
+      `pnpm exec oxfmt --check <files>` all clean. The repo has no
+      prettier: `pnpm exec prettier` prints a pass while exiting 254

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

@@ -0,0 +1,227 @@
+# Turning the inventory into controls
+
+Every row of the inventory becomes a control, a global control that already
+exists, or a documented reason it cannot be one.
+
+## Imports
+
+Paths written as `src/storybook/...` in prose are repo paths, not import
+specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules
+inside `src/storybook/` import each other relatively.
+
+| Import | From |
+| --- | --- |
+| `toggleControl`, `countControl`, `choiceControl`, `multiChoiceControl` | `../controls/controls` |
+| `defineStoryMocks`, `storyMocks` | `../controls/defineStoryMocks` |
+| `PageStoryArgs` | `../controls/resolveStoryMocks` |
+| `MockRequest`, `MockResponse` | `../controls/types` |
+| `withAppLayout` | `@/storybook/decorators/withAppLayout` |
+| the page's mocks, from the story | `./<Page>.stories.mocks` |
+| `queryRangeV5ScalarResponse`, `queryRangeV5RawResponse`, etc. | `@/storybook/msw/__story_mockdata__/queryRange` |
+
+## Which builder
+
+`src/storybook/controls/controls.ts`:
+
+| The state is | Builder |
+| --- | --- |
+| on or off (a signal ingesting, a feature present) | `toggleControl` |
+| how many rows a list has | `countControl` |
+| one of several modes (tab, visibility, plan, severity filter) | `choiceControl` |
+| a subset (steps skipped, columns shown, signals selected) | `multiChoiceControl` |
+
+Rules that come with them:
+
+- `countControl` `max` goes past what the page renders, so a story can show the
+  cap being hit. `0` is the empty state, which is why an empty list rarely needs
+  its own story. When the cap is in the *request* (`?limit=5`) rather than the
+  renderer, stop `max` at the limit: a longer response is a body the backend
+  cannot send.
+- `choiceControl` options come from a `const` array typed with
+  `(typeof X)[number]`, not from string literals scattered in the handlers.
+- Defaults describe the fully-populated page. The panel starts where `Default`
+  starts.
+- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or
+  `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per
+  control.
+- `description` only when the name does not carry the effect (what dismissing
+  does, what the cap is, which widget it feeds).
+
+## Which hook
+
+`defineStoryMocks` takes three, all optional:
+
+- `handlers(values, response)`: the page's endpoints. Everything the page owns
+  goes through `response.json`, so the global Data control turns the whole page
+  into loading or failed without a second declaration. An endpoint the page
+  cannot render at all without (ingestion detection, preferences, license
+  payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays
+  visible while the rest hangs or fails.
+- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`,
+  `appContext`, `reduxState`, `queryBuilder`, `theme`.
+- `effect(values)`: module-level state no provider exposes.
+
+One endpoint feeding several widgets stays one handler that reads the request.
+`response.json` hands the request to the builder and awaits it, so reading a
+query param, or a POST body, does not cost the Data control:
+
+```ts
+rest.get(
+	'http://localhost/api/v1/explorer/views',
+	response.json((req) =>
+		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
+	),
+),
+```
+
+```ts
+rest.post(
+	'http://localhost/api/v5/query_range',
+	response.json(async (req) => {
+		const body = (await req.json()) as QueryRangeRequestV5;
+		const signal = body.compositeQuery?.queries?.[0]?.spec?.signal;
+
+		return countResponse(values[`${signal}Ingestion`] ? 4213 : 0);
+	}),
+),
+```
+
+Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the
+endpoint has to keep answering while the Data control is on `loading` or
+`error`: detection calls the page cannot render without.
+
+## Mutations
+
+A control drives the response, so a write the page makes against state a control
+owns does not stick: the refetch answers with the control's value and the button
+appears to do nothing. Two honest options: leave it declarative and say so in
+the PR, or move the state into `effect` so the handler can read what the page
+wrote. Never fake the write by mutating a builder's module state without saying
+where the state lives.
+
+## Wiring it up
+
+```ts
+// src/pages/Services/Services.stories.mocks.tsx
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+export const servicesMocks = defineStoryMocks({
+	controls: {
+		services: countControl('Services', { group: LISTS, value: 8, max: 12 }),
+		apdex: choiceControl<ApdexState>('Apdex', {
+			group: HEALTH,
+			options: APDEX_STATES,
+			value: 'mixed',
+		}),
+	},
+	handlers: (values, response) => [
+		rest.post(
+			'http://localhost/api/v2/services',
+			response.json(() => buildServices(values.services, values.apdex)),
+		),
+	],
+});
+```
+
+```tsx
+// src/pages/Services/Services.stories.tsx
+type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
+
+const pageStory = storyMocks(servicesMocks, { route: ROUTES.APPLICATION });
+
+/**
+ * Every instrumented service with its p99, error rate and throughput.
+ *
+ * Route: `/services`.
+ */
+const meta = {
+	title: 'Pages/Services/List',
+	component: Services,
+	decorators: [withAppLayout],
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<ServicesArgs>;
+```
+
+`PageStoryArgs` folds in the global controls, so a story's `args` can set
+`access`, `dataState` or `banner` next to the page's own knobs and stay typed.
+
+## A step the page keeps in component state
+
+A wizard's step, a questionnaire's page, a picker's next question: the page holds
+it in `useState` and nothing in the URL says which one is open. It is still a
+control. Declare the steps in the mocks module and drive them from a `play` on
+the **meta**, so every story of the page inherits the walk and only sets `args`:
+
+```tsx
+// <Page>.stories.mocks.tsx
+export const SETUP_STEPS = ['pick-source', 'pick-framework', 'configure'] as const;
+export type SetupStep = (typeof SETUP_STEPS)[number];
+
+controls: {
+	step: choiceControl<SetupStep>('Setup step', { group: SETUP, options: SETUP_STEPS, value: 'pick-source' }),
+},
+```
+
+```tsx
+// <Page>.stories.tsx
+const meta = {
+	play: async ({ mount, args, canvasElement }): Promise<void> => {
+		await mount();
+		await advanceToSetupStep(canvasElement, args.step);
+	},
+	...storyMocks(pageMocks),
+} satisfies Meta<PageArgs>;
+
+export const Configure: Story = { args: { step: 'configure' } };
+```
+
+**Destructuring `mount` is what makes it a control.** Storybook re-runs a play
+function on an arg change only for a story whose play asks to be remounted
+(`usesMount`); otherwise it re-renders the tree the previous walk left behind and
+the panel looks broken. With `mount` destructured, the story renders when `play`
+calls it, and every arg change replays the walk from a fresh mount.
+
+The walk itself:
+
+- one `answer` function per step, in an array indexed the same as the step list,
+  so reaching step *n* is `answers.slice(0, STEPS.indexOf(step))`;
+- answer each step with the least its Next button accepts, and prefer a "do this
+  later" over filling a slider;
+- run them sequentially (`reduce` over a promise), since each answer is what
+  renders the step the next one reads;
+- bail out when the page did not start where the walk expects, such as a source
+  deep-linked past the questions. Check for the first step's own text rather than
+  reading another control's value.
+
+An endpoint that only settles the transition between two steps (the profile a
+questionnaire saves before its last page) takes a plain resolver, or the Data
+control on `loading` strands the walk halfway.
+
+## Not a control
+
+- Anything the global controls already cover: banner, side nav, data state,
+  access preset, permissions, check state.
+- A knob whose effect nobody can see on the page. Delete it or find the widget it
+  was supposed to drive.
+- A raw payload as an object control. Controls carry intent (`5 dashboards`,
+  `viewer`), and the builder turns intent into the payload.
+- Anything that needs a module mock or a component prop to work. If the state
+  cannot be produced from a response, config or module state, say so in the PR
+  instead of faking it.
+
+## Control or story
+
+Default to a control. Write a story when the state is worth a link:
+
+- the fresh workspace, because that is what a new user sees
+- the restricted user, when permissions visibly change the page
+- a page-defining mode (a tab, a category) that has its own layout
+
+Combinations of controls do not need stories, which is what the panel is for.
+
+Each story gets one prose doc comment: what it shows, in the page's own terms.
+Everywhere else the comment rule in SKILL.md applies: write one only for what
+the code cannot show.

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

@@ -0,0 +1,64 @@
+# Mapping a page
+
+Two passes: read the code, then let the running story correct you. Write the
+inventory down: it is what the controls are derived from, and the only
+protection against a story that renders one state and calls it a page.
+
+## Pass 1: read the page
+
+Start at `src/pages/<Page>/` and follow it outward: the containers it mounts
+(`src/container/<Feature>/`), the hooks those use, the components with their own
+fetches. Stop at leaf components that take props only.
+
+Grep recipes, run against the page's directories:
+
+| Looking for | Grep |
+| --- | --- |
+| endpoints | `useQuery\|useMutation\|useInfiniteQuery`, then the `api/` module it calls |
+| 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\|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` |
+| render caps | `slice(0,\|PAGE_SIZE\|pageSize\|limit` |
+
+`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names,
+`src/lib/authz/README.md` how a permission check resolves.
+
+## The inventory
+
+One table, in the story's PR or scratch notes:
+
+| Endpoint | Feeds | States it can be in |
+| --- | --- | --- |
+| `GET /api/v1/x` | the header count | populated, zero, error |
+
+Plus four short lists:
+
+- **Query params** the page reads, and what each one switches.
+- **Permission checks** the page makes, and what disappears when each is denied.
+- **Preferences and flags** that change layout (dismissed banners, onboarding
+  checklists, opt-in views).
+- **Caps**: how many rows each list renders before it truncates or paginates.
+
+A state that appears in this inventory and not in the controls panel is a bug in
+the story.
+
+## Pass 2: let it run
+
+Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the
+route, add `withAppLayout`, then open it (see verify.md). The console is the
+oracle:
+
+- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1
+  missed. Add it to the inventory.
+- an msw unhandled-request warning: a request going to an origin the handlers do
+  not answer on. handlers are declared against `http://localhost`.
+- a spinner that never resolves with the Data control on `loaded`: a handler
+  whose URL does not match what the page calls.
+- the navigation overlay on mount: the page redirects, usually because `route`
+  is wrong or a guard is failing on a permission the controls have not granted.
+
+Repeat until the console is silent. Only then start declaring controls.

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

@@ -0,0 +1,111 @@
+# Verifying a page story
+
+A story is not done because it compiles. It is done when each control has been
+seen changing the page and the console is silent.
+
+## Run it
+
+```bash
+cd frontend && pnpm storybook --ci --quiet   # :6006, background it
+```
+
+A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an
+already-running server; an empty first poll is not a broken `stories` glob.
+
+Story ids come from the meta title: `Pages/Services/List` →
+`pages-services-list`, plus the story export in kebab-case. Render one story on
+its own:
+
+```
+http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
+```
+
+## Flip controls from the URL
+
+Args are settable in the iframe URL, so a whole sweep runs headless without
+touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays
+indexed, several separated by `;`, and the theme through `globals`:
+
+```
+&args=services:0;apdex:poor;access:viewer;dataState:loading
+&args=signals[0]:logs;signals[1]:traces
+&globals=theme:light
+```
+
+That is the cheap way to check a control does something: load with and without
+it, diff the page text.
+
+## Drive it
+
+Playwright lives in the repo's e2e workspace, so a scratch script can use it
+directly:
+
+```js
+import pw from '<repo>/tests/e2e/node_modules/playwright/index.js';
+const { chromium } = pw;
+
+const browser = await chromium.launch();
+const page = await browser.newPage();
+const problems = [];
+page.on('console', (m) => {
+	if (m.type() === 'error' || m.type() === 'warning') problems.push(m.text());
+});
+page.on('pageerror', (e) => problems.push(e.message));
+
+await page.goto(`${story}&args=services:0`, { waitUntil: 'networkidle' });
+await page.locator('body').waitFor();
+console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
+await browser.close();
+```
+
+Screenshots are worth taking for `Default` in both themes
+(`&globals=theme:light`): text extraction does not catch an unstyled page.
+
+## Gates
+
+- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an
+  msw unhandled-request warning, a React key or state warning: assume the story
+  is wrong first. A warning that survives is sometimes the app's. Prove it by
+  turning off the control that renders the widget and watching the warning go
+  with it, and by finding the same component elsewhere doing it right. Then
+  report the app bug in the PR. Never invent a field the API does not return to
+  silence a warning.
+- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load
+  means the page is trying to leave: wrong `route`, or a guard denying on a
+  permission the controls did not grant.
+- **Every control moves something.** Sweep them one at a time from the URL and
+  diff the page text. A control with no diff is either wired to nothing or aimed
+  at a widget that is not rendering. Some only show their effect after an
+  interaction, such as a tab that has to be clicked or a select that has to be
+  opened. Drive that interaction rather than calling the control unobservable.
+- **Both themes render styled.** An unstyled page means the story is not inside
+  the provider decorator, or `<body data-theme>` was lost.
+- **Roles agree.** `<body data-signoz-story-role>` and
+  `<body data-signoz-context-role>` disagreeing means the page reads a different
+  `AppContext` than the story config fills.
+- **The page's own navigation works.** Tabs, filters and pagination that write
+  query params should re-render the page in place; only leaving the page belongs
+  in the overlay.
+
+## Then the usual
+
+```bash
+pnpm tsgo --noEmit
+pnpm exec oxlint <changed files>
+pnpm exec oxfmt --check <changed files>
+```
+
+There is no prettier in this repo. `pnpm exec prettier --check` fetches something
+else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is
+not one.
+
+## Common failures
+
+| Symptom | Cause |
+| --- | --- |
+| endless spinner with Data on `loaded` | handler URL does not match the call; handlers answer on `http://localhost` |
+| page renders but empty | response shape wrong; compare against the api module's type, not a guess |
+| 501 in the console | endpoint nobody mocked; the catch-all is answering |
+| new control missing from the panel | project-level control added; the tab needs a reload |
+| control flips but nothing changes | the widget is gated by something else: a permission, a flag, a preference |
+| shell disappears in `loading` | an endpoint the shell needs went through `response.json`; give it a plain resolver |

.gitattributes

@@ -1 +1,3 @@
-*.css linguist-detectable=false
+*.css linguist-detectable=false
+*.stories.mocks.tsx linguist-generated=true
+**/__story_mockdata__/** linguist-generated=true

.github/workflows/integrationci.yaml

@@ -58,12 +58,10 @@ jobs:
           - querierai
           - rawexportdata
           - promqlconformance
-          - promapiconformance
           - querierauthz
           - role
           - rootuser
           - savedview
-          - semconvfamilies
           - serviceaccount
           - spanmapper
           - querier_json_body

docs/api/openapi.yml

@@ -2559,7 +2559,6 @@ components:
       - factor-api-key
       - license
       - subscription
-      - deployment-host
       - logs
       - traces
       - metrics
@@ -6460,148 +6459,6 @@ components:
       type: object
     PreferencetypesValue:
       type: object
-    PrometheusErrorResponseSchema:
-      properties:
-        error:
-          type: string
-        errorType:
-          enum:
-          - bad_data
-          - execution
-          - canceled
-          - timeout
-          - internal
-          type: string
-        status:
-          enum:
-          - error
-          type: string
-      required:
-      - status
-      - errorType
-      - error
-      type: object
-    PrometheusMatrixDataSchema:
-      properties:
-        result:
-          items:
-            $ref: '#/components/schemas/PrometheusMatrixSeriesSchema'
-          nullable: true
-          type: array
-        resultType:
-          enum:
-          - matrix
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusMatrixSeriesSchema:
-      properties:
-        metric:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        values:
-          items:
-            $ref: '#/components/schemas/PrometheusSamplePairSchema'
-          nullable: true
-          type: array
-      required:
-      - metric
-      - values
-      type: object
-    PrometheusQueryDataSchema:
-      oneOf:
-      - $ref: '#/components/schemas/PrometheusMatrixDataSchema'
-      - $ref: '#/components/schemas/PrometheusVectorDataSchema'
-      - $ref: '#/components/schemas/PrometheusScalarDataSchema'
-      - $ref: '#/components/schemas/PrometheusStringDataSchema'
-      type: object
-    PrometheusSamplePairSchema:
-      description: 'A [timestamp, value] pair: float unix seconds, then the string-encoded
-        sample value ("NaN", "+Inf", "-Inf" included).'
-      items:
-        oneOf:
-        - type: number
-        - type: string
-      maxItems: 2
-      minItems: 2
-      nullable: true
-      type: array
-    PrometheusScalarDataSchema:
-      properties:
-        result:
-          $ref: '#/components/schemas/PrometheusSamplePairSchema'
-        resultType:
-          enum:
-          - scalar
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusStringDataSchema:
-      properties:
-        result:
-          $ref: '#/components/schemas/PrometheusSamplePairSchema'
-        resultType:
-          enum:
-          - string
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusSuccessResponseSchema:
-      properties:
-        data:
-          $ref: '#/components/schemas/PrometheusQueryDataSchema'
-        infos:
-          items:
-            type: string
-          type: array
-        status:
-          enum:
-          - success
-          type: string
-        warnings:
-          items:
-            type: string
-          type: array
-      required:
-      - status
-      - data
-      type: object
-    PrometheusVectorDataSchema:
-      properties:
-        result:
-          items:
-            $ref: '#/components/schemas/PrometheusVectorSampleSchema'
-          nullable: true
-          type: array
-        resultType:
-          enum:
-          - vector
-          type: string
-      required:
-      - resultType
-      - result
-      type: object
-    PrometheusVectorSampleSchema:
-      properties:
-        metric:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        value:
-          $ref: '#/components/schemas/PrometheusSamplePairSchema'
-      required:
-      - metric
-      - value
-      type: object
     PromotetypesPromotePath:
       properties:
         indexes:
@@ -8153,7 +8010,6 @@ components:
       - logs
       - metrics
       - meter
-      - ai_observability
       type: string
     SavedviewtypesUpdatableSavedView:
       properties:
@@ -8944,7 +8800,6 @@ components:
       - span
       - trace
       - resource
-      - scope
       - attribute
       - body
       - ""
@@ -15612,8 +15467,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key: []
-      - tokenizer: []
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
       summary: Get features
       tags:
       - features
@@ -24085,9 +23942,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - deployment-host:list
+        - VIEWER
       - tokenizer:
-        - deployment-host:list
+        - VIEWER
       summary: Get host info from Zeus.
       tags:
       - zeus
@@ -24141,9 +23998,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - deployment-host:update
+        - ADMIN
       - tokenizer:
-        - deployment-host:update
+        - ADMIN
       summary: Put host in Zeus for a deployment.
       tags:
       - zeus
@@ -24953,374 +24810,6 @@ paths:
       summary: Replace variables
       tags:
       - querier
-  /prometheus/api/v1/query:
-    get:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQuery
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-          to the server''s current time.'
-        in: query
-        name: time
-        schema:
-          description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-            to the server''s current time.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus instant query
-      tags:
-      - prometheus
-    post:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQueryPost
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-          to the server''s current time.'
-        in: query
-        name: time
-        schema:
-          description: 'Evaluation timestamp: RFC3339 or float unix seconds. Defaults
-            to the server''s current time.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus instant query
-      tags:
-      - prometheus
-  /prometheus/api/v1/query_range:
-    get:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQueryRange
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Range start: RFC3339 or float unix seconds.'
-        in: query
-        name: start
-        required: true
-        schema:
-          description: 'Range start: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Range end: RFC3339 or float unix seconds.'
-        in: query
-        name: end
-        required: true
-        schema:
-          description: 'Range end: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Resolution step: duration string or float seconds.'
-        in: query
-        name: step
-        required: true
-        schema:
-          description: 'Resolution step: duration string or float seconds.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus range query
-      tags:
-      - prometheus
-    post:
-      description: 'Prometheus-compatible endpoint: the request and response contract
-        is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/).
-        Parameters are accepted as URL query parameters or a form-encoded body, on
-        GET and POST alike.'
-      operationId: PrometheusQueryRangePost
-      parameters:
-      - description: PromQL expression.
-        in: query
-        name: query
-        required: true
-        schema:
-          description: PromQL expression.
-          type: string
-      - description: 'Range start: RFC3339 or float unix seconds.'
-        in: query
-        name: start
-        required: true
-        schema:
-          description: 'Range start: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Range end: RFC3339 or float unix seconds.'
-        in: query
-        name: end
-        required: true
-        schema:
-          description: 'Range end: RFC3339 or float unix seconds.'
-          type: string
-      - description: 'Resolution step: duration string or float seconds.'
-        in: query
-        name: step
-        required: true
-        schema:
-          description: 'Resolution step: duration string or float seconds.'
-          type: string
-      - description: 'Evaluation timeout: duration string or float seconds.'
-        in: query
-        name: timeout
-        schema:
-          description: 'Evaluation timeout: duration string or float seconds.'
-          type: string
-      - description: Any non-empty value includes query statistics in the response.
-        in: query
-        name: stats
-        schema:
-          description: Any non-empty value includes query statistics in the response.
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusSuccessResponseSchema'
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Unprocessable Entity
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Internal Server Error
-        "503":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/PrometheusErrorResponseSchema'
-          description: Service Unavailable
-      security:
-      - api_key:
-        - metrics:read
-      - tokenizer:
-        - metrics:read
-      summary: Prometheus range query
-      tags:
-      - prometheus
 servers:
 - description: The fully qualified URL to the SigNoz APIServer.
   url: https://{host}:{port}{base_path}

docs/contributing/prometheus.md

@@ -299,11 +299,8 @@ substituted. One subtlety makes it exact: we write stale markers at absent
 grid points. Without them, the engine's lookback would resurrect a point
 from up to `lookback` earlier. The marker encodes "absent here" the way the
 engine itself encodes it. Units evaluate concurrently. Each unit is one
-grid statement: the group-key join resolves the matchers, and the samples
-primary key takes the metric name straight from the selector. Only a
-selector without a static `__name__` runs the series lookup first, to learn
-the concrete metric names. A step of 0 is an instant query: a single
-evaluation at `end`.
+series lookup plus one grid statement. A step of 0 is an instant query: a
+single evaluation at `end`.
 
 A note on the window sliver: when the window is narrower than the step, the
 grid windows cover only `window/step` of the timeline. A sample in a gap
@@ -318,9 +315,8 @@ selectors and `last_over_time` transpile at window < step too.
 
 ## Series lookup
 
-The engine path resolves matchers once per selector (`selectSeries`); the
-transpiled path builds the same conditions into its group-key join. Both
-read the same tables. The series tables hold one row per (fingerprint, bucket)
+Both paths resolve matchers the same way, once per selector
+(`selectSeries`). The series tables hold one row per (fingerprint, bucket)
 at 1h/6h/1d/1w granularities. The shared schema package
 (`pkg/telemetryschema/metricstelemetryschema`) picks the table whose bucket
 fits the window. It rounds the window start down to the bucket boundary, so

docs/contributing/tests/e2e.md

@@ -112,41 +112,6 @@ These two folders look similar but mean different things:
 
 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/`.
 
-### 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 tests in one worker. Use for read-only data. Worker scope pays the setup cost once per worker instead of once per test.
-
-**The alerts pattern** (`fixtures/alerts/`) demonstrates extending fixtures:
-
-```
-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)
-```
-
-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.
@@ -267,14 +232,11 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
-# Single sub-area
-npx playwright test tests/alerts/history/ --project=chromium
-
 # Single file
-npx playwright test tests/alerts/page.spec.ts --project=chromium
+npx playwright test tests/alerts/alerts.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "AL-01"
+npx playwright test --project=chromium -g "TC-01"
 ```
 
 ### Iterative modes
@@ -308,14 +270,7 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
-
-```bash
-# runs against a locally served frontend, not whatever .env.local points at
-SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
-```
-
-This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
+Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
 
 ### Playwright options
 

ee/query-service/app/api/api.go

@@ -67,7 +67,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// note: add ee override methods first
 
 	// routes available only in ee version
-	router.HandleFunc("/api/v1/features", am.OpenAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/features", am.ViewAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
 
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)

frontend/.gitignore

@@ -28,4 +28,8 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
+e2e/test-plan/user-preferences/
+
+# Storybook
+/storybook-static/
+debug-storybook.log

frontend/.storybook/main.ts

@@ -0,0 +1,102 @@
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { Plugin, PluginOption } from 'vite';
+
+const srcPath = resolve(dirname(fileURLToPath(import.meta.url)), '../src');
+
+/**
+ * Modules replaced for every story. Same idea as `moduleNameMapper` in
+ * `jest.config.ts`: the app keeps importing its own paths, Storybook resolves
+ * them to a mock. Regexes so only exact specifiers match: `lib/history` must
+ * not catch `lib/historyUtils`.
+ *
+ * Each replacement is typed as the module it stands in for, so drift is a
+ * compile error rather than a story that fails at render. The `jest` note on
+ * each entry is where the same import lands under the other runner. The two
+ * only diverge where the runner needs them to.
+ */
+const mockAliases = [
+	{
+		// jest: not replaced, jsdom drives a real browser history.
+		find: /^(?:src\/)?lib\/history$/,
+		replacement: `${srcPath}/storybook/navigation/history.alias.ts`,
+	},
+	{
+		// jest: src/__tests__/logEventMock.ts
+		find: /^(?:src\/)?api\/common\/logEvent$/,
+		replacement: `${srcPath}/storybook/mocks/logEvent.mock.ts`,
+	},
+	{
+		// jest: not replaced, the suite mounts a mock store per test.
+		find: /^(?:src\/)?store$/,
+		replacement: `${srcPath}/storybook/mocks/store.mock.ts`,
+	},
+	{
+		// jest: __mocks__/env.ts, which leaves `baseURL` empty because jsdom already
+		// resolves a relative `/api/...` against `http://localhost`.
+		find: /^(?:src\/)?constants\/env$/,
+		replacement: `${srcPath}/storybook/mocks/env.mock.ts`,
+	},
+];
+
+/**
+ * Plugins from `vite.config.ts` that either target the app's `index.html` or
+ * only pay off in a production build.
+ */
+const EXCLUDED_PLUGINS = [
+	'vite-plugin-checker',
+	'dev-base-path',
+	'dev-boot-data',
+	'vite-plugin-image-optimizer',
+	'vite-plugin-compression',
+];
+
+const isExcluded = (plugin: PluginOption): boolean =>
+	!!plugin &&
+	typeof plugin === 'object' &&
+	'name' in plugin &&
+	EXCLUDED_PLUGINS.includes((plugin as Plugin).name);
+
+const config: StorybookConfig = {
+	framework: '@storybook/react-vite',
+	stories: ['../src/storybook/docs/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+	// `../public` carries the fonts, icons and i18n bundles the app expects at
+	// the root; `./public` carries the msw worker, which must not ship in a
+	// production build.
+	staticDirs: ['../public', './public'],
+	addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+	core: { disableTelemetry: true },
+	viteFinal: async (viteConfig) => {
+		const plugins = (viteConfig.plugins ?? [])
+			.flat(Infinity as 1)
+			.filter((plugin) => !isExcluded(plugin as PluginOption));
+
+		const existingAlias = viteConfig.resolve?.alias;
+		const normalizedAlias = Array.isArray(existingAlias)
+			? existingAlias
+			: Object.entries(existingAlias ?? {}).map(([find, replacement]) => ({
+					find,
+					replacement: replacement as string,
+				}));
+
+		return {
+			...viteConfig,
+			build: {
+				...viteConfig.build,
+				// `vite.config.ts` sets this for the app; Storybook's builder replaces
+				// `build` wholesale, which leaves rolldown-vite on its default
+				// lightningcss. That one rejects `:global()` in a plain stylesheet, which
+				// the app has, and the static build dies in CSS minification.
+				cssMinify: 'esbuild',
+			},
+			plugins,
+			resolve: {
+				...viteConfig.resolve,
+				alias: [...mockAliases, ...normalizedAlias],
+			},
+		};
+	},
+};
+
+export default config;

frontend/.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+	rel="stylesheet"
+/>
+<link rel="stylesheet" href="css/uPlot.min.css" />
+
+<script>
+	// i18n's language detector would pick the browser locale (e.g. `en-US`), which
+	// /public/locales does not ship; pin it to the bundled language instead.
+	window.localStorage.setItem('i18nextLng', 'en');
+
+	// The Go backend injects this at boot; every integration it enables is off in
+	// Storybook so no third-party script loads inside the iframe.
+	window.signozBootData = {
+		settings: {
+			posthog: { enabled: false, apiHost: '', key: '', uiHost: '' },
+			appcues: { enabled: false, appId: '' },
+			sentry: { enabled: false, dsn: '', tunnel: '' },
+			pylon: { enabled: false, appId: '', identitySecret: '' },
+		},
+	};
+</script>

frontend/.storybook/preview.tsx

@@ -0,0 +1,230 @@
+import type { Preview } from '@storybook/react-vite';
+import type { SetupWorker } from 'msw';
+import { setupWorker } from 'msw';
+
+import PageDocs from '../src/storybook/docs/PageDocs';
+import ThemedDocsContainer from '../src/storybook/docs/ThemedDocsContainer';
+import { withProviders } from '../src/storybook/decorators/withProviders';
+import { globalMocks } from '../src/storybook/globals';
+import { resetStoryHistory } from '../src/storybook/navigation/containment';
+import { clearBlockedNavigations } from '../src/storybook/navigation/blockedNavigationStore';
+import {
+	resolveStory,
+	type StoryRuntimeContext,
+} from '../src/storybook/runtime/resolveStory';
+
+import '../src/ReactI18';
+
+// `src/index.tsx` does this at boot: without it `@monaco-editor/react` falls back
+// to its loader default and pulls Monaco from cdn.jsdelivr.net, which msw does
+// not report because the requests look like static assets.
+import '../src/lib/monaco/setup';
+
+import '../src/styles.scss';
+
+import '../src/storybook/storybook-root.scss';
+
+interface StorybookWorkerHolder {
+	__signozStorybookWorker?: StorybookWorker;
+}
+
+const holder = window as unknown as StorybookWorkerHolder;
+
+/**
+ * One worker per page, even if this module is re-executed by HMR. Two live
+ * workers both answer the service worker and the story gets whichever replies
+ * first.
+ */
+interface StorybookWorker {
+	worker: SetupWorker;
+	ready: Promise<unknown>;
+}
+
+const { worker, ready } = (holder.__signozStorybookWorker ??=
+	((): StorybookWorker => {
+		const instance = setupWorker();
+
+		return {
+			worker: instance,
+			ready: instance.start({
+				serviceWorker: { url: './mockServiceWorker.js' },
+				// Storybook's own traffic (index.json, HMR, telemetry) goes unhandled by
+				// design; only flag the app's API calls so a missing handler is obvious.
+				onUnhandledRequest: (request, print): void => {
+					const url = new URL(request.url.href);
+					const isStaticAsset =
+						/\.(?:woff2?|ttf|otf|css|js|map|png|jpe?g|svg|webp|ico)$/.test(
+							url.pathname,
+						);
+					const isAppRequest =
+						!isStaticAsset &&
+						(url.pathname.startsWith('/api/') || url.host !== window.location.host);
+
+					if (isAppRequest) {
+						print.warning();
+					}
+				},
+			}),
+		};
+	})());
+
+const preview: Preview = {
+	parameters: {
+		layout: 'fullscreen',
+		controls: { expanded: true },
+		// The sidebar order, mirroring the app's own side nav
+		// (`container/SideNav/menuItems.tsx`), so a page sits where someone would
+		// click it in the product. Storybook's default is the order the story files
+		// happen to be globbed in, which puts `src/modules` first. Anything missing
+		// from a level lands after the entries listed for it, in file order, so a new
+		// story shows up at the end of its area rather than disappearing. Stories
+		// inside a file are never listed, so they keep the order they are declared
+		// in, `Default` first. Storybook parses this out of the file, so it has to
+		// stay an inline literal.
+		options: {
+			storySort: {
+				order: [
+					'Docs',
+					'Pages',
+					[
+						'Home',
+						'Alerts',
+						[
+							'Rules',
+							'Triggered',
+							'Overview',
+							'History',
+							'Create',
+							'Edit',
+							'Planned Downtime',
+							'Routing Policies',
+							'Channels',
+							['List', 'New', 'Edit'],
+						],
+						'Dashboards',
+						['List', 'Detail', 'Panel Editor', 'Widget Editor', 'Public'],
+						'Services',
+						['List', 'Detail', 'Top Level Operations', 'Service Map'],
+						'Logs',
+						[
+							'Explorer',
+							'Live Tail',
+							'Saved Views',
+							'Pipelines',
+							'Settings',
+							'Legacy Explorer',
+						],
+						'Traces',
+						['Explorer', 'Trace Details', 'Funnel Details', 'Legacy Explorer'],
+						'Metrics',
+						['Explorer'],
+						'Infrastructure',
+						[
+							'Overview',
+							'Kubernetes',
+							[
+								'Clusters',
+								'Nodes',
+								'Namespaces',
+								'Pods',
+								'Deployments',
+								'DaemonSets',
+								'StatefulSets',
+								'Jobs',
+								'Volumes',
+							],
+						],
+						'Integrations',
+						['List', 'Details', 'Cloud Account'],
+						'Exceptions',
+						['List', 'Detail'],
+						'External APIs',
+						'AI Observability',
+						['Overview', 'Model Pricing', 'Attribute Mapping'],
+						'Noz',
+						'Metering',
+						['Cost Meter', 'Usage Explorer'],
+						'Messaging Queues',
+						['Overview', 'Kafka', 'Kafka Detail', 'Celery'],
+						'Onboarding',
+						['Questionnaire', 'Add Data Source'],
+						'Settings',
+						[
+							'Workspace',
+							'Account',
+							'Billing',
+							'MCP Server',
+							'Roles',
+							'Role Details',
+							'Role Editor',
+							'Members',
+							'Service Accounts',
+							'Ingestion',
+							'Single Sign-on',
+							'Keyboard Shortcuts',
+						],
+						'Auth',
+						['Login', 'Sign Up', 'Forgot Password', 'Reset Password'],
+						'System',
+						[
+							'Status',
+							'Support',
+							'License',
+							'Not Found',
+							'Unauthorized',
+							'Error Fallback',
+							'Workspace Locked',
+							'Workspace Suspended',
+							'Workspace Access Restricted',
+						],
+					],
+				],
+			},
+		},
+		docs: { page: PageDocs, container: ThemedDocsContainer },
+	},
+	// Every page story gets a docs page: the descriptions on the meta and on each
+	// story are the page's documentation, and without this they render nowhere.
+	tags: ['autodocs'],
+	globalTypes: {
+		theme: {
+			description: 'SigNoz color scheme',
+			toolbar: {
+				title: 'Theme',
+				icon: 'paintbrush',
+				items: [
+					{ value: 'dark', title: 'Dark' },
+					{ value: 'light', title: 'Light' },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	initialGlobals: { theme: 'dark' },
+	// Controls every story carries: permissions, banners, and whether the page's
+	// own endpoints answer, hang or fail.
+	args: globalMocks.args,
+	argTypes: globalMocks.argTypes,
+	decorators: [withProviders],
+	loaders: [
+		// Runs on every render, args changes included, and ahead of the decorators:
+		// the whole story world is put in place here, so the provider tree only has
+		// to read it. Re-registering the handlers per render also means an edit to a
+		// handler module takes effect on the next render instead of leaving the
+		// worker on the set it was created with.
+		async (context): Promise<void> => {
+			const world = resolveStory(context as unknown as StoryRuntimeContext);
+
+			world.apply();
+			world.install(worker);
+
+			await ready;
+		},
+	],
+	beforeEach: () => {
+		clearBlockedNavigations();
+		resetStoryHistory();
+	},
+};
+
+export default preview;

frontend/.storybook/public/mockServiceWorker.js

@@ -0,0 +1,309 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (1.3.2).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // msw bypasses server-sent events here, because it answers a request in one
+  // piece and has no stream to hand back. A story is not a live connection
+  // either: it wants the backlog a page renders, and one response carries that
+  // fine. Left bypassed, `/api/v3/logs/livetail` reaches the real network and
+  // the live tail story is a spinner over ERR_CONNECTION_REFUSED. Restore the
+  // bypass and re-check `Pages/Logs/Live Tail` if msw regenerates this file.
+  //
+  // if (accept.includes('text/event-stream')) {
+  //   return
+  // }
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2)
+
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`,
+      )
+    }),
+  )
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const clonedResponse = response.clone()
+      sendToClient(client, {
+        type: 'RESPONSE',
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
+          redirected: clonedResponse.redirected,
+        },
+      })
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  const clonedRequest = request.clone()
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers['x-msw-bypass']
+
+    return fetch(clonedRequest, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get('x-msw-bypass') === 'true') {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const clientMessage = await sendToClient(client, {
+    type: 'REQUEST',
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body: await request.text(),
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  })
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+
+    case 'NETWORK_ERROR': {
+      const { name, message } = clientMessage.data
+      const networkError = new Error(message)
+      networkError.name = name
+
+      // Rejecting a "respondWith" promise emulates a network error.
+      throw networkError
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [channel.port2])
+  })
+}
+
+function sleep(timeMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeMs)
+  })
+}
+
+async function respondWithMock(response) {
+  await sleep(response.delay)
+  return new Response(response.body, response)
+}

frontend/README.md

@@ -88,6 +88,17 @@ pnpm test
 pnpm tsgo --noEmit
 ```
 
+## Storybook
+
+```bash
+pnpm storybook
+```
+
+Opens [http://localhost:6006](http://localhost:6006). Pages run against msw
+mocks with no backend; query-param navigation works inside a story, leaving the
+page is blocked. See [`src/storybook/README.md`](src/storybook/README.md) for the
+override surface.
+
 ## Linting
 
 ```bash

frontend/docs/storybook-page-stories-tdd.md

@@ -0,0 +1,495 @@
+# Storybook page stories
+
+> Frontend Technical Design Document
+
+---
+
+## Document Info
+
+| Field | Value |
+|-------|-------|
+| **Author** | TODO |
+| **Reviewers** | TODO |
+| **Status** | In Review |
+| **Created** | 2026-08-24 |
+| **Last Updated** | 2026-08-24 |
+| **Effort Estimate** | TODO |
+| **Owning Team** | Frontend Platform |
+| **PR** | [SigNoz/signoz#12639](https://github.com/SigNoz/signoz/pull/12639) |
+| **Issue** | SigNoz/engineering-pod#5951 |
+
+---
+
+## 1. Summary
+
+Run whole SigNoz pages in Storybook with no backend: msw answers every request,
+and the state a page is in becomes a row in the controls panel. The unit is the
+page inside its real shell, not a component in isolation, so the artifact is a
+picture of what a user sees. Phase 2 points Chromatic at that picture set and
+makes visual diffs a blocking, human-accepted check.
+
+The mocks that feed those pages are written and maintained by AI through the
+`signoz-page-story` skill. Nobody reviews them line by line, so the design is
+built around that: mocks are cheap to regenerate, typed against the app's own
+modules, and marked as generated in the diff.
+
+---
+
+## 2. Context & Problem Statement
+
+### Current state
+
+| Metric | Value |
+|--------|-------|
+| Stories in `frontend/` before this work | 0 |
+| Routes in `src/AppRoutes/routes.ts` | 71 |
+| Page directories under `src/pages/` | 60 |
+| Jest test files | 786 |
+| E2E feature suites | 10 |
+
+Every layer of the current test stack looks at something other than the page.
+Jest mounts fragments with mocked providers. E2E drives real flows but needs a
+running backend and reads assertions, not pixels. Neither answers "what does
+this page look like when the workspace is empty, the user is a viewer, and the
+license expired".
+
+### Problems
+
+- **Hidden states are unreachable.** Empty workspace, denied permission, expired
+  license, mid-load, failed request. Seeing any of them today means finding an
+  environment in that state or editing code.
+- **Visual review is manual.** A change to a shared component or a design token
+  is checked by whoever remembers which pages use it. A regression two pages
+  away from the diff ships.
+
+---
+
+## 3. Goals & Non-Goals
+
+### Goals
+
+- Render any page, in any state, with no backend and no environment.
+- Make every state a page can be in reachable from the controls panel.
+- Catch visual regressions before merge (Phase 2, Chromatic).
+- Keep mock authorship an AI task, at a cost low enough to keep adding pages.
+- A story mounts the provider tree the app mounts, not a second approximation of
+  it.
+
+### Non-Goals
+
+- **Component stories.** A page story with controls covers what a component
+  story would, in context. Component-level stories are not the pattern here.
+- **Behaviour testing.** A wrongly migrated component, a broken handler, a bad
+  request payload: that is E2E's job. A story renders, it does not assert.
+- **Replacing jest.** Stories are not reused as jest tests (no portable stories,
+  no `composeStories`).
+- **Interaction coverage.** No play functions for now (see 6.3).
+- **A published static build.** Possible later, not in scope.
+- **msw v2.** The jest suite is on msw v1; upgrading is its own project.
+
+---
+
+## 4. Requirements
+
+### Functional
+
+- A page renders inside the real `AppLayout` (side nav, top nav, banners).
+- Every endpoint the page calls is answered locally, and an unanswered one fails
+  loudly instead of hanging.
+- Loaded, loading and failed reachable for the page's own endpoints from one
+  control.
+- Access, license, banner and side nav state selectable on every story.
+- Query-param navigation (tabs, filters, pagination, time range) works inside a
+  story; leaving the page is blocked and reported.
+- Both themes render fully styled.
+
+### Non-Functional
+
+- **Isolation:** no state, cache or override bleeds between stories.
+- **Determinism:** the same story renders the same pixels on every run (Phase 2
+  prerequisite, see 6.2).
+- **Authoring cost:** a new page story is a skill run, not a project.
+- **No production impact:** nothing in `src/storybook/` or the msw worker reaches
+  the app bundle.
+
+---
+
+## 5. Success Metrics
+
+The metric is qualitative on purpose: this exists to make hidden UI states
+visible and to make small UI changes trustworthy without a manual sweep.
+
+| Metric | Baseline | Target | Measurement |
+|--------|----------|--------|-------------|
+| Pages whose states can be seen without an environment | 0 | grows every sprint, no end date | stories under `src/pages/**` |
+| States reachable per page | n/a | every branch in the page's inventory | skill's discovery inventory vs the panel |
+| Small UI change reviewed without a manual sweep | 0% | the common case | Chromatic diff accepted in the PR |
+| Regressions caught before merge | 0 | > 0 and rising | Chromatic build history |
+
+A feature change still needs a recording of the real UI. Stories cover tiny
+changes and regressions, not "does the feature work".
+
+---
+
+## 6. Proposed Design
+
+### 6.1 Architecture overview
+
+Three layers: the app's provider tree extracted so a runner can mount it, a
+story runtime that turns controls into a mocked world, and per-page mock modules
+that live with the page.
+
+Only the third layer is authored per page, and it is three files next to the
+page:
+
+```
+src/pages/<Page>/
+├── <Page>.stories.tsx           # human-owned: title, route, named variants
+├── <Page>.stories.mocks.tsx     # AI-owned: controls, handlers, config
+└── __story_mockdata__/<page>.ts # AI-owned: payload builders
+```
+
+The story file is the whole human surface. Everything else the page needs
+(providers, shell, access, msw, containment) arrives from the global decorator:
+
+```tsx
+type HomeArgs = PageStoryArgs<typeof homeMocks>;
+
+const meta = {
+	title: 'Pages/Home',
+	component: HomePage,
+	decorators: [withAppLayout],
+	...storyMocks(homeMocks, { route: ROUTES.HOME }),
+} satisfies Meta<HomeArgs>;
+
+/** Every widget carrying data. */
+export const Default: StoryObj<HomeArgs> = {};
+
+/** Fresh workspace: nothing ingested, so the welcome checklist takes over. */
+export const NoIngestion: StoryObj<HomeArgs> = {
+	args: { logsIngestion: false, tracesIngestion: false, dashboards: 0 },
+};
+```
+
+A named story exists when the state is worth linking to. Everything else is a
+control someone turns.
+
+`src/storybook/` holds the rest: the story runtime, the control builders, the
+global mock modules, the access grant, the msw stack, the navigation
+containment and the two decorators. It is infrastructure, edited when the
+mechanism changes, not when a page is added.
+
+### 6.2 Key technical decisions
+
+#### The page is the unit, not the component
+
+**Decision:** stories render pages. A component's states are reached by turning
+a control on the page that renders it.
+
+**Rationale:** a component out of context proves nothing about the page. The
+picture that matters is the one with the shell, the real spacing and the real
+data around it. It also keeps the story count near the page count instead of
+near the component count.
+
+#### Controls are knobs on responses, never props
+
+**Decision:** a control resolves through `handlers`, `config` or `effect`. A
+control change re-registers the msw handlers and remounts the story with an
+empty query cache.
+
+**Rationale:** a prop-driven control shows a state the page cannot actually be
+in. Driving the response means the page fetches, decides and renders the way it
+does in production, including its own loading and empty branches.
+
+#### Mocks are AI-owned, and marked as such
+
+**Decision:** `*.stories.mocks.tsx` and `__story_mockdata__/**` carry a
+generated banner enforced by the skill, and the root `.gitattributes` marks
+those paths `linguist-generated=true` so GitHub collapses them in the diff.
+
+```ts
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+```
+
+The folder is `__story_mockdata__`, not `__mockdata__`: `src/mocks-server/__mockdata__`
+already exists and is human-owned jest fixture data, so one glob cannot mark
+both without collapsing files nobody agreed to hand over.
+
+**Rationale:** the review target is the rendered page and the Chromatic diff. A
+reviewer reading 300 lines of payload builders is spending attention on the one
+part of the change that no human is expected to keep correct.
+
+**Consequence:** mocks must be regenerable from the page alone. Nothing
+page-specific goes into `src/storybook/`, and payload builders take their types
+from `src/api/generated` where the endpoint has them, so a contract change is a
+compile error rather than a mock that quietly lies.
+
+#### A story is one page, and stays there
+
+**Decision:** `lib/history` is aliased to a proxy over a memory history. A
+navigation that keeps the pathname (query or hash) is applied; a different
+pathname, an off-site href, `window.open` or a relative `go`/`goBack` is
+swallowed and listed in `NavigationBlockedOverlay`.
+
+**Rationale:** leaving the page unmounts the story, and following a real href
+navigates the iframe out of Storybook. Tabs, filters and pagination are
+query-param navigation, so they keep working, which is most of what a page story
+needs. Nothing is dropped silently.
+
+**Gap:** nuqs runs on its testing adapter with its own copy of the query string.
+A page that writes params through both `useQueryState` and
+`history.push({ search })` sees the two diverge inside a story.
+
+#### Determinism is a Chromatic prerequisite
+
+**Decision:** before Chromatic is turned on, mock data uses frozen dates and
+charts render from static data with animation disabled.
+
+**Rationale:** a snapshot has to be byte-identical between runs. Two live
+sources of drift today: `appShellMocks` computes trial and payment-failed dates
+from `Date.now()`, and uPlot charts animate in. Charts stay in the picture,
+they just have to be the same picture every time.
+
+#### Module aliases are typed against the real module
+
+**Decision:** three modules are replaced for every story, each annotated
+`typeof import('<real module>')`.
+
+| Module | Replacement | Why |
+|--------|-------------|-----|
+| `lib/history` | `navigation/history.alias.ts` | containment, above |
+| `api/common/logEvent` | `mocks/logEvent.mock.ts` | analytics never leave the iframe |
+| `constants/env` | `mocks/env.mock.ts` | pins the API origin the handlers answer on |
+
+**Rationale:** the annotation makes drift a compile error instead of a story that
+fails at render in whichever component imports it. Same mechanism as jest's
+`moduleNameMapper`, and each alias notes where the same import lands under jest.
+
+### 6.3 Edge cases & failure modes
+
+| Scenario | Behaviour |
+|----------|-----------|
+| Endpoint nobody mocked | catch-all logs `[storybook] no msw handler`, answers 501 |
+| Page redirects on mount | navigation overlay on load, usually a wrong `route` or a guard denying |
+| Shell disappears in `loading` | a shell endpoint went through `response.json`; it needs a plain resolver |
+| Leftover AuthZ dev override | cleared on every render unless Access is `dev-tools` |
+| A story sets a role the grant denies | impossible: `role` is derived from the grant |
+| Project-level control added | the tab needs a reload; Vite hot-updates `preview.tsx` without re-preparing open stories |
+| AuthZ dev overrides in a static build | inert, they need `IS_DEV`. Dev server only |
+| State only reachable by interaction | not covered. See below |
+
+**Play functions.** `storybook/test` is available and the module mocks are `fn()`
+spies, so a `play` could open a dropdown, click a tab or assert on `logEvent`,
+and Chromatic snapshots after `play` completes. That is the mechanism for states
+no control can reach. Not used for now: controls only, deliberately, to keep the
+authoring cost of a page at one skill run.
+
+---
+
+## 7. Alternatives considered
+
+| Option | Pros | Cons | Why not chosen |
+|--------|------|------|----------------|
+| Component stories | small, cheap, conventional | proves nothing about the page; story count tracks component count; still needs mocked providers | a page story with controls covers the same states in context |
+| Presentational `PageView` + args | no msw, no providers, no query cache; a state is one `args` object | requires splitting every page into a container and a view first; the page's own fetching, loading and empty branches are never exercised; each state is a named story, so the count grows fast | the split is a refactor of the 60 directories in `src/pages/` before the first story, and it moves the fetching the page actually does out of the picture |
+| Jest snapshot tests | already in the repo | serialised DOM is not a picture; a token or CSS change is invisible | not a visual test |
+
+### Prior art
+
+Page-level stories are an established pattern, and the teams doing it split into
+two camps over where the data comes from. The list below is what could be
+verified in public repos and docs.
+
+**The real connected page against msw**, which is what this proposal does:
+
+| Who | What they do | Where |
+|-----|--------------|-------|
+| PostHog | the closest match to this proposal, and the largest. 104 `.stories.tsx` files import `scenes/App`: the story mounts the whole app and pushes a route (`router.actions.push(urls.logs())`), so it gets the real shell, not a page in isolation. `mswDecorator` maps each endpoint to a mock at the meta level, `layout: 'fullscreen'`, `mockDate` freezes the clock, and a seeded LCG supplies the random data. Feature flags are a story parameter. Fixtures are sized past the page's cap on purpose, so pagination and the truncation banner render | [`LogsScene.stories.tsx`](https://github.com/PostHog/posthog/blob/master/products/logs/frontend/LogsScene.stories.tsx) |
+| Teleport (Gravitational) | the real page inside `TeleportProviderBasic`, with `beforeEach({ msw })` per story: `successGetUsers`, `handleGetUsers(() => delay('infinite'))` for loading, `errorGetUsers` for failed. The handlers come from `teleport/test/helpers/`, shared with the test suite. The preview starts one msw worker in a loader, clears the query cache per story, sets `retry: false`, and toggles the auth provider from an arg. 160 story files under `web/packages/teleport/src/` | [`Users.story.tsx`](https://github.com/gravitational/teleport/blob/master/web/packages/teleport/src/Users/Users.story.tsx), [`preview.tsx`](https://github.com/gravitational/teleport/blob/master/web/.storybook/preview.tsx) |
+| Metabase | msw globally through `msw-storybook-addon`, plus explicit determinism work: `METABASE_REMOVE_DELAYS`, every font forced to load before render, and the lazy echarts chunk pulled into the bundle so a snapshot cannot catch a Suspense skeleton. Visual regression through Loki | [`preview.tsx`](https://github.com/metabase/metabase/blob/master/.storybook/preview.tsx) |
+| Prefect | one msw worker in the preview, seeded from `@tests/utils/handlers`, the same handler set the tests use | [`preview.ts`](https://github.com/PrefectHQ/prefect/blob/main/ui-v2/.storybook/preview.ts) |
+| Mealdrop (Yann Braga, Storybook maintainer) | the reference project for this pattern: the real routed page, a `withDeeplink` decorator, msw handlers, `Loading` via infinite delay, `NotFound` and `Error` via 404 and 500, and `play` functions driving the interactions | [`RestaurantDetailPage.stories.tsx`](https://github.com/yannbf/mealdrop/blob/main/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx) |
+
+**The presentational split**, where a `PageView` takes the data as props and the
+fetching lives in a wrapper outside Storybook:
+
+| Who | What they do | Where |
+|-----|--------------|-------|
+| Coder | 76 `*PageView.stories.tsx` files, part of 290 story files under `site/src/pages/`. `WorkspacesPageView` alone carries 23 named stories driven by args (`CannotCreateWorkspace`, `Loading`, `NoSearchResults`, `UnhealthyWorkspace`, `InvalidPageNumber`), with providers supplied by `withAuthProvider`, `withDashboardProvider`, `withProxyProvider()`. Chromatic gates the diffs | [`WorkspacesPageView.stories.tsx`](https://github.com/coder/coder/blob/main/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx) |
+| Netlify | stories for a whole page (Team Overview) next to stories for its cards, reusing the fixture data their integration and unit tests already maintain, with Chromatic for the visual diff | [blog post](https://www.netlify.com/blog/storybook-visual-regression-testing/) |
+| BBC, The Guardian, the Storybook maintainers | named in Storybook's own guidance as teams that keep components presentational up to the screen level and put the connected logic in one wrapper component outside Storybook | [Building pages with Storybook](https://storybook.js.org/docs/writing-stories/build-pages-with-storybook) |
+
+---
+
+## 8. Trade-offs & risks
+
+### Trade-offs accepted
+
+- Mocks can lie. Nothing checks a payload against the real API at runtime.
+  Typing builders from `src/api/generated` narrows it, it does not close it.
+- Controls only. States behind an interaction are not covered until play
+  functions are adopted.
+- msw v1 pinned by the jest suite.
+- `.storybook/main.ts` carries an exclusion list of `vite.config.ts` plugins,
+  maintained by hand.
+
+### Risks
+
+| Risk | Likelihood | Impact | Mitigation |
+|------|------------|--------|------------|
+| Mock drift: story green, production broken | High | Medium | builders typed from `src/api/generated`; E2E owns the real contract; drift shows up as a Chromatic diff on the next regeneration |
+| Snapshot cost grows with pages × states × 2 themes | High | Medium | per-story `chromatic.disableSnapshot` to trim; snapshot the states worth watching |
+| Flaky diffs from non-deterministic pixels | High | Medium | frozen dates, animations off, static chart data (Phase 2 prerequisite) |
+
+---
+
+## 9. Accessibility plan
+
+`@storybook/addon-a11y` is in the addon list. It runs axe on the rendered
+story, so a page gets an a11y pass in every state its controls can reach, which
+is more than the app gets today.
+
+Informational, not a gate: the addon reports on existing pages that were never
+audited, so making it blocking would block on debt this work did not create.
+Chromatic's review check is the only blocking gate.
+
+---
+
+## 10. Performance plan
+
+- **No production impact.** `src/storybook/` and `src/harness/` are only reached
+  by stories. The msw worker is served from `.storybook/public/`, kept out of
+  `../public` so it cannot ship in a production build.
+- **Per-story cost.** A control change remounts the tree with a fresh query
+  cache, which is the point: the page refetches. Remount is keyed on theme plus
+  the resolved control values, so nothing remounts without a reason.
+- **`retry: false`** on the story query client, so a forced failure renders its
+  error state immediately instead of after three retries.
+
+---
+
+## 11. Rollout plan
+
+### Phases
+
+| Phase | Description | Status |
+|-------|-------------|--------|
+| **Phase 1: Home** | the story runtime and the `signoz-page-story` skill, proved by one page: Home | This PR |
+| **Phase 2: Chromatic** | determinism prerequisites, CI job, blocking review check, snapshot exclusions | Not started |
+| **Phase 3: Page fan-out** | more pages, gradually, one skill run each, the auth-less ones (login, signup, workspace-locked) included | Continuous |
+
+No end date. Phase 3 runs for as long as there are pages worth covering, and a
+page is added when someone is working on it.
+
+### Phase 2 detail
+
+- **Coverage:** every story, light and dark. A story can opt out with
+  `parameters.chromatic.disableSnapshot` when the cost is not worth it.
+- **Gate:** Chromatic's review check is required. It stays red until a frontend
+  reviewer accepts the diffs, so an unreviewed visual change cannot merge.
+- **Prerequisites:** frozen dates in mock data (`appShellMocks` computes banner
+  dates from `Date.now()` today), animations off, charts rendering the same
+  picture from static data.
+- **Baseline:** main.
+
+### Failure triage
+
+A red story has two causes, and they are told apart before anything is edited:
+
+1. **A real visual regression.** Fix the app.
+2. **The component changed and the mocks no longer match it.** Regenerate the
+   mocks with the skill. This is expected, routine, and not a review event.
+
+### Rollback
+
+Phase 1 is additive: nothing in the app bundle depends on it, so removing it is
+deleting directories. The two app-side changes (`AppHarness` extraction, the
+`appContextMock` fixture) stand on their own and stay. Phase 2 rolls back by
+making the Chromatic check non-required.
+
+---
+
+## 12. Testing strategy
+
+Stories are not tests, and there are no assertions in them. What guards the
+stories themselves:
+
+### Per-story gates (the skill's `verify.md`)
+
+- Console silent: no `[storybook] no msw handler`, no 501, no msw unhandled
+  request, no React warning.
+- No navigation overlay on mount.
+- Every control flipped once, with its effect seen on screen. Args are settable
+  from the iframe URL, so the sweep runs headless.
+- Both themes render styled (`<body data-theme>` present).
+- `<body data-signoz-story-role>` and `data-signoz-context-role` agree, which is
+  the tell that the page reads the `AppContext` the story filled.
+- `pnpm tsgo --noEmit`, `pnpm exec oxlint`, `pnpm exec oxfmt --check` clean.
+
+### The layers around it
+
+| Layer | What it owns |
+|-------|--------------|
+| Jest (786 files) | component and hook behaviour |
+| E2E (10 suites) | flows against a real backend, real contracts, migration correctness |
+| Page stories | what the page looks like, in every state |
+| Chromatic (Phase 2) | that it still looks like that |
+
+A component migrated wrongly is E2E's to catch, not Chromatic's. A story that
+renders a broken component still renders, and the diff only shows what moved.
+
+---
+
+## 13. Observability
+
+N/A. Nothing here runs in production. `api/common/logEvent` is replaced by a
+spy, and `preview-head.html` stubs `signozBootData` with posthog, sentry,
+appcues and pylon all off, so no third-party script loads inside the iframe.
+
+Phase 2 adds Chromatic build history, which is where the regression record
+lives.
+
+---
+
+## 14. Design system check
+
+- [x] Reuses existing components/patterns, no new UI pattern introduced
+
+Two UI surfaces are added, both Storybook-only: `NavigationBlockedOverlay`
+(lists what the page tried to navigate to) and the story controls panel, which
+is Storybook's own. `applyThemeBodyClass` puts `<body>` in the state the app
+gets from `index.html` plus `AppLayout`, including `data-theme="default"`,
+without which every `@signozhq/design-tokens` semantic token resolves to nothing
+and the page renders unstyled.
+
+---
+
+## 15. Timeline & milestones
+
+| Milestone | Status |
+|-----------|--------|
+| Phase 1: Home | This PR |
+| Phase 2: Chromatic + determinism | Not started, TODO |
+| Phase 3: page fan-out | Continuous, no end date |
+
+Effort estimate: TODO.
+
+---
+
+## 16. What would let a regression through
+
+Ranked by likelihood, since a visual test that passes wrongly is worse than one
+that fails.
+
+| # | Hazard | Mitigation |
+|---|--------|------------|
+| 1 | **Mock payload no longer matches the API.** The page renders the mock's shape happily while production gets something else. | builders typed from `src/api/generated`; E2E owns the real contract |
+| 2 | **A state exists that no control reaches.** It is never snapshotted, so it never regresses visibly. | the skill's inventory is the checklist: a branch in it and not in the panel is a bug in the story |
+| 3 | **Non-deterministic pixels.** A diff every day teaches the team to click accept. | frozen dates, animations off, static chart data |
+| 4 | **A story stops covering the page** because a widget silently stopped rendering (permission, flag, preference). | control sweep: a control with no visible effect is a finding, not a shrug |
+| 5 | **Endpoint answered by a stale layer.** A page handler that does not match the call falls through to a shared handler, which answers something plausible. | endless spinner with Data on `loaded` is the symptom |
+| 6 | **nuqs and history diverge** on a page that writes params through both. | known gap, documented; a page on one mechanism is unaffected |
+| 7 | **Snapshot exclusions accumulate** until the gate covers little. | exclusions are a reviewed edit in the story file |

frontend/package.json

@@ -7,6 +7,8 @@
     "preinstall": "npx only-allow pnpm",
     "i18n:generate-hash": "node ./i18-generate-hash.cjs",
     "dev": "vite",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -158,6 +160,10 @@
     "@commitlint/config-conventional": "20.4.4",
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
+    "@storybook/addon-a11y": "10.5.9",
+    "@storybook/addon-docs": "10.5.9",
+    "@storybook/react-vite": "10.5.9",
+    "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -203,6 +209,7 @@
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
     "sharp": "0.35.0",
+    "storybook": "10.5.9",
     "stylelint": "17.7.0",
     "svgo": "4.0.2",
     "ts-jest": "29.4.9",

frontend/src/api/ErrorResponseHandler.ts

@@ -53,7 +53,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		};
 	}
 	// anything else
-	console.error('ErrorResponseHandler: unclassified error');
+	console.error('any');
 	return {
 		statusCode: 500,
 		payload: null,

frontend/src/api/generated/services/prometheus/index.ts

@@ -1,396 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useMutation, useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	PrometheusErrorResponseSchemaDTO,
-	PrometheusQueryParams,
-	PrometheusQueryPostParams,
-	PrometheusQueryRangeParams,
-	PrometheusQueryRangePostParams,
-	PrometheusSuccessResponseSchemaDTO,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType } from '../../../generatedAPIInstance';
-
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus instant query
- */
-export const prometheusQuery = (
-	params: PrometheusQueryParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryQueryKey = (params?: PrometheusQueryParams) => {
-	return [`/prometheus/api/v1/query`, ...(params ? [params] : [])] as const;
-};
-
-export const getPrometheusQueryQueryOptions = <
-	TData = Awaited<ReturnType<typeof prometheusQuery>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQuery>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getPrometheusQueryQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof prometheusQuery>>> = ({
-		signal,
-	}) => prometheusQuery(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof prometheusQuery>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type PrometheusQueryQueryResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQuery>>
->;
-export type PrometheusQueryQueryError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus instant query
- */
-
-export function usePrometheusQuery<
-	TData = Awaited<ReturnType<typeof prometheusQuery>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQuery>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getPrometheusQueryQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Prometheus instant query
- */
-export const invalidatePrometheusQuery = async (
-	queryClient: QueryClient,
-	params: PrometheusQueryParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getPrometheusQueryQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus instant query
- */
-export const prometheusQueryPost = (
-	params: PrometheusQueryPostParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query`,
-		method: 'POST',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryPostMutationOptions = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryPost>>,
-		TError,
-		{ params: PrometheusQueryPostParams },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof prometheusQueryPost>>,
-	TError,
-	{ params: PrometheusQueryPostParams },
-	TContext
-> => {
-	const mutationKey = ['prometheusQueryPost'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof prometheusQueryPost>>,
-		{ params: PrometheusQueryPostParams }
-	> = (props) => {
-		const { params } = props ?? {};
-
-		return prometheusQueryPost(params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PrometheusQueryPostMutationResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQueryPost>>
->;
-
-export type PrometheusQueryPostMutationError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus instant query
- */
-export const usePrometheusQueryPost = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryPost>>,
-		TError,
-		{ params: PrometheusQueryPostParams },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof prometheusQueryPost>>,
-	TError,
-	{ params: PrometheusQueryPostParams },
-	TContext
-> => {
-	return useMutation(getPrometheusQueryPostMutationOptions(options));
-};
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus range query
- */
-export const prometheusQueryRange = (
-	params: PrometheusQueryRangeParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query_range`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryRangeQueryKey = (
-	params?: PrometheusQueryRangeParams,
-) => {
-	return [
-		`/prometheus/api/v1/query_range`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getPrometheusQueryRangeQueryOptions = <
-	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryRangeParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQueryRange>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getPrometheusQueryRangeQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof prometheusQueryRange>>
-	> = ({ signal }) => prometheusQueryRange(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof prometheusQueryRange>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type PrometheusQueryRangeQueryResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQueryRange>>
->;
-export type PrometheusQueryRangeQueryError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus range query
- */
-
-export function usePrometheusQueryRange<
-	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
->(
-	params: PrometheusQueryRangeParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof prometheusQueryRange>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getPrometheusQueryRangeQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Prometheus range query
- */
-export const invalidatePrometheusQueryRange = async (
-	queryClient: QueryClient,
-	params: PrometheusQueryRangeParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getPrometheusQueryRangeQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
- * @summary Prometheus range query
- */
-export const prometheusQueryRangePost = (
-	params: PrometheusQueryRangePostParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
-		url: `/prometheus/api/v1/query_range`,
-		method: 'POST',
-		params,
-		signal,
-	});
-};
-
-export const getPrometheusQueryRangePostMutationOptions = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-		TError,
-		{ params: PrometheusQueryRangePostParams },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-	TError,
-	{ params: PrometheusQueryRangePostParams },
-	TContext
-> => {
-	const mutationKey = ['prometheusQueryRangePost'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-		{ params: PrometheusQueryRangePostParams }
-	> = (props) => {
-		const { params } = props ?? {};
-
-		return prometheusQueryRangePost(params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PrometheusQueryRangePostMutationResult = NonNullable<
-	Awaited<ReturnType<typeof prometheusQueryRangePost>>
->;
-
-export type PrometheusQueryRangePostMutationError = ErrorType<
-	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
->;
-
-/**
- * @summary Prometheus range query
- */
-export const usePrometheusQueryRangePost = <
-	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-		TError,
-		{ params: PrometheusQueryRangePostParams },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
-	TError,
-	{ params: PrometheusQueryRangePostParams },
-	TContext
-> => {
-	return useMutation(getPrometheusQueryRangePostMutationOptions(options));
-};

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

@@ -2175,7 +2175,6 @@ export enum CoretypesKindDTO {
 	'factor-api-key' = 'factor-api-key',
 	license = 'license',
 	subscription = 'subscription',
-	'deployment-host' = 'deployment-host',
 	logs = 'logs',
 	traces = 'traces',
 	metrics = 'metrics',
@@ -3493,7 +3492,6 @@ export enum TelemetrytypesFieldContextDTO {
 	span = 'span',
 	trace = 'trace',
 	resource = 'resource',
-	scope = 'scope',
 	attribute = 'attribute',
 	body = 'body',
 	'' = '',
@@ -7974,164 +7972,6 @@ export interface PreferencetypesUpdatablePreferenceDTO {
 	value?: unknown;
 }
 
-export enum PrometheusErrorResponseSchemaDTOErrorType {
-	bad_data = 'bad_data',
-	execution = 'execution',
-	canceled = 'canceled',
-	timeout = 'timeout',
-	internal = 'internal',
-}
-export enum PrometheusErrorResponseSchemaDTOStatus {
-	error = 'error',
-}
-export interface PrometheusErrorResponseSchemaDTO {
-	/**
-	 * @type string
-	 */
-	error: string;
-	/**
-	 * @enum bad_data,execution,canceled,timeout,internal
-	 * @type string
-	 */
-	errorType: PrometheusErrorResponseSchemaDTOErrorType;
-	/**
-	 * @enum error
-	 * @type string
-	 */
-	status: PrometheusErrorResponseSchemaDTOStatus;
-}
-
-export enum PrometheusMatrixDataSchemaDTOResultType {
-	matrix = 'matrix',
-}
-export type PrometheusSamplePairSchemaDTOItem = number | string;
-
-/**
- * A [timestamp, value] pair: float unix seconds, then the string-encoded sample value ("NaN", "+Inf", "-Inf" included).
- * @minItems 2
- * @maxItems 2
- * @nullable
- */
-export type PrometheusSamplePairSchemaDTO =
-	| PrometheusSamplePairSchemaDTOItem[]
-	| null;
-
-export type PrometheusMatrixSeriesSchemaDTOMetricAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type PrometheusMatrixSeriesSchemaDTOMetric =
-	PrometheusMatrixSeriesSchemaDTOMetricAnyOf | null;
-
-export interface PrometheusMatrixSeriesSchemaDTO {
-	/**
-	 * @type object,null
-	 */
-	metric: PrometheusMatrixSeriesSchemaDTOMetric;
-	/**
-	 * @type array,null
-	 */
-	values: (PrometheusSamplePairSchemaDTO | null)[] | null;
-}
-
-export interface PrometheusMatrixDataSchemaDTO {
-	/**
-	 * @type array,null
-	 */
-	result: PrometheusMatrixSeriesSchemaDTO[] | null;
-	/**
-	 * @enum matrix
-	 * @type string
-	 */
-	resultType: PrometheusMatrixDataSchemaDTOResultType;
-}
-
-export type PrometheusVectorSampleSchemaDTOMetricAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type PrometheusVectorSampleSchemaDTOMetric =
-	PrometheusVectorSampleSchemaDTOMetricAnyOf | null;
-
-export interface PrometheusVectorSampleSchemaDTO {
-	/**
-	 * @type object,null
-	 */
-	metric: PrometheusVectorSampleSchemaDTOMetric;
-	value: PrometheusSamplePairSchemaDTO | null;
-}
-
-export enum PrometheusVectorDataSchemaDTOResultType {
-	vector = 'vector',
-}
-export interface PrometheusVectorDataSchemaDTO {
-	/**
-	 * @type array,null
-	 */
-	result: PrometheusVectorSampleSchemaDTO[] | null;
-	/**
-	 * @enum vector
-	 * @type string
-	 */
-	resultType: PrometheusVectorDataSchemaDTOResultType;
-}
-
-export enum PrometheusScalarDataSchemaDTOResultType {
-	scalar = 'scalar',
-}
-export interface PrometheusScalarDataSchemaDTO {
-	result: PrometheusSamplePairSchemaDTO | null;
-	/**
-	 * @enum scalar
-	 * @type string
-	 */
-	resultType: PrometheusScalarDataSchemaDTOResultType;
-}
-
-export enum PrometheusStringDataSchemaDTOResultType {
-	string = 'string',
-}
-export interface PrometheusStringDataSchemaDTO {
-	result: PrometheusSamplePairSchemaDTO | null;
-	/**
-	 * @enum string
-	 * @type string
-	 */
-	resultType: PrometheusStringDataSchemaDTOResultType;
-}
-
-export type PrometheusQueryDataSchemaDTO =
-	| PrometheusMatrixDataSchemaDTO
-	| PrometheusVectorDataSchemaDTO
-	| PrometheusScalarDataSchemaDTO
-	| PrometheusStringDataSchemaDTO;
-
-export enum PrometheusSuccessResponseSchemaDTOStatus {
-	success = 'success',
-}
-export interface PrometheusSuccessResponseSchemaDTO {
-	data: PrometheusQueryDataSchemaDTO;
-	/**
-	 * @type array
-	 */
-	infos?: string[];
-	/**
-	 * @enum success
-	 * @type string
-	 */
-	status: PrometheusSuccessResponseSchemaDTOStatus;
-	/**
-	 * @type array
-	 */
-	warnings?: string[];
-}
-
 export interface PromotetypesWrappedIndexDTO {
 	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
 	/**
@@ -9181,7 +9021,6 @@ export enum SavedviewtypesSourceDTO {
 	logs = 'logs',
 	metrics = 'metrics',
 	meter = 'meter',
-	ai_observability = 'ai_observability',
 }
 export interface SavedviewtypesSavedViewSpecDTO {
 	display?: SavedviewtypesDisplayDTO;
@@ -12629,115 +12468,3 @@ export type ReplaceVariables200 = {
 	 */
 	status: string;
 };
-
-export type PrometheusQueryParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Evaluation timestamp: RFC3339 or float unix seconds. Defaults to the server's current time.
-	 */
-	time?: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};
-
-export type PrometheusQueryPostParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Evaluation timestamp: RFC3339 or float unix seconds. Defaults to the server's current time.
-	 */
-	time?: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};
-
-export type PrometheusQueryRangeParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Range start: RFC3339 or float unix seconds.
-	 */
-	start: string;
-	/**
-	 * @type string
-	 * @description Range end: RFC3339 or float unix seconds.
-	 */
-	end: string;
-	/**
-	 * @type string
-	 * @description Resolution step: duration string or float seconds.
-	 */
-	step: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};
-
-export type PrometheusQueryRangePostParams = {
-	/**
-	 * @type string
-	 * @description PromQL expression.
-	 */
-	query: string;
-	/**
-	 * @type string
-	 * @description Range start: RFC3339 or float unix seconds.
-	 */
-	start: string;
-	/**
-	 * @type string
-	 * @description Range end: RFC3339 or float unix seconds.
-	 */
-	end: string;
-	/**
-	 * @type string
-	 * @description Resolution step: duration string or float seconds.
-	 */
-	step: string;
-	/**
-	 * @type string
-	 * @description Evaluation timeout: duration string or float seconds.
-	 */
-	timeout?: string;
-	/**
-	 * @type string
-	 * @description Any non-empty value includes query statistics in the response.
-	 */
-	stats?: string;
-};

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -8,14 +8,12 @@ export interface AlertBreadcrumbProps {
 	items: BreadcrumbItemConfig[];
 	className?: string;
 	showDivider?: boolean;
-	testId?: string;
 }
 
 function AlertBreadcrumb({
 	items,
 	className,
 	showDivider = true,
-	testId,
 }: AlertBreadcrumbProps): JSX.Element {
 	const breadcrumbItems = items.map((item) => ({
 		title: <BreadcrumbItem {...item} />,
@@ -26,7 +24,6 @@ function AlertBreadcrumb({
 			<Breadcrumb
 				className={`${styles.breadcrumb} ${className || ''}`}
 				items={breadcrumbItems}
-				data-testid={testId}
 			/>
 			{showDivider && <Divider className={styles.divider} />}
 		</>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -7,8 +7,9 @@ import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
@@ -68,7 +69,9 @@ function ExplorerCard({
 		setIsOpen(newOpen);
 	};
 
-	const { viewName, viewKey } = useGetSavedViewParams();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+
+	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
 
 	const { options } = useOptionsMenu({
 		storageKey:

frontend/src/components/ExplorerCard/constants.ts

@@ -1,3 +1,5 @@
+import { QueryParams } from 'constants/query';
+
 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',
@@ -7,3 +9,5 @@ export const SaveButtonText = {
 	SAVE_AS_NEW_VIEW: 'Save as new view',
 	SAVE_VIEW: 'Save view',
 };
+
+export type QuerySearchParamNames = QueryParams.viewName | QueryParams.viewKey;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -197,7 +197,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+				key: buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -52,15 +52,13 @@ function OtherFields({
 		// Normalize: synthesize `key` once so downstream reads can trust it.
 		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
 			...attr,
-			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
+			key: buildCompositeKey(attr.name, attr.fieldContext as string),
 			signal: attr.signal as SignalType,
 			fieldContext: attr.fieldContext as FieldContext,
 			fieldDataType: attr.fieldDataType,
 		}));
 		const addedIds = new Set(
-			addedFields.map((f) =>
-				buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-			),
+			addedFields.map((f) => buildCompositeKey(f.name, f.fieldContext)),
 		);
 		const available = suggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -14,10 +14,10 @@ jest.mock('providers/App/App', () => ({
 	useAppContext: (): { featureFlags: [] } => ({ featureFlags: [] }),
 }));
 
-const field = (name: string, type = '', dataType = ''): IField => ({
+const field = (name: string, type = ''): IField => ({
 	name,
 	type,
-	dataType,
+	dataType: 'string',
 });
 
 describe('useLogsTableColumns — selectColumns-order respected', () => {
@@ -136,24 +136,6 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		expect(byId.get('user_field')?.enableRemove).toBe(true);
 	});
 
-	it('disambiguates same-name/same-context fields by dataType (3-part id)', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('http.status_code', 'attribute', 'int64'),
-					field('http.status_code', 'attribute', 'string'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'attribute:http.status_code:int64',
-			'attribute:http.status_code:string',
-		]);
-	});
-
 	it('renders only the stateIndicator when fields is empty', () => {
 		const { result } = renderHook(() =>
 			useLogsTableColumns({

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -92,7 +92,7 @@ export function useLogsTableColumns({
 		};
 
 		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
-			id: buildCompositeKey(f.name, f.type, f.dataType),
+			id: buildCompositeKey(f.name, f.type),
 			header: f.name,
 			accessorFn: (log): unknown =>
 				getLogFieldValue(log, f.name, isBodyJsonEnabled),

frontend/src/components/NotFound/NotFound.stories.mocks.tsx

@@ -0,0 +1,15 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+/**
+ * The catch-all has no route of its own: it answers for whatever pathname the
+ * `Switch` ran out of routes for, and it calls nothing.
+ */
+export const notFoundMocks = defineStoryMocks({
+	controls: {},
+	config: () => ({ route: '/no-such-page' }),
+});

frontend/src/components/NotFound/NotFound.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import { withAppLayout } from '@/storybook/decorators/withAppLayout';
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import NotFound from './index';
+import { notFoundMocks } from './NotFound.stories.mocks';
+
+type NotFoundArgs = PageStoryArgs<typeof notFoundMocks>;
+
+/**
+ * The catch-all route mounts it with no props, and its `defaultProps` is what
+ * keeps the component itself from typing as one that takes the story's args.
+ */
+function CatchAllPage(): JSX.Element {
+	return <NotFound />;
+}
+
+const pageStory = storyMocks(notFoundMocks);
+
+/**
+ * The shell around a pathname no route matched: the side nav stays, the content
+ * area carries the 404.
+ *
+ * Route: any unmatched path.
+ */
+const meta = {
+	title: 'Pages/System/Not Found',
+	component: CatchAllPage,
+	decorators: [withAppLayout],
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<NotFoundArgs>;
+
+export default meta;
+
+type Story = StoryObj<NotFoundArgs>;
+
+/**
+ * What the app shows for a pathname no route matched, inside the shell: the
+ * side nav is still there, and the way back is the home button.
+ */
+export const Default: Story = {};

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -241,29 +241,28 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						))
 					)}
 
-					{!showOnlyWhereClause &&
-						currentQuery.builder.queryFormulas?.length > 0 && (
-							<div className="qb-formulas-container">
-								{currentQuery.builder.queryFormulas.map((formula, index) => {
-									const query =
-										currentQuery.builder.queryData[index] ||
-										currentQuery.builder.queryData[0];
+					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
+						<div className="qb-formulas-container">
+							{currentQuery.builder.queryFormulas.map((formula, index) => {
+								const query =
+									currentQuery.builder.queryData[index] ||
+									currentQuery.builder.queryData[0];
 
-									return (
-										<div key={formula.queryName} className="qb-formula">
-											<Formula
-												filterConfigs={filterConfigs}
-												query={query}
-												formula={formula}
-												index={index}
-												isAdditionalFilterEnable={false}
-												isQBV2
-											/>
-										</div>
-									);
-								})}
-							</div>
-						)}
+								return (
+									<div key={formula.queryName} className="qb-formula">
+										<Formula
+											filterConfigs={filterConfigs}
+											query={query}
+											formula={formula}
+											index={index}
+											isAdditionalFilterEnable={false}
+											isQBV2
+										/>
+									</div>
+								);
+							})}
+						</div>
+					)}
 
 					{shouldShowFooter && (
 						<QueryFooter
@@ -291,7 +290,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							</div>
 						))}
 
-						{currentQuery.builder.queryFormulas?.map((formula) => (
+						{currentQuery.builder.queryFormulas.map((formula) => (
 							<div key={formula.queryName} className="formula-name">
 								{formula.queryName}
 							</div>

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

@@ -212,32 +212,6 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		expect(handleRunQueryMock).toHaveBeenCalled();
 	});
 
-	it('does not crash when builder.queryFormulas/queryTraceOperator are missing (partial/legacy query)', () => {
-		const currentQueryBase = baseQBContext.currentQuery as Query;
-
-		mockedUseQueryBuilder.mockReturnValue({
-			...baseQBContext,
-			currentQuery: {
-				...currentQueryBase,
-				builder: {
-					queryData: currentQueryBase.builder.queryData,
-					queryFormulas: undefined as unknown as [],
-					queryTraceOperator: undefined as unknown as [],
-				},
-			},
-		});
-
-		expect(() =>
-			render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />),
-		).not.toThrow();
-
-		// query list still renders from queryData, formulas block is skipped
-		expect(document.querySelector('.query-names-section')).toBeInTheDocument();
-		expect(
-			document.querySelector('.qb-formulas-container'),
-		).not.toBeInTheDocument();
-	});
-
 	it('fx button is disabled when functions already exist', () => {
 		const currentQueryBase = baseQBContext.currentQuery as Query;
 		const supersetQueryBase = baseQBContext.supersetQuery as Query;

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

@@ -4,7 +4,7 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import {
 	setupAuthzAdmin,
 	setupAuthzDeny,
@@ -110,7 +110,10 @@ describe('ServiceAccountDrawer — permissions', () => {
 	it('shows PermissionDeniedCallout in Keys tab when list-keys permission is denied', async () => {
 		server.use(setupAuthzDeny(APIKeyListPermission));
 
-		renderDrawer({ account: 'sa-1', tab: 'keys' });
+		renderDrawer();
+		await screen.findByDisplayValue('CI Bot');
+
+		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
 
 		await waitFor(() => {
 			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();

frontend/src/constants/localStorage.ts

@@ -11,7 +11,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
-	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -450,6 +450,12 @@ export default function ChatInput({
 			return;
 		}
 		el.style.height = 'auto';
+		// A hidden composer (a closed drawer, a story swapping in) measures 0.
+		// Leaving the height on `auto` keeps the `rows` fallback until there is
+		// something real to measure, instead of pinning the field shut.
+		if (el.scrollHeight === 0) {
+			return;
+		}
 		el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_HEIGHT_PX)}px`;
 	}, [text]);
 

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -29,7 +29,6 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
-					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -41,7 +40,6 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
-					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -26,10 +26,7 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div
-				className="change-percentage change-percentage--success"
-				data-testid="stats-card-change"
-			>
+			<div className="change-percentage change-percentage--success">
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -41,10 +38,7 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div
-				className="change-percentage change-percentage--error"
-				data-testid="stats-card-change"
-			>
+			<div className="change-percentage change-percentage--error">
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -56,10 +50,7 @@ function ChangePercentage({
 	}
 
 	return (
-		<div
-			className="change-percentage change-percentage--no-previous-data"
-			data-testid="stats-card-change"
-		>
+		<div className="change-percentage change-percentage--no-previous-data">
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -112,12 +103,7 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div
-			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
-			data-testid="stats-card"
-			data-stats-title={title}
-			data-empty={isEmpty ? 'true' : 'false'}
-		>
+		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -137,7 +123,7 @@ function StatsCard({
 			</div>
 
 			<div className="stats-card__stats">
-				<div className="count-label" data-testid="stats-card-value">
+				<div className="count-label">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx

@@ -81,11 +81,7 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);
 
 	return (
-		<div
-			style={{ height: '100%', width: '100%' }}
-			ref={graphRef}
-			data-testid="stats-card-sparkline"
-		>
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -48,16 +48,11 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card" data-testid="top-contributors-card">
+			<div className="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button
-							type="text"
-							className="view-all"
-							onClick={toggleViewAllDrawer}
-							data-testid="top-contributors-view-all"
-						>
+						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -68,10 +68,7 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div
-						className="total-contribution"
-						data-testid="top-contributors-row-count"
-					>
+					<div className="total-contribution">
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -81,10 +78,7 @@ function TopContributorsRows({
 
 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
-		'data-testid': string;
-	} => ({
-		'data-testid': 'top-contributors-row',
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx

@@ -31,10 +31,7 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div
-				className="top-contributors-card--view-all"
-				data-testid="top-contributors-drawer"
-			>
+			<div className="top-contributors-card--view-all">
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -32,8 +32,8 @@ function GraphWrapper({
 	}, [data?.data]);
 
 	return (
-		<div className="timeline-graph" data-testid="timeline-graph">
-			<div className="timeline-graph__title" data-testid="timeline-graph-title">
+		<div className="timeline-graph">
+			<div className="timeline-graph__title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -118,10 +118,7 @@ function TimelineTableContent(): JSX.Element {
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
-		'data-testid': string;
-	} => ({
-		'data-testid': 'timeline-row',
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
 			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
@@ -131,15 +128,12 @@ function TimelineTableContent(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table" data-testid="timeline-table">
+		<div className="timeline-table">
 			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
 			{!isLoadingKeys && hardcodedAttributeKeys ? (
 				<div className="timeline-table__filter">
 					<div className="timeline-table__filter-row">
-						<div
-							className="timeline-table__filter-search"
-							data-testid="timeline-filter-search"
-						>
+						<div className="timeline-table__filter-search">
 							<QuerySearch
 								onChange={querySearchOnChange}
 								queryData={queryData}
@@ -161,7 +155,6 @@ function TimelineTableContent(): JSX.Element {
 					<Skeleton.Input
 						className="timeline-table__filter--loading-skeleton"
 						active
-						data-testid="timeline-filter-skeleton"
 					/>
 				</div>
 			)}
@@ -179,17 +172,14 @@ function TimelineTableContent(): JSX.Element {
 				locale={{
 					emptyText:
 						isError && apiError ? (
-							<div className="timeline-table__error" data-testid="timeline-error">
+							<div className="timeline-table__error">
 								<ErrorContent error={apiError} />
 							</div>
 						) : undefined,
 				}}
 				footer={(): JSX.Element => (
 					<div className="timeline-table__pagination">
-						<div
-							className="timeline-table__pagination-info"
-							data-testid="timeline-footer-range"
-						>
+						<div className="timeline-table__pagination-info">
 							{paginationConfig.showTotal?.(totalItems, [
 								totalItems === 0
 									? 0

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -21,14 +21,18 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<AlertState state={value} showLabel testId="timeline-row-state" />
+			<div className="alert-rule-state">
+				<AlertState state={value} showLabel />
+			</div>
 		),
 	},
 	{
 		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<AlertLabels labels={labels} testId="timeline-row-labels" />
+			<div className="alert-rule-labels">
+				<AlertLabels labels={labels} />
+			</div>
 		),
 	},
 	{
@@ -36,10 +40,7 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div
-				className="alert-rule__created-at"
-				data-testid="timeline-row-created-at"
-			>
+			<div className="alert-rule__created-at">
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -52,7 +53,7 @@ export const timelineTableColumns = ({
 			if (!record.relatedTracesLink && !record.relatedLogsLink) {
 				return (
 					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled data-testid="timeline-row-actions">
+						<Button type="text" ghost disabled>
 							<Ellipsis className="dropdown-icon" size="md" />
 						</Button>
 					</Tooltip>
@@ -64,7 +65,7 @@ export const timelineTableColumns = ({
 					relatedTracesLink={record.relatedTracesLink ?? ''}
 					relatedLogsLink={record.relatedLogsLink ?? ''}
 				>
-					<Button type="text" ghost data-testid="timeline-row-actions">
+					<Button type="text" ghost>
 						<Ellipsis className="dropdown-icon" size="md" />
 					</Button>
 				</ConditionalAlertPopover>

frontend/src/container/AlertHistory/Timeline/Table/utils.ts

@@ -10,7 +10,6 @@ const fieldContextToSuggestionMap: Record<
 	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
 	// no maps for the following values on suggestion context
 	[TelemetrytypesFieldContextDTO.trace]: undefined,
-	[TelemetrytypesFieldContextDTO.scope]: undefined,
 	[TelemetrytypesFieldContextDTO.body]: undefined,
 	[TelemetrytypesFieldContextDTO.metric]: undefined,
 	[TelemetrytypesFieldContextDTO.log]: undefined,

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -23,7 +23,6 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
-			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -34,7 +33,6 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
-			testId: 'timeline-tab-top-contributors',
 		},
 	];
 
@@ -59,17 +57,14 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
-			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
-			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
-			testId: 'timeline-filter-resolved',
 		},
 	];
 

frontend/src/container/Controls/Controls.module.scss

@@ -1,6 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	--button-font-size: var(--periscope-font-size-base, 13px);
-}

frontend/src/container/Controls/index.tsx

@@ -1,12 +1,11 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Select } from 'antd';
+import { Button, Flex, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
-import styles from './Controls.module.scss';
+import { Container } from './styles';
 
 function Controls({
 	offset = 0,
@@ -35,24 +34,28 @@ function Controls({
 	);
 
 	return (
-		<div className={styles.container}>
+		<Container>
 			<Button
-				variant="link"
-				size="md"
+				loading={isLoading}
+				size="small"
+				type="link"
 				disabled={isPreviousDisabled}
-				prefix={<ChevronLeft size={16} />}
 				onClick={handleNavigatePrevious}
 			>
-				Previous
+				<Flex align="center" gap="4px">
+					<ChevronLeft size={16} /> Previous
+				</Flex>
 			</Button>
 			<Button
-				variant="link"
-				size="md"
+				loading={isLoading}
+				size="small"
+				type="link"
 				disabled={isNextDisabled}
-				suffix={<ChevronRight size={16} />}
 				onClick={handleNavigateNext}
 			>
-				Next
+				<Flex align="center" gap="4px">
+					Next <ChevronRight size={16} />
+				</Flex>
 			</Button>
 
 			{showSizeChanger && (
@@ -71,7 +74,7 @@ function Controls({
 					))}
 				</Select>
 			)}
-		</div>
+		</Container>
 	);
 }
 

frontend/src/container/Controls/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+`;

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -34,7 +34,6 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
-									testId="send-notification-if-data-is-missing-input"
 								/>
 								<Typography.Text>Minutes</Typography.Text>
 							</div>
@@ -67,7 +66,6 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.enforceMinimumDatapoints.minimumDatapoints}
-									testId="enforce-minimum-datapoints-input"
 								/>
 								<Typography.Text>Datapoints</Typography.Text>
 							</div>

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -66,7 +66,6 @@ function EvaluationWindowPopover({
 						tabIndex={0}
 						data-value={option.value}
 						data-section-id={sectionId}
-						data-testid={`${sectionId}-option-${option.value}`}
 						onClick={(): void => onChange(option.value)}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -186,7 +186,6 @@ function Footer(): JSX.Element {
 				color="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
-				testId="save-alert-rule-button"
 			>
 				{isCreatingAlertRule || isUpdatingAlertRule ? (
 					<Loader data-testid="save-alert-rule-loader-icon" size={14} />
@@ -219,7 +218,6 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
-				testId="test-notification-button"
 			>
 				{isTestingAlertRule ? (
 					<Loader data-testid="test-notification-loader-icon" size={14} />
@@ -251,7 +249,6 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleDiscard}
 				disabled={disableButtons}
-				testId="discard-alert-rule-button"
 			>
 				<X size={14} /> Discard
 			</Button>

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -54,7 +54,7 @@ import {
 } from 'container/OptionsMenu/constants';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { useSaveView } from 'hooks/saveViews/useSaveView';
@@ -287,7 +287,8 @@ function ExplorerOptions({
 
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 
-	const { viewName, viewKey } = useGetSavedViewParams();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
 
 	const extraData = viewsData?.data?.data?.find(
 		(view) => view.id === viewKey,

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -119,7 +119,6 @@ function BasicInfo({
 					<SeveritySelect
 						getPopupContainer={popupContainer}
 						defaultValue="critical"
-						data-testid="alert-severity-select"
 						onChange={(value: unknown | string): void => {
 							const s = (value as string) || 'critical';
 							setAlertDef({
@@ -148,7 +147,6 @@ function BasicInfo({
 					]}
 				>
 					<InputSmall
-						data-testid="alert-name-input-v1"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,
@@ -163,7 +161,6 @@ function BasicInfo({
 					name={['annotations', 'description']}
 				>
 					<TextareaMedium
-						data-testid="alert-description-input"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -105,7 +105,7 @@ function QuerySection({
 		{
 			label: (
 				<Tooltip title="Query Builder">
-					<Button className="nav-btns" data-testid="query-builder-tab">
+					<Button className="nav-btns">
 						<Atom size={14} />
 						<Typography.Text>Query Builder</Typography.Text>
 					</Button>
@@ -122,11 +122,7 @@ function QuerySection({
 							: 'ClickHouse'
 					}
 				>
-					<Button
-						className="nav-btns"
-						disabled={isAnomalyDetection}
-						data-testid="clickhouse-tab"
-					>
+					<Button className="nav-btns" disabled={isAnomalyDetection}>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
@@ -166,11 +162,7 @@ function QuerySection({
 								: 'ClickHouse'
 						}
 					>
-						<Button
-							className="nav-btns"
-							disabled={isAnomalyDetection}
-							data-testid="clickhouse-tab"
-						>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
@@ -188,11 +180,7 @@ function QuerySection({
 								: 'PromQL'
 						}
 					>
-						<Button
-							className="nav-btns"
-							disabled={isAnomalyDetection}
-							data-testid="promql-tab"
-						>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -80,7 +80,6 @@ function RuleOptions({
 			defaultValue={defaultCompareOp}
 			value={alertDef.condition?.op}
 			style={{ minWidth: '120px' }}
-			data-testid="alert-threshold-op-select"
 			onChange={(value: string | unknown): void => {
 				const newOp = (value as string) || '';
 
@@ -117,7 +116,6 @@ function RuleOptions({
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
-			data-testid="alert-threshold-match-type-select-v1"
 			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
 		>
 			<Select.Option value="1">{t('option_atleastonce')}</Select.Option>
@@ -179,7 +177,6 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
-			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -197,7 +194,6 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
-			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -399,7 +395,6 @@ function RuleOptions({
 									value={alertDef?.condition?.target}
 									onChange={onChange}
 									type="number"
-									data-testid="alert-threshold-target-input"
 									onWheel={(e): void => e.currentTarget.blur()}
 								/>
 							</Form.Item>

frontend/src/container/FormAlertRules/index.tsx

@@ -844,6 +844,8 @@ function FormAlertRules({
 
 	return (
 		<>
+			{Element}
+
 			<div
 				id="top"
 				className={`form-alert-rules-container ${
@@ -966,7 +968,6 @@ function FormAlertRules({
 								!isChannelConfigurationValid ||
 								queryStatus === 'error'
 							}
-							data-testid="alert-save-button"
 						>
 							{isNewRule ? t('button_createrule') : t('button_savechanges')}
 						</ActionButton>
@@ -980,7 +981,6 @@ function FormAlertRules({
 							}
 							type="default"
 							onClick={onTestRuleHandler}
-							data-testid="alert-test-button"
 						>
 							{' '}
 							{t('button_testrule')}
@@ -989,7 +989,6 @@ function FormAlertRules({
 							disabled={loading || false}
 							type="default"
 							onClick={onCancelHandler}
-							data-testid="alert-cancel-button"
 						>
 							{isNewRule && t('button_cancelchanges')}
 							{ruleId && !isEmpty(ruleId) && t('button_discard')}
@@ -999,7 +998,6 @@ function FormAlertRules({
 			</div>
 
 			<ConfirmDialog
-				testId="alert-save-confirm-dialog"
 				open={isConfirmSaveOpen}
 				onOpenChange={setIsConfirmSaveOpen}
 				title={t('confirm_save_title')}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -174,7 +174,6 @@ function LabelSelect({
 
 			<div style={{ display: 'flex', width: '100%' }}>
 				<Input
-					data-testid="alert-labels-input-v1"
 					placeholder={renderPlaceholder()}
 					onChange={handleLabelChange}
 					onKeyUp={(e): void => {

frontend/src/container/FormAlertRules/utils.ts

@@ -53,24 +53,17 @@ export const getUpdatedStepInterval = (evalWindow?: string): number => {
 };
 
 export const getSelectedQueryOptions = (
-	queries:
-		| Array<
-				| IBuilderQuery
-				| IBuilderTraceOperator
-				| IBuilderFormula
-				| IClickHouseQuery
-				| IPromQLQuery
-		  >
-		| undefined
-		| null,
-): SelectProps['options'] => {
-	if (!queries) {
-		return [];
-	}
-	return queries
+	queries: Array<
+		| IBuilderQuery
+		| IBuilderTraceOperator
+		| IBuilderFormula
+		| IClickHouseQuery
+		| IPromQLQuery
+	>,
+): SelectProps['options'] =>
+	queries
 		.filter((query) => !query.disabled)
 		.map((query) => ({
 			label: 'queryName' in query ? query.queryName : query.name,
 			value: 'queryName' in query ? query.queryName : query.name,
 		}));
-};

frontend/src/container/LLMObservability/Explorer/Explorer.module.scss

@@ -0,0 +1,11 @@
+.explorer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--spacing-0);
+}
+
+.placeholder {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss

@@ -1,106 +0,0 @@
-.trace-explorer-header {
-	.trace-explorer-run-query {
-		display: flex;
-		flex-direction: row-reverse;
-		align-items: center;
-		margin: 8px 16px;
-		gap: 8px;
-	}
-
-	.filter-outlined-btn {
-		border-radius: 0px 2px 2px 0px;
-		border-top: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-	}
-}
-
-.trace-explorer-header.single-child {
-	justify-content: flex-end;
-}
-
-.traces-explorer-views {
-	padding: 8px;
-	padding-bottom: 60px;
-	margin-bottom: 24px;
-
-	.ant-tabs-tabpane {
-		padding: 0 8px;
-	}
-}
-
-.qb-search-view-container {
-	padding: 8px;
-
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 8px;
-
-	.ant-select-selector {
-		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l2-background) !important;
-		height: 34px !important;
-		box-sizing: border-box !important;
-	}
-}
-
-.trace-explorer-list-view {
-	flex: 1;
-}
-
-.trace-explorer-traces-view {
-	flex: 1;
-}
-
-.trace-explorer-table-view {
-	flex: 1;
-}
-
-.trace-explorer-time-series-view {
-	flex: 1;
-}
-
-.trace-explorer-page {
-	display: flex;
-
-	// Meant to fix the query builder colors
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--internal-ant-border-color-hover);
-	--input-focus-border-color: var(--internal-ant-border-color-hover);
-
-	.filter {
-		width: 260px;
-		height: 100%;
-		min-height: 100vh;
-
-		border-right: 0px;
-		border: 1px solid var(--l1-border);
-		background-color: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-			width: 258px;
-		}
-	}
-
-	.trace-explorer {
-		width: 100%;
-		background: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-		}
-
-		border-color: var(--l1-border);
-	}
-	.trace-explorer.filters-expanded {
-		width: calc(100% - 260px);
-	}
-}

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -1,373 +1,13 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { useSearchParams } from 'react-router-dom-v5-compat';
-import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
-import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
-import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
-import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import Toolbar from 'container/Toolbar/Toolbar';
-import {
-	getExportQueryData,
-	getQueryByPanelType,
-} from 'container/TracesExplorer/explorerUtils';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import {
-	ICurrentQueryData,
-	useHandleExplorerTabChange,
-} from 'hooks/useHandleExplorerTabChange';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { isEmpty } from 'lodash-es';
-import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-import {
-	tracesAddFilterAction,
-	tracesChangeViewAction,
-	tracesRunQueryAction,
-	tracesSaveViewAction,
-} from 'pages/TracesExplorer/aiActions';
-import { Warning } from 'types/api';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import {
-	explorerViewToPanelType,
-	getExplorerViewFromUrl,
-} from 'utils/explorerUtils';
-import { v4 } from 'uuid';
-
-import { TOOLBAR_VIEWS } from './constants';
-import ListView from './ListView/ListView';
-import { defaultSelectedColumns } from './ListView/configs';
-import QuerySection from './QuerySection/QuerySection';
-import TableView from './TableView/TableView';
-import TimeSeriesView from './TimeSeriesView/TimeSeriesView';
-import TracesView from './TracesView/TracesView';
-
-import './Explorer.styles.scss';
+import styles from './Explorer.module.scss';
 
+// Shell for the AI Observability Explorer tab. Owns the
+// /ai-observability/explorer route and is intentionally empty for now: the
+// query builder + results surface land in a follow-up.
 function Explorer(): JSX.Element {
-	const {
-		panelType,
-		updateAllQueriesOperators,
-		handleRunQuery,
-		stagedQuery,
-		handleSetConfig,
-		currentQuery,
-		handleSetQueryData,
-		redirectWithQueryBuilderData,
-	} = useQueryBuilder();
-
-	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-
-	const { options } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'noop',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
-	const [searchParams] = useSearchParams();
-	const queryClient = useQueryClient();
-	const listQueryKeyRef = useRef<any>();
-
-	// Get panel type from URL
-	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		if (listQueryKeyRef.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		setIsCancelled(true);
-		// Reset loading state — the active view unmounts when cancelled, so no
-		// child will call setIsLoadingQueries(false) otherwise.
-		setIsLoadingQueries(false);
-	}, [queryClient]);
-
-	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
-		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
-	);
-
-	const [warning, setWarning] = useState<Warning | undefined>();
-	const [isOpen, setOpen] = useState<boolean>(true);
-
-	const defaultQuery = useMemo(
-		(): Query =>
-			updateAllQueriesOperators(
-				initialQueriesMap.traces,
-				PANEL_TYPES.LIST,
-				DataSource.TRACES,
-			),
-		[updateAllQueriesOperators],
-	);
-
-	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { safeNavigate } = useSafeNavigate();
-	const getExportToDashboardLink = useGetExportToDashboardLink();
-
-	const handleChangeSelectedView = useCallback(
-		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
-			handleSetConfig(explorerViewToPanelType[view], DataSource.TRACES);
-
-			setSelectedView(view);
-
-			handleExplorerTabChange(
-				explorerViewToPanelType[view],
-				querySearchParameters,
-			);
-		},
-		[handleExplorerTabChange, handleSetConfig],
-	);
-
-	// ─── AI Assistant page actions (only when license feature is on) ───────────
-	const aiActions = useMemo(
-		() =>
-			isAIAssistantEnabled
-				? [
-						tracesRunQueryAction({
-							currentQuery,
-							handleSetQueryData,
-							redirectWithQueryBuilderData,
-						}),
-						tracesAddFilterAction({
-							currentQuery,
-							handleSetQueryData,
-							redirectWithQueryBuilderData,
-						}),
-						tracesChangeViewAction({
-							onChangeView: (view) => handleChangeSelectedView(view as ExplorerViews),
-						}),
-						tracesSaveViewAction({
-							// POC stub — logs a save request; wire to real API when available
-							onSaveView: async (name) => {
-								// eslint-disable-next-line no-console
-								console.info('[AI Assistant] Save view requested:', name);
-							},
-						}),
-					]
-				: [],
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			isAIAssistantEnabled,
-			currentQuery,
-			handleSetQueryData,
-			redirectWithQueryBuilderData,
-			handleChangeSelectedView,
-		],
-	);
-	usePageActions('traces-explorer', aiActions);
-	// ───────────────────────────────────────────────────────────────────────────
-
-	const exportDefaultQuery = useMemo(
-		() =>
-			getQueryByPanelType(
-				stagedQuery || initialQueriesMap.traces,
-				panelType || PANEL_TYPES.LIST,
-			),
-		[stagedQuery, panelType],
-	);
-
-	const handleExport = useCallback(
-		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
-			if (!dashboard || !panelType) {
-				return;
-			}
-
-			const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
-				? panelType
-				: PANEL_TYPES.TIME_SERIES;
-
-			const widgetId = v4();
-
-			const query = getExportQueryData(
-				exportDefaultQuery,
-				panelTypeParam,
-				options,
-			);
-
-			logEvent('Traces Explorer: Add to dashboard successful', {
-				panelType,
-				isNewDashboard,
-				dashboardName: dashboard?.title,
-			});
-
-			const dashboardEditView = getExportToDashboardLink({
-				query,
-				panelType: panelTypeParam,
-				dashboardId: dashboard.id,
-				widgetId,
-			});
-
-			if (dashboardEditView) {
-				safeNavigate(dashboardEditView);
-			}
-		},
-		[
-			exportDefaultQuery,
-			panelType,
-			safeNavigate,
-			options,
-			getExportToDashboardLink,
-		],
-	);
-
-	useShareBuilderUrl({ defaultValue: defaultQuery });
-
-	const logEventCalledRef = useRef(false);
-
-	useEffect(() => {
-		if (!logEventCalledRef.current) {
-			logEvent('Traces Explorer: Page visited', {});
-			logEventCalledRef.current = true;
-		}
-	}, []);
-
-	const isFilterApplied = useMemo(() => {
-		// if any of the non-disabled queries has filters applied, return true
-		const result = stagedQuery?.builder?.queryData?.filter(
-			(item) => !isEmpty(item.filters?.items) && !item.disabled,
-		);
-		return !!result?.length;
-	}, [stagedQuery]);
-
 	return (
-		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
-				className="trace-explorer-page"
-				data-testid="llm-observability-explorer"
-			>
-				<Card className="filter" hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-					/>
-				</Card>
-				<div
-					className={cx('trace-explorer', {
-						'filters-expanded': isOpen,
-					})}
-				>
-					<div className="trace-explorer-header">
-						<Toolbar
-							showAutoRefresh
-							leftActions={
-								<LeftToolbarActions
-									showFilter={isOpen}
-									handleFilterVisibilityChange={(): void => setOpen(!isOpen)}
-									items={TOOLBAR_VIEWS}
-									selectedView={selectedView}
-									onChangeSelectedView={handleChangeSelectedView}
-								/>
-							}
-							warningElement={
-								!isEmpty(warning) ? <WarningPopover warningData={warning} /> : <div />
-							}
-							rightActions={
-								<RightToolbarActions
-									onStageRunQuery={(): void => {
-										setIsCancelled(false);
-										handleRunQuery();
-									}}
-									isLoadingQueries={isLoadingQueries}
-									handleCancelQuery={handleCancelQuery}
-								/>
-							}
-						/>
-					</div>
-					<ExplorerCard sourcepage={DataSource.TRACES}>
-						<div className="query-section-container">
-							<QuerySection />
-						</div>
-					</ExplorerCard>
-
-					<div className="traces-explorer-views">
-						{isCancelled && (
-							<QueryCancelledPlaceholder subText='Click "Run Query" to load traces.' />
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.LIST && (
-							<div className="trace-explorer-list-view">
-								<ListView
-									isFilterApplied={isFilterApplied}
-									setWarning={setWarning}
-									setIsLoadingQueries={setIsLoadingQueries}
-									queryKeyRef={listQueryKeyRef}
-								/>
-							</div>
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.TRACE && (
-							<div className="trace-explorer-traces-view">
-								<TracesView
-									isFilterApplied={isFilterApplied}
-									setWarning={setWarning}
-									setIsLoadingQueries={setIsLoadingQueries}
-									queryKeyRef={listQueryKeyRef}
-								/>
-							</div>
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.TIMESERIES && (
-							<div className="trace-explorer-time-series-view">
-								<TimeSeriesView
-									dataSource={DataSource.TRACES}
-									isFilterApplied={isFilterApplied}
-									setWarning={setWarning}
-									setIsLoadingQueries={setIsLoadingQueries}
-									queryKeyRef={listQueryKeyRef}
-								/>
-							</div>
-						)}
-
-						{!isCancelled && selectedView === ExplorerViews.TABLE && (
-							<div className="trace-explorer-table-view">
-								<TableView
-									setWarning={setWarning}
-									setIsLoadingQueries={setIsLoadingQueries}
-									queryKeyRef={listQueryKeyRef}
-								/>
-							</div>
-						)}
-					</div>
-
-					<ExplorerOptionWrapper
-						disabled={!stagedQuery}
-						query={exportDefaultQuery}
-						sourcepage={DataSource.TRACES}
-						onExport={handleExport}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				</div>
-			</div>
-		</Sentry.ErrorBoundary>
+		<div className={styles.explorer} data-testid="llm-observability-explorer">
+			<div className={styles.placeholder}>Explorer coming soon.</div>
+		</div>
 	);
 }
 

frontend/src/container/LLMObservability/Explorer/ListView/ListView.module.scss

@@ -1,8 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	height: calc(100vh - 240px);
-	min-height: 400px;
-}

frontend/src/container/LLMObservability/Explorer/ListView/ListView.styles.scss

@@ -1,34 +0,0 @@
-.trace-explorer-controls {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	gap: 8px;
-
-	.order-by-container {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		.order-by-label {
-			color: var(--muted-foreground);
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 16px; /* 133.333% */
-
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.order-by-select {
-			width: 100px;
-
-			.ant-select-selector {
-				border: none;
-				box-shadow: none;
-				background-color: transparent;
-			}
-		}
-	}
-}

frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx

@@ -1,272 +0,0 @@
-import {
-	Dispatch,
-	memo,
-	MutableRefObject,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { QueryKey } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
-import {
-	getTraceLink,
-	transformSpanRows,
-} from 'container/TracesExplorer/ListView/utils';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Pagination } from 'hooks/queryPagination';
-import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
-import useUrlQueryData from 'hooks/useUrlQueryData';
-import { ArrowUp10, Minus } from '@signozhq/icons';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import {
-	defaultSelectedColumns,
-	PER_PAGE_OPTIONS,
-	TIMESTAMP_FIELD,
-} from './configs';
-import './ListView.styles.scss';
-
-import styles from './ListView.module.scss';
-
-interface ListViewProps {
-	isFilterApplied: boolean;
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
-}
-
-function ListView({
-	isFilterApplied,
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: ListViewProps): JSX.Element {
-	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
-		useQueryBuilder();
-
-	const panelType = panelTypeFromQueryBuilder || PANEL_TYPES.LIST;
-
-	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-		loading: timeRangeUpdateLoading,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const { options, config } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'count',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
-	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
-		QueryParams.pagination,
-	);
-	const paginationConfig =
-		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
-
-	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
-		[stagedQuery, orderBy],
-	);
-
-	// Stable sorted-name signature for the queryKey.
-	// - Drag updates selectColumns; raw queryKey would churn on reorder.
-	// - Trace API fetches only listed columns → add/remove must refetch.
-	// - Sorted-name signature: stable on reorder, changes on add/remove.
-	const selectColumnsSignature = useMemo(
-		() =>
-			(options?.selectColumns ?? [])
-				.map((c) => c.name)
-				.sort()
-				.join(','),
-		[options?.selectColumns],
-	);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-			panelType,
-			paginationConfig,
-			selectColumnsSignature,
-			orderBy,
-		],
-		[
-			stagedQuery,
-			panelType,
-			globalSelectedTime,
-			paginationConfig,
-			selectColumnsSignature,
-			maxTime,
-			minTime,
-			orderBy,
-		],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isFetching, isLoading, isError, error } = useGetQueryRange(
-		{
-			query: requestQuery,
-			graphType: panelType,
-			selectedTime: 'GLOBAL_TIME' as const,
-			globalSelectedInterval: globalSelectedTime as CustomTimeType,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: paginationConfig,
-				selectColumns: options?.selectColumns,
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled:
-				// don't make api call while the time range state in redux is loading
-				!timeRangeUpdateLoading &&
-				!!stagedQuery &&
-				panelType === PANEL_TYPES.LIST &&
-				!!options?.selectColumns?.length,
-		},
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
-	const queryTableData = useMemo(
-		() => queryTableDataResult || [],
-		[queryTableDataResult],
-	);
-
-	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
-		const fields = [
-			TIMESTAMP_FIELD,
-			...(options?.selectColumns ?? []).filter(
-				(field) => field.name !== TIMESTAMP_FIELD.name,
-			),
-		];
-		return fields.map((field) => getFieldColumn(field));
-	}, [options?.selectColumns]);
-
-	const rows = useMemo(
-		() => transformSpanRows(queryTableData),
-		[queryTableData],
-	);
-
-	const handleColumnOrderChange = useCallback(
-		(reordered: TableColumnDef<TracesTableRow>[]): void => {
-			config?.addColumn?.onReorder(reordered.map((column) => column.id));
-		},
-		[config],
-	);
-
-	const handleOrderChange = useCallback((value: string) => {
-		setOrderBy(value);
-	}, []);
-
-	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', {
-				panelType,
-			});
-		}
-	}, [isLoading, isFetching, isError, rows, panelType]);
-
-	return (
-		<div className={styles.container}>
-			<div className="trace-explorer-controls">
-				<div className="order-by-container">
-					<div className="order-by-label">
-						Order by <Minus size={14} /> <ArrowUp10 size={14} />
-					</div>
-
-					<ListViewOrderBy
-						value={orderBy}
-						onChange={handleOrderChange}
-						dataSource={DataSource.TRACES}
-					/>
-				</div>
-
-				<DownloadOptionsMenu
-					dataSource={DataSource.TRACES}
-					selectedColumns={options?.selectColumns}
-				/>
-
-				<TraceExplorerControls
-					isLoading={isFetching}
-					totalCount={rows.length}
-					config={config}
-					perPageOptions={PER_PAGE_OPTIONS}
-				/>
-			</div>
-
-			<TracesTable
-				data={rows}
-				columns={columns}
-				panelType="LIST"
-				getRowHref={getTraceLink}
-				isLoading={isLoading}
-				isFetching={isFetching}
-				isError={isError}
-				error={error}
-				isFilterApplied={isFilterApplied}
-				onColumnOrderChange={handleColumnOrderChange}
-				onColumnRemove={config?.addColumn?.onRemove}
-			/>
-		</div>
-	);
-}
-
-ListView.defaultProps = {
-	queryKeyRef: undefined,
-};
-
-export default memo(ListView);

frontend/src/container/LLMObservability/Explorer/ListView/configs.ts

@@ -1,19 +0,0 @@
-import type { TelemetryFieldKey } from 'api/v5/v5';
-import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-
-export const defaultSelectedColumns: string[] = [
-	'service.name',
-	'name',
-	'duration_nano',
-	'http_method',
-	'response_status_code',
-	'timestamp',
-];
-
-export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
-
-// Pinned timestamp column
-export const TIMESTAMP_FIELD = {
-	name: 'timestamp',
-	fieldContext: 'span',
-} as TelemetryFieldKey;

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,61 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExplorerOrderBy from 'container/ExplorerOrderBy';
-import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { DataSource } from 'types/common/queryBuilder';
-
-function QuerySection(): JSX.Element {
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const isList = panelTypes === PANEL_TYPES.LIST;
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: isList, isDisabled: true },
-			having: { isHidden: isList, isDisabled: true },
-		};
-
-		return config;
-	}, [panelTypes]);
-
-	const renderOrderBy = useCallback(
-		({ query, onChange }: OrderByFilterProps) => (
-			<ExplorerOrderBy query={query} onChange={onChange} />
-		),
-		[],
-	);
-
-	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
-		const shouldRenderCustomOrderBy =
-			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
-
-		return {
-			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
-		};
-	}, [panelTypes, renderOrderBy]);
-
-	const isListViewPanel = useMemo(
-		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
-		[panelTypes],
-	);
-
-	return (
-		<QueryBuilderV2
-			isListViewPanel={isListViewPanel}
-			showTraceOperator
-			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
-			queryComponents={queryComponents}
-			panelType={panelTypes}
-			filterConfigs={filterConfigs}
-			showOnlyWhereClause={
-				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
-			}
-			version="v3" // setting this to v3 as we this is rendered in logs explorer
-		/>
-	);
-}
-
-export default memo(QuerySection);

frontend/src/container/LLMObservability/Explorer/TableView/TableView.styles.scss

@@ -1,7 +0,0 @@
-.traces-table-view-header {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	padding: 12px;
-	flex-shrink: 0;
-}

frontend/src/container/LLMObservability/Explorer/TableView/TableView.tsx

@@ -1,130 +0,0 @@
-import {
-	Dispatch,
-	memo,
-	MutableRefObject,
-	SetStateAction,
-	useEffect,
-	useMemo,
-} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { Space } from 'antd';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ExportMenu from 'components/ExportMenu/ExportMenu';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { QueryTable } from 'container/QueryTable';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { QueryDataV3 } from 'types/api/widgets/getQuery';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import './TableView.styles.scss';
-
-function TableView({
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: {
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<any>;
-}): JSX.Element {
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-		],
-		[globalSelectedTime, maxTime, minTime, stagedQuery],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
-		{
-			query: stagedQuery || initialQueriesMap.traces,
-			graphType: panelType || PANEL_TYPES.TABLE,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			params: {
-				dataSource: 'traces',
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled: !!stagedQuery && panelType === PANEL_TYPES.TABLE,
-		},
-	);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	const queryTableData = useMemo(
-		() =>
-			data?.payload?.data?.newResult?.data?.result ||
-			data?.payload.data.result ||
-			[],
-		[data],
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	return (
-		<Space.Compact block direction="vertical">
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-			{!isError && data && (
-				<div className="traces-table-view-header">
-					<ExportMenu
-						dataSource={DataSource.TRACES}
-						data={data}
-						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
-					/>
-				</div>
-			)}
-			{!isError && (
-				<QueryTable
-					query={stagedQuery || initialQueriesMap.traces}
-					queryTableData={queryTableData as QueryDataV3[]}
-					loading={isLoading}
-					sticky
-				/>
-			)}
-		</Space.Compact>
-	);
-}
-
-TableView.defaultProps = {
-	queryKeyRef: undefined,
-};
-
-export default memo(TableView);

frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.styles.scss

@@ -1,8 +0,0 @@
-.trace-explorer-time-series-view-container {
-	&-header {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		padding: 12px;
-	}
-}

frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.tsx

@@ -1,147 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	SetStateAction,
-	useEffect,
-	useMemo,
-} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
-import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import './TimeSeriesView.styles.scss';
-
-function TimeSeriesViewContainer({
-	dataSource = DataSource.TRACES,
-	isFilterApplied,
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: TimeSeriesViewProps): JSX.Element {
-	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
-
-	const isValidToConvertToMs = useMemo(() => {
-		const isValid: boolean[] = [];
-
-		currentQuery.builder.queryData.forEach(
-			({ aggregateAttribute, aggregateOperator }) => {
-				const isExistDurationNanoAttribute =
-					aggregateAttribute?.key === 'durationNano' ||
-					aggregateAttribute?.key === 'duration_nano';
-
-				const isCountOperator =
-					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
-
-				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
-			},
-		);
-
-		return isValid.every(Boolean);
-	}, [currentQuery]);
-
-	const defaultUnit = isValidToConvertToMs ? 'ms' : 'short';
-	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit(defaultUnit);
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-		],
-		[globalSelectedTime, maxTime, minTime, stagedQuery],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
-		{
-			query: stagedQuery || initialQueriesMap[dataSource],
-			graphType: panelType || PANEL_TYPES.TIME_SERIES,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			params: {
-				dataSource,
-			},
-		},
-		// ENTITY_VERSION_V4,
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled: !!stagedQuery && panelType === PANEL_TYPES.TIME_SERIES,
-		},
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	const responseData = useMemo(
-		() => (isValidToConvertToMs ? convertDataValueToMs(data) : data),
-		[data, isValidToConvertToMs],
-	);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	return (
-		<div className="trace-explorer-time-series-view-container">
-			<TimeSeriesView
-				isFilterApplied={isFilterApplied}
-				isError={isError}
-				error={error as APIError}
-				isLoading={isLoading || isFetching}
-				data={responseData}
-				yAxisUnit={yAxisUnit}
-				onYAxisUnitChange={onUnitChange}
-				dataSource={dataSource}
-				setWarning={setWarning}
-				allowExport
-			/>
-		</div>
-	);
-}
-
-interface TimeSeriesViewProps {
-	dataSource?: DataSource;
-	isFilterApplied: boolean;
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<any>;
-}
-
-TimeSeriesViewContainer.defaultProps = {
-	dataSource: DataSource.TRACES,
-	queryKeyRef: undefined,
-};
-
-export default TimeSeriesViewContainer;

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.module.scss

@@ -1,15 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	// Page chain isn't a flex column, so anchor the virtualized table against the viewport.
-	height: calc(100vh - 240px);
-	min-height: 400px;
-}
-
-.actionsContainer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx

@@ -1,190 +0,0 @@
-import {
-	Dispatch,
-	memo,
-	MutableRefObject,
-	SetStateAction,
-	useEffect,
-	useMemo,
-} from 'react';
-import { QueryKey } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
-import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Pagination } from 'hooks/queryPagination';
-import useUrlQueryData from 'hooks/useUrlQueryData';
-import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import DOCLINKS from 'utils/docLinks';
-
-import { columns, PER_PAGE_OPTIONS } from './configs';
-import styles from './TracesView.module.scss';
-
-interface TracesViewProps {
-	isFilterApplied: boolean;
-	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
-	queryKeyRef?: MutableRefObject<QueryKey | undefined>;
-}
-
-function TracesView({
-	isFilterApplied,
-	setWarning,
-	setIsLoadingQueries,
-	queryKeyRef,
-}: TracesViewProps): JSX.Element {
-	const { stagedQuery, panelType } = useQueryBuilder();
-
-	const {
-		selectedTime: globalSelectedTime,
-		maxTime,
-		minTime,
-	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
-
-	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
-		QueryParams.pagination,
-	);
-
-	const transformedQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
-		[stagedQuery],
-	);
-
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-			panelType,
-			paginationQueryData,
-		],
-		[
-			globalSelectedTime,
-			maxTime,
-			minTime,
-			stagedQuery,
-			panelType,
-			paginationQueryData,
-		],
-	);
-
-	if (queryKeyRef) {
-		queryKeyRef.current = queryKey;
-	}
-
-	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
-		{
-			query: transformedQuery,
-			graphType: panelType || PANEL_TYPES.TRACE,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: paginationQueryData,
-			},
-		},
-		ENTITY_VERSION_V5,
-		{
-			queryKey,
-			enabled: !!stagedQuery && panelType === PANEL_TYPES.TRACE,
-		},
-	);
-
-	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
-
-	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
-
-	const rows = useMemo<TracesTableRow[]>(
-		() =>
-			(responseData ?? []).map((item) => {
-				const row = item.data;
-				return { ...row, id: row.trace_id };
-			}) as TracesTableRow[],
-		[responseData],
-	);
-
-	useEffect(() => {
-		if (isLoading || isFetching) {
-			setIsLoadingQueries(true);
-		} else {
-			setIsLoadingQueries(false);
-		}
-	}, [isLoading, isFetching, setIsLoadingQueries]);
-
-	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', {
-				panelType: 'TRACE',
-			});
-		}
-	}, [isLoading, isFetching, isError, rows.length]);
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.actionsContainer}>
-				<Typography>
-					This tab only shows Root Spans. More details
-					<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
-						{' '}
-						here
-					</Typography.Link>
-				</Typography>
-
-				<div className="trace-explorer-controls">
-					<DownloadOptionsMenu
-						dataSource={DataSource.TRACES}
-						panelType={PANEL_TYPES.TRACE}
-					/>
-
-					<TraceExplorerControls
-						isLoading={isLoading}
-						totalCount={rows.length}
-						perPageOptions={PER_PAGE_OPTIONS}
-					/>
-				</div>
-			</div>
-
-			<TracesTable
-				data={rows}
-				columns={columns}
-				respectColumnOrder
-				panelType="TRACE"
-				getRowHref={getTraceLink}
-				isLoading={isLoading}
-				isFetching={isFetching}
-				isError={isError}
-				error={error}
-				isFilterApplied={isFilterApplied}
-			/>
-		</div>
-	);
-}
-
-TracesView.defaultProps = {
-	queryKeyRef: undefined,
-};
-
-export default memo(TracesView);

frontend/src/container/LLMObservability/Explorer/TracesView/configs.ts

@@ -1,25 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-
-export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
-
-const TRACE_FIELDS = [
-	{ name: 'service.name', fieldContext: 'resource' },
-	{ name: 'name' },
-	{ name: 'duration_nano' },
-	{ name: 'span_count' },
-	{ name: 'trace_id' },
-] as TelemetryFieldKey[];
-
-export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
-	(field) => ({
-		...getFieldColumn(field),
-		enableRemove: false,
-		canBeHidden: false,
-	}),
-);

frontend/src/container/LLMObservability/Explorer/constants.ts

@@ -1,36 +0,0 @@
-export const TOOLBAR_VIEWS = {
-	list: {
-		name: 'list',
-		label: 'List',
-		show: true,
-		key: 'list',
-	},
-	timeseries: {
-		name: 'timeseries',
-		label: 'Timeseries',
-		disabled: false,
-		show: true,
-		key: 'timeseries',
-	},
-	trace: {
-		name: 'trace',
-		label: 'Trace',
-		disabled: false,
-		show: true,
-		key: 'trace',
-	},
-	table: {
-		name: 'table',
-		label: 'Table',
-		disabled: false,
-		show: true,
-		key: 'table',
-	},
-	clickhouse: {
-		name: 'clickhouse',
-		label: 'Clickhouse',
-		disabled: false,
-		show: false,
-		key: 'clickhouse',
-	},
-};

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

@@ -18,12 +18,6 @@ jest.mock('pages/DashboardPageV2/DashboardContainer', () => ({
 	default: (): JSX.Element => <div data-testid="llm-overview-dashboard" />,
 }));
 
-// Same data-router gap as the dashboard above: the Explorer toolbar calls useNavigationType.
-jest.mock('container/LLMObservability/Explorer/Explorer', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="llm-observability-explorer" />,
-}));
-
 function setupList(items = mockRules): void {
 	server.use(
 		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -4,6 +4,13 @@
 			padding: 0px 8px;
 
 			.logs-frequency-chart {
+				.ant-card-body {
+					height: 140px;
+					min-height: 140px;
+					padding: 0 16px 22px 16px;
+					font-family: 'Geist Mono';
+				}
+
 				margin-bottom: 0px;
 			}
 		}

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -15,8 +15,9 @@ import {
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
 import { FeatureKeys } from 'constants/features';
+import { QueryParams } from 'constants/query';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
@@ -49,7 +50,7 @@ function BodyTitleRenderer({
 	const { featureFlags } = useAppContext();
 	const [, setCopy] = useCopyToClipboard();
 	const { notifications } = useNotifications();
-	const { viewName } = useGetSavedViewParams();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 
 	const cleanedNodeKey = removeObjectFromString(nodeKey);
 	const isBodyJsonQueryEnabled =

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -7,12 +7,13 @@ import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import {
@@ -140,7 +141,7 @@ export default function TableViewActions(
 
 	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const { viewName } = useGetSavedViewParams();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
 
 	// there is no option for where clause in old logs explorer and live logs page or infra monitoring

frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 
@@ -88,7 +88,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 jest.mock('hooks/queryBuilder/useQueryBuilder');
-jest.mock('hooks/saveViews/useGetSavedViewParams');
+jest.mock('hooks/queryBuilder/useGetSearchQueryParam');
 
 describe('TableViewActions', () => {
 	const TEST_VALUE = 'test value';
@@ -140,10 +140,8 @@ describe('TableViewActions', () => {
 			}),
 		} as any);
 
-		// Default mock for useGetSavedViewParams
-		jest
-			.mocked(useGetSavedViewParams)
-			.mockReturnValue({ viewName: '', viewKey: '' });
+		// Default mock for useGetSearchQueryParam
+		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
 	});
 
 	it('should render without crashing', () => {
@@ -251,9 +249,7 @@ describe('TableViewActions', () => {
 			updateQueriesData: mockUpdateQueriesData,
 		} as any);
 
-		jest
-			.mocked(useGetSavedViewParams)
-			.mockReturnValue({ viewName: '', viewKey: '' });
+		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
 
 		render(
 			<TableViewActions

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -3,9 +3,10 @@ import { useLocation } from 'react-router-dom';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
+import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
@@ -57,7 +58,7 @@ export function useLogAttributeActions({
 	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
 	const { featureFlags } = useAppContext();
-	const { viewName } = useGetSavedViewParams();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 
 	const isBodyJsonQueryEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)

frontend/src/container/LogsExplorerChart/LogsExplorerChart.styles.scss

@@ -3,6 +3,13 @@
 	min-height: 200px;
 	border-bottom: 1px solid var(--l1-border);
 
+	.ant-card-body {
+		height: 200px;
+		min-height: 200px;
+		padding: 0 16px 16px 16px;
+		font-family: 'Geist Mono';
+	}
+
 	.logs-frequency-chart-loading {
 		height: 100%;
 		display: flex;

frontend/src/container/LogsExplorerChart/index.tsx

@@ -1,29 +1,25 @@
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import Graph from 'components/Graph';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
-import { useResizeObserver } from 'hooks/useDimensions';
+import { themeColors } from 'constants/theme';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import getChartData, { GetChartDataProps } from 'lib/getChartData';
 import GetMinMax from 'lib/getMinMax';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { StackMode } from 'lib/uPlotV2/config/types';
-import { useTimezone } from 'providers/Timezone';
+import { colors } from 'lib/getRandomColor';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';
-import { useLogsExplorerChartConfig } from './useLogsExplorerChartConfig';
+import { getColorsForSeverityLabels } from './utils';
 
 import './LogsExplorerChart.styles.scss';
 
-// Axis and tooltip format separately; both need this or only one abbreviates.
-const Y_AXIS_UNIT = 'short';
-
 function LogsExplorerChart({
 	data,
 	isLoading,
@@ -41,6 +37,24 @@ function LogsExplorerChart({
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
+	const handleCreateDatasets: Required<GetChartDataProps>['createDataset'] =
+		useCallback(
+			(element, index, allLabels) => ({
+				data: element,
+				backgroundColor: isLogsExplorerViews
+					? getColorsForSeverityLabels(allLabels[index], index)
+					: colors[index % colors.length] || themeColors.red,
+				borderColor: isLogsExplorerViews
+					? getColorsForSeverityLabels(allLabels[index], index)
+					: colors[index % colors.length] || themeColors.red,
+				...(isLabelEnabled
+					? {
+							label: allLabels[index],
+						}
+					: {}),
+			}),
+			[isLabelEnabled, isLogsExplorerViews],
+		);
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
@@ -72,47 +86,44 @@ function LogsExplorerChart({
 		[dispatch, location.pathname, safeNavigate, urlQuery, isShowingLiveLogs],
 	);
 
-	// uPlot plots the series on a seconds-based x scale
-	const { minTimeScale, maxTimeScale } = useMemo(
+	const graphData = useMemo(
+		() =>
+			getChartData({
+				queryData: [
+					{
+						queryData: data,
+					},
+				],
+				createDataset: handleCreateDatasets,
+			}),
+		[data, handleCreateDatasets],
+	);
+
+	// Convert nanosecond timestamps to milliseconds for Chart.js
+	const { chartMinTime, chartMaxTime } = useMemo(
 		() => ({
-			minTimeScale: minTime ? Math.floor(minTime / 1e9) : undefined,
-			maxTimeScale: maxTime ? Math.floor(maxTime / 1e9) : undefined,
+			chartMinTime: minTime ? Math.floor(minTime / 1e6) : undefined,
+			chartMaxTime: maxTime ? Math.floor(maxTime / 1e6) : undefined,
 		}),
 		[minTime, maxTime],
 	);
 
-	const { timezone } = useTimezone();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const dimensions = useResizeObserver(graphRef);
-
-	const { config, chartData } = useLogsExplorerChartConfig({
-		data,
-		isLogsExplorerViews,
-		isLabelEnabled,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		yAxisUnit: Y_AXIS_UNIT,
-	});
-
 	return (
-		<div ref={graphRef} className={`${className} logs-frequency-chart-container`}>
+		<div className={`${className} logs-frequency-chart-container`}>
 			{isLoading ? (
 				<div className="logs-frequency-chart-loading">
 					<Spinner size="default" height="100%" />
 				</div>
 			) : (
-				<BarChart
-					config={config}
-					data={chartData}
-					width={dimensions.width}
-					height={dimensions.height}
-					stack={isLogsExplorerViews ? StackMode.Normal : StackMode.None}
-					showLegend={isLabelEnabled}
-					legendConfig={{ position: LegendPosition.BOTTOM }}
-					timezone={timezone}
-					data-testid="logs-frequency-chart"
-					yAxisUnit={Y_AXIS_UNIT}
+				<Graph
+					name="logsExplorerChart"
+					data={graphData.data}
+					isStacked={isLogsExplorerViews}
+					type="bar"
+					animate
+					onDragSelect={onDragSelect}
+					minTime={chartMinTime}
+					maxTime={chartMaxTime}
 				/>
 			)}
 		</div>

frontend/src/container/LogsExplorerChart/useLogsExplorerChartConfig.ts

@@ -1,105 +0,0 @@
-import { useMemo } from 'react';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { themeColors } from 'constants/theme';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import getLabelName from 'lib/getLabelName';
-import { colors } from 'lib/getRandomColor';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { QueryData } from 'types/api/widgets/getQuery';
-import uPlot from 'uplot';
-
-import { getColorsForSeverityLabels } from './utils';
-
-export interface UseLogsExplorerChartConfigParams {
-	data: QueryData[];
-	isLogsExplorerViews?: boolean;
-	isLabelEnabled?: boolean;
-	onDragSelect: (start: number, end: number) => void;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	yAxisUnit?: string;
-}
-
-export interface UseLogsExplorerChartConfigResult {
-	config: UPlotConfigBuilder;
-	chartData: uPlot.AlignedData;
-}
-
-export function useLogsExplorerChartConfig({
-	data,
-	isLogsExplorerViews = false,
-	isLabelEnabled = true,
-	onDragSelect,
-	minTimeScale,
-	maxTimeScale,
-	yAxisUnit,
-}: UseLogsExplorerChartConfigParams): UseLogsExplorerChartConfigResult {
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// getUPlotChartData / buildBaseConfig both consume the legacy query-range payload
-	// shape, so the raw series list is wrapped instead of being plotted directly.
-	const apiResponse = useMemo(
-		() =>
-			({
-				data: { result: data, resultType: '' },
-			}) as unknown as MetricRangePayloadProps,
-		[data],
-	);
-
-	const chartData = useMemo(() => getUPlotChartData(apiResponse), [apiResponse]);
-
-	const config = useMemo(() => {
-		const builder = buildBaseConfig({
-			id: 'logs-explorer-frequency-chart',
-			isDarkMode,
-			onDragSelect,
-			timezone,
-			minTimeScale,
-			maxTimeScale,
-			yAxisUnit,
-			panelType: PANEL_TYPES.BAR,
-		});
-
-		data.forEach((series, index) => {
-			const label = getLabelName(
-				series.metric,
-				series.queryName || '',
-				series.legend || '',
-			);
-
-			const color = isLogsExplorerViews
-				? getColorsForSeverityLabels(label, index)
-				: colors[index % colors.length] || themeColors.red;
-
-			builder.addSeries({
-				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				// No group-by yields query name "A"; use ' ' not '' so uPlot does not default the label to "Value".
-				label: isLabelEnabled && label.trim() ? label : ' ',
-				lineColor: color,
-				colorMapping: {},
-				isDarkMode,
-			});
-		});
-
-		return builder;
-	}, [
-		data,
-		isDarkMode,
-		isLabelEnabled,
-		isLogsExplorerViews,
-		maxTimeScale,
-		minTimeScale,
-		onDragSelect,
-		timezone,
-		yAxisUnit,
-	]);
-
-	return { config, chartData };
-}

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -217,6 +217,13 @@
 		padding: 0px 8px;
 
 		.logs-frequency-chart {
+			.ant-card-body {
+				height: 140px;
+				min-height: 140px;
+				padding: 0 16px 22px 16px;
+				font-family: 'Geist Mono';
+			}
+
 			margin-bottom: 0px;
 		}
 	}

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -298,9 +298,9 @@ describe('useOptionsMenu', () => {
 
 			// New order: [attribute:service.name, log:body, resource:service.name, log:timestamp]
 			result.current.config.addColumn?.onReorder([
-				'attribute:service.name:string',
-				'log:body:string',
-				'resource:service.name:string',
+				'attribute:service.name',
+				'log:body',
+				'resource:service.name',
 				'log:timestamp',
 			]);
 
@@ -331,9 +331,9 @@ describe('useOptionsMenu', () => {
 				'state-indicator',
 				'log:timestamp',
 				'unknown.composite',
-				'log:body:string',
-				'resource:service.name:string',
-				'attribute:service.name:string',
+				'log:body',
+				'resource:service.name',
+				'attribute:service.name',
 			]);
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
@@ -360,7 +360,7 @@ describe('useOptionsMenu', () => {
 			);
 
 			// Removing 'resource:service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource:service.name:string');
+			result.current.config.addColumn?.onRemove('resource:service.name');
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const remaining = mockUpdateColumns.mock.calls[0][0];

frontend/src/container/OptionsMenu/constants.ts

@@ -56,7 +56,7 @@ export function dedupeColumnsByCompositeKey(
 	const seen = new Set<string>();
 	let hasDuplicate = false;
 	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext, c.fieldDataType);
+		const key = buildCompositeKey(c.name, c.fieldContext);
 		if (seen.has(key)) {
 			hasDuplicate = true;
 			return false;

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -281,8 +281,7 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				(f) =>
-					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType) !== columnKey,
+				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -365,10 +364,7 @@ const useOptionsMenu = ({
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
 			const byCompositeKey = new Map(
-				current.map((f) => [
-					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-					f,
-				]),
+				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
 			);
 			const reordered = orderedIds
 				.map((id) => byCompositeKey.get(id))

frontend/src/container/OptionsMenu/utils.ts

@@ -15,11 +15,8 @@ export const getOptionsFromKeys = (
 	);
 };
 
-export const buildCompositeKey = (
-	name: string,
-	context?: string,
-	dataType?: string,
-): string => {
-	const withContext = context ? `${context}:${name}` : name;
-	return dataType ? `${withContext}:${dataType}` : withContext;
-};
+// Composite identity for a column. Disambiguates same-name fields across
+// different fieldContexts (e.g. resource:service.name vs attribute:service.name).
+// Falls back to bare name when context is missing.
+export const buildCompositeKey = (name: string, context?: string): string =>
+	context ? `${context}:${name}` : name;

frontend/src/container/TracesExplorer/ListView/index.data.test.tsx

@@ -1,133 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen } from 'tests/test-utils';
-
-import ListView from './index';
-
-// globalTime starts with loading:true, which gates the list query. Force just that
-// slice's loading to false so the query fires; every other selector is untouched.
-jest.mock('react-redux', () => {
-	const actual = jest.requireActual('react-redux');
-	return {
-		...actual,
-		useSelector: (selector: (state: unknown) => unknown): unknown => {
-			const result = actual.useSelector(selector);
-			if (result && typeof result === 'object' && 'loading' in result) {
-				return { ...result, loading: false };
-			}
-			return result;
-		},
-	};
-});
-
-// List columns come from the options menu (server-synced preferences). Pin them
-// so the query fires and the expected columns render, independent of that API.
-jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
-	__esModule: true,
-	default: (): unknown => ({
-		options: {
-			selectColumns: [
-				{ name: 'service.name', fieldContext: 'resource' },
-				{ name: 'name', fieldContext: 'span' },
-				{ name: 'duration_nano', fieldContext: 'span' },
-				{ name: 'http_method', fieldContext: 'span' },
-				{ name: 'response_status_code', fieldContext: 'span' },
-			],
-		},
-		config: { addColumn: { onRemove: jest.fn() } },
-	}),
-}));
-
-const BASE_URL = ENVIRONMENT.baseURL;
-const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
-
-const listRows = [
-	{
-		timestamp: '2024-07-19T08:39:58.735245Z',
-		data: {
-			'service.name': 'frontend',
-			name: 'HTTP GET',
-			duration_nano: 55306000,
-			http_method: 'GET',
-			response_status_code: '200',
-			span_id: '772c4d29dd9076ac',
-			trace_id: '0000000000000000344ded1387b08a7e',
-		},
-	},
-	{
-		timestamp: '2024-07-19T08:39:59.949129915Z',
-		data: {
-			'service.name': 'demo-app',
-			name: 'authenticate_check_db',
-			duration_nano: 790949390,
-			// empty status fields to assert the "-" cell
-			http_method: '',
-			response_status_code: '',
-			span_id: '5704353737b6778e',
-			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
-		},
-	},
-];
-
-const listResponse = (rows: unknown[]): Record<string, unknown> => ({
-	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
-});
-
-const mockSuccess = (rows: unknown[] = listRows): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(listResponse(rows))),
-		),
-	);
-};
-
-const renderListView = (): ReturnType<typeof render> =>
-	render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
-			<ListView
-				isFilterApplied={false}
-				setWarning={jest.fn()}
-				setIsLoadingQueries={jest.fn()}
-			/>
-		</VirtuosoMockContext.Provider>,
-		{},
-		{
-			initialRoute: '/traces-explorer',
-			queryBuilderOverrides: {
-				panelType: PANEL_TYPES.LIST,
-				stagedQuery: initialQueriesMap.traces,
-				currentQuery: initialQueriesMap.traces,
-				redirectWithQueryBuilderData: jest.fn(),
-			} as any,
-		},
-	);
-
-describe('Traces ListView - Data Loaded', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders backend rows in FieldCell format', async () => {
-		mockSuccess();
-		renderListView();
-
-		// plain-text columns
-		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
-		expect(screen.getByText('authenticate_check_db')).toBeInTheDocument();
-
-		// duration_nano renders in milliseconds
-		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
-
-		// http_method / response_status_code render as badges
-		expect(screen.getAllByTestId('http_method')[0]).toHaveTextContent('GET');
-		expect(screen.getAllByTestId('response_status_code')[0]).toHaveTextContent(
-			'200',
-		);
-
-		// empty status fields render "-"
-		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
-	});
-});

frontend/src/container/TracesExplorer/TracesTable/FieldCell.tsx

@@ -1,8 +1,6 @@
-import { generatePath, Link } from 'react-router-dom';
 import { Badge } from '@signozhq/ui/badge';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { useTimezone } from 'providers/Timezone';
 
@@ -10,7 +8,6 @@ import {
 	DURATION_FIELD_NAMES,
 	STATUS_FIELD_NAMES,
 	TIMESTAMP_FIELD_NAMES,
-	TRACE_ID_FIELD_NAMES,
 } from './constants';
 import { stringifyCellValue } from './utils';
 
@@ -41,18 +38,6 @@ function FieldCell({ name, value }: FieldCellProps): JSX.Element {
 
 	const text = stringifyCellValue(value);
 
-	if (TRACE_ID_FIELD_NAMES.has(name)) {
-		return (
-			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
-				data-testid="trace-id"
-				onClick={(e): void => e.stopPropagation()}
-			>
-				{text}
-			</Link>
-		);
-	}
-
 	if (STATUS_FIELD_NAMES.has(name)) {
 		return (
 			<Badge data-testid={name} color="sakura" variant="outline">

frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx

@@ -19,8 +19,7 @@ import styles from './TracesTable.module.scss';
 export type TracesTableProps = {
 	data: TracesTableRow[];
 	columns: TableColumnDef<TracesTableRow>[];
-	columnStorageKey?: string;
-	respectColumnOrder?: boolean;
+	columnStorageKey: string;
 	panelType: PanelTypeKeys;
 	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
 	getRowHref: (row: TracesTableRow) => string;
@@ -38,7 +37,6 @@ function TracesTable({
 	data,
 	columns,
 	columnStorageKey,
-	respectColumnOrder = false,
 	panelType,
 	getRowHref,
 	isLoading,
@@ -90,7 +88,7 @@ function TracesTable({
 						columns={columns}
 						className={styles.tracesTable}
 						columnStorageKey={columnStorageKey}
-						respectColumnOrder={respectColumnOrder}
+						respectColumnOrder={false}
 						isLoading={isFetching}
 						cellTypographySize={cellTypographySize}
 						onColumnOrderChange={onColumnOrderChange}
@@ -106,8 +104,6 @@ function TracesTable({
 }
 
 TracesTable.defaultProps = {
-	columnStorageKey: undefined,
-	respectColumnOrder: false,
 	onColumnOrderChange: undefined,
 	onColumnRemove: undefined,
 	cellTypographySize: 'medium',

frontend/src/container/TracesExplorer/TracesTable/constants.ts

@@ -5,14 +5,8 @@ export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
 export const STATUS_FIELD_NAMES = new Set([
 	'httpMethod',
 	'http_method',
-	'http.method',
-	'http.request.method',
 	'responseStatusCode',
 	'response_status_code',
-	'http.status_code',
-	'http.response.status_code',
 ]);
 
 export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
-
-export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/TracesExplorer/TracesTable/getFieldColumn.tsx

@@ -10,11 +10,11 @@ export type TracesTableRow = { id: string } & Record<string, unknown>;
 export function getFieldColumn(
 	field: TelemetryFieldKey,
 ): TableColumnDef<TracesTableRow> {
-	const { name, fieldContext, fieldDataType } = field;
+	const { name, fieldContext } = field;
 	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
 
 	return {
-		id: buildCompositeKey(name, fieldContext, fieldDataType),
+		id: buildCompositeKey(name, fieldContext),
 		header: name,
 		accessorFn: (row): unknown => row[name],
 		enableMove: !isTimestamp,

frontend/src/container/TracesExplorer/TracesView/TracesView.module.scss

@@ -1,15 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	// Page chain isn't a flex column, so anchor the virtualized table against the viewport.
-	height: calc(100vh - 240px);
-	min-height: 400px;
-}
-
-.actionsContainer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}

frontend/src/container/TracesExplorer/TracesView/configs.tsx

@@ -1,25 +1,50 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { generatePath, Link } from 'react-router-dom';
+import type { TableColumnsType as ColumnsType } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ROUTES from 'constants/routes';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
+import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-const TRACE_FIELDS = [
-	{ name: 'service.name', fieldContext: 'resource' },
-	{ name: 'name' },
-	{ name: 'duration_nano' },
-	{ name: 'span_count' },
-	{ name: 'trace_id' },
-] as TelemetryFieldKey[];
-
-export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
-	(field) => ({
-		...getFieldColumn(field),
-		enableRemove: false,
-		canBeHidden: false,
-	}),
-);
+export const columns: ColumnsType<ListItem['data']> = [
+	{
+		title: 'Root Service Name',
+		dataIndex: 'service.name',
+		key: 'serviceName',
+	},
+	{
+		title: 'Root Operation Name',
+		dataIndex: 'name',
+		key: 'name',
+	},
+	{
+		title: 'Root Duration (in ms)',
+		dataIndex: 'duration_nano',
+		key: 'durationNano',
+		render: (duration: number): JSX.Element => (
+			<Typography>{getMs(String(duration))}ms</Typography>
+		),
+	},
+	{
+		title: 'No of Spans',
+		dataIndex: 'span_count',
+		key: 'span_count',
+	},
+	{
+		title: 'TraceID',
+		dataIndex: 'trace_id',
+		key: 'traceID',
+		render: (traceID: string): JSX.Element => (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, {
+					id: traceID,
+				})}
+				data-testid="trace-id"
+			>
+				{traceID}
+			</Link>
+		),
+	},
+];

frontend/src/container/TracesExplorer/TracesView/index.test.tsx

@@ -1,136 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import TracesView from './index';
-
-const BASE_URL = ENVIRONMENT.baseURL;
-const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
-
-const groupedRows = [
-	{
-		timestamp: '2024-07-19T08:39:58.735245Z',
-		data: {
-			'service.name': 'frontend',
-			name: 'HTTP GET',
-			duration_nano: 55306000,
-			span_count: 8,
-			trace_id: '0000000000000000344ded1387b08a7e',
-		},
-	},
-	{
-		timestamp: '2024-07-19T08:39:59.949129915Z',
-		data: {
-			'service.name': 'demo-app',
-			// intentionally empty to assert the "-" cell
-			name: '',
-			duration_nano: 790949390,
-			span_count: 3,
-			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
-		},
-	},
-];
-
-const groupedResponse = (rows: unknown[]): Record<string, unknown> => ({
-	data: { type: 'trace', data: { results: [{ queryName: 'A', rows }] } },
-});
-
-const mockSuccess = (rows: unknown[] = groupedRows): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(groupedResponse(rows))),
-		),
-	);
-};
-
-const mockError = (): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(500), ctx.json({ status: 'error', error: 'boom' })),
-		),
-	);
-};
-
-const renderTracesView = (
-	props: Record<string, unknown> = {},
-): ReturnType<typeof render> =>
-	render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
-			<TracesView
-				isFilterApplied={false}
-				setWarning={jest.fn()}
-				setIsLoadingQueries={jest.fn()}
-				{...props}
-			/>
-		</VirtuosoMockContext.Provider>,
-		{},
-		{
-			initialRoute: '/traces-explorer',
-			queryBuilderOverrides: {
-				panelType: PANEL_TYPES.TRACE,
-				stagedQuery: initialQueriesMap.traces,
-				currentQuery: initialQueriesMap.traces,
-			} as any,
-		},
-	);
-
-describe('TracesView (grouped root-span table)', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders backend rows in FieldCell format', async () => {
-		mockSuccess();
-		renderTracesView();
-
-		// service.name + name render as plain text
-		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
-		expect(screen.getByText('HTTP GET')).toBeInTheDocument();
-
-		// duration_nano renders in milliseconds
-		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
-
-		// span_count renders as text
-		expect(screen.getByText('8')).toBeInTheDocument();
-
-		// empty field renders "-"
-		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
-
-		// trace_id renders as a link to the trace detail
-		const traceLinks = screen.getAllByTestId('trace-id');
-		expect(traceLinks[0]).toHaveAttribute(
-			'href',
-			expect.stringContaining('/trace/0000000000000000344ded1387b08a7e'),
-		);
-	});
-
-	it('shows the empty state and keeps the toolbar when there are no rows', async () => {
-		mockSuccess([]);
-		renderTracesView();
-
-		// toolbar (un-gated) stays visible regardless of data
-		expect(
-			screen.getByText(/This tab only shows Root Spans/i),
-		).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
-
-		await waitFor(() => {
-			expect(screen.getByText(/No traces yet/i)).toBeInTheDocument();
-		});
-	});
-
-	it('keeps the toolbar visible on API error', async () => {
-		mockError();
-		renderTracesView();
-
-		expect(
-			screen.getByText(/This tab only shows Root Spans/i),
-		).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
-	});
-});