refactor(dashboards): move the heatmap chart to its cleaned-up location

The heatmap layer was written before the V1 cleanup moved the shared chart code
out of container/DashboardContainer/visualization into lib/visualization, so it
landed in the old tree and was the only thing left there.

- chart, utils, group-legend hook and tests move to lib/visualization/charts/Heatmap
- HeatmapChartProps joins the other chart props in charts/types.ts, alongside
  TimeSeries/Bar/Histogram/Pie; the chart-local types file held nothing else
- the heatmap tooltip, its two lists, content helpers and styles move into
  Tooltip/components/HeatmapTooltip, so the tooltip root keeps only the shell
  and the flat per-chart tooltips

Also drops a dead `timezone` prop Heatmap passed to ChartWrapper, which does not
take one — a type error the unresolvable ChartWrapper import had been masking.

Assisted-by: Claude Opus 5

.claude/opencode.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "lsp": true,
-  "experimental": {
-    "disable_paste_summary": true
-  }
-}

.claude/rules/comments.md

@@ -7,6 +7,5 @@ Applies to everything in the repo — code, config, workflows.
 - **Rationale goes in prose, not source.** Why a version is pinned, why a job exists, how a subsystem fits together — that belongs in the README or the PR.
 - **Never remove pre-existing comments** when editing code. The bar above applies to comments you write, not comments already there.
 - **Never talk to the reviewer.** No comments about where a change came from, what was changed, or why the change is correct — that belongs in the PR description and is noise the moment it merges.
-- **Less is more.** When writing something intended for human consumption, (comment, commit message, reply to prompt) use as few words as possible. Pick every word meticulously to reduce the volume to a strict minimum. Be down to the point. Less is more.
 
 Language rules build on this one: [`go-comments`](go-comments.md), [`py-comments`](py-comments.md).

.claude/rules/go-contrib.md

@@ -1,17 +0,0 @@
----
-paths:
-  - "**/*.go"
----
-
-# Contribution guidelines
-
-- When making Go changes, always ensure they follow the contributing guildelines in [`docs/contributing/go/`](../../docs/contributing/go/).
-- Look for existing patterns in the codebase for any change before implementing the changes.
-- Any ClickHouse identifier or literal built from a name or a value goes through `pkg/clickhousesql`; compiled sqlbuilder text is wrapped with `sqlbuilder.Escape` once. See [`docs/contributing/go/clickhousesql.md`](../../docs/contributing/go/clickhousesql.md).
-- If any API contract is modified, generate the OpenAPI specs with `make gen-openapi-specs`.
-- Always keep the OpenAPI spec generated in a separate commit, so the whole commit can be dropped in case of conflicts during merge. Do not try to resolve conflict in generated files, instead just generate them again.
-- Avoid breaking function calls unncessarily into multilines for couple of arguments.
-- Try to keep most computational only logic in types package itself related to a domain type, use modules as the orchestraction layer cordinating different layers and all db queries in store layer. Check the serviceaccount modules for inspiration when confused.
-- When defining types, keep the structure of file to have any constants and variables first, then exported types and exported methods and then finally the unexported types and methods.
-- Never import types or other modules in migration files, duplicate the required type or method to keep migration free from changes.
-- Always run the gofmt tool for formating beforing commiting any changes.

.claude/rules/go-test.md

@@ -1,12 +0,0 @@
----
-paths:
-  - "**/*_test.go"
----
-
-# Go tests
-
-- **testify + table-driven.** Use `assert` / `require`; prefer table-driven cases. Tests live next to the source file.
-- **`require` vs `assert`.** `require` for anything the rest of the test cannot proceed without — setup, `require.NoError(t, err)`, nil/length checks before indexing or dereferencing. `assert` for the actual expectations, so one failed check still reports the rest.
-- **Mock with mockery.** When an interface needs mocking, list it in `.mockery.yml` and run `mockery`; never hand-write mocks. Generated mocks live in the source package's `<pkg>test` sibling (e.g. `resourcestest.NewMockAdapter(t)`).
-- **Table format.** Declare cases as `testCases := []struct{ name string; ... }` and iterate with `for _, testCase := range testCases { t.Run(testCase.name, ...) }` — the variables are named `testCases` / `testCase`. Case names are PascalCase segments joined by `_`, one segment per aspect (scenario, condition, expectation): `TimestampNotNullNoDefault`, `DropPrimaryKeyConstraint_AlterColumnNullable`, `ForeignKeyConstraint_DoesNotExist_SCreateAndDropConstraintTrue`.
-- **No hoisted test constants.** When goconst flags a repeated literal in a test, vary the fixture strings across cases instead of hoisting a constant — never introduce a shared const for test data. 

.claude/rules/pull-requests.md

@@ -2,10 +2,6 @@
 
 - **Follow the template** (`.github/pull_request_template.md`): fill in its headings (Description / Issues closed by this PR / Screenshots / Additional Information). Don't add sections the template doesn't have.
 - **Keep only the headings that apply.** Delete every heading that has nothing under it, along with its `<!--...-->` placeholder comment. The body must never contain an empty heading — if only Description applies, the body has exactly that one heading.
-- **Keep the description concise and human-readable.** A few non repetitive bullets saying what changed and why, for a reviewer skimming it — not a wall of text, not a restatement of the diff, not generated boilerplate and not the user agent conversation details.
+- **Keep the description concise and human-readable.** A few plain bullets saying what changed and why, for a reviewer skimming it — not a wall of text, not a restatement of the diff, not generated boilerplate.
 - **Reference issues with `Closes #issue-number`** under "Issues closed by this PR" so they auto-close on merge. This goes in the PR description only — never in commit messages.
-- **Breaking changes can be added in additional information section** if any.
 - **AI assistance in commits may optionally be disclosed with an `Assisted-by:` trailer** naming the model (e.g. `Assisted-by: Claude Opus 4.5`) — do NOT use a `Co-authored-by:` trailer for this.
-- **Keep the commit body short and human readable** focused on decision made if any. Commit body must not re-iterate the changes done, skip if title is sufficient in conveying the change.
-- **Use convensional commit format** for commits and PR title.
-- **Do not amend the commits once pushed.** Always create a new commit once changes are pushed to remote.

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

@@ -1,95 +0,0 @@
----
-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.
-
-## 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**: every story file for a page lives under
-  `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`,
-  payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing
-  page-specific in `src/storybook/controls/`.
-- **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__/`.
-- **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
-- [ ] 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

@@ -1,165 +0,0 @@
-# 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` |
-| 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/stories/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/stories/Services.stories.tsx
-type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
-
-const meta = {
-	title: 'Pages/Services',
-	component: Services,
-	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION, layout: 'app' }),
-} 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.
-
-## 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

@@ -1,64 +0,0 @@
-# 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 with `layout: 'app'`, 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

@@ -1,110 +0,0 @@
-# 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` → `pages-services`, plus the
-story export in kebab-case. Render one story on its own:
-
-```
-http://localhost:6006/iframe.html?id=pages-services--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 |

.claude/skills/storybook-visual-diff/SKILL.md

@@ -1,294 +0,0 @@
----
-name: storybook-visual-diff
-description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
----
-
-# Storybook visual diff
-
-Two scripts under `frontend/scripts`:
-
-- `story-shots.mjs` — screenshots stories off a running Storybook dev server.
-- `story-shots-diff.mjs` — pixel-diffs two runs and paints what moved.
-
-Output goes to `frontend/.story-shots/` (gitignored), one directory per run.
-
-## 0. Settle what is being compared, first
-
-A diff is only worth taking when the two runs straddle something. Run twice over
-the same tree and the answer is zero, or the noise floor: true, and useless.
-So before starting a server, pin down four things. Whatever the prompt already
-says, take it and do not ask again; ask only for what is genuinely missing, in
-**one** `AskUserQuestion` call.
-
-| To settle | Ask | Options |
-| --- | --- | --- |
-| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
-| Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
-| Themes | "Which themes?" | dark · dark + light |
-| Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
-
-Skip a row when the prompt answers it, and skip the whole call when the prompt
-answers all of it ("shoot the pods tooltips in both themes" needs no question).
-Skip Read-out too whenever the job is *shoot only*, and take `none` for what it
-says: shoot both sides, report both paths, run no comparison. When the prompt
-says nothing at all, ask; a silent guess here burns ~6 min per sweep on the
-wrong stories.
-
-The job decides which loop below to run:
-
-| Job | Loop |
-| --- | --- |
-| **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
-| **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
-| **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
-| **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
-| **noise floor** | two runs, same tree, diff. The number is the harness's floor, not a finding. |
-| **config vs config** | same tree, two runs that differ only in flags: `--args`, `--clock`, `--width`, `--theme`, `--motion`. Filenames stay identical, so the pairs line up and the caption names what changed. |
-
-## The loop
-
-1. Capture the baseline **before touching anything**.
-2. Capture it a second time and diff the two. That is the noise floor: anything
-   it reports is what the harness cannot hold still, and no conclusion about the
-   change may rest on those stories. Cheap on a handful of stories, ~6 min per
-   32, so on a wide sweep run it over the two or three stories the change is
-   aimed at instead of all of them.
-3. Make the change.
-4. Capture again into a third directory.
-5. Diff, then read the tinted shot of the largest movers to judge the change.
-
-## 1. One dev server, on a free port
-
-`storybook dev` keys its Vite dep cache off the config dir, so two servers on the
-same `-c` serve mismatched prebundles and every story dies with `Invalid hook
-call`. Check what is already up first — port 6006 is often another repo's
-Storybook, and its `index.json` then indexes the wrong stories:
-
-```bash
-for port in 6006 6007; do
-  curl -s -m 2 "http://localhost:$port/index.json" | head -c 60 && echo "  <- $port"
-done
-```
-
-Start the SigNoz one on a free port, from the repo's own binary so no package
-manager shim is in the way:
-
-```bash
-cd frontend
-nohup ./node_modules/.bin/storybook dev -p 6007 --no-open --quiet \
-  > "${TMPDIR:-/tmp}/signoz-storybook.log" 2>&1 &
-```
-
-It is ready when `curl -s localhost:6007/index.json` returns JSON whose
-`entries` hold SigNoz story ids.
-
-## 2. Capture
-
-Playwright is not a frontend dependency. The script finds it in `tests/e2e`
-(`pnpm -C tests/e2e install`, `@playwright/test` is enough) or in a global
-install, and launches Playwright's own chromium, falling back to an installed
-Chrome. Two escape hatches when that is not what a machine has:
-
-```bash
-export PLAYWRIGHT_MODULE=/path/to/playwright   # a different install
-export CHROME_PATH=/path/to/chrome             # a specific browser binary
-```
-
-Then pick the stories. `--list` prints the selection without shooting anything:
-
-```bash
-# every tooltip story of every page
-node scripts/story-shots.mjs .story-shots/baseline \
-  --port 6007 --title Pages/ --name tooltip --theme dark
-
-# a handful of stories by id or by title/name substring, both themes
-node scripts/story-shots.mjs .story-shots/baseline \
-  --port 6007 --stories pages-noz,dashboards/detail --theme dark,light
-```
-
-| Flag | Meaning |
-| --- | --- |
-| `--stories <match>` | id or `Title/Name` substring, repeatable or comma-separated. Omit for every story. |
-| `--title <prefix>` | only titles starting with the prefix (`Pages/`, `Components/`) |
-| `--name <match>` | only story names containing the match |
-| `--theme dark,light` | one pass per theme; omit for the story's own default (dark) |
-| `--args <k:v;k2:v2>` | arg overrides, Storybook's own `?args=` syntax, repeatable. A dotted value is dropped by Storybook itself, so map it to a slug inside the story's mocks |
-| `--port` | dev server port, or `$SB_PORT` |
-| `--width <px>` | the only fixed dimension, default 1680 |
-| `--height <px>` | shortest the viewport may be, default 1200 |
-| `--max-height <px>` | tallest it may grow to, default 8000 |
-| `--grow <what>` | `scrollers` (default) grows the viewport until the page's own scrollers fit, `document` only follows the document height, `none` keeps `--height` |
-| `--settle <ms>` | wait after the page goes quiet, default 1500 |
-| `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
-| `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
-| `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
-| `--flat` | write `<out>/<id>.png`, no theme directory |
-| `--no-caption` | leave the caption band off the shots |
-| `--list` | print the matched stories and exit |
-
-Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
-what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
-rows) and how the run was configured (args, clock, width, height, grow, motion,
-settle, ignore). Keep the flags identical between the two runs or the diff pairs
-nothing.
-
-Every shot carries the caption band described below, so a single screenshot says
-what it is on its own. `--no-caption` leaves it off, and so does a machine
-without ImageMagick (with a warning). The band never changes the shot's width
-(long text wraps rather than widening the canvas) and its height is recorded, so
-the diff crops it back off and never reports one caption against another. Two
-runs whose captions are different heights still diff to zero. A story that never held still for two
-identical frames is logged `busy` instead of `ok` — treat its diff as suspect.
-
-Dark alone is enough while iterating on the harness; add `light` for the run you
-report.
-
-## 3. Diff
-
-```bash
-node scripts/story-shots-diff.mjs .story-shots/baseline .story-shots/capped .story-shots/diff
-```
-
-Prints `<changed pixels>  <theme>/<story>.png`, largest first, and writes one
-image per pair. Needs ImageMagick for PNG encode/decode (7's `magick`, or 6's
-`convert`/`identify`/`montage`); the comparison itself is in the script.
-
-| Flag | Meaning |
-| --- | --- |
-| `--mode green` | default. The after shot with the changed pixels painted over it, exactly the pixels that changed. What Chromatic shows. |
-| `--mode green-parallel` | `previous \| current \| diff` in one image, each tile labelled above it, on a gutter inverted from the theme. The diff tile is the `green` one, so the after shot stays readable underneath. |
-| `--mode red` | the after shot faded to 10%, changed pixels in red. A pixelmatch-style diff, easiest to read when the change is a thin edge. |
-| `--mode red-parallel` | the same three tiles, with the `red` diff. Best when the change is a thin edge that the unfaded shot would swallow. |
-| `--threshold <0..1>` | how far a pixel must move to count. Default 0.063, Chromatic's `diffThreshold`. |
-| `--include-aa` | count antialiasing changes too. Off by default, as in Chromatic. |
-| `--tint <#rrggbb>` | override the mode's colour. |
-| `--no-caption` | drop the caption band. |
-
-### The caption
-
-Both scripts stamp a band on top of what they write: `story-shots.mjs` on each
-shot, from the story and the run's own settings; `story-shots-diff.mjs` on each
-diff, read out of the two runs' `shots.json`. It carries the story's
-`Title/Name`, then its id, theme and `busy` flag, then the settings both runs
-shared, each reading `key:value`. Whatever the two runs did **differently** goes
-on the side it belongs to: under `previous` and `current` on the parallel tiles,
-on two lines of the band otherwise. So a pair that differs only in `--args` says
-so on its face, which is what makes several shots of one story tellable apart.
-
-The shots' own bands are cropped off before comparing and before going into the
-tiles, so nothing in the output is a diff of a caption. Type size follows the
-image width, so it stays readable with the whole image viewed at fit-to-width;
-the heading is set in an installed sans and the detail lines in a mono, falling
-back to ImageMagick's default when neither is on the machine. Without a manifest
-the band falls back to the file path, and a directory of captioned shots whose
-`shots.json` is missing has nothing to crop by, so its captions do land in the
-diff. Keep `shots.json` next to the shots.
-
-### How the comparison works
-
-Chromatic's own capture and diff run server-side — `chromatic-cli` uploads a
-built Storybook and contains no capture or comparison code at all. What is public
-is the parameter contract, and the numbers in it say what the comparison is:
-`diffThreshold` defaults to `0.063` on a 0-1 scale, which is pixelmatch's
-`threshold`, and `diffIncludeAntiAliasing` defaults to false, which is
-pixelmatch's `includeAA: false`. So the script implements that comparison:
-
-1. Both PNGs are read as raw RGBA through `magick … RGBA:-`.
-2. Per pixel, the squared YIQ distance between the two colours (weights
-   `0.5053 / 0.299 / 0.1957`), compared against `35215 * threshold²` — 35215 is
-   the largest distance two 8-bit colours can have. Chroma is included, so a
-   colour swap at equal brightness still counts.
-3. A pixel over the threshold is dropped when it is only antialiasing: it is the
-   darkest or lightest of its eight neighbours, and the other image has a pixel
-   around there doing the same job. This is what keeps a subpixel glyph edge from
-   reading as a change.
-4. What survives is painted at full opacity, one output pixel per changed input
-   pixel. No dilation, no blobs — a one-pixel shift shows as a one-pixel line.
-
-A pair whose shots are different sizes is compared over the overlap, and every
-row and column that exists in only one of them counts as changed.
-
-Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
-(new on the feature branch, renamed, retitled) has nothing to pair with and is
-skipped silently. On a branch-vs-branch run, compare the two runs' file lists
-before reading the numbers.
-
-## What makes a shot reproducible
-
-Most of it is in the preview, not in the script, so a Chromatic build in the
-cloud shoots the same page: `.storybook/preview-head.html` freezes the clock,
-and `settleForCapture` (the preview's `afterEach`, which runs after `play`)
-parks the animations and snaps the bottom-pinned lists. The script drives the
-rest:
-
-- **Storybook's own render phase is the readiness signal.** It waits for
-  `window.__STORYBOOK_PREVIEW__.storyRenders[].phase === 'finished'`, which is
-  reached only after the loaders, the decorators and the story's `play` are done.
-  A DOM check cannot see a `play` still running. (Storybook 10 spells the final
-  phase `finished`, not `completed`.)
-- **Network quiescence, not `networkidle`.** react-query retries and msw keep
-  requests going after load, and a few stories hang a request by design, so the
-  wait is "no request for 600ms", capped at 15s.
-- **The clock is frozen** (`2026-06-15T12:00:00Z`), by the preview itself. Chart windows, `4 mins ago`
-  labels and trial countdowns all derive from `now`; a live clock alone moved
-  8000 pixels on the dashboards list and redrew every chart axis.
-- **Animations are parked on their last frame** by `html.sb-still`, a
-  zero-length single iteration with `forwards` fill, plus `prefers-reduced-
-  motion`. The Motion toolbar item (`still` by default) turns it off. An infinite
-  spinner is otherwise caught at a random angle.
-- **`document.fonts.ready`**, because text reflows when a face lands late.
-- **Lists pinned to their bottom are snapped onto it**, once by the preview and
-  again by the script after the page goes quiet. A virtuoso list settles a
-  few pixels short of the end depending on the order its items were measured in.
-- **Two identical frames in a row**, because what a page is still waiting on is
-  often not observable from outside it.
-- **`[data-shot-ignore]`, `[data-chromatic="ignore"]` and `--ignore <selector>`**
-  hide a region that cannot be held still; Chromatic excludes the same attribute
-  from its comparison.
-- **The width is the only fixed dimension.** Chromatic's `viewports` are widths;
-  the height follows the page. `src/styles.scss` pins `html, body, #root` to
-  `height: 100%; overflow: hidden`, so the document never outgrows the viewport
-  and its height says nothing: what overflows are the shell's inner scrollers.
-  `--grow scrollers`, the default, grows the viewport until the tallest in-flow
-  scroller fits, so nothing is cut off and no scrollbar is left in the shot (the
-  dashboards list goes to 2226px in one round). Popups are skipped — they are out
-  of the flow, and a tall dropdown would otherwise drag the shot to a height
-  nothing on the page needs. A page that sizes a panel in `vh` grows its own
-  content as the viewport grows, so no height ever fits it and the rounds only
-  chase — `.alert-chart-container` is `57vh`, which puts Create Alert's fixed
-  point at 4344px with an empty band on top. Those pages are shot at `--height`
-  with their own scrollbar, which is what they look like in a browser, and the
-  log says `(viewport-sized content, stopped chasing Npx)`.
-
-With all of that, 29 of the 32 page tooltip stories are byte-identical across
-runs. The three that are not, and why:
-
-| Story | Residual | Cause |
-| --- | --- | --- |
-| `kubernetes-pods--tooltips-in-options-panel` | ~13k px | 24 tooltips held open in an overlapping cluster; they portal to `body` in mount order, and the drawer's own tooltips mount before or after the list's depending on when their data lands, so overlapping tooltips stack differently. Panel geometry itself is stable. |
-| `settings-role-editor--tooltips-in-json-editor` | ~2.5k px | monaco re-measures and lands one pixel off. |
-| `traces-trace-details--tooltips` | ~800 px | same class, one row of the waterfall. |
-
-Each is bimodal — two stable arrangements — so the same number reappears run
-after run. Diff a story against itself before believing its number, and reach
-for `--ignore` when a region cannot be settled.
-
-## Gotchas
-
-- **Zero pixels is a real answer.** A story whose tooltips are all short is
-  unaffected by a tooltip rule; it is not a broken capture.
-- **The selector matters more than the rule.** A global rule on
-  `[data-slot='…']` only reaches design-system components. antd's own tooltips
-  (`.ant-tooltip-inner`, e.g. the Create Alert help popups) are untouched, which
-  is why some stories show no diff at all.
-- **Global style overrides need `!important`.** `src/styles.scss` loads before
-  the design system injects its CSS-module styles at runtime, so a plain rule on
-  a `[data-slot='…']` element loses. A component-level `!important` of the same
-  specificity still wins over it — `PanelStatusPopover.module.scss` keeps its own
-  `max-width: 520px !important`.
-- **A fresh context per story** is why a full sweep takes ~6 min for 32 stories.
-  Reusing one page loses the msw service worker re-registration race and stories
-  start failing after a few navigations.
-- **Stories behind a hover, drawer or modal** only render what their `play`
-  reaches. If a state is missing from the shot, the story needs the `play`, not
-  the script.

.gitattributes

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

.github/CODEOWNERS

@@ -15,10 +15,6 @@
 .github @therealpandey
 go.mod @therealpandey
 
-# Security
-
-/SECURITY.md @therealpandey
-
 # Scaffold Owners
 
 /pkg/config/ @therealpandey

.gitignore

@@ -232,4 +232,3 @@ pyrightconfig.json
 # dev
 .dev/
 .claude/worktrees/
-.claude/settings.local.json

Makefile

@@ -81,13 +81,10 @@ devenv-clickhouse-clean: ## Clean all ClickHouse data from filesystem
 ##############################################################
 # go commands
 ##############################################################
-SIGNOZ_SQLSTORE_SQLITE_PATH ?= signoz.db
-SIGNOZ_APISERVER_ADDRESS    ?= 0.0.0.0:8080
-
 .PHONY: go-run-enterprise
 go-run-enterprise: ## Runs the enterprise go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
-	SIGNOZ_SQLSTORE_SQLITE_PATH=$(SIGNOZ_SQLSTORE_SQLITE_PATH) \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
 	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
@@ -104,7 +101,7 @@ go-test: ## Runs go unit tests
 .PHONY: go-run-community
 go-run-community: ## Runs the community go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
-	SIGNOZ_SQLSTORE_SQLITE_PATH=$(SIGNOZ_SQLSTORE_SQLITE_PATH) \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
 	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
@@ -114,28 +111,6 @@ go-run-community: ## Runs the community go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go server
 
-.PHONY: go-stop
-go-stop: ## Stops the go backend server listening on SIGNOZ_APISERVER_ADDRESS, waiting for it to release every port it holds
-	@PORT=$(lastword $(subst :, ,$(SIGNOZ_APISERVER_ADDRESS))); \
-	PIDS=$$(lsof -ti tcp:$$PORT); \
-	if [ -z "$$PIDS" ]; then \
-		echo "No signoz server running on port $$PORT."; \
-		echo "If it's running on a different port, rerun as: make go-stop SIGNOZ_APISERVER_ADDRESS=host:port"; \
-		exit 0; \
-	fi; \
-	kill $$PIDS 2>/dev/null; \
-	for i in $$(seq 1 10); do \
-		alive=$$(for p in $$PIDS; do kill -0 $$p 2>/dev/null && echo $$p; done); \
-		[ -z "$$alive" ] && break; \
-		sleep 1; \
-	done; \
-	alive=$$(for p in $$PIDS; do kill -0 $$p 2>/dev/null && echo $$p; done); \
-	if [ -n "$$alive" ]; then \
-		echo "Graceful shutdown did not finish in 10s, sending SIGKILL to $$alive"; \
-		kill -9 $$alive 2>/dev/null; \
-	fi; \
-	echo "Stopped signoz server on port $$PORT (pid $$PIDS)"
-
 .PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
 go-build-community: ## Builds the go backend server for community
 go-build-community: $(GO_BUILD_ARCHS_COMMUNITY)
@@ -266,8 +241,3 @@ semconv-generate: ## Regenerate semantic-convention families for Go and TypeScri
 gen-mocks:
 	@echo ">> Generating mocks"
 	@mockery --config .mockery.yml
-
-.PHONY: gen-openapi-specs
-gen-openapi-specs:
-	@go run cmd/enterprise/*.go generate openapi
-	cd frontend && pnpm generate:api && cd -

SECURITY.md

@@ -1,26 +1,17 @@
 # Security Policy
 
-SigNoz is looking forward to working with security researchers across the world to keep SigNoz and our users safe. If you have found an issue in our systems/applications, please report it to us privately.
+SigNoz is looking forward to working with security researchers across the world to keep SigNoz and our users safe. If you have found an issue in our systems/applications, please reach out to us.
 
 ## Supported Versions
-
-We always recommend using the latest version of SigNoz to ensure you get all security updates.
+We always recommend using the latest version of SigNoz to ensure you get all security updates
 
 ## Reporting a Vulnerability
 
 If you believe you have found a security vulnerability within SigNoz, please let us know right away. We'll try and fix the problem as soon as possible.
 
-**Do not report vulnerabilities using public GitHub issues, discussions, or pull requests.**
+**Do not report vulnerabilities using public GitHub issues**. Instead, email <security@signoz.io> with a detailed account of the issue. Please submit one issue per email, this helps us triage vulnerabilities.
 
-Instead, report it privately through GitHub's private vulnerability reporting:
-
-1. Go to the [**Security** tab](https://github.com/SigNoz/signoz/security) of this repository.
-2. Click **Report a vulnerability**, or use [this link](https://github.com/SigNoz/signoz/security/advisories/new).
-3. Describe the issue with as much detail as you can — affected version, impact, and steps to reproduce help us triage faster. Please submit one report per vulnerability.
-
-This opens a private advisory visible only to you and the SigNoz maintainers. We'll respond there, keep you updated as we work on a fix, and coordinate disclosure. If the report is valid we'll credit you on the published advisory and request a CVE.
-
-If you're unable to use GitHub's private reporting, you can email <security@signoz.io> instead.
+Once we've received your email we'll keep you updated as we fix the vulnerability.
 
 ## Thanks
 

cmd/authz.go

@@ -96,9 +96,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
 		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,

conf/example.yaml

@@ -138,18 +138,6 @@ sqlstore:
 
 ##################### APIServer #####################
 apiserver:
-  # The TCP address the API server listens on, in the form "host:port".
-  address: 0.0.0.0:8080
-  # Maximum duration for reading an entire request, including the body.
-  read_timeout: 60s
-  # Keep at 0; any value cuts off streaming endpoints (livetail, SSE, export_raw_data).
-  write_timeout: 0
-  # tls:
-  #   enabled: true
-  #   cert_file: /path/to/server.crt
-  #   key_file: /path/to/server.key
-  #   # Minimum TLS version: "1.2" or "1.3". Defaults to "1.2".
-  #   min_version: "1.2"
   timeout:
     # Default request timeout.
     default: 60s
@@ -409,6 +397,7 @@ identn:
     # headers to use for tokenizer identN resolver
     headers:
       - Authorization
+      - Sec-WebSocket-Protocol
   apikey:
     # toggle apikey identN
     enabled: true

docs/api/openapi.yml

@@ -25,379 +25,6 @@ components:
       - data
       - orgId
       type: object
-    AlertmanagertypesChannelConfig:
-      discriminator:
-        mapping:
-          email: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig'
-          googlechat: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig'
-          incidentio: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-          jira: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
-          jsmops: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
-          msteams: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig'
-          opsgenie: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
-          pagerduty: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
-          slack: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-          webhook: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
-        propertyName: kind
-      oneOf:
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig:
-      properties:
-        kind:
-          enum:
-          - email
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelEmailConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig:
-      properties:
-        kind:
-          enum:
-          - googlechat
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelGoogleChatConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig:
-      properties:
-        kind:
-          enum:
-          - incidentio
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelIncidentIOConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig:
-      properties:
-        kind:
-          enum:
-          - jsmops
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelJSMOpsConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig:
-      properties:
-        kind:
-          enum:
-          - jira
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelJiraConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig:
-      properties:
-        kind:
-          enum:
-          - msteams
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelMSTeamsConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig:
-      properties:
-        kind:
-          enum:
-          - opsgenie
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelOpsgenieConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig:
-      properties:
-        kind:
-          enum:
-          - pagerduty
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelPagerdutyConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig:
-      properties:
-        kind:
-          enum:
-          - slack
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelSlackConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig:
-      properties:
-        kind:
-          enum:
-          - webhook
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelWebhookConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelEmailConfig:
-      properties:
-        headers:
-          additionalProperties:
-            type: string
-          type: object
-        html:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        to:
-          type: string
-      required:
-      - to
-      type: object
-    AlertmanagertypesChannelGoogleChatConfig:
-      properties:
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-        webhookUrl:
-          type: string
-      required:
-      - webhookUrl
-      type: object
-    AlertmanagertypesChannelIncidentIOConfig:
-      properties:
-        description:
-          type: string
-        metadata:
-          additionalProperties:
-            type: string
-          type: object
-        sendResolved:
-          nullable: true
-          type: boolean
-        title:
-          type: string
-        token:
-          type: string
-        url:
-          type: string
-      required:
-      - url
-      - token
-      type: object
-    AlertmanagertypesChannelJSMOpsConfig:
-      properties:
-        apiKey:
-          type: string
-        description:
-          type: string
-        message:
-          type: string
-        priority:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        tags:
-          type: string
-      required:
-      - apiKey
-      type: object
-    AlertmanagertypesChannelJiraConfig:
-      properties:
-        apiToken:
-          type: string
-        customFields:
-          additionalProperties: {}
-          type: object
-        description:
-          type: string
-        email:
-          type: string
-        issueType:
-          type: string
-        labels:
-          items:
-            type: string
-          type: array
-        priority:
-          type: string
-        project:
-          type: string
-        reopenDuration:
-          type: string
-        reopenTransition:
-          type: string
-        resolveTransition:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        site:
-          type: string
-        summary:
-          type: string
-        wontFixResolution:
-          type: string
-      required:
-      - site
-      - project
-      - issueType
-      - email
-      - apiToken
-      type: object
-    AlertmanagertypesChannelKind:
-      enum:
-      - slack
-      - email
-      - webhook
-      - pagerduty
-      - opsgenie
-      - msteams
-      - googlechat
-      - jira
-      - jsmops
-      - incidentio
-      type: string
-    AlertmanagertypesChannelMSTeamsConfig:
-      properties:
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-        webhookUrl:
-          type: string
-      required:
-      - webhookUrl
-      type: object
-    AlertmanagertypesChannelOpsgenieConfig:
-      properties:
-        apiKey:
-          type: string
-        apiUrl:
-          type: string
-        description:
-          type: string
-        details:
-          additionalProperties:
-            type: string
-          type: object
-        message:
-          type: string
-        priority:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        source:
-          type: string
-      required:
-      - apiKey
-      type: object
-    AlertmanagertypesChannelPagerdutyConfig:
-      properties:
-        class:
-          type: string
-        client:
-          type: string
-        clientUrl:
-          type: string
-        component:
-          type: string
-        description:
-          type: string
-        details:
-          additionalProperties:
-            type: string
-          type: object
-        group:
-          type: string
-        routingKey:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        severity:
-          type: string
-        source:
-          type: string
-        url:
-          type: string
-      required:
-      - routingKey
-      type: object
-    AlertmanagertypesChannelSlackConfig:
-      properties:
-        apiUrl:
-          type: string
-        channel:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-      required:
-      - apiUrl
-      type: object
-    AlertmanagertypesChannelWebhookConfig:
-      properties:
-        bearerToken:
-          type: string
-        password:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        url:
-          type: string
-        username:
-          type: string
-      required:
-      - url
-      type: object
     AlertmanagertypesDeprecatedGettableAlert:
       properties:
         annotations:
@@ -427,30 +54,6 @@ components:
       - rule
       - policy
       type: string
-    AlertmanagertypesGettableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-        createdAt:
-          format: date-time
-          type: string
-        displayName:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - name
-      - displayName
-      - config
-      - id
-      - createdAt
-      - updatedAt
-      type: object
     AlertmanagertypesGettableRoutePolicy:
       properties:
         channels:
@@ -753,19 +356,6 @@ components:
       required:
       - name
       type: object
-    AlertmanagertypesPostableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-        displayName:
-          type: string
-        generateName:
-          type: boolean
-        name:
-          type: string
-      required:
-      - config
-      type: object
     AlertmanagertypesPostablePlannedMaintenance:
       properties:
         alertIds:
@@ -19719,69 +19309,6 @@ paths:
       summary: Get metrics treemap
       tags:
       - metrics
-  /api/v2/notification_channels:
-    post:
-      deprecated: false
-      description: This endpoint creates a notification channel
-      operationId: CreateNotificationChannel
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AlertmanagertypesPostableNotificationChannel'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesGettableNotificationChannel'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          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
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:create
-      - tokenizer:
-        - notification-channel:create
-      summary: Create notification channel
-      tags:
-      - channels
   /api/v2/orgs/me:
     get:
       deprecated: false

docs/contributing/development.md

@@ -83,13 +83,7 @@ This command:
 
    You should see: `{"status":"ok"}`
 
-3. Stop it when you're done:
-   ```bash
-   make go-stop
-   ```
-
-> 💡 **Tip**: The API server runs at `http://localhost:8080/` by default. You can configure this using `apiserver.address` configuration option. See
-> [running more than one instance](#how-do-i-run-more-than-one-instance) if you need that for agentic testing.
+> 💡 **Tip**: The API server runs at `http://localhost:8080/` by default
 
 ### 4. Setting up the Frontend
 
@@ -125,36 +119,6 @@ To verify everything is working correctly:
 3. **Check Backend**: `curl http://localhost:8080/api/v1/health` (should return `{"status":"ok"}`)
 4. **Check Frontend**: Open `http://localhost:3301` in your browser
 
-## How do I run more than one instance?
-
-Handy when you keep several branches checked out as separate git worktrees. Every port
-and path below is read from the environment, so set them on the `make` call:
-
-```bash
-SIGNOZ_APISERVER_ADDRESS=0.0.0.0:8081 \
-SIGNOZ_SQLSTORE_SQLITE_PATH=/path/to/main/sqlite.db \
-SIGNOZ_INSTRUMENTATION_METRICS_READERS_PULL_EXPORTER_PROMETHEUS_PORT=9091 \
-make go-run-community
-```
-
-| Variable | Default | Why you'd change it |
-| --- | --- | --- |
-| `SIGNOZ_APISERVER_ADDRESS` | `0.0.0.0:8080` | Address the API server listens on |
-| `SIGNOZ_SQLSTORE_SQLITE_PATH` | `signoz.db` in worktree | To reuse same database |
-| `SIGNOZ_INSTRUMENTATION_METRICS_READERS_PULL_EXPORTER_PROMETHEUS_PORT` | `9090` | Bound by the Prometheus metrics exporter on startup |
-
-Point the frontend at whichever backend you want, in `frontend/.env`:
-
-```env
-VITE_FRONTEND_API_ENDPOINT=http://localhost:8081
-```
-
-Stop an instance using the address it was started on:
-
-```bash
-make go-stop SIGNOZ_APISERVER_ADDRESS=0.0.0.0:8081
-```
-
 ## How to send test data?
 
 You can now send telemetry data to your local SigNoz instance:

docs/contributing/go/clickhousesql.md

@@ -1,48 +0,0 @@
-# ClickHouse SQL
-
-Telemetry queries are generated as ClickHouse SQL text, most of it through [go-sqlbuilder](https://github.com/huandu/go-sqlbuilder) and executed with [clickhouse-go](https://github.com/ClickHouse/clickhouse-go). Attribute names, label names, body keys, aliases and dashboard variable values are user or telemetry input, so every one of them has to be quoted before it becomes part of the text.
-
-## How do I quote a name or a value?
-
-Use [pkg/clickhousesql](/pkg/clickhousesql/clickhousesql.go). Never build a quoted token with `fmt.Sprintf`, string concatenation or `strings.ReplaceAll`.
-
-| You need | Use | Example |
-| --- | --- | --- |
-| a column, alias or JSON sub-column name | `clickhousesql.Identifier(name)` | `` body_v2.`user.name` `` |
-| a string in a map read, a function argument, an `IN` list | `clickhousesql.StringLiteral(value)` | `attributes_string['http.method']` |
-| a Go scalar or list rendered as a literal | `clickhousesql.Literal(value)` | `['a','b']` |
-| a needle for `LIKE` | `clickhousesql.LikePattern(value)` | `"%" + clickhousesql.LikePattern(name) + "%"` |
-
-```go
-expr := fmt.Sprintf("multiIf(mapContains(%s, %s), %s[%s], NULL)", column, clickhousesql.StringLiteral(key.Name), column, clickhousesql.StringLiteral(key.Name))
-alias := clickhousesql.Identifier(fmt.Sprintf("__GROUP_BY_KEY_%d_%s", i, key.Name))
-```
-
-Values compared against a column are bound as arguments (`sb.E(column, value)`), never rendered into the text.
-
-Filter expressions are a different language. A value placed into a filter expression string goes through `querybuilder.FilterStringLiteral`, which quotes for that grammar.
-
-## Where does `sqlbuilder.Escape` go?
-
-go-sqlbuilder compiles the text it is given: `$0`, `$1`, `${name}` and `$?` are read as argument references and `$$` as a single `$`. The compiled text is everything passed to `Select`, `SelectMore`, `GroupBy`, `OrderBy`, `Having`, `From`, a raw string passed to `Where`, `And` or `Or`, and a compiled subquery joined or selected from another builder, which is compiled a second time. The `Cond` helpers (`sb.E`, `sb.Like`, `sb.In`, `sb.IsNotNull`, ...) write their field argument verbatim.
-
-- A name or expression that ends up in compiled text is wrapped with `sqlbuilder.Escape` once, at the point where it enters that text. Materialized column names carry `$$`, so this is what keeps them intact.
-- A field passed to a `Cond` helper is not escaped.
-- Text that never passes through a builder is not escaped: CTE fragments joined with `querybuilder.CombineCTEs`, a `UNION` assembled with `fmt.Sprintf` from already compiled statements, raw queries sent straight to the store.
-- Bind placeholders produced by `sb.Var` or the `Cond` helpers must not be escaped, so escape the identifier-bearing part before combining it with them: `fmt.Sprintf("match(%s, %s)", sqlbuilder.Escape(fieldExpr), sb.Var(value))`.
-
-## How do I check SQL a user wrote?
-
-A statement typed into a ClickHouse query panel is validated with `clickhousesql.ErrIfStatementIsNotValid`. It parses the text with [clickhouse-sql-parser](https://github.com/AfterShip/clickhouse-sql-parser) and refuses anything but a single `SELECT`, a table function other than the row generators (`numbers`, `zeros`, `generate_series`), a function that reads a file, a dictionary or the server binary, the `system` and `information_schema` databases, and a `SETTINGS readonly` override. Each refusal carries one of the package's `Code*` values.
-
-## Why is `$` written as `\x24`?
-
-Inside an identifier or a literal, `clickhousesql` writes a `$` as `\x24` when a digit, `{` or `?` follows; ClickHouse decodes the escape, so the name is unchanged on the server. Two tools between the builder and ClickHouse read such a `$` as a placeholder: go-sqlbuilder resolves `$0` in a compiled fragment to its own WHERE clause and recurses, and clickhouse-go refuses a query that mixes a `$<digits>` numeric placeholder with `?` arguments. Any other `$` stays literal, so `resource_string_service$$name` renders exactly as written.
-
-## What should I remember?
-
-- Every identifier and literal built from a name or a value goes through `pkg/clickhousesql`.
-- `sqlbuilder.Escape` wraps compiled text once; `Cond` fields and text assembled outside the builder are left alone.
-- Filter expression literals use `querybuilder.FilterStringLiteral`.
-- A statement written by a user is validated with `clickhousesql.ErrIfStatementIsNotValid`.
-- When adding a builder or a module that emits SQL, run its queries with a name containing a backtick, a quote, a backslash and `$0`; the integration suites under `tests/integration/tests/queriercommon` do this for the query builder.

docs/contributing/go/readme.md

@@ -12,7 +12,6 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 
 - [Abstractions](abstractions.md) - When to introduce new types and intermediate representations
 - [Authz](authz.md) - Authorization, roles, and access control
-- [ClickHouse SQL](clickhousesql.md) - Quoting names and values in generated ClickHouse queries
 - [Errors](errors.md) - Structured error handling
 - [Endpoint](endpoint.md) - HTTP endpoint patterns
 - [Flagger](flagger.md) - Feature flag patterns

docs/contributing/go/service.md

@@ -191,7 +191,7 @@ A standalone service only has the `factory.Service` lifecycle i.e it does not se
         // ... dependencies ...
     ) user.Service {
         return &service{
-            settings: factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/modules/user"),
+            settings: factory.NewScopedProviderSettings(providerSettings, "go.signoz.io/pkg/modules/user"),
             // ... dependencies ...
             stopC:    make(chan struct{}),
         }

docs/contributing/tests/integration.md

@@ -256,7 +256,7 @@ Tests can be configured using pytest options:
 - `--sqlite-mode` — SQLite journal mode: `delete` or `wal` (default: `delete`). Only relevant when `--sqlstore-provider=sqlite`.
 - `--postgres-version` — PostgreSQL version (default: `15`)
 - `--clickhouse-version` — ClickHouse version, also used for ClickHouse Keeper (default: `25.12.5`)
-- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.9`)
+- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.6`)
 - `--with-web` — Build the frontend into the SigNoz image (required for e2e)
 
 Example:

ee/licensing/httplicensing/api.go

@@ -0,0 +1,85 @@
+package httplicensing
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/licensetypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type licensingAPI struct {
+	licensing licensing.Licensing
+}
+
+func NewLicensingAPI(licensing licensing.Licensing) licensing.API {
+	return &licensingAPI{licensing: licensing}
+}
+
+func (api *licensingAPI) Checkout(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
+		return
+	}
+
+	req := new(licensetypes.PostableSubscription)
+	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	gettableSubscription, err := api.licensing.Checkout(ctx, orgID, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusCreated, gettableSubscription)
+}
+
+func (api *licensingAPI) Portal(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
+		return
+	}
+
+	req := new(licensetypes.PostableSubscription)
+	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	gettableSubscription, err := api.licensing.Portal(ctx, orgID, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusCreated, gettableSubscription)
+}

ee/licensing/httplicensing/provider.go

@@ -2,9 +2,12 @@ package httplicensing
 
 import (
 	"context"
+	"encoding/json"
 	"log/slog"
 	"time"
 
+	"github.com/tidwall/gjson"
+
 	"github.com/SigNoz/signoz/ee/licensing/licensingstore/sqllicensingstore"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -225,6 +228,47 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 	return nil
 }
 
+func (provider *provider) Checkout(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
+	activeLicense, err := provider.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := json.Marshal(postableSubscription)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal checkout payload")
+	}
+
+	response, err := provider.zeus.GetCheckoutURL(ctx, activeLicense.Key, body)
+	if err != nil {
+		if errors.Ast(err, errors.TypeAlreadyExists) {
+			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
+		}
+		return nil, err
+	}
+
+	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
+}
+
+func (provider *provider) Portal(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
+	activeLicense, err := provider.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := json.Marshal(postableSubscription)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal portal payload")
+	}
+
+	response, err := provider.zeus.GetPortalURL(ctx, activeLicense.Key, body)
+	if err != nil {
+		return nil, err
+	}
+
+	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
+}
+
 func (provider *provider) GetFeatureFlags(ctx context.Context, organizationID valuer.UUID) ([]*licensetypes.Feature, error) {
 	license, err := provider.GetActive(ctx, organizationID)
 	if err != nil {

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

@@ -4,6 +4,7 @@ import (
 	"net/http"
 	"time"
 
+	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
@@ -41,6 +42,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		IntegrationsController:        opts.IntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
+		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
 	}, config)
@@ -70,6 +72,10 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
 
+	router.HandleFunc("/api/v1/checkout", am.AdminAccess(ah.LicensingAPI.Checkout)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.LicensingAPI.Portal)).Methods(http.MethodPost)
+
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 

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

@@ -0,0 +1,76 @@
+package api
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+
+	"github.com/SigNoz/signoz/ee/query-service/model"
+)
+
+type DayWiseBreakdown struct {
+	Type      string        `json:"type"`
+	Breakdown []DayWiseData `json:"breakdown"`
+}
+
+type DayWiseData struct {
+	Timestamp int64   `json:"timestamp"`
+	Count     float64 `json:"count"`
+	Size      float64 `json:"size"`
+	UnitPrice float64 `json:"unitPrice"`
+	Quantity  float64 `json:"quantity"`
+	Total     float64 `json:"total"`
+}
+
+type tierBreakdown struct {
+	UnitPrice float64 `json:"unitPrice"`
+	Quantity  float64 `json:"quantity"`
+	TierStart int64   `json:"tierStart"`
+	TierEnd   int64   `json:"tierEnd"`
+	TierCost  float64 `json:"tierCost"`
+}
+
+type usageResponse struct {
+	Type             string           `json:"type"`
+	Unit             string           `json:"unit"`
+	Tiers            []tierBreakdown  `json:"tiers"`
+	DayWiseBreakdown DayWiseBreakdown `json:"dayWiseBreakdown"`
+}
+
+type details struct {
+	Total     float64         `json:"total"`
+	Breakdown []usageResponse `json:"breakdown"`
+	BaseFee   float64         `json:"baseFee"`
+	BillTotal float64         `json:"billTotal"`
+}
+
+type billingData struct {
+	BillingPeriodStart int64   `json:"billingPeriodStart"`
+	BillingPeriodEnd   int64   `json:"billingPeriodEnd"`
+	Details            details `json:"details"`
+	Discount           float64 `json:"discount"`
+	SubscriptionStatus string  `json:"subscriptionStatus"`
+}
+
+func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
+	licenseKey := r.URL.Query().Get("licenseKey")
+
+	if licenseKey == "" {
+		RespondError(w, model.BadRequest(fmt.Errorf("license key is required")), nil)
+		return
+	}
+
+	data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
+	if err != nil {
+		RespondError(w, model.InternalError(err), nil)
+		return
+	}
+
+	var billing billingData
+	if err := json.Unmarshal(data, &billing); err != nil {
+		RespondError(w, model.InternalError(err), nil)
+		return
+	}
+
+	ah.Respond(w, billing)
+}

ee/query-service/app/server.go

@@ -3,29 +3,56 @@ package app
 import (
 	"context"
 	"fmt"
+	"net"
+	"net/http"
+	"slices"
+
+	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
+	"go.opentelemetry.io/otel/propagation"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+
+	"github.com/gorilla/handlers"
+
+	"github.com/rs/cors"
+	"github.com/soheilhy/cmux"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/web"
 
 	"log/slog"
 
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
+	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
+	"github.com/SigNoz/signoz/pkg/query-service/utils"
 )
 
-// Server runs auxiliary servers (opamp) alongside the signoz apiserver
+// Server runs HTTP, Mux and a grpc server
 type Server struct {
+	config signoz.Config
+	signoz *signoz.SigNoz
+
+	// public http router
+	httpConn     net.Listener
+	httpServer   *http.Server
+	httpHostPort string
+
 	opampServer *opamp.Server
 
 	// Usage manager
 	usageManager *usage.Manager
+
+	unavailableChannel chan healthcheck.Status
 }
 
 // NewServer creates and initializes Server
@@ -100,25 +127,22 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	// Register the legacy query-service routes on the apiserver router. The
-	// apiserver owns the HTTP server and applies the middleware chain at serve
-	// time, so these routes get the same treatment as the apiserver routes.
-	r := signoz.APIServer.Router()
-	am := middleware.NewAuthZ(signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter, signoz.Authz)
-
-	apiHandler.RegisterRoutes(r, am)
-	apiHandler.RegisterLogsRoutes(r, am)
-	apiHandler.RegisterIntegrationRoutes(r, am)
-	apiHandler.RegisterQueryRangeV3Routes(r, am)
-	apiHandler.RegisterQueryRangeV4Routes(r, am)
-	apiHandler.RegisterMessagingQueuesRoutes(r, am)
-	apiHandler.RegisterThirdPartyApiRoutes(r, am)
-	apiHandler.RegisterTraceFunnelsRoutes(r, am)
-
 	s := &Server{
-		usageManager: usageManager,
+		config:             config,
+		signoz:             signoz,
+		httpHostPort:       baseconst.HTTPHostPort,
+		unavailableChannel: make(chan healthcheck.Status),
+		usageManager:       usageManager,
 	}
 
+	httpServer, err := s.createPublicServer(apiHandler, signoz.Web)
+
+	if err != nil {
+		return nil, err
+	}
+
+	s.httpServer = httpServer
+
 	s.opampServer = opamp.InitializeServer(
 		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
@@ -126,18 +150,146 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	return s, nil
 }
 
-// Start starts the opamp websocket server. The HTTP API server is started by
-// the signoz registry.
-func (s *Server) Start(ctx context.Context) error {
-	slog.Info("Starting OpAmp Websocket server", "addr", baseconst.OpAmpWsEndpoint)
-	if err := s.opampServer.Start(baseconst.OpAmpWsEndpoint); err != nil {
+// HealthCheckStatus returns health check status channel a client can subscribe to
+func (s Server) HealthCheckStatus() chan healthcheck.Status {
+	return s.unavailableChannel
+}
+
+func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
+	r := baseapp.NewRouter()
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
+
+	r.Use(middleware.NewRecovery(s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(otelmux.Middleware(
+		"apiserver",
+		otelmux.WithMeterProvider(s.signoz.Instrumentation.MeterProvider()),
+		otelmux.WithTracerProvider(s.signoz.Instrumentation.TracerProvider()),
+		otelmux.WithPropagators(propagation.NewCompositeTextMapPropagator(propagation.Baggage{}, propagation.TraceContext{})),
+		otelmux.WithFilter(func(r *http.Request) bool {
+			return !slices.Contains([]string{"/api/v1/health"}, r.URL.Path)
+		}),
+	))
+	r.Use(middleware.NewIdentN(s.signoz.IdentNResolver, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
+		s.config.APIServer.Timeout.ExcludedRoutes,
+		s.config.APIServer.Timeout.Default,
+		s.config.APIServer.Timeout.Max,
+	).Wrap)
+	r.Use(middleware.NewResource(s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
+	r.Use(middleware.NewComment().Wrap)
+
+	apiHandler.RegisterRoutes(r, am)
+	apiHandler.RegisterLogsRoutes(r, am)
+	apiHandler.RegisterIntegrationRoutes(r, am)
+	apiHandler.RegisterQueryRangeV3Routes(r, am)
+	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterWebSocketPaths(r, am)
+	apiHandler.RegisterMessagingQueuesRoutes(r, am)
+	apiHandler.RegisterThirdPartyApiRoutes(r, am)
+	apiHandler.RegisterTraceFunnelsRoutes(r, am)
+
+	err := s.signoz.APIServer.AddToRouter(r)
+	if err != nil {
+		return nil, err
+	}
+
+	c := cors.New(cors.Options{
+		AllowedOrigins: []string{"*"},
+		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
+	})
+
+	handler := c.Handler(r)
+
+	handler = handlers.CompressHandler(handler)
+
+	err = web.AddToRouter(r)
+	if err != nil {
+		return nil, err
+	}
+
+	routePrefix := s.config.Global.ExternalPath()
+	if routePrefix != "" {
+		prefixed := http.StripPrefix(routePrefix, handler)
+		handler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			switch req.URL.Path {
+			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
+				r.ServeHTTP(w, req)
+				return
+			}
+
+			prefixed.ServeHTTP(w, req)
+		})
+	}
+
+	return &http.Server{
+		Handler: handler,
+	}, nil
+}
+
+// initListeners initialises listeners of the server
+func (s *Server) initListeners() error {
+	// listen on public port
+	var err error
+	publicHostPort := s.httpHostPort
+	if publicHostPort == "" {
+		return fmt.Errorf("baseconst.HTTPHostPort is required")
+	}
+
+	s.httpConn, err = net.Listen("tcp", publicHostPort)
+	if err != nil {
 		return err
 	}
 
+	slog.Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
+
+	return nil
+}
+
+// Start listening on http and private http port concurrently
+func (s *Server) Start(ctx context.Context) error {
+	err := s.initListeners()
+	if err != nil {
+		return err
+	}
+
+	var httpPort int
+	if port, err := utils.GetPort(s.httpConn.Addr()); err == nil {
+		httpPort = port
+	}
+
+	go func() {
+		slog.Info("Starting HTTP server", "port", httpPort, "addr", s.httpHostPort)
+
+		switch err := s.httpServer.Serve(s.httpConn); err {
+		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
+			// normal exit, nothing to do
+		default:
+			slog.Error("Could not start HTTP server", errors.Attr(err))
+		}
+		s.unavailableChannel <- healthcheck.Unavailable
+	}()
+
+	go func() {
+		slog.Info("Starting OpAmp Websocket server", "addr", baseconst.OpAmpWsEndpoint)
+		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
+		if err != nil {
+			slog.Error("opamp ws server failed to start", errors.Attr(err))
+			s.unavailableChannel <- healthcheck.Unavailable
+		}
+	}()
+
 	return nil
 }
 
 func (s *Server) Stop(ctx context.Context) error {
+	if s.httpServer != nil {
+		if err := s.httpServer.Shutdown(ctx); err != nil {
+			return err
+		}
+	}
+
 	s.opampServer.Stop()
 
 	// stop usage manager

frontend/.gitignore

@@ -28,11 +28,4 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
-
-# Storybook
-/storybook-static/
-debug-storybook.log
-
-# Storybook screenshot sweeps (scripts/story-shots.mjs)
-/.story-shots/
+e2e/test-plan/user-preferences/

frontend/.oxlintrc.json

@@ -576,17 +576,6 @@
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"
       }
-    },
-    {
-      // Dev-tooling CLIs: stdout is their output, and they carry ported pixel/heap
-      // algorithms that read worse when split up.
-      "files": [
-        "scripts/**"
-      ],
-      "rules": {
-        "no-console": "off",
-        "sonarjs/cognitive-complexity": "off"
-      }
     }
   ]
 }

frontend/.storybook/main.ts

@@ -1,89 +0,0 @@
-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: __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/**/*.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'],
-	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,
-			plugins,
-			resolve: {
-				...viteConfig.resolve,
-				alias: [...mockAliases, ...normalizedAlias],
-			},
-		};
-	},
-};
-
-export default config;

frontend/.storybook/modes.ts

@@ -1,10 +0,0 @@
-/**
- * Chromatic modes: one snapshot per entry, per story. The globals in a mode are
- * Storybook's own, so `theme` is the toolbar's theme and the story renders the
- * way it does locally. The width matches `scripts/story-shots.mjs` (`--width`),
- * so a cloud snapshot and a local shot frame the same page.
- */
-export const allModes = {
-	dark: { theme: 'dark', viewport: { width: 1680, height: 1200 } },
-	light: { theme: 'light', viewport: { width: 1680, height: 1200 } },
-} as const;

frontend/.storybook/preview-head.html

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

@@ -1,133 +0,0 @@
-import type { Preview } from '@storybook/react-vite';
-import type { SetupWorker } from 'msw';
-import { setupWorker } from 'msw';
-
-import { settleForCapture } from '../src/storybook/visual/settleForCapture';
-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 { allModes } from './modes';
-
-import '../src/ReactI18';
-
-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 },
-		// One cloud snapshot per theme, for every story. A mode carries Storybook
-		// globals, so `theme` here is the same toolbar global the app reads out of
-		// localStorage. Widths are Chromatic's only real dimension, as they are
-		// locally: the app shell sizes itself to the viewport, so the height is the
-		// one it is given.
-		chromatic: { modes: allModes },
-	},
-	globalTypes: {
-		theme: {
-			description: 'SigNoz color scheme',
-			toolbar: {
-				title: 'Theme',
-				icon: 'paintbrush',
-				items: [
-					{ value: 'dark', title: 'Dark' },
-					{ value: 'light', title: 'Light' },
-				],
-				dynamicTitle: true,
-			},
-		},
-		motion: {
-			description:
-				'Park every animation on its last frame once the story has settled. Still is what both capture stacks shoot; Live is for watching a transition.',
-			toolbar: {
-				title: 'Motion',
-				icon: 'play',
-				items: [
-					{ value: 'still', title: 'Still' },
-					{ value: 'live', title: 'Live' },
-				],
-				dynamicTitle: true,
-			},
-		},
-	},
-	initialGlobals: { theme: 'dark', motion: 'still' },
-	// 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();
-	},
-	// After `play`, which is the moment both capture stacks shoot at.
-	afterEach: settleForCapture,
-};
-
-export default preview;

frontend/.storybook/public/mockServiceWorker.js

@@ -1,303 +0,0 @@
-/* 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') || ''
-
-  // Bypass server-sent events.
-  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,17 +88,6 @@ 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/__mocks__/uplotMock.ts

@@ -2,6 +2,8 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
+	/** Consumers read `root.parentElement` to detect a re-mounted container. */
+	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -17,13 +19,20 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (): MockUPlotInstance => ({
-	setData: jest.fn(),
-	setSize: jest.fn(),
-	destroy: jest.fn(),
-	redraw: jest.fn(),
-	setSeries: jest.fn(),
-});
+const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
+	const root = document.createElement('div');
+	// Real uPlot mounts its root inside the target; without it a re-render reads
+	// `root.parentElement` off undefined and throws.
+	target?.appendChild(root);
+	return {
+		root,
+		setData: jest.fn(),
+		setSize: jest.fn(),
+		destroy: jest.fn(),
+		redraw: jest.fn(),
+		setSeries: jest.fn(),
+	};
+};
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -53,14 +62,16 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	_target: HTMLElement,
+	target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance();
+	return createMockUPlotInstance(target);
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
+MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/docs/authz-guide.md

@@ -34,9 +34,6 @@ These hold for every page. The per-pattern sections below only add to them.
 4. **Never gate per row.** If a user can `list`, render every row. Check `read` only when the row is opened (drawer or
    detail route).
 5. **Gate the narrowest thing that works**, a button over a section, a section over a page.
-   - **Gate a page on `read` alone.** It is the only verb the page's own request needs. `update` and `delete` gate
-     individual controls, so waiting for them holds up the whole page for nothing — pass them as `preloadChecks` and
-     they resolve in the same request, leaving the controls to read from cache.
 6. **A resource may be gated while a sub-resource is not.** A user without `read` on Service Accounts can still hold
    `create` on API Keys, so blocking the outer container would hide work they are allowed to do.
 7. **Verbs not covered here** (`attach`, `detach`, `assignee`) behave like `delete`: gate the control that triggers
@@ -48,20 +45,11 @@ These hold for every page. The per-pattern sections below only add to them.
 
 ![Visual rules for structuring a list page](./assets/list-example.svg)
 
-Without `list`, but with any of `read` / `create` / `update`, the table and
-everything that only feeds it are blocked:
+Without `list`, but with any of `read` / `create` / `update`, only the table is blocked:
 
-- Title, description, search, filters and action buttons stay visible. Nothing is
-  hidden for lack of permission.
-- Disable what only shapes the blocked request — the search box, the filter chips,
-  a Clear button — and give it the same denial. It edits a query that has nowhere
-  to run, so leaving it live invites the user to compose a filter and watch
-  nothing happen.
-- Gate a region as one section when several of its controls are dead. A saved
-  views rail is a block with a single callout, not a column of identical
-  tooltips; a row of filters is one tooltip zone, not one per control.
-- The create button stays enabled if the user holds `create`. It is independent
-  of `list`.
+- Title, description, search filters and action buttons stay visible.
+- Filters and any control that drives the table are non-interactive.
+- The create button stays enabled if the user holds `create`.
 
 ### Edit page
 
@@ -108,11 +96,6 @@ Blocking is always a visible denial, never a silent removal. Use the components
 [`lib/authz/components`](../src/lib/authz/components/README.md) rather than hand-rolling a check, they carry the
 denial message and the loading state.
 
-**Denial copy comes from the components.** Never write a custom message for a permission check. `disabledTooltip` is
-for a block that is *not* a permission — a lock, an immutable resource, a mount that is deliberately read-only. It
-takes precedence over the checks, which are then skipped, so set it only when that block is the real obstacle: a
-missing permission must still surface its own wording.
-
 | Scope           | Component                                 | Denied state                                |
 | --------------- | ----------------------------------------- | ------------------------------------------- |
 | Button          | `AuthZButton`                             | Disabled + tooltip                          |

frontend/package.json

@@ -7,8 +7,6 @@
     "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",
@@ -160,9 +158,6 @@
     "@commitlint/config-conventional": "20.4.4",
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
-    "@storybook/addon-a11y": "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",
@@ -208,7 +203,6 @@
     "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/public/locales/en/dashboard.json

@@ -25,13 +25,11 @@
 	"dashboard_has_been_updated": "Dashboard has been updated",
 	"do_you_want_to_refresh_the_dashboard": "Do you want to refresh the dashboard?",
 	"locked_dashboard_delete_tooltip_admin_author": "Dashboard is locked. Please unlock the dashboard to enable delete.",
+	"locked_dashboard_delete_tooltip_editor": "Dashboard is locked. Please contact admin to delete the dashboard.",
 	"delete_dashboard_success": "{{name}} dashboard deleted successfully",
 	"dashboard_unsave_changes": "There are unsaved changes in the Query builder, please stage and run the query or the changes will be lost. Press OK to discard.",
 	"dashboard_save_changes": "Your graph built with {{queryTag}} query will be saved. Press OK to confirm.",
 	"your_graph_build_with": "Your graph built with",
 	"dashboard_ok_confirm": "query will be saved. Press OK to confirm.",
-	"variable_name_already_exists": "Variable \"{{name}}\" already exists",
-	"dashboard_locked": "This dashboard is locked",
-	"dashboard_read_only_here": "This dashboard is read-only here",
-	"lock_integration_dashboard": "An integration dashboard cannot be locked or unlocked"
+	"variable_name_already_exists": "Variable \"{{name}}\" already exists"
 }

frontend/scripts/story-shots-caption.mjs

@@ -1,167 +0,0 @@
-import { spawnSync } from 'node:child_process';
-
-/**
- * The caption band both story-shots.mjs and story-shots-diff.mjs stamp on their
- * output, and the ImageMagick plumbing under it. A shot records the band's
- * height in `shots.json` so the diff can crop it back off before comparing:
- * otherwise two runs whose captions differ would report the caption as a change.
- */
-export const CONFIG_KEYS = [
-	'args',
-	'clock',
-	'width',
-	'height',
-	'grow',
-	'motion',
-	'settle',
-	'ignore',
-];
-
-let tools;
-
-const detect = () =>
-	(tools ??= {
-		seven: spawnSync('magick', ['-version']).status === 0,
-		six: spawnSync('convert', ['-version']).status === 0,
-	});
-
-export const hasMagick = () => {
-	const { seven, six } = detect();
-	return seven || six;
-};
-
-export const requireMagick = () => {
-	if (hasMagick()) {
-		return;
-	}
-	console.error(
-		'ImageMagick not found. Install it (brew install imagemagick, apt install imagemagick).',
-	);
-	process.exit(1);
-};
-
-export const magick = (args, input) => {
-	// ImageMagick 6 has no `magick`: its tools are separate binaries.
-	const [command, ...rest] = detect().seven
-		? ['magick', ...args]
-		: ['identify', 'montage'].includes(args[0])
-			? args
-			: ['convert', ...args];
-	const result = spawnSync(command, rest, {
-		input,
-		maxBuffer: 1024 * 1024 * 1024,
-	});
-	if (result.status !== 0) {
-		throw new Error(`${command} ${rest.join(' ')}: ${result.stderr}`);
-	}
-	return result.stdout;
-};
-
-/**
- * ImageMagick's built-in default is a serif that reads as a book, not as a
- * screenshot label, so the band asks for what is installed: a sans for the
- * heading, a mono for the lines that carry ids, args and numbers. An
- * unrecognised name is fatal to `convert`, hence the check against the list it
- * reports; a machine with none of them keeps the default.
- */
-const FONTS = {
-	heading: [
-		'Helvetica-Bold',
-		'DejaVu-Sans-Bold',
-		'Liberation-Sans-Bold',
-		'Arial-Bold',
-		'Noto-Sans-Bold',
-		'DejaVu-Sans',
-		'Liberation-Sans',
-	],
-	body: [
-		'Menlo',
-		'DejaVu-Sans-Mono',
-		'Liberation-Mono',
-		'JetBrainsMono-NF-Regular',
-		'Courier',
-	],
-};
-
-let installed;
-
-const fontArgs = (role) => {
-	installed ??= new Set(
-		[
-			...magick(['-list', 'font'])
-				.toString()
-				.matchAll(/^\s*Font:\s*(\S+)/gm),
-		].map(([, name]) => name),
-	);
-	const font = FONTS[role].find((name) => installed.has(name));
-	return font ? ['-font', font] : [];
-};
-
-/** Readable at fit-to-width, whatever the image is. */
-export const pointsize = (width) =>
-	Math.min(Math.max(Math.round(width / 45), 24), 140);
-
-// `label:` expands ImageMagick's own escapes and reads a file when the text
-// starts with @, so story names and arg values go through neither.
-export const bodyFont = () => fontArgs('body');
-
-export const literal = (text) => text.replaceAll('%', '%%').replace(/^@/, ' @');
-
-/** The gutter is the opposite of the theme, so the band keeps an edge. */
-export const palette = (theme) =>
-	theme === 'light'
-		? { background: '#101014', foreground: '#f4f4f5' }
-		: { background: '#f4f4f5', foreground: '#101014' };
-
-export const settingsLine = (config, keys = CONFIG_KEYS) =>
-	keys
-		.filter((key) => config?.[key])
-		.map((key) => `${key}:${config[key]}`)
-		.join('  ');
-
-const heightOf = (file) => Number(magick(['identify', '-format', '%h', file]));
-
-/**
- * Writes `from` to `to` with `lines` above it, and returns how many rows that
- * added — which is what a reader has to crop off to get the original back, so
- * the band must never change the width. Each line is a `caption:` at the
- * image's own width, wrapping instead of widening the canvas: a run whose
- * caption is longer must still produce a shot the next run's shot pairs with.
- * Type size follows the width, since a three-tile montage of 1680px shots is
- * over 5000px wide and is read at fit-to-width.
- */
-export const stamp = ({ lines, from, to, theme }) => {
-	const { background, foreground } = palette(theme);
-	const width = Number(magick(['identify', '-format', '%w', from]));
-	const heading = pointsize(width);
-	const before = heightOf(from);
-	const spacer = [
-		'-size',
-		`${width}x${Math.round(heading * 0.4)}`,
-		`xc:${background}`,
-	];
-
-	magick([
-		'-background',
-		background,
-		'-fill',
-		foreground,
-		'-gravity',
-		'center',
-		...spacer,
-		...lines.flatMap((line, index) => [
-			...fontArgs(index ? 'body' : 'heading'),
-			'-size',
-			`${width}x`,
-			'-pointsize',
-			String(index ? Math.round(heading * 0.62) : heading),
-			`caption:${literal(line)}`,
-		]),
-		...spacer,
-		from,
-		'-append',
-		to,
-	]);
-
-	return heightOf(to) - before;
-};

frontend/scripts/story-shots-diff.mjs

@@ -1,460 +0,0 @@
-#!/usr/bin/env node
-import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
-import { parseArgs } from 'node:util';
-import path from 'node:path';
-import os from 'node:os';
-
-import {
-	bodyFont,
-	CONFIG_KEYS,
-	literal,
-	magick,
-	palette,
-	pointsize,
-	requireMagick,
-	settingsLine,
-	stamp,
-} from './story-shots-caption.mjs';
-
-/**
- * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
- * moved, per pair, largest first.
- *
- * The comparison is Chromatic's: a pixel counts as changed when its YIQ
- * distance from the baseline pixel is over `threshold` of the largest distance
- * two colours can have, and pixels that are only antialiasing around an
- * otherwise identical edge do not count. `threshold` is their `diffThreshold`
- * and its default is theirs too.
- */
-const MAX_YIQ_DELTA = 35_215;
-
-const { values: opts, positionals } = parseArgs({
-	allowPositionals: true,
-	options: {
-		mode: { type: 'string', default: 'green' },
-		threshold: { type: 'string', default: '0.063' },
-		'include-aa': { type: 'boolean', default: false },
-		tint: { type: 'string', default: '' },
-		'no-caption': { type: 'boolean', default: false },
-		help: { type: 'boolean', short: 'h', default: false },
-	},
-});
-
-const [baseDir, afterDir, outArg] = positionals;
-const MODES = new Set(['green', 'green-parallel', 'red', 'red-parallel']);
-
-if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
-	console.log(`usage: node scripts/story-shots-diff.mjs <baseline-dir> <after-dir> [diff-dir]
-
-  --mode green           the after shot, changed pixels painted over it (default)
-  --mode green-parallel  previous | current | green diff, side by side and labelled
-  --mode red             the after shot faded out, changed pixels painted red
-  --mode red-parallel    previous | current | red diff, side by side and labelled
-  --threshold <0..1>     YIQ distance a pixel must move to count (default 0.063)
-  --include-aa           count antialiasing changes too (default: ignore them)
-  --tint <#rrggbb>       override the mode's highlight colour
-  --no-caption           do not stamp the story and the run settings on top
-
-Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
-	process.exit(opts.help ? 0 : 1);
-}
-
-const outDir = outArg ?? path.join(path.dirname(baseDir), 'diff');
-const threshold = Number(opts.threshold);
-const maxDelta = MAX_YIQ_DELTA * threshold * threshold;
-const highlight = hexToRgb(
-	opts.tint || (opts.mode.startsWith('green') ? '#00e05a' : '#ff003a'),
-);
-
-function hexToRgb(hex) {
-	const value = Number.parseInt(hex.replace('#', ''), 16);
-	return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
-}
-
-requireMagick();
-
-/**
- * `top` rows are dropped: story-shots.mjs stamps a caption on its shots and
- * records how tall it is, and a caption is not part of what the two runs are
- * being compared on.
- */
-const readRgba = (file, top = 0) => {
-	const [width, height] = magick(['identify', '-format', '%w %h', file])
-		.toString()
-		.split(' ')
-		.map(Number);
-	const data = magick([file, '-depth', '8', 'RGBA:-']);
-	return top > 0 && top < height
-		? { width, height: height - top, data: data.subarray(top * width * 4) }
-		: { width, height, data };
-};
-
-const writeRgba = ({ width, height, data }, file) =>
-	writeFile(
-		file,
-		magick(
-			['-depth', '8', '-size', `${width}x${height}`, 'RGBA:-', 'png:-'],
-			data,
-		),
-	);
-
-/* The pixelmatch colour maths, which is what Chromatic's threshold is scaled to. */
-const y = (r, g, b) => r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
-const i = (r, g, b) => r * 0.59597799 - g * 0.2741761 - b * 0.32180189;
-const q = (r, g, b) => r * 0.21147017 - g * 0.52261711 + b * 0.31114694;
-
-/** Squared YIQ distance, signed by which pixel is brighter. */
-const colorDelta = (a, b, posA, posB, yOnly = false) => {
-	let r1 = a[posA];
-	let g1 = a[posA + 1];
-	let b1 = a[posA + 2];
-	const a1 = a[posA + 3];
-	let r2 = b[posB];
-	let g2 = b[posB + 1];
-	let b2 = b[posB + 2];
-	const a2 = b[posB + 3];
-
-	if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) {
-		return 0;
-	}
-
-	// Anything translucent is composited over the same mid grey in both images,
-	// so a difference in alpha alone still registers.
-	if (a1 < 255) {
-		const alpha = a1 / 255;
-		r1 = r1 * alpha + 255 * (1 - alpha) * 0.5;
-		g1 = g1 * alpha + 255 * (1 - alpha) * 0.5;
-		b1 = b1 * alpha + 255 * (1 - alpha) * 0.5;
-	}
-	if (a2 < 255) {
-		const alpha = a2 / 255;
-		r2 = r2 * alpha + 255 * (1 - alpha) * 0.5;
-		g2 = g2 * alpha + 255 * (1 - alpha) * 0.5;
-		b2 = b2 * alpha + 255 * (1 - alpha) * 0.5;
-	}
-
-	const deltaY = y(r1, g1, b1) - y(r2, g2, b2);
-	if (yOnly) {
-		return deltaY;
-	}
-
-	const deltaI = i(r1, g1, b1) - i(r2, g2, b2);
-	const deltaQ = q(r1, g1, b1) - q(r2, g2, b2);
-	return (
-		0.5053 * deltaY * deltaY + 0.299 * deltaI * deltaI + 0.1957 * deltaQ * deltaQ
-	);
-};
-
-/**
- * True when the pixel sits on an edge that is drawn one subpixel over rather
- * than moved: it is the darkest or lightest of its neighbours in one image, and
- * the other image has a pixel around there doing the same job.
- */
-const antialiased = (a, x1, y1, width, height, b) => {
-	const x0 = Math.max(x1 - 1, 0);
-	const y0 = Math.max(y1 - 1, 0);
-	const x2 = Math.min(x1 + 1, width - 1);
-	const y2 = Math.min(y1 + 1, height - 1);
-	const pos = (y1 * width + x1) * 4;
-	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
-	let min = 0;
-	let max = 0;
-	let minX = 0;
-	let minY = 0;
-	let maxX = 0;
-	let maxY = 0;
-
-	for (let x = x0; x <= x2; x += 1) {
-		for (let yy = y0; yy <= y2; yy += 1) {
-			if (x === x1 && yy === y1) {
-				continue;
-			}
-
-			const delta = colorDelta(a, a, pos, (yy * width + x) * 4, true);
-			if (delta === 0) {
-				zeroes += 1;
-				if (zeroes > 2) {
-					return false;
-				}
-			} else if (delta < min) {
-				min = delta;
-				minX = x;
-				minY = yy;
-			} else if (delta > max) {
-				max = delta;
-				maxX = x;
-				maxY = yy;
-			}
-		}
-	}
-
-	if (min === 0 || max === 0) {
-		return false;
-	}
-
-	return (
-		(hasManySiblings(a, minX, minY, width, height) &&
-			hasManySiblings(b, minX, minY, width, height)) ||
-		(hasManySiblings(a, maxX, maxY, width, height) &&
-			hasManySiblings(b, maxX, maxY, width, height))
-	);
-};
-
-/** Whether the pixel has at least three identical neighbours. */
-const hasManySiblings = (img, x1, y1, width, height) => {
-	const x0 = Math.max(x1 - 1, 0);
-	const y0 = Math.max(y1 - 1, 0);
-	const x2 = Math.min(x1 + 1, width - 1);
-	const y2 = Math.min(y1 + 1, height - 1);
-	const pos = (y1 * width + x1) * 4;
-	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
-
-	for (let x = x0; x <= x2; x += 1) {
-		for (let yy = y0; yy <= y2; yy += 1) {
-			if (x === x1 && yy === y1) {
-				continue;
-			}
-
-			const other = (yy * width + x) * 4;
-			if (
-				img[pos] === img[other] &&
-				img[pos + 1] === img[other + 1] &&
-				img[pos + 2] === img[other + 2] &&
-				img[pos + 3] === img[other + 3]
-			) {
-				zeroes += 1;
-				if (zeroes > 2) {
-					return true;
-				}
-			}
-		}
-	}
-
-	return false;
-};
-
-/**
- * The changed pixels of the pair, painted over the after shot. The `red` modes
- * fade the shot out first, the way a pixelmatch diff reads; the `green` ones
- * leave it alone, the way Chromatic's does.
- */
-const diffPair = (base, after, mode) => {
-	const width = Math.min(base.width, after.width);
-	const height = Math.min(base.height, after.height);
-	const out = Buffer.from(after.data);
-	const fade = !mode.startsWith('green');
-	let changed = 0;
-
-	if (fade) {
-		for (let pos = 0; pos < out.length; pos += 4) {
-			const grey = y(out[pos], out[pos + 1], out[pos + 2]);
-			const value = 255 + (grey - 255) * 0.1;
-			out[pos] = value;
-			out[pos + 1] = value;
-			out[pos + 2] = value;
-			out[pos + 3] = 255;
-		}
-	}
-
-	for (let row = 0; row < height; row += 1) {
-		for (let column = 0; column < width; column += 1) {
-			const basePos = (row * base.width + column) * 4;
-			const afterPos = (row * after.width + column) * 4;
-			const delta = colorDelta(base.data, after.data, basePos, afterPos);
-			if (Math.abs(delta) <= maxDelta) {
-				continue;
-			}
-			if (
-				!opts['include-aa'] &&
-				(antialiased(base.data, column, row, base.width, base.height, after.data) ||
-					antialiased(after.data, column, row, after.width, after.height, base.data))
-			) {
-				continue;
-			}
-
-			changed += 1;
-			out[afterPos] = highlight[0];
-			out[afterPos + 1] = highlight[1];
-			out[afterPos + 2] = highlight[2];
-			out[afterPos + 3] = 255;
-		}
-	}
-
-	// A shot that grew or shrank has no counterpart for the extra rows and
-	// columns, so all of them are a change.
-	const extra =
-		after.width * after.height -
-		width * height +
-		(base.width * base.height - width * height);
-
-	return {
-		data: out,
-		width: after.width,
-		height: after.height,
-		changed: changed + extra,
-	};
-};
-
-/**
- * What each run was and how it was configured, from the `shots.json`
- * story-shots.mjs leaves beside its output. A run shot before that existed, or
- * a directory assembled by hand, simply gets no caption.
- */
-const manifest = async (dir) => {
-	try {
-		return JSON.parse(await readFile(path.join(dir, 'shots.json'), 'utf8'));
-	} catch {
-		return null;
-	}
-};
-
-const [baseRun, afterRun] = await Promise.all([
-	manifest(baseDir),
-	manifest(afterDir),
-]);
-
-/** The settings the two runs disagree on: what a difference in the shots may be. */
-const changedKeys = CONFIG_KEYS.filter(
-	(key) => (baseRun?.config?.[key] ?? '') !== (afterRun?.config?.[key] ?? ''),
-);
-
-const settings = (run, keys) => settingsLine(run?.config, keys);
-
-const shotOf = (run, rel) =>
-	run?.shots?.find((shot) => shot.file === rel.split(path.sep).join('/'));
-
-const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;
-
-/** ImageMagick's inline crop, so a tile shows the shot without its caption. */
-const withoutCaption = (file, { width, height }, top) =>
-	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
-
-/** Story, then the settings both runs shared. One line each, widest font first. */
-const header = (rel) => {
-	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
-	const shared = settings(
-		afterRun,
-		CONFIG_KEYS.filter((key) => !changedKeys.includes(key)),
-	);
-	return [
-		shot ? `${shot.title}/${shot.name}` : rel.replace(/\.png$/, ''),
-		[shot?.id ?? '', shot?.theme ?? '', shot?.status === 'busy' ? '(busy)' : '']
-			.filter(Boolean)
-			.join('  '),
-		shared,
-	].filter(Boolean);
-};
-
-/** A tile's own line: which side it is, and where its run differed. */
-const sideLabel = (side, run) =>
-	[side, settings(run, changedKeys)].filter(Boolean).join('   ');
-
-const captionLines = (rel, lines) =>
-	opts['no-caption'] ? [] : [...header(rel), ...lines].filter(Boolean);
-
-const pngs = async (dir, prefix = '') => {
-	const entries = await readdir(path.join(dir, prefix), { withFileTypes: true });
-	const files = [];
-	for (const entry of entries) {
-		const rel = path.join(prefix, entry.name);
-		if (entry.isDirectory()) {
-			files.push(...(await pngs(dir, rel)));
-		} else if (entry.name.endsWith('.png')) {
-			files.push(rel);
-		}
-	}
-	return files;
-};
-
-const results = [];
-await mkdir(outDir, { recursive: true });
-
-for (const rel of (await pngs(baseDir)).sort()) {
-	const afterFile = path.join(afterDir, rel);
-	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
-	let after;
-	try {
-		after = readRgba(afterFile, captionOf(afterRun, rel));
-	} catch {
-		console.error(`missing in after: ${rel}`);
-		continue;
-	}
-
-	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
-	const diff = diffPair(base, after, opts.mode);
-	const target = path.join(outDir, rel);
-	const parallel = opts.mode.endsWith('-parallel');
-	// With no tiles to label, a run's own settings go in the caption instead.
-	const caption = captionLines(
-		rel,
-		parallel || !changedKeys.length
-			? []
-			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
-	);
-	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
-	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);
-
-	// The gutter is the opposite of the theme's own background, so the tiles and
-	// the caption keep an edge instead of bleeding into it.
-	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
-	const theme = shot?.theme ?? rel.split(path.sep)[0];
-	const { background, foreground } = palette(theme);
-
-	if (parallel) {
-		await writeRgba(diff, diffFile);
-		const tile = (label, file) => [
-			'(',
-			`label:${literal(label)}`,
-			file,
-			'-gravity',
-			'center',
-			'-append',
-			'-bordercolor',
-			background,
-			'-border',
-			'12',
-			')',
-		];
-		magick([
-			'-background',
-			background,
-			'-fill',
-			foreground,
-			...bodyFont(),
-			'-pointsize',
-			// The tiles end up side by side, so they are read at the montage's width.
-			String(Math.round(pointsize(after.width * 3) * 0.62)),
-			...tile(
-				sideLabel('previous', baseRun),
-				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
-			),
-			...tile(
-				sideLabel('current', afterRun),
-				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
-			),
-			...tile('diff', diffFile),
-			'-gravity',
-			'north',
-			'+append',
-			caption.length ? body : target,
-		]);
-		if (caption.length) {
-			stamp({ lines: caption, from: body, to: target, theme });
-		}
-	} else {
-		await writeRgba(diff, caption.length ? body : target);
-		if (caption.length) {
-			stamp({ lines: caption, from: body, to: target, theme });
-		}
-	}
-
-	results.push([diff.changed, rel]);
-}
-
-results
-	.sort((a, b) => b[0] - a[0])
-	.forEach(([changed, rel]) =>
-		console.log(`${String(changed).padStart(10)}  ${rel}`),
-	);
-
-console.error(`diffs in ${outDir}`);

frontend/scripts/story-shots.mjs

@@ -1,514 +0,0 @@
-#!/usr/bin/env node
-import { spawnSync } from 'node:child_process';
-import { mkdir, rename, writeFile } from 'node:fs/promises';
-import { createRequire } from 'node:module';
-import { parseArgs } from 'node:util';
-import { pathToFileURL } from 'node:url';
-import path from 'node:path';
-import os from 'node:os';
-
-import {
-	CONFIG_KEYS,
-	hasMagick,
-	settingsLine,
-	stamp,
-} from './story-shots-caption.mjs';
-
-/**
- * The wall clock every shot is taken at, passed to the preview as `storyClock`.
- * `.storybook/preview-head.html` freezes the same instant by itself, so a
- * Chromatic build reads the clock this run does.
- */
-const FROZEN_CLOCK = '2026-06-15T12:00:00.000Z';
-
-const { values: opts, positionals } = parseArgs({
-	allowPositionals: true,
-	options: {
-		out: { type: 'string', short: 'o' },
-		stories: { type: 'string', multiple: true, default: [] },
-		title: { type: 'string', default: '' },
-		name: { type: 'string', default: '' },
-		theme: { type: 'string', multiple: true, default: [] },
-		args: { type: 'string', multiple: true, default: [] },
-		port: { type: 'string', default: process.env.SB_PORT ?? '6006' },
-		width: { type: 'string', default: '1680' },
-		height: { type: 'string', default: '1200' },
-		'max-height': { type: 'string', default: '8000' },
-		grow: { type: 'string', default: 'scrollers' },
-		settle: { type: 'string', default: '1500' },
-		clock: { type: 'string', default: FROZEN_CLOCK },
-		motion: { type: 'boolean', default: false },
-		ignore: { type: 'string', multiple: true, default: [] },
-		flat: { type: 'boolean', default: false },
-		'no-caption': { type: 'boolean', default: false },
-		list: { type: 'boolean', default: false },
-		help: { type: 'boolean', short: 'h', default: false },
-	},
-});
-
-const outDir = opts.out ?? positionals[0];
-const themes = opts.theme.flatMap((value) => value.split(',')).filter(Boolean);
-const storyArgs = opts.args.filter(Boolean).join(';');
-
-if (opts.help || (!outDir && !opts.list)) {
-	console.log(`usage: node scripts/story-shots.mjs <out-dir> [options]
-
-  --stories <match>   only stories whose id or title/name path contains <match>
-                      (repeatable, comma-separated; default: every story)
-  --title <prefix>    only stories whose title starts with <prefix>
-  --name <match>      only stories whose name contains <match>
-  --theme <themes>    themes to shoot, e.g. dark,light (default: story default)
-  --args <k:v;k2:v2>  arg overrides, storybook's own ?args= syntax (repeatable).
-                      A value containing a dot is dropped by storybook itself
-  --port <port>       storybook dev server port (default 6006, or $SB_PORT)
-  --width <px>        viewport width, the only fixed dimension (default 1680)
-  --height <px>       shortest the viewport may be (default 1200)
-  --max-height <px>   tallest the viewport may grow to (default 8000)
-  --grow <what>       scrollers (default) grows the viewport until the page's
-                      own scrollers fit, document only follows the document
-                      height (a no-op on any page with the app shell), none
-                      keeps --height
-  --settle <ms>       wait after the page goes quiet (default 1500)
-  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
-  --motion            keep animations and transitions running
-  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
-  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
-  --no-caption        do not stamp the story and the run settings on the shot
-  --list              print the matched stories and exit
-
-Screenshots land in <out-dir>/<theme>/<story-id>.png, alongside a shots.json
-recording what each shot is, how the run was configured, and how tall the
-caption on it is. story-shots-diff.mjs reads that to crop the caption off before
-comparing, so two runs never diff their own captions.
-
-Captioning needs ImageMagick; without it the shots are written bare.
-
-Playwright is looked up in tests/e2e, then in the global install; override with
-PLAYWRIGHT_MODULE. The browser is playwright's own chromium, else an installed
-Chrome; override with CHROME_PATH.`);
-	process.exit(opts.help ? 0 : 1);
-}
-
-const base = `http://localhost:${opts.port}`;
-
-// `index.json` carries raw control characters from story jsdoc, so it is read as
-// text rather than piped through anything that revalidates it.
-const index = JSON.parse(await (await fetch(`${base}/index.json`)).text());
-
-const matches = opts.stories
-	.flatMap((value) => value.split(','))
-	.filter(Boolean);
-
-const stories = Object.values(index.entries)
-	.filter((entry) => {
-		if (entry.type !== 'story') {
-			return false;
-		}
-		if (opts.title && !entry.title.startsWith(opts.title)) {
-			return false;
-		}
-		if (
-			opts.name &&
-			!entry.name.toLowerCase().includes(opts.name.toLowerCase())
-		) {
-			return false;
-		}
-		if (!matches.length) {
-			return true;
-		}
-
-		const haystack = `${entry.id} ${entry.title}/${entry.name}`.toLowerCase();
-		return matches.some((match) => haystack.includes(match.toLowerCase()));
-	})
-	.sort((a, b) => a.id.localeCompare(b.id));
-
-if (opts.list) {
-	stories.forEach((story) =>
-		console.log(`${story.id}\t${story.title}/${story.name}`),
-	);
-	console.log(`${stories.length} stories`);
-	process.exit(0);
-}
-
-if (!stories.length) {
-	console.error('no story matched');
-	process.exit(1);
-}
-
-const ignoreSelectors = opts.ignore
-	.flatMap((value) => value.split(','))
-	.map((value) => value.trim())
-	.filter(Boolean);
-
-if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
-	console.error(`--clock: not a date: ${opts.clock}`);
-	process.exit(1);
-}
-
-/**
- * `[data-shot-ignore]` and `--ignore` hide what cannot be settled, the local
- * half of Chromatic's `data-chromatic="ignore"`. Everything else the shot needs
- * held still - the frozen clock, the parked animations, the lists snapped onto
- * their bottom - is done by the preview itself, so a Chromatic build and a shot
- * from here see the same page.
- */
-const ignoreCss = (
-	ignore,
-) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
-	.map((selector) => `, ${selector}`)
-	.join('')} {
-	visibility: hidden !important;
-}`;
-
-/**
- * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
- * or wherever `$PLAYWRIGHT_MODULE` points. `@playwright/test` re-exports
- * `chromium`, so an e2e install alone is enough.
- */
-const resolvePlaywright = () => {
-	const specifiers = process.env.PLAYWRIGHT_MODULE
-		? [process.env.PLAYWRIGHT_MODULE]
-		: ['playwright', '@playwright/test'];
-
-	const find = (roots) => {
-		for (const specifier of specifiers) {
-			for (const root of roots) {
-				try {
-					return createRequire(path.join(root, '-')).resolve(specifier);
-				} catch {
-					/* next candidate */
-				}
-			}
-		}
-		return null;
-	};
-
-	const local = find([
-		import.meta.dirname,
-		path.resolve(import.meta.dirname, '../../tests/e2e'),
-	]);
-	if (local) {
-		return local;
-	}
-
-	// `npm root -g` prints the global node_modules; resolution starts a level up.
-	const globalRoot = spawnSync('npm', ['root', '-g'], { encoding: 'utf8' });
-	const global =
-		globalRoot.status === 0 && find([path.dirname(globalRoot.stdout.trim())]);
-	if (global) {
-		return global;
-	}
-
-	console.error(
-		'playwright not found. Install it (pnpm -C tests/e2e install, or npm i -g playwright) or set PLAYWRIGHT_MODULE.',
-	);
-	return process.exit(1);
-};
-
-const pwModule = await import(pathToFileURL(resolvePlaywright()).href);
-const pw = pwModule.chromium ? pwModule : pwModule.default;
-
-console.log(
-	`${stories.length} stories x ${themes.length || 1} theme(s) -> ${outDir}`,
-);
-
-/**
- * A playwright install carries no browser of its own, and the revision it wants
- * is often not the one that was downloaded, so an installed Chrome is the
- * fallback before giving up.
- */
-const launch = async () => {
-	if (process.env.CHROME_PATH) {
-		return pw.chromium.launch({ executablePath: process.env.CHROME_PATH });
-	}
-	try {
-		return await pw.chromium.launch();
-	} catch (error) {
-		try {
-			return await pw.chromium.launch({ channel: 'chrome' });
-		} catch {
-			console.error(
-				`${error.message.split('\n')[0]}\nRun 'playwright install chromium' or set CHROME_PATH to a browser binary.`,
-			);
-			return process.exit(1);
-		}
-	}
-};
-
-const browser = await launch();
-
-const failures = [];
-const shots = [];
-
-const runConfig = {
-	args: storyArgs,
-	clock: opts.clock,
-	width: opts.width,
-	height: opts.height,
-	grow: opts.grow,
-	motion: opts.motion ? 'live' : 'still',
-	settle: opts.settle,
-	ignore: ignoreSelectors.join(', '),
-};
-
-const captioning = !opts['no-caption'] && hasMagick();
-
-if (!opts['no-caption'] && !captioning) {
-	console.error('ImageMagick not found: shots are written without a caption.');
-}
-
-const configLine = settingsLine(runConfig, CONFIG_KEYS);
-
-for (const theme of themes.length ? themes : [null]) {
-	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
-	await mkdir(dir, { recursive: true });
-	if (theme) {
-		console.log(`\n[${theme}]`);
-	}
-
-	for (const story of stories) {
-		// A context per story: reusing one page loses the msw worker
-		// re-registration race after a few navigations and the story then dies on
-		// a missing worker.
-		const context = await browser.newContext({
-			viewport: { width: Number(opts.width), height: Number(opts.height) },
-			reducedMotion: opts.motion ? 'no-preference' : 'reduce',
-		});
-		const page = await context.newPage();
-
-		// react-query retries and msw both keep requests going long after load, so
-		// the settle waits on the page being quiet rather than on a fixed delay.
-		let inFlight = 0;
-		let lastActivity = Date.now();
-		page.on('request', () => {
-			inFlight += 1;
-			lastActivity = Date.now();
-		});
-		const done = () => {
-			inFlight = Math.max(inFlight - 1, 0);
-			lastActivity = Date.now();
-		};
-		page.on('requestfinished', done);
-		page.on('requestfailed', done);
-
-		// The height the rounds had reached when the page turned out to grow with
-		// the viewport, kept only to flag the story in the log.
-		let chasing = 0;
-
-		const url = new URL(`${base}/iframe.html`);
-		url.searchParams.set('viewMode', 'story');
-		url.searchParams.set('id', story.id);
-		// The preview owns the clock and the motion state, so both are asked for in
-		// the URL rather than injected here: a Chromatic build gets the defaults.
-		url.searchParams.set('storyClock', opts.clock);
-		const globals = [theme && `theme:${theme}`, opts.motion && 'motion:live']
-			.filter(Boolean)
-			.join(';');
-		if (globals) {
-			url.searchParams.set('globals', globals);
-		}
-		if (storyArgs) {
-			url.searchParams.set('args', storyArgs);
-		}
-
-		try {
-			await page.goto(url.href, { waitUntil: 'domcontentloaded' });
-
-			// Storybook's own render phase is the readiness signal: it reaches
-			// `finished` only once the loaders, the decorators and the story's `play`
-			// are all done, which a DOM check cannot see. The dev server transforms
-			// each page module on first visit, so this is the slow wait.
-			await page.waitForFunction(
-				() =>
-					(window.__STORYBOOK_PREVIEW__?.storyRenders ?? []).some((render) =>
-						['finished', 'errored', 'aborted'].includes(render.phase),
-					) || document.body.classList.contains('sb-show-errordisplay'),
-				undefined,
-				{ timeout: 120_000 },
-			);
-
-			await page.addStyleTag({ content: ignoreCss(ignoreSelectors) });
-			if (!opts.motion) {
-				// Videos and GIFs are parked on their first frame, as Chromatic does.
-				await page.evaluate(() =>
-					document.querySelectorAll('video').forEach((video) => video.pause?.()),
-				);
-			}
-
-			// Text reflows when a webfont lands, so the shot waits for the faces the
-			// page asked for. Some stories keep a request open by design, hence the
-			// cap on the quiet wait rather than a plain networkidle.
-			await page.evaluate(() => document.fonts.ready);
-			const quietUntil = Date.now() + 15_000;
-			while (
-				Date.now() < quietUntil &&
-				(inFlight > 0 || Date.now() - lastActivity < 600)
-			) {
-				await page.waitForTimeout(200);
-			}
-			await page.waitForTimeout(Number(opts.settle));
-
-			// The width is the fixed dimension and the height follows the page, the
-			// way a Chromatic viewport does. `src/styles.scss` pins
-			// `html, body, #root` to `height: 100%; overflow: hidden`, so the
-			// document can never outgrow the viewport and its height says nothing
-			// about what is on the page: what overflows are the shell's inner
-			// scrollers. `scrollers` grows the viewport until the tallest of those
-			// fits, so nothing is cut off and no scrollbar is left in the shot.
-			// Growing changes the layout, hence the rounds. A page that sizes a panel
-			// in `vh` grows its own content as the viewport grows, so no height ever
-			// fits it and the rounds only chase: `.alert-chart-container` is `57vh`,
-			// which puts Create Alert's fixed point at 4344px with an empty band on
-			// top. Such a page is shot at `--height` with its own scrollbar instead,
-			// which is what it looks like in a browser.
-			if (opts.grow !== 'none') {
-				const maximum = Number(opts['max-height']);
-				const requested = Number(opts.height);
-				let height = requested;
-				let fits = false;
-				for (let round = 0; round < 3 && !fits; round += 1) {
-					const needed = Math.min(
-						maximum,
-						await page.evaluate((withScrollers) => {
-							const document_ = Math.max(
-								document.documentElement.scrollHeight,
-								document.body.scrollHeight,
-							);
-							if (!withScrollers) {
-								return document_;
-							}
-
-							// Popups are skipped: they are out of the flow, and a tall
-							// dropdown or tooltip would otherwise drag the shot to a
-							// height nothing on the page itself needs.
-							const inFlow = (element) => {
-								for (
-									let node = element;
-									node && node !== document.documentElement;
-									node = node.parentElement
-								) {
-									const { position } = getComputedStyle(node);
-									if (position === 'fixed' || position === 'absolute') {
-										return false;
-									}
-								}
-								return true;
-							};
-
-							return [...document.querySelectorAll('*')].reduce((tallest, element) => {
-								const { overflowY } = getComputedStyle(element);
-								if (
-									!['auto', 'scroll', 'overlay'].includes(overflowY) ||
-									element.scrollHeight - element.clientHeight <= 1 ||
-									!inFlow(element)
-								) {
-									return tallest;
-								}
-
-								const box = element.getBoundingClientRect();
-								const above = box.top + window.scrollY;
-								const below = Math.max(0, document_ - (box.bottom + window.scrollY));
-								return Math.max(tallest, above + element.scrollHeight + below);
-							}, document_);
-						}, opts.grow === 'scrollers'),
-					);
-					fits = needed <= height;
-					if (fits) {
-						break;
-					}
-
-					height = needed;
-					await page.setViewportSize({ width: Number(opts.width), height });
-					await page.waitForTimeout(Number(opts.settle));
-				}
-
-				if (!fits && height !== requested) {
-					chasing = height;
-					height = requested;
-					await page.setViewportSize({ width: Number(opts.width), height });
-					await page.waitForTimeout(Number(opts.settle));
-				}
-			}
-
-			// The preview snapped its bottom-pinned lists at `afterEach`, before the
-			// page went quiet; a virtuoso list is usually still measuring then.
-			await page.evaluate(() => window.__signozSnapPinnedScrollers?.());
-
-			// A page that is still moving — a list scrolling itself to the bottom, a
-			// monaco editor re-measuring, a tooltip being repositioned — is shot
-			// twice in a row until two frames come back identical, since what the
-			// page is waiting on is not observable from here.
-			let shot = await page.screenshot();
-			let stable = false;
-			for (let attempt = 0; attempt < 8 && !stable; attempt += 1) {
-				await page.waitForTimeout(400);
-				const next = await page.screenshot();
-				stable = next.equals(shot);
-				shot = next;
-			}
-
-			const file = path.join(dir, `${story.id}.png`);
-			await writeFile(file, shot);
-
-			// The band goes on the shot itself so a single screenshot says what it
-			// is, and its height is recorded so a diff can take it back off.
-			let caption = 0;
-			if (captioning) {
-				const temporary = path.join(
-					os.tmpdir(),
-					`story-shots-caption-${process.pid}.png`,
-				);
-				caption = stamp({
-					lines: [
-						`${story.title}/${story.name}`,
-						[story.id, theme ?? 'default', stable ? '' : '(busy)']
-							.filter(Boolean)
-							.join('  '),
-						configLine,
-					].filter(Boolean),
-					from: file,
-					to: temporary,
-					theme: theme ?? 'dark',
-				});
-				await rename(temporary, file);
-			}
-
-			shots.push({
-				file: path.posix.join(
-					opts.flat ? '' : (theme ?? 'default'),
-					`${story.id}.png`,
-				),
-				id: story.id,
-				title: story.title,
-				name: story.name,
-				theme: theme ?? 'default',
-				status: stable ? 'ok' : 'busy',
-				caption,
-			});
-			console.log(
-				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
-					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
-				}`,
-			);
-		} catch (error) {
-			failures.push(`${theme ?? 'default'}/${story.id}`);
-			console.log(`  FAIL ${story.id}: ${error.message.split('\n')[0]}`);
-		} finally {
-			await context.close();
-		}
-	}
-}
-
-await browser.close();
-
-// The diff script captions its output from this, so the run's own settings sit
-// next to the shots they produced rather than only in the shell history.
-await writeFile(
-	path.join(outDir, 'shots.json'),
-	`${JSON.stringify({ config: runConfig, shots }, null, '\t')}\n`,
-);
-
-if (failures.length) {
-	console.error(`\n${failures.length} failed: ${failures.join(', ')}`);
-	process.exit(1);
-}

frontend/src/AppRoutes/Private.tsx

@@ -169,12 +169,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	// Check for workspace blocked (trial expired)
 	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
 		const isRouteEnabledForWorkspaceBlockedState =
-			pathname === ROUTES.SETTINGS ||
-			pathname === ROUTES.BILLING ||
-			(isAdmin &&
-				(pathname === ROUTES.ORG_SETTINGS ||
-					pathname === ROUTES.MEMBERS_SETTINGS ||
-					pathname === ROUTES.MY_SETTINGS));
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				pathname === ROUTES.MY_SETTINGS);
 
 		if (
 			pathname !== ROUTES.WORKSPACE_LOCKED &&

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

@@ -739,7 +739,7 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.MY_SETTINGS);
 		});
 
-		it('should allow VIEWER to access /settings when workspace is blocked', () => {
+		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -752,10 +752,10 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
-		it('should allow VIEWER to access /settings/billing when workspace is blocked', () => {
+		it('should redirect VIEWER to workspace locked when trying to access billing', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.BILLING,
 				appContext: {
@@ -768,7 +768,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.BILLING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should redirect VIEWER to workspace locked when trying to access org-settings', async () => {
@@ -819,7 +819,7 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
-		it('should allow EDITOR to access /settings when workspace is blocked', () => {
+		it('should redirect EDITOR to workspace locked when trying to access settings', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -832,7 +832,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect when already on workspace locked page', () => {
@@ -1558,18 +1558,6 @@ describe('PrivateRoute', () => {
 			keyof typeof routeWithInitialAuthZSupport,
 			AuthzRouteCase
 		> = {
-			ALL_DASHBOARD: { path: ROUTES.ALL_DASHBOARD, deniedRoles: DENIED_ROLES },
-			DASHBOARD: {
-				path: ROUTES.DASHBOARD.replace(':dashboardId', 'dashboard-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
-			DASHBOARD_PANEL_EDITOR: {
-				path: ROUTES.DASHBOARD_PANEL_EDITOR.replace(
-					':dashboardId',
-					'dashboard-id-1',
-				).replace(':panelId', 'panel-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
 			// Everything under /settings resolves to the non-exact SETTINGS route
 			SETTINGS: { path: ROUTES.SETTINGS, deniedRoles: DENIED_ROLES },
 			MY_SETTINGS: { path: ROUTES.MY_SETTINGS, deniedRoles: DENIED_ROLES },
@@ -1638,7 +1626,6 @@ describe('PrivateRoute', () => {
 				path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
 				deniedRoles: DENIED_ROLES,
 			},
-			BILLING: { path: ROUTES.BILLING, deniedRoles: DENIED_ROLES },
 		};
 
 		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(

frontend/src/AppRoutes/index.tsx

@@ -1,12 +1,11 @@
-import { ReactNode, Suspense, useCallback, useEffect, useState } from 'react';
+import { Suspense, useCallback, useEffect, useState } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
-import AppPageProviders from 'app/AppPageProviders';
-import AppShell from 'app/AppShell';
 import AppLoading from 'components/AppLoading/AppLoading';
 import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
@@ -18,15 +17,22 @@ import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
+import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useIsDarkMode, useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { NotificationProvider } from 'hooks/useNotifications';
+import { ResourceProvider } from 'hooks/useResourceAttribute';
 import { StatusCodes } from 'http-status-codes';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
+import { CmdKProvider } from 'providers/cmdKProvider';
+import { ErrorModalProvider } from 'providers/ErrorModalProvider';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
 
@@ -38,17 +44,8 @@ import defaultRoutes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
-const appRouter = (children: ReactNode): ReactNode => (
-	<Router history={history}>
-		<CompatRouter>{children}</CompatRouter>
-	</Router>
-);
-
-const appLayout = (children: ReactNode): ReactNode => (
-	<AppLayout>{children}</AppLayout>
-);
-
 function App(): JSX.Element {
+	const themeConfig = useThemeConfig();
 	const {
 		user,
 		isFetchingUser,
@@ -454,36 +451,48 @@ function App(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<AppShell
-				router={appRouter}
-				overlays={
-					isLoggedInState && (
-						<>
-							<CmdKPalette userRole={user.role} />
-							<ShiftHoldOverlayController userRole={user.role} />
-						</>
-					)
-				}
-			>
-				<PrivateRoute>
-					<AppPageProviders layout={appLayout}>
-						<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-							<Switch>
-								{routes.map(({ path, component, exact }) => (
-									<Route
-										key={`${path}`}
-										exact={exact}
-										path={path}
-										component={component}
-									/>
-								))}
-								<Route exact path="/" component={Home} />
-								<Route path="*" component={NotFound} />
-							</Switch>
-						</Suspense>
-					</AppPageProviders>
-				</PrivateRoute>
-			</AppShell>
+			<ConfigProvider theme={themeConfig}>
+				<Router history={history}>
+					<CompatRouter>
+						<CmdKProvider>
+							<NotificationProvider>
+								<ErrorModalProvider>
+									{isLoggedInState && <CmdKPalette userRole={user.role} />}
+									{isLoggedInState && (
+										<ShiftHoldOverlayController userRole={user.role} />
+									)}
+									<PrivateRoute>
+										<ResourceProvider>
+											<QueryBuilderProvider>
+												<KeyboardHotkeysProvider>
+													<AppLayout>
+														<PreferenceContextProvider>
+															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																<Switch>
+																	{routes.map(({ path, component, exact }) => (
+																		<Route
+																			key={`${path}`}
+																			exact={exact}
+																			path={path}
+																			component={component}
+																		/>
+																	))}
+																	<Route exact path="/" component={Home} />
+																	<Route path="*" component={NotFound} />
+																</Switch>
+															</Suspense>
+														</PreferenceContextProvider>
+													</AppLayout>
+												</KeyboardHotkeysProvider>
+											</QueryBuilderProvider>
+										</ResourceProvider>
+									</PrivateRoute>
+								</ErrorModalProvider>
+							</NotificationProvider>
+						</CmdKProvider>
+					</CompatRouter>
+				</Router>
+			</ConfigProvider>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/api/billing/getUsage.ts

@@ -0,0 +1,59 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+export interface DayBreakdownEntry {
+	timestamp: number;
+	total: number;
+	quantity: number;
+	count: number;
+	size: number;
+}
+
+export interface TierEntry {
+	quantity: number;
+	unitPrice: number;
+	tierCost: number;
+}
+
+export interface BreakdownEntry {
+	type: string;
+	unit: string;
+	dayWiseBreakdown: {
+		breakdown: DayBreakdownEntry[];
+	};
+	tiers?: TierEntry[];
+}
+
+export interface UsageResponsePayloadProps {
+	billingPeriodStart: number;
+	billingPeriodEnd: number;
+	details: {
+		total: number;
+		baseFee: number;
+		breakdown: BreakdownEntry[];
+		billTotal: number;
+	};
+	discount: number;
+	subscriptionStatus?: string;
+}
+
+const getUsage = async (
+	licenseKey: string,
+): Promise<SuccessResponse<UsageResponsePayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`/billing?licenseKey=${licenseKey}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getUsage;

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

@@ -19,10 +19,8 @@ import type {
 
 import type {
 	AlertmanagertypesPostableChannelDTO,
-	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
 	CreateChannel201,
-	CreateNotificationChannel201,
 	DeleteChannelByIDPathParameters,
 	GetChannelByID200,
 	GetChannelByIDPathParameters,
@@ -649,87 +647,3 @@ export const useTestChannelDeprecated = <
 > => {
 	return useMutation(getTestChannelDeprecatedMutationOptions(options));
 };
-/**
- * This endpoint creates a notification channel
- * @summary Create notification channel
- */
-export const createNotificationChannel = (
-	alertmanagertypesPostableNotificationChannelDTO?: BodyType<AlertmanagertypesPostableNotificationChannelDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateNotificationChannel201>({
-		url: `/api/v2/notification_channels`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableNotificationChannelDTO,
-		signal,
-	});
-};
-
-export const getCreateNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-	TContext
-> => {
-	const mutationKey = ['createNotificationChannel'];
-	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 createNotificationChannel>>,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createNotificationChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createNotificationChannel>>
->;
-export type CreateNotificationChannelMutationBody =
-	| BodyType<AlertmanagertypesPostableNotificationChannelDTO>
-	| undefined;
-export type CreateNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create notification channel
- */
-export const useCreateNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-	TContext
-> => {
-	return useMutation(getCreateNotificationChannelMutationOptions(options));
-};

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

@@ -37,476 +37,6 @@ export interface AlertmanagertypesChannelDTO {
 	updatedAt?: string;
 }
 
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind {
-	slack = 'slack',
-}
-export interface AlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiUrl: string;
-	/**
-	 * @type string
-	 */
-	channel?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @enum slack
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind;
-	spec: AlertmanagertypesChannelSlackConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
-	email = 'email',
-}
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelEmailConfigDTO {
-	/**
-	 * @type object
-	 */
-	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
-	/**
-	 * @type string
-	 */
-	html?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	to: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO {
-	/**
-	 * @enum email
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind;
-	spec: AlertmanagertypesChannelEmailConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind {
-	webhook = 'webhook',
-}
-export interface AlertmanagertypesChannelWebhookConfigDTO {
-	/**
-	 * @type string
-	 */
-	bearerToken?: string;
-	/**
-	 * @type string
-	 */
-	password?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	url: string;
-	/**
-	 * @type string
-	 */
-	username?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTO {
-	/**
-	 * @enum webhook
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind;
-	spec: AlertmanagertypesChannelWebhookConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
-	pagerduty = 'pagerduty',
-}
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelPagerdutyConfigDTO {
-	/**
-	 * @type string
-	 */
-	class?: string;
-	/**
-	 * @type string
-	 */
-	client?: string;
-	/**
-	 * @type string
-	 */
-	clientUrl?: string;
-	/**
-	 * @type string
-	 */
-	component?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
-	/**
-	 * @type string
-	 */
-	group?: string;
-	/**
-	 * @type string
-	 */
-	routingKey: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	severity?: string;
-	/**
-	 * @type string
-	 */
-	source?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTO {
-	/**
-	 * @enum pagerduty
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind;
-	spec: AlertmanagertypesChannelPagerdutyConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
-	opsgenie = 'opsgenie',
-}
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelOpsgenieConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiKey: string;
-	/**
-	 * @type string
-	 */
-	apiUrl?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
-	/**
-	 * @type string
-	 */
-	message?: string;
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	source?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTO {
-	/**
-	 * @enum opsgenie
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind;
-	spec: AlertmanagertypesChannelOpsgenieConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind {
-	msteams = 'msteams',
-}
-export interface AlertmanagertypesChannelMSTeamsConfigDTO {
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	webhookUrl: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTO {
-	/**
-	 * @enum msteams
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind;
-	spec: AlertmanagertypesChannelMSTeamsConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind {
-	googlechat = 'googlechat',
-}
-export interface AlertmanagertypesChannelGoogleChatConfigDTO {
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	webhookUrl: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO {
-	/**
-	 * @enum googlechat
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind;
-	spec: AlertmanagertypesChannelGoogleChatConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
-	jira = 'jira',
-}
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
-	[key: string]: unknown;
-};
-
-export interface AlertmanagertypesChannelJiraConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiToken: string;
-	/**
-	 * @type object
-	 */
-	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	issueType: string;
-	/**
-	 * @type array
-	 */
-	labels?: string[];
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type string
-	 */
-	project: string;
-	/**
-	 * @type string
-	 */
-	reopenDuration?: string;
-	/**
-	 * @type string
-	 */
-	reopenTransition?: string;
-	/**
-	 * @type string
-	 */
-	resolveTransition?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	site: string;
-	/**
-	 * @type string
-	 */
-	summary?: string;
-	/**
-	 * @type string
-	 */
-	wontFixResolution?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO {
-	/**
-	 * @enum jira
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind;
-	spec: AlertmanagertypesChannelJiraConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind {
-	jsmops = 'jsmops',
-}
-export interface AlertmanagertypesChannelJSMOpsConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiKey: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	message?: string;
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	tags?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO {
-	/**
-	 * @enum jsmops
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind;
-	spec: AlertmanagertypesChannelJSMOpsConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
-	incidentio = 'incidentio',
-}
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelIncidentIOConfigDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	token: string;
-	/**
-	 * @type string
-	 */
-	url: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO {
-	/**
-	 * @enum incidentio
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind;
-	spec: AlertmanagertypesChannelIncidentIOConfigDTO;
-}
-
-export type AlertmanagertypesChannelConfigDTO =
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;
-
-export enum AlertmanagertypesChannelKindDTO {
-	slack = 'slack',
-	email = 'email',
-	webhook = 'webhook',
-	pagerduty = 'pagerduty',
-	opsgenie = 'opsgenie',
-	msteams = 'msteams',
-	googlechat = 'googlechat',
-	jira = 'jira',
-	jsmops = 'jsmops',
-	incidentio = 'incidentio',
-}
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -558,32 +88,6 @@ export enum AlertmanagertypesExpressionKindDTO {
 	rule = 'rule',
 	policy = 'policy',
 }
-export interface AlertmanagertypesGettableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
 export interface AlertmanagertypesGettableRoutePolicyDTO {
 	/**
 	 * @type array,null
@@ -2244,22 +1748,6 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	wechat_configs?: ConfigWechatConfigDTO[];
 };
 
-export interface AlertmanagertypesPostableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type boolean
-	 */
-	generateName?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	/**
 	 * @type array,null
@@ -13162,14 +12650,6 @@ export type GetMetricsTreemap200 = {
 	status: string;
 };
 
-export type CreateNotificationChannel201 = {
-	data: AlertmanagertypesGettableNotificationChannelDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/quickFilters/getCustomFilters';
+
+const getCustomFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	const { signal } = props;
+	try {
+		const response = await axios.get(`/orgs/me/filters/${signal}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getCustomFilters;

frontend/src/api/quickFilters/updateCustomFilters.ts

@@ -0,0 +1,13 @@
+import axios from 'api';
+import { AxiosError } from 'axios';
+import { SuccessResponse } from 'types/api';
+import { UpdateCustomFiltersProps } from 'types/api/quickFilters/updateCustomFilters';
+
+const updateCustomFiltersAPI = async (
+	props: UpdateCustomFiltersProps,
+): Promise<SuccessResponse<void> | AxiosError> =>
+	axios.put(`/orgs/me/filters`, {
+		...props.data,
+	});
+
+export default updateCustomFiltersAPI;

frontend/src/api/v1/checkout/create.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	CheckoutRequestPayloadProps,
+	CheckoutSuccessPayloadProps,
+	PayloadProps,
+} from 'types/api/billing/checkout';
+
+const updateCreditCardApi = async (
+	props: CheckoutRequestPayloadProps,
+): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/checkout', {
+			url: props.url,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default updateCreditCardApi;

frontend/src/api/v1/portal/create.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	CheckoutRequestPayloadProps,
+	CheckoutSuccessPayloadProps,
+	PayloadProps,
+} from 'types/api/billing/checkout';
+
+const manageCreditCardApi = async (
+	props: CheckoutRequestPayloadProps,
+): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/portal', {
+			url: props.url,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default manageCreditCardApi;

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

@@ -2,10 +2,8 @@ import { cloneDeep, isEmpty } from 'lodash-es';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
 import {
-	BuilderQuery,
 	DistributionData,
 	MetricRangePayloadV5,
-	QueryEnvelope,
 	QueryRangeRequestV5,
 	RawData,
 	ScalarData,
@@ -13,11 +11,6 @@ import {
 } from 'types/api/v5/queryRange';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-const isBuilderQueryEnvelope = (
-	envelope: QueryEnvelope,
-): envelope is QueryEnvelope & { spec: BuilderQuery } =>
-	envelope.type === 'builder_query' || envelope.type === 'builder_ai_query';
-
 function getColName(
 	col: ScalarData['columns'][number],
 	legendMap: Record<string, string>,
@@ -416,19 +409,21 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries?.filter(isBuilderQueryEnvelope).reduce(
-			(acc, query) => {
-				if (
-					isBuilderQueryEnvelope(query) &&
-					'aggregations' in query.spec &&
-					query.spec.name
-				) {
-					acc[query.spec.name] = query.spec.aggregations;
-				}
-				return acc;
-			},
-			{} as Record<string, any>,
-		) || {};
+		params?.compositeQuery?.queries
+			?.filter((query) => query.type === 'builder_query')
+			.reduce(
+				(acc, query) => {
+					if (
+						query.type === 'builder_query' &&
+						'aggregations' in query.spec &&
+						query.spec.name
+					) {
+						acc[query.spec.name] = query.spec.aggregations;
+					}
+					return acc;
+				},
+				{} as Record<string, any>,
+			) || {};
 
 	// clickhouse_sql queries have no aggregation metadata; their value columns
 	// are named/keyed by the real SQL alias the response carries (see getColId).

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

@@ -14,7 +14,6 @@ import {
 	QueryBuilderFormula as V5QueryBuilderFormula,
 	QueryEnvelope,
 	QueryRangePayloadV5,
-	RequestType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -936,41 +935,3 @@ describe('convertBuilderQueriesToV5 having normalization', () => {
 		});
 	});
 });
-
-describe('convertBuilderQueriesToV5 builder query type', () => {
-	const buildEnvelope = (
-		builderQueryType: IBuilderQuery['builderQueryType'],
-		requestType: RequestType,
-	): QueryEnvelope => {
-		const [envelope] = convertBuilderQueriesToV5(
-			{
-				A: {
-					dataSource: DataSource.TRACES,
-					queryName: 'A',
-					builderQueryType,
-				} as unknown as IBuilderQuery,
-			},
-			requestType,
-		);
-		return envelope;
-	};
-
-	it.each<[RequestType]>([
-		['trace'],
-		['raw'],
-		['time_series'],
-		['scalar'],
-		['distribution'],
-	])('sends builder_ai_query for the %s request type', (requestType) => {
-		expect(buildEnvelope('builder_ai_query', requestType).type).toBe(
-			'builder_ai_query',
-		);
-	});
-
-	it.each<[string, IBuilderQuery['builderQueryType']]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('sends builder_query for %s', (_label, builderQueryType) => {
-		expect(buildEnvelope(builderQueryType, 'trace').type).toBe('builder_query');
-	});
-});

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

@@ -365,7 +365,7 @@ export function convertBuilderQueriesToV5(
 			}
 
 			return {
-				type: queryData.builderQueryType ?? 'builder_query',
+				type: 'builder_query' as QueryType,
 				spec,
 			};
 		},

frontend/src/app/AppPageProviders.tsx

@@ -1,61 +0,0 @@
-import { ReactNode } from 'react';
-import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { ResourceProvider } from 'hooks/useResourceAttribute';
-import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import {
-	QueryBuilderContext,
-	QueryBuilderProvider,
-} from 'providers/QueryBuilder';
-import { QueryBuilderContextType } from 'types/common/queryBuilder';
-
-import { AppLayer } from './types';
-
-export interface AppPageProvidersProps {
-	children: ReactNode;
-	layout: AppLayer;
-	/** When set, replaces `QueryBuilderProvider` with a fixed context value. */
-	queryBuilder?: Partial<QueryBuilderContextType>;
-}
-
-/**
- * The layers a routed page renders in, below `PrivateRoute` and inside the app
- * chrome. A new provider belongs here when only pages need it, or when it has to
- * sit inside `AppLayout`.
- *
- * One ordering constraint: `AppLayout` calls `useKeyboardHotkeys`, so the
- * hotkeys provider has to stay above the layout. The rest of the order is the
- * one `AppRoutes` has, kept as-is so a story and a route render the same tree.
- */
-function AppPageProviders({
-	children,
-	layout,
-	queryBuilder,
-}: AppPageProvidersProps): JSX.Element {
-	const hotkeys = (
-		<KeyboardHotkeysProvider>
-			<>
-				{layout(<PreferenceContextProvider>{children}</PreferenceContextProvider>)}
-			</>
-		</KeyboardHotkeysProvider>
-	);
-
-	return (
-		<ResourceProvider>
-			{queryBuilder ? (
-				<QueryBuilderContext.Provider
-					value={queryBuilder as QueryBuilderContextType}
-				>
-					{hotkeys}
-				</QueryBuilderContext.Provider>
-			) : (
-				<QueryBuilderProvider>{hotkeys}</QueryBuilderProvider>
-			)}
-		</ResourceProvider>
-	);
-}
-
-AppPageProviders.defaultProps = {
-	queryBuilder: undefined,
-};
-
-export default AppPageProviders;

frontend/src/app/AppProviders.tsx

@@ -1,56 +0,0 @@
-import { ReactNode } from 'react';
-import { HelmetProvider } from 'react-helmet-async';
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-// eslint-disable-next-line no-restricted-imports
-import { Store } from 'redux';
-import { GlobalTimeStoreAdapter } from 'components/GlobalTimeStoreAdapter/GlobalTimeStoreAdapter';
-import { ThemeProvider } from 'hooks/useDarkMode';
-import TimezoneProvider from 'providers/Timezone';
-
-import { AppLayer } from './types';
-
-export interface AppProvidersProps {
-	children: ReactNode;
-	store: Store;
-	queryClient: QueryClient;
-	appContext: AppLayer;
-	searchParams: AppLayer;
-}
-
-/**
- * The layers that exist before the app knows anything. Mounted for the whole
- * session, including while `AppProvider` is still fetching the user and the boot
- * spinner is on screen, and never remounted after that.
- *
- * A new provider belongs here only if it holds process-wide state that does not
- * depend on the user, the license or the route. One that fetches on mount would
- * fire unauthenticated from here; put it in `AppShell` or lower.
- */
-function AppProviders({
-	children,
-	store,
-	queryClient,
-	appContext,
-	searchParams,
-}: AppProvidersProps): JSX.Element {
-	return (
-		<HelmetProvider>
-			{searchParams(
-				<ThemeProvider>
-					<TimezoneProvider>
-						<QueryClientProvider client={queryClient}>
-							<Provider store={store}>
-								<GlobalTimeStoreAdapter />
-								{appContext(children)}
-							</Provider>
-						</QueryClientProvider>
-					</TimezoneProvider>
-				</ThemeProvider>,
-			)}
-		</HelmetProvider>
-	);
-}
-
-export default AppProviders;

frontend/src/app/AppShell.tsx

@@ -1,52 +0,0 @@
-import { ReactNode } from 'react';
-import { ConfigProvider } from 'antd';
-import { useThemeConfig } from 'hooks/useDarkMode';
-import { NotificationProvider } from 'hooks/useNotifications';
-import { CmdKProvider } from 'providers/cmdKProvider';
-import { ErrorModalProvider } from 'providers/ErrorModalProvider';
-
-import { AppLayer } from './types';
-
-export interface AppShellProps {
-	children: ReactNode;
-	router: AppLayer;
-	/** Mounted beside the routed content: the command palette and its siblings. */
-	overlays?: ReactNode;
-}
-
-/**
- * The layers between a resolved session and a page. Mounted once the boot
- * fetches settle, above `PrivateRoute`, so it also covers the redirects and the
- * not-found route, and it survives every navigation.
- *
- * A new provider belongs here if it needs the router or the user and has to
- * outlive the page: a global overlay, a shortcut host, anything one route opens
- * and the next one keeps.
- *
- * `ConfigProvider` reads `useThemeConfig`, which needs `ThemeProvider` above it,
- * so the antd theme is settled here instead of by the caller.
- */
-function AppShell({ children, router, overlays }: AppShellProps): JSX.Element {
-	const themeConfig = useThemeConfig();
-
-	return (
-		<ConfigProvider theme={themeConfig}>
-			{router(
-				<CmdKProvider>
-					<NotificationProvider>
-						<ErrorModalProvider>
-							{overlays}
-							{children}
-						</ErrorModalProvider>
-					</NotificationProvider>
-				</CmdKProvider>,
-			)}
-		</ConfigProvider>
-	);
-}
-
-AppShell.defaultProps = {
-	overlays: undefined,
-};
-
-export default AppShell;

frontend/src/app/types.ts

@@ -1,3 +0,0 @@
-import { ReactNode } from 'react';
-
-export type AppLayer = (children: ReactNode) => ReactNode;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -4,12 +4,11 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import { SuccessResponseV2 } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -19,7 +18,9 @@ export default function ChatSupportGateway(): JSX.Element {
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -37,7 +38,7 @@ export default function ChatSupportGateway(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -93,23 +94,18 @@ export default function ChatSupportGateway(): JSX.Element {
 					>
 						Cancel
 					</Button>,
-					<AuthZTooltip
+					<Button
 						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
 					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
+						Add Credit Card
+					</Button>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -4,17 +4,16 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
 import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import { SuccessResponseV2 } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -119,7 +118,9 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -137,7 +138,7 @@ function LaunchChatSupport({
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -192,23 +193,18 @@ function LaunchChatSupport({
 					>
 						Cancel
 					</Button>,
-					<AuthZTooltip
+					<Button
 						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
 					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
+						Add Credit Card
+					</Button>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

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

@@ -16,6 +16,8 @@ import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
@@ -52,12 +54,6 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-	SuggestedFieldKey,
-	SuggestedFieldKeysByName,
-} from './fieldSuggestions';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -265,8 +261,10 @@ function QuerySearch({
 	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
-	const generateOptions = (keys: SuggestedFieldKeysByName): any[] =>
-		Object.values(keys).flatMap((items: SuggestedFieldKey[]) =>
+	const generateOptions = (keys: {
+		[key: string]: QueryKeyDataSuggestionsProps[];
+	}): any[] =>
+		Object.values(keys).flatMap((items: QueryKeyDataSuggestionsProps[]) =>
 			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -319,9 +317,8 @@ function QuerySearch({
 
 			lastFetchedKeyRef.current = searchText || '';
 
-			const response = await fetchFieldKeysForQuery({
-				builderQueryType: queryData.builderQueryType,
-				dataSource,
+			const response = await getKeySuggestions({
+				signal: dataSource,
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
@@ -363,7 +360,6 @@ function QuerySearch({
 			hardcodedAttributeKeys,
 			showFilterSuggestionsWithoutMetric,
 			metricNamespace,
-			queryData.builderQueryType,
 		],
 	);
 
@@ -497,11 +493,10 @@ function QuerySearch({
 			try {
 				const values = valueSuggestionsOverride
 					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await fetchFieldValuesForQuery({
-							builderQueryType: queryData.builderQueryType,
-							dataSource,
+					: await getValueSuggestions({
 							key,
 							searchText: sanitizedSearchText,
+							signal: dataSource,
 							signalSource: signalSource as 'meter' | '',
 							metricName: debouncedMetricName ?? undefined,
 						}).then((response) => {
@@ -606,7 +601,6 @@ function QuerySearch({
 			signalSource,
 			toggleSuggestions,
 			valueSuggestionsOverride,
-			queryData.builderQueryType,
 		],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/fieldSuggestions.test.ts

@@ -1,215 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-} from '../fieldSuggestions';
-
-jest.mock('api/generated/services/ai-observability', () => ({
-	getAIObservabilityFieldsKeys: jest.fn(),
-	getAIObservabilityFieldsValues: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn(),
-}));
-
-const mockedAIKeys = getAIObservabilityFieldsKeys as jest.MockedFunction<
-	typeof getAIObservabilityFieldsKeys
->;
-const mockedGenericKeys = getKeySuggestions as jest.MockedFunction<
-	typeof getKeySuggestions
->;
-const mockedAIValues = getAIObservabilityFieldsValues as jest.MockedFunction<
-	typeof getAIObservabilityFieldsValues
->;
-const mockedGenericValues = getValueSuggestions as jest.MockedFunction<
-	typeof getValueSuggestions
->;
-
-const aiValuesResponse = (
-	values: { stringValues?: string[]; numberValues?: number[] } | null,
-	complete = true,
-): Awaited<ReturnType<typeof getAIObservabilityFieldsValues>> =>
-	({
-		status: 'success',
-		data: { complete, values },
-	}) as Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>;
-
-describe('fetchFieldKeysForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: {
-				complete: true,
-				keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-			},
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const keys = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: 'llm',
-		});
-
-		expect(mockedAIKeys).toHaveBeenCalledWith({ searchText: 'llm' });
-		expect(mockedGenericKeys).not.toHaveBeenCalled();
-		expect(keys.data.data).toStrictEqual({
-			complete: true,
-			keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		mockedGenericKeys.mockResolvedValue({
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as Awaited<ReturnType<typeof getKeySuggestions>>);
-
-		await fetchFieldKeysForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			searchText: 'svc',
-		});
-
-		expect(mockedAIKeys).not.toHaveBeenCalled();
-		expect(mockedGenericKeys).toHaveBeenCalledWith(
-			expect.objectContaining({ signal: DataSource.TRACES, searchText: 'svc' }),
-		);
-	});
-
-	it('normalizes a null ai_observability keys payload to an empty map', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: { complete: false, keys: null },
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const response = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: '',
-		});
-
-		expect(response.data.data).toStrictEqual({ complete: false, keys: {} });
-	});
-
-	it('passes the generic response through untouched', async () => {
-		const genericResponse = {
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as unknown as Awaited<ReturnType<typeof getKeySuggestions>>;
-		mockedGenericKeys.mockResolvedValue(genericResponse);
-
-		await expect(
-			fetchFieldKeysForQuery({
-				builderQueryType: 'builder_query',
-				dataSource: DataSource.TRACES,
-				searchText: '',
-			}),
-		).resolves.toBe(genericResponse);
-	});
-});
-
-describe('fetchFieldValuesForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIValues.mockResolvedValue(
-			aiValuesResponse({ stringValues: ['gpt-4o'], numberValues: [] }),
-		);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'gen_ai.request.model',
-			searchText: 'gpt',
-		});
-
-		expect(mockedGenericValues).not.toHaveBeenCalled();
-		expect(response).toStrictEqual({
-			data: {
-				data: {
-					complete: true,
-					values: { stringValues: ['gpt-4o'], numberValues: [] },
-				},
-			},
-		});
-	});
-
-	it('forwards the key as the name the endpoint expects', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse({}));
-
-		await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'total_tokens',
-			searchText: '',
-		});
-
-		expect(mockedAIValues).toHaveBeenCalledWith({
-			name: 'total_tokens',
-			searchText: '',
-		});
-	});
-
-	it('wraps the ai_observability payload in the envelope the call site unwraps', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse(null, false));
-
-		await expect(
-			fetchFieldValuesForQuery({
-				builderQueryType: 'builder_ai_query',
-				dataSource: DataSource.TRACES,
-				key: 'llm_call_count',
-				searchText: '',
-			}),
-		).resolves.toStrictEqual({
-			data: { data: { complete: false, values: null } },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		const genericResponse = {
-			data: {
-				data: { complete: false, values: { stringValues: ['frontend'] } },
-			},
-		} as unknown as Awaited<ReturnType<typeof getValueSuggestions>>;
-		mockedGenericValues.mockResolvedValue(genericResponse);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			key: 'service.name',
-			searchText: 'front',
-		});
-
-		expect(mockedAIValues).not.toHaveBeenCalled();
-		expect(mockedGenericValues).toHaveBeenCalledWith(
-			expect.objectContaining({
-				signal: DataSource.TRACES,
-				key: 'service.name',
-				searchText: 'front',
-			}),
-		);
-		expect(response).toBe(genericResponse);
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/fieldSuggestions.ts

@@ -1,111 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export interface SuggestedFieldKey {
-	name: string;
-	fieldContext?: string;
-	fieldDataType?: string;
-}
-
-export type SuggestedFieldKeysByName = Record<string, SuggestedFieldKey[]>;
-
-export interface SuggestedFieldKeysPayload {
-	complete: boolean;
-	keys: SuggestedFieldKeysByName;
-}
-
-export interface SuggestedFieldKeysResponse {
-	data: { data?: SuggestedFieldKeysPayload };
-}
-
-export interface SuggestedFieldValuesPayload {
-	complete?: boolean;
-	values?: {
-		stringValues?: string[] | null;
-		numberValues?: number[] | null;
-	} | null;
-}
-
-export interface SuggestedFieldValuesResponse {
-	data: { data?: SuggestedFieldValuesPayload };
-}
-
-interface FetchFieldKeysParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-	metricNamespace?: string;
-}
-
-interface FetchFieldValuesParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	key: string;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-}
-
-export const fetchFieldKeysForQuery = async ({
-	builderQueryType,
-	dataSource,
-	searchText,
-	metricName,
-	signalSource,
-	metricNamespace,
-}: FetchFieldKeysParams): Promise<SuggestedFieldKeysResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsKeys({ searchText });
-
-		return {
-			data: {
-				data: response.data
-					? { complete: response.data.complete, keys: response.data.keys ?? {} }
-					: undefined,
-			},
-		};
-	}
-
-	return getKeySuggestions({
-		signal: dataSource,
-		searchText,
-		metricName,
-		signalSource,
-		metricNamespace,
-	});
-};
-
-export const fetchFieldValuesForQuery = async ({
-	builderQueryType,
-	dataSource,
-	key,
-	searchText,
-	metricName,
-	signalSource,
-}: FetchFieldValuesParams): Promise<SuggestedFieldValuesResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsValues({
-			name: key,
-			searchText,
-		});
-
-		return { data: { data: response.data } };
-	}
-
-	// getValueSuggestions' declared response type does not match what the endpoint returns.
-	return getValueSuggestions({
-		signal: dataSource,
-		key,
-		searchText,
-		signalSource,
-		metricName,
-	}) as unknown as Promise<SuggestedFieldValuesResponse>;
-};

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

@@ -54,7 +54,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
-	const { dataSource, builderQueryType } = query;
+	const { dataSource } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -94,9 +94,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 	);
 
 	const showSpanScopeSelector = useMemo(
-		() =>
-			dataSource === DataSource.TRACES && builderQueryType !== 'builder_ai_query',
-		[dataSource, builderQueryType],
+		() => dataSource === DataSource.TRACES,
+		[dataSource],
 	);
 
 	const showInlineQuerySearch = useMemo(() => {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.test.ts

@@ -11,10 +11,10 @@ import {
 
 import {
 	applyCheckboxToggle,
+	clearFilterFromQuery,
 	deriveCheckboxState,
 	getNotInOperator,
 } from './checkboxFilterQuery';
-import { clearFilterFromQuery } from '../shared/filterQuery';
 import { CheckedState } from '../../types';
 import { SectionType } from './v2/itemRules';
 
@@ -505,7 +505,7 @@ describe('clearFilterFromQuery', () => {
 
 		const result = clearFilterFromQuery({
 			currentQuery: query,
-			filterKey: KEY,
+			filter: { attributeKey: { key: KEY, type: 'tag' } } as never,
 			activeQueryIndex: 0,
 		});
 
@@ -523,35 +523,4 @@ describe('clearFilterFromQuery', () => {
 		expect(other.filters?.items).toHaveLength(1);
 		expect(other.filter?.expression).toBe(`${KEY} = 'a'`);
 	});
-
-	it('without an operators list, clears non-managed clauses too (duration >= / <=)', () => {
-		const query = {
-			builder: {
-				queryData: [
-					{
-						filters: {
-							items: [
-								toTagItem({ key: 'durationNano', op: '>=', value: 5000000 }, 0),
-								toTagItem({ key: 'durationNano', op: '<=', value: 9000000 }, 1),
-							],
-							op: 'AND',
-						},
-						filter: {
-							expression: `durationNano >= 5000000 AND durationNano <= 9000000 AND http.method = 'GET'`,
-						},
-					},
-				],
-			},
-		} as unknown as Query;
-
-		const result = clearFilterFromQuery({
-			currentQuery: query,
-			filterKey: 'durationNano',
-			activeQueryIndex: 0,
-		});
-
-		const active = result.builder.queryData[0];
-		expect(active.filters?.items).toStrictEqual([]);
-		expect(active.filter?.expression).toBe(`http.method = 'GET'`);
-	});
 });

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -23,12 +23,7 @@ export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
 // The operators this algebra emits, and so the only ones it may rewrite out of an
 // expression. A hand-written clause on the same key (CONTAINS, EXISTS, a range) is
 // none of its business and has to survive a toggle.
-export const MANAGED_OPERATORS = [
-	OPERATORS['='],
-	OPERATORS['!='],
-	'in',
-	'not in',
-];
+const MANAGED_OPERATORS = [OPERATORS['='], OPERATORS['!='], 'in', 'not in'];
 
 /**
  * Drops this filter's own clauses for `key` from `expression`, leaving every other
@@ -36,7 +31,7 @@ export const MANAGED_OPERATORS = [
  * prefixes, since `isKeyMatch` treats `service.name` and `resource.service.name` as
  * the same filter but expression rewrites match keys literally.
  */
-export function removeManagedClauses(expression: string, key: string): string {
+function removeManagedClauses(expression: string, key: string): string {
 	return removeKeysFromExpression(
 		expression,
 		getKeySpellings(key),
@@ -129,6 +124,49 @@ export function deriveCheckboxState({
 	return filterState;
 }
 
+/**
+ * Returns a new query with this filter's clauses for the attribute key removed from
+ * the active query, both from the structured filter items and the raw expression.
+ */
+export function clearFilterFromQuery({
+	currentQuery,
+	filter,
+	activeQueryIndex,
+}: {
+	currentQuery: Query;
+	filter: IQuickFiltersConfig;
+	activeQueryIndex: number;
+}): Query {
+	return {
+		...currentQuery,
+		builder: {
+			...currentQuery.builder,
+			queryData: currentQuery.builder.queryData.map((item, idx) => {
+				if (idx !== activeQueryIndex) {
+					return item;
+				}
+				return {
+					...item,
+					filter: {
+						expression: removeManagedClauses(
+							item.filter?.expression ?? '',
+							filter.attributeKey.key,
+						),
+					},
+					filters: {
+						...item.filters,
+						items:
+							item.filters?.items?.filter(
+								(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+							) || [],
+						op: item.filters?.op || 'AND',
+					},
+				};
+			}),
+		},
+	};
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function applyCheckboxToggle({
 	currentQuery,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -4,11 +4,13 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isEqual, isFunction } from 'lodash-es';
+import { isFunction } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { applyCheckboxToggle, MANAGED_OPERATORS } from './checkboxFilterQuery';
-import { clearFilterFromQuery } from '../shared/filterQuery';
+import {
+	applyCheckboxToggle,
+	clearFilterFromQuery,
+} from './checkboxFilterQuery';
 import { CheckedState } from '../../types';
 import { SectionType } from './v2/itemRules';
 
@@ -92,17 +94,7 @@ function useCheckboxFilterActions({
 	};
 
 	const onClear = (): void => {
-		const clearedQuery = clearFilterFromQuery({
-			currentQuery,
-			filterKey: filter.attributeKey.key,
-			activeQueryIndex,
-			operators: MANAGED_OPERATORS,
-		});
-		// Nothing to clear; no dispatch
-		if (isEqual(clearedQuery, currentQuery)) {
-			return;
-		}
-		dispatch(clearedQuery);
+		dispatch(clearFilterFromQuery({ currentQuery, filter, activeQueryIndex }));
 	};
 
 	return { onChange, onClear };

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -6,44 +6,6 @@
 	border-bottom: 1px solid var(--l1-border);
 }
 
-.sectionActions {
-	width: 0;
-	overflow: hidden;
-	opacity: 0;
-	transform: translateX(4px);
-	pointer-events: none;
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease,
-		width 0s linear 0.16s;
-}
-
-.checkboxFilter:hover .sectionActions,
-.sectionActions.sectionActionsPinned {
-	width: auto;
-	opacity: 1;
-	transform: translateX(0);
-	pointer-events: auto;
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease;
-}
-
-.sectionActionsPinned .sectionActionHoverOnly {
-	opacity: 0;
-	transform: translateX(4px);
-	pointer-events: none;
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease;
-}
-
-.checkboxFilter:hover .sectionActionsPinned .sectionActionHoverOnly {
-	opacity: 1;
-	transform: translateX(0);
-	pointer-events: auto;
-}
-
 .search {
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -34,7 +34,6 @@ export function mockFieldsValuesAPI(response: {
 	relatedValues?: (string | null)[];
 	stringValues?: (string | null)[];
 	numberValues?: (number | null)[];
-	boolValues?: (boolean | null)[];
 }): void {
 	server.use(
 		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
@@ -47,7 +46,6 @@ export function mockFieldsValuesAPI(response: {
 							relatedValues: response.relatedValues ?? [],
 							stringValues: response.stringValues ?? [],
 							numberValues: response.numberValues ?? [],
-							boolValues: response.boolValues ?? [],
 						},
 					},
 				}),
@@ -70,13 +68,6 @@ export function setupServer(): void {
 	afterAll(() => server.close());
 }
 
-// Components read currentQuery for the checkbox state and stagedQuery for the
-// values fetch; in the app both are set by the same URL sync, so tests pass one
-// query as both.
-export function buildQueryBuilderOverrides(query: unknown): never {
-	return { currentQuery: query, stagedQuery: query } as unknown as never;
-}
-
 export interface FilterItemConfig {
 	op: string;
 	value: string | string[];
@@ -108,16 +99,18 @@ export function renderWithFilter(
 		/>,
 		undefined,
 		{
-			queryBuilderOverrides: buildQueryBuilderOverrides({
-				builder: {
-					queryData: [
-						{
-							filters: { items, op: 'AND' },
-							filter: { expression: 'service.name = "api"' },
-						},
-					],
+			queryBuilderOverrides: {
+				currentQuery: {
+					builder: {
+						queryData: [
+							{
+								filters: { items, op: 'AND' },
+								filter: { expression: 'service.name = "api"' },
+							},
+						],
+					},
 				},
-			}),
+			} as never,
 		},
 	);
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
-import classNames from 'classnames';
 import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
 import {
@@ -45,14 +44,8 @@ export default function CheckboxFilterV2(
 	const { source, filter, onFilterChange, onQuickFilterChange, useFieldApis } =
 		props;
 	const [searchText, setSearchText] = useState<string>('');
-	const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 
-	const handleToggleSearch = (): void => {
-		setIsSearchOpen((prev) => !prev);
-		setSearchText('');
-	};
-
 	const { currentQuery } = useQueryBuilder();
 	const activeQueryIndex = useActiveQueryIndex(source);
 
@@ -81,7 +74,6 @@ export default function CheckboxFilterV2(
 		searchText,
 		existingQuery,
 		metricNamespace: useFieldApis.metricNamespace,
-		source,
 		startUnixMilli: useFieldApis.startUnixMilli,
 		endUnixMilli: useFieldApis.endUnixMilli,
 		enabled: isOpen,
@@ -161,7 +153,6 @@ export default function CheckboxFilterV2(
 		isSomeFilterPresentForCurrentAttribute,
 		isNotInOperator,
 		hasExistingQuery,
-		isRelatedValuesSupported: useFieldApis.existingQuery !== null,
 		visibleItemsCount,
 		relatedExclusions,
 	});
@@ -171,15 +162,12 @@ export default function CheckboxFilterV2(
 			<CheckboxFilterV2Header
 				title={filter.title}
 				isOpen={isOpen}
-				actionsClassName={classNames(styles.sectionActions, {
-					[styles.sectionActionsPinned]: isSearchOpen,
-				})}
-				resetActionClassName={
-					isSearchOpen ? styles.sectionActionHoverOnly : undefined
-				}
+				showClearAll={!!attributeValues.length}
 				onToggleOpen={onToggleOpen}
-				onToggleSearch={handleToggleSearch}
 				onClear={onClear}
+				isSomeFilterPresentForCurrentAttribute={
+					isSomeFilterPresentForCurrentAttribute
+				}
 			/>
 			{isOpen && isLoading && !hasLoadedOnce.current && (
 				<section>
@@ -188,26 +176,23 @@ export default function CheckboxFilterV2(
 			)}
 			{isOpen && (!isLoading || hasLoadedOnce.current) && (
 				<>
-					{isSearchOpen && (
-						<section className={styles.search}>
-							<Input
-								autoFocus
-								placeholder="Filter values"
-								onChange={(e): void => setSearchTextDebounced(e.target.value)}
-								disabled={isFilterDisabled}
-								data-testid="checkbox-filter-search"
-								suffix={
-									isFetching ? (
-										<LoaderCircle
-											size={14}
-											className={styles.searchSpinner}
-											data-testid="checkbox-filter-search-loading"
-										/>
-									) : null
-								}
-							/>
-						</section>
-					)}
+					<section className={styles.search}>
+						<Input
+							placeholder="Filter values"
+							onChange={(e): void => setSearchTextDebounced(e.target.value)}
+							disabled={isFilterDisabled}
+							data-testid="checkbox-filter-search"
+							suffix={
+								isFetching ? (
+									<LoaderCircle
+										size={14}
+										className={styles.searchSpinner}
+										data-testid="checkbox-filter-search-loading"
+									/>
+								) : null
+							}
+						/>
+					</section>
 
 					{totalCount > 0 && (
 						<section className={styles.values}>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.module.scss

@@ -3,20 +3,12 @@
 	align-items: center;
 	justify-content: space-between;
 	cursor: pointer;
-	gap: var(--spacing-2);
 }
 
 .leftAction {
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-3);
-	flex: 1 1 auto;
-	min-width: 0;
-
-	// The collapse chevron must keep its size; only the title absorbs the squeeze.
-	> svg {
-		flex-shrink: 0;
-	}
 }
 
 .title {
@@ -26,18 +18,16 @@
 	line-height: 18px;
 	letter-spacing: -0.07px;
 	text-transform: capitalize;
-	// Always ellipsize a long name; on hover the actions take width and it
-	// compresses further.
-	flex: 1 1 auto;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .rightAction {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-1);
-	flex-shrink: 0;
+	min-width: 48px;
+}
+
+.clearAll {
+	font-size: 12px;
+	color: var(--accent-primary);
+	cursor: pointer;
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,47 +1,25 @@
-import { useState } from 'react';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';
-
-import { SectionActionButton } from '../../shared/SectionActionButton/SectionActionButton';
-
-import classNames from 'classnames';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
 
 import styles from './CheckboxFilterV2Header.module.scss';
 
 interface CheckboxFilterHeaderProps {
 	title: string;
 	isOpen: boolean;
-	actionsClassName?: string;
-	resetActionClassName?: string;
+	showClearAll: boolean;
 	onToggleOpen: () => void;
-	onToggleSearch: () => void;
 	onClear: () => void;
+	isSomeFilterPresentForCurrentAttribute: boolean;
 }
 
 export function CheckboxFilterV2Header({
 	title,
 	isOpen,
-	actionsClassName,
-	resetActionClassName,
+	showClearAll,
 	onToggleOpen,
-	onToggleSearch,
 	onClear,
+	isSomeFilterPresentForCurrentAttribute,
 }: CheckboxFilterHeaderProps): JSX.Element {
-	const [isTitleTruncated, setIsTitleTruncated] = useState(false);
-
-	const measureTitle = (el: HTMLElement | null): void => {
-		if (el) {
-			setIsTitleTruncated(el.scrollWidth > el.clientWidth);
-		}
-	};
-
-	const titleText = (
-		<Typography.Text ref={measureTitle} className={styles.title}>
-			{title}
-		</Typography.Text>
-	);
-
 	return (
 		<section
 			role="button"
@@ -62,31 +40,23 @@ export function CheckboxFilterV2Header({
 				) : (
 					<ChevronRight size={13} cursor="pointer" />
 				)}
-				{isTitleTruncated ? (
-					<TooltipSimple title={title} delayDuration={400}>
-						{titleText}
-					</TooltipSimple>
-				) : (
-					titleText
+				<Typography.Text className={styles.title}>{title}</Typography.Text>
+			</section>
+			<section className={styles.rightAction}>
+				{isOpen && showClearAll && isSomeFilterPresentForCurrentAttribute && (
+					<Typography.Text
+						className={styles.clearAll}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							onClear();
+						}}
+						data-testid="checkbox-filter-clear-all"
+					>
+						Clear
+					</Typography.Text>
 				)}
 			</section>
-			{isOpen && (
-				<section className={classNames(styles.rightAction, actionsClassName)}>
-					<SectionActionButton
-						icon={<Undo2 size={14} />}
-						className={resetActionClassName}
-						tooltip="Reset"
-						onClick={onClear}
-						testId="checkbox-filter-clear-all"
-					/>
-					<SectionActionButton
-						icon={<Search size={14} />}
-						tooltip="Search"
-						onClick={onToggleSearch}
-						testId="checkbox-filter-search-toggle"
-					/>
-				</section>
-			)}
 		</section>
 	);
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.existingQuery.test.tsx

@@ -6,7 +6,6 @@ import { QuickFiltersSource } from '../../../../types';
 
 import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
-	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
 	setupServer,
@@ -58,16 +57,18 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'should.be.ignored = "yes"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'should.be.ignored = "yes"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -90,16 +91,18 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'should.be.ignored = "yes"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'should.be.ignored = "yes"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -121,25 +124,27 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'service.name', dataType: 'string', type: 'tag' },
-												op: '=',
-												value: 'from-v3-items',
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'from-v3-items',
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'v5.expression = "preferred"' },
 									},
-									filter: { expression: 'v5.expression = "preferred"' },
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -159,16 +164,18 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'only.v5 = "expression"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'only.v5 = "expression"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -190,24 +197,26 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'service.name', dataType: 'string', type: 'tag' },
-												op: '=',
-												value: 'api-service',
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'api-service',
+												},
+											],
+											op: 'AND',
+										},
 									},
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -227,29 +236,31 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'service.name', dataType: 'string', type: 'tag' },
-												op: '=',
-												value: 'api',
-											},
-											{
-												key: { key: 'env', dataType: 'string', type: 'tag' },
-												op: '=',
-												value: 'prod',
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'api',
+												},
+												{
+													key: { key: 'env', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'prod',
+												},
+											],
+											op: 'AND',
+										},
 									},
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -269,15 +280,17 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -7,7 +7,6 @@ import { QuickFiltersSource } from '../../../../types';
 
 import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
-	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
 	getFilterFromCall,
@@ -60,7 +59,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 			await screen.findByTestId('checkbox-value-row-production');
 			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
 
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -127,16 +125,18 @@ describe('CheckboxFilterV2 - interactions', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -144,7 +144,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 			// Related values now appear in "Related" section (no badge, uses divider instead)
 			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
 
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -194,7 +193,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -239,7 +237,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'xyz-no-match');
 
@@ -347,7 +344,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-pod-a-v1');
 
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'pod-a');
 
@@ -494,24 +490,26 @@ describe('CheckboxFilterV2 - interactions', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['production'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
 									},
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -520,7 +518,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
 		});
 
-		it('shows the reset action when expanded even with no active filter', async () => {
+		it('hides clear button when no filter applied for attribute', async () => {
 			mockFieldsValuesAPI({
 				stringValues: ['production'],
 			});
@@ -535,45 +533,9 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
-			// Reset is always available on an expanded section now (hover-gated via
-			// CSS), not conditional on an active filter.
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-		});
-
-		it('does not dispatch on clear when the key has no filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-					onFilterChange={onFilterChange}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: '' },
-								},
-							],
-						},
-					}),
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onFilterChange).not.toHaveBeenCalled();
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
 		});
 
 		it('calls onFilterChange when clear clicked', async () => {
@@ -593,24 +555,26 @@ describe('CheckboxFilterV2 - interactions', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['production'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
 									},
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -673,7 +637,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(filter?.value).toBe('valueA');
 		});
 
-		it('adds to NOT IN when unchecking a non-excluded (other) item', async () => {
+		it('converts NOT IN to IN when toggling unchecked (other) item', async () => {
 			const user = userEvent.setup();
 			const onFilterChange = jest.fn();
 
@@ -682,70 +646,18 @@ describe('CheckboxFilterV2 - interactions', () => {
 				stringValues: ['valueB'],
 			});
 
-			// valueB is not excluded, so under NOT IN [valueA] it is still included
-			// and renders checked. Unchecking it excludes it too → NOT IN [A, B].
+			// Clicking unchecked "Other" item with NOT IN filter should convert to IN [B]
 			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueA'] });
 
 			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
-			expect(rowB).toHaveAttribute('data-state', 'checked');
+			expect(rowB).toHaveAttribute('data-state', 'unchecked');
 
 			await user.click(within(rowB).getByRole('checkbox'));
 
 			expect(onFilterChange).toHaveBeenCalledTimes(1);
 			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
-		});
-
-		it('adds to NOT IN when unchecking a non-excluded item without related values', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				stringValues: ['valueA', 'valueB'],
-			});
-
-			// Without related values the display follows the clause: valueB is not
-			// excluded, so it renders checked; unchecking it excludes it too.
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-					onFilterChange={onFilterChange}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'not in',
-												value: ['valueA'],
-											},
-										],
-										op: 'AND',
-									},
-								},
-							],
-						},
-					}),
-				},
-			);
-
-			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
-			expect(rowB).toHaveAttribute('data-state', 'checked');
-
-			await user.click(within(rowB).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
+			expect(filter?.op).toBe('in');
+			expect(filter?.value).toBe('valueB');
 		});
 
 		it('accumulates both values in IN when toggling checked (related) then unchecked (other)', async () => {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.itemRules.test.tsx

@@ -5,7 +5,6 @@ import { QuickFiltersSource } from '../../../../types';
 
 import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
-	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
 	mockFieldsValuesAPI,
@@ -15,88 +14,6 @@ import {
 setupServer();
 
 describe('CheckboxFilterV2 - item rules', () => {
-	describe('related values unsupported (existingQuery: null)', () => {
-		it('renders a single flat section even when the api returns related values', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production'],
-				stringValues: ['staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('checkbox-value-row-staging')).toHaveAttribute(
-				'data-state',
-				'checked',
-			);
-
-			expect(
-				screen.queryByTestId('section-divider-related'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('section-divider-all-values'),
-			).not.toBeInTheDocument();
-		});
-
-		it('splits clause values and the rest into selected and all values sections', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['production'],
-											},
-										],
-										op: 'AND',
-									},
-								},
-							],
-						},
-					}),
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('checkbox-value-row-staging')).toHaveAttribute(
-				'data-state',
-				'unchecked',
-			);
-
-			expect(screen.getByTestId('section-divider-all-values')).toBeInTheDocument();
-			expect(
-				screen.queryByTestId('section-divider-related'),
-			).not.toBeInTheDocument();
-		});
-	});
-
 	describe('no existing query', () => {
 		it('all values show as checked with no badge when no query exists', async () => {
 			mockFieldsValuesAPI({
@@ -148,16 +65,18 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -193,16 +112,18 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -229,25 +150,27 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['production'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
 									},
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -278,24 +201,26 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['production'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
 									},
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -326,28 +251,29 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'not in',
-												value: ['production'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'not in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
 									},
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
-			// The excluded value renders unchecked.
 			const productionRow = await screen.findByTestId(
 				'checkbox-value-row-production',
 			);
@@ -356,9 +282,8 @@ describe('CheckboxFilterV2 - item rules', () => {
 				within(productionRow).queryByTestId(/^badge-/),
 			).not.toBeInTheDocument();
 
-			// The non-excluded value is still included by NOT IN, so it stays checked.
 			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'checked');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
 			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
 		});
 	});
@@ -381,25 +306,27 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['selected-value'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['selected-value'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
 									},
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -432,16 +359,18 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: { items: [], op: 'AND' },
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -474,25 +403,27 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'in',
-												value: ['selected-env'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['selected-env'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
 									},
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 
@@ -529,25 +460,27 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: buildQueryBuilderOverrides({
-						builder: {
-							queryData: [
-								{
-									filters: {
-										items: [
-											{
-												key: { key: 'deployment.environment' },
-												op: 'not in',
-												value: ['excluded-env'],
-											},
-										],
-										op: 'AND',
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'not in',
+													value: ['excluded-env'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
 									},
-									filter: { expression: 'service.name = "api"' },
-								},
-							],
+								],
+							},
 						},
-					}),
+					} as never,
 				},
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -110,7 +110,6 @@ describe('CheckboxFilterV2 - states', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import { CheckboxFilterV2Header } from '../CheckboxFilterV2Header';
 
@@ -8,8 +7,9 @@ describe('CheckboxFilterV2Header', () => {
 	const defaultProps = {
 		title: 'Environment',
 		isOpen: false,
+		showClearAll: true,
+		isSomeFilterPresentForCurrentAttribute: true,
 		onToggleOpen: jest.fn(),
-		onToggleSearch: jest.fn(),
 		onClear: jest.fn(),
 	};
 
@@ -31,12 +31,11 @@ describe('CheckboxFilterV2Header', () => {
 			expect(header).toHaveAttribute('data-state', 'closed');
 		});
 
-		it('does not render the section actions when collapsed', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
+		it('does not show clear button when collapsed', () => {
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen={false} showClearAll />,
+			);
 
-			expect(
-				screen.queryByTestId('checkbox-filter-search-toggle'),
-			).not.toBeInTheDocument();
 			expect(
 				screen.queryByTestId('checkbox-filter-clear-all'),
 			).not.toBeInTheDocument();
@@ -51,13 +50,36 @@ describe('CheckboxFilterV2Header', () => {
 			expect(header).toHaveAttribute('data-state', 'open');
 		});
 
-		it('renders both search and reset actions when expanded', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
+		it('shows clear button when expanded + showClearAll=true', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll />);
+
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+			expect(screen.getByText('Clear')).toBeInTheDocument();
+		});
+
+		it('hides clear button when showClearAll=false', () => {
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll={false} />,
+			);
 
 			expect(
-				screen.getByTestId('checkbox-filter-search-toggle'),
-			).toBeInTheDocument();
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+
+		it('hides clear button when no filter present for attribute', () => {
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					showClearAll
+					isSomeFilterPresentForCurrentAttribute={false}
+				/>,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
 		});
 	});
 
@@ -100,35 +122,28 @@ describe('CheckboxFilterV2Header', () => {
 			expect(onToggleOpen).toHaveBeenCalledTimes(1);
 		});
 
-		it('calls onToggleSearch on search click without toggling open', async () => {
-			const user = userEvent.setup();
-			const onToggleSearch = jest.fn();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header
-					{...defaultProps}
-					isOpen
-					onToggleSearch={onToggleSearch}
-					onToggleOpen={onToggleOpen}
-				/>,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
-
-			expect(onToggleSearch).toHaveBeenCalledTimes(1);
-			expect(onToggleOpen).not.toHaveBeenCalled();
-		});
-
-		it('calls onClear on reset click without toggling open', async () => {
+		it('calls onClear on clear button click', async () => {
 			const user = userEvent.setup();
 			const onClear = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen onClear={onClear} />,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onClear).toHaveBeenCalledTimes(1);
+		});
+
+		it('clear button click does not trigger onToggleOpen', async () => {
+			const user = userEvent.setup();
 			const onToggleOpen = jest.fn();
+			const onClear = jest.fn();
 			render(
 				<CheckboxFilterV2Header
 					{...defaultProps}
 					isOpen
-					onClear={onClear}
 					onToggleOpen={onToggleOpen}
+					onClear={onClear}
 				/>,
 			);
 
@@ -138,51 +153,4 @@ describe('CheckboxFilterV2Header', () => {
 			expect(onToggleOpen).not.toHaveBeenCalled();
 		});
 	});
-
-	describe('title tooltip', () => {
-		// jsdom has no layout, so truncation is simulated at the prototype level
-		// before mount (the component measures in a layout effect).
-		function mockTitleWidths(scrollWidth: number, clientWidth: number): void {
-			jest
-				.spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
-				.mockReturnValue(scrollWidth);
-			jest
-				.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
-				.mockReturnValue(clientWidth);
-		}
-
-		afterEach(() => {
-			jest.restoreAllMocks();
-		});
-
-		it('shows the full name on hover when the title is truncated', async () => {
-			mockTitleWidths(200, 100);
-			const user = userEvent.setup();
-			render(
-				<TooltipProvider>
-					<CheckboxFilterV2Header {...defaultProps} />
-				</TooltipProvider>,
-			);
-
-			await user.hover(screen.getByText(defaultProps.title));
-
-			await expect(screen.findByRole('tooltip')).resolves.toHaveTextContent(
-				defaultProps.title,
-			);
-		});
-
-		it('shows no tooltip when the title fits', async () => {
-			mockTitleWidths(100, 100);
-			const user = userEvent.setup();
-			render(
-				<TooltipProvider>
-					<CheckboxFilterV2Header {...defaultProps} />
-				</TooltipProvider>,
-			);
-
-			await user.hover(screen.getByText(defaultProps.title));
-
-			expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/itemRules.test.ts

@@ -8,7 +8,6 @@ describe('itemRules', () => {
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: false,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: false,
 			};
 
@@ -24,7 +23,6 @@ describe('itemRules', () => {
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -40,7 +38,6 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: true,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -51,46 +48,12 @@ describe('itemRules', () => {
 			expect(result.checkedState).toBe('unchecked');
 		});
 
-		it('NOT IN filter, value not excluded, not related → all_values, checked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: true,
-				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('NOT IN filter, value not excluded but related → related wins, checked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: true,
-				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.RELATED);
-			expect(result.checkedState).toBe('checked');
-		});
-
 		it('has query, not selected, in related → section related, checked', () => {
 			const ctx: ItemContext = {
 				isSelectedOnFilter: false,
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: false,
 			};
 
@@ -107,7 +70,6 @@ describe('itemRules', () => {
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -124,7 +86,6 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: false,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: false,
 			};
 
@@ -141,7 +102,6 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: false,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -158,7 +118,6 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: false,
 				hasExistingQuery: false,
-				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -169,70 +128,4 @@ describe('itemRules', () => {
 			expect(result.checkedState).toBe('checked');
 		});
 	});
-
-	describe('deriveItemConfig with related values unsupported', () => {
-		const baseCtx: Omit<ItemContext, 'isSelectedOnFilter' | 'isNotInOperator'> = {
-			isInRelatedValues: false,
-			hasExistingQuery: true,
-			hasFilterForThisKey: true,
-			isRelatedValuesSupported: false,
-		};
-
-		it('no filter on this key → selected, checked, even with an existing query', () => {
-			const result = deriveItemConfig({
-				...baseCtx,
-				hasFilterForThisKey: false,
-				isSelectedOnFilter: false,
-				isNotInOperator: false,
-			});
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('excluded by NOT IN → selected, unchecked', () => {
-			const result = deriveItemConfig({
-				...baseCtx,
-				isSelectedOnFilter: true,
-				isNotInOperator: true,
-			});
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('selected by IN → selected, checked', () => {
-			const result = deriveItemConfig({
-				...baseCtx,
-				isSelectedOnFilter: true,
-				isNotInOperator: false,
-			});
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('NOT IN complement → all_values, checked, related values ignored', () => {
-			const result = deriveItemConfig({
-				...baseCtx,
-				isSelectedOnFilter: false,
-				isNotInOperator: true,
-			});
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('IN complement → all_values, unchecked, never related', () => {
-			const result = deriveItemConfig({
-				...baseCtx,
-				isInRelatedValues: true,
-				isSelectedOnFilter: false,
-				isNotInOperator: false,
-			});
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.checkedState).toBe('unchecked');
-		});
-	});
 });

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/useSectionedValues.test.ts

@@ -17,7 +17,6 @@ describe('useSectionedValues', () => {
 		isSomeFilterPresentForCurrentAttribute: false,
 		isNotInOperator: false,
 		hasExistingQuery: false,
-		isRelatedValuesSupported: true,
 		visibleItemsCount: 10,
 		relatedExclusions: [] as string[],
 	};
@@ -27,7 +26,6 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: false,
-				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: false,
 			}),
 		);
@@ -45,7 +43,6 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: false,
 			}),
 		);
@@ -74,7 +71,6 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: true,
 				currentFilterState: { val1: true, val2: false, val3: false },
 			}),
@@ -92,7 +88,6 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: true,
-				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: true,
 				isNotInOperator: true,
 				currentFilterState: { val1: false, val2: true, val3: true },
@@ -115,7 +110,6 @@ describe('useSectionedValues', () => {
 				relatedValues: ['zebra', 'apple', 'mango'],
 				allValues: ['zebra', 'apple', 'mango'],
 				hasExistingQuery: false,
-				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: false,
 			}),
 		);
@@ -132,7 +126,6 @@ describe('useSectionedValues', () => {
 				useSectionedValues({
 					...baseInput,
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: true,
 					currentFilterState: { val1: true },
 				}),
@@ -150,7 +143,6 @@ describe('useSectionedValues', () => {
 					relatedValues: [],
 					allValues: [],
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 					currentFilterState: {},
 				}),
@@ -167,7 +159,6 @@ describe('useSectionedValues', () => {
 					relatedValues: [],
 					allValues: ['other1', 'other2', 'other3'],
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 				}),
 			);
@@ -187,7 +178,6 @@ describe('useSectionedValues', () => {
 					relatedValues: ['pod-a-1', 'pod-b-1', 'pod-c-1'],
 					allValues: ['pod-a-2', 'pod-b-2', 'pod-c-2'],
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 				}),
 			);
@@ -228,7 +218,6 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					// stale API data kept via keepPreviousData
 					relatedValues: ['oldSelected', 'otherRelated'],
 					allValues: ['newValue'],
@@ -257,7 +246,6 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					// oldSelected was just de-selected; the rest are genuinely related
 					relatedValues: ['oldSelected', 'relatedA', 'relatedB', 'relatedC'],
 					allValues: ['newValue'],
@@ -287,7 +275,6 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					relatedValues: ['oldSelected', 'otherRelated'],
 					allValues: ['newValue'],
 					relatedExclusions: ['oldSelected'],
@@ -306,7 +293,6 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					relatedValues: ['oldSelected', 'otherRelated'],
 					allValues: ['newValue'],
 					relatedExclusions: [],
@@ -328,7 +314,6 @@ describe('useSectionedValues', () => {
 					relatedValues: ['related1'],
 					allValues: ['all1'],
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: true,
 					currentFilterState: { selected1: true },
 				}),
@@ -352,7 +337,6 @@ describe('useSectionedValues', () => {
 					relatedValues: ['r1', 'r2', 'r3', 'r4', 'r5'],
 					allValues: ['a1', 'a2', 'a3', 'a4', 'a5'],
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 					visibleItemsCount: 100,
 				}),
@@ -371,7 +355,6 @@ describe('useSectionedValues', () => {
 					relatedValues: ['r1', 'r2', 'r3'],
 					allValues: ['a1', 'a2', 'a3'],
 					hasExistingQuery: true,
-					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 					visibleItemsCount: 4,
 				}),

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -24,7 +24,6 @@ export interface ItemContext {
 	isNotInOperator: boolean;
 	hasExistingQuery: boolean;
 	hasFilterForThisKey: boolean;
-	isRelatedValuesSupported: boolean;
 }
 
 export interface DerivedItem extends ItemConfig {
@@ -36,7 +35,7 @@ interface ItemRule {
 	config: ItemConfig;
 }
 
-const RELATED_SUPPORTED_RULES: ItemRule[] = [
+const ITEM_RULES: ItemRule[] = [
 	// No existing query and no filter → all checked (selected section)
 	{
 		condition: (ctx): boolean =>
@@ -74,16 +73,6 @@ const RELATED_SUPPORTED_RULES: ItemRule[] = [
 			checkedState: 'checked',
 		},
 	},
-	// filterKey present in query with NOT IN and value not in the list → checked
-	{
-		condition: (ctx): boolean =>
-			ctx.hasFilterForThisKey && ctx.isNotInOperator && !ctx.isSelectedOnFilter,
-		config: {
-			section: SectionType.ALL_VALUES,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
 	// All values (has existing query but not related) → unchecked
 	{
 		condition: (ctx): boolean => ctx.hasExistingQuery,
@@ -95,54 +84,6 @@ const RELATED_SUPPORTED_RULES: ItemRule[] = [
 	},
 ];
 
-const RELATED_UNSUPPORTED_RULES: ItemRule[] = [
-	// No filter on this key → included by default
-	{
-		condition: (ctx): boolean => !ctx.hasFilterForThisKey,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Explicitly excluded by NOT IN
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'unchecked',
-		},
-	},
-	// Explicitly selected by IN
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Not listed in the key's NOT IN clause → not excluded, still in results
-	{
-		condition: (ctx): boolean => ctx.isNotInOperator,
-		config: {
-			section: SectionType.ALL_VALUES,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Not listed in the key's IN clause → filtered out of results
-	{
-		condition: (): boolean => true,
-		config: {
-			section: SectionType.ALL_VALUES,
-			badge: null,
-			checkedState: 'unchecked',
-		},
-	},
-];
-
 // Fallback when no rule matches
 const DEFAULT_CONFIG: ItemConfig = {
 	section: SectionType.SELECTED,
@@ -151,10 +92,7 @@ const DEFAULT_CONFIG: ItemConfig = {
 };
 
 export function deriveItemConfig(ctx: ItemContext): ItemConfig {
-	const rules = ctx.isRelatedValuesSupported
-		? RELATED_SUPPORTED_RULES
-		: RELATED_UNSUPPORTED_RULES;
-	for (const rule of rules) {
+	for (const rule of ITEM_RULES) {
 		if (rule.condition(ctx)) {
 			return rule.config;
 		}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useExistingQuery.tsx

@@ -17,7 +17,7 @@ export function useExistingQuery({
 	useFieldApis,
 	activeQueryIndex,
 }: UseExistingQueryParams): UseExistingQueryResult {
-	const { stagedQuery } = useQueryBuilder();
+	const { currentQuery } = useQueryBuilder();
 
 	const existingQuery = useMemo(() => {
 		if (useFieldApis.existingQuery === null) {
@@ -28,7 +28,7 @@ export function useExistingQuery({
 			return useFieldApis.existingQuery;
 		}
 
-		const queryData = stagedQuery?.builder.queryData?.[activeQueryIndex];
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
 
 		// Prefer V5 filter.expression
 		if (queryData?.filter?.expression) {
@@ -43,7 +43,7 @@ export function useExistingQuery({
 		return undefined;
 	}, [
 		useFieldApis.existingQuery,
-		stagedQuery?.builder.queryData,
+		currentQuery.builder.queryData,
 		activeQueryIndex,
 	]);
 
@@ -51,11 +51,11 @@ export function useExistingQuery({
 	// This is separate from existingQuery because existingQuery can be explicitly
 	// disabled (null) while filters still exist in the query for UI purposes
 	const hasExistingQuery = useMemo(() => {
-		const queryData = stagedQuery?.builder.queryData?.[activeQueryIndex];
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
 		const hasV3Items = (queryData?.filters?.items?.length ?? 0) > 0;
 		const hasV5Expression = !!queryData?.filter?.expression;
 		return hasV3Items || hasV5Expression || !!existingQuery;
-	}, [stagedQuery?.builder.queryData, activeQueryIndex, existingQuery]);
+	}, [currentQuery.builder.queryData, activeQueryIndex, existingQuery]);
 
 	return { existingQuery, hasExistingQuery };
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,13 +1,7 @@
 import { useMemo } from 'react';
 import { useGetFieldsValues } from 'api/generated/services/fields';
-import {
-	TelemetrytypesSignalDTO,
-	TelemetrytypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { IQuickFiltersConfig } from 'components/QuickFilters/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
 
@@ -16,7 +10,6 @@ interface UseFieldValuesProps {
 	searchText: string;
 	existingQuery?: string;
 	metricNamespace?: string;
-	source?: QuickFiltersSource;
 	startUnixMilli?: number;
 	endUnixMilli?: number;
 	enabled: boolean;
@@ -29,27 +22,17 @@ interface UseFieldValuesReturn {
 	isFetching: boolean;
 }
 
-export const DATA_SOURCE_TO_SIGNAL: Record<
-	DataSource,
-	TelemetrytypesSignalDTO
-> = {
+const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
 	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
 	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
 	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
 };
 
-const QUICK_FILTERS_SOURCE_TO_SOURCE: Partial<
-	Record<QuickFiltersSource, TelemetrytypesSourceDTO>
-> = {
-	[QuickFiltersSource.METER_EXPLORER]: TelemetrytypesSourceDTO.meter,
-};
-
 export function useFieldValues({
 	filter,
 	searchText,
 	existingQuery,
 	metricNamespace,
-	source,
 	startUnixMilli,
 	endUnixMilli,
 	enabled,
@@ -63,7 +46,6 @@ export function useFieldValues({
 			searchText,
 			existingQuery,
 			metricNamespace,
-			source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
 			startUnixMilli,
 			// This field does not affect the backend but I wanted to keep it here
 			// in case we add the support in the future
@@ -107,12 +89,8 @@ export function useFieldValues({
 			values.numberValues
 				?.filter((value): value is number => value !== null && value !== undefined)
 				.map((value) => value.toString()) || [];
-		const boolValues =
-			values.boolValues
-				?.filter((value): value is boolean => value !== null && value !== undefined)
-				.map((value) => value.toString()) || [];
 
-		return [...stringValues, ...numberValues, ...boolValues];
+		return [...stringValues, ...numberValues];
 	}, [data]);
 
 	return { relatedValues, allValues, isLoading, isFetching };

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.ts

@@ -10,7 +10,6 @@ interface SectionedValuesInput {
 	isSomeFilterPresentForCurrentAttribute: boolean;
 	isNotInOperator: boolean;
 	hasExistingQuery: boolean;
-	isRelatedValuesSupported: boolean;
 	visibleItemsCount: number;
 	relatedExclusions: string[];
 }
@@ -66,7 +65,6 @@ export function useSectionedValues({
 	isSomeFilterPresentForCurrentAttribute,
 	isNotInOperator,
 	hasExistingQuery,
-	isRelatedValuesSupported,
 	visibleItemsCount,
 	relatedExclusions,
 }: SectionedValuesInput): SectionedValuesOutput {
@@ -97,7 +95,6 @@ export function useSectionedValues({
 			isNotInOperator,
 			hasExistingQuery,
 			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
-			isRelatedValuesSupported,
 		});
 	}, [
 		relatedValues,
@@ -106,7 +103,6 @@ export function useSectionedValues({
 		isSomeFilterPresentForCurrentAttribute,
 		isNotInOperator,
 		hasExistingQuery,
-		isRelatedValuesSupported,
 		relatedExclusions,
 	]);
 

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss

@@ -11,21 +11,6 @@
 		padding-right: 9px !important;
 	}
 
-	.duration-reset {
-		opacity: 0;
-		transform: translateX(4px);
-		pointer-events: none;
-		transition:
-			opacity 0.16s ease,
-			transform 0.16s ease;
-	}
-
-	&:hover .duration-reset {
-		opacity: 1;
-		transform: translateX(0);
-		pointer-events: auto;
-	}
-
 	.ant-collapse-header-text {
 		color: var(--l2-foreground);
 		font-family: Inter;
@@ -120,6 +105,11 @@
 .section-body-header {
 	display: flex;
 
+	> button {
+		position: absolute;
+		right: 4px;
+		padding-top: 13px;
+	}
 	.ant-collapse {
 		width: 100%;
 	}

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Collapse } from 'antd';
-import { Undo2 } from '@signozhq/icons';
+import { Button, Collapse } from 'antd';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
@@ -15,16 +14,12 @@ import {
 	AllTraceFilterKeys,
 	AllTraceFilterKeyValue,
 	HandleRunProps,
-	traceFilterKeys,
 	unionTagFilterItems,
 } from 'pages/TracesExplorer/Filter/filterUtils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { clearFilterFromQuery } from '../shared/filterQuery';
-import { SectionActionButton } from '../shared/SectionActionButton/SectionActionButton';
-
 import './Duration.styles.scss';
 
 export type FilterType = Record<
@@ -273,19 +268,12 @@ function Duration({
 		handleRun();
 	}, [selectedFilters]);
 
-	const onClearHandler = (): void => {
-		if (!selectedFilters?.durationNanoMin && !selectedFilters?.durationNanoMax) {
-			return;
-		}
-		const clearedQuery = clearFilterFromQuery({
-			currentQuery,
-			filterKey: traceFilterKeys.durationNano.key,
-			activeQueryIndex,
-		});
-		if (onFilterChange && isFunction(onFilterChange)) {
-			onFilterChange(clearedQuery);
-		} else {
-			redirectWithQueryBuilderData(clearedQuery);
+	const onClearHandler = (e: React.MouseEvent): void => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		if (selectedFilters?.durationNanoMin || selectedFilters?.durationNanoMax) {
+			handleRun({ clearByType: 'durationNano' });
 		}
 	};
 
@@ -306,19 +294,18 @@ function Duration({
 							/>
 						),
 						label: 'Duration',
-						extra: activeKeys.includes('durationNano') ? (
-							<div className="duration-reset">
-								<SectionActionButton
-									icon={<Undo2 size={14} />}
-									tooltip="Reset"
-									onClick={onClearHandler}
-									testId="collapse-duration-clearBtn"
-								/>
-							</div>
-						) : undefined,
 					},
 				]}
 			/>
+			{activeKeys.includes('durationNano') && (
+				<Button
+					type="link"
+					onClick={onClearHandler}
+					data-testid="collapse-duration-clearBtn"
+				>
+					Clear All
+				</Button>
+			)}
 		</div>
 	);
 }

frontend/src/components/QuickFilters/FilterRenderers/shared/SectionActionButton/SectionActionButton.module.scss

@@ -1,8 +0,0 @@
-.iconBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	min-width: 24px;
-	height: 24px;
-}

frontend/src/components/QuickFilters/FilterRenderers/shared/SectionActionButton/SectionActionButton.tsx

@@ -1,43 +0,0 @@
-import { ReactNode } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Tooltip } from 'antd';
-
-import classNames from 'classnames';
-
-import styles from './SectionActionButton.module.scss';
-
-interface SectionActionButtonProps {
-	icon: ReactNode;
-	tooltip: string;
-	onClick: () => void;
-	testId: string;
-	className?: string;
-}
-
-export function SectionActionButton({
-	icon,
-	tooltip,
-	onClick,
-	testId,
-	className,
-}: SectionActionButtonProps): JSX.Element {
-	return (
-		<Tooltip title={tooltip}>
-			<Button
-				variant="link"
-				color="secondary"
-				size="sm"
-				className={classNames(styles.iconBtn, className)}
-				onMouseDown={(e): void => e.preventDefault()}
-				onClick={(e): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					onClick();
-				}}
-				data-testid={testId}
-			>
-				{icon}
-			</Button>
-		</Tooltip>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/shared/filterQuery.ts

@@ -1,53 +0,0 @@
-import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getKeySpellings, isKeyMatch } from '../Checkbox/utils';
-
-/**
- * Returns a new query with this filter's clauses for the attribute key removed from
- * the active query, both from the structured filter items and the raw expression.
- * `operators` limits which expression clauses are removed; omit to remove every
- * clause on the key (e.g. duration's >= / <=).
- */
-export function clearFilterFromQuery({
-	currentQuery,
-	filterKey,
-	activeQueryIndex,
-	operators,
-}: {
-	currentQuery: Query;
-	filterKey: string;
-	activeQueryIndex: number;
-	operators?: string[];
-}): Query {
-	return {
-		...currentQuery,
-		builder: {
-			...currentQuery.builder,
-			queryData: currentQuery.builder.queryData.map((item, idx) => {
-				if (idx !== activeQueryIndex) {
-					return item;
-				}
-				return {
-					...item,
-					filter: {
-						expression: removeKeysFromExpression(
-							item.filter?.expression ?? '',
-							getKeySpellings(filterKey),
-							false,
-							operators,
-						),
-					},
-					filters: {
-						...item.filters,
-						items:
-							item.filters?.items?.filter(
-								(fil) => !isKeyMatch(fil.key?.key, filterKey),
-							) || [],
-						op: item.filters?.op || 'AND',
-					},
-				};
-			}),
-		},
-	};
-}

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -17,7 +17,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 function SortableFilter({
 	filter,
@@ -25,13 +25,13 @@ function SortableFilter({
 	allowDrag,
 	allowRemove,
 }: {
-	filter: TelemetryFieldKey;
-	onRemove: (filter: TelemetryFieldKey) => void;
+	filter: FilterType;
+	onRemove: (filter: FilterType) => void;
 	allowDrag: boolean;
 	allowRemove: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: filter.key as string });
+		useSortable({ id: filter.key });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -46,14 +46,14 @@ function SortableFilter({
 		>
 			<div {...attributes} {...listeners} className="drag-handle">
 				{allowDrag && <GripVertical size={16} />}
-				{filter.name}
+				{filter.key}
 			</div>
 			{allowRemove && (
 				<Button
 					className="remove-filter-btn periscope-btn"
 					size="small"
 					onClick={(): void => {
-						onRemove(filter);
+						onRemove(filter as FilterType);
 					}}
 				>
 					Remove
@@ -69,8 +69,8 @@ function AddedFilters({
 	setAddedFilters,
 }: {
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
@@ -90,12 +90,12 @@ function AddedFilters({
 	const filteredAddedFilters = useMemo(
 		() =>
 			addedFilters.filter((filter) =>
-				filter.name.toLowerCase().includes(inputValue.toLowerCase()),
+				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
 			),
 		[addedFilters, inputValue],
 	);
 
-	const handleRemoveFilter = (filter: TelemetryFieldKey): void => {
+	const handleRemoveFilter = (filter: FilterType): void => {
 		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
 	};
 
@@ -116,7 +116,7 @@ function AddedFilters({
 							<div className="no-values-found">No values found</div>
 						) : (
 							<SortableContext
-								items={addedFilters.map((f) => f.key as string)}
+								items={addedFilters.map((f) => f.key)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,17 +1,17 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
-import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DATA_SOURCE_TO_SIGNAL } from 'components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import {
-	FieldContext,
-	FieldDataType,
-	TelemetryFieldKey,
-} from 'types/api/v5/queryRange';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { DataSource } from 'types/common/queryBuilder';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -37,48 +37,106 @@ function OtherFilters({
 }: {
 	signal: SignalType | undefined;
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
-	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
-
-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			searchText: inputValue,
-			signal: signal
-				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-				: undefined,
-			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-		},
-		{ query: { enabled: !!signal } },
+	const isLogDataSource = useMemo(
+		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
+		[signal],
+	);
+	const isMeterDataSource = useMemo(
+		() => signal && signal === SignalType.METER_EXPLORER,
+		[signal],
 	);
 
-	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data?.keys ?? {}).flat();
-		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
-		// add, render) can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
-			name: attr.name,
-			signal: attr.signal as TelemetryFieldKey['signal'],
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType as FieldDataType,
-			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
-		}));
-
-		const addedKeys = new Set(
-			addedFilters.map((filter) =>
-				buildCompositeKey(filter.name, filter.fieldContext, filter.fieldDataType),
-			),
+	const { data: suggestionsData, isFetching: isFetchingSuggestions } =
+		useGetAttributeSuggestions(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				filters: {} as TagFilter,
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isLogDataSource,
+			},
 		);
-		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [data, addedFilters]);
 
-	const handleAddFilter = (filter: TelemetryFieldKey): void => {
-		setAddedFilters((prev) => [...prev, filter]);
+	const { data: aggregateKeysData, isFetching: isFetchingAggregateKeys } =
+		useGetAggregateKeys(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				aggregateOperator: 'noop',
+				aggregateAttribute: '',
+				tagType: '',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && !isLogDataSource && !isMeterDataSource,
+			},
+		);
+
+	const { data: fieldKeysData, isLoading: isLoadingFieldKeys } =
+		useGetQueryKeySuggestions(
+			{
+				searchText: inputValue,
+				signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				signalSource: 'meter',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isMeterDataSource,
+			},
+		);
+
+	const otherFilters = useMemo(() => {
+		let filterAttributes;
+		if (isLogDataSource) {
+			filterAttributes = suggestionsData?.payload?.attributes || [];
+		} else if (isMeterDataSource) {
+			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
+				fieldKeysData?.data?.data?.keys || {},
+			)?.flat();
+			filterAttributes = fieldKeys.map(
+				(attr) =>
+					({
+						key: attr.name,
+						dataType: attr.fieldDataType,
+						type: attr.fieldContext,
+						signal: attr.signal,
+					}) as BaseAutocompleteData,
+			);
+		} else {
+			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
+		}
+		return filterAttributes?.filter(
+			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
+		);
+	}, [
+		suggestionsData,
+		aggregateKeysData,
+		addedFilters,
+		isLogDataSource,
+		fieldKeysData,
+		isMeterDataSource,
+	]);
+
+	const handleAddFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => [
+			...prev,
+			{
+				key: filter.key,
+				dataType: filter.dataType,
+				type: filter.type,
+			},
+		]);
 	};
 
 	const renderFilters = (): React.ReactNode => {
-		if (isFetching) {
+		const isLoading =
+			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
+		if (isLoading) {
 			return <OtherFiltersSkeleton />;
 		}
 		if (!otherFilters?.length) {
@@ -87,11 +145,11 @@ function OtherFilters({
 
 		return otherFilters.map((filter) => (
 			<div key={filter.key} className="qf-filter-item other-filters-item">
-				<div className="qf-filter-key">{filter.name}</div>
+				<div className="qf-filter-key">{filter.key}</div>
 				<Button
 					className="add-filter-btn periscope-btn"
 					size="small"
-					onClick={(): void => handleAddFilter(filter)}
+					onClick={(): void => handleAddFilter(filter as FilterType)}
 				>
 					Add
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,7 +1,8 @@
+import { useMemo } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { SignalType } from '../types';
 import AddedFilters from './AddedFilters';
@@ -18,7 +19,7 @@ function QuickFiltersSettings({
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 }): JSX.Element {
 	const {
@@ -27,7 +28,6 @@ function QuickFiltersSettings({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		handleInputChange,
@@ -39,6 +39,18 @@ function QuickFiltersSettings({
 		signal,
 	});
 
+	const hasUnsavedChanges = useMemo(
+		() =>
+			// check if both arrays have the same length and same order of elements
+			!(
+				addedFilters.length === customFilters.length &&
+				addedFilters.every(
+					(filter, index) => filter.key === customFilters[index].key,
+				)
+			),
+		[addedFilters, customFilters],
+	);
+
 	return (
 		<>
 			<div className="qf-header">

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -1,31 +1,27 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useUpdateQuickFilters } from 'api/generated/services/quick-filter';
+import { useCallback, useState } from 'react';
+import { useMutation } from 'react-query';
 import logEvent from 'api/common/logEvent';
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
+import axios, { AxiosError } from 'axios';
 import { SignalType } from 'components/QuickFilters/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 	signal?: SignalType;
 }
 
 interface UseQuickFilterSettingsReturn {
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 	handleSettingsClose: () => void;
 	handleDiscardChanges: () => void;
 	handleSaveChanges: () => void;
-	hasUnsavedChanges: boolean;
 	isUpdatingCustomFilters: boolean;
 	inputValue: string;
 	setInputValue: React.Dispatch<React.SetStateAction<string>>;
@@ -41,43 +37,27 @@ const useQuickFilterSettings = ({
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
-	const normalizedCustomFilters = useMemo<TelemetryFieldKey[]>(
-		() =>
-			customFilters.map((filter) => ({
-				...filter,
-				key: buildCompositeKey(
-					filter.name,
-					filter.fieldContext,
-					filter.fieldDataType,
-				),
-			})),
-		[customFilters],
-	);
-	const [addedFilters, setAddedFilters] = useState<TelemetryFieldKey[]>(
-		normalizedCustomFilters,
-	);
+	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
 	const { notifications } = useNotifications();
 
 	const { mutate: updateCustomFilters, isLoading: isUpdatingCustomFilters } =
-		useUpdateQuickFilters({
-			mutation: {
-				onSuccess: () => {
-					setIsSettingsOpen(false);
-					refetchCustomFilters();
-					void logEvent('Quick Filters Settings: changes saved', {
-						addedFilters,
-					});
-					notifications.success({
-						message: 'Quick filters updated successfully',
-						placement: 'bottomRight',
-					});
-				},
-				onError: (error) => {
-					notifications.error({
-						message: error.message || SOMETHING_WENT_WRONG,
-						placement: 'bottomRight',
-					});
-				},
+		useMutation(updateCustomFiltersAPI, {
+			onSuccess: () => {
+				setIsSettingsOpen(false);
+				refetchCustomFilters();
+				logEvent('Quick Filters Settings: changes saved', {
+					addedFilters,
+				});
+				notifications.success({
+					message: 'Quick filters updated successfully',
+					placement: 'bottomRight',
+				});
+			},
+			onError: (error: AxiosError) => {
+				notifications.error({
+					message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
+					placement: 'bottomRight',
+				});
 			},
 		});
 	const debouncedUpdate = useDebouncedFn((value) => {
@@ -98,32 +78,19 @@ const useQuickFilterSettings = ({
 	}, [setIsSettingsOpen]);
 
 	const handleDiscardChanges = useCallback((): void => {
-		setAddedFilters(normalizedCustomFilters);
-	}, [normalizedCustomFilters, setAddedFilters]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				addedFilters.length === normalizedCustomFilters.length &&
-				addedFilters.every(
-					(filter, index) => filter.key === normalizedCustomFilters[index].key,
-				)
-			),
-		[addedFilters, normalizedCustomFilters],
-	);
+		setAddedFilters(customFilters);
+	}, [customFilters, setAddedFilters]);
 
 	const handleSaveChanges = useCallback((): void => {
 		if (signal) {
 			updateCustomFilters({
-				pathParams: { source: signal },
 				data: {
-					// Send only the stored TelemetryFieldKey fields; the composite `key`
-					// is UI-only.
 					filters: addedFilters.map((filter) => ({
-						name: filter.name,
-						fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
-						fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
+						key: filter.key,
+						datatype: filter.dataType,
+						type: filter.type,
 					})),
+					signal,
 				},
 			});
 		}
@@ -135,7 +102,6 @@ const useQuickFilterSettings = ({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		setInputValue,

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import { useGetQuickFilters } from 'api/generated/services/quick-filter';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { useQuery } from 'react-query';
+import getCustomFilters from 'api/quickFilters/getCustomFilters';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -11,7 +13,7 @@ interface UseFilterConfigProps {
 }
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
 	refetchCustomFilters: () => void;
@@ -23,16 +25,17 @@ const useFilterConfig = ({
 }: UseFilterConfigProps): UseFilterConfigReturn => {
 	const {
 		isFetching: isCustomFiltersLoading,
-		data,
+		data: customFilters = [],
 		refetch,
-	} = useGetQuickFilters(
-		{ source: signal ?? '' },
-		{ query: { enabled: !!signal } },
-	);
-
-	const customFilters = useMemo<TelemetryFieldKey[]>(
-		() => (data?.data?.filters ?? []) as TelemetryFieldKey[],
-		[data],
+	} = useQuery<FilterType[], Error>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		async () => {
+			const res = await getCustomFilters({ signal: signal || '' });
+			return 'payload' in res && res.payload?.filters ? res.payload.filters : [];
+		},
+		{
+			enabled: !!signal,
+		},
 	);
 
 	const isDynamicFilters = useMemo(

frontend/src/components/QuickFilters/hooks/useSignalFieldApis.ts

@@ -1,23 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { QuickFilterCheckboxUseFieldApis } from '../types';
-
-export function useSignalFieldApis(): QuickFilterCheckboxUseFieldApis {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	return useMemo(
-		() => ({
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-			existingQuery: null,
-		}),
-		[minTime, maxTime],
-	);
-}

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -11,7 +11,7 @@ import {
 } from 'mocks-server/__mockdata__/customQuickFilters';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import '@testing-library/jest-dom';
 
@@ -34,9 +34,9 @@ const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
-const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const quickFiltersSuggestionsURL = `${BASE_URL}/api/v1/fields/keys`;
+const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
+const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
+const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
 const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -338,63 +338,6 @@ describe('Quick Filters with custom filters', () => {
 		);
 	});
 
-	it('keeps same-name fields with different context as distinct entries', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		server.use(
-			rest.get(quickFiltersSuggestionsURL, (_req, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							complete: true,
-							keys: {
-								level: [
-									{
-										name: 'level',
-										fieldContext: 'attribute',
-										fieldDataType: 'string',
-										signal: 'logs',
-									},
-									{
-										name: 'level',
-										fieldContext: 'span',
-										fieldDataType: 'string',
-										signal: 'logs',
-									},
-								],
-							},
-						},
-					}),
-				),
-			),
-		);
-
-		render(<TestQuickFilters signal={SIGNAL} />);
-		await screen.findByText(FILTER_SERVICE_NAME);
-
-		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
-
-		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
-		// Both `level` variants are shown despite sharing a name.
-		await waitFor(() =>
-			expect(within(otherSection).getAllByText('level')).toHaveLength(2),
-		);
-
-		// Adding one variant removes only that one; the other stays.
-		const firstLevel = within(otherSection).getAllByText('level')[0];
-		const addButton = firstLevel.parentElement?.querySelector('button');
-		await user.click(addButton as HTMLButtonElement);
-
-		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
-		await waitFor(() => {
-			expect(within(addedSection).getAllByText('level')).toHaveLength(1);
-			expect(within(otherSection).getAllByText('level')).toHaveLength(1);
-		});
-	});
-
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -513,10 +456,12 @@ describe('Quick Filters with custom filters', () => {
 		});
 
 		const requestBody = putHandler.mock.calls[0][0];
-		expect(requestBody.filters).not.toContainEqual(
-			expect.objectContaining({ name: FILTER_OS_DESCRIPTION }),
+		expect(requestBody.filters).toStrictEqual(
+			expect.arrayContaining([
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+			]),
 		);
-		expect(requestBody.filters).toHaveLength(10);
+		expect(requestBody.signal).toBe(SIGNAL);
 	});
 
 	it('should render duration slider for duration_nono filter', async () => {
@@ -667,9 +612,9 @@ describe('Quick Filters refetch behavior', () => {
 				filters: [
 					...(quickFiltersListResponse.data.filters ?? []),
 					{
-						name: 'new.custom.filter',
-						fieldDataType: 'string',
-						fieldContext: 'resource',
+						key: 'new.custom.filter',
+						dataType: 'string',
+						type: 'resource',
 					} as const,
 				],
 			},

frontend/src/components/QuickFilters/utils.tsx

@@ -1,33 +1,17 @@
-import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { fieldDataTypeToDataType } from 'utils/fieldDataType';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
 
 const FILTER_TITLE_MAP: Record<string, string> = {
 	duration_nano: 'Duration',
 	hasError: 'Has Error (Status)',
-	has_error: 'Has Error (Status)',
 };
 
 const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
-// The map below exists only for the old v3 attribute-values fetch
-// (useCheckboxFilterValues), the sole reader of attributeKey.dataType/type.
-// Once the values fetch moves to fields/values, remove this and reduce
-// attributeKey to { id, key }.
-
-const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
-	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-};
-
-const mapFieldContext = (fieldContext?: string): string =>
-	(fieldContext && FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[fieldContext]) || '';
-
 const getFilterName = (str: string): string => {
 	if (FILTER_TITLE_MAP[str]) {
 		return FILTER_TITLE_MAP[str];
@@ -42,16 +26,16 @@ const getFilterName = (str: string): string => {
 		.join(' ');
 };
 
-const getFilterType = (att: TelemetryFieldKey): FiltersType => {
-	if (FILTER_TYPE_MAP[att.name]) {
-		return FILTER_TYPE_MAP[att.name];
+const getFilterType = (att: FilterType): FiltersType => {
+	if (FILTER_TYPE_MAP[att.key]) {
+		return FILTER_TYPE_MAP[att.key];
 	}
 	return FiltersType.CHECKBOX;
 };
 
 export const getFilterConfig = (
 	signal?: SignalType,
-	customFilters?: TelemetryFieldKey[],
+	customFilters?: FilterType[],
 	config?: IQuickFiltersConfig[],
 ): IQuickFiltersConfig[] => {
 	if (!customFilters?.length || !signal) {
@@ -62,13 +46,13 @@ export const getFilterConfig = (
 		(att, index) =>
 			({
 				type: getFilterType(att),
-				title: getFilterName(att.name),
+				title: getFilterName(att.key),
 				dataSource: SIGNAL_DATA_SOURCE_MAP[signal],
 				attributeKey: {
-					id: att.name,
-					key: att.name,
-					dataType: fieldDataTypeToDataType(att.fieldDataType),
-					type: mapFieldContext(att.fieldContext),
+					id: att.key,
+					key: att.key,
+					dataType: att.dataType,
+					type: att.type,
 				},
 				defaultOpen: index < 2,
 			}) as IQuickFiltersConfig,

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -4,18 +4,14 @@ import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { buildLicenseUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/license.permissions';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
 	type,
 	className,
-	withPortal,
 }: {
 	type?: 'button' | 'text' | 'tooltip';
 	className?: string;
-	withPortal?: false;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicense, activeLicenseRefetch } = useAppContext();
@@ -40,25 +36,17 @@ function RefreshPaymentStatus({
 	};
 
 	const button = (
-		<AuthZTooltip
-			checks={
-				activeLicense ? [buildLicenseUpdatePermission(activeLicense.id)] : []
-			}
-			enabled={!!activeLicense}
-			withPortal={withPortal}
+		<Button
+			variant="link"
+			color={type === 'text' ? 'none' : 'secondary'}
+			size="md"
+			className={className}
+			onClick={handleRefreshPaymentStatus}
+			prefix={<RefreshCcw size={14} />}
+			loading={isLoading}
 		>
-			<Button
-				variant="link"
-				color={type === 'text' ? 'none' : 'secondary'}
-				size="md"
-				className={className}
-				onClick={handleRefreshPaymentStatus}
-				prefix={<RefreshCcw size={14} />}
-				loading={isLoading}
-			>
-				{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-			</Button>
-		</AuthZTooltip>
+			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+		</Button>
 	);
 
 	return (
@@ -74,7 +62,6 @@ function RefreshPaymentStatus({
 RefreshPaymentStatus.defaultProps = {
 	type: 'button',
 	className: undefined,
-	withPortal: undefined,
 };
 
 export default RefreshPaymentStatus;