Merge branch 'main' into feat/export-table-integration

* feat(entity-count): add base structure to show count

* feat(entity-count): add count for clusters

* feat(entity-count): add count for namespaces

* chore(infra-monitoring): move component to be under components folder

* fix(pr): address comments

docs/api/openapi.yml

@@ -8048,6 +8048,15 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableSpanMappers:
+      properties:
+        items:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapper'
+          type: array
+      required:
+      - items
+      type: object
     SpantypesGettableTraceAggregations:
       properties:
         aggregations:
@@ -8200,7 +8209,7 @@ components:
           type: boolean
         fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
-        group_id:
+        groupId:
           type: string
         id:
           type: string
@@ -8213,7 +8222,7 @@ components:
           type: string
       required:
       - id
-      - group_id
+      - groupId
       - name
       - fieldContext
       - config
@@ -13792,7 +13801,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/SpantypesGettableSpanMapperGroups'
+                    $ref: '#/components/schemas/SpantypesGettableSpanMappers'
                   status:
                     type: string
                 required:

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

@@ -9258,6 +9258,76 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export enum SpantypesSpanMapperOperationDTO {
+	move = 'move',
+	copy = 'copy',
+}
+export interface SpantypesSpanMapperSourceDTO {
+	context: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	key: string;
+	operation: SpantypesSpanMapperOperationDTO;
+	/**
+	 * @type integer
+	 */
+	priority: number;
+}
+
+export interface SpantypesSpanMapperConfigDTO {
+	/**
+	 * @type array,null
+	 */
+	sources: SpantypesSpanMapperSourceDTO[] | null;
+}
+
+export interface SpantypesSpanMapperDTO {
+	config: SpantypesSpanMapperConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	fieldContext: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	groupId: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface SpantypesGettableSpanMappersDTO {
+	/**
+	 * @type array
+	 */
+	items: SpantypesSpanMapperDTO[];
+}
+
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -9504,30 +9574,6 @@ export interface SpantypesPostableFlamegraphDTO {
 	selectedSpanId?: string;
 }
 
-export enum SpantypesSpanMapperOperationDTO {
-	move = 'move',
-	copy = 'copy',
-}
-export interface SpantypesSpanMapperSourceDTO {
-	context: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	key: string;
-	operation: SpantypesSpanMapperOperationDTO;
-	/**
-	 * @type integer
-	 */
-	priority: number;
-}
-
-export interface SpantypesSpanMapperConfigDTO {
-	/**
-	 * @type array,null
-	 */
-	sources: SpantypesSpanMapperSourceDTO[] | null;
-}
-
 export interface SpantypesPostableSpanMapperDTO {
 	config: SpantypesSpanMapperConfigDTO;
 	/**
@@ -9576,45 +9622,6 @@ export interface SpantypesPostableWaterfallDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
-export interface SpantypesSpanMapperDTO {
-	config: SpantypesSpanMapperConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	fieldContext: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	group_id: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface SpantypesUpdatableSpanMapperDTO {
 	config?: SpantypesSpanMapperConfigDTO;
 	/**
@@ -10916,7 +10923,7 @@ export type ListSpanMappersPathParameters = {
 	groupId: string;
 };
 export type ListSpanMappers200 = {
-	data: SpantypesGettableSpanMapperGroupsDTO;
+	data: SpantypesGettableSpanMappersDTO;
 	/**
 	 * @type string
 	 */

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -3,6 +3,7 @@ import { Button, Popover, Tooltip } from 'antd';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
 import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
@@ -18,11 +19,13 @@ import './DownloadOptionsMenu.styles.scss';
 interface DownloadOptionsMenuProps {
 	dataSource: DataSource;
 	selectedColumns?: TelemetryFieldKey[];
+	panelType?: PANEL_TYPES;
 }
 
 export default function DownloadOptionsMenu({
 	dataSource,
 	selectedColumns,
+	panelType,
 }: DownloadOptionsMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(DownloadFormats.CSV);
 	const [rowLimit, setRowLimit] = useState<number>(DownloadRowCounts.TEN_K);
@@ -33,6 +36,7 @@ export default function DownloadOptionsMenu({
 
 	const { isDownloading, handleExportRawData } = useExportRawData({
 		dataSource,
+		panelType,
 	});
 
 	const handleExport = useCallback(async (): Promise<void> => {

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -1,4 +1,4 @@
-.timeseries-export-popover {
+.export-menu-popover {
 	width: 240px;
 	padding: 0 12px 12px 12px;
 

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -4,42 +4,43 @@ import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { useClientExport } from 'hooks/useExportData/useClientExport';
+import {
+	ClientExportData,
+	useClientExport,
+} from 'hooks/useExportData/useClientExport';
 import { ExportFormat } from 'lib/exportData/types';
 import { useCallback, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import './TimeseriesExportMenu.styles.scss';
+import './ExportMenu.styles.scss';
 
-interface TimeseriesExportMenuProps {
+interface ExportMenuProps {
 	dataSource: DataSource;
-	queryResponse: QueryRangeResponseV5;
+	// The queryRange response object the view holds — the hook picks the
+	// serializer (timeseries / table) from what it carries.
+	data: ClientExportData;
 	query?: Query;
 	yAxisUnit?: string;
-	legendMap?: Record<string, string>;
 	fileName?: string;
 }
 
-// Download menu for in-memory timeseries data (client-side serialization).
+// Download menu for in-memory query results (client-side serialization).
 // The raw/list backend export keeps its own menu in DownloadOptionsMenu.
-export default function TimeseriesExportMenu({
+export default function ExportMenu({
 	dataSource,
-	queryResponse,
+	data,
 	query,
 	yAxisUnit,
-	legendMap,
 	fileName,
-}: TimeseriesExportMenuProps): JSX.Element {
+}: ExportMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const { isExporting, handleExport: handleClientExport } = useClientExport({
-		response: queryResponse,
+		data,
 		query,
 		yAxisUnit,
-		legendMap,
 		fileName,
 	});
 
@@ -57,7 +58,7 @@ export default function TimeseriesExportMenu({
 						color="secondary"
 						size="icon"
 						aria-label="Download"
-						data-testid={`timeseries-export-${dataSource}`}
+						data-testid={`export-menu-${dataSource}`}
 						disabled={isExporting}
 						loading={isExporting}
 					>
@@ -65,7 +66,7 @@ export default function TimeseriesExportMenu({
 					</Button>
 				</PopoverTrigger>
 			</TooltipSimple>
-			<PopoverContent align="end" className="timeseries-export-popover">
+			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
 					<RadioGroup value={exportFormat} onChange={setExportFormat}>

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

@@ -1,8 +1,8 @@
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { fireEvent, render, screen } from 'tests/test-utils';
-import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import TimeseriesExportMenu from '../TimeseriesExportMenu';
+import ExportMenu from '../ExportMenu';
 
 const mockHandleExport = jest.fn();
 let mockIsExporting = false;
@@ -14,25 +14,26 @@ jest.mock('hooks/useExportData/useClientExport', () => ({
 	}),
 }));
 
-const response = {
-	type: 'time_series',
-	data: { results: [] },
-	meta: {},
-} as unknown as QueryRangeResponseV5;
+const data = {
+	statusCode: 200,
+	error: null,
+	message: '',
+	payload: { data: { result: [], resultType: 'time_series' } },
+} as unknown as MetricQueryRangeSuccessResponse;
 
-const TEST_ID = `timeseries-export-${DataSource.LOGS}`;
+const TEST_ID = `export-menu-${DataSource.LOGS}`;
 
 function renderMenu(): void {
 	render(
-		<TimeseriesExportMenu
+		<ExportMenu
 			dataSource={DataSource.LOGS}
-			queryResponse={response}
+			data={data}
 			fileName="logs-timeseries"
 		/>,
 	);
 }
 
-describe('TimeseriesExportMenu', () => {
+describe('ExportMenu', () => {
 	beforeEach(() => {
 		mockHandleExport.mockReset();
 		mockIsExporting = false;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -11,17 +11,17 @@ import { FlatItem, TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
 
-type VirtuosoTableRowProps<TData> = ComponentProps<
+type VirtuosoTableRowProps<TData, TItemKey = string> = ComponentProps<
 	NonNullable<
-		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+		TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>>['TableRow']
 	>
 >;
 
-function TanStackCustomTableRow<TData>({
+function TanStackCustomTableRow<TData, TItemKey = string>({
 	item,
 	context,
 	...props
-}: VirtuosoTableRowProps<TData>): JSX.Element {
+}: VirtuosoTableRowProps<TData, TItemKey>): JSX.Element {
 	const rowId = item.row.id;
 	const rowData = item.row.original;
 
@@ -84,9 +84,9 @@ function TanStackCustomTableRow<TData>({
 // This looks overkill but ensures the table is stable and doesn't re-render on every change
 // If you add any new prop to context, remember to update this function
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function areTableRowPropsEqual<TData>(
-	prev: Readonly<VirtuosoTableRowProps<TData>>,
-	next: Readonly<VirtuosoTableRowProps<TData>>,
+function areTableRowPropsEqual<TData, TItemKey = string>(
+	prev: Readonly<VirtuosoTableRowProps<TData, TItemKey>>,
+	next: Readonly<VirtuosoTableRowProps<TData, TItemKey>>,
 ): boolean {
 	if (prev.item.row.id !== next.item.row.id) {
 		return false;
@@ -141,7 +141,9 @@ function areTableRowPropsEqual<TData>(
 	return true;
 }
 
-export default memo(
-	TanStackCustomTableRow,
-	areTableRowPropsEqual,
-) as typeof TanStackCustomTableRow;
+export default memo(TanStackCustomTableRow, areTableRowPropsEqual as any) as <
+	TData,
+	TItemKey = string,
+>(
+	props: VirtuosoTableRowProps<TData, TItemKey>,
+) => JSX.Element;

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -8,23 +8,23 @@ import { TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
 
-type TanStackRowCellsProps<TData> = {
+type TanStackRowCellsProps<TData, TItemKey = string> = {
 	row: TanStackRowModel<TData>;
-	context: TableRowContext<TData> | undefined;
+	context: TableRowContext<TData, TItemKey> | undefined;
 	itemKind: 'row' | 'expansion';
 	hasSingleColumn: boolean;
 	columnOrderKey: string;
 	columnVisibilityKey: string;
 };
 
-function TanStackRowCellsInner<TData>({
+function TanStackRowCellsInner<TData, TItemKey = string>({
 	row,
 	context,
 	itemKind,
 	hasSingleColumn,
 	columnOrderKey: _columnOrderKey,
 	columnVisibilityKey: _columnVisibilityKey,
-}: TanStackRowCellsProps<TData>): JSX.Element {
+}: TanStackRowCellsProps<TData, TItemKey>): JSX.Element {
 	const hasHovered = useIsRowHovered(row.id);
 	const rowData = row.original;
 	const visibleCells = row.getVisibleCells();
@@ -40,8 +40,10 @@ function TanStackRowCellsInner<TData>({
 
 	const handleClick = useCallback(
 		(event: MouseEvent<HTMLTableCellElement>) => {
+			// Fall back to an empty key so row clicks still fire for consumers
+			// that don't provide getRowKey (e.g. Logs Explorer / Live Logs).
 			const keyData = getRowKeyData?.(rowIndex);
-			const itemKey = keyData?.itemKey ?? '';
+			const itemKey = keyData?.itemKey ?? ('' as TItemKey);
 
 			// Handle ctrl+click or cmd+click (open in new tab)
 			if ((event.ctrlKey || event.metaKey) && onRowClickNewTab) {
@@ -131,6 +133,8 @@ function areRowCellsPropsEqual<TData>(
 const TanStackRowCells = memo(
 	TanStackRowCellsInner,
 	areRowCellsPropsEqual as any,
-) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+) as <T, TItemKey = string>(
+	props: TanStackRowCellsProps<T, TItemKey>,
+) => JSX.Element;
 
 export default TanStackRowCells;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -67,7 +67,7 @@ const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
 const noopColumnVisibility = (): void => {};
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackTableInner<TData>(
+function TanStackTableInner<TData, TItemKey = string>(
 	{
 		data,
 		columns,
@@ -107,7 +107,7 @@ function TanStackTableInner<TData>(
 		suffixPaginationContent,
 		enableAlternatingRowColors,
 		disableVirtualScroll,
-	}: TanStackTableProps<TData>,
+	}: TanStackTableProps<TData, TItemKey>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
 	if (disableVirtualScroll && onEndReached) {
@@ -193,7 +193,7 @@ function TanStackTableInner<TData>(
 		skeletonRowCount,
 	});
 
-	const { rowKeyData, getRowKeyData } = useRowKeyData({
+	const { rowKeyData, getRowKeyData } = useRowKeyData<TData, TItemKey>({
 		data: effectiveData,
 		isLoading,
 		getRowKey,
@@ -229,7 +229,7 @@ function TanStackTableInner<TData>(
 	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
 		() =>
 			effectiveColumns.map((colDef) =>
-				buildTanstackColumnDef(colDef, isRowActive, getRowKeyData),
+				buildTanstackColumnDef<TData, TItemKey>(colDef, isRowActive, getRowKeyData),
 			),
 		[effectiveColumns, isRowActive, getRowKeyData],
 	);
@@ -356,7 +356,7 @@ function TanStackTableInner<TData>(
 		[effectiveVisibility, columnIds],
 	);
 
-	const virtuosoContext = useMemo<TableRowContext<TData>>(
+	const virtuosoContext = useMemo<TableRowContext<TData, TItemKey>>(
 		() => ({
 			getRowStyle,
 			getRowClassName,
@@ -520,13 +520,15 @@ function TanStackTableInner<TData>(
 	);
 
 	type VirtuosoTableComponentProps = ComponentProps<
-		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+		NonNullable<
+			TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>>['Table']
+		>
 	>;
 
 	// Use refs in virtuosoComponents to keep the component reference stable during resize
 	// This prevents Virtuoso from re-rendering all rows when columns are resized
 	const virtuosoComponents = useMemo(
-		() => ({
+		(): TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>> => ({
 			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
 				<table className={tableStyles.tanStackTable} style={style}>
 					<VirtuosoTableColGroup
@@ -582,7 +584,7 @@ function TanStackTableInner<TData>(
 							</table>
 						</div>
 					) : (
-						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData, TItemKey>>
 							className={virtuosoClassName}
 							ref={virtuosoRef}
 							{...restTableScrollerProps}
@@ -660,8 +662,11 @@ function TanStackTableInner<TData>(
 	);
 }
 
-const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
-	props: TanStackTableProps<TData> & {
+const TanStackTableForward = forwardRef(TanStackTableInner) as <
+	TData,
+	TItemKey = string,
+>(
+	props: TanStackTableProps<TData, TItemKey> & {
 		ref?: React.Ref<TanStackTableHandle>;
 	},
 ) => JSX.Element;

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

@@ -57,6 +57,39 @@ describe('TanStackRowCells', () => {
 	});
 
 	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
+			hasSingleColumn: false,
+			columnOrderKey: '',
+			columnVisibilityKey: '',
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+							columnOrderKey=""
+							columnVisibilityKey=""
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
+	});
+
+	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
+		// Mirrors Logs Explorer / Live Logs, which set onRowClick but no getRowKey.
 		const user = userEvent.setup();
 		const onRowClick = jest.fn();
 		const ctx: TableRowContext<Row> = {
@@ -84,7 +117,6 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		// onRowClick receives (rowData, itemKey) - itemKey is empty when getRowKeyData not provided
 		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
 	});
 
@@ -97,6 +129,7 @@ describe('TanStackRowCells', () => {
 			onRowClick,
 			onRowDeactivate,
 			isRowActive: () => true,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 			hasSingleColumn: false,
 			columnOrderKey: '',
 			columnVisibilityKey: '',
@@ -194,6 +227,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',
@@ -216,7 +250,7 @@ describe('TanStackRowCells', () => {
 				</table>,
 			);
 			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
+			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
@@ -227,6 +261,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',
@@ -249,7 +284,7 @@ describe('TanStackRowCells', () => {
 				</table>,
 			);
 			fireEvent.click(screen.getAllByRole('cell')[0], { metaKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
+			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
@@ -260,6 +295,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',

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

@@ -614,6 +614,34 @@ describe('TanStackTableView Integration', () => {
 			);
 		});
 
+		it('calls onRowClick with object itemKey when getItemKey returns object', async () => {
+			type SelectionParams = { id: string; name: string };
+			const user = userEvent.setup();
+			const onRowClick = jest.fn<void, [unknown, SelectionParams]>();
+
+			renderTanStackTable<
+				(typeof import('./testUtils').defaultData)[0],
+				SelectionParams
+			>({
+				props: {
+					onRowClick,
+					getRowKey: (row) => row.id,
+					getItemKey: (row) => ({ id: row.id, name: row.name }),
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			await user.click(screen.getByText('Item 1'));
+
+			expect(onRowClick).toHaveBeenCalledWith(
+				expect.objectContaining({ id: '1', name: 'Item 1' }),
+				{ id: '1', name: 'Item 1' },
+			);
+		});
+
 		it('applies active class when isRowActive returns true', async () => {
 			renderTanStackTable({
 				props: {

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

@@ -42,14 +42,14 @@ export const defaultData: TestRow[] = [
 	{ id: '3', name: 'Item 3', value: 300 },
 ];
 
-export type RenderTanStackTableOptions<T> = {
-	props?: Partial<TanStackTableProps<T>>;
+export type RenderTanStackTableOptions<T, TItemKey = string> = {
+	props?: Partial<TanStackTableProps<T, TItemKey>>;
 	queryParams?: Record<string, string>;
 	onUrlUpdate?: OnUrlUpdateFunction;
 };
 
-export function renderTanStackTable<T = TestRow>(
-	options: RenderTanStackTableOptions<T> = {},
+export function renderTanStackTable<T = TestRow, TItemKey = string>(
+	options: RenderTanStackTableOptions<T, TItemKey> = {},
 ): RenderResult {
 	const { props = {}, queryParams, onUrlUpdate } = options;
 
@@ -57,7 +57,7 @@ export function renderTanStackTable<T = TestRow>(
 		data: defaultData as unknown as T[],
 		columns: defaultColumns as unknown as TableColumnDef<T>[],
 		...props,
-	} as TanStackTableProps<T>;
+	} as TanStackTableProps<T, TItemKey>;
 
 	return render(
 		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
@@ -65,7 +65,7 @@ export function renderTanStackTable<T = TestRow>(
 				value={{ viewportHeight: 500, itemHeight: 50 }}
 			>
 				<TooltipProvider>
-					<TanStackTable<T> {...mergedProps} />
+					<TanStackTable<T, TItemKey> {...mergedProps} />
 				</TooltipProvider>
 			</VirtuosoMockContext.Provider>
 		</NuqsTestingAdapter>,

frontend/src/components/TanStackTableView/index.tsx

@@ -123,6 +123,22 @@ export * from './useTableParams';
  * />
  * ```
  *
+ * @example Object itemKey — use generic `TItemKey` when selection needs compound keys.
+ * ```tsx
+ * type SelectionParams = { id: string; cluster: string; namespace: string };
+ *
+ * <TanStackTable<Row, SelectionParams>
+ *   data={data}
+ *   columns={columns}
+ *   getRowKey={(row) => row.uid}
+ *   getItemKey={(row) => ({ id: row.name, cluster: row.cluster, namespace: row.namespace })}
+ *   onRowClick={(row, itemKey) => {
+ *     // itemKey is typed as SelectionParams
+ *     setSelection(itemKey);
+ *   }}
+ * />
+ * ```
+ *
  * @example Expandable rows. `renderExpandedRow` receives `(row, rowKey, groupMeta?)`.
  * ```tsx
  * <TanStackTable

frontend/src/components/TanStackTableView/types.ts

@@ -24,17 +24,15 @@ export type TableCellContext<TData, TValue> = {
 	isExpanded: boolean;
 	canExpand: boolean;
 	toggleExpanded: () => void;
-	/** Business/selection key for the row */
-	itemKey: string;
 	/** Group metadata when row is part of a grouped view */
 	groupMeta?: Record<string, string>;
 };
 
-export type RowKeyData = {
+export type RowKeyData<TItemKey = string> = {
 	/** Final unique key (with duplicate suffix if needed) */
 	finalKey: string;
 	/** Business/selection key */
-	itemKey: string;
+	itemKey: TItemKey;
 	/** Group metadata */
 	groupMeta?: Record<string, string>;
 };
@@ -82,14 +80,14 @@ export type FlatItem<TData> =
 	| { kind: 'row'; row: TanStackRowType<TData> }
 	| { kind: 'expansion'; row: TanStackRowType<TData> };
 
-export type TableRowContext<TData> = {
+export type TableRowContext<TData, TItemKey = string> = {
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
+	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
 	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
@@ -97,7 +95,7 @@ export type TableRowContext<TData> = {
 		groupMeta?: Record<string, string>,
 	) => ReactNode;
 	/** Get key data for a row by index */
-	getRowKeyData?: (index: number) => RowKeyData | undefined;
+	getRowKeyData?: (index: number) => RowKeyData<TItemKey> | undefined;
 	colCount: number;
 	isDarkMode?: boolean;
 	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
@@ -147,7 +145,7 @@ export type TanstackTableQueryParamsConfig = {
 	expanded?: string;
 };
 
-export type TanStackTableProps<TData> = {
+export type TanStackTableProps<TData, TItemKey = string> = {
 	data: TData[];
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
@@ -172,7 +170,7 @@ export type TanStackTableProps<TData> = {
 	 * When set, enables automatic duplicate key detection and group-aware key composition. */
 	getRowKey?: (row: TData) => string;
 	/** Function to get the business/selection key. Defaults to getRowKey result. */
-	getItemKey?: (row: TData) => string;
+	getItemKey?: (row: TData) => TItemKey;
 	/** When set, enables group-aware key generation (prefixes rowKey with group values). */
 	groupBy?: Array<{ key: string }>;
 	/** Extract group metadata from a row. Required when groupBy is set. */
@@ -181,9 +179,9 @@ export type TanStackTableProps<TData> = {
 	getRowClassName?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
+	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
 	onRowDeactivate?: () => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (

frontend/src/components/TanStackTableView/useRowKeyData.ts

@@ -1,51 +1,51 @@
 import { useCallback, useMemo } from 'react';
 
-export interface RowKeyDataItem {
+export interface RowKeyDataItem<TItemKey = string> {
 	/** Final unique key for the row (with dedup suffix if needed) */
 	finalKey: string;
 	/** Item key for tracking (may differ from finalKey) */
-	itemKey: string;
+	itemKey: TItemKey;
 	/** Group metadata when grouped */
 	groupMeta: Record<string, string> | undefined;
 }
 
-export interface UseRowKeyDataOptions<TData> {
+export interface UseRowKeyDataOptions<TData, TItemKey = string> {
 	data: TData[];
 	isLoading: boolean;
 	getRowKey?: (item: TData) => string;
-	getItemKey?: (item: TData) => string;
+	getItemKey?: (item: TData) => TItemKey;
 	groupBy?: Array<{ key: string }>;
 	getGroupKey?: (item: TData) => Record<string, string>;
 }
 
-export interface UseRowKeyDataResult {
+export interface UseRowKeyDataResult<TItemKey = string> {
 	/** Array of key data for each row, undefined if getRowKey not provided or loading */
-	rowKeyData: RowKeyDataItem[] | undefined;
-	getRowKeyData: (index: number) => RowKeyDataItem | undefined;
+	rowKeyData: RowKeyDataItem<TItemKey>[] | undefined;
+	getRowKeyData: (index: number) => RowKeyDataItem<TItemKey> | undefined;
 }
 
 /**
  * Computes unique row keys with duplicate handling and group prefixes.
  */
-export function useRowKeyData<TData>({
+export function useRowKeyData<TData, TItemKey = string>({
 	data,
 	isLoading,
 	getRowKey,
 	getItemKey,
 	groupBy,
 	getGroupKey,
-}: UseRowKeyDataOptions<TData>): UseRowKeyDataResult {
+}: UseRowKeyDataOptions<TData, TItemKey>): UseRowKeyDataResult<TItemKey> {
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const rowKeyData = useMemo((): RowKeyDataItem[] | undefined => {
+	const rowKeyData = useMemo((): RowKeyDataItem<TItemKey>[] | undefined => {
 		if (!getRowKey || isLoading) {
 			return undefined;
 		}
 
 		const keyCount = new Map<string, number>();
 
-		return data.map((item, index): RowKeyDataItem => {
+		return data.map((item, index): RowKeyDataItem<TItemKey> => {
 			const itemIdentifier = getRowKey(item);
-			const itemKey = getItemKey?.(item) ?? itemIdentifier;
+			const itemKey = getItemKey?.(item) ?? (itemIdentifier as TItemKey);
 			const groupMeta = groupBy?.length ? getGroupKey?.(item) : undefined;
 
 			// Build rowKey with group prefix when grouped

frontend/src/components/TanStackTableView/utils.ts

@@ -86,10 +86,10 @@ const buildAccessorFn = <TData>(
 	};
 };
 
-export function buildTanstackColumnDef<TData>(
+export function buildTanstackColumnDef<TData, TItemKey = string>(
 	colDef: TableColumnDef<TData>,
 	isRowActive?: (row: TData) => boolean,
-	getRowKeyData?: (index: number) => RowKeyData | undefined,
+	getRowKeyData?: (index: number) => RowKeyData<TItemKey> | undefined,
 ): ColumnDef<TData> {
 	const isFixed = colDef.width?.fixed != null;
 	const headerFn =
@@ -140,7 +140,6 @@ export function buildTanstackColumnDef<TData>(
 				toggleExpanded: (): void => {
 					row.toggleExpanded();
 				},
-				itemKey: keyData?.itemKey ?? '',
 				groupMeta: keyData?.groupMeta,
 			});
 		},

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -10,6 +10,7 @@ import {
 import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
+import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import {
 	getHostQueryPayload,
 	hostWidgetInfo,
@@ -107,8 +108,10 @@ export function getHostMetricsQueryPayload(
 
 export { hostWidgetInfo };
 
-export const hostGetSelectedItemExpression = (hostName: string): string =>
-	`host.name = ${formatValueForExpression(hostName)}`;
+export const hostGetSelectedItemExpression = (
+	params: SelectedItemParams,
+): string =>
+	`host.name = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export function hostInitialLogTracesExpression(
 	host: InframonitoringtypesHostRecordDTO,

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

@@ -51,7 +51,7 @@ function ColumnHeader({
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 								onClick={(e): void => e.stopPropagation()}
 							>
 								Learn more.

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

@@ -30,7 +30,7 @@ function EntityGroupHeader({
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 								onClick={(e): void => e.stopPropagation()}
 							>
 								Learn more.

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

@@ -52,9 +52,10 @@ import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
 import EntityTraces from '../EntityDetailsUtils/EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
 import {
+	SelectedItemParams,
 	useInfraMonitoringEventsFilters,
 	useInfraMonitoringLogFilters,
-	useInfraMonitoringSelectedItem,
+	useInfraMonitoringSelectedItemParams,
 	useInfraMonitoringTracesFilters,
 	useInfraMonitoringView,
 } from '../hooks';
@@ -62,6 +63,10 @@ import LoadingContainer from '../LoadingContainer';
 
 import '../EntityDetailsUtils/entityDetails.styles.scss';
 import { parseAsString, useQueryState } from 'nuqs';
+import {
+	EntityCountConfig,
+	EntityCountsSection,
+} from './components/EntityCountsSection/EntityCountsSection';
 
 const TimeRangeOffset = 1000000000;
 
@@ -71,6 +76,8 @@ export interface K8sDetailsMetadataConfig<T> {
 	render?: (value: string | number, entity: T) => React.ReactNode;
 }
 
+export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
+
 export interface K8sDetailsFilters {
 	filter: { expression: string };
 	start: number;
@@ -81,7 +88,7 @@ export interface K8sBaseDetailsProps<T> {
 	category: InfraMonitoringEntity;
 	eventCategory: string;
 	// Data fetching configuration
-	getSelectedItemExpression: (selectedItem: string) => string;
+	getSelectedItemExpression: (params: SelectedItemParams) => string;
 	fetchEntityData: (
 		filters: K8sDetailsFilters,
 		signal?: AbortSignal,
@@ -91,9 +98,12 @@ export interface K8sBaseDetailsProps<T> {
 	getInitialLogTracesExpression: (entity: T) => string;
 	getInitialEventsExpression: (entity: T) => string;
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	countsConfig?: K8sDetailsCountConfig<T>[];
+	getCountsFilterExpression?: (entity: T) => string;
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
+		docPath?: string;
 	}[];
 	getEntityQueryPayload: (
 		entity: T,
@@ -136,6 +146,8 @@ export default function K8sBaseDetails<T>({
 	getInitialLogTracesExpression,
 	getInitialEventsExpression,
 	metadataConfig,
+	countsConfig,
+	getCountsFilterExpression,
 	entityWidgetInfo,
 	getEntityQueryPayload,
 	queryKeyPrefix,
@@ -152,7 +164,9 @@ export default function K8sBaseDetails<T>({
 
 	const isDarkMode = useIsDarkMode();
 
-	const [selectedItem, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+	const selectedItem = selectedItemParams.selectedItem;
 
 	const entityQueryKey = useMemo(
 		() =>
@@ -160,8 +174,17 @@ export default function K8sBaseDetails<T>({
 				selectedTime,
 				`${queryKeyPrefix}EntityDetails`,
 				selectedItem,
+				selectedItemParams.clusterName,
+				selectedItemParams.namespaceName,
 			),
-		[queryKeyPrefix, selectedItem, selectedTime, getAutoRefreshQueryKey],
+		[
+			queryKeyPrefix,
+			selectedItem,
+			selectedItemParams.clusterName,
+			selectedItemParams.namespaceName,
+			selectedTime,
+			getAutoRefreshQueryKey,
+		],
 	);
 
 	const {
@@ -178,7 +201,7 @@ 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(selectedItem);
+			const expression = getSelectedItemExpression(selectedItemParams);
 
 			return fetchEntityData({ filter: { expression }, start, end }, signal);
 		},
@@ -203,8 +226,8 @@ export default function K8sBaseDetails<T>({
 	}, [entity, getInitialEventsExpression]);
 
 	const handleClose = useCallback((): void => {
-		setSelectedItem(null);
-	}, [setSelectedItem]);
+		setSelectedItemParams(null);
+	}, [setSelectedItemParams]);
 
 	const entityName = entity ? getEntityName(entity) : '';
 
@@ -467,6 +490,19 @@ export default function K8sBaseDetails<T>({
 								})}
 							</div>
 						</div>
+
+						{countsConfig &&
+							countsConfig.length > 0 &&
+							selectedItem &&
+							getCountsFilterExpression && (
+								<EntityCountsSection
+									entity={entity}
+									countsConfig={countsConfig}
+									selectedItem={selectedItem}
+									filterExpression={getCountsFilterExpression(entity)}
+									closeDrawer={handleClose}
+								/>
+							)}
 					</div>
 
 					{!hideDetailViewTabs && (

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

@@ -10,7 +10,6 @@ import TanStackTable, {
 } from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { parseAsString, useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Querybuildertypesv5QueryWarnDataDTO } from 'api/generated/services/sigNoz.schemas';
@@ -21,8 +20,10 @@ import {
 	InfraMonitoringEntity,
 } from '../constants';
 import {
+	SelectedItemParams,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
+	useInfraMonitoringSelectedItemParams,
 	useInfraMonitoringStatusFilter,
 } from '../hooks';
 import { useInfraMonitoringLineClamp } from '../components';
@@ -49,7 +50,10 @@ export type K8sBaseListEmptyStateContext = {
 /** Base type constraint for K8s entity data */
 export type K8sEntityData = { meta?: Record<string, string> | null };
 
-export type K8sBaseListProps<T extends K8sEntityData> = {
+export type K8sBaseListProps<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+> = {
 	controlListPrefix?: React.ReactNode;
 	leftFilters?: React.ReactNode;
 	entity: InfraMonitoringEntity;
@@ -69,8 +73,8 @@ export type K8sBaseListProps<T extends K8sEntityData> = {
 	}>;
 	/** Function to get the unique key for a row. */
 	getRowKey?: (record: T) => string;
-	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
+	/** Function to get the item key used for selection. Can return string or SelectedItemParams. */
+	getItemKey?: (record: T) => TItemKey;
 	eventCategory: InfraMonitoringEvents;
 	renderEmptyState?: (
 		context: K8sBaseListEmptyStateContext,
@@ -78,7 +82,10 @@ export type K8sBaseListProps<T extends K8sEntityData> = {
 	extraQueryKeyParts?: string[];
 };
 
-export function K8sBaseList<T extends K8sEntityData>({
+export function K8sBaseList<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+>({
 	controlListPrefix,
 	leftFilters,
 	entity,
@@ -89,17 +96,16 @@ export function K8sBaseList<T extends K8sEntityData>({
 	eventCategory,
 	renderEmptyState,
 	extraQueryKeyParts = [],
-}: K8sBaseListProps<T>): JSX.Element {
+}: K8sBaseListProps<T, TItemKey>): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const expression = currentQuery.builder.queryData[0]?.filter?.expression || '';
 	const lineClamp = useInfraMonitoringLineClamp();
 	const [groupBy] = useInfraMonitoringGroupBy();
 	const [orderBy] = useInfraMonitoringOrderBy();
 	const [statusFilter] = useInfraMonitoringStatusFilter();
-	const [selectedItem, setSelectedItem] = useQueryState(
-		'selectedItem',
-		parseAsString,
-	);
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+	const selectedItem = selectedItemParams.selectedItem;
 
 	const columnStorageKey = `k8s-${entity}-columns`;
 	const hiddenColumnIds = useHiddenColumnIds(columnStorageKey);
@@ -226,9 +232,17 @@ export function K8sBaseList<T extends K8sEntityData>({
 	}, [eventCategory, totalCount]);
 
 	const handleRowClick = useCallback(
-		(_record: T, itemKey: string): void => {
+		(_record: T, itemKey: TItemKey): void => {
 			if (groupBy.length === 0) {
-				void setSelectedItem(itemKey);
+				if (typeof itemKey === 'object' && itemKey !== null) {
+					setSelectedItemParams(itemKey);
+				} else {
+					setSelectedItemParams({
+						selectedItem: itemKey,
+						clusterName: null,
+						namespaceName: null,
+					});
+				}
 			}
 
 			void logEvent(InfraMonitoringEvents.ItemClicked, {
@@ -237,18 +251,43 @@ export function K8sBaseList<T extends K8sEntityData>({
 				category: eventCategory,
 			});
 		},
-		[eventCategory, groupBy.length, setSelectedItem],
+		[eventCategory, groupBy.length, setSelectedItemParams],
 	);
 
 	const handleRowClickNewTab = useCallback(
-		(_record: T, itemKey: string): void => {
+		(_record: T, itemKey: TItemKey): void => {
 			if (groupBy.length > 0) {
 				return;
 			}
 
-			// Build URL with selectedItem param
+			// Build URL with selectedItem params
 			const url = new URL(window.location.href);
-			url.searchParams.set('selectedItem', itemKey);
+			if (typeof itemKey === 'object' && itemKey !== null) {
+				const params = itemKey;
+				if (params.selectedItem) {
+					url.searchParams.set(
+						INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM,
+						params.selectedItem,
+					);
+				}
+				if (params.clusterName) {
+					url.searchParams.set(
+						INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME,
+						params.clusterName,
+					);
+				}
+				if (params.namespaceName) {
+					url.searchParams.set(
+						INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME,
+						params.namespaceName,
+					);
+				}
+			} else {
+				url.searchParams.set(
+					INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM,
+					itemKey,
+				);
+			}
 			openInNewTab(url.pathname + url.search);
 
 			void logEvent(InfraMonitoringEvents.ItemClicked, {
@@ -274,7 +313,7 @@ export function K8sBaseList<T extends K8sEntityData>({
 			rowKey: string,
 			groupMeta?: Record<string, string>,
 		): JSX.Element => (
-			<K8sExpandedRow<T>
+			<K8sExpandedRow<T, TItemKey>
 				rowKey={rowKey}
 				groupMeta={groupMeta}
 				entity={entity}
@@ -347,7 +386,7 @@ export function K8sBaseList<T extends K8sEntityData>({
 				{showEmptyState ? (
 					<div className={styles.emptyStateContainer}>{emptyTableMessage}</div>
 				) : (
-					<TanStackTable<T>
+					<TanStackTable<T, TItemKey>
 						data={pageData}
 						columns={tableColumns}
 						columnStorageKey={columnStorageKey}

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

@@ -22,10 +22,11 @@ import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 
 import { InfraMonitoringEntity } from '../constants';
 import {
+	SelectedItemParams,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
 	useInfraMonitoringPageListing,
-	useInfraMonitoringSelectedItem,
+	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
 import { K8sBaseFilters } from './types';
 
@@ -34,7 +35,7 @@ import { buildExpressionFromGroupMeta } from './utils';
 
 const EXPANDED_ROW_LIMIT = 10;
 
-export type K8sExpandedRowProps<T> = {
+export type K8sExpandedRowProps<T, TItemKey = string> = {
 	/** Pre-computed row key from parent table (includes group prefix + duplicate handling) */
 	rowKey: string;
 	/** Group metadata for building filters */
@@ -59,10 +60,10 @@ export type K8sExpandedRowProps<T> = {
 	/** Function to get the unique key for a row. */
 	getRowKey?: (record: T) => string;
 	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
+	getItemKey?: (record: T) => TItemKey;
 };
 
-export function K8sExpandedRow<T>({
+export function K8sExpandedRow<T, TItemKey = string>({
 	rowKey,
 	groupMeta,
 	entity,
@@ -71,13 +72,13 @@ export function K8sExpandedRow<T>({
 	extraQueryKeyParts = [],
 	getRowKey,
 	getItemKey,
-}: K8sExpandedRowProps<T>): JSX.Element {
+}: K8sExpandedRowProps<T, TItemKey>): JSX.Element {
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const { currentQuery } = useQueryBuilder();
 	const parentExpression =
 		currentQuery.builder.queryData[0]?.filter?.expression || '';
-	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
 	const [, setMainOrderBy] = useInfraMonitoringOrderBy();
 	const { safeNavigate } = useSafeNavigate();
 	const urlQuery = useUrlQuery();
@@ -175,10 +176,18 @@ export function K8sExpandedRow<T>({
 	const expandedData = data?.data ?? [];
 
 	const handleRowClick = useCallback(
-		(_row: T, itemKey: string): void => {
-			void setSelectedItem(itemKey);
+		(_row: T, itemKey: TItemKey): void => {
+			if (typeof itemKey === 'object' && itemKey !== null) {
+				setSelectedItemParams(itemKey as unknown as SelectedItemParams);
+			} else {
+				setSelectedItemParams({
+					selectedItem: itemKey as string,
+					clusterName: null,
+					namespaceName: null,
+				});
+			}
 		},
-		[setSelectedItem],
+		[setSelectedItemParams],
 	);
 
 	const handleViewAllClick = (): void => {
@@ -239,7 +248,7 @@ export function K8sExpandedRow<T>({
 
 			<div data-testid="expanded-table">
 				<TanStackTableStateProvider>
-					<TanStackTable<T>
+					<TanStackTable<T, TItemKey>
 						data={expandedData}
 						columns={tableColumns}
 						columnStorageKey={storageKey}

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

@@ -22,6 +22,7 @@ import { openInNewTab } from 'utils/navigation';
 import { TableColumnDef } from 'components/TanStackTableView';
 
 import { InfraMonitoringEntity } from '../../constants';
+import { SelectedItemParams } from '../../hooks';
 
 window.ResizeObserver =
 	window.ResizeObserver ||
@@ -165,11 +166,14 @@ function createTestColumnsWithGroup(): TableColumnDef<TestItemWithGroup>[] {
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function renderComponent<T extends K8sEntityData>({
+function renderComponent<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+>({
 	queryParams,
 	onUrlUpdate,
 	...props
-}: K8sBaseListProps<T> & {
+}: K8sBaseListProps<T, TItemKey> & {
 	queryParams?: Record<string, string>;
 	onUrlUpdate?: OnUrlUpdateFunction;
 }) {
@@ -196,7 +200,7 @@ function renderComponent<T extends K8sEntityData>({
 										value={{ viewportHeight: 800, itemHeight: 50 }}
 									>
 										<TooltipProvider>
-											<K8sBaseList {...props} />
+											<K8sBaseList<T, TItemKey> {...props} />
 										</TooltipProvider>
 									</VirtuosoMockContext.Provider>
 								</NuqsTestingAdapter>
@@ -941,4 +945,113 @@ describe('K8sBaseList', () => {
 			});
 		});
 	});
+
+	describe('with object itemKey (selectedItem + cluster + namespace params)', () => {
+		const itemId = 'obj-item';
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<
+				NonNullable<K8sBaseListProps<TestItemWithTitle>['fetchListData']>
+			>,
+			Parameters<NonNullable<K8sBaseListProps<TestItemWithTitle>['fetchListData']>>
+		>();
+
+		const getLatestParam = (key: string): string | undefined =>
+			onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get(key))
+				.filter(Boolean)
+				.pop() as string | undefined;
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			openInNewTabMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [{ id: `PodId:${itemId}`, title: `PodTitle:${itemId}` }],
+				total: 1,
+				error: null,
+			});
+		});
+
+		it('should set selectedItem, cluster and namespace params on row click', async () => {
+			const user = userEvent.setup();
+
+			renderComponent<TestItemWithTitle, SelectedItemParams>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): SelectedItemParams => ({
+					selectedItem: row.id,
+					clusterName: 'prod-cluster',
+					namespaceName: 'default-ns',
+				}),
+			});
+
+			const firstRowEl = await screen.findByText(`PodId:${itemId}`);
+			await user.click(firstRowEl);
+
+			await waitFor(() => {
+				expect(getLatestParam('selectedItem')).toBe(`PodId:${itemId}`);
+				expect(getLatestParam('selectedItemClusterName')).toBe('prod-cluster');
+				expect(getLatestParam('selectedItemNamespaceName')).toBe('default-ns');
+			});
+		});
+
+		it('should include cluster and namespace params in new tab URL on ctrl+click', async () => {
+			renderComponent<TestItemWithTitle, SelectedItemParams>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): SelectedItemParams => ({
+					selectedItem: row.id,
+					clusterName: 'prod-cluster',
+					namespaceName: 'default-ns',
+				}),
+			});
+
+			const firstRow = await screen.findByText(`PodId:${itemId}`);
+			fireEvent.click(firstRow, { ctrlKey: true });
+
+			await waitFor(() => {
+				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
+			});
+			const url = openInNewTabMock.mock.calls[0][0] as string;
+			expect(url).toContain(`selectedItem=PodId%3A${itemId}`);
+			expect(url).toContain('selectedItemClusterName=prod-cluster');
+			expect(url).toContain('selectedItemNamespaceName=default-ns');
+		});
+
+		it('should omit null cluster/namespace params in new tab URL', async () => {
+			renderComponent<TestItemWithTitle, SelectedItemParams>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): SelectedItemParams => ({
+					selectedItem: row.id,
+					clusterName: null,
+					namespaceName: null,
+				}),
+			});
+
+			const firstRow = await screen.findByText(`PodId:${itemId}`);
+			fireEvent.click(firstRow, { ctrlKey: true });
+
+			await waitFor(() => {
+				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
+			});
+			const url = openInNewTabMock.mock.calls[0][0] as string;
+			expect(url).toContain(`selectedItem=PodId%3A${itemId}`);
+			expect(url).not.toContain('selectedItemClusterName');
+			expect(url).not.toContain('selectedItemNamespaceName');
+		});
+	});
 });

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/utils.build-expression.test.ts

@@ -0,0 +1,132 @@
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
+
+describe('buildExpressionFromSelectedItemParams', () => {
+	it('should build expression from params with all values', () => {
+		const result = buildExpressionFromSelectedItemParams(
+			{
+				selectedItem: 'nginx',
+				clusterName: 'prod',
+				namespaceName: 'default',
+			},
+			'k8s.deployment.name',
+		);
+
+		expect(result).toBe(
+			"k8s.deployment.name = 'nginx' AND k8s.cluster.name = 'prod' AND k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should skip null values', () => {
+		const result = buildExpressionFromSelectedItemParams(
+			{
+				selectedItem: 'nginx',
+				clusterName: null,
+				namespaceName: 'default',
+			},
+			'k8s.deployment.name',
+		);
+
+		expect(result).toBe(
+			"k8s.deployment.name = 'nginx' AND k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should handle only selectedItem', () => {
+		const result = buildExpressionFromSelectedItemParams(
+			{
+				selectedItem: 'pod-123',
+				clusterName: null,
+				namespaceName: null,
+			},
+			'k8s.pod.uid',
+		);
+
+		expect(result).toBe("k8s.pod.uid = 'pod-123'");
+	});
+});
+
+describe('buildEventsExpression', () => {
+	it('should build expression with kind, name, cluster and attribute-context namespace', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Deployment',
+			objectName: 'nginx',
+			clusterName: 'prod',
+			namespaceName: 'default',
+		});
+
+		expect(result).toBe(
+			"k8s.object.kind = 'Deployment' AND k8s.object.name = 'nginx' AND k8s.cluster.name = 'prod' AND attribute.k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should always include kind and name, even when name is empty', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Node',
+			objectName: '',
+		});
+
+		expect(result).toBe("k8s.object.kind = 'Node' AND k8s.object.name = ''");
+	});
+
+	it('should skip cluster and namespace clauses when values are missing', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Pod',
+			objectName: 'pod-1',
+			clusterName: null,
+			namespaceName: undefined,
+		});
+
+		expect(result).toBe("k8s.object.kind = 'Pod' AND k8s.object.name = 'pod-1'");
+	});
+
+	it('should escape values with quotes', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Pod',
+			objectName: "po'd",
+			namespaceName: 'ns-1',
+		});
+
+		expect(result).toBe(
+			`k8s.object.kind = 'Pod' AND k8s.object.name = 'po\\'d' AND attribute.k8s.namespace.name = 'ns-1'`,
+		);
+	});
+});
+
+describe('buildLogsTracesExpression', () => {
+	it('should build expression with main attribute, cluster and namespace', () => {
+		const result = buildLogsTracesExpression({
+			mainAttributeKey: 'k8s.deployment.name',
+			mainAttributeValue: 'nginx',
+			clusterName: 'prod',
+			namespaceName: 'default',
+		});
+
+		expect(result).toBe(
+			"k8s.deployment.name = 'nginx' AND k8s.cluster.name = 'prod' AND k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should skip clauses with empty values', () => {
+		const result = buildLogsTracesExpression({
+			mainAttributeKey: 'k8s.node.name',
+			mainAttributeValue: 'node-1',
+			clusterName: '',
+			namespaceName: null,
+		});
+
+		expect(result).toBe("k8s.node.name = 'node-1'");
+	});
+
+	it('should return empty string when all values are missing', () => {
+		const result = buildLogsTracesExpression({
+			mainAttributeKey: 'k8s.pod.name',
+			mainAttributeValue: '',
+		});
+
+		expect(result).toBe('');
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.module.scss

@@ -0,0 +1,41 @@
+.countsContainer {
+	display: flex;
+	gap: var(--spacing-6);
+	margin-top: var(--spacing-8);
+	flex-wrap: wrap;
+}
+
+.countCard {
+	position: relative;
+	flex: 1;
+	min-width: 120px;
+	max-width: 180px;
+	border: 1px solid var(--l3-border);
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-6);
+}
+
+.countLabel {
+	color: var(--l2-foreground);
+	letter-spacing: var(--letter-spacing-wide);
+	text-transform: uppercase;
+}
+
+.countValue {
+	color: var(--l1-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--font-size-xl);
+}
+
+.navigateButton {
+	position: absolute;
+	top: var(--spacing-4);
+	right: var(--spacing-4);
+
+	--button-padding: var(--spacing-1);
+	--button-height: 24px;
+	--button-width: 24px;
+}

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

@@ -0,0 +1,107 @@
+import { Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { Compass } from '@signozhq/icons';
+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 styles from './EntityCountsSection.module.scss';
+
+export interface EntityCountConfig<T> {
+	label: string;
+	getValue: (entity: T) => number;
+	targetCategory: InfraMonitoringEntity;
+}
+
+interface EntityCountsSectionProps<T> {
+	entity: T;
+	countsConfig: EntityCountConfig<T>[];
+	selectedItem: string;
+	filterExpression: string;
+	closeDrawer: () => void;
+}
+
+export function EntityCountsSection<T>({
+	entity,
+	countsConfig,
+	selectedItem,
+	filterExpression,
+	closeDrawer,
+}: EntityCountsSectionProps<T>): JSX.Element {
+	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 },
+				})),
+			},
+		};
+
+		// TODO(H4ad): After https://github.com/SigNoz/signoz/pull/12038, inherit custom time of drawer to list
+		const urlParams = new URLSearchParams();
+		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+		urlParams.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify(compositeQuery)),
+		);
+
+		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+	};
+
+	return (
+		<div className={styles.countsContainer}>
+			{countsConfig.map((config) => (
+				<div
+					key={config.label}
+					className={styles.countCard}
+					data-testid={`count-card-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
+				>
+					<Typography.Text
+						color="muted"
+						size="small"
+						weight="medium"
+						className={styles.countLabel}
+					>
+						{config.label}
+					</Typography.Text>
+					<Typography.Text className={styles.countValue} size="xl" weight="semibold">
+						{config.getValue(entity) || '-'}
+					</Typography.Text>
+					<Link
+						to={buildNavigationUrl(config.targetCategory)}
+						onClick={closeDrawer}
+						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
+					>
+						<Tooltip
+							title={`View ${config.label.toLowerCase()} of '${selectedItem}'`}
+							placement="top"
+						>
+							<Button
+								size="icon"
+								variant="ghost"
+								color="secondary"
+								className={styles.navigateButton}
+								prefix={<Compass size={14} />}
+							/>
+						</Tooltip>
+					</Link>
+				</div>
+			))}
+		</div>
+	);
+}

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

@@ -2,7 +2,12 @@ import { Badge } from '@signozhq/ui/badge';
 
 import styles from './utils.module.scss';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import {
+	convertFiltersToExpression,
+	formatValueForExpression,
+} from 'components/QueryBuilderV2/utils';
+import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
+import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 
 const dotToUnder: Record<string, string> = {
 	'os.type': 'os_type',
@@ -89,3 +94,91 @@ export function buildExpressionFromGroupMeta(
 	}
 	return parent || metaExpression;
 }
+
+export interface EventsExpressionParams {
+	objectKind: string;
+	objectName: string;
+	clusterName?: string | null;
+	namespaceName?: string | null;
+}
+
+export function buildEventsExpression(params: EventsExpressionParams): string {
+	const clauses: string[] = [
+		`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = ${formatValueForExpression(params.objectKind)}`,
+		`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${formatValueForExpression(params.objectName)}`,
+	];
+
+	if (params.clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(params.clusterName)}`,
+		);
+	}
+
+	// the other attributes are resource., and fallbacks correctly without prefix
+	// this one needs attribute. prefix otherwise it fails the query
+	if (params.namespaceName) {
+		clauses.push(
+			`attribute.${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(params.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+}
+
+export interface LogsTracesExpressionParams {
+	mainAttributeKey: string;
+	mainAttributeValue?: string | null;
+	clusterName?: string | null;
+	namespaceName?: string | null;
+}
+
+export function buildLogsTracesExpression(
+	params: LogsTracesExpressionParams,
+): string {
+	const clauses: string[] = [];
+
+	if (params.mainAttributeValue) {
+		clauses.push(
+			`${params.mainAttributeKey} = ${formatValueForExpression(params.mainAttributeValue)}`,
+		);
+	}
+
+	if (params.clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(params.clusterName)}`,
+		);
+	}
+
+	if (params.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(params.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+}
+
+export function buildExpressionFromSelectedItemParams(
+	params: SelectedItemParams,
+	mainAttributeKey: string,
+): string {
+	const clauses: string[] = [];
+
+	if (params.selectedItem) {
+		clauses.push(
+			`${mainAttributeKey} = ${formatValueForExpression(params.selectedItem)}`,
+		);
+	}
+	if (params.clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(params.clusterName)}`,
+		);
+	}
+	if (params.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(params.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+}

frontend/src/container/InfraMonitoringK8sV2/Clusters/K8sClustersList.tsx

@@ -14,7 +14,9 @@ import { InfraMonitoringEntity } from '../constants';
 import {
 	clusterWidgetInfo,
 	getClusterMetricsQueryPayload,
+	k8sClusterDetailsCountsConfig,
 	k8sClusterDetailsMetadataConfig,
+	k8sClusterGetCountsFilterExpression,
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemExpression,
 	k8sClusterInitialEventsExpression,
@@ -136,6 +138,8 @@ function K8sClustersList({
 				getInitialLogTracesExpression={k8sClusterInitialLogTracesExpression}
 				getInitialEventsExpression={k8sClusterInitialEventsExpression}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
+				countsConfig={k8sClusterDetailsCountsConfig}
+				getCountsFilterExpression={k8sClusterGetCountsFilterExpression}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}
 				queryKeyPrefix="cluster"

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

@@ -6,67 +6,131 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sClusterGetSelectedItemExpression = (
-	selectedItemId: string,
-): string => `k8s.cluster.name = ${formatValueForExpression(selectedItemId)}`;
+	params: SelectedItemParams,
+): string =>
+	`k8s.cluster.name = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export const k8sClusterDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesClusterRecordDTO>[] =
 	[{ label: 'Cluster Name', getValue: (p): string => p.clusterName || '' }];
 
+export const k8sClusterDetailsCountsConfig: K8sDetailsCountConfig<InframonitoringtypesClusterRecordDTO>[] =
+	[
+		{
+			label: 'Namespaces',
+			getValue: (p): number => p.counts?.namespaces ?? 0,
+			targetCategory: InfraMonitoringEntity.NAMESPACES,
+		},
+		{
+			label: 'Nodes',
+			getValue: (p): number => p.counts?.nodes ?? 0,
+			targetCategory: InfraMonitoringEntity.NODES,
+		},
+		{
+			label: 'Deployments',
+			getValue: (p): number => p.counts?.deployments ?? 0,
+			targetCategory: InfraMonitoringEntity.DEPLOYMENTS,
+		},
+		{
+			label: 'StatefulSets',
+			getValue: (p): number => p.counts?.statefulSets ?? 0,
+			targetCategory: InfraMonitoringEntity.STATEFULSETS,
+		},
+		{
+			label: 'DaemonSets',
+			getValue: (p): number => p.counts?.daemonSets ?? 0,
+			targetCategory: InfraMonitoringEntity.DAEMONSETS,
+		},
+		{
+			label: 'Jobs',
+			getValue: (p): number => p.counts?.jobs ?? 0,
+			targetCategory: InfraMonitoringEntity.JOBS,
+		},
+	];
+
 export const k8sClusterInitialEventsExpression = (
 	item: InframonitoringtypesClusterRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(item.clusterName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Cluster' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Cluster',
+		objectName: item.clusterName || '',
+	});
 
 export const k8sClusterInitialLogTracesExpression = (
 	item: InframonitoringtypesClusterRecordDTO,
-): string => {
-	const clusterName = formatValueForExpression(item.clusterName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${clusterName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		mainAttributeValue: item.clusterName,
+	});
 
 export const k8sClusterGetEntityName = (
 	item: InframonitoringtypesClusterRecordDTO,
 ): string => item.clusterName || '';
 
+export const k8sClusterGetCountsFilterExpression = (
+	item: InframonitoringtypesClusterRecordDTO,
+): string =>
+	`k8s.cluster.name = ${formatValueForExpression(item.clusterName ?? '')}`;
+
 export const clusterWidgetInfo = [
 	{
 		title: 'CPU Usage, allocatable',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#cpu-usage-allocatable',
 	},
 	{
 		title: 'Memory Usage, allocatable',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#memory-usage-allocatable',
 	},
 	{
 		title: 'Ready Nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#ready-nodes',
 	},
 	{
 		title: 'NotReady Nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#notready-nodes',
 	},
 	{
 		title: 'Deployments available and desired',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#deployments-available-and-desired',
 	},
 	{
 		title: 'Statefulset pods',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#statefulset-pods',
 	},
 	{
 		title: 'Daemonset nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#daemonset-nodes',
 	},
 	{
 		title: 'Jobs',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#jobs',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/K8sDaemonSetsList.tsx

@@ -10,6 +10,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	daemonSetWidgetInfo,
 	getDaemonSetMetricsQueryPayload,
@@ -111,7 +112,7 @@ function K8sDaemonSetsList({
 	);
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO>
+			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.DAEMONSETS}
 				tableColumns={k8sDaemonSetsColumnsConfig}

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

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sDaemonSetGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	);
 
 export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesDaemonSetRecordDTO>[] =
 	[
@@ -37,12 +45,23 @@ export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframo
 export const k8sDaemonSetInitialEventsExpression = (
 	item: InframonitoringtypesDaemonSetRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'DaemonSet' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '')}`;
+	buildEventsExpression({
+		objectKind: 'DaemonSet',
+		objectName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDaemonSetInitialLogTracesExpression = (
 	item: InframonitoringtypesDaemonSetRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '')} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '')}`;
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+		mainAttributeValue:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDaemonSetGetEntityName = (
 	item: InframonitoringtypesDaemonSetRecordDTO,
@@ -52,18 +71,25 @@ export const daemonSetWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#cpu-usage-request-limits',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#memory-usage-request-limits',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/daemonsets/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#network-errors-count',
 	},
 ];
 
@@ -115,6 +141,40 @@ export const getDaemonSetMetricsQueryPayload = (
 		? 'k8s.namespace.name'
 		: 'k8s_namespace_name';
 
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+
+	const clusterName =
+		daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+	const namespaceName =
+		daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+	];
+
 	return [
 		{
 			selectedTime: 'GLOBAL_TIME',
@@ -148,19 +208,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -202,19 +250,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -256,19 +292,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -344,19 +368,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -398,19 +410,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -452,19 +452,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -540,19 +528,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -641,19 +617,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},

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

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -31,8 +32,15 @@ export function getK8sDaemonSetRowKey(
 
 export function getK8sDaemonSetItemKey(
 	daemonSet: InframonitoringtypesDaemonSetRecordDTO,
-): string {
-	return daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] || '';
+): SelectedItemParams {
+	return {
+		selectedItem:
+			daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? null,
+		clusterName:
+			daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export type DaemonSetTableColumnConfig =
@@ -132,10 +140,10 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'node_status',
+		id: 'scheduled_nodes',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#node-status">
-				Node Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#scheduled-nodes">
+				Scheduled Nodes
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.currentNodes,

frontend/src/container/InfraMonitoringK8sV2/Deployments/K8sDeploymentsList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	deploymentWidgetInfo,
 	getDeploymentMetricsQueryPayload,
@@ -117,7 +118,7 @@ function K8sDeploymentsList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO>
+			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.DEPLOYMENTS}
 				tableColumns={k8sDeploymentsColumnsConfig}

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

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sDeploymentGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	);
 
 export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesDeploymentRecordDTO>[] =
 	[
@@ -36,24 +44,24 @@ export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<Infram
 
 export const k8sDeploymentInitialEventsExpression = (
 	item: InframonitoringtypesDeploymentRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Deployment' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Deployment',
+		objectName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDeploymentInitialLogTracesExpression = (
 	item: InframonitoringtypesDeploymentRecordDTO,
-): string => {
-	const deploymentName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
-	);
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME} = ${deploymentName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+		mainAttributeValue:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDeploymentGetEntityName = (
 	item: InframonitoringtypesDeploymentRecordDTO,
@@ -63,18 +71,25 @@ export const deploymentWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#cpu-usage-request-limits',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#memory-usage-request-limits',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/deployments/#network-io',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#network-error-count',
 	},
 ];
 
@@ -121,6 +136,43 @@ export const getDeploymentMetricsQueryPayload = (
 		: 'k8s_deployment_name';
 
 	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+
+	const clusterName =
+		deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+
+	const namespaceName =
+		deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+	];
 
 	return [
 		{
@@ -155,6 +207,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -196,6 +249,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -237,6 +291,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -312,6 +367,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -353,6 +409,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -394,6 +451,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -469,6 +527,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -557,6 +616,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},

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

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -31,8 +32,15 @@ export function getK8sDeploymentRowKey(
 
 export function getK8sDeploymentItemKey(
 	deployment: InframonitoringtypesDeploymentRecordDTO,
-): string {
-	return deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] || '';
+): SelectedItemParams {
+	return {
+		selectedItem:
+			deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? null,
+		clusterName:
+			deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDeploymentRecordDTO>[] =
@@ -125,10 +133,10 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			},
 		},
 		{
-			id: 'replica_status',
+			id: 'pod_replicas',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#replica-status">
-					Replica Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-replicas">
+					Pod Replicas
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.availablePods,

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

@@ -0,0 +1,32 @@
+.chartHeader {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.infoIcon {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l2-foreground);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--text-slate-primary);
+	}
+}
+
+.metricsExplorerLink {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l2-foreground);
+	transition: opacity 0.2s;
+
+	&:hover {
+		color: var(--l3-foreground);
+	}
+}
+
+.chartHeaderLabel {
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,83 @@
+import { Link } from 'react-router-dom';
+import { Compass, Info } from '@signozhq/icons';
+import { Tooltip } from 'antd';
+
+import styles from './ChartHeader.module.scss';
+
+const DOCS_BASE_URL = `${process.env.DOCS_BASE_URL}/docs`;
+
+interface ChartHeaderProps {
+	title: string;
+	docPath?: string;
+	tooltip?: string;
+	metricsExplorerUrl?: string;
+	metricsExplorerTestId?: string;
+}
+
+function ChartHeader({
+	title,
+	docPath,
+	tooltip,
+	metricsExplorerUrl,
+	metricsExplorerTestId = 'open-metrics-explorer',
+}: ChartHeaderProps): JSX.Element {
+	const renderInfoIcon = (): React.ReactNode => {
+		if (docPath) {
+			const tooltipTitle = tooltip || 'Not sure what this represents?';
+			return (
+				<Tooltip
+					arrow
+					title={
+						<>
+							{tooltipTitle}{' '}
+							<a
+								href={`${DOCS_BASE_URL}${docPath}`}
+								target="_blank"
+								rel="noopener"
+								onClick={(e): void => e.stopPropagation()}
+							>
+								Learn more.
+							</a>
+						</>
+					}
+				>
+					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
+						<Info size="md" />
+					</span>
+				</Tooltip>
+			);
+		}
+
+		if (tooltip) {
+			return (
+				<Tooltip title={tooltip}>
+					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
+						<Info size="md" />
+					</span>
+				</Tooltip>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<div className={styles.chartHeader} data-testid="chart-header">
+			<span className={styles.chartHeaderLabel}>{title}</span>
+			{renderInfoIcon()}
+			{metricsExplorerUrl && (
+				<Tooltip title="Open in Metrics Explorer">
+					<Link
+						to={metricsExplorerUrl}
+						className={styles.metricsExplorerLink}
+						data-testid={metricsExplorerTestId}
+					>
+						<Compass size={14} />
+					</Link>
+				</Tooltip>
+			)}
+		</div>
+	);
+}
+
+export default ChartHeader;

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

@@ -14,28 +14,6 @@
 	box-sizing: border-box;
 }
 
-.entityMetricsTitleContainer {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.entityMetricsTitle {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
-}
-
-.metricsExplorerLink {
-	display: flex;
-	align-items: center;
-	color: var(--l2-foreground);
-	transition: opacity 0.2s;
-
-	&:hover {
-		color: var(--l3-foreground);
-	}
-}
-
 .metricsHeader {
 	display: flex;
 	justify-content: flex-end;

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

@@ -1,8 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Link } from 'react-router-dom';
-import { Compass } from '@signozhq/icons';
-import { Skeleton, Tooltip } from 'antd';
+import { Skeleton } from 'antd';
 import cx from 'classnames';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
@@ -24,6 +22,7 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 
 import { buildEntityMetricsChartConfig } from './configBuilder';
+import ChartHeader from './ChartHeader';
 
 import { useEntityMetrics } from './hooks';
 import { isKeyNotFoundError } from '../utils';
@@ -47,6 +46,7 @@ interface EntityMetricsProps<T> {
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
+		docPath?: string;
 	}[];
 	getEntityQueryPayload: (
 		node: T,
@@ -207,31 +207,24 @@ function EntityMetrics<T>({
 						key={entityWidgetInfo[idx].title}
 						className={styles.entityMetricsCol}
 					>
-						<div className={styles.entityMetricsTitleContainer}>
-							<span className={styles.entityMetricsTitle}>
-								{entityWidgetInfo[idx].title}
-							</span>
-							{queryPayloads[idx] &&
-								queryPayloads[idx].graphType !== PANEL_TYPES.TABLE && (
-									<Tooltip title="Open in Metrics Explorer">
-										<Link
-											to={getMetricsExplorerUrl({
-												query: queryPayloads[idx].query,
-												...(selectedInterval && selectedInterval !== 'custom'
-													? { relativeTime: selectedInterval }
-													: {
-															startTimeMs: timeRange.startTime * 1000,
-															endTimeMs: timeRange.endTime * 1000,
-														}),
-											})}
-											className={styles.metricsExplorerLink}
-											data-testid={`open-metrics-explorer-${idx}`}
-										>
-											<Compass size={14} />
-										</Link>
-									</Tooltip>
-								)}
-						</div>
+						<ChartHeader
+							title={entityWidgetInfo[idx].title}
+							docPath={entityWidgetInfo[idx].docPath}
+							metricsExplorerUrl={
+								queryPayloads[idx] && queryPayloads[idx].graphType !== PANEL_TYPES.TABLE
+									? getMetricsExplorerUrl({
+											query: queryPayloads[idx].query,
+											...(selectedInterval && selectedInterval !== 'custom'
+												? { relativeTime: selectedInterval }
+												: {
+														startTimeMs: timeRange.startTime * 1000,
+														endTimeMs: timeRange.endTime * 1000,
+													}),
+										})
+									: undefined
+							}
+							metricsExplorerTestId={`open-metrics-explorer-${idx}`}
+						/>
 						<div className={styles.entityMetricsCard} ref={graphRef}>
 							{renderCardContent(query, idx)}
 						</div>

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -44,7 +44,7 @@ import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
-	useInfraMonitoringSelectedItem,
+	useInfraMonitoringSelectedItemParams,
 } from './hooks';
 import K8sJobsList from './Jobs/K8sJobsList';
 import K8sNamespacesList from './Namespaces/K8sNamespacesList';
@@ -63,7 +63,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setOrderBy] = useInfraMonitoringOrderBy();
-	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
 
 	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -179,7 +179,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			void setSelectedCategory(key as string);
 			void setOrderBy(null);
 			void setGroupBy(null);
-			void setSelectedItem(null);
+			setSelectedItemParams(null);
 			redirectWithQueryBuilderData({
 				...currentQuery,
 				builder: {

frontend/src/container/InfraMonitoringK8sV2/Jobs/K8sJobsList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getJobMetricsQueryPayload,
 	jobWidgetInfo,
@@ -117,7 +118,7 @@ function K8sJobsList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesJobRecordDTO>
+			<K8sBaseList<InframonitoringtypesJobRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.JOBS}
 				tableColumns={k8sJobsColumnsConfig}

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

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sJobGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	);
 
 export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesJobRecordDTO>[] =
 	[
@@ -36,24 +44,23 @@ export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonitori
 
 export const k8sJobInitialEventsExpression = (
 	item: InframonitoringtypesJobRecordDTO,
-): string => {
-	const name = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Job' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${name}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Job',
+		objectName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sJobInitialLogTracesExpression = (
 	item: InframonitoringtypesJobRecordDTO,
-): string => {
-	const jobName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? '',
-	);
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME} = ${jobName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+		mainAttributeValue: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sJobGetEntityName = (
 	item: InframonitoringtypesJobRecordDTO,
@@ -63,18 +70,22 @@ export const jobWidgetInfo = [
 	{
 		title: 'CPU usage',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#cpu-usage',
 	},
 	{
 		title: 'Memory Usage',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#memory-usage',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-errors-count',
 	},
 ];
 
@@ -97,10 +108,54 @@ export const getJobMetricsQueryPayload = (
 		? 'k8s.pod.network.errors'
 		: 'k8s_pod_network_errors';
 	const k8sJobNameKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
 	const k8sNamespaceNameKey = dotMetricsEnabled
 		? 'k8s.namespace.name'
 		: 'k8s_namespace_name';
 
+	const clusterName =
+		job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+	const namespaceName =
+		job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_job_name--string--tag--false',
+				key: k8sJobNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: job.jobName,
+		},
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+		{
+			id: 'f3',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+	];
+
 	return [
 		{
 			selectedTime: 'GLOBAL_TIME',
@@ -120,31 +175,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '6b59b690',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],
@@ -205,31 +236,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '8c217f4d',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],
@@ -290,31 +297,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '2bbf9d0c',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],
@@ -388,31 +371,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '448e6cf7',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],

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

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -27,8 +28,13 @@ export function getK8sJobRowKey(job: InframonitoringtypesJobRecordDTO): string {
 
 export function getK8sJobItemKey(
 	job: InframonitoringtypesJobRecordDTO,
-): string {
-	return job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] || '';
+): SelectedItemParams {
+	return {
+		selectedItem: job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? null,
+		clusterName: job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export type JobTableColumnConfig =
@@ -126,10 +132,10 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'completion_status',
+		id: 'completion',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion-status">
-				Completion Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion">
+				Completions
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.successfulPods,
@@ -149,7 +155,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					{
 						value: row.desiredSuccessfulPods,
 						label: 'Desired',
-						color: Color.BG_ROBIN_500,
+						color: Color.BG_AMBER_500,
 					},
 				]}
 			/>

frontend/src/container/InfraMonitoringK8sV2/Namespaces/K8sNamespacesList.tsx

@@ -11,9 +11,12 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getNamespaceMetricsQueryPayload,
+	k8sNamespaceDetailsCountsConfig,
 	k8sNamespaceDetailsMetadataConfig,
+	k8sNamespaceGetCountsFilterExpression,
 	k8sNamespaceGetEntityName,
 	k8sNamespaceGetSelectedItemExpression,
 	k8sNamespaceInitialEventsExpression,
@@ -117,7 +120,7 @@ function K8sNamespacesList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO>
+			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.NAMESPACES}
 				tableColumns={k8sNamespacesColumnsConfig}
@@ -136,6 +139,8 @@ function K8sNamespacesList({
 				getInitialLogTracesExpression={k8sNamespaceInitialLogTracesExpression}
 				getInitialEventsExpression={k8sNamespaceInitialEventsExpression}
 				metadataConfig={k8sNamespaceDetailsMetadataConfig}
+				countsConfig={k8sNamespaceDetailsCountsConfig}
+				getCountsFilterExpression={k8sNamespaceGetCountsFilterExpression}
 				entityWidgetInfo={namespaceWidgetInfo}
 				getEntityQueryPayload={getNamespaceMetricsQueryPayload}
 				queryKeyPrefix="namespace"

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

@@ -6,14 +6,29 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import { SelectedItemParams } from '../hooks';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sNamespaceGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	);
 
 export const k8sNamespaceDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesNamespaceRecordDTO>[] =
 	[
@@ -25,64 +40,124 @@ export const k8sNamespaceDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframo
 		},
 	];
 
+export const k8sNamespaceDetailsCountsConfig: K8sDetailsCountConfig<InframonitoringtypesNamespaceRecordDTO>[] =
+	[
+		{
+			label: 'Deployments',
+			getValue: (p): number => p.counts?.deployments ?? 0,
+			targetCategory: InfraMonitoringEntity.DEPLOYMENTS,
+		},
+		{
+			label: 'StatefulSets',
+			getValue: (p): number => p.counts?.statefulSets ?? 0,
+			targetCategory: InfraMonitoringEntity.STATEFULSETS,
+		},
+		{
+			label: 'DaemonSets',
+			getValue: (p): number => p.counts?.daemonSets ?? 0,
+			targetCategory: InfraMonitoringEntity.DAEMONSETS,
+		},
+		{
+			label: 'Jobs',
+			getValue: (p): number => p.counts?.jobs ?? 0,
+			targetCategory: InfraMonitoringEntity.JOBS,
+		},
+	];
+
 export const k8sNamespaceInitialEventsExpression = (
 	item: InframonitoringtypesNamespaceRecordDTO,
-): string => {
-	const name = formatValueForExpression(item.namespaceName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Namespace' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${name}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Namespace',
+		objectName: item.namespaceName || '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNamespaceInitialLogTracesExpression = (
 	item: InframonitoringtypesNamespaceRecordDTO,
-): string => {
-	const name = formatValueForExpression(item.namespaceName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${name}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		mainAttributeValue: item.namespaceName,
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNamespaceGetEntityName = (
 	item: InframonitoringtypesNamespaceRecordDTO,
 ): string => item.namespaceName || '';
 
+export const k8sNamespaceGetCountsFilterExpression = (
+	item: InframonitoringtypesNamespaceRecordDTO,
+): string => {
+	const clusterName = item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME];
+	const clauses: string[] = [];
+
+	if (clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(clusterName)}`,
+		);
+	}
+	if (item.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(item.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+};
+
 export const namespaceWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#cpu-usage-cores',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#memory-usage-bytes',
 	},
 	{
 		title: 'Pods CPU (top 10)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#pods-cpu-top-10',
 	},
 	{
 		title: 'Pods Memory (top 10)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#pods-memory-top-10',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-rate',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-errors',
 	},
 	{
-		title: 'StatefulSets',
+		title: 'StatefulSets (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#statefulsets',
 	},
 	{
-		title: 'ReplicaSets',
+		title: 'ReplicaSets (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#replicasets',
 	},
 	{
-		title: 'DaemonSets',
+		title: 'DaemonSets (nodes)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#daemonsets',
 	},
 	{
-		title: 'Deployments',
+		title: 'Deployments (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#deployments',
 	},
 ];
 
@@ -179,6 +254,24 @@ export const getNamespaceMetricsQueryPayload = (
 		'k8s.deployment.name',
 		'k8s_deployment_name',
 	);
+	const k8sClusterNameKey = getKey('k8s.cluster.name', 'k8s_cluster_name');
+
+	const clusterName =
+		namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+	];
 
 	return [
 		{
@@ -211,6 +304,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -250,6 +344,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -289,6 +384,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -328,6 +424,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -401,6 +498,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -440,6 +538,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -479,6 +578,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -518,6 +618,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -557,6 +658,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -596,6 +698,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -669,6 +772,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -749,6 +853,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -829,6 +934,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -915,6 +1021,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1001,6 +1108,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1047,6 +1155,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1093,6 +1202,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1173,6 +1283,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1225,6 +1336,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1311,6 +1423,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1357,6 +1470,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1403,6 +1517,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1449,6 +1564,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1529,6 +1645,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1575,6 +1692,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},

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

@@ -16,6 +16,7 @@ import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
 } from '../constants';
+import { SelectedItemParams } from '../hooks';
 
 export function getK8sNamespaceRowKey(
 	namespace: InframonitoringtypesNamespaceRecordDTO,
@@ -29,8 +30,15 @@ export function getK8sNamespaceRowKey(
 
 export function getK8sNamespaceItemKey(
 	namespace: InframonitoringtypesNamespaceRecordDTO,
-): string {
-	return namespace.namespaceName;
+): SelectedItemParams {
+	return {
+		selectedItem:
+			namespace.namespaceName ??
+			namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
+			null,
+		clusterName:
+			namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+	};
 }
 
 export type NamespaceTableColumnConfig =

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

@@ -7,13 +7,19 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import {
+	buildEventsExpression,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
 
 export const k8sNodeGetSelectedItemExpression = (
-	selectedItemId: string,
-): string => `k8s.node.name = ${formatValueForExpression(selectedItemId)}`;
+	params: SelectedItemParams,
+): string =>
+	`k8s.node.name = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export const k8sNodeDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesNodeRecordDTO>[] =
 	[
@@ -28,12 +34,20 @@ export const k8sNodeDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonitor
 export const k8sNodeInitialEventsExpression = (
 	item: InframonitoringtypesNodeRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Node' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${formatValueForExpression(item.nodeName || '')}`;
+	buildEventsExpression({
+		objectKind: 'Node',
+		objectName: item.nodeName || '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNodeInitialLogTracesExpression = (
 	item: InframonitoringtypesNodeRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME} = ${formatValueForExpression(item.nodeName || '')} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] || '')}`;
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		mainAttributeValue: item.nodeName,
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNodeGetEntityName = (
 	item: InframonitoringtypesNodeRecordDTO,
@@ -43,42 +57,53 @@ export const nodeWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-cores',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-bytes',
 	},
 	{
 		title: 'CPU Usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-',
 	},
 	{
 		title: 'Memory Usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-',
 	},
 	{
 		title: 'Pods by CPU (top 10)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-cpu-top-10',
 	},
 	{
 		title: 'Pods by Memory (top 10)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-memory-top-10',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-error-count',
 	},
 	{
 		title: 'Network IO rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-io-rate',
 	},
 	{
 		title: 'Filesystem usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-bytes',
 	},
 	{
 		title: 'Filesystem usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-',
 	},
 ];
 

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

@@ -8,11 +8,17 @@ import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import {
+	buildEventsExpression,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
 
 export const k8sPodGetSelectedItemExpression = (
-	selectedItemId: string,
-): string => `k8s.pod.uid = ${formatValueForExpression(selectedItemId)}`;
+	params: SelectedItemParams,
+): string =>
+	`k8s.pod.uid = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export const k8sPodDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesPodRecordDTO>[] =
 	[
@@ -35,21 +41,23 @@ export const k8sPodDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonitori
 
 export const k8sPodInitialEventsExpression = (
 	pod: InframonitoringtypesPodRecordDTO,
-): string => {
-	const podName = formatValueForExpression(
-		pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Pod' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${podName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Pod',
+		objectName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
+		clusterName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sPodInitialLogTracesExpression = (
 	pod: InframonitoringtypesPodRecordDTO,
-): string => {
-	const podName = formatValueForExpression(
-		pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME} = ${podName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		mainAttributeValue: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME],
+		clusterName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sPodGetEntityName = (
 	pod: InframonitoringtypesPodRecordDTO,
@@ -59,54 +67,74 @@ export const podWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores-1',
 	},
 	{
 		title: 'CPU Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-usage-bytes',
 	},
 	{
 		title: 'Memory Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization',
 	},
 	{
 		title: 'Memory by State',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-by-state',
 	},
 	{
 		title: 'Memory Major Page Faults',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-major-page-faults',
 	},
 	{
 		title: 'CPU Usage by Container (cores)',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-usage-by-container-cores',
 	},
 	{
 		title: 'CPU Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization-by-container',
 	},
 	{
 		title: 'Memory Usage by Container (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-usage-by-container-bytes',
 	},
 	{
 		title: 'Memory Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization-by-container',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-rate',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-errors',
 	},
 	{
 		title: 'File system (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#file-system-bytes',
 	},
 ];
 

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

@@ -152,7 +152,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'podAge',
-		header: 'Age',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#age">
+				Age
+			</ColumnHeader>
+		),
 		accessorFn: (row): number => row.podAge,
 		width: { min: 100 },
 		enableSort: false,
@@ -316,7 +320,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'namespace',
-		header: 'Namespace',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Namespace
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] || '',
 		width: { default: 100 },
@@ -328,7 +336,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'node',
-		header: 'Node',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Node
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME] || '',
 		width: { default: 100 },
@@ -340,7 +352,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'cluster',
-		header: 'Cluster',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Cluster
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] || '',
 		width: { default: 100 },

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/K8sStatefulSetsList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getStatefulSetMetricsQueryPayload,
 	k8sStatefulSetDetailsMetadataConfig,
@@ -117,7 +118,7 @@ function K8sStatefulSetsList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO>
+			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.STATEFULSETS}
 				tableColumns={k8sStatefulSetsColumnsConfig}

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

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sStatefulSetGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	);
 
 export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesStatefulSetRecordDTO>[] =
 	[
@@ -22,6 +30,11 @@ export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<Infra
 			getValue: (p): string =>
 				p.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
 		},
+		{
+			label: 'Cluster Name',
+			getValue: (p): string =>
+				p.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
+		},
 		{
 			label: 'Namespace Name',
 			getValue: (p): string =>
@@ -31,24 +44,25 @@ export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<Infra
 
 export const k8sStatefulSetInitialEventsExpression = (
 	item: InframonitoringtypesStatefulSetRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'StatefulSet' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'StatefulSet',
+		objectName:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sStatefulSetInitialLogTracesExpression = (
 	item: InframonitoringtypesStatefulSetRecordDTO,
-): string => {
-	const statefulSetName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
-	);
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME} = ${statefulSetName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		mainAttributeValue:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sStatefulSetGetEntityName = (
 	item: InframonitoringtypesStatefulSetRecordDTO,
@@ -58,26 +72,37 @@ export const statefulSetWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-usage-request-limits',
 	},
 	{
 		title: 'CPU request, limit util (%)',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-request-limit-utilization-',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-usage-request-limits',
 	},
 	{
 		title: 'Memory request, limit util (%)',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-request-limit-utilization-',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/statefulsets/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#network-errors-count',
 	},
 ];
 
@@ -93,7 +118,42 @@ export const getStatefulSetMetricsQueryPayload = (
 	const k8sNamespaceNameKey = dotMetricsEnabled
 		? INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME
 		: 'k8s_namespace_name';
-	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+	const k8sPodNameKey = dotMetricsEnabled
+		? INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME
+		: 'k8s_pod_name';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME
+		: 'k8s_cluster_name';
+
+	const clusterName =
+		statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+	const namespaceName =
+		statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+		{
+			id: 'f3',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+	];
 
 	const k8sPodCpuUtilKey = dotMetricsEnabled
 		? 'k8s.pod.cpu.usage'
@@ -168,19 +228,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -223,19 +271,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -278,19 +314,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -353,19 +377,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -408,19 +420,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -483,19 +483,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -525,7 +513,7 @@ export const getStatefulSetMetricsQueryPayload = (
 							filters: {
 								items: [
 									{
-										id: 'f3',
+										id: 'f1',
 										key: {
 											dataType: DataTypes.String,
 											id: 'pod_name',
@@ -538,19 +526,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -593,19 +569,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -668,19 +632,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -723,19 +675,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -798,19 +738,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -886,19 +814,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},

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

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -31,10 +32,15 @@ export function getK8sStatefulSetRowKey(
 
 export function getK8sStatefulSetItemKey(
 	statefulSet: InframonitoringtypesStatefulSetRecordDTO,
-): string {
-	return (
-		statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] || ''
-	);
+): SelectedItemParams {
+	return {
+		selectedItem:
+			statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? null,
+		clusterName:
+			statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesStatefulSetRecordDTO>[] =
@@ -135,10 +141,10 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			},
 		},
 		{
-			id: 'pod_status',
+			id: 'pod_replicas',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-status">
-					Pod Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-replicas">
+					Pod Replicas
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.currentPods,

frontend/src/container/InfraMonitoringK8sV2/Volumes/K8sVolumesList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getVolumeMetricsQueryPayload,
 	k8sVolumeDetailsMetadataConfig,
@@ -117,7 +118,7 @@ function K8sVolumesList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesVolumeRecordDTO>
+			<K8sBaseList<InframonitoringtypesVolumeRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.VOLUMES}
 				tableColumns={k8sVolumesColumnsConfig}

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

@@ -6,15 +6,22 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sVolumeGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+	);
 
 export const k8sVolumeDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesVolumeRecordDTO>[] =
 	[
@@ -36,22 +43,23 @@ export const k8sVolumeDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonit
 
 export const k8sVolumeInitialEventsExpression = (
 	item: InframonitoringtypesVolumeRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(
-		item.persistentVolumeClaimName || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'PersistentVolumeClaim' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'PersistentVolumeClaim',
+		objectName: item.persistentVolumeClaimName || '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sVolumeInitialLogTracesExpression = (
 	item: InframonitoringtypesVolumeRecordDTO,
-): string => {
-	const pvcName = formatValueForExpression(item.persistentVolumeClaimName || '');
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME} = ${pvcName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+		mainAttributeValue: item.persistentVolumeClaimName,
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sVolumeGetEntityName = (
 	item: InframonitoringtypesVolumeRecordDTO,
@@ -61,22 +69,27 @@ export const volumeWidgetInfo = [
 	{
 		title: 'Volume available',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-available',
 	},
 	{
 		title: 'Volume capacity',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-capacity',
 	},
 	{
 		title: 'Volume inodes used',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-used',
 	},
 	{
 		title: 'Volume inodes',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes',
 	},
 	{
 		title: 'Volume inodes free',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-free',
 	},
 ];
 

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

@@ -1,6 +1,5 @@
-import { TableColumnDef } from 'components/TanStackTableView';
+import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { InframonitoringtypesVolumeRecordDTO } from 'api/generated/services/sigNoz.schemas';
-import TanStackTable from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';
@@ -12,6 +11,7 @@ import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
 } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import { HardDrive } from '@signozhq/icons';
 
 export function getK8sVolumeRowKey(
@@ -26,8 +26,17 @@ export function getK8sVolumeRowKey(
 
 export function getK8sVolumeItemKey(
 	volume: InframonitoringtypesVolumeRecordDTO,
-): string {
-	return volume.persistentVolumeClaimName;
+): SelectedItemParams {
+	return {
+		selectedItem:
+			volume.persistentVolumeClaimName ??
+			volume.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME] ??
+			null,
+		clusterName:
+			volume.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			volume.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export type VolumeTableColumnConfig =

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -897,6 +897,8 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	PAGE_SIZE: 'pageSize',
 	EXPANDED: 'expanded',
 	SELECTED_ITEM: 'selectedItem',
+	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
+	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
 };
 
 /** Metric namespace prefixes for /fields/keys and /fields/values APIs */

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -5,8 +5,10 @@ import {
 	parseAsJson,
 	parseAsString,
 	useQueryState,
+	useQueryStates,
 	UseQueryStateReturn,
 } from 'nuqs';
+import { useCallback, useMemo } from 'react';
 import {
 	IBuilderQuery,
 	TagFilter,
@@ -128,16 +130,70 @@ export const useInfraMonitoringCategory = (): UseQueryStateReturn<
 		parseAsString.withDefault(K8sCategories.PODS).withOptions(defaultNuqsOptions),
 	);
 
-export const useInfraMonitoringSelectedItem = (): UseQueryStateReturn<
-	string,
-	string | undefined
-> => {
-	return useQueryState(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM,
-		parseAsString,
-	);
+export interface SelectedItemParams {
+	selectedItem: string | null;
+	clusterName?: string | null;
+	namespaceName?: string | null;
+}
+
+const selectedItemParamsParsers = {
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: parseAsString,
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: parseAsString,
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: parseAsString,
 };
 
+export type UseSelectedItemParamsReturn = [
+	SelectedItemParams,
+	(params: SelectedItemParams | null) => void,
+];
+
+export const useInfraMonitoringSelectedItemParams =
+	(): UseSelectedItemParamsReturn => {
+		const [rawParams, setRawParams] = useQueryStates(
+			selectedItemParamsParsers,
+			defaultNuqsOptions,
+		);
+
+		const params: SelectedItemParams = useMemo(
+			() => ({
+				selectedItem:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM] ?? null,
+				clusterName:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME] ??
+					null,
+				namespaceName:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME] ??
+					null,
+			}),
+			[rawParams],
+		);
+
+		const setParams = useCallback(
+			(newParams: Partial<SelectedItemParams> | null): void => {
+				if (newParams === null) {
+					void setRawParams({
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: null,
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: null,
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: null,
+					});
+					return;
+				}
+
+				void setRawParams({
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]:
+						newParams.selectedItem ?? null,
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]:
+						newParams.clusterName ?? null,
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]:
+						newParams.namespaceName ?? null,
+				});
+			},
+			[setRawParams],
+		);
+
+		return [params, setParams];
+	};
+
 export const useInfraMonitoringStatusFilter = (): UseQueryStateReturn<
 	string,
 	string

frontend/src/container/LLMObservability/AttributeMapping/__tests__/fixtures.ts

@@ -30,7 +30,7 @@ export function makeGroup(overrides: Partial<MapperGroup> = {}): MapperGroup {
 export function makeMapper(overrides: Partial<Mapper> = {}): Mapper {
 	return {
 		id: 'mapper-1',
-		group_id: 'group-1',
+		groupId: 'group-1',
 		name: 'gen_ai.request.model',
 		enabled: true,
 		fieldContext: FieldContext.attribute,
@@ -89,5 +89,5 @@ export const mockGroups: MapperGroup[] = [
 ];
 
 export const mockMappers: Mapper[] = [
-	makeMapper({ id: 'mapper-1', group_id: 'group-1' }),
+	makeMapper({ id: 'mapper-1', groupId: 'group-1' }),
 ];

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -2872,17 +2872,72 @@ export const nodeWidgetInfo = [
 ];
 
 export const hostWidgetInfo = [
-	{ title: 'CPU Usage', yAxisUnit: 'percentunit' },
-	{ title: 'Memory Usage', yAxisUnit: 'bytes' },
-	{ title: 'System Load Average', yAxisUnit: '' },
-	{ title: 'Network usage (bytes)', yAxisUnit: 'bytes' },
-	{ title: 'Network usage (packet/s)', yAxisUnit: 'pps' },
-	{ title: 'Network errors', yAxisUnit: 'short' },
-	{ title: 'Network drops', yAxisUnit: 'short' },
-	{ title: 'Network connections', yAxisUnit: 'short' },
-	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
-	{ title: 'System disk operations/s', yAxisUnit: 'short' },
-	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'System disk operation time/s', yAxisUnit: 's' },
-	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
+	{
+		title: 'CPU Usage',
+		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/host-monitoring/#cpu-usage',
+	},
+	{
+		title: 'Memory Usage',
+		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/host-monitoring/#memory-usage',
+	},
+	{
+		title: 'System Load Average',
+		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/host-monitoring/#system-load-average',
+	},
+	{
+		title: 'Network usage (bytes)',
+		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-usage-bytes',
+	},
+	{
+		title: 'Network usage (packet/s)',
+		yAxisUnit: 'pps',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-usage-packetss',
+	},
+	{
+		title: 'Network errors',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-errors',
+	},
+	{
+		title: 'Network drops',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-drops',
+	},
+	{
+		title: 'Network connections',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-connections',
+	},
+	{
+		title: 'System disk io (bytes transferred)',
+		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/host-monitoring/#system-disk-io-bytes',
+	},
+	{
+		title: 'System disk operations/s',
+		yAxisUnit: 'short',
+		docPath:
+			'/infrastructure-monitoring/host-monitoring/#system-disk-operationss',
+	},
+	{
+		title: 'Queue size',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#queue-size',
+	},
+	{
+		title: 'System disk operation time/s',
+		yAxisUnit: 's',
+		docPath:
+			'/infrastructure-monitoring/host-monitoring/#system-disk-operation-times',
+	},
+	{
+		title: 'Disk Usage (%) by mountpoint',
+		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/host-monitoring/#disk-usage--by-mountpoint',
+	},
 ];

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

@@ -182,6 +182,14 @@
 				flex: 1;
 				min-height: 0;
 				overflow-y: visible;
+
+				.table-view-container-header {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					padding: 12px;
+					flex-shrink: 0;
+				}
 			}
 
 			.time-series-view-container {

frontend/src/container/LogsExplorerViews/index.tsx

@@ -18,13 +18,18 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { QueryParams } from 'constants/query';
-import { initialFilters, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	initialFilters,
+	initialQueriesMap,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 import LogsExplorerTable from 'container/LogsExplorerTable';
 import {
 	getExportQueryData,
@@ -476,6 +481,16 @@ function LogsExplorerViewsContainer({
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
+							{data && !isError && (
+								<div className="table-view-container-header">
+									<ExportMenu
+										dataSource={DataSource.LOGS}
+										data={data}
+										query={stagedQuery || initialQueriesMap.metrics}
+										fileName="logs-table"
+									/>
+								</div>
+							)}
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -48,7 +48,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
-import TimeseriesExportMenu from './TimeseriesExportMenu';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 
 import './TimeSeriesView.styles.scss';
 
@@ -265,12 +265,11 @@ function TimeSeriesView({
 						)}
 					</div>
 					{showExport && data?.rawV5Response && (
-						<TimeseriesExportMenu
+						<ExportMenu
 							dataSource={dataSource}
 							yAxisUnit={yAxisUnit}
-							queryResponse={data.rawV5Response}
+							data={data}
 							query={currentQuery}
-							legendMap={data.legendMap}
 							fileName={`${dataSource}-timeseries`}
 						/>
 					)}

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

@@ -13,7 +13,7 @@ jest.mock('components/Uplot', () => ({
 	default: (): JSX.Element => <div data-testid="uplot-chart" />,
 }));
 
-jest.mock('../TimeseriesExportMenu', () => ({
+jest.mock('components/ExportMenu/ExportMenu', () => ({
 	__esModule: true,
 	default: (): JSX.Element => <div data-testid="timeseries-export-menu" />,
 }));

frontend/src/container/TracesExplorer/TableView/TableView.styles.scss

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

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

@@ -10,6 +10,7 @@ import {
 import { useSelector } from 'react-redux';
 import { Space } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -20,8 +21,11 @@ import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
+import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import './TableView.styles.scss';
+
 function TableView({
 	setWarning,
 	setIsLoadingQueries,
@@ -97,6 +101,16 @@ function TableView({
 	return (
 		<Space.Compact block direction="vertical">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
+			{!isError && data && (
+				<div className="traces-table-view-header">
+					<ExportMenu
+						dataSource={DataSource.TRACES}
+						data={data}
+						query={stagedQuery || initialQueriesMap.traces}
+						fileName="traces-table"
+					/>
+				</div>
+			)}
 			{!isError && (
 				<QueryTable
 					query={stagedQuery || initialQueriesMap.traces}

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

@@ -11,6 +11,7 @@ import {
 import { useSelector } from 'react-redux';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -152,6 +153,11 @@ function TracesView({
 					</Typography>
 
 					<div className="trace-explorer-controls">
+						<DownloadOptionsMenu
+							dataSource={DataSource.TRACES}
+							panelType={PANEL_TYPES.TRACE}
+						/>
+
 						<TraceExplorerControls
 							isLoading={isLoading}
 							totalCount={responseData?.length || 0}

frontend/src/hooks/useExportData/__tests__/useClientExport.test.ts

@@ -4,7 +4,8 @@ import {
 	getTimestampedFileName,
 } from 'lib/exportData/downloadFile';
 import { ExportFormat } from 'lib/exportData/types';
-import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { useClientExport } from '../useClientExport';
 
@@ -24,31 +25,87 @@ jest.mock('antd', () => {
 
 const mockDownloadFile = downloadFile as jest.Mock;
 
-function timeSeriesResponse(): QueryRangeResponseV5 {
+const query = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				aggregations: [{ expression: 'count()' }],
+				groupBy: [],
+				legend: '',
+			},
+		],
+		queryFormulas: [],
+	},
+} as unknown as Query;
+
+function timeSeriesData(): MetricQueryRangeSuccessResponse {
 	return {
-		type: 'time_series',
-		data: {
-			results: [
-				{
-					queryName: 'A',
-					aggregations: [
-						{
-							index: 0,
-							alias: '',
-							meta: {},
-							series: [
-								{
-									labels: [{ key: { name: 'service' }, value: 'a' }],
-									values: [{ timestamp: 1000, value: 12 }],
-								},
-							],
-						},
-					],
-				},
-			],
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: { data: { result: [], resultType: 'time_series' } },
+		legendMap: { A: '{{service}}' },
+		rawV5Response: {
+			type: 'time_series',
+			data: {
+				results: [
+					{
+						queryName: 'A',
+						aggregations: [
+							{
+								index: 0,
+								alias: '',
+								meta: {},
+								series: [
+									{
+										labels: [{ key: { name: 'service' }, value: 'a' }],
+										values: [{ timestamp: 1000, value: 12 }],
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+			meta: {},
 		},
-		meta: {},
-	} as unknown as QueryRangeResponseV5;
+	} as unknown as MetricQueryRangeSuccessResponse;
+}
+
+function scalarData(): MetricQueryRangeSuccessResponse {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: {
+			data: {
+				resultType: 'scalar',
+				result: [
+					{
+						queryName: 'A',
+						legend: '',
+						series: null,
+						list: null,
+						table: {
+							columns: [
+								{
+									name: 'service.name',
+									id: 'service.name',
+									queryName: 'A',
+									isValueColumn: false,
+								},
+								{ name: 'count()', id: 'A', queryName: 'A', isValueColumn: true },
+							],
+							rows: [{ data: { 'service.name': 'frontend', A: 120 } }],
+						},
+					},
+				],
+			},
+		},
+	} as unknown as MetricQueryRangeSuccessResponse;
 }
 
 describe('useClientExport', () => {
@@ -64,13 +121,9 @@ describe('useClientExport', () => {
 		jest.useRealTimers();
 	});
 
-	it('exports time_series as CSV to a timestamped <fileName>.csv', () => {
+	it('dispatches timeseries data to the timeseries serializer (csv)', () => {
 		const { result } = renderHook(() =>
-			useClientExport({
-				response: timeSeriesResponse(),
-				fileName: 'chart',
-				legendMap: { A: '{{service}}' },
-			}),
+			useClientExport({ data: timeSeriesData(), query, fileName: 'chart' }),
 		);
 
 		act(() => {
@@ -83,12 +136,28 @@ describe('useClientExport', () => {
 		expect(name).toBe(getTimestampedFileName('chart', 'csv'));
 		expect(mime).toContain('text/csv');
 		expect(content).toContain('service');
-		expect(content).toContain('a');
 	});
 
-	it('exports as JSONL to a timestamped <fileName>.jsonl with the ndjson mime', () => {
+	it('dispatches scalar (table) data to the table serializer', () => {
 		const { result } = renderHook(() =>
-			useClientExport({ response: timeSeriesResponse() }),
+			useClientExport({ data: scalarData(), query, fileName: 'table' }),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+		const [content, name] = mockDownloadFile.mock.calls[0];
+		expect(name).toBe(getTimestampedFileName('table', 'csv'));
+		expect(content).toContain('service.name');
+		expect(content).toContain('frontend');
+		expect(content).toContain('120');
+	});
+
+	it('exports as JSONL with the ndjson mime', () => {
+		const { result } = renderHook(() =>
+			useClientExport({ data: timeSeriesData(), query }),
 		);
 
 		act(() => {
@@ -101,8 +170,8 @@ describe('useClientExport', () => {
 		expect(content).toContain('"series"');
 	});
 
-	it('does nothing when there is no response', () => {
-		const { result } = renderHook(() => useClientExport({}));
+	it('does nothing when there is no data', () => {
+		const { result } = renderHook(() => useClientExport({ query }));
 
 		act(() => {
 			result.current.handleExport({ format: ExportFormat.Csv });
@@ -112,13 +181,14 @@ describe('useClientExport', () => {
 		expect(mockMessageError).not.toHaveBeenCalled();
 	});
 
-	it('shows an error and does not download for unsupported result types', () => {
+	it('shows an error for unsupported result types', () => {
 		const raw = {
-			type: 'raw',
-			data: { results: [] },
-			meta: {},
-		} as unknown as QueryRangeResponseV5;
-		const { result } = renderHook(() => useClientExport({ response: raw }));
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: { data: { result: [], resultType: '' } },
+		} as unknown as MetricQueryRangeSuccessResponse;
+		const { result } = renderHook(() => useClientExport({ data: raw, query }));
 
 		act(() => {
 			result.current.handleExport({ format: ExportFormat.Csv });

frontend/src/hooks/useExportData/useClientExport.ts

@@ -4,11 +4,14 @@ import {
 	downloadFile,
 	getTimestampedFileName,
 } from 'lib/exportData/downloadFile';
+import { exportScalarData } from 'lib/exportData/exportScalarData';
 import { exportTimeseriesData } from 'lib/exportData/exportTimeseriesData';
 import { toCsv } from 'lib/exportData/toCsv';
 import { toJsonl } from 'lib/exportData/toJsonl';
 import { ExportFormat, SerializedTable } from 'lib/exportData/types';
 import { useCallback, useState } from 'react';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
 
@@ -20,33 +23,44 @@ const FORMAT_META: Record<ExportFormat, { mime: string; extension: string }> = {
 	},
 };
 
-// Picks the serializer for the response's request type. Narrows the results
-// union via the response discriminant. scalar lands with #5591; raw/trace are
-// server-exported, distribution is never emitted.
+/** The queryRange response object views hold — structural (params left
+ * unconstrained) so both explorer variants assign cleanly. */
+export type ClientExportData = SuccessResponse<MetricRangePayloadProps> & {
+	rawV5Response?: QueryRangeResponseV5;
+	legendMap?: Record<string, string>;
+};
+
+// Picks the serializer from what the queryRange response carries: timeseries
+// queries surface the raw V5 tree (rawV5Response); table queries carry the
+// formatForWeb webTables payload (resultType 'scalar'). raw/trace stay
+// server-exported via useServerExport.
 function serialize(
-	response: QueryRangeResponseV5,
+	data: ClientExportData,
 	yAxisUnit?: string,
-	legendMap?: Record<string, string>,
 	query?: Query,
 ): SerializedTable {
-	if (response.type === REQUEST_TYPES.TIME_SERIES) {
+	if (data.rawV5Response?.type === REQUEST_TYPES.TIME_SERIES) {
 		return exportTimeseriesData({
-			data: response.data.results as TimeSeriesData[],
+			data: data.rawV5Response.data.results as TimeSeriesData[],
 			yAxisUnit,
-			legendMap,
+			legendMap: data.legendMap,
 			query,
 		});
 	}
 
-	throw new Error(`Export is not supported for "${response.type}" results`);
+	if (data.payload?.data?.resultType === 'scalar' && query) {
+		return exportScalarData({ data, query });
+	}
+
+	throw new Error('Export is not supported for this result type');
 }
 
 interface UseClientExportProps {
-	response?: QueryRangeResponseV5;
+	// currently supports only qb v5 responses. Can extend to support future responses.
+	data?: ClientExportData;
 	query?: Query;
 	yAxisUnit?: string;
 	fileName?: string;
-	legendMap?: Record<string, string>;
 }
 
 interface ClientExportOptions {
@@ -59,23 +73,22 @@ interface UseClientExportReturn {
 }
 
 export function useClientExport({
-	response, // currently supports only qb v5 response. Can extend to support future responses.
+	data,
 	query,
 	yAxisUnit,
 	fileName = 'export',
-	legendMap,
 }: UseClientExportProps): UseClientExportReturn {
 	const [isExporting, setIsExporting] = useState<boolean>(false);
 
 	const handleExport = useCallback(
 		({ format }: ClientExportOptions): void => {
-			if (!response) {
+			if (!data) {
 				return;
 			}
 
 			setIsExporting(true);
 			try {
-				const table = serialize(response, yAxisUnit, legendMap, query);
+				const table = serialize(data, yAxisUnit, query);
 				const content =
 					format === ExportFormat.Jsonl ? toJsonl(table) : toCsv(table);
 				const { mime, extension } = FORMAT_META[format];
@@ -86,7 +99,7 @@ export function useClientExport({
 				setIsExporting(false);
 			}
 		},
-		[response, query, yAxisUnit, fileName, legendMap],
+		[data, query, yAxisUnit, fileName],
 	);
 
 	return { isExporting, handleExport };

frontend/src/hooks/useExportData/useServerExport.ts

@@ -19,6 +19,7 @@ interface ExportOptions {
 
 interface UseExportRawDataProps {
 	dataSource: DataSource;
+	panelType?: PANEL_TYPES;
 }
 
 interface UseExportRawDataReturn {
@@ -28,6 +29,7 @@ interface UseExportRawDataReturn {
 
 export function useExportRawData({
 	dataSource,
+	panelType = PANEL_TYPES.LIST,
 }: UseExportRawDataProps): UseExportRawDataReturn {
 	const [isDownloading, setIsDownloading] = useState<boolean>(false);
 
@@ -83,7 +85,7 @@ export function useExportRawData({
 
 				const { queryPayload } = prepareQueryRangePayloadV5({
 					query: exportQuery,
-					graphType: PANEL_TYPES.LIST,
+					graphType: panelType,
 					selectedTime: 'GLOBAL_TIME',
 					globalSelectedInterval,
 				});
@@ -96,7 +98,7 @@ export function useExportRawData({
 				setIsDownloading(false);
 			}
 		},
-		[stagedQuery, globalSelectedInterval, dataSource],
+		[stagedQuery, globalSelectedInterval, dataSource, panelType],
 	);
 
 	return { isDownloading, handleExportRawData };

frontend/src/lib/dashboardVariables/variableReference.test.ts

@@ -3,7 +3,6 @@ import { EQueryType } from 'types/common/dashboard';
 
 import {
 	buildVariableReferencePattern,
-	containsAnyVariableReference,
 	extractQueryTextStrings,
 	getVariableReferencesInQuery,
 	textContainsVariableReference,
@@ -449,25 +448,3 @@ describe('getVariableReferencesInQuery', () => {
 		expect(getVariableReferencesInQuery(query, [])).toStrictEqual([]);
 	});
 });
-
-describe('containsAnyVariableReference', () => {
-	it.each([
-		['SELECT count() FROM t WHERE service = $service.name', true],
-		['up{env="$deployment_environment"}', true],
-		['{{.service_name}}', true],
-		['{{ service_name }}', true],
-		['[[service_name]]', true],
-		['$_private', true],
-	])('detects a reference in %p', (text, expected) => {
-		expect(containsAnyVariableReference(text)).toBe(expected);
-	});
-
-	it.each([
-		['SELECT count() FROM t WHERE x = 1', false],
-		['rate(http_requests[$__interval])', false],
-		['SELECT $1 FROM t', false],
-		['', false],
-	])('does not falsely match %p', (text, expected) => {
-		expect(containsAnyVariableReference(text)).toBe(expected);
-	});
-});

frontend/src/lib/dashboardVariables/variableReference.ts

@@ -1,4 +1,4 @@
-import { escapeRegExp, isArray } from 'lodash-es';
+import { isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 
@@ -33,23 +33,6 @@ export function textContainsVariableReference(
 	return buildVariableReferencePattern(variableName).test(text);
 }
 
-/**
- * Matches *any* variable reference in a recognized syntax without knowing the
- * name: `{{name}}`, `{{.name}}`, `[[name]]`, or `$name`. The `$` form excludes
- * `$__…` macros and positional `$1` so built-ins don't read as variables.
- */
-const ANY_VARIABLE_REFERENCE =
-	/\{\{\s*\.?[\w.]+\s*\}\}|\[\[\s*[\w.]+\s*\]\]|\$(?!__)[a-zA-Z_][\w.]*/;
-
-/**
- * Returns true if `text` contains a reference to any variable. Use when the set
- * of variable names isn't known yet (e.g. before the fetch context initializes),
- * so a name-based {@link textContainsVariableReference} check can't run.
- */
-export function containsAnyVariableReference(text: string): boolean {
-	return !!text && ANY_VARIABLE_REFERENCE.test(text);
-}
-
 /**
  * Extracts all text strings from a widget Query that could contain variable
  * references. Covers:
@@ -151,52 +134,3 @@ export function getVariableReferencesInQuery(
 		texts.some((text) => textContainsVariableReference(text, name)),
 	);
 }
-
-/**
- * Rewrites every reference to `oldName` in `text` to `newName`, preserving the
- * surrounding syntax for each recognized form ({{.x}}, {{x}}, $x, [[x]]). Used
- * when a variable is renamed so its usages across queries stay valid.
- */
-export function rewriteVariableReferences(
-	text: string,
-	oldName: string,
-	newName: string,
-): string {
-	if (!text || !oldName || oldName === newName) {
-		return text;
-	}
-	const name = escapeRegExp(oldName);
-	return text
-		.replace(
-			new RegExp(`(\\{\\{\\s*?\\.)${name}(\\s*?\\}\\})`, 'g'),
-			`$1${newName}$2`,
-		)
-		.replace(new RegExp(`(\\{\\{\\s*)${name}(\\s*\\}\\})`, 'g'), `$1${newName}$2`)
-		.replace(new RegExp(`\\$${name}\\b`, 'g'), `$${newName}`)
-		.replace(
-			new RegExp(`(\\[\\[\\s*)${name}(\\s*\\]\\])`, 'g'),
-			`$1${newName}$2`,
-		);
-}
-
-/**
- * Best-effort removal of the clause that references `variableName` from an
- * ` AND `-joined filter expression (e.g. a builder query's `filter.expression`).
- * Any top-level `AND` part that references the variable is dropped. It does not
- * understand `OR`/nested parentheses, so it is a starting point the user reviews
- * before applying — never an automatic edit of raw PromQL/ClickHouse.
- */
-export function removeVariableReferenceClause(
-	expression: string,
-	variableName: string,
-): string {
-	if (!expression) {
-		return expression;
-	}
-	return expression
-		.split(' AND ')
-		.map((part) => part.trim())
-		.filter(Boolean)
-		.filter((part) => !textContainsVariableReference(part, variableName))
-		.join(' AND ');
-}

frontend/src/lib/exportData/__tests__/exportScalarData.test.ts

@@ -0,0 +1,94 @@
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { exportScalarData } from '../exportScalarData';
+
+const query = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				aggregations: [{ expression: 'count()' }],
+				groupBy: [
+					{ key: 'service.name', dataType: 'string', type: 'tag', id: 'svc' },
+				],
+				legend: '',
+			},
+		],
+		queryFormulas: [],
+	},
+} as unknown as Query;
+
+function makeResponse(
+	tables: {
+		queryName: string;
+		columns: { name: string; id?: string; isValueColumn: boolean }[];
+		rows: Record<string, string | number>[];
+	}[],
+): SuccessResponse<MetricRangePayloadProps> {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: {
+			data: {
+				resultType: 'scalar',
+				result: tables.map((table) => ({
+					queryName: table.queryName,
+					legend: '',
+					series: null,
+					list: null,
+					table: {
+						columns: table.columns.map((col) => ({
+							...col,
+							queryName: table.queryName,
+						})),
+						rows: table.rows.map((row) => ({ data: row })),
+					},
+				})),
+			},
+		},
+	} as unknown as SuccessResponse<MetricRangePayloadProps>;
+}
+
+describe('exportScalarData', () => {
+	it('serializes the table exactly as QueryTable prepares it', () => {
+		const data = makeResponse([
+			{
+				queryName: 'A',
+				columns: [
+					{ name: 'service.name', id: 'service.name', isValueColumn: false },
+					{ name: 'count()', id: 'A', isValueColumn: true },
+				],
+				rows: [
+					{ 'service.name': 'frontend', A: 120 },
+					{ 'service.name': 'cart', A: 80 },
+				],
+			},
+		]);
+
+		const table = exportScalarData({ data, query });
+
+		// group + aggregation columns, raw values, on-screen order — inherited
+		// 1:1 from createTableColumnsFromQuery (the renderer's own preparer)
+		expect(table).toStrictEqual({
+			headers: ['service.name', 'count()'],
+			rows: [
+				['frontend', 120],
+				['cart', 80],
+			],
+		});
+	});
+
+	it('returns an empty table for an empty response', () => {
+		const table = exportScalarData({
+			data: makeResponse([]),
+			query,
+		});
+
+		expect(table.rows).toStrictEqual([]);
+	});
+});

frontend/src/lib/exportData/__tests__/exportTableData.test.ts

@@ -0,0 +1,58 @@
+import { exportTableData } from '../exportTableData';
+
+const columns = [
+	{ name: 'service.name', key: 'service.name' },
+	{ name: 'count()', key: 'A', isValueColumn: true },
+	{ name: 'avg(duration)', key: 'B', isValueColumn: true },
+];
+
+describe('exportTableData', () => {
+	it('serializes raw values in display column order', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [
+				{ 'service.name': 'frontend', A: 120, B: 45.5 },
+				{ 'service.name': 'cart', A: 80, B: 12 },
+			],
+		});
+
+		expect(table).toStrictEqual({
+			headers: ['service.name', 'count()', 'avg(duration)'],
+			rows: [
+				['frontend', 120, 45.5],
+				['cart', 80, 12],
+			],
+		});
+	});
+
+	it('appends column units to value columns only, skipping display-only ids', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [{ 'service.name': 'frontend', A: 120, B: 45.5 }],
+			columnUnits: { A: 'short', B: 'ms', 'service.name': 'ms' },
+		});
+
+		// group column never gets a unit; 'short' is display-only and skipped
+		expect(table.headers).toStrictEqual([
+			'service.name',
+			'count()',
+			'avg(duration) (ms)',
+		]);
+	});
+
+	it('marks missing cells as blank gaps', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [{ 'service.name': 'frontend', A: 120 }],
+		});
+
+		expect(table.rows).toStrictEqual([['frontend', 120, '']]);
+	});
+
+	it('returns a headers-only table for empty data', () => {
+		expect(exportTableData({ columns, dataSource: [] })).toStrictEqual({
+			headers: ['service.name', 'count()', 'avg(duration)'],
+			rows: [],
+		});
+	});
+});

frontend/src/lib/exportData/exportScalarData.ts

@@ -0,0 +1,48 @@
+import { createTableColumnsFromQuery } from 'lib/query/createTableColumnsFromQuery';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+import { exportTableData } from './exportTableData';
+import { SerializedTable } from './types';
+
+interface ExportScalarDataArgs {
+	// The queryRange response object the table mount already holds (the
+	// formatForWeb payload carrying webTables).
+	data?: SuccessResponse<MetricRangePayloadProps>;
+	query: Query;
+}
+
+/**
+ * Serializes a scalar/table queryRange response into a table — via
+ * createTableColumnsFromQuery, the exact preparer QueryTable renders from, so
+ * the export inherits the on-screen merge, naming and column order 1:1.
+ */
+export function exportScalarData({
+	data,
+	query,
+}: ExportScalarDataArgs): SerializedTable {
+	const queryTableData = (data?.payload?.data?.newResult?.data?.result ||
+		data?.payload?.data?.result ||
+		[]) as QueryDataV3[];
+
+	const { columns, dataSource } = createTableColumnsFromQuery({
+		query,
+		queryTableData,
+	});
+
+	return exportTableData({
+		// antd widens title/dataIndex; createTableColumnsFromQuery always sets strings
+		columns: columns.map((column) => {
+			const rawIndex = 'dataIndex' in column ? column.dataIndex : undefined;
+			const key =
+				typeof rawIndex === 'string' || typeof rawIndex === 'number'
+					? String(rawIndex)
+					: '';
+			const name = typeof column.title === 'string' ? column.title : key;
+			return { name, key: key || name };
+		}),
+		dataSource: dataSource as unknown as Record<string, unknown>[],
+	});
+}

frontend/src/lib/exportData/exportTableData.ts

@@ -0,0 +1,46 @@
+import { SerializedTable } from './types';
+import { withUnit } from './withUnit';
+
+/** Generic table-model column — any prepared table (QueryTable, dashboard
+ * tables, plain antd tables) adapts to this in a line or two. */
+export interface ExportTableColumn {
+	/** Display name, used as the export header (column order = array order). */
+	name: string;
+	/** Key into each dataSource record. */
+	key: string;
+	isValueColumn?: boolean;
+}
+
+interface ExportTableDataArgs {
+	columns: ExportTableColumn[];
+	dataSource: Record<string, unknown>[];
+	/** Per-column display unit, keyed by column key (dashboards; absent in explorer). */
+	columnUnits?: Record<string, string>;
+}
+
+/**
+ * Serializes a prepared table model into a format-agnostic table — raw values
+ * in display column order (lossless; no cell formatting applied).
+ */
+export function exportTableData({
+	columns,
+	dataSource,
+	columnUnits,
+}: ExportTableDataArgs): SerializedTable {
+	const headers = columns.map((column) =>
+		column.isValueColumn
+			? withUnit(column.name, columnUnits?.[column.key])
+			: column.name,
+	);
+
+	const rows = dataSource.map((record) =>
+		columns.map((column) => {
+			const value = record[column.key];
+			return value === undefined || value === null
+				? ''
+				: (value as string | number);
+		}),
+	);
+
+	return { headers, rows };
+}

frontend/src/lib/exportData/exportTimeseriesData.ts

@@ -5,6 +5,7 @@ import { TimeSeries, TimeSeriesData } from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 import { SerializedTable } from './types';
+import { withUnit } from './withUnit';
 
 interface ExportTimeseriesDataArgs {
 	data: TimeSeriesData[];
@@ -98,18 +99,6 @@ function flatten(
 	return flat;
 }
 
-// Display-format ids, not physical units — meaningful on a chart axis
-// (compact-number formatting) but misleading in an export header.
-const DISPLAY_ONLY_UNITS = new Set(['short', 'none']);
-
-// Appends the y-axis unit to the value header: `value` → `value (ms)`.
-function withUnit(header: string, yAxisUnit?: string): string {
-	if (!yAxisUnit || DISPLAY_ONLY_UNITS.has(yAxisUnit)) {
-		return header;
-	}
-	return `${header} (${yAxisUnit})`;
-}
-
 function toIso(timestamp: number): string {
 	return new Date(timestamp).toISOString();
 }

frontend/src/lib/exportData/withUnit.ts

@@ -0,0 +1,11 @@
+// Display-format ids, not physical units — meaningful on a chart axis
+// (compact-number formatting) but misleading in an export header.
+const DISPLAY_ONLY_UNITS = new Set(['short', 'none']);
+
+/** Appends a unit to a header: `value` → `value (ms)`. Skips display-only ids. */
+export function withUnit(header: string, unit?: string): string {
+	if (!unit || DISPLAY_ONLY_UNITS.has(unit)) {
+		return header;
+	}
+	return `${header} (${unit})`;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableImpactDialog/VariableImpactDialog.module.scss

@@ -1,86 +0,0 @@
-.body {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	max-height: 60vh;
-	overflow-y: auto;
-}
-
-.intro {
-	color: var(--l2-foreground);
-	font-size: 13px;
-	line-height: 1.5;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-.row {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 12px;
-	border: 1px solid var(--l2-border);
-	border-radius: 6px;
-	background: var(--l1-background);
-}
-
-.rowHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-.sourceLabel {
-	color: var(--l1-foreground);
-	font-weight: 600;
-	font-size: 13px;
-}
-
-.kindTag {
-	color: var(--l2-foreground);
-	font-size: 11px;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	padding: 2px 8px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	white-space: nowrap;
-}
-
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.fieldLabel {
-	color: var(--l2-foreground);
-	font-size: 11px;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-
-.textArea {
-	font-family: var(--font-mono, monospace);
-	font-size: 12px;
-}
-
-.disabled {
-	opacity: 0.6;
-}
-
-.warning {
-	color: var(--warning-foreground, #d97706);
-	font-size: 11px;
-}
-
-.footer {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableImpactDialog/VariableImpactDialog.tsx

@@ -1,159 +0,0 @@
-import { Check, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Typography } from '@signozhq/ui/typography';
-// eslint-disable-next-line signoz/no-antd-components -- multiline TextArea + Checkbox have no @signozhq/ui equivalent yet
-import { Checkbox, Input as AntdInput } from 'antd';
-import cx from 'classnames';
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-
-import type { VariableImpactMode, VariableUsage } from '../variableUsages';
-import { useVariableImpactState } from './useVariableImpactState';
-import styles from './VariableImpactDialog.module.scss';
-
-const KIND_LABEL: Record<VariableUsage['kind'], string> = {
-	builder: 'Query builder',
-	promql: 'PromQL',
-	clickhouse: 'ClickHouse',
-	variable: 'Variable',
-};
-
-interface VariableImpactDialogProps {
-	open: boolean;
-	mode: VariableImpactMode;
-	/** The variable being renamed/deleted (its current name). */
-	variableName: string;
-	/** The new name (rename mode only). */
-	newName?: string;
-	usages: VariableUsage[];
-	isLoading: boolean;
-	onConfirm: (resolvedUsages: VariableUsage[]) => void;
-	onClose: () => void;
-}
-
-/**
- * Blocks a rename/delete of a referenced variable behind a review step: lists
- * every usage across panel queries (builder / PromQL / ClickHouse) and other
- * variables, shows the current vs resulting query, and lets the user edit each
- * result or exclude it before applying.
- */
-function VariableImpactDialog({
-	open,
-	mode,
-	variableName,
-	newName,
-	usages,
-	isLoading,
-	onConfirm,
-	onClose,
-}: VariableImpactDialogProps): JSX.Element {
-	const { rows, setResultingText, toggleIncluded, resolvedUsages } =
-		useVariableImpactState(usages, open);
-
-	const isRename = mode === 'rename';
-	const count = usages.length;
-	const plural = count === 1 ? '' : 's';
-	const intro = isRename
-		? `$${variableName} is used in ${count} place${plural}. Review the updated queries before renaming to $${newName}.`
-		: `$${variableName} is used in ${count} place${plural}. Edit or remove each usage before deleting.`;
-
-	const footer = (
-		<div className={styles.footer}>
-			<Button
-				variant="solid"
-				color="secondary"
-				onClick={onClose}
-				testId="variable-impact-cancel"
-			>
-				<X size={12} />
-				Cancel
-			</Button>
-			<Button
-				variant="solid"
-				color={isRename ? 'primary' : 'destructive'}
-				loading={isLoading}
-				onClick={(): void => onConfirm(resolvedUsages)}
-				testId="variable-impact-confirm"
-			>
-				<Check size={12} />
-				{isRename ? 'Rename' : 'Delete'}
-			</Button>
-		</div>
-	);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={isRename ? `Rename $${variableName}` : `Delete $${variableName}`}
-			width="wide"
-			showCloseButton={false}
-			// Lift above the settings drawer (z ~1000); overlay off (it would only half-dim).
-			style={{ zIndex: 1100 }}
-			showOverlay={false}
-			footer={footer}
-		>
-			<div className={styles.body}>
-				<Typography.Text className={styles.intro}>{intro}</Typography.Text>
-				<div className={styles.rows}>
-					{rows.map((row) => {
-						const stillReferences =
-							row.included &&
-							textContainsVariableReference(row.resultingText, variableName);
-						return (
-							<div
-								key={row.id}
-								className={styles.row}
-								data-testid={`variable-impact-row-${row.id}`}
-							>
-								<div className={styles.rowHeader}>
-									<Checkbox
-										checked={row.included}
-										onChange={(): void => toggleIncluded(row.id)}
-										data-testid={`variable-impact-include-${row.id}`}
-									>
-										<span className={styles.sourceLabel}>{row.sourceLabel}</span>
-									</Checkbox>
-									<span className={styles.kindTag}>{KIND_LABEL[row.kind]}</span>
-								</div>
-								<div className={styles.field}>
-									<Typography.Text className={styles.fieldLabel}>
-										Current
-									</Typography.Text>
-									<AntdInput.TextArea
-										className={styles.textArea}
-										value={row.currentText}
-										readOnly
-										autoSize={{ minRows: 1, maxRows: 4 }}
-									/>
-								</div>
-								<div className={styles.field}>
-									<Typography.Text className={styles.fieldLabel}>Result</Typography.Text>
-									<AntdInput.TextArea
-										className={cx(styles.textArea, !row.included && styles.disabled)}
-										value={row.resultingText}
-										disabled={!row.included}
-										autoSize={{ minRows: 1, maxRows: 4 }}
-										onChange={(e): void => setResultingText(row.id, e.target.value)}
-										data-testid={`variable-impact-result-${row.id}`}
-									/>
-									{stillReferences ? (
-										<Typography.Text className={styles.warning}>
-											Still references ${variableName}
-										</Typography.Text>
-									) : null}
-								</div>
-							</div>
-						);
-					})}
-				</div>
-			</div>
-		</DialogWrapper>
-	);
-}
-
-export default VariableImpactDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableImpactDialog/useVariableImpactState.ts

@@ -1,52 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import type { VariableUsage } from '../variableUsages';
-
-/** A usage row plus whether its edit will be applied on confirm. */
-export interface EditableVariableUsage extends VariableUsage {
-	included: boolean;
-}
-
-interface UseVariableImpactState {
-	rows: EditableVariableUsage[];
-	setResultingText: (id: string, text: string) => void;
-	toggleIncluded: (id: string) => void;
-	/** The included rows, as plain usages, to build the patch from. */
-	resolvedUsages: VariableUsage[];
-}
-
-/**
- * Editable state for the impact dialog: a per-usage copy the user can edit
- * (`resultingText`) and include/exclude before applying. Resets whenever the
- * dialog (re)opens for a fresh usage set.
- */
-export function useVariableImpactState(
-	usages: VariableUsage[],
-	open: boolean,
-): UseVariableImpactState {
-	const [rows, setRows] = useState<EditableVariableUsage[]>([]);
-
-	useEffect(() => {
-		if (open) {
-			setRows(usages.map((usage) => ({ ...usage, included: true })));
-		}
-	}, [open, usages]);
-
-	const setResultingText = useCallback((id: string, text: string): void => {
-		setRows((prev) =>
-			prev.map((row) => (row.id === id ? { ...row, resultingText: text } : row)),
-		);
-	}, []);
-
-	const toggleIncluded = useCallback((id: string): void => {
-		setRows((prev) =>
-			prev.map((row) =>
-				row.id === id ? { ...row, included: !row.included } : row,
-			),
-		);
-	}, []);
-
-	const resolvedUsages: VariableUsage[] = rows.filter((row) => row.included);
-
-	return { rows, setResultingText, toggleIncluded, resolvedUsages };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/__tests__/variableUsages.test.ts

@@ -1,98 +0,0 @@
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	emptyVariableFormModel,
-	type VariableFormModel,
-} from '../variableFormModel';
-import { findVariableUsages } from '../variableUsages';
-
-// Identity adapter so `spec.variables` can be plain form models in the test.
-jest.mock('../variableAdapters', () => ({
-	dtoToFormModel: (dto: unknown): unknown => dto,
-}));
-
-function variable(overrides: Partial<VariableFormModel>): VariableFormModel {
-	return { ...emptyVariableFormModel(), ...overrides };
-}
-
-function builderPanel(name: string, expression: string): unknown {
-	return {
-		spec: {
-			display: { name },
-			queries: [
-				{
-					spec: {
-						plugin: { kind: 'signoz/BuilderQuery', spec: { filter: { expression } } },
-					},
-				},
-			],
-		},
-	};
-}
-
-function promqlPanel(name: string, query: string): unknown {
-	return {
-		spec: {
-			display: { name },
-			queries: [
-				{ spec: { plugin: { kind: 'signoz/PromQLQuery', spec: { query } } } },
-			],
-		},
-	};
-}
-
-function dashboard(
-	panels: Record<string, unknown>,
-	variables: VariableFormModel[],
-): DashboardtypesGettableDashboardV2DTO {
-	return {
-		spec: { panels, variables },
-	} as unknown as DashboardtypesGettableDashboardV2DTO;
-}
-
-describe('findVariableUsages', () => {
-	const dash = dashboard(
-		{
-			p1: builderPanel('Panel One', "service IN $svc AND env = 'prod'"),
-			p2: promqlPanel('Panel Two', 'up{s="$svc"}'),
-			p3: builderPanel('Unrelated', "env = 'prod'"),
-		},
-		[
-			variable({ name: 'svc', type: 'QUERY' }),
-			variable({
-				name: 'other',
-				type: 'QUERY',
-				queryValue: 'SELECT x WHERE s = $svc',
-			}),
-			variable({ name: 'plain', type: 'QUERY', queryValue: 'SELECT y' }),
-		],
-	);
-
-	it('finds panel (builder + promql) and variable usages, skipping unrelated ones', () => {
-		const usages = findVariableUsages(dash, 'svc', 'rename', 'zone');
-		const ids = usages.map((u) => u.id).sort();
-		expect(ids).toStrictEqual(['panel:p1:0', 'panel:p2:0', 'variable:other:0']);
-	});
-
-	it('rewrites references for a rename across all kinds', () => {
-		const usages = findVariableUsages(dash, 'svc', 'rename', 'zone');
-		const byId = Object.fromEntries(usages.map((u) => [u.id, u.resultingText]));
-		expect(byId['panel:p1:0']).toBe("service IN $zone AND env = 'prod'");
-		expect(byId['panel:p2:0']).toBe('up{s="$zone"}');
-		expect(byId['variable:other:0']).toBe('SELECT x WHERE s = $zone');
-	});
-
-	it('strips builder clauses on delete but leaves raw/variable queries for review', () => {
-		const usages = findVariableUsages(dash, 'svc', 'delete');
-		const byId = Object.fromEntries(usages.map((u) => [u.id, u.resultingText]));
-		// Builder: the clause referencing $svc is dropped.
-		expect(byId['panel:p1:0']).toBe("env = 'prod'");
-		// Raw PromQL + variable query: unchanged (user edits).
-		expect(byId['panel:p2:0']).toBe('up{s="$svc"}');
-		expect(byId['variable:other:0']).toBe('SELECT x WHERE s = $svc');
-	});
-
-	it('returns nothing for an unreferenced variable', () => {
-		expect(findVariableUsages(dash, 'nope', 'delete')).toStrictEqual([]);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/index.tsx

@@ -17,17 +17,7 @@ import {
 	emptyVariableFormModel,
 	type VariableFormModel,
 } from './variableFormModel';
-import {
-	applyVariableQueryEdits,
-	buildVariableImpactPatch,
-} from './variableImpactPatch';
-import {
-	findVariableUsages,
-	type VariableImpactMode,
-	type VariableUsage,
-} from './variableUsages';
 import VariableForm from './VariableForm/VariableForm';
-import VariableImpactDialog from './VariableImpactDialog/VariableImpactDialog';
 import VariablesList from './VariablesList';
 import styles from './Variables.module.scss';
 import AddVariableButton from './components/AddVariableButton';
@@ -69,16 +59,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		null,
 	);
 	const [applyToAllIndex, setApplyToAllIndex] = useState<number | null>(null);
-	// A pending rename/delete that touches other queries — resolved via the impact
-	// dialog before it is applied. `nextVariables` is the array to persist (with the
-	// rename/delete already applied), before any variable-query edits.
-	const [impact, setImpact] = useState<{
-		mode: VariableImpactMode;
-		variableName: string;
-		newName?: string;
-		usages: VariableUsage[];
-		nextVariables: VariableFormModel[];
-	} | null>(null);
 
 	const editingFormModel: VariableFormModel | null = useMemo(() => {
 		if (!isEditing) {
@@ -124,38 +104,12 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		formModel: VariableFormModel,
 		selectedPanelIds: string[],
 	): void => {
-		const editingIndex = isEditing?.type === 'edit' ? isEditing.index : null;
-		const oldName = editingIndex !== null ? variables[editingIndex].name : null;
-
 		const next = [...variables];
 		if (isEditing?.type === 'new') {
 			next.push(formModel);
-		} else if (editingIndex !== null) {
-			next[editingIndex] = formModel;
+		} else if (isEditing?.type === 'edit') {
+			next[isEditing.index] = formModel;
 		}
-
-		// A rename that other queries/variables reference must be reviewed first, so
-		// the references are rewritten alongside the rename (never left dangling).
-		if (oldName && oldName !== formModel.name) {
-			const usages = findVariableUsages(
-				dashboard,
-				oldName,
-				'rename',
-				formModel.name,
-			);
-			if (usages.length > 0) {
-				setIsEditing(null);
-				setImpact({
-					mode: 'rename',
-					variableName: oldName,
-					newName: formModel.name,
-					usages,
-					nextVariables: next,
-				});
-				return;
-			}
-		}
-
 		setIsEditing(null);
 		setVariables(next);
 		void (async (): Promise<void> => {
@@ -195,57 +149,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		setConfirmDeleteIndex(null);
 	};
 
-	// Delete requested from the list: if the variable is referenced anywhere, block
-	// and open the impact dialog; otherwise fall through to the simple confirm.
-	const requestDelete = (index: number): void => {
-		const usages = findVariableUsages(dashboard, variables[index].name, 'delete');
-		if (usages.length > 0) {
-			setImpact({
-				mode: 'delete',
-				variableName: variables[index].name,
-				usages,
-				nextVariables: variables.filter((_, i) => i !== index),
-			});
-			return;
-		}
-		setConfirmDeleteIndex(index);
-	};
-
-	// Applies a resolved rename/delete: the variables array (rename/delete + edited
-	// variable queries) and each touched panel's queries, in one atomic patch.
-	const handleImpactConfirm = async (
-		resolvedUsages: VariableUsage[],
-	): Promise<void> => {
-		if (!impact) {
-			return;
-		}
-		const nextVariables = applyVariableQueryEdits(
-			impact.nextVariables,
-			resolvedUsages,
-		);
-		const ops = buildVariableImpactPatch(
-			dashboard,
-			nextVariables,
-			resolvedUsages,
-		);
-		setVariables(nextVariables);
-		try {
-			await patchAsync(ops);
-			toast.success(
-				impact.mode === 'rename'
-					? `Renamed to $${impact.newName}`
-					: `Deleted $${impact.variableName}`,
-			);
-		} catch {
-			toast.error(
-				impact.mode === 'rename'
-					? 'Could not rename the variable'
-					: 'Could not delete the variable',
-			);
-		}
-		setImpact(null);
-	};
-
 	const applyToAllVariable =
 		applyToAllIndex === null ? null : variables[applyToAllIndex];
 
@@ -299,7 +202,7 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 						canEdit={isEditable}
 						confirmingIndex={confirmDeleteIndex}
 						onEdit={(index): void => setIsEditing({ type: 'edit', index })}
-						onRequestDelete={requestDelete}
+						onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
 						onConfirmDelete={handleConfirmDelete}
 						onCancelDelete={(): void => setConfirmDeleteIndex(null)}
 						onMove={handleMove}
@@ -317,16 +220,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				onConfirm={(): void => void handleConfirmApplyToAll()}
 				onClose={(): void => setApplyToAllIndex(null)}
 			/>
-			<VariableImpactDialog
-				open={impact !== null}
-				mode={impact?.mode ?? 'delete'}
-				variableName={impact?.variableName ?? ''}
-				newName={impact?.newName}
-				usages={impact?.usages ?? []}
-				isLoading={isPatching}
-				onConfirm={(resolved): void => void handleImpactConfirm(resolved)}
-				onClose={(): void => setImpact(null)}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableImpactPatch.ts

@@ -1,123 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesQueryDTO,
-	Querybuildertypesv5CompositeQueryDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { cloneDeep } from 'lodash-es';
-
-import { formModelToDto } from './variableAdapters';
-import type { VariableFormModel } from './variableFormModel';
-import { buildVariablesPatch } from './variablePatchOps';
-import type { VariableUsage, VariableUsageKind } from './variableUsages';
-
-/** Minimal writable view of an envelope spec's reference-bearing fields. */
-interface WritableSpec {
-	query?: string;
-	filter?: { expression?: string };
-}
-
-/** Writes the resolved text into the spec's builder filter or raw query field. */
-function writeSpecText(
-	spec: WritableSpec,
-	kind: VariableUsageKind,
-	text: string,
-): void {
-	if (kind === 'builder') {
-		spec.filter = { ...(spec.filter ?? {}), expression: text };
-	} else {
-		spec.query = text;
-	}
-}
-
-/** Applies one panel usage's edited text into a (cloned) queries array in place. */
-function applyPanelUsage(
-	queries: DashboardtypesQueryDTO[],
-	usage: VariableUsage,
-): void {
-	const plugin = queries[0]?.spec?.plugin;
-	if (!plugin?.spec) {
-		return;
-	}
-	if (plugin.kind === 'signoz/CompositeQuery') {
-		const composite = plugin.spec as Querybuildertypesv5CompositeQueryDTO;
-		const envelope = (composite.queries ?? [])[usage.envelopeIndex];
-		if (envelope?.spec) {
-			writeSpecText(
-				envelope.spec as WritableSpec,
-				usage.kind,
-				usage.resultingText,
-			);
-		}
-	} else {
-		// Bare BuilderQuery / PromQLQuery / ClickHouseSQL — the plugin spec is the
-		// single envelope (index 0).
-		writeSpecText(plugin.spec as WritableSpec, usage.kind, usage.resultingText);
-	}
-}
-
-/**
- * Applies the variable-definition usages' edited text back into the matching
- * variable's `queryValue`, so a renamed/deleted variable's references inside
- * another query variable are updated alongside the panels.
- */
-export function applyVariableQueryEdits(
-	variables: VariableFormModel[],
-	usages: VariableUsage[],
-): VariableFormModel[] {
-	const edits = new Map(
-		usages
-			.filter((usage) => usage.sourceType === 'variable')
-			.map((usage) => [usage.sourceId, usage.resultingText]),
-	);
-	if (edits.size === 0) {
-		return variables;
-	}
-	return variables.map((variable) =>
-		edits.has(variable.name)
-			? { ...variable, queryValue: edits.get(variable.name) as string }
-			: variable,
-	);
-}
-
-/**
- * Builds the atomic JSON-Patch for a variable rename/delete impact: replaces the
- * whole variables array (which the caller has already updated for the rename/
- * delete and any variable-query edits) and replaces each touched panel's queries
- * with the user's resolved text.
- */
-export function buildVariableImpactPatch(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-	nextVariables: VariableFormModel[],
-	usages: VariableUsage[],
-): DashboardtypesJSONPatchOperationDTO[] {
-	const ops: DashboardtypesJSONPatchOperationDTO[] = [
-		...buildVariablesPatch(nextVariables.map(formModelToDto)),
-	];
-
-	const panels = dashboard.spec.panels ?? {};
-	const byPanel = new Map<string, VariableUsage[]>();
-	usages
-		.filter((usage) => usage.sourceType === 'panel')
-		.forEach((usage) => {
-			const list = byPanel.get(usage.sourceId) ?? [];
-			list.push(usage);
-			byPanel.set(usage.sourceId, list);
-		});
-
-	byPanel.forEach((list, panelId) => {
-		const panel = panels[panelId];
-		if (!panel?.spec?.queries?.length) {
-			return;
-		}
-		const queries = cloneDeep(panel.spec.queries);
-		list.forEach((usage) => applyPanelUsage(queries, usage));
-		ops.push({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path: `/spec/panels/${panelId}/spec/queries`,
-			value: queries,
-		});
-	});
-
-	return ops;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableUsages.ts

@@ -1,163 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	Querybuildertypesv5QueryEnvelopeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import {
-	removeVariableReferenceClause,
-	rewriteVariableReferences,
-	textContainsVariableReference,
-} from 'lib/dashboardVariables/variableReference';
-
-import { toQueryEnvelopes } from '../../queryV5/buildQueryRangeRequest';
-import { dtoToFormModel } from './variableAdapters';
-
-/** The kind of query text a variable is referenced from. */
-export type VariableUsageKind =
-	| 'builder'
-	| 'promql'
-	| 'clickhouse'
-	| 'variable';
-
-/** Whether the impact is a rename (rewrite refs) or a delete (remove refs). */
-export type VariableImpactMode = 'rename' | 'delete';
-
-/**
- * One place a variable is referenced — a panel query's builder filter expression,
- * a PromQL/ClickHouse query string, or another variable's query definition. Each
- * usage is a single editable text field: `currentText` is what exists today,
- * `resultingText` is the proposed rewrite (rename) or removal (delete) the user
- * can review and edit before applying.
- */
-export interface VariableUsage {
-	/** Stable key: `${sourceType}:${sourceId}:${envelopeIndex}`. */
-	id: string;
-	sourceType: 'panel' | 'variable';
-	/** Panel id or referencing variable's name. */
-	sourceId: string;
-	/** Human label: panel display name or `$variableName`. */
-	sourceLabel: string;
-	kind: VariableUsageKind;
-	/** Index into the panel's query envelopes (0 for a variable definition). */
-	envelopeIndex: number;
-	currentText: string;
-	resultingText: string;
-}
-
-/** The reference-bearing text + kind for one query envelope, if any. */
-function envelopeReferenceText(
-	envelope: Querybuildertypesv5QueryEnvelopeDTO,
-): { kind: VariableUsageKind; text: string } | null {
-	const spec = envelope.spec as
-		| { query?: string; filter?: { expression?: string } }
-		| undefined;
-	if (envelope.type === 'builder_query') {
-		const text = spec?.filter?.expression;
-		return typeof text === 'string' ? { kind: 'builder', text } : null;
-	}
-	if (envelope.type === 'promql') {
-		return typeof spec?.query === 'string'
-			? { kind: 'promql', text: spec.query }
-			: null;
-	}
-	if (envelope.type === 'clickhouse_sql') {
-		return typeof spec?.query === 'string'
-			? { kind: 'clickhouse', text: spec.query }
-			: null;
-	}
-	return null;
-}
-
-/** The proposed text after a rename (rewrite) or delete (best-effort removal). */
-function computeResultingText(
-	kind: VariableUsageKind,
-	text: string,
-	variableName: string,
-	mode: VariableImpactMode,
-	newName: string,
-): string {
-	if (mode === 'rename') {
-		return rewriteVariableReferences(text, variableName, newName);
-	}
-	// delete: only builder filter clauses can be safely auto-stripped; raw PromQL/
-	// ClickHouse and variable queries are left for the user to edit.
-	return kind === 'builder'
-		? removeVariableReferenceClause(text, variableName)
-		: text;
-}
-
-/**
- * Finds every usage of `variableName` across the dashboard's panel queries
- * (builder / PromQL / ClickHouse) and other variables' query definitions, with a
- * proposed `resultingText` for the given mode. Consumed by the impact dialog that
- * blocks a rename/delete until the user resolves each usage.
- */
-export function findVariableUsages(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-	variableName: string,
-	mode: VariableImpactMode,
-	newName = '',
-): VariableUsage[] {
-	if (!variableName) {
-		return [];
-	}
-	const usages: VariableUsage[] = [];
-	const spec = dashboard.spec;
-
-	Object.entries(spec.panels ?? {}).forEach(([panelId, panel]) => {
-		const queries = panel?.spec?.queries;
-		if (!queries?.length) {
-			return;
-		}
-		toQueryEnvelopes(queries).forEach((envelope, index) => {
-			const ref = envelopeReferenceText(envelope);
-			if (!ref || !textContainsVariableReference(ref.text, variableName)) {
-				return;
-			}
-			usages.push({
-				id: `panel:${panelId}:${index}`,
-				sourceType: 'panel',
-				sourceId: panelId,
-				sourceLabel: panel.spec?.display?.name || panelId,
-				kind: ref.kind,
-				envelopeIndex: index,
-				currentText: ref.text,
-				resultingText: computeResultingText(
-					ref.kind,
-					ref.text,
-					variableName,
-					mode,
-					newName,
-				),
-			});
-		});
-	});
-
-	(spec.variables ?? []).map(dtoToFormModel).forEach((variable) => {
-		if (
-			variable.name === variableName ||
-			variable.type !== 'QUERY' ||
-			!variable.queryValue ||
-			!textContainsVariableReference(variable.queryValue, variableName)
-		) {
-			return;
-		}
-		usages.push({
-			id: `variable:${variable.name}:0`,
-			sourceType: 'variable',
-			sourceId: variable.name,
-			sourceLabel: `$${variable.name}`,
-			kind: 'variable',
-			envelopeIndex: 0,
-			currentText: variable.queryValue,
-			resultingText: computeResultingText(
-				'variable',
-				variable.queryValue,
-				variableName,
-				mode,
-				newName,
-			),
-		});
-	});
-
-	return usages;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableSelector.tsx

@@ -1,17 +1,15 @@
-import { useMemo } from 'react';
 import { SolidInfoCircle } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 // eslint-disable-next-line signoz/no-antd-components -- lightweight description tooltip, matches V1
 import { Tooltip } from 'antd';
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
 
 import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
 import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
+import CustomSelector from './selectors/CustomSelector';
+import DynamicSelector from './selectors/DynamicSelector';
+import QuerySelector from './selectors/QuerySelector';
 import TextSelector from './selectors/TextSelector';
-import VariableValueControl from './selectors/VariableValueControl';
-import { useVariableFetchState } from './useVariableFetchState';
 import styles from './VariablesBar.module.scss';
-import VariableTooltip from './VariableTooltip';
 
 interface VariableSelectorProps {
 	variable: VariableFormModel;
@@ -34,63 +32,50 @@ function VariableSelector({
 	onChange,
 	onAutoSelect,
 }: VariableSelectorProps): JSX.Element {
-	// Dependency links shown in the hover tooltip: variables this one's query
-	// references (dependsOn) and query variables that reference this one (usedBy).
-	const { dependsOn, usedBy } = useMemo(() => {
-		const references = (text: string | undefined, name: string): boolean =>
-			!!text && !!name && textContainsVariableReference(text, name);
-		return {
-			dependsOn:
-				variable.type === 'QUERY'
-					? variables
-							.filter(
-								(v) =>
-									v.name !== variable.name && references(variable.queryValue, v.name),
-							)
-							.map((v) => v.name)
-					: [],
-			usedBy: variables
-				.filter(
-					(v) =>
-						v.type === 'QUERY' &&
-						v.name !== variable.name &&
-						references(v.queryValue, variable.name),
-				)
-				.map((v) => v.name),
-		};
-	}, [variable, variables]);
-
-	const hasTooltip =
-		!!variable.description || dependsOn.length > 0 || usedBy.length > 0;
-
-	// Surface the fetch on the bar itself: a bar flush along the control's bottom
-	// edge while a QUERY/DYNAMIC variable is loading (or waiting on a parent), so the
-	// user sees options are being fetched without opening the dropdown.
-	const { isVariableFetching, isVariableWaiting } = useVariableFetchState(
-		variable.name,
-	);
-	const isFetchingOptions =
-		(variable.type === 'QUERY' || variable.type === 'DYNAMIC') &&
-		(isVariableFetching || isVariableWaiting);
-
-	const renderControl = (): JSX.Element =>
-		variable.type === 'TEXT' ? (
-			<TextSelector
-				selection={selection}
-				defaultValue={variable.textValue}
-				onChange={onChange}
-				testId={`variable-input-${variable.name}`}
-			/>
-		) : (
-			<VariableValueControl
-				variable={variable}
-				variables={variables}
-				selections={selections}
-				selection={selection}
-				onChange={onChange}
-				onAutoSelect={onAutoSelect}
-			/>
-		);
+	const renderControl = (): JSX.Element => {
+		switch (variable.type) {
+			case 'TEXT':
+				return (
+					<TextSelector
+						selection={selection}
+						defaultValue={variable.textValue}
+						onChange={onChange}
+						testId={`variable-input-${variable.name}`}
+					/>
+				);
+			case 'QUERY':
+				return (
+					<QuerySelector
+						variable={variable}
+						selections={selections}
+						selection={selection}
+						onChange={onChange}
+						onAutoSelect={onAutoSelect}
+					/>
+				);
+			case 'DYNAMIC':
+				return (
+					<DynamicSelector
+						variable={variable}
+						variables={variables}
+						selections={selections}
+						selection={selection}
+						onChange={onChange}
+						onAutoSelect={onAutoSelect}
+					/>
+				);
+			case 'CUSTOM':
+			default:
+				return (
+					<CustomSelector
+						variable={variable}
+						selection={selection}
+						onChange={onChange}
+						onAutoSelect={onAutoSelect}
+					/>
+				);
+		}
+	};
 
 	return (
 		<div
@@ -99,29 +84,14 @@ function VariableSelector({
 		>
 			<Typography.Text className={styles.variableName}>
 				${variable.name}
-				{hasTooltip ? (
-					<Tooltip
-						title={
-							<VariableTooltip
-								description={variable.description}
-								dependsOn={dependsOn}
-								usedBy={usedBy}
-							/>
-						}
-					>
+				{variable.description ? (
+					<Tooltip title={variable.description}>
 						<SolidInfoCircle className={styles.infoIcon} size={14} />
 					</Tooltip>
 				) : null}
 			</Typography.Text>
 
 			<div className={styles.variableValue}>{renderControl()}</div>
-
-			{isFetchingOptions ? (
-				<span
-					className={styles.loadingBar}
-					data-testid={`variable-loading-${variable.name}`}
-				/>
-			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableTooltip.tsx

@@ -1,67 +0,0 @@
-import cx from 'classnames';
-
-import styles from './VariablesBar.module.scss';
-
-interface VariableTooltipProps {
-	description?: string;
-	/** Variables this one references (its query depends on their values). */
-	dependsOn: string[];
-	/** Variables whose queries reference this one. */
-	usedBy: string[];
-}
-
-/** Hover-tooltip body for a variable: its description plus its dependencies. */
-function VariableTooltip({
-	description,
-	dependsOn,
-	usedBy,
-}: VariableTooltipProps): JSX.Element {
-	const hasDependencies = dependsOn.length > 0 || usedBy.length > 0;
-
-	return (
-		<div className={styles.tooltipContent}>
-			{description ? (
-				<div className={styles.tooltipDescription}>{description}</div>
-			) : null}
-
-			{hasDependencies ? (
-				<>
-					{description ? <div className={styles.tooltipDivider} /> : null}
-					{dependsOn.length > 0 ? (
-						<div className={styles.tooltipSection}>
-							<div className={cx(styles.tooltipLabel, styles.dependsColor)}>
-								Depends on
-							</div>
-							<div className={styles.tooltipRefs}>
-								{dependsOn.map((name) => (
-									<span
-										key={name}
-										className={cx(styles.tooltipRef, styles.dependsColor)}
-									>
-										${name}
-									</span>
-								))}
-							</div>
-						</div>
-					) : null}
-					{usedBy.length > 0 ? (
-						<div className={styles.tooltipSection}>
-							<div className={cx(styles.tooltipLabel, styles.usedByColor)}>
-								Used by
-							</div>
-							<div className={styles.tooltipRefs}>
-								{usedBy.map((name) => (
-									<span key={name} className={cx(styles.tooltipRef, styles.usedByColor)}>
-										${name}
-									</span>
-								))}
-							</div>
-						</div>
-					) : null}
-				</>
-			) : null}
-		</div>
-	);
-}
-
-export default VariableTooltip;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.module.scss

@@ -73,57 +73,10 @@
 }
 
 .variableItem {
-	position: relative;
 	display: flex;
 	align-items: center;
 }
 
-// Loading indicator: an indeterminate bar flush along the control's bottom edge,
-// full width and overlaying the border so it reads as the input's own edge rather
-// than a separate element. Non-interactive so the name/description stays hoverable.
-.loadingBar {
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	height: 2px;
-	overflow: hidden;
-	border-radius: 0 0 2px 2px;
-	background: color-mix(in srgb, var(--bg-robin-500) 20%, transparent);
-	pointer-events: none;
-}
-
-.loadingBar::after {
-	content: '';
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	width: 40%;
-	border-radius: 2px;
-	background: var(--bg-robin-500);
-	animation: variable-loading-slide 1.1s ease-in-out infinite;
-}
-
-@keyframes variable-loading-slide {
-	0% {
-		left: -40%;
-	}
-
-	100% {
-		left: 100%;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.loadingBar::after {
-		left: 0;
-		width: 100%;
-		animation: none;
-		opacity: 0.7;
-	}
-}
-
 .variableName {
 	display: flex;
 	min-width: 56px;
@@ -134,7 +87,7 @@
 	border: 1px solid var(--l3-border);
 	border-radius: 2px 0 0 2px;
 	background: var(--l3-background);
-	color: var(--bg-robin-400);
+	color: var(--bg-robin-300);
 	font-family: Inter;
 	font-size: 12px;
 	font-weight: 400;
@@ -144,63 +97,11 @@
 
 .infoIcon {
 	display: inline-flex;
-	margin-left: 6px;
+	margin-left: 2px;
 	color: var(--l2-foreground);
 	vertical-align: middle;
 }
 
-.tooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 240px;
-}
-
-.tooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-// Divider and labels use the tooltip's own text color at reduced opacity so they
-// read on the tooltip surface in either theme without hard-coding a palette.
-.tooltipDivider {
-	height: 1px;
-	background: currentColor;
-	opacity: 0.16;
-}
-
-.tooltipSection {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.tooltipLabel {
-	font-size: 10px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}
-
-.tooltipRefs {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px;
-}
-
-.tooltipRef {
-	font-size: 12px;
-}
-
-// Directional colors: parents (Depends on) in forest, children (Used by) in amber.
-.dependsColor {
-	color: var(--bg-forest-500);
-}
-
-.usedByColor {
-	color: var(--bg-amber-500);
-}
-
 .variableValue {
 	display: flex;
 	min-width: 120px;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/resolveVariableSelection.test.ts

@@ -1,153 +0,0 @@
-import {
-	emptyVariableFormModel,
-	type VariableFormModel,
-} from '../../DashboardSettings/Variables/variableFormModel';
-import {
-	configuredDefaultValue,
-	reconcileWithOptions,
-	resolveDefaultSelection,
-} from '../resolveVariableSelection';
-
-function model(overrides: Partial<VariableFormModel>): VariableFormModel {
-	return { ...emptyVariableFormModel(), ...overrides };
-}
-
-describe('resolveDefaultSelection', () => {
-	it('TEXT: uses defaultValue, then textValue, else empty string', () => {
-		expect(
-			resolveDefaultSelection(model({ type: 'TEXT', defaultValue: 'd' })),
-		).toStrictEqual({ value: 'd', allSelected: false });
-		expect(
-			resolveDefaultSelection(model({ type: 'TEXT', textValue: 't' })),
-		).toStrictEqual({ value: 't', allSelected: false });
-		expect(resolveDefaultSelection(model({ type: 'TEXT' }))).toStrictEqual({
-			value: '',
-			allSelected: false,
-		});
-	});
-
-	it('list: ALL when allowAll (multi + showAllOption) and no default', () => {
-		expect(
-			resolveDefaultSelection(
-				model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
-			),
-		).toStrictEqual({ value: null, allSelected: true });
-	});
-
-	it('list: ALL sentinel default → ALL', () => {
-		expect(
-			resolveDefaultSelection(
-				model({ type: 'CUSTOM', multiSelect: true, defaultValue: '__ALL__' }),
-			),
-		).toStrictEqual({ value: null, allSelected: true });
-	});
-
-	it('list: configured default wins over ALL default', () => {
-		expect(
-			resolveDefaultSelection(
-				model({
-					type: 'QUERY',
-					multiSelect: true,
-					showAllOption: true,
-					defaultValue: 'x',
-				}),
-			),
-		).toStrictEqual({ value: ['x'], allSelected: false });
-	});
-
-	it('list: no default and no allowAll → empty placeholder (filled after fetch)', () => {
-		expect(resolveDefaultSelection(model({ type: 'QUERY' }))).toStrictEqual({
-			value: '',
-			allSelected: false,
-		});
-		expect(
-			resolveDefaultSelection(model({ type: 'QUERY', multiSelect: true })),
-		).toStrictEqual({ value: [], allSelected: false });
-	});
-});
-
-describe('reconcileWithOptions', () => {
-	it('leaves a valid single selection untouched (local-first)', () => {
-		expect(
-			reconcileWithOptions(
-				model({ type: 'QUERY' }),
-				{ value: 'b', allSelected: false },
-				['a', 'b'],
-			),
-		).toBeNull();
-	});
-
-	it('materializes query ALL to the full option array', () => {
-		expect(
-			reconcileWithOptions(
-				model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
-				{ value: null, allSelected: true },
-				['a', 'b'],
-			),
-		).toStrictEqual({ value: ['a', 'b'], allSelected: true });
-	});
-
-	it('does not materialize dynamic ALL (sends __all__)', () => {
-		expect(
-			reconcileWithOptions(
-				model({ type: 'DYNAMIC', multiSelect: true, showAllOption: true }),
-				{ value: null, allSelected: true },
-				['a', 'b'],
-			),
-		).toBeNull();
-	});
-
-	it('keeps the still-valid subset when options re-scope', () => {
-		expect(
-			reconcileWithOptions(
-				model({ type: 'QUERY', multiSelect: true }),
-				{ value: ['a', 'b', 'c'], allSelected: false },
-				['a', 'b', 'd'],
-			),
-		).toStrictEqual({ value: ['a', 'b'], allSelected: false });
-	});
-
-	it('falls back to the configured default (else first) when invalid', () => {
-		expect(
-			reconcileWithOptions(
-				model({ type: 'QUERY', defaultValue: 'b' }),
-				{ value: '', allSelected: false },
-				['a', 'b', 'c'],
-			),
-		).toStrictEqual({ value: 'b', allSelected: false });
-		expect(
-			reconcileWithOptions(
-				model({ type: 'QUERY' }),
-				{ value: '', allSelected: false },
-				['a', 'b'],
-			),
-		).toStrictEqual({ value: 'a', allSelected: false });
-	});
-
-	it('does nothing while options are empty', () => {
-		expect(
-			reconcileWithOptions(
-				model({ type: 'QUERY' }),
-				{ value: '', allSelected: false },
-				[],
-			),
-		).toBeNull();
-	});
-});
-
-describe('configuredDefaultValue', () => {
-	it('TEXT: textValue fallback; list: defaultValue only (no ALL synthesis)', () => {
-		expect(configuredDefaultValue(model({ type: 'TEXT', textValue: 't' }))).toBe(
-			't',
-		);
-		expect(
-			configuredDefaultValue(model({ type: 'QUERY', defaultValue: 'x' })),
-		).toBe('x');
-		// ALL-by-default list variable is not expanded here (options unknown).
-		expect(
-			configuredDefaultValue(
-				model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
-			),
-		).toBeUndefined();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/variablesUrlState.test.ts

@@ -0,0 +1,31 @@
+import { withVariablesSearch } from '../variablesUrlState';
+
+jest.mock('nuqs', () => ({
+	parseAsJson: (): unknown => ({ withOptions: (): unknown => ({}) }),
+}));
+
+describe('withVariablesSearch', () => {
+	const current = `?compositeQuery=abc&variables=${encodeURIComponent(
+		'{"env":"prod"}',
+	)}`;
+
+	it('returns the base unchanged when the current search has no variables', () => {
+		expect(withVariablesSearch('', '?compositeQuery=abc')).toBe('');
+		expect(withVariablesSearch('?panelKind=signoz/TablePanel', '')).toBe(
+			'?panelKind=signoz/TablePanel',
+		);
+	});
+
+	it('carries only the variables param onto an empty base', () => {
+		const result = withVariablesSearch('', current);
+		expect(new URLSearchParams(result).get('variables')).toBe('{"env":"prod"}');
+		expect(new URLSearchParams(result).get('compositeQuery')).toBeNull();
+	});
+
+	it('appends the variables param to existing base params', () => {
+		const result = withVariablesSearch('?panelKind=signoz/TablePanel', current);
+		const params = new URLSearchParams(result);
+		expect(params.get('panelKind')).toBe('signoz/TablePanel');
+		expect(params.get('variables')).toBe('{"env":"prod"}');
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/resolveVariableSelection.ts

@@ -1,183 +0,0 @@
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-} from './selectionTypes';
-import { ALL_SELECTED } from './variablesUrlState';
-
-/**
- * Single source of truth for "what value does this variable hold?", shared by the
- * three surfaces that used to each own a divergent copy of the rule:
- * - {@link resolveDefaultSelection} — the seed-time default (no options yet).
- * - {@link reconcileWithOptions} — the post-fetch reconcile (options known).
- * - {@link configuredDefaultValue} — the payload fallback when nothing is picked.
- *
- * Keeping them here means the variable bar, the fetch gate and the panel-query
- * payload can never disagree about a variable's default (the previous split
- * produced "bar shows ALL while the query omits the variable").
- */
-
-/** An "every option selected" (ALL) selection. */
-const ALL_SELECTION: VariableSelection = { value: null, allSelected: true };
-
-/** The `defaultValue` reduced to a single string, or undefined when unset. */
-function firstConfiguredDefault(model: VariableFormModel): string | undefined {
-	const def = model.defaultValue;
-	if (Array.isArray(def)) {
-		return def.length > 0 ? String(def[0]) : undefined;
-	}
-	if (typeof def === 'string' && def !== '') {
-		return def;
-	}
-	return undefined;
-}
-
-/** Whether the configured default marks the ALL sentinel. */
-function isAllDefault(def: VariableFormModel['defaultValue']): boolean {
-	return (
-		def === ALL_SELECTED ||
-		(Array.isArray(def) && def.length === 1 && def[0] === ALL_SELECTED)
-	);
-}
-
-function isValidSingle(
-	value: SelectedVariableValue,
-	options: string[],
-): boolean {
-	return (
-		!Array.isArray(value) &&
-		value !== '' &&
-		value !== null &&
-		value !== undefined &&
-		options.includes(String(value))
-	);
-}
-
-/** The configured default (or first option) as a fresh selection. */
-function fillDefault(
-	model: VariableFormModel,
-	options: string[],
-): VariableSelection {
-	const fallback = firstConfiguredDefault(model);
-	const initial = fallback && options.includes(fallback) ? fallback : options[0];
-	return {
-		value: model.multiSelect ? [initial] : initial,
-		allSelected: false,
-	};
-}
-
-/**
- * For an ALL selection, the value to materialize (or null when unchanged).
- * Dynamic ALL travels as the `__all__` wire sentinel and renders ALL from the
- * flag, so it needs no materialized value. Query/custom ALL must carry the full
- * option array (the payload builder cannot expand it) — keep it in sync.
- */
-function materializeAll(
-	model: VariableFormModel,
-	options: string[],
-	current: SelectedVariableValue,
-): VariableSelection | null {
-	if (!model.multiSelect || model.type === 'DYNAMIC') {
-		return null;
-	}
-	const alreadyFull =
-		Array.isArray(current) &&
-		current.length === options.length &&
-		current.every((c) => options.includes(String(c)));
-	return alreadyFull ? null : { value: options, allSelected: true };
-}
-
-/**
- * The seed-time default for a variable, before any options are fetched.
- * - TEXT: the configured default (`defaultValue` → `textValue`), else empty.
- * - CUSTOM/QUERY/DYNAMIC: the configured default; else ALL when allowAll is on;
- *   else a placeholder that {@link reconcileWithOptions} fills with the first
- *   option once the options resolve.
- */
-export function resolveDefaultSelection(
-	model: VariableFormModel,
-): VariableSelection {
-	if (model.type === 'TEXT') {
-		return {
-			value: firstConfiguredDefault(model) ?? model.textValue ?? '',
-			allSelected: false,
-		};
-	}
-
-	const def = model.defaultValue;
-	if (isAllDefault(def)) {
-		return ALL_SELECTION;
-	}
-	if (Array.isArray(def) && def.length > 0) {
-		return { value: def, allSelected: false };
-	}
-	if (typeof def === 'string' && def !== '') {
-		return { value: model.multiSelect ? [def] : def, allSelected: false };
-	}
-	if (model.multiSelect && model.showAllOption) {
-		return ALL_SELECTION;
-	}
-	return { value: model.multiSelect ? [] : '', allSelected: false };
-}
-
-/**
- * Reconciles a variable's current selection against its freshly-fetched options.
- * Returns the next selection, or null when nothing should change (a valid pick is
- * left untouched — local-first). Behaviour, in order:
- * - materialize ALL to the full option set (query/custom);
- * - keep a still-valid multi-select subset, dropping only invalid entries;
- * - otherwise auto-pick the default (or first option) so dependent variables and
- *   panels always resolve against a usable value.
- */
-export function reconcileWithOptions(
-	model: VariableFormModel,
-	current: VariableSelection,
-	options: string[],
-): VariableSelection | null {
-	if (options.length === 0) {
-		return null;
-	}
-
-	if (current.allSelected) {
-		return materializeAll(model, options, current.value);
-	}
-
-	if (
-		model.multiSelect &&
-		Array.isArray(current.value) &&
-		current.value.length > 0
-	) {
-		const valid = current.value.map(String).filter((c) => options.includes(c));
-		if (valid.length === current.value.length) {
-			return null;
-		}
-		return valid.length > 0
-			? { value: valid, allSelected: false }
-			: fillDefault(model, options);
-	}
-
-	if (!model.multiSelect && isValidSingle(current.value, options)) {
-		return null;
-	}
-	return fillDefault(model, options);
-}
-
-/**
- * The value to send for a variable when the user has made no selection yet
- * (the payload fallback). Mirrors the configured default only — an ALL-by-default
- * list variable resolves to `undefined` here (its concrete values are carried by
- * the materialized selection once options are known), so it is omitted until then
- * rather than sent wrong.
- */
-export function configuredDefaultValue(
-	model: VariableFormModel,
-): SelectedVariableValue | undefined {
-	if (model.type === 'TEXT') {
-		return firstConfiguredDefault(model) ?? model.textValue ?? undefined;
-	}
-	const def = model.defaultValue;
-	if (Array.isArray(def)) {
-		return def.length > 0 ? def : undefined;
-	}
-	return def || undefined;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionUtils.ts

@@ -1,4 +1,3 @@
-import type { VariableType } from '../DashboardSettings/Variables/variableFormModel';
 import type {
 	SelectedVariableValue,
 	VariableSelection,
@@ -20,32 +19,6 @@ export function isResolved(selection?: VariableSelection): boolean {
 	return value !== '' && value !== null && value !== undefined;
 }
 
-/**
- * Whether a selection carries a value usable when scheduling a dependent
- * variable/panel fetch. Unlike {@link isResolved}, a QUERY/CUSTOM ALL counts only
- * once materialized into the concrete array (an unmaterialized ALL isn't usable),
- * while a DYNAMIC ALL is usable immediately via the `__all__` sentinel.
- */
-export function hasUsableValue(
-	selection: VariableSelection | undefined,
-	type: VariableType | undefined,
-): boolean {
-	if (!selection) {
-		return false;
-	}
-	if (selection.allSelected) {
-		if (type === 'DYNAMIC') {
-			return true;
-		}
-		return Array.isArray(selection.value) && selection.value.length > 0;
-	}
-	const { value } = selection;
-	if (Array.isArray(value)) {
-		return value.length > 0;
-	}
-	return value !== '' && value !== null && value !== undefined;
-}
-
 /** Flatten the selection map into the `{ name: value }` payload a query expects. */
 export function selectionToPayload(
 	selection: VariableSelectionMap,

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/CustomSelector.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+
+import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableSelection } from '../selectionTypes';
+import { useAutoSelect } from '../useAutoSelect';
+import ValueSelector from './ValueSelector';
+
+interface CustomSelectorProps {
+	variable: VariableFormModel;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+	onAutoSelect: (selection: VariableSelection) => void;
+}
+
+/**
+ * Custom-variable options come from the comma-separated `customValue` (no fetch),
+ * but still auto-select a default/first option so the variable is never left blank.
+ */
+function CustomSelector({
+	variable,
+	selection,
+	onChange,
+	onAutoSelect,
+}: CustomSelectorProps): JSX.Element {
+	const options = useMemo(
+		() =>
+			sortValuesByOrder(
+				commaValuesParser(variable.customValue),
+				variable.sort,
+			).map(String),
+		[variable.customValue, variable.sort],
+	);
+
+	useAutoSelect(variable, options, selection, onAutoSelect);
+
+	return (
+		<ValueSelector
+			options={options}
+			multiSelect={variable.multiSelect}
+			showAllOption={variable.showAllOption}
+			selection={selection}
+			onChange={onChange}
+			testId={`variable-select-${variable.name}`}
+		/>
+	);
+}
+
+export default CustomSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/DynamicSelector.tsx

@@ -0,0 +1,140 @@
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from 'constants/queryCacheTime';
+import type { AppState } from 'store/reducers';
+import type { GlobalReducer } from 'types/reducer/globalTime';
+
+import {
+	signalForApi,
+	sortValuesByOrder,
+} from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
+import type {
+	VariableSelection,
+	VariableSelectionMap,
+} from '../selectionTypes';
+import { useAutoSelect } from '../useAutoSelect';
+import { useVariableFetchState } from '../useVariableFetchState';
+import ValueSelector from './ValueSelector';
+
+interface DynamicSelectorProps {
+	variable: VariableFormModel;
+	/** All variables + current selections, to scope options by sibling dynamics. */
+	variables: VariableFormModel[];
+	selections: VariableSelectionMap;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+	/** Batched auto-selection fill applied when options resolve. */
+	onAutoSelect: (selection: VariableSelection) => void;
+}
+
+/**
+ * Dynamic-variable options sourced from live telemetry field values for the
+ * chosen signal + attribute, scoped by the other dynamic variables' selections
+ * (so e.g. `pod` narrows to the chosen `namespace`). WHEN to fetch is owned by
+ * the runtime fetch engine: dynamics fetch together once the query variables have
+ * values, and refetch (via a `cycleId` bump) whenever any variable value changes.
+ */
+function DynamicSelector({
+	variable,
+	variables,
+	selections,
+	selection,
+	onChange,
+	onAutoSelect,
+}: DynamicSelectorProps): JSX.Element {
+	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const existingQuery = useMemo(
+		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
+		[variables, selections, variable.name],
+	);
+
+	const {
+		variableFetchCycleId,
+		isVariableFetching,
+		isVariableSettled,
+		isVariableWaiting,
+		hasVariableFetchedOnce,
+	} = useVariableFetchState(variable.name);
+	const onVariableFetchComplete = useDashboardStore(
+		(s) => s.onVariableFetchComplete,
+	);
+	const onVariableFetchFailure = useDashboardStore(
+		(s) => s.onVariableFetchFailure,
+	);
+
+	const { data, isFetching, error, refetch } = useQuery(
+		[
+			'dashboard-variable-dynamic',
+			variable.name,
+			variable.dynamicSignal,
+			variable.dynamicAttribute,
+			existingQuery,
+			minTime,
+			maxTime,
+			variableFetchCycleId,
+		],
+		() =>
+			getFieldValues(
+				signalForApi(variable.dynamicSignal),
+				variable.dynamicAttribute,
+				undefined,
+				minTime,
+				maxTime,
+				existingQuery || undefined,
+			),
+		{
+			enabled:
+				!!variable.dynamicAttribute &&
+				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
+			refetchOnWindowFocus: false,
+			// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+			onSettled: (_, error) =>
+				error
+					? onVariableFetchFailure(variable.name)
+					: onVariableFetchComplete(variable.name),
+		},
+	);
+
+	const options = useMemo(() => {
+		const payload = data?.data;
+		const values =
+			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
+		return sortValuesByOrder(values, variable.sort).map(String);
+	}, [data, variable.sort]);
+
+	useAutoSelect(variable, options, selection, onAutoSelect);
+
+	return (
+		<ValueSelector
+			options={options}
+			multiSelect={variable.multiSelect}
+			showAllOption={variable.showAllOption}
+			loading={isFetching || isVariableWaiting}
+			errorMessage={error ? (error as Error).message || null : null}
+			onRetry={(): void => {
+				void refetch();
+			}}
+			selection={selection}
+			onChange={onChange}
+			testId={`variable-select-${variable.name}`}
+		/>
+	);
+}
+
+export default DynamicSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/QuerySelector.tsx

@@ -0,0 +1,127 @@
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from 'constants/queryCacheTime';
+import type { AppState } from 'store/reducers';
+import type { GlobalReducer } from 'types/reducer/globalTime';
+
+import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import type {
+	VariableSelection,
+	VariableSelectionMap,
+} from '../selectionTypes';
+import { selectionToPayload } from '../selectionUtils';
+import { useAutoSelect } from '../useAutoSelect';
+import { useVariableFetchState } from '../useVariableFetchState';
+import ValueSelector from './ValueSelector';
+
+interface QuerySelectorProps {
+	variable: VariableFormModel;
+	/** All current selections, fed to the query as `{ name: value }`. */
+	selections: VariableSelectionMap;
+	selection: VariableSelection;
+	onChange: (selection: VariableSelection) => void;
+	/** Batched auto-selection fill applied when options resolve. */
+	onAutoSelect: (selection: VariableSelection) => void;
+}
+
+/**
+ * Query-driven options. WHEN to fetch is owned by the runtime fetch engine
+ * (`variableFetchSlice`): the query is `enabled` while this variable is fetching
+ * (or settled-after-a-first-fetch, so a cycle bump re-runs it), and the engine's
+ * per-variable `cycleId` keys the request — so a parent's value change refetches
+ * only the dependent variables, in dependency order. The current selections feed
+ * the request payload but are deliberately NOT in the key (V1 parity).
+ */
+function QuerySelector({
+	variable,
+	selections,
+	selection,
+	onChange,
+	onAutoSelect,
+}: QuerySelectorProps): JSX.Element {
+	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+	const payload = useMemo(() => selectionToPayload(selections), [selections]);
+
+	const {
+		variableFetchCycleId,
+		isVariableFetching,
+		isVariableSettled,
+		isVariableWaiting,
+		hasVariableFetchedOnce,
+	} = useVariableFetchState(variable.name);
+	const onVariableFetchComplete = useDashboardStore(
+		(s) => s.onVariableFetchComplete,
+	);
+	const onVariableFetchFailure = useDashboardStore(
+		(s) => s.onVariableFetchFailure,
+	);
+
+	const { data, isFetching, error, refetch } = useQuery(
+		[
+			'dashboard-variable',
+			variable.name,
+			variable.queryValue,
+			minTime,
+			maxTime,
+			variableFetchCycleId,
+		],
+		() =>
+			dashboardVariablesQuery({
+				query: variable.queryValue,
+				variables: payload,
+			}),
+		{
+			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
+			refetchOnWindowFocus: false,
+			// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+			onSettled: (_, error) =>
+				error
+					? onVariableFetchFailure(variable.name)
+					: onVariableFetchComplete(variable.name),
+		},
+	);
+
+	const options = useMemo(() => {
+		if (!data || data.statusCode !== 200 || !data.payload) {
+			return [] as string[];
+		}
+		return sortValuesByOrder(
+			data.payload.variableValues ?? [],
+			variable.sort,
+		).map(String);
+	}, [data, variable.sort]);
+
+	useAutoSelect(variable, options, selection, onAutoSelect);
+
+	return (
+		<ValueSelector
+			options={options}
+			multiSelect={variable.multiSelect}
+			showAllOption={variable.showAllOption}
+			loading={isFetching || isVariableWaiting}
+			errorMessage={error ? (error as Error).message || null : null}
+			onRetry={(): void => {
+				void refetch();
+			}}
+			selection={selection}
+			onChange={onChange}
+			testId={`variable-select-${variable.name}`}
+		/>
+	);
+}
+
+export default QuerySelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/VariableValueControl.tsx

@@ -1,59 +0,0 @@
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-import { useVariableOptions } from './useVariableOptions';
-
-interface VariableValueControlProps {
-	variable: VariableFormModel;
-	/** All variables (Dynamic scopes its options by sibling selections). */
-	variables: VariableFormModel[];
-	/** All current selections (fed to the Query request payload). */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-	/** Batched auto-selection fill applied when options resolve. */
-	onAutoSelect: (selection: VariableSelection) => void;
-}
-
-/**
- * The single value picker for QUERY / CUSTOM / DYNAMIC variables. Options + fetch
- * state come from {@link useVariableOptions}; this component only reconciles the
- * selection against the options and renders — the view is decoupled from how the
- * options are sourced (Container/Presentational).
- */
-function VariableValueControl({
-	variable,
-	variables,
-	selections,
-	selection,
-	onChange,
-	onAutoSelect,
-}: VariableValueControlProps): JSX.Element {
-	const { options, loading, errorMessage, onRetry } = useVariableOptions(
-		variable,
-		variables,
-		selections,
-	);
-
-	useAutoSelect(variable, options, selection, onAutoSelect);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={loading}
-			errorMessage={errorMessage}
-			onRetry={onRetry}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default VariableValueControl;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/useVariableOptions.ts

@@ -1,213 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import {
-	DASHBOARD_CACHE_TIME,
-	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-} from 'constants/queryCacheTime';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import {
-	signalForApi,
-	sortValuesByOrder,
-} from '../../DashboardSettings/Variables/variableFormModel';
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
-import { useDashboardStore } from '../../store/useDashboardStore';
-import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
-import type { VariableSelectionMap } from '../selectionTypes';
-import { selectionToPayload } from '../selectionUtils';
-import { useVariableFetchState } from '../useVariableFetchState';
-
-export interface VariableOptions {
-	options: string[];
-	loading: boolean;
-	errorMessage: string | null;
-	onRetry?: () => void;
-}
-
-/**
- * The option list for a list variable (QUERY / CUSTOM / DYNAMIC), plus its loading
- * and error state — the single place the three list types get their options.
- * QUERY/DYNAMIC fetch via react-query (WHEN owned by the fetch engine: `enabled`
- * gated on the variable's fetch state, keyed by `cycleId`, never by the current
- * selections or time — those feed the fetchers (which read the current time at
- * call), so the debounced fetch cycle drives refetches). CUSTOM is parsed
- * synchronously from its comma list. TEXT never reaches here (it has no options).
- */
-export function useVariableOptions(
-	variable: VariableFormModel,
-	variables: VariableFormModel[],
-	selections: VariableSelectionMap,
-): VariableOptions {
-	const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-	// Bound cache churn: 0 under auto-refresh so entries don't pile up (V1 parity).
-	const cacheTime = isAutoRefreshDisabled
-		? DASHBOARD_CACHE_TIME
-		: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED;
-	const {
-		variableFetchCycleId,
-		isVariableFetching,
-		isVariableSettled,
-		isVariableWaiting,
-		hasVariableFetchedOnce,
-	} = useVariableFetchState(variable.name);
-	const onVariableFetchComplete = useDashboardStore(
-		(s) => s.onVariableFetchComplete,
-	);
-	const onVariableFetchFailure = useDashboardStore(
-		(s) => s.onVariableFetchFailure,
-	);
-	const setVariableResolvedEmpty = useDashboardStore(
-		(s) => s.setVariableResolvedEmpty,
-	);
-
-	// Fetch while this variable is actively fetching, or once settled after a first
-	// fetch (so a `cycleId` bump re-runs it). Combined with a per-type guard below.
-	const canFetch =
-		isVariableFetching || (isVariableSettled && hasVariableFetchedOnce);
-
-	// QUERY — options from the test-run endpoint; selections feed the payload, not the key.
-	const payload = useMemo(() => selectionToPayload(selections), [selections]);
-	const queryResult = useQuery(
-		[
-			'dashboard-variable',
-			variable.name,
-			variable.queryValue,
-			variableFetchCycleId,
-		],
-		() =>
-			dashboardVariablesQuery({
-				query: variable.queryValue,
-				variables: payload,
-			}),
-		{
-			enabled: variable.type === 'QUERY' && canFetch,
-			refetchOnWindowFocus: false,
-			cacheTime,
-			onSettled: (_, error) =>
-				error
-					? onVariableFetchFailure(variable.name)
-					: onVariableFetchComplete(variable.name),
-		},
-	);
-
-	// DYNAMIC — telemetry field values scoped by sibling dynamics via `existingQuery`
-	// (fed to the fetcher only, not the key — see DynamicSelector history).
-	const existingQuery = useMemo(
-		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
-		[variables, selections, variable.name],
-	);
-	const dynamicResult = useQuery(
-		[
-			'dashboard-variable-dynamic',
-			variable.name,
-			variable.dynamicSignal,
-			variable.dynamicAttribute,
-			variableFetchCycleId,
-		],
-		() =>
-			getFieldValues(
-				signalForApi(variable.dynamicSignal),
-				variable.dynamicAttribute,
-				undefined,
-				minTime,
-				maxTime,
-				existingQuery || undefined,
-			),
-		{
-			enabled:
-				variable.type === 'DYNAMIC' && !!variable.dynamicAttribute && canFetch,
-			refetchOnWindowFocus: false,
-			cacheTime,
-			onSettled: (_, error) =>
-				error
-					? onVariableFetchFailure(variable.name)
-					: onVariableFetchComplete(variable.name),
-		},
-	);
-
-	const queryOptions = useMemo(() => {
-		const data = queryResult.data;
-		if (!data || data.statusCode !== 200 || !data.payload) {
-			return [] as string[];
-		}
-		return sortValuesByOrder(
-			data.payload.variableValues ?? [],
-			variable.sort,
-		).map(String);
-	}, [queryResult.data, variable.sort]);
-
-	const dynamicOptions = useMemo(() => {
-		const data = dynamicResult.data?.data;
-		const values = data?.normalizedValues ?? data?.values?.StringValues ?? [];
-		return sortValuesByOrder(values, variable.sort).map(String);
-	}, [dynamicResult.data, variable.sort]);
-
-	const customOptions = useMemo(
-		() =>
-			variable.type === 'CUSTOM'
-				? sortValuesByOrder(
-						commaValuesParser(variable.customValue),
-						variable.sort,
-					).map(String)
-				: ([] as string[]),
-		[variable.type, variable.customValue, variable.sort],
-	);
-
-	// Flag a variable that settled with zero options so dependent panels fall through
-	// to "no data" instead of waiting forever. hasFetchedOnce excludes the pre-fetch state.
-	const effectiveOptions =
-		variable.type === 'DYNAMIC' ? dynamicOptions : queryOptions;
-	useEffect(() => {
-		if (variable.type !== 'QUERY' && variable.type !== 'DYNAMIC') {
-			return;
-		}
-		setVariableResolvedEmpty(
-			variable.name,
-			hasVariableFetchedOnce &&
-				!isVariableFetching &&
-				effectiveOptions.length === 0,
-		);
-	}, [
-		variable.type,
-		variable.name,
-		hasVariableFetchedOnce,
-		isVariableFetching,
-		effectiveOptions.length,
-		setVariableResolvedEmpty,
-	]);
-
-	if (variable.type === 'CUSTOM') {
-		return { options: customOptions, loading: false, errorMessage: null };
-	}
-	if (variable.type === 'DYNAMIC') {
-		return {
-			options: dynamicOptions,
-			loading: dynamicResult.isFetching || isVariableWaiting,
-			errorMessage: dynamicResult.error
-				? (dynamicResult.error as Error).message || null
-				: null,
-			onRetry: (): void => {
-				void dynamicResult.refetch();
-			},
-		};
-	}
-	return {
-		options: queryOptions,
-		loading: queryResult.isFetching || isVariableWaiting,
-		errorMessage: queryResult.error
-			? (queryResult.error as Error).message || null
-			: null,
-		onRetry: (): void => {
-			void queryResult.refetch();
-		},
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useAutoSelect.ts

@@ -1,14 +1,61 @@
 import { useEffect } from 'react';
 
 import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
-import { reconcileWithOptions } from './resolveVariableSelection';
-import type { VariableSelection } from './selectionTypes';
+import type {
+	SelectedVariableValue,
+	VariableSelection,
+} from './selectionTypes';
+
+/** The variable's default (or first option) as a fresh selection. */
+function fillDefault(
+	variable: VariableFormModel,
+	options: string[],
+): VariableSelection {
+	const dv = variable.defaultValue;
+	const fallback = Array.isArray(dv) ? dv[0] : dv;
+	const initial = fallback && options.includes(fallback) ? fallback : options[0];
+	return {
+		value: variable.multiSelect ? [initial] : initial,
+		allSelected: false,
+	};
+}
+
+/** For an all-selected variable, the value to materialize (or null if unchanged). */
+function reconcileAllSelected(
+	variable: VariableFormModel,
+	options: string[],
+	current: SelectedVariableValue,
+): VariableSelection | null {
+	// Dynamic ALL travels as the `__all__` wire sentinel and shows ALL from the
+	// flag, so it needs no materialized value. Query/custom ALL must carry the full
+	// option array (the payload builder can't expand it) — keep it in sync.
+	if (!variable.multiSelect || variable.type === 'DYNAMIC') {
+		return null;
+	}
+	const alreadyFull =
+		Array.isArray(current) &&
+		current.length === options.length &&
+		current.every((c) => options.includes(String(c)));
+	return alreadyFull ? null : { value: options, allSelected: true };
+}
+
+function isValidSingle(
+	current: SelectedVariableValue,
+	options: string[],
+): boolean {
+	return (
+		!Array.isArray(current) &&
+		current !== '' &&
+		current !== null &&
+		current !== undefined &&
+		options.includes(String(current))
+	);
+}
 
 /**
- * Reconciles a variable's selection with its freshly-fetched options and fires
- * `onAutoSelect` only when the value must change. The reconcile rule lives in
- * {@link reconcileWithOptions} (shared with seed + payload defaulting) so the bar
- * and the panel query can never disagree about a variable's default.
+ * Reconciles a variable's selection with its freshly-fetched options: materialize
+ * ALL to the full set, keep a still-valid multi-select subset, else auto-pick the
+ * default (or first option) so dependent children always have a usable value.
  */
 export function useAutoSelect(
 	variable: VariableFormModel,
@@ -17,10 +64,36 @@ export function useAutoSelect(
 	onAutoSelect: (selection: VariableSelection) => void,
 ): void {
 	useEffect(() => {
-		const next = reconcileWithOptions(variable, selection, options);
-		if (next) {
-			onAutoSelect(next);
+		if (options.length === 0) {
+			return;
 		}
+		const current = selection.value;
+
+		if (selection.allSelected) {
+			const next = reconcileAllSelected(variable, options, current);
+			if (next) {
+				onAutoSelect(next);
+			}
+			return;
+		}
+
+		if (variable.multiSelect && Array.isArray(current) && current.length > 0) {
+			const valid = current.map(String).filter((c) => options.includes(c));
+			if (valid.length === current.length) {
+				return;
+			}
+			onAutoSelect(
+				valid.length > 0
+					? { value: valid, allSelected: false }
+					: fillDefault(variable, options),
+			);
+			return;
+		}
+
+		if (!variable.multiSelect && isValidSingle(current, options)) {
+			return;
+		}
+		onAutoSelect(fillDefault(variable, options));
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [options]);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useSeedVariableSelection.ts

@@ -6,7 +6,6 @@ import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters'
 import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
 import { selectVariableValues } from '../store/slices/variableSelectionSlice';
 import { useDashboardStore } from '../store/useDashboardStore';
-import { resolveDefaultSelection } from './resolveVariableSelection';
 import type {
 	SelectedVariableValue,
 	VariableSelection,
@@ -18,6 +17,26 @@ import {
 } from './variableDependencies';
 import { ALL_SELECTED, variablesUrlParser } from './variablesUrlState';
 
+function defaultSelection(model: VariableFormModel): VariableSelection {
+	const def = model.defaultValue;
+	if (
+		def === ALL_SELECTED ||
+		(Array.isArray(def) && def.length === 1 && def[0] === ALL_SELECTED)
+	) {
+		return { value: null, allSelected: true };
+	}
+	if (Array.isArray(def) && def.length > 0) {
+		return { value: def, allSelected: false };
+	}
+	if (typeof def === 'string' && def !== '') {
+		return { value: model.multiSelect ? [def] : def, allSelected: false };
+	}
+	if (model.multiSelect && model.showAllOption) {
+		return { value: null, allSelected: true };
+	}
+	return { value: model.multiSelect ? [] : '', allSelected: false };
+}
+
 // The `__ALL__` sentinel only means "ALL" for variables that support it — a
 // legitimate value of "__ALL__" (e.g. a text var) is taken literally.
 function fromUrlValue(
@@ -69,20 +88,12 @@ export function useSeedVariableSelection(
 		const seeded: VariableSelectionMap = {};
 		variables.forEach((variable) => {
 			const urlValue = urlValues?.[variable.name];
-			const stored = selection[variable.name];
 			if (urlValue !== undefined) {
-				const fromUrl = fromUrlValue(urlValue, variable);
-				// When the URL carries only the ALL sentinel but the store already holds
-				// the materialized full-option array, reuse it — avoids the re-fetch +
-				// re-materialize round-trip (and its dependent-refetch cascade) on load.
-				seeded[variable.name] =
-					fromUrl.allSelected && stored?.allSelected && Array.isArray(stored.value)
-						? stored
-						: fromUrl;
-			} else if (stored) {
-				seeded[variable.name] = stored;
+				seeded[variable.name] = fromUrlValue(urlValue, variable);
+			} else if (selection[variable.name]) {
+				seeded[variable.name] = selection[variable.name];
 			} else {
-				seeded[variable.name] = resolveDefaultSelection(variable);
+				seeded[variable.name] = defaultSelection(variable);
 			}
 		});
 		setVariableValues(dashboardId, seeded);
@@ -105,10 +116,8 @@ export function useSeedVariableSelection(
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- seed once per dashboard/variable set; the URL is read as of that moment
 	}, [dashboardId, variables]);
 
-	// Always init the context (even with no variables) so panels can tell "ready, none"
-	// from "not ready yet"; also clears it when the last variable is removed.
 	useEffect(() => {
-		if (!dashboardId) {
+		if (!dashboardId || variables.length === 0) {
 			return;
 		}
 		const names = variables

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection.ts

@@ -11,14 +11,9 @@ import { selectVariableValues } from '../store/slices/variableSelectionSlice';
 import { useDashboardStore } from '../store/useDashboardStore';
 import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
 import { useSeedVariableSelection } from './useSeedVariableSelection';
+import { doAllQueryVariablesHaveValues } from './variableDependencies';
 import { ALL_SELECTED, variablesUrlParser } from './variablesUrlState';
 
-/**
- * Debounce for the fetch cycle, so the on-load time-range settle (default → saved)
- * and rapid time-picker changes collapse into one cycle instead of double-fetching.
- */
-const FETCH_CYCLE_DEBOUNCE_MS = 250;
-
 interface UseVariableSelection {
 	variables: VariableFormModel[];
 	selection: VariableSelectionMap;
@@ -53,10 +48,9 @@ export function useVariableSelection(
 		(s) => s.enqueueDescendantsBatch,
 	);
 
-	const { minTime, maxTime, selectedTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 
 	// Latest selection, read by the fetch-cycle effect without subscribing to it
 	// (so a value change doesn't re-trigger a full fetch cycle).
@@ -68,39 +62,20 @@ export function useVariableSelection(
 		variablesUrlParser.withOptions({ history: 'replace' }),
 	);
 
-	// Start a full fetch cycle on load / dependency-order / time change, debounced so
-	// the initial time-window settle (and rapid time changes) collapse into ONE cycle
-	// instead of double-fetching every variable. Variables stay disabled until the
-	// cycle runs, so the transient window is never fetched. A value change instead
-	// goes through `enqueueDescendants` — immediate, not this effect.
+	// Start a full fetch cycle on load / dependency-order / time change. A value
+	// change instead goes through `enqueueDescendants`, not this effect.
 	const orderKey = `${fetchContext.queryVariableOrder.join(
 		',',
 	)}|${fetchContext.dynamicVariableOrder.join(',')}`;
-	// Key on the time *selection*, not raw min/max: a relative range recomputes those
-	// as `now` drifts, which shouldn't refetch. The fetchers still read current time.
-	const timeKey =
-		selectedTime === 'custom' ? `custom:${minTime}-${maxTime}` : selectedTime;
-	// A re-mount re-runs this effect with the same key, which enqueueFetchAll skips.
-	const fetchCycleKey = `${dashboardId}|${orderKey}|${timeKey}`;
-	const fetchCycleTimer = useRef<ReturnType<typeof setTimeout>>();
 	useEffect(() => {
 		if (!dashboardId || variables.length === 0) {
-			return undefined;
+			return;
 		}
-		if (fetchCycleTimer.current) {
-			clearTimeout(fetchCycleTimer.current);
-		}
-		fetchCycleTimer.current = setTimeout(
-			() => enqueueFetchAll(fetchCycleKey),
-			FETCH_CYCLE_DEBOUNCE_MS,
+		enqueueFetchAll(
+			doAllQueryVariablesHaveValues(variables, selectionRef.current),
 		);
-		return (): void => {
-			if (fetchCycleTimer.current) {
-				clearTimeout(fetchCycleTimer.current);
-			}
-		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboardId, fetchCycleKey]);
+	}, [dashboardId, orderKey, minTime, maxTime]);
 
 	const setSelection = useCallback(
 		(name: string, next: VariableSelection): void => {

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/variableDependencies.ts

@@ -4,6 +4,8 @@ import type {
 	VariableFormModel,
 	VariableType,
 } from '../DashboardSettings/Variables/variableFormModel';
+import type { VariableSelectionMap } from './selectionTypes';
+import { isResolved } from './selectionUtils';
 
 /**
  * Inter-variable dependency graph for runtime selection. A QUERY variable
@@ -240,3 +242,17 @@ export function deriveFetchContext(
 		dynamicVariableOrder,
 	};
 }
+
+/**
+ * Whether every QUERY variable already has a usable selection — decides at load
+ * time whether dynamic variables may fetch immediately or must wait for the
+ * query variables to settle first (V1 parity).
+ */
+export function doAllQueryVariablesHaveValues(
+	variables: VariableFormModel[],
+	selection: VariableSelectionMap,
+): boolean {
+	return variables
+		.filter((v) => v.type === 'QUERY')
+		.every((v) => isResolved(selection[v.name]));
+}