feat(dashboard): rank top lists across multiple queries and formulas

Ranks the first enabled result in builder order, since the response lists
results in no particular order. Rows follow the query's value order, so an
ascending order gives a bottom N.

.gitattributes

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

.github/workflows/integrationci.yaml

@@ -68,6 +68,7 @@ jobs:
           - semconvfamilies
           - serviceaccount
           - spanmapper
+          - tracedetail
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl

docs/api/openapi.yml

@@ -3425,6 +3425,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4167,9 +4174,11 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
+          signoz/TopListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4182,6 +4191,8 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4195,6 +4206,8 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
+      - signoz/TopListPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4280,6 +4293,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4316,6 +4341,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/TopListPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTopListPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelSpec:
       properties:
         display:
@@ -4359,6 +4396,16 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4532,6 +4579,87 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+        "y":
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none.
+          type: string
+        scale:
+          $ref: '#/components/schemas/DashboardtypesAxisScale'
+        softMax:
+          nullable: true
+          type: number
+        softMin:
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values colour dots and drive the legend. Empty colours by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales dot size. Empty draws every dot
+            at the default size.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty uses the first value
+            column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty uses the second
+            value column.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+        dimensions:
+          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesTableFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        minSize:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+        opacity:
+          $ref: '#/components/schemas/DashboardtypesPointOpacity'
+        size:
+          $ref: '#/components/schemas/DashboardtypesPointDiameter'
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -4716,6 +4844,18 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
+    DashboardtypesTopListPanelSpec:
+      properties:
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesComparisonThreshold'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
     DashboardtypesUpdatableDashboardV2:
       properties:
         image:
@@ -9844,6 +9984,53 @@ components:
       required:
       - aggregations
       type: object
+    SpantypesGettableTraceSummary:
+      properties:
+        ai:
+          $ref: '#/components/schemas/SpantypesTraceAISummary'
+        endTimestampMillis:
+          minimum: 0
+          type: integer
+        hasMissingSpans:
+          type: boolean
+        rootServiceEntryPoint:
+          type: string
+        rootServiceName:
+          type: string
+        rootSpanStatusCode:
+          type: string
+        startTimestampMillis:
+          minimum: 0
+          type: integer
+        totalErrorSpansCount:
+          minimum: 0
+          type: integer
+        totalSpansCount:
+          minimum: 0
+          type: integer
+      required:
+      - startTimestampMillis
+      - endTimestampMillis
+      - rootServiceName
+      - rootServiceEntryPoint
+      - rootSpanStatusCode
+      - totalSpansCount
+      - totalErrorSpansCount
+      - hasMissingSpans
+      type: object
+    SpantypesGettableTraceThread:
+      properties:
+        nextCursor:
+          type: string
+        prevCursor:
+          type: string
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesThreadSpan'
+          type: array
+      required:
+      - spans
+      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         endTimestampMillis:
@@ -10158,6 +10345,94 @@ components:
           nullable: true
           type: object
       type: object
+    SpantypesThreadSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        duration_nano:
+          minimum: 0
+          type: integer
+        events:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          type: array
+        has_error:
+          type: boolean
+        kind_string:
+          type: string
+        name:
+          type: string
+        parent_span_id:
+          type: string
+        references:
+          items:
+            $ref: '#/components/schemas/SpantypesOtelSpanRef'
+          type: array
+        resource:
+          additionalProperties:
+            type: string
+          type: object
+        span_id:
+          type: string
+        status_code_string:
+          type: string
+        status_message:
+          type: string
+        time_unix:
+          minimum: 0
+          type: integer
+        trace_id:
+          type: string
+      required:
+      - span_id
+      - trace_id
+      - parent_span_id
+      - name
+      - kind_string
+      - time_unix
+      - duration_nano
+      - has_error
+      - status_code_string
+      - status_message
+      - resource
+      - attributes
+      - events
+      - references
+      type: object
+    SpantypesTraceAISummary:
+      properties:
+        tokens:
+          $ref: '#/components/schemas/SpantypesTraceAITokens'
+        totalCost:
+          type: number
+      required:
+      - tokens
+      type: object
+    SpantypesTraceAITokens:
+      properties:
+        cacheRead:
+          minimum: 0
+          type: integer
+        cacheWrite:
+          minimum: 0
+          type: integer
+        input:
+          minimum: 0
+          type: integer
+        output:
+          minimum: 0
+          type: integer
+        reasoning:
+          minimum: 0
+          type: integer
+      required:
+      - input
+      - output
+      - cacheRead
+      - cacheWrite
+      - reasoning
+      type: object
     SpantypesUpdatableSpanMapper:
       properties:
         config:
@@ -15882,6 +16157,163 @@ paths:
       tags:
       - tracedetail
       x-signoz-stability: alpha
+  /api/v1/traces/{traceID}/summary:
+    get:
+      deprecated: false
+      description: Returns the trace's time range, root span, span and error counts,
+        and whether any spans are missing. AI traces also include token and cost totals.
+      operationId: GetTraceSummary
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceSummary'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get summary for a trace
+      tags:
+      - tracedetail
+      x-signoz-stability: alpha
+  /api/v1/traces/{traceID}/thread:
+    get:
+      deprecated: false
+      description: Returns the spans carrying gen_ai input or output messages in timestamp
+        order. Pass nextCursor as after or prevCursor as before to page, or spanId
+        to open the page around a span.
+      operationId: GetTraceThread
+      parameters:
+      - description: Page size, at most 100. 0 means 20.
+        in: query
+        name: limit
+        schema:
+          description: Page size, at most 100. 0 means 20.
+          type: integer
+      - description: The nextCursor of a page; returns the spans after it. Set only
+          one of after, before and spanId.
+        in: query
+        name: after
+        schema:
+          description: The nextCursor of a page; returns the spans after it. Set only
+            one of after, before and spanId.
+          type: string
+      - description: The prevCursor of a page; returns the spans before it. Set only
+          one of after, before and spanId.
+        in: query
+        name: before
+        schema:
+          description: The prevCursor of a page; returns the spans before it. Set
+            only one of after, before and spanId.
+          type: string
+      - description: Returns the page around this span. Set only one of after, before
+          and spanId.
+        in: query
+        name: spanId
+        schema:
+          description: Returns the page around this span. Set only one of after, before
+            and spanId.
+          type: string
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceThread'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get thread view for a trace
+      tags:
+      - tracedetail
+      x-signoz-stability: alpha
   /api/v1/user/me:
     get:
       deprecated: true

docs/contributing/tests/e2e.md

@@ -86,9 +86,6 @@ tests/
     ├── .env.local             # generated by bootstrap/setup.py (gitignored)
     ├── bootstrap/
     │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
-    ├── drivers/               # the driver kit and one driver per feature
-    │   ├── kit.ts
-    │   └── routing.ts
     ├── fixtures/              # Playwright test fixtures (test.extend) only
     │   └── auth.ts
     ├── helpers/               # function helpers + the constants they share with tests
@@ -115,24 +112,6 @@ These two folders look similar but mean different things:
 
 Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
 
-### Drivers
-
-New suites use a driver rather than loose helpers. A driver is a function that closes over the page and returns the feature's actions and locators. `drivers/kit.ts` turns it into a fixture, so a spec imports one module and never passes a `page` around:
-
-```ts
-import { expect, PATH, test } from '../../drivers/routing';
-
-test('TC-09 RouteTab switches the url', async ({ routing }) => {
-	await routing.goto(PATH.metricsSummary);
-	await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
-});
-```
-
-- `driver(name, build)` adds a test-scoped fixture built on `authedPage`.
-- `seeded(name, open, close)` adds a worker-scoped seed. `open` and `close` run on a throwaway admin page.
-- A driver reuses helpers by calling them, never by reaching for another fixture.
-- `drivers/` is AI-owned: coding agents generate and maintain it with the specs, and `.gitattributes` collapses it in diffs.
-
 ### Extended fixtures
 
 For features needing complex setup (API-seeded data, ruler evaluation waits, cleanup), create domain-specific fixtures that extend `auth`. Group them in `fixtures/<domain>/`.

frontend/__mocks__/uplotMock.ts

@@ -57,6 +57,7 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
+const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -70,6 +71,7 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

frontend/scripts/story-shots.mjs

@@ -417,7 +417,7 @@ for (const theme of themes.length ? themes : [null]) {
 						break;
 					}
 
-					height = needed;
+					height = Math.ceil(needed);
 					await page.setViewportSize({ width: Number(opts.width), height });
 					await page.waitForTimeout(Number(opts.settle));
 				}

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

@@ -4372,6 +4372,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -5372,6 +5378,122 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesHeatmapPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+}
+export interface DashboardtypesScatterPlotAxisDTO {
+	/**
+	 * @type string
+	 * @description Axis title. Empty draws none.
+	 */
+	label?: string;
+	scale?: DashboardtypesAxisScaleDTO;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export interface DashboardtypesScatterPlotAxesDTO {
+	x?: DashboardtypesScatterPlotAxisDTO;
+	y?: DashboardtypesScatterPlotAxisDTO;
+}
+
+/**
+ * @minimum 2
+ * @maximum 40
+ * @nullable
+ */
+export type DashboardtypesPointDiameterDTO = number | null;
+
+/**
+ * @minimum 0.1
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesPointOpacityDTO = number | null;
+
+export interface DashboardtypesScatterPlotPointsDTO {
+	maxSize?: DashboardtypesPointDiameterDTO | null;
+	minSize?: DashboardtypesPointDiameterDTO | null;
+	opacity?: DashboardtypesPointOpacityDTO | null;
+	size?: DashboardtypesPointDiameterDTO | null;
+}
+
+export interface DashboardtypesScatterPlotChartAppearanceDTO {
+	points?: DashboardtypesScatterPlotPointsDTO;
+}
+
+export interface DashboardtypesScatterPlotDimensionsDTO {
+	/**
+	 * @type array,null
+	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values colour dots and drive the legend. Empty colours by every group-by label.
+	 */
+	colorBy?: string[] | null;
+	/**
+	 * @type string
+	 * @description Value column key that scales dot size. Empty draws every dot at the default size.
+	 */
+	sizeBy?: string;
+	/**
+	 * @type string
+	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty uses the first value column.
+	 */
+	x?: string;
+	/**
+	 * @type string
+	 * @description Value column key plotted on the y axis. Empty uses the second value column.
+	 */
+	y?: string;
+}
+
+export interface DashboardtypesScatterPlotPanelSpecDTO {
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	formatting?: DashboardtypesTableFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTOKind {
+	'signoz/TopListPanel' = 'signoz/TopListPanel',
+}
+export interface DashboardtypesTopListPanelSpecDTO {
+	formatting?: DashboardtypesPanelFormattingDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesComparisonThresholdDTO[] | null;
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTO {
+	/**
+	 * @enum signoz/TopListPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTOKind;
+	spec: DashboardtypesTopListPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5382,7 +5504,9 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTopListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6309,6 +6433,8 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
 	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+	'signoz/TopListPanel' = 'signoz/TopListPanel',
 }
 /**
  * @nullable
@@ -11335,6 +11461,82 @@ export interface SpantypesGettableTraceAggregationsDTO {
 	aggregations: SpantypesSpanAggregationResultDTO[];
 }
 
+export interface SpantypesTraceAITokensDTO {
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	cacheRead: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	cacheWrite: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	input: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	output: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	reasoning: number;
+}
+
+export interface SpantypesTraceAISummaryDTO {
+	tokens: SpantypesTraceAITokensDTO;
+	/**
+	 * @type number
+	 */
+	totalCost?: number;
+}
+
+export interface SpantypesGettableTraceSummaryDTO {
+	ai?: SpantypesTraceAISummaryDTO;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	endTimestampMillis: number;
+	/**
+	 * @type boolean
+	 */
+	hasMissingSpans: boolean;
+	/**
+	 * @type string
+	 */
+	rootServiceEntryPoint: string;
+	/**
+	 * @type string
+	 */
+	rootServiceName: string;
+	/**
+	 * @type string
+	 */
+	rootSpanStatusCode: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	startTimestampMillis: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalErrorSpansCount: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalSpansCount: number;
+}
+
 export interface SpantypesOtelSpanRefDTO {
 	/**
 	 * @type string
@@ -11350,6 +11552,86 @@ export interface SpantypesOtelSpanRefDTO {
 	traceId?: string;
 }
 
+export type SpantypesThreadSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesThreadSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesThreadSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes: SpantypesThreadSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	duration_nano: number;
+	/**
+	 * @type array
+	 */
+	events: SpantypesEventDTO[];
+	/**
+	 * @type boolean
+	 */
+	has_error: boolean;
+	/**
+	 * @type string
+	 */
+	kind_string: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	parent_span_id: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
+	/**
+	 * @type object
+	 */
+	resource: SpantypesThreadSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	span_id: string;
+	/**
+	 * @type string
+	 */
+	status_code_string: string;
+	/**
+	 * @type string
+	 */
+	status_message: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix: number;
+	/**
+	 * @type string
+	 */
+	trace_id: string;
+}
+
+export interface SpantypesGettableTraceThreadDTO {
+	/**
+	 * @type string
+	 */
+	nextCursor?: string;
+	/**
+	 * @type string
+	 */
+	prevCursor?: string;
+	/**
+	 * @type array
+	 */
+	spans: SpantypesThreadSpanDTO[];
+}
+
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
 	[key: string]: unknown;
 };
@@ -13023,6 +13305,51 @@ export type GetTraceAggregations200 = {
 	status: string;
 };
 
+export type GetTraceSummaryPathParameters = {
+	traceID: string;
+};
+export type GetTraceSummary200 = {
+	data: SpantypesGettableTraceSummaryDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetTraceThreadPathParameters = {
+	traceID: string;
+};
+export type GetTraceThreadParams = {
+	/**
+	 * @type integer
+	 * @description Page size, at most 100. 0 means 20.
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 * @description The nextCursor of a page; returns the spans after it. Set only one of after, before and spanId.
+	 */
+	after?: string;
+	/**
+	 * @type string
+	 * @description The prevCursor of a page; returns the spans before it. Set only one of after, before and spanId.
+	 */
+	before?: string;
+	/**
+	 * @type string
+	 * @description Returns the page around this span. Set only one of after, before and spanId.
+	 */
+	spanId?: string;
+};
+
+export type GetTraceThread200 = {
+	data: SpantypesGettableTraceThreadDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUserPreferences200 = {
 	/**
 	 * @type array

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

@@ -4,11 +4,17 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import type {
+	InvalidateOptions,
 	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
 } from 'react-query';
 
 import type {
@@ -16,6 +22,11 @@ import type {
 	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
+	GetTraceSummary200,
+	GetTraceSummaryPathParameters,
+	GetTraceThread200,
+	GetTraceThreadParams,
+	GetTraceThreadPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
@@ -27,6 +38,26 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+const withQueryKey = <T extends object, K>(
+	query: T,
+	queryKey: K,
+): T & { queryKey: K } => {
+	const result = { queryKey } as T & { queryKey: K };
+	for (const key of Object.keys(query)) {
+		// The explicit queryKey always wins, matching the previous
+		// `{ ...query, queryKey }` spread where it was set last.
+		if (key === 'queryKey') {
+			continue;
+		}
+		Object.defineProperty(result, key, {
+			enumerable: true,
+			configurable: true,
+			get: () => (query as Record<string, unknown>)[key],
+		});
+	}
+	return result;
+};
+
 /**
  * Computes span aggregations grouped by requested field.
  * @summary Get aggregations for a trace
@@ -127,6 +158,223 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
+/**
+ * Returns the trace's time range, root span, span and error counts, and whether any spans are missing. AI traces also include token and cost totals.
+ * @summary Get summary for a trace
+ */
+export const getTraceSummary = (
+	{ traceID }: GetTraceSummaryPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceSummary200>({
+		url: `/api/v1/traces/${traceID}/summary`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetTraceSummaryQueryKey = ({
+	traceID,
+}: GetTraceSummaryPathParameters) => {
+	return [`/api/v1/traces/${traceID}/summary`] as const;
+};
+
+export const getGetTraceSummaryQueryOptions = <
+	TData = Awaited<ReturnType<typeof getTraceSummary>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceSummaryPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceSummary>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetTraceSummaryQueryKey({ traceID });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getTraceSummary>>> = ({
+		signal,
+	}) => getTraceSummary({ traceID }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: traceID !== null && traceID !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getTraceSummary>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetTraceSummaryQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceSummary>>
+>;
+export type GetTraceSummaryQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get summary for a trace
+ */
+
+export function useGetTraceSummary<
+	TData = Awaited<ReturnType<typeof getTraceSummary>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceSummaryPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceSummary>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetTraceSummaryQueryOptions({ traceID }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get summary for a trace
+ */
+export const invalidateGetTraceSummary = async (
+	queryClient: QueryClient,
+	{ traceID }: GetTraceSummaryPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetTraceSummaryQueryKey({ traceID }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Returns the spans carrying gen_ai input or output messages in timestamp order. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
+ * @summary Get thread view for a trace
+ */
+export const getTraceThread = (
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceThread200>({
+		url: `/api/v1/traces/${traceID}/thread`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetTraceThreadQueryKey = (
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+) => {
+	return [
+		`/api/v1/traces/${traceID}/thread`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getGetTraceThreadQueryOptions = <
+	TData = Awaited<ReturnType<typeof getTraceThread>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceThread>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetTraceThreadQueryKey({ traceID }, params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getTraceThread>>> = ({
+		signal,
+	}) => getTraceThread({ traceID }, params, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: traceID !== null && traceID !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getTraceThread>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetTraceThreadQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceThread>>
+>;
+export type GetTraceThreadQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get thread view for a trace
+ */
+
+export function useGetTraceThread<
+	TData = Awaited<ReturnType<typeof getTraceThread>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getTraceThread>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetTraceThreadQueryOptions(
+		{ traceID },
+		params,
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get thread view for a trace
+ */
+export const invalidateGetTraceThread = async (
+	queryClient: QueryClient,
+	{ traceID }: GetTraceThreadPathParameters,
+	params?: GetTraceThreadParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetTraceThreadQueryKey({ traceID }, params) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * Returns the flamegraph view of spans for a given trace ID.
  * @summary Get flamegraph view for a trace

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

@@ -21,6 +21,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
+	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -904,6 +905,12 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });
 
+describe('mapPanelTypeToRequestType', () => {
+	it('sends a scatter plot as scalar, like a table', () => {
+		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
+	});
+});
+
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(

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

@@ -51,8 +51,10 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
+		case PANEL_TYPES.TOP_LIST:
 			return 'scalar';
 		case PANEL_TYPES.TRACE:
 			return 'trace';
@@ -278,8 +280,10 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
-			panelType === PANEL_TYPES.VALUE);
+			panelType === PANEL_TYPES.VALUE ||
+			panelType === PANEL_TYPES.TOP_LIST);
 
 	if (queryData.dataSource === DataSource.METRICS) {
 		return [

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -72,8 +72,6 @@ interface CustomTimePickerProps {
 	maxTime: number;
 	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
 	isModalTimeSelection?: boolean;
-	/** Lands on the trigger input. Not spread — the component takes no rest props. */
-	'data-testid'?: string;
 }
 
 function CustomTimePicker({
@@ -97,7 +95,6 @@ function CustomTimePicker({
 	minTime,
 	maxTime,
 	isModalTimeSelection = false,
-	'data-testid': dataTestId,
 }: CustomTimePickerProps): JSX.Element {
 	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
 		useState('Select / Enter Time Range');
@@ -599,7 +596,6 @@ function CustomTimePicker({
 				>
 					<Input
 						ref={inputRef}
-						data-testid={dataTestId}
 						autoComplete="off"
 						className={cx(
 							'timeSelection-input',
@@ -686,5 +682,4 @@ CustomTimePicker.defaultProps = {
 	onExitLiveLogs: noop,
 	showLiveLogs: false,
 	showRecentlyUsed: true,
-	'data-testid': undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -180,7 +180,6 @@ function CustomTimePickerPopoverContent({
 						type="text"
 						className="time-btns"
 						key={option.label + option.value}
-						data-testid={`time-chip-${option.value}`}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
@@ -260,7 +259,6 @@ function CustomTimePickerPopoverContent({
 						<Button
 							type="text"
 							key={option.label + option.value}
-							data-testid={`time-option-${option.value}`}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
 								e.preventDefault();

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -42,6 +42,9 @@
 		display: flex;
 		flex-direction: column;
 		padding: 0 16px;
+		// OverlayScrollbar owns the scroll. A native scrollbar here changes the
+		// body width when it toggles and shifts the header grid.
+		overflow: hidden;
 	}
 
 	.title {
@@ -69,7 +72,7 @@
 	}
 
 	.log-detail-drawer__content {
-		height: 100%;
+		min-height: 100%;
 	}
 
 	.log-detail-drawer__log {

frontend/src/components/LogDetail/index.tsx

@@ -5,6 +5,7 @@ import { Drawer, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
@@ -288,148 +289,150 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div
-				className="log-detail-drawer__content"
-				data-log-detail-ignore="true"
-				data-testid="log-detail-drawer"
-			>
-				<div className="log-detail-drawer__log">
-					<LogStateIndicator
-						severityText={log.severity_text}
-						severityNumber={log.severity_number}
-						fontSize={options?.fontSize ?? FontSize.MEDIUM}
-					/>
-					<Tooltip
-						title={removeEscapeCharacters(logBody)}
-						placement="left"
-						mouseLeaveDelay={0}
-					>
-						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-					</Tooltip>
-
-					<div className="log-overflow-shadow">&nbsp;</div>
-				</div>
-
-				<LogHighlights log={log} />
-
-				<div className="log-detail-drawer__section-divider" />
-
-				<div className="tabs-and-search">
-					<ToggleGroupSimple
-						type="single"
-						className="views-tabs"
-						onChange={handleModeChange}
-						value={selectedView}
-						items={[
-							{
-								value: VIEW_TYPES.OVERVIEW,
-								label: (
-									<div className="view-title">
-										<Table size={14} />
-										Overview
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.CONTEXT,
-								label: (
-									<div className="view-title">
-										<TextSelect size={14} />
-										Context
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.INFRAMETRICS,
-								label: (
-									<div className="view-title">
-										<Histogram size="md" />
-										Metrics
-									</div>
-								),
-							},
-						]}
-					/>
-
-					<div className="log-detail-drawer__actions">
-						{selectedView === VIEW_TYPES.CONTEXT && (
-							<Tooltip
-								title="Show Filters"
-								placement="topLeft"
-								aria-label="Show Filters"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									variant="link"
-									color="secondary"
-									size="sm"
-									prefix={<Filter size="lg" />}
-									onClick={handleFilterVisible}
-								/>
-							</Tooltip>
-						)}
-					</div>
-				</div>
-				{isFilterVisible && contextQuery?.builder.queryData[0] && (
-					<div className="log-detail-drawer-query-container">
-						<QuerySearch
-							onChange={(value): void => handleQueryExpressionChange(value, 0)}
-							dataSource={DataSource.LOGS}
-							queryData={contextQuery?.builder.queryData[0]}
-							onRun={handleRunQuery}
+			<OverlayScrollbar style={{ height: '100%' }}>
+				<div
+					className="log-detail-drawer__content"
+					data-log-detail-ignore="true"
+					data-testid="log-detail-drawer"
+				>
+					<div className="log-detail-drawer__log">
+						<LogStateIndicator
+							severityText={log.severity_text}
+							severityNumber={log.severity_number}
+							fontSize={options?.fontSize ?? FontSize.MEDIUM}
 						/>
+						<Tooltip
+							title={removeEscapeCharacters(logBody)}
+							placement="left"
+							mouseLeaveDelay={0}
+						>
+							<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+						</Tooltip>
+
+						<div className="log-overflow-shadow">&nbsp;</div>
 					</div>
-				)}
 
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<Overview
-						logData={log}
-						isListViewPanel={isListViewPanel}
-						handleChangeSelectedView={handleChangeSelectedView}
-						onApplyLogFilter={onApplyLogFilter}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<ContextView
-						log={log}
-						filters={filters}
-						contextQuery={contextQuery}
-						isEdit={isEdit}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.INFRAMETRICS && (
-					<InfraMetrics
-						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-						timestamp={log.timestamp.toString()}
-						dataSource={DataSource.LOGS}
-					/>
-				)}
+					<LogHighlights log={log} />
 
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<div className="log-detail-drawer__footer-hint">
-						<div className="log-detail-drawer__footer-hint-content">
-							<Typography.Text
-								color="muted"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								Use
-							</Typography.Text>
-							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-							<span>/</span>
-							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-							<Typography.Text
-								color="muted"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								to view previous/next log
-							</Typography.Text>
+					<div className="log-detail-drawer__section-divider" />
+
+					<div className="tabs-and-search">
+						<ToggleGroupSimple
+							type="single"
+							className="views-tabs"
+							onChange={handleModeChange}
+							value={selectedView}
+							items={[
+								{
+									value: VIEW_TYPES.OVERVIEW,
+									label: (
+										<div className="view-title">
+											<Table size={14} />
+											Overview
+										</div>
+									),
+								},
+								{
+									value: VIEW_TYPES.CONTEXT,
+									label: (
+										<div className="view-title">
+											<TextSelect size={14} />
+											Context
+										</div>
+									),
+								},
+								{
+									value: VIEW_TYPES.INFRAMETRICS,
+									label: (
+										<div className="view-title">
+											<Histogram size="md" />
+											Metrics
+										</div>
+									),
+								},
+							]}
+						/>
+
+						<div className="log-detail-drawer__actions">
+							{selectedView === VIEW_TYPES.CONTEXT && (
+								<Tooltip
+									title="Show Filters"
+									placement="topLeft"
+									aria-label="Show Filters"
+									mouseLeaveDelay={0}
+								>
+									<Button
+										variant="link"
+										color="secondary"
+										size="sm"
+										prefix={<Filter size="lg" />}
+										onClick={handleFilterVisible}
+									/>
+								</Tooltip>
+							)}
 						</div>
 					</div>
-				)}
-			</div>
+					{isFilterVisible && contextQuery?.builder.queryData[0] && (
+						<div className="log-detail-drawer-query-container">
+							<QuerySearch
+								onChange={(value): void => handleQueryExpressionChange(value, 0)}
+								dataSource={DataSource.LOGS}
+								queryData={contextQuery?.builder.queryData[0]}
+								onRun={handleRunQuery}
+							/>
+						</div>
+					)}
+
+					{selectedView === VIEW_TYPES.OVERVIEW && (
+						<Overview
+							logData={log}
+							isListViewPanel={isListViewPanel}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onApplyLogFilter={onApplyLogFilter}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.CONTEXT && (
+						<ContextView
+							log={log}
+							filters={filters}
+							contextQuery={contextQuery}
+							isEdit={isEdit}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.INFRAMETRICS && (
+						<InfraMetrics
+							clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+							podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+							nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+							hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+							timestamp={log.timestamp.toString()}
+							dataSource={DataSource.LOGS}
+						/>
+					)}
+
+					{selectedView === VIEW_TYPES.OVERVIEW && (
+						<div className="log-detail-drawer__footer-hint">
+							<div className="log-detail-drawer__footer-hint-content">
+								<Typography.Text
+									color="muted"
+									className="log-detail-drawer__footer-hint-text"
+								>
+									Use
+								</Typography.Text>
+								<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+								<span>/</span>
+								<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+								<Typography.Text
+									color="muted"
+									className="log-detail-drawer__footer-hint-text"
+								>
+									to view previous/next log
+								</Typography.Text>
+							</div>
+						</div>
+					)}
+				</div>
+			</OverlayScrollbar>
 		</Drawer>
 	);
 }

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -21,7 +21,6 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -30,6 +29,7 @@ import { capitalize, isEmpty } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import TruncatedTooltip from './TruncatedTooltip';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	ALL_SELECTED_VALUE,
@@ -729,65 +729,71 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			};
 
 			return (
-				<div
+				<TruncatedTooltip
 					key={option.value || `option-${index}`}
-					id={optionId}
-					ref={(el): void => {
-						if (index !== undefined) {
-							optionRefs.current[index] = el;
-						}
-					}}
-					className={cx('option-item', {
-						selected: isSelected,
-						active: isActive,
-					})}
-					onKeyDown={(e): void => {
-						if ((e.key === 'Enter' || e.key === SPACEKEY) && isActive) {
-							e.stopPropagation();
-							e.preventDefault();
-							handleItemSelection();
-						}
-					}}
-					onMouseEnter={(): void => {
-						setActiveIndex(index ?? -1);
-						setActiveChipIndex(-1); // Clear chip selection when hovering ALL option
-					}}
-					role="option"
-					aria-selected={isSelected}
-					aria-disabled={option.disabled}
-					tabIndex={isActive ? 0 : -1}
+					title={String(option.label || '')}
 				>
-					<Checkbox
-						value={isSelected}
-						className="option-checkbox"
-						onClick={(e): void => selectFromButton(e, 'checkbox')}
-					>
-						<div className="option-content">
-							<Typography.Text truncate={1} className="option-label-text">
-								{highlightMatchedText(String(option.label || ''), searchText)}
-							</Typography.Text>
-							{(option.type === 'custom' || option.type === 'regex') && (
-								<div className="option-badge">{capitalize(option.type)}</div>
-							)}
-							{option.value && ensureValidOption(option.value) && (
-								<Button
-									type="text"
-									className="only-btn"
-									onClick={(e): void => selectFromButton(e, 'option')}
-								>
-									{currentToggleTagValue({ option: option.value })}
-								</Button>
-							)}
-							<Button
-								type="text"
-								className="toggle-btn"
+					{(textRef): JSX.Element => (
+						<div
+							id={optionId}
+							ref={(el): void => {
+								if (index !== undefined) {
+									optionRefs.current[index] = el;
+								}
+							}}
+							className={cx('option-item', {
+								selected: isSelected,
+								active: isActive,
+							})}
+							onKeyDown={(e): void => {
+								if ((e.key === 'Enter' || e.key === SPACEKEY) && isActive) {
+									e.stopPropagation();
+									e.preventDefault();
+									handleItemSelection();
+								}
+							}}
+							onMouseEnter={(): void => {
+								setActiveIndex(index ?? -1);
+								setActiveChipIndex(-1); // Clear chip selection when hovering ALL option
+							}}
+							role="option"
+							aria-selected={isSelected}
+							aria-disabled={option.disabled}
+							tabIndex={isActive ? 0 : -1}
+						>
+							<Checkbox
+								value={isSelected}
+								className="option-checkbox"
 								onClick={(e): void => selectFromButton(e, 'checkbox')}
 							>
-								Toggle
-							</Button>
+								<div className="option-content">
+									<span ref={textRef} className="option-label-text">
+										{highlightMatchedText(String(option.label || ''), searchText)}
+									</span>
+									{(option.type === 'custom' || option.type === 'regex') && (
+										<div className="option-badge">{capitalize(option.type)}</div>
+									)}
+									{option.value && ensureValidOption(option.value) && (
+										<Button
+											type="text"
+											className="only-btn"
+											onClick={(e): void => selectFromButton(e, 'option')}
+										>
+											{currentToggleTagValue({ option: option.value })}
+										</Button>
+									)}
+									<Button
+										type="text"
+										className="toggle-btn"
+										onClick={(e): void => selectFromButton(e, 'checkbox')}
+									>
+										Toggle
+									</Button>
+								</div>
+							</Checkbox>
 						</div>
-					</Checkbox>
-				</div>
+					)}
+				</TruncatedTooltip>
 			);
 		},
 		[

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,6 +16,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
@@ -25,6 +26,7 @@ import { capitalize, isEmpty } from 'lodash-es';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import TruncatedTooltip from './TruncatedTooltip';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
@@ -207,41 +209,46 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const optionId = `option-${index}`;
 
 			return (
-				<div
-					key={option.value}
-					id={optionId}
-					ref={(el): void => {
-						if (index !== undefined) {
-							optionRefs.current[index] = el;
-						}
-					}}
-					className={cx('option-item', {
-						selected: isSelected,
-						active: isActive,
-					})}
-					onClick={(e): void => {
-						e.stopPropagation();
-						handleSelection();
-					}}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter' || e.key === SPACEKEY) {
-							e.preventDefault();
-							handleSelection();
-						}
-					}}
-					onMouseEnter={(): void => setActiveOptionIndex(index || -1)}
-					role="option"
-					aria-selected={isSelected}
-					aria-disabled={option.disabled}
-					tabIndex={isActive ? 0 : -1}
-				>
-					<div className="option-content">
-						<div>{highlightMatchedText(String(option.label || ''), searchText)}</div>
-						{option.type === 'custom' && (
-							<div className="option-badge">{capitalize(option.type)}</div>
-						)}
-					</div>
-				</div>
+				<TruncatedTooltip key={option.value} title={String(option.label || '')}>
+					{(textRef): JSX.Element => (
+						<div
+							id={optionId}
+							ref={(el): void => {
+								if (index !== undefined) {
+									optionRefs.current[index] = el;
+								}
+							}}
+							className={cx('option-item', {
+								selected: isSelected,
+								active: isActive,
+							})}
+							onClick={(e): void => {
+								e.stopPropagation();
+								handleSelection();
+							}}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter' || e.key === SPACEKEY) {
+									e.preventDefault();
+									handleSelection();
+								}
+							}}
+							onMouseEnter={(): void => setActiveOptionIndex(index || -1)}
+							role="option"
+							aria-selected={isSelected}
+							aria-disabled={option.disabled}
+							tabIndex={isActive ? 0 : -1}
+						>
+							<div className="option-content">
+								<span ref={textRef} className="option-label-text">
+									{highlightMatchedText(String(option.label || ''), searchText)}
+								</span>
+								{option.type === 'custom' && (
+									<div className="option-badge">{capitalize(option.type)}</div>
+								)}
+							</div>
+						</div>
+					)}
+				</TruncatedTooltip>
 			);
 		},
 		[highlightMatchedText, searchText, onChange, activeOptionIndex],
@@ -702,50 +709,67 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	// ===== Final Processing =====
 
 	// Apply highlight to matched text in options
-	const optionsWithHighlight = useMemo(
-		() =>
-			options
-				?.filter((option) =>
-					String(option.label || '')
-						.toLowerCase()
-						.includes(searchText.toLowerCase()),
-				)
-				?.map((option) => ({
-					...option,
-					label: highlightMatchedText(String(option.label || ''), searchText),
-				})),
-		[options, searchText, highlightMatchedText],
-	);
+	const optionsWithHighlight = useMemo(() => {
+		const matching =
+			options?.filter((option) =>
+				String(option.label || '')
+					.toLowerCase()
+					.includes(searchText.toLowerCase()),
+			) ?? [];
+
+		// antd shows a value with no matching option as a bare string, so keep the
+		// selected value listed to render it through the tooltip label below.
+		return (
+			isEmpty(value)
+				? matching
+				: prioritizeOrAddOptionForSingleSelect(matching, value)
+		).map((option) => ({
+			...option,
+			// Rendered as the selected value in the closed control.
+			label: (
+				<TruncatedTooltip title={String(option.label || '')} side="bottom">
+					{(textRef): JSX.Element => (
+						<span ref={textRef} className="option-label-text">
+							{highlightMatchedText(String(option.label || ''), searchText)}
+						</span>
+					)}
+				</TruncatedTooltip>
+			),
+		}));
+	}, [options, searchText, value, highlightMatchedText]);
 
 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-select', className)}
-			placeholder={placeholder}
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
-			open={isOpen}
-			options={optionsWithHighlight}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={popupMatchSelectWidth}
-			allowClear={allowClear ? { clearIcon } : false}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-select-dropdown-container', popupClassName)}
-			listHeight={300}
-			placement={placement}
-			optionFilterProp="label"
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			{...rest}
-		/>
+		// Self-provided so label tooltips work wherever this select is rendered.
+		<TooltipProvider>
+			<Select
+				ref={selectRef}
+				className={cx('custom-select', className)}
+				placeholder={placeholder}
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={value}
+				onChange={onChange}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				options={optionsWithHighlight}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={popupMatchSelectWidth}
+				allowClear={allowClear ? { clearIcon } : false}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-select-dropdown-container', popupClassName)}
+				listHeight={300}
+				placement={placement}
+				optionFilterProp="label"
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				{...rest}
+			/>
+		</TooltipProvider>
 	);
 };
 

frontend/src/components/NewSelect/TruncatedTooltip.module.scss

@@ -0,0 +1,4 @@
+// Above the antd select popup it is shown from.
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}

frontend/src/components/NewSelect/TruncatedTooltip.tsx

@@ -0,0 +1,41 @@
+import { ReactElement, RefObject, useRef, useState } from 'react';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+import styles from './TruncatedTooltip.module.scss';
+
+interface TruncatedTooltipProps {
+	title: string;
+	side?: TooltipSimpleProps['side'];
+	/** Renders the trigger; attach the ref to the element that may truncate. */
+	children: (textRef: RefObject<HTMLSpanElement>) => ReactElement;
+}
+
+function TruncatedTooltip({
+	title,
+	side = 'right',
+	children,
+}: TruncatedTooltipProps): JSX.Element {
+	const textRef = useRef<HTMLSpanElement>(null);
+	const [open, setOpen] = useState(false);
+
+	const handleOpenChange = (next: boolean): void => {
+		const el = textRef.current;
+		setOpen(next && !!el && el.scrollWidth > el.clientWidth);
+	};
+
+	return (
+		<TooltipSimple
+			title={title}
+			side={side}
+			arrow
+			delayDuration={300}
+			open={open}
+			onOpenChange={handleOpenChange}
+			tooltipContentProps={{ className: styles.tooltipContent }}
+		>
+			{children(textRef)}
+		</TooltipSimple>
+	);
+}
+
+export default TruncatedTooltip;

frontend/src/components/NewSelect/__test__/CustomSelect.selectedTooltip.test.tsx

@@ -0,0 +1,34 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CustomSelect from '../CustomSelect';
+
+const LABEL = '/oteldemo.RecommendationService/ListRecommendations';
+
+describe('CustomSelect selected value tooltip', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		jest.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(400);
+		jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(200);
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+		jest.restoreAllMocks();
+	});
+
+	it.each([
+		['listed in the options', [{ label: LABEL, value: LABEL }]],
+		['missing from the options', [{ label: 'other', value: 'other' }]],
+	])('reveals a truncated selected value %s on hover', async (_, options) => {
+		render(<CustomSelect options={options} value={LABEL} />);
+
+		const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+		await user.hover(screen.getByText(LABEL));
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		expect(screen.getByRole('tooltip')).toHaveTextContent(LABEL);
+	});
+});

frontend/src/components/NewSelect/__test__/TruncatedTooltip.test.tsx

@@ -0,0 +1,63 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+
+import TruncatedTooltip from '../TruncatedTooltip';
+
+const LABEL = '/oteldemo.RecommendationService/ListRecommendations';
+
+function renderRow(scrollWidth: number, clientWidth: number): void {
+	jest
+		.spyOn(HTMLElement.prototype, 'scrollWidth', 'get')
+		.mockReturnValue(scrollWidth);
+	jest
+		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+		.mockReturnValue(clientWidth);
+
+	render(
+		<TooltipProvider>
+			<TruncatedTooltip title={LABEL}>
+				{(textRef): JSX.Element => (
+					<div data-testid="row">
+						<span ref={textRef}>{LABEL}</span>
+					</div>
+				)}
+			</TruncatedTooltip>
+		</TooltipProvider>,
+	);
+}
+
+async function hover(element: HTMLElement): Promise<void> {
+	const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+	await user.hover(element);
+	act(() => {
+		jest.advanceTimersByTime(500);
+	});
+}
+
+describe('TruncatedTooltip', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+		jest.restoreAllMocks();
+	});
+
+	it('reveals truncated text when its row is hovered', async () => {
+		renderRow(400, 200);
+
+		await hover(screen.getByTestId('row'));
+
+		expect(screen.getByRole('tooltip')).toHaveTextContent(LABEL);
+	});
+
+	it('shows no tooltip when the text fits', async () => {
+		renderRow(200, 200);
+
+		await hover(screen.getByTestId('row'));
+
+		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/NewSelect/stories/NewSelect.stories.tsx

@@ -135,6 +135,51 @@ const LONG_LABEL_OPTION = {
 	value: 'checkout-payment-authorisation',
 };
 
+/** Truncation: hovering a cut-off option reveals its full label beside the row. */
+export const TruncatedOption: Story = {
+	args: { options: [LONG_LABEL_OPTION, ...options] },
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await userEvent.hover(
+			await screen.findByRole('option', { name: LONG_LABEL_OPTION.label }),
+		);
+		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
+	},
+};
+
+/** Truncation: hovering a cut-off selected value reveals it in full. */
+export const TruncatedValue: Story = {
+	args: {
+		options: [LONG_LABEL_OPTION, ...options],
+		value: LONG_LABEL_OPTION.value,
+	},
+	play: async (): Promise<void> => {
+		await userEvent.hover(await screen.findByText(LONG_LABEL_OPTION.label));
+		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
+	},
+};
+
+/** Truncation: a multi-select option reveals its full label the same way. */
+export const MultiTruncatedOption: Story = {
+	render: (): JSX.Element => (
+		<CustomMultiSelect
+			aria-label="Services"
+			options={[LONG_LABEL_OPTION, ...options]}
+		/>
+	),
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Services' }),
+		);
+		await userEvent.hover(
+			await screen.findByRole('option', { name: LONG_LABEL_OPTION.label }),
+		);
+		await screen.findByRole('tooltip', { name: LONG_LABEL_OPTION.label });
+	},
+};
+
 /**
  * Every tooltip the select renders, held open: the selected chip revealing the
  * option label it was cut from. Nothing bounds that label, so the chip is given

frontend/src/components/NewSelect/styles.scss

@@ -29,6 +29,13 @@ $custom-border-color: #2c3044;
 		background-color: var(--l2-background);
 		color: color-mix(in srgb, var(--border) 70%, transparent);
 	}
+
+	// The search input overlays the selected value; lift the value above it while
+	// closed so hovers reach its tooltip. Clicks still open the select and focus the input.
+	&:not(.ant-select-open) .ant-select-selection-item {
+		position: relative;
+		z-index: 1;
+	}
 }
 
 // Keep chip styles ONLY in the multi-select
@@ -223,6 +230,33 @@ $custom-border-color: #2c3044;
 	}
 }
 
+// Ellipsized option label; also the selected value in the closed single select.
+.option-label-text {
+	display: block;
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+// overscroll-behavior only holds on a box that overflows; a 1px sentinel past
+// the bottom makes even a short list overflow, so the wheel never scrolls the page.
+.custom-select-dropdown,
+.custom-multiselect-dropdown {
+	position: relative;
+	overscroll-behavior: contain;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 1px;
+		height: 1px;
+	}
+}
+
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;

frontend/src/components/NotFound/__snapshots__/NotFound.test.tsx.snap

@@ -98,7 +98,6 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
 
 <div
     class="c0"
-    data-testid="not-found"
   >
     <img
       alt="not-found"

frontend/src/components/NotFound/index.tsx

@@ -6,7 +6,7 @@ import { Button, Container, Text, TextContainer } from './styles';
 
 function NotFound({ text = defaultText }: Props): JSX.Element {
 	return (
-		<Container data-testid="not-found">
+		<Container>
 			<NotFoundImage />
 
 			<TextContainer>

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

@@ -518,7 +518,10 @@ function QueryAddOns({
 								type="number"
 								onChange={handleChangeLimit}
 								initialValue={query?.limit ?? undefined}
-								placeholder="Enter limit"
+								placeholder={
+									resolvedFields.get(QueryBuilderField.Limit)?.placeholder ??
+									'Enter limit'
+								}
 								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
 								closeIcon={<ChevronUp size={16} />}
 							/>

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

@@ -43,7 +43,10 @@ function QueryAggregationOptions({
 
 		if (
 			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
+			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.SCATTER ||
+				panelType === PANEL_TYPES.PIE ||
+				panelType === PANEL_TYPES.TOP_LIST)
 		) {
 			return { hidden: true, disabled: false, reason: undefined };
 		}
@@ -65,7 +68,9 @@ function QueryAggregationOptions({
 					onChange={onChange}
 					queryData={queryData}
 					maxAggregations={
-						panelType === PANEL_TYPES.VALUE || panelType === PANEL_TYPES.PIE
+						panelType === PANEL_TYPES.VALUE ||
+						panelType === PANEL_TYPES.PIE ||
+						panelType === PANEL_TYPES.TOP_LIST
 							? 1
 							: undefined
 					}

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

@@ -95,8 +95,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 		() =>
 			dataSource === DataSource.METRICS &&
 			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.SCATTER ||
 				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
+				panelType === PANEL_TYPES.VALUE ||
+				panelType === PANEL_TYPES.TOP_LIST),
 		[dataSource, panelType],
 	);
 

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

@@ -9,6 +9,7 @@ import {
 } from 'tests/test-utils';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
+import { QueryBuilderField } from '../queryBuilderFields.types';
 import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
 
 // Mocks: only what is required for this component to render and for us to assert handler calls
@@ -169,6 +170,33 @@ describe('QueryAddOns', () => {
 		expect(mockHandleChangeQueryData).toHaveBeenCalledWith('limit', 10);
 	});
 
+	it('shows the configured limit placeholder', () => {
+		render(
+			<QueryAddOns
+				query={baseQuery()}
+				version="v5"
+				isRawQuery={false}
+				showReduceTo={false}
+				panelType={PANEL_TYPES.SCATTER}
+				index={0}
+				fieldsConfig={{
+					[QueryBuilderField.Limit]: {
+						state: 'defaulted',
+						placeholder: 'Default 10,000',
+					},
+				}}
+				isForTraceOperator={false}
+			/>,
+		);
+
+		fireEvent.click(screen.getByTestId('query-add-on-limit'));
+
+		expect(screen.getByTestId('input-Limit')).toHaveAttribute(
+			'placeholder',
+			'Default 10,000',
+		);
+	});
+
 	it('auto-opens Order By and Limit when present in query', () => {
 		const query = baseQuery({
 			orderBy: [{ columnName: 'duration', order: 'desc' }],

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

@@ -0,0 +1,45 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { render, screen } from 'tests/test-utils';
+import type { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QueryAggregationOptions from '../QueryV2/QueryAggregation/QueryAggregation';
+
+jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+const queryData = initialQueriesMap.traces.builder
+	.queryData[0] as IBuilderQuery;
+
+function renderFor(panelType: PANEL_TYPES, dataSource: DataSource): void {
+	render(
+		<QueryAggregationOptions
+			dataSource={dataSource}
+			panelType={panelType}
+			onAggregationIntervalChange={jest.fn()}
+			queryData={queryData}
+		/>,
+	);
+}
+
+describe('QueryAggregationOptions step interval', () => {
+	it.each([PANEL_TYPES.TABLE, PANEL_TYPES.SCATTER, PANEL_TYPES.PIE])(
+		'is hidden for a %s panel over traces, which reduces the whole window',
+		(panelType) => {
+			renderFor(panelType, DataSource.TRACES);
+			expect(screen.queryByText('every')).not.toBeInTheDocument();
+		},
+	);
+
+	it('stays for a scatter plot over metrics, where it sets the series step', () => {
+		renderFor(PANEL_TYPES.SCATTER, DataSource.METRICS);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+
+	it('stays for a time series over traces', () => {
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+});

frontend/src/components/QueryBuilderV2/__tests__/queryBuilderFields.utils.test.ts

@@ -57,6 +57,19 @@ describe('resolveQueryBuilderField', () => {
 		expect(resolved.hidden).toBe(false);
 	});
 
+	it('keeps a defaulted field as is, carrying its placeholder', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
+			[QueryBuilderField.Limit]: { state: 'defaulted', placeholder: 'Default 10' },
+		});
+
+		expect(resolved).toStrictEqual({
+			hidden: false,
+			disabled: false,
+			pinned: false,
+			placeholder: 'Default 10',
+		});
+	});
+
 	it('only ever resolves one state at a time', () => {
 		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
 			[QueryBuilderField.Limit]: { state: 'disabled', reason: 'why' },

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -22,8 +22,12 @@ export enum QueryBuilderField {
 	AdditionalQueries = 'additional_queries',
 }
 
-/** `reason` is required on `disabled`: an inert control the user can see has to explain itself. */
+/**
+ * `reason` is required on `disabled`: an inert control the user can see has to explain itself.
+ * `defaulted` leaves the field as is; its placeholder names the value an empty field falls back to.
+ */
 export type QueryBuilderFieldRule =
+	| { state: 'defaulted'; placeholder: string }
 	| { state: 'hidden' }
 	| { state: 'disabled'; reason: string }
 	| { state: 'pinned' };

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -10,6 +10,7 @@ export interface ResolvedQueryBuilderField {
 	reason?: string;
 	/** Rendered open, not dismissable, and kept out of the add-on toggle bar. */
 	pinned: boolean;
+	placeholder?: string;
 }
 
 const AVAILABLE: ResolvedQueryBuilderField = {
@@ -20,6 +21,8 @@ const AVAILABLE: ResolvedQueryBuilderField = {
 
 function fromRule(rule: QueryBuilderFieldRule): ResolvedQueryBuilderField {
 	switch (rule.state) {
+		case 'defaulted':
+			return { ...AVAILABLE, placeholder: rule.placeholder };
 		case 'hidden':
 			return { hidden: true, disabled: false, pinned: false };
 		case 'disabled':

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

@@ -12,6 +12,7 @@
 		overflow: visible;
 		position: relative;
 		align-self: stretch;
+		clip-path: inset(0 -100vw 0 0);
 	}
 }
 

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -57,6 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showFilterCollapse = true,
 		showQueryName = true,
 		useFieldApis,
+		savedViewsHeader,
 	} = props;
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 	const [params, setParams] = useApiMonitoringParams();
@@ -379,6 +380,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
+				{savedViewsHeader}
 				{source !== QuickFiltersSource.INFRA_MONITORING && (
 					<section className="header">
 						{renderLeftActions()}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -8,9 +8,7 @@
 	overflow: hidden;
 }
 
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
+.sidebar {
 	width: 280px;
 	flex-shrink: 0;
 	display: flex;
@@ -21,6 +19,44 @@
 	z-index: 2;
 }
 
+.savedViews {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--l1-background);
+	border-right: 1px solid var(--l1-border);
+}
+
+.quickFilters {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	background: var(--l1-background);
+	transition: transform 0.2s ease-in-out;
+	z-index: 1;
+
+	&.isOpen {
+		transform: translateX(100%);
+	}
+}
+
+// No quick filters: the header sits in flow and the list stays under it
+.isStatic {
+	border-right: 1px solid var(--l1-border);
+
+	.quickFilters {
+		position: static;
+		flex-shrink: 0;
+	}
+
+	.savedViews {
+		border-right: 0;
+	}
+}
+
 // Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
 // `height: 100%`), which owns the scrolling.
 .content {
@@ -31,3 +67,7 @@
 	flex-direction: column;
 	overflow: hidden;
 }
+
+.contentInner {
+	height: 100%;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,6 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode, useState } from 'react';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
+import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
 
@@ -12,8 +15,15 @@ type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
 	ComponentProps<typeof QuickFilters>
 >;
 
+// What the page configures; the layout adds the open / close wiring.
+type SavedViewsElementProps = Omit<
+	ComponentProps<typeof SavedViewsPanel>,
+	'onClose'
+>;
+
 export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
+	quickFilterProps?: QuickFiltersElementProps;
+	savedViewProps?: SavedViewsElementProps;
 	showFilters: boolean;
 	className?: string;
 	contentClassName?: string;
@@ -23,20 +33,60 @@ export interface QuickFiltersLayoutProps {
 
 function QuickFiltersLayout({
 	quickFilterProps,
+	savedViewProps,
 	showFilters,
 	className,
 	contentClassName,
 	testId,
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
+	const [isViewsOpen, setIsViewsOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
+
+	const hasQuickFilters = !!quickFilterProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
+
+	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
+
+	const isPanelPinned = hasSavedViews && !hasQuickFilters;
+
+	const isSliding = hasQuickFilters && isViewsOpen;
+
+	const savedViewsHeader = hasSavedViews ? (
+		<SavedViewsHeader
+			{...savedViewProps}
+			onOpenViews={isPanelPinned ? undefined : (): void => setIsViewsOpen(true)}
+		/>
+	) : undefined;
+
 	return (
 		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
+			{showSidebar && (
 				<aside
-					className={styles.filters}
+					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
 					data-testid="quick-filters-layout-filters"
 				>
-					<QuickFilters {...quickFilterProps} />
+					<div
+						className={cx(styles.quickFilters, { [styles.isOpen]: isSliding })}
+						data-testid="quick-filters-layout-drawer"
+					>
+						{hasQuickFilters ? (
+							<QuickFilters
+								{...quickFilterProps}
+								savedViewsHeader={savedViewsHeader}
+							/>
+						) : (
+							savedViewsHeader
+						)}
+					</div>
+					<div className={styles.savedViews}>
+						{hasSavedViews && (isPanelPinned || isViewsOpen) && (
+							<SavedViewsPanel
+								{...savedViewProps}
+								onClose={isPanelPinned ? undefined : (): void => setIsViewsOpen(false)}
+							/>
+						)}
+					</div>
 				</aside>
 			)}
 			<section
@@ -44,7 +94,7 @@ function QuickFiltersLayout({
 				data-testid="quick-filters-layout-content"
 			>
 				<OverlayScrollbar>
-					<div>{children}</div>
+					<div className={styles.contentInner}>{children}</div>
 				</OverlayScrollbar>
 			</section>
 		</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,4 +1,6 @@
-import { render, screen } from 'tests/test-utils';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { render, screen, userEvent } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
 import QuickFiltersLayout from '../QuickFiltersLayout';
@@ -7,15 +9,33 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	__esModule: true,
 	default: {
 		layout: 'layout',
-		filters: 'filters',
+		sidebar: 'sidebar',
+		isStatic: 'isStatic',
+		savedViews: 'savedViews',
+		quickFilters: 'quickFilters',
+		isOpen: 'isOpen',
 		content: 'content',
+		contentInner: 'contentInner',
 	},
 }));
 
+jest.mock('hooks/useSavedViewEnabled', () => ({
+	useSavedViewEnabled: jest.fn(() => true),
+}));
+
 jest.mock('../../QuickFilters', () => ({
 	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
+	default: ({
+		source,
+		savedViewsHeader,
+	}: {
+		source: string;
+		savedViewsHeader?: React.ReactNode;
+	}): JSX.Element => (
+		<div data-testid="quick-filters">
+			{savedViewsHeader}
+			{source}
+		</div>
 	),
 }));
 
@@ -23,8 +43,16 @@ const quickFilterProps = {
 	source: QuickFiltersSource.TRACES_EXPLORER,
 	handleFilterVisibilityChange: jest.fn(),
 };
+const savedViewProps = { source: SavedviewtypesSourceDTO.traces };
+
+const drawer = (): HTMLElement =>
+	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
+	beforeEach(() => {
+		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
+	});
+
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -40,11 +68,16 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
 			'content',
 		);
+		expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
 	});
 
 	it('does not render the filters pane when showFilters is false', () => {
 		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+			<QuickFiltersLayout
+				showFilters={false}
+				quickFilterProps={quickFilterProps}
+				savedViewProps={savedViewProps}
+			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
@@ -56,24 +89,138 @@ describe('QuickFiltersLayout', () => {
 		expect(screen.getByText('content')).toBeInTheDocument();
 	});
 
+	it('renders no sidebar at all without quick filters or saved views', () => {
+		render(
+			<QuickFiltersLayout showFilters>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
 	it('merges classNames onto the root and content panes', () => {
 		render(
 			<QuickFiltersLayout
 				showFilters
 				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
+				className="root-extra"
+				contentClassName="content-extra"
+				testId="layout"
 			>
 				<div>content</div>
 			</QuickFiltersLayout>,
 		);
 
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('layout')).toHaveClass('layout', 'root-extra');
 		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
 			'content',
-			'page-content',
+			'content-extra',
 		);
 	});
+
+	describe('saved views', () => {
+		it('ignores savedViewProps while the flag is off', () => {
+			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
+			const { unmount } = render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+
+			// Saved views only, so nothing is left to show.
+			unmount();
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			expect(
+				screen.queryByTestId('quick-filters-layout-filters'),
+			).not.toBeInTheDocument();
+		});
+
+		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			const user = userEvent.setup();
+			const quickFilters = screen.getByTestId('quick-filters');
+
+			expect(quickFilters).toContainElement(
+				screen.getByTestId('saved-views-header'),
+			);
+			expect(drawer()).toContainElement(quickFilters);
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+
+			await user.click(screen.getByTestId('saved-views-open'));
+
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(drawer()).toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+
+			await user.click(screen.getByTestId('saved-views-close'));
+
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+			expect(screen.getByTestId('quick-filters')).toBe(quickFilters);
+		});
+
+		it('hands the source to the header and the panel', async () => {
+			render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('saved-views-header')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+			await userEvent.setup().click(screen.getByTestId('saved-views-open'));
+			expect(screen.getByTestId('saved-views-panel')).toHaveAttribute(
+				'data-source',
+				SavedviewtypesSourceDTO.traces,
+			);
+		});
+
+		it('without quick filters: static sidebar, header on top, list always on screen with no open or close controls', () => {
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			const sidebar = screen.getByTestId('quick-filters-layout-filters');
+			expect(sidebar).toHaveClass('isStatic');
+			expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
+			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-close')).not.toBeInTheDocument();
+			expect(drawer()).not.toHaveClass('isOpen');
+		});
+	});
 });

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -8,12 +8,20 @@
 	width: 342px;
 	height: 100%;
 	background: var(--l1-background);
-	transition: width 0.05s ease-in-out;
+	border-right: 1px solid var(--l1-border);
 	overflow: hidden;
 	color: var(--l1-foreground);
+	transition:
+		transform 0.2s ease-in-out,
+		visibility 0s;
 
 	&.hidden {
-		width: 0;
+		transform: translateX(-100%);
+		visibility: hidden;
+		pointer-events: none;
+		transition:
+			transform 0.2s ease-in-out,
+			visibility 0s 0.2s;
 	}
 	.qf-header {
 		display: flex;

frontend/src/components/QuickFilters/types.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -61,6 +62,7 @@ export interface IQuickFiltersProps {
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
 	useFieldApis?: QuickFilterCheckboxUseFieldApis;
+	savedViewsHeader?: ReactNode;
 }
 
 export enum QuickFiltersSource {

frontend/src/components/TanStackTableView/TanStackRowCell.tsx

@@ -35,8 +35,7 @@ function TanStackRowCellInner<TData>({
 		<td
 			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
 			data-single-column={hasSingleColumn || undefined}
-			// While loading, rowData may be a placeholder ({ id: 'skeleton-N' }).
-			onClick={showSkeleton ? undefined : onClick}
+			onClick={onClick}
 		>
 			{showSkeleton ? (
 				<Skeleton.Input

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

@@ -83,18 +83,6 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.getByRole('table')).toBeInTheDocument();
 		});
 
-		it('does not call onRowClick for skeleton rows', async () => {
-			const user = userEvent.setup();
-			const onRowClick = jest.fn();
-			renderTanStackTable({
-				props: { data: [], isLoading: true, onRowClick },
-			});
-
-			await user.click(screen.getAllByRole('cell')[0]);
-
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
 		it('shows loading spinner for infinite scroll when loading', () => {
 			renderTanStackTable({
 				props: { isLoading: true, onEndReached: jest.fn() },

frontend/src/constants/panelTypes.ts

@@ -34,8 +34,10 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// V2-only kind; it renders through the V2 panel registry.
 		[PANEL_TYPES.HEATMAP]: null,
+		[PANEL_TYPES.TOP_LIST]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
+		[PANEL_TYPES.SCATTER]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -337,9 +337,11 @@ export enum PANEL_TYPES {
 	TRACE = 'trace',
 	BAR = 'bar',
 	AREA = 'area',
+	SCATTER = 'scatter',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	HEATMAP = 'heatmap',
+	TOP_LIST = 'top_list',
 	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -5,7 +5,7 @@ import {
 	InframonitoringtypesHostRecordDTO,
 	InframonitoringtypesHostStatusDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/types';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';

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

@@ -2,6 +2,13 @@
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-5);
+
+	// A block span leaves the icon on the text baseline, a couple of pixels
+	// above the centre of the row it sits in
+	[data-slot='icon'] {
+		display: inline-flex;
+		align-items: center;
+	}
 }
 
 .infoIcon {

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

@@ -0,0 +1,78 @@
+import { rest } from 'msw';
+
+import { toggleControl } from '@/storybook/controls/controls';
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+export const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
+const POD_NAME = 'app-demo-loadgenerator-579fbdd749-q5kgd';
+export const NODE_NAME = 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7';
+
+const POD_META = {
+	'k8s.pod.uid': POD_UID,
+	'k8s.pod.name': POD_NAME,
+	'k8s.namespace.name': 'generator',
+	'k8s.cluster.name': 'mgmt',
+	'k8s.node.name': NODE_NAME,
+	'k8s.deployment.name': 'app-demo-loadgenerator',
+};
+
+const podRecord = {
+	podUID: POD_UID,
+	podCPU: 0.92,
+	podCPURequest: 31,
+	podCPULimit: 30.7,
+	podMemory: 148 * 1024 * 1024,
+	podMemoryRequest: 42,
+	podMemoryLimit: 38,
+	podStatus: 'running',
+	podRestarts: 0,
+	podAge: 49_000_000,
+	meta: POD_META,
+};
+
+const container = {
+	containerName: 'loadgenerator',
+	podName: POD_NAME,
+	status: 'running',
+	ready: true,
+	restarts: 0,
+	meta: POD_META,
+};
+
+const list = (records: unknown[]): Record<string, unknown> => ({
+	status: 'success',
+	data: { type: 'list', records, total: records.length },
+});
+
+export const drawerMocks = defineStoryMocks({
+	controls: {
+		openedFromANode: toggleControl('Opened from a node', {
+			group: 'Drawer',
+			value: true,
+		}),
+	},
+	handlers: () => [
+		rest.post('http://localhost/api/v2/infra_monitoring/pods', (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(list([podRecord]))),
+		),
+
+		rest.post(
+			'http://localhost/api/v2/infra_monitoring/kube_containers',
+			(_req, res, ctx) => res(ctx.status(200), ctx.json(list([container]))),
+		),
+
+		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+
+		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+	],
+});

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import { podEntityConfig } from '../Pods/entity.config';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import K8sBaseDetails from './K8sBaseDetails';
+import {
+	drawerMocks,
+	NODE_NAME,
+	POD_UID,
+} from './K8sBaseDetails.stories.mocks';
+import type { K8sBaseDetailsProps } from './types';
+import {
+	getDrawerHistoryDepth,
+	pushDrawerHistory,
+	resetDrawerHistory,
+} from './useDrawerHistoryStore';
+
+type DrawerArgs = PageStoryArgs<typeof drawerMocks> &
+	K8sBaseDetailsProps<unknown>;
+
+const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
+
+const meta = {
+	title: 'Infra monitoring/Kubernetes drawer',
+	component: K8sBaseDetails as (props: DrawerArgs) => JSX.Element,
+	...storyMocks(drawerMocks, { route }),
+	decorators: [
+		(Story, context): JSX.Element => {
+			// The back control appears only for a resource opened from another
+			const depth = getDrawerHistoryDepth();
+			if (context.args.openedFromANode && depth === 0) {
+				pushDrawerHistory({
+					params: { selectedItem: NODE_NAME, category: InfraMonitoringEntity.NODES },
+					category: InfraMonitoringEntity.NODES,
+					label: NODE_NAME,
+					entity: { nodeName: NODE_NAME },
+					queryKeyPrefix: 'node',
+				});
+			}
+			if (!context.args.openedFromANode && depth > 0) {
+				resetDrawerHistory();
+			}
+
+			return <Story />;
+		},
+	],
+} satisfies Meta<DrawerArgs>;
+
+export default meta;
+
+type Story = StoryObj<DrawerArgs>;
+
+/** A pod opened from a node's overview tab, so the header leads with the way back. */
+export const Default: Story = {
+	args: { ...podEntityConfig.details } as Partial<DrawerArgs> as DrawerArgs,
+};

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { X } from '@signozhq/icons';
+import { ArrowLeft, X } from '@signozhq/icons';
 import { Divider } from '@signozhq/ui/divider';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper, DrawerWrapperProps } from '@signozhq/ui/drawer';
@@ -16,12 +16,19 @@ import {
 	useGlobalTimeStore,
 } from 'store/globalTime';
 
-import { INFRA_MONITORING_K8S_PARAMS_KEYS } from '../constants';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	K8S_CATEGORY_SINGULAR_LABELS,
+} from '../constants';
 import { useInfraMonitoringSelectedItemParams } from '../hooks';
 import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import LoadingContainer from '../LoadingContainer';
 
 import K8sBaseDetailsContent from './K8sBaseDetailsContent';
+import { CategoryIcon } from './categoryIcons';
+import { getEntityNameAttributeKey } from './relations';
+import { useDrawerHistoryStore } from './useDrawerHistoryStore';
+import { usePrimeEntityDetails } from './usePrimeEntityDetails';
 import { K8sBaseDetailsProps } from './types';
 import { useDrawerLifecycleStore } from './useDrawerLifecycleStore';
 
@@ -86,6 +93,11 @@ export default function K8sBaseDetails<T>({
 		useInfraMonitoringSelectedItemParams();
 	const selectedItem = selectedItemParams.selectedItem;
 
+	const selectedItemExpression = useMemo(
+		() => getSelectedItemExpression(selectedItemParams),
+		[getSelectedItemExpression, selectedItemParams],
+	);
+
 	const entityQueryKey = useMemo(
 		() =>
 			getAutoRefreshQueryKey(
@@ -121,9 +133,10 @@ export default function K8sBaseDetails<T>({
 			const { minTime, maxTime } = getMinMaxTime();
 			const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
 			const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
-			const expression = getSelectedItemExpression(selectedItemParams);
-
-			return fetchEntityData({ filter: { expression }, start, end }, signal);
+			return fetchEntityData(
+				{ filter: { expression: selectedItemExpression }, start, end },
+				signal,
+			);
 		},
 		cacheTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
 		staleTime: INFRA_MONITORING_DETAILS_CACHE_TIME,
@@ -158,9 +171,29 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [selectedItem, markDrawerOpened, markDrawerClosed]);
 
+	const previousEntry = useDrawerHistoryStore(
+		(store) => store.entries[store.entries.length - 1] ?? null,
+	);
+	const popDrawerHistory = useDrawerHistoryStore((store) => store.pop);
+	const primeDetails = usePrimeEntityDetails();
+	const resetHistory = useDrawerHistoryStore((store) => store.reset);
+
 	const handleClose = useCallback((): void => {
+		resetHistory();
 		setSelectedItemParams(null);
-	}, [setSelectedItemParams]);
+	}, [resetHistory, setSelectedItemParams]);
+
+	// Steps back through resources opened from an overview tab
+	const handleBack = useCallback((): void => {
+		const previous = popDrawerHistory();
+
+		if (!previous) {
+			return;
+		}
+
+		primeDetails(previous);
+		setSelectedItemParams(previous.params);
+	}, [popDrawerHistory, primeDetails, setSelectedItemParams]);
 
 	const handleOpenChange = useCallback(
 		(open: boolean): void => {
@@ -172,11 +205,25 @@ export default function K8sBaseDetails<T>({
 	);
 
 	const handleCopyId = useCallback((): void => {
-		toast.success('ID copied to clipboard', { position: 'bottom-left' });
-	}, []);
+		toast.success(
+			`${K8S_CATEGORY_SINGULAR_LABELS[category]} name copied to clipboard`,
+			{ position: 'bottom-left' },
+		);
+	}, [category]);
 
 	const entityName = entity ? getEntityName(entity) : '';
 
+	// meta carries the resource's parents; its own name comes from the config
+	const entityAttributes = useMemo((): Record<string, string> => {
+		const meta = (entity as { meta?: Record<string, string> | null } | null)
+			?.meta;
+
+		return {
+			...(meta ?? {}),
+			...(entityName ? { [getEntityNameAttributeKey(category)]: entityName } : {}),
+		};
+	}, [entity, entityName, category]);
+
 	useEffect(() => {
 		if (entity) {
 			void logEvent(InfraMonitoringEvents.PageVisited, {
@@ -187,20 +234,48 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [entity, eventCategory]);
 
+	// Names the resource it returns to, so a drill several levels deep stays clear
+	const backTarget = previousEntry
+		? `Back to ${K8S_CATEGORY_SINGULAR_LABELS[previousEntry.category]}`
+		: '';
+	const backLabel = previousEntry ? `${backTarget}: ${previousEntry.label}` : '';
+
 	// 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 />}
-			/>
+			{/* One control: step back where there is a trail, close otherwise.
+			    Clicking outside the drawer closes it either way. The label is text
+			    rather than a tooltip, which a click on the control would dismiss. */}
+			{previousEntry ? (
+				<Button
+					variant="ghost"
+					size="sm"
+					color="secondary"
+					onClick={handleBack}
+					data-testid="drawer-back-button"
+					className={styles.backButton}
+					aria-label={backLabel}
+					prefix={<ArrowLeft size={14} />}
+				>
+					{backTarget}
+				</Button>
+			) : (
+				<Button
+					variant="ghost"
+					size="sm"
+					color="secondary"
+					onClick={handleClose}
+					data-testid="close-drawer-button"
+					className={styles.closeButton}
+					prefix={<X />}
+				/>
+			)}
 			<Divider type="vertical" />
+			<span className={styles.entityKind} data-testid="drawer-entity-kind">
+				<CategoryIcon category={category} />
+				{K8S_CATEGORY_SINGULAR_LABELS[category]}
+			</span>
 			<Typography.Text className={styles.title}>
 				{entityName ||
 					((isEntityError || hasResponseError) && 'Failed to load entity details') ||
@@ -208,8 +283,8 @@ export default function K8sBaseDetails<T>({
 					'-'}
 			</Typography.Text>
 			<CopyButton
-				value={selectedItem ?? ''}
-				ariaLabel="Copy ID"
+				value={entityName || selectedItem || ''}
+				ariaLabel={`Copy ${K8S_CATEGORY_SINGULAR_LABELS[category]} name`}
 				className={styles.copyIdButton}
 				testId="copy-id-button"
 				onCopy={handleCopyId}
@@ -271,6 +346,8 @@ export default function K8sBaseDetails<T>({
 						customTabs={customTabs}
 						logsAndTracesInitialExpression={logsAndTracesInitialExpression}
 						eventsInitialExpression={eventsInitialExpression}
+						entityAttributes={entityAttributes}
+						entityName={entityName}
 					/>
 				</GlobalTimeProvider>
 			)}

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

@@ -4,6 +4,7 @@ import {
 	ChevronsLeftRight,
 	Compass,
 	DraftingCompass,
+	LayoutGrid,
 	ScrollText,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -31,6 +32,7 @@ import EntityEvents from '../EntityDetailsUtils/EntityEvents';
 import EntityLogs from '../EntityDetailsUtils/EntityLogs';
 import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
 import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
+import EntityOverview from '../EntityDetailsUtils/EntityOverview/EntityOverview';
 import EntityTraces from '../EntityDetailsUtils/EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
 import {
@@ -67,12 +69,16 @@ export default function K8sBaseDetailsContent<T>({
 	customTabs,
 	logsAndTracesInitialExpression,
 	eventsInitialExpression,
+	entityAttributes,
+	entityName,
 }: K8sBaseDetailsContentProps<T>): JSX.Element {
 	const { timeRange, selectedInterval, handleTimeChange } =
 		useEntityDetailsTime();
 
 	const tabVisibility = useMemo(
 		() => ({
+			// Declared per category, since only a kubernetes resource relates to others
+			showOverview: false,
 			showMetrics: true,
 			showLogs: true,
 			showTraces: true,
@@ -86,6 +92,9 @@ export default function K8sBaseDetailsContent<T>({
 
 	const validTabs = useMemo(() => {
 		const tabs: string[] = [];
+		if (tabVisibility.showOverview) {
+			tabs.push(VIEW_TYPES.OVERVIEW);
+		}
 		if (tabVisibility.showMetrics) {
 			tabs.push(VIEW_TYPES.METRICS);
 		}
@@ -104,14 +113,28 @@ export default function K8sBaseDetailsContent<T>({
 		return tabs;
 	}, [tabVisibility, customTabs]);
 
-	useEffect(() => {
-		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
-			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
-			void setSelectedView(firstValid);
-		}
-	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
+	const defaultView = validTabs[0] || VIEW_TYPES.METRICS;
 
-	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
+	useEffect(() => {
+		if (
+			!hideDetailViewTabs &&
+			selectedView &&
+			!validTabs.includes(selectedView)
+		) {
+			void setSelectedView(defaultView);
+		}
+	}, [
+		hideDetailViewTabs,
+		selectedView,
+		validTabs,
+		defaultView,
+		setSelectedView,
+	]);
+
+	// An absent view param lands on the first tab the category offers
+	const effectiveView = hideDetailViewTabs
+		? VIEW_TYPES.METRICS
+		: (selectedView ?? defaultView);
 
 	// 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
@@ -169,20 +192,20 @@ export default function K8sBaseDetailsContent<T>({
 			entity: InfraMonitoringEvents.K8sEntity,
 			page: InfraMonitoringEvents.DetailedPage,
 			category: eventCategory,
-			view: selectedView,
+			view: effectiveView,
 		});
 
 		logInfraExplorerNavigatedEvent({
 			entityType: category,
 			destination:
-				selectedView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
+				effectiveView === VIEW_TYPES.LOGS ? 'logs_explorer' : 'traces_explorer',
 			source: 'tab_cta_button',
-			tab: selectedView,
+			tab: effectiveView,
 			sourceKey: null,
 			drawerDurationMsAtNavigation: getDrawerDurationMs(),
 		});
 
-		if (selectedView === VIEW_TYPES.LOGS) {
+		if (effectiveView === VIEW_TYPES.LOGS) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userLogsExpression || '',
@@ -207,7 +230,7 @@ export default function K8sBaseDetailsContent<T>({
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
 			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
-		} else if (selectedView === VIEW_TYPES.TRACES) {
+		} else if (effectiveView === VIEW_TYPES.TRACES) {
 			const fullExpression = combineInitialAndUserExpression(
 				logsAndTracesInitialExpression,
 				userTracesExpression || '',
@@ -264,7 +287,7 @@ export default function K8sBaseDetailsContent<T>({
 							filterExpression={getCountsFilterExpression(entity)}
 							closeDrawer={handleClose}
 							entityType={category}
-							activeTab={selectedView}
+							activeTab={effectiveView}
 						/>
 					)}
 			</div>
@@ -275,8 +298,21 @@ export default function K8sBaseDetailsContent<T>({
 						type="single"
 						className={styles.viewsTabs}
 						onChange={handleTabChange}
-						value={selectedView}
+						value={effectiveView}
 						items={[
+							...(tabVisibility.showOverview
+								? [
+										{
+											value: VIEW_TYPES.OVERVIEW,
+											label: (
+												<div className={styles.viewTitle}>
+													<LayoutGrid size={14} />
+													Overview
+												</div>
+											),
+										},
+									]
+								: []),
 							...(tabVisibility.showMetrics
 								? [
 										{
@@ -341,7 +377,7 @@ export default function K8sBaseDetailsContent<T>({
 						]}
 					/>
 
-					{selectedView === VIEW_TYPES.LOGS && (
+					{effectiveView === VIEW_TYPES.LOGS && (
 						<TooltipSimple title="Go to Logs Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -354,7 +390,7 @@ export default function K8sBaseDetailsContent<T>({
 							</Button>
 						</TooltipSimple>
 					)}
-					{selectedView === VIEW_TYPES.TRACES && (
+					{effectiveView === VIEW_TYPES.TRACES && (
 						<TooltipSimple title="Go to Traces Explorer" side="left" arrow>
 							<Button
 								variant="ghost"
@@ -370,6 +406,16 @@ export default function K8sBaseDetailsContent<T>({
 				</div>
 			)}
 
+			{effectiveView === VIEW_TYPES.OVERVIEW && tabVisibility.showOverview && (
+				<EntityOverview
+					category={category}
+					eventEntity={eventCategory}
+					attributes={entityAttributes}
+					entity={entity}
+					entityName={entityName}
+					queryKeyPrefix={queryKeyPrefix}
+				/>
+			)}
 			{effectiveView === VIEW_TYPES.METRICS && (
 				<EntityMetrics<T>
 					entity={entity}
@@ -406,7 +452,7 @@ export default function K8sBaseDetailsContent<T>({
 				/>
 			)}
 			{customTabs?.map((tab) =>
-				selectedView === tab.key ? (
+				effectiveView === tab.key ? (
 					<Fragment key={tab.key}>
 						{tab.render({
 							entity,

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

@@ -39,6 +39,7 @@ import K8sOptionsSidePanel from './K8sOptionsSidePanel';
 import K8sHeader from './K8sHeader';
 import { K8sPaginationWarning } from './K8sPaginationWarning';
 import K8sTableToolbar from './K8sTableToolbar';
+import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { getGroupedByMeta } from './utils';
 import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout';
@@ -301,6 +302,8 @@ export function K8sBaseList<
 					queryClient.setQueryData(detailQueryKey, { data: record });
 				}
 
+				// Opening from the list starts a fresh trail for the drawer's back control
+				resetDrawerHistory();
 				setSelectedItemParams(params);
 			}
 

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

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 
-import { useInfraMonitoringCategory } from '../hooks';
+import {
+	useInfraMonitoringCategory,
+	useInfraMonitoringSelectedItemParams,
+} from '../hooks';
 import { getEntityConfig } from './entity.registry';
 import { K8sBaseList } from './K8sBaseList';
 import K8sBaseDetails from './K8sBaseDetails';
@@ -15,27 +18,35 @@ export function K8sDynamicList({
 	leftFilters,
 }: K8sDynamicListProps): JSX.Element | null {
 	const [selectedCategory] = useInfraMonitoringCategory();
+	const [selectedItemParams] = useInfraMonitoringSelectedItemParams();
 
 	const config = useMemo(
 		() => getEntityConfig(selectedCategory),
 		[selectedCategory],
 	);
 
+	// A row opened from the drawer's overview tab belongs to another category
+	const drawerCategory = selectedItemParams.category ?? selectedCategory;
+	const drawerConfig = useMemo(
+		() => getEntityConfig(drawerCategory),
+		[drawerCategory],
+	);
+
 	if (!config) {
 		return null;
 	}
 
-	const { list, details } = config;
-
 	return (
 		<>
 			<K8sBaseList
-				{...list}
+				{...config.list}
 				controlListPrefix={controlListPrefix}
 				leftFilters={leftFilters}
 			/>
 
-			<K8sBaseDetails {...details} />
+			{/* No key: remounting would animate the drawer shut and open again
+			    for what is really a change of contents */}
+			{drawerConfig && <K8sBaseDetails {...drawerConfig.details} />}
 		</>
 	);
 }

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

@@ -30,6 +30,7 @@ import {
 	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
+import { resetDrawerHistory } from './useDrawerHistoryStore';
 import { K8sBaseFilters } from './types';
 import { useLogEventForColumnCustomized } from './useLogEventForColumnCustomized';
 import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferencesStore';
@@ -219,6 +220,8 @@ export function K8sExpandedRow<
 				queryClient.setQueryData(detailQueryKey, { data: row });
 			}
 
+			// Opening from the list starts a fresh trail for the drawer's back control
+			resetDrawerHistory();
 			setSelectedItemParams(params);
 		},
 		[

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

@@ -0,0 +1,152 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InfraMonitoringEvents } from 'constants/events';
+import {
+	NuqsTestingAdapter,
+	type OnUrlUpdateFunction,
+} from 'nuqs/adapters/testing';
+import { act, render, waitFor } from 'tests/test-utils';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../constants';
+import K8sBaseDetails from '../K8sBaseDetails';
+import { useDrawerHistoryStore } from '../useDrawerHistoryStore';
+
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="mock-datetime" />,
+}));
+
+type TestEntity = { name: string };
+
+const mockEntity: TestEntity = { name: 'test-container' };
+
+const NODE_PARAMS = {
+	selectedItem: 'node-1',
+	category: InfraMonitoringEntity.NODES,
+	clusterName: null,
+	namespaceName: null,
+};
+
+/** What the drawer records before opening a resource from the node's overview */
+const NODE_ENTRY = {
+	params: NODE_PARAMS,
+	category: InfraMonitoringEntity.NODES,
+	label: 'node-1',
+	entity: { name: 'node-1' },
+	queryKeyPrefix: 'node',
+};
+
+function renderDrawer(onUrlUpdate?: OnUrlUpdateFunction): void {
+	render(
+		<NuqsTestingAdapter
+			searchParams={{
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: 'container-1',
+			}}
+			onUrlUpdate={onUrlUpdate}
+		>
+			<K8sBaseDetails<TestEntity>
+				category={InfraMonitoringEntity.CONTAINERS}
+				eventCategory={InfraMonitoringEvents.Pod}
+				getSelectedItemExpression={(): string => "k8s.pod.uid = 'abc'"}
+				fetchEntityData={jest
+					.fn()
+					.mockResolvedValue({ data: mockEntity, error: null })}
+				getEntityName={(entity): string => entity.name}
+				getInitialLogTracesExpression={(): string => ''}
+				getInitialEventsExpression={(): string => ''}
+				metadataConfig={[
+					{ label: 'Name', getValue: (entity): string => entity.name },
+				]}
+				entityWidgetInfo={[{ title: 'CPU', yAxisUnit: 'percent' }]}
+				getEntityQueryPayload={jest.fn().mockReturnValue([])}
+				queryKeyPrefix="testContainer"
+			/>
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('K8sBaseDetails - back navigation', () => {
+	beforeEach(() => {
+		useDrawerHistoryStore.getState().reset();
+	});
+
+	it('closes rather than going back when opened from the list', async () => {
+		act(() => {
+			renderDrawer();
+		});
+
+		await waitFor(() => {
+			expect(screen.getAllByText('test-container').length).toBeGreaterThan(0);
+		});
+
+		expect(screen.queryByTestId('drawer-back-button')).not.toBeInTheDocument();
+		expect(screen.getByTestId('close-drawer-button')).toBeInTheDocument();
+	});
+
+	it('replaces the close control while there is somewhere to go back to', async () => {
+		useDrawerHistoryStore.getState().push(NODE_ENTRY);
+
+		act(() => {
+			renderDrawer();
+		});
+
+		const backButton = await screen.findByTestId('drawer-back-button');
+
+		// The destination is text rather than a tooltip, which a click would dismiss
+		expect(backButton).toHaveTextContent('Back to Node');
+		expect(backButton).toHaveAccessibleName('Back to Node: node-1');
+		expect(screen.queryByTestId('close-drawer-button')).not.toBeInTheDocument();
+	});
+
+	it('returns to the resource this one was opened from', async () => {
+		const user = userEvent.setup();
+		const onUrlUpdate = jest.fn();
+
+		useDrawerHistoryStore.getState().push(NODE_ENTRY);
+
+		act(() => {
+			renderDrawer(onUrlUpdate);
+		});
+
+		const backButton = await screen.findByTestId('drawer-back-button');
+		await user.click(backButton);
+
+		await waitFor(() => {
+			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
+			expect(
+				params.some(
+					(searchParams) =>
+						searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM) ===
+							'node-1' &&
+						searchParams.get(
+							INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY,
+						) === InfraMonitoringEntity.NODES,
+				),
+			).toBe(true);
+		});
+
+		// The trail is one step shorter, so a second back closes instead
+		expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
+	});
+
+	it('drops the trail when the drawer is dismissed', async () => {
+		const user = userEvent.setup();
+
+		useDrawerHistoryStore.getState().push(NODE_ENTRY);
+
+		act(() => {
+			renderDrawer();
+		});
+
+		await screen.findByTestId('drawer-back-button');
+		// Dismissing from outside the drawer, the way a click on the overlay does
+		await user.keyboard('{Escape}');
+
+		await waitFor(() => {
+			expect(useDrawerHistoryStore.getState().entries).toHaveLength(0);
+		});
+	});
+});

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

@@ -21,6 +21,7 @@ type TestEntity = {
 	name: string;
 	namespace: string;
 	cluster: string;
+	meta?: Record<string, string>;
 };
 
 const mockEntity: TestEntity = {
@@ -29,14 +30,22 @@ const mockEntity: TestEntity = {
 	cluster: 'test-cluster',
 };
 
-function createBaseProps() {
+/** The overview tab appears only for a resource whose meta relates it to others */
+const relatedEntity: TestEntity = {
+	...mockEntity,
+	meta: {
+		'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
+		'k8s.namespace.name': 'default',
+		'k8s.cluster.name': 'test-cluster',
+	},
+};
+
+function createBaseProps(category: InfraMonitoringEntity, entity = mockEntity) {
 	return {
-		category: InfraMonitoringEntity.PODS,
+		category,
 		eventCategory: InfraMonitoringEvents.Pod,
 		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
-		fetchEntityData: jest
-			.fn()
-			.mockResolvedValue({ data: mockEntity, error: null }),
+		fetchEntityData: jest.fn().mockResolvedValue({ data: entity, error: null }),
 		getEntityName: (e: TestEntity): string => e.name,
 		getInitialLogTracesExpression: (): string => 'k8s.pod.name = "test-pod"',
 		getInitialEventsExpression: (): string => 'k8s.pod.name = "test-pod"',
@@ -51,7 +60,10 @@ function createBaseProps() {
 
 interface RenderOptions {
 	view?: string;
+	category?: InfraMonitoringEntity;
+	entity?: TestEntity;
 	tabsConfig?: {
+		showOverview?: boolean;
 		showMetrics?: boolean;
 		showLogs?: boolean;
 		showTraces?: boolean;
@@ -67,6 +79,9 @@ interface RenderOptions {
 
 function renderK8sBaseDetails({
 	view = VIEW_TYPES.METRICS,
+	// Volumes have no related resources, so they get no overview tab
+	category = InfraMonitoringEntity.VOLUMES,
+	entity = mockEntity,
 	tabsConfig,
 	customTabs,
 }: RenderOptions = {}) {
@@ -78,7 +93,7 @@ function renderK8sBaseDetails({
 	return render(
 		<NuqsTestingAdapter searchParams={searchParams}>
 			<K8sBaseDetails<TestEntity>
-				{...createBaseProps()}
+				{...createBaseProps(category, entity)}
 				tabsConfig={tabsConfig}
 				customTabs={customTabs}
 			/>
@@ -106,6 +121,25 @@ describe('K8sBaseDetails - Tab Validation', () => {
 		});
 	});
 
+	it('should land on the overview tab for a category with related resources', async () => {
+		act(() => {
+			renderK8sBaseDetails({
+				view: 'invalid-tab',
+				category: InfraMonitoringEntity.PODS,
+				entity: relatedEntity,
+				tabsConfig: { showOverview: true },
+			});
+		});
+
+		await waitFor(() => {
+			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
+		});
+
+		await waitFor(() => {
+			expect(getSelectedTabText()).toContain('Overview');
+		});
+	});
+
 	it('should reset to first available tab when METRICS is disabled and view is invalid', async () => {
 		act(() => {
 			renderK8sBaseDetails({

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/relations.test.ts

@@ -0,0 +1,154 @@
+import { InfraMonitoringEntity } from '../../constants';
+import {
+	buildRelatedFilterExpression,
+	carryOverListFilters,
+	getRelatedCategories,
+} from '../relations';
+
+/** What /api/v2/infra_monitoring/pods returns as a pod's meta. */
+const POD_ATTRIBUTES = {
+	'k8s.pod.uid': '63edbad0-398e-48e5-baba-f7ded7c73f1b',
+	'k8s.pod.name': 'checkout-7d9f',
+	'k8s.namespace.name': 'shop',
+	'k8s.cluster.name': 'prod',
+	'k8s.node.name': 'node-1',
+	'k8s.deployment.name': 'checkout',
+};
+
+const NODE_ATTRIBUTES = {
+	'k8s.node.name': 'node-1',
+	'k8s.cluster.name': 'prod',
+};
+
+describe('getRelatedCategories', () => {
+	it('offers every other kubernetes category, never itself', () => {
+		expect(
+			getRelatedCategories(InfraMonitoringEntity.PODS, POD_ATTRIBUTES),
+		).toStrictEqual([
+			InfraMonitoringEntity.CONTAINERS,
+			InfraMonitoringEntity.DEPLOYMENTS,
+			InfraMonitoringEntity.STATEFULSETS,
+			InfraMonitoringEntity.DAEMONSETS,
+			InfraMonitoringEntity.JOBS,
+			InfraMonitoringEntity.VOLUMES,
+			InfraMonitoringEntity.NODES,
+			InfraMonitoringEntity.NAMESPACES,
+			InfraMonitoringEntity.CLUSTERS,
+		]);
+	});
+
+	it('scopes a category it has no relation to by what they share', () => {
+		// Not this pod's statefulsets, which it has none of: the ones beside it
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.STATEFULSETS,
+				POD_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop'");
+	});
+
+	it('falls back to the cluster where that is all two categories share', () => {
+		// Deployment metrics carry no node, so this relation is unexpressible
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.NODES,
+				InfraMonitoringEntity.DEPLOYMENTS,
+				NODE_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod'");
+	});
+
+	it('finds nothing for a host, which is not a kubernetes resource', () => {
+		// Host rows carry os.type and the host name, no kubernetes attribute
+		expect(
+			getRelatedCategories(InfraMonitoringEntity.HOSTS, {
+				'host.name': 'ip-10-0-0-1',
+				'os.type': 'linux',
+			}),
+		).toStrictEqual([]);
+	});
+
+	it('lists pods first, which makes them the default for a node', () => {
+		expect(
+			getRelatedCategories(InfraMonitoringEntity.NODES, NODE_ATTRIBUTES)[0],
+		).toBe(InfraMonitoringEntity.PODS);
+	});
+});
+
+describe('buildRelatedFilterExpression', () => {
+	it('scopes the pods of a node by the node, inside its cluster', () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.NODES,
+				InfraMonitoringEntity.PODS,
+				NODE_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
+	});
+
+	it("scopes a pod's containers by the pod uid, which those rows carry", () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.CONTAINERS,
+				POD_ATTRIBUTES,
+			),
+		).toBe(
+			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.pod.uid = '63edbad0-398e-48e5-baba-f7ded7c73f1b'",
+		);
+	});
+
+	it("reaches a pod's deployment by name, the only key that endpoint has", () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.DEPLOYMENTS,
+				POD_ATTRIBUTES,
+			),
+		).toBe(
+			"k8s.cluster.name = 'prod' AND k8s.namespace.name = 'shop' AND k8s.deployment.name = 'checkout'",
+		);
+	});
+
+	it('names the parent when the drawer resource belongs to it', () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.NODES,
+				POD_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'");
+	});
+
+	it('asks a cluster list for the cluster alone', () => {
+		expect(
+			buildRelatedFilterExpression(
+				InfraMonitoringEntity.PODS,
+				InfraMonitoringEntity.CLUSTERS,
+				POD_ATTRIBUTES,
+			),
+		).toBe("k8s.cluster.name = 'prod'");
+	});
+});
+
+describe('carryOverListFilters', () => {
+	it('keeps the clauses the target endpoint understands', () => {
+		expect(
+			carryOverListFilters(
+				"k8s.namespace.name = 'shop' AND k8s.node.condition_ready = true",
+				InfraMonitoringEntity.PODS,
+			),
+		).toBe("k8s.namespace.name = 'shop'");
+	});
+
+	it('drops a filter written against the source entity only', () => {
+		expect(
+			carryOverListFilters('k8s.node.cpu.usage > 0.5', InfraMonitoringEntity.PODS),
+		).toBe('');
+	});
+
+	it('returns nothing for an empty list filter', () => {
+		expect(carryOverListFilters('   ', InfraMonitoringEntity.PODS)).toBe('');
+	});
+});

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

@@ -0,0 +1,48 @@
+import type { ComponentProps } from 'react';
+import {
+	ArrowUpDown,
+	Bolt,
+	Box,
+	Boxes,
+	Computer,
+	Container,
+	FilePenLine,
+	Group,
+	HardDrive,
+	Server,
+	Workflow,
+} from '@signozhq/icons';
+
+import { InfraMonitoringEntity } from '../constants';
+
+/**
+ * One icon per category, so the section tabs and the drawer that opens from
+ * them show a resource the same way.
+ */
+type IconSize = ComponentProps<typeof Container>['size'];
+
+const CATEGORY_ICONS: Record<InfraMonitoringEntity, typeof Container> = {
+	[InfraMonitoringEntity.HOSTS]: Server,
+	[InfraMonitoringEntity.PODS]: Container,
+	[InfraMonitoringEntity.CONTAINERS]: Box,
+	[InfraMonitoringEntity.NODES]: Workflow,
+	[InfraMonitoringEntity.NAMESPACES]: FilePenLine,
+	[InfraMonitoringEntity.CLUSTERS]: Boxes,
+	[InfraMonitoringEntity.DEPLOYMENTS]: Computer,
+	[InfraMonitoringEntity.STATEFULSETS]: ArrowUpDown,
+	[InfraMonitoringEntity.DAEMONSETS]: Group,
+	[InfraMonitoringEntity.JOBS]: Bolt,
+	[InfraMonitoringEntity.VOLUMES]: HardDrive,
+};
+
+export function CategoryIcon({
+	category,
+	size = 14,
+}: {
+	category: InfraMonitoringEntity;
+	size?: IconSize;
+}): JSX.Element {
+	const Icon = CATEGORY_ICONS[category];
+
+	return <Icon size={size} />;
+}

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

@@ -3,18 +3,11 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { Compass } from '@signozhq/icons';
 import { TextNoData } from '../../../components/TextNoData';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import { Link } from 'react-router-dom';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
 
-import {
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	InfraMonitoringEntity,
-} from '../../../constants';
+import { InfraMonitoringEntity } from '../../../constants';
 import { getDrawerDurationMs } from '../../useDrawerLifecycleStore';
+import { buildK8sListNavigationUrl } from '../../utils';
 import styles from './EntityCountsSection.module.scss';
 import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
@@ -55,70 +48,6 @@ export function EntityCountsSection<T>({
 		closeDrawer();
 	};
 
-	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
-		const defaultQuery = initialQueriesMap[DataSource.METRICS];
-
-		const compositeQuery = {
-			...defaultQuery,
-			id: uuid(),
-			builder: {
-				...defaultQuery.builder,
-				queryData: defaultQuery.builder.queryData.map((query) => ({
-					...query,
-					filter: { expression: filterExpression },
-					filters: { items: [], op: 'AND' as const },
-				})),
-			},
-		};
-
-		const urlParams = new URLSearchParams();
-		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
-		urlParams.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify(compositeQuery)),
-		);
-
-		const currentSearchParams = new URLSearchParams(window.location.search);
-		const detailRelativeTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-		);
-		const detailStartTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-		);
-		const detailEndTime = currentSearchParams.get(
-			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-		);
-
-		const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
-		const listStartTime = currentSearchParams.get(QueryParams.startTime);
-		const listEndTime = currentSearchParams.get(QueryParams.endTime);
-
-		if (listRelativeTime) {
-			urlParams.set(QueryParams.relativeTime, listRelativeTime);
-		} else if (listStartTime && listEndTime) {
-			urlParams.set(QueryParams.startTime, listStartTime);
-			urlParams.set(QueryParams.endTime, listEndTime);
-		}
-
-		if (detailRelativeTime) {
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
-				detailRelativeTime,
-			);
-		} else if (detailStartTime && detailEndTime) {
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
-				detailStartTime,
-			);
-			urlParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
-				detailEndTime,
-			);
-		}
-
-		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
-	};
-
 	return (
 		<div className={styles.countsContainer}>
 			{countsConfig.map((config) => (
@@ -147,7 +76,7 @@ export function EntityCountsSection<T>({
 						<TextNoData type="typography" className={styles.countValue} />
 					)}
 					<Link
-						to={buildNavigationUrl(config.targetCategory)}
+						to={buildK8sListNavigationUrl(config.targetCategory, filterExpression)}
 						onClick={(): void => handleCardNavigate(config.label)}
 						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
 					>

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

@@ -97,7 +97,11 @@ export function logInfraExplorerNavigatedEvent(params: {
 		| 'logs_explorer'
 		| 'traces_explorer'
 		| 'k8s_list';
-	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
+	source:
+		| 'chart_compass_icon'
+		| 'tab_cta_button'
+		| 'stats_card'
+		| 'overview_cta';
 	tab: string;
 	sourceKey: string | null;
 	drawerDurationMsAtNavigation: number | null;

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

@@ -0,0 +1,265 @@
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+
+/** The attribute that names one record of a category. */
+const PRIMARY_KEY: Record<InfraMonitoringEntity, string> = {
+	[InfraMonitoringEntity.CLUSTERS]: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	[InfraMonitoringEntity.NAMESPACES]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	[InfraMonitoringEntity.NODES]: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+	[InfraMonitoringEntity.CONTAINERS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
+	[InfraMonitoringEntity.DEPLOYMENTS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	[InfraMonitoringEntity.STATEFULSETS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	[InfraMonitoringEntity.DAEMONSETS]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	[InfraMonitoringEntity.JOBS]: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	[InfraMonitoringEntity.VOLUMES]:
+		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+	[InfraMonitoringEntity.HOSTS]: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
+};
+
+/**
+ * Attributes each list endpoint can be filtered by, broadest first so a built
+ * expression reads cluster to container. Only keys the category's metrics
+ * actually carry belong here.
+ */
+const FILTERABLE_KEYS: Record<InfraMonitoringEntity, string[]> = {
+	[InfraMonitoringEntity.CLUSTERS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	],
+	[InfraMonitoringEntity.NODES]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+	],
+	[InfraMonitoringEntity.NAMESPACES]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	],
+	[InfraMonitoringEntity.DEPLOYMENTS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	],
+	[InfraMonitoringEntity.STATEFULSETS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	],
+	[InfraMonitoringEntity.DAEMONSETS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	],
+	[InfraMonitoringEntity.JOBS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	],
+	[InfraMonitoringEntity.VOLUMES]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+	],
+	[InfraMonitoringEntity.PODS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+	],
+	[InfraMonitoringEntity.CONTAINERS]: [
+		INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		INFRA_MONITORING_ATTR_KEYS.K8S_POD_UID,
+		INFRA_MONITORING_ATTR_KEYS.K8S_CONTAINER_NAME,
+	],
+	[InfraMonitoringEntity.HOSTS]: [],
+};
+
+/** Dropdown order: what a resource usually contains, then what contains it. */
+const DISPLAY_ORDER: InfraMonitoringEntity[] = [
+	InfraMonitoringEntity.PODS,
+	InfraMonitoringEntity.CONTAINERS,
+	InfraMonitoringEntity.DEPLOYMENTS,
+	InfraMonitoringEntity.STATEFULSETS,
+	InfraMonitoringEntity.DAEMONSETS,
+	InfraMonitoringEntity.JOBS,
+	InfraMonitoringEntity.VOLUMES,
+	InfraMonitoringEntity.NODES,
+	InfraMonitoringEntity.NAMESPACES,
+	InfraMonitoringEntity.CLUSTERS,
+];
+
+export type EntityAttributes = Record<string, string>;
+
+/** The attribute a category's display name belongs under. */
+const NAME_KEY: Partial<Record<InfraMonitoringEntity, string>> = {
+	[InfraMonitoringEntity.PODS]: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+};
+
+export function getEntityNameAttributeKey(
+	category: InfraMonitoringEntity,
+): string {
+	return NAME_KEY[category] ?? PRIMARY_KEY[category];
+}
+
+function matchingKeys(
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): string[] {
+	return FILTERABLE_KEYS[target].filter((key) => !!attributes[key]);
+}
+
+/**
+ * The attribute that ties a target to the drawer's resource: the resource
+ * itself when the target's records belong to it (the containers of this pod),
+ * otherwise the target's own name as the resource knows it (the node this pod
+ * runs on). Null when neither holds, which leaves the target scoped only by
+ * the ancestors the two share.
+ */
+function relationKey(
+	source: InfraMonitoringEntity,
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): string | null {
+	if (target === source) {
+		return null;
+	}
+
+	const keys = matchingKeys(target, attributes);
+
+	if (keys.includes(PRIMARY_KEY[source])) {
+		return PRIMARY_KEY[source];
+	}
+
+	return keys.includes(PRIMARY_KEY[target]) ? PRIMARY_KEY[target] : null;
+}
+
+/**
+ * Every category the drawer's resource can scope a list of, which for a
+ * kubernetes resource is all of them: where no closer relation exists the two
+ * still share a cluster. A target is left out only when nothing is shared at
+ * all, so a list is never asked for unscoped.
+ */
+export function getRelatedCategories(
+	source: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): InfraMonitoringEntity[] {
+	return DISPLAY_ORDER.filter(
+		(target) =>
+			target !== source &&
+			buildRelatedFilterClauses(source, target, attributes).length > 0,
+	);
+}
+
+/**
+ * Cluster and namespace ride along with the relation itself, the way other
+ * observability tools scope these lists: a pod's deployment is read as that
+ * deployment, in that namespace, in that cluster.
+ */
+const SCOPE_KEYS = [
+	INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+	INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+];
+
+export interface RelatedFilterClause {
+	key: string;
+	value: string;
+}
+
+/**
+ * Scope clauses, broadest first. The last carries the relation where one
+ * exists; without one the list is scoped to the shared ancestors, which reads
+ * as "beside this resource" rather than "belonging to it".
+ */
+export function buildRelatedFilterClauses(
+	source: InfraMonitoringEntity,
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): RelatedFilterClause[] {
+	const key = relationKey(source, target, attributes);
+
+	const scope = SCOPE_KEYS.filter(
+		(scopeKey) =>
+			scopeKey !== key &&
+			FILTERABLE_KEYS[target].includes(scopeKey) &&
+			!!attributes[scopeKey],
+	);
+
+	return (key ? [...scope, key] : scope).map((clauseKey) => ({
+		key: clauseKey,
+		value: attributes[clauseKey] as string,
+	}));
+}
+
+export function formatRelatedFilterClause(clause: RelatedFilterClause): string {
+	return `${clause.key} = ${formatValueForExpression(clause.value)}`;
+}
+
+export function buildRelatedFilterExpression(
+	source: InfraMonitoringEntity,
+	target: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+): string {
+	return buildRelatedFilterClauses(source, target, attributes)
+		.map(formatRelatedFilterClause)
+		.join(' AND ');
+}
+
+export function resolveRelatedCategory(
+	source: InfraMonitoringEntity,
+	attributes: EntityAttributes,
+	requested: string | null,
+): InfraMonitoringEntity | null {
+	const related = getRelatedCategories(source, attributes);
+	const match = related.find((target) => target === requested);
+
+	return match ?? related[0] ?? null;
+}
+
+export function carryOverListFilters(
+	expression: string,
+	target: InfraMonitoringEntity,
+): string {
+	if (!expression.trim()) {
+		return '';
+	}
+
+	const supported = new Set(FILTERABLE_KEYS[target]);
+
+	return extractQueryPairs(expression)
+		.filter((pair) => supported.has(pair.key))
+		.map((pair) => {
+			const start = pair.position.negationStart ?? pair.position.keyStart;
+			const lastValue = pair.valuesPosition?.[pair.valuesPosition.length - 1];
+			const end =
+				lastValue?.end ?? pair.position.valueEnd ?? pair.position.operatorEnd;
+
+			return expression.slice(start, end + 1).trim();
+		})
+		.filter(Boolean)
+		.join(' AND ');
+}

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

@@ -75,6 +75,8 @@ export type GetEntityQueryPayload<T> = (
 ) => GetQueryResultsProps[];
 
 export interface K8sDetailsTabsConfig {
+	/** Declared by categories whose resources relate to others; see relations.ts */
+	showOverview?: boolean;
 	showMetrics?: boolean;
 	showLogs?: boolean;
 	showTraces?: boolean;
@@ -141,6 +143,10 @@ export interface K8sBaseDetailsContentProps<T> {
 	customTabs?: K8sDetailsCustomTab<T>[];
 	logsAndTracesInitialExpression: string;
 	eventsInitialExpression: string;
+	/** The drawer entity's own attributes, used to find and scope related resources */
+	entityAttributes: Record<string, string>;
+	/** Name of the drawer entity, for the back control of a resource opened from it */
+	entityName: string;
 }
 
 // Aliases for backward compatibility

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

@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+
+import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
+
+export interface DrawerHistoryEntry {
+	params: SelectedItemParams;
+	/** Category of the resource that was open, which the back control names */
+	category: InfraMonitoringEntity;
+	/** Name of that resource, shown on hover */
+	label: string;
+	/**
+	 * The record the drawer was showing, and the prefix of the query that holds
+	 * it, so stepping back renders from it instead of fetching again.
+	 */
+	entity: unknown;
+	queryKeyPrefix: string;
+}
+
+export interface IDrawerHistoryStore {
+	entries: DrawerHistoryEntry[];
+	push: (entry: DrawerHistoryEntry) => void;
+	pop: () => DrawerHistoryEntry | null;
+	reset: () => void;
+}
+
+/**
+ * The trail left by opening one resource from another's overview tab, so the
+ * drawer can step back through it instead of only closing.
+ */
+export const useDrawerHistoryStore = create<IDrawerHistoryStore>()(
+	(set, get) => ({
+		entries: [],
+		push: (entry): void => set({ entries: [...get().entries, entry] }),
+		pop: (): DrawerHistoryEntry | null => {
+			const { entries } = get();
+			const previous = entries[entries.length - 1] ?? null;
+
+			if (previous) {
+				set({ entries: entries.slice(0, -1) });
+			}
+
+			return previous;
+		},
+		reset: (): void => set({ entries: [] }),
+	}),
+);
+
+export const resetDrawerHistory = (): void =>
+	useDrawerHistoryStore.getState().reset();
+
+export const pushDrawerHistory = (entry: DrawerHistoryEntry): void =>
+	useDrawerHistoryStore.getState().push(entry);
+
+export const getDrawerHistoryDepth = (): number =>
+	useDrawerHistoryStore.getState().entries.length;

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

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { useGlobalTimeStore } from 'store/globalTime';
+
+import { SelectedItemParams } from '../hooks';
+
+interface PrimeEntityDetailsParams {
+	params: SelectedItemParams;
+	queryKeyPrefix: string;
+	entity: unknown;
+}
+
+/**
+ * Seeds the drawer's entity query with a record already in hand, so navigating
+ * between resources renders straight away instead of passing through a loading
+ * state. The list page does the same on a row click.
+ */
+export function usePrimeEntityDetails(): (
+	params: PrimeEntityDetailsParams,
+) => void {
+	const queryClient = useQueryClient();
+	const selectedTime = useGlobalTimeStore((store) => store.selectedTime);
+	const getAutoRefreshQueryKey = useGlobalTimeStore(
+		(store) => store.getAutoRefreshQueryKey,
+	);
+
+	return useCallback(
+		({ params, queryKeyPrefix, entity }): void => {
+			if (!queryKeyPrefix || !entity) {
+				return;
+			}
+
+			queryClient.setQueryData(
+				getAutoRefreshQueryKey(
+					selectedTime,
+					`${queryKeyPrefix}EntityDetails`,
+					params.selectedItem,
+					params.clusterName,
+					params.namespaceName,
+					params.containerName,
+				),
+				{ data: entity },
+			);
+		},
+		[queryClient, selectedTime, getAutoRefreshQueryKey],
+	);
+}

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

@@ -7,7 +7,16 @@ import {
 	formatValueForExpression,
 } from 'components/QueryBuilderV2/utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
-import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from 'container/InfraMonitoringK8sV2/constants';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
 
 export function sortByColumnOrder<T>(
 	items: T[],
@@ -178,3 +187,74 @@ export function buildExpressionFromSelectedItemParams(
 
 	return clauses.join(' AND ');
 }
+
+/**
+ * Link to the k8s list page for `targetCategory`, pre-filtered by `filterExpression`
+ * and carrying whichever time range (list or drawer) the current URL holds.
+ */
+export function buildK8sListNavigationUrl(
+	targetCategory: InfraMonitoringEntity,
+	filterExpression: string,
+): string {
+	const defaultQuery = initialQueriesMap[DataSource.METRICS];
+
+	const compositeQuery = {
+		...defaultQuery,
+		id: uuid(),
+		builder: {
+			...defaultQuery.builder,
+			queryData: defaultQuery.builder.queryData.map((query) => ({
+				...query,
+				filter: { expression: filterExpression },
+				filters: { items: [], op: 'AND' as const },
+			})),
+		},
+	};
+
+	const urlParams = new URLSearchParams();
+	urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+	urlParams.set(
+		QueryParams.compositeQuery,
+		encodeURIComponent(JSON.stringify(compositeQuery)),
+	);
+
+	const currentSearchParams = new URLSearchParams(window.location.search);
+	const detailRelativeTime = currentSearchParams.get(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+	);
+	const detailStartTime = currentSearchParams.get(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+	);
+	const detailEndTime = currentSearchParams.get(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+	);
+
+	const listRelativeTime = currentSearchParams.get(QueryParams.relativeTime);
+	const listStartTime = currentSearchParams.get(QueryParams.startTime);
+	const listEndTime = currentSearchParams.get(QueryParams.endTime);
+
+	if (listRelativeTime) {
+		urlParams.set(QueryParams.relativeTime, listRelativeTime);
+	} else if (listStartTime && listEndTime) {
+		urlParams.set(QueryParams.startTime, listStartTime);
+		urlParams.set(QueryParams.endTime, listEndTime);
+	}
+
+	if (detailRelativeTime) {
+		urlParams.set(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_RELATIVE_TIME,
+			detailRelativeTime,
+		);
+	} else if (detailStartTime && detailEndTime) {
+		urlParams.set(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_START_TIME,
+			detailStartTime,
+		);
+		urlParams.set(
+			INFRA_MONITORING_K8S_PARAMS_KEYS.DETAIL_END_TIME,
+			detailEndTime,
+		);
+	}
+
+	return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+}

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

@@ -6,10 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import {
-	K8sDetailsCountConfig,
-	K8sDetailsMetadataConfig,
-} from '../Base/K8sBaseDetails';
+import { K8sDetailsCountConfig, K8sDetailsMetadataConfig } from '../Base/types';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -123,6 +123,7 @@ export const clusterEntityConfig: K8sEntityConfig<InframonitoringtypesClusterRec
 		details: {
 			category: InfraMonitoringEntity.CLUSTERS,
 			eventCategory: InfraMonitoringEvents.Cluster,
+			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'cluster',
 			getSelectedItemExpression: k8sClusterGetSelectedItemExpression,
 			fetchEntityData,

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

@@ -127,6 +127,7 @@ export const containerEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.CONTAINERS,
 		eventCategory: InfraMonitoringEvents.Container,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'container',
 		getSelectedItemExpression: k8sContainerGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -1,4 +1,4 @@
-import { Container } from '@signozhq/icons';
+import { Box } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import {
 	InframonitoringtypesContainerReadyDTO,
@@ -94,7 +94,7 @@ export const k8sContainerColumnsConfig: ContainerTableColumnConfig[] = [
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Container Name"
-				icon={<Container data-hide-expanded="true" size={14} />}
+				icon={<Box data-hide-expanded="true" size={14} />}
 				docPath={`${CONTAINERS_DOC_PATH}#container-name`}
 			/>
 		),

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

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -132,6 +132,7 @@ export const daemonSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DAEMONSETS,
 		eventCategory: InfraMonitoringEvents.DaemonSet,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'daemonset',
 		getSelectedItemExpression: k8sDaemonSetGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -147,6 +147,7 @@ export const deploymentEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.DEPLOYMENTS,
 		eventCategory: InfraMonitoringEvents.Deployment,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'deployment',
 		getSelectedItemExpression: k8sDeploymentGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -0,0 +1,166 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	margin-top: var(--spacing-8);
+	min-width: 0;
+}
+
+.controls {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-3);
+	flex-wrap: wrap;
+}
+
+.tableHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding: var(--spacing-4) var(--spacing-8);
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.resourcePicker {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	flex: 0 0 auto;
+}
+
+.resourceTrigger {
+	--select-trigger-width: 240px;
+	--select-trigger-height: 2rem;
+}
+
+.resourceOptions {
+	// The drawer is a dialog at z-index 50 and select content ships without one,
+	// so without this the dropdown paints behind the drawer.
+	z-index: 60;
+
+	// Radix measures the trigger for us; without this the list is narrower than it
+	min-width: var(--radix-select-trigger-width);
+}
+
+.filterRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	padding-left: var(--spacing-3);
+	min-width: 0;
+	border: 1px solid var(--l2-border);
+	border-radius: 2px;
+	background: var(--l1-background);
+
+	// The row draws the field outline, so the editor inside it draws none
+	--query-builder-v2-border-color: transparent;
+	--query-builder-v2-background-color: transparent;
+}
+
+.scopeChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 420px;
+	padding: var(--spacing-1) var(--spacing-3);
+	border-radius: 2px;
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+	font-size: 12px;
+	line-height: 20px;
+	cursor: default;
+}
+
+.scopeMore {
+	flex: none;
+	color: var(--l3-foreground);
+}
+
+// The editor beside it is CodeMirror on the copilot theme in dark and
+// githubLight in light; the chip borrows those token colours so one filter
+// does not read as two
+.scopeKey {
+	color: #939da5;
+}
+
+.scopeOperator {
+	color: #939da5;
+}
+
+.scopeValue {
+	color: #5bec95;
+}
+
+:global(.lightMode) {
+	.scopeKey,
+	.scopeOperator {
+		color: #005cc5;
+	}
+
+	.scopeValue {
+		color: #032f62;
+	}
+}
+
+.scopeExpression {
+	font-family: var(--font-mono, monospace);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.filterInput {
+	flex: 1 1 auto;
+	min-width: 0;
+
+	// The locked scope is already shown as a chip, so drop the editor's own
+	// scope marker and the room it reserves for it
+	:global(.query-search-initial-scope-label) {
+		display: none;
+	}
+
+	:global(
+		.query-where-clause-editor.hasInitialExpression .cm-editor .cm-content
+	) {
+		padding-left: 0 !important;
+	}
+
+	// Its page-width minimum would force the filter row to overflow the drawer
+	:global(.code-mirror-where-clause .query-where-clause-editor) {
+		min-width: 0;
+	}
+}
+
+.tableCard {
+	display: flex;
+	flex-direction: column;
+	min-height: 480px;
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.table {
+	flex: 1 1 auto;
+	min-height: 0;
+	--typography-color: var(--l2-foreground);
+}
+
+.noRelations {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 240px;
+	margin-top: var(--spacing-8);
+}
+
+.emptyState {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 180px;
+}

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

@@ -0,0 +1,76 @@
+import { rest } from 'msw';
+
+import { countControl } from '@/storybook/controls/controls';
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+function buildContainers(count: number): unknown[] {
+	return Array.from({ length: count }, (_, index) => ({
+		containerName: index === 0 ? 'loadgenerator' : `sidecar-${index}`,
+		containerID: `containerd://${index}`,
+		podName: 'app-demo-loadgenerator-579fbdd749-q5kgd',
+		status: 'running',
+		ready: true,
+		restarts: index,
+		image: 'ghcr.io/open-telemetry/demo:1.14.0-loadgenerator',
+		cpuUsage: 0.12,
+		memoryUsage: 148 * 1024 * 1024,
+		meta: {
+			'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
+			'k8s.namespace.name': 'generator',
+			'k8s.cluster.name': 'mgmt',
+			'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
+		},
+	}));
+}
+
+export const overviewMocks = defineStoryMocks({
+	controls: {
+		containers: countControl('Containers', {
+			group: 'Overview tab',
+			value: 12,
+			max: 40,
+		}),
+	},
+	handlers: (values) => [
+		// The filter's suggestions ask for these; without them the search box
+		// logs a failed request and the story's smoke test fails on it
+		rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+
+		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+
+		rest.post(
+			'http://localhost/api/v2/infra_monitoring/kube_containers',
+			async (req, res, ctx) => {
+				const { offset = 0, limit = 10 } = (await req.json()) as {
+					offset?: number;
+					limit?: number;
+				};
+
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							type: 'list',
+							records: buildContainers(values.containers).slice(
+								offset,
+								offset + limit,
+							),
+							total: values.containers,
+						},
+					}),
+				);
+			},
+		),
+	],
+});

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { GlobalTimeProvider } from 'store/globalTime';
+
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../constants';
+import EntityOverview, { EntityOverviewProps } from './EntityOverview';
+import { overviewMocks } from './EntityOverview.stories.mocks';
+
+import drawerStyles from '../entityDetails.module.scss';
+
+const POD_UID = '63edbad0-398e-48e5-baba-f7ded7c73f1b';
+
+/** The meta /api/v2/infra_monitoring/pods returns for one pod. */
+const POD_ATTRIBUTES = {
+	'k8s.pod.uid': POD_UID,
+	'k8s.pod.name': 'app-demo-loadgenerator-579fbdd749-q5kgd',
+	'k8s.namespace.name': 'generator',
+	'k8s.cluster.name': 'mgmt',
+	'k8s.node.name': 'gke-mgmt-pl-generator-e2st4-sp-41c1bdc8-p6z7',
+	'k8s.deployment.name': 'app-demo-loadgenerator',
+};
+
+const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
+
+type OverviewArgs = PageStoryArgs<typeof overviewMocks> & EntityOverviewProps;
+
+const meta = {
+	title: 'Infra monitoring/Drawer overview tab',
+	component: EntityOverview,
+	...storyMocks(overviewMocks, { route }),
+	decorators: [
+		(Story): JSX.Element => (
+			<DrawerWrapper
+				open
+				direction="right"
+				title="app-demo-loadgenerator-579fbdd749-q5kgd"
+				onOpenChange={(): void => undefined}
+				className={drawerStyles.entityDetailDrawer}
+			>
+				<GlobalTimeProvider>
+					<Story />
+				</GlobalTimeProvider>
+			</DrawerWrapper>
+		),
+	],
+} satisfies Meta<OverviewArgs>;
+
+export default meta;
+
+type Story = StoryObj<OverviewArgs>;
+
+export const Default: Story = {
+	args: {
+		category: InfraMonitoringEntity.PODS,
+		eventEntity: 'pod',
+		attributes: POD_ATTRIBUTES,
+		entity: { podUID: POD_UID },
+		entityName: POD_ATTRIBUTES['k8s.pod.name'],
+		queryKeyPrefix: 'pod',
+	},
+};

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

@@ -0,0 +1,343 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Compass } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@signozhq/ui/select';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	QuerySearchV2Provider,
+	useExpression,
+	useInputExpression,
+	useQuerySearchInitialExpressionProp,
+	useQuerySearchOnChange,
+	useQuerySearchOnRun,
+	useUserExpression,
+} from 'components/QueryBuilderV2';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
+import { validateQuery } from 'utils/queryValidationUtils';
+
+import { getEntityConfig } from '../../Base/entity.registry';
+import { logInfraExplorerNavigatedEvent } from '../../Base/events';
+import {
+	buildRelatedFilterClauses,
+	EntityAttributes,
+	formatRelatedFilterClause,
+	RelatedFilterClause,
+	getEntityNameAttributeKey,
+	getRelatedCategories,
+	resolveRelatedCategory,
+} from '../../Base/relations';
+import { getDrawerDurationMs } from '../../Base/useDrawerLifecycleStore';
+import { buildK8sListNavigationUrl } from '../../Base/utils';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+	K8S_CATEGORY_LABELS,
+	K8S_CATEGORY_SINGULAR_LABELS,
+	METRIC_NAMESPACE_BY_ENTITY,
+	VIEW_TYPES,
+} from '../../constants';
+import EntityDateTimeSelector from '../EntityDateTimeSelector/EntityDateTimeSelector';
+import { useEntityDetailsTime } from '../EntityDateTimeSelector/useEntityDetailsTime';
+import { logInfraDrawerFilterCustomizedEvent } from '../events';
+import { RelatedEntitiesTable } from './RelatedEntitiesTable';
+import { ScopeChip } from './ScopeChip';
+import { useCarriedOverFilters } from './useCarriedOverFilters';
+import { useRelatedEntities } from './useRelatedEntities';
+
+import styles from './EntityOverview.module.scss';
+
+export interface EntityOverviewProps {
+	category: InfraMonitoringEntity;
+	eventEntity: string;
+	/** The drawer entity's own attributes, which scope every related query */
+	attributes: EntityAttributes;
+	/** The drawer's own record and query prefix, so a row click can leave a
+	 * trail that steps back without fetching again */
+	entity: unknown;
+	entityName: string;
+	queryKeyPrefix: string;
+}
+
+interface ContentProps extends EntityOverviewProps {
+	targetCategory: InfraMonitoringEntity;
+	lockedExpression: string;
+	lockedClauses: RelatedFilterClause[];
+	onCategoryChange: (category: string) => void;
+}
+
+function EntityOverviewContent({
+	category,
+	eventEntity,
+	attributes,
+	entity,
+	entityName,
+	queryKeyPrefix,
+	targetCategory,
+	lockedExpression,
+	lockedClauses,
+	onCategoryChange,
+}: ContentProps): JSX.Element | null {
+	const { timeRange } = useEntityDetailsTime();
+	const expression = useExpression();
+	const userExpression = useUserExpression();
+	const inputExpression = useInputExpression();
+	const querySearchOnChange = useQuerySearchOnChange();
+	const querySearchOnRun = useQuerySearchOnRun();
+	const querySearchInitialExpressionProp = useQuerySearchInitialExpressionProp();
+
+	const targetConfig = getEntityConfig(targetCategory);
+
+	useCarriedOverFilters(targetCategory);
+
+	const {
+		records,
+		total,
+		isLoading,
+		isFetching,
+		isError,
+		error,
+		endTimeBeforeRetention,
+		setPage,
+		setLimit,
+		refetch,
+		cancel,
+	} = useRelatedEntities({
+		fetchListData: targetConfig?.list.fetchListData,
+		queryKey: `${targetCategory}RelatedEntities`,
+		expression,
+		timeRange,
+	});
+
+	// The editor holds only what the user typed; the locked scope is shown beside it
+	const queryData = useMemo(
+		(): IBuilderQuery =>
+			({
+				aggregateOperator: 'noop',
+				filter: { expression: userExpression },
+			}) as IBuilderQuery,
+		[userExpression],
+	);
+
+	const handleCategoryChange = useCallback(
+		(value: string | string[]): void => {
+			if (typeof value === 'string') {
+				onCategoryChange(value);
+			}
+		},
+		[onCategoryChange],
+	);
+
+	const handleRunQuery = useCallback(
+		(updatedExpression?: string): void => {
+			const newUserExpression = updatedExpression
+				? getUserExpressionFromCombined(lockedExpression, updatedExpression)
+				: inputExpression;
+
+			const validation = validateQuery(
+				combineInitialAndUserExpression(lockedExpression, newUserExpression || ''),
+			);
+
+			if (!validation.isValid) {
+				return;
+			}
+
+			querySearchOnRun(newUserExpression);
+			logInfraDrawerFilterCustomizedEvent(
+				category,
+				VIEW_TYPES.OVERVIEW,
+				newUserExpression || '',
+				'search',
+			);
+			refetch();
+		},
+		[lockedExpression, inputExpression, querySearchOnRun, category, refetch],
+	);
+
+	const handleNavigate = useCallback((): void => {
+		logInfraExplorerNavigatedEvent({
+			entityType: category,
+			destination: 'k8s_list',
+			source: 'overview_cta',
+			tab: VIEW_TYPES.OVERVIEW,
+			sourceKey: targetCategory,
+			drawerDurationMsAtNavigation: getDrawerDurationMs(),
+		});
+
+		openInNewTab(buildK8sListNavigationUrl(targetCategory, expression));
+	}, [category, targetCategory, expression]);
+
+	if (!targetConfig) {
+		return null;
+	}
+
+	const targetLabel = K8S_CATEGORY_LABELS[targetCategory];
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.controls}>
+				<EntityDateTimeSelector
+					eventEntity={eventEntity}
+					category={category}
+					view={VIEW_TYPES.OVERVIEW}
+				/>
+
+				<RunQueryBtn
+					isLoadingQueries={isFetching}
+					onStageRunQuery={(): void => handleRunQuery()}
+					handleCancelQuery={cancel}
+				/>
+			</div>
+
+			<div className={styles.filterRow}>
+				<ScopeChip clauses={lockedClauses} expression={lockedExpression} />
+
+				<div className={styles.filterInput}>
+					<QuerySearch
+						queryData={queryData}
+						dataSource={DataSource.METRICS}
+						onChange={querySearchOnChange}
+						onRun={handleRunQuery}
+						signalSource=""
+						showFilterSuggestionsWithoutMetric
+						placeholder={`Filter these ${targetLabel.toLowerCase()}`}
+						metricNamespace={METRIC_NAMESPACE_BY_ENTITY[targetCategory]}
+						initialExpression={querySearchInitialExpressionProp}
+					/>
+				</div>
+			</div>
+
+			<RelatedEntitiesTable
+				key={targetCategory}
+				targetCategory={targetCategory}
+				header={
+					<div className={styles.resourcePicker}>
+						<Typography.Text color="muted" size="small">
+							Showing
+						</Typography.Text>
+
+						<Select value={targetCategory} onChange={handleCategoryChange}>
+							<SelectTrigger
+								className={styles.resourceTrigger}
+								data-testid="overview-resource-select"
+							>
+								<SelectValue>{targetLabel}</SelectValue>
+							</SelectTrigger>
+							{/* The drawer sits at z-index 50 and select content ships without one */}
+							<SelectContent className={styles.resourceOptions}>
+								{getRelatedCategories(category, attributes).map((relatedCategory) => (
+									<SelectItem
+										key={relatedCategory}
+										value={relatedCategory}
+										testId={`overview-resource-option-${relatedCategory}`}
+									>
+										{K8S_CATEGORY_LABELS[relatedCategory]}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+
+						<TooltipSimple
+							title={`View on ${targetLabel.toLowerCase()} page`}
+							side="top"
+							arrow
+						>
+							<Button
+								variant="ghost"
+								size="icon"
+								color="secondary"
+								onClick={handleNavigate}
+								data-testid="overview-view-on-list-page"
+								prefix={<Compass size={16} />}
+							/>
+						</TooltipSimple>
+					</div>
+				}
+				listConfig={targetConfig.list}
+				records={records}
+				total={total}
+				isLoading={isLoading}
+				isError={isError}
+				error={error}
+				endTimeBeforeRetention={endTimeBeforeRetention}
+				source={{ category, label: entityName, entity, queryKeyPrefix }}
+				onPageChange={setPage}
+				onLimitChange={setLimit}
+			/>
+		</div>
+	);
+}
+
+export default function EntityOverview(
+	props: EntityOverviewProps,
+): JSX.Element | null {
+	const { category, attributes } = props;
+
+	// Tied to the resource it was picked on, so another drawer starts at its
+	// own default instead of inheriting the last pick
+	const [selection, setSelection] = useState<{
+		identity: string;
+		category: string;
+	} | null>(null);
+
+	const identity = `${category}:${
+		attributes[getEntityNameAttributeKey(category)] ?? ''
+	}`;
+
+	const targetCategory = resolveRelatedCategory(
+		category,
+		attributes,
+		selection?.identity === identity ? selection.category : null,
+	);
+
+	const handleCategoryChange = useCallback(
+		(value: string): void => setSelection({ identity, category: value }),
+		[identity],
+	);
+
+	const lockedClauses = targetCategory
+		? buildRelatedFilterClauses(category, targetCategory, attributes)
+		: [];
+	const lockedExpression = lockedClauses
+		.map(formatRelatedFilterClause)
+		.join(' AND ');
+
+	if (!targetCategory) {
+		return (
+			<div className={styles.noRelations}>
+				<Typography.Text color="muted">
+					{`Nothing related to this ${K8S_CATEGORY_SINGULAR_LABELS[category]} was reported in this time range.`}
+				</Typography.Text>
+			</div>
+		);
+	}
+
+	return (
+		<QuerySearchV2Provider
+			queryParamKey={INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION}
+			initialExpression={lockedExpression}
+		>
+			<EntityOverviewContent
+				{...props}
+				targetCategory={targetCategory}
+				lockedExpression={lockedExpression}
+				lockedClauses={lockedClauses}
+				onCategoryChange={handleCategoryChange}
+			/>
+		</QuerySearchV2Provider>
+	);
+}

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

@@ -0,0 +1,142 @@
+import { ReactNode, useCallback } from 'react';
+import cx from 'classnames';
+import TanStackTable from 'components/TanStackTableView';
+import APIError from 'types/api/error';
+
+import {
+	K8sEntityData,
+	K8sEntityListConfig,
+} from '../../Base/entity.config.types';
+import { K8sEmptyState } from '../../Base/K8sEmptyState';
+import {
+	DrawerHistoryEntry,
+	useDrawerHistoryStore,
+} from '../../Base/useDrawerHistoryStore';
+import {
+	useInfraMonitoringFontSize,
+	useInfraMonitoringLineClamp,
+} from '../../Base/useInfraMonitoringTablePreferencesStore';
+import { InfraMonitoringEntity, K8S_CATEGORY_LABELS } from '../../constants';
+import {
+	SelectedItemParams,
+	useInfraMonitoringSelectedItemParams,
+} from '../../hooks';
+import { usePrimeEntityDetails } from '../../Base/usePrimeEntityDetails';
+import { RELATED_ENTITIES_PAGE_SIZE } from './useRelatedEntities';
+
+import listStyles from '../../Base/K8sBaseList.module.scss';
+import styles from './EntityOverview.module.scss';
+
+interface RelatedEntitiesTableProps {
+	targetCategory: InfraMonitoringEntity;
+	listConfig: K8sEntityListConfig<K8sEntityData, string | SelectedItemParams>;
+	records: K8sEntityData[];
+	total: number;
+	isLoading: boolean;
+	isError: boolean;
+	error?: APIError | null;
+	endTimeBeforeRetention?: boolean;
+	onPageChange: (page: number) => void;
+	onLimitChange: (limit: number) => void;
+	/** Rendered in the card's header strip, above the rows it describes */
+	header: ReactNode;
+	/** The drawer's own resource, so a row click can leave a trail back to it */
+	source: Omit<DrawerHistoryEntry, 'params'>;
+}
+
+export function RelatedEntitiesTable({
+	targetCategory,
+	listConfig,
+	records,
+	total,
+	isLoading,
+	isError,
+	error,
+	endTimeBeforeRetention,
+	onPageChange,
+	onLimitChange,
+	header,
+	source,
+}: RelatedEntitiesTableProps): JSX.Element {
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+	const pushDrawerHistory = useDrawerHistoryStore((store) => store.push);
+	const primeDetails = usePrimeEntityDetails();
+	const lineClamp = useInfraMonitoringLineClamp();
+	const fontSize = useInfraMonitoringFontSize();
+
+	// Opens the clicked resource in its own drawer, overview tab included
+	const handleRowClick = useCallback(
+		(record: K8sEntityData, itemKey: string | SelectedItemParams): void => {
+			const params: SelectedItemParams =
+				typeof itemKey === 'object'
+					? itemKey
+					: { selectedItem: itemKey, clusterName: null, namespaceName: null };
+
+			pushDrawerHistory({ ...source, params: selectedItemParams });
+
+			// The row already carries the record the drawer is about to fetch
+			primeDetails({
+				params,
+				queryKeyPrefix: listConfig.detailsQueryKeyPrefix,
+				entity: record,
+			});
+			setSelectedItemParams({ ...params, category: targetCategory });
+		},
+		[
+			primeDetails,
+			pushDrawerHistory,
+			selectedItemParams,
+			source,
+			setSelectedItemParams,
+			targetCategory,
+			listConfig.detailsQueryKeyPrefix,
+		],
+	);
+
+	const isEmpty = !isLoading && records.length === 0;
+
+	return (
+		<div className={styles.tableCard}>
+			<div className={styles.tableHeader}>{header}</div>
+
+			{isEmpty ? (
+				<div className={styles.emptyState}>
+					<K8sEmptyState
+						isError={isError}
+						error={error}
+						isLoading={isLoading}
+						endTimeBeforeRetention={endTimeBeforeRetention}
+					/>
+				</div>
+			) : (
+				<TanStackTable<K8sEntityData, string | SelectedItemParams>
+					data={records}
+					columns={listConfig.tableColumns}
+					columnStorageKey={`k8s-overview-${targetCategory}-columns`}
+					isLoading={isLoading}
+					getRowKey={listConfig.getRowKey}
+					getItemKey={listConfig.getItemKey}
+					onRowClick={handleRowClick}
+					className={cx(listStyles.k8SListTable, styles.table)}
+					testId={`related-entities-table-${targetCategory}`}
+					// A page of rows is short enough to render whole, which keeps the card
+					// at the height of its rows instead of stretching down the drawer
+					disableVirtualScroll
+					pagination={{
+						total,
+						defaultLimit: RELATED_ENTITIES_PAGE_SIZE,
+						showTotalCount: true,
+						totalCountLabel: K8S_CATEGORY_LABELS[targetCategory],
+						onPageChange,
+						onLimitChange,
+					}}
+					plainTextCellLineClamp={lineClamp}
+					cellTypographySize={fontSize}
+					paginationClassname={listStyles.paginationContainer}
+					resetScrollKey={targetCategory}
+				/>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,42 @@
+import { Lock } from '@signozhq/icons';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+
+import { RelatedFilterClause } from '../../Base/relations';
+
+import styles from './EntityOverview.module.scss';
+
+interface ScopeChipProps {
+	clauses: RelatedFilterClause[];
+	/** The clauses as one expression, shown in full on hover */
+	expression: string;
+}
+
+/**
+ * The locked half of the filter. It reads like the editor beside it: the last
+ * clause carries the relation, the ones scoping it are counted instead.
+ */
+export function ScopeChip({
+	clauses,
+	expression,
+}: ScopeChipProps): JSX.Element {
+	const relation = clauses[clauses.length - 1];
+
+	return (
+		<TooltipSimple title={expression} side="top" arrow>
+			<span className={styles.scopeChip} data-testid="overview-locked-scope">
+				<Lock size={12} />
+				<span className={styles.scopeExpression}>
+					<span className={styles.scopeKey}>{relation.key}</span>
+					<span className={styles.scopeOperator}> = </span>
+					<span className={styles.scopeValue}>
+						{formatValueForExpression(relation.value)}
+					</span>
+				</span>
+				{clauses.length > 1 && (
+					<span className={styles.scopeMore}>{`+${clauses.length - 1}`}</span>
+				)}
+			</span>
+		</TooltipSimple>
+	);
+}

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

@@ -0,0 +1,242 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
+
+import { TableColumnDef } from 'components/TanStackTableView';
+
+import { InfraMonitoringEntity } from '../../../constants';
+import EntityOverview from '../EntityOverview';
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="mock-datetime" />,
+}));
+
+const mockQuerySearchProps = jest.fn();
+
+jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
+	__esModule: true,
+	default: (props: {
+		queryData?: { filter?: { expression?: string } };
+		initialExpression?: string;
+	}): JSX.Element => {
+		mockQuerySearchProps(props);
+		return <div data-testid="mock-query-search" />;
+	},
+}));
+
+type TestRecord = { name: string; meta?: Record<string, string> | null };
+
+const mockFetchListData = jest.fn();
+
+const mockTableColumns: TableColumnDef<TestRecord>[] = [
+	{
+		id: 'name',
+		header: 'Name',
+		accessorKey: 'name',
+		cell: ({ value }): string => String(value),
+	},
+];
+
+jest.mock('../../../Base/entity.registry', () => ({
+	getEntityConfig: (category: string) => ({
+		list: {
+			entity: category,
+			tableColumns: mockTableColumns,
+			fetchListData: mockFetchListData,
+			getRowKey: (record: TestRecord): string => record.name,
+			getItemKey: (record: TestRecord): string => record.name,
+		},
+	}),
+}));
+
+const NODE_ATTRIBUTES = {
+	'k8s.node.name': 'node-1',
+	'k8s.cluster.name': 'prod',
+};
+
+const LOCKED_EXPRESSION =
+	"k8s.cluster.name = 'prod' AND k8s.node.name = 'node-1'";
+
+interface RenderOptions {
+	onUrlUpdate?: OnUrlUpdateFunction;
+	attributes?: Record<string, string>;
+}
+
+function overviewTree(
+	attributes: Record<string, string>,
+	queryClient: QueryClient,
+	onUrlUpdate?: OnUrlUpdateFunction,
+): JSX.Element {
+	return (
+		<MemoryRouter>
+			<QueryClientProvider client={queryClient}>
+				<NuqsTestingAdapter onUrlUpdate={onUrlUpdate}>
+					<VirtuosoMockContext.Provider
+						value={{ viewportHeight: 800, itemHeight: 50 }}
+					>
+						<TooltipProvider>
+							<EntityOverview
+								category={InfraMonitoringEntity.NODES}
+								eventEntity="node"
+								attributes={attributes}
+								entity={{ nodeName: attributes['k8s.node.name'] }}
+								entityName={attributes['k8s.node.name']}
+								queryKeyPrefix="node"
+							/>
+						</TooltipProvider>
+					</VirtuosoMockContext.Provider>
+				</NuqsTestingAdapter>
+			</QueryClientProvider>
+		</MemoryRouter>
+	);
+}
+
+function renderOverview({
+	onUrlUpdate,
+	attributes = NODE_ATTRIBUTES,
+}: RenderOptions = {}): {
+	openAnotherResource: (next: Record<string, string>) => void;
+} {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	const { rerender } = render(
+		overviewTree(attributes, queryClient, onUrlUpdate),
+	);
+
+	return {
+		openAnotherResource: (next): void =>
+			rerender(overviewTree(next, queryClient, onUrlUpdate)),
+	};
+}
+
+describe('EntityOverview', () => {
+	beforeEach(() => {
+		mockQuerySearchProps.mockReset();
+		mockFetchListData.mockReset();
+		mockFetchListData.mockResolvedValue({
+			type: 'list',
+			records: [{ name: 'pod-1' }],
+			total: 1,
+		});
+	});
+
+	it('lists the first related resource scoped by the locked expression', async () => {
+		renderOverview();
+
+		await waitFor(() => {
+			expect(mockFetchListData).toHaveBeenCalled();
+		});
+
+		expect(mockFetchListData.mock.calls[0][0].filter.expression).toBe(
+			LOCKED_EXPRESSION,
+		);
+		await expect(
+			screen.findByTestId('related-entities-table-pods'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('keeps the locked scope out of the editable filter', async () => {
+		renderOverview();
+
+		// The chip leads with the relation and counts the scope behind it
+		const chip = await screen.findByTestId('overview-locked-scope');
+		expect(chip).toHaveTextContent("k8s.node.name = 'node-1'");
+		expect(chip).toHaveTextContent('+1');
+
+		// The editor is handed the user's own expression, never the locked scope
+		const lastProps = mockQuerySearchProps.mock.calls.at(-1)?.[0];
+		expect(lastProps.queryData.filter.expression).toBe('');
+		expect(lastProps.initialExpression).toBe(LOCKED_EXPRESSION);
+	});
+
+	it('opens the clicked resource in its own drawer', async () => {
+		const user = userEvent.setup();
+		const onUrlUpdate = jest.fn();
+
+		renderOverview({ onUrlUpdate });
+
+		const row = await screen.findByText('pod-1');
+		await user.click(row);
+
+		await waitFor(() => {
+			const params = onUrlUpdate.mock.calls.map((call) => call[0].searchParams);
+			expect(
+				params.some(
+					(searchParams) =>
+						searchParams.get('selectedItem') === 'pod-1' &&
+						searchParams.get('selectedItemCategory') === 'pods',
+				),
+			).toBe(true);
+		});
+	});
+
+	it("forgets the previous drawer's resource when another one opens", async () => {
+		const user = userEvent.setup();
+
+		const { openAnotherResource } = renderOverview();
+
+		await user.click(screen.getByTestId('overview-resource-select'));
+		await user.click(
+			await screen.findByTestId('overview-resource-option-containers'),
+		);
+		await expect(
+			screen.findByTestId('related-entities-table-containers'),
+		).resolves.toBeInTheDocument();
+
+		openAnotherResource({ ...NODE_ATTRIBUTES, 'k8s.node.name': 'node-2' });
+
+		// Back to pods, this node's default, rather than the containers just picked
+		await expect(
+			screen.findByTestId('related-entities-table-pods'),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('says so when the resource relates to nothing', async () => {
+		renderOverview({ attributes: { 'os.type': 'linux' } });
+
+		await expect(
+			screen.findByText(/Nothing related to this Node/),
+		).resolves.toBeInTheDocument();
+		expect(mockFetchListData).not.toHaveBeenCalled();
+	});
+
+	it('switches the listed resource from the dropdown', async () => {
+		const user = userEvent.setup();
+
+		renderOverview();
+
+		await waitFor(() => {
+			expect(mockFetchListData).toHaveBeenCalled();
+		});
+
+		await user.click(screen.getByTestId('overview-resource-select'));
+
+		// Every resource related to a node is offered, the listed one included
+		await expect(
+			screen.findByTestId('overview-resource-option-pods'),
+		).resolves.toBeInTheDocument();
+
+		await user.click(
+			await screen.findByTestId('overview-resource-option-containers'),
+		);
+
+		await expect(
+			screen.findByTestId('related-entities-table-containers'),
+		).resolves.toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useCarriedOverFilters.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import { useQuerySearchOnRun } from 'components/QueryBuilderV2';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { parseAsString, useQueryState } from 'nuqs';
+
+import { carryOverListFilters } from '../../Base/relations';
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../constants';
+
+/**
+ * Seeds the editable half of the filter with whatever the list page was
+ * filtered by, reduced to the clauses the listed resource understands. Runs
+ * once per resource, so it never overwrites what the user types, and stands
+ * aside for a drawer opened from a link that already carries a filter.
+ */
+export function useCarriedOverFilters(
+	targetCategory: InfraMonitoringEntity,
+): void {
+	const { currentQuery } = useQueryBuilder();
+	const listExpression =
+		currentQuery.builder.queryData[0]?.filter?.expression || '';
+	const querySearchOnRun = useQuerySearchOnRun();
+
+	const [urlExpression] = useQueryState(
+		INFRA_MONITORING_K8S_PARAMS_KEYS.OVERVIEW_EXPRESSION,
+		parseAsString,
+	);
+
+	const seededFor = useRef<string | null>(null);
+	const hadUrlExpressionOnMount = useRef<boolean | null>(null);
+	if (hadUrlExpressionOnMount.current === null) {
+		hadUrlExpressionOnMount.current = !!urlExpression;
+	}
+
+	useEffect(() => {
+		if (seededFor.current === targetCategory) {
+			return;
+		}
+
+		const isFirstResource = seededFor.current === null;
+		seededFor.current = targetCategory;
+
+		if (isFirstResource && hadUrlExpressionOnMount.current) {
+			return;
+		}
+
+		querySearchOnRun(carryOverListFilters(listExpression, targetCategory));
+	}, [targetCategory, listExpression, querySearchOnRun]);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityOverview/useRelatedEntities.ts

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import APIError from 'types/api/error';
+
+import {
+	K8sEntityData,
+	K8sEntityListConfig,
+} from '../../Base/entity.config.types';
+import { SelectedItemParams } from '../../hooks';
+
+type FetchRelatedEntities = K8sEntityListConfig<
+	K8sEntityData,
+	string | SelectedItemParams
+>['fetchListData'];
+
+interface UseRelatedEntitiesParams {
+	/** Absent while the target category is still unresolved; the query stays idle */
+	fetchListData?: FetchRelatedEntities;
+	queryKey: string;
+	expression: string;
+	/** Time range in seconds — see useEntityDetailsTime */
+	timeRange: { startTime: number; endTime: number };
+}
+
+interface UseRelatedEntitiesResult {
+	records: K8sEntityData[];
+	total: number;
+	page: number;
+	limit: number;
+	setPage: (page: number) => void;
+	setLimit: (limit: number) => void;
+	isLoading: boolean;
+	isFetching: boolean;
+	isError: boolean;
+	error?: APIError | null;
+	endTimeBeforeRetention?: boolean;
+	refetch: () => void;
+	cancel: () => void;
+}
+
+export const RELATED_ENTITIES_PAGE_SIZE = 10;
+
+const SECOND_IN_MS = 1000;
+
+export function useRelatedEntities({
+	fetchListData,
+	queryKey,
+	expression,
+	timeRange,
+}: UseRelatedEntitiesParams): UseRelatedEntitiesResult {
+	const queryClient = useQueryClient();
+	const [page, setPage] = useState(1);
+	const [limit, setLimit] = useState(RELATED_ENTITIES_PAGE_SIZE);
+
+	useEffect(() => {
+		setPage(1);
+	}, [expression, queryKey]);
+
+	const reactQueryKey = useMemo(
+		() => [
+			REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
+			queryKey,
+			timeRange.startTime,
+			timeRange.endTime,
+			expression,
+			page,
+			limit,
+		],
+		[queryKey, timeRange.startTime, timeRange.endTime, expression, page, limit],
+	);
+
+	const { data, isLoading, isFetching, isError, refetch } = useQuery({
+		queryKey: reactQueryKey,
+		queryFn: ({ signal }) =>
+			(fetchListData as FetchRelatedEntities)(
+				{
+					filter: { expression },
+					offset: (page - 1) * limit,
+					limit,
+					// The list APIs take milliseconds, useEntityDetailsTime gives seconds
+					start: timeRange.startTime * SECOND_IN_MS,
+					end: timeRange.endTime * SECOND_IN_MS,
+				},
+				signal,
+			),
+		enabled: !!fetchListData && !!expression.trim(),
+	});
+
+	const cancel = useCallback((): void => {
+		void queryClient.cancelQueries({ queryKey: reactQueryKey });
+	}, [queryClient, reactQueryKey]);
+
+	const handleRefetch = useCallback((): void => {
+		void refetch();
+	}, [refetch]);
+
+	return {
+		records: data?.records ?? data?.data ?? [],
+		total: data?.total ?? 0,
+		page,
+		limit,
+		setPage,
+		setLimit,
+		isLoading,
+		isFetching,
+		isError,
+		error: data?.error,
+		endTimeBeforeRetention: data?.endTimeBeforeRetention,
+		refetch: handleRefetch,
+		cancel,
+	};
+}

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

@@ -2,7 +2,7 @@ import { Container } from '@signozhq/icons';
 import { InfraMonitoringEvents } from 'constants/events';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 
-import { CustomTab } from '../Base/K8sBaseDetails';
+import { CustomTab } from '../Base/types';
 import {
 	InfraMonitoringEntity,
 	podUtilizationByPodWidgetInfo,

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

@@ -26,7 +26,10 @@
 		overflow-y: auto;
 		padding: var(--spacing-8);
 		margin: 0;
-		min-width: 900px;
+		// On a 13" screen the drawer itself is narrower than 900px, and a flat
+		// minimum there clips the right edge of every tab
+		box-sizing: border-box;
+		min-width: min(900px, 100%);
 	}
 }
 
@@ -34,6 +37,29 @@
 	--button-padding: var(--spacing-2);
 }
 
+.backButton {
+	--button-padding: var(--spacing-2) var(--spacing-3);
+
+	flex: none;
+	white-space: nowrap;
+}
+
+// The kind reads as a label on the name, not as part of it
+.entityKind {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	flex: none;
+	padding: var(--spacing-1) var(--spacing-3);
+	border-radius: 2px;
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}
+
 .title {
 	font-family: var(--periscope-font-family-mono);
 

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

@@ -1,4 +1,7 @@
-import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import type {
+	InfraMonitoringEntity,
+	VIEWS,
+} from 'container/InfraMonitoringK8sV2/constants';
 import logEvent from 'api/common/logEvent';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { isCustomTimeRange } from 'store/globalTime';
@@ -15,7 +18,7 @@ export function logInfraDrawerTimeRangeCustomizedEvent(
 
 export function logInfraDrawerFilterCustomizedEvent(
 	entityType: InfraMonitoringEntity,
-	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
+	tab: `${VIEWS}`,
 	expression: string,
 	filterSource: 'search' | 'logs',
 ): void {

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -12,23 +12,11 @@ import {
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import {
-	ArrowUpDown,
-	ArrowUpToLine,
-	Bolt,
-	Box,
-	Boxes,
-	Computer,
-	Container,
-	FilePenLine,
-	Filter,
-	Group,
-	HardDrive,
-	Workflow,
-} from '@signozhq/icons';
+import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { CategoryIcon } from './Base/categoryIcons';
 import { K8sDynamicList } from './Base/K8sDynamicList';
 import {
 	GetClustersQuickFiltersConfig,
@@ -42,6 +30,7 @@ import {
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
 	InfraMonitoringEntity,
+	K8S_CATEGORY_LABELS,
 	K8sCategories,
 	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
@@ -156,62 +145,62 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		() => [
 			{
 				key: K8sCategories.CONTAINERS,
-				label: 'Containers',
-				icon: <Box size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.CONTAINERS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.CONTAINERS} />,
 				config: GetContainersQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.PODS,
-				label: 'Pods',
-				icon: <Container size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.PODS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.PODS} />,
 				config: GetPodsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.NODES,
-				label: 'Nodes',
-				icon: <Workflow size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.NODES],
+				icon: <CategoryIcon category={InfraMonitoringEntity.NODES} />,
 				config: GetNodesQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.NAMESPACES,
-				label: 'Namespaces',
-				icon: <FilePenLine size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.NAMESPACES],
+				icon: <CategoryIcon category={InfraMonitoringEntity.NAMESPACES} />,
 				config: GetNamespaceQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.CLUSTERS,
-				label: 'Clusters',
-				icon: <Boxes size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.CLUSTERS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.CLUSTERS} />,
 				config: GetClustersQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.DEPLOYMENTS,
-				label: 'Deployments',
-				icon: <Computer size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.DEPLOYMENTS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.DEPLOYMENTS} />,
 				config: GetDeploymentsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.JOBS,
-				label: 'Jobs',
-				icon: <Bolt size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.JOBS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.JOBS} />,
 				config: GetJobsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.DAEMONSETS,
-				label: 'DaemonSets',
-				icon: <Group size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.DAEMONSETS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.DAEMONSETS} />,
 				config: GetDaemonsetsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.STATEFULSETS,
-				label: 'StatefulSets',
-				icon: <ArrowUpDown size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.STATEFULSETS],
+				icon: <CategoryIcon category={InfraMonitoringEntity.STATEFULSETS} />,
 				config: GetStatefulsetsQuickFiltersConfig(),
 			},
 			{
 				key: K8sCategories.VOLUMES,
-				label: 'Volumes',
-				icon: <HardDrive size={14} />,
+				label: K8S_CATEGORY_LABELS[InfraMonitoringEntity.VOLUMES],
+				icon: <CategoryIcon category={InfraMonitoringEntity.VOLUMES} />,
 				config: GetVolumesQuickFiltersConfig(),
 			},
 		],

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

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -132,6 +132,7 @@ export const jobEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.JOBS,
 		eventCategory: InfraMonitoringEvents.Job,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'job',
 		getSelectedItemExpression: k8sJobGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -6,10 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import {
-	K8sDetailsCountConfig,
-	K8sDetailsMetadataConfig,
-} from '../Base/K8sBaseDetails';
+import { K8sDetailsCountConfig, K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -143,6 +143,7 @@ export const namespaceEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.NAMESPACES,
 		eventCategory: InfraMonitoringEvents.Namespace,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'namespace',
 		getSelectedItemExpression: k8sNamespaceGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -12,7 +12,7 @@ import {
 	buildLogsTracesExpression,
 } from 'container/InfraMonitoringK8sV2/Base/utils';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 

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

@@ -129,6 +129,7 @@ export const nodeEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.NODES,
 		eventCategory: InfraMonitoringEvents.Node,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'node',
 		getSelectedItemExpression: k8sNodeGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	buildEventsExpression,

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

@@ -121,6 +121,7 @@ export const podEntityConfig: K8sEntityConfig<InframonitoringtypesPodRecordDTO>
 		details: {
 			category: InfraMonitoringEntity.PODS,
 			eventCategory: InfraMonitoringEvents.Pod,
+			tabsConfig: { showOverview: true },
 			queryKeyPrefix: 'pod',
 			getSelectedItemExpression: k8sPodGetSelectedItemExpression,
 			fetchEntityData,

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

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import {
 	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,

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

@@ -132,6 +132,7 @@ export const statefulSetEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.STATEFULSETS,
 		eventCategory: InfraMonitoringEvents.StatefulSet,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'statefulSet',
 		getSelectedItemExpression: k8sStatefulSetGetSelectedItemExpression,
 		fetchEntityData,

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

@@ -6,7 +6,7 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import { K8sDetailsMetadataConfig } from '../Base/types';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {

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

@@ -127,6 +127,7 @@ export const volumeEntityConfig: K8sEntityConfig<
 	details: {
 		category: InfraMonitoringEntity.VOLUMES,
 		eventCategory: InfraMonitoringEvents.Volume,
+		tabsConfig: { showOverview: true },
 		queryKeyPrefix: 'volume',
 		getSelectedItemExpression: k8sVolumeGetSelectedItemExpression,
 		fetchEntityData,

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -157,9 +157,11 @@ export enum VIEWS {
 	PROCESSES = 'processes',
 	EVENTS = 'events',
 	POD_METRICS = 'pod_metrics',
+	OVERVIEW = 'overview',
 }
 
 export const VIEW_TYPES = {
+	OVERVIEW: VIEWS.OVERVIEW,
 	METRICS: VIEWS.METRICS,
 	LOGS: VIEWS.LOGS,
 	TRACES: VIEWS.TRACES,
@@ -896,6 +898,41 @@ export const getInvalidValueTooltipText = (
 	attribute: string,
 ): string => `Some ${entity} do not have ${attribute}s.`;
 
+export const K8S_CATEGORY_LABELS: Record<InfraMonitoringEntity, string> = {
+	[InfraMonitoringEntity.HOSTS]: 'Hosts',
+	[InfraMonitoringEntity.PODS]: 'Pods',
+	[InfraMonitoringEntity.NODES]: 'Nodes',
+	[InfraMonitoringEntity.NAMESPACES]: 'Namespaces',
+	[InfraMonitoringEntity.CLUSTERS]: 'Clusters',
+	[InfraMonitoringEntity.DEPLOYMENTS]: 'Deployments',
+	[InfraMonitoringEntity.STATEFULSETS]: 'StatefulSets',
+	[InfraMonitoringEntity.DAEMONSETS]: 'DaemonSets',
+	[InfraMonitoringEntity.CONTAINERS]: 'Containers',
+	[InfraMonitoringEntity.JOBS]: 'Jobs',
+	[InfraMonitoringEntity.VOLUMES]: 'Volumes',
+};
+
+/**
+ * Used where one record is named, like the drawer's back control. Cased the
+ * same way as the plural labels, so StatefulSet keeps its capital.
+ */
+export const K8S_CATEGORY_SINGULAR_LABELS: Record<
+	InfraMonitoringEntity,
+	string
+> = {
+	[InfraMonitoringEntity.HOSTS]: 'Host',
+	[InfraMonitoringEntity.PODS]: 'Pod',
+	[InfraMonitoringEntity.NODES]: 'Node',
+	[InfraMonitoringEntity.NAMESPACES]: 'Namespace',
+	[InfraMonitoringEntity.CLUSTERS]: 'Cluster',
+	[InfraMonitoringEntity.DEPLOYMENTS]: 'Deployment',
+	[InfraMonitoringEntity.STATEFULSETS]: 'StatefulSet',
+	[InfraMonitoringEntity.DAEMONSETS]: 'DaemonSet',
+	[InfraMonitoringEntity.CONTAINERS]: 'Container',
+	[InfraMonitoringEntity.JOBS]: 'Job',
+	[InfraMonitoringEntity.VOLUMES]: 'Volume',
+};
+
 export const ENTITY_FILTER_PLACEHOLDERS: Record<InfraMonitoringEntity, string> =
 	{
 		[InfraMonitoringEntity.HOSTS]:
@@ -939,9 +976,11 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	PAGE_SIZE: 'pageSize',
 	EXPANDED: 'expanded',
 	SELECTED_ITEM: 'selectedItem',
+	SELECTED_ITEM_CATEGORY: 'selectedItemCategory',
 	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
 	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
 	SELECTED_ITEM_CONTAINER_NAME: 'selectedItemContainerName',
+	OVERVIEW_EXPRESSION: 'overviewExpression',
 	DETAIL_RELATIVE_TIME: 'detailRelativeTime',
 	DETAIL_START_TIME: 'detailStartTime',
 	DETAIL_END_TIME: 'detailEndTime',

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -18,7 +18,6 @@ import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 import {
 	DEFAULT_K8S_CATEGORY,
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	VIEWS,
 } from './constants';
 import { orderBySchema, OrderBySchemaType } from './schemas';
 
@@ -85,10 +84,13 @@ export const useInfraMonitoringGroupBy = (): UseQueryStateReturn<
 		parseAsGroupBy.withDefault([]).withOptions(defaultNuqsOptions),
 	);
 
-export const useInfraMonitoringView = (): UseQueryStateReturn<string, string> =>
+export const useInfraMonitoringView = (): UseQueryStateReturn<
+	string | null,
+	undefined
+> =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW,
-		parseAsString.withDefault(VIEWS.METRICS).withOptions(defaultNuqsOptions),
+		parseAsString.withOptions(defaultNuqsOptions),
 	);
 
 export const useInfraMonitoringLogFilters = (): UseQueryStateReturn<
@@ -137,6 +139,8 @@ export const useInfraMonitoringCategory = (): UseQueryStateReturn<
 
 export interface SelectedItemParams {
 	selectedItem: string | null;
+	/** Drawer category, when it differs from the list page category. */
+	category?: string | null;
 	clusterName?: string | null;
 	namespaceName?: string | null;
 	containerName?: string | null;
@@ -144,6 +148,7 @@ export interface SelectedItemParams {
 
 const selectedItemParamsParsers = {
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: parseAsString,
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: parseAsString,
 	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CONTAINER_NAME]: parseAsString,
@@ -165,6 +170,8 @@ export const useInfraMonitoringSelectedItemParams =
 			() => ({
 				selectedItem:
 					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM] ?? null,
+				category:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY] ?? null,
 				clusterName:
 					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME] ??
 					null,
@@ -183,6 +190,7 @@ export const useInfraMonitoringSelectedItemParams =
 				if (newParams === null) {
 					void setRawParams({
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: null,
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: null,
 						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CONTAINER_NAME]: null,
@@ -193,6 +201,8 @@ export const useInfraMonitoringSelectedItemParams =
 				void setRawParams({
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]:
 						newParams.selectedItem ?? null,
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CATEGORY]:
+						newParams.category ?? null,
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]:
 						newParams.clusterName ?? null,
 					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]:

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -10,6 +10,8 @@ import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
@@ -347,57 +349,62 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className="metrics-explorer-explore-container">
-				<div className="explore-header">
-					<div className="explore-header-left-actions">
-						<span>1 chart/query</span>
-						<Tooltip
-							open={disableOneChartPerQuery ? undefined : false}
-							title={oneChartPerQueryDisabledTooltip}
-						>
-							<Switch
-								value={showOneChartPerQuery}
-								onChange={handleToggleShowOneChartPerQuery}
-								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+			<QuickFiltersLayout
+				showFilters
+				savedViewProps={{ source: SavedviewtypesSourceDTO.metrics }}
+			>
+				<div className="metrics-explorer-explore-container">
+					<div className="explore-header">
+						<div className="explore-header-left-actions">
+							<span>1 chart/query</span>
+							<Tooltip
+								open={disableOneChartPerQuery ? undefined : false}
+								title={oneChartPerQueryDisabledTooltip}
+							>
+								<Switch
+									value={showOneChartPerQuery}
+									onChange={handleToggleShowOneChartPerQuery}
+									disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+								/>
+							</Tooltip>
+						</div>
+						<div className="explore-header-right-actions">
+							{!isEmpty(warning) && <WarningPopover warningData={warning} />}
+							<DateTimeSelector showAutoRefresh />
+							<RightToolbarActions
+								onStageRunQuery={(): void => handleRunQuery()}
+								isLoadingQueries={isLoadingQueries}
+								handleCancelQuery={handleCancelQuery}
 							/>
-						</Tooltip>
+						</div>
 					</div>
-					<div className="explore-header-right-actions">
-						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
-						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions
-							onStageRunQuery={(): void => handleRunQuery()}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+					<QueryBuilderV2
+						config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+						panelType={PANEL_TYPES.TIME_SERIES}
+						showFunctions={false}
+						version="v3"
+					/>
+					<div className="explore-content">
+						<TimeSeries
+							onFetchingStateChange={setIsLoadingQueries}
+							showOneChartPerQuery={showOneChartPerQuery}
+							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							handleOpenMetricDetails={handleOpenMetricDetails}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
+							showYAxisUnitSelector={showYAxisUnitSelector}
+							isCancelled={isCancelled}
+							exportDefaultQuery={exportDefaultQuery}
 						/>
 					</div>
 				</div>
-				<QueryBuilderV2
-					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					showFunctions={false}
-					version="v3"
-				/>
-				<div className="explore-content">
-					<TimeSeries
-						onFetchingStateChange={setIsLoadingQueries}
-						showOneChartPerQuery={showOneChartPerQuery}
-						setWarning={setWarning}
-						areAllMetricUnitsSame={areAllMetricUnitsSame}
-						isMetricUnitsLoading={isMetricUnitsLoading}
-						isMetricUnitsError={isMetricUnitsError}
-						metricUnits={units}
-						metricNames={metricNames}
-						metrics={metrics}
-						handleOpenMetricDetails={handleOpenMetricDetails}
-						yAxisUnit={yAxisUnit}
-						setYAxisUnit={setYAxisUnit}
-						showYAxisUnitSelector={showYAxisUnitSelector}
-						isCancelled={isCancelled}
-						exportDefaultQuery={exportDefaultQuery}
-					/>
-				</div>
-			</div>
+			</QuickFiltersLayout>
 			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx

@@ -308,7 +308,7 @@ function CreateEditRolePageContent(): JSX.Element {
 				cancelText="Keep editing"
 				onConfirm={confirmNavigation}
 				onCancel={cancelNavigation}
-				testId="discard-changes-dialog"
+				data-testid="discard-changes-dialog"
 			>
 				<Typography>
 					{isCreateMode