Merge branch 'main' into SIG-7395-1

.devenv/docker/clickhouse/compose.yaml

@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.42
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.42
     container_name: schema-migrator-async
     command:
       - async

deploy/docker-swarm/docker-compose.ha.yaml

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.85.0
+    image: signoz/signoz:v0.85.2
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -206,7 +206,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.41
+    image: signoz/signoz-otel-collector:v0.111.42
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -230,7 +230,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.42
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.85.0
+    image: signoz/signoz:v0.85.2
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -141,7 +141,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.41
+    image: signoz/signoz-otel-collector:v0.111.42
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -165,7 +165,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.41
+    image: signoz/signoz-schema-migrator:v0.111.42
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.85.0}
+    image: signoz/signoz:${VERSION:-v0.85.2}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -210,7 +210,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.42}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -236,7 +236,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -247,7 +247,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.85.0}
+    image: signoz/signoz:${VERSION:-v0.85.2}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -142,7 +142,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.42}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -164,7 +164,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -176,7 +176,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.41}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-async
     command:
       - async

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,9 +7,11 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
+	CustomTimeType,
 	FixedDurationSuggestionOptions,
 	Options,
 	RelativeDurationSuggestionOptions,
+	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
 import { isValidTimeFormat } from 'lib/getMinMax';
@@ -56,6 +58,10 @@ interface CustomTimePickerProps {
 	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
 	handleGoLive?: () => void;
+	onTimeChange?: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
 }
 
 function CustomTimePicker({
@@ -73,6 +79,7 @@ function CustomTimePicker({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	handleGoLive,
+	onTimeChange,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -336,6 +343,7 @@ function CustomTimePicker({
 							setActiveView={setActiveView}
 							setIsOpenedFromFooter={setIsOpenedFromFooter}
 							isOpenedFromFooter={isOpenedFromFooter}
+							onTimeChange={onTimeChange}
 						/>
 					) : (
 						content
@@ -405,4 +413,5 @@ CustomTimePicker.defaultProps = {
 	onCustomDateHandler: noop,
 	handleGoLive: noop,
 	onCustomTimeStatusUpdate: noop,
+	onTimeChange: undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -7,9 +7,11 @@ import cx from 'classnames';
 import ROUTES from 'constants/routes';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
+	CustomTimeType,
 	LexicalContext,
 	Option,
 	RelativeDurationSuggestionOptions,
+	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
@@ -35,6 +37,10 @@ interface CustomTimePickerPopoverContentProps {
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
+	onTimeChange?: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -51,6 +57,7 @@ function CustomTimePickerPopoverContent({
 	setActiveView,
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
+	onTimeChange,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
@@ -143,6 +150,7 @@ function CustomTimePickerPopoverContent({
 							setIsOpen={setIsOpen}
 							onCustomDateHandler={onCustomDateHandler}
 							selectedTime={selectedTime}
+							onTimeChange={onTimeChange}
 						/>
 					) : (
 						<div className="relative-times-container">
@@ -181,4 +189,8 @@ function CustomTimePickerPopoverContent({
 	);
 }
 
+CustomTimePickerPopoverContent.defaultProps = {
+	onTimeChange: undefined,
+};
+
 export default CustomTimePickerPopoverContent;

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,9 +1,14 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import './RangePickerModal.styles.scss';
 
 import { DatePicker } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
+import {
+	CustomTimeType,
+	LexicalContext,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs, { Dayjs } from 'dayjs';
 import { useTimezone } from 'providers/Timezone';
 import { Dispatch, SetStateAction, useMemo } from 'react';
@@ -19,6 +24,10 @@ interface RangePickerModalProps {
 		lexicalContext?: LexicalContext | undefined,
 	) => void;
 	selectedTime: string;
+	onTimeChange?: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
 }
 
 function RangePickerModal(props: RangePickerModalProps): JSX.Element {
@@ -27,6 +36,7 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 		setIsOpen,
 		onCustomDateHandler,
 		selectedTime,
+		onTimeChange,
 	} = props;
 	const { RangePicker } = DatePicker;
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
@@ -74,13 +84,22 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 					date.tz(timezone.value).format(DATE_TIME_FORMATS.ISO_DATETIME)
 				}
 				onOk={onModalOkHandler}
-				// eslint-disable-next-line react/jsx-props-no-spreading
+				{...(selectedTime === 'custom' &&
-				{...(selectedTime === 'custom' && {
+					!onTimeChange && {
-					value: rangeValue,
+						value: rangeValue,
-				})}
+					})}
+				// use default value if onTimeChange is provided
+				{...(selectedTime === 'custom' &&
+					onTimeChange && {
+						defaultValue: rangeValue,
+					})}
 			/>
 		</div>
 	);
 }
 
+RangePickerModal.defaultProps = {
+	onTimeChange: undefined,
+};
+
 export default RangePickerModal;

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -26,6 +26,7 @@ import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { VIEWS } from '../constants';
 import { getHostTracesQueryPayload, selectedColumns } from './constants';
 import { getListColumns } from './utils';
 
@@ -39,7 +40,10 @@ interface Props {
 		interval: Time | CustomTimeType,
 		dateTimeRange?: [number, number],
 	) => void;
-	handleChangeTracesFilters: (value: IBuilderQuery['filters']) => void;
+	handleChangeTracesFilters: (
+		value: IBuilderQuery['filters'],
+		view: VIEWS,
+	) => void;
 	tracesFilters: IBuilderQuery['filters'];
 	selectedInterval: Time;
 }
@@ -70,14 +74,16 @@ function HostMetricTraces({
 							...currentQuery.builder.queryData[0].aggregateAttribute,
 						},
 						filters: {
-							items: [],
+							items: tracesFilters.items.filter(
+								(item) => item.key?.key !== 'host.name',
+							),
 							op: 'AND',
 						},
 					},
 				],
 			},
 		}),
-		[currentQuery],
+		[currentQuery, tracesFilters.items],
 	);
 
 	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
@@ -153,14 +159,16 @@ function HostMetricTraces({
 					{query && (
 						<QueryBuilderSearch
 							query={query}
-							onChange={handleChangeTracesFilters}
+							onChange={(value): void =>
+								handleChangeTracesFilters(value, VIEWS.TRACES)
+							}
 							disableNavigationShortcuts
 						/>
 					)}
 				</div>
 				<div className="datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						isModalTimeSelection={isModalTimeSelection}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -19,6 +19,8 @@ import {
 	initialQueryState,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { getFiltersFromParams } from 'container/InfraMonitoringK8s/commonUtils';
+import { INFRA_MONITORING_K8S_PARAMS_KEYS } from 'container/InfraMonitoringK8s/constants';
 import {
 	CustomTimeType,
 	Time,
@@ -93,8 +95,18 @@ function HostMetricsDetails({
 	);
 	const isDarkMode = useIsDarkMode();
 
-	const initialFilters = useMemo(
+	const initialFilters = useMemo(() => {
-		() => ({
+		const urlView = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW);
+		const queryKey =
+			urlView === VIEW_TYPES.LOGS
+				? INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS
+				: INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS;
+		const filters = getFiltersFromParams(searchParams, queryKey);
+		if (filters) {
+			return filters;
+		}
+
+		return {
 			op: 'AND',
 			items: [
 				{
@@ -111,9 +123,8 @@ function HostMetricsDetails({
 					value: host?.hostName || '',
 				},
 			],
-		}),
+		};
-		[host?.hostName],
+	}, [host?.hostName, searchParams]);
-	);
 
 	const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>(
 		initialFilters,
@@ -154,7 +165,13 @@ function HostMetricsDetails({
 	const handleTabChange = (e: RadioChangeEvent): void => {
 		setSelectedView(e.target.value);
 		if (host?.hostName) {
-			setSearchParams({ hostName: host?.hostName, view: e.target.value });
+			setSelectedView(e.target.value);
+			setSearchParams({
+				...Object.fromEntries(searchParams.entries()),
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: e.target.value,
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(null),
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(null),
+			});
 		}
 		logEvent(InfraMonitoringEvents.TabChanged, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -191,7 +208,7 @@ function HostMetricsDetails({
 	);
 
 	const handleChangeLogFilters = useCallback(
-		(value: IBuilderQuery['filters']) => {
+		(value: IBuilderQuery['filters'], view: VIEWS) => {
 			setLogFilters((prevFilters) => {
 				const hostNameFilter = prevFilters.items.find(
 					(item) => item.key?.key === 'host.name',
@@ -209,7 +226,7 @@ function HostMetricsDetails({
 					});
 				}
 
-				return {
+				const updatedFilters = {
 					op: 'AND',
 					items: [
 						hostNameFilter,
@@ -217,6 +234,15 @@ function HostMetricsDetails({
 						...(paginationFilter ? [paginationFilter] : []),
 					].filter((item): item is TagFilterItem => item !== undefined),
 				};
+
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(
+						updatedFilters,
+					),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
+				});
+				return updatedFilters;
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -224,7 +250,7 @@ function HostMetricsDetails({
 	);
 
 	const handleChangeTracesFilters = useCallback(
-		(value: IBuilderQuery['filters']) => {
+		(value: IBuilderQuery['filters'], view: VIEWS) => {
 			setTracesFilters((prevFilters) => {
 				const hostNameFilter = prevFilters.items.find(
 					(item) => item.key?.key === 'host.name',
@@ -238,13 +264,23 @@ function HostMetricsDetails({
 					});
 				}
 
-				return {
+				const updatedFilters = {
 					op: 'AND',
 					items: [
 						hostNameFilter,
 						...value.items.filter((item) => item.key?.key !== 'host.name'),
 					].filter((item): item is TagFilterItem => item !== undefined),
 				};
+
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(
+						updatedFilters,
+					),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
+				});
+
+				return updatedFilters;
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx

@@ -11,6 +11,7 @@ import { useMemo } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { VIEWS } from '../constants';
 import HostMetricsLogs from './HostMetricsLogs';
 
 interface Props {
@@ -23,7 +24,7 @@ interface Props {
 		interval: Time | CustomTimeType,
 		dateTimeRange?: [number, number],
 	) => void;
-	handleChangeLogFilters: (value: IBuilderQuery['filters']) => void;
+	handleChangeLogFilters: (value: IBuilderQuery['filters'], view: VIEWS) => void;
 	logFilters: IBuilderQuery['filters'];
 	selectedInterval: Time;
 }
@@ -51,14 +52,14 @@ function HostMetricLogsDetailedView({
 							...currentQuery.builder.queryData[0].aggregateAttribute,
 						},
 						filters: {
-							items: [],
+							items: logFilters.items.filter((item) => item.key?.key !== 'host.name'),
 							op: 'AND',
 						},
 					},
 				],
 			},
 		}),
-		[currentQuery],
+		[currentQuery, logFilters.items],
 	);
 
 	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
@@ -70,14 +71,14 @@ function HostMetricLogsDetailedView({
 					{query && (
 						<QueryBuilderSearch
 							query={query}
-							onChange={handleChangeLogFilters}
+							onChange={(value): void => handleChangeLogFilters(value, VIEWS.LOGS)}
 							disableNavigationShortcuts
 						/>
 					)}
 				</div>
 				<div className="datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						isModalTimeSelection={isModalTimeSelection}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -18,7 +18,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -68,6 +68,45 @@ function Metrics({
 		[queries],
 	);
 
+	const [graphTimeIntervals, setGraphTimeIntervals] = useState<
+		{
+			start: number;
+			end: number;
+		}[]
+	>(
+		new Array(queries.length).fill({
+			start: timeRange.startTime,
+			end: timeRange.endTime,
+		}),
+	);
+
+	useEffect(() => {
+		setGraphTimeIntervals(
+			new Array(queries.length).fill({
+				start: timeRange.startTime,
+				end: timeRange.endTime,
+			}),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [timeRange]);
+
+	const onDragSelect = useCallback(
+		(start: number, end: number, graphIndex: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			setGraphTimeIntervals((prev) => {
+				const newIntervals = [...prev];
+				newIntervals[graphIndex] = {
+					start: Math.floor(startTimestamp / 1000),
+					end: Math.floor(endTimestamp / 1000),
+				};
+				return newIntervals;
+			});
+		},
+		[],
+	);
+
 	const options = useMemo(
 		() =>
 			queries.map(({ data }, idx) =>
@@ -78,12 +117,12 @@ function Metrics({
 					yAxisUnit: hostWidgetInfo[idx].yAxisUnit,
 					softMax: null,
 					softMin: null,
-					minTimeScale: timeRange.startTime,
+					minTimeScale: graphTimeIntervals[idx].start,
-					maxTimeScale: timeRange.endTime,
+					maxTimeScale: graphTimeIntervals[idx].end,
-					enableZoom: true,
+					onDragSelect: (start, end) => onDragSelect(start, end, idx),
 				}),
 			),
-		[queries, isDarkMode, dimensions, timeRange.startTime, timeRange.endTime],
+		[queries, isDarkMode, dimensions, graphTimeIntervals, onDragSelect],
 	);
 
 	const renderCardContent = (

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -191,8 +191,9 @@ function GridCardGraph({
 
 	const isLogsQuery = useMemo(
 		() =>
-			requestData.query.builder.queryData.every(
+			requestData?.query?.builder?.queryData?.length > 0 &&
-				(query) => query.dataSource === DataSource.LOGS,
+			requestData?.query?.builder?.queryData?.every(
+				(query) => query?.dataSource === DataSource.LOGS,
 			),
 		[requestData.query],
 	);
@@ -203,7 +204,7 @@ function GridCardGraph({
 			variables: getDashboardVariables(variables),
 			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
 			globalSelectedInterval:
-				widget.panelTypes === PANEL_TYPES.LIST && isLogsQuery
+				widget?.panelTypes === PANEL_TYPES.LIST && isLogsQuery
 					? 'custom'
 					: globalSelectedInterval,
 			start: customTimeRange?.startTime || start,

frontend/src/container/InfraMonitoringHosts/HostsListControls.tsx

@@ -58,7 +58,7 @@ function HostsListControls({
 
 			<div className="time-selector">
 				<DateTimeSelectionV2
-					showAutoRefresh={false}
+					showAutoRefresh
 					showRefreshText={false}
 					hideShareModal
 				/>

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

@@ -59,11 +59,26 @@ function K8sClustersList({
 		(state) => state.globalTime,
 	);
 
-	const [currentPage, setCurrentPage] = useState(1);
-
-	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
 	const [searchParams, setSearchParams] = useSearchParams();
 
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
+
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
 		order: 'asc' | 'desc';
@@ -115,7 +130,9 @@ function K8sClustersList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -309,7 +326,11 @@ function K8sClustersList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -319,7 +340,8 @@ function K8sClustersList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

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

@@ -61,11 +61,26 @@ function K8sDaemonSetsList({
 		(state) => state.globalTime,
 	);
 
-	const [currentPage, setCurrentPage] = useState(1);
 	const [searchParams, setSearchParams] = useSearchParams();
 
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
 	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
 
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
+
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
 		order: 'asc' | 'desc';
@@ -117,7 +132,9 @@ function K8sDaemonSetsList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -313,7 +330,11 @@ function K8sDaemonSetsList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -323,7 +344,8 @@ function K8sDaemonSetsList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

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

@@ -61,10 +61,26 @@ function K8sDeploymentsList({
 		(state) => state.globalTime,
 	);
 
-	const [currentPage, setCurrentPage] = useState(1);
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
 
 	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
-	const [searchParams, setSearchParams] = useSearchParams();
 
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
@@ -117,7 +133,9 @@ function K8sDeploymentsList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -315,7 +333,11 @@ function K8sDeploymentsList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -325,7 +347,8 @@ function K8sDeploymentsList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

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

@@ -259,7 +259,7 @@ export default function Events({
 				</div>
 				<div className="datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						isModalTimeSelection={isModalTimeSelection}

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

@@ -86,7 +86,7 @@ function EntityLogsDetailedView({
 				</div>
 				<div className="datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						isModalTimeSelection={isModalTimeSelection}

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

@@ -23,7 +23,7 @@ import {
 } from 'lib/dashboard/getQueryResults';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -94,6 +94,45 @@ function EntityMetrics<T>({
 		[queries],
 	);
 
+	const [graphTimeIntervals, setGraphTimeIntervals] = useState<
+		{
+			start: number;
+			end: number;
+		}[]
+	>(
+		new Array(queries.length).fill({
+			start: timeRange.startTime,
+			end: timeRange.endTime,
+		}),
+	);
+
+	useEffect(() => {
+		setGraphTimeIntervals(
+			new Array(queries.length).fill({
+				start: timeRange.startTime,
+				end: timeRange.endTime,
+			}),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [timeRange]);
+
+	const onDragSelect = useCallback(
+		(start: number, end: number, graphIndex: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			setGraphTimeIntervals((prev) => {
+				const newIntervals = [...prev];
+				newIntervals[graphIndex] = {
+					start: Math.floor(startTimestamp / 1000),
+					end: Math.floor(endTimestamp / 1000),
+				};
+				return newIntervals;
+			});
+		},
+		[],
+	);
+
 	const options = useMemo(
 		() =>
 			queries.map(({ data }, idx) => {
@@ -108,9 +147,9 @@ function EntityMetrics<T>({
 					yAxisUnit: entityWidgetInfo[idx].yAxisUnit,
 					softMax: null,
 					softMin: null,
-					minTimeScale: timeRange.startTime,
+					minTimeScale: graphTimeIntervals[idx].start,
-					maxTimeScale: timeRange.endTime,
+					maxTimeScale: graphTimeIntervals[idx].end,
-					enableZoom: true,
+					onDragSelect: (start, end) => onDragSelect(start, end, idx),
 				});
 			}),
 		[
@@ -118,8 +157,8 @@ function EntityMetrics<T>({
 			isDarkMode,
 			dimensions,
 			entityWidgetInfo,
-			timeRange.startTime,
+			graphTimeIntervals,
-			timeRange.endTime,
+			onDragSelect,
 		],
 	);
 

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

@@ -177,7 +177,7 @@ function EntityTraces({
 				</div>
 				<div className="datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						isModalTimeSelection={isModalTimeSelection}

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

@@ -60,11 +60,26 @@ function K8sJobsList({
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
+	const [searchParams, setSearchParams] = useSearchParams();
 
-	const [currentPage, setCurrentPage] = useState(1);
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
 
 	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
-	const [searchParams, setSearchParams] = useSearchParams();
 
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
@@ -112,7 +127,9 @@ function K8sJobsList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -300,7 +317,11 @@ function K8sJobsList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -310,7 +331,8 @@ function K8sJobsList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

@@ -136,7 +136,7 @@ function K8sHeader({
 
 			<div className="k8s-list-controls-right">
 				<DateTimeSelectionV2
-					showAutoRefresh={false}
+					showAutoRefresh
 					showRefreshText={false}
 					hideShareModal
 				/>

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

@@ -60,11 +60,26 @@ function K8sNamespacesList({
 		(state) => state.globalTime,
 	);
 
-	const [currentPage, setCurrentPage] = useState(1);
-
 	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
 	const [searchParams, setSearchParams] = useSearchParams();
 
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
+
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
 		order: 'asc' | 'desc';
@@ -116,7 +131,9 @@ function K8sNamespacesList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -312,7 +329,11 @@ function K8sNamespacesList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -322,7 +343,8 @@ function K8sNamespacesList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

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

@@ -59,12 +59,26 @@ function K8sNodesList({
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-
-	const [currentPage, setCurrentPage] = useState(1);
-
-	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
 	const [searchParams, setSearchParams] = useSearchParams();
 
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
+
+	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
 		order: 'asc' | 'desc';
@@ -111,7 +125,9 @@ function K8sNodesList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -299,7 +315,11 @@ function K8sNodesList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -309,7 +329,8 @@ function K8sNodesList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

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

@@ -64,7 +64,22 @@ function K8sPodsList({
 	);
 	const [searchParams, setSearchParams] = useSearchParams();
 
-	const [currentPage, setCurrentPage] = useState(1);
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
 
 	const [addedColumns, setAddedColumns] = useState<IEntityColumn[]>([]);
 
@@ -123,7 +138,9 @@ function K8sPodsList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	useEffect(() => {
@@ -314,7 +331,11 @@ function K8sPodsList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -324,7 +345,8 @@ function K8sPodsList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	const handleGroupByChange = useCallback(

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

@@ -60,10 +60,26 @@ function K8sStatefulSetsList({
 		(state) => state.globalTime,
 	);
 
-	const [currentPage, setCurrentPage] = useState(1);
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
 
 	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
-	const [searchParams, setSearchParams] = useSearchParams();
 
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
@@ -116,7 +132,9 @@ function K8sStatefulSetsList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -314,7 +332,11 @@ function K8sStatefulSetsList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -324,7 +346,8 @@ function K8sStatefulSetsList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

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

@@ -60,10 +60,26 @@ function K8sVolumesList({
 		(state) => state.globalTime,
 	);
 
-	const [currentPage, setCurrentPage] = useState(1);
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const [currentPage, setCurrentPage] = useState(() => {
+		const page = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE);
+		if (page) {
+			return parseInt(page, 10);
+		}
+		return 1;
+	});
+	const [filtersInitialised, setFiltersInitialised] = useState(false);
+
+	useEffect(() => {
+		setSearchParams({
+			...Object.fromEntries(searchParams.entries()),
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CURRENT_PAGE]: currentPage.toString(),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentPage]);
 
 	const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
-	const [searchParams, setSearchParams] = useSearchParams();
 
 	const [orderBy, setOrderBy] = useState<{
 		columnName: string;
@@ -116,7 +132,9 @@ function K8sVolumesList({
 
 	// Reset pagination every time quick filters are changed
 	useEffect(() => {
-		setCurrentPage(1);
+		if (quickFiltersLastUpdated !== -1) {
+			setCurrentPage(1);
+		}
 	}, [quickFiltersLastUpdated]);
 
 	const createFiltersForSelectedRowData = (
@@ -304,7 +322,11 @@ function K8sVolumesList({
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			handleChangeQueryData('filters', value);
-			setCurrentPage(1);
+			if (filtersInitialised) {
+				setCurrentPage(1);
+			} else {
+				setFiltersInitialised(true);
+			}
 
 			if (value.items.length > 0) {
 				logEvent(InfraMonitoringEvents.FilterApplied, {
@@ -314,7 +336,8 @@ function K8sVolumesList({
 				});
 			}
 		},
-		[handleChangeQueryData],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
 	);
 
 	useEffect(() => {

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -538,4 +538,5 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	TRACES_FILTERS: 'tracesFilters',
 	EVENTS_FILTERS: 'eventsFilters',
 	HOSTS_FILTERS: 'hostsFilters',
+	CURRENT_PAGE: 'currentPage',
 };

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
-import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
-import { Flex, Input, Tooltip, Typography } from 'antd';
+import { Flex, Input, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import saveAlertApi from 'api/alerts/save';
 import logEvent from 'api/common/logEvent';
@@ -175,41 +175,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		setData(filteredData);
 	});
 
-	const searchTooltipContent = (
-		<div style={{ maxWidth: 400 }}>
-			<div style={{ marginBottom: 8, fontWeight: 'bold' }}>Search Options:</div>
-			<div style={{ marginBottom: 4 }}>
-				• <strong>Plain text:</strong> Search across all fields
-			</div>
-			<div style={{ marginBottom: 4 }}>
-				• <strong>Key:value pairs:</strong> Specific field matching
-			</div>
-			<div style={{ marginBottom: 4 }}>
-				• <strong>Multiple terms:</strong> All terms must match (AND logic)
-			</div>
-			<div style={{ marginBottom: 8 }}>
-				• <strong>Status mapping:</strong> Use &quot;ok&quot; for inactive alerts
-			</div>
-			<div style={{ marginBottom: 8, fontWeight: 'bold' }}>Examples:</div>
-			<div style={{ marginBottom: 4 }}>
-				• <code>cpu warning</code> - Find alerts with both &quot;cpu&quot; and
-				&quot;warning&quot;
-			</div>
-			<div style={{ marginBottom: 4 }}>
-				• <code>status:ok</code> - Find alerts with OK status
-			</div>
-			<div style={{ marginBottom: 4 }}>
-				• <code>severity:critical</code> - Find critical alerts
-			</div>
-			<div style={{ marginBottom: 4 }}>
-				• <code>cluster:prod</code> - Find alerts with cluster=prod label
-			</div>
-			<div>
-				• <code>status:ok cpu</code> - Find OK alerts containing &quot;cpu&quot;
-			</div>
-		</div>
-	);
-
 	const dynamicColumns: ColumnsType<GettableAlert> = [
 		{
 			title: 'Created At',
@@ -379,22 +344,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 	return (
 		<>
 			<SearchContainer>
-				<div className="search-container">
+				<Search
-					<Search
+					placeholder="Search by Alert Name, Severity and Labels"
-						placeholder="Search by name, status, severity, labels or key:value or chaining (e.g. 'status:ok cpu warning')"
+					onChange={handleSearch}
-						onChange={handleSearch}
+					defaultValue={searchString}
-						defaultValue={searchString}
+				/>
-						prefix={
-							<Flex align="center" gap={8}>
-								<Tooltip title={searchTooltipContent} placement="bottomRight">
-									<InfoCircleOutlined className="search-tooltip" />
-								</Tooltip>
-								<div className="search-divider" />
-							</Flex>
-						}
-					/>
-				</div>
-
 				<Flex gap={12}>
 					{addNewAlert && (
 						<Button

frontend/src/container/ListAlertRules/__test__/utils.test.ts

@@ -0,0 +1,131 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { GettableAlert } from 'types/api/alerts/get';
+
+import { filterAlerts } from '../utils';
+
+describe('filterAlerts', () => {
+	const mockAlertBase: Partial<GettableAlert> = {
+		state: 'active',
+		disabled: false,
+		createAt: '2024-01-01T00:00:00Z',
+		createBy: 'test-user',
+		updateAt: '2024-01-01T00:00:00Z',
+		updateBy: 'test-user',
+		version: '1',
+	};
+
+	const mockAlerts: GettableAlert[] = [
+		{
+			...mockAlertBase,
+			id: '1',
+			alert: 'High CPU Usage',
+			alertType: 'metrics',
+			labels: {
+				severity: 'warning',
+				status: 'ok',
+				environment: 'production',
+			},
+		} as GettableAlert,
+		{
+			...mockAlertBase,
+			id: '2',
+			alert: 'Memory Leak Detected',
+			alertType: 'metrics',
+			labels: {
+				severity: 'critical',
+				status: 'firing',
+				environment: 'staging',
+			},
+		} as GettableAlert,
+		{
+			...mockAlertBase,
+			id: '3',
+			alert: 'Database Connection Error',
+			alertType: 'metrics',
+			labels: {
+				severity: 'error',
+				status: 'pending',
+				environment: 'production',
+			},
+		} as GettableAlert,
+	];
+
+	it('should return all alerts when filter is empty', () => {
+		const result = filterAlerts(mockAlerts, '');
+		expect(result).toEqual(mockAlerts);
+	});
+
+	it('should return all alerts when filter is only whitespace', () => {
+		const result = filterAlerts(mockAlerts, '   ');
+		expect(result).toEqual(mockAlerts);
+	});
+
+	it('should filter alerts by alert name', () => {
+		const result = filterAlerts(mockAlerts, 'CPU');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('High CPU Usage');
+	});
+
+	it('should filter alerts by severity', () => {
+		const result = filterAlerts(mockAlerts, 'warning');
+		expect(result).toHaveLength(1);
+		expect(result[0].labels?.severity).toBe('warning');
+	});
+
+	it('should filter alerts by label key', () => {
+		const result = filterAlerts(mockAlerts, 'environment');
+		expect(result).toHaveLength(3); // All alerts have environment label
+	});
+
+	it('should filter alerts by label value', () => {
+		const result = filterAlerts(mockAlerts, 'production');
+		expect(result).toHaveLength(2);
+		expect(
+			result.every((alert) => alert.labels?.environment === 'production'),
+		).toBe(true);
+	});
+
+	it('should be case insensitive', () => {
+		const result = filterAlerts(mockAlerts, 'cpu');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('High CPU Usage');
+	});
+
+	it('should handle partial matches', () => {
+		const result = filterAlerts(mockAlerts, 'mem');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('Memory Leak Detected');
+	});
+
+	it('should handle alerts with missing labels', () => {
+		const alertsWithMissingLabels: GettableAlert[] = [
+			{
+				...mockAlertBase,
+				id: '4',
+				alert: 'Test Alert',
+				alertType: 'metrics',
+				labels: undefined,
+			} as GettableAlert,
+		];
+		const result = filterAlerts(alertsWithMissingLabels, 'test');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('Test Alert');
+	});
+
+	it('should handle alerts with missing alert name', () => {
+		const alertsWithMissingName: GettableAlert[] = [
+			{
+				...mockAlertBase,
+				id: '5',
+				alert: '',
+				alertType: 'metrics',
+				labels: {
+					severity: 'warning',
+				},
+			} as GettableAlert,
+		];
+		const result = filterAlerts(alertsWithMissingName, 'warning');
+		expect(result).toHaveLength(1);
+		expect(result[0].labels?.severity).toBe('warning');
+	});
+});

frontend/src/container/ListAlertRules/styles.ts

@@ -8,24 +8,6 @@ export const SearchContainer = styled.div`
 		align-items: center;
 		gap: 2rem;
 	}
-	.search-container {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 12px;
-
-		.search-tooltip {
-			color: var(--bg-robin-500);
-			cursor: help;
-		}
-
-		.search-divider {
-			height: 16px;
-			margin: 0;
-			border-left: 1px solid var(--bg-slate-100);
-			margin-right: 6px;
-		}
-	}
 `;
 
 export const Button = styled(ButtonComponent)`

frontend/src/container/ListAlertRules/utils.test.ts

@@ -1,162 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GettableAlert } from 'types/api/alerts/get';
-import { EQueryType } from 'types/common/dashboard';
-
-import { filterAlerts } from './utils';
-
-const testLabels = { severity: 'warning', cluster: 'prod', test: 'value' };
-
-const baseAlert: GettableAlert = {
-	id: '1',
-	alert: 'CPU Usage High',
-	state: 'inactive',
-	disabled: false,
-	createAt: '',
-	createBy: '',
-	updateAt: '',
-	updateBy: '',
-	alertType: 'type',
-	ruleType: 'rule',
-	frequency: '1m',
-	condition: {
-		compositeQuery: {
-			builderQueries: {},
-			promQueries: {},
-			chQueries: {},
-			queryType: EQueryType.QUERY_BUILDER,
-			panelType: PANEL_TYPES.TABLE,
-			unit: '',
-		},
-	},
-	labels: testLabels,
-	annotations: {},
-	evalWindow: '',
-	source: '',
-	preferredChannels: [],
-	broadcastToAll: false,
-	version: '',
-};
-
-const alerts: GettableAlert[] = [
-	{
-		...baseAlert,
-		id: '1',
-		alert: 'CPU Usage High',
-		state: 'inactive',
-		labels: testLabels,
-	},
-	{
-		...baseAlert,
-		id: '2',
-		alert: 'Memory Usage',
-		state: 'firing',
-		labels: { severity: 'critical', cluster: 'dev', test: 'other' },
-	},
-	{
-		...baseAlert,
-		id: '3',
-		alert: 'Disk IO',
-		state: 'pending',
-		labels: testLabels,
-	},
-	{
-		...baseAlert,
-		id: '4',
-		alert: 'Network Latency',
-		state: 'disabled',
-		labels: { severity: 'info', cluster: 'qa', test: 'value' },
-	},
-];
-
-describe('filterAlerts', () => {
-	it('returns all alerts if filter is empty', () => {
-		expect(filterAlerts(alerts, '')).toHaveLength(alerts.length);
-	});
-
-	it('matches by alert name (case-insensitive)', () => {
-		const result = filterAlerts(alerts, 'cpu usage');
-		expect(result).toHaveLength(1);
-		expect(result[0].alert).toBe('CPU Usage High');
-	});
-
-	it('matches by severity', () => {
-		const result = filterAlerts(alerts, 'warning');
-		expect(result.map((a) => a.id)).toEqual(['1', '3']);
-	});
-
-	it('matches by label key or value', () => {
-		const result = filterAlerts(alerts, 'prod');
-		expect(result.map((a) => a.id)).toEqual(['1', '3']);
-	});
-
-	it('matches by multi-word AND search', () => {
-		const result = filterAlerts(alerts, 'cpu prod');
-		expect(result.map((a) => a.id)).toEqual(['1']);
-	});
-
-	it('matches by key:value (label)', () => {
-		const result = filterAlerts(alerts, 'test:value');
-		expect(result.map((a) => a.id)).toEqual(['1', '3', '4']);
-	});
-
-	it('matches by key: value (label, with space)', () => {
-		const result = filterAlerts(alerts, 'test: value');
-		expect(result.map((a) => a.id)).toEqual(['1', '3', '4']);
-	});
-
-	it('matches by key:value (severity)', () => {
-		const result = filterAlerts(alerts, 'severity:warning');
-		expect(result.map((a) => a.id)).toEqual(['1', '3']);
-	});
-
-	it('matches by key:value (status:ok)', () => {
-		const result = filterAlerts(alerts, 'status:ok');
-		expect(result.map((a) => a.id)).toEqual(['1']);
-	});
-
-	it('matches by key:value (status:inactive)', () => {
-		const result = filterAlerts(alerts, 'status:inactive');
-		expect(result.map((a) => a.id)).toEqual(['1']);
-	});
-
-	it('matches by key:value (status:firing)', () => {
-		const result = filterAlerts(alerts, 'status:firing');
-		expect(result.map((a) => a.id)).toEqual(['2']);
-	});
-
-	it('matches by key:value (status:pending)', () => {
-		const result = filterAlerts(alerts, 'status:pending');
-		expect(result.map((a) => a.id)).toEqual(['3']);
-	});
-
-	it('matches by key:value (status:disabled)', () => {
-		const result = filterAlerts(alerts, 'status:disabled');
-		expect(result.map((a) => a.id)).toEqual(['4']);
-	});
-
-	it('matches by key:value (cluster:prod)', () => {
-		const result = filterAlerts(alerts, 'cluster:prod');
-		expect(result.map((a) => a.id)).toEqual(['1', '3']);
-	});
-
-	it('matches by key:value (cluster:dev)', () => {
-		const result = filterAlerts(alerts, 'cluster:dev');
-		expect(result.map((a) => a.id)).toEqual(['2']);
-	});
-
-	it('matches by key:value (case-insensitive)', () => {
-		const result = filterAlerts(alerts, 'CLUSTER:PROD');
-		expect(result.map((a) => a.id)).toEqual(['1', '3']);
-	});
-
-	it('matches by combination of word and key:value', () => {
-		const result = filterAlerts(alerts, 'cpu status:ok');
-		expect(result.map((a) => a.id)).toEqual(['1']);
-	});
-
-	it('returns empty if no match', () => {
-		const result = filterAlerts(alerts, 'notfound');
-		expect(result).toHaveLength(0);
-	});
-});

frontend/src/container/ListAlertRules/utils.ts

@@ -3,108 +3,29 @@ import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { GettableAlert } from 'types/api/alerts/get';
 
-/**
- * Parses key:value pairs from the filter string, allowing optional whitespace after the colon.
- */
-function parseKeyValuePairs(
-	filter: string,
-): { keyValuePairs: Record<string, string>; filterCopy: string } {
-	// Allow optional whitespace after colon, and support more flexible values
-	const keyValueRegex = /([\w-]+):\s*([^\s]+)/g;
-	const keyValuePairs: Record<string, string> = {};
-	let filterCopy = filter.toLowerCase();
-	const matches = Array.from(filterCopy.matchAll(keyValueRegex));
-	matches.forEach((match) => {
-		const [, key, value] = match;
-		keyValuePairs[key] = value.trim();
-		filterCopy = filterCopy.replace(match[0], '');
-	});
-	return { keyValuePairs, filterCopy };
-}
-
-const statusMap: Record<string, string> = {
-	ok: 'inactive',
-	inactive: 'inactive',
-	pending: 'pending',
-	firing: 'firing',
-	disabled: 'disabled',
-};
-
-/**
- * Returns true if the alert matches the search words and key-value pairs.
- */
-function alertMatches(alert: GettableAlert, searchWords: string[]): boolean {
-	const alertName = alert.alert?.toLowerCase() || '';
-	const severity = alert.labels?.severity?.toLowerCase() || '';
-	const status = alert.state?.toLowerCase() || '';
-	const labelKeys = Object.keys(alert.labels || {})
-		.filter((e) => e !== 'severity')
-		.map((k) => k.toLowerCase());
-	const labelValues = Object.values(alert.labels || {}).map((v) =>
-		typeof v === 'string' ? v.toLowerCase() : '',
-	);
-
-	const searchable = [
-		alertName,
-		severity,
-		status,
-		...labelKeys,
-		...labelValues,
-	].join(' ');
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	return searchWords.every((word) => {
-		const plainTextMatch = searchable.includes(word);
-
-		// Check if this word is a key:value pair
-		const isKeyValue = word.includes(':');
-		if (isKeyValue) {
-			// For key:value pairs, check if the key:value logic matches
-			const [key, value] = word.split(':');
-			const keyValueMatch = ((): boolean => {
-				if (key === 'severity') {
-					return severity === value;
-				}
-				if (key === 'status') {
-					const mappedStatus = statusMap[value] || value;
-					const labelVal =
-						alert.labels && key in alert.labels ? alert.labels[key] : undefined;
-					return (
-						status === mappedStatus ||
-						(typeof labelVal === 'string' && labelVal.toLowerCase() === value)
-					);
-				}
-				if (alert.labels && key in alert.labels) {
-					const labelVal = alert.labels[key];
-					return typeof labelVal === 'string' && labelVal.toLowerCase() === value;
-				}
-				return false;
-			})();
-
-			// For key:value pairs, match if EITHER plain text OR key:value logic matches
-			return plainTextMatch || keyValueMatch;
-		}
-
-		// For regular words, only plain text matching is required
-		return plainTextMatch;
-	});
-}
-
 export const filterAlerts = (
 	allAlertRules: GettableAlert[],
 	filter: string,
 ): GettableAlert[] => {
 	if (!filter.trim()) return allAlertRules;
 
-	const { keyValuePairs, filterCopy } = parseKeyValuePairs(filter);
+	const value = filter.trim().toLowerCase();
-	// Include both the remaining words AND the original key:value strings as search words
+	return allAlertRules.filter((alert) => {
-	const remainingWords = filterCopy.split(/\s+/).filter(Boolean);
+		const alertName = alert.alert?.toLowerCase();
-	const keyValueStrings = Object.entries(keyValuePairs).map(
+		const severity = alert.labels?.severity?.toLowerCase();
-		([key, value]) => `${key}:${value}`,
-	);
-	const searchWords = [...remainingWords, ...keyValueStrings];
 
-	return allAlertRules.filter((alert) => alertMatches(alert, searchWords));
+		// Create a string of all label keys and values for searching
+		const labelSearchString = Object.entries(alert.labels || {})
+			.map(([key, val]) => `${key} ${val}`)
+			.join(' ')
+			.toLowerCase();
+
+		return (
+			alertName?.includes(value) ||
+			severity?.includes(value) ||
+			labelSearchString.includes(value)
+		);
+	});
 };
 
 export const alertActionLogEvent = (

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -108,7 +108,7 @@ function LogsPanelComponent({
 			...prev,
 			tableParams: {
 				pagination: {
-					limit: widget.query.builder.queryData[0].limit || 0,
+					limit: widget.query?.builder?.queryData[0]?.limit || 0,
 					offset: newOffset < 0 ? 0 : newOffset,
 				},
 			},

frontend/src/container/NewWidget/index.tsx

@@ -105,9 +105,11 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	const isLogsQuery = currentQuery.builder.queryData.every(
+	const isLogsQuery =
-		(query) => query.dataSource === DataSource.LOGS,
+		currentQuery?.builder?.queryData?.length > 0 &&
-	);
+		currentQuery?.builder?.queryData?.every(
+			(query) => query?.dataSource === DataSource.LOGS,
+		);
 
 	const customGlobalSelectedInterval = useMemo(
 		() =>
@@ -358,7 +360,9 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 	// this has been moved here from the left container
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		const updatedQuery = cloneDeep(stagedQuery || initialQueriesMap.metrics);
-		updatedQuery.builder.queryData[0].pageSize = 10;
+		if (updatedQuery?.builder?.queryData?.[0]) {
+			updatedQuery.builder.queryData[0].pageSize = 10;
+		}
 
 		if (selectedWidget) {
 			if (selectedGraph === PANEL_TYPES.LIST) {
@@ -406,7 +410,9 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 		if (stagedQuery) {
 			setIsLoadingPanelData(false);
 			const updatedStagedQuery = cloneDeep(stagedQuery);
-			updatedStagedQuery.builder.queryData[0].pageSize = 10;
+			if (updatedStagedQuery?.builder?.queryData?.[0]) {
+				updatedStagedQuery.builder.queryData[0].pageSize = 10;
+			}
 			setRequestData((prev) => ({
 				...prev,
 				selectedTime: selectedTime.enum || prev.selectedTime,

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -835,6 +835,7 @@ function DateTimeSelection({
 						onCustomDateHandler={onCustomDateHandler}
 						customDateTimeVisible={customDateTimeVisible}
 						setCustomDTPickerVisible={setCustomDTPickerVisible}
+						onTimeChange={onTimeChange}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (