chore: added 3 cases handling for all list apis

conf/example.yaml

@@ -320,4 +320,3 @@ user:
     # The name of the organization to create or look up for the root user.
     org:
       name: default
-      id: 00000000-0000-0000-0000-000000000000

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -50,6 +50,7 @@ export interface HostListResponse {
 		total: number;
 		sentAnyHostMetricsData: boolean;
 		isSendingK8SAgentMetrics: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sClustersList.ts

@@ -37,8 +37,8 @@ export interface K8sClustersListResponse {
 		records: K8sClustersData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sDaemonSetsList.ts

@@ -43,8 +43,8 @@ export interface K8sDaemonSetsListResponse {
 		records: K8sDaemonSetsData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts

@@ -43,8 +43,8 @@ export interface K8sDeploymentsListResponse {
 		records: K8sDeploymentsData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sJobsList.ts

@@ -45,8 +45,8 @@ export interface K8sJobsListResponse {
 		records: K8sJobsData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

@@ -35,8 +35,8 @@ export interface K8sNamespacesListResponse {
 		records: K8sNamespacesData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -38,8 +38,8 @@ export interface K8sNodesListResponse {
 		records: K8sNodesData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -66,8 +66,8 @@ export interface K8sPodsListResponse {
 		records: K8sPodsData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sVolumesList.ts

@@ -44,8 +44,8 @@ export interface K8sVolumesListResponse {
 		records: K8sVolumesData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/infraMonitoring/getsK8sStatefulSetsList.ts

@@ -42,8 +42,8 @@ export interface K8sStatefulSetsListResponse {
 		records: K8sStatefulSetsData[];
 		groups: null;
 		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
+		sentAnyMetricsData: boolean;
+		endTimeBeforeRetention: boolean;
 	};
 }
 

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -0,0 +1,26 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

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

@@ -11,6 +11,7 @@ import {
 	startCompletion,
 } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
@@ -563,7 +564,15 @@ function QuerySearch({
 		const lastPos = lastPosRef.current;
 
 		if (newPos.line !== lastPos.line || newPos.ch !== lastPos.ch) {
-			setCursorPos(newPos);
+			setCursorPos((lastPos) => {
+				if (newPos.ch !== lastPos.ch && newPos.ch === 0) {
+					Sentry.captureEvent({
+						message: `Cursor jumped to start of line from ${lastPos.ch} to ${newPos.ch}`,
+						level: 'warning',
+					});
+				}
+				return newPos;
+			});
 			lastPosRef.current = newPos;
 
 			if (doc) {

frontend/src/components/ValueGraph/index.tsx

@@ -40,7 +40,6 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
-	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -88,7 +87,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
 
 	return (
 		<div
@@ -156,7 +155,6 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
-	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,10 +1,9 @@
-import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function doesValueSatisfyThreshold(
+function compareThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
-	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -12,14 +11,31 @@ function doesValueSatisfyThreshold(
 	) {
 		return false;
 	}
+	switch (threshold.thresholdOperator) {
+		case '>':
+			return rawValue > threshold.thresholdValue;
+		case '>=':
+			return rawValue >= threshold.thresholdValue;
+		case '<':
+			return rawValue < threshold.thresholdValue;
+		case '<=':
+			return rawValue <= threshold.thresholdValue;
+		case '=':
+			return rawValue === threshold.thresholdValue;
+		default:
+			return false;
+	}
+}
 
-	return evaluateThresholdWithConvertedValue(
-		rawValue,
-		threshold.thresholdValue,
-		threshold.thresholdOperator,
-		threshold.thresholdUnit,
-		yAxisUnit,
-	);
+function extractNumbersFromString(inputString: string): number[] {
+	const regex = /[+-]?\d+(\.\d+)?/g;
+	const matches = inputString.match(regex);
+
+	if (matches) {
+		return matches.map(Number);
+	}
+
+	return [];
 }
 
 function getHighestPrecedenceThreshold(
@@ -44,32 +60,21 @@ function getHighestPrecedenceThreshold(
 	return highestPrecedenceThreshold;
 }
 
-function extractNumbersFromString(inputString: string): number[] {
-	const regex = /[+-]?\d+(\.\d+)?/g;
-	const matches = inputString.match(regex);
-
-	if (matches) {
-		return matches.map(Number);
-	}
-
-	return [];
-}
-
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
-	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
-	const matchingThresholds = thresholds.filter((threshold) => {
-		const numbers = extractNumbersFromString(rawValue.toString());
-		if (numbers.length === 0) {
-			return false;
-		}
-		return doesValueSatisfyThreshold(numbers[0], threshold, yAxisUnit);
-	});
+	const matchingThresholds = thresholds.filter((threshold) =>
+		compareThreshold(
+			extractNumbersFromString(
+				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
+			)[0],
+			threshold,
+		),
+	);
 
 	if (matchingThresholds.length === 0) {
 		return {

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -22,8 +22,6 @@ function YAxisUnitSelector({
 	'data-testid': dataTestId,
 	source,
 	initialValue,
-	categoriesOverride,
-	containerClassName,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
@@ -68,14 +66,10 @@ function YAxisUnitSelector({
 		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
-	const categoriesToRender = useMemo(() => {
-		return categoriesOverride || getYAxisCategories(source);
-	}, [categoriesOverride, source]);
+	const categories = getYAxisCategories(source);
 
 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className="y-axis-unit-selector-component">
 			<Select
 				showSearch
 				value={universalUnit}
@@ -96,7 +90,7 @@ function YAxisUnitSelector({
 				data-testid={dataTestId}
 				allowClear
 			>
-				{categoriesToRender.map((category) => (
+				{categories.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
 							<Select.Option key={unit.id} value={unit.id}>

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

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { YAxisCategoryNames } from '../constants';
-import { UniversalYAxisUnit, YAxisSource } from '../types';
+import { YAxisSource } from '../types';
 import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
@@ -124,34 +123,4 @@ describe('YAxisUnitSelector', () => {
 		const warningIcon = screen.queryByLabelText('warning');
 		expect(warningIcon).not.toBeInTheDocument();
 	});
-
-	it('uses categories override to render custom units', () => {
-		const customCategories = [
-			{
-				name: YAxisCategoryNames.Data,
-				units: [
-					{
-						id: UniversalYAxisUnit.BYTES,
-						name: 'Custom Bytes (B)',
-					},
-				],
-			},
-		];
-
-		render(
-			<YAxisUnitSelector
-				value=""
-				onChange={mockOnChange}
-				source={YAxisSource.ALERTS}
-				categoriesOverride={customCategories}
-			/>,
-		);
-
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
-
-		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
-		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
-	});
 });

frontend/src/components/YAxisUnitSelector/types.ts

@@ -9,8 +9,6 @@ export interface YAxisUnitSelectorProps {
 	'data-testid'?: string;
 	source: YAxisSource;
 	initialValue?: string;
-	categoriesOverride?: YAxisCategory[];
-	containerClassName?: string;
 }
 
 export enum UniversalYAxisUnit {

frontend/src/container/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-export function evaluateThresholdWithConvertedValue(
+function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,7 +99,6 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
-					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -14,12 +14,93 @@ import { InfraMonitoringEvents } from 'constants/events';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
+	EmptyOrLoadingViewProps,
 	formatDataForTable,
 	getHostsListColumns,
 	HostRowData,
 	HostsListTableProps,
 } from './utils';
 
+function EmptyOrLoadingView(
+	viewState: EmptyOrLoadingViewProps,
+): React.ReactNode {
+	const { isError, errorMessage } = viewState;
+	if (isError) {
+		return <Typography>{errorMessage || 'Something went wrong'}</Typography>;
+	}
+	if (viewState.showHostsEmptyState) {
+		return (
+			<HostsEmptyOrIncorrectMetrics
+				noData={!viewState.sentAnyHostMetricsData}
+				incorrectData={viewState.isSendingIncorrectK8SAgentMetrics}
+			/>
+		);
+	}
+	if (viewState.showEndTimeBeforeRetentionMessage) {
+		return (
+			<div className="hosts-empty-state-container">
+				<div className="hosts-empty-state-container-content">
+					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+					<div className="no-hosts-message">
+						<Typography.Title level={5} className="no-hosts-message-title">
+							Queried time range is before earliest host metrics
+						</Typography.Title>
+						<Typography.Text className="no-hosts-message-text">
+							Your requested end time is earlier than the earliest detected time of
+							host metrics data, please adjust your end time.
+						</Typography.Text>
+					</div>
+				</div>
+			</div>
+		);
+	}
+	if (viewState.showNoRecordsInSelectedTimeRangeMessage) {
+		return (
+			<div className="no-filtered-hosts-message-container">
+				<div className="no-filtered-hosts-message-content">
+					<img
+						src="/Icons/emptyState.svg"
+						alt="thinking-emoji"
+						className="empty-state-svg"
+					/>
+					<Typography.Title level={5} className="no-filtered-hosts-title">
+						No host metrics found
+					</Typography.Title>
+					<Typography.Text className="no-filtered-hosts-message">
+						No host metrics in the selected time range and filters. Please adjust your
+						time range or filters.
+					</Typography.Text>
+				</div>
+			</div>
+		);
+	}
+	if (viewState.showTableLoadingState) {
+		return (
+			<div className="hosts-list-loading-state">
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+			</div>
+		);
+	}
+	return null;
+}
+
 export default function HostsListTable({
 	isLoading,
 	isFetching,
@@ -46,6 +127,11 @@ export default function HostsListTable({
 		[data],
 	);
 
+	const endTimeBeforeRetention = useMemo(
+		() => data?.payload?.data?.endTimeBeforeRetention || false,
+		[data],
+	);
+
 	const formattedHostMetricsData = useMemo(
 		() => formatDataForTable(hostMetricsData),
 		[hostMetricsData],
@@ -84,12 +170,6 @@ export default function HostsListTable({
 		});
 	};
 
-	const showNoFilteredHostsMessage =
-		!isFetching &&
-		!isLoading &&
-		formattedHostMetricsData.length === 0 &&
-		filters.items.length > 0;
-
 	const showHostsEmptyState =
 		!isFetching &&
 		!isLoading &&
@@ -97,63 +177,36 @@ export default function HostsListTable({
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
 		!filters.items.length;
 
+	const showEndTimeBeforeRetentionMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
+		endTimeBeforeRetention &&
+		!filters.items.length;
+
+	const showNoRecordsInSelectedTimeRangeMessage =
+		!isFetching &&
+		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
+		!showEndTimeBeforeRetentionMessage &&
+		!showHostsEmptyState;
+
 	const showTableLoadingState =
 		(isLoading || isFetching) && formattedHostMetricsData.length === 0;
 
-	if (isError) {
-		return <Typography>{data?.error || 'Something went wrong'}</Typography>;
-	}
+	const emptyOrLoadingView = EmptyOrLoadingView({
+		isError,
+		errorMessage: data?.error ?? '',
+		showHostsEmptyState,
+		sentAnyHostMetricsData,
+		isSendingIncorrectK8SAgentMetrics,
+		showEndTimeBeforeRetentionMessage,
+		showNoRecordsInSelectedTimeRangeMessage,
+		showTableLoadingState,
+	});
 
-	if (showHostsEmptyState) {
-		return (
-			<HostsEmptyOrIncorrectMetrics
-				noData={!sentAnyHostMetricsData}
-				incorrectData={isSendingIncorrectK8SAgentMetrics}
-			/>
-		);
-	}
-
-	if (showNoFilteredHostsMessage) {
-		return (
-			<div className="no-filtered-hosts-message-container">
-				<div className="no-filtered-hosts-message-content">
-					<img
-						src="/Icons/emptyState.svg"
-						alt="thinking-emoji"
-						className="empty-state-svg"
-					/>
-
-					<Typography.Text className="no-filtered-hosts-message">
-						This query had no results. Edit your query and try again!
-					</Typography.Text>
-				</div>
-			</div>
-		);
-	}
-
-	if (showTableLoadingState) {
-		return (
-			<div className="hosts-list-loading-state">
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-				<Skeleton.Input
-					className="hosts-list-loading-state-item"
-					size="large"
-					block
-					active
-				/>
-			</div>
-		);
+	if (emptyOrLoadingView) {
+		return <>{emptyOrLoadingView}</>;
 	}
 
 	return (

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListTable.test.tsx

@@ -1,12 +1,16 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { render, screen } from '@testing-library/react';
+import { HostData, HostListResponse } from 'api/infraMonitoring/getHostLists';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import HostsListTable from '../HostsListTable';
+import { HostsListTableProps } from '../utils';
 
 const EMPTY_STATE_CONTAINER_CLASS = '.hosts-empty-state-container';
 
-describe('HostsListTable', () => {
-	const mockHost = {
+const createMockHost = (): HostData =>
+	({
 		hostName: 'test-host-1',
 		active: true,
 		cpu: 0.75,
@@ -14,20 +18,46 @@ describe('HostsListTable', () => {
 		wait: 0.03,
 		load15: 1.5,
 		os: 'linux',
-	};
+		cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
+		memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
+		waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
+		load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
+	} as HostData);
 
-	const mockTableData = {
+const createMockTableData = (
+	overrides: Partial<HostListResponse['data']> = {},
+): SuccessResponse<HostListResponse> => {
+	const mockHost = createMockHost();
+	return {
+		statusCode: 200,
+		message: 'Success',
+		error: null,
 		payload: {
+			status: 'success',
 			data: {
-				hosts: [mockHost],
+				type: 'list',
+				records: [mockHost],
+				groups: null,
+				total: 1,
+				sentAnyHostMetricsData: true,
+				isSendingK8SAgentMetrics: false,
+				endTimeBeforeRetention: false,
+				...overrides,
 			},
 		},
 	};
+};
+
+describe('HostsListTable', () => {
+	const mockHost = createMockHost();
+	const mockTableData = createMockTableData();
+
 	const mockOnHostClick = jest.fn();
 	const mockSetCurrentPage = jest.fn();
 	const mockSetOrderBy = jest.fn();
 	const mockSetPageSize = jest.fn();
-	const mockProps = {
+
+	const mockProps: HostsListTableProps = {
 		isLoading: false,
 		isError: false,
 		isFetching: false,
@@ -43,7 +73,7 @@ describe('HostsListTable', () => {
 		pageSize: 10,
 		setOrderBy: mockSetOrderBy,
 		setPageSize: mockSetPageSize,
-	} as any;
+	};
 
 	it('renders loading state if isLoading is true and tableData is empty', () => {
 		const { container } = render(
@@ -51,7 +81,7 @@ describe('HostsListTable', () => {
 				{...mockProps}
 				isLoading
 				hostMetricsData={[]}
-				tableData={{ payload: { data: { hosts: [] } } }}
+				tableData={createMockTableData({ records: [] })}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
@@ -63,7 +93,7 @@ describe('HostsListTable', () => {
 				{...mockProps}
 				isFetching
 				hostMetricsData={[]}
-				tableData={{ payload: { data: { hosts: [] } } }}
+				tableData={createMockTableData({ records: [] })}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
@@ -74,19 +104,56 @@ describe('HostsListTable', () => {
 		expect(screen.getByText('Something went wrong')).toBeTruthy();
 	});
 
+	it('renders "Something went wrong" fallback when isError is true and error message is empty', () => {
+		const tableDataWithEmptyError: ErrorResponse = {
+			statusCode: 500,
+			payload: null,
+			error: '',
+			message: null,
+		};
+		render(
+			<HostsListTable
+				{...mockProps}
+				isError
+				hostMetricsData={[]}
+				tableData={tableDataWithEmptyError}
+			/>,
+		);
+		expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+	});
+
+	it('renders custom error message when isError is true and error message is provided', () => {
+		const customErrorMessage = 'Failed to fetch host metrics';
+		const tableDataWithError: ErrorResponse = {
+			statusCode: 500,
+			payload: null,
+			error: customErrorMessage,
+			message: null,
+		};
+		render(
+			<HostsListTable
+				{...mockProps}
+				isError
+				hostMetricsData={[]}
+				tableData={tableDataWithError}
+			/>,
+		);
+		expect(screen.getByText(customErrorMessage)).toBeInTheDocument();
+	});
+
 	it('renders empty state if no hosts are found', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={{
-					payload: {
-						data: { hosts: [] },
-					},
-				}}
+				tableData={createMockTableData({
+					records: [],
+				})}
 			/>,
 		);
-		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+		expect(
+			container.querySelector('.no-filtered-hosts-message-container'),
+		).toBeTruthy();
 	});
 
 	it('renders empty state if sentAnyHostMetricsData is false', () => {
@@ -94,58 +161,114 @@ describe('HostsListTable', () => {
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={{
-					...mockTableData,
-					payload: {
-						...mockTableData.payload,
-						data: {
-							...mockTableData.payload.data,
-							sentAnyHostMetricsData: false,
-							hosts: [],
-						},
-					},
-				}}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: false,
+					records: [],
+				})}
 			/>,
 		);
 		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
-	it('renders empty state if isSendingIncorrectK8SAgentMetrics is true', () => {
+	it('renders empty state if isSendingK8SAgentMetrics is true', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
 				hostMetricsData={[]}
-				tableData={{
-					...mockTableData,
-					payload: {
-						...mockTableData.payload,
-						data: {
-							...mockTableData.payload.data,
-							isSendingIncorrectK8SAgentMetrics: true,
-							hosts: [],
-						},
-					},
-				}}
+				tableData={createMockTableData({
+					isSendingK8SAgentMetrics: true,
+					records: [],
+				})}
 			/>,
 		);
 		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
+	it('renders end time before retention message when endTimeBeforeRetention is true', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					endTimeBeforeRetention: true,
+					records: [],
+				})}
+			/>,
+		);
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+		expect(
+			screen.getByText(
+				/Your requested end time is earlier than the earliest detected time of host metrics data, please adjust your end time\./,
+			),
+		).toBeInTheDocument();
+	});
+
+	it('renders no records message when noRecordsInSelectedTimeRangeAndFilters is true', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					records: [],
+				})}
+			/>,
+		);
+		expect(
+			container.querySelector('.no-filtered-hosts-message-container'),
+		).toBeTruthy();
+		expect(
+			screen.getByText(/No host metrics in the selected time range and filters/),
+		).toBeInTheDocument();
+	});
+
+	it('renders no filtered hosts message when filters are present and no hosts are found', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				filters={{
+					items: [
+						{
+							id: 'host_name',
+							key: {
+								key: 'host_name',
+								dataType: DataTypes.String,
+								type: 'tag',
+								isIndexed: true,
+							},
+							op: '=',
+							value: 'unknown',
+						},
+					],
+					op: 'AND',
+				}}
+				tableData={createMockTableData({
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					records: [],
+				})}
+			/>,
+		);
+		expect(container.querySelector('.no-filtered-hosts-message')).toBeTruthy();
+		expect(
+			screen.getByText(
+				/No host metrics in the selected time range and filters\. Please adjust your time range or filters\./,
+			),
+		).toBeInTheDocument();
+	});
+
 	it('renders table data', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
-				tableData={{
-					...mockTableData,
-					payload: {
-						...mockTableData.payload,
-						data: {
-							...mockTableData.payload.data,
-							isSendingIncorrectK8SAgentMetrics: false,
-							sentAnyHostMetricsData: true,
-						},
-					},
-				}}
+				tableData={createMockTableData({
+					isSendingK8SAgentMetrics: false,
+					sentAnyHostMetricsData: true,
+				})}
 			/>,
 		);
 		expect(container.querySelector('.hosts-list-table')).toBeTruthy();

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -107,6 +107,17 @@ export interface HostsListTableProps {
 	setPageSize: (pageSize: number) => void;
 }
 
+export interface EmptyOrLoadingViewProps {
+	isError: boolean;
+	errorMessage: string;
+	showHostsEmptyState: boolean;
+	sentAnyHostMetricsData: boolean;
+	isSendingIncorrectK8SAgentMetrics: boolean;
+	showEndTimeBeforeRetentionMessage: boolean;
+	showNoRecordsInSelectedTimeRangeMessage: boolean;
+	showTableLoadingState: boolean;
+}
+
 export const getHostListsQuery = (): HostListPayload => ({
 	filters: {
 		items: [],

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

@@ -33,6 +33,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -331,6 +332,9 @@ function K8sClustersList({
 
 	const clustersData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedClustersData = useMemo(
 		() => formatDataForTable(clustersData, groupBy),
@@ -655,6 +659,18 @@ function K8sClustersList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedClustersData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'cluster',
+		isLoading,
+		isFetching,
+		hasRecords: formattedClustersData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -669,54 +685,42 @@ function K8sClustersList({
 				entity={K8sCategory.NODES}
 				showAutoRefresh={!selectedClusterData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+			{emptyState}
 
-			<Table
-				className="k8s-list-table clusters-list-table"
-				dataSource={showTableLoadingState ? [] : formattedClustersData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{!emptyState && (
+				<Table
+					className="k8s-list-table clusters-list-table"
+					dataSource={showTableLoadingState ? [] : formattedClustersData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<ClusterDetails
 				cluster={selectedClusterData}

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

@@ -34,6 +34,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -328,6 +329,9 @@ function K8sDaemonSetsList({
 		data,
 	]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedDaemonSetsData = useMemo(
 		() => formatDataForTable(daemonSetsData, groupBy),
@@ -661,6 +665,18 @@ function K8sDaemonSetsList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedDaemonSetsData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'daemon set',
+		isLoading,
+		isFetching,
+		hasRecords: formattedDaemonSetsData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -675,56 +691,44 @@ function K8sDaemonSetsList({
 				entity={K8sCategory.DAEMONSETS}
 				showAutoRefresh={!selectedDaemonSetData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+			{emptyState}
 
-			<Table
-				className={classNames('k8s-list-table', 'daemonSets-list-table', {
-					'expanded-daemonsets-list-table': isGroupedByAttribute,
-				})}
-				dataSource={showTableLoadingState ? [] : formattedDaemonSetsData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{!emptyState && (
+				<Table
+					className={classNames('k8s-list-table', 'daemonSets-list-table', {
+						'expanded-daemonsets-list-table': isGroupedByAttribute,
+					})}
+					dataSource={showTableLoadingState ? [] : formattedDaemonSetsData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<DaemonSetDetails
 				daemonSet={selectedDaemonSetData}

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

@@ -34,6 +34,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -329,6 +330,9 @@ function K8sDeploymentsList({
 		data,
 	]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedDeploymentsData = useMemo(
 		() => formatDataForTable(deploymentsData, groupBy),
@@ -668,6 +672,18 @@ function K8sDeploymentsList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedDeploymentsData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'deployment',
+		isLoading,
+		isFetching,
+		hasRecords: formattedDeploymentsData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -682,56 +698,44 @@ function K8sDeploymentsList({
 				entity={K8sCategory.NODES}
 				showAutoRefresh={!selectedDeploymentData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+			{emptyState}
 
-			<Table
-				className={classNames('k8s-list-table', 'deployments-list-table', {
-					'expanded-deployments-list-table': isGroupedByAttribute,
-				})}
-				dataSource={showTableLoadingState ? [] : formattedDeploymentsData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{!emptyState && (
+				<Table
+					className={classNames('k8s-list-table', 'deployments-list-table', {
+						'expanded-deployments-list-table': isGroupedByAttribute,
+					})}
+					dataSource={showTableLoadingState ? [] : formattedDeploymentsData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<DeploymentDetails
 				deployment={selectedDeploymentData}

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

@@ -34,6 +34,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -321,6 +322,9 @@ function K8sJobsList({
 
 	const jobsData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedJobsData = useMemo(
 		() => formatDataForTable(jobsData, groupBy),
@@ -629,6 +633,18 @@ function K8sJobsList({
 		});
 	};
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'job',
+		isLoading,
+		isFetching,
+		hasRecords: formattedJobsData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -643,57 +659,44 @@ function K8sJobsList({
 				entity={K8sCategory.JOBS}
 				showAutoRefresh={!selectedJobData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+			{emptyState}
 
-			<Table
-				className={classNames('k8s-list-table', 'jobs-list-table', {
-					'expanded-jobs-list-table': isGroupedByAttribute,
-				})}
-				dataSource={isFetching || isLoading ? [] : formattedJobsData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: isFetching || isLoading,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
-
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
-							</div>
-						),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{!emptyState && (
+				<Table
+					className={classNames('k8s-list-table', 'jobs-list-table', {
+						'expanded-jobs-list-table': isGroupedByAttribute,
+					})}
+					dataSource={isFetching || isLoading ? [] : formattedJobsData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: isFetching || isLoading,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<JobDetails
 				job={selectedJobData}

frontend/src/container/InfraMonitoringK8s/K8sEmptyState.tsx

@@ -0,0 +1,150 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Skeleton, Spin, Typography } from 'antd';
+
+interface K8sEmptyStateProps {
+	sentAnyMetricsData: boolean;
+	endTimeBeforeRetention: boolean;
+	entityName: string;
+	isLoading: boolean;
+	isFetching: boolean;
+	hasRecords: boolean;
+	hasFilters: boolean;
+	isError: boolean;
+	errorMessage: string;
+}
+
+export function getK8sEmptyState({
+	sentAnyMetricsData,
+	endTimeBeforeRetention,
+	entityName,
+	isLoading,
+	isFetching,
+	hasRecords,
+	hasFilters,
+	isError,
+	errorMessage,
+}: K8sEmptyStateProps): React.ReactNode {
+	if (isError) {
+		return <Typography>{errorMessage || 'Something went wrong'}</Typography>;
+	}
+
+	const showTableLoadingState = (isLoading || isFetching) && !hasRecords;
+
+	if (showTableLoadingState) {
+		return (
+			<div className="hosts-list-loading-state">
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+				<Skeleton.Input
+					className="hosts-list-loading-state-item"
+					size="large"
+					block
+					active
+				/>
+			</div>
+		);
+	}
+
+	const showEmptyState =
+		!isFetching &&
+		!isLoading &&
+		!hasRecords &&
+		!sentAnyMetricsData &&
+		!hasFilters;
+
+	if (showEmptyState) {
+		return (
+			<div className="hosts-empty-state-container">
+				<div className="hosts-empty-state-container-content">
+					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+					<div className="no-hosts-message">
+						<Typography.Title level={5} className="no-hosts-message-title">
+							No {entityName} metrics data received yet.
+						</Typography.Title>
+						<Typography.Text className="no-hosts-message-text">
+							Please refer to the{' '}
+							<a
+								href="https://signoz.io/docs/infrastructure-monitoring/k8s-metrics/"
+								target="_blank"
+								rel="noreferrer"
+							>
+								Kubernetes Infrastructure Monitoring docs
+							</a>{' '}
+							to learn how to send K8s metrics to SigNoz.
+						</Typography.Text>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	const showEndTimeBeforeRetentionMessage =
+		!isFetching &&
+		!isLoading &&
+		!hasRecords &&
+		endTimeBeforeRetention &&
+		!hasFilters;
+
+	if (showEndTimeBeforeRetentionMessage) {
+		return (
+			<div className="hosts-empty-state-container">
+				<div className="hosts-empty-state-container-content">
+					<img className="eyes-emoji" src="/Images/eyesEmoji.svg" alt="eyes emoji" />
+					<div className="no-hosts-message">
+						<Typography.Title level={5} className="no-hosts-message-title">
+							Queried time range is before earliest {entityName} metrics
+						</Typography.Title>
+						<Typography.Text className="no-hosts-message-text">
+							Your requested end time is earlier than the earliest detected time of{' '}
+							{entityName} metrics data, please adjust your end time.
+						</Typography.Text>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	const showNoRecordsMessage =
+		!isFetching &&
+		!isLoading &&
+		!hasRecords &&
+		!showEmptyState &&
+		!showEndTimeBeforeRetentionMessage;
+
+	if (showNoRecordsMessage) {
+		return (
+			<div className="no-filtered-hosts-message-container">
+				<div className="no-filtered-hosts-message-content">
+					<img
+						src="/Icons/emptyState.svg"
+						alt="thinking-emoji"
+						className="empty-state-svg"
+					/>
+					<Typography.Title level={5} className="no-filtered-hosts-title">
+						No {entityName} metrics found
+					</Typography.Title>
+					<Typography.Text className="no-filtered-hosts-message">
+						No {entityName} metrics in the selected time range and filters. Please
+						adjust your time range or filters.
+					</Typography.Text>
+				</div>
+			</div>
+		);
+	}
+
+	return null;
+}
+
+export function K8sTableLoadingIndicator(): JSX.Element {
+	return <Spin indicator={<LoadingOutlined size={14} spin />} />;
+}

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

@@ -33,6 +33,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -327,6 +328,9 @@ function K8sNamespacesList({
 		data,
 	]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedNamespacesData = useMemo(
 		() => formatDataForTable(namespacesData, groupBy),
@@ -664,6 +668,18 @@ function K8sNamespacesList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedNamespacesData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'namespace',
+		isLoading,
+		isFetching,
+		hasRecords: formattedNamespacesData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -678,54 +694,42 @@ function K8sNamespacesList({
 				entity={K8sCategory.NODES}
 				showAutoRefresh={!selectedNamespaceData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
-
-			<Table
-				className="k8s-list-table namespaces-list-table"
-				dataSource={showTableLoadingState ? [] : formattedNamespacesData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{emptyState ? (
+				<>{emptyState}</>
+			) : (
+				<Table
+					className="k8s-list-table namespaces-list-table"
+					dataSource={showTableLoadingState ? [] : formattedNamespacesData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 			<NamespaceDetails
 				namespace={selectedNamespaceData}
 				isModalTimeSelection

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -33,6 +33,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -326,6 +327,9 @@ function K8sNodesList({
 
 	const nodesData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedNodesData = useMemo(
 		() => formatDataForTable(nodesData, groupBy),
@@ -643,6 +647,18 @@ function K8sNodesList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedNodesData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'node',
+		isLoading,
+		isFetching,
+		hasRecords: formattedNodesData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -657,54 +673,42 @@ function K8sNodesList({
 				entity={K8sCategory.NODES}
 				showAutoRefresh={!selectedNodeData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
-
-			<Table
-				className="k8s-list-table nodes-list-table"
-				dataSource={showTableLoadingState ? [] : formattedNodesData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{emptyState ? (
+				<>{emptyState}</>
+			) : (
+				<Table
+					className="k8s-list-table nodes-list-table"
+					dataSource={showTableLoadingState ? [] : formattedNodesData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<NodeDetails
 				node={selectedNodeData}

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -35,6 +35,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import {
@@ -335,6 +336,9 @@ function K8sPodsList({
 
 	const podsData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const nestedPodsData = useMemo(() => {
 		if (!selectedRowData || !groupedByRowData?.payload?.data.records) {
@@ -694,6 +698,18 @@ function K8sPodsList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedPodsData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'pod',
+		isLoading,
+		isFetching,
+		hasRecords: formattedPodsData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -712,56 +728,44 @@ function K8sPodsList({
 				entity={K8sCategory.PODS}
 				showAutoRefresh={!selectedPodData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
-
-			<Table
-				className={classNames('k8s-list-table', {
-					'expanded-k8s-list-table': isGroupedByAttribute,
-				})}
-				dataSource={showTableLoadingState ? [] : formattedPodsData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				scroll={{ x: true }}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{emptyState ? (
+				<>{emptyState}</>
+			) : (
+				<Table
+					className={classNames('k8s-list-table', {
+						'expanded-k8s-list-table': isGroupedByAttribute,
+					})}
+					dataSource={showTableLoadingState ? [] : formattedPodsData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					scroll={{ x: true }}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			{selectedPodData && (
 				<PodDetails

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

@@ -34,6 +34,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -335,6 +336,9 @@ function K8sStatefulSetsList({
 		data,
 	]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedStatefulSetsData = useMemo(
 		() => formatDataForTable(statefulSetsData, groupBy),
@@ -664,6 +668,18 @@ function K8sStatefulSetsList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedStatefulSetsData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'stateful set',
+		isLoading,
+		isFetching,
+		hasRecords: formattedStatefulSetsData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -678,56 +694,44 @@ function K8sStatefulSetsList({
 				entity={K8sCategory.STATEFULSETS}
 				showAutoRefresh={!selectedStatefulSetData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+			{emptyState}
 
-			<Table
-				className={classNames('k8s-list-table', 'statefulSets-list-table', {
-					'expanded-statefulsets-list-table': isGroupedByAttribute,
-				})}
-				dataSource={showTableLoadingState ? [] : formattedStatefulSetsData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{!emptyState && (
+				<Table
+					className={classNames('k8s-list-table', 'statefulSets-list-table', {
+						'expanded-statefulsets-list-table': isGroupedByAttribute,
+					})}
+					dataSource={showTableLoadingState ? [] : formattedStatefulSetsData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<StatefulSetDetails
 				statefulSet={selectedStatefulSetData}

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

@@ -34,6 +34,7 @@ import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
 	K8sCategory,
 } from '../constants';
+import { getK8sEmptyState } from '../K8sEmptyState';
 import K8sHeader from '../K8sHeader';
 import LoadingContainer from '../LoadingContainer';
 import { usePageSize } from '../utils';
@@ -274,6 +275,9 @@ function K8sVolumesList({
 
 	const volumesData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;
+	const sentAnyMetricsData = data?.payload?.data?.sentAnyMetricsData ?? false;
+	const endTimeBeforeRetention =
+		data?.payload?.data?.endTimeBeforeRetention ?? false;
 
 	const formattedVolumesData = useMemo(
 		() => formatDataForTable(volumesData, groupBy),
@@ -587,6 +591,18 @@ function K8sVolumesList({
 	const showTableLoadingState =
 		(isFetching || isLoading) && formattedVolumesData.length === 0;
 
+	const emptyState = getK8sEmptyState({
+		sentAnyMetricsData,
+		endTimeBeforeRetention,
+		entityName: 'volume',
+		isLoading,
+		isFetching,
+		hasRecords: formattedVolumesData.length > 0,
+		hasFilters: queryFilters?.items?.length > 0,
+		isError,
+		errorMessage: data?.error ?? '',
+	});
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -601,56 +617,44 @@ function K8sVolumesList({
 				entity={K8sCategory.NODES}
 				showAutoRefresh={!selectedVolumeData}
 			/>
-			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+			{emptyState}
 
-			<Table
-				className={classNames('k8s-list-table', 'volumes-list-table', {
-					'expanded-volumes-list-table': isGroupedByAttribute,
-				})}
-				dataSource={showTableLoadingState ? [] : formattedVolumesData}
-				columns={columns}
-				pagination={{
-					current: currentPage,
-					pageSize,
-					total: totalCount,
-					showSizeChanger: true,
-					hideOnSinglePage: false,
-					onChange: onPaginationChange,
-				}}
-				scroll={{ x: true }}
-				loading={{
-					spinning: showTableLoadingState,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-				}}
-				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
-
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
-							</div>
-						</div>
-					),
-				}}
-				tableLayout="fixed"
-				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
-					className: 'clickable-row',
-				})}
-				expandable={{
-					expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
-					expandIcon: expandRowIconRenderer,
-					expandedRowKeys,
-				}}
-			/>
+			{!emptyState && (
+				<Table
+					className={classNames('k8s-list-table', 'volumes-list-table', {
+						'expanded-volumes-list-table': isGroupedByAttribute,
+					})}
+					dataSource={showTableLoadingState ? [] : formattedVolumesData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: true,
+						hideOnSinglePage: false,
+						onChange: onPaginationChange,
+					}}
+					scroll={{ x: true }}
+					loading={{
+						spinning: showTableLoadingState,
+						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					}}
+					locale={{
+						emptyText: null,
+					}}
+					tableLayout="fixed"
+					onChange={handleTableChange}
+					onRow={(record): { onClick: () => void; className: string } => ({
+						onClick: (): void => handleRowClick(record),
+						className: 'clickable-row',
+					})}
+					expandable={{
+						expandedRowRender: isGroupedByAttribute ? expandedRowRender : undefined,
+						expandIcon: expandRowIconRenderer,
+						expandedRowKeys,
+					}}
+				/>
+			)}
 
 			<VolumeDetails
 				volume={selectedVolumeData}

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

@@ -87,7 +87,7 @@ function Explorer(): JSX.Element {
 	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
 
 	const unitsLength = useMemo(() => units.length, [units]);
-	const firstUnit = useMemo(() => units[0], [units]);
+	const firstUnit = useMemo(() => units?.[0], [units]);
 
 	useEffect(() => {
 		// Set the y axis unit to the first metric unit if

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

@@ -1,13 +1,8 @@
 import { useMemo } from 'react';
-import { useQueries, useQueryClient } from 'react-query';
+import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { toast } from '@signozhq/sonner';
-import { Button, Tooltip, Typography } from 'antd';
-import {
-	invalidateGetMetricMetadata,
-	useUpdateMetricMetadata,
-} from 'api/generated/services/metrics';
+import { Tooltip, Typography } from 'antd';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
@@ -28,10 +23,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { TimeSeriesProps } from './types';
-import {
-	buildUpdateMetricYAxisUnitPayload,
-	splitQueryIntoOneChartPerQuery,
-} from './utils';
+import { splitQueryIntoOneChartPerQuery } from './utils';
 
 function TimeSeries({
 	showOneChartPerQuery,
@@ -43,7 +35,6 @@ function TimeSeries({
 	yAxisUnit,
 	setYAxisUnit,
 	showYAxisUnitSelector,
-	metrics,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -51,7 +42,6 @@ function TimeSeries({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -148,51 +138,54 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
+	// TODO: Enable once we have resolved all related metrics v2 api issues
 	// Show the save unit button if
 	// 1. There is only one metric
 	// 2. The metric has no saved unit
 	// 3. The user has selected a unit
-	const showSaveUnitButton = useMemo(
-		() =>
-			metricUnits.length === 1 &&
-			Boolean(metrics[0]) &&
-			!metricUnits[0] &&
-			yAxisUnit,
-		[metricUnits, metrics, yAxisUnit],
-	);
+	// const showSaveUnitButton = useMemo(
+	// 	() =>
+	// 		metricUnits.length === 1 &&
+	// 		Boolean(metrics?.[0]) &&
+	// 		!metricUnits[0] &&
+	// 		yAxisUnit,
+	// 	[metricUnits, metrics, yAxisUnit],
+	// );
 
-	const {
-		mutate: updateMetricMetadata,
-		isLoading: isUpdatingMetricMetadata,
-	} = useUpdateMetricMetadata();
+	// const {
+	// 	mutate: updateMetricMetadata,
+	// 	isLoading: isUpdatingMetricMetadata,
+	// } = useUpdateMetricMetadata();
 
-	const handleSaveUnit = (): void => {
-		if (metrics[0] && yAxisUnit) {
-			updateMetricMetadata(
-				{
-					pathParams: {
-						metricName: metricNames[0],
-					},
-					data: buildUpdateMetricYAxisUnitPayload(
-						metricNames[0],
-						metrics[0],
-						yAxisUnit,
-					),
-				},
-				{
-					onSuccess: () => {
-						toast.success('Unit saved successfully');
-						invalidateGetMetricMetadata(queryClient, {
-							metricName: metricNames[0],
-						});
-					},
-					onError: () => {
-						toast.error('Failed to save unit');
-					},
-				},
-			);
-		}
-	};
+	// const handleSaveUnit = (): void => {
+	// 	updateMetricMetadata(
+	// 		{
+	// 			metricName: metricNames[0],
+	// 			payload: {
+	// 				unit: yAxisUnit,
+	// 				description: metrics[0]?.description ?? '',
+	// 				metricType: metrics[0]?.type as MetricType,
+	// 				temporality: metrics[0]?.temporality,
+	// 			},
+	// 		},
+	// 		{
+	// 			onSuccess: () => {
+	// 				notifications.success({
+	// 					message: 'Unit saved successfully',
+	// 				});
+	// 				queryClient.invalidateQueries([
+	// 					REACT_QUERY_KEY.GET_METRIC_DETAILS,
+	// 					metricNames[0],
+	// 				]);
+	// 			},
+	// 			onError: () => {
+	// 				notifications.error({
+	// 					message: 'Failed to save unit',
+	// 				});
+	// 			},
+	// 		},
+	// 	);
+	// };
 
 	return (
 		<>
@@ -205,7 +198,8 @@ function TimeSeries({
 							source={YAxisSource.EXPLORER}
 							data-testid="y-axis-unit-selector"
 						/>
-						{showSaveUnitButton && (
+						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
+						{/* {showSaveUnitButton && (
 							<div className="save-unit-container">
 								<Typography.Text>
 									Save the selected unit for this metric?
@@ -219,7 +213,7 @@ function TimeSeries({
 									<Typography.Paragraph>Yes</Typography.Paragraph>
 								</Button>
 							</div>
-						)}
+						)} */}
 					</>
 				)}
 			</div>

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

@@ -3,10 +3,8 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { render, screen } from '@testing-library/react';
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
@@ -16,12 +14,12 @@ import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import * as timezoneHooks from 'providers/Timezone';
 import store from 'store';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import Explorer from '../Explorer';
 import * as useGetMetricsHooks from '../utils';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
 const mockSetSearchParams = jest.fn();
 const queryClient = new QueryClient();
@@ -137,6 +135,14 @@ jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 
 const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
 
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
 function renderExplorer(): void {
 	render(
 		<QueryClientProvider client={queryClient}>
@@ -184,7 +190,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -201,7 +207,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -214,7 +220,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 		});
 
 		renderExplorer();
@@ -231,7 +237,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -244,7 +250,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();
@@ -263,10 +269,10 @@ describe('Explorer', () => {
 			isError: false,
 			metrics: [
 				{
-					type: MetrictypesTypeDTO.sum,
+					type: MetricType.SUM,
 					description: 'metric1 description',
 					unit: '',
-					temporality: MetrictypesTemporalityDTO.cumulative,
+					temporality: Temporality.CUMULATIVE,
 					isMonotonic: true,
 				},
 			],
@@ -283,7 +289,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 		});
 
 		renderExplorer();
@@ -318,7 +324,7 @@ describe('Explorer', () => {
 		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
 			isLoading: false,
 			isError: false,
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 		});
 
 		renderExplorer();

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -1,19 +1,29 @@
+import { UseMutationResult } from 'react-query';
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataResponse } from 'api/metricsExplorer/updateMetricMetadata';
+import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { UseUpdateMetricMetadataProps } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
-const mockUpdateMetricMetadata = jest.fn();
-const updateMetricMetadataSpy = jest.spyOn(
-	metricsExplorerHooks,
-	'useUpdateMetricMetadata',
-);
-type UseUpdateMetricMetadataReturnType = ReturnType<
-	typeof metricsExplorerHooks.useUpdateMetricMetadata
+type MockUpdateMetricMetadata = UseMutationResult<
+	SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse,
+	Error,
+	UseUpdateMetricMetadataProps
 >;
+const mockUpdateMetricMetadata = jest.fn();
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue(({
+		mutate: mockUpdateMetricMetadata,
+		isLoading: false,
+	} as Partial<MockUpdateMetricMetadata>) as MockUpdateMetricMetadata);
 
 jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
 	__esModule: true,
@@ -50,6 +60,14 @@ jest.mock('react-redux', () => ({
 	}),
 }));
 
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
 const mockSetWarning = jest.fn();
 const mockSetIsMetricDetailsOpen = jest.fn();
 const mockSetYAxisUnit = jest.fn();
@@ -78,13 +96,6 @@ function renderTimeSeries(
 }
 
 describe('TimeSeries', () => {
-	beforeEach(() => {
-		updateMetricMetadataSpy.mockReturnValue(({
-			mutate: mockUpdateMetricMetadata,
-			isLoading: false,
-		} as Partial<UseUpdateMetricMetadataReturnType>) as UseUpdateMetricMetadataReturnType);
-	});
-
 	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
 		const user = userEvent.setup();
 		const { container } = renderTimeSeries({
@@ -107,7 +118,7 @@ describe('TimeSeries', () => {
 		const { container } = renderTimeSeries({
 			metricUnits: ['', 'count'],
 			metricNames: ['metric1', 'metric2'],
-			metrics: [MOCK_METRIC_METADATA, MOCK_METRIC_METADATA],
+			metrics: [mockMetric, mockMetric],
 			yAxisUnit: 'seconds',
 		});
 
@@ -122,17 +133,18 @@ describe('TimeSeries', () => {
 		);
 	});
 
-	it('shows Save unit button when metric had no unit but one is selected', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
 		const { findByText, getByRole } = renderTimeSeries({
 			metricUnits: [undefined],
 			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		expect(
-			await findByText('Save the selected unit for this metric?'),
+			findByText('Save the selected unit for this metric?'),
 		).toBeInTheDocument();
 
 		const yesButton = getByRole('button', { name: 'Yes' });
@@ -140,25 +152,24 @@ describe('TimeSeries', () => {
 		expect(yesButton).toBeEnabled();
 	});
 
-	it('clicking on save unit button shoould upated metric metadata', async () => {
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('clicking on save unit button shoould upated metric metadata', () => {
 		const user = userEvent.setup();
 		const { getByRole } = renderTimeSeries({
 			metricUnits: [''],
 			metricNames: ['metric1'],
-			metrics: [MOCK_METRIC_METADATA],
+			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
-			showYAxisUnitSelector: true,
 		});
 
 		const yesButton = getByRole('button', { name: /Yes/i });
-		await user.click(yesButton);
+		user.click(yesButton);
 
 		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
 			{
-				pathParams: {
-					metricName: 'metric1',
-				},
-				data: expect.objectContaining({ unit: 'seconds' }),
+				metricName: 'metric1',
+				payload: expect.objectContaining({ unit: 'seconds' }),
 			},
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

frontend/src/container/MetricsExplorer/Explorer/__tests__/testUtils.ts

@@ -1,13 +0,0 @@
-import {
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export const MOCK_METRIC_METADATA: MetricsexplorertypesMetricMetadataDTO = {
-	type: MetrictypesTypeDTO.sum,
-	description: 'metric1 description',
-	unit: 'metric1 unit',
-	temporality: MetrictypesTemporalityDTO.cumulative,
-	isMonotonic: true,
-};

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -1,8 +1,14 @@
 import { UseQueryResult } from 'react-query';
 import { renderHook } from '@testing-library/react';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import * as useGetMultipleMetricsHook from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	MetricMetadata,
+	MetricMetadataResponse,
+} from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderFormula,
@@ -16,7 +22,6 @@ import {
 	splitQueryIntoOneChartPerQuery,
 	useGetMetrics,
 } from '../utils';
-import { MOCK_METRIC_METADATA } from './testUtils';
 
 const MOCK_QUERY_DATA_1: IBuilderQuery = {
 	...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
@@ -86,19 +91,32 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 	});
 });
 
+const MOCK_METRIC_METADATA: MetricMetadata = {
+	description: 'Metric 1 description',
+	unit: 'unit1',
+	type: MetricType.GAUGE,
+	temporality: Temporality.DELTA,
+	isMonotonic: true,
+};
+
 describe('useGetMetrics', () => {
 	beforeEach(() => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: false,
 					isError: false,
 					data: {
-						data: MOCK_METRIC_METADATA,
-						status: 'success',
+						httpStatusCode: 200,
+						data: {
+							status: 'success',
+							data: MOCK_METRIC_METADATA,
+						},
 					},
-				} as UseQueryResult<GetMetricMetadata200, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 	});
 
@@ -115,11 +133,12 @@ describe('useGetMetrics', () => {
 		jest
 			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
 			.mockReturnValue([
-				{
+				({
 					isLoading: true,
 					isError: false,
-					data: undefined,
-				} as UseQueryResult<GetMetricMetadata200, Error>,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
 			]);
 		const { result } = renderHook(() => useGetMetrics(['metric1']));
 		expect(result.current.metrics).toHaveLength(1);

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { RelatedMetric } from 'api/metricsExplorer/getRelatedMetrics';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 export enum ExplorerTabs {
 	TIME_SERIES = 'time-series',
@@ -18,7 +18,7 @@ export interface TimeSeriesProps {
 	isMetricUnitsError: boolean;
 	metricUnits: (string | undefined)[];
 	metricNames: string[];
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 	handleOpenMetricDetails: (metricName: string) => void;
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;

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

@@ -1,12 +1,9 @@
-import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { mapMetricUnitToUniversalUnit } from 'components/YAxisUnitSelector/utils';
 import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { determineIsMonotonic } from '../MetricDetails/utils';
-
 /**
  * Split a query with multiple queryData to multiple distinct queries, each with a single queryData.
  * @param query - The query to split
@@ -71,14 +68,16 @@ export function useGetMetrics(
 ): {
 	isLoading: boolean;
 	isError: boolean;
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[];
+	metrics: (MetricMetadata | undefined)[];
 } {
 	const metricsData = useGetMultipleMetrics(metricNames, {
 		enabled: metricNames.length > 0 && isEnabled,
 	});
 	return {
 		isLoading: metricsData.some((metric) => metric.isLoading),
-		metrics: metricsData.map((metric) => metric.data?.data),
+		metrics: metricsData
+			.map((metric) => metric.data?.data)
+			.map((data) => data?.data),
 		isError: metricsData.some((metric) => metric.isError),
 	};
 }
@@ -90,24 +89,9 @@ export function useGetMetrics(
  * @returns The units of the metrics, can be undefined if the metric has no unit
  */
 export function getMetricUnits(
-	metrics: (MetricsexplorertypesMetricMetadataDTO | undefined)[],
+	metrics: (MetricMetadata | undefined)[],
 ): (string | undefined)[] {
 	return metrics
 		.map((metric) => metric?.unit)
 		.map((unit) => mapMetricUnitToUniversalUnit(unit) || undefined);
 }
-
-export function buildUpdateMetricYAxisUnitPayload(
-	metricName: string,
-	metric: MetricsexplorertypesMetricMetadataDTO,
-	yAxisUnit: string,
-): UpdateMetricMetadataMutationBody {
-	return {
-		metricName,
-		type: metric.type,
-		description: metric.description,
-		unit: yAxisUnit || '',
-		temporality: metric.temporality,
-		isMonotonic: determineIsMonotonic(metric?.type, metric?.temporality),
-	};
-}

frontend/src/container/NewWidget/RightContainer/LegendColors/LegendColors.test.tsx

@@ -1,131 +0,0 @@
-import { ColorPickerProps } from 'antd';
-import { Color } from 'antd/es/color-picker';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import LegendColors from './LegendColors';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	__esModule: true,
-	useQueryBuilder: (): { currentQuery: unknown } => ({
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						queryName: 'A',
-						legend: '{service.name}',
-					},
-				],
-			},
-		},
-	}),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	return {
-		...actual,
-		ColorPicker: ({ onChange, children }: ColorPickerProps): JSX.Element => (
-			<button
-				type="button"
-				data-testid="legend-color-picker"
-				onClick={(): void =>
-					onChange!({ toHexString: (): string => '#ffffff' } as Color, '#ffffff')
-				}
-			>
-				{children}
-			</button>
-		),
-	};
-});
-
-describe('LegendColors', () => {
-	it('renders legend colors panel and items', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={jest.fn()}
-				queryResponse={undefined}
-			/>,
-		);
-
-		expect(screen.getByText('Legend Colors')).toBeInTheDocument();
-
-		// Expand the collapse to reveal legend items
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		expect(screen.getByText('{service.name}')).toBeInTheDocument();
-	});
-
-	it('calls setCustomLegendColors when color is changed', async () => {
-		const user = userEvent.setup();
-		const setCustomLegendColors = jest.fn();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={setCustomLegendColors}
-				queryResponse={undefined}
-			/>,
-		);
-
-		// Expand to render the mocked ColorPicker button
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		const colorTrigger = screen.getByTestId('legend-color-picker');
-
-		await user.click(colorTrigger);
-
-		expect(setCustomLegendColors).toHaveBeenCalled();
-	});
-
-	it('throttles rapid color changes', async () => {
-		jest.useFakeTimers();
-		const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-		const setCustomLegendColors = jest.fn();
-
-		render(
-			<LegendColors
-				customLegendColors={{}}
-				setCustomLegendColors={setCustomLegendColors}
-				queryResponse={undefined}
-			/>,
-		);
-
-		// Expand panel to render the mocked ColorPicker button
-		await user.click(
-			screen.getByRole('tab', {
-				name: /Legend Colors/i,
-			}),
-		);
-
-		const colorTrigger = screen.getByTestId('legend-color-picker');
-
-		// Fire multiple rapid changes
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-		await user.click(colorTrigger);
-
-		// Flush pending throttled calls
-		jest.advanceTimersByTime(500);
-
-		// Throttling should ensure we don't invoke the setter once per click
-		expect(setCustomLegendColors).toHaveBeenCalledTimes(2);
-
-		jest.useRealTimers();
-	});
-});

frontend/src/container/NewWidget/RightContainer/LegendColors/LegendColors.tsx

@@ -14,7 +14,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import throttle from 'lodash-es/throttle';
 import { Palette } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -96,24 +95,13 @@ function LegendColors({
 		);
 	};
 
-	// Handle color change (throttled to avoid excessive updates)
-	const handleColorChange = useMemo(
-		() =>
-			throttle((label: string, color: string): void => {
-				setCustomLegendColors((prev) => ({
-					...prev,
-					[label]: color,
-				}));
-			}, 200), // 200ms is a good compromise between responsiveness and performance
-		[setCustomLegendColors],
-	);
-
-	// Clean up throttled handler on unmount
-	useEffect(() => {
-		return (): void => {
-			handleColorChange.cancel();
-		};
-	}, [handleColorChange]);
+	// Handle color change
+	const handleColorChange = (label: string, color: string): void => {
+		setCustomLegendColors((prev) => ({
+			...prev,
+			[label]: color,
+		}));
+	};
 
 	// Reset to default color
 	const resetToDefault = (label: string): void => {

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.styles.scss

@@ -169,10 +169,6 @@
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
 
-				.ant-select {
-					width: 100%;
-				}
-
 				.ant-select-selector {
 					border: none;
 					height: unset;

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -2,9 +2,6 @@
 import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
-import YAxisUnitSelector from 'components/YAxisUnitSelector';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { unitOptions } from 'container/NewWidget/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -207,18 +204,6 @@ function Threshold({
 		return unit !== 'none' && convertUnit(value, unit, toUnitId) === null;
 	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits, unit, value]);
 
-	const unitSelectCategories = useMemo(() => {
-		return unitOptions(
-			selectedGraph === PANEL_TYPES.TABLE
-				? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
-				: yAxisUnit || '',
-		);
-	}, [selectedGraph, yAxisUnit, tableSelectedOption, columnUnits]);
-
-	const unitLabel = useMemo(() => {
-		return Y_AXIS_UNIT_NAMES[unit as keyof typeof Y_AXIS_UNIT_NAMES];
-	}, [unit]);
-
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -328,17 +313,19 @@ function Threshold({
 						<ShowCaseValue value={value} className="unit-input" />
 					)}
 					{isEditMode ? (
-						<YAxisUnitSelector
-							value={unit}
+						<Select
+							defaultValue={unit}
+							options={unitOptions(
+								selectedGraph === PANEL_TYPES.TABLE
+									? getColumnUnit(tableSelectedOption, columnUnits || {}) || ''
+									: yAxisUnit || '',
+							)}
 							onChange={handleUnitChange}
-							placeholder="Select unit"
-							source={YAxisSource.DASHBOARDS}
-							initialValue={unit}
-							categoriesOverride={unitSelectCategories}
-							containerClassName="unit-selection"
+							showSearch
+							className="unit-selection"
 						/>
 					) : (
-						<ShowCaseValue value={unitLabel} className="unit-selection-prev" />
+						<ShowCaseValue value={unit} className="unit-selection-prev" />
 					)}
 				</div>
 				<div className="thresholds-color-selector">
@@ -369,10 +356,7 @@ function Threshold({
 					)}
 				</div>
 				{isInvalidUnitComparison && (
-					<Typography.Text
-						className="invalid-unit"
-						data-testid="invalid-unit-comparison"
-					>
+					<Typography.Text className="invalid-unit">
 						Threshold unit ({unit}) is not valid in comparison with the{' '}
 						{selectedGraph === PANEL_TYPES.TABLE ? 'column' : 'y-axis'} unit (
 						{selectedGraph === PANEL_TYPES.TABLE

frontend/src/container/NewWidget/RightContainer/Threshold/__tests__/Threshold.test.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { render, screen } from 'tests/test-utils';
 
@@ -16,26 +14,12 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 	),
 }));
 
-// Mock the unitOptions function to return YAxisCategory-shaped data
+// Mock the unitOptions function
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
-		{
-			name: 'Mock Category',
-			units: [
-				{
-					id: UniversalYAxisUnit.NONE,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
-				},
-				{
-					id: UniversalYAxisUnit.PERCENT,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
-				},
-				{
-					id: UniversalYAxisUnit.MILLISECONDS,
-					name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
-				},
-			],
-		},
+		{ value: 'none', label: 'None' },
+		{ value: '%', label: 'Percent (0 - 100)' },
+		{ value: 'ms', label: 'Milliseconds (ms)' },
 	]),
 }));
 
@@ -44,7 +28,7 @@ const defaultProps = {
 	keyIndex: 0,
 	thresholdOperator: '>' as const,
 	thresholdValue: 50,
-	thresholdUnit: UniversalYAxisUnit.NONE,
+	thresholdUnit: 'none',
 	thresholdColor: 'Red',
 	thresholdFormat: 'Text' as const,
 	isEditEnabled: true,
@@ -54,11 +38,8 @@ const defaultProps = {
 		{ value: 'memory_usage', label: 'Memory Usage' },
 	],
 	thresholdTableOptions: 'cpu_usage',
-	columnUnits: {
-		cpu_usage: UniversalYAxisUnit.PERCENT,
-		memory_usage: UniversalYAxisUnit.BYTES,
-	},
-	yAxisUnit: UniversalYAxisUnit.PERCENT,
+	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
+	yAxisUnit: '%',
 	moveThreshold: jest.fn(),
 };
 
@@ -87,27 +68,28 @@ describe('Threshold Component Unit Validation', () => {
 	it('should show validation error when threshold unit is not "none" and units are incompatible', () => {
 		// Act - Render component with incompatible units (ms vs percent)
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
+			thresholdUnit: 'ms',
 			thresholdValue: 50,
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(ms\) is not valid in comparison with the column unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit matches column unit', () => {
 		// Act - Render component with matching units
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.PERCENT,
+			thresholdUnit: 'percent',
 			thresholdValue: 50,
 		});
 
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
@@ -115,16 +97,17 @@ describe('Threshold Component Unit Validation', () => {
 		// Act - Render component for time series with incompatible units
 		renderThreshold({
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
-			thresholdUnit: UniversalYAxisUnit.MILLISECONDS,
+			thresholdUnit: 'ms',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.MILLISECONDS}) is not valid in comparison with the y-axis unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(ms\) is not valid in comparison with the y-axis unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 
 	it('should not show validation error for time series graph when threshold unit is "none"', () => {
@@ -133,39 +116,43 @@ describe('Threshold Component Unit Validation', () => {
 			selectedGraph: PANEL_TYPES.TIME_SERIES,
 			thresholdUnit: 'none',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
+
+		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
 	it('should not show validation error when threshold unit is compatible with column unit', () => {
 		// Act - Render component with compatible units (both in same category - Time)
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.SECONDS,
+			thresholdUnit: 's',
 			thresholdValue: 100,
-			columnUnits: { cpu_usage: UniversalYAxisUnit.MILLISECONDS },
+			columnUnits: { cpu_usage: 'ms' },
 			thresholdTableOptions: 'cpu_usage',
 		});
+
 		// Assert - No validation error should be displayed
 		expect(
-			screen.queryByTestId('invalid-unit-comparison'),
+			screen.queryByText(/Threshold unit.*is not valid in comparison/i),
 		).not.toBeInTheDocument();
 	});
 
 	it('should show validation error when threshold unit is in different category than column unit', () => {
 		// Act - Render component with units from different categories
 		renderThreshold({
-			thresholdUnit: UniversalYAxisUnit.BYTES,
+			thresholdUnit: 'bytes',
 			thresholdValue: 100,
-			yAxisUnit: UniversalYAxisUnit.PERCENT,
+			yAxisUnit: 'percent',
 		});
 
-		const errorMessage = screen.getByTestId('invalid-unit-comparison');
 		// Assert - Validation error should be displayed
-		expect(errorMessage.textContent).toBe(
-			`Threshold unit (${UniversalYAxisUnit.BYTES}) is not valid in comparison with the column unit (${UniversalYAxisUnit.PERCENT})`,
-		);
+		expect(
+			screen.getByText(
+				/Threshold unit \(bytes\) is not valid in comparison with the column unit \(percent\)/i,
+			),
+		).toBeInTheDocument();
 	});
 });

frontend/src/container/NewWidget/utils.ts

@@ -1,12 +1,9 @@
 import { Layout } from 'react-grid-layout';
+import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
-import {
-	UniversalYAxisUnit,
-	YAxisCategory,
-	YAxisSource,
-} from 'components/YAxisUnitSelector/types';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -609,7 +606,7 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  */
 export const getCategorySelectOptionByName = (
 	name?: YAxisCategoryNames,
-): { name: string; id: UniversalYAxisUnit }[] => {
+): DefaultOptionType[] => {
 	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
 	if (!categories.length) {
 		return [];
@@ -618,8 +615,8 @@ export const getCategorySelectOptionByName = (
 		categories
 			.find((category) => category.name === name)
 			?.units.map((unit) => ({
-				name: unit.name,
-				id: unit.id,
+				label: unit.name,
+				value: unit.id,
 			})) || []
 	);
 };
@@ -631,19 +628,19 @@ export const getCategorySelectOptionByName = (
  * select options. If a valid category is found, it filters the supported categories
  * to return only the options for the matched category.
  */
-export const unitOptions = (columnUnit: string): YAxisCategory[] => {
+export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
 	const category = getCategoryName(columnUnit);
 	if (isEmpty(category)) {
 		return categoryToSupport.map((category) => ({
-			name: category,
-			units: getCategorySelectOptionByName(category),
+			label: category,
+			options: getCategorySelectOptionByName(category),
 		}));
 	}
 	return categoryToSupport
 		.filter((supportedCategory) => supportedCategory === category)
 		.map((filteredCategory) => ({
-			name: filteredCategory,
-			units: getCategorySelectOptionByName(filteredCategory),
+			label: filteredCategory,
+			options: getCategorySelectOptionByName(filteredCategory),
 		}));
 };
 

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -1,37 +1,32 @@
 import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
-import {
-	getGetMetricMetadataQueryKey,
-	getMetricMetadata,
-} from 'api/generated/services/metrics';
-import { GetMetricMetadata200 } from 'api/generated/services/sigNoz.schemas';
+import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
-type QueryResult = UseQueryResult<GetMetricMetadata200, Error>;
+type QueryResult = UseQueryResult<
+	SuccessResponseV2<MetricMetadataResponse>,
+	Error
+>;
 
 type UseGetMultipleMetrics = (
 	metricNames: string[],
-	options?: UseQueryOptions<GetMetricMetadata200, Error>,
+	options?: UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>,
 	headers?: Record<string, string>,
 ) => QueryResult[];
 
 export const useGetMultipleMetrics: UseGetMultipleMetrics = (
 	metricNames,
 	options,
+	headers,
 ) =>
 	useQueries(
 		metricNames.map(
 			(metricName) =>
 				({
-					queryKey: getGetMetricMetadataQueryKey({
-						metricName,
-					}),
-					queryFn: ({ signal }) =>
-						getMetricMetadata(
-							{
-								metricName,
-							},
-							signal,
-						),
+					queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
+					queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
 					...options,
-				} as UseQueryOptions<GetMetricMetadata200, Error>),
+				} as UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>),
 		),
 	);

frontend/src/hooks/useGetYAxisUnit.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { useGetMetrics } from 'container/MetricsExplorer/Explorer/utils';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
@@ -24,13 +24,13 @@ const mockUseGetMetrics = useGetMetrics as jest.MockedFunction<
 
 const MOCK_METRIC_1 = {
 	unit: UniversalYAxisUnit.BYTES,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_2 = {
 	unit: UniversalYAxisUnit.SECONDS,
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 const MOCK_METRIC_3 = {
 	unit: '',
-} as MetricsexplorertypesMetricMetadataDTO;
+} as MetricMetadata;
 
 function createMockCurrentQuery(
 	queryType: EQueryType,

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -1,22 +1,14 @@
 .tooltip-plugin-container {
 	top: 0;
 	left: 0;
-	width: 100%;
 	z-index: 1070;
 	white-space: pre;
 	border-radius: 4px;
 	position: fixed;
 	overflow: auto;
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
-	opacity: 0;
-	pointer-events: none;
 
 	&.pinned {
 		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 	}
-
-	&.visible {
-		opacity: 1;
-		pointer-events: all;
-	}
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -339,9 +339,8 @@ export default function TooltipPlugin({
 			return;
 		}
 		const layout = layoutRef.current;
-		layout.observer.disconnect();
-
 		if (containerRef.current) {
+			layout.observer.disconnect();
 			layout.observer.observe(containerRef.current);
 			const { width, height } = containerRef.current.getBoundingClientRect();
 			layout.width = width;
@@ -352,28 +351,24 @@ export default function TooltipPlugin({
 		}
 	}, [isHovering, plot]);
 
-	if (!plot) {
+	if (!plot || !isHovering) {
 		return null;
 	}
 
 	return createPortal(
 		<div
-			className={cx('tooltip-plugin-container', {
-				pinned: isPinned,
-				visible: isHovering,
-			})}
+			className={cx('tooltip-plugin-container', { pinned: isPinned })}
 			style={{
 				...style,
 				maxWidth: `${maxWidth}px`,
 				maxHeight: `${maxHeight}px`,
+				width: '100%',
 			}}
 			aria-live="polite"
 			aria-atomic="true"
-			aria-hidden={!isHovering}
 			ref={containerRef}
-			data-testid="tooltip-plugin-container"
 		>
-			{isHovering ? contents : null}
+			{contents}
 		</div>,
 		portalRoot.current,
 	);

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -187,7 +187,9 @@ describe('TooltipPlugin', () => {
 				canPinTooltip: true,
 			});
 
-			const container = screen.getByTestId('tooltip-plugin-container');
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
 			expect(container.classList.contains('pinned')).toBe(false);
 
 			act(() => {
@@ -195,9 +197,11 @@ describe('TooltipPlugin', () => {
 			});
 
 			return waitFor(() => {
-				const updated = screen.getByTestId('tooltip-plugin-container');
-				expect(updated).toBeInTheDocument();
-				expect(updated.classList.contains('pinned')).toBe(true);
+				const updated = document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement | null;
+				expect(updated).not.toBeNull();
+				expect(updated?.classList.contains('pinned')).toBe(true);
 			});
 		});
 
@@ -245,13 +249,7 @@ describe('TooltipPlugin', () => {
 			await user.click(button);
 
 			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-				expect(container.textContent).toBe('');
+				expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 			});
 		});
 
@@ -294,16 +292,12 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container).toBeInTheDocument();
-			expect(container.getAttribute('aria-hidden')).toBe('true');
-			expect(container.classList.contains('visible')).toBe(false);
-			expect(container.classList.contains('pinned')).toBe(false);
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip on outside mousedown', async () => {
+		it('unpins the tooltip on outside mousedown', () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -341,19 +335,12 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});
 
-		it('unpins the tooltip on outside keydown', async () => {
+		it('unpins the tooltip on outside keydown', () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();
 
@@ -393,13 +380,7 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});
 
-			await waitFor(() => {
-				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container).toBeInTheDocument();
-				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
-			});
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
 
 			jest.useRealTimers();
 		});

pkg/modules/user/config.go

@@ -22,8 +22,7 @@ type RootConfig struct {
 }
 
 type OrgConfig struct {
-	ID   valuer.UUID `mapstructure:"id"`
-	Name string      `mapstructure:"name"`
+	Name string `mapstructure:"name"`
 }
 
 type PasswordConfig struct {

pkg/modules/user/impluser/service.go

@@ -78,43 +78,6 @@ func (s *service) Stop(ctx context.Context) error {
 }
 
 func (s *service) reconcile(ctx context.Context) error {
-	if !s.config.Org.ID.IsZero() {
-		return s.reconcileWithOrgID(ctx)
-	}
-
-	return s.reconcileByName(ctx)
-}
-
-func (s *service) reconcileWithOrgID(ctx context.Context) error {
-	org, err := s.orgGetter.Get(ctx, s.config.Org.ID)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return err // something really went wrong
-		}
-
-		// org was not found using id check if we can find an org using name
-
-		existingOrgByName, nameErr := s.orgGetter.GetByName(ctx, s.config.Org.Name)
-		if nameErr != nil && !errors.Ast(nameErr, errors.TypeNotFound) {
-			return nameErr // something really went wrong
-		}
-
-		// we found an org using name
-		if existingOrgByName != nil {
-			// the existing org has the same name as config but org id is different inform user with actionable message
-			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "organization with name %q already exists with a different ID %s (expected %s)", s.config.Org.Name, existingOrgByName.ID.StringValue(), s.config.Org.ID.StringValue())
-		}
-
-		// default - we did not found any org using id and name both - create a new org
-		newOrg := types.NewOrganizationWithID(s.config.Org.ID, s.config.Org.Name, s.config.Org.Name)
-		_, err = s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
-		return err
-	}
-
-	return s.reconcileRootUser(ctx, org.ID)
-}
-
-func (s *service) reconcileByName(ctx context.Context) error {
 	org, err := s.orgGetter.GetByName(ctx, s.config.Org.Name)
 	if err != nil {
 		if errors.Ast(err, errors.TypeNotFound) {

pkg/query-service/app/clickhouseReader/reader.go

@@ -4308,6 +4308,28 @@ func (r *ClickHouseReader) GetListResultV3(ctx context.Context, query string) ([
 
 }
 
+// GetHostMetricsExistenceAndEarliestTime returns (count, minFirstReportedUnixMilli, error) for the given host metric names
+// from distributed_metadata. When count is 0, minFirstReportedUnixMilli is 0.
+func (r *ClickHouseReader) GetMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error) {
+	if len(metricNames) == 0 {
+		return 0, 0, nil
+	}
+
+	query := fmt.Sprintf(
+		`SELECT count(*) AS cnt, min(first_reported_unix_milli) AS min_first_reported
+		FROM %s.%s
+		WHERE metric_name IN @metric_names`,
+		constants.SIGNOZ_METRIC_DBNAME, constants.SIGNOZ_METADATA_TABLENAME)
+
+	var count, minFirstReported uint64
+	err := r.db.QueryRow(ctx, query, clickhouse.Named("metric_names", metricNames)).Scan(&count, &minFirstReported)
+	if err != nil {
+		zap.L().Error("error getting host metrics existence and earliest time", zap.Error(err))
+		return 0, 0, err
+	}
+	return count, minFirstReported, nil
+}
+
 func getPersonalisedError(err error) error {
 	if err == nil {
 		return nil

pkg/query-service/app/inframetrics/clusters.go

@@ -202,6 +202,14 @@ func (p *ClustersRepo) getTopClusterGroups(ctx context.Context, orgID valuer.UUI
 	return topClusterGroups, allClusterGroups, nil
 }
 
+func (p *ClustersRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForNodes {
+		names = append(names, metricName)
+	}
+	return p.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (p *ClustersRepo) GetClusterList(ctx context.Context, orgID valuer.UUID, req model.ClusterListRequest) (model.ClusterListResponse, error) {
 	resp := model.ClusterListResponse{}
 
@@ -220,6 +228,22 @@ func (p *ClustersRepo) GetClusterList(ctx context.Context, orgID valuer.UUID, re
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := p.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.ClusterListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.ClusterListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := NodesTableListQuery.Clone()

pkg/query-service/app/inframetrics/common.go

@@ -10,6 +10,7 @@ import (
 )
 
 var dotMetricMap = map[string]string{
+	"system_filesystem_usage":               "system.filesystem.usage",
 	"system_cpu_time":                       "system.cpu.time",
 	"system_memory_usage":                   "system.memory.usage",
 	"system_cpu_load_average_15m":           "system.cpu.load_average.15m",

pkg/query-service/app/inframetrics/daemonsets.go

@@ -269,6 +269,17 @@ func (d *DaemonSetsRepo) getTopDaemonSetGroups(ctx context.Context, orgID valuer
 	return topDaemonSetGroups, allDaemonSetGroups, nil
 }
 
+func (d *DaemonSetsRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForWorkloads {
+		names = append(names, metricName)
+	}
+	for _, metricName := range metricNamesForDaemonSets {
+		names = append(names, metricName)
+	}
+	return d.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (d *DaemonSetsRepo) GetDaemonSetList(ctx context.Context, orgID valuer.UUID, req model.DaemonSetListRequest) (model.DaemonSetListResponse, error) {
 	resp := model.DaemonSetListResponse{}
 
@@ -287,6 +298,22 @@ func (d *DaemonSetsRepo) GetDaemonSetList(ctx context.Context, orgID valuer.UUID
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := d.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.DaemonSetListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.DaemonSetListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := WorkloadTableListQuery.Clone()

pkg/query-service/app/inframetrics/deployments.go

@@ -269,6 +269,17 @@ func (d *DeploymentsRepo) getTopDeploymentGroups(ctx context.Context, orgID valu
 	return topDeploymentGroups, allDeploymentGroups, nil
 }
 
+func (d *DeploymentsRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForWorkloads {
+		names = append(names, metricName)
+	}
+	for _, metricName := range metricNamesForDeployments {
+		names = append(names, metricName)
+	}
+	return d.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (d *DeploymentsRepo) GetDeploymentList(ctx context.Context, orgID valuer.UUID, req model.DeploymentListRequest) (model.DeploymentListResponse, error) {
 	resp := model.DeploymentListResponse{}
 
@@ -287,6 +298,22 @@ func (d *DeploymentsRepo) GetDeploymentList(ctx context.Context, orgID valuer.UU
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := d.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.DeploymentListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.DeploymentListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := WorkloadTableListQuery.Clone()

pkg/query-service/app/inframetrics/hosts.go

@@ -67,10 +67,11 @@ var (
 		GetDotMetrics("os_type"),
 	}
 	metricNamesForHosts = map[string]string{
-		"cpu":    GetDotMetrics("system_cpu_time"),
-		"memory": GetDotMetrics("system_memory_usage"),
-		"load15": GetDotMetrics("system_cpu_load_average_15m"),
-		"wait":   GetDotMetrics("system_cpu_time"),
+		"filesystem": GetDotMetrics("system_filesystem_usage"),
+		"cpu":        GetDotMetrics("system_cpu_time"),
+		"memory":     GetDotMetrics("system_memory_usage"),
+		"load15":     GetDotMetrics("system_cpu_load_average_15m"),
+		"wait":       GetDotMetrics("system_cpu_time"),
 	}
 )
 
@@ -316,24 +317,15 @@ func (h *HostsRepo) getTopHostGroups(ctx context.Context, orgID valuer.UUID, req
 	return topHostGroups, allHostGroups, nil
 }
 
-func (h *HostsRepo) DidSendHostMetricsData(ctx context.Context, req model.HostListRequest) (bool, error) {
-
+// GetHostMetricsExistenceAndEarliestTime returns (count, minFirstReportedUnixMilli, error) for host metrics
+// in distributed_metadata. Uses metricNamesForHosts plus system.filesystem.usage.
+func (h *HostsRepo) GetHostMetricsExistenceAndEarliestTime(ctx context.Context, req model.HostListRequest) (uint64, uint64, error) {
 	names := []string{}
 	for _, metricName := range metricNamesForHosts {
 		names = append(names, metricName)
 	}
 
-	namesStr := "'" + strings.Join(names, "','") + "'"
-
-	query := fmt.Sprintf("SELECT count() FROM %s.%s WHERE metric_name IN (%s)",
-		constants.SIGNOZ_METRIC_DBNAME, constants.SIGNOZ_TIMESERIES_v4_1DAY_TABLENAME, namesStr)
-
-	count, err := h.reader.GetCountOfThings(ctx, query)
-	if err != nil {
-		return false, err
-	}
-
-	return count > 0, nil
+	return h.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
 }
 
 func (h *HostsRepo) IsSendingK8SAgentMetrics(ctx context.Context, req model.HostListRequest) ([]string, []string, error) {
@@ -412,8 +404,25 @@ func (h *HostsRepo) GetHostList(ctx context.Context, orgID valuer.UUID, req mode
 		resp.ClusterNames = clusterNames
 		resp.NodeNames = nodeNames
 	}
-	if sentAnyHostMetricsData, err := h.DidSendHostMetricsData(ctx, req); err == nil {
-		resp.SentAnyHostMetricsData = sentAnyHostMetricsData
+
+	// 1. Check if any host metrics exist and get earliest retention time
+	// if no hosts metrics exist, that means we should show the onboarding guide on UI, and return early.
+	// 2. If host metrics exist, but req.End is earlier than the earliest time of host metrics as read from
+	// metadata table, then we should convey the same to the user and return early
+	if count, minFirstReportedUnixMilli, err := h.GetHostMetricsExistenceAndEarliestTime(ctx, req); err == nil {
+		if count == 0 {
+			resp.SentAnyHostMetricsData = false
+			resp.Records = []model.HostListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyHostMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.HostListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
 	}
 
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))

pkg/query-service/app/inframetrics/jobs.go

@@ -313,6 +313,17 @@ func (d *JobsRepo) getTopJobGroups(ctx context.Context, orgID valuer.UUID, req m
 	return topJobGroups, allJobGroups, nil
 }
 
+func (d *JobsRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForWorkloads {
+		names = append(names, metricName)
+	}
+	for _, metricName := range metricNamesForJobs {
+		names = append(names, metricName)
+	}
+	return d.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (d *JobsRepo) GetJobList(ctx context.Context, orgID valuer.UUID, req model.JobListRequest) (model.JobListResponse, error) {
 	resp := model.JobListResponse{}
 
@@ -331,6 +342,22 @@ func (d *JobsRepo) GetJobList(ctx context.Context, orgID valuer.UUID, req model.
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := d.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.JobListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.JobListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := WorkloadTableListQuery.Clone()

pkg/query-service/app/inframetrics/namespaces.go

@@ -196,6 +196,14 @@ func (p *NamespacesRepo) getTopNamespaceGroups(ctx context.Context, orgID valuer
 	return topNamespaceGroups, allNamespaceGroups, nil
 }
 
+func (p *NamespacesRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForPods {
+		names = append(names, metricName)
+	}
+	return p.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (p *NamespacesRepo) GetNamespaceList(ctx context.Context, orgID valuer.UUID, req model.NamespaceListRequest) (model.NamespaceListResponse, error) {
 	resp := model.NamespaceListResponse{}
 
@@ -214,6 +222,22 @@ func (p *NamespacesRepo) GetNamespaceList(ctx context.Context, orgID valuer.UUID
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := p.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.NamespaceListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.NamespaceListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := PodsTableListQuery.Clone()

pkg/query-service/app/inframetrics/nodes.go

@@ -226,6 +226,14 @@ func (p *NodesRepo) getTopNodeGroups(ctx context.Context, orgID valuer.UUID, req
 	return topNodeGroups, allNodeGroups, nil
 }
 
+func (p *NodesRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForNodes {
+		names = append(names, metricName)
+	}
+	return p.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (p *NodesRepo) GetNodeList(ctx context.Context, orgID valuer.UUID, req model.NodeListRequest) (model.NodeListResponse, error) {
 	resp := model.NodeListResponse{}
 
@@ -244,6 +252,22 @@ func (p *NodesRepo) GetNodeList(ctx context.Context, orgID valuer.UUID, req mode
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := p.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.NodeListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.NodeListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := NodesTableListQuery.Clone()

pkg/query-service/app/inframetrics/pods.go

@@ -371,6 +371,14 @@ func (p *PodsRepo) getTopPodGroups(ctx context.Context, orgID valuer.UUID, req m
 	return topPodGroups, allPodGroups, nil
 }
 
+func (p *PodsRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForPods {
+		names = append(names, metricName)
+	}
+	return p.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (p *PodsRepo) GetPodList(ctx context.Context, orgID valuer.UUID, req model.PodListRequest) (model.PodListResponse, error) {
 	resp := model.PodListResponse{}
 
@@ -389,6 +397,22 @@ func (p *PodsRepo) GetPodList(ctx context.Context, orgID valuer.UUID, req model.
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := p.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.PodListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.PodListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := PodsTableListQuery.Clone()

pkg/query-service/app/inframetrics/processes.go

@@ -210,6 +210,14 @@ func (p *ProcessesRepo) getTopProcessGroups(ctx context.Context, orgID valuer.UU
 	return topProcessGroups, allProcessGroups, nil
 }
 
+func (p *ProcessesRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForProcesses {
+		names = append(names, metricName)
+	}
+	return p.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (p *ProcessesRepo) GetProcessList(ctx context.Context, orgID valuer.UUID, req model.ProcessListRequest) (model.ProcessListResponse, error) {
 	resp := model.ProcessListResponse{}
 	if req.Limit == 0 {
@@ -229,6 +237,22 @@ func (p *ProcessesRepo) GetProcessList(ctx context.Context, orgID valuer.UUID, r
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := p.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.ProcessListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.ProcessListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := ProcessesTableListQuery.Clone()

pkg/query-service/app/inframetrics/pvcs.go

@@ -229,6 +229,14 @@ func (p *PvcsRepo) getTopVolumeGroups(ctx context.Context, orgID valuer.UUID, re
 	return topVolumeGroups, allVolumeGroups, nil
 }
 
+func (p *PvcsRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForVolumes {
+		names = append(names, metricName)
+	}
+	return p.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (p *PvcsRepo) GetPvcList(ctx context.Context, orgID valuer.UUID, req model.VolumeListRequest) (model.VolumeListResponse, error) {
 	resp := model.VolumeListResponse{}
 
@@ -247,6 +255,22 @@ func (p *PvcsRepo) GetPvcList(ctx context.Context, orgID valuer.UUID, req model.
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := p.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.VolumeListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.VolumeListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := PvcsTableListQuery.Clone()

pkg/query-service/app/inframetrics/statefulsets.go

@@ -269,6 +269,17 @@ func (d *StatefulSetsRepo) getTopStatefulSetGroups(ctx context.Context, orgID va
 	return topStatefulSetGroups, allStatefulSetGroups, nil
 }
 
+func (d *StatefulSetsRepo) GetMetricsExistenceAndEarliestTime(ctx context.Context) (uint64, uint64, error) {
+	names := []string{}
+	for _, metricName := range metricNamesForWorkloads {
+		names = append(names, metricName)
+	}
+	for _, metricName := range metricNamesForStatefulSets {
+		names = append(names, metricName)
+	}
+	return d.reader.GetMetricsExistenceAndEarliestTime(ctx, names)
+}
+
 func (d *StatefulSetsRepo) GetStatefulSetList(ctx context.Context, orgID valuer.UUID, req model.StatefulSetListRequest) (model.StatefulSetListResponse, error) {
 	resp := model.StatefulSetListResponse{}
 
@@ -287,6 +298,22 @@ func (d *StatefulSetsRepo) GetStatefulSetList(ctx context.Context, orgID valuer.
 		resp.Type = model.ResponseTypeGroupedList
 	}
 
+	if count, minFirstReportedUnixMilli, err := d.GetMetricsExistenceAndEarliestTime(ctx); err == nil {
+		if count == 0 {
+			resp.SentAnyMetricsData = false
+			resp.Records = []model.StatefulSetListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+		resp.SentAnyMetricsData = true
+		if req.End < int64(minFirstReportedUnixMilli) {
+			resp.EndTimeBeforeRetention = true
+			resp.Records = []model.StatefulSetListRecord{}
+			resp.Total = 0
+			return resp, nil
+		}
+	}
+
 	step := int64(math.Max(float64(common.MinAllowedStepInterval(req.Start, req.End)), 60))
 
 	query := WorkloadTableListQuery.Clone()

pkg/query-service/constants/constants.go

@@ -125,6 +125,8 @@ const (
 	SIGNOZ_TIMESERIES_v4_6HRS_TABLENAME        = "distributed_time_series_v4_6hrs"
 	SIGNOZ_ATTRIBUTES_METADATA_TABLENAME       = "distributed_attributes_metadata"
 	SIGNOZ_ATTRIBUTES_METADATA_LOCAL_TABLENAME = "attributes_metadata"
+	SIGNOZ_METADATA_TABLENAME                  = "distributed_metadata"
+	SIGNOZ_METADATA_LOCAL_TABLENAME            = "metadata"
 )
 
 // alert related constants

pkg/query-service/interfaces/interface.go

@@ -100,6 +100,8 @@ type Reader interface {
 
 	GetCountOfThings(ctx context.Context, query string) (uint64, error)
 
+	GetMetricsExistenceAndEarliestTime(ctx context.Context, metricNames []string) (uint64, uint64, error)
+
 	//trace
 	GetTraceFields(ctx context.Context) (*model.GetFieldsResponse, *model.ApiError)
 	UpdateTraceField(ctx context.Context, field *model.UpdateField) *model.ApiError

pkg/query-service/model/infra.go

@@ -44,6 +44,7 @@ type HostListResponse struct {
 	IsSendingK8SAgentMetrics bool             `json:"isSendingK8SAgentMetrics"`
 	ClusterNames             []string         `json:"clusterNames"`
 	NodeNames                []string         `json:"nodeNames"`
+	EndTimeBeforeRetention   bool             `json:"endTimeBeforeRetention"`
 }
 
 func (r *HostListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -85,9 +86,11 @@ type ProcessListRequest struct {
 }
 
 type ProcessListResponse struct {
-	Type    ResponseType        `json:"type"`
-	Records []ProcessListRecord `json:"records"`
-	Total   int                 `json:"total"`
+	Type                   ResponseType        `json:"type"`
+	Records                []ProcessListRecord `json:"records"`
+	Total                  int                 `json:"total"`
+	SentAnyMetricsData     bool                `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool                `json:"endTimeBeforeRetention"`
 }
 
 type ProcessListRecord struct {
@@ -111,9 +114,11 @@ type PodListRequest struct {
 }
 
 type PodListResponse struct {
-	Type    ResponseType    `json:"type"`
-	Records []PodListRecord `json:"records"`
-	Total   int             `json:"total"`
+	Type                   ResponseType    `json:"type"`
+	Records                []PodListRecord `json:"records"`
+	Total                  int             `json:"total"`
+	SentAnyMetricsData     bool            `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool            `json:"endTimeBeforeRetention"`
 }
 
 func (r *PodListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -189,9 +194,11 @@ type NodeListRequest struct {
 }
 
 type NodeListResponse struct {
-	Type    ResponseType     `json:"type"`
-	Records []NodeListRecord `json:"records"`
-	Total   int              `json:"total"`
+	Type                   ResponseType     `json:"type"`
+	Records                []NodeListRecord `json:"records"`
+	Total                  int              `json:"total"`
+	SentAnyMetricsData     bool             `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool             `json:"endTimeBeforeRetention"`
 }
 
 func (r *NodeListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -250,9 +257,11 @@ type NamespaceListRequest struct {
 }
 
 type NamespaceListResponse struct {
-	Type    ResponseType          `json:"type"`
-	Records []NamespaceListRecord `json:"records"`
-	Total   int                   `json:"total"`
+	Type                   ResponseType          `json:"type"`
+	Records                []NamespaceListRecord `json:"records"`
+	Total                  int                   `json:"total"`
+	SentAnyMetricsData     bool                  `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool                  `json:"endTimeBeforeRetention"`
 }
 
 func (r *NamespaceListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -299,9 +308,11 @@ type ClusterListRequest struct {
 }
 
 type ClusterListResponse struct {
-	Type    ResponseType        `json:"type"`
-	Records []ClusterListRecord `json:"records"`
-	Total   int                 `json:"total"`
+	Type                   ResponseType        `json:"type"`
+	Records                []ClusterListRecord `json:"records"`
+	Total                  int                 `json:"total"`
+	SentAnyMetricsData     bool                `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool                `json:"endTimeBeforeRetention"`
 }
 
 func (r *ClusterListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -353,9 +364,11 @@ type DeploymentListRequest struct {
 }
 
 type DeploymentListResponse struct {
-	Type    ResponseType           `json:"type"`
-	Records []DeploymentListRecord `json:"records"`
-	Total   int                    `json:"total"`
+	Type                   ResponseType           `json:"type"`
+	Records                []DeploymentListRecord `json:"records"`
+	Total                  int                    `json:"total"`
+	SentAnyMetricsData     bool                   `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention"`
 }
 
 func (r *DeploymentListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -432,9 +445,11 @@ type DaemonSetListRequest struct {
 }
 
 type DaemonSetListResponse struct {
-	Type    ResponseType          `json:"type"`
-	Records []DaemonSetListRecord `json:"records"`
-	Total   int                   `json:"total"`
+	Type                   ResponseType          `json:"type"`
+	Records                []DaemonSetListRecord `json:"records"`
+	Total                  int                   `json:"total"`
+	SentAnyMetricsData     bool                  `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool                  `json:"endTimeBeforeRetention"`
 }
 
 func (r *DaemonSetListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -511,9 +526,11 @@ type StatefulSetListRequest struct {
 }
 
 type StatefulSetListResponse struct {
-	Type    ResponseType            `json:"type"`
-	Records []StatefulSetListRecord `json:"records"`
-	Total   int                     `json:"total"`
+	Type                   ResponseType            `json:"type"`
+	Records                []StatefulSetListRecord `json:"records"`
+	Total                  int                     `json:"total"`
+	SentAnyMetricsData     bool                    `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool                    `json:"endTimeBeforeRetention"`
 }
 
 func (r *StatefulSetListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -590,9 +607,11 @@ type JobListRequest struct {
 }
 
 type JobListResponse struct {
-	Type    ResponseType    `json:"type"`
-	Records []JobListRecord `json:"records"`
-	Total   int             `json:"total"`
+	Type                   ResponseType    `json:"type"`
+	Records                []JobListRecord `json:"records"`
+	Total                  int             `json:"total"`
+	SentAnyMetricsData     bool            `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool            `json:"endTimeBeforeRetention"`
 }
 
 func (r *JobListResponse) SortBy(orderBy *v3.OrderBy) {
@@ -679,9 +698,11 @@ type VolumeListRequest struct {
 }
 
 type VolumeListResponse struct {
-	Type    ResponseType       `json:"type"`
-	Records []VolumeListRecord `json:"records"`
-	Total   int                `json:"total"`
+	Type                   ResponseType       `json:"type"`
+	Records                []VolumeListRecord `json:"records"`
+	Total                  int                `json:"total"`
+	SentAnyMetricsData     bool               `json:"sentAnyMetricsData"`
+	EndTimeBeforeRetention bool               `json:"endTimeBeforeRetention"`
 }
 
 func (r *VolumeListResponse) SortBy(orderBy *v3.OrderBy) {

pkg/types/organization.go

@@ -41,21 +41,6 @@ func NewOrganization(displayName string, name string) *Organization {
 	}
 }
 
-func NewOrganizationWithID(id valuer.UUID, displayName string, name string) *Organization {
-	return &Organization{
-		Identifiable: Identifiable{
-			ID: id,
-		},
-		TimeAuditable: TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-		Name:        name,
-		DisplayName: displayName,
-		Key:         NewOrganizationKey(id),
-	}
-}
-
 func NewOrganizationKey(orgID valuer.UUID) uint32 {
 	hasher := fnv.New32a()