Merge branch 'main' into feat/google_chat_alert_integration_tests

wait_for_org_registration probes channels/test with a throwaway webhook
sentinel aimed at an unstubbed wiremock path: it 404s before reaching
any notifier until the org's alertmanager registers, and probe traffic
stays off the paths tests assert counts on. Replaces both sleep(12)s
in the firing-path suite; the poll returns instantly once registered.

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

@@ -20,16 +20,6 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
     await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
   });
   ```
-- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
-  - `fixtures/alerts/alert-rules` — worker-scoped rule list + test-scoped rule factory
-  - `fixtures/alerts/alert-history` — extends alert-rules, adds history fixtures (waits on ruler evaluation)
-  ```ts
-  // Alert list tests - need rules, no history
-  import { test, expect } from '../../../fixtures/alerts/alert-rules';
-  
-  // Alert history tests - need evaluated history rows
-  import { test, expect } from '../../../fixtures/alerts/alert-history';
-  ```
 - **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
 - **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two cleanup shapes are valid; pick based on the spec size:
   - **Per-test `try / finally`** — small specs (~ <10 scenarios) where each test owns its data.

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

@@ -49,7 +49,6 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 - **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `createDashboardViaApi`.
 - **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create paths are the "New dashboard" dropdown → "Create dashboard" (default name "Sample Title", see `DEFAULT_DASHBOARD_TITLE`) or "Import JSON".
 - **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/dashboards.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
-- **Extended fixtures.** Domain-specific fixtures extend `auth` and add seeded data. Alerts uses `fixtures/alerts/alert-rules` (worker-scoped rule list, test-scoped factory) and `fixtures/alerts/alert-history` (extends alert-rules, waits on ruler evaluation). See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the pattern. When a test fails on missing data, check if it imports the wrong fixture level.
 - **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
 - **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.
 - **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.

.github/workflows/integrationci.yaml

@@ -50,7 +50,6 @@ jobs:
           - logspipelines
           - passwordauthn
           - preference
-          - quickfilter
           - querierlogs
           - queriertraces
           - queriermetrics
@@ -63,7 +62,6 @@ jobs:
           - role
           - rootuser
           - savedview
-          - semconvfamilies
           - serviceaccount
           - spanmapper
           - querier_json_body

docs/api/openapi.yml

@@ -2559,7 +2559,6 @@ components:
       - factor-api-key
       - license
       - subscription
-      - deployment-host
       - logs
       - traces
       - metrics
@@ -7383,26 +7382,6 @@ components:
       - custom
       - text
       type: string
-    QuickfiltertypesSignalFilters:
-      properties:
-        filters:
-          items:
-            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
-          type: array
-        signal:
-          type: string
-      type: object
-    QuickfiltertypesUpdatableQuickFilters:
-      properties:
-        filters:
-          items:
-            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
-          type: array
-        signal:
-          type: string
-      type: object
     RenderErrorResponse:
       properties:
         error:
@@ -8031,7 +8010,6 @@ components:
       - logs
       - metrics
       - meter
-      - ai_observability
       type: string
     SavedviewtypesUpdatableSavedView:
       properties:
@@ -8822,7 +8800,6 @@ components:
       - span
       - trace
       - resource
-      - scope
       - attribute
       - body
       - ""
@@ -15490,8 +15467,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key: []
-      - tokenizer: []
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
       summary: Get features
       tags:
       - features
@@ -18339,165 +18318,6 @@ paths:
       summary: Get query range result (v2)
       tags:
       - dashboard
-  /api/v2/quick_filters:
-    get:
-      deprecated: false
-      description: Returns the org's quick filters for every signal, each filter as
-        a telemetry field key.
-      operationId: ListQuickFilters
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/QuickfiltertypesSignalFilters'
-                    nullable: true
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "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
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - quick-filter:list
-      - tokenizer:
-        - quick-filter:list
-      summary: List quick filters
-      tags:
-      - quick_filter
-    put:
-      deprecated: false
-      description: Replaces the org's quick filters for the signal named in the body.
-      operationId: UpdateQuickFilters
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/QuickfiltertypesUpdatableQuickFilters'
-      responses:
-        "204":
-          description: No Content
-        "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
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - quick-filter:update
-      - tokenizer:
-        - quick-filter:update
-      summary: Update quick filters
-      tags:
-      - quick_filter
-  /api/v2/quick_filters/{signal_name}:
-    get:
-      deprecated: false
-      description: Returns the org's quick filters for one signal, each filter as
-        a telemetry field key.
-      operationId: GetQuickFilters
-      parameters:
-      - in: path
-        name: signal_name
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/QuickfiltertypesSignalFilters'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "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
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - quick-filter:read
-      - tokenizer:
-        - quick-filter:read
-      summary: Get a signal's quick filters
-      tags:
-      - quick_filter
   /api/v2/readyz:
     get:
       operationId: Readyz
@@ -24122,9 +23942,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - deployment-host:list
+        - VIEWER
       - tokenizer:
-        - deployment-host:list
+        - VIEWER
       summary: Get host info from Zeus.
       tags:
       - zeus
@@ -24178,9 +23998,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - deployment-host:update
+        - ADMIN
       - tokenizer:
-        - deployment-host:update
+        - ADMIN
       summary: Put host in Zeus for a deployment.
       tags:
       - zeus

docs/contributing/tests/e2e.md

@@ -112,41 +112,6 @@ These two folders look similar but mean different things:
 
 Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
 
-### Extended fixtures
-
-For features needing complex setup (API-seeded data, ruler evaluation waits, cleanup), create domain-specific fixtures that extend `auth`. Group them in `fixtures/<domain>/`.
-
-**Fixture scopes:**
-- **test scope** — fresh data per test. Use for mutations (edit, delete, rename).
-- **worker scope** — shared across tests in one worker. Use for read-only data. Worker scope pays the setup cost once per worker instead of once per test.
-
-**The alerts pattern** (`fixtures/alerts/`) demonstrates extending fixtures:
-
-```
-fixtures/alerts/
-├── alert-rules.ts   # extends auth — worker-scoped rule list + test-scoped factory
-└── alert-history.ts # extends alert-rules — adds history fixtures (waits on ruler)
-```
-
-Specs import from the fixture they need:
-
-```ts
-// List tests — just need rules, no history
-import { test, expect } from '../../../fixtures/alerts/alert-rules';
-
-// History tests — need history rows from ruler evaluation
-import { test, expect } from '../../../fixtures/alerts/alert-history';
-```
-
-**When creating new fixtures:**
-
-1. **Identify scope** — Will tests mutate the data? If yes, test-scoped. If read-only, worker-scoped.
-2. **Group by domain** — Put fixtures in `fixtures/<domain>/`. Helpers in `helpers/<domain>/`.
-3. **Extend existing fixtures** — Chain from `auth` or another fixture to inherit its setup.
-4. **Handle timeouts** — Worker-scoped fixtures that wait on backend processing need explicit timeouts.
-5. **Clean up** — Always delete seeded data in the fixture teardown (after `use()`).
-6. **Extract logic into functions** — Keep the `test.extend()` block lean; move setup/teardown logic to named functions so the extend block reads as a manifest of "what fixtures exist."
-
 Each spec follows these principles:
 
 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
@@ -267,14 +232,11 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
-# Single sub-area
-npx playwright test tests/alerts/history/ --project=chromium
-
 # Single file
-npx playwright test tests/alerts/page.spec.ts --project=chromium
+npx playwright test tests/alerts/alerts.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "AL-01"
+npx playwright test --project=chromium -g "TC-01"
 ```
 
 ### Iterative modes
@@ -308,14 +270,7 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
-
-```bash
-# runs against a locally served frontend, not whatever .env.local points at
-SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
-```
-
-This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
+Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
 
 ### Playwright options
 

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

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

frontend/jest.setup.ts

@@ -62,40 +62,6 @@ if (typeof window.ResizeObserver === 'undefined') {
 	(window as any).ResizeObserver = ResizeObserverMock;
 }
 
-if (typeof globalThis.DOMRect === 'undefined') {
-	(globalThis as any).DOMRect = class DOMRect {
-		x = 0;
-		y = 0;
-		width = 0;
-		height = 0;
-		top = 0;
-		right = 0;
-		bottom = 0;
-		left = 0;
-		constructor(x = 0, y = 0, width = 0, height = 0) {
-			this.x = x;
-			this.y = y;
-			this.width = width;
-			this.height = height;
-			this.top = y;
-			this.right = x + width;
-			this.bottom = y + height;
-			this.left = x;
-		}
-		toJSON(): any {
-			return { x: this.x, y: this.y, width: this.width, height: this.height };
-		}
-		static fromRect(rect?: {
-			x?: number;
-			y?: number;
-			width?: number;
-			height?: number;
-		}): DOMRect {
-			return new DOMRect(rect?.x, rect?.y, rect?.width, rect?.height);
-		}
-	};
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,9 +48,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.6",
+    "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.1.0",
+    "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -238,4 +238,4 @@
     "tmp@<0.2.6": ">=0.2.6 <0.3.0",
     "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/src/api/ErrorResponseHandler.ts

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

frontend/src/api/generated/services/quick-filter/index.ts

@@ -1,298 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useMutation, useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	GetQuickFilters200,
-	GetQuickFiltersPathParameters,
-	ListQuickFilters200,
-	QuickfiltertypesUpdatableQuickFiltersDTO,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
-
-/**
- * Returns the org's quick filters for every signal, each filter as a telemetry field key.
- * @summary List quick filters
- */
-export const listQuickFilters = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListQuickFilters200>({
-		url: `/api/v2/quick_filters`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListQuickFiltersQueryKey = () => {
-	return [`/api/v2/quick_filters`] as const;
-};
-
-export const getListQuickFiltersQueryOptions = <
-	TData = Awaited<ReturnType<typeof listQuickFilters>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listQuickFilters>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListQuickFiltersQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listQuickFilters>>> = ({
-		signal,
-	}) => listQuickFilters(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listQuickFilters>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListQuickFiltersQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listQuickFilters>>
->;
-export type ListQuickFiltersQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List quick filters
- */
-
-export function useListQuickFilters<
-	TData = Awaited<ReturnType<typeof listQuickFilters>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listQuickFilters>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListQuickFiltersQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List quick filters
- */
-export const invalidateListQuickFilters = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListQuickFiltersQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Replaces the org's quick filters for the signal named in the body.
- * @summary Update quick filters
- */
-export const updateQuickFilters = (
-	quickfiltertypesUpdatableQuickFiltersDTO?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/quick_filters`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: quickfiltertypesUpdatableQuickFiltersDTO,
-		signal,
-	});
-};
-
-export const getUpdateQuickFiltersMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateQuickFilters>>,
-		TError,
-		{ data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateQuickFilters>>,
-	TError,
-	{ data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO> },
-	TContext
-> => {
-	const mutationKey = ['updateQuickFilters'];
-	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 updateQuickFilters>>,
-		{ data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return updateQuickFilters(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateQuickFiltersMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateQuickFilters>>
->;
-export type UpdateQuickFiltersMutationBody =
-	| BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>
-	| undefined;
-export type UpdateQuickFiltersMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update quick filters
- */
-export const useUpdateQuickFilters = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateQuickFilters>>,
-		TError,
-		{ data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateQuickFilters>>,
-	TError,
-	{ data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO> },
-	TContext
-> => {
-	return useMutation(getUpdateQuickFiltersMutationOptions(options));
-};
-/**
- * Returns the org's quick filters for one signal, each filter as a telemetry field key.
- * @summary Get a signal's quick filters
- */
-export const getQuickFilters = (
-	{ signalName }: GetQuickFiltersPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetQuickFilters200>({
-		url: `/api/v2/quick_filters/${signalName}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetQuickFiltersQueryKey = ({
-	signalName,
-}: GetQuickFiltersPathParameters) => {
-	return [`/api/v2/quick_filters/${signalName}`] as const;
-};
-
-export const getGetQuickFiltersQueryOptions = <
-	TData = Awaited<ReturnType<typeof getQuickFilters>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ signalName }: GetQuickFiltersPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getQuickFilters>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetQuickFiltersQueryKey({ signalName });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getQuickFilters>>> = ({
-		signal,
-	}) => getQuickFilters({ signalName }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!signalName,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getQuickFilters>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetQuickFiltersQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getQuickFilters>>
->;
-export type GetQuickFiltersQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get a signal's quick filters
- */
-
-export function useGetQuickFilters<
-	TData = Awaited<ReturnType<typeof getQuickFilters>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ signalName }: GetQuickFiltersPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getQuickFilters>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetQuickFiltersQueryOptions({ signalName }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get a signal's quick filters
- */
-export const invalidateGetQuickFilters = async (
-	queryClient: QueryClient,
-	{ signalName }: GetQuickFiltersPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetQuickFiltersQueryKey({ signalName }) },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -2175,7 +2175,6 @@ export enum CoretypesKindDTO {
 	'factor-api-key' = 'factor-api-key',
 	license = 'license',
 	subscription = 'subscription',
-	'deployment-host' = 'deployment-host',
 	logs = 'logs',
 	traces = 'traces',
 	metrics = 'metrics',
@@ -3493,7 +3492,6 @@ export enum TelemetrytypesFieldContextDTO {
 	span = 'span',
 	trace = 'trace',
 	resource = 'resource',
-	scope = 'scope',
 	attribute = 'attribute',
 	body = 'body',
 	'' = '',
@@ -8437,28 +8435,6 @@ export enum Querybuildertypesv5QueryTypeDTO {
 	clickhouse_sql = 'clickhouse_sql',
 	promql = 'promql',
 }
-export interface QuickfiltertypesSignalFiltersDTO {
-	/**
-	 * @type array,null
-	 */
-	filters?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
-	/**
-	 * @type string
-	 */
-	signal?: string;
-}
-
-export interface QuickfiltertypesUpdatableQuickFiltersDTO {
-	/**
-	 * @type array,null
-	 */
-	filters?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
-	/**
-	 * @type string
-	 */
-	signal?: string;
-}
-
 export interface RenderErrorResponseDTO {
 	error: ErrorsJSONDTO;
 	/**
@@ -9045,7 +9021,6 @@ export enum SavedviewtypesSourceDTO {
 	logs = 'logs',
 	metrics = 'metrics',
 	meter = 'meter',
-	ai_observability = 'ai_observability',
 }
 export interface SavedviewtypesSavedViewSpecDTO {
 	display?: SavedviewtypesDisplayDTO;
@@ -11849,28 +11824,6 @@ export type GetPublicDashboardPanelQueryRangeV2200 = {
 	status: string;
 };
 
-export type ListQuickFilters200 = {
-	/**
-	 * @type array,null
-	 */
-	data: QuickfiltertypesSignalFiltersDTO[] | null;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetQuickFiltersPathParameters = {
-	signalName: string;
-};
-export type GetQuickFilters200 = {
-	data: QuickfiltertypesSignalFiltersDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type Readyz200 = {
 	data: FactoryResponseDTO;
 	/**

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/components/AlertBreadcrumb/AlertBreadcrumb.tsx

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

frontend/src/components/ExplorerCard/ExplorerCard.tsx

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

frontend/src/components/ExplorerCard/constants.ts

@@ -1,3 +1,5 @@
+import { QueryParams } from 'constants/query';
+
 export const ExploreHeaderToolTip = {
 	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
@@ -7,3 +9,5 @@ export const SaveButtonText = {
 	SAVE_AS_NEW_VIEW: 'Save as new view',
 	SAVE_VIEW: 'Save view',
 };
+
+export type QuerySearchParamNames = QueryParams.viewName | QueryParams.viewKey;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -28,9 +28,6 @@ interface FieldsSelectorProps {
 	signal: DataSource;
 	maxFields?: number;
 	requiredFields?: readonly string[];
-	// Lets users add a free-typed field which
-	// does not show up in the suggestions
-	allowCustomFields?: boolean;
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
@@ -49,7 +46,6 @@ function FieldsSelectorContent({
 	signal,
 	maxFields,
 	requiredFields,
-	allowCustomFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
@@ -71,7 +67,7 @@ function FieldsSelectorContent({
 
 	const handleInputChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim();
+			const value = e.target.value.trim().toLowerCase();
 			setInputValue(value);
 			debouncedUpdate(value);
 		},
@@ -157,7 +153,6 @@ function FieldsSelectorContent({
 					addedFields={draftFields}
 					onAdd={handleAdd}
 					isAtLimit={isAtLimit}
-					allowCustomFields={allowCustomFields}
 				/>
 
 				{hasUnsavedChanges && (
@@ -197,7 +192,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -21,7 +21,6 @@ interface OtherFieldsProps {
 	addedFields: TelemetryFieldKey[];
 	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
-	allowCustomFields?: boolean;
 }
 
 function OtherFields({
@@ -30,7 +29,6 @@ function OtherFields({
 	addedFields,
 	onAdd,
 	isAtLimit,
-	allowCustomFields,
 }: OtherFieldsProps): JSX.Element {
 	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
@@ -47,47 +45,25 @@ function OtherFields({
 		},
 	);
 
-	const otherFields = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data.data.keys || {}).flat();
+	const otherFields: TelemetryFieldKey[] = useMemo(() => {
+		const suggestions = Object.values(data?.data.data.keys || {}).flat();
 		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
-			...attr,
-			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
-			signal: attr.signal as SignalType,
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType,
-		}));
-		const addedIds = new Set(
-			addedFields.map((f) =>
-				buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-			),
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
+			(attr) => ({
+				...attr,
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
+				signal: attr.signal as SignalType,
+				fieldContext: attr.fieldContext as FieldContext,
+				fieldDataType: attr.fieldDataType,
+			}),
 		);
-		const available = suggestions.filter(
+		const addedIds = new Set(
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+		);
+		return normalizedSuggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),
 		);
-
-		// Prepend the custom field when its name is not in suggestions and
-		// not already added.
-		const typed = debouncedInputValue.trim();
-		const nameMatches = (list: TelemetryFieldKey[]): boolean =>
-			list.some((f) => f.name.toLowerCase() === typed.toLowerCase());
-		const showCustom =
-			!!allowCustomFields &&
-			typed.length > 0 &&
-			!nameMatches(suggestions) &&
-			!nameMatches(addedFields);
-
-		if (!showCustom) {
-			return available;
-		}
-		const customField: TelemetryFieldKey = {
-			name: typed,
-			fieldContext: '',
-			fieldDataType: '',
-			key: buildCompositeKey(typed, ''),
-		};
-		return [customField, ...available];
-	}, [data, addedFields, allowCustomFields, debouncedInputValue]);
+	}, [data, addedFields]);
 
 	if (isFetching) {
 		return (

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -11,7 +11,7 @@ const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
 	signal: 'logs',
 	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
 	fieldDataType: 'string',
-	key: `${fieldContext}:${name}`,
+	key: `${fieldContext}.${name}`,
 });
 
 describe('AddedFields — requiredFields', () => {
@@ -33,7 +33,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:a', 'log:c']}
+				requiredFields={['log.a', 'log.c']}
 			/>,
 		);
 
@@ -50,7 +50,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:a']}
+				requiredFields={['log.a']}
 			/>,
 		);
 
@@ -68,7 +68,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:body']}
+				requiredFields={['log.body']}
 			/>,
 		);
 
@@ -101,11 +101,11 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:body']}
+				requiredFields={['log.body']}
 			/>,
 		);
 
-		// 'log:body' locked, 'log:body_extra' removable.
+		// 'log.body' locked, 'log.body_extra' removable.
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
 	});
 });

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

@@ -1,188 +0,0 @@
-import { act, fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import FieldsSelector from '../FieldsSelector';
-
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-// FloatingPanel is a react-rnd/portal shell — presentation only. Render its
-// children directly so the test exercises the column-editing behavior.
-jest.mock('periscope/components/FloatingPanel', () => ({
-	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
-		isFetching: false,
-	});
-};
-
-const field = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
-	fieldDataType: 'string',
-});
-
-const renderPanel = (
-	props: Partial<React.ComponentProps<typeof FieldsSelector>> = {},
-): { onFieldsChange: jest.Mock } => {
-	const onFieldsChange = jest.fn();
-	render(
-		<FieldsSelector
-			isOpen
-			title="Edit columns"
-			fields={props.fields ?? []}
-			onFieldsChange={onFieldsChange}
-			onClose={jest.fn()}
-			signal={DataSource.LOGS}
-			allowCustomFields
-			{...props}
-		/>,
-	);
-	return { onFieldsChange };
-};
-
-// Type into the search box and flush the 400ms debounce so OtherFields (driven
-// by the debounced value) recomputes.
-const typeSearch = (value: string): void => {
-	const input = screen.getByPlaceholderText('Search for a field...');
-	act(() => {
-		fireEvent.change(input, { target: { value } });
-	});
-	act(() => {
-		jest.advanceTimersByTime(400);
-	});
-};
-
-describe('FieldsSelector — edit columns (integration)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		mockSuggestions([]);
-	});
-
-	afterEach(() => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	});
-
-	it('adds a free-typed field end to end and saves the synthesized key', () => {
-		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
-
-		typeSearch('orderId');
-
-		// custom option surfaces in OTHER FIELDS (only Add button, no suggestions)
-		expect(screen.getByText('orderId')).toBeInTheDocument();
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
-		});
-
-		// moved into ADDED FIELDS → OTHER FIELDS has nothing left to offer
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-
-		// Save commits the draft
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-		});
-
-		expect(onFieldsChange).toHaveBeenCalledTimes(1);
-		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
-		expect(saved).toStrictEqual(
-			expect.arrayContaining([
-				expect.objectContaining({
-					name: 'orderId',
-					fieldContext: '',
-					fieldDataType: '',
-					key: 'orderId',
-				}),
-			]),
-		);
-	});
-
-	it('adds a suggested field: it moves from OTHER FIELDS into ADDED FIELDS', () => {
-		mockSuggestions(['service.name']);
-		const { onFieldsChange } = renderPanel({ fields: [] });
-
-		const addButton = screen.getByRole('button', { name: /^add$/i });
-		act(() => {
-			fireEvent.click(addButton);
-		});
-
-		// now removable in ADDED FIELDS, no longer offered in OTHER FIELDS
-		expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^add$/i }),
-		).not.toBeInTheDocument();
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-		});
-		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
-		expect(saved.map((f) => f.name)).toContain('service.name');
-	});
-
-	it('hides the custom option when the typed name is already added', () => {
-		renderPanel({ fields: [field('orderId')] });
-
-		typeSearch('ORDERID');
-
-		// exact name already added → nothing left to offer in OTHER FIELDS
-		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not offer a custom option when allowCustomFields is off', () => {
-		renderPanel({ fields: [], allowCustomFields: false });
-
-		typeSearch('unknown.a.b.c');
-
-		// no custom row and nothing addable
-		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^add$/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('discards an added field, reverting the draft', () => {
-		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
-
-		typeSearch('orderId');
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
-		});
-
-		// clear the search so the added list is not filtered
-		typeSearch('');
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /discard/i }));
-		});
-
-		expect(screen.queryByText('orderId')).not.toBeInTheDocument();
-		expect(onFieldsChange).not.toHaveBeenCalled();
-	});
-});

frontend/src/components/FieldsSelector/__tests__/OtherFields.test.tsx

@@ -1,125 +0,0 @@
-import { fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import OtherFields from '../OtherFields';
-
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-
-const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
-		isFetching: false,
-	});
-};
-
-const renderOtherFields = (
-	props: Partial<React.ComponentProps<typeof OtherFields>> = {},
-): { onAdd: jest.Mock } => {
-	const onAdd = jest.fn();
-	render(
-		<OtherFields
-			signal={DataSource.LOGS}
-			debouncedInputValue=""
-			addedFields={[]}
-			onAdd={onAdd}
-			isAtLimit={false}
-			allowCustomFields
-			{...props}
-		/>,
-	);
-	return { onAdd };
-};
-
-const addedField = (name: string): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: '',
-	fieldDataType: '',
-	key: name,
-});
-
-describe('OtherFields — custom (free-typed) option', () => {
-	beforeEach(() => {
-		mockSuggestions([]);
-	});
-
-	it('shows a custom option for a typed name that is not a suggestion', () => {
-		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c' });
-
-		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
-	});
-
-	it('synthesizes the field with raw name, empty context/type, on add', () => {
-		const { onAdd } = renderOtherFields({ debouncedInputValue: 'orderId' });
-
-		fireEvent.click(screen.getByRole('button', { name: /add/i }));
-
-		expect(onAdd).toHaveBeenCalledWith({
-			name: 'orderId',
-			fieldContext: '',
-			fieldDataType: '',
-			key: 'orderId',
-		});
-	});
-
-	it('hides the custom option when an exact suggestion exists (case-insensitive)', () => {
-		mockSuggestions(['orderId']);
-		renderOtherFields({ debouncedInputValue: 'orderid' });
-
-		// the real suggestion shows, the lowercased custom name does not
-		expect(screen.getByText('orderId')).toBeInTheDocument();
-		expect(screen.queryByText('orderid')).not.toBeInTheDocument();
-	});
-
-	it('hides the custom option when the name is already added (case-insensitive)', () => {
-		renderOtherFields({
-			debouncedInputValue: 'ORDERID',
-			addedFields: [addedField('orderId')],
-		});
-
-		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not show the custom option when allowCustomFields is off', () => {
-		renderOtherFields({
-			debouncedInputValue: 'unknown.a.b.c',
-			allowCustomFields: false,
-		});
-
-		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not show the custom option for an empty input', () => {
-		renderOtherFields({ debouncedInputValue: '   ' });
-
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('shows the custom option at the field limit but hides its Add button', () => {
-		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c', isAtLimit: true });
-
-		// same as every other row at the limit: name shown, no Add button
-		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /add/i }),
-		).not.toBeInTheDocument();
-	});
-});

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

@@ -14,10 +14,10 @@ jest.mock('providers/App/App', () => ({
 	useAppContext: (): { featureFlags: [] } => ({ featureFlags: [] }),
 }));
 
-const field = (name: string, type = '', dataType = ''): IField => ({
+const field = (name: string, type = ''): IField => ({
 	name,
 	type,
-	dataType,
+	dataType: 'string',
 });
 
 describe('useLogsTableColumns — selectColumns-order respected', () => {
@@ -51,13 +51,13 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log:*'); contextless user fields collapse to bare name.
+		// composite IDs ('log.*'); contextless user fields collapse to bare name.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
 			'service.name',
-			'log:body',
+			'log.body',
 			'request.id',
-			'log:timestamp',
+			'log.timestamp',
 		]);
 	});
 
@@ -70,14 +70,14 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log:body'.
+		// Attribute variant is its own column, not a duplicate 'log.body'.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log:body',
-			'attribute:body',
+			'log.body',
+			'attribute.body',
 		]);
-		expect(byId.get('log:body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute:body')?.enableRemove).toBe(true);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
 	});
 
 	it('applies the same distinct-column treatment to timestamp variants', () => {
@@ -91,11 +91,11 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log:timestamp',
-			'attribute:timestamp',
+			'log.timestamp',
+			'attribute.timestamp',
 		]);
-		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute:timestamp')?.enableRemove).toBe(true);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
 	});
 
 	it('skips the synthetic "id" field name', () => {
@@ -127,33 +127,15 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log:body')?.canBeHidden).toBe(false);
-		expect(byId.get('log:body')?.enableRemove).toBe(false);
-		expect(byId.get('log:timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('log.body')?.canBeHidden).toBe(false);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
 		// User-added fields stay removable. User field has type='' so composite
 		// collapses to bare name.
 		expect(byId.get('user_field')?.enableRemove).toBe(true);
 	});
 
-	it('disambiguates same-name/same-context fields by dataType (3-part id)', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('http.status_code', 'attribute', 'int64'),
-					field('http.status_code', 'attribute', 'string'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'attribute:http.status_code:int64',
-			'attribute:http.status_code:string',
-		]);
-	});
-
 	it('renders only the stateIndicator when fields is empty', () => {
 		const { result } = renderHook(() =>
 			useLogsTableColumns({

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

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

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

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

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

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

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

@@ -3,7 +3,6 @@ import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
-import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	IQuickFiltersConfig,
 	QuickFilterChangeEventData,
@@ -75,10 +74,6 @@ export default function CheckboxFilterV2(
 		searchText,
 		existingQuery,
 		metricNamespace: useFieldApis.metricNamespace,
-		source:
-			source === QuickFiltersSource.METER_EXPLORER
-				? TelemetrytypesSourceDTO.meter
-				: undefined,
 		startUnixMilli: useFieldApis.startUnixMilli,
 		endUnixMilli: useFieldApis.endUnixMilli,
 		enabled: isOpen,

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

@@ -1,11 +1,7 @@
 import { useMemo } from 'react';
 import { useGetFieldsValues } from 'api/generated/services/fields';
-import {
-	TelemetrytypesSignalDTO,
-	TelemetrytypesSourceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
 
@@ -14,7 +10,6 @@ interface UseFieldValuesProps {
 	searchText: string;
 	existingQuery?: string;
 	metricNamespace?: string;
-	source?: TelemetrytypesSourceDTO;
 	startUnixMilli?: number;
 	endUnixMilli?: number;
 	enabled: boolean;
@@ -38,7 +33,6 @@ export function useFieldValues({
 	searchText,
 	existingQuery,
 	metricNamespace,
-	source,
 	startUnixMilli,
 	endUnixMilli,
 	enabled,
@@ -52,7 +46,6 @@ export function useFieldValues({
 			searchText,
 			existingQuery,
 			metricNamespace,
-			source,
 			startUnixMilli,
 			// This field does not affect the backend but I wanted to keep it here
 			// in case we add the support in the future
@@ -82,12 +75,6 @@ export function useFieldValues({
 	}, [data]);
 
 	const allValues: string[] = useMemo(() => {
-		// Bool fields should always offer true/false.
-		// The values api returns nothing for them.
-		if (filter.attributeKey.dataType === DataTypes.bool) {
-			return ['true', 'false'];
-		}
-
 		const values = data?.data?.values;
 		if (!values) {
 			return [];
@@ -104,7 +91,7 @@ export function useFieldValues({
 				.map((value) => value.toString()) || [];
 
 		return [...stringValues, ...numberValues];
-	}, [data, filter.attributeKey.dataType]);
+	}, [data]);
 
 	return { relatedValues, allValues, isLoading, isFetching };
 }

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

@@ -4,9 +4,14 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { FieldContext, TelemetryFieldKey } from 'types/api/v5/queryRange';
+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 (
@@ -32,49 +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 } = useGetQueryKeySuggestions(
-		{
-			searchText: inputValue,
-			signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-			signalSource: isMeterDataSource ? 'meter' : '',
-		},
-		{
-			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, signal, inputValue],
-			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?.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,
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.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) {
@@ -83,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,30 +78,17 @@ 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({
 				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(
-		{ signalName: 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,24 +0,0 @@
-import { useMemo } from 'react';
-import {
-	NANO_SECOND_MULTIPLIER,
-	useLastComputedMinMax,
-} from 'store/globalTime';
-
-import { QuickFilterCheckboxUseFieldApis } from '../types';
-
-/**
- * Builds the `useFieldApis` config for a signal quick-filter page.
- * if existingQuery is sent null, related values are not fetched
- */
-export function useSignalFieldApis(): QuickFilterCheckboxUseFieldApis {
-	const { minTime, maxTime } = useLastComputedMinMax();
-
-	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`;
-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 });
 
@@ -515,7 +458,7 @@ describe('Quick Filters with custom filters', () => {
 		const requestBody = putHandler.mock.calls[0][0];
 		expect(requestBody.filters).toStrictEqual(
 			expect.arrayContaining([
-				expect.not.objectContaining({ name: FILTER_OS_DESCRIPTION }),
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
 			]),
 		);
 		expect(requestBody.signal).toBe(SIGNAL);
@@ -669,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,10 +1,5 @@
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
 
@@ -17,39 +12,6 @@ const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
-// Both maps below (and mapFieldDataType/mapFieldContext) exist only for the old
-// v3 attribute-values fetch in useCheckboxFilterValues, which is the sole reader
-// of attributeKey.dataType/type. Query/list endpoints don't consume them (v5 and
-// the API-monitoring/exceptions/infra paths all send a name-based expression).
-// Once the values fetch moves to fields/values (by name) in Phase A, this whole
-// mapping can be removed and attributeKey reduced to { id, key }.
-
-// The new field data types are rendered down to the v3 spellings the
-// attribute-values call expects, matching the backend's legacy conversion
-// (number -> float64).
-const FIELD_DATA_TYPE_TO_DATA_TYPE: Record<string, DataTypes> = {
-	[TelemetrytypesFieldDataTypeDTO.string]: DataTypes.String,
-	[TelemetrytypesFieldDataTypeDTO.bool]: DataTypes.bool,
-	[TelemetrytypesFieldDataTypeDTO.float64]: DataTypes.Float64,
-	[TelemetrytypesFieldDataTypeDTO.int64]: DataTypes.Int64,
-	[TelemetrytypesFieldDataTypeDTO.number]: DataTypes.Float64,
-};
-
-// Only tag and resource exist in the v3 attribute-type enum; other contexts
-// render as empty so the still-live v3 values path never sees a spelling it
-// can't use, matching the backend's legacy conversion.
-const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
-	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-};
-
-const mapFieldDataType = (fieldDataType?: string): DataTypes =>
-	(fieldDataType && FIELD_DATA_TYPE_TO_DATA_TYPE[fieldDataType]) ||
-	DataTypes.EMPTY;
-
-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];
@@ -64,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) {
@@ -84,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: mapFieldDataType(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/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

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

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -44,13 +44,6 @@
 			--tanstack-first-column-header-bg,
 			var(--tanstack-table-header-cell-bg, var(--l2-background))
 		) !important;
-		padding-left: var(
-			--tanstack-cell-header-padding-left-first-column,
-			var(
-				--tanstack-cell-header-padding-left-override,
-				var(--tanstack-cell-padding-left, 0.3rem)
-			)
-		);
 	}
 }
 

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -161,7 +161,7 @@
 .tableHeaderCell {
 	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
 		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: var(--tanstack-table-header-height, 36px);
+	height: 36px;
 	text-align: left;
 	font-size: 14px;
 	font-style: normal;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -664,7 +664,6 @@ function TanStackTableInner<TData, TItemKey = string>(
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
-											value ??= '10';
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
 											if (page !== 1) {

frontend/src/constants/localStorage.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -3,7 +3,6 @@ import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 
@@ -12,8 +11,6 @@ import DomainList from './Domains/DomainList';
 import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
-	const quickFilterFieldApis = useSignalFieldApis();
-
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
 	}, []);
@@ -29,7 +26,6 @@ function Explorer(): JSX.Element {
 						showFilterCollapse={false}
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
-						useFieldApis={quickFilterFieldApis}
 					/>
 				</section>
 				<DomainList />

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

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

frontend/src/container/Controls/index.tsx

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

frontend/src/container/Controls/styles.ts

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

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

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

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

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

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

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

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

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

frontend/src/container/FormAlertRules/BasicInfo.tsx

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

frontend/src/container/FormAlertRules/QuerySection.tsx

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

frontend/src/container/FormAlertRules/RuleOptions.tsx

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

frontend/src/container/FormAlertRules/index.tsx

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

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

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

frontend/src/container/FormAlertRules/utils.ts

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

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -4,9 +4,9 @@
 	gap: var(--spacing-4);
 	padding: var(--spacing-2) var(--spacing-2);
 
-	--tabs-content-padding: 0;
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-content-padding: 0;
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 }
 
 .pageError {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,8 +4,8 @@
 	height: 100%;
 	margin-top: var(--spacing-2);
 	margin-left: var(--spacing-2);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 	[role='tabpanel'] {
 		margin: 0;
 		padding: var(--spacing-0) var(--spacing-4);

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,10 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	--tabs-content-padding: 0;
+	--tab-content-padding: 0;
 	margin-top: var(--spacing-3);
-	--tabs-text-color: var(--l1-foreground);
-	--tabs-active-text-color: var(--l1-foreground);
+	--tab-text-color: var(--l1-foreground);
+	--tab-active-text-color: var(--l1-foreground);
 }
 
 .tabLabel {

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

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

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -275,7 +275,6 @@ function LiveLogsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
-					allowCustomFields
 				/>
 			)}
 		</div>

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

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

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

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

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

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

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

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

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

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

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

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

frontend/src/container/LogsExplorerChart/index.tsx

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

frontend/src/container/LogsExplorerChart/useLogsExplorerChartConfig.ts

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

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -113,7 +113,6 @@ function LogsActionsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
-					allowCustomFields
 				/>
 			)}
 		</div>

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

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

frontend/src/container/MCPServerSettings/ClientTabs/ClientTabs.styles.scss

@@ -6,8 +6,8 @@
 	}
 
 	// Remove default tab content padding/margin — the card provides spacing.
-	--tabs-content-padding: 0;
-	--tabs-content-margin: var(--spacing-4) 0 0;
+	--tab-content-padding: 0;
+	--tab-content-margin: var(--spacing-4) 0 0;
 }
 
 .mcp-client-tabs {

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -6,7 +6,6 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -32,7 +31,6 @@ import { splitQueryIntoOneChartPerQuery } from './utils';
 import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
-	const quickFilterFieldApis = useSignalFieldApis();
 	const {
 		handleRunQuery,
 		stagedQuery,
@@ -143,7 +141,6 @@ function Explorer(): JSX.Element {
 						handleFilterVisibilityChange={(): void => {
 							setShowQuickFilters(!showQuickFilters);
 						}}
-						useFieldApis={quickFilterFieldApis}
 					/>
 				</div>
 

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

@@ -296,12 +296,12 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// New order: [attribute:service.name, log:body, resource:service.name, log:timestamp]
+			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
 			result.current.config.addColumn?.onReorder([
-				'attribute:service.name:string',
-				'log:body:string',
-				'resource:service.name:string',
-				'log:timestamp',
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
 			]);
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
@@ -309,13 +309,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
+						`${c.fieldContext}.${c.name}`,
 				),
 			).toStrictEqual([
-				'attribute:service.name',
-				'log:body',
-				'resource:service.name',
-				'log:timestamp',
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
 			]);
 		});
 
@@ -329,11 +329,11 @@ describe('useOptionsMenu', () => {
 
 			result.current.config.addColumn?.onReorder([
 				'state-indicator',
-				'log:timestamp',
+				'log.timestamp',
 				'unknown.composite',
-				'log:body:string',
-				'resource:service.name:string',
-				'attribute:service.name:string',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
 			]);
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
@@ -341,13 +341,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
+						`${c.fieldContext}.${c.name}`,
 				),
 			).toStrictEqual([
-				'log:timestamp',
-				'log:body',
-				'resource:service.name',
-				'attribute:service.name',
+				'log.timestamp',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
 			]);
 		});
 
@@ -359,17 +359,17 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// Removing 'resource:service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource:service.name:string');
+			// Removing 'resource.service.name' should drop ONLY the resource variant.
+			result.current.config.addColumn?.onRemove('resource.service.name');
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const remaining = mockUpdateColumns.mock.calls[0][0];
 			expect(
 				remaining.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
+						`${c.fieldContext}.${c.name}`,
 				),
-			).toStrictEqual(['log:body', 'attribute:service.name', 'log:timestamp']);
+			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
 		});
 
 		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {