refactor(prometheus): serve the Prometheus query API from a /prometheus prefix

Moves the Prometheus HTTP query API out of the legacy query-service handler
into pkg/prometheus/promapi, served under /prometheus:

- GET|POST /prometheus/api/v1/query_range and /query: Prometheus parameter
  parsing (float-unix or RFC3339 times, float-seconds or duration-string
  durations), the Prometheus error envelope ({status, errorType, error}
  with 400/422/503), the 11,000-point cap, documented in openapi.yml.
- Removes the legacy GET /api/v1/query_range and /api/v1/query handlers
  and their now-dead plumbing (parseMetricsTime, parseMetricsDuration,
  parseInstantQueryMetricsRequest, parseQueryRangeRequest,
  GetInstantQueryMetricsResult, InstantQueryMetricsParams).
  GetQueryRangeResult stays - legacy dashboard queriers use it.

This is the breaking slice of the stack, deliberately last: everything
before it is invisible to API consumers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.github/workflows/cacheci.yml

@@ -0,0 +1,92 @@
+name: cacheci
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  actions: write
+
+# Cancelling mid-rotation is safe: the sequential delete-then-save order
+# leaves at most one key missing at any moment.
+concurrency:
+  group: cacheci
+  cancel-in-progress: true
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: restore
+        id: restore
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+          restore-keys: |
+            tests-secondary
+      - name: inject
+        if: steps.restore.outputs.cache-matched-key != ''
+        run: |
+          cat > "$RUNNER_TEMP/inject.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              --mount=type=bind,target=/restored \
+              tar -xf /restored/go-build.tar -C /root/.cache/go-build && \
+              tar -xf /restored/go-mod.tar -C /go/pkg/mod && \
+              tar -xf /restored/pnpm-store.tar -C /pnpm/store
+          EOF
+          docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
+      - name: build
+        run: |
+          docker build -f cmd/enterprise/Dockerfile.integration --build-arg TARGETARCH=amd64 --build-arg ZEUSURL=http://zeus:8080 .
+          docker build -f cmd/enterprise/Dockerfile.with-web.integration --build-arg TARGETARCH=amd64 --build-arg ZEUSURL=http://zeus:8080 .
+      # docker cp instead of --output type=local (the local exporter stalls on
+      # multi-GB outputs); tarballs instead of raw trees so the host never hits
+      # the permission and symlink semantics that broke docker cp.
+      - name: extract
+        run: |
+          rm -rf "$RUNNER_TEMP/cacheci"
+          mkdir -p "$RUNNER_TEMP/cacheci" "$RUNNER_TEMP/extract-context"
+          cat > "$RUNNER_TEMP/extract.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              mkdir -p /out && \
+              tar -cf /out/go-build.tar -C /root/.cache/go-build . && \
+              tar -cf /out/go-mod.tar -C /go/pkg/mod . && \
+              tar -cf /out/pnpm-store.tar -C /pnpm/store .
+          EOF
+          docker build -f "$RUNNER_TEMP/extract.Dockerfile" -t cacheci-extract "$RUNNER_TEMP/extract-context"
+          id=$(docker create cacheci-extract)
+          docker cp "$id":/out/. "$RUNNER_TEMP/cacheci/"
+          docker rm "$id"
+      # Fixed cache keys are immutable, so each key must be deleted before it
+      # can be saved again. Rotating primary and secondary one after the other
+      # keeps at least one key restorable for concurrent test runs.
+      - name: delete-primary
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh cache delete tests-primary --repo "$GITHUB_REPOSITORY" || true
+      - name: save-primary
+        uses: actions/cache/save@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+      - name: delete-secondary
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh cache delete tests-secondary --repo "$GITHUB_REPOSITORY" || true
+      - name: save-secondary
+        uses: actions/cache/save@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-secondary

.github/workflows/e2eci.yaml

@@ -75,6 +75,30 @@ jobs:
           docker rm pw
           echo "PLAYWRIGHT_BROWSERS_PATH=$RUNNER_TEMP/ms-playwright" >> "$GITHUB_ENV"
           cd tests/e2e && pnpm playwright install-deps ${{ matrix.project }}
+      # Restore-only: the cacheci workflow owns cache saves. Seeds the
+      # BuildKit cache mounts so the in-test image build is incremental.
+      - name: restore
+        id: restore
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+          restore-keys: |
+            tests-secondary
+      - name: inject
+        if: steps.restore.outputs.cache-matched-key != ''
+        run: |
+          cat > "$RUNNER_TEMP/inject.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              --mount=type=bind,target=/restored \
+              tar -xf /restored/go-build.tar -C /root/.cache/go-build && \
+              tar -xf /restored/go-mod.tar -C /go/pkg/mod && \
+              tar -xf /restored/pnpm-store.tar -C /pnpm/store
+          EOF
+          docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
       - name: bring-up-stack
         run: |
           cd tests && \

.github/workflows/integrationci.yaml

@@ -110,6 +110,30 @@ jobs:
           sudo mv chromedriver-linux64/chromedriver /usr/local/bin/chromedriver
           chromedriver -version
           google-chrome-stable --version
+      # Restore-only: the cacheci workflow owns cache saves. Seeds the
+      # BuildKit cache mounts so the in-test image build is incremental.
+      - name: restore
+        id: restore
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ runner.temp }}/cacheci
+          key: tests-primary
+          restore-keys: |
+            tests-secondary
+      - name: inject
+        if: steps.restore.outputs.cache-matched-key != ''
+        run: |
+          cat > "$RUNNER_TEMP/inject.Dockerfile" <<'EOF'
+          FROM busybox:1.37
+          RUN --mount=type=cache,target=/root/.cache/go-build \
+              --mount=type=cache,target=/go/pkg/mod \
+              --mount=type=cache,target=/pnpm/store \
+              --mount=type=bind,target=/restored \
+              tar -xf /restored/go-build.tar -C /root/.cache/go-build && \
+              tar -xf /restored/go-mod.tar -C /go/pkg/mod && \
+              tar -xf /restored/pnpm-store.tar -C /pnpm/store
+          EOF
+          docker build -f "$RUNNER_TEMP/inject.Dockerfile" "$RUNNER_TEMP/cacheci"
       - name: run
         run: |
           cd tests && \

Makefile

@@ -209,8 +209,8 @@ py-lint: ## Run ruff check across the shared tests project
 	@cd tests && uv run ruff check --fix .
 
 .PHONY: py-test-setup
-py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
+py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests, rebuilding signoz from the current sources
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --capture=no integration/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
 py-test-teardown: ## Tear down the shared SigNoz backend

cmd/enterprise/Dockerfile.integration

@@ -4,9 +4,13 @@ ARG OS="linux"
 ARG TARGETARCH
 ARG ZEUSURL
 
+# HOME comes from the build user, not the image config; declare it so the
+# /root paths below trace to it.
+ENV HOME=/root
+
 # This path is important for stacktraces
 WORKDIR $GOPATH/src/github.com/signoz/signoz
-WORKDIR /root
+WORKDIR $HOME
 
 RUN set -eux; \
 	apt-get update; \
@@ -14,23 +18,36 @@ RUN set -eux; \
 		g++ \
 		gcc \
 		libc6-dev \
-		make \
 		pkg-config \
 	; \
 	rm -rf /var/lib/apt/lists/*
 
+# Keep the literal cache-mount targets below in sync with these. The caches
+# are shared with Dockerfile.with-web.integration (same target paths).
+ENV GOCACHE=$HOME/.cache/go-build
+ENV GOMODCACHE=$GOPATH/pkg/mod
+
 COPY go.mod go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
-COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
-RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
+# Invoked directly instead of via make so Makefile changes don't invalidate
+# this layer; the Makefile's git-derived ldflags resolve to empty in here
+# anyway (.git is dockerignored).
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	GOARCH=${TARGETARCH} GOOS=${OS} go build -C ./cmd/enterprise -race -tags timetzdata -o /root/signoz \
+	-ldflags "-s -w \
+		-X github.com/SigNoz/signoz/pkg/version.version=integration \
+		-X github.com/SigNoz/signoz/pkg/version.variant=enterprise \
+		-X github.com/SigNoz/signoz/ee/zeus.url=${ZEUSURL} \
+		-X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=${ZEUSURL}/api/v1"
 
 RUN chmod 755 /root /root/signoz
 

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,10 +1,23 @@
 FROM node:22-bookworm AS build
 
 WORKDIR /opt/
-COPY ./frontend/ ./
+
+# HOME comes from the build user, not the image config.
+ENV HOME=/root
+# pnpm's store lives at $PNPM_HOME/store — a dedicated directory pnpm
+# manages. Keep the literal cache-mount targets below in sync.
+ENV PNPM_HOME=/pnpm
 ENV NODE_OPTIONS=--max-old-space-size=8192
+
 RUN CI=1 npm i -g pnpm@10
-RUN CI=1 pnpm install
+
+# pnpm fetch resolves from the lockfile alone and runs no lifecycle scripts;
+# the repo's postinstall needs source files that are not copied yet.
+COPY ./frontend/package.json ./frontend/pnpm-lock.yaml ./frontend/pnpm-workspace.yaml ./
+RUN --mount=type=cache,target=/pnpm/store CI=1 pnpm fetch
+
+COPY ./frontend/ ./
+RUN --mount=type=cache,target=/pnpm/store CI=1 pnpm install --offline
 RUN CI=1 pnpm build
 
 FROM golang:1.25-bookworm
@@ -13,9 +26,13 @@ ARG OS="linux"
 ARG TARGETARCH
 ARG ZEUSURL
 
+# HOME comes from the build user, not the image config; declare it so the
+# /root paths below trace to it.
+ENV HOME=/root
+
 # This path is important for stacktraces
 WORKDIR $GOPATH/src/github.com/signoz/signoz
-WORKDIR /root
+WORKDIR $HOME
 
 RUN set -eux; \
 	apt-get update; \
@@ -23,23 +40,36 @@ RUN set -eux; \
 		g++ \
 		gcc \
 		libc6-dev \
-		make \
 		pkg-config \
 	; \
 	rm -rf /var/lib/apt/lists/*
 
+# Keep the literal cache-mount targets below in sync with these. The caches
+# are shared with Dockerfile.integration (same target paths).
+ENV GOCACHE=$HOME/.cache/go-build
+ENV GOMODCACHE=$GOPATH/pkg/mod
+
 COPY go.mod go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
 COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
-COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
-RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
+# Invoked directly instead of via make so Makefile changes don't invalidate
+# this layer; the Makefile's git-derived ldflags resolve to empty in here
+# anyway (.git is dockerignored).
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	GOARCH=${TARGETARCH} GOOS=${OS} go build -C ./cmd/enterprise -race -tags timetzdata -o /root/signoz \
+	-ldflags "-s -w \
+		-X github.com/SigNoz/signoz/pkg/version.version=integration \
+		-X github.com/SigNoz/signoz/pkg/version.variant=enterprise \
+		-X github.com/SigNoz/signoz/ee/zeus.url=${ZEUSURL} \
+		-X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=${ZEUSURL}/api/v1"
 
 COPY --from=build /opt/build ./web/
 

docs/api/openapi.yml

@@ -7430,6 +7430,8 @@ components:
       - below
       - equal
       - not_equal
+      - above_or_equal
+      - below_or_equal
       - outside_bounds
       type: string
     RuletypesCumulativeSchedule:
@@ -24698,6 +24700,149 @@ paths:
       summary: Replace variables
       tags:
       - querier
+  /prometheus/api/v1/query:
+    get:
+      deprecated: false
+      description: Evaluate a PromQL expression at a single instant. Request and
+        response follow the Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/);
+        the /prometheus prefix distinguishes these PromQL-only endpoints from the
+        SigNoz query APIs. Also accepts POST with form-encoded parameters.
+      operationId: PrometheusInstantQuery
+      parameters:
+      - description: PromQL expression to evaluate
+        in: query
+        name: query
+        required: true
+        schema:
+          type: string
+      - description: 'Evaluation timestamp: float unix seconds or RFC3339. Defaults
+          to the server''s current time.'
+        in: query
+        name: time
+        schema:
+          type: string
+      - description: 'Evaluation timeout: float seconds or a Prometheus duration
+          string (e.g. 30s).'
+        in: query
+        name: timeout
+        schema:
+          type: string
+      - description: Set to any value to include query statistics in the response.
+        in: query
+        name: stats
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    properties:
+                      result: {}
+                      resultType:
+                        enum:
+                        - matrix
+                        - vector
+                        - scalar
+                        - string
+                        type: string
+                      stats: {}
+                    type: object
+                  status:
+                    enum:
+                    - success
+                    type: string
+                type: object
+          description: Query evaluated successfully
+        "400":
+          description: Unparsable expression or parameters (errorType bad_data)
+        "422":
+          description: Expression failed to evaluate (errorType execution)
+        "503":
+          description: Query timed out or was canceled
+      summary: Prometheus instant query
+      tags:
+      - prometheus
+  /prometheus/api/v1/query_range:
+    get:
+      deprecated: false
+      description: Evaluate a PromQL expression over a range of time on a fixed
+        step grid. Request and response follow the Prometheus HTTP API
+        (https://prometheus.io/docs/prometheus/latest/querying/api/); the
+        /prometheus prefix distinguishes these PromQL-only endpoints from the
+        SigNoz query APIs. Grids are capped at 11,000 points per series. Also
+        accepts POST with form-encoded parameters.
+      operationId: PrometheusRangeQuery
+      parameters:
+      - description: PromQL expression to evaluate
+        in: query
+        name: query
+        required: true
+        schema:
+          type: string
+      - description: 'Start timestamp: float unix seconds or RFC3339.'
+        in: query
+        name: start
+        required: true
+        schema:
+          type: string
+      - description: 'End timestamp: float unix seconds or RFC3339.'
+        in: query
+        name: end
+        required: true
+        schema:
+          type: string
+      - description: 'Grid step: float seconds or a Prometheus duration string
+          (e.g. 30s). Must be positive.'
+        in: query
+        name: step
+        required: true
+        schema:
+          type: string
+      - description: 'Evaluation timeout: float seconds or a Prometheus duration
+          string (e.g. 30s).'
+        in: query
+        name: timeout
+        schema:
+          type: string
+      - description: Set to any value to include query statistics in the response.
+        in: query
+        name: stats
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    properties:
+                      result: {}
+                      resultType:
+                        enum:
+                        - matrix
+                        type: string
+                      stats: {}
+                    type: object
+                  status:
+                    enum:
+                    - success
+                    type: string
+                type: object
+          description: Query evaluated successfully
+        "400":
+          description: Unparsable expression or parameters, or a grid past the 11,000-point
+            cap (errorType bad_data)
+        "422":
+          description: Expression failed to evaluate (errorType execution)
+        "503":
+          description: Query timed out or was canceled
+      summary: Prometheus range query
+      tags:
+      - prometheus
 servers:
 - description: The fully qualified URL to the SigNoz APIServer.
   url: https://{host}:{port}{base_path}

docs/contributing/prometheus.md

@@ -0,0 +1,377 @@
+# PromQL Serving — clickhouseprometheusv2
+
+This document gives the context for `pkg/prometheus/clickhouseprometheusv2`.
+This package is the second-generation ClickHouse-backed Prometheus provider.
+The document tells you why the package exists. It tells you the correctness
+rules that shaped it. It shows how we prove that each construct does not
+change results. Keep these invariants when you change the provider. If your
+change breaks an invariant, flag it and discuss it first.
+
+---
+
+## Why a second provider
+
+The v1 provider (`pkg/prometheus/clickhouseprometheus`) serves the promql
+engine through the remote-read protobuf adapter. It fetches every raw sample
+of a query's union window. It serializes all of them and gives them to the
+engine. The cost follows the ingested data, not the question. This is how a
+dashboard of PromQL panels can take an instance down.
+
+In v2, each query runs in one of two ways. The classifier decides per query:
+
+- **Transpiled**: ClickHouse evaluates the query. Only final (or near-final)
+  per-group grid arrays come back. The statements use the
+  `timeSeries*ToGrid` aggregate functions. The supported ClickHouse floor is
+  25.6 or later, so these functions are assumed available.
+- **Engine**: the stock promql engine evaluates over this package's native
+  `storage.Querier`. Every shape that does not transpile takes this path.
+
+**The core rule: a PromQL result that differs from upstream Prometheus is a
+lost user. A construct that cannot reproduce engine semantics exactly falls
+back. It does not approximate.** The conformance suite
+(`tests/integration/tests/promqlconformance/`) replays Prometheus' own test
+corpus against both providers. It is the arbiter. The classification golden
+(`testdata/classification_golden.json`) freezes the route of each corpus
+expression. The rest of this document is the PromQL-to-SQL story. That
+mapping is where correctness is won or lost.
+
+---
+
+## The evaluation model the SQL must reproduce
+
+A PromQL range query is an instant query evaluated at each grid point
+`t_i = start + i*step`, for `i = 0..(end-start)/step`. At each `t_i`:
+
+- An instant selector resolves to the latest sample in the left-open
+  lookback window `(t_i - lookback, t_i]`. If that latest sample is a stale
+  marker, the selector resolves to nothing. Older real samples in the window
+  do not change this.
+- A range selector `[r]` collects every sample in `(t_i - r, t_i]`. Stale
+  markers are excluded.
+- `offset d` shifts both windows to `(t_i - d - w, t_i - d]`.
+
+The transpilation invariant follows from this model. Each transpiled
+construct produces one array per output series. The array has exactly one
+slot per grid point. Slot `i` holds the value at `t_i`. NULL means absent.
+This makes composition correct, not only convenient. The engine evaluates
+these operators independently per `t_i`. A representation that gets every
+slot right gets the whole query right. Spatial aggregation over arrays is
+sound because it combines values that belong to the same `t_i` by
+construction. Scan time maps slot `i` back to `t_i = start + i*step`
+(`toMatrix`). The sections below fill those slots with exactly the numbers
+the engine computes. We validated each equivalence against the vendored
+engine on live data before its shape entered the allowlist. An unproven
+shape stays on the engine path.
+
+## Classification: finding what a statement can answer
+
+`classify` walks the parsed AST and looks for "core units". A core unit is a
+maximal subtree of this shape:
+
+	[agg by/without (...)] [fn(] selector[range] [offset d] [)] [op scalar]...
+
+`classifyCore` peels that chain from the outside in. It takes an optional
+sum/min/max/avg/count aggregation. It then takes one allowlisted function or
+a bare instant selector. It then takes the selector with its offset. On the
+way out, it collects number-literal arithmetic, comparisons (including
+`bool`), and unary minus into a scalar-op pipeline. A node qualifies only if
+its type, arguments, and children are in the proven set. This is an
+allowlist. An overlooked construct becomes a fallback, not a wrong number.
+
+Three unit kinds come out. Each kind has its own SQL form:
+
+- `unitRange`: rate, irate, increase, delta, idelta over a range selector.
+- `unitInstant`: instant vector selection, bare or comparison-filtered.
+- `unitOverTime`: avg/min/max/sum/count/last `_over_time`.
+
+If the whole tree is one unit, the plan is "full". The statement's rows are
+the query result. Otherwise, `rewrite` cuts out each maximal unit and puts a
+synthetic selector `__signoz_transpiled_N__` in its place. The engine then
+runs the rewritten expression over the units' materialized results. This is
+a "hybrid" plan. `histogram_quantile`, `topk`, `or`/`and`/`unless`, and
+vector matching keep exact engine semantics. Their expensive inputs were
+aggregated server-side.
+
+Classification refuses a shape when it cannot guarantee exact semantics
+server-side:
+
+- The `@` modifier, anywhere.
+- Default-resolution subqueries. Their resolution is a server runtime
+  setting that the transpiler cannot see.
+- Duration expressions (`offset step()`, `[range()]`, ...), anywhere. The
+  engine resolves them into the selector's static fields only at evaluation
+  time. At classification time those fields hold zero values. A transpile
+  would silently use the wrong offset or range.
+- Steps or ranges that are not whole seconds. The grid functions take
+  whole-second parameters.
+- Grouping by `__name__`, or matching on it, in hybrid plans. The synthetic
+  name would leak into results.
+- Name-keeping units in hybrid plans. Bare and comparison-filtered instant
+  selectors and `last_over_time` keep their real `__name__` (`keepsName`).
+  Substitution would replace that name. These units transpile only as full
+  plans.
+- Every function outside the allowlist: changes, resets,
+  quantile_over_time, absent, native-histogram functions, and more.
+
+Units inside a fixed-resolution subquery evaluate on the subquery's own
+grid, not the query grid. That grid is the set of epoch-aligned multiples of
+the resolution strictly after `outerStart - offset - range`, ending at
+`outer end - offset`. This is the exact derivation the engine uses. A grid
+shifted by one step changes which samples every window sees.
+
+## From one unit to one statement
+
+`buildUnitSQL` renders each unit as one statement. For
+`sum by (pod) (rate(m{job="api"}[5m]))` the skeleton is:
+
+	SELECT g0, sumForEach(grid) AS grid FROM (
+	    SELECT any(series.g0) AS g0,
+	           timeSeriesRateToGrid(<start>, <end>, <step>, <range>)(fromUnixTimestamp64Milli(unix_milli), value) AS grid
+	    FROM signoz_metrics.distributed_samples_v4 AS points
+	    INNER JOIN (
+	        SELECT fingerprint, JSONExtractString(labels, 'pod') AS g0
+	        FROM signoz_metrics.time_series_v4
+	        WHERE <series predicates>
+	        GROUP BY fingerprint, g0
+	    ) AS series ON points.fingerprint = series.fingerprint
+	    WHERE metric_name = ? AND temporality IN ['Cumulative', 'Unspecified']
+	      AND unix_milli > <start - range> AND unix_milli <= <end>
+	      AND bitAnd(flags, 1) = 0
+	    GROUP BY points.fingerprint
+	) GROUP BY g0
+	SETTINGS allow_experimental_ts_to_grid_aggregate_function = 1
+
+Read it from the inside out.
+
+**The time window** is the selector's semantics, verbatim. Strict `>` on the
+lower bound and `<=` on the upper bound is the left-open `(t - w, t]` rule.
+The offset shifts the whole window. `bitAnd(flags, 1) = 0` drops stale
+markers. PromQL excludes them from range vectors.
+
+**The inner GROUP BY** computes one grid array per series.
+`timeSeriesRateToGrid(start, end, step, range)` is a parametric aggregate.
+It takes (timestamp, value) pairs and produces `Array(Nullable(Float64))`
+with one slot per grid point. It is correct because it implements the
+engine's `extrapolatedRate`, decision for decision: counter resets, the
+zero-point clamp, the extrapolation thresholds, the two-samples rule, and
+the left-open window. We verified this: we fed identical samples to both and
+compared slot for slot. The only observed difference is the last bit.
+ClickHouse's C++ and Go round the same formula differently. That is the
+floating-point floor, not a semantic gap. irate/delta/idelta map to their
+own `timeSeries*ToGrid` functions, with the same verification. `increase`
+has no function of its own. We emit
+`arrayMap(x -> x * <range seconds>, <rate expr>)`. This is exact by
+definition: `extrapolatedRate` computes the same extrapolated delta for both
+and divides by the range only when `isRate`. The multiplication reverses it
+exactly. The grid parameters render as literals, not bound args. They are
+aggregate-function parameters. The experimental gate rides as a SETTINGS
+clause on the statement itself, so telemetrystore hooks cannot remove it.
+
+The group key is functionally dependent on the fingerprint: one fingerprint
+is the hash of one labelset. So the inner query groups by the fingerprint
+alone and reads the key columns with `any()`. This is exact, and it makes
+the per-row hash key smaller.
+
+**The join** gives each series its group key, in one of two forms.
+`by (...)` extracts each listed label as a plain column
+(`JSONExtractString(labels, 'pod') AS g0`) and groups on the columns. The
+projection is a known short list, and the label names live in Go. To build,
+sort, and stringify every label pair per row would be waste. This is correct
+because column-tuple equality is label-set equality on the projection. An
+extracted `''` means the label is absent. That is Prometheus semantics for
+`by()` over missing labels. The empties are skipped when the columns turn
+back into labels. `without` and no-aggregation project a label set that
+varies per series. They get the canonical key: `toJSONString` of the sorted
+[label, value] pairs that the unit projects. `without` excludes the listed
+labels plus `__name__`. No-aggregation keeps everything; the name comes off
+in Go, per the engine's name-dropping rules. Here the sort is load-bearing.
+Stored JSON key order is not canonical across fingerprints. Two orderings of
+the same labels must land in one group. Empty values are filtered for the
+same absent-label reason. The same string parses back into the output label
+set (`labelsFromGroupKey`).
+
+**The outer GROUP BY** is the spatial aggregation. sum/min/max/avg/count
+by/without become the `-ForEach` combinators. Element-wise aggregation over
+grid arrays is the engine's per-`t_i` aggregation: slot `i` of every input
+array refers to the same `t_i`. The combinators skip NULLs. That is the
+engine aggregating only the series present at `t_i`. An index where every
+series is absent stays NULL. Two edges need explicit handling. First,
+`countForEach` wraps in a map of 0 back to NULL. A count over an all-absent
+index is an absent point, not 0. Second, a unit without aggregation still
+passes through `maxForEach`. That is the identity for the common
+one-fingerprint group. It is a deterministic NULL-skipping merge when a
+regex `__name__` selector collapses distinct metrics onto one projected
+label set. One caveat is inherent: the summation order over series differs
+from the engine's. Spatial aggregates can differ in the last ULP. Float
+addition is not associative. No ordering reproduces the engine's result
+bit-exactly from inside a GROUP BY.
+
+## Instant selectors: staleness needs two aggregates
+
+`unitInstant` uses window = lookback. It must reproduce the shadowing rule:
+the point is absent when the latest in-window sample is a stale marker.
+`timeSeriesLastToGrid` alone cannot express that. To skip stale rows in
+WHERE would resurrect the older real sample that the marker buried. So stale
+rows stay in the scan for this kind only. The grid expression compares three
+aggregates per slot:
+
+	arrayMap((tall, tok, vok) -> if(tall IS NULL OR tok IS NULL OR tall != tok, NULL, vok),
+	         timeSeriesLastToGrid(...)(ts, toFloat64(unix_milli)),                           -- last sample overall
+	         timeSeriesLastToGridIf(...)(ts, toFloat64(unix_milli), bitAnd(flags, 1) = 0),   -- last non-stale, its timestamp
+	         timeSeriesLastToGridIf(...)(ts, value, bitAnd(flags, 1) = 0))                   -- last non-stale, its value
+
+This is correct by cases on a slot's window. No samples at all: both
+timestamp aggregates are NULL, so the slot is NULL. That is absent, as the
+engine says. Latest sample non-stale: it is the latest overall and the
+latest non-stale. The timestamps agree. The slot takes its value. That is
+the engine's pick. Latest sample stale: the last-overall timestamp is the
+marker's. The last-non-stale timestamp is older, or NULL when the window
+holds only markers. They disagree. The slot is NULL. The marker shadows,
+exactly as the engine's rule says. Timestamps are unique per series (ingest
+dedups). So timestamp equality identifies "the same sample" without
+ambiguity. We probed the `-If` combinator against these experimental
+aggregates before we trusted it.
+
+## Windowed *_over_time: whole buckets instead of a grid function
+
+avg/min/max/sum/count `_over_time` aggregate every raw sample in the window.
+No `timeSeries*ToGrid` function computes them. (`last_over_time` is the
+exception. The last sample of a range vector is exactly
+`timeSeriesLastToGrid`. PromQL excludes stale markers from range vectors; we
+exclude them in WHERE.) These shapes transpile only when the range is a
+whole multiple of the step. Then the window needs no per-sample fan-out.
+With `W = range/step`, the window `(t_k - range, t_k]` is exactly the union
+of W step buckets. Both are left-open on the same boundaries. So bucket
+membership fully determines window membership. Each sample lands in exactly
+one bucket:
+
+	intDiv(unix_milli - <start> + <range> - 1, <step>)
+
+This is `ceil((ts - start)/step)` shifted by W-1, so the earliest in-window
+sample sits at 0. Slot k's window is buckets in `[k, k+W-1]`. The
+alternative fans each sample into all W windows that cover it. That
+multiplies rows by W. For a long range over a short step, that is a row
+explosion measured in billions. The bucketed form's row count is
+series × buckets: the size of the output, for any W.
+
+Each series aggregates in one group. The `-Resample` combinator
+(`sumResample`, `countResample`) holds the dense per-bucket partials inside
+one group state: a bucket count, plus the function's value aggregate (sum
+for sum/avg, min, max). An earlier form grouped by (series, bucket) and
+assembled with `groupArrayInsertAt`. At scale that made 37M hash groups, and
+per-thread partials scaled memory with the thread count. The slide then
+combines each slot's at-most-W bucket partials by direct aggregation
+(`arraySum(arraySlice(...))`). Window sums are added the way the engine adds
+them. There is no prefix-sum differencing: its large-minus-large
+cancellation would drift past the shadow tolerance on counter-sized values.
+This is correct per slot because the bucket union is the exact window
+multiset, and avg/min/max/sum/count are order-insensitive on a multiset
+(sum/avg up to summation order; see the float caveat above). A slot with
+zero window count is absent. min/max filter their slices on the bucket
+counts. An empty bucket's default can never look like a value: a real sample
+can legitimately be +Inf.
+
+Two shapes fall back to the engine path, which is exact: a range that does
+not divide the step, and a window wider than `maxWindowBuckets` buckets (the
+slide costs W combines per slot). A range narrower than the step needs
+neither gate: the windows are pairwise disjoint, one bucket per slot, no
+slide. That form is exact only together with the window-sliver predicate
+below.
+
+## Scalar ops, full plans, hybrid plans
+
+The scalar-op pipeline runs in Go on the returned arrays
+(`applyScalarOps`), slot by slot. Arithmetic operators compute. Comparisons
+filter: the slot keeps the vector-side value or becomes NULL. Under `bool`
+they return 0/1. This is trivially correct. It is the same float64 operation
+the engine applies, to the same slot value, in the same operator order the
+AST dictates. Go instead of another SQL layer changes where, not what.
+
+A full plan's arrays map straight to the result matrix. A hybrid plan
+materializes each unit's arrays as synthetic series under its
+`__signoz_transpiled_N__` name. The engine evaluates the rewritten
+expression over a storage that serves synthetic names from memory and
+everything else live. Substitution is sound because a unit's output is a
+plain instant vector to the engine: same values at same timestamps, under a
+different name. The name cannot matter. Plans that group by or match on
+`__name__` were refused at classification. Name-keeping units are never
+substituted. One subtlety makes it exact: we write stale markers at absent
+grid points. Without them, the engine's lookback would resurrect a point
+from up to `lookback` earlier. The marker encodes "absent here" the way the
+engine itself encodes it. Units evaluate concurrently. Each unit is one
+series lookup plus one grid statement. A step of 0 is an instant query: a
+single evaluation at `end`.
+
+A note on the window sliver: when the window is narrower than the step, the
+grid windows cover only `window/step` of the timeline. A sample in a gap
+belongs to no window. It cannot move any grid point, but the grid aggregate
+would buffer it. A WHERE predicate keeps only the in-window rows:
+`positiveModulo(selStart - unix_milli, step) < window`, with the scan capped
+at the last grid point. The lattice anchors at the selector start, because
+the end can sit off-lattice on unaligned grids. This cut a 36k-series
+one-week rate from 74s/28GiB to 16s/4.3GiB on fleet data. Over slivered
+rows, `timeSeriesLastToGrid`'s window widening is harmless, so instant
+selectors and `last_over_time` transpile at window < step too.
+
+## Series lookup
+
+Both paths resolve matchers the same way, once per selector
+(`selectSeries`). The series tables hold one row per (fingerprint, bucket)
+at 1h/6h/1d/1w granularities. The shared schema package
+(`pkg/telemetryschema/metricstelemetryschema`) picks the table whose bucket
+fits the window. It rounds the window start down to the bucket boundary, so
+a window that begins mid-bucket still matches the bucket's row. How matchers
+become SQL, and why regexes are anchored, is documented at
+`applySeriesConditions`. Empty-valued labels come off at this boundary. An
+empty value means "label absent" in Prometheus, but stored attribute JSON
+can carry them.
+
+## The engine path
+
+Queries that do not transpile run in the stock engine over this package's
+`storage.Querier`. This is still not the v1 path. Samples are fetched per
+selector with the engine's per-selector hints, not the query-wide union
+window. So `foo / foo offset 1d` reads two narrow windows, not the widest
+one twice. Instant selectors of subquery-free queries fetch only the last
+sample per step bucket (`lastSamplePerStep`). Buckets anchor at the
+selector's first evaluation timestamp. The code recovers it from the hints
+as `hints.Start + lookback - 1ms`, the inverse of how the engine derives
+`hints.Start`. Bucket boundaries then coincide with evaluation timestamps.
+A non-final sample of a bucket can never be the latest sample in
+`(t - lookback, t]` for any grid `t`. Real timestamps are preserved, so the
+engine's own lookback and staleness handling stay exact. Range selectors
+always fetch raw: every sample feeds the range function. The subquery-free
+proof travels in the context as `prometheus.QueryTraits`. Subquery selectors
+evaluate at the subquery's step, while the hints carry the top-level step.
+Row assembly maps stale flags to the engine's StaleNaN. It merges series
+with identical label sets (`sortAndMerge`): the engine assumes storages
+never emit duplicates.
+
+## Sharding
+
+`samples_v4` and `time_series_v4` (and all their rollups) shard on the same
+key: `cityHash64(env, temporality, metric_name, fingerprint)`. So a series'
+samples and catalog rows live on the same shard. The transpiled statement
+exploits that. The distributed samples table at the top-level FROM makes
+ClickHouse rewrite the whole inner query per shard. The join against the
+shard-local series table and the per-series grid aggregation run next to
+the data. The initiator only merges aggregate states and applies the
+spatial `-ForEach` step. This is the same layout as the telemetrymetrics
+statement builder. The group-key join alone restricts the transpiled scan
+to the matched series. The engine path's samples fetch restricts by the
+same predicates as a shard-local semi-join, not a GLOBAL broadcast of the
+matched set. The temporality filter on every samples statement is a
+semantic no-op: the matched fingerprints already come from those
+temporalities. It engages the leading samples primary-key column.
+Delta-temporality series stay invisible to PromQL here, exactly as in v1.
+The rollout gate is parity with v1. To make Delta visible is its own change
+with its own semantics to design. A Delta stream fed to `rate()`
+as-if-cumulative would be wrong, not just new.
+
+## Observability
+
+Every statement carries a `log_comment` with
+`code.namespace=clickhouse-prometheus-v2` and `code.function.name` naming
+the call site (`selectSeries`, `selectSamples`, `transpiledUnit`,
+`LabelValues`, `LabelNames`). This provider's work is attributable in
+`system.query_log` without guessing from query text.

docs/contributing/tests/e2e.md

@@ -30,11 +30,11 @@ yarn install:browsers   # one-time Playwright browser install
 
 ### Starting the Test Environment
 
-To spin up the backend stack (SigNoz, ClickHouse, Postgres, Zookeeper, Zeus mock, gateway mock, seeder, migrator-with-web) and keep it running:
+To spin up the backend stack (SigNoz, ClickHouse, Postgres, ClickHouse Keeper, Zeus mock, gateway mock, seeder, migrator-with-web) and keep it running:
 
 ```bash
 cd tests
-uv run pytest --basetemp=./tmp/ -vv --reuse --with-web \
+uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --with-web \
   e2e/bootstrap/setup.py::test_setup
 ```
 
@@ -45,8 +45,13 @@ This command will:
 - Start the HTTP seeder container (`tests/seeder/` — exposing `/telemetry/{traces,logs,metrics}` POST + DELETE)
 - Write backend coordinates to `tests/e2e/.env.local` (loaded by `playwright.config.ts` via dotenv)
 - Keep containers running via the `--reuse` flag
+- Rebuild the SigNoz container from the current sources via the `--rebuild` flag
 
-The `--with-web` flag builds the frontend into the SigNoz container — required for E2E. The build takes ~4 mins on a cold start.
+The `--with-web` flag builds the frontend into the SigNoz container — required for E2E. The build takes ~4 mins on a cold start; later builds are incremental.
+
+### Rebuilding After Source Changes
+
+The `--with-web` image bakes the built frontend in, so neither backend nor frontend changes are picked up while `--reuse` keeps the container running. `--rebuild` fixes that for both: it kills the SigNoz container, rebuilds the image incrementally (go build cache + pnpm store — a frontend-only change rebuilds in about a minute), and starts a fresh one while databases, mocks, migrations, and the seeder stay reused. The setup command above passes it, so the iteration loop is: change code → re-run the setup command → re-run your specs. `--rebuild` requires `--reuse` and cannot be combined with `--teardown` or `--clean`.
 
 ### Stopping the Test Environment
 
@@ -281,13 +286,16 @@ The full `playwright.config.ts` is the source of truth. Common things to tweak:
 The same pytest flags integration tests expose work here, since E2E reuses the shared fixture graph:
 
 - `--reuse` — keep containers warm between runs (required for all iteration).
+- `--rebuild` — recreate the SigNoz container from the current sources (backend and, with `--with-web`, frontend) while the rest of the stack stays up. Requires `--reuse`.
 - `--teardown` — tear everything down.
+- `--clean` — prune the docker build caches, forcing the next image build to start cold.
 - `--with-web` — build the frontend into the SigNoz container. **Required for E2E**; integration tests don't need it.
-- `--sqlstore-provider`, `--postgres-version`, `--clickhouse-version`, etc. — see `docs/contributing/integration.md`.
+- `--sqlstore-provider`, `--postgres-version`, `--clickhouse-version`, etc. — see `docs/contributing/tests/integration.md`.
 
 ## What should I remember?
 
-- **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build; you only want to pay that once.
+- **Always use the `--reuse` flag** when setting up the E2E stack. `--with-web` adds a ~4 min frontend build on a cold start; later builds are incremental.
+- **Changed backend or frontend code? Re-run the setup command** — it passes `--rebuild`, swapping the SigNoz container for one built from your current sources while the rest of the stack stays up.
 - **Don't teardown before setup.** `--reuse` correctly handles partially-set-up state, so chaining teardown → setup wastes time.
 - **Prefer UI-driven flows.** Playwright captures BE requests in the trace; a parallel `fetch` probe is almost always redundant. Drop to `page.request.*` only when the UI can't reach what you need.
 - **Use `page.waitForResponse` on UI clicks** to assert BE contracts — it still exercises the UI trigger path.

docs/contributing/tests/integration.md

@@ -37,13 +37,34 @@ make py-test-setup
 Under the hood this runs, from `tests/`:
 
 ```bash
-uv run pytest --basetemp=./tmp/ -vv --reuse integration/bootstrap/setup.py::test_setup
+uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild --capture=no integration/bootstrap/setup.py::test_setup
 ```
 
 This command will:
-- Start all required services (ClickHouse, PostgreSQL, Zookeeper, SigNoz, Zeus mock, gateway mock)
+- Start all required services (ClickHouse, PostgreSQL, ClickHouse Keeper, SigNoz, Zeus mock, gateway mock)
 - Register an admin user
 - Keep containers running via the `--reuse` flag
+- Rebuild the SigNoz container from the current sources via the `--rebuild` flag
+
+### Rebuilding After Source Changes
+
+`--reuse` keeps the running SigNoz container, which means backend source changes are not picked up. `--rebuild` fixes exactly that: it kills the existing SigNoz container, rebuilds the image (incremental — only changed packages recompile thanks to the build cache), and starts a fresh one, while everything else (databases, mocks, migrations) stays reused. `make py-test-setup` passes it by default, so the iteration loop is simply:
+
+```bash
+make py-test-setup      # (re)build signoz from your current sources
+uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/<suite>/
+# ... edit backend code or tests ...
+make py-test-setup      # pick up the backend changes
+uv run pytest --basetemp=./tmp/ -vv --reuse integration/tests/<suite>/
+```
+
+The same applies to the e2e stack. `--rebuild` requires `--reuse` and cannot be combined with `--teardown` or `--clean`.
+
+Some suites define their own SigNoz variant in a suite-local `conftest.py` (`create_signoz(..., cache_key=...)` — e.g. `basepath`, `metricreduction`, `querier_json_body`). Those containers are not touched by `make py-test-setup`, which only rebuilds the default instance. For such suites, pass `--rebuild` on the suite run itself — it rebuilds every SigNoz variant the run instantiates:
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --reuse --rebuild integration/tests/<suite>/
+```
 
 ### Stopping the Test Environment
 
@@ -56,11 +77,21 @@ make py-test-teardown
 Which runs:
 
 ```bash
-uv run pytest --basetemp=./tmp/ -vv --teardown integration/bootstrap/setup.py::test_teardown
+uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no integration/bootstrap/setup.py::test_teardown
 ```
 
 This destroys the running integration test setup and cleans up resources.
 
+### Cleaning the Image Build Cache
+
+The `signoz:integration` image build keeps its Go build and module caches in BuildKit cache mounts, so rebuilds only recompile what changed. These caches survive `--teardown` (they belong to the Docker builder, not to any container). If a cache ever needs to be nuked — suspected corruption, disk pressure, or to force a genuinely cold build — pass the `--clean` flag:
+
+```bash
+uv run pytest --basetemp=./tmp/ -vv --teardown --clean integration/bootstrap/setup.py::test_teardown
+```
+
+`--clean` prunes the docker build artifacts backing the incremental image build at session start, so the next build starts from a clean slate. Images and regular layer cache stay intact, but note the pruning is host-wide — it clears build caches for other projects too, not just SigNoz's. The flag composes with any invocation — passing it on a normal `--reuse` run simply makes the next image build start cold (~3–4 minutes instead of seconds).
+
 ## Understanding the Integration Test Framework
 
 Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. WireMock is used to spin up **test doubles** of external services (Zeus cloud API, gateway, etc.).
@@ -99,7 +130,7 @@ tests/
 │       ├── passwordauthn/
 │       ├── querier/
 │       └── ...
-└── e2e/                     # Playwright suite (see docs/contributing/e2e.md)
+└── e2e/                     # Playwright suite (see docs/contributing/tests/e2e.md)
 ```
 
 Each test suite follows these principles:
@@ -224,9 +255,9 @@ Tests can be configured using pytest options:
 - `--sqlstore-provider` — Choose the SQL store provider (default: `postgres`)
 - `--sqlite-mode` — SQLite journal mode: `delete` or `wal` (default: `delete`). Only relevant when `--sqlstore-provider=sqlite`.
 - `--postgres-version` — PostgreSQL version (default: `15`)
-- `--clickhouse-version` — ClickHouse version (default: `25.5.6`)
-- `--zookeeper-version` — Zookeeper version (default: `3.7.1`)
-- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.2`)
+- `--clickhouse-version` — ClickHouse version, also used for ClickHouse Keeper (default: `25.12.5`)
+- `--schema-migrator-version` — SigNoz schema migrator version (default: `v0.144.6`)
+- `--with-web` — Build the frontend into the SigNoz image (required for e2e)
 
 Example:
 
@@ -239,6 +270,7 @@ uv run pytest --basetemp=./tmp/ -vv --reuse \
 ## What should I remember?
 
 - **Always use the `--reuse` flag** when setting up the environment or running tests to keep containers warm. Without it every run rebuilds the stack (~4 mins).
+- **Changed backend code? Re-run `make py-test-setup`** — it passes `--rebuild`, swapping the SigNoz container for one built from your current sources while the rest of the stack stays up.
 - **Use the `--teardown` flag** only when cleaning up — mixing `--teardown` with `--reuse` is a contradiction.
 - **Do not pre-emptively teardown before setup.** If the stack is partially up, `--reuse` picks up from wherever it is. `make py-test-teardown` then `make py-test-setup` wastes minutes.
 - **Follow the naming convention** with two-digit numeric prefixes (`01_`, `02_`) for ordered test execution within a suite.
@@ -247,5 +279,5 @@ uv run pytest --basetemp=./tmp/ -vv --reuse \
 - **Use descriptive test names** that clearly indicate what is being tested.
 - **Leverage fixtures** for common setup. The shared fixture package is at `tests/fixtures/` — reuse before adding new ones.
 - **Test both success and failure scenarios** (4xx / 5xx paths) to ensure robust functionality.
-- **Run `make py-fmt` and `make py-lint` before committing** Python changes — black + isort + autoflake + pylint.
+- **Run `make py-fmt` and `make py-lint` before committing** Python changes — ruff format + ruff check.
 - **`--sqlite-mode=wal` does not work on macOS.** The integration test environment runs SigNoz inside a Linux container with the SQLite database file mounted from the macOS host. WAL mode requires shared memory between connections, and connections crossing the VM boundary (macOS host ↔ Linux container) cannot share the WAL index, resulting in `SQLITE_IOERR_SHORT_READ`. WAL mode is tested in CI on Linux only.

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

@@ -8479,6 +8479,8 @@ export enum RuletypesCompareOperatorDTO {
 	below = 'below',
 	equal = 'equal',
 	not_equal = 'not_equal',
+	above_or_equal = 'above_or_equal',
+	below_or_equal = 'below_or_equal',
 	outside_bounds = 'outside_bounds',
 }
 export interface RuletypesBasicRuleThresholdDTO {

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
@@ -20,6 +21,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
 import './CreateServiceAccountModal.styles.scss';
+import { Skeleton } from 'antd';
 
 interface FormValues {
 	name: string;
@@ -95,33 +97,39 @@ function CreateServiceAccountModal(): JSX.Element {
 			testId="create-service-account-modal"
 		>
 			<div className="create-sa-modal__content">
-				<form
-					id="create-sa-form"
-					className="create-sa-form"
-					onSubmit={handleSubmit(handleCreate)}
+				<AuthZGuardContent
+					checks={[SACreatePermission]}
+					fallbackOnLoading={<Skeleton active paragraph={{ rows: 1 }} />}
 				>
-					<div className="create-sa-form__item">
-						<label htmlFor="sa-name">Name</label>
-						<Controller
-							name="name"
-							control={control}
-							rules={{ required: 'Name is required' }}
-							render={({ field }): JSX.Element => (
-								<Input
-									id="sa-name"
-									placeholder="Enter a name"
-									className="create-sa-form__input"
-									value={field.value}
-									onChange={field.onChange}
-									onBlur={field.onBlur}
-								/>
+					<form
+						id="create-sa-form"
+						className="create-sa-form"
+						onSubmit={handleSubmit(handleCreate)}
+					>
+						<div className="create-sa-form__item">
+							<label htmlFor="sa-name">Name</label>
+							<Controller
+								name="name"
+								control={control}
+								rules={{ required: 'Name is required' }}
+								render={({ field }): JSX.Element => (
+									<Input
+										id="sa-name"
+										placeholder="Enter a name"
+										className="create-sa-form__input"
+										value={field.value}
+										onChange={field.onChange}
+										onBlur={field.onBlur}
+										data-testid="create-sa-name-input"
+									/>
+								)}
+							/>
+							{errors.name && (
+								<p className="create-sa-form__error">{errors.name.message}</p>
 							)}
-						/>
-						{errors.name && (
-							<p className="create-sa-form__error">{errors.name.message}</p>
-						)}
-					</div>
-				</form>
+						</div>
+					</form>
+				</AuthZGuardContent>
 			</div>
 
 			<DialogFooter className="create-sa-modal__footer">
@@ -130,6 +138,7 @@ function CreateServiceAccountModal(): JSX.Element {
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
+					data-testid="create-sa-cancel-btn"
 				>
 					<X size={12} />
 					Cancel
@@ -137,12 +146,14 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<AuthZButton
 					checks={[SACreatePermission]}
+					withPortal={false}
 					type="submit"
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
+					data-testid="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

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

@@ -1,19 +1,14 @@
 import { toast } from '@signozhq/ui/sonner';
+import {
+	setupAuthzAdmin,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
-	__esModule: true,
-	default: ({
-		children,
-	}: {
-		children: React.ReactElement;
-	}): React.ReactElement => children,
-}));
-
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: { success: jest.fn(), error: jest.fn() },
@@ -45,6 +40,7 @@ describe('CreateServiceAccountModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		server.use(
+			setupAuthzAdmin(),
 			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json({ status: 'success', data: {} })),
 			),
@@ -55,23 +51,41 @@ describe('CreateServiceAccountModal', () => {
 		server.resetHandlers();
 	});
 
-	it('submit button is disabled when form is empty', () => {
+	it('submit button is disabled while the form is empty', async () => {
 		renderModal();
 
-		expect(
-			screen.getByRole('button', { name: /Create Service Account/i }),
-		).toBeDisabled();
+		// The form only renders once the create check resolves, and the name field
+		// registers its `required` rule on mount, so the empty-form invalid state
+		// settles a tick later.
+		await screen.findByTestId('create-sa-name-input');
+
+		await waitFor(() =>
+			expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled(),
+		);
+	});
+
+	it('submit button becomes disabled after clearing the name field', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderModal();
+
+		const nameInput = await screen.findByTestId('create-sa-name-input');
+		const submitBtn = await screen.findByTestId('create-sa-submit-btn');
+
+		await user.type(nameInput, 'test');
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+
+		await user.clear(nameInput);
+		await waitFor(() => expect(submitBtn).toBeDisabled());
 	});
 
 	it('successful submit shows toast.success and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'Deploy Bot');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
+		await user.type(nameInput, 'Deploy Bot');
 
-		const submitBtn = screen.getByRole('button', {
-			name: /Create Service Account/i,
-		});
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
 		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 		await user.click(submitBtn);
 
@@ -102,11 +116,10 @@ describe('CreateServiceAccountModal', () => {
 
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText('Enter a name'), 'Dupe Bot');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
+		await user.type(nameInput, 'Dupe Bot');
 
-		const submitBtn = screen.getByRole('button', {
-			name: /Create Service Account/i,
-		});
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
 		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 		await user.click(submitBtn);
 
@@ -131,8 +144,45 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByTestId('create-service-account-modal');
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+		const cancelBtn = await screen.findByTestId('create-sa-cancel-btn');
+		await user.click(cancelBtn);
+
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId('create-service-account-modal'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows inline permission denial and hides the form when create permission is denied', async () => {
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		expect(screen.queryByTestId('create-sa-name-input')).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId('create-service-account-modal'),
+		).toBeInTheDocument();
+	});
+
+	it('keeps the footer usable when create permission is denied', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		// The footer lives outside the guard: submit is gated, Cancel still works.
+		expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled();
+
+		await user.click(screen.getByTestId('create-sa-cancel-btn'));
 
 		await waitFor(() => {
 			expect(
@@ -145,7 +195,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = screen.getByPlaceholderText('Enter a name');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		await user.type(nameInput, 'Bot');
 		await user.clear(nameInput);
 

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

@@ -6,6 +6,7 @@ import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
 import { VIEWS } from './constants';
+import { MouseEventHandler } from 'react';
 
 export type LogDetailProps = {
 	log: ILog | null;
@@ -16,6 +17,8 @@ export type LogDetailProps = {
 	logs?: ILog[];
 	onNavigateLog?: (log: ILog) => void;
 	onScrollToLog?: (logId: string) => void;
+	handleOpenInExplorer?: MouseEventHandler;
+	getContainer?: DrawerProps['getContainer'];
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
-import { useCopyToClipboard, useLocation } from 'react-use';
+import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
@@ -14,9 +13,6 @@ import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySear
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import Overview from 'container/LogDetailedView/Overview';
@@ -31,8 +27,6 @@ import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
@@ -50,12 +44,9 @@ import {
 } from '@signozhq/icons';
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
-import { AppState } from 'store/reducers';
 import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed } from 'utils/app';
 
 import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
@@ -75,6 +66,8 @@ function LogDetailInner({
 	logs,
 	onNavigateLog,
 	onScrollToLog,
+	handleOpenInExplorer,
+	getContainer,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -91,7 +84,7 @@ function LogDetailInner({
 
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
-	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
+	const { stagedQuery } = useQueryBuilder();
 
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
@@ -186,11 +179,6 @@ function LogDetailInner({
 	});
 
 	const isDarkMode = useIsDarkMode();
-	const location = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 
 	const { notifications } = useNotifications();
 
@@ -246,25 +234,6 @@ function LogDetailInner({
 		});
 	};
 
-	// Go to logs explorer page with the log data
-	const handleOpenInExplorer = (e?: React.MouseEvent): void => {
-		const queryParams = {
-			[QueryParams.activeLogId]: `"${log?.id}"`,
-			[QueryParams.startTime]: minTime?.toString() || '',
-			[QueryParams.endTime]: maxTime?.toString() || '',
-			[QueryParams.compositeQuery]: JSON.stringify(
-				updateAllQueriesOperators(
-					initialQueriesMap[DataSource.LOGS],
-					PANEL_TYPES.LIST,
-					DataSource.LOGS,
-				),
-			),
-		};
-		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
-			newTab: !!e && isModifierKeyPressed(e),
-		});
-	};
-
 	const handleQueryExpressionChange = useCallback(
 		(value: string, queryIndex: number) => {
 			// update the query at the given index
@@ -333,13 +302,6 @@ function LogDetailInner({
 		}
 	};
 
-	// Only show when opened from infra monitoring page
-	const showOpenInExplorerBtn = useMemo(
-		() => location.pathname?.includes('/infrastructure-monitoring'),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
 	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
 	const isPrevDisabled =
@@ -374,6 +336,7 @@ function LogDetailInner({
 			width="60%"
 			mask={false}
 			maskClosable={false}
+			getContainer={getContainer}
 			title={
 				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
 					<div className="log-detail-drawer__title-left">
@@ -411,7 +374,7 @@ function LogDetailInner({
 								/>
 							</Tooltip>
 						</div>
-						{showOpenInExplorerBtn && (
+						{handleOpenInExplorer && (
 							<div>
 								<Button
 									variant="outlined"

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

@@ -5,6 +5,7 @@ import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	IQuickFiltersConfig,
+	QuickFilterChangeEventData,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
@@ -28,11 +29,12 @@ interface ICheckboxProps {
 	filter: IQuickFiltersConfig;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
+	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
-	const { source, filter, onFilterChange } = props;
+	const { source, filter, onFilterChange, onQuickFilterChange } = props;
 	const [searchText, setSearchText] = useState<string>('');
 
 	const activeQueryIndex = useActiveQueryIndex(source);
@@ -61,6 +63,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		attributeValues,
 		activeQueryIndex,
 		onFilterChange,
+		onQuickFilterChange,
 	});
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {

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

@@ -1,5 +1,6 @@
 import {
 	IQuickFiltersConfig,
+	QuickFilterChangeEventData,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -19,6 +20,7 @@ interface UseCheckboxFilterActionsProps {
 	attributeValues: string[];
 	activeQueryIndex: number;
 	onFilterChange?: ((query: Query) => void) | null;
+	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
 }
 
 interface UseCheckboxFilterActionsReturn {
@@ -42,6 +44,7 @@ function useCheckboxFilterActions({
 	attributeValues,
 	activeQueryIndex,
 	onFilterChange,
+	onQuickFilterChange,
 }: UseCheckboxFilterActionsProps): UseCheckboxFilterActionsReturn {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 
@@ -60,20 +63,34 @@ function useCheckboxFilterActions({
 		previousState?: CheckedState,
 		sectionType?: SectionType,
 	): void => {
-		dispatch(
-			applyCheckboxToggle({
-				currentQuery,
-				activeQueryIndex,
-				filter,
-				source,
-				attributeValues,
-				value,
-				checked,
-				isOnlyOrAllClicked,
-				previousState,
-				sectionType,
-			}),
-		);
+		const updatedQuery = applyCheckboxToggle({
+			currentQuery,
+			activeQueryIndex,
+			filter,
+			source,
+			attributeValues,
+			value,
+			checked,
+			isOnlyOrAllClicked,
+			previousState,
+			sectionType,
+		});
+
+		dispatch(updatedQuery);
+
+		if (onQuickFilterChange) {
+			const queryData = updatedQuery.builder.queryData[activeQueryIndex];
+			const expression = queryData?.filter?.expression || '';
+			const filterItemKeys = (queryData?.filters?.items || [])
+				.map((item) => item.key?.key)
+				.filter((key): key is string => !!key);
+
+			onQuickFilterChange({
+				filterKey: filter.attributeKey.key,
+				expression,
+				filterItemKeys,
+			});
+		}
 	};
 
 	const onClear = (): void => {

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

@@ -5,6 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
 import {
 	IQuickFiltersConfig,
+	QuickFilterChangeEventData,
 	QuickFilterCheckboxUseFieldApis,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
@@ -33,13 +34,15 @@ interface CheckboxFilterV2Props {
 	filter: IQuickFiltersConfig;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
+	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
 	useFieldApis: QuickFilterCheckboxUseFieldApis;
 }
 
 export default function CheckboxFilterV2(
 	props: CheckboxFilterV2Props,
 ): JSX.Element {
-	const { source, filter, onFilterChange, useFieldApis } = props;
+	const { source, filter, onFilterChange, onQuickFilterChange, useFieldApis } =
+		props;
 	const [searchText, setSearchText] = useState<string>('');
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 
@@ -103,6 +106,7 @@ export default function CheckboxFilterV2(
 		attributeValues,
 		activeQueryIndex,
 		onFilterChange,
+		onQuickFilterChange,
 	});
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -49,6 +49,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		handleFilterVisibilityChange,
 		source,
 		onFilterChange,
+		onQuickFilterChange,
 		signal,
 		showFilterCollapse = true,
 		showQueryName = true,
@@ -305,6 +306,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
+									onQuickFilterChange={onQuickFilterChange}
 									useFieldApis={useFieldApis}
 								/>
 							) : (
@@ -313,6 +315,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
+									onQuickFilterChange={onQuickFilterChange}
 								/>
 							);
 						case FiltersType.DURATION:
@@ -333,6 +336,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
+									onQuickFilterChange={onQuickFilterChange}
 									useFieldApis={useFieldApis}
 								/>
 							) : (
@@ -341,6 +345,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
+									onQuickFilterChange={onQuickFilterChange}
 								/>
 							);
 					}

frontend/src/components/QuickFilters/types.ts

@@ -42,11 +42,18 @@ export interface IQuickFiltersConfig {
 	defaultOpen: boolean;
 }
 
+export interface QuickFilterChangeEventData {
+	filterKey: string;
+	expression: string;
+	filterItemKeys: string[];
+}
+
 export interface IQuickFiltersProps {
 	config: IQuickFiltersConfig[];
 	handleFilterVisibilityChange: () => void;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
+	onQuickFilterChange?: (data: QuickFilterChangeEventData) => void;
 	signal?: SignalType;
 	className?: string;
 	showFilterCollapse?: boolean;

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -5,6 +5,7 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -36,91 +37,104 @@ function KeyFormPhase({
 	onClose,
 	accountId,
 }: KeyFormPhaseProps): JSX.Element {
+	const checks = accountId
+		? [APIKeyCreatePermission, buildSAAttachPermission(accountId)]
+		: [];
+
 	return (
 		<>
 			<form id={FORM_ID} className="add-key-modal__form" onSubmit={onSubmit}>
-				<div className="add-key-modal__field">
-					<label className="add-key-modal__label" htmlFor="key-name">
-						Name <span style={{ color: 'var(--destructive)' }}>*</span>
-					</label>
-					<Input
-						id="key-name"
-						placeholder="Enter key name e.g.: Service Owner"
-						className="add-key-modal__input"
-						{...register('keyName', {
-							required: true,
-							validate: (v) => !!v.trim(),
-						})}
-					/>
-				</div>
-
-				<div className="add-key-modal__field">
-					<span className="add-key-modal__label">Expiration</span>
-					<Controller
-						name="expiryMode"
-						control={control}
-						render={({ field }): JSX.Element => (
-							<ToggleGroupSimple
-								type="single"
-								value={field.value}
-								onChange={(val: string): void => {
-									if (val) {
-										field.onChange(val);
-									}
-								}}
-								size="sm"
-								className="add-key-modal__expiry-toggle"
-								items={[
-									{ value: ExpiryMode.NONE, label: 'No Expiration' },
-									{ value: ExpiryMode.DATE, label: 'Set Expiration Date' },
-								]}
+				<AuthZGuardContent checks={checks}>
+					<>
+						<div className="add-key-modal__field">
+							<label className="add-key-modal__label" htmlFor="key-name">
+								Name <span style={{ color: 'var(--destructive)' }}>*</span>
+							</label>
+							<Input
+								id="key-name"
+								placeholder="Enter key name e.g.: Service Owner"
+								className="add-key-modal__input"
+								testId="add-key-name-input"
+								{...register('keyName', {
+									required: true,
+									validate: (v) => !!v.trim(),
+								})}
 							/>
-						)}
-					/>
-				</div>
+						</div>
 
-				{expiryMode === ExpiryMode.DATE && (
-					<div className="add-key-modal__field">
-						<label className="add-key-modal__label" htmlFor="expiry-date">
-							Expiration Date
-						</label>
-						<div className="add-key-modal__datepicker">
+						<div className="add-key-modal__field">
+							<span className="add-key-modal__label">Expiration</span>
 							<Controller
-								name="expiryDate"
+								name="expiryMode"
 								control={control}
 								render={({ field }): JSX.Element => (
-									<DatePicker
-										id="expiry-date"
+									<ToggleGroupSimple
+										type="single"
 										value={field.value}
-										onChange={field.onChange}
-										popupClassName="add-key-modal-datepicker-popup"
-										getPopupContainer={popupContainer}
-										disabledDate={disabledDate}
+										onChange={(val: string): void => {
+											if (val) {
+												field.onChange(val);
+											}
+										}}
+										size="sm"
+										className="add-key-modal__expiry-toggle"
+										items={[
+											{ value: ExpiryMode.NONE, label: 'No Expiration' },
+											{ value: ExpiryMode.DATE, label: 'Set Expiration Date' },
+										]}
 									/>
 								)}
 							/>
 						</div>
-					</div>
-				)}
+
+						{expiryMode === ExpiryMode.DATE && (
+							<div className="add-key-modal__field">
+								<label className="add-key-modal__label" htmlFor="expiry-date">
+									Expiration Date
+								</label>
+								<div className="add-key-modal__datepicker">
+									<Controller
+										name="expiryDate"
+										control={control}
+										render={({ field }): JSX.Element => (
+											<DatePicker
+												id="expiry-date"
+												value={field.value}
+												onChange={field.onChange}
+												popupClassName="add-key-modal-datepicker-popup"
+												getPopupContainer={popupContainer}
+												disabledDate={disabledDate}
+											/>
+										)}
+									/>
+								</div>
+							</div>
+						)}
+					</>
+				</AuthZGuardContent>
 			</form>
 
 			<div className="add-key-modal__footer">
 				<div className="add-key-modal__footer-right">
-					<Button variant="solid" color="secondary" onClick={onClose}>
+					<Button
+						variant="solid"
+						color="secondary"
+						onClick={onClose}
+						testId="add-key-cancel-btn"
+					>
 						Cancel
 					</Button>
 					<AuthZButton
-						checks={[
-							APIKeyCreatePermission,
-							buildSAAttachPermission(accountId ?? ''),
-						]}
+						checks={checks}
 						authZEnabled={!!accountId}
+						withPortal={false}
 						type="submit"
 						form={FORM_ID}
 						variant="solid"
 						color="primary"
 						loading={isSubmitting}
 						disabled={!isValid}
+						testId="add-key-submit-btn"
 					>
 						Create Key
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -92,6 +92,7 @@ function DeleteAccountModal(): JSX.Element {
 				loading={isDeleting}
 				onClick={handleConfirm}
 				data-testid="confirm-delete-btn"
+				withPortal={false}
 			>
 				<Trash2 size={12} />
 				Delete

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -60,6 +60,7 @@ function EditKeyForm({
 						<AuthZTooltip
 							checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 							enabled={!!keyItem?.id}
+							withPortal={false}
 						>
 							<div className="edit-key-modal__key-display">
 								<span className="edit-key-modal__id-text">{keyItem?.name || '—'}</span>
@@ -168,6 +169,7 @@ function EditKeyForm({
 					variant="link"
 					color="destructive"
 					onClick={onRevokeClick}
+					withPortal={false}
 				>
 					<Trash2 size={12} />
 					Revoke Key
@@ -186,6 +188,7 @@ function EditKeyForm({
 						color="primary"
 						loading={isSaving}
 						disabled={!isDirty}
+						withPortal={false}
 					>
 						Save Changes
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -114,13 +114,14 @@ function buildColumns({
 			render: (_, record): JSX.Element => {
 				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
 				return (
-					<Tooltip title={tooltipTitle}>
+					<Tooltip title={tooltipTitle} placement="bottom">
 						<AuthZButton
 							checks={[
 								buildAPIKeyDeletePermission(record.id),
 								buildSADetachPermission(accountId),
 							]}
 							authZEnabled={!isDisabled && !!accountId}
+							withPortal={false}
 							variant="ghost"
 							size="sm"
 							color="destructive"
@@ -214,6 +215,7 @@ function KeysTab({
 				<AuthZButton
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					authZEnabled={!isDisabled && !!accountId}
+					withPortal={false}
 					variant="link"
 					color="primary"
 					onClick={async (): Promise<void> => {

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -90,14 +90,20 @@ function OverviewTab({
 					Name
 				</label>
 				{isDisabled ? (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+					<AuthZTooltip
+						checks={[buildSAUpdatePermission(account.id)]}
+						withPortal={false}
+					>
 						<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 							<span className="sa-drawer__input-text">{localName || '—'}</span>
 							<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 						</div>
 					</AuthZTooltip>
 				) : (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+					<AuthZTooltip
+						checks={[buildSAUpdatePermission(account.id)]}
+						withPortal={false}
+					>
 						<Input
 							id="sa-name"
 							value={localName}

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -55,6 +55,7 @@ export function RevokeKeyFooter({
 				color="destructive"
 				loading={isRevoking}
 				onClick={onConfirm}
+				withPortal={false}
 			>
 				<Trash2 size={12} />
 				Revoke Key

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -38,6 +38,7 @@ import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
 	buildSADeletePermission,
+	buildSAReadPermission,
 	buildSAUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import {
@@ -376,6 +377,7 @@ function ServiceAccountDrawer({
 					<AuthZButton
 						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 						authZEnabled={!!selectedAccountId}
+						withPortal={false}
 						variant="link"
 						color="destructive"
 						onClick={(): void => {
@@ -391,8 +393,12 @@ function ServiceAccountDrawer({
 							Cancel
 						</Button>
 						<AuthZButton
-							checks={[buildSAUpdatePermission(selectedAccountId ?? '')]}
+							checks={[
+								buildSAReadPermission(selectedAccountId ?? ''),
+								buildSAUpdatePermission(selectedAccountId ?? ''),
+							]}
 							authZEnabled={!!selectedAccountId}
+							withPortal={false}
 							variant="solid"
 							color="primary"
 							loading={isSaving}
@@ -465,6 +471,7 @@ function ServiceAccountDrawer({
 							buildSAAttachPermission(selectedAccountId ?? ''),
 						]}
 						authZEnabled={!isDeleted && !!selectedAccountId}
+						withPortal={false}
 						variant="outlined"
 						size="sm"
 						color="secondary"

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

@@ -1,5 +1,10 @@
 import { toast } from '@signozhq/ui/sonner';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { buildSAAttachPermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import {
+	setupAuthzAdmin,
+	setupAuthzDeny,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -66,28 +71,29 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		expect(screen.getByRole('button', { name: /Create Key/i })).toBeDisabled();
+		// The form only renders once the checks resolve, so waiting for it also
+		// guarantees the button is no longer in its authz-loading state.
+		const nameInput = await screen.findByTestId('add-key-name-input');
+		const createBtn = await screen.findByTestId('add-key-submit-btn');
 
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'My Key');
+		expect(createBtn).toBeDisabled();
 
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
+		await user.type(nameInput, 'My Key');
+		await waitFor(() => expect(createBtn).not.toBeDisabled());
+
+		await user.clear(nameInput);
+		await waitFor(() => expect(createBtn).toBeDisabled());
 	});
 
 	it('successful creation transitions to phase 2 with key displayed and security callout', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-		await user.click(screen.getByRole('button', { name: /Create Key/i }));
+		const nameInput = await screen.findByTestId('add-key-name-input');
+		const submitBtn = await screen.findByTestId('add-key-submit-btn');
+		await user.type(nameInput, 'Deploy Key');
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await user.click(submitBtn);
 
 		await screen.findByText('snz_abc123xyz456secret');
 		expect(screen.getByText(/Store the key securely/i)).toBeInTheDocument();
@@ -99,13 +105,11 @@ describe('AddKeyModal', () => {
 
 		renderModal();
 
-		await user.type(screen.getByPlaceholderText(/Enter key name/i), 'Deploy Key');
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /Create Key/i }),
-			).not.toBeDisabled(),
-		);
-		await user.click(screen.getByRole('button', { name: /Create Key/i }));
+		const nameInput = await screen.findByTestId('add-key-name-input');
+		const submitBtn = await screen.findByTestId('add-key-submit-btn');
+		await user.type(nameInput, 'Deploy Key');
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await user.click(submitBtn);
 
 		await screen.findByText('snz_abc123xyz456secret');
 
@@ -123,12 +127,57 @@ describe('AddKeyModal', () => {
 		});
 	});
 
+	it('shows inline permission denial and hides the form when key create is denied', async () => {
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		expect(screen.queryByTestId('add-key-name-input')).not.toBeInTheDocument();
+		expect(screen.getByTestId('add-key-modal')).toBeInTheDocument();
+	});
+
+	it('keeps the footer usable when key create is denied', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		server.use(setupAuthzDenyAll());
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		// The footer lives outside the guard: submit is gated, Cancel still works.
+		expect(screen.getByTestId('add-key-submit-btn')).toBeDisabled();
+
+		await user.click(screen.getByTestId('add-key-cancel-btn'));
+
+		await waitFor(() => {
+			expect(screen.queryByTestId('add-key-modal')).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows inline permission denial when attach on the service account is denied', async () => {
+		server.use(setupAuthzDeny(buildSAAttachPermission('sa-1')));
+
+		renderModal();
+
+		await expect(
+			screen.findByText(/is not authorized to perform/i),
+		).resolves.toBeInTheDocument();
+
+		expect(screen.queryByTestId('add-key-name-input')).not.toBeInTheDocument();
+	});
+
 	it('Cancel button closes the modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByTestId('add-key-modal');
-		await user.click(screen.getByRole('button', { name: /Cancel/i }));
+		const cancelBtn = await screen.findByTestId('add-key-cancel-btn');
+		await user.click(cancelBtn);
 
 		await waitFor(() => {
 			expect(screen.queryByTestId('add-key-modal')).not.toBeInTheDocument();

frontend/src/components/TanStackTableView/TanStackHoverTooltip.tsx

@@ -1,8 +1,12 @@
-import { useLayoutEffect, type ReactNode } from 'react';
+import { type ReactNode, useLayoutEffect, useMemo } from 'react';
 
 import { chromePerformanceTanstackTableEndHover } from './perfDevtools';
 import { useIsRowHovered } from './TanStackTableStateContext';
-import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+import {
+	TooltipContentProps,
+	TooltipSimple,
+	TooltipSimpleProps,
+} from '@signozhq/ui/tooltip';
 
 export type HoverTooltipProps = Omit<TooltipSimpleProps, 'open'> & {
 	rowId: string;
@@ -22,9 +26,28 @@ export function TanStackHoverTooltip({
 		}
 	}, [isHovered, rowId]);
 
+	const tooltipContentProps = useMemo(
+		() =>
+			({
+				onPointerDownOutside: (e): void => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+			}) satisfies TooltipContentProps,
+		[],
+	);
+
 	if (!isHovered) {
 		return <>{children}</>;
 	}
 
-	return <TooltipSimple {...tooltipProps}>{children}</TooltipSimple>;
+	return (
+		<TooltipSimple
+			delayDuration={700}
+			tooltipContentProps={tooltipContentProps}
+			{...tooltipProps}
+		>
+			{children}
+		</TooltipSimple>
+	);
 }

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -51,6 +51,7 @@ import { useColumnHandlers } from './useColumnHandlers';
 import { useColumnState } from './useColumnState';
 import { useEffectiveData } from './useEffectiveData';
 import { useFlatItems } from './useFlatItems';
+import { useResetScroll } from './useResetScroll';
 import { useRowKeyData } from './useRowKeyData';
 import { useTableParams } from './useTableParams';
 import { buildPageSizeItems, buildTanstackColumnDef } from './utils';
@@ -110,6 +111,7 @@ function TanStackTableInner<TData, TItemKey = string>(
 		suffixPaginationContent,
 		enableAlternatingRowColors,
 		disableVirtualScroll,
+		resetScrollKey,
 	}: TanStackTableProps<TData, TItemKey>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
@@ -324,6 +326,8 @@ function TanStackTableInner<TData, TItemKey = string>(
 		});
 	}, [flatIndexForActiveRow]);
 
+	useResetScroll(virtuosoRef, resetScrollKey);
+
 	const { sensors, columnIds, handleDragEnd } = useColumnDnd({
 		columns: effectiveColumns,
 		onColumnOrderChange: handleColumnOrderChange,

frontend/src/components/TanStackTableView/__tests__/useColumnState.test.tsx

@@ -217,6 +217,55 @@ describe('useColumnState', () => {
 		});
 	});
 
+	describe('storageKey changes', () => {
+		it('does not auto-show hidden columns when switching between different storageKeys', () => {
+			// Regression test: when switching Pods→Nodes→Pods, hidden columns were
+			// incorrectly shown because prevColumnIdsRef wasn't reset on storageKey change.
+			// The autoShowNewlyAddedColumns effect would see pod columns as "new" (not in
+			// node columns) and unhide them.
+			const KEY_PODS = 'k8s-pods';
+			const KEY_NODES = 'k8s-nodes';
+
+			const podColumns = [
+				col('podName'),
+				col('podStatus'),
+				col('cpu_request', { defaultVisibility: false }),
+				col('memory_request', { defaultVisibility: false }),
+			];
+
+			const nodeColumns = [
+				col('nodeName'),
+				col('nodeStatus'),
+				col('cpu'),
+				col('memory'),
+			];
+
+			// Initialize both tables
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(KEY_PODS, podColumns);
+				useColumnStore.getState().initializeFromDefaults(KEY_NODES, nodeColumns);
+			});
+
+			// Start with pods - cpu_request and memory_request should be hidden
+			const { result, rerender } = renderHook(
+				({ storageKey, columns }) => useColumnState({ storageKey, columns }),
+				{ initialProps: { storageKey: KEY_PODS, columns: podColumns } },
+			);
+
+			expect(result.current.hiddenColumnIds).toContain('cpu_request');
+			expect(result.current.hiddenColumnIds).toContain('memory_request');
+
+			// Switch to nodes
+			rerender({ storageKey: KEY_NODES, columns: nodeColumns });
+
+			// Switch back to pods - hidden columns should STILL be hidden
+			rerender({ storageKey: KEY_PODS, columns: podColumns });
+
+			expect(result.current.hiddenColumnIds).toContain('cpu_request');
+			expect(result.current.hiddenColumnIds).toContain('memory_request');
+		});
+	});
+
 	describe('actions', () => {
 		it('hideColumn hides a column', () => {
 			const columns = [col('a'), col('b')];

frontend/src/components/TanStackTableView/__tests__/useResetScroll.test.ts

@@ -0,0 +1,103 @@
+import { RefObject } from 'react';
+import { renderHook } from '@testing-library/react';
+import type { TableVirtuosoHandle } from 'react-virtuoso';
+
+import { useResetScroll } from '../useResetScroll';
+
+function createMockRef(scrollTo: jest.Mock): RefObject<TableVirtuosoHandle> {
+	return {
+		current: {
+			scrollToIndex: jest.fn(),
+			scrollIntoView: jest.fn(),
+			scrollTo,
+			scrollBy: jest.fn(),
+		},
+	};
+}
+
+describe('useResetScroll', () => {
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('does not call scrollTo on initial mount', () => {
+		const scrollTo = jest.fn();
+		const ref = createMockRef(scrollTo);
+
+		renderHook(() => useResetScroll(ref, 'initial-key'));
+
+		expect(scrollTo).not.toHaveBeenCalled();
+	});
+
+	it('calls scrollTo when key changes', () => {
+		const scrollTo = jest.fn();
+		const ref = createMockRef(scrollTo);
+
+		const { rerender } = renderHook(
+			({ resetKey }) => useResetScroll(ref, resetKey),
+			{ initialProps: { resetKey: 'key-1' } },
+		);
+
+		expect(scrollTo).not.toHaveBeenCalled();
+
+		rerender({ resetKey: 'key-2' });
+
+		expect(scrollTo).toHaveBeenCalledWith({ left: 0 });
+	});
+
+	it('calls scrollTo once per key change', () => {
+		const scrollTo = jest.fn();
+		const ref = createMockRef(scrollTo);
+
+		const { rerender } = renderHook(
+			({ resetKey }) => useResetScroll(ref, resetKey),
+			{ initialProps: { resetKey: 'key-1' } },
+		);
+
+		rerender({ resetKey: 'key-2' });
+		rerender({ resetKey: 'key-3' });
+		rerender({ resetKey: 'key-4' });
+
+		expect(scrollTo).toHaveBeenCalledTimes(3);
+	});
+
+	it('does not call scrollTo when key unchanged', () => {
+		const scrollTo = jest.fn();
+		const ref = createMockRef(scrollTo);
+
+		const { rerender } = renderHook(
+			({ resetKey }) => useResetScroll(ref, resetKey),
+			{ initialProps: { resetKey: 'same-key' } },
+		);
+
+		rerender({ resetKey: 'same-key' });
+		rerender({ resetKey: 'same-key' });
+
+		expect(scrollTo).not.toHaveBeenCalled();
+	});
+
+	it('handles null ref.current gracefully', () => {
+		const ref: RefObject<TableVirtuosoHandle | null> = { current: null };
+
+		const { rerender } = renderHook(
+			({ resetKey }) => useResetScroll(ref, resetKey),
+			{ initialProps: { resetKey: 'key-1' } },
+		);
+
+		expect(() => rerender({ resetKey: 'key-2' })).not.toThrow();
+	});
+
+	it('calls scrollTo when changing from undefined to defined', () => {
+		const scrollTo = jest.fn();
+		const ref = createMockRef(scrollTo);
+
+		const { rerender } = renderHook(
+			({ resetKey }) => useResetScroll(ref, resetKey),
+			{ initialProps: { resetKey: undefined as string | undefined } },
+		);
+
+		rerender({ resetKey: 'new-key' });
+
+		expect(scrollTo).toHaveBeenCalledWith({ left: 0 });
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -215,6 +215,16 @@ export * from './useTableParams';
  * />
  * ```
  *
+ * @example Reset scroll on context change — use `resetScrollKey` to scroll back to start
+ * when the data context changes (e.g., switching between categories or tabs).
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   resetScrollKey={selectedCategory}
+ * />
+ * ```
+ *
  * @example useTableParams — manages pagination state with URL sync and persistence
  *
  * The `useTableParams` hook handles page, limit, orderBy, and expanded state. It can sync

frontend/src/components/TanStackTableView/types.ts

@@ -213,6 +213,8 @@ export type TanStackTableProps<TData, TItemKey = string> = {
 	enableAlternatingRowColors?: boolean;
 	/** Disable virtual scrolling and render all rows at once. Cannot be used with onEndReached. */
 	disableVirtualScroll?: boolean;
+	/** When this value changes, the table's scroll resets to the start. Useful for resetting scroll when the data context changes (e.g., switching categories). */
+	resetScrollKey?: string;
 };
 
 export type TanStackTableHandle = TableVirtuosoHandle & {

frontend/src/components/TanStackTableView/useColumnState.ts

@@ -67,6 +67,13 @@ export function useColumnState<TData>({
 
 	const columnSizing = useStoreSizing(storageKey ?? '');
 	const prevColumnIdsRef = useRef<Set<string> | null>(null);
+	const prevStorageKeyRef = useRef<string | undefined>(storageKey);
+
+	// Reset prevColumnIdsRef when storageKey changes to avoid cross-table interference
+	if (prevStorageKeyRef.current !== storageKey) {
+		prevColumnIdsRef.current = null;
+		prevStorageKeyRef.current = storageKey;
+	}
 
 	useEffect(
 		function autoShowNewlyAddedColumns(): void {

frontend/src/components/TanStackTableView/useResetScroll.ts

@@ -0,0 +1,18 @@
+import { RefObject, useEffect, useRef } from 'react';
+import type { TableVirtuosoHandle } from 'react-virtuoso';
+
+export function useResetScroll(
+	scrollRef: RefObject<TableVirtuosoHandle | null>,
+	resetKey: string | undefined,
+): void {
+	const prevKeyRef = useRef(resetKey);
+
+	useEffect(() => {
+		if (prevKeyRef.current !== resetKey) {
+			prevKeyRef.current = resetKey;
+			scrollRef.current?.scrollTo({
+				left: 0,
+			});
+		}
+	}, [resetKey, scrollRef]);
+}

frontend/src/constants/events.ts

@@ -1,3 +1,9 @@
+import logEvent from 'api/common/logEvent';
+import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { getNavigationReferrer } from 'lib/navigation';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+import { isCustomTimeRange } from 'store/globalTime';
+
 export enum Events {
 	UPDATE_GRAPH_VISIBILITY_STATE = 'UPDATE_GRAPH_VISIBILITY_STATE',
 	UPDATE_GRAPH_MANAGER_TABLE = 'UPDATE_GRAPH_MANAGER_TABLE',
@@ -39,3 +45,155 @@ export enum InfraMonitoringEvents {
 	StatefulSet = 'statefulSet',
 	Volumes = 'volumes',
 }
+
+export function logInfraFilterCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	source: 'quick_filter' | 'search' | 'host_status_toggle',
+	expression: string,
+	extraKeys?: string[],
+): void {
+	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
+		(pair) => pair.key,
+	);
+
+	if (extraKeys) {
+		extraKeys.forEach((key) => expressionKeys.push(key));
+	}
+
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_filter_customized', {
+		entity_type: entityType,
+		source,
+		expression_keys: [...new Set(expressionKeys)],
+	});
+}
+
+export function logInfraMonitoringListViewedEvent(
+	entity: InfraMonitoringEntity,
+): void {
+	const referrer = getNavigationReferrer();
+
+	void logEvent('infra_list_viewed', {
+		entity,
+		referrer,
+	});
+}
+
+export function logInfraTimeRangeCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	rangeLabel: string,
+): void {
+	void logEvent('infra_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	});
+}
+
+export function logInfraColumnCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	columnsList: string[],
+	fontSize: string,
+	maxLinesPerRow: number,
+	source: 'list' | 'expanded',
+): void {
+	void logEvent('infra_column_customized', {
+		entity_type: entityType,
+		columns_list: columnsList,
+		font_size: fontSize,
+		max_lines_per_row: maxLinesPerRow,
+		source,
+	});
+}
+
+export function logInfraColumnSortedEvent(
+	entityType: InfraMonitoringEntity,
+	columnKey: string,
+	direction: 'asc' | 'desc',
+	source: 'list' | 'expanded',
+): void {
+	void logEvent('infra_column_sorted', {
+		entity_type: entityType,
+		column_key: columnKey,
+		direction,
+		source,
+	});
+}
+
+export function logInfraDrawerTimeRangeCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	rangeLabel: string,
+): void {
+	void logEvent('infra_drawer_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	});
+}
+
+export function logInfraDrawerFilterCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
+	expression: string,
+	filterSource: 'search' | 'logs',
+): void {
+	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
+		(pair) => pair.key,
+	);
+
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_drawer_filter_customized', {
+		entity_type: entityType,
+		tab,
+		expression_keys: [...new Set(expressionKeys)],
+		filter_source: filterSource,
+	});
+}
+
+export function logInfraGroupByCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	groupByKeysList: string[],
+): void {
+	void logEvent('infra_group_by_customized', {
+		entity_type: entityType,
+		group_by_keys_list: groupByKeysList,
+	});
+}
+
+export function logInfraDrawerTabViewedEvent(
+	entityType: InfraMonitoringEntity,
+	tab: string,
+	isDefaultTab: boolean,
+): void {
+	void logEvent('infra_drawer_tab_viewed', {
+		entity_type: entityType,
+		tab,
+		is_default_tab: isDefaultTab,
+	});
+}
+
+export function logInfraExplorerNavigatedEvent(params: {
+	entityType: InfraMonitoringEntity;
+	destination:
+		| 'metrics_explorer'
+		| 'logs_explorer'
+		| 'traces_explorer'
+		| 'k8s_list';
+	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
+	tab: string;
+	sourceKey: string | null;
+	drawerDurationMsAtNavigation: number | null;
+}): void {
+	void logEvent('infra_explorer_navigated', {
+		entity_type: params.entityType,
+		destination: params.destination,
+		source: params.source,
+		tab: params.tab,
+		source_key: params.sourceKey,
+		drawer_duration_ms_at_navigation: params.drawerDurationMsAtNavigation,
+	});
+}

frontend/src/constants/queryCacheTime.ts

@@ -3,3 +3,7 @@ export const DASHBOARD_CACHE_TIME = 30_000;
 export const DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED = 0;
 
 export const FIELD_API_CACHE_TIME = 60_000;
+
+// intentionally lower since I only want to prevent refresh in background
+// after click in the row
+export const INFRA_MONITORING_DETAILS_CACHE_TIME = 1_000;

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -66,6 +66,10 @@ function ThresholdItem({
 				return '=';
 			case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 				return '!=';
+			case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+				return '>=';
+			case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+				return '<=';
 			default:
 				return '';
 		}

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -83,6 +83,10 @@ const getOperatorWord = (op: AlertThresholdOperator): string => {
 			return 'equal';
 		case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 			return 'not equal';
+		case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+			return 'equal or exceed';
+		case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+			return 'equal or fall below';
 		default:
 			return 'exceed';
 	}
@@ -98,6 +102,10 @@ const getThresholdValue = (op: AlertThresholdOperator): number => {
 			return 100;
 		case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 			return 0;
+		case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+			return 80;
+		case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+			return 50;
 		default:
 			return 80;
 	}
@@ -116,6 +124,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [95, 100, 105, 90, 100],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 0, 10, 15, 0],
 			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [75, 80, 90, 78, 95],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [60, 50, 40, 55, 35],
 			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
 		},
 		[AlertThresholdMatchType.ALL_THE_TIME]: {
@@ -123,6 +133,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [100, 100, 100, 100, 100],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 10, 15, 8, 12],
 			[AlertThresholdOperator.IS_ABOVE]: [85, 87, 90, 88, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [80, 87, 90, 88, 95],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [50, 40, 35, 42, 38],
 			[AlertThresholdOperator.ABOVE_BELOW]: [85, 87, 90, 88, 95],
 		},
 		[AlertThresholdMatchType.ON_AVERAGE]: {
@@ -130,6 +142,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [95, 105, 100, 95, 105],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [5, 10, 15, 8, 12],
 			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [70, 85, 90, 75, 80],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [60, 40, 55, 45, 50],
 			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
 		},
 		[AlertThresholdMatchType.IN_TOTAL]: {
@@ -137,6 +151,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [20, 20, 20, 20, 20],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [10, 15, 25, 5, 30],
 			[AlertThresholdOperator.IS_ABOVE]: [10, 15, 25, 5, 30],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [10, 15, 25, 5, 25],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [8, 5, 10, 12, 15],
 			[AlertThresholdOperator.ABOVE_BELOW]: [10, 15, 25, 5, 30],
 		},
 		[AlertThresholdMatchType.LAST]: {
@@ -144,6 +160,8 @@ const getDataPoints = (
 			[AlertThresholdOperator.IS_EQUAL_TO]: [75, 85, 90, 78, 100],
 			[AlertThresholdOperator.IS_NOT_EQUAL_TO]: [75, 85, 90, 78, 25],
 			[AlertThresholdOperator.IS_ABOVE]: [75, 85, 90, 78, 95],
+			[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: [75, 85, 90, 78, 80],
+			[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: [75, 85, 90, 78, 50],
 			[AlertThresholdOperator.ABOVE_BELOW]: [75, 85, 90, 78, 95],
 		},
 	};
@@ -157,6 +175,8 @@ const getTooltipOperatorSymbol = (op: AlertThresholdOperator): string => {
 		[AlertThresholdOperator.IS_BELOW]: '<',
 		[AlertThresholdOperator.IS_EQUAL_TO]: '=',
 		[AlertThresholdOperator.IS_NOT_EQUAL_TO]: '!=',
+		[AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO]: '>=',
+		[AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO]: '<=',
 		[AlertThresholdOperator.ABOVE_BELOW]: '>',
 	};
 	return symbolMap[op] || '>';
@@ -252,6 +272,10 @@ export const getMatchTypeTooltip = (
 					return p === thresholdValue;
 				case AlertThresholdOperator.IS_NOT_EQUAL_TO:
 					return p !== thresholdValue;
+				case AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO:
+					return p >= thresholdValue;
+				case AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO:
+					return p <= thresholdValue;
 				default:
 					return p > thresholdValue;
 			}
@@ -294,7 +318,8 @@ export const getMatchTypeTooltip = (
 						matchType={matchType}
 					>
 						Alert triggers (all points {operatorWord} {thresholdValue})<br />
-						If any point was {thresholdValue}, no alert would fire
+						If any point didn&apos;t {operatorWord} {thresholdValue}, no alert would
+						fire
 					</TooltipExample>
 					<TooltipLink />
 				</TooltipContent>

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -532,7 +532,7 @@ describe('Footer utils', () => {
 			['symbol', '>', 'at_least_once'],
 			['literal', 'above', 'at_least_once'],
 			['short', 'eq', 'avg'],
-			['UI-unexposed', 'above_or_equal', 'at_least_once'],
+			['inclusive', 'above_or_equal', 'at_least_once'],
 		])(
 			'round-trips %s op/matchType unchanged through the submit payload (%s / %s)',
 			(_desc, op, matchType) => {

frontend/src/container/CreateAlertV2/__tests__/utils.test.tsx

@@ -332,25 +332,20 @@ describe('CreateAlertV2 utils', () => {
 			['not_equal', AlertThresholdOperator.IS_NOT_EQUAL_TO],
 			['not_eq', AlertThresholdOperator.IS_NOT_EQUAL_TO],
 			['!=', AlertThresholdOperator.IS_NOT_EQUAL_TO],
+			['5', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['above_or_equal', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['above_or_eq', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['>=', AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO],
+			['6', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
+			['below_or_equal', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
+			['below_or_eq', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
+			['<=', AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO],
 			['7', AlertThresholdOperator.ABOVE_BELOW],
 			['outside_bounds', AlertThresholdOperator.ABOVE_BELOW],
 		])('maps backend alias %s to canonical enum', (alias, expected) => {
 			expect(normalizeOperator(alias)).toBe(expected);
 		});
 
-		it.each([
-			['5', 'above_or_equal'],
-			['above_or_equal', 'above_or_equal'],
-			['above_or_eq', 'above_or_equal'],
-			['>=', 'above_or_equal'],
-			['6', 'below_or_equal'],
-			['below_or_equal', 'below_or_equal'],
-			['below_or_eq', 'below_or_equal'],
-			['<=', 'below_or_equal'],
-		])('returns undefined for UI-unexposed alias %s (%s family)', (alias) => {
-			expect(normalizeOperator(alias)).toBeUndefined();
-		});
-
 		it('returns undefined for unknown values', () => {
 			expect(normalizeOperator('gibberish')).toBeUndefined();
 			expect(normalizeOperator(undefined)).toBeUndefined();
@@ -413,8 +408,8 @@ describe('CreateAlertV2 utils', () => {
 			['symbol', '>', 'at_least_once'],
 			['short form', 'eq', 'avg'],
 			['mixed numeric and literal', '7', 'last'],
-			['UI-unexposed operator', 'above_or_equal', 'at_least_once'],
-			['UI-unexposed numeric operator', '5', 'at_least_once'],
+			['inclusive literal operator', 'above_or_equal', 'at_least_once'],
+			['inclusive numeric operator', '5', 'at_least_once'],
 		])('preserves %s op/matchType verbatim (%s / %s)', (_desc, op, matchType) => {
 			const state = getThresholdStateFromAlertDef(buildDef(op, matchType));
 			expect(state.operator).toBe(op);

frontend/src/container/CreateAlertV2/context/conditionNormalizers.ts

@@ -2,9 +2,8 @@ import { AlertThresholdMatchType, AlertThresholdOperator } from './types';
 
 // Mirrors the backend's CompareOperator.Normalize() in
 // pkg/types/ruletypes/compare.go. Maps any accepted alias to the enum value
-// the dropdown understands. Returns undefined for aliases the UI does not
-// expose (e.g. above_or_equal, below_or_equal) so callers can keep the raw
-// value on screen instead of silently rewriting it.
+// the dropdown understands. Returns undefined for unknown values so callers
+// can keep the raw value on screen instead of silently rewriting it.
 export function normalizeOperator(
 	raw: string | undefined,
 ): AlertThresholdOperator | undefined {
@@ -27,6 +26,16 @@ export function normalizeOperator(
 		case 'not_eq':
 		case '!=':
 			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
+		case '5':
+		case 'above_or_equal':
+		case 'above_or_eq':
+		case '>=':
+			return AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO;
+		case '6':
+		case 'below_or_equal':
+		case 'below_or_eq':
+		case '<=':
+			return AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO;
 		case '7':
 		case 'outside_bounds':
 			return AlertThresholdOperator.ABOVE_BELOW;

frontend/src/container/CreateAlertV2/context/constants.ts

@@ -125,6 +125,14 @@ export const THRESHOLD_OPERATOR_OPTIONS = [
 	{ value: AlertThresholdOperator.IS_BELOW, label: 'BELOW' },
 	{ value: AlertThresholdOperator.IS_EQUAL_TO, label: 'EQUAL TO' },
 	{ value: AlertThresholdOperator.IS_NOT_EQUAL_TO, label: 'NOT EQUAL TO' },
+	{
+		value: AlertThresholdOperator.IS_ABOVE_OR_EQUAL_TO,
+		label: 'ABOVE OR EQUAL TO',
+	},
+	{
+		value: AlertThresholdOperator.IS_BELOW_OR_EQUAL_TO,
+		label: 'BELOW OR EQUAL TO',
+	},
 ];
 
 export const ANOMALY_THRESHOLD_OPERATOR_OPTIONS = [

frontend/src/container/CreateAlertV2/context/types.ts

@@ -99,6 +99,8 @@ export enum AlertThresholdOperator {
 	IS_BELOW = 'below',
 	IS_EQUAL_TO = 'equal',
 	IS_NOT_EQUAL_TO = 'not_equal',
+	IS_ABOVE_OR_EQUAL_TO = 'above_or_equal',
+	IS_BELOW_OR_EQUAL_TO = 'below_or_equal',
 	ABOVE_BELOW = 'outside_bounds',
 }
 

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -13,8 +13,15 @@ import {
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import { QuickFiltersSource } from 'components/QuickFilters/types';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	QuickFilterChangeEventData,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
+import {
+	InfraMonitoringEvents,
+	logInfraFilterCustomizedEvent,
+	logInfraMonitoringListViewedEvent,
+} from 'constants/events';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import K8sBaseDetails, {
 	K8sDetailsFilters,
@@ -186,6 +193,19 @@ function Hosts(): JSX.Element {
 			hostInitialLogTracesExpression(host),
 		[],
 	);
+
+	const handleQuickFilterChange = useCallback(
+		(data: QuickFilterChangeEventData): void => {
+			logInfraFilterCustomizedEvent(
+				InfraMonitoringEntity.HOSTS,
+				'quick_filter',
+				data.expression,
+				data.filterItemKeys,
+			);
+		},
+		[],
+	);
+
 	const controlListPrefix = !showFilters ? (
 		<div className={styles.quickFiltersToggleContainer}>
 			<Button
@@ -199,6 +219,10 @@ function Hosts(): JSX.Element {
 		</div>
 	) : undefined;
 
+	useEffect(() => {
+		logInfraMonitoringListViewedEvent(InfraMonitoringEntity.HOSTS);
+	}, []);
+
 	return (
 		<>
 			<div className={styles.infraMonitoringContainer}>
@@ -227,6 +251,7 @@ function Hosts(): JSX.Element {
 											startUnixMilli,
 											endUnixMilli,
 										}}
+										onQuickFilterChange={handleQuickFilterChange}
 									/>
 								</>
 							</OverlayScrollbar>

frontend/src/container/InfraMonitoringHostsV2/InfraMonitoringHosts.module.scss

@@ -78,7 +78,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	min-width: 595px;
+	min-width: 800px;
 
 	> * {
 		min-width: 0;

frontend/src/container/InfraMonitoringHostsV2/StatusFilter.tsx

@@ -1,9 +1,12 @@
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import { logInfraFilterCustomizedEvent } from 'constants/events';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import {
 	StatusFilterValue,
 	useInfraMonitoringPageListing,
 	useInfraMonitoringStatusFilter,
 } from 'container/InfraMonitoringK8sV2/hooks';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
 import styles from './StatusFilter.module.scss';
 
@@ -19,11 +22,21 @@ const statusOptions: Array<{
 function StatusFilter(): JSX.Element {
 	const [statusFilter, setStatusFilter] = useInfraMonitoringStatusFilter();
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
+	const { currentQuery } = useQueryBuilder();
 
 	const handleChange = (value: string): void => {
 		if (value !== undefined) {
 			void setStatusFilter(value === 'all' ? '' : (value as StatusFilterValue));
 			void setCurrentPage(1);
+
+			const expression =
+				currentQuery.builder.queryData[0]?.filter?.expression || '';
+			logInfraFilterCustomizedEvent(
+				InfraMonitoringEntity.HOSTS,
+				'host_status_toggle',
+				expression,
+				value === 'all' ? [] : ['host_status'],
+			);
 		}
 	};
 

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Progress } from '@signozhq/ui/progress';
-import { Typography } from '@signozhq/ui/typography';
 import {
 	InframonitoringtypesHostRecordDTO,
 	InframonitoringtypesHostStatusDTO,
@@ -10,6 +9,7 @@ import {
 import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import { TextNoData } from 'container/InfraMonitoringK8sV2/components';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import {
 	getHostQueryPayload,
@@ -70,7 +70,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 					{value}
 				</Badge>
 			) : (
-				<Typography.Text>-</Typography.Text>
+				<TextNoData type="typography" />
 			),
 	},
 	{

frontend/src/container/InfraMonitoringHostsV2/table.config.tsx

@@ -175,7 +175,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		accessorFn: (row): number => row.cpu,
 		width: { min: 220 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = value as number;
 			return (
 				<div className={styles.progressContainer}>
@@ -183,6 +183,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 						value={cpu}
 						entity={InfraMonitoringEntity.HOSTS}
 						attribute="CPU metric"
+						rowId={rowId}
 					>
 						<EntityProgressBar value={cpu} type="cpu" />
 					</ValidateColumnValueWrapper>
@@ -197,14 +198,13 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 				tooltip="Excluding cache memory."
 				docPath="/infrastructure-monitoring/host-monitoring#memory-usage"
 			>
-				Memory Usage
-				<br /> (WSS)
+				Memory Usage (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.memory,
 		width: { min: 200 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = value as number;
 			return (
 				<div className={styles.progressContainer}>
@@ -212,6 +212,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 						value={memory}
 						entity={InfraMonitoringEntity.HOSTS}
 						attribute="memory metric"
+						rowId={rowId}
 					>
 						<EntityProgressBar value={memory} type="memory" />
 					</ValidateColumnValueWrapper>
@@ -219,6 +220,33 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 			);
 		},
 	},
+	{
+		id: 'diskUsage',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#disk-usage">
+				Disk Usage
+			</ColumnHeader>
+		),
+		accessorFn: (row): number => row.diskUsage,
+		width: { min: 200 },
+		enableSort: true,
+		cell: ({ value, rowId }): React.ReactNode => {
+			const diskUsage = value as number;
+
+			return (
+				<div className={styles.progressContainer}>
+					<ValidateColumnValueWrapper
+						value={diskUsage}
+						entity={InfraMonitoringEntity.HOSTS}
+						attribute="disk usage metric"
+						rowId={rowId}
+					>
+						<EntityProgressBar value={diskUsage} type="disk" />
+					</ValidateColumnValueWrapper>
+				</div>
+			);
+		},
+	},
 	{
 		id: 'wait',
 		header: (): React.ReactNode => (
@@ -229,7 +257,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		accessorFn: (row): number => row.wait,
 		width: { min: 120 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const wait = value as number;
 
 			return (
@@ -237,6 +265,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 					value={wait}
 					entity={InfraMonitoringEntity.HOSTS}
 					attribute="IOWait metric"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>
 						{`${Number((wait * 100).toFixed(1))}%`}
@@ -249,14 +278,13 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		id: 'load15',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#load-avg">
-				Load Avg
-				<br /> (15min)
+				Load Avg (15min)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.load15,
 		width: { min: 160 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const load15 = Number(value);
 
 			return (
@@ -264,36 +292,11 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 					value={load15}
 					entity={InfraMonitoringEntity.HOSTS}
 					attribute="load average metric"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{load15.toFixed(2)}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
 			);
 		},
 	},
-	{
-		id: 'diskUsage',
-		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#disk-usage">
-				Disk Usage
-			</ColumnHeader>
-		),
-		accessorFn: (row): number => row.diskUsage,
-		width: { min: 200 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const diskUsage = value as number;
-
-			return (
-				<div className={styles.progressContainer}>
-					<ValidateColumnValueWrapper
-						value={diskUsage}
-						entity={InfraMonitoringEntity.HOSTS}
-						attribute="disk usage metric"
-					>
-						<EntityProgressBar value={diskUsage} type="disk" />
-					</ValidateColumnValueWrapper>
-				</div>
-			);
-		},
-	},
 ];

frontend/src/container/InfraMonitoringHostsV2/utils.tsx

@@ -7,7 +7,7 @@ import {
 	IQuickFiltersConfig,
 } from 'components/QuickFilters/types';
 import { TriangleAlert } from '@signozhq/icons';
-import { CellValueTooltip } from 'container/InfraMonitoringK8sV2/components';
+import TanStackTable from 'components/TanStackTableView';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -21,7 +21,7 @@ export function HostnameCell({
 }): React.ReactElement {
 	const isEmpty = !hostName || !hostName.trim();
 	if (!isEmpty) {
-		return <CellValueTooltip value={hostName} />;
+		return <TanStackTable.Text>{hostName}</TanStackTable.Text>;
 	}
 	return (
 		<>

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -21,6 +21,9 @@ import {
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -33,9 +36,14 @@ import {
 import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
 import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
 import { ILog } from 'types/api/logs/log';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { isModifierKeyPressed } from 'utils/app';
 import { validateQuery } from 'utils/queryValidationUtils';
 
 import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
@@ -134,7 +142,7 @@ function EntityLogsContent({
 			if (validation.isValid) {
 				querySearchOnRun(newUserExpression);
 
-				logEvent(InfraMonitoringEvents.FilterApplied, {
+				void logEvent(InfraMonitoringEvents.FilterApplied, {
 					entity: InfraMonitoringEvents.K8sEntity,
 					page: InfraMonitoringEvents.DetailedPage,
 					category,
@@ -162,6 +170,45 @@ function EntityLogsContent({
 		virtuosoRef,
 	});
 
+	const { updateAllQueriesOperators } = useQueryBuilder();
+	const { safeNavigate } = useSafeNavigate();
+
+	const handleOpenInExplorer = useCallback(
+		(e: React.MouseEvent<Element, MouseEvent>, log: ILog) => {
+			const baseQuery = updateAllQueriesOperators(
+				initialQueriesMap[DataSource.LOGS],
+				PANEL_TYPES.LIST,
+				DataSource.LOGS,
+			);
+
+			const queryParams = {
+				[QueryParams.activeLogId]: `"${log?.id}"`,
+				[QueryParams.startTime]: timeRange.startTime.toString(),
+				[QueryParams.endTime]: timeRange.endTime.toString(),
+				[QueryParams.compositeQuery]: JSON.stringify({
+					...baseQuery,
+					builder: {
+						...baseQuery.builder,
+						queryData: baseQuery.builder.queryData.map((item) => ({
+							...item,
+							filter: { expression },
+						})),
+					},
+				} satisfies Query),
+			};
+			safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
+				newTab: !!e && isModifierKeyPressed(e),
+			});
+		},
+		[
+			timeRange.startTime,
+			timeRange.endTime,
+			expression,
+			safeNavigate,
+			updateAllQueriesOperators,
+		],
+	);
+
 	const getItemContent = useCallback(
 		(_: number, logToRender: ILog): JSX.Element => {
 			return (
@@ -287,6 +334,7 @@ function EntityLogsContent({
 						onAddToQuery={onAddToQuery}
 						onClickActionItem={onAddToQuery}
 						onScrollToLog={handleScrollToLog}
+						handleOpenInExplorer={(e): void => handleOpenInExplorer(e, activeLog)}
 					/>
 				)}
 			</div>

frontend/src/container/InfraMonitoringK8sV2/Base/ColumnHeader.module.scss

@@ -2,6 +2,7 @@
 	display: inline-flex;
 	align-items: center;
 	gap: var(--spacing-2);
+	text-wrap: auto;
 }
 
 .infoIcon {

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

@@ -8,7 +8,6 @@ const DOCS_BASE_URL = `${process.env.DOCS_BASE_URL}/docs`;
 
 interface ColumnHeaderProps {
 	children?: React.ReactNode;
-	title?: string;
 	docPath?: string;
 	tooltip?: string;
 	className?: string;
@@ -16,7 +15,6 @@ interface ColumnHeaderProps {
 
 function ColumnHeader({
 	children,
-	title,
 	docPath,
 	tooltip,
 	className,
@@ -26,16 +24,6 @@ function ColumnHeader({
 			return children;
 		}
 
-		if (title) {
-			const parts = title.split('\n');
-			return parts.map((part, index) => (
-				<div key={`${part}-${index}`}>
-					{part}
-					{index < parts.length - 1 && <br />}
-				</div>
-			));
-		}
-
 		return null;
 	};
 

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

@@ -1,15 +1,17 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Color, Spacing } from '@signozhq/design-tokens';
-import { X } from '@signozhq/icons';
+import { useCopyToClipboard } from 'react-use';
+import { Copy, X } from '@signozhq/icons';
 import { Divider } from '@signozhq/ui/divider';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper, DrawerWrapperProps } from '@signozhq/ui/drawer';
+import { toast } from '@signozhq/ui/sonner';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { Drawer } from 'antd';
 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 { useIsDarkMode } from 'hooks/useDarkMode';
 import {
 	GlobalTimeProvider,
 	NANO_SECOND_MULTIPLIER,
@@ -22,8 +24,10 @@ import LoadingContainer from '../LoadingContainer';
 
 import K8sBaseDetailsContent from './K8sBaseDetailsContent';
 import { K8sBaseDetailsProps } from './types';
+import { useDrawerLifecycleStore } from './useDrawerLifecycleStore';
 
-import '../EntityDetailsUtils/entityDetails.styles.scss';
+import styles from '../EntityDetailsUtils/entityDetails.module.scss';
+import { INFRA_MONITORING_DETAILS_CACHE_TIME } from 'constants/queryCacheTime';
 
 export type {
 	CustomTab,
@@ -34,6 +38,23 @@ export type {
 	K8sDetailsMetadataConfig,
 } from './types';
 
+// TODO(H4ad): Improve this on component level
+const DRAWER_TRANSITION = { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] };
+const DRAWER_MOTION_PROPS = {
+	onOpenAutoFocus: (e: Event): void => e.preventDefault(),
+	initial: { opacity: 0, transform: 'translateX(100%)' },
+	animate: {
+		opacity: 1,
+		transform: 'translateX(0%)',
+		transition: DRAWER_TRANSITION,
+	},
+	exit: {
+		opacity: 0,
+		transform: 'translateX(100%)',
+		transition: DRAWER_TRANSITION,
+	},
+} as unknown as DrawerWrapperProps['drawerContentProps'];
+
 export default function K8sBaseDetails<T>({
 	category,
 	eventCategory,
@@ -58,8 +79,6 @@ export default function K8sBaseDetails<T>({
 		(s) => s.getAutoRefreshQueryKey,
 	);
 
-	const isDarkMode = useIsDarkMode();
-
 	const [selectedItemParams, setSelectedItemParams] =
 		useInfraMonitoringSelectedItemParams();
 	const selectedItem = selectedItemParams.selectedItem;
@@ -101,6 +120,8 @@ export default function K8sBaseDetails<T>({
 
 			return fetchEntityData({ filter: { expression }, start, end }, signal);
 		},
+		cacheTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
+		staleTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
 		enabled: !!selectedItem,
 	});
 
@@ -121,10 +142,39 @@ export default function K8sBaseDetails<T>({
 		return getInitialEventsExpression(entity);
 	}, [entity, getInitialEventsExpression]);
 
+	const markDrawerOpened = useDrawerLifecycleStore((s) => s.markOpened);
+	const markDrawerClosed = useDrawerLifecycleStore((s) => s.markClosed);
+
+	useEffect(() => {
+		if (selectedItem) {
+			markDrawerOpened();
+		} else {
+			markDrawerClosed();
+		}
+	}, [selectedItem, markDrawerOpened, markDrawerClosed]);
+
 	const handleClose = useCallback((): void => {
 		setSelectedItemParams(null);
 	}, [setSelectedItemParams]);
 
+	const handleOpenChange = useCallback(
+		(open: boolean): void => {
+			if (!open) {
+				handleClose();
+			}
+		},
+		[handleClose],
+	);
+
+	const [, copyToClipboard] = useCopyToClipboard();
+
+	const handleCopyId = useCallback((): void => {
+		if (selectedItem) {
+			copyToClipboard(selectedItem);
+			toast.success('ID copied to clipboard', { position: 'bottom-left' });
+		}
+	}, [copyToClipboard, selectedItem]);
+
 	const entityName = entity ? getEntityName(entity) : '';
 
 	useEffect(() => {
@@ -137,31 +187,49 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
+	// TODO(H4ad): Improve this on component level
+	// DrawerWrapper types `title` as string but renders any ReactNode.
+	const drawerTitle = (
+		<>
+			<Button
+				variant="ghost"
+				size="sm"
+				color="secondary"
+				onClick={handleClose}
+				data-testid="close-drawer-button"
+				className={styles.closeButton}
+				prefix={<X />}
+			/>
+			<Divider type="vertical" />
+			<Typography.Text className={styles.title}>
+				{entityName ||
+					((isEntityError || hasResponseError) && 'Failed to load entity details') ||
+					(isEntityLoading && 'Loading...') ||
+					'-'}
+			</Typography.Text>
+			<TooltipSimple title="Copy ID">
+				<Button
+					variant="ghost"
+					size="sm"
+					color="secondary"
+					onClick={handleCopyId}
+					data-testid="copy-id-button"
+				>
+					<Copy size={14} />
+				</Button>
+			</TooltipSimple>
+		</>
+	) as unknown as string;
+
 	return (
-		<Drawer
-			width="70%"
-			title={
-				<>
-					<Divider type="vertical" />
-					<Typography.Text className="title">
-						{entityName ||
-							((isEntityError || hasResponseError) &&
-								'Failed to load entity details') ||
-							(isEntityLoading && 'Loading...') ||
-							'-'}
-					</Typography.Text>
-				</>
-			}
-			placement="right"
-			onClose={handleClose}
+		<DrawerWrapper
 			open={!!selectedItem}
-			style={{
-				overscrollBehavior: 'contain',
-				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
-			}}
-			className="entity-detail-drawer"
-			destroyOnClose
-			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
+			onOpenChange={handleOpenChange}
+			direction="right"
+			title={drawerTitle}
+			showCloseButton={false}
+			drawerContentProps={DRAWER_MOTION_PROPS}
+			className={styles.entityDetailDrawer}
 		>
 			{(isEntityLoading || !selectedItem) && <LoadingContainer />}
 
@@ -210,6 +278,6 @@ export default function K8sBaseDetails<T>({
 					/>
 				</GlobalTimeProvider>
 			)}
-		</Drawer>
+		</DrawerWrapper>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo } from 'react';
+import { Fragment, useEffect, useMemo, useRef } from 'react';
 import {
 	BarChart,
 	ChevronsLeftRight,
@@ -6,12 +6,17 @@ import {
 	DraftingCompass,
 	ScrollText,
 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraDrawerTabViewedEvent,
+	logInfraExplorerNavigatedEvent,
+} from 'constants/events';
 import { QueryParams } from 'constants/query';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -42,6 +47,9 @@ import {
 
 import { EntityCountsSection } from './components/EntityCountsSection/EntityCountsSection';
 import { K8sBaseDetailsContentProps } from './types';
+import { getDrawerDurationMs } from './useDrawerLifecycleStore';
+
+import styles from '../EntityDetailsUtils/entityDetails.module.scss';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function K8sBaseDetailsContent<T>({
@@ -107,6 +115,17 @@ export default function K8sBaseDetailsContent<T>({
 
 	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
 
+	// 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 hasLoggedDefaultTab = useRef(false);
+	useEffect(() => {
+		if (hasLoggedDefaultTab.current || !validTabs.includes(effectiveView)) {
+			return;
+		}
+		hasLoggedDefaultTab.current = true;
+		logInfraDrawerTabViewedEvent(category, effectiveView, true);
+	}, [validTabs, effectiveView, category]);
+
 	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
 	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
 	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
@@ -133,6 +152,7 @@ export default function K8sBaseDetailsContent<T>({
 			category: eventCategory,
 			view: value,
 		});
+		logInfraDrawerTabViewedEvent(category, value, false);
 	};
 
 	const handleExplorePagesRedirect = (): void => {
@@ -154,6 +174,16 @@ export default function K8sBaseDetailsContent<T>({
 			view: selectedView,
 		});
 
+		logInfraExplorerNavigatedEvent({
+			entityType: category,
+			destination:
+				selectedView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
+			source: 'tab_cta_button',
+			tab: selectedView,
+			sourceKey: null,
+			drawerDurationMsAtNavigation: getDrawerDurationMs(),
+		});
+
 		if (selectedView === VIEW_TYPES.LOGS) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
@@ -209,34 +239,39 @@ export default function K8sBaseDetailsContent<T>({
 
 	return (
 		<>
-			<div className="entity-detail-drawer__entity">
-				<div className="entity-details-grid">
-					<div className="labels-row">
+			<div className={styles.entityDetailsEntity}>
+				<div className={styles.entityDetailsGrid}>
+					<div className={styles.labelsRow}>
 						{metadataConfig.map((config) => (
 							<Typography.Text
 								key={config.label}
 								color="muted"
-								className="entity-details-metadata-label"
+								size="small"
+								weight="medium"
+								className={styles.entityDetailsMetadataLabel}
 							>
 								{config.label}
 							</Typography.Text>
 						))}
 					</div>
 
-					<div className="values-row">
+					<div className={styles.valuesRow}>
 						{metadataConfig.map((config) => {
 							const value = config.getValue(entity);
+
+							if (config.render) {
+								return config.render(value, entity);
+							}
+
 							const displayValue = String(value);
 							return (
 								<Typography.Text
 									key={config.label}
-									className="entity-details-metadata-value"
+									size="small"
+									weight="medium"
+									className={styles.entityDetailsMetadataValue}
 								>
-									{config.render ? (
-										config.render(value, entity)
-									) : (
-										<Tooltip title={displayValue}>{displayValue}</Tooltip>
-									)}
+									{displayValue}
 								</Typography.Text>
 							);
 						})}
@@ -253,15 +288,17 @@ export default function K8sBaseDetailsContent<T>({
 							selectedItem={selectedItem}
 							filterExpression={getCountsFilterExpression(entity)}
 							closeDrawer={handleClose}
+							entityType={category}
+							activeTab={selectedView}
 						/>
 					)}
 			</div>
 
 			{!hideDetailViewTabs && (
-				<div className="views-tabs-container">
+				<div className={styles.viewsTabsContainer}>
 					<ToggleGroupSimple
 						type="single"
-						className="views-tabs"
+						className={styles.viewsTabs}
 						onChange={handleTabChange}
 						value={selectedView}
 						items={[
@@ -270,7 +307,7 @@ export default function K8sBaseDetailsContent<T>({
 										{
 											value: VIEW_TYPES.METRICS,
 											label: (
-												<div className="view-title">
+												<div className={styles.viewTitle}>
 													<BarChart size={14} />
 													Metrics
 												</div>
@@ -283,7 +320,7 @@ export default function K8sBaseDetailsContent<T>({
 										{
 											value: VIEW_TYPES.LOGS,
 											label: (
-												<div className="view-title">
+												<div className={styles.viewTitle}>
 													<ScrollText size={14} />
 													Logs
 												</div>
@@ -296,7 +333,7 @@ export default function K8sBaseDetailsContent<T>({
 										{
 											value: VIEW_TYPES.TRACES,
 											label: (
-												<div className="view-title">
+												<div className={styles.viewTitle}>
 													<DraftingCompass size={14} />
 													Traces
 												</div>
@@ -309,7 +346,7 @@ export default function K8sBaseDetailsContent<T>({
 										{
 											value: VIEW_TYPES.EVENTS,
 											label: (
-												<div className="view-title">
+												<div className={styles.viewTitle}>
 													<ChevronsLeftRight size={14} />
 													Events
 												</div>
@@ -320,7 +357,7 @@ export default function K8sBaseDetailsContent<T>({
 							...(customTabs?.map((tab) => ({
 								value: tab.key,
 								label: (
-									<div className="view-title">
+									<div className={styles.viewTitle}>
 										{tab.icon}
 										{tab.label}
 									</div>
@@ -330,22 +367,30 @@ export default function K8sBaseDetailsContent<T>({
 					/>
 
 					{selectedView === VIEW_TYPES.LOGS && (
-						<Tooltip title="Go to Logs Explorer" placement="left">
+						<TooltipSimple title="Go to Logs Explorer" side="left" arrow>
 							<Button
-								icon={<Compass size={18} />}
-								className="compass-button"
+								variant="ghost"
+								size="icon"
+								color="secondary"
+								className={styles.compassButton}
 								onClick={handleExplorePagesRedirect}
-							/>
-						</Tooltip>
+							>
+								<Compass size={18} />
+							</Button>
+						</TooltipSimple>
 					)}
 					{selectedView === VIEW_TYPES.TRACES && (
-						<Tooltip title="Go to Traces Explorer" placement="left">
+						<TooltipSimple title="Go to Traces Explorer" side="left" arrow>
 							<Button
-								icon={<Compass size={18} />}
-								className="compass-button"
+								variant="ghost"
+								size="icon"
+								color="secondary"
+								className={styles.compassButton}
 								onClick={handleExplorePagesRedirect}
-							/>
-						</Tooltip>
+							>
+								<Compass size={18} />
+							</Button>
+						</TooltipSimple>
 					)}
 				</div>
 			)}
@@ -358,6 +403,7 @@ export default function K8sBaseDetailsContent<T>({
 					getEntityQueryPayload={getEntityQueryPayload}
 					category={category}
 					queryKey={`${queryKeyPrefix}Metrics`}
+					view={VIEW_TYPES.METRICS}
 				/>
 			)}
 			{effectiveView === VIEW_TYPES.LOGS && (

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

@@ -1,14 +1,19 @@
-import { useCallback, useEffect, useMemo } from 'react';
+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,
 	useCalculatedPageSize,
 	useHiddenColumnIds,
 	useTableParams,
 } from 'components/TanStackTableView';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraColumnSortedEvent,
+	logInfraTimeRangeCustomizedEvent,
+} from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
@@ -27,11 +32,16 @@ import {
 	useInfraMonitoringSelectedItemParams,
 	useInfraMonitoringStatusFilter,
 } from '../hooks';
-import { useInfraMonitoringLineClamp } from '../components';
+import {
+	useInfraMonitoringFontSize,
+	useInfraMonitoringLineClamp,
+} from './useInfraMonitoringTablePreferencesStore';
 import { K8sEmptyState } from './K8sEmptyState';
 import { K8sExpandedRow } from './K8sExpandedRow';
+import K8sOptionsSidePanel from './K8sOptionsSidePanel';
 import K8sHeader from './K8sHeader';
 import { K8sPaginationWarning } from './K8sPaginationWarning';
+import K8sTableToolbar from './K8sTableToolbar';
 import { K8sBaseFilters } from './types';
 import { getGroupedByMeta } from './utils';
 import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout';
@@ -104,6 +114,7 @@ export function K8sBaseList<
 	const { currentQuery } = useQueryBuilder();
 	const expression = currentQuery.builder.queryData[0]?.filter?.expression || '';
 	const lineClamp = useInfraMonitoringLineClamp();
+	const fontSize = useInfraMonitoringFontSize();
 	const [groupBy] = useInfraMonitoringGroupBy();
 	const [orderBy] = useInfraMonitoringOrderBy();
 	const [statusFilter] = useInfraMonitoringStatusFilter();
@@ -113,6 +124,7 @@ export function K8sBaseList<
 
 	const columnStorageKey = `k8s-${entity}-columns`;
 	const hiddenColumnIds = useHiddenColumnIds(columnStorageKey);
+	const [isOptionsDrawerOpen, setIsOptionsDrawerOpen] = useState(false);
 
 	const { containerRef, calculatedPageSize } = useCalculatedPageSize({
 		rowHeight: 42,
@@ -217,6 +229,14 @@ export function K8sBaseList<
 		void queryClient.cancelQueries({ queryKey });
 	}, [queryClient, queryKey]);
 
+	const handleOpenOptionsDrawer = useCallback((): void => {
+		setIsOptionsDrawerOpen(true);
+	}, []);
+
+	const handleCloseOptionsDrawer = useCallback((): void => {
+		setIsOptionsDrawerOpen(false);
+	}, []);
+
 	const pageData = data?.data ?? [];
 	const totalCount = data?.total || 0;
 	const hasFilters = !!expression?.trim();
@@ -235,6 +255,14 @@ export function K8sBaseList<
 		});
 	}, [eventCategory, totalCount]);
 
+	const prevSelectedTimeRef = useRef(selectedTime);
+	useEffect(() => {
+		if (prevSelectedTimeRef.current !== selectedTime) {
+			logInfraTimeRangeCustomizedEvent(entity, selectedTime);
+			prevSelectedTimeRef.current = selectedTime;
+		}
+	}, [selectedTime, entity]);
+
 	const handleRowClick = useCallback(
 		(record: T, itemKey: TItemKey): void => {
 			if (groupBy.length === 0) {
@@ -346,6 +374,7 @@ export function K8sBaseList<
 				extraQueryKeyParts={extraQueryKeyParts}
 				getRowKey={getRowKey}
 				getItemKey={getItemKey}
+				detailsQueryKeyPrefix={detailsQueryKeyPrefix}
 			/>
 		),
 		[
@@ -355,6 +384,7 @@ export function K8sBaseList<
 			getItemKey,
 			expandedRowColumns,
 			extraQueryKeyParts,
+			detailsQueryKeyPrefix,
 		],
 	);
 
@@ -363,6 +393,15 @@ export function K8sBaseList<
 		[isGroupedByAttribute],
 	);
 
+	const handleSort = useCallback(
+		(sort: SortState | null): void => {
+			if (sort) {
+				logInfraColumnSortedEvent(entity, sort.columnName, sort.order, 'list');
+			}
+		},
+		[entity],
+	);
+
 	const showTableLoadingState = isLoading;
 
 	const emptyTableMessage: React.ReactNode = renderEmptyState?.({
@@ -392,17 +431,21 @@ export function K8sBaseList<
 		<>
 			<K8sHeader
 				controlListPrefix={controlListPrefix}
-				leftFilters={leftFilters}
 				entity={entity}
 				showAutoRefresh={!selectedItem}
-				columns={tableColumns}
-				columnStorageKey={columnStorageKey}
 				isFetching={isFetching}
 				cancelQuery={cancelQuery}
 			/>
 			<div ref={containerRef} className={styles.tableContainer}>
 				<K8sInstrumentationChecksCallout entity={entity} />
 
+				<K8sTableToolbar
+					entity={entity}
+					eventCategory={eventCategory}
+					leftFilters={leftFilters}
+					onOpenOptionsDrawer={handleOpenOptionsDrawer}
+				/>
+
 				{isError && (
 					<Typography>
 						{data?.error?.toString() || 'Something went wrong'}
@@ -423,6 +466,7 @@ export function K8sBaseList<
 						getGroupKey={getGroupKeyFn}
 						onRowClick={handleRowClick}
 						onRowClickNewTab={handleRowClickNewTab}
+						onSort={handleSort}
 						renderExpandedRow={isGroupedByAttribute ? renderExpandedRow : undefined}
 						getRowCanExpand={isGroupedByAttribute ? getRowCanExpand : undefined}
 						className={cx(styles.k8SListTable)}
@@ -440,11 +484,21 @@ export function K8sBaseList<
 							onLimitChange: setLimit,
 						}}
 						plainTextCellLineClamp={lineClamp}
+						cellTypographySize={fontSize}
 						prefixPaginationContent={paginationWarningContent}
 						paginationClassname={styles.paginationContainer}
+						resetScrollKey={entity}
 					/>
 				)}
 			</div>
+
+			<K8sOptionsSidePanel
+				open={isOptionsDrawerOpen}
+				columns={tableColumns}
+				storageKey={columnStorageKey}
+				entity={entity}
+				onClose={handleCloseOptionsDrawer}
+			/>
 		</>
 	);
 }

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { Querybuildertypesv5QueryWarnDataDTO } from 'api/generated/services/sigNoz.schemas';
 import { Button } from '@signozhq/ui/button';
@@ -21,6 +21,7 @@ import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 
+import { logInfraColumnSortedEvent } from 'constants/events';
 import { InfraMonitoringEntity } from '../constants';
 import {
 	SelectedItemParams,
@@ -30,6 +31,8 @@ import {
 	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
 import { K8sBaseFilters } from './types';
+import { useLogEventForColumnCustomized } from './useLogEventForColumnCustomized';
+import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferencesStore';
 
 import styles from './K8sExpandedRow.module.scss';
 import { buildExpressionFromGroupMeta } from './utils';
@@ -62,9 +65,14 @@ export type K8sExpandedRowProps<T, TItemKey = string> = {
 	getRowKey?: (record: T) => string;
 	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
 	getItemKey?: (record: T) => TItemKey;
+	/** Query key prefix for pre-caching detail data on row click */
+	detailsQueryKeyPrefix?: string;
 };
 
-export function K8sExpandedRow<T, TItemKey = string>({
+export function K8sExpandedRow<
+	T,
+	TItemKey extends string | SelectedItemParams = string,
+>({
 	rowKey,
 	groupMeta,
 	entity,
@@ -73,7 +81,9 @@ export function K8sExpandedRow<T, TItemKey = string>({
 	extraQueryKeyParts = [],
 	getRowKey,
 	getItemKey,
+	detailsQueryKeyPrefix,
 }: K8sExpandedRowProps<T, TItemKey>): JSX.Element {
+	const fontSize = useInfraMonitoringFontSize();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const { currentQuery } = useQueryBuilder();
@@ -84,6 +94,7 @@ export function K8sExpandedRow<T, TItemKey = string>({
 	const { safeNavigate } = useSafeNavigate();
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
+	const queryClient = useQueryClient();
 
 	const orderByParamKey = useMemo(
 		() => `orderBy_${rowKey.replace(/[^a-zA-Z0-9]/g, '_')}`,
@@ -105,6 +116,13 @@ export function K8sExpandedRow<T, TItemKey = string>({
 
 	const storageKey = `k8s-${entity}-columns-expanded`;
 
+	useLogEventForColumnCustomized({
+		entity,
+		source: 'expanded',
+		storageKey,
+		columns: tableColumns,
+	});
+
 	const expressionForRecord = useMemo(
 		() => buildExpressionFromGroupMeta(parentExpression || '', groupMeta),
 		[parentExpression, groupMeta],
@@ -177,18 +195,45 @@ export function K8sExpandedRow<T, TItemKey = string>({
 	const expandedData = data?.data ?? [];
 
 	const handleRowClick = useCallback(
-		(_row: T, itemKey: TItemKey): void => {
-			if (typeof itemKey === 'object' && itemKey !== null) {
-				setSelectedItemParams(itemKey as unknown as SelectedItemParams);
-			} else {
-				setSelectedItemParams({
-					selectedItem: itemKey as string,
-					clusterName: null,
-					namespaceName: null,
-				});
+		(row: T, itemKey: TItemKey): void => {
+			const params: SelectedItemParams =
+				typeof itemKey === 'object' && itemKey !== null
+					? itemKey
+					: {
+							selectedItem: itemKey,
+							clusterName: null,
+							namespaceName: null,
+						};
+
+			if (detailsQueryKeyPrefix) {
+				const detailQueryKey = getAutoRefreshQueryKey(
+					selectedTime,
+					`${detailsQueryKeyPrefix}EntityDetails`,
+					params.selectedItem,
+					params.clusterName,
+					params.namespaceName,
+				);
+				queryClient.setQueryData(detailQueryKey, { data: row });
+			}
+
+			setSelectedItemParams(params);
+		},
+		[
+			setSelectedItemParams,
+			detailsQueryKeyPrefix,
+			getAutoRefreshQueryKey,
+			selectedTime,
+			queryClient,
+		],
+	);
+
+	const handleSort = useCallback(
+		(sort: SortState | null): void => {
+			if (sort) {
+				logInfraColumnSortedEvent(entity, sort.columnName, sort.order, 'expanded');
 			}
 		},
-		[setSelectedItemParams],
+		[entity],
 	);
 
 	const handleViewAllClick = (): void => {
@@ -257,6 +302,7 @@ export function K8sExpandedRow<T, TItemKey = string>({
 						getRowKey={getRowKey}
 						getItemKey={getItemKey}
 						onRowClick={handleRowClick}
+						onSort={handleSort}
 						enableQueryParams={{
 							orderBy: orderByParamKey,
 						}}
@@ -264,7 +310,7 @@ export function K8sExpandedRow<T, TItemKey = string>({
 							className: styles.expandedTable,
 						}}
 						disableVirtualScroll
-						cellTypographySize="medium"
+						cellTypographySize={fontSize}
 					/>
 				</TanStackTableStateProvider>
 				{!isLoading && expandedData.length > 0 && (

frontend/src/container/InfraMonitoringK8sV2/Base/K8sFiltersSidePanel.module.scss

@@ -1,62 +0,0 @@
-.drawer {
-	--dialog-description-padding: 0px 0px var(--spacing-8) 0px;
-}
-
-.columnItem {
-	display: flex;
-	align-items: center;
-}
-
-.columnsTitle {
-	color: var(--l2-foreground);
-	font-size: var(--periscope-font-size-small, 11px);
-	font-weight: var(--periscope-font-weight-medium, 500);
-	text-transform: uppercase;
-
-	padding: var(--spacing-4) var(--spacing-8);
-	border-bottom: 1px solid var(--l2-border);
-
-	&:not(:first-of-type) {
-		border-top: 1px solid var(--l2-border);
-	}
-}
-
-.columnsList {
-	display: flex;
-	flex-direction: column;
-
-	[data-slot='icon'] {
-		display: none;
-	}
-
-	[data-slot='entity-group-header'] {
-		padding-left: 0;
-	}
-
-	[data-slot='column-header'] {
-		display: flex;
-		width: auto;
-
-		span {
-			padding: 0;
-			text-align: left;
-		}
-
-		br {
-			display: none;
-		}
-	}
-}
-
-.columnItem {
-	justify-content: flex-start !important;
-	width: 100%;
-
-	> span {
-		width: auto !important;
-	}
-}
-
-.horizontalDivider {
-	border-top: 1px solid var(--l1-border);
-}

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

@@ -1,143 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import {
-	hideColumn,
-	showColumn,
-	TableColumnDef,
-	useHiddenColumnIds,
-} from 'components/TanStackTableView';
-
-import styles from './K8sFiltersSidePanel.module.scss';
-
-type ColumnPickerItem = {
-	id: string;
-	label: ReactNode;
-	canBeHidden: boolean;
-	visibilityBehavior:
-		| 'hidden-on-expand'
-		| 'hidden-on-collapse'
-		| 'always-visible';
-};
-
-function renderHeader(header: string | (() => ReactNode)): ReactNode {
-	return typeof header === 'function' ? header() : header;
-}
-
-function toColumnPickerItems<T>(
-	columns: TableColumnDef<T>[],
-): ColumnPickerItem[] {
-	return columns.map((col) => ({
-		id: col.id,
-		label: renderHeader(col.header),
-		canBeHidden: col.canBeHidden !== false && col.enableRemove !== false,
-		visibilityBehavior: col.visibilityBehavior ?? 'always-visible',
-	}));
-}
-
-function K8sFiltersSidePanel<TData>({
-	open,
-	onClose,
-	columns,
-	storageKey,
-}: {
-	open: boolean;
-	onClose: () => void;
-	columns: TableColumnDef<TData>[];
-	storageKey: string;
-}): JSX.Element {
-	const columnPickerItems = useMemo(
-		() => toColumnPickerItems(columns),
-		[columns],
-	);
-	const hiddenColumnIds = useHiddenColumnIds(storageKey);
-
-	const addedColumns = useMemo(
-		() =>
-			columnPickerItems.filter(
-				(column) =>
-					!hiddenColumnIds.includes(column.id) &&
-					column.visibilityBehavior !== 'hidden-on-collapse',
-			),
-		[columnPickerItems, hiddenColumnIds],
-	);
-
-	const hiddenColumns = useMemo(
-		() =>
-			columnPickerItems.filter((column) => hiddenColumnIds.includes(column.id)),
-		[columnPickerItems, hiddenColumnIds],
-	);
-
-	const handleRemoveColumn = (columnId: string): void => {
-		hideColumn(storageKey, columnId);
-	};
-
-	const handleAddColumn = (columnId: string): void => {
-		showColumn(storageKey, columnId);
-	};
-
-	const drawerContent = (
-		<>
-			<div className={styles.columnsTitle}>Added Columns (Click to remove)</div>
-
-			<div className={styles.columnsList}>
-				{addedColumns.map((column) => (
-					<div className={styles.columnItem} key={column.id}>
-						<Button
-							variant="ghost"
-							color="none"
-							className={styles.columnItem}
-							disabled={!column.canBeHidden}
-							data-testid={`remove-column-${column.id}`}
-							onClick={(): void => handleRemoveColumn(column.id)}
-						>
-							{column.label}
-						</Button>
-					</div>
-				))}
-			</div>
-
-			<div className={styles.horizontalDivider} />
-
-			<div className={styles.columnsTitle}>Other Columns (Click to add)</div>
-
-			<div className={styles.columnsList}>
-				{hiddenColumns.map((column) => (
-					<div className={styles.columnItem} key={column.id}>
-						<Button
-							variant="ghost"
-							color="none"
-							className={styles.columnItem}
-							data-can-be-added="true"
-							data-testid={`add-column-${column.id}`}
-							onClick={(): void => handleAddColumn(column.id)}
-							tabIndex={0}
-						>
-							{column.label}
-						</Button>
-					</div>
-				))}
-			</div>
-		</>
-	);
-
-	return (
-		<DrawerWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title="Columns"
-			direction="right"
-			showCloseButton
-			showOverlay={false}
-			className={styles.drawer}
-		>
-			{drawerContent}
-		</DrawerWrapper>
-	);
-}
-
-export default K8sFiltersSidePanel;

frontend/src/container/InfraMonitoringK8sV2/Base/K8sHeader.module.scss

@@ -5,25 +5,10 @@
 	align-items: stretch;
 	gap: var(--spacing-4);
 	width: 100%;
-
-	:global(.ant-select-selector) {
-		border-radius: 2px;
-		border: 1px solid var(--l2-border) !important;
-		background-color: var(--l2-background) !important;
-
-		input {
-			font-size: 12px;
-		}
-
-		:global([data-slot='badge'] .ant-typography) {
-			font-size: 12px;
-		}
-	}
 }
 
 .k8SListControlsRow {
 	display: flex;
-	flex-wrap: wrap;
 	gap: var(--spacing-4);
 	width: 100%;
 	align-items: center;
@@ -34,27 +19,6 @@
 	width: 100%;
 }
 
-.k8SFiltersGroupByRow {
-	display: flex;
-	flex: 1 1 auto;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--spacing-4);
-	min-width: 0;
-
-	@media (max-width: 1600px) {
-		flex: 1 1 100%;
-		order: 9;
-	}
-}
-
-.k8SAttributeSearchContainer {
-	flex: 1 1 240px;
-	max-width: 400px;
-	display: flex;
-	align-items: center;
-}
-
 .k8SRunButton {
 	flex: 0 0 auto;
 }
@@ -64,17 +28,12 @@
 }
 
 .k8SDateTimeSelection {
-	flex: 0 0 auto;
+	margin-left: auto;
 	display: flex;
 	justify-content: flex-end;
 
 	--date-time-selector-border-color: var(--l2-border);
 
-	@media (max-width: 1200px) {
-		flex: 1 1 100%;
-		order: 10;
-	}
-
 	:global(.timeSelection-input) {
 		height: 32px;
 	}
@@ -95,42 +54,3 @@
 		}
 	}
 }
-
-.groupByLabel {
-	min-width: max-content;
-	font-size: var(--periscope-font-size-base, 13px);
-	font-weight: var(--periscope-font-weight-regular, 400);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-
-	border-radius: 2px 0px 0px 2px;
-	border: 1px solid var(--l2-border);
-	border-right: none;
-	border-top-right-radius: 0px;
-	border-bottom-right-radius: 0px;
-
-	display: flex;
-	height: 32px;
-	padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
-	justify-content: center;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.groupBySelect {
-	width: 100%;
-
-	:global(.ant-select-selector) {
-		border-left: none;
-		border-top-left-radius: 0px;
-		border-bottom-left-radius: 0px;
-	}
-}
-
-.k8SListControlsRight {
-	min-width: 240px;
-
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}

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

@@ -1,29 +1,19 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui/button';
-import { Select } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { TableColumnDef } from 'components/TanStackTableView';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraFilterCustomizedEvent,
+} from 'constants/events';
 import { QueryParams } from 'constants/query';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { SlidersHorizontal } from '@signozhq/icons';
 import { v4 as uuid } from 'uuid';
-import {
-	useGlobalTimeQueryInvalidate,
-	useGlobalTimeStore,
-} from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import { useGlobalTimeQueryInvalidate } from 'store/globalTime';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -31,37 +21,25 @@ import {
 	InfraMonitoringEntity,
 	METRIC_NAMESPACE_BY_ENTITY,
 } from '../constants';
-import {
-	useInfraMonitoringGroupBy,
-	useInfraMonitoringPageListing,
-} from '../hooks';
-import K8sFiltersSidePanel from './K8sFiltersSidePanel';
+import { useInfraMonitoringPageListing } from '../hooks';
 
 import styles from './K8sHeader.module.scss';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 
-interface K8sHeaderProps<TData> {
+interface K8sHeaderProps {
 	controlListPrefix?: React.ReactNode;
-	leftFilters?: React.ReactNode;
 	entity: InfraMonitoringEntity;
 	showAutoRefresh: boolean;
-	columns: TableColumnDef<TData>[];
-	columnStorageKey: string;
 	isFetching?: boolean;
 	cancelQuery: () => void;
 }
 
-function K8sHeader<TData>({
+function K8sHeader({
 	controlListPrefix,
-	leftFilters,
 	entity,
 	showAutoRefresh,
-	columns,
-	columnStorageKey,
 	isFetching = false,
 	cancelQuery,
-}: K8sHeaderProps<TData>): JSX.Element {
-	const [isFiltersSidePanelOpen, setIsFiltersSidePanelOpen] = useState(false);
+}: K8sHeaderProps): JSX.Element {
 	// null = user never touched the search box; fall back to the current
 	// query expression on Run so an untouched search doesn't wipe filters
 	const stagedExpressionRef = useRef<string | null>(null);
@@ -121,6 +99,8 @@ function K8sHeader<TData>({
 					page: InfraMonitoringEvents.ListPage,
 					category: entity,
 				});
+
+				logInfraFilterCustomizedEvent(entity, 'search', finalExpression);
 			}
 		},
 		[
@@ -145,101 +125,11 @@ function K8sHeader<TData>({
 		cancelQuery();
 	}, [cancelQuery]);
 
-	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const { minTime, maxTime } = getMinMaxTime();
-	const startUnixMilli = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
-	const endUnixMilli = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
-
-	const { data: groupByFiltersData, isLoading: isLoadingGroupByFilters } =
-		useGetFieldsKeys(
-			{
-				signal: TelemetrytypesSignalDTO.metrics,
-				metricNamespace: METRIC_NAMESPACE_BY_ENTITY[entity],
-				limit: 100,
-				startUnixMilli,
-				endUnixMilli,
-				fieldContext: TelemetrytypesFieldContextDTO.resource,
-				// the search text is intentionally not included
-				// searchText: expression,
-			},
-			{
-				query: {
-					queryKey: ['getFieldsKeys', entity, startUnixMilli, endUnixMilli],
-				},
-			},
-		);
-
-	const flatFieldKeys = useMemo(() => {
-		const keys = groupByFiltersData?.data?.keys;
-		if (!keys) {
-			return [];
-		}
-
-		const allKeys = Object.values(keys).flat();
-		const seen = new Set<string>();
-
-		return allKeys.filter((field) => {
-			if (seen.has(field.name)) {
-				return false;
-			}
-			seen.add(field.name);
-			return true;
-		});
-	}, [groupByFiltersData]);
-
-	const groupByOptions = useMemo(
-		() =>
-			flatFieldKeys.map((field) => ({
-				value: field.name,
-				label: field.name,
-			})),
-		[flatFieldKeys],
-	);
-
-	const [groupBy, setGroupBy] = useInfraMonitoringGroupBy();
-
-	const handleGroupByChange = useCallback(
-		(value: string[]) => {
-			void setCurrentPage(1);
-			void setGroupBy(value);
-
-			void logEvent(InfraMonitoringEvents.GroupByChanged, {
-				entity: InfraMonitoringEvents.K8sEntity,
-				page: InfraMonitoringEvents.ListPage,
-				category: InfraMonitoringEvents.Pod,
-			});
-		},
-		[setCurrentPage, setGroupBy],
-	);
-
-	const onClickOutside = useCallback(() => {
-		setIsFiltersSidePanelOpen(false);
-	}, []);
-
 	return (
 		<div className={styles.k8SListControls}>
 			<div className={styles.k8SListControlsRow}>
 				{controlListPrefix}
 
-				<div className={styles.k8SFiltersGroupByRow}>
-					{leftFilters}
-
-					<div className={styles.k8SAttributeSearchContainer}>
-						<div className={styles.groupByLabel}>Group by</div>
-						<Select
-							className={styles.groupBySelect}
-							loading={isLoadingGroupByFilters}
-							mode="multiple"
-							value={groupBy}
-							allowClear
-							maxTagCount="responsive"
-							placeholder="Search for attribute"
-							options={groupByOptions}
-							onChange={handleGroupByChange}
-						/>
-					</div>
-				</div>
-
 				<div className={styles.k8SDateTimeSelection}>
 					<DateTimeSelectionV2
 						showAutoRefresh={showAutoRefresh}
@@ -255,20 +145,6 @@ function K8sHeader<TData>({
 					handleCancelQuery={handleCancelQuery}
 					className={styles.k8SRunButton}
 				/>
-
-				<TooltipSimple title="Click to add more columns to this table">
-					<Button
-						type="button"
-						variant="outlined"
-						size="icon"
-						color="secondary"
-						data-testid="k8s-list-filters-button"
-						onClick={(): void => setIsFiltersSidePanelOpen(true)}
-						className={styles.k8SFiltersButton}
-					>
-						<SlidersHorizontal size={14} />
-					</Button>
-				</TooltipSimple>
 			</div>
 
 			<div className={styles.k8SQbSearchContainer}>
@@ -283,13 +159,6 @@ function K8sHeader<TData>({
 					metricNamespace={METRIC_NAMESPACE_BY_ENTITY[entity]}
 				/>
 			</div>
-
-			<K8sFiltersSidePanel
-				open={isFiltersSidePanelOpen}
-				columns={columns}
-				storageKey={columnStorageKey}
-				onClose={onClickOutside}
-			/>
 		</div>
 	);
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sOptionsSidePanel.module.scss

@@ -0,0 +1,105 @@
+.drawer {
+	// for some reason, the scrollbar is overriding this
+	// for now, I will keep forcing but needs to investigate a global level
+	// why all drawers are being override with l1-background
+	background-color: var(--l2-background) !important;
+	border-color: var(--l2-border) !important;
+	--dialog-description-padding: 0px 0px var(--spacing-8) 0px;
+
+	[data-slot='drawer-description'] {
+		overflow-y: auto;
+	}
+}
+
+.sectionTitle {
+	padding: var(--spacing-4) var(--spacing-8);
+	border-bottom: 1px solid var(--l2-border);
+
+	&:not(:first-of-type) {
+		border-top: 1px solid var(--l2-border);
+	}
+}
+
+.sectionTitleText {
+	text-transform: uppercase;
+}
+
+.fontSizeContainer {
+	display: flex;
+	flex-direction: column;
+	padding: var(--spacing-4) 0;
+}
+
+.fontSizeOption {
+	width: 100%;
+	--button-display: flex;
+	--button-justify-content: space-between;
+	--button-align-items: center;
+	--button-padding: var(--spacing-4) var(--spacing-8);
+}
+
+.fontSizeLabel {
+	text-transform: capitalize;
+}
+
+.checkIcon {
+	color: var(--accent-foreground);
+}
+
+.lineClampContainer {
+	padding: 12px;
+
+	--input-prefix-padding: var(--spacing-3);
+	--input-suffix-padding: var(--spacing-3);
+}
+
+.columnsList {
+	display: flex;
+	flex-direction: column;
+
+	[data-slot='icon'] {
+		display: none;
+	}
+
+	[data-slot='entity-group-header'] {
+		padding-left: 0;
+	}
+
+	[data-slot='column-header'] {
+		display: flex;
+		width: auto;
+
+		span {
+			padding: 0;
+			text-align: left;
+		}
+
+		br {
+			display: none;
+		}
+	}
+}
+
+.columnItem {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-2) var(--spacing-8);
+
+	> span {
+		width: auto !important;
+	}
+
+	&:first-child {
+		padding-top: var(--spacing-8);
+	}
+}
+
+.columnLabel {
+	flex: 1;
+	text-align: left;
+}
+
+.horizontalDivider {
+	border-top: 1px solid var(--l1-border);
+}

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

@@ -0,0 +1,256 @@
+import { ChangeEvent, ReactNode, useCallback, useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { Switch } from '@signozhq/ui/switch';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Check, Minus, Plus } from '@signozhq/icons';
+import {
+	hideColumn,
+	showColumn,
+	TableColumnDef,
+	useColumnOrder,
+	useHiddenColumnIds,
+} from 'components/TanStackTableView';
+import { InfraMonitoringEntity } from '../constants';
+
+import {
+	FontSize,
+	useInfraMonitoringTablePreferencesStore,
+} from './useInfraMonitoringTablePreferencesStore';
+import { useLogEventForColumnCustomized } from './useLogEventForColumnCustomized';
+import { sortByColumnOrder } from './utils';
+
+import styles from './K8sOptionsSidePanel.module.scss';
+import { Typography } from '@signozhq/ui/typography';
+
+type ColumnPickerItem = {
+	id: string;
+	label: ReactNode;
+	canBeHidden: boolean;
+	visibilityBehavior:
+		| 'hidden-on-expand'
+		| 'hidden-on-collapse'
+		| 'always-visible';
+};
+
+function renderHeader(header: string | (() => ReactNode)): ReactNode {
+	return typeof header === 'function' ? header() : header;
+}
+
+function toColumnPickerItems<T>(
+	columns: TableColumnDef<T>[],
+): ColumnPickerItem[] {
+	return columns.map((col) => ({
+		id: col.id,
+		label: renderHeader(col.header),
+		canBeHidden: col.canBeHidden !== false && col.enableRemove !== false,
+		visibilityBehavior: col.visibilityBehavior ?? 'always-visible',
+	}));
+}
+
+const FONT_SIZE_OPTIONS: { value: FontSize; label: string }[] = [
+	{ value: 'small', label: 'Small' },
+	{ value: 'medium', label: 'Medium' },
+	{ value: 'large', label: 'Large' },
+];
+
+function K8sOptionsSidePanel<TData>({
+	open,
+	onClose,
+	columns,
+	storageKey,
+	entity,
+}: {
+	open: boolean;
+	onClose: () => void;
+	columns: TableColumnDef<TData>[];
+	storageKey: string;
+	entity: InfraMonitoringEntity;
+}): JSX.Element {
+	const columnPickerItems = useMemo(
+		() => toColumnPickerItems(columns),
+		[columns],
+	);
+	const hiddenColumnIds = useHiddenColumnIds(storageKey);
+	const columnOrder = useColumnOrder(storageKey);
+
+	const lineClamp = useInfraMonitoringTablePreferencesStore((s) => s.lineClamp);
+	const fontSize = useInfraMonitoringTablePreferencesStore((s) => s.fontSize);
+	const increaseLineClamp = useInfraMonitoringTablePreferencesStore(
+		(s) => s.increaseLineClamp,
+	);
+	const decreaseLineClamp = useInfraMonitoringTablePreferencesStore(
+		(s) => s.decreaseLineClamp,
+	);
+	const setLineClamp = useInfraMonitoringTablePreferencesStore(
+		(s) => s.setLineClamp,
+	);
+	const setFontSize = useInfraMonitoringTablePreferencesStore(
+		(s) => s.setFontSize,
+	);
+
+	const visibleColumnItems = useMemo(
+		() =>
+			columnPickerItems.filter(
+				(column) => column.visibilityBehavior !== 'hidden-on-collapse',
+			),
+		[columnPickerItems],
+	);
+
+	const orderedVisibleColumnItems = useMemo(
+		() => sortByColumnOrder(visibleColumnItems, (col) => col.id, columnOrder),
+		[visibleColumnItems, columnOrder],
+	);
+
+	useLogEventForColumnCustomized({
+		entity,
+		source: 'list',
+		storageKey,
+		columns,
+	});
+
+	const handleToggleColumn = (columnId: string, checked: boolean): void => {
+		if (checked) {
+			showColumn(storageKey, columnId);
+		} else {
+			hideColumn(storageKey, columnId);
+		}
+	};
+
+	const handleLineClampChange = useCallback(
+		(value: ChangeEvent<HTMLInputElement>): void => {
+			const valueAsNumber = value.target.valueAsNumber;
+
+			if (value && Number.isInteger(valueAsNumber)) {
+				setLineClamp(valueAsNumber);
+			}
+		},
+		[setLineClamp],
+	);
+
+	const drawerContent = (
+		<>
+			<div className={styles.sectionTitle}>
+				<Typography.Text size="sm" className={styles.sectionTitleText}>
+					Font Size
+				</Typography.Text>
+			</div>
+			<div className={styles.fontSizeContainer}>
+				{FONT_SIZE_OPTIONS.map((option) => (
+					<Button
+						key={option.value}
+						variant="ghost"
+						color="none"
+						className={styles.fontSizeOption}
+						data-testid={`font-size-${option.value}`}
+						onClick={(): void => setFontSize(option.value)}
+					>
+						{option.label}
+						{fontSize === option.value && (
+							<Check size={14} className={styles.checkIcon} />
+						)}
+					</Button>
+				))}
+			</div>
+
+			<div className={styles.horizontalDivider} />
+
+			<div className={styles.sectionTitle}>
+				<Typography.Text size="sm" className={styles.sectionTitleText}>
+					Max lines per row
+				</Typography.Text>
+			</div>
+			<div className={styles.lineClampContainer}>
+				<Input
+					min={1}
+					max={10}
+					value={lineClamp}
+					onChange={handleLineClampChange}
+					data-testid="line-clamp-input"
+					type="number"
+					prefix={
+						<Button
+							variant="solid"
+							color="primary"
+							size="sm"
+							className={styles.lineClampButton}
+							data-testid="line-clamp-decrease"
+							onClick={decreaseLineClamp}
+							prefix={<Minus />}
+							disabled={lineClamp <= 1}
+						/>
+					}
+					suffix={
+						<Button
+							variant="solid"
+							color="primary"
+							size="sm"
+							className={styles.lineClampButton}
+							data-testid="line-clamp-increase"
+							onClick={increaseLineClamp}
+							prefix={<Plus />}
+							disabled={lineClamp >= 10}
+						/>
+					}
+				/>
+			</div>
+
+			<div className={styles.horizontalDivider} />
+
+			<div className={styles.sectionTitle}>
+				<Typography.Text size="sm" className={styles.sectionTitleText}>
+					Columns
+				</Typography.Text>
+			</div>
+			<div className={styles.columnsList}>
+				{orderedVisibleColumnItems.map((column) => {
+					const isVisible = !hiddenColumnIds.includes(column.id);
+					const switchElement = (
+						<Switch
+							value={isVisible}
+							disabled={!column.canBeHidden}
+							data-testid={`toggle-column-${column.id}`}
+							onChange={(checked): void => handleToggleColumn(column.id, checked)}
+						/>
+					);
+					return (
+						<div className={styles.columnItem} key={column.id}>
+							<Typography.Text size="sm" className={styles.columnLabel}>
+								{column.label}
+							</Typography.Text>
+							{column.canBeHidden ? (
+								switchElement
+							) : (
+								<TooltipSimple title="Required column cannot be hidden" arrow>
+									{switchElement}
+								</TooltipSimple>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</>
+	);
+
+	return (
+		<DrawerWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title="Options"
+			direction="right"
+			width="narrow"
+			showCloseButton
+			showOverlay={false}
+			className={styles.drawer}
+		>
+			{drawerContent}
+		</DrawerWrapper>
+	);
+}
+
+export default K8sOptionsSidePanel;

frontend/src/container/InfraMonitoringK8sV2/Base/K8sTableToolbar.module.scss

@@ -0,0 +1,65 @@
+.toolbar {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: 0px var(--spacing-4) var(--spacing-4) var(--spacing-4);
+	background: var(--l1-background);
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.groupByContainer {
+	display: flex;
+	align-items: center;
+	min-width: 300px;
+	max-width: 400px;
+
+	:global(.ant-select-selector) {
+		border-radius: 2px;
+		border: 1px solid var(--l2-border) !important;
+		background-color: var(--l2-background) !important;
+
+		input {
+			font-size: 12px;
+		}
+
+		:global([data-slot='badge'] .ant-typography) {
+			font-size: 12px;
+		}
+	}
+}
+
+.groupByLabel {
+	min-width: max-content;
+
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+
+	border: 1px solid var(--l2-border);
+	border-right: none;
+
+	display: flex;
+	height: 32px;
+	padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
+	justify-content: center;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.groupBySelect {
+	width: 100%;
+
+	:global(.ant-select-selector) {
+		border-left: none;
+		border-top-left-radius: 0px !important;
+		border-bottom-left-radius: 0px !important;
+	}
+}
+
+.spacer {
+	flex: 1;
+}
+
+.toolbarButton {
+	flex-shrink: 0;
+	--button-padding: 0px;
+}

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

@@ -0,0 +1,112 @@
+import { useCallback } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Select } from 'antd';
+import { Download, SlidersVertical } from '@signozhq/icons';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import {
+	InfraMonitoringEvents,
+	logInfraGroupByCustomizedEvent,
+} from 'constants/events';
+
+import { InfraMonitoringEntity } from '../constants';
+import {
+	useInfraMonitoringGroupBy,
+	useInfraMonitoringPageListing,
+} from '../hooks';
+import { useInfraMonitoringGroupByData } from './useInfraMonitoringGroupByData';
+
+import styles from './K8sTableToolbar.module.scss';
+
+interface K8sTableToolbarProps {
+	entity: InfraMonitoringEntity;
+	eventCategory: InfraMonitoringEvents;
+	leftFilters?: React.ReactNode;
+	onOpenOptionsDrawer: () => void;
+	onDownload?: () => void;
+}
+
+function K8sTableToolbar({
+	entity,
+	eventCategory,
+	leftFilters,
+	onOpenOptionsDrawer,
+	onDownload,
+}: K8sTableToolbarProps): JSX.Element {
+	const { groupByOptions, isLoading: isLoadingGroupByFilters } =
+		useInfraMonitoringGroupByData(entity);
+
+	const [groupBy, setGroupBy] = useInfraMonitoringGroupBy();
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
+
+	const handleGroupByChange = useCallback(
+		(value: string[]) => {
+			void setCurrentPage(1);
+			void setGroupBy(value);
+
+			void logEvent(InfraMonitoringEvents.GroupByChanged, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: eventCategory,
+			});
+
+			logInfraGroupByCustomizedEvent(entity, value);
+		},
+		[entity, eventCategory, setCurrentPage, setGroupBy],
+	);
+
+	return (
+		<div className={styles.toolbar}>
+			<div className={styles.groupByContainer}>
+				<div className={styles.groupByLabel}>Group by</div>
+				<Select
+					className={styles.groupBySelect}
+					loading={isLoadingGroupByFilters}
+					mode="multiple"
+					value={groupBy}
+					allowClear
+					maxTagCount="responsive"
+					placeholder="Search for attribute"
+					options={groupByOptions}
+					onChange={handleGroupByChange}
+				/>
+			</div>
+
+			<div className={styles.spacer} />
+
+			{leftFilters}
+
+			{onDownload && (
+				<TooltipSimple title="Download">
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						color="secondary"
+						data-testid="k8s-table-download-button"
+						onClick={onDownload}
+						className={styles.toolbarButton}
+					>
+						<Download size={14} />
+					</Button>
+				</TooltipSimple>
+			)}
+
+			<TooltipSimple title="Options">
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					data-testid="k8s-table-options-button"
+					onClick={onOpenOptionsDrawer}
+					className={styles.toolbarButton}
+				>
+					<SlidersVertical size={14} />
+				</Button>
+			</TooltipSimple>
+		</div>
+	);
+}
+
+export default K8sTableToolbar;

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

@@ -0,0 +1,187 @@
+/* eslint-disable no-restricted-syntax */
+import { act, renderHook } from '@testing-library/react';
+import { TableColumnDef, useColumnStore } from 'components/TanStackTableView';
+import { logInfraColumnCustomizedEvent } from 'constants/events';
+
+import { InfraMonitoringEntity } from '../../constants';
+import { useInfraMonitoringTablePreferencesStore } from '../useInfraMonitoringTablePreferencesStore';
+import { useLogEventForColumnCustomized } from '../useLogEventForColumnCustomized';
+
+jest.mock('constants/events', () => ({
+	logInfraColumnCustomizedEvent: jest.fn(),
+}));
+
+const mockLogEvent = logInfraColumnCustomizedEvent as jest.Mock;
+
+type TestRow = { id: string; name: string };
+
+const col = (id: string): TableColumnDef<TestRow> => ({
+	id,
+	header: id,
+	cell: (): null => null,
+});
+
+const columns = [col('a'), col('b'), col('c')];
+
+describe('useLogEventForColumnCustomized', () => {
+	beforeEach(() => {
+		useColumnStore.setState({ tables: {} });
+		useInfraMonitoringTablePreferencesStore.setState({
+			lineClamp: 1,
+			fontSize: 'medium',
+		});
+		localStorage.clear();
+		mockLogEvent.mockClear();
+	});
+
+	it('does not emit on mount', () => {
+		const storageKey = 'test-no-emit-on-mount';
+		act(() => {
+			useColumnStore.getState().initializeFromDefaults(storageKey, columns);
+		});
+
+		renderHook(() =>
+			useLogEventForColumnCustomized({
+				entity: InfraMonitoringEntity.PODS,
+				source: 'list',
+				storageKey,
+				columns,
+			}),
+		);
+
+		expect(mockLogEvent).not.toHaveBeenCalled();
+	});
+
+	it('emits when a column is hidden after mount', () => {
+		const storageKey = 'test-emit-on-hide';
+		act(() => {
+			useColumnStore.getState().initializeFromDefaults(storageKey, columns);
+		});
+
+		renderHook(() =>
+			useLogEventForColumnCustomized({
+				entity: InfraMonitoringEntity.PODS,
+				source: 'list',
+				storageKey,
+				columns,
+			}),
+		);
+
+		act(() => {
+			useColumnStore.getState().hideColumn(storageKey, 'b');
+		});
+
+		expect(mockLogEvent).toHaveBeenCalledTimes(1);
+		expect(mockLogEvent).toHaveBeenCalledWith(
+			InfraMonitoringEntity.PODS,
+			['a', 'c'],
+			'medium',
+			1,
+			'list',
+		);
+	});
+
+	it('emits when font size changes after mount', () => {
+		const storageKey = 'test-emit-on-font-size';
+		act(() => {
+			useColumnStore.getState().initializeFromDefaults(storageKey, columns);
+		});
+
+		renderHook(() =>
+			useLogEventForColumnCustomized({
+				entity: InfraMonitoringEntity.PODS,
+				source: 'list',
+				storageKey,
+				columns,
+			}),
+		);
+
+		act(() => {
+			useInfraMonitoringTablePreferencesStore.getState().setFontSize('small');
+		});
+
+		expect(mockLogEvent).toHaveBeenCalledTimes(1);
+	});
+
+	// Regression: K8sDynamicList keeps K8sBaseList (and the options side panel)
+	// mounted across category switches, so this hook survives a Pods -> Nodes
+	// switch with every input changed. The switch itself is not a customization
+	// and must not emit.
+	it('does not emit when the storage key changes (category switch)', () => {
+		const podsKey = 'test-switch-pods';
+		const nodesKey = 'test-switch-nodes';
+		const nodeColumns = [col('x'), col('y')];
+		act(() => {
+			useColumnStore.getState().initializeFromDefaults(podsKey, columns);
+			useColumnStore.getState().initializeFromDefaults(nodesKey, nodeColumns);
+		});
+
+		const { rerender } = renderHook(
+			(props) => useLogEventForColumnCustomized(props),
+			{
+				initialProps: {
+					entity: InfraMonitoringEntity.PODS,
+					source: 'list' as const,
+					storageKey: podsKey,
+					columns,
+				},
+			},
+		);
+
+		rerender({
+			entity: InfraMonitoringEntity.NODES,
+			source: 'list' as const,
+			storageKey: nodesKey,
+			columns: nodeColumns,
+		});
+
+		expect(mockLogEvent).not.toHaveBeenCalled();
+
+		// A real customization after the switch still emits, for the new entity
+		act(() => {
+			useColumnStore.getState().hideColumn(nodesKey, 'y');
+		});
+
+		expect(mockLogEvent).toHaveBeenCalledTimes(1);
+		expect(mockLogEvent).toHaveBeenCalledWith(
+			InfraMonitoringEntity.NODES,
+			['x'],
+			'medium',
+			1,
+			'list',
+		);
+	});
+
+	// Regression: every expanded group row mounts its own instance sharing the
+	// `k8s-<entity>-columns-expanded` storage key; one customization must not
+	// emit once per row.
+	it('emits once when multiple instances share a storage key', () => {
+		const storageKey = 'test-shared-key';
+		act(() => {
+			useColumnStore.getState().initializeFromDefaults(storageKey, columns);
+		});
+
+		const params = {
+			entity: InfraMonitoringEntity.PODS,
+			source: 'expanded' as const,
+			storageKey,
+			columns,
+		};
+		renderHook(() => useLogEventForColumnCustomized(params));
+		renderHook(() => useLogEventForColumnCustomized(params));
+		renderHook(() => useLogEventForColumnCustomized(params));
+
+		act(() => {
+			useColumnStore.getState().hideColumn(storageKey, 'a');
+		});
+
+		expect(mockLogEvent).toHaveBeenCalledTimes(1);
+
+		// A subsequent distinct customization emits again, exactly once
+		act(() => {
+			useColumnStore.getState().hideColumn(storageKey, 'b');
+		});
+
+		expect(mockLogEvent).toHaveBeenCalledTimes(2);
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -1,7 +1,9 @@
-import { Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { Compass } from '@signozhq/icons';
+import { TextNoData } from '../../../components/TextNoData';
+import { logInfraExplorerNavigatedEvent } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -13,6 +15,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	InfraMonitoringEntity,
 } from '../../../constants';
+import { getDrawerDurationMs } from '../../useDrawerLifecycleStore';
 import styles from './EntityCountsSection.module.scss';
 
 export interface EntityCountConfig<T> {
@@ -27,6 +30,8 @@ interface EntityCountsSectionProps<T> {
 	selectedItem: string;
 	filterExpression: string;
 	closeDrawer: () => void;
+	entityType: InfraMonitoringEntity;
+	activeTab: string;
 }
 
 export function EntityCountsSection<T>({
@@ -35,7 +40,21 @@ export function EntityCountsSection<T>({
 	selectedItem,
 	filterExpression,
 	closeDrawer,
+	entityType,
+	activeTab,
 }: EntityCountsSectionProps<T>): JSX.Element {
+	const handleCardNavigate = (cardLabel: string): void => {
+		logInfraExplorerNavigatedEvent({
+			entityType,
+			destination: 'k8s_list',
+			source: 'stats_card',
+			tab: activeTab,
+			sourceKey: cardLabel,
+			drawerDurationMsAtNavigation: getDrawerDurationMs(),
+		});
+		closeDrawer();
+	};
+
 	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
 		const defaultQuery = initialQueriesMap[DataSource.METRICS];
 
@@ -116,17 +135,26 @@ export function EntityCountsSection<T>({
 					>
 						{config.label}
 					</Typography.Text>
-					<Typography.Text className={styles.countValue} size="xl" weight="semibold">
-						{config.getValue(entity) || '-'}
-					</Typography.Text>
+					{config.getValue(entity) ? (
+						<Typography.Text
+							className={styles.countValue}
+							size="xl"
+							weight="semibold"
+						>
+							{config.getValue(entity)}
+						</Typography.Text>
+					) : (
+						<TextNoData type="typography" className={styles.countValue} />
+					)}
 					<Link
 						to={buildNavigationUrl(config.targetCategory)}
-						onClick={closeDrawer}
+						onClick={(): void => handleCardNavigate(config.label)}
 						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
 					>
-						<Tooltip
+						<TooltipSimple
 							title={`View ${config.label.toLowerCase()} of '${selectedItem}'`}
-							placement="top"
+							side="top"
+							arrow
 						>
 							<Button
 								size="icon"
@@ -135,7 +163,7 @@ export function EntityCountsSection<T>({
 								className={styles.navigateButton}
 								prefix={<Compass size={14} />}
 							/>
-						</Tooltip>
+						</TooltipSimple>
 					</Link>
 				</div>
 			))}

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

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+export interface IDrawerLifecycleStore {
+	openedAt: number | null;
+	markOpened: () => void;
+	markClosed: () => void;
+	getDrawerDurationMs: () => number | null;
+}
+
+export const useDrawerLifecycleStore = create<IDrawerLifecycleStore>()(
+	(set, get) => ({
+		openedAt: null,
+		markOpened: (): void => set({ openedAt: Date.now() }),
+		markClosed: (): void => set({ openedAt: null }),
+		getDrawerDurationMs: (): number | null => {
+			const { openedAt } = get();
+			return openedAt == null ? null : Date.now() - openedAt;
+		},
+	}),
+);
+
+export const getDrawerDurationMs = (): number | null =>
+	useDrawerLifecycleStore.getState().getDrawerDurationMs();

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

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { useGetFieldsKeys } from 'api/generated/services/fields';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+
+import {
+	InfraMonitoringEntity,
+	METRIC_NAMESPACE_BY_ENTITY,
+} from '../constants';
+
+export interface GroupByOption {
+	value: string;
+	label: string;
+}
+
+export interface UseInfraMonitoringGroupByDataReturn {
+	groupByOptions: GroupByOption[];
+	isLoading: boolean;
+}
+
+export function useInfraMonitoringGroupByData(
+	entity: InfraMonitoringEntity,
+): UseInfraMonitoringGroupByDataReturn {
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
+	const { minTime, maxTime } = getMinMaxTime();
+	const startUnixMilli = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
+	const endUnixMilli = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
+
+	const { data: groupByFiltersData, isLoading } = useGetFieldsKeys(
+		{
+			signal: TelemetrytypesSignalDTO.metrics,
+			metricNamespace: METRIC_NAMESPACE_BY_ENTITY[entity],
+			limit: 100,
+			startUnixMilli,
+			endUnixMilli,
+			fieldContext: TelemetrytypesFieldContextDTO.resource,
+		},
+		{
+			query: {
+				queryKey: ['getFieldsKeys', entity, startUnixMilli, endUnixMilli],
+			},
+		},
+	);
+
+	const groupByOptions = useMemo(() => {
+		const keys = groupByFiltersData?.data?.keys;
+		if (!keys) {
+			return [];
+		}
+
+		const allKeys = Object.values(keys).flat();
+		const seen = new Set<string>();
+
+		return allKeys
+			.filter((field) => {
+				if (seen.has(field.name)) {
+					return false;
+				}
+				seen.add(field.name);
+				return true;
+			})
+			.map((field) => ({
+				value: field.name,
+				label: field.name,
+			}));
+	}, [groupByFiltersData]);
+
+	return { groupByOptions, isLoading };
+}

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

@@ -0,0 +1,58 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { CellTypographySize } from 'components/TanStackTableView';
+
+export type FontSize = CellTypographySize;
+
+export interface IInfraMonitoringTablePreferencesStore {
+	lineClamp: number;
+	fontSize: FontSize;
+	increaseLineClamp: () => void;
+	decreaseLineClamp: () => void;
+	setLineClamp: (value: number) => void;
+	setFontSize: (value: FontSize) => void;
+}
+
+const MIN_LINE_CLAMP = 1;
+const MAX_LINE_CLAMP = 10;
+const DEFAULT_LINE_CLAMP = 1;
+const DEFAULT_FONT_SIZE: FontSize = 'medium';
+
+export const useInfraMonitoringTablePreferencesStore =
+	create<IInfraMonitoringTablePreferencesStore>()(
+		persist(
+			(set, get) => ({
+				lineClamp: DEFAULT_LINE_CLAMP,
+				fontSize: DEFAULT_FONT_SIZE,
+				increaseLineClamp: (): void => {
+					const current = get().lineClamp;
+					if (current < MAX_LINE_CLAMP) {
+						set({ lineClamp: current + 1 });
+					}
+				},
+				decreaseLineClamp: (): void => {
+					const current = get().lineClamp;
+					if (current > MIN_LINE_CLAMP) {
+						set({ lineClamp: current - 1 });
+					}
+				},
+				setLineClamp: (value: number): void => {
+					if (value >= MIN_LINE_CLAMP && value <= MAX_LINE_CLAMP) {
+						set({ lineClamp: value });
+					}
+				},
+				setFontSize: (value: FontSize): void => {
+					set({ fontSize: value });
+				},
+			}),
+			{
+				name: '@signoz/infra-monitoring-table-preferences',
+			},
+		),
+	);
+
+export const useInfraMonitoringLineClamp = (): number =>
+	useInfraMonitoringTablePreferencesStore((s) => s.lineClamp);
+
+export const useInfraMonitoringFontSize = (): FontSize =>
+	useInfraMonitoringTablePreferencesStore((s) => s.fontSize);

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

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useRef } from 'react';
+import {
+	TableColumnDef,
+	useColumnOrder,
+	useHiddenColumnIds,
+} from 'components/TanStackTableView';
+import { logInfraColumnCustomizedEvent } from 'constants/events';
+
+import { InfraMonitoringEntity } from '../constants';
+
+import {
+	useInfraMonitoringFontSize,
+	useInfraMonitoringLineClamp,
+} from './useInfraMonitoringTablePreferencesStore';
+import { sortByColumnOrder } from './utils';
+
+interface UseEmitColumnCustomizedParams<TData> {
+	entity: InfraMonitoringEntity;
+	source: 'list' | 'expanded';
+	storageKey: string;
+	columns: TableColumnDef<TData>[];
+}
+
+// Multiple instances of this hook can share a storageKey (every expanded group
+// row mounts one), so the last emitted payload is tracked per key to collapse
+// their simultaneous effect runs into a single event.
+const lastEmittedPayloadByKey = new Map<string, string>();
+
+export function useLogEventForColumnCustomized<TData>({
+	entity,
+	source,
+	storageKey,
+	columns,
+}: UseEmitColumnCustomizedParams<TData>): void {
+	const hiddenColumnIds = useHiddenColumnIds(storageKey);
+	const columnOrder = useColumnOrder(storageKey);
+	const fontSize = useInfraMonitoringFontSize();
+	const lineClamp = useInfraMonitoringLineClamp();
+
+	const hiddenBehavior =
+		source === 'expanded' ? 'hidden-on-expand' : 'hidden-on-collapse';
+
+	const orderedVisibleColumnIds = useMemo(() => {
+		const visibleColumns = columns.filter(
+			(col) =>
+				(col.visibilityBehavior ?? 'always-visible') !== hiddenBehavior &&
+				!hiddenColumnIds.includes(col.id),
+		);
+		return sortByColumnOrder(visibleColumns, (col) => col.id, columnOrder).map(
+			(col) => col.id,
+		);
+	}, [columns, hiddenColumnIds, columnOrder, hiddenBehavior]);
+
+	const isFirstRender = useRef(true);
+	const prevStorageKeyRef = useRef(storageKey);
+
+	// Re-arm the first-render skip when the table identity changes (the hook
+	// survives category switches because K8sDynamicList keeps K8sBaseList
+	// mounted), so the switch itself is not reported as a customization
+	if (prevStorageKeyRef.current !== storageKey) {
+		prevStorageKeyRef.current = storageKey;
+		isFirstRender.current = true;
+	}
+
+	useEffect(() => {
+		if (isFirstRender.current) {
+			isFirstRender.current = false;
+			return;
+		}
+		const dedupeKey = `${storageKey}:${source}`;
+		const payload = JSON.stringify([
+			entity,
+			orderedVisibleColumnIds,
+			fontSize,
+			lineClamp,
+		]);
+		if (lastEmittedPayloadByKey.get(dedupeKey) === payload) {
+			return;
+		}
+		lastEmittedPayloadByKey.set(dedupeKey, payload);
+		logInfraColumnCustomizedEvent(
+			entity,
+			orderedVisibleColumnIds,
+			fontSize,
+			lineClamp,
+			source,
+		);
+	}, [entity, source, storageKey, orderedVisibleColumnIds, fontSize, lineClamp]);
+}

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

@@ -9,6 +9,22 @@ import {
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 
+export function sortByColumnOrder<T>(
+	items: T[],
+	getId: (item: T) => string,
+	columnOrder: string[],
+): T[] {
+	if (columnOrder.length === 0) {
+		return items;
+	}
+	const orderIndex = new Map(columnOrder.map((id, index) => [id, index]));
+	return [...items].sort(
+		(a, b) =>
+			(orderIndex.get(getId(a)) ?? Number.MAX_SAFE_INTEGER) -
+			(orderIndex.get(getId(b)) ?? Number.MAX_SAFE_INTEGER),
+	);
+}
+
 export function getGroupedByMeta<
 	T extends { meta?: Record<string, string> | null },
 >(itemData: T, groupBy: string[]): Record<string, string> {

frontend/src/container/InfraMonitoringK8sV2/Clusters/table.config.tsx

@@ -10,8 +10,8 @@ import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
-	CellValueTooltip,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
@@ -75,10 +75,9 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const clusterName = value as string;
-			return <CellValueTooltip value={clusterName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'nodeCountsByReadiness',
@@ -95,7 +94,7 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		enableSort: false,
 		cell: ({ row, rowId }): React.ReactNode => {
 			if (!row.nodeCountsByReadiness) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 
 			return (
@@ -133,7 +132,7 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 			return (
 				<GroupedStatusCounts
@@ -147,17 +146,17 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		id: 'cpu',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/clusters#cpu-usage-cores">
-				CPU Usage
-				<br /> (cores)
+				CPU Usage (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.clusterCPU,
 		width: { min: 160 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = Number(value);
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpu}
 					entity={InfraMonitoringEntity.CLUSTERS}
 					attribute="CPU metric"
@@ -171,17 +170,17 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		id: 'cpu_allocatable',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/clusters#cpu-alloc-cores">
-				CPU Allocatable
-				<br /> (cores)
+				CPU Allocatable (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.clusterCPUAllocatable,
 		width: { min: 200 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuAllocatable = Number(value);
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpuAllocatable}
 					entity={InfraMonitoringEntity.CLUSTERS}
 					attribute="CPU allocatable metric"
@@ -195,17 +194,17 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/clusters#memory-usage-wss">
-				Memory Usage
-				<br /> (WSS)
+				Memory Usage (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.clusterMemory,
 		width: { min: 180 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memory}
 					entity={InfraMonitoringEntity.CLUSTERS}
 					attribute="memory metric"
@@ -219,17 +218,17 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		id: 'memory_allocatable',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/clusters#memory-allocatable">
-				Memory
-				<br /> Allocatable
+				Memory Allocatable
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.clusterMemoryAllocatable,
 		width: { min: 180 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryAllocatable = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memoryAllocatable}
 					entity={InfraMonitoringEntity.CLUSTERS}
 					attribute="memory allocatable metric"

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/table.config.tsx

@@ -9,9 +9,9 @@ import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
-	CellValueTooltip,
 	EntityProgressBar,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
@@ -85,10 +85,9 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const daemonsetName = value as string;
-			return <CellValueTooltip value={daemonsetName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'namespaceName',
@@ -102,10 +101,9 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 160 },
 		enableSort: false,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
-			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'pod_counts_by_status',
@@ -124,7 +122,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 			return (
 				<GroupedStatusCounts
@@ -177,8 +175,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		id: 'cpu_request',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-req-usage-">
-				CPU Request
-				<br /> Usage (%)
+				CPU Request Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.daemonSetCPURequest,
@@ -186,10 +183,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		enableSort: true,
 		enableResize: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuRequest = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpuRequest}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="CPU Request"
@@ -203,18 +201,18 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		id: 'cpu_limit',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-limit-usage-">
-				CPU Limit
-				<br /> Usage (%)
+				CPU Limit Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.daemonSetCPULimit,
 		width: { min: 160 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuLimit = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpuLimit}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="CPU Limit"
@@ -228,8 +226,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		id: 'cpu',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#cpu-usage-cores">
-				CPU Usage
-				<br /> (cores)
+				CPU Usage (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.daemonSetCPU,
@@ -237,10 +234,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		enableSort: true,
 		enableResize: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = Number(value);
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpu}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="CPU metric"
@@ -254,8 +252,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		id: 'memory_request',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-req-usage-">
-				Memory Request
-				<br /> Usage (%)
+				Memory Request Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.daemonSetMemoryRequest,
@@ -263,10 +260,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		enableSort: true,
 		enableResize: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryRequest = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memoryRequest}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="Memory Request"
@@ -280,18 +278,18 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		id: 'memory_limit',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-limit-usage-">
-				Memory Limit
-				<br /> Usage (%)
+				Memory Limit Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.daemonSetMemoryLimit,
 		width: { min: 190 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryLimit = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memoryLimit}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="Memory Limit"
@@ -305,18 +303,18 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#mem-usage-wss">
-				Memory Usage
-				<br /> (WSS)
+				Memory Usage (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.daemonSetMemory,
 		width: { min: 180 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memory}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="memory metric"
@@ -337,10 +335,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 140 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const readyNodes = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={readyNodes}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="ready node"
@@ -361,10 +360,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 140 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const currentNodes = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={currentNodes}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="current node"
@@ -385,10 +385,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 140 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const desiredNodes = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={desiredNodes}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="desired node"
@@ -409,10 +410,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		width: { min: 140 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const misscheduledNodes = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={misscheduledNodes}
 					entity={InfraMonitoringEntity.DAEMONSETS}
 					attribute="misscheduled node"

frontend/src/container/InfraMonitoringK8sV2/Deployments/table.config.tsx

@@ -9,9 +9,9 @@ import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
-	CellValueTooltip,
 	EntityProgressBar,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
@@ -86,10 +86,9 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			enableMove: false,
 			pin: 'left',
 			visibilityBehavior: 'hidden-on-expand',
-			cell: ({ value }): React.ReactNode => {
-				const deploymentName = value as string;
-				return <CellValueTooltip value={deploymentName} />;
-			},
+			cell: ({ value }): React.ReactNode => (
+				<TanStackTable.Text>{value}</TanStackTable.Text>
+			),
 		},
 		{
 			id: 'namespaceName',
@@ -121,7 +120,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			cell: ({ row, rowId }): React.ReactNode => {
 				const podCountsByStatus = row.podCountsByStatus;
 				if (!podCountsByStatus) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
+					return <TextNoData type="tanstack" />;
 				}
 				return (
 					<GroupedStatusCounts
@@ -164,8 +163,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			id: 'cpu_request',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-req-usage-">
-					CPU Request
-					<br /> Usage (%)
+					CPU Request Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.deploymentCPURequest,
@@ -173,10 +171,11 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			enableSort: true,
 			enableResize: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const cpuRequest = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={cpuRequest}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="CPU Request"
@@ -190,18 +189,18 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			id: 'cpu_limit',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-limit-usage-">
-					CPU Limit
-					<br /> Usage (%)
+					CPU Limit Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.deploymentCPULimit,
 			width: { min: 210 },
 			enableSort: true,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const cpuLimit = Number(value);
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={cpuLimit}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="CPU Limit"
@@ -215,18 +214,18 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			id: 'cpu',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#cpu-usage-cores">
-					CPU Usage
-					<br /> (cores)
+					CPU Usage (cores)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.deploymentCPU,
 			width: { min: 160 },
 			enableSort: true,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const cpu = Number(value);
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={cpu}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="CPU metric"
@@ -240,8 +239,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			id: 'memory_request',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#mem-req-usage-">
-					Memory Request
-					<br /> Usage (%)
+					Memory Request Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.deploymentMemoryRequest,
@@ -249,10 +247,11 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			enableSort: true,
 			enableResize: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const memoryRequest = Number(value);
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={memoryRequest}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="Memory Request"
@@ -266,18 +265,18 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			id: 'memory_limit',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#mem-limit-usage-">
-					Memory Limit
-					<br /> Usage (%)
+					Memory Limit Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.deploymentMemoryLimit,
 			width: { min: 210 },
 			enableSort: true,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const memoryLimit = Number(value);
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={memoryLimit}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="Memory Limit"
@@ -291,18 +290,18 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			id: 'memory',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#mem-usage-wss">
-					Memory Usage
-					<br /> (WSS)
+					Memory Usage (WSS)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.deploymentMemory,
 			width: { min: 180 },
 			enableSort: true,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const memory = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={memory}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="memory metric"
@@ -323,10 +322,11 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			width: { min: 120 },
 			enableSort: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const availablePods = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={availablePods}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="available pod"
@@ -347,10 +347,11 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			width: { min: 120 },
 			enableSort: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const desiredPods = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={desiredPods}
 						entity={InfraMonitoringEntity.DEPLOYMENTS}
 						attribute="desired pod"

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityDateTimeSelector/EntityDateTimeSelector.module.scss

@@ -0,0 +1,5 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}

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

@@ -3,7 +3,10 @@ import { Undo } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraDrawerTimeRangeCustomizedEvent,
+} from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -13,6 +16,8 @@ import {
 
 import { useEntityDetailsTime } from './useEntityDetailsTime';
 
+import styles from './EntityDateTimeSelector.module.scss';
+
 interface EntityDateTimeSelectorProps {
 	eventEntity: string;
 	category: InfraMonitoringEntity;
@@ -41,13 +46,14 @@ function EntityDateTimeSelector({
 				view,
 				interval,
 			});
+			logInfraDrawerTimeRangeCustomizedEvent(category, interval);
 			handleTimeChange(interval, dateTimeRange);
 		},
 		[category, view, eventEntity, handleTimeChange],
 	);
 
 	return (
-		<div className="entity-date-time-selector">
+		<div className={styles.container}>
 			{hasTimeChanged && (
 				<TooltipSimple title="Reset to list time" side="bottom">
 					<Button

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

@@ -16,7 +16,10 @@ import {
 	combineInitialAndUserExpression,
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraDrawerFilterCustomizedEvent,
+} from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import LoadingContainer from 'container/InfraMonitoringK8sV2/LoadingContainer';
@@ -124,6 +127,13 @@ function EntityEventsContent({
 					view: InfraMonitoringEvents.EventsView,
 				});
 
+				logInfraDrawerFilterCustomizedEvent(
+					category,
+					'events',
+					newUserExpression || '',
+					'search',
+				);
+
 				refetch();
 			}
 		},

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.module.scss

@@ -73,7 +73,7 @@
 
 .listContainer {
 	flex: 1;
-	height: calc(100vh - 312px) !important;
+	height: calc(100vh - 330px) !important;
 	display: flex;
 	height: 100%;
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -20,7 +20,10 @@ import {
 	combineInitialAndUserExpression,
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraDrawerFilterCustomizedEvent,
+} from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -42,6 +45,14 @@ import { K8S_ENTITY_LOGS_EXPRESSION_KEY, useInfiniteEntityLogs } from './hooks';
 import { getEntityLogsQueryPayload } from './utils';
 
 import styles from './EntityLogs.module.scss';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import createQueryParams from 'lib/createQueryParams';
+import { isModifierKeyPressed } from 'utils/app';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 interface Props {
 	eventEntity: string;
@@ -57,6 +68,9 @@ function EntityLogsContent({
 }: Omit<Props, 'initialExpression'>): JSX.Element {
 	const { timeRange } = useEntityDetailsTime();
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const logDetailContainerRef = useRef<HTMLDivElement>(null);
+
+	const { safeNavigate } = useSafeNavigate();
 
 	const expression = useExpression();
 	const inputExpression = useInputExpression();
@@ -85,8 +99,10 @@ function EntityLogsContent({
 				: partExpression;
 
 			querySearchOnRun(newUser);
+
+			logInfraDrawerFilterCustomizedEvent(category, 'logs', newUser, 'logs');
 		},
-		[userExpression, querySearchOnRun, handleCloseLogDetail],
+		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
 	);
 
 	const {
@@ -127,6 +143,13 @@ function EntityLogsContent({
 					view: InfraMonitoringEvents.LogsView,
 				});
 
+				logInfraDrawerFilterCustomizedEvent(
+					category,
+					'logs',
+					newUserExpression || '',
+					'search',
+				);
+
 				refetch();
 			}
 		},
@@ -148,6 +171,44 @@ function EntityLogsContent({
 		virtuosoRef,
 	});
 
+	const { updateAllQueriesOperators } = useQueryBuilder();
+
+	const handleOpenInExplorer = useCallback(
+		(e: React.MouseEvent<Element, MouseEvent>, log: ILog) => {
+			const baseQuery = updateAllQueriesOperators(
+				initialQueriesMap[DataSource.LOGS],
+				PANEL_TYPES.LIST,
+				DataSource.LOGS,
+			);
+
+			const queryParams = {
+				[QueryParams.activeLogId]: `"${log?.id}"`,
+				[QueryParams.startTime]: timeRange.startTime.toString(),
+				[QueryParams.endTime]: timeRange.endTime.toString(),
+				[QueryParams.compositeQuery]: JSON.stringify({
+					...baseQuery,
+					builder: {
+						...baseQuery.builder,
+						queryData: baseQuery.builder.queryData.map((item) => ({
+							...item,
+							filter: { expression },
+						})),
+					},
+				} satisfies Query),
+			};
+			safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
+				newTab: !!e && isModifierKeyPressed(e),
+			});
+		},
+		[
+			timeRange.startTime,
+			timeRange.endTime,
+			expression,
+			safeNavigate,
+			updateAllQueriesOperators,
+		],
+	);
+
 	const getItemContent = useCallback(
 		(_: number, logToRender: ILog): JSX.Element => {
 			return (
@@ -257,6 +318,7 @@ function EntityLogsContent({
 						{renderContent}
 					</div>
 				)}
+				<div ref={logDetailContainerRef} data-log-detail-ignore="true" />
 				{selectedTab && activeLog && (
 					<LogDetail
 						log={activeLog}
@@ -267,6 +329,10 @@ function EntityLogsContent({
 						onAddToQuery={onAddToQuery}
 						onClickActionItem={onAddToQuery}
 						onScrollToLog={handleScrollToLog}
+						handleOpenInExplorer={(e) => handleOpenInExplorer(e, activeLog)}
+						getContainer={(): HTMLElement =>
+							logDetailContainerRef.current || document.body
+						}
 					/>
 				)}
 			</div>

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartHeader.module.scss

@@ -2,6 +2,7 @@
 	display: inline-flex;
 	align-items: center;
 	gap: var(--spacing-2);
+	width: 100%;
 }
 
 .infoIcon {
@@ -20,6 +21,7 @@
 	align-items: center;
 	color: var(--l2-foreground);
 	transition: opacity 0.2s;
+	margin-left: auto;
 
 	&:hover {
 		color: var(--l3-foreground);

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

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { Compass, Info } from '@signozhq/icons';
-import { Tooltip } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 import styles from './ChartHeader.module.scss';
 
@@ -12,6 +12,7 @@ interface ChartHeaderProps {
 	tooltip?: string;
 	metricsExplorerUrl?: string;
 	metricsExplorerTestId?: string;
+	onExploreClick?: () => void;
 }
 
 function ChartHeader({
@@ -20,12 +21,13 @@ function ChartHeader({
 	tooltip,
 	metricsExplorerUrl,
 	metricsExplorerTestId = 'open-metrics-explorer',
+	onExploreClick,
 }: ChartHeaderProps): JSX.Element {
 	const renderInfoIcon = (): React.ReactNode => {
 		if (docPath) {
 			const tooltipTitle = tooltip || 'Not sure what this represents?';
 			return (
-				<Tooltip
+				<TooltipSimple
 					arrow
 					title={
 						<>
@@ -44,17 +46,17 @@ function ChartHeader({
 					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
 						<Info size="md" />
 					</span>
-				</Tooltip>
+				</TooltipSimple>
 			);
 		}
 
 		if (tooltip) {
 			return (
-				<Tooltip title={tooltip}>
+				<TooltipSimple title={tooltip} arrow>
 					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
 						<Info size="md" />
 					</span>
-				</Tooltip>
+				</TooltipSimple>
 			);
 		}
 
@@ -66,15 +68,16 @@ function ChartHeader({
 			<span className={styles.chartHeaderLabel}>{title}</span>
 			{renderInfoIcon()}
 			{metricsExplorerUrl && (
-				<Tooltip title="Open in Metrics Explorer">
+				<TooltipSimple title="Go to Metrics Explorer" arrow>
 					<Link
 						to={metricsExplorerUrl}
 						className={styles.metricsExplorerLink}
 						data-testid={metricsExplorerTestId}
+						onClick={onExploreClick}
 					>
 						<Compass size={14} />
 					</Link>
-				</Tooltip>
+				</TooltipSimple>
 			)}
 		</div>
 	);

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

@@ -2,11 +2,17 @@ import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraExplorerNavigatedEvent,
+} from 'constants/events';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import {
+	InfraMonitoringEntity,
+	VIEW_TYPES,
+} from 'container/InfraMonitoringK8sV2/constants';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -17,6 +23,8 @@ import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 
+import { getDrawerDurationMs } from 'container/InfraMonitoringK8sV2/Base/useDrawerLifecycleStore';
+
 import { buildEntityMetricsChartConfig } from './configBuilder';
 import ChartHeader from './ChartHeader';
 
@@ -43,6 +51,7 @@ interface EntityMetricsProps<T> {
 	) => GetQueryResultsProps[];
 	queryKey: string;
 	category: InfraMonitoringEntity;
+	view?: string;
 }
 
 function EntityMetrics<T>({
@@ -52,6 +61,7 @@ function EntityMetrics<T>({
 	getEntityQueryPayload,
 	queryKey,
 	category,
+	view = VIEW_TYPES.METRICS,
 }: EntityMetricsProps<T>): JSX.Element {
 	const { timeRange, selectedInterval, handleTimeChange } =
 		useEntityDetailsTime();
@@ -203,6 +213,16 @@ function EntityMetrics<T>({
 									: undefined
 							}
 							metricsExplorerTestId={`open-metrics-explorer-${idx}`}
+							onExploreClick={(): void =>
+								logInfraExplorerNavigatedEvent({
+									entityType: category,
+									destination: 'metrics_explorer',
+									source: 'chart_compass_icon',
+									tab: view,
+									sourceKey: entityWidgetInfo[idx].title,
+									drawerDurationMsAtNavigation: getDrawerDurationMs(),
+								})
+							}
 						/>
 						<div className={styles.entityMetricsCard} ref={graphRef}>
 							{renderCardContent(query, idx)}

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

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import * as appContextHooks from 'providers/App/App';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
@@ -300,14 +301,16 @@ const renderEntityMetrics = (overrides = {}): any => {
 
 	return render(
 		<MemoryRouter>
-			<EntityMetrics
-				entity={defaultProps.entity}
-				eventEntity="test"
-				entityWidgetInfo={defaultProps.entityWidgetInfo}
-				getEntityQueryPayload={defaultProps.getEntityQueryPayload}
-				queryKey={defaultProps.queryKey}
-				category={defaultProps.category}
-			/>
+			<TooltipProvider>
+				<EntityMetrics
+					entity={defaultProps.entity}
+					eventEntity="test"
+					entityWidgetInfo={defaultProps.entityWidgetInfo}
+					getEntityQueryPayload={defaultProps.getEntityQueryPayload}
+					queryKey={defaultProps.queryKey}
+					category={defaultProps.category}
+				/>
+			</TooltipProvider>
 		</MemoryRouter>,
 	);
 };

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

@@ -16,7 +16,10 @@ import {
 	getUserExpressionFromCombined,
 } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { ResizeTable } from 'components/ResizeTable';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraDrawerFilterCustomizedEvent,
+} from 'constants/events';
 import Controls from 'container/Controls';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
@@ -106,6 +109,13 @@ function EntityTracesContent({
 					view: InfraMonitoringEvents.TracesView,
 				});
 
+				logInfraDrawerFilterCustomizedEvent(
+					category,
+					'traces',
+					newUserExpression || '',
+					'search',
+				);
+
 				refetch();
 			}
 		},

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

@@ -2,6 +2,7 @@ import { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
+import { TextNoData } from '../../components/TextNoData';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {
 	BlockLink,
@@ -135,12 +136,11 @@ export const getTraceListColumns = (
 					if (!isValidCode) {
 						return (
 							<BlockLink to={getTraceLink(itemData)} openInNewTab>
-								<Typography
-									className={styles.cellText}
-									data-novalue={numericCode === 0 || !statusCode}
-								>
-									{numericCode === 0 || !statusCode ? '-' : statusCode}
-								</Typography>
+								{numericCode === 0 || !statusCode ? (
+									<TextNoData type="typography" className={styles.cellText} />
+								) : (
+									<Typography className={styles.cellText}>{statusCode}</Typography>
+								)}
 							</BlockLink>
 						);
 					}

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

@@ -63,6 +63,7 @@ export function createPodMetricsTab<T>({
 				getEntityQueryPayload={getQueryPayload}
 				queryKey={queryKey}
 				category={category}
+				view={VIEW_TYPES.POD_METRICS}
 			/>
 		),
 	};

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/entityDetails.module.scss

@@ -0,0 +1,103 @@
+.entityDetailDrawer {
+	border-color: var(--l2-border) !important;
+	background: var(--l2-background) !important;
+	box-shadow: -4px 10px 16px 2px var(--l1-shadow);
+
+	width: 70%;
+	// TODO(H4ad): Improve this in a component level
+	max-width: 70% !important;
+	overscroll-behavior: contain;
+
+	&:focus-visible,
+	&:focus {
+		outline: none;
+	}
+
+	[data-slot='drawer-header'] {
+		padding: var(--spacing-4) var(--spacing-8);
+		border-bottom: 1px solid var(--l1-border);
+		background: var(--l2-background);
+	}
+
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		overflow-y: auto;
+		padding: var(--spacing-8);
+		margin: 0;
+		min-width: 900px;
+	}
+}
+
+.closeButton {
+	--button-padding: var(--spacing-2);
+}
+
+.title {
+	font-family: var(--periscope-font-family-mono);
+
+	--typography-margin: 0px var(--spacing-4) 0px 0px;
+}
+
+.entityDetailsEntity {
+	display: flex;
+	flex-direction: column;
+}
+
+.entityDetailsGrid {
+	display: flex;
+	flex-direction: column;
+}
+
+.labelsRow,
+.valuesRow {
+	display: grid;
+	grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr;
+	gap: 30px;
+	align-items: center;
+}
+
+.labelsRow {
+	margin-bottom: var(--spacing-4);
+}
+
+.entityDetailsMetadataLabel {
+	letter-spacing: 0.44px;
+	text-transform: uppercase;
+}
+
+.entityDetailsMetadataValue {
+	font-family: var(--periscope-font-family-mono);
+}
+
+.viewsTabsContainer {
+	margin-top: 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	[data-slot='toggle-group-item'] {
+		width: 114px;
+	}
+}
+
+.viewsTabs {
+	color: var(--l2-foreground);
+}
+
+.viewTitle {
+	display: flex;
+	gap: var(--margin-2);
+	align-items: center;
+	justify-content: center;
+}
+
+.compassButton {
+	width: 30px;
+	height: 30px;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+	box-shadow: 0 0 8px 0 var(--l1-shadow);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/entityDetails.styles.scss

@@ -1,462 +0,0 @@
-// Entity Details
-.entity-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
-	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-	.ant-drawer-header {
-		padding: 8px 16px;
-		border-bottom: none;
-
-		align-items: stretch;
-
-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
-	}
-
-	.ant-drawer-close {
-		margin-inline-end: 0px;
-	}
-
-	.ant-drawer-body {
-		display: flex;
-		flex-direction: column;
-		padding: 16px;
-	}
-
-	.title {
-		color: var(--l2-foreground);
-		font-family: 'Geist Mono';
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-
-	.radio-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-	}
-
-	.entity-detail-drawer__entity {
-		.entity-details-grid {
-			.labels-row,
-			.values-row {
-				display: grid;
-				grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr;
-				gap: 30px;
-				align-items: center;
-			}
-
-			.labels-row {
-				margin-bottom: 8px;
-			}
-
-			.entity-details-metadata-label {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-			}
-
-			.entity-details-metadata-value {
-				color: var(--l2-foreground);
-				font-family: 'Geist Mono';
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-
-				width: 100%;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.status-tag {
-				margin: 0;
-
-				&.active {
-					color: var(--success-500);
-					background: var(--success-100);
-					border-color: var(--success-500);
-				}
-
-				&.inactive {
-					color: var(--error-500);
-					background: var(--error-100);
-					border-color: var(--error-500);
-				}
-			}
-
-			.progress-container {
-				width: 158px;
-
-				span {
-					font-weight: 600;
-				}
-			}
-
-			.ant-card {
-				&.ant-card-bordered {
-					border: 1px solid var(--l1-border) !important;
-				}
-			}
-		}
-	}
-
-	.tabs-and-search {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin: 16px 0;
-
-		.action-btn {
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-
-	.views-tabs-container {
-		margin-top: 1.5rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.views-tabs {
-			color: var(--l2-foreground);
-
-			.view-title {
-				display: flex;
-				gap: var(--margin-2);
-				align-items: center;
-				justify-content: center;
-				font-size: var(--font-size-xs);
-				font-style: normal;
-				font-weight: var(--font-weight-normal);
-			}
-
-			> button {
-				border: 1px solid var(--l1-border);
-				width: 114px;
-
-				&::before {
-					background: var(--l1-border);
-				}
-
-				&[data-state='on'] {
-					background: var(--l1-border);
-					color: var(--l1-foreground);
-					border: 1px solid var(--l1-border);
-
-					&::before {
-						background: var(--l1-border);
-					}
-				}
-			}
-		}
-
-		.compass-button {
-			width: 30px;
-			height: 30px;
-
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	.ant-drawer-close {
-		padding: 0px;
-	}
-}
-
-.entity-metric-traces {
-	margin-top: 1rem;
-
-	.entity-metric-traces-header {
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 1rem;
-
-		gap: 8px;
-		padding: 12px;
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-
-		.filter-section {
-			flex: 1;
-
-			.ant-select-selector {
-				border-radius: 2px;
-				border: 1px solid var(--l1-border) !important;
-				background-color: var(--l3-background) !important;
-
-				input {
-					font-size: 12px;
-				}
-
-				[data-slot='badge'] .ant-typography {
-					font-size: 12px;
-				}
-			}
-		}
-	}
-
-	.entity-metric-traces-table {
-		.ant-table-content {
-			overflow: hidden !important;
-		}
-
-		.ant-table {
-			border-radius: 3px;
-			border: 1px solid var(--l1-border);
-
-			.ant-table-thead > tr > th {
-				padding: 12px;
-				font-weight: 500;
-				font-size: 12px;
-				line-height: 18px;
-
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
-				border-bottom: none;
-
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 600;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-
-				&::before {
-					background-color: transparent;
-				}
-			}
-
-			.ant-table-thead > tr > th:has(.entityname-column-header) {
-				background: var(--l2-background);
-			}
-
-			.ant-table-cell {
-				padding: 12px;
-				font-size: 13px;
-				line-height: 20px;
-				color: var(--l1-foreground);
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
-			}
-
-			.ant-table-cell:has(.entityname-column-value) {
-				background: var(--l2-background);
-			}
-
-			.entityname-column-value {
-				color: var(--l1-foreground);
-				font-family: 'Geist Mono';
-				font-style: normal;
-				font-weight: 600;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.status-cell {
-				.active-tag {
-					color: var(--bg-forest-500);
-					padding: 4px 8px;
-					border-radius: 4px;
-					font-size: 12px;
-					font-weight: 500;
-				}
-			}
-
-			.progress-container {
-			}
-
-			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
-			}
-
-			.ant-table-cell:first-child {
-				text-align: justify;
-			}
-
-			.ant-table-cell:nth-child(2) {
-				padding-left: 16px;
-				padding-right: 16px;
-			}
-
-			.ant-table-cell:nth-child(n + 3) {
-				padding-right: 24px;
-			}
-
-			.column-header-right {
-				text-align: right;
-			}
-
-			.ant-table-tbody > tr > td {
-				border-bottom: none;
-			}
-
-			.ant-table-thead
-				> tr
-				> th:not(:last-child):not(.ant-table-selection-column):not(
-					.ant-table-row-expand-icon-cell
-				):not([colspan])::before {
-				background-color: transparent;
-			}
-
-			.ant-empty-normal {
-				visibility: hidden;
-			}
-		}
-
-		.ant-table-container::after {
-			content: none;
-		}
-	}
-}
-
-.entity-metrics-logs-container {
-	margin-top: 1rem;
-
-	.filter-section {
-		flex: 1;
-
-		.ant-select-selector {
-			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
-			background-color: var(--l3-background) !important;
-
-			input {
-				font-size: 12px;
-			}
-
-			[data-slot='badge'] .ant-typography {
-				font-size: 12px;
-			}
-		}
-	}
-
-	.entity-metrics-logs-header {
-		display: flex;
-		justify-content: space-between;
-		gap: 8px;
-
-		padding: 12px;
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-	}
-
-	.entity-metrics-logs {
-		margin-top: 1rem;
-
-		.virtuoso-list {
-			overflow-y: hidden !important;
-
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-				height: 0.3rem;
-			}
-
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background: var(--l3-background);
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background: var(--l3-background);
-			}
-
-			.ant-row {
-				width: fit-content;
-			}
-		}
-
-		.skeleton-container {
-			height: 100%;
-			padding: 16px;
-		}
-	}
-}
-
-.entity-metrics-logs-list-container {
-	flex: 1;
-	height: calc(100vh - 272px) !important;
-	display: flex;
-	height: 100%;
-
-	.raw-log-content {
-		width: 100%;
-		text-wrap: inherit;
-		word-wrap: break-word;
-	}
-}
-
-.entity-metrics-logs-list-card {
-	width: 100%;
-	margin-top: 12px;
-
-	.ant-card-body {
-		padding: 0;
-
-		height: 100%;
-		width: 100%;
-	}
-}
-
-.logs-loading-skeleton {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 8px 0;
-
-	.ant-skeleton-input-sm {
-		height: 18px;
-	}
-}
-
-.no-logs-found {
-	height: 50vh;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	padding: 24px;
-	box-sizing: border-box;
-
-	.ant-typography {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-}
-
-.entity-date-time-selector {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.module.scss

@@ -64,7 +64,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	min-width: 595px;
+	min-width: 800px;
 	overflow-x: auto;
 
 	> * {

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import {
+	QuickFilterChangeEventData,
 	QuickFilterCheckboxUseFieldApis,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
@@ -49,7 +51,11 @@ import {
 } from './hooks';
 
 import styles from './InfraMonitoringK8s.module.scss';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	logInfraFilterCustomizedEvent,
+	logInfraMonitoringListViewedEvent,
+	InfraMonitoringEvents,
+} from 'constants/events';
 import logEvent from 'api/common/logEvent';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -120,12 +126,28 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			category: selectedCategory,
 			view: InfraMonitoringEvents.QuickFiltersView,
 		});
+
+		// The category query param is a plain string; entities are validated by
+		// getEntityConfig before rendering
+		logInfraMonitoringListViewedEvent(selectedCategory as InfraMonitoringEntity);
 	}, [selectedCategory]);
 
 	const handleFilterVisibilityChange = useCallback((): void => {
 		setShowFilters((show) => !show);
 	}, []);
 
+	const handleQuickFilterChange = useCallback(
+		(data: QuickFilterChangeEventData): void => {
+			logInfraFilterCustomizedEvent(
+				selectedCategory as InfraMonitoringEntity,
+				'quick_filter',
+				data.expression,
+				data.filterItemKeys,
+			);
+		},
+		[selectedCategory],
+	);
+
 	const categories = useMemo(
 		() => [
 			{
@@ -218,14 +240,15 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<>
 				{!showFilters && (
 					<div className={styles.k8SOpenQuickFilters}>
-						<Button
-							className="periscope-btn ghost"
-							type="text"
-							size="small"
-							onClick={handleFilterVisibilityChange}
-						>
-							<Filter size={14} />
-						</Button>
+						<TooltipSimple title="Open Filters" arrow side="left">
+							<Button
+								variant="ghost"
+								size="icon"
+								color="secondary"
+								onClick={handleFilterVisibilityChange}
+								prefix={<Filter size={14} />}
+							/>
+						</TooltipSimple>
 					</div>
 				)}
 			</>
@@ -246,13 +269,13 @@ export default function InfraMonitoringK8s(): JSX.Element {
 												Viewing · Resource
 											</Typography.Text>
 											<div className={styles.sectionLine} />
-											<Tooltip title="Collapse Filters">
+											<TooltipSimple title="Collapse Filters" arrow>
 												<ArrowUpToLine
 													style={{ transform: 'rotate(270deg)' }}
 													onClick={handleFilterVisibilityChange}
 													size="md"
 												/>
-											</Tooltip>
+											</TooltipSimple>
 										</div>
 										<div className={styles.categoryCard}>
 											<div className={styles.categoryList}>
@@ -289,6 +312,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 												config={selectedCategoryConfig}
 												handleFilterVisibilityChange={handleFilterVisibilityChange}
 												useFieldApis={selectedCategoryUseFieldApis}
+												onQuickFilterChange={handleQuickFilterChange}
 											/>
 										)}
 									</div>

frontend/src/container/InfraMonitoringK8sV2/Jobs/table.config.tsx

@@ -9,9 +9,9 @@ import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
-	CellValueTooltip,
 	EntityProgressBar,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
@@ -79,10 +79,9 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const jobName = value as string;
-			return <CellValueTooltip value={jobName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'namespaceName',
@@ -96,10 +95,9 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 160 },
 		enableSort: false,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
-			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'pod_counts_by_status',
@@ -116,7 +114,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 			return (
 				<GroupedStatusCounts
@@ -129,7 +127,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 	{
 		id: 'completion',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion">
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completions">
 				Completions
 			</ColumnHeader>
 		),
@@ -161,8 +159,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		id: 'cpu_request',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-req-usage-">
-				CPU Request
-				<br /> Usage (%)
+				CPU Request Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.jobCPURequest,
@@ -170,13 +167,14 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		enableSort: true,
 		enableResize: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuRequest = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={cpuRequest}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="CPU Request"
+					rowId={rowId}
 				>
 					<EntityProgressBar value={cpuRequest} type="request" />
 				</ValidateColumnValueWrapper>
@@ -187,21 +185,21 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		id: 'cpu_limit',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-limit-usage-">
-				CPU Limit
-				<br /> Usage (%)
+				CPU Limit Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.jobCPULimit,
 		width: { min: 200, default: 200 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuLimit = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={cpuLimit}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="CPU Limit"
+					rowId={rowId}
 				>
 					<EntityProgressBar value={cpuLimit} type="limit" />
 				</ValidateColumnValueWrapper>
@@ -212,21 +210,21 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		id: 'cpu',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#cpu-usage-cores">
-				CPU Usage
-				<br /> (cores)
+				CPU Usage (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.jobCPU,
 		width: { min: 160 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = Number(value);
 			return (
 				<ValidateColumnValueWrapper
 					value={cpu}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="CPU metric"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{cpu.toFixed(2)}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
@@ -237,8 +235,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		id: 'memory_request',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#mem-req-usage-">
-				Memory Request
-				<br /> Usage (%)
+				Memory Request Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.jobMemoryRequest,
@@ -246,13 +243,14 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		enableSort: true,
 		enableResize: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryRequest = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={memoryRequest}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="Memory Request"
+					rowId={rowId}
 				>
 					<EntityProgressBar value={memoryRequest} type="request" />
 				</ValidateColumnValueWrapper>
@@ -263,21 +261,21 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		id: 'memory_limit',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#mem-limit-usage-">
-				Memory Limit
-				<br /> Usage (%)
+				Memory Limit Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.jobMemoryLimit,
 		width: { min: 180 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryLimit = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={memoryLimit}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="Memory Limit"
+					rowId={rowId}
 				>
 					<EntityProgressBar value={memoryLimit} type="limit" />
 				</ValidateColumnValueWrapper>
@@ -288,21 +286,21 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#mem-usage-wss">
-				Memory Usage
-				<br /> (WSS)
+				Memory Usage (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.jobMemory,
 		width: { min: 160 },
 		enableSort: true,
 		enableResize: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={memory}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="memory metric"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{formatBytes(memory)}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
@@ -320,13 +318,14 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 100 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const activePods = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={activePods}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="active pod"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{activePods}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
@@ -344,13 +343,14 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 100 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const failedPods = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={failedPods}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="failed pod"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{failedPods}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
@@ -368,13 +368,14 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 120 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const successfulPods = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={successfulPods}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="successful pod"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{successfulPods}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
@@ -392,13 +393,14 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		width: { min: 160 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const desiredSuccessfulPods = value as number;
 			return (
 				<ValidateColumnValueWrapper
 					value={desiredSuccessfulPods}
 					entity={InfraMonitoringEntity.JOBS}
 					attribute="desired successful pod"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{desiredSuccessfulPods}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>

frontend/src/container/InfraMonitoringK8sV2/Namespaces/table.config.tsx

@@ -8,8 +8,8 @@ import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
-	CellValueTooltip,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
@@ -81,10 +81,9 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'clusterName',
@@ -117,7 +116,7 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 			return (
 				<GroupedStatusCounts
@@ -137,13 +136,14 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		accessorFn: (row): number => row.namespaceCPU,
 		width: { min: 190 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = Number(value);
 			return (
 				<ValidateColumnValueWrapper
 					value={cpu}
 					entity={InfraMonitoringEntity.NAMESPACES}
 					attribute="CPU metric"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{cpu.toFixed(2)}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>
@@ -160,13 +160,14 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		accessorFn: (row): number => row.namespaceMemory,
 		width: { min: 220 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = Number(value);
 			return (
 				<ValidateColumnValueWrapper
 					value={memory}
 					entity={InfraMonitoringEntity.NAMESPACES}
 					attribute="memory metric"
+					rowId={rowId}
 				>
 					<TanStackTable.Text>{formatBytes(memory)}</TanStackTable.Text>
 				</ValidateColumnValueWrapper>

frontend/src/container/InfraMonitoringK8sV2/Nodes/table.config.tsx

@@ -10,8 +10,8 @@ import K8sGroupCell from '../Base/K8sGroupCell';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import {
-	CellValueTooltip,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import { InfraMonitoringEntity } from '../constants';
@@ -83,10 +83,9 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const nodeName = value as string;
-			return <CellValueTooltip value={nodeName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'condition',
@@ -102,6 +101,11 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 			if (!groupMeta) {
 				const color =
 					NODE_CONDITION_COLORS[row.condition] || NODE_CONDITION_COLORS.no_data;
+
+				if (color === NODE_CONDITION_COLORS.no_data) {
+					return <TextNoData type="tanstack" />;
+				}
+
 				return (
 					<Badge color={color} variant="outline">
 						{NODE_CONDITION_LABEL_MAP[row.condition] || 'Unknown'}
@@ -142,7 +146,7 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 			return (
 				<GroupedStatusCounts
@@ -172,17 +176,17 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		id: 'cpu',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/nodes#cpu-usage-cores">
-				CPU Usage
-				<br /> (cores)
+				CPU Usage (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.nodeCPU,
 		width: { min: 160, default: 160 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = Number(value);
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpu}
 					entity={InfraMonitoringEntity.NODES}
 					attribute="CPU metric"
@@ -196,17 +200,17 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		id: 'cpu_allocatable',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/nodes#cpu-alloc-cores">
-				CPU Allocatable
-				<br /> (cores)
+				CPU Allocatable (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.nodeCPUAllocatable,
 		width: { min: 160, default: 190 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuAllocatable = Number(value);
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpuAllocatable}
 					entity={InfraMonitoringEntity.NODES}
 					attribute="CPU allocatable metric"
@@ -220,17 +224,17 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/nodes#memory-usage-wss">
-				Memory Usage
-				<br /> (WSS)
+				Memory Usage (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.nodeMemory,
 		width: { min: 220, default: 220 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memory}
 					entity={InfraMonitoringEntity.NODES}
 					attribute="memory metric"
@@ -244,17 +248,17 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		id: 'memory_allocatable',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/nodes#memory-allocatable">
-				Memory
-				<br /> Allocatable
+				Memory Allocatable
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.nodeMemoryAllocatable,
 		width: { min: 200, default: 200 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryAllocatable = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memoryAllocatable}
 					entity={InfraMonitoringEntity.NODES}
 					attribute="memory allocatable metric"

frontend/src/container/InfraMonitoringK8sV2/Pods/constants.ts

@@ -67,7 +67,7 @@ export const podWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
-		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores-1',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores',
 	},
 	{
 		title: 'CPU Request, Limit Utilization',

frontend/src/container/InfraMonitoringK8sV2/Pods/table.config.tsx

@@ -1,6 +1,5 @@
 import { Container } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import {
 	InframonitoringtypesPodRecordDTO,
 	InframonitoringtypesPodStatusDTO,
@@ -17,16 +16,15 @@ import {
 	POD_STATUS_COLORS,
 } from '../commonUtils';
 import {
-	CellValueTooltip,
 	EntityProgressBar,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
 } from '../constants';
-import { Typography } from '@signozhq/ui/typography';
 import { formatAge } from 'utils/timeUtils';
 
 export function getK8sPodRowKey(pod: InframonitoringtypesPodRecordDTO): string {
@@ -86,10 +84,9 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const podName = value as string;
-			return <CellValueTooltip value={podName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'podStatus',
@@ -107,11 +104,12 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 				return <></>;
 			}
 
+			if (row.podStatus === InframonitoringtypesPodStatusDTO.no_data) {
+				return <TextNoData type="tanstack" />;
+			}
+
 			const color = POD_STATUS_COLORS[row.podStatus] || POD_STATUS_COLORS.unknown;
-			const label =
-				row.podStatus === InframonitoringtypesPodStatusDTO.no_data
-					? 'No Data'
-					: row.podStatus.charAt(0).toUpperCase() + row.podStatus.slice(1);
+			const label = row.podStatus.charAt(0).toUpperCase() + row.podStatus.slice(1);
 			return (
 				<Badge color={color} variant="outline">
 					{label}
@@ -134,7 +132,7 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		cell: ({ row, rowId }): React.ReactNode => {
 			const podCountsByStatus = row.podCountsByStatus;
 			if (!podCountsByStatus) {
-				return <TanStackTable.Text>-</TanStackTable.Text>;
+				return <TextNoData type="tanstack" />;
 			}
 			return (
 				<GroupedStatusCounts
@@ -147,23 +145,25 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	{
 		id: 'podAge',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#age">
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-age">
 				Age
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podAge,
 		width: { min: 100 },
 		enableSort: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const age = value as number;
-			if (age === -1) {
-				return (
-					<TooltipSimple title="No data">
-						<Typography.Text>-</Typography.Text>
-					</TooltipSimple>
-				);
-			}
-			return <TanStackTable.Text>{formatAge(age)}</TanStackTable.Text>;
+			return (
+				<ValidateColumnValueWrapper
+					rowId={rowId}
+					value={age}
+					entity={InfraMonitoringEntity.PODS}
+					attribute="age"
+				>
+					<TanStackTable.Text>{formatAge(age)}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
 		},
 	},
 	{
@@ -176,34 +176,36 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		accessorFn: (row): number => row.podRestarts,
 		width: { min: 140 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const restarts = value as number;
-			if (restarts === -1) {
-				return (
-					<TooltipSimple title="No data">
-						<Typography.Text>-</Typography.Text>
-					</TooltipSimple>
-				);
-			}
-			return <TanStackTable.Text>{restarts}</TanStackTable.Text>;
+			return (
+				<ValidateColumnValueWrapper
+					rowId={rowId}
+					value={restarts}
+					entity={InfraMonitoringEntity.PODS}
+					attribute="Restarts"
+				>
+					<TanStackTable.Text>{restarts}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
 		},
 	},
 	{
 		id: 'cpu_request',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#cpu-req-usage-">
-				CPU Request
-				<br /> Usage (%)
+				CPU Request Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podCPURequest,
 		width: { min: 210 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuRequest = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpuRequest}
 					entity={InfraMonitoringEntity.PODS}
 					attribute="CPU Request"
@@ -217,17 +219,17 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		id: 'cpu_limit',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#cpu-limit-usage-">
-				CPU Limit
-				<br /> Usage (%)
+				CPU Limit Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podCPULimit,
 		width: { min: 220 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpuLimit = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpuLimit}
 					entity={InfraMonitoringEntity.PODS}
 					attribute="CPU Limit"
@@ -241,17 +243,17 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		id: 'cpu',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#cpu-usage-cores">
-				CPU Usage
-				<br /> (cores)
+				CPU Usage (cores)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podCPU,
 		width: { min: 160 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const cpu = Number(value);
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={cpu}
 					entity={InfraMonitoringEntity.PODS}
 					attribute="CPU metric"
@@ -265,18 +267,18 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		id: 'memory_request',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#mem-req-usage-">
-				Memory Request
-				<br /> Usage (%)
+				Memory Request Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podMemoryRequest,
 		width: { min: 210 },
 		enableSort: true,
 		defaultVisibility: false,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryRequest = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memoryRequest}
 					entity={InfraMonitoringEntity.PODS}
 					attribute="Memory Request"
@@ -290,17 +292,17 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		id: 'memory_limit',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#mem-limit-usage-">
-				Memory Limit
-				<br /> Usage (%)
+				Memory Limit Usage (%)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podMemoryLimit,
 		width: { min: 220 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memoryLimit = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memoryLimit}
 					entity={InfraMonitoringEntity.PODS}
 					attribute="Memory Limit"
@@ -314,17 +316,17 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#mem-usage-wss">
-				Memory Usage
-				<br /> (WSS)
+				Memory Usage (WSS)
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.podMemory,
 		width: { min: 210, default: '100%' },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const memory = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={memory}
 					entity={InfraMonitoringEntity.PODS}
 					attribute="memory metric"

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/table.config.tsx

@@ -9,9 +9,9 @@ import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
-	CellValueTooltip,
 	EntityProgressBar,
 	GroupedStatusCounts,
+	TextNoData,
 	ValidateColumnValueWrapper,
 } from '../components';
 import {
@@ -86,10 +86,9 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableMove: false,
 			pin: 'left',
 			visibilityBehavior: 'hidden-on-expand',
-			cell: ({ value }): React.ReactNode => {
-				const statefulsetName = value as string;
-				return <CellValueTooltip value={statefulsetName} />;
-			},
+			cell: ({ value }): React.ReactNode => (
+				<TanStackTable.Text>{value}</TanStackTable.Text>
+			),
 		},
 		{
 			id: 'namespaceName',
@@ -103,10 +102,9 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			width: { min: 180 },
 			enableSort: false,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const namespaceName = value as string;
-				return <CellValueTooltip value={namespaceName} />;
-			},
+			cell: ({ value }): React.ReactNode => (
+				<TanStackTable.Text>{value}</TanStackTable.Text>
+			),
 		},
 		{
 			id: 'pod_counts_by_status',
@@ -125,7 +123,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			cell: ({ row, rowId }): React.ReactNode => {
 				const podCountsByStatus = row.podCountsByStatus;
 				if (!podCountsByStatus) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
+					return <TextNoData type="tanstack" />;
 				}
 				return (
 					<GroupedStatusCounts
@@ -168,8 +166,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			id: 'cpu_request',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-req-usage-">
-					CPU Request
-					<br /> Usage (%)
+					CPU Request Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.statefulSetCPURequest,
@@ -177,10 +174,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableSort: true,
 			enableResize: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const cpuRequest = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={cpuRequest}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="CPU Request"
@@ -194,18 +192,18 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			id: 'cpu_limit',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-limit-usage-">
-					CPU Limit
-					<br /> Usage (%)
+					CPU Limit Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.statefulSetCPULimit,
 			width: { min: 200, default: 200 },
 			enableSort: true,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const cpuLimit = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={cpuLimit}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="CPU Limit"
@@ -219,8 +217,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			id: 'cpu',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#cpu-usage-cores">
-					CPU Usage
-					<br /> (cores)
+					CPU Usage (cores)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.statefulSetCPU,
@@ -228,10 +225,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableSort: true,
 			enableResize: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const cpu = Number(value);
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={cpu}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="CPU metric"
@@ -245,8 +243,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			id: 'memory_request',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-req-usage-">
-					Memory Request
-					<br /> Usage (%)
+					Memory Request Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.statefulSetMemoryRequest,
@@ -254,10 +251,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableSort: true,
 			enableResize: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const memoryRequest = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={memoryRequest}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="Memory Request"
@@ -271,18 +269,18 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			id: 'memory_limit',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-limit-usage-">
-					Memory Limit
-					<br /> Usage (%)
+					Memory Limit Usage (%)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.statefulSetMemoryLimit,
 			width: { min: 180 },
 			enableSort: true,
 			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const memoryLimit = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={memoryLimit}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="Memory Limit"
@@ -296,8 +294,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			id: 'memory',
 			header: (): React.ReactNode => (
 				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#mem-usage-wss">
-					Memory Usage
-					<br /> (WSS)
+					Memory Usage (WSS)
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.statefulSetMemory,
@@ -305,10 +302,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableSort: true,
 			enableResize: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const memory = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={memory}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="memory metric"
@@ -329,10 +327,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			width: { min: 120 },
 			enableSort: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const currentPods = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={currentPods}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="current pod"
@@ -353,10 +352,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			width: { min: 120 },
 			enableSort: true,
 			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
+			cell: ({ value, rowId }): React.ReactNode => {
 				const desiredPods = value as number;
 				return (
 					<ValidateColumnValueWrapper
+						rowId={rowId}
 						value={desiredPods}
 						entity={InfraMonitoringEntity.STATEFULSETS}
 						attribute="desired pod"

frontend/src/container/InfraMonitoringK8sV2/Volumes/constants.ts

@@ -69,27 +69,29 @@ export const volumeWidgetInfo = [
 	{
 		title: 'Volume available',
 		yAxisUnit: 'bytes',
-		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-available',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-available-1',
 	},
 	{
 		title: 'Volume capacity',
 		yAxisUnit: 'bytes',
-		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-capacity',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-capacity-1',
 	},
 	{
 		title: 'Volume inodes used',
 		yAxisUnit: 'short',
-		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-used',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-used-1',
 	},
 	{
 		title: 'Volume inodes',
 		yAxisUnit: 'short',
-		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-1',
 	},
 	{
 		title: 'Volume inodes free',
 		yAxisUnit: 'short',
-		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-free',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-free-1',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Volumes/table.config.tsx

@@ -6,7 +6,7 @@ import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { formatBytes } from '../commonUtils';
-import { CellValueTooltip, ValidateColumnValueWrapper } from '../components';
+import { ValidateColumnValueWrapper } from '../components';
 import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
@@ -79,10 +79,9 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		enableMove: false,
 		pin: 'left',
 		visibilityBehavior: 'hidden-on-expand',
-		cell: ({ value }): React.ReactNode => {
-			const pvcName = value as string;
-			return <CellValueTooltip value={pvcName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'namespaceName',
@@ -95,10 +94,9 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] || '',
 		width: { min: 220 },
 		enableSort: false,
-		cell: ({ value }): React.ReactNode => {
-			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
-		},
+		cell: ({ value }): React.ReactNode => (
+			<TanStackTable.Text>{value}</TanStackTable.Text>
+		),
 	},
 	{
 		id: 'capacity',
@@ -110,10 +108,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		accessorFn: (row): number => row.volumeCapacity,
 		width: { min: 140 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const capacity = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={capacity}
 					entity={InfraMonitoringEntity.VOLUMES}
 					attribute="capacity metric"
@@ -133,10 +132,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		accessorFn: (row): number => row.volumeUsage,
 		width: { min: 140 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const usage = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={usage}
 					entity={InfraMonitoringEntity.VOLUMES}
 					attribute="utilization metric"
@@ -156,10 +156,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		accessorFn: (row): number => row.volumeAvailable,
 		width: { min: 140 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const available = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={available}
 					entity={InfraMonitoringEntity.VOLUMES}
 					attribute="available metric"
@@ -179,10 +180,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		accessorFn: (row): number => row.volumeInodes,
 		width: { min: 140 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const inodes = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={inodes}
 					entity={InfraMonitoringEntity.VOLUMES}
 					attribute="inodes metric"
@@ -202,10 +204,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		accessorFn: (row): number => row.volumeInodesUsed,
 		width: { min: 160 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const inodesUsed = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={inodesUsed}
 					entity={InfraMonitoringEntity.VOLUMES}
 					attribute="inodes used metric"
@@ -225,10 +228,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		accessorFn: (row): number => row.volumeInodesFree,
 		width: { min: 160 },
 		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
+		cell: ({ value, rowId }): React.ReactNode => {
 			const inodesFree = value as number;
 			return (
 				<ValidateColumnValueWrapper
+					rowId={rowId}
 					value={inodesFree}
 					entity={InfraMonitoringEntity.VOLUMES}
 					attribute="inodes free metric"