style(explorer): set the traces and logs table rows to the design's 30px

Max lines per row now accepts any whole number from 1 to 10.

.claude/rules/comments.md

@@ -4,9 +4,9 @@ Applies to everything in the repo — code, config, workflows.
 
 - **No unnecessary comments.** Do not comment where the code is self-explanatory; never restate what the code already says.
 - **Document only** non-obvious behavior, constraints, formats, and edge cases.
-- **Rationale goes in prose, not source.** Why a job exists, how a subsystem fits together: that belongs in the README or the PR. Exception: a config entry that would look like a mistake without its reason (a pinned version, a trust or lint exclusion) keeps a short reason next to it.
-- **Never remove pre-existing comments** when editing code. The bar above applies to comments you write, not comments already there. When the code a comment describes changes, update the comment; when that code is deleted, delete the comment with it.
-- **Never talk to the reviewer.** No comments about where a change came from, what was changed, or why the change is correct — that belongs in the PR description and is noise the moment it merges. A banner a skill requires (the AI-owned banner on story mocks and `tests/e2e/drivers/`) tells maintainers how the file is made; keep it.
+- **Rationale goes in prose, not source.** Why a version is pinned, why a job exists, how a subsystem fits together — that belongs in the README or the PR.
+- **Never remove pre-existing comments** when editing code. The bar above applies to comments you write, not comments already there.
+- **Never talk to the reviewer.** No comments about where a change came from, what was changed, or why the change is correct — that belongs in the PR description and is noise the moment it merges.
 - **Less is more.** When writing something intended for human consumption, (comment, commit message, reply to prompt) use as few words as possible. Pick every word meticulously to reduce the volume to a strict minimum. Be down to the point. Less is more.
 
 Language rules build on this one: [`go-comments`](go-comments.md), [`py-comments`](py-comments.md).

.claude/rules/frontend-state.md

@@ -1,40 +0,0 @@
----
-paths:
-  - "frontend/src/**/*.ts"
-  - "frontend/src/**/*.tsx"
----
-
-# Frontend state
-
-Pick the store by what the state is. Never add Redux or React Context for shared state; to move existing Redux or Context state, use the `migrate-state-management` skill ([`frontend/.claude/skills/migrate-state-management/SKILL.md`](../../frontend/.claude/skills/migrate-state-management/SKILL.md)).
-
-| State | Use | Never |
-|---|---|---|
-| Server / API data | React Query, generated hooks from `src/api/generated` | a copy in Redux, Context or Zustand |
-| Shareable: filters, time range, selection, page | nuqs (`useQueryState` with a parser) | Redux, Context, hand-parsed `useSearchParams` |
-| Global client state | a small Zustand store per domain | Redux, Context |
-| One component's UI state | `useState` / `useReducer` | any store |
-
-## Server state
-
-- Expose a query through a hook that returns its result plus memoized derived values. Never dispatch a response into another store.
-- **The query key holds every value the request reads.** A field change that alters the request (name, context, data type) must change the key; a lossy signature serves stale rows.
-
-## URL state
-
-- Keep the URL small (Chrome trims near 2k characters). No large datasets, no sensitive data.
-- **A rewrite touches only the params it owns.** Repairing or normalising one param keeps the rest (`activeLogId`, pagination) as they were.
-- **Links carry the current time range.** A row link, "open in new tab" and "copy link" land on the same period as an in-app click.
-- **A preset read from the URL applies once.** A later user change or reset must not re-apply it.
-
-## Zustand
-
-- One `create()` per module; split a large store into slice factories combined in that one `create()`.
-- Always read through a selector: `useDashboardStore((s) => s.isDashboardLocked)`, never `useDashboardStore()`.
-- Update only through `set`; never mutate state. State fields before actions in the store object.
-- Hooks never call `useStore.getState()` (`signoz/no-zustand-getstate-in-hooks`); export standalone actions instead.
-
-## Local and form state
-
-- **Editable state starts from saved data once.** Initialise the form from the saved value, then let the user own it; never re-derive it from saved data on each render.
-- **A mode switch owns its in-flight work.** While a request from one mode runs, disable the switch or drop the result when the mode changes, so it can't close or overwrite the new mode.

.claude/rules/frontend-tests.md

@@ -1,20 +0,0 @@
----
-paths:
-  - "frontend/src/**/*.test.ts"
-  - "frontend/src/**/*.test.tsx"
----
-
-# Frontend tests
-
-Examples and the harness API live in [`frontend/src/tests/README.md`](../../frontend/src/tests/README.md).
-
-- **Import from the harness.** `render`, `screen`, `userEvent`, `waitFor` and the rest come from `tests/test-utils`, never from `@testing-library/react`. The harness mounts the router, React Query, Redux, app context and preferences. When it can't do what a test needs, extend `tests/test-utils` instead of importing around it.
-- **Find elements by test ID.** Query with `getByTestId`/`findByTestId` on the `data-testid` or `testId` the component exposes, and add one to the component when it has none. Fall back to role or text only for markup the app doesn't own. A test ID matches exactly one element and survives copy and markup changes; `getByRole` computes the accessibility tree on every call and is the slowest query.
-- **Interact like a user.** `const user = userEvent.setup({ pointerEventsCheck: 0 })`, then an awaited `user.click`, `hover`, `keyboard` or `type`. `fireEvent` only for events `userEvent` has no equivalent for: scroll, resize, setting `scrollTop`.
-- **Fake timers per test only**, for debounce or throttle, with `userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) })`. Never global.
-- **Network through MSW.** The global server runs for every test; override per test with `server.use(...)` from `mocks-server/server`. Large fixtures go in `mocks-server/__mockdata__`.
-- **Router through the harness.** Pass `initialRoute`/`routePath` to `render` and assert with `getCurrentLocation()` from `lib/router/navigation`. Never mock `react-router`, `react-router-dom` or `lib/history`; when a test can't render at a route, use the `lib/router` spies in `tests/router-mocks`.
-- **Mock only business boundaries.** Local `jest.mock` for API modules, custom hooks and domain components. Never re-mock what the harness provides or what `jest.config.ts` maps (`uplot`, `@signozhq/icons`, `useSafeNavigate`, `logEvent`).
-- **Type mocks and fixtures.** `jest.mocked(fn)` for module mocks, `jest.fn() as jest.MockedFunction<T>` for a standalone mock you configure or assert on. Fixtures carry their real type, from `src/api/generated` where it exists. No `any`, no `as unknown as`. An inline `onX={jest.fn()}` on a typed prop that is never asserted needs no annotation.
-- **A test fails without its change.** Revert the change, or break the line under test, and run the test before you finish: it must fail. Assert the specific outcome (exact text, request payload, call arguments), never only that an element exists.
-- **No limit on tests per file.** Split a file when it mixes unrelated behaviour, not to hit a count.

.claude/rules/log-body.md

@@ -1,15 +0,0 @@
----
-paths:
-  - "frontend/src/**/*.ts"
-  - "frontend/src/**/*.tsx"
----
-
-# Log body
-
-`ILog.body` is `string | ILogBody`. On `use_json_body` tenants the API sends an object, and the collector wraps a plain-string body into `{ message }`. Every read goes through `frontend/src/lib/logs/logBody.ts`.
-
-- **Read with a getter, never directly.** `getBodyDisplay` for a list cell or a log line, `getBodyMessage` for the drawer header. Both accept `undefined` and collapse a `{message}`-only object to its message.
-- **Never cast or stringify a body inline.** No `as string`, no `String(log.body)`, no `JSON.stringify(log.body)`, no `typeof body === 'string' ? … : …` outside the module. The v5 converter collapses `{ message }` once with `extractOnlyMessageBody`; live logs and the dashboard list panel skip the converter, so their rows carry the raw object and only a getter renders them right.
-- **Resolve a selected field with `getLogFieldValue`** from `lib/logs/flatLogData.ts`, so a `body.<key>` column works on both string and object bodies. An object value renders as JSON and is not offered as an add-to-query filter.
-- **The drawer tree and field lookup are the only places that use the raw value.** Everything else renders a string from a getter.
-- **Review check.** A raw body value used outside a getter call, `extractOnlyMessageBody` in the converter, `flatLogData.ts` and `LogDetailedView/utils.tsx` is a finding.

.claude/rules/pull-requests.md

@@ -9,6 +9,3 @@
 - **Keep the commit body short and human readable** focused on decision made if any. Commit body must not re-iterate the changes done, skip if title is sufficient in conveying the change.
 - **Use convensional commit format** for commits and PR title.
 - **Do not amend the commits once pushed.** Always create a new commit once changes are pushed to remote.
-- **Review fixes are new commits too.** A force push hides what changed from human reviewers and makes Greptile post its findings again. Bring in `main` with a merge; only a stacked branch (`gh stack`) rebases, since the stack moves as a unit.
-- **Answer every Greptile thread.** Reply with the commit that fixes it (`Fixed in 4df6f3198d: <what changed>`) or the reason it stays, then resolve. Never resolve one with neither: Greptile withdraws a finding, and remembers it, only when told why.
-- **Leave human review threads to the author.** Fix the code they ask for, but never reply to or resolve a human reviewer's thread.

.claude/rules/storybook.md

@@ -10,9 +10,6 @@ Page stories are written with the `signoz-page-story` skill ([`.claude/skills/si
 - **A UI change lands with its story.** Any change that alters what a page renders — a new page, a new state, a new branch, a changed layout — updates the story of every page that renders it, or creates one where the page has none. Go through the `signoz-page-story` skill; never hand-write a page story outside it.
 - **New page, new story. New state, new control or variant.** The skill decides which: a control on a response, a variant worth linking to, or a `play` story for a state only a click reaches.
 - **A shared component is covered through its pages.** A change under `components/` or `container/` with no story of its own updates the stories of the pages that render it.
-- **Plays live with the mocks.** A `play` is a named function exported from `stories/__story_mockdata__/<page>.play.ts`, which is collapsed for review like the rest of the AI-owned mocks. The story file only names it: `play: openEditDrawer`. A story file that still holds play bodies moves them there the first time you edit it.
-- **A play passes for every control value.** Branch each check on the args it depends on (panel kind, data state, row count, hidden header). A value the page supports must never fail the play.
-- **Mocks answer every request a reachable state makes.** Selecting a row, opening a view or switching a tab that fetches more hits a handler, never the 501 catch-all.
 - **Already covered, say so.** When the existing story and its controls already reach the changed state, no story edit is needed; state that in the PR description.
 - **Opt out only when there is no visual diff.** Skip stories only when the change renders nothing differently: types, api clients, hooks with no UI branch, tests. Deleting a page deletes its stories.
 - **Prove it with a visual diff when asked.** Before/after screenshots and "did this touch other screens" go through `sbshot-visual-diff`, which can only show what a story renders.

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

@@ -115,8 +115,8 @@ await expect(toggle.getAttribute('aria-checked')).toBe(before);
 - **A variant earns a story only when it is worth linking to**: an empty workspace, a viewer, a page mid-load. Everything else stays a control.
 - **Endpoints the page owns go through `response.json`**, so the Data control covers loaded, loading and failed in one declaration. Endpoints the page cannot render without (ingestion detection, preferences, feature payloads) take a plain resolver so the shell survives the loading and error states.
 - **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param navigation works inside a story; a different pathname is blocked and reported by the overlay. A control for a param is worth it only when the param is a page mode someone would want to flip.
-- **File layout**: every story file for a page lives under `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`, payload builders in `stories/__story_mockdata__/<page>.ts`, play functions in `stories/__story_mockdata__/<page>.play.ts`. Nothing page-specific in `src/storybook/controls/`. A page that is a tab strip over several routes gets one story file per tab, in its own folder under the module page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its own mocks and `__story_mockdata__/`; the builders more than one tab needs stay in the module page's own `stories/__story_mockdata__/` (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab strip is there, and the `route` its mocks return decides which tab is open. A page's permission stories go one level further down, in `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see **Permission stories**.
-- **A state only a click reaches is a story with a `play` function**, not a control: a drawer, a modal, an edit mode the page holds in component state. Drive it with `userEvent` and the queries from `storybook/test`, take the first of a repeated row action, and wait on the state's own text. The page fetches before it renders a row, so the finder needs a timeout past the 1s default. The play is a named function exported from `__story_mockdata__/<page>.play.ts` and the story file only names it (`play: openEditDrawer`), so the reviewer reads states, not clicks; a story file that still holds play bodies moves them there the first time you edit it. It branches every check on the args it depends on: a control value the page supports never fails it. A state the app drops again on its own, such as one keyed on an array identity that a refetch replaces, does not get a story: it would not survive being looked at. A _sequence_ of such states, a wizard's steps or a questionnaire's pages, is still a control: declare the steps in the mocks module and walk them from a `play` on the meta that destructures `mount`, which is what makes Storybook replay it on an arg change. See [references/controls.md](references/controls.md).
+- **File layout**: every story file for a page lives under `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`, payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing page-specific in `src/storybook/controls/`. A page that is a tab strip over several routes gets one story file per tab, in its own folder under the module page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its own mocks and `__story_mockdata__/`; the builders more than one tab needs stay in the module page's own `stories/__story_mockdata__/` (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab strip is there, and the `route` its mocks return decides which tab is open. A page's permission stories go one level further down, in `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see **Permission stories**.
+- **A state only a click reaches is a story with a `play` function**, not a control: a drawer, a modal, an edit mode the page holds in component state. Drive it with `userEvent` and the queries from `storybook/test`, take the first of a repeated row action, and wait on the state's own text. The page fetches before it renders a row, so the finder needs a timeout past the 1s default. A state the app drops again on its own, such as one keyed on an array identity that a refetch replaces, does not get a story: it would not survive being looked at. A _sequence_ of such states, a wizard's steps or a questionnaire's pages, is still a control: declare the steps in the mocks module and walk them from a `play` on the meta that destructures `mount`, which is what makes Storybook replay it on an arg change. See [references/controls.md](references/controls.md).
 - **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file under a `__story_mockdata__/` open with this banner, above the imports:
 
   ```ts
@@ -143,8 +143,6 @@ await expect(toggle.getAttribute('aria-checked')).toBe(before);
 - [ ] a page tagged `authz` has its `Authz` folder: one story per permission it reads, each reached by `revoked`, none of them a role preset, and each one checked by the `disabled` state of what the permission gates
 - [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
 - [ ] every control flipped once, its effect seen on screen
-- [ ] every play passes with each control value its story exposes, and the story file holds no play body
-- [ ] every request a reachable state makes (a selected row, an opened view, a switched tab) has a handler
 - [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled request, no React warning
 - [ ] no navigation overlay on mount
 - [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`, `pnpm exec oxfmt --check <files>` all clean. The repo has no prettier: `pnpm exec prettier` prints a pass while exiting 254

.github/CODEOWNERS

@@ -24,7 +24,7 @@ go.mod @therealpandey
 /pkg/config/ @therealpandey
 /pkg/errors/ @therealpandey
 /pkg/factory/ @therealpandey
-/pkg/types/ @therealpandey @srikanthccv
+/pkg/types/ @therealpandey
 /pkg/valuer/ @therealpandey
 /cmd/ @therealpandey
 .golangci.yml @therealpandey
@@ -136,7 +136,7 @@ go.mod @therealpandey
 
 # Integration tests
 
-/tests/integration/ @therealpandey @srikanthccv
+/tests/integration/ @therealpandey
 
 # e2e tests
 /tests/e2e/ @AshwinBhatkal
@@ -302,8 +302,3 @@ go.mod @therealpandey
 /frontend/.storybook/ @H4ad
 /frontend/src/storybook/ @H4ad
 /.claude/skills/signoz-page-story/ @H4ad
-
-## AI Assistant
-/frontend/src/container/AIAssistant/ @SigNoz/nerve @SigNoz/frontend-maintainers
-/frontend/src/hooks/aiAssistant/ @SigNoz/nerve @SigNoz/frontend-maintainers
-/frontend/src/pages/AIAssistantPage/ @SigNoz/nerve @SigNoz/frontend-maintainers

frontend/.cursor/rules/state-management.mdc

@@ -0,0 +1,97 @@
+---
+globs: **/*.store.ts
+alwaysApply: false
+---
+# State Management: React Query, nuqs, Zustand
+
+Use the following stack. Do **not** introduce or recommend Redux or React Context for shared/global state.
+
+## Server state → React Query
+
+- **Use for:** API responses, time-series data, caching, background refetch, retries, stale/refresh.
+- **Do not use Redux/Context** to store or mirror data that comes from React Query (e.g. do not dispatch API results into Redux).
+- Prefer generated React Query hooks from `frontend/src/api/generated` when available.
+- Keep server state in React Query; expose it via hooks that return the query result (and optionally memoized derived values). Do not duplicate it in Redux or Context.
+
+```tsx
+// ✅ GOOD: single source of truth from React Query
+export function useAppStateHook() {
+  const { data, isError } = useQuery(...)
+  const memoizedConfigs = useMemo(() => ({ ... }), [data?.configs])
+  return { configs: memoizedConfigs, isError, ... }
+}
+
+// ❌ BAD: copying React Query result into Redux
+dispatch({ type: UPDATE_LATEST_VERSION, payload: queryResponse.data })
+```
+
+## URL state → nuqs
+
+- **Use for:** shareable state, filters, time range, selected values, pagination, view state that belongs in the URL.
+- **Do not use Redux/Context** for state that should be shareable or reflected in the URL.
+- Use [nuqs](https://nuqs.dev/docs/basic-usage) for typed, type-safe URL search params. Avoid ad-hoc `useSearchParams` encoding/decoding.
+- Keep URL payload small; respect browser URL length limits (e.g. Chrome ~2k chars). Do not put large datasets or sensitive data in query params.
+
+```tsx
+// ✅ GOOD: nuqs for filters / time range / selection
+const [timeRange, setTimeRange] = useQueryState('timeRange', parseAsString.withDefault('1h'))
+const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))
+
+// ❌ BAD: Redux/Context for shareable or URL-synced state
+const { timeRange } = useContext(SomeContext)
+```
+
+## Client state → Zustand
+
+- **Use for:** global/client state, cross-component state, feature flags, complex or large client objects (e.g. dashboard state, query builder state).
+- **Do not use Redux or React Context** for global or feature-level client state.
+- Prefer small, domain-scoped stores (e.g. DashboardStore, QueryBuilderStore).
+
+### Zustand best practices (align with eslint-plugin-zustand-rules)
+
+- **One store per module.** Do not define multiple `create()` calls in the same file; use one store per module (or compose slices into one store).
+- **Always use selectors.** Call the store hook with a selector so only the used slice triggers re-renders. Never use `useStore()` with no selector.
+
+```tsx
+// ✅ GOOD: selector — re-renders only when isDashboardLocked changes
+const isLocked = useDashboardStore(state => state.isDashboardLocked)
+
+// ❌ BAD: no selector — re-renders on any store change
+const state = useDashboardStore()
+```
+
+- **Never mutate state directly.** Update only via `set` or `setState` (or `getState()` + `set` for reads). No `state.foo = x` or `state.bears += 1` inside actions.
+
+```tsx
+// ✅ GOOD: use set
+increment: () => set(state => ({ bears: state.bears + 1 }))
+
+// ❌ BAD: direct mutation
+increment: () => { state.bears += 1 }
+```
+
+- **State properties before actions.** In the store object, list all state fields first, then action functions.
+- **Split into slices when state is large.** If a store has many top-level properties (e.g. more than 5–10), split into slice factories and combine with one `create()`.
+
+```tsx
+// ✅ GOOD: slices for large state
+const createBearSlice = set => ({ bears: 0, addBear: () => set(s => ({ bears: s.bears + 1 })) })
+const createFishSlice = set => ({ fish: 0, addFish: () => set(s => ({ fish: s.fish + 1 })) })
+const useStore = create(set => ({ ...createBearSlice(set), ...createFishSlice(set) }))
+```
+
+- **In projects using Zustand:** add `eslint-plugin-zustand-rules` and extend `plugin:zustand-rules/recommended` to enforce these rules automatically.
+
+## Local state → React state only
+
+- **Use useState/useReducer** for: component-local UI state, form inputs, toggles, hover state, data that never leaves the component.
+- Do not use Zustand, Redux, or Context for state that is purely local to one component or a small subtree.
+
+## Summary
+
+| State type        | Use              | Avoid              |
+|-------------------|------------------|--------------------|
+| Server / API      | React Query      | Redux, Context     |
+| URL / shareable   | nuqs             | Redux, Context     |
+| Global client     | Zustand          | Redux, Context     |
+| Local UI          | useState/useReducer | Zustand, Redux, Context |

frontend/.cursor/rules/testing-conventions.mdc

@@ -0,0 +1,74 @@
+---
+description: Core testing conventions - imports, rendering, MSW, interactions, queries
+globs: **/*.test.{ts,tsx}
+alwaysApply: false
+---
+
+# Testing Conventions
+
+## Imports
+
+Always import from the test harness, never directly from `@testing-library/react`:
+
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+```
+
+## Router
+
+Use the built-in router in `render`:
+
+```ts
+render(<Page />, undefined, { initialRoute: '/traces-explorer' });
+```
+
+Only mock `useLocation` / `useParams` if the test depends on their values.
+
+## MSW
+
+Global MSW server runs automatically. Override per-test:
+
+```ts
+server.use(
+  rest.get('*/api/v1/foo', (_req, res, ctx) =>
+    res(ctx.status(200), ctx.json({ ok: true })))
+);
+```
+
+Keep large response fixtures in `mocks-server/__mockdata_`.
+
+## Interactions
+
+- Prefer `userEvent` for real user interactions (click, type, select, tab).
+- Use `fireEvent` only for low-level events not covered by `userEvent` (e.g., scroll, resize). Wrap in `act(...)` if needed.
+- Always `await` interactions:
+
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save/i }));
+```
+
+## Timers
+
+No global fake timers. Per-test only, for debounce/throttle:
+
+```ts
+jest.useFakeTimers();
+const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
+await user.type(screen.getByRole('textbox'), 'query');
+jest.advanceTimersByTime(400);
+jest.useRealTimers();
+```
+
+## Queries
+
+Prefer accessible queries: `getByRole` > `findByRole` > `getByLabelText` > visible text > `data-testid` (last resort).
+
+## Anti-patterns
+
+- Never import from `@testing-library/react` directly
+- Never use global fake timers
+- Never wrap `render` in `act(...)`
+- Never mock infra dependencies locally (router, react-query)
+- Limit to 3-5 focused tests per file

frontend/.cursor/rules/testing-mock-strategy.mdc

@@ -0,0 +1,54 @@
+---
+description: When to use global vs local mocks in tests
+globs: **/*.test.{ts,tsx}
+alwaysApply: false
+---
+
+# Mock Strategy
+
+## Use Global Mocks For
+
+High-frequency dependencies (20+ test files):
+- Core infrastructure: react-router-dom, react-query, antd
+- Browser APIs: ResizeObserver, matchMedia, localStorage
+- Utility libraries: date-fns, lodash
+
+Available global mock files (from jest.config.ts):
+- `uplot` -> `__mocks__/uplotMock.ts`
+
+## Use Local Mocks For
+
+- Business logic dependencies (API endpoints, custom hooks, domain components)
+- Test-specific behavior (different data per test, error scenarios, loading states)
+
+## Decision Tree
+
+```
+Used in 20+ test files?
+  YES -> Global mock
+  NO  -> Business logic or test-specific?
+    YES -> Local mock
+    NO  -> Consider global if usage grows
+```
+
+## Correct Usage
+
+```ts
+// Global mocks are already available - just import
+import { useLocation } from 'react-router-dom';
+
+// Local mocks for business logic
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => mockTracesData),
+}));
+```
+
+## Anti-patterns
+
+```ts
+// Never re-mock globally mocked dependencies locally
+jest.mock('react-router-dom', () => ({ ... }));
+
+// Never put test-specific data in global mocks
+jest.mock('../api/tracesService', () => ({ getTraces: jest.fn(() => specificTestData) }));
+```

frontend/.cursor/rules/testing-type-safety.mdc

@@ -0,0 +1,54 @@
+---
+description: TypeScript type safety requirements for Jest tests
+globs: **/*.test.{ts,tsx}
+alwaysApply: false
+---
+
+# TypeScript Type Safety in Tests
+
+All Jest tests must be fully type-safe. Never use `any`.
+
+## Mock Function Typing
+
+```ts
+// Use jest.mocked for module mocks
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+
+// Use jest.MockedFunction for standalone mocks
+const mockFetch = jest.fn() as jest.MockedFunction<(id: number) => Promise<User>>;
+```
+
+## Mock Data
+
+Define interfaces for all mock data:
+
+```ts
+const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
+
+const mockProps: ComponentProps = {
+  title: 'Test',
+  data: [mockUser],
+  onSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
+};
+```
+
+## Hook Mocking Pattern
+
+```ts
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+mockUseFoo.mockReturnValue(/* minimal shape */);
+```
+
+Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
+
+## Checklist
+
+- All mock functions use `jest.MockedFunction<T>` or `jest.mocked()`
+- All mock data has proper interfaces
+- No `any` types in test files
+- Component props are typed
+- API response types are defined

frontend/.cursor/rules/ui-components-and-icons.mdc

@@ -0,0 +1,19 @@
+---
+description: Prefer SigNoz UI and icons across frontend code
+globs: **/*.{ts,tsx,js,jsx}
+alwaysApply: true
+---
+
+# UI Components and Icons Source of Truth
+
+For all frontend implementation work in this repository:
+
+- Always use UI primitives/components from `@signozhq/ui`.
+- Always use icons from `@signozhq/icons`.
+- Do not introduce new usage of icon libraries directly (for example `lucide-react`) in app code.
+- Do not mix multiple component systems for the same UI surface when an equivalent exists in `@signozhq/ui`.
+
+## Migration guidance
+
+- If touching a file that already uses non-`@signozhq/icons` icons, prefer migrating that file to `@signozhq/icons` as part of the same change when practical.
+- If a required component or icon is missing from SigNoz packages, call this out explicitly in the PR/summary before introducing alternatives.

frontend/.cursor/skills/migrate-state-management/SKILL.md

@@ -146,5 +146,5 @@ Do not use Zustand, Redux, or Context for purely local UI state.
 
 ## Additional resources
 
-- Project rule: [.claude/rules/frontend-state.md](../../../../.claude/rules/frontend-state.md)
+- Project rule: [.cursor/rules/state-management.mdc](../../rules/state-management.mdc)
 - Detailed patterns and rationale: [reference.md](reference.md)

frontend/AGENTS.md

@@ -25,24 +25,15 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
   - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
-- UI primitives come from `@signozhq/ui` (subpath imports) and icons from `@signozhq/icons`. No new `antd` component or direct icon library (`lucide-react`) where `@signozhq/ui` has an equivalent; `signoz/no-antd-components` enforces part of this list.
-  - Exception: a control added beside `antd` siblings of the same kind (a tab in an `antd` tab strip) matches them until that surface migrates. Say so in the PR.
-  - When `@signozhq/ui` or `@signozhq/icons` lacks what you need, say so in the PR before reaching for another library.
 - Before styling a `@signozhq/ui` component, check its props in `node_modules/@signozhq/ui/dist/<component>/*.d.ts` for `className`/`style` support; some omit them. Avoid overriding the component's CSS vars unless explicitly needed.
 - When writing code that could need authorization checks, read ./src/lib/authz/README.md
-  - A flow that gains a request also gates on that request's permission: a rename that now reads the view first needs `read` as well as `update`.
-- Identity keys (legend groups, color groups, CSV headers, React keys) come from structured values, never from joined display text: `['us, east', 'prod']` and `['us', 'east, prod']` both join to `us, east, prod`.
-- A payload saved under another kind or schema copies only the fields that schema accepts, and drops bindings to columns the user removed. The server rejects unknown or stale fields, so the preview works and the save fails.
 
-3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. Run these checks once all changes of a task are done, never after each edit. You are FORBIDDEN from reporting a task as complete until you have:
+3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`
 - Run `pnpm lint:js --quiet` to find critical errors
 - Run `pnpm oxlint <file1> <file2>` and fix all warnings
 - Run `pnpm build`
-- Find if the file has tests for it, or if there's `__test__` folder or the parent folder has tests, and run. Run them before coding the change or after all changes, never in between.
-- For e2e, run only the specs you added or changed: the stack is heavy. Leave the full jest and e2e suites to CI unless the user asks.
-- For every test you added or changed, revert the change it covers and confirm the test fails
-- On a stacked branch (`gh stack`), run `pnpm tsgo --noEmit` on every branch above it before pushing: a renamed prop or moved export breaks them
+- Find if the file has tests for it, or if there's `__test__` folder or the parent folder has tests, and run. 
 - Fixed ALL resulting errors
 
 4. BEHAVIOR CHANGE DETECTION: When modifying existing behavior:
@@ -50,14 +41,6 @@ You are operating within a constrained context window and strict system prompts.
 - Update test assertions to match new behavior
 - If no tests exist, add them BEFORE changing behavior
 
-## Repo Rules
-
-Claude Code loads `../.claude/rules/` on its own. Other agents read the matching file before editing:
-- Every file: [comments](../.claude/rules/comments.md), [pull requests](../.claude/rules/pull-requests.md)
-- `src/**/*.ts(x)` that holds state, a query, URL params or a form: [frontend state](../.claude/rules/frontend-state.md)
-- `*.test.ts(x)`: [frontend tests](../.claude/rules/frontend-tests.md)
-- `*.tsx` that changes what a page renders: [storybook](../.claude/rules/storybook.md)
-
 ## Context Management
 
 1. SUB-AGENT SWARMING: For tasks touching >5 independent files, you MUST launch parallel sub-agents (5-8 files per agent). Each agent gets its own context window. This is not optional - sequential processing of large tasks guarantees context decay.

frontend/package.json

@@ -80,7 +80,7 @@
     "crypto-js": "4.2.0",
     "d3-hierarchy": "3.1.2",
     "dayjs": "^1.10.7",
-    "dompurify": "3.4.17",
+    "dompurify": "3.4.15",
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
     "history": "4.10.1",
@@ -200,17 +200,17 @@
     "oxfmt": "0.73.0",
     "oxlint": "1.88.0",
     "oxlint-tsgolint": "7.0.2004",
-    "postcss": "8.5.32",
+    "postcss": "8.5.26",
     "postcss-scss": "4.0.9",
     "react-resizable": "3.0.4",
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
-    "sharp": "0.35.5",
+    "sharp": "0.35.4",
     "storybook": "10.6.3",
     "stylelint": "17.15.0",
     "svgo": "4.1.0",
     "ts-jest": "29.4.15",
-    "typescript-plugin-css-modules": "5.3.0",
+    "typescript-plugin-css-modules": "5.2.0",
     "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",

frontend/pnpm-workspace.yaml

@@ -37,9 +37,9 @@ overrides:
  cookie@<0.7.0: '>=0.7.1 <1'
  # via: @grafana/data@11.6.15 (3.4.0/3.2.4 exact);
  #      @monaco-editor/react > monaco-editor@0.55.1 (3.2.7 exact)
- # remove: blocked. The direct dep is already on 3.4.17, but @grafana/data
+ # remove: blocked. The direct dep is already on 3.4.15, but @grafana/data
  #         (latest 13.1.0) and monaco-editor (latest 0.55.1) still pin vulnerable versions
- dompurify@<=3.4.16: '>=3.4.17 <4'
+ dompurify@<=3.4.12: '>=3.4.13 <4'
  # via: rolldown-vite@7.3.1 (esbuild ^0.27.0); ts-jest@29.4.9 (~0.27.4)
  # remove: blocked on rolldown-vite (7.3.1 is latest, still ^0.27.0);
  #         orval >=8.20.0 and ts-jest >=29.4.11 already fixed on their side
@@ -60,10 +60,17 @@ overrides:
  #      @commitlint/cli > @commitlint/load > cosmiconfig@9 (^4.1.0)
  # remove: blocked, both consumers cap js-yaml at ^4 and only 4.3.2 carries the fix
  'js-yaml@>=4.0.0 <4.3.2': '>=4.3.2 <5'
+ # via: typescript-plugin-css-modules@5.2.0 (less ^4.2.0) > less@4.4.0 (image-size ~0.5.0)
+ # remove: bump typescript-plugin-css-modules once it floors less itself; image-size has
+ #         no patched release at all, so dropping the dep is the only fix — less@4.5.0 did
+ less@<4.5.0: '>=4.5.0 <5'
+ # via: direct dep postcss (nanoid ^3.3.17)
+ # remove: blocked — postcss 8.5.26 (latest) caps nanoid at ^3, fix landed in 3.3.18
+ nanoid@<3.3.18: '>=3.3.18 <4'
  # via: react-syntax-highlighter@15.5.0 (prismjs ^1.27.0 + refractor@3 ~1.27.0 tilde-pinned)
  # remove: bump react-syntax-highlighter to >=16.1.1 (prismjs ^1.30.0, refractor@5)
  prismjs@<1.30.0: '>=1.30.0 <2'
- # via: typescript-plugin-css-modules@5.3.0 > postcss-modules-local-by-default@4.2.0
+ # via: typescript-plugin-css-modules@5.2.0 > postcss-modules-local-by-default@4.2.0
  #      (postcss-selector-parser ^7.0.0)
  # remove: blocked, 4.2.0 is latest and the range is open, so the floor is what pulls the fix
  postcss-selector-parser@>=7.1.0 <7.1.3: '>=7.1.3 <8'

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

@@ -1,4 +1,3 @@
-import { extractOnlyMessageBody } from 'lib/logs/logBody';
 import { cloneDeep, isEmpty } from 'lodash-es';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
@@ -282,6 +281,19 @@ function convertScalarWithFormatForWeb(
 	});
 }
 
+function extractOnlyMessageBody(body: unknown): unknown {
+	const isJsonBody = body && typeof body === 'object' && !Array.isArray(body);
+	if (isJsonBody) {
+		const keys = Object.keys(body);
+		const hasOnlyMessageKey = keys.length === 1 && keys[0] === 'message';
+		if (hasOnlyMessageKey) {
+			const { message } = body as { message: unknown };
+			return typeof message === 'string' ? message : JSON.stringify(message);
+		}
+	}
+	return body;
+}
+
 /**
  * Converts V5 RawData to legacy format
  */

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -29,8 +29,8 @@ export default function WaitlistFragment({
 
 		setIsSubmitting(true);
 
-		logEvent('Infra Monitoring: Get early access clicked', {
-			entityType,
+		logEvent('Infra Monitoring: Get Early Access Clicked', {
+			entity_type: entityType,
 			userEmail: user.email,
 		})
 			.then(() => {

frontend/src/components/LogDetail/index.tsx

@@ -9,6 +9,7 @@ import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicat
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
@@ -22,7 +23,6 @@ import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { getBodyMessage } from 'lib/logs/logBody';
 import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
@@ -33,6 +33,8 @@ import {
 	TextSelect,
 	X,
 } from '@signozhq/icons';
+import { useAppContext } from 'providers/App/App';
+import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
@@ -65,6 +67,10 @@ function LogDetailInner({
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
 
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
@@ -167,7 +173,20 @@ function LogDetailInner({
 		}
 	};
 
-	const logBody = useMemo(() => getBodyMessage(log?.body), [log?.body]);
+	const logBody = useMemo(() => {
+		if (!isBodyJsonQueryEnabled) {
+			return (log?.body as string) ?? '';
+		}
+		// Feature enabled: body is always a map; message is always a string
+		const bodyObj = log?.body as ILogBody;
+		if (!bodyObj) {
+			return '';
+		}
+		if (bodyObj.message) {
+			return bodyObj.message;
+		}
+		return JSON.stringify(bodyObj);
+	}, [isBodyJsonQueryEnabled, log?.body]);
 
 	const htmlBody = useMemo(
 		() => ({

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import { OPERATORS } from 'constants/queryBuilder';
 import { FontSize } from 'container/OptionsMenu/types';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { ScalarFieldValue } from 'utils/stringUtils';
 
 import './AddToQueryHOC.styles.scss';
 
@@ -41,10 +40,10 @@ function AddToQueryHOC({
 
 export interface AddToQueryHOCProps {
 	fieldKey: string;
-	fieldValue: ScalarFieldValue;
+	fieldValue: string;
 	onAddToQuery: (
 		fieldKey: string,
-		fieldValue: ScalarFieldValue,
+		fieldValue: string,
 		operator: string,
 		dataType?: DataTypes,
 	) => void;

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

@@ -5,19 +5,19 @@ import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsBodyJsonEnabled } from 'hooks/logs/useIsBodyJsonEnabled';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
-import { FlatLogData, getLogFieldValue } from 'lib/logs/flatLogData';
-import { getBodyDisplay } from 'lib/logs/logBody';
+import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { coerceToString, isScalarFieldValue } from 'utils/stringUtils';
 
 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
@@ -26,6 +26,7 @@ import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from '../LogStateIndicator/utils';
 // styles
 import { Container, LogContainer, LogText } from './styles';
+import { isValidLogField } from './util';
 
 import './ListLogView.styles.scss';
 
@@ -36,9 +37,8 @@ interface LogFieldProps {
 	fontSize: FontSize;
 }
 
-type LogSelectedFieldProps = Omit<LogFieldProps, 'linesPerRow' | 'fieldValue'> &
-	Pick<AddToQueryHOCProps, 'fieldValue'> &
-	Partial<Pick<AddToQueryHOCProps, 'onAddToQuery'>>;
+type LogSelectedFieldProps = Omit<LogFieldProps, 'linesPerRow'> &
+	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
 
 function LogGeneralField({
 	fieldKey,
@@ -75,35 +75,27 @@ function LogSelectedField({
 	onAddToQuery,
 	fontSize,
 }: LogSelectedFieldProps): JSX.Element {
-	const fieldKeyText = (
-		<Typography.Text>
-			<span
-				style={{ color: blue[4] }}
-				className={cx('selected-log-field-key', fontSize)}
-			>
-				{fieldKey}
-			</span>
-		</Typography.Text>
-	);
-
 	return (
 		<div className="log-selected-fields">
-			{onAddToQuery ? (
-				<AddToQueryHOC
-					fieldKey={fieldKey}
-					fieldValue={fieldValue}
-					onAddToQuery={onAddToQuery}
-					fontSize={fontSize}
-				>
-					{fieldKeyText}
-				</AddToQueryHOC>
-			) : (
-				fieldKeyText
-			)}
+			<AddToQueryHOC
+				fieldKey={fieldKey}
+				fieldValue={fieldValue}
+				onAddToQuery={onAddToQuery}
+				fontSize={fontSize}
+			>
+				<Typography.Text>
+					<span
+						style={{ color: blue[4] }}
+						className={cx('selected-log-field-key', fontSize)}
+					>
+						{fieldKey}
+					</span>
+				</Typography.Text>
+			</AddToQueryHOC>
 			<Typography.Text truncate={1} className={cx('selected-log-kv', fontSize)}>
 				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
 				<span className={cx('selected-log-value', fontSize)}>
-					{coerceToString(fieldValue) || "''"}
+					{fieldValue || "''"}
 				</span>
 			</Typography.Text>
 		</div>
@@ -138,7 +130,6 @@ function ListLogView({
 	onClearActiveLog,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
-	const isBodyJsonEnabled = useIsBodyJsonEnabled();
 
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		logData.id,
@@ -209,7 +200,7 @@ function ListLogView({
 							{updatedSelecedFields.some((field) => field.name === 'body') && (
 								<LogGeneralField
 									fieldKey="Log"
-									fieldValue={getBodyDisplay(logData.body)}
+									fieldValue={getBodyDisplayString(logData.body)}
 									linesPerRow={linesPerRow}
 									fontSize={fontSize}
 								/>
@@ -231,22 +222,17 @@ function ListLogView({
 
 							{updatedSelecedFields
 								.filter((field) => !['timestamp', 'body'].includes(field.name))
-								.map((field) => {
-									const value = getLogFieldValue(logData, field.name, isBodyJsonEnabled);
-									if (value == null) {
-										return null;
-									}
-									const queryValue = isScalarFieldValue(value) ? value : undefined;
-									return (
+								.map((field) =>
+									isValidLogField(flattenLogData[field.name] as never) ? (
 										<LogSelectedField
 											key={field.name}
 											fieldKey={field.name}
-											fieldValue={queryValue ?? coerceToString(value)}
-											onAddToQuery={queryValue === undefined ? undefined : onAddToQuery}
+											fieldValue={flattenLogData[field.name] as never}
+											onAddToQuery={onAddToQuery}
 											fontSize={fontSize}
 										/>
-									);
-								})}
+									) : null,
+								)}
 						</LogContainer>
 					</div>
 				</div>

frontend/src/components/Logs/ListLogView/util.ts

@@ -0,0 +1 @@
+export const isValidLogField = (value: never): boolean => value !== undefined;

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

@@ -9,16 +9,16 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsBodyJsonEnabled } from 'hooks/logs/useIsBodyJsonEnabled';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { getLogFieldValue } from 'lib/logs/flatLogData';
-import { getBodyDisplay } from 'lib/logs/logBody';
-import { isBoolean, isEmpty, isNumber, isUndefined } from 'lodash-es';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { isEmpty, isNumber, isUndefined } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { coerceToString } from 'utils/stringUtils';
 
 import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
@@ -46,7 +46,7 @@ function RawLogView({
 		isLogsExplorerPage,
 		onLogCopy,
 	} = useCopyLogLink(data.id);
-	const isBodyJsonEnabled = useIsBodyJsonEnabled();
+	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
@@ -60,16 +60,15 @@ function RawLogView({
 
 	const attributesValues = updatedSelecedFields
 		.filter((field) => !['timestamp', 'body'].includes(field.name))
-		.map((field) => getLogFieldValue(data, field.name, isBodyJsonEnabled))
+		.map((field) => flattenLogData[field.name])
 		.filter((attribute) => {
 			// loadash isEmpty doesnot work with numbers
-			if (isNumber(attribute) || isBoolean(attribute)) {
+			if (isNumber(attribute)) {
 				return true;
 			}
 
 			return !isUndefined(attribute) && !isEmpty(attribute);
-		})
-		.map((attribute) => coerceToString(attribute));
+		});
 
 	let attributesText = attributesValues.join(' | ');
 
@@ -103,7 +102,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${getBodyDisplay(data.body)}`);
+			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
 		} else {
 			parts.push(attributesText);
 		}

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

@@ -1,20 +1,16 @@
+import { renderHook } from '@testing-library/react';
 import { FontSize } from 'container/OptionsMenu/types';
-import { render, renderHook, screen } from 'tests/test-utils';
 import { IField } from 'types/api/logs/fields';
-import { ILog } from 'types/api/logs/log';
 
 import { useLogsTableColumns } from '../useLogsTableColumns';
 
 jest.mock('providers/Timezone', () => ({
-	__esModule: true,
-	...jest.requireActual('providers/Timezone'),
 	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
 		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
 	}),
 }));
 
 jest.mock('providers/App/App', () => ({
-	...jest.requireActual('providers/App/App'),
 	useAppContext: (): { featureFlags: [] } => ({ featureFlags: [] }),
 }));
 
@@ -169,36 +165,3 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
 	});
 });
-
-describe('useLogsTableColumns — cell values', () => {
-	const asLog = (partial: Partial<ILog>): ILog => partial as unknown as ILog;
-
-	it('shows an empty body cell for a row without a body', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('body', 'log')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-		const bodyCol = result.current.find((c) => c.id === 'log:body');
-
-		expect(bodyCol?.accessorFn?.(asLog({}))).toBe('');
-	});
-
-	it('renders an object-valued field as JSON, not [object Object]', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('order')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-		const orderCol = result.current.find((c) => c.id === 'order');
-		const Cell = orderCol?.cell as (props: { value: unknown }) => JSX.Element;
-
-		render(<Cell value={{ id: 8412, coupons: ['WELCOME10'] }} />);
-
-		expect(
-			screen.getByText('{"id":8412,"coupons":["WELCOME10"]}'),
-		).toBeInTheDocument();
-	});
-});

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

@@ -2,16 +2,18 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { FeatureKeys } from 'constants/features';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { useIsBodyJsonEnabled } from 'hooks/logs/useIsBodyJsonEnabled';
 import { getLogFieldValue } from 'lib/logs/flatLogData';
-import { getBodyDisplay } from 'lib/logs/logBody';
+import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { coerceToString } from 'utils/stringUtils';
 
 import type { TableColumnDef } from '../../TanStackTableView/types';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
@@ -26,7 +28,10 @@ export function useLogsTableColumns({
 	fontSize,
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const isBodyJsonEnabled = useIsBodyJsonEnabled();
+	const { featureFlags } = useAppContext();
+	const isBodyJsonEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
 
 	return useMemo<TableColumnDef<ILog>[]>(() => {
 		const stateIndicatorCol: TableColumnDef<ILog> = {
@@ -70,7 +75,7 @@ export function useLogsTableColumns({
 		const bodyCol: TableColumnDef<ILog> = {
 			id: buildCompositeKey('body', 'log'),
 			header: 'Body',
-			accessorFn: (log): string => getBodyDisplay(log.body),
+			accessorFn: (log): string => getBodyDisplayString(log.body),
 			canBeHidden: false,
 			enableRemove: false,
 			width: { default: '100%', min: 300 },
@@ -94,7 +99,7 @@ export function useLogsTableColumns({
 			enableRemove: true,
 			width: { min: 192 },
 			cell: ({ value }): ReactElement => (
-				<TanStackTable.Text>{coerceToString(value)}</TanStackTable.Text>
+				<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
 			),
 		});
 

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -18,71 +18,51 @@
 			right: -2px;
 			width: 240px;
 
+			[data-format-menu='back'],
+			[data-format-menu='font-option'],
+			[data-format-menu='font-size'],
+			[data-format-menu='edit-columns'] {
+				--button-justify-content: flex-start;
+			}
+
+			[data-format-menu='font-option'],
+			[data-format-menu='font-size'],
+			[data-format-menu='edit-columns'] {
+				--button-label-min-width: 100%;
+				--button-font-size: 13px;
+				--button-variant-link-font-weight: 400;
+				--button-size-line-height: 20px;
+			}
+
+			[data-format-menu='back'] {
+				text-transform: uppercase;
+			}
+
+			[data-format-menu='font-option'],
+			[data-format-menu='font-size'] {
+				text-transform: capitalize;
+			}
+
+			.menu-row {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 8px;
+			}
+
 			.font-size-dropdown {
 				display: flex;
 				flex-direction: column;
+				gap: 4px;
+				padding: 8px 12px;
 
-				.back-btn {
-					display: flex;
-					align-items: center;
-					gap: 4px;
-					padding: 12px;
-					border: none !important;
-					box-shadow: none !important;
-
-					.icon {
-						flex-shrink: 0;
-					}
-
-					.text {
-						color: var(--l1-foreground);
-						font-family: Inter;
-						font-size: 11px;
-						font-style: normal;
-						font-weight: 500;
-						line-height: 20px; /* 142.857% */
-						letter-spacing: 0.14px;
-						text-transform: uppercase;
-					}
-				}
-
-				.back-btn:hover {
-					background-color: unset !important;
+				.horizontal-line {
+					margin-inline: -12px;
 				}
 
 				.content {
 					display: flex;
 					flex-direction: column;
-					.option-btn {
-						display: flex;
-						align-items: center;
-						padding: 12px;
-						border: none !important;
-						box-shadow: none !important;
-						justify-content: space-between;
-
-						.icon {
-							flex-shrink: 0;
-						}
-						.text {
-							color: var(--l2-foreground);
-							font-family: Inter;
-							font-size: 13px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: normal; /* 142.857% */
-							letter-spacing: 0.14px;
-							text-transform: capitalize;
-						}
-
-						.text:hover {
-							color: var(--l2-foreground);
-						}
-					}
-
-					.option-btn:hover {
-						background-color: unset !important;
-					}
 				}
 			}
 
@@ -102,31 +82,6 @@
 					letter-spacing: 0.88px;
 					text-transform: uppercase;
 				}
-
-				.value {
-					display: flex;
-					height: 20px;
-					padding: 4px 0px;
-					justify-content: space-between;
-					align-items: center;
-					border: none !important;
-					.font-value {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 13px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						letter-spacing: 0.14px;
-						text-transform: capitalize;
-					}
-					.icon {
-					}
-				}
-
-				.value:hover {
-					background-color: unset !important;
-				}
 			}
 
 			.menu-container {
@@ -198,90 +153,10 @@
 						cursor: pointer;
 					}
 				}
-
-				.max-lines-per-row-input {
-					display: flex;
-
-					.ant-input-number-handler-wrap {
-						display: none;
-					}
-
-					.ant-input-number {
-						min-width: 36px;
-						width: auto;
-						border-right: none;
-						border-left: none;
-						border-top: 1px solid var(--l1-border);
-						border-bottom: 1px solid var(--l1-border);
-						text-align: center;
-						height: 26px;
-						border-radius: 0;
-
-						&:active,
-						&:focus {
-							border: none;
-							box-shadow: none;
-						}
-					}
-
-					.ant-input-number-focused {
-						box-shadow: none !important;
-					}
-
-					.ant-input-number-input-wrap {
-						input {
-							text-align: center;
-							font-size: 13px;
-
-							&:active,
-							&:focus {
-								border: none;
-							}
-						}
-
-						&:active,
-						&:focus {
-							border: none;
-						}
-					}
-
-					.periscope-btn {
-						box-shadow: none;
-						padding: 6px 12px;
-						height: 26px;
-
-						border-radius: 0px 1px 1px 0px;
-						background: var(--l3-background);
-					}
-				}
 			}
 
 			.edit-columns-container {
 				padding: 12px;
-
-				.edit-columns-btn {
-					display: flex;
-					width: 100%;
-					height: 20px;
-					padding: 4px 0px;
-					justify-content: space-between;
-					align-items: center;
-					border: none !important;
-
-					.edit-columns-text {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 13px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						letter-spacing: 0.14px;
-					}
-				}
-
-				.edit-columns-btn:hover {
-					background-color: unset !important;
-				}
 			}
 
 			.add-new-column-container {

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Button, InputNumber, Popover, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Popover, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { InputNumber } from '@signozhq/ui/input-number';
 import cx from 'classnames';
 import {
 	LogViewMode,
@@ -11,13 +12,15 @@ import {
 	Check,
 	ChevronLeft,
 	ChevronRight,
-	Minus,
-	Plus,
 	SlidersVertical,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
 
+const MIN_LINES_PER_ROW = 1;
+const MAX_LINES_PER_ROW = 10;
+const FONT_SIZES = [FontSize.SMALL, FontSize.MEDIUM, FontSize.LARGE];
+
 interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
@@ -62,25 +65,11 @@ function OptionsMenu({
 		onChange(key);
 	};
 
-	const incrementMaxLinesPerRow = (): void => {
-		if (maxLinesPerRow < 10) {
-			setMaxLinesPerRow(maxLinesPerRow + 1);
-		}
-	};
-
-	const decrementMaxLinesPerRow = (): void => {
-		if (maxLinesPerRow > 1) {
-			setMaxLinesPerRow(maxLinesPerRow - 1);
-		}
-	};
-
-	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
-		if (
-			maxLinesPerRow &&
-			Number.isInteger(maxLinesNumber) &&
-			maxLinesPerRow > 1
-		) {
-			setMaxLinesPerRow(maxLinesPerRow);
+	const handleLinesPerRowChange = (value: number | null): void => {
+		if (value !== null) {
+			setMaxLinesPerRow(
+				Math.min(Math.max(value, MIN_LINES_PER_ROW), MAX_LINES_PER_ROW),
+			);
 		}
 	};
 
@@ -111,51 +100,36 @@ function OptionsMenu({
 			{isFontSizeOptionsOpen ? (
 				<div className="font-size-dropdown">
 					<Button
+						variant="link"
+						color="secondary"
+						size="sm"
+						width="100%"
+						data-format-menu="back"
+						testId="font-size-back"
+						prefix={<ChevronLeft size={14} />}
 						onClick={(): void => setIsFontSizeOptionsOpen(false)}
-						className="back-btn"
-						type="text"
 					>
-						<ChevronLeft size={14} className="icon" />
-						<Typography.Text className="text">Select font size</Typography.Text>
+						Select font size
 					</Button>
 					<div className="horizontal-line" />
 					<div className="content">
-						<Button
-							onClick={(): void => {
-								setFontSizeValue(FontSize.SMALL);
-							}}
-							className="option-btn"
-							type="text"
-						>
-							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
-							{fontSizeValue === FontSize.SMALL && (
-								<Check size={14} className="icon" />
-							)}
-						</Button>
-						<Button
-							onClick={(): void => {
-								setFontSizeValue(FontSize.MEDIUM);
-							}}
-							className="option-btn"
-							type="text"
-						>
-							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
-							{fontSizeValue === FontSize.MEDIUM && (
-								<Check size={14} className="icon" />
-							)}
-						</Button>
-						<Button
-							onClick={(): void => {
-								setFontSizeValue(FontSize.LARGE);
-							}}
-							className="option-btn"
-							type="text"
-						>
-							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
-							{fontSizeValue === FontSize.LARGE && (
-								<Check size={14} className="icon" />
-							)}
-						</Button>
+						{FONT_SIZES.map((size) => (
+							<Button
+								key={size}
+								variant="link"
+								color="secondary"
+								size="sm"
+								width="100%"
+								data-format-menu="font-option"
+								testId={`font-size-option-${size}`}
+								onClick={(): void => setFontSizeValue(size)}
+							>
+								<span className="menu-row">
+									{size}
+									{fontSizeValue === size && <Check size={14} />}
+								</span>
+							</Button>
+						))}
 					</div>
 				</div>
 			) : (
@@ -163,14 +137,20 @@ function OptionsMenu({
 					<div className="font-size-container">
 						<div className="title">Font Size</div>
 						<Button
-							className="value"
-							type="text"
+							variant="link"
+							color="secondary"
+							size="sm"
+							width="100%"
+							data-format-menu="font-size"
+							testId="font-size-select"
 							onClick={(): void => {
 								setIsFontSizeOptionsOpen(true);
 							}}
 						>
-							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
-							<ChevronRight size={14} className="icon" />
+							<span className="menu-row">
+								{fontSizeValue}
+								<ChevronRight size={14} />
+							</span>
 						</Button>
 					</div>
 					<div className="horizontal-line" />
@@ -200,30 +180,20 @@ function OptionsMenu({
 							<div className="horizontal-line" />
 							<div className="max-lines-per-row">
 								<div className="title"> max lines per row </div>
-								<div className="raw-format max-lines-per-row-input">
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={decrementMaxLinesPerRow}
-									>
-										{' '}
-										<Minus size={12} />{' '}
-									</button>
-									<InputNumber
-										min={1}
-										max={10}
-										value={maxLinesPerRow}
-										onChange={handleLinesPerRowChange}
-									/>
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={incrementMaxLinesPerRow}
-									>
-										{' '}
-										<Plus size={12} />{' '}
-									</button>
-								</div>
+								<InputNumber
+									controls
+									mode="spinner"
+									size="small"
+									min={MIN_LINES_PER_ROW}
+									max={MAX_LINES_PER_ROW}
+									precision={0}
+									value={maxLinesPerRow}
+									onChange={handleLinesPerRowChange}
+									aria-label="Max lines per row"
+									decrementAriaLabel="Fewer lines per row"
+									incrementAriaLabel="More lines per row"
+									testId="max-lines-per-row"
+								/>
 							</div>
 						</>
 					)}
@@ -233,15 +203,18 @@ function OptionsMenu({
 							<div className="horizontal-line" />
 							<div className="edit-columns-container">
 								<Button
-									className="edit-columns-btn"
-									type="text"
+									variant="link"
+									color="secondary"
+									size="sm"
+									width="100%"
+									data-format-menu="edit-columns"
 									onClick={handleEditColumns}
-									data-testid="periscope-btn-edit-columns"
+									testId="periscope-btn-edit-columns"
 								>
-									<Typography.Text className="edit-columns-text">
+									<span className="menu-row">
 										Edit columns
-									</Typography.Text>
-									<ChevronRight size={14} className="icon" />
+										<ChevronRight size={14} />
+									</span>
 								</Button>
 							</div>
 						</>
@@ -280,10 +253,15 @@ function LogsFormatOptionsMenu({
 		>
 			<Tooltip title="Options">
 				<Button
-					className="periscope-btn ghost"
-					icon={<SlidersVertical size="md" />}
-					data-testid="periscope-btn-format-options"
-				/>
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					icon
+					aria-label="Options"
+					testId="periscope-btn-format-options"
+				>
+					<SlidersVertical size={14} />
+				</Button>
 			</Tooltip>
 		</Popover>
 	);

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

@@ -1,5 +1,11 @@
 import { FontSize } from 'container/OptionsMenu/types';
-import { fireEvent, render, waitFor } from 'tests/test-utils';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 
 import LogsFormatOptionsMenu from '../LogsFormatOptionsMenu';
 
@@ -107,18 +113,12 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 	});
 
 	it('increments max-lines and calls onChange', async () => {
-		const { maxLinesOnChange } = setup();
+		const { maxLinesOnChange, getByTestId } = setup();
 
 		// Increment max lines
-		const input = document.querySelector(
-			'.max-lines-per-row-input input',
-		) as HTMLInputElement;
+		const input = getByTestId('max-lines-per-row') as HTMLInputElement;
 		const initial = Number(input.value);
-		const buttons = document.querySelectorAll(
-			'.max-lines-per-row-input .periscope-btn',
-		);
-		const incrementBtn = buttons[1] as HTMLElement;
-		fireEvent.click(incrementBtn);
+		fireEvent.click(screen.getByRole('button', { name: 'More lines per row' }));
 
 		await waitFor(() => {
 			expect(Number(input.value)).toBe(initial + 1);
@@ -128,28 +128,46 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 		});
 	});
 
+	it('clamps a typed max-lines value to 10', async () => {
+		const { maxLinesOnChange, getByTestId } = setup();
+		const input = getByTestId('max-lines-per-row') as HTMLInputElement;
+		const user = userEvent.setup();
+
+		await user.clear(input);
+		await user.type(input, '15');
+		await user.tab();
+
+		await waitFor(() => expect(input.value).toBe('10'));
+		expect(maxLinesOnChange).toHaveBeenLastCalledWith(10);
+	});
+
+	it('stops max-lines at 10', async () => {
+		const { getByTestId } = setup();
+		const input = getByTestId('max-lines-per-row') as HTMLInputElement;
+		const increment = screen.getByRole('button', { name: 'More lines per row' });
+
+		for (let i = 0; i < 12; i++) {
+			fireEvent.click(increment);
+		}
+
+		await waitFor(() => expect(input.value).toBe('10'));
+	});
+
 	it('changes font size to MEDIUM and calls onChange', async () => {
-		const { fontSizeOnChange } = setup();
+		const { fontSizeOnChange, getByTestId } = setup();
 		// Open font dropdown
-		const fontButton = document.querySelector(
-			'.font-size-container .value',
-		) as HTMLElement;
-		fireEvent.click(fontButton);
+		fireEvent.click(getByTestId('font-size-select'));
 
 		// Choose MEDIUM
-		const optionButtons = Array.from(
-			document.querySelectorAll('.font-size-dropdown .option-btn'),
-		);
-		const mediumBtn = optionButtons[1] as HTMLElement;
-		fireEvent.click(mediumBtn);
+		fireEvent.click(getByTestId(`font-size-option-${FontSize.MEDIUM}`));
 
 		await waitFor(() => {
 			expect(
-				document.querySelectorAll('.font-size-dropdown .option-btn .icon'),
-			).toHaveLength(1);
-			expect(
-				(optionButtons[1] as Element).querySelector('.icon'),
+				getByTestId(`font-size-option-${FontSize.MEDIUM}`).querySelector('svg'),
 			).toBeInTheDocument();
+			expect(
+				getByTestId(`font-size-option-${FontSize.SMALL}`).querySelector('svg'),
+			).not.toBeInTheDocument();
 		});
 		await waitFor(() => {
 			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);

frontend/src/constants/events.ts

@@ -8,3 +8,35 @@ export enum Events {
 	TOOLTIP_CONTENT_SCROLLED = 'TOOLTIP_CONTENT_SCROLLED',
 	TOOLTIP_SYNC_MODE_CHANGED = 'TOOLTIP_SYNC_MODE_CHANGED',
 }
+
+export enum InfraMonitoringEvents {
+	PageVisited = 'Infra Monitoring: page visited',
+	PageNumberChanged = 'Infra Monitoring: page number changed',
+	GroupByChanged = 'Infra Monitoring: group by changed',
+	FilterApplied = 'Infra Monitoring: filter applied',
+	ItemClicked = 'Infra Monitoring: item clicked',
+	TabChanged = 'Infra Monitoring: tab changed',
+	TimeUpdated = 'Infra Monitoring: time updated',
+	ExploreClicked = 'Infra Monitoring: explore clicked',
+	HostEntity = 'host',
+	K8sEntity = 'k8s',
+	ListPage = 'list',
+	DetailedPage = 'detailed',
+	LogsView = 'logs',
+	TracesView = 'traces',
+	EventsView = 'events',
+	QuickFiltersView = 'quick filters',
+	MetricsView = 'metrics',
+	Total = 'total',
+	Cluster = 'cluster',
+	Container = 'container',
+	DaemonSet = 'daemonSet',
+	Deployment = 'deployment',
+	Job = 'job',
+	Namespace = 'namespace',
+	Node = 'node',
+	Volume = 'volume',
+	Pod = 'pod',
+	StatefulSet = 'statefulSet',
+	Volumes = 'volumes',
+}

frontend/src/constants/localStorage.ts

@@ -46,5 +46,4 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
-	TRACES_SPAN_DRAWER_ENABLED = 'TRACES_SPAN_DRAWER_ENABLED',
 }

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -17,6 +17,7 @@ import {
 	QuickFilterChangeEventData,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
+import { InfraMonitoringEvents } from 'constants/events';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import K8sBaseDetails, {
 	K8sDetailsFilters,
@@ -272,6 +273,7 @@ function Hosts(): JSX.Element {
 							fetchListData={fetchListData}
 							getRowKey={getHostRowKey}
 							getItemKey={getHostItemKey}
+							eventCategory={InfraMonitoringEvents.HostEntity}
 							detailsQueryKeyPrefix="hosts"
 						/>
 					</div>
@@ -279,6 +281,7 @@ function Hosts(): JSX.Element {
 			</div>
 			<K8sBaseDetails
 				category={InfraMonitoringEntity.HOSTS}
+				eventCategory={InfraMonitoringEvents.HostEntity}
 				getSelectedItemExpression={hostGetSelectedItemExpression}
 				fetchEntityData={fetchEntityData}
 				getEntityName={hostGetEntityName}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -6,8 +6,10 @@ import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper, DrawerWrapperProps } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
 import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
+import { InfraMonitoringEvents } from 'constants/events';
 import {
 	GlobalTimeProvider,
 	NANO_SECOND_MULTIPLIER,
@@ -65,6 +67,7 @@ const DRAWER_MOTION_PROPS = {
 
 export default function K8sBaseDetails<T>({
 	category,
+	eventCategory,
 	getSelectedItemExpression,
 	fetchEntityData,
 	getEntityName,
@@ -221,6 +224,16 @@ export default function K8sBaseDetails<T>({
 		};
 	}, [entity, entityName, category]);
 
+	useEffect(() => {
+		if (entity) {
+			void logEvent(InfraMonitoringEvents.PageVisited, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+				category: eventCategory,
+			});
+		}
+	}, [entity, eventCategory]);
+
 	// Names the resource it returns to, so a drill several levels deep stays clear
 	const backTarget = previousEntry
 		? `Back to ${K8S_CATEGORY_SINGULAR_LABELS[previousEntry.category]}`
@@ -320,6 +333,7 @@ export default function K8sBaseDetails<T>({
 					<K8sBaseDetailsContent<T>
 						entity={entity}
 						category={category}
+						eventCategory={eventCategory}
 						metadataConfig={metadataConfig}
 						countsConfig={countsConfig}
 						getCountsFilterExpression={getCountsFilterExpression}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetailsContent.tsx

@@ -10,7 +10,9 @@ import {
 import { Button } from '@signozhq/ui/button';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Tooltip } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
 import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -53,6 +55,7 @@ import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/B
 export default function K8sBaseDetailsContent<T>({
 	entity,
 	category,
+	eventCategory,
 	metadataConfig,
 	countsConfig,
 	getCountsFilterExpression,
@@ -135,18 +138,14 @@ export default function K8sBaseDetailsContent<T>({
 
 	// Wait until the view is a valid tab so we don't log a pending value before
 	// the validation effect above corrects an out-of-scope query param
-	const loggedDefaultTabFor = useRef<string | null>(null);
+	const hasLoggedDefaultTab = useRef(false);
 	useEffect(() => {
-		const visitKey = `${category}:${selectedItem}`;
-		if (
-			loggedDefaultTabFor.current === visitKey ||
-			!validTabs.includes(effectiveView)
-		) {
+		if (hasLoggedDefaultTab.current || !validTabs.includes(effectiveView)) {
 			return;
 		}
-		loggedDefaultTabFor.current = visitKey;
+		hasLoggedDefaultTab.current = true;
 		logInfraDrawerTabViewedEvent(category, effectiveView, true);
-	}, [validTabs, effectiveView, category, selectedItem]);
+	}, [validTabs, effectiveView, category]);
 
 	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
 	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
@@ -168,6 +167,12 @@ export default function K8sBaseDetailsContent<T>({
 		void setLogFiltersParam(null);
 		void setTracesFiltersParam(null);
 		void setEventsFiltersParam(null);
+		void logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: value,
+		});
 		logInfraDrawerTabViewedEvent(category, value, false);
 	};
 
@@ -183,6 +188,13 @@ export default function K8sBaseDetailsContent<T>({
 			urlQuery.set(QueryParams.endTime, (timeRange.endTime * 1000).toString());
 		}
 
+		void logEvent(InfraMonitoringEvents.ExploreClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: effectiveView,
+		});
+
 		logInfraExplorerNavigatedEvent({
 			entityType: category,
 			destination:
@@ -404,6 +416,7 @@ export default function K8sBaseDetailsContent<T>({
 			{effectiveView === VIEW_TYPES.OVERVIEW && tabVisibility.showOverview && (
 				<EntityOverview
 					category={category}
+					eventEntity={eventCategory}
 					attributes={entityAttributes}
 					entity={entity}
 					entityName={entityName}
@@ -413,6 +426,7 @@ export default function K8sBaseDetailsContent<T>({
 			{effectiveView === VIEW_TYPES.METRICS && (
 				<EntityMetrics<T>
 					entity={entity}
+					eventEntity={eventCategory}
 					entityWidgetInfo={entityWidgetInfo}
 					getEntityQueryPayload={getEntityQueryPayload}
 					category={category}
@@ -422,6 +436,7 @@ export default function K8sBaseDetailsContent<T>({
 			)}
 			{effectiveView === VIEW_TYPES.LOGS && (
 				<EntityLogs
+					eventEntity={eventCategory}
 					queryKey={`${queryKeyPrefix}Logs`}
 					category={category}
 					initialExpression={logsAndTracesInitialExpression}
@@ -429,6 +444,7 @@ export default function K8sBaseDetailsContent<T>({
 			)}
 			{effectiveView === VIEW_TYPES.TRACES && (
 				<EntityTraces
+					eventEntity={eventCategory}
 					queryKey={`${queryKeyPrefix}Traces`}
 					category={category}
 					initialExpression={logsAndTracesInitialExpression}
@@ -436,6 +452,7 @@ export default function K8sBaseDetailsContent<T>({
 			)}
 			{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
 				<EntityEvents
+					eventEntity={eventCategory}
 					queryKey={`${queryKeyPrefix}Events`}
 					initialExpression={eventsInitialExpression}
 					category={category}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
 import TanStackTable, {
 	SortState,
 	TableColumnDef,
@@ -9,6 +10,7 @@ import TanStackTable, {
 	useRecoverFromEmptyPage,
 	useTableParams,
 } from 'components/TanStackTableView';
+import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
@@ -49,7 +51,6 @@ import styles from './K8sBaseList.module.scss';
 import cx from 'classnames';
 import {
 	logInfraColumnSortedEvent,
-	logInfraListRowClickedEvent,
 	logInfraTimeRangeCustomizedEvent,
 } from 'container/InfraMonitoringK8sV2/Base/events';
 
@@ -91,6 +92,7 @@ export type K8sBaseListProps<
 	getRowKey: (record: T) => string;
 	/** Function to get the item key used for selection. Can return string or SelectedItemParams. */
 	getItemKey: (record: T) => TItemKey;
+	eventCategory: InfraMonitoringEvents;
 	renderEmptyState?: (
 		context: K8sBaseListEmptyStateContext,
 	) => React.ReactNode | null;
@@ -113,6 +115,7 @@ export function K8sBaseList<
 	fetchListData,
 	getRowKey,
 	getItemKey,
+	eventCategory,
 	renderEmptyState,
 	extraQueryKeyParts = [],
 	detailsQueryKeyPrefix,
@@ -277,6 +280,15 @@ export function K8sBaseList<
 		[groupBy],
 	);
 
+	useEffect(() => {
+		void logEvent(InfraMonitoringEvents.PageVisited, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.ListPage,
+			category: eventCategory,
+			total: totalCount,
+		});
+	}, [eventCategory, totalCount]);
+
 	const prevSelectedTimeRef = useRef(selectedTime);
 	useEffect(() => {
 		if (prevSelectedTimeRef.current !== selectedTime) {
@@ -314,10 +326,14 @@ export function K8sBaseList<
 				setSelectedItemParams(params);
 			}
 
-			logInfraListRowClickedEvent(entity, false, groupBy.length > 0);
+			void logEvent(InfraMonitoringEvents.ItemClicked, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: eventCategory,
+			});
 		},
 		[
-			entity,
+			eventCategory,
 			groupBy.length,
 			setSelectedItemParams,
 			detailsQueryKeyPrefix,
@@ -369,9 +385,13 @@ export function K8sBaseList<
 			}
 			openInNewTab(url.pathname + url.search);
 
-			logInfraListRowClickedEvent(entity, true, false);
+			void logEvent(InfraMonitoringEvents.ItemClicked, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: eventCategory,
+			});
 		},
-		[entity, groupBy.length],
+		[eventCategory, groupBy.length],
 	);
 
 	const isGroupedByAttribute = groupBy.length > 0;
@@ -471,6 +491,7 @@ export function K8sBaseList<
 
 			<K8sTableToolbar
 				entity={entity}
+				eventCategory={eventCategory}
 				leftFilters={leftFilters}
 				onOpenOptionsDrawer={handleOpenOptionsDrawer}
 			/>

frontend/src/container/InfraMonitoringK8sV2/Base/K8sHeader.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useAppLocation } from 'lib/router/useAppLocation';
+import logEvent from 'api/common/logEvent';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -90,6 +92,12 @@ function K8sHeader({
 			void invalidateQueries();
 
 			if (finalExpression?.trim()) {
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.K8sEntity,
+					page: InfraMonitoringEvents.ListPage,
+					category: entity,
+				});
+
 				logInfraFilterCustomizedEvent(entity, 'search', finalExpression);
 			}
 		},

frontend/src/container/InfraMonitoringK8sV2/Base/K8sTableToolbar.tsx

@@ -3,6 +3,8 @@ import { Button } from '@signozhq/ui/button';
 import { Select } from 'antd';
 import { Download, SlidersVertical } from '@signozhq/icons';
 import { Tooltip } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import {
 	INFRA_MONITORING_ATTR_KEYS,
@@ -33,6 +35,7 @@ const NAME_COLUMN_KEYS: Set<string> = new Set([
 
 interface K8sTableToolbarProps {
 	entity: InfraMonitoringEntity;
+	eventCategory: InfraMonitoringEvents;
 	leftFilters?: React.ReactNode;
 	onOpenOptionsDrawer: () => void;
 	onDownload?: () => void;
@@ -40,6 +43,7 @@ interface K8sTableToolbarProps {
 
 function K8sTableToolbar({
 	entity,
+	eventCategory,
 	leftFilters,
 	onOpenOptionsDrawer,
 	onDownload,
@@ -61,9 +65,15 @@ function K8sTableToolbar({
 
 			void setGroupBy(value);
 
+			void logEvent(InfraMonitoringEvents.GroupByChanged, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: eventCategory,
+			});
+
 			logInfraGroupByCustomizedEvent(entity, value);
 		},
-		[entity, orderBy, setCurrentPage, setOrderBy, setGroupBy],
+		[entity, eventCategory, orderBy, setCurrentPage, setOrderBy, setGroupBy],
 	);
 
 	return (

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.backNavigation.test.tsx

@@ -1,10 +1,10 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { InfraMonitoringEvents } from 'constants/events';
 import {
 	NuqsTestingAdapter,
 	type OnUrlUpdateFunction,
 } from 'nuqs/adapters/testing';
-import logEvent from 'api/common/logEvent';
 import { act, render, waitFor } from 'tests/test-utils';
 
 import {
@@ -19,13 +19,6 @@ jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
 	default: (): JSX.Element => <div data-testid="mock-datetime" />,
 }));
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
-const logEventMock = jest.mocked(logEvent);
-
 type TestEntity = { name: string };
 
 const mockEntity: TestEntity = { name: 'test-container' };
@@ -56,6 +49,7 @@ function renderDrawer(onUrlUpdate?: OnUrlUpdateFunction): void {
 		>
 			<K8sBaseDetails<TestEntity>
 				category={InfraMonitoringEntity.CONTAINERS}
+				eventCategory={InfraMonitoringEvents.Pod}
 				getSelectedItemExpression={(): string => "k8s.pod.uid = 'abc'"}
 				fetchEntityData={jest
 					.fn()
@@ -77,7 +71,6 @@ function renderDrawer(onUrlUpdate?: OnUrlUpdateFunction): void {
 describe('K8sBaseDetails - back navigation', () => {
 	beforeEach(() => {
 		useDrawerHistoryStore.getState().reset();
-		logEventMock.mockClear();
 	});
 
 	it('closes rather than going back when opened from the list', async () => {
@@ -156,36 +149,4 @@ describe('K8sBaseDetails - back navigation', () => {
 			expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
 		});
 	});
-
-	it('logs a drawer visit for a resource reached from the cache', async () => {
-		const user = userEvent.setup();
-
-		useDrawerHistoryStore.getState().push({
-			params: {
-				selectedItem: 'container-0',
-				category: InfraMonitoringEntity.CONTAINERS,
-				clusterName: null,
-				namespaceName: null,
-			},
-			category: InfraMonitoringEntity.CONTAINERS,
-			label: 'container-0',
-			entity: { name: 'container-0' },
-			queryKeyPrefix: 'testContainer',
-		});
-
-		act(() => {
-			renderDrawer();
-		});
-
-		const drawerVisits = (): number =>
-			logEventMock.mock.calls.filter(
-				([name]) => name === 'Infra Monitoring: Drawer tab viewed',
-			).length;
-
-		await waitFor(() => expect(drawerVisits()).toBe(1));
-
-		await user.click(await screen.findByTestId('drawer-back-button'));
-
-		await waitFor(() => expect(drawerVisits()).toBe(2));
-	});
 });

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.tabValidation.test.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@signozhq/icons';
 import { screen } from '@testing-library/react';
+import { InfraMonitoringEvents } from 'constants/events';
 import userEvent from '@testing-library/user-event';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { act, render, waitFor } from 'tests/test-utils';
@@ -42,6 +43,7 @@ const relatedEntity: TestEntity = {
 function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
 	return {
 		category,
+		eventCategory: InfraMonitoringEvents.Pod,
 		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
 		fetchEntityData: jest.fn().mockResolvedValue({ data: entity, error: null }),
 		getEntityName: (e: TestEntity): string => e.name,

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { InfraMonitoringEvents } from 'constants/events';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import {
@@ -16,9 +17,7 @@ import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
 import { TestRouter } from 'tests/router';
-import { within } from 'tests/test-utils';
 import APIError from 'types/api/error';
-import logEvent from 'api/common/logEvent';
 import { openInNewTab } from 'utils/navigation';
 
 import { TableColumnDef } from 'components/TanStackTableView';
@@ -41,13 +40,7 @@ jest.mock('utils/navigation', () => ({
 	openInNewTab: jest.fn(),
 }));
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
 const openInNewTabMock = openInNewTab as jest.Mock;
-const logEventMock = jest.mocked(logEvent);
 
 // Mock Date.now to prevent flaky tests due to time-dependent values
 const MOCK_NOW = 1700000000000; // Fixed timestamp
@@ -234,7 +227,6 @@ describe('K8sBaseList', () => {
 		beforeEach(() => {
 			onUrlUpdateMock.mockClear();
 			fetchListDataMock.mockClear();
-			logEventMock.mockClear();
 			openInNewTabMock.mockClear();
 			fetchListDataMock.mockResolvedValue({
 				data: [
@@ -248,6 +240,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItemWithTitle>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithTitle(),
 				getRowKey: (row): string => row.id,
@@ -306,40 +299,6 @@ describe('K8sBaseList', () => {
 			});
 		});
 
-		it('should log the list row clicked event when a row opens the drawer', async () => {
-			const user = userEvent.setup();
-
-			const row = await screen.findByTestId(`row-PodId:${itemId}`);
-			await user.click(within(row).getByText(`PodId:${itemId}`));
-
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Infra Monitoring: List row clicked',
-				{
-					entityType: InfraMonitoringEntity.PODS,
-					openedInNewTab: false,
-					isGrouped: false,
-				},
-			);
-		});
-
-		it('should log the list row clicked event as a new tab on ctrl+click', async () => {
-			const user = userEvent.setup();
-			const row = await screen.findByTestId(`row-PodId:${itemId}`);
-
-			await user.keyboard('{Control>}');
-			await user.click(within(row).getByText(`PodId:${itemId}`));
-			await user.keyboard('{/Control}');
-
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Infra Monitoring: List row clicked',
-				{
-					entityType: InfraMonitoringEntity.PODS,
-					openedInNewTab: true,
-					isGrouped: false,
-				},
-			);
-		});
-
 		it('should update orderBy in URL when clicking sortable column header', async () => {
 			const user = userEvent.setup();
 
@@ -504,6 +463,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {
 					orderBy: JSON.stringify({ columnName: 'cpu', order: 'desc' }),
@@ -578,6 +538,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {
 					orderBy: JSON.stringify({ columnName: 'cpu', order: 'desc' }),
@@ -642,6 +603,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -700,6 +662,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: { page: '7', pageSize: '10' },
 				tableColumns: createTestColumns(),
@@ -771,6 +734,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: { page: '0', pageSize: '10' },
 				tableColumns: createTestColumns(),
@@ -855,6 +819,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -892,6 +857,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -929,6 +895,7 @@ describe('K8sBaseList', () => {
 		it('should show all columns defined in tableColumns', async () => {
 			renderComponent<TestItemWithName>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithName(),
 				getRowKey: (row): string => row.id,
@@ -976,6 +943,7 @@ describe('K8sBaseList', () => {
 		it('should show columns when NOT grouped', async () => {
 			renderComponent<TestItemWithGroup>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {},
 				tableColumns: createTestColumnsWithGroup(),
@@ -1000,6 +968,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItemWithGroup>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {
 					groupBy: JSON.stringify(groupByValue),
@@ -1041,6 +1010,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {
 					groupBy: JSON.stringify(groupByValue),
@@ -1085,6 +1055,7 @@ describe('K8sBaseList', () => {
 		it('should render all defined columns', async () => {
 			renderComponent<TestItemWithName>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithName(),
 				getRowKey: (row): string => row.id,
@@ -1107,6 +1078,7 @@ describe('K8sBaseList', () => {
 		it('should render data in cells correctly', async () => {
 			renderComponent<TestItemWithName>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithName(),
 				getRowKey: (row): string => row.id,
@@ -1143,6 +1115,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1190,6 +1163,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItemWithTitle, SelectedItemParams>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithTitle(),
 				getRowKey: (row): string => row.id,
@@ -1214,6 +1188,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItemWithTitle, SelectedItemParams>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithTitle(),
 				getRowKey: (row): string => row.id,
@@ -1240,6 +1215,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItemWithTitle, SelectedItemParams>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumnsWithTitle(),
 				getRowKey: (row): string => row.id,
@@ -1301,6 +1277,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1335,6 +1312,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1374,6 +1352,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1422,6 +1401,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1469,6 +1449,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1525,6 +1506,7 @@ describe('K8sBaseList', () => {
 
 			renderComponent<TestItem>({
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				tableColumns: createTestColumns(),
 				getRowKey: (row): string => row.id,
@@ -1598,6 +1580,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {
 					// k8s.pod.name is a name column - should be cleared
@@ -1640,6 +1623,7 @@ describe('K8sBaseList', () => {
 			renderComponent<TestItem>({
 				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
 				queryParams: {
 					// cpu is NOT a name column - should be kept
@@ -1692,6 +1676,7 @@ describe('K8sBaseList status filters', () => {
 		renderComponent<TestItem>({
 			queryParams,
 			entity: InfraMonitoringEntity.PODS,
+			eventCategory: InfraMonitoringEvents.Pod,
 			fetchListData: fetchListDataMock,
 			tableColumns: createTestColumns(),
 			getRowKey: (row): string => row.id,

frontend/src/container/InfraMonitoringK8sV2/Base/events.ts

@@ -22,10 +22,10 @@ export function logInfraFilterCustomizedEvent(
 		return;
 	}
 
-	void logEvent('Infra Monitoring: Filter customized', {
-		entityType,
+	void logEvent('infra_filter_customized', {
+		entity_type: entityType,
 		source,
-		expressionKeys: [...new Set(expressionKeys)],
+		expression_keys: [...new Set(expressionKeys)],
 	});
 }
 
@@ -34,8 +34,8 @@ export function logInfraMonitoringListViewedEvent(
 ): void {
 	const referrer = getNavigationReferrer();
 
-	void logEvent('Infra Monitoring: List viewed', {
-		entityType: entity,
+	void logEvent('infra_list_viewed', {
+		entity,
 		referrer,
 	});
 }
@@ -44,9 +44,9 @@ export function logInfraTimeRangeCustomizedEvent(
 	entityType: InfraMonitoringEntity,
 	rangeLabel: string,
 ): void {
-	void logEvent('Infra Monitoring: Time range customized', {
-		entityType,
-		rangeLabel: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	void logEvent('infra_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
 	});
 }
 
@@ -57,11 +57,11 @@ export function logInfraColumnCustomizedEvent(
 	maxLinesPerRow: number,
 	source: 'list' | 'expanded',
 ): void {
-	void logEvent('Infra Monitoring: Column customized', {
-		entityType,
-		columnsList,
-		fontSize,
-		maxLinesPerRow,
+	void logEvent('infra_column_customized', {
+		entity_type: entityType,
+		columns_list: columnsList,
+		font_size: fontSize,
+		max_lines_per_row: maxLinesPerRow,
 		source,
 	});
 }
@@ -72,9 +72,9 @@ export function logInfraColumnSortedEvent(
 	direction: 'asc' | 'desc',
 	source: 'list' | 'expanded',
 ): void {
-	void logEvent('Infra Monitoring: Column sorted', {
-		entityType,
-		columnKey,
+	void logEvent('infra_column_sorted', {
+		entity_type: entityType,
+		column_key: columnKey,
 		direction,
 		source,
 	});
@@ -84,9 +84,9 @@ export function logInfraGroupByCustomizedEvent(
 	entityType: InfraMonitoringEntity,
 	groupByKeysList: string[],
 ): void {
-	void logEvent('Infra Monitoring: Group by customized', {
-		entityType,
-		groupByKeysList,
+	void logEvent('infra_group_by_customized', {
+		entity_type: entityType,
+		group_by_keys_list: groupByKeysList,
 	});
 }
 
@@ -106,24 +106,12 @@ export function logInfraExplorerNavigatedEvent(params: {
 	sourceKey: string | null;
 	drawerDurationMsAtNavigation: number | null;
 }): void {
-	void logEvent('Infra Monitoring: Explorer navigated', {
-		entityType: params.entityType,
+	void logEvent('infra_explorer_navigated', {
+		entity_type: params.entityType,
 		destination: params.destination,
 		source: params.source,
 		tab: params.tab,
-		sourceKey: params.sourceKey,
-		drawerDurationMsAtNavigation: params.drawerDurationMsAtNavigation,
-	});
-}
-
-export function logInfraListRowClickedEvent(
-	entityType: InfraMonitoringEntity,
-	openedInNewTab: boolean,
-	isGrouped: boolean,
-): void {
-	void logEvent('Infra Monitoring: List row clicked', {
-		entityType,
-		openedInNewTab,
-		isGrouped,
+		source_key: params.sourceKey,
+		drawer_duration_ms_at_navigation: params.drawerDurationMsAtNavigation,
 	});
 }

frontend/src/container/InfraMonitoringK8sV2/Base/types.ts

@@ -8,6 +8,7 @@ import {
 	CustomTimeType,
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/types';
+import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import APIError from 'types/api/error';
 
@@ -110,6 +111,7 @@ export interface K8sDetailsCustomTab<T> {
 
 export interface K8sBaseDetailsProps<T> {
 	category: InfraMonitoringEntity;
+	eventCategory: InfraMonitoringEvents;
 	// Data fetching configuration
 	getSelectedItemExpression: (params: SelectedItemParams) => string;
 	fetchEntityData: (
@@ -135,6 +137,7 @@ export interface K8sBaseDetailsProps<T> {
 export interface K8sBaseDetailsContentProps<T> {
 	entity: T;
 	category: InfraMonitoringEntity;
+	eventCategory: InfraMonitoringEvents;
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
 	countsConfig?: K8sDetailsCountConfig<T>[];
 	getCountsFilterExpression?: (entity: T) => string;

frontend/src/container/InfraMonitoringK8sV2/Clusters/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -116,6 +117,7 @@ export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRec
 	{
 		list: {
 			entity: InfraMonitoringEntity.CLUSTERS,
+			eventCategory: InfraMonitoringEvents.Cluster,
 			tableColumns: k8sClustersColumnsConfig,
 			fetchListData,
 			getRowKey: getK8sClusterRowKey,
@@ -124,6 +126,7 @@ export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRec
 		},
 		details: {
 			category: InfraMonitoringEntity.CLUSTERS,
+			eventCategory: InfraMonitoringEvents.Cluster,
 			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'cluster',
 			getSelectedItemExpression: k8sClusterGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/Containers/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -119,6 +120,7 @@ export const containerEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.CONTAINERS,
+		eventCategory: InfraMonitoringEvents.Container,
 		tableColumns: k8sContainerColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sContainerRowKey,
@@ -127,6 +129,7 @@ export const containerEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.CONTAINERS,
+		eventCategory: InfraMonitoringEvents.Container,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'container',
 		getSelectedItemExpression: k8sContainerGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -124,6 +125,7 @@ export const daemonSetEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.DAEMONSETS,
+		eventCategory: InfraMonitoringEvents.DaemonSet,
 		tableColumns: k8sDaemonSetsColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sDaemonSetRowKey,
@@ -132,6 +134,7 @@ export const daemonSetEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.DAEMONSETS,
+		eventCategory: InfraMonitoringEvents.DaemonSet,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'daemonset',
 		getSelectedItemExpression: k8sDaemonSetGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/Deployments/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import {
@@ -139,6 +140,7 @@ export const deploymentEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.DEPLOYMENTS,
+		eventCategory: InfraMonitoringEvents.Deployment,
 		tableColumns: k8sDeploymentsColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sDeploymentRowKey,
@@ -147,6 +149,7 @@ export const deploymentEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.DEPLOYMENTS,
+		eventCategory: InfraMonitoringEvents.Deployment,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'deployment',
 		getSelectedItemExpression: k8sDeploymentGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityDateTimeSelector/EntityDateTimeSelector.tsx

@@ -2,6 +2,8 @@ import { useCallback } from 'react';
 import { Undo } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import { InfraMonitoringEvents } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -15,11 +17,15 @@ import styles from './EntityDateTimeSelector.module.scss';
 import { logInfraDrawerTimeRangeCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface EntityDateTimeSelectorProps {
+	eventEntity: string;
 	category: InfraMonitoringEntity;
+	view: string;
 }
 
 function EntityDateTimeSelector({
+	eventEntity,
 	category,
+	view,
 }: EntityDateTimeSelectorProps): JSX.Element {
 	const {
 		timeRange,
@@ -31,10 +37,17 @@ function EntityDateTimeSelector({
 
 	const onTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			void logEvent(InfraMonitoringEvents.TimeUpdated, {
+				entity: eventEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+				category,
+				view,
+				interval,
+			});
 			logInfraDrawerTimeRangeCustomizedEvent(category, interval);
 			handleTimeChange(interval, dateTimeRange);
 		},
-		[category, handleTimeChange],
+		[category, view, eventEntity, handleTimeChange],
 	);
 
 	return (

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Table, TableColumnsType } from 'antd';
+import logEvent from 'api/common/logEvent';
 import {
 	QuerySearchV2Provider,
 	useExpression,
@@ -15,12 +16,12 @@ import {
 	combineInitialAndUserExpression,
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { InfraMonitoringEvents } from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import LoadingContainer from 'container/InfraMonitoringK8sV2/LoadingContainer';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import { getBodyDisplay } from 'lib/logs/logBody';
 import { saveRecentQueryByExpression } from 'lib/recentQueries/saveRecentQuery';
 import { useQueryState } from 'nuqs';
 import { DataSource } from 'types/common/queryBuilder';
@@ -51,6 +52,7 @@ interface EventDataType {
 }
 
 interface Props {
+	eventEntity: string;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
@@ -65,6 +67,7 @@ const handleExpandRow = (record: EventDataType): JSX.Element => (
 );
 
 function EntityEventsContent({
+	eventEntity,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
@@ -117,6 +120,13 @@ function EntityEventsContent({
 				saveRecentQueryByExpression(DataSource.LOGS, newUserExpression);
 				querySearchOnRun(newUserExpression || '');
 
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: eventEntity,
+					page: InfraMonitoringEvents.DetailedPage,
+					category,
+					view: InfraMonitoringEvents.EventsView,
+				});
+
 				logInfraDrawerFilterCustomizedEvent(
 					category,
 					'events',
@@ -127,7 +137,14 @@ function EntityEventsContent({
 				refetch();
 			}
 		},
-		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
+		[
+			inputExpression,
+			initialExpression,
+			refetch,
+			querySearchOnRun,
+			category,
+			eventEntity,
+		],
 	);
 
 	const queryData = useMemo(
@@ -146,7 +163,7 @@ function EntityEventsContent({
 				key: event.data.id,
 				id: event.data.id,
 				timestamp: event.timestamp,
-				body: getBodyDisplay(event.data.body),
+				body: event.data.body,
 				severity: event.data.severity_text,
 				attributes_string: event.data.attributes_string,
 				resources_string: event.data.resources_string,
@@ -215,7 +232,11 @@ function EntityEventsContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<EntityDateTimeSelector category={category} />
+					<EntityDateTimeSelector
+						eventEntity={eventEntity}
+						category={category}
+						view={InfraMonitoringEvents.EventsView}
+					/>
 
 					<RunQueryBtn
 						isLoadingQueries={isFetching}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/__tests__/EntityEvents.test.tsx

@@ -69,6 +69,7 @@ describe('EntityEvents', () => {
 					searchParams={`${K8S_ENTITY_EVENTS_EXPRESSION_KEY}=k8s.pod.name+%3D+%22x%22`}
 				>
 					<EntityEvents
+						eventEntity="test"
 						queryKey="test"
 						category={InfraMonitoringEntity.PODS}
 						initialExpression='k8s.pod.name = "x"'

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/__tests__/EntityEvents.timeRange.test.tsx

@@ -61,6 +61,7 @@ describe('EntityEvents time range wiring', () => {
 						)}`}
 					>
 						<EntityEvents
+							eventEntity="test"
 							queryKey="test"
 							category={InfraMonitoringEntity.PODS}
 							initialExpression={expression}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityEvents/hooks.ts

@@ -3,7 +3,6 @@ import { useQuery, useQueryClient } from 'react-query';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { ILog } from 'types/api/logs/log';
 
 import { getEntityEventsQueryPayload } from './utils';
 
@@ -11,7 +10,7 @@ export const K8S_ENTITY_EVENTS_EXPRESSION_KEY = 'k8sEntityEventsExpression';
 
 export interface EventRowData {
 	id: string;
-	body: ILog['body'];
+	body: string;
 	severity_text: string;
 	attributes_string?: Record<string, string>;
 	resources_string?: Record<string, string>;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import logEvent from 'api/common/logEvent';
 import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -19,6 +20,7 @@ import {
 	combineInitialAndUserExpression,
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { InfraMonitoringEvents } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -50,12 +52,14 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { logInfraDrawerFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface Props {
+	eventEntity: string;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
 }
 
 function EntityLogsContent({
+	eventEntity,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
@@ -123,6 +127,13 @@ function EntityLogsContent({
 				saveRecentQueryByExpression(DataSource.LOGS, newUserExpression);
 				querySearchOnRun(newUserExpression);
 
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.K8sEntity,
+					page: InfraMonitoringEvents.DetailedPage,
+					category,
+					view: InfraMonitoringEvents.LogsView,
+				});
+
 				logInfraDrawerFilterCustomizedEvent(
 					category,
 					'logs',
@@ -266,7 +277,11 @@ function EntityLogsContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<EntityDateTimeSelector category={category} />
+					<EntityDateTimeSelector
+						eventEntity={eventEntity}
+						category={category}
+						view={InfraMonitoringEvents.LogsView}
+					/>
 
 					<RunQueryBtn
 						isLoadingQueries={isFetching}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.test.tsx

@@ -94,6 +94,7 @@ describe('EntityLogs', () => {
 				>
 					<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
 						<EntityLogs
+							eventEntity="test"
 							queryKey="test"
 							category={InfraMonitoringEntity.PODS}
 							initialExpression='k8s.pod.name = "x"'

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/__tests__/EntityLogs.timeRange.test.tsx

@@ -73,6 +73,7 @@ describe('EntityLogs time range wiring', () => {
 						)}`}
 					>
 						<EntityLogs
+							eventEntity="test"
 							queryKey="test"
 							category={InfraMonitoringEntity.PODS}
 							initialExpression={expression}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
+import { InfraMonitoringEvents } from 'constants/events';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'lib/visualization/charts/TimeSeries/TimeSeries';
 import {
@@ -40,6 +41,7 @@ import ChartTooltipFooter from './ChartTooltipFooter';
 
 interface EntityMetricsProps<T> {
 	entity: T;
+	eventEntity: string;
 	entityWidgetInfo: K8sDetailsWidgetInfo[];
 	getEntityQueryPayload: (
 		node: T,
@@ -53,6 +55,7 @@ interface EntityMetricsProps<T> {
 
 function EntityMetrics<T>({
 	entity,
+	eventEntity,
 	entityWidgetInfo,
 	getEntityQueryPayload,
 	queryKey,
@@ -200,7 +203,11 @@ function EntityMetrics<T>({
 			<div ref={setTooltipPortalEl} style={{ display: 'contents' }} />
 
 			<div className={styles.metricsHeader}>
-				<EntityDateTimeSelector category={category} />
+				<EntityDateTimeSelector
+					eventEntity={eventEntity}
+					category={category}
+					view={InfraMonitoringEvents.MetricsView}
+				/>
 			</div>
 			<div className={styles.entityMetricsContainer}>
 				{queries.map((query, idx) => (

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.test.tsx

@@ -293,6 +293,7 @@ const renderEntityMetrics = (overrides = {}): any => {
 		<TestRouter>
 			<EntityMetrics
 				entity={defaultProps.entity}
+				eventEntity="test"
 				entityWidgetInfo={defaultProps.entityWidgetInfo}
 				getEntityQueryPayload={defaultProps.getEntityQueryPayload}
 				queryKey={defaultProps.queryKey}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.timeRange.test.tsx

@@ -60,6 +60,7 @@ function renderEntityMetrics(store: GlobalTimeStoreApi): jest.Mock {
 		<GlobalTimeContext.Provider value={store}>
 			<EntityMetrics
 				entity={entity}
+				eventEntity="test"
 				entityWidgetInfo={[{ title: 'CPU Usage', yAxisUnit: 'percentage' }]}
 				getEntityQueryPayload={getEntityQueryPayload}
 				queryKey="test-query-key"

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.stories.tsx

@@ -58,6 +58,7 @@ type Story = StoryObj<OverviewArgs>;
 export const Default: Story = {
 	args: {
 		category: InfraMonitoringEntity.PODS,
+		eventEntity: 'pod',
 		attributes: POD_ATTRIBUTES,
 		entity: { podUID: POD_UID },
 		entityName: POD_ATTRIBUTES['k8s.pod.name'],

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/EntityOverview.tsx

@@ -63,6 +63,7 @@ import styles from './EntityOverview.module.scss';
 
 export interface EntityOverviewProps {
 	category: InfraMonitoringEntity;
+	eventEntity: string;
 	/** The drawer entity's own attributes, which scope every related query */
 	attributes: EntityAttributes;
 	/** The drawer's own record and query prefix, so a row click can leave a
@@ -81,6 +82,7 @@ interface ContentProps extends EntityOverviewProps {
 
 function EntityOverviewContent({
 	category,
+	eventEntity,
 	attributes,
 	entity,
 	entityName,
@@ -188,7 +190,11 @@ function EntityOverviewContent({
 	return (
 		<div className={styles.container}>
 			<div className={styles.controls}>
-				<EntityDateTimeSelector category={category} />
+				<EntityDateTimeSelector
+					eventEntity={eventEntity}
+					category={category}
+					view={VIEW_TYPES.OVERVIEW}
+				/>
 
 				<RunQueryBtn
 					isLoadingQueries={isFetching}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/__tests__/EntityOverview.test.tsx

@@ -88,6 +88,7 @@ function overviewTree(
 					>
 						<EntityOverview
 							category={InfraMonitoringEntity.NODES}
+							eventEntity="node"
 							attributes={attributes}
 							entity={{ nodeName: attributes['k8s.node.name'] }}
 							entityName={attributes['k8s.node.name']}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import logEvent from 'api/common/logEvent';
 import {
 	QuerySearchV2Provider,
 	useExpression,
@@ -15,6 +16,7 @@ import {
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { ResizeTable } from 'components/ResizeTable';
+import { InfraMonitoringEvents } from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
@@ -37,18 +39,17 @@ import { getEntityTracesQueryPayload } from './utils';
 
 import styles from './EntityTraces.module.scss';
 import { useTimezone } from 'providers/Timezone';
-import {
-	logInfraDrawerFilterCustomizedEvent,
-	logInfraDrawerTraceClickedEvent,
-} from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
+import { logInfraDrawerFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/events';
 
 interface Props {
+	eventEntity: string;
 	queryKey: string;
 	category: InfraMonitoringEntity;
 	initialExpression: string;
 }
 
 function EntityTracesContent({
+	eventEntity,
 	queryKey,
 	category,
 }: Omit<Props, 'initialExpression'>): JSX.Element {
@@ -101,6 +102,13 @@ function EntityTracesContent({
 				saveRecentQueryByExpression(DataSource.TRACES, newUserExpression);
 				querySearchOnRun(newUserExpression || '');
 
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: eventEntity,
+					page: InfraMonitoringEvents.DetailedPage,
+					category,
+					view: InfraMonitoringEvents.TracesView,
+				});
+
 				logInfraDrawerFilterCustomizedEvent(
 					category,
 					'traces',
@@ -111,7 +119,14 @@ function EntityTracesContent({
 				refetch();
 			}
 		},
-		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
+		[
+			inputExpression,
+			initialExpression,
+			refetch,
+			querySearchOnRun,
+			category,
+			eventEntity,
+		],
 	);
 
 	const queryData = useMemo(
@@ -139,7 +154,11 @@ function EntityTracesContent({
 	const hasAdditionalFilters = !!userExpression?.trim();
 
 	const handleRowClick = useCallback(() => {
-		logInfraDrawerTraceClickedEvent(category);
+		void logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			category,
+			view: InfraMonitoringEvents.TracesView,
+		});
 	}, [category]);
 
 	useEffect(() => {
@@ -152,7 +171,11 @@ function EntityTracesContent({
 		<div className={styles.container}>
 			<div className={styles.filterContainer}>
 				<div className={styles.filterContainerTime}>
-					<EntityDateTimeSelector category={category} />
+					<EntityDateTimeSelector
+						eventEntity={eventEntity}
+						category={category}
+						view={InfraMonitoringEvents.TracesView}
+					/>
 
 					<RunQueryBtn
 						isLoadingQueries={isFetching}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.table.test.tsx

@@ -1,6 +1,4 @@
-import logEvent from 'api/common/logEvent';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { act, screen, userEvent, within } from 'tests/test-utils';
+import { act, screen, within } from 'tests/test-utils';
 
 import { renderEntityTraces } from './testUtils';
 import { mockQueryRangeV5WithTracesResponse } from '__tests__/query_range_v5.util';
@@ -22,11 +20,6 @@ jest.spyOn(window, 'matchMedia').mockImplementation(
 		}) as unknown as MediaQueryList,
 );
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
 describe('EntityTraces - Table Rendering', () => {
 	it('should render table with all column headers', async () => {
 		mockQueryRangeV5WithTracesResponse({ pageSize: 3 });
@@ -189,23 +182,4 @@ describe('EntityTraces - Table Rendering', () => {
 			'database',
 		]);
 	});
-
-	it('should log the drawer trace clicked event when a trace row is clicked', async () => {
-		mockQueryRangeV5WithTracesResponse({
-			customTraces: [{ serviceName: 'frontend' }],
-		});
-
-		renderEntityTraces();
-
-		const user = userEvent.setup();
-		const cell = await screen.findByTestId('serviceName');
-		await user.click(cell.closest('tr') as HTMLElement);
-
-		expect(logEvent).toHaveBeenCalledWith(
-			'Infra Monitoring: Drawer trace clicked',
-			{
-				entityType: InfraMonitoringEntity.PODS,
-			},
-		);
-	});
 });

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.timeRange.test.tsx

@@ -61,6 +61,7 @@ describe('EntityTraces time range wiring', () => {
 						)}`}
 					>
 						<EntityTraces
+							eventEntity="test"
 							queryKey="test"
 							category={InfraMonitoringEntity.PODS}
 							initialExpression={expression}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/testUtils.tsx

@@ -33,6 +33,7 @@ export function renderEntityTraces({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<EntityTraces
+				eventEntity="test"
 				queryKey="test"
 				category={category}
 				initialExpression={expression}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/__tests__/events.test.ts

@@ -1,30 +0,0 @@
-import logEvent from 'api/common/logEvent';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-
-import { logInfraDrawerFilterCustomizedEvent } from '../events';
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
-describe('logInfraDrawerFilterCustomizedEvent', () => {
-	it('logs a cleared filter with no expression keys', () => {
-		logInfraDrawerFilterCustomizedEvent(
-			InfraMonitoringEntity.PODS,
-			'logs',
-			'',
-			'search',
-		);
-
-		expect(jest.mocked(logEvent)).toHaveBeenCalledWith(
-			'Infra Monitoring: Drawer filter customized',
-			{
-				entityType: InfraMonitoringEntity.PODS,
-				tab: 'logs',
-				expressionKeys: [],
-				filterSource: 'search',
-			},
-		);
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab.tsx

@@ -1,4 +1,5 @@
 import { Container } from '@signozhq/icons';
+import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
 import { CustomTab } from '../Base/types';
@@ -10,6 +11,20 @@ import {
 
 import EntityMetrics from './EntityMetrics';
 
+const categoryToEventEntity: Record<InfraMonitoringEntity, string> = {
+	[InfraMonitoringEntity.DAEMONSETS]: InfraMonitoringEvents.DaemonSet,
+	[InfraMonitoringEntity.DEPLOYMENTS]: InfraMonitoringEvents.Deployment,
+	[InfraMonitoringEntity.JOBS]: InfraMonitoringEvents.Job,
+	[InfraMonitoringEntity.NAMESPACES]: InfraMonitoringEvents.Namespace,
+	[InfraMonitoringEntity.STATEFULSETS]: InfraMonitoringEvents.StatefulSet,
+	[InfraMonitoringEntity.PODS]: InfraMonitoringEvents.Pod,
+	[InfraMonitoringEntity.NODES]: InfraMonitoringEvents.Node,
+	[InfraMonitoringEntity.CLUSTERS]: InfraMonitoringEvents.Cluster,
+	[InfraMonitoringEntity.VOLUMES]: InfraMonitoringEvents.Volume,
+	[InfraMonitoringEntity.HOSTS]: InfraMonitoringEvents.HostEntity,
+	[InfraMonitoringEntity.CONTAINERS]: 'container',
+};
+
 interface CreatePodMetricsTabParams<T> {
 	getQueryPayload: (
 		entity: T,
@@ -27,6 +42,8 @@ export function createPodMetricsTab<T>({
 	category,
 	docBasePath,
 }: CreatePodMetricsTabParams<T>): CustomTab<T> {
+	const eventEntity = categoryToEventEntity[category];
+
 	const widgetInfo = docBasePath
 		? podUtilizationByPodWidgetInfo.map((widget) => ({
 				...widget,
@@ -41,6 +58,7 @@ export function createPodMetricsTab<T>({
 		render: ({ entity }) => (
 			<EntityMetrics
 				entity={entity}
+				eventEntity={eventEntity}
 				entityWidgetInfo={widgetInfo}
 				getEntityQueryPayload={getQueryPayload}
 				queryKey={queryKey}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/events.ts

@@ -10,9 +10,9 @@ export function logInfraDrawerTimeRangeCustomizedEvent(
 	entityType: InfraMonitoringEntity,
 	rangeLabel: string,
 ): void {
-	void logEvent('Infra Monitoring: Drawer time range customized', {
-		entityType,
-		rangeLabel: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	void logEvent('infra_drawer_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
 	});
 }
 
@@ -26,11 +26,15 @@ export function logInfraDrawerFilterCustomizedEvent(
 		(pair) => pair.key,
 	);
 
-	void logEvent('Infra Monitoring: Drawer filter customized', {
-		entityType,
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_drawer_filter_customized', {
+		entity_type: entityType,
 		tab,
-		expressionKeys: [...new Set(expressionKeys)],
-		filterSource,
+		expression_keys: [...new Set(expressionKeys)],
+		filter_source: filterSource,
 	});
 }
 
@@ -39,17 +43,9 @@ export function logInfraDrawerTabViewedEvent(
 	tab: string,
 	isDefaultTab: boolean,
 ): void {
-	void logEvent('Infra Monitoring: Drawer tab viewed', {
-		entityType,
+	void logEvent('infra_drawer_tab_viewed', {
+		entity_type: entityType,
 		tab,
-		isDefaultTab,
-	});
-}
-
-export function logInfraDrawerTraceClickedEvent(
-	entityType: InfraMonitoringEntity,
-): void {
-	void logEvent('Infra Monitoring: Drawer trace clicked', {
-		entityType,
+		is_default_tab: isDefaultTab,
 	});
 }

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -47,6 +47,8 @@ import {
 } from './hooks';
 
 import styles from './InfraMonitoringK8s.module.scss';
+import { InfraMonitoringEvents } from 'constants/events';
+import logEvent from 'api/common/logEvent';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import {
@@ -118,6 +120,13 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	}, [compositeQuery, redirectWithQueryBuilderData]);
 
 	useEffect(() => {
+		void logEvent(InfraMonitoringEvents.FilterApplied, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.ListPage,
+			category: selectedCategory,
+			view: InfraMonitoringEvents.QuickFiltersView,
+		});
+
 		// The category query param is a plain string; entities are validated by
 		// getEntityConfig before rendering
 		logInfraMonitoringListViewedEvent(selectedCategory as InfraMonitoringEntity);

frontend/src/container/InfraMonitoringK8sV2/Jobs/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -124,6 +125,7 @@ export const jobEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.JOBS,
+		eventCategory: InfraMonitoringEvents.Job,
 		tableColumns: k8sJobsColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sJobRowKey,
@@ -132,6 +134,7 @@ export const jobEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.JOBS,
+		eventCategory: InfraMonitoringEvents.Job,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'job',
 		getSelectedItemExpression: k8sJobGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/Namespaces/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
@@ -135,6 +136,7 @@ export const namespaceEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.NAMESPACES,
+		eventCategory: InfraMonitoringEvents.Namespace,
 		tableColumns: k8sNamespacesColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sNamespaceRowKey,
@@ -143,6 +145,7 @@ export const namespaceEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.NAMESPACES,
+		eventCategory: InfraMonitoringEvents.Namespace,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'namespace',
 		getSelectedItemExpression: k8sNamespaceGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/Nodes/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -122,6 +123,7 @@ export const nodeEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.NODES,
+		eventCategory: InfraMonitoringEvents.Node,
 		tableColumns: k8sNodesColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sNodeRowKey,
@@ -130,6 +132,7 @@ export const nodeEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.NODES,
+		eventCategory: InfraMonitoringEvents.Node,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'node',
 		getSelectedItemExpression: k8sNodeGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/Pods/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -113,6 +114,7 @@ export const podEntityConfig: K8sEntityConfig<InframonitoringtypesPodRecordDTO>
 	{
 		list: {
 			entity: InfraMonitoringEntity.PODS,
+			eventCategory: InfraMonitoringEvents.Pod,
 			tableColumns: k8sPodColumnsConfig,
 			fetchListData,
 			getRowKey: getK8sPodRowKey,
@@ -121,6 +123,7 @@ export const podEntityConfig: K8sEntityConfig<InframonitoringtypesPodRecordDTO>
 		},
 		details: {
 			category: InfraMonitoringEntity.PODS,
+			eventCategory: InfraMonitoringEvents.Pod,
 			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'pod',
 			getSelectedItemExpression: k8sPodGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
@@ -124,6 +125,7 @@ export const statefulSetEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.STATEFULSETS,
+		eventCategory: InfraMonitoringEvents.StatefulSet,
 		tableColumns: k8sStatefulSetsColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sStatefulSetRowKey,
@@ -132,6 +134,7 @@ export const statefulSetEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.STATEFULSETS,
+		eventCategory: InfraMonitoringEvents.StatefulSet,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'statefulSet',
 		getSelectedItemExpression: k8sStatefulSetGetSelectedItemExpression,

frontend/src/container/InfraMonitoringK8sV2/Volumes/entity.config.ts

@@ -7,6 +7,7 @@ import {
 	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
+import { InfraMonitoringEvents } from 'constants/events';
 
 import { K8sEntityConfig } from '../Base/entity.config.types';
 import { K8sBaseFilters, K8sDetailsFilters } from '../Base/types';
@@ -116,6 +117,7 @@ export const volumeEntityConfig: K8sEntityConfig<
 > = {
 	list: {
 		entity: InfraMonitoringEntity.VOLUMES,
+		eventCategory: InfraMonitoringEvents.Volumes,
 		tableColumns: k8sVolumesColumnsConfig,
 		fetchListData,
 		getRowKey: getK8sVolumeRowKey,
@@ -124,6 +126,7 @@ export const volumeEntityConfig: K8sEntityConfig<
 	},
 	details: {
 		category: InfraMonitoringEntity.VOLUMES,
+		eventCategory: InfraMonitoringEvents.Volume,
 		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'volume',
 		getSelectedItemExpression: k8sVolumeGetSelectedItemExpression,

frontend/src/container/LogDetailedView/ContextView/__tests__/ContextLogRenderer.test.tsx

@@ -33,10 +33,6 @@ import {
 // Mock the useContextLogData hook
 const mockHandleRunQuery = jest.fn();
 
-jest.mock('hooks/logs/useIsBodyJsonEnabled', () => ({
-	useIsBodyJsonEnabled: (): boolean => false,
-}));
-
 jest.mock('container/OptionsMenu', () => ({
 	useOptionsMenu: (): any => ({
 		options: {

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

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { FeatureKeys } from 'constants/features';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	ChangeViewFunctionType,
@@ -12,7 +13,7 @@ import {
 	PrettyViewAction,
 	VisibleActionsConfig,
 } from 'periscope/components/PrettyView/PrettyView';
-import { useIsBodyJsonEnabled } from 'hooks/logs/useIsBodyJsonEnabled';
+import { useAppContext } from 'providers/App/App';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { LogDetailsAction } from '../constants';
@@ -53,7 +54,11 @@ export function useLogAttributeActions({
 	onApplyLogFilter,
 }: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const isBodyJsonQueryEnabled = useIsBodyJsonEnabled();
+	const { featureFlags } = useAppContext();
+
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
 
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {

frontend/src/container/LogDetailedView/utils.tsx

@@ -2,7 +2,11 @@ import * as Sentry from '@sentry/react';
 import Convert from 'ansi-to-html';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
-import { ILog, ILogAggregateAttributesResources } from 'types/api/logs/log';
+import {
+	ILog,
+	ILogAggregateAttributesResources,
+	ILogBody,
+} from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
@@ -345,3 +349,8 @@ export const getSanitizedLogBody = (
 		return '{}';
 	}
 };
+
+// Returns a plain string for display contexts (Monaco editor, table cells, raw log row).
+export function getBodyDisplayString(body: string | ILogBody): string {
+	return typeof body === 'string' ? body : JSON.stringify(body as ILogBody);
+}

frontend/src/container/LogsExplorerList/LogsExplorerList.module.scss

@@ -0,0 +1,3 @@
+.logsTable {
+	--tanstack-table-row-height: 30px;
+}

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -2,7 +2,6 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	font-family: 'Space Mono', monospace;
 	font-size: 14px;
 	font-weight: 400;
 	line-height: 18px;
@@ -19,7 +18,6 @@
 			thead {
 				tr {
 					th {
-						font-family: 'Space Mono', monospace;
 						font-size: 12px;
 						color: white !important;
 
@@ -37,7 +35,6 @@
 					}
 
 					td {
-						font-family: 'Space Mono', monospace;
 						font-size: 12px;
 					}
 
@@ -57,7 +54,6 @@
 			tbody {
 				tr {
 					td {
-						font-family: 'Space Mono', monospace;
 						font-size: 12px;
 						padding: 4px !important;
 

frontend/src/container/LogsExplorerList/index.tsx

@@ -48,6 +48,7 @@ import {
 	isTraceToLogsQuery,
 } from './utils';
 
+import styles from './LogsExplorerList.module.scss';
 import './LogsExplorerList.style.scss';
 
 function Footer(): JSX.Element {
@@ -202,6 +203,7 @@ function LogsExplorerList({
 			return (
 				<TanStackTable<ILog>
 					ref={ref as React.Ref<TanStackTableHandle>}
+					className={styles.logsTable}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
 					respectColumnOrder={false}

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

@@ -1,5 +1,4 @@
 .logs-explorer-views-container {
-	margin-bottom: 24px;
 	flex: 1;
 	min-height: 0;
 	display: flex;

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -2,8 +2,9 @@ import { useTranslation } from 'react-i18next';
 import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
 import { Form, Select, Space } from 'antd';
+import { FeatureKeys } from 'constants/features';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
-import { useIsBodyJsonEnabled } from 'hooks/logs/useIsBodyJsonEnabled';
+import { useAppContext } from 'providers/App/App';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { formValidationRules } from '../config';
@@ -137,7 +138,10 @@ function ProcessorForm({
 	selectedProcessorData,
 	isAdd,
 }: ProcessorFormProps): JSX.Element {
-	const isBodyJsonEnabled = useIsBodyJsonEnabled();
+	const { featureFlags } = useAppContext();
+	const isBodyJsonEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
 
 	return (
 		<div className="processor-form-container">

frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx

@@ -2,8 +2,8 @@ import { Expand } from '@signozhq/icons';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getBodyDisplayString } from 'container/LogDetailedView/utils';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { getBodyDisplay } from 'lib/logs/logBody';
 import { useTimezone } from 'providers/Timezone';
 import { ILog } from 'types/api/logs/log';
 
@@ -31,7 +31,7 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
 						)}
 					</div>
 					<div className="logs-preview-list-item-body">
-						{getBodyDisplay(log.body)}
+						{getBodyDisplayString(log.body)}
 					</div>
 					<div
 						className="logs-preview-list-item-expand"

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

@@ -1,14 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: 8px 0;
-}
-
-.optionsTrigger {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	cursor: pointer;
-}

frontend/src/container/TracesExplorer/Controls/index.tsx

@@ -1,82 +1,57 @@
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Settings } from '@signozhq/icons';
+import { SlidersVertical } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import FieldsSelector from 'components/FieldsSelector';
-import Controls, { ControlsProps } from 'container/Controls';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
 import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './Controls.module.scss';
-
 function TraceExplorerControls({
-	isLoading,
-	totalCount,
-	perPageOptions,
 	config,
-	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
 	const { t } = useTranslation(['trace']);
 	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
 
-	const {
-		pagination,
-		handleCountItemsPerPageChange,
-		handleNavigateNext,
-		handleNavigatePrevious,
-	} = useQueryPagination(totalCount, perPageOptions);
+	if (!config?.fieldsSelector) {
+		return null;
+	}
+
+	const label = t('options_menu.options');
 
 	return (
-		<div className={styles.container}>
-			{config?.fieldsSelector && (
-				<>
-					<div
-						className={styles.optionsTrigger}
-						onClick={(): void => setIsFieldsSelectorOpen(true)}
-					>
-						{t('options_menu.options')}
-						<Settings size="md" />
-					</div>
-					<FieldsSelector
-						isOpen={isFieldsSelectorOpen}
-						title="Edit columns"
-						fields={config.fieldsSelector.value}
-						onFieldsChange={config.fieldsSelector.onFieldsChange}
-						onClose={(): void => setIsFieldsSelectorOpen(false)}
-						signal={DataSource.TRACES}
-					/>
-				</>
-			)}
-
-			<Controls
-				isLoading={isLoading}
-				totalCount={totalCount}
-				offset={pagination.offset}
-				countPerPage={pagination.limit}
-				perPageOptions={perPageOptions}
-				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
-				handleNavigateNext={handleNavigateNext}
-				handleNavigatePrevious={handleNavigatePrevious}
-				showSizeChanger={showSizeChanger}
+		<>
+			<Tooltip title={label}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					icon
+					aria-label={label}
+					testId="periscope-btn-options-traces"
+					onClick={(): void => setIsFieldsSelectorOpen(true)}
+				>
+					<SlidersVertical size={14} />
+				</Button>
+			</Tooltip>
+			<FieldsSelector
+				isOpen={isFieldsSelectorOpen}
+				title="Edit columns"
+				fields={config.fieldsSelector.value}
+				onFieldsChange={config.fieldsSelector.onFieldsChange}
+				onClose={(): void => setIsFieldsSelectorOpen(false)}
+				signal={DataSource.TRACES}
 			/>
-		</div>
+		</>
 	);
 }
 
+type TraceExplorerControlsProps = {
+	config?: OptionsMenuConfig | null;
+};
+
 TraceExplorerControls.defaultProps = {
 	config: null,
 };
 
-type TraceExplorerControlsProps = Pick<
-	ControlsProps,
-	'isLoading' | 'totalCount' | 'perPageOptions'
-> & {
-	config?: OptionsMenuConfig | null;
-	showSizeChanger?: boolean;
-};
-
-TraceExplorerControls.defaultProps = {
-	showSizeChanger: true,
-};
-
 export default memo(TraceExplorerControls);

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

@@ -7,6 +7,32 @@
 	min-height: 400px;
 }
 
+.controls {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 4px;
+	min-height: 40px;
+	padding: 4px 8px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.orderBy {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.orderByLabel {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--l2-foreground);
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+}
+
 .drawerScope {
 	display: contents;
 }

frontend/src/container/TracesExplorer/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/TracesExplorer/ListView/__tests__/InfiniteScroll.test.tsx

@@ -0,0 +1,149 @@
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen } from 'tests/test-utils';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+
+import {
+	listResponse,
+	listRows,
+	QUERY_RANGE_URL,
+	renderListView,
+} from './testUtils';
+
+// globalTime starts with loading:true, which gates the list query. Force just that
+// slice's loading to false so the query fires; every other selector is untouched.
+jest.mock('react-redux', () => {
+	const actual = jest.requireActual('react-redux');
+	return {
+		...actual,
+		useSelector: (selector: (state: unknown) => unknown): unknown => {
+			const result = actual.useSelector(selector);
+			if (result && typeof result === 'object' && 'loading' in result) {
+				return { ...result, loading: false };
+			}
+			return result;
+		},
+	};
+});
+
+// List columns come from the options menu (server-synced preferences). Pin them
+// so the expected columns render, independent of that API.
+jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
+	__esModule: true,
+	default: (): unknown => ({
+		options: {
+			selectColumns: [
+				{ name: 'service.name', fieldContext: 'resource' },
+				{ name: 'name', fieldContext: 'span' },
+				{ name: 'duration_nano', fieldContext: 'span' },
+				{ name: 'http_method', fieldContext: 'span' },
+				{ name: 'response_status_code', fieldContext: 'span' },
+				{ name: 'http.route', fieldContext: 'attribute' },
+				{ name: 'cache.hit', fieldContext: 'attribute' },
+			],
+		},
+		config: { addColumn: { onRemove: jest.fn() } },
+	}),
+}));
+
+type ListRequest = {
+	offset: number;
+	limit: number;
+	start: number;
+	end: number;
+};
+
+// Answers each offset with `rowsPerOffset[offset]` rows and records every request.
+const mockListPages = (
+	rowsPerOffset: Record<number, number>,
+	firstPageDelayMs = 0,
+): ListRequest[] => {
+	const requests: ListRequest[] = [];
+	server.use(
+		rest.post(QUERY_RANGE_URL, async (req, res, ctx) => {
+			const body = await req.json<QueryRangeRequestV5>();
+			const spec = body.compositeQuery.queries[0].spec as {
+				offset?: number;
+				limit: number;
+			};
+			const offset = spec.offset ?? 0;
+			requests.push({
+				offset,
+				limit: spec.limit,
+				start: body.start,
+				end: body.end,
+			});
+			const length = Math.min(rowsPerOffset[offset] ?? 0, spec.limit);
+			const rows = Array.from({ length }, (_, i) => ({
+				...listRows[0],
+				data: {
+					...listRows[0].data,
+					name: `span-${offset + i}`,
+					span_id: `span-${offset + i}`,
+				},
+			}));
+			return res(
+				ctx.delay(offset === 0 ? firstPageDelayMs : 0),
+				ctx.status(200),
+				ctx.json(listResponse(rows)),
+			);
+		}),
+	);
+	return requests;
+};
+
+// Tall enough that the mocked virtuoso renders every row and reaches the end.
+const FULL_HEIGHT = 200 * 54;
+
+describe('Traces ListView - infinite scroll', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('loads the next page at the end of the list over the same window', async () => {
+		// Past the one-second resolution of the window, so a recomputed "now" would show.
+		const requests = mockListPages({ 0: 100, 100: 5 }, 1100);
+		renderListView(initialQueriesMap.traces, FULL_HEIGHT);
+
+		await expect(
+			screen.findByText('span-104', undefined, { timeout: 3000 }),
+		).resolves.toBeInTheDocument();
+		expect(screen.getByText('span-0')).toBeInTheDocument();
+		expect(requests.map(({ offset }) => offset)).toStrictEqual([0, 100]);
+		expect(requests[1].start).toBe(requests[0].start);
+		expect(requests[1].end).toBe(requests[0].end);
+	});
+
+	it('stops after a short page', async () => {
+		const requests = mockListPages({ 0: 5 });
+		renderListView(initialQueriesMap.traces, FULL_HEIGHT);
+
+		await expect(screen.findByText('span-4')).resolves.toBeInTheDocument();
+		expect(requests.map(({ offset }) => offset)).toStrictEqual([0]);
+	});
+
+	it('stops at the query limit', async () => {
+		const requests = mockListPages({ 0: 100, 100: 100 });
+		const { builder } = initialQueriesMap.traces;
+		renderListView(
+			{
+				...initialQueriesMap.traces,
+				builder: {
+					...builder,
+					queryData: [{ ...builder.queryData[0], limit: 150 }],
+				},
+			} as Query,
+			FULL_HEIGHT,
+		);
+
+		await expect(screen.findByText('span-149')).resolves.toBeInTheDocument();
+		expect(
+			requests.map(({ offset, limit }) => ({ offset, limit })),
+		).toStrictEqual([
+			{ offset: 0, limit: 100 },
+			{ offset: 100, limit: 50 },
+		]);
+	});
+});

frontend/src/container/TracesExplorer/ListView/__tests__/SpanDrawerNavigation.test.tsx

@@ -1,9 +1,12 @@
-import remove from 'api/browser/localstorage/remove';
-import set from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
+import { getCurrentLocation } from 'lib/router/navigation';
 import { server } from 'mocks-server/server';
 import { screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { mockSuccess, mockTraceSummary, renderListView } from './testUtils';
+import {
+	listRows,
+	mockSuccess,
+	mockTraceSummary,
+	renderListView,
+} from './testUtils';
 
 // globalTime starts with loading:true, which gates the list query. Force just that
 // slice's loading to false so the query fires; every other selector is untouched.
@@ -43,14 +46,13 @@ jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
 
 describe('Traces ListView - span drawer navigation', () => {
 	beforeEach(() => {
-		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
 		mockSuccess();
 		mockTraceSummary({});
 	});
 
 	afterEach(() => {
-		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
 		server.resetHandlers();
+		jest.restoreAllMocks();
 	});
 
 	it('opens the clicked span and steps through rows with the arrow keys', async () => {
@@ -110,4 +112,41 @@ describe('Traces ListView - span drawer navigation', () => {
 			expect(screen.queryByTestId('span-details-drawer')).not.toBeInTheDocument(),
 		);
 	});
+
+	it('opens the trace page in a new tab from the row icon without opening the drawer', async () => {
+		const open = jest.spyOn(window, 'open').mockImplementation(() => null);
+		// user-event leaves the row on its way to the button, which clears the hover.
+		const user = userEvent.setup({ skipHover: true });
+		renderListView();
+
+		const row = (await screen.findByText('HTTP GET')).closest(
+			'tr',
+		) as HTMLElement;
+		expect(screen.queryByTestId('span-row-open-trace')).not.toBeInTheDocument();
+		await user.hover(row);
+		await user.click(await screen.findByTestId('span-row-open-trace'));
+
+		expect(open).toHaveBeenCalledWith(
+			expect.stringMatching(
+				/\/trace\/0000000000000000344ded1387b08a7e\?.*772c4d29dd9076ac/,
+			),
+			'_blank',
+		);
+		expect(getCurrentLocation().pathname).toBe('/traces-explorer');
+		expect(screen.queryByTestId('span-details-drawer')).not.toBeInTheDocument();
+	});
+
+	it('shows the row icon only on the hovered copy of a duplicate span', async () => {
+		mockSuccess([listRows[0], listRows[0]]);
+		// user-event leaves the row on its way to the button, which clears the hover.
+		const user = userEvent.setup({ skipHover: true });
+		renderListView();
+
+		const [first] = await screen.findAllByText('HTTP GET');
+		await user.hover(first.closest('tr') as HTMLElement);
+
+		await expect(
+			screen.findAllByTestId('span-row-open-trace'),
+		).resolves.toHaveLength(1);
+	});
 });

frontend/src/container/TracesExplorer/ListView/__tests__/SpanDrawerTraceBounds.test.tsx

@@ -1,6 +1,3 @@
-import remove from 'api/browser/localstorage/remove';
-import set from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { screen, userEvent, waitFor, within } from 'tests/test-utils';
@@ -54,13 +51,11 @@ jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
 
 describe('Traces ListView - span drawer trace bounds', () => {
 	beforeEach(() => {
-		set(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED, 'true');
 		mockSuccess();
 		mockTraceSummary({});
 	});
 
 	afterEach(() => {
-		remove(LOCALSTORAGE.TRACES_SPAN_DRAWER_ENABLED);
 		server.resetHandlers();
 	});
 

frontend/src/container/TracesExplorer/ListView/__tests__/testUtils.tsx

@@ -88,9 +88,10 @@ export const mockSuccess = (rows: unknown[] = listRows): void => {
 
 export const renderListView = (
 	stagedQuery: Query = initialQueriesMap.traces,
+	viewportHeight = 500,
 ): ReturnType<typeof render> =>
 	render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
+		<VirtuosoMockContext.Provider value={{ viewportHeight, itemHeight: 54 }}>
 			<ListView
 				isFilterApplied={false}
 				setWarning={jest.fn()}

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

@@ -78,8 +78,8 @@ describe('Traces ListView - Data Loaded', () => {
 			'200',
 		);
 
-		// empty status fields render "-"
-		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
+		// empty status fields render the dash icon
+		expect(screen.getAllByTestId('empty-value').length).toBeGreaterThanOrEqual(1);
 	});
 
 	it('requests every span field instead of the selected columns', async () => {

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

@@ -1,5 +1,5 @@
 import { rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ListView from './index';
 
@@ -59,16 +59,8 @@ const verifyControlsVisibility = (): void => {
 	// Order by controls
 	expect(screen.getByText(/Order by/i)).toBeInTheDocument();
 
-	// Pagination controls
-	expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
-	expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
-
-	// Items per page selector (there are multiple comboboxes, so we check for at least 2)
-	const comboboxes = screen.getAllByRole('combobox');
-	expect(comboboxes.length).toBeGreaterThanOrEqual(2);
-
 	// Options menu (settings button) - check for translation key or actual text
-	expect(screen.getByText(/options_menu.options|options/i)).toBeInTheDocument();
+	expect(screen.getByTestId('periscope-btn-options-traces')).toBeInTheDocument();
 };
 
 describe('Traces ListView - Error and Empty States', () => {
@@ -153,18 +145,11 @@ describe('Traces ListView - Error and Empty States', () => {
 			});
 
 			// Order by controls should be interactive
-			const comboboxes = screen.getAllByRole('combobox');
-			expect(comboboxes.length).toBeGreaterThanOrEqual(2);
-
-			// Pagination controls should be present
-			const previousButton = screen.getByRole('button', { name: /previous/i });
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			expect(previousButton).toBeInTheDocument();
-			expect(nextButton).toBeInTheDocument();
+			expect(screen.getAllByRole('combobox').length).toBeGreaterThanOrEqual(1);
 
 			// Options menu should be clickable
-			const optionsButton = screen.getByText(/options_menu.options|options/i);
-			expect(optionsButton).toBeInTheDocument();
+			await userEvent.click(screen.getByTestId('periscope-btn-options-traces'));
+			await expect(screen.findByText('Edit columns')).resolves.toBeInTheDocument();
 		});
 
 		it('allows interaction with controls in empty state', async () => {
@@ -176,12 +161,11 @@ describe('Traces ListView - Error and Empty States', () => {
 			});
 
 			// All controls should be interactive
-			const comboboxes = screen.getAllByRole('combobox');
-			expect(comboboxes.length).toBeGreaterThanOrEqual(2);
+			expect(screen.getAllByRole('combobox').length).toBeGreaterThanOrEqual(1);
 
 			// Options menu should be clickable
-			const optionsButton = screen.getByText(/options_menu.options|options/i);
-			expect(optionsButton).toBeInTheDocument();
+			await userEvent.click(screen.getByTestId('periscope-btn-options-traces'));
+			await expect(screen.findByText('Edit columns')).resolves.toBeInTheDocument();
 		});
 	});
 });

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

@@ -20,22 +20,15 @@ import {
 	getFieldColumn,
 	TracesTableRow,
 } from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
-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 SpanDrawer from 'container/TracesExplorer/SpanDrawer/SpanDrawer';
 import { useSpanDrawer } from 'container/TracesExplorer/SpanDrawer/useSpanDrawer';
-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 { getListOrderBy, setListOrderBy } from 'utils/explorerUtils';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { AppState } from 'store/reducers';
@@ -43,14 +36,9 @@ 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 { getTraceLink, transformSpanRows } from './utils';
-
-import './ListView.styles.scss';
+import { defaultSelectedColumns, TIMESTAMP_FIELD } from './configs';
+import { useListViewInfiniteQuery } from './useListViewInfiniteQuery';
+import { getTraceLink } from './utils';
 
 import styles from './ListView.module.scss';
 
@@ -96,12 +84,6 @@ function ListView({
 		},
 	});
 
-	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
-		QueryParams.pagination,
-	);
-	const paginationConfig =
-		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
-
 	// Empty selectFields makes the API return every span field.
 	const requestQuery = useMemo(() => {
 		const query = getListViewQuery(
@@ -125,51 +107,26 @@ function ListView({
 			minTime,
 			stagedQuery,
 			panelType,
-			paginationConfig,
-		],
-		[
-			stagedQuery,
-			panelType,
-			globalSelectedTime,
-			paginationConfig,
-			maxTime,
-			minTime,
 		],
+		[stagedQuery, panelType, globalSelectedTime, maxTime, minTime],
 	);
 
 	if (queryKeyRef) {
 		queryKeyRef.current = queryKey;
 	}
 
-	const { data, isFetching, isLoading, isError, error } = useGetQueryRange(
-		{
+	const { rows, warning, isFetching, isLoading, isError, error, loadMore } =
+		useListViewInfiniteQuery({
 			query: requestQuery,
-			graphType: panelType,
-			selectedTime: 'GLOBAL_TIME' as const,
-			globalSelectedInterval: globalSelectedTime as CustomTimeType,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: paginationConfig,
-			},
-		},
-		// ENTITY_VERSION_V4,
-		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,
-		},
-	);
+		});
 
 	useEffect(() => {
-		if (data?.payload) {
-			setWarning(data?.warning);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data?.payload, data?.warning]);
+		setWarning(warning);
+	}, [warning, setWarning]);
 
 	useEffect(() => {
 		if (isLoading || isFetching) {
@@ -179,15 +136,8 @@ function ListView({
 		}
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
-	const dataLength =
-		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
-	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
-
-	const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
-	const queryTableData = useMemo(
-		() => queryTableDataResult || [],
-		[queryTableDataResult],
-	);
+	const { tableProps, openTraceColumn, drawerProps, onPressInside } =
+		useSpanDrawer(rows);
 
 	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
 		const fields = [
@@ -196,15 +146,9 @@ function ListView({
 				(field) => field.name !== TIMESTAMP_FIELD.name,
 			),
 		];
-		return fields.map((field) => getFieldColumn(field));
-	}, [options?.selectColumns]);
-
-	const rows = useMemo(
-		() => transformSpanRows(queryTableData),
-		[queryTableData],
-	);
-
-	const { tableProps, drawerProps, onPressInside } = useSpanDrawer(rows);
+		const fieldColumns = fields.map((field) => getFieldColumn(field));
+		return [openTraceColumn, ...fieldColumns];
+	}, [options?.selectColumns, openTraceColumn]);
 
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TracesTableRow>[]): void => {
@@ -230,10 +174,10 @@ function ListView({
 
 	return (
 		<div className={styles.container}>
-			<div className="trace-explorer-controls">
+			<div className={styles.controls}>
 				{headerActions}
-				<div className="order-by-container">
-					<div className="order-by-label">
+				<div className={styles.orderBy}>
+					<div className={styles.orderByLabel}>
 						Order by <Minus size={14} /> <ArrowUp10 size={14} />
 					</div>
 
@@ -249,12 +193,7 @@ function ListView({
 					selectedColumns={options?.selectColumns}
 				/>
 
-				<TraceExplorerControls
-					isLoading={isFetching}
-					totalCount={totalCount}
-					config={config}
-					perPageOptions={PER_PAGE_OPTIONS}
-				/>
+				<TraceExplorerControls config={config} />
 			</div>
 
 			{/* A press in the table or the drawer (a portal) keeps the drawer open. */}
@@ -273,9 +212,10 @@ function ListView({
 					isFilterApplied={isFilterApplied}
 					onColumnOrderChange={handleColumnOrderChange}
 					onColumnRemove={config?.addColumn?.onRemove}
+					onEndReached={loadMore}
 				/>
 
-				{drawerProps && <SpanDrawer {...drawerProps} />}
+				<SpanDrawer {...drawerProps} />
 			</div>
 		</div>
 	);

frontend/src/container/TracesExplorer/ListView/useListViewInfiniteQuery.ts

@@ -0,0 +1,110 @@
+import { useCallback, useMemo } from 'react';
+import { QueryKey, useInfiniteQuery } from 'react-query';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { useKeepRowsForSameQuery } from 'container/TracesExplorer/TracesTable/useKeepRowsForSameQuery';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { Warning } from 'types/api';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getListLimit, getNextPageOffset, transformSpanRows } from './utils';
+
+type UseListViewInfiniteQueryParams = {
+	query: Query;
+	queryKey: QueryKey;
+	enabled: boolean;
+};
+
+type UseListViewInfiniteQueryResult = {
+	rows: TracesTableRow[];
+	warning: Warning | undefined;
+	isLoading: boolean;
+	isFetching: boolean;
+	isError: boolean;
+	error: Error | null;
+	loadMore: () => void;
+};
+
+export function useListViewInfiniteQuery({
+	query,
+	queryKey,
+	enabled,
+}: UseListViewInfiniteQueryParams): UseListViewInfiniteQueryResult {
+	const limit = getListLimit(query);
+
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		isError,
+		error,
+		hasNextPage,
+		fetchNextPage,
+		isPreviousData,
+	} = useInfiniteQuery({
+		queryKey,
+		queryFn: ({ pageParam = 0, signal }) =>
+			GetMetricQueryRange(
+				{
+					query,
+					graphType: PANEL_TYPES.LIST,
+					selectedTime: 'GLOBAL_TIME',
+					// Every page reads the window in redux, so later pages cannot drift.
+					globalSelectedInterval: 'custom',
+					params: { dataSource: 'traces' },
+					tableParams: {
+						pagination: {
+							offset: pageParam as number,
+							limit: limit
+								? Math.min(DEFAULT_PER_PAGE_VALUE, limit - (pageParam as number))
+								: DEFAULT_PER_PAGE_VALUE,
+						},
+					},
+				},
+				ENTITY_VERSION_V5,
+				undefined,
+				signal,
+			),
+		getNextPageParam: (_lastPage, allPages) =>
+			getNextPageOffset(
+				allPages.map(
+					(page) => page.payload.data.newResult.data.result?.[0]?.list?.length ?? 0,
+				),
+				DEFAULT_PER_PAGE_VALUE,
+				limit,
+			),
+		keepPreviousData: true,
+		enabled,
+	});
+
+	const keepRows = useKeepRowsForSameQuery(isPreviousData);
+
+	const rows = useMemo(
+		() =>
+			keepRows
+				? (data?.pages ?? []).flatMap((page) =>
+						transformSpanRows(page.payload.data.newResult.data.result ?? []),
+					)
+				: [],
+		[data?.pages, keepRows],
+	);
+
+	const loadMore = useCallback((): void => {
+		if (hasNextPage && !isFetchingNextPage) {
+			void fetchNextPage();
+		}
+	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+	return {
+		rows,
+		warning: data?.pages[data.pages.length - 1]?.warning,
+		isLoading,
+		isFetching,
+		isError,
+		error: error as Error | null,
+		loadMore,
+	};
+}

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -14,6 +14,7 @@ import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter'
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { ILog } from 'types/api/logs/log';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
 export function BlockLink({
@@ -178,3 +179,23 @@ export const transformSpanRows = (data: QueryDataV3[]): TracesTableRow[] => {
 		};
 	}) as TracesTableRow[];
 };
+
+export const getListLimit = (query: Query): number | null =>
+	query.builder.queryTraceOperator?.[0]?.limit ??
+	query.builder.queryData[0]?.limit ??
+	null;
+
+/** Offset of the next page, or undefined once a short page or the limit ends the list. */
+export const getNextPageOffset = (
+	pageLengths: number[],
+	pageSize: number,
+	limit: number | null,
+): number | undefined => {
+	const loaded = pageLengths.reduce((sum, length) => sum + length, 0);
+	const lastLength = pageLengths[pageLengths.length - 1] ?? 0;
+
+	if (lastLength < pageSize || (limit && loaded >= limit)) {
+		return undefined;
+	}
+	return loaded;
+};

frontend/src/container/TracesExplorer/SpanDrawer/OpenTraceButton.module.scss

@@ -0,0 +1,9 @@
+// One text line tall, so the taller button overflows into the cell padding
+// instead of growing the row on hover.
+.slot {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--tanstack-plain-cell-line-height, 20px);
+	overflow: visible;
+}

frontend/src/container/TracesExplorer/SpanDrawer/OpenTraceButton.tsx

@@ -0,0 +1,52 @@
+import { MouseEvent } from 'react';
+import { CornerUpRight } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import { useIsRowHovered } from 'components/TanStackTableView/TanStackTableStateContext';
+import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
+import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { openInNewTab } from 'utils/navigation';
+
+import styles from './OpenTraceButton.module.scss';
+
+type OpenTraceButtonProps = {
+	row: TracesTableRow;
+	rowId: string;
+};
+
+function OpenTraceButton({
+	row,
+	rowId,
+}: OpenTraceButtonProps): JSX.Element | null {
+	const isHovered = useIsRowHovered(rowId);
+
+	const handleClick = (event: MouseEvent): void => {
+		// The row click would open the drawer instead.
+		event.stopPropagation();
+		openInNewTab(getTraceLink(row));
+	};
+
+	if (!isHovered) {
+		return null;
+	}
+
+	return (
+		<span className={styles.slot}>
+			<Tooltip title="Open trace details">
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					icon
+					onClick={handleClick}
+					aria-label="Open trace details"
+					testId="span-row-open-trace"
+				>
+					<CornerUpRight size={14} />
+				</Button>
+			</Tooltip>
+		</span>
+	);
+}
+
+export default OpenTraceButton;