diff --git a/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx b/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx
index f938a19203..67bbeb56f2 100644
--- a/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx
+++ b/frontend/src/components/DraggableTableRow/tests/DraggableTableRow.test.tsx
@@ -12,6 +12,20 @@ beforeAll(() => {
 	matchMedia();
 });
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 jest.mock('react-dnd', () => ({
 	useDrop: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
 	useDrag: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
diff --git a/frontend/src/components/LogDetail/constants.ts b/frontend/src/components/LogDetail/constants.ts
index 92199d4441..dea5121dd1 100644
--- a/frontend/src/components/LogDetail/constants.ts
+++ b/frontend/src/components/LogDetail/constants.ts
@@ -2,6 +2,14 @@ export const VIEW_TYPES = {
 	OVERVIEW: 'OVERVIEW',
 	JSON: 'JSON',
 	CONTEXT: 'CONTEXT',
+	INFRAMETRICS: 'INFRAMETRICS',
 } as const;
 
 export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES];
+
+export const RESOURCE_KEYS = {
+	CLUSTER_NAME: 'k8s.cluster.name',
+	POD_NAME: 'k8s.pod.name',
+	NODE_NAME: 'k8s.node.name',
+	HOST_NAME: 'host.name',
+} as const;
diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx
index b138718ed9..4748312ceb 100644
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -9,6 +9,7 @@ import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
+import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
@@ -22,6 +23,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 import {
+	BarChart2,
 	Braces,
 	Copy,
 	Filter,
@@ -36,7 +38,7 @@ import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
-import { VIEW_TYPES, VIEWS } from './constants';
+import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailProps } from './LogDetail.interfaces';
 import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper';
 
@@ -192,6 +194,17 @@ function LogDetail({
 							Context
 						</div>
 					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.INFRAMETRICS}
+					>
+						<div className="view-title">
+							<BarChart2 size={14} />
+							Metrics
+						</div>
+					</Radio.Button>
 				</Radio.Group>
 
 				{selectedView === VIEW_TYPES.JSON && (
@@ -246,6 +259,15 @@ function LogDetail({
 					isEdit={isEdit}
 				/>
 			)}
+			{selectedView === VIEW_TYPES.INFRAMETRICS && (
+				<InfraMetrics
+					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+					logLineTimestamp={log.timestamp.toString()}
+				/>
+			)}
 		</Drawer>
 	);
 }
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss
new file mode 100644
index 0000000000..9e49bcba94
--- /dev/null
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss
@@ -0,0 +1,34 @@
+.empty-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.infra-metrics-container {
+    .views-tabs {
+        margin-bottom: 1rem;
+    }
+}
+
+.infra-metrics-card {
+    margin: 1rem 0;
+    height: 300px;
+    padding: 10px;
+
+    .ant-card-body {
+        padding: 0;
+    }
+
+    .chart-container {
+         width: 100%;
+         height: 100%;
+    }
+
+    .no-data-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx
new file mode 100644
index 0000000000..78a1d21b16
--- /dev/null
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx
@@ -0,0 +1,94 @@
+import './InfraMetrics.styles.scss';
+
+import { Empty, Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import { History, Table } from 'lucide-react';
+import { useState } from 'react';
+
+import { VIEW_TYPES } from './constants';
+import NodeMetrics from './NodeMetrics';
+import PodMetrics from './PodMetrics';
+
+interface MetricsDataProps {
+	podName: string;
+	nodeName: string;
+	hostName: string;
+	clusterName: string;
+	logLineTimestamp: string;
+}
+
+function InfraMetrics({
+	podName,
+	nodeName,
+	hostName,
+	clusterName,
+	logLineTimestamp,
+}: MetricsDataProps): JSX.Element {
+	const [selectedView, setSelectedView] = useState<string>(() =>
+		podName ? VIEW_TYPES.POD : VIEW_TYPES.NODE,
+	);
+
+	const handleModeChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
+	};
+
+	if (!podName && !nodeName && !hostName) {
+		return (
+			<div className="empty-container">
+				<Empty
+					image={Empty.PRESENTED_IMAGE_SIMPLE}
+					description="No data available. Please select a valid log line containing a pod, node, or host attributes to view metrics."
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div className="infra-metrics-container">
+			<Radio.Group
+				className="views-tabs"
+				onChange={handleModeChange}
+				value={selectedView}
+			>
+				<Radio.Button
+					className={selectedView === VIEW_TYPES.NODE ? 'selected_view tab' : 'tab'}
+					value={VIEW_TYPES.NODE}
+				>
+					<div className="view-title">
+						<Table size={14} />
+						Node
+					</div>
+				</Radio.Button>
+				{podName && (
+					<Radio.Button
+						className={selectedView === VIEW_TYPES.POD ? 'selected_view tab' : 'tab'}
+						value={VIEW_TYPES.POD}
+					>
+						<div className="view-title">
+							<History size={14} />
+							Pod
+						</div>
+					</Radio.Button>
+				)}
+			</Radio.Group>
+			{/* TODO(Rahul): Make a common config driven component for this and other infra metrics components */}
+			{selectedView === VIEW_TYPES.NODE && (
+				<NodeMetrics
+					nodeName={nodeName}
+					clusterName={clusterName}
+					hostName={hostName}
+					logLineTimestamp={logLineTimestamp}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.POD && podName && (
+				<PodMetrics
+					podName={podName}
+					clusterName={clusterName}
+					logLineTimestamp={logLineTimestamp}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default InfraMetrics;
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
new file mode 100644
index 0000000000..3c935c8b89
--- /dev/null
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
@@ -0,0 +1,140 @@
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import Uplot from 'components/Uplot';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+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 { useQueries, UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import {
+	getHostQueryPayload,
+	getNodeQueryPayload,
+	hostWidgetInfo,
+	nodeWidgetInfo,
+} from './constants';
+
+function NodeMetrics({
+	nodeName,
+	clusterName,
+	hostName,
+	logLineTimestamp,
+}: {
+	nodeName: string;
+	clusterName: string;
+	hostName: string;
+	logLineTimestamp: string;
+}): JSX.Element {
+	const { start, end, verticalLineTimestamp } = useMemo(() => {
+		const logTimestamp = dayjs(logLineTimestamp);
+		const now = dayjs();
+		const startTime = logTimestamp.subtract(3, 'hour');
+
+		const endTime = logTimestamp.add(3, 'hour').isBefore(now)
+			? logTimestamp.add(3, 'hour')
+			: now;
+
+		return {
+			start: startTime.unix(),
+			end: endTime.unix(),
+			verticalLineTimestamp: logTimestamp.unix(),
+		};
+	}, [logLineTimestamp]);
+
+	const queryPayloads = useMemo(() => {
+		if (nodeName) {
+			return getNodeQueryPayload(clusterName, nodeName, start, end);
+		}
+		return getHostQueryPayload(hostName, start, end);
+	}, [nodeName, hostName, clusterName, start, end]);
+
+	const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo;
+	const queries = useQueries(
+		queryPayloads.map((payload) => ({
+			queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'],
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
+		})),
+	);
+
+	const isDarkMode = useIsDarkMode();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+
+	const chartData = useMemo(
+		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
+		[queries],
+	);
+
+	const options = useMemo(
+		() =>
+			queries.map(({ data }, idx) =>
+				getUPlotChartOptions({
+					apiResponse: data?.payload,
+					isDarkMode,
+					dimensions,
+					yAxisUnit: widgetInfo[idx].yAxisUnit,
+					softMax: null,
+					softMin: null,
+					minTimeScale: start,
+					maxTimeScale: end,
+					verticalLineTimestamp,
+				}),
+			),
+		[
+			queries,
+			isDarkMode,
+			dimensions,
+			widgetInfo,
+			start,
+			verticalLineTimestamp,
+			end,
+		],
+	);
+
+	const renderCardContent = (
+		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
+		idx: number,
+	): JSX.Element => {
+		if (query.isLoading) {
+			return <Skeleton />;
+		}
+
+		if (query.error) {
+			const errorMessage =
+				(query.error as Error)?.message || 'Something went wrong';
+			return <div>{errorMessage}</div>;
+		}
+		return (
+			<div
+				className={cx('chart-container', {
+					'no-data-container':
+						!query.isLoading && !query?.data?.payload?.data?.result?.length,
+				})}
+			>
+				<Uplot options={options[idx]} data={chartData[idx]} />
+			</div>
+		);
+	};
+	return (
+		<Row gutter={24}>
+			{queries.map((query, idx) => (
+				<Col span={12} key={widgetInfo[idx].title}>
+					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
+					<Card bordered className="infra-metrics-card" ref={graphRef}>
+						{renderCardContent(query, idx)}
+					</Card>
+				</Col>
+			))}
+		</Row>
+	);
+}
+
+export default NodeMetrics;
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
new file mode 100644
index 0000000000..99391d65e0
--- /dev/null
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
@@ -0,0 +1,121 @@
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import Uplot from 'components/Uplot';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+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 { useQueries, UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { getPodQueryPayload, podWidgetInfo } from './constants';
+
+function PodMetrics({
+	podName,
+	clusterName,
+	logLineTimestamp,
+}: {
+	podName: string;
+	clusterName: string;
+	logLineTimestamp: string;
+}): JSX.Element {
+	const { start, end, verticalLineTimestamp } = useMemo(() => {
+		const logTimestamp = dayjs(logLineTimestamp);
+		const now = dayjs();
+		const startTime = logTimestamp.subtract(3, 'hour');
+
+		const endTime = logTimestamp.add(3, 'hour').isBefore(now)
+			? logTimestamp.add(3, 'hour')
+			: now;
+
+		return {
+			start: startTime.unix(),
+			end: endTime.unix(),
+			verticalLineTimestamp: logTimestamp.unix(),
+		};
+	}, [logLineTimestamp]);
+	const queryPayloads = useMemo(
+		() => getPodQueryPayload(clusterName, podName, start, end),
+		[clusterName, end, podName, start],
+	);
+	const queries = useQueries(
+		queryPayloads.map((payload) => ({
+			queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'POD'],
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
+		})),
+	);
+
+	const isDarkMode = useIsDarkMode();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+
+	const chartData = useMemo(
+		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
+		[queries],
+	);
+
+	const options = useMemo(
+		() =>
+			queries.map(({ data }, idx) =>
+				getUPlotChartOptions({
+					apiResponse: data?.payload,
+					isDarkMode,
+					dimensions,
+					yAxisUnit: podWidgetInfo[idx].yAxisUnit,
+					softMax: null,
+					softMin: null,
+					minTimeScale: start,
+					maxTimeScale: end,
+					verticalLineTimestamp,
+				}),
+			),
+		[queries, isDarkMode, dimensions, start, verticalLineTimestamp, end],
+	);
+
+	const renderCardContent = (
+		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
+		idx: number,
+	): JSX.Element => {
+		if (query.isLoading) {
+			return <Skeleton />;
+		}
+
+		if (query.error) {
+			const errorMessage =
+				(query.error as Error)?.message || 'Something went wrong';
+			return <div>{errorMessage}</div>;
+		}
+		return (
+			<div
+				className={cx('chart-container', {
+					'no-data-container':
+						!query.isLoading && !query?.data?.payload?.data?.result?.length,
+				})}
+			>
+				<Uplot options={options[idx]} data={chartData[idx]} />
+			</div>
+		);
+	};
+
+	return (
+		<Row gutter={24}>
+			{queries.map((query, idx) => (
+				<Col span={12} key={podWidgetInfo[idx].title}>
+					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
+					<Card bordered className="infra-metrics-card" ref={graphRef}>
+						{renderCardContent(query, idx)}
+					</Card>
+				</Col>
+			))}
+		</Row>
+	);
+}
+
+export default PodMetrics;
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts
new file mode 100644
index 0000000000..39130e7f56
--- /dev/null
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts
@@ -0,0 +1,3033 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const getPodQueryPayload = (
+	clusterName: string,
+	podName: string,
+	start: number,
+	end: number,
+): GetQueryResultsProps[] => [
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'container_cpu_utilization--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'container_cpu_utilization',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '6e050953',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '60fe5e62',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{k8s_pod_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '9b92756a-b445-45f8-90f4-d26f3ef28f8f',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'container_memory_usage--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'container_memory_usage',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'a4250695',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '3b2bc32b',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{k8s_pod_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: 'a22c1e03-4876-4b3e-9a96-a3c3a28f9c0f',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'container_cpu_utilization--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'container_cpu_utilization',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '8426b52f',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '2f67240c',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_container_cpu_request--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_container_cpu_request',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'latest',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '8c4667e1',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: 'b16e7306',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'latest',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A*100/B',
+						legend: '{{k8s_pod_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '7bb3a6f5-d1c6-4f2e-9cc9-7dcc46db398f',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'container_cpu_utilization--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'container_cpu_utilization',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '0a862947',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: 'cd13fbf0',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: 'usage - {{k8s_pod_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_container_cpu_limit--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_container_cpu_limit',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'latest',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: 'bfb8acf7',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: 'e09ba819',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: 'limit - {{k8s_pod_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'latest',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A*100/B',
+						legend: '{{k8s_pod_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '6d5ccd81-0ea1-4fb9-a66b-7f0fe2f15165',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'container_memory_usage--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'container_memory_usage',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'ea3df3e7',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '39b21fe0',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_container_memory_request--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_container_memory_request',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'latest',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '7401a4b9',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '7cdad1cb',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'latest',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A*100/B',
+						legend: '{{k8s_pod_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '4d03a0ff-4fa5-4b19-b397-97f80ba9e0ac',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'container_memory_usage--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'container_memory_usage',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'f2a3175c',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: 'fc17ff21',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_container_memory_limit--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_container_memory_limit',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'latest',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '175e96b7',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '1d9fbe48',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'latest',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A*100/B',
+						legend: '{{k8s_pod_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: 'ad491f19-0f83-4dd4-bb8f-bec295c18d1b',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_pod_filesystem_available--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_pod_filesystem_available',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '877385bf',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '877385cd',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_pod_filesystem_capacity--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_pod_filesystem_capacity',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '877385bf',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '877385cd',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: '(B-A)/B',
+						legend: '{{k8s_pod_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '16908d4e-1565-4847-8d87-01ebb8fc494a',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		fillGaps: false,
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_pod_network_io--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_pod_network_io',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '877385bf',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '9613b4da',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_pod_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_pod_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: podName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_pod_name--string--tag--false',
+								isColumn: false,
+								key: 'k8s_pod_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{k8s_pod_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '4b255d6d-4cde-474d-8866-f4418583c18b',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+];
+
+export const getNodeQueryPayload = (
+	clusterName: string,
+	nodeName: string,
+	start: number,
+	end: number,
+): GetQueryResultsProps[] => [
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_cpu_time--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_cpu_time',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '91223422',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '91223422',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{k8s_node_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_allocatable_cpu--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_allocatable_cpu',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '9700f1d4',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{k8s_node_name}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A/B',
+						legend: '{{k8s_node_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '259295b5-774d-4b2e-8a4f-e5dd63e6c38d',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		fillGaps: false,
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_memory_working_set--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_memory_working_set',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'a9f58cf3',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '8430c9a0',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_allocatable_memory--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_allocatable_memory',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: 'cb274856',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A/B',
+						legend: '{{k8s_node_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '486af4da-2a1a-4b8f-992c-eba098d3a6f9',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		fillGaps: false,
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_network_io--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_network_io',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '91223422',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: '66308505',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'interface--string--tag--false',
+								isColumn: false,
+								key: 'interface',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								key: 'direction',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{k8s_node_name}}-{{interface}}-{{direction}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: 'b56143c0-7d2f-4425-97c5-65ad6fc87366',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_filesystem_available--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_filesystem_available',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '91223422',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: 'a5dffef6',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'k8s_node_filesystem_capacity--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'k8s_node_filesystem_capacity',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '91223422',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_cluster_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_cluster_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: clusterName,
+								},
+								{
+									id: 'c79d5a16',
+									key: {
+										dataType: DataTypes.String,
+										id: 'k8s_node_name--string--tag--false',
+										isColumn: false,
+										key: 'k8s_node_name',
+										type: 'tag',
+									},
+									op: 'in',
+									value: nodeName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'k8s_node_name--string--tag--false',
+								isColumn: false,
+								key: 'k8s_node_name',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'sum',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: '(B-A)/B',
+						legend: '{{k8s_node_name}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '57eeac15-615c-4a71-9c61-8e0c0c76b045',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+];
+
+export const getHostQueryPayload = (
+	hostName: string,
+	start: number,
+	end: number,
+): GetQueryResultsProps[] => [
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_cpu_time--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_cpu_time',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'ad316791',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'state',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{state}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_cpu_time--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_cpu_time',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: true,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '6baf116b',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [],
+						having: [],
+						legend: '{{state}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [
+					{
+						disabled: false,
+						expression: 'A/B',
+						legend: '{{state}}',
+						queryName: 'F1',
+					},
+				],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_memory_usage--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_memory_usage',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '8026009e',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'state',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{state}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '40218bfb-a9b7-4974-aead-5bf666e139bf',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_cpu_load_average_1m--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_cpu_load_average_1m',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '4167fbb1',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [],
+						having: [],
+						legend: '1m',
+						limit: 30,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_cpu_load_average_5m--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_cpu_load_average_5m',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'B',
+						filters: {
+							items: [
+								{
+									id: '0c2cfeca',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [],
+						having: [],
+						legend: '5m',
+						limit: 30,
+						orderBy: [],
+						queryName: 'B',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_cpu_load_average_15m--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_cpu_load_average_15m',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'C',
+						filters: {
+							items: [
+								{
+									id: '28693375',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [],
+						having: [],
+						legend: '15m',
+						limit: 30,
+						orderBy: [],
+						queryName: 'C',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '8e6485ea-7018-43b0-ab27-b210f77b59ad',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_network_io--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_network_io',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '3a03bc80',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'direction',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+						],
+						having: [
+							{
+								columnName: 'SUM(system_network_io)',
+								op: '>',
+								value: 0,
+							},
+						],
+						legend: '{{device}}::{{direction}}',
+						limit: 30,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '47173220-44df-4ef6-87f4-31e333c180c7',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_network_packets--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_network_packets',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '3082ef53',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'direction',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{device}}::{{direction}}',
+						limit: 30,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '62eedbc6-c8ad-4d13-80a8-129396e1d1dc',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_network_errors--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_network_errors',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '8859bc50',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'direction',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{device}}::{{direction}}',
+						limit: 30,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '5ddb1b38-53bb-46f5-b4fe-fe832d6b9b24',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_network_dropped--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_network_dropped',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '40fec2e3',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'direction',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{device}}::{{direction}}',
+						limit: 30,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: 'a849bcce-7684-4852-9134-530b45419b8f',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_network_connections--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_network_connections',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'avg',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '87f665b5',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'protocol--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'protocol',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'state--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'state',
+								type: 'tag',
+							},
+						],
+						having: [],
+						legend: '{{protocol}}::{{state}}',
+						limit: 30,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'avg',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: 'ab685a3d-fa4c-4663-8d94-c452e59038f3',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_disk_io--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_disk_io',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: '6039199f',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [],
+						having: [],
+						legend: '',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '9bd40b51-0790-4cdd-9718-551b2ded5926',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_disk_operation_time--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_disk_operation_time',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'd21dc017',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'direction',
+								type: 'tag',
+							},
+						],
+						having: [
+							{
+								columnName: 'SUM(system_disk_operation_time)',
+								op: '>',
+								value: 0,
+							},
+						],
+						legend: '{{device}}::{{direction}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '9c6d18ad-89ff-4e38-a15a-440e72ed6ca8',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_disk_pending_operations--float64--Gauge--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_disk_pending_operations',
+							type: 'Gauge',
+						},
+						aggregateOperator: 'max',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'a1023af9',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+						],
+						having: [
+							{
+								columnName: 'SUM(system_disk_pending_operations)',
+								op: '>',
+								value: 0,
+							},
+						],
+						legend: '{{device}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'max',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: 'f4cfc2a5-78fc-42cc-8f4a-194c8c916132',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+	{
+		selectedTime: 'GLOBAL_TIME',
+		graphType: PANEL_TYPES.TIME_SERIES,
+		query: {
+			builder: {
+				queryData: [
+					{
+						aggregateAttribute: {
+							dataType: DataTypes.Float64,
+							id: 'system_disk_operation_time--float64--Sum--true',
+							isColumn: true,
+							isJSON: false,
+							key: 'system_disk_operation_time',
+							type: 'Sum',
+						},
+						aggregateOperator: 'rate',
+						dataSource: DataSource.METRICS,
+						disabled: false,
+						expression: 'A',
+						filters: {
+							items: [
+								{
+									id: 'd21dc017',
+									key: {
+										dataType: DataTypes.String,
+										id: 'host_name--string--tag--false',
+										isColumn: false,
+										isJSON: false,
+										key: 'host_name',
+										type: 'tag',
+									},
+									op: '=',
+									value: hostName,
+								},
+							],
+							op: 'AND',
+						},
+						functions: [],
+						groupBy: [
+							{
+								dataType: DataTypes.String,
+								id: 'device--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'device',
+								type: 'tag',
+							},
+							{
+								dataType: DataTypes.String,
+								id: 'direction--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'direction',
+								type: 'tag',
+							},
+						],
+						having: [
+							{
+								columnName: 'SUM(system_disk_operation_time)',
+								op: '>',
+								value: 0,
+							},
+						],
+						legend: '{{device}}::{{direction}}',
+						limit: null,
+						orderBy: [],
+						queryName: 'A',
+						reduceTo: 'avg',
+						spaceAggregation: 'sum',
+						stepInterval: 60,
+						timeAggregation: 'rate',
+					},
+				],
+				queryFormulas: [],
+			},
+			clickhouse_sql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			id: '9c6d18ad-89ff-4e38-a15a-440e72ed6ca8',
+			promql: [
+				{
+					disabled: false,
+					legend: '',
+					name: 'A',
+					query: '',
+				},
+			],
+			queryType: EQueryType.QUERY_BUILDER,
+		},
+		variables: {},
+		formatForWeb: false,
+		start,
+		end,
+	},
+];
+
+export const podWidgetInfo = [
+	{
+		title: 'CPU usage',
+		yAxisUnit: '',
+	},
+	{
+		title: 'Memory Usage',
+		yAxisUnit: 'bytes',
+	},
+	{
+		title: 'Pod CPU usage [% of Request]',
+		yAxisUnit: 'percent',
+	},
+	{
+		title: 'Pod CPU usage [% of Limit]',
+		yAxisUnit: 'percent',
+	},
+	{
+		title: 'Pod memory usage [% of Request]',
+		yAxisUnit: 'percent',
+	},
+	{
+		title: 'Pod memory usage [% of Limit]',
+		yAxisUnit: 'percent',
+	},
+	{
+		title: 'Pod filesystem usage [%]',
+		yAxisUnit: 'percentunit',
+	},
+	{
+		title: 'Pod network IO',
+		yAxisUnit: 'binBps',
+	},
+];
+
+export const VIEW_TYPES = {
+	NODE: 'node',
+	POD: 'pod',
+};
+
+export const nodeWidgetInfo = [
+	{
+		title: 'Node CPU usage',
+		yAxisUnit: 'percentunit',
+	},
+	{
+		title: 'Node memory usage (WSS)',
+		yAxisUnit: 'percentunit',
+	},
+	{
+		title: 'Node network IO',
+		yAxisUnit: 'binBps',
+	},
+	{
+		title: 'Node filesystem usage',
+		yAxisUnit: 'percentunit',
+	},
+];
+
+export const hostWidgetInfo = [
+	{ title: 'CPU Usage', yAxisUnit: 'percentunit' },
+	{ title: 'Memory Usage', yAxisUnit: 'bytes' },
+	{ title: 'System Load Average', yAxisUnit: '' },
+	{ title: 'Network usage (bytes)', yAxisUnit: 'bytes' },
+	{ title: 'Network usage (packet/s)', yAxisUnit: 'pps' },
+	{ title: 'Network errors', yAxisUnit: 'short' },
+	{ title: 'Network drops', yAxisUnit: 'short' },
+	{ title: 'Network connections', yAxisUnit: 'short' },
+	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
+	{ title: 'System disk operations/s', yAxisUnit: 'short' },
+	{ title: 'Queue size', yAxisUnit: 'short' },
+	{ title: 'Disk operations time', yAxisUnit: 's' },
+];
diff --git a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
index 8262d6f9bc..6271ff793e 100644
--- a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
+++ b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
@@ -28,6 +28,20 @@ const lodsQueryServerRequest = (): void =>
 		),
 	);
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 // mocking the graph components in this test as this should be handled separately
 jest.mock(
 	'container/TimeSeriesView/TimeSeriesView',
diff --git a/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx b/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx
index 194acbea0a..88fdb5d594 100644
--- a/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx
+++ b/frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/ChangeHistory.test.tsx
@@ -9,6 +9,20 @@ import store from 'store';
 import ChangeHistory from '../index';
 import { pipelineData, pipelineDataHistory } from './testUtils';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
diff --git a/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx b/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx
index 8990ffa4e7..360a7c5925 100644
--- a/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx
@@ -9,6 +9,20 @@ import store from 'store';
 import { pipelineMockData } from '../mocks/pipeline';
 import AddNewPipeline from '../PipelineListsView/AddNewPipeline';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 export function matchMedia(): void {
 	Object.defineProperty(window, 'matchMedia', {
 		writable: true,
diff --git a/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx b/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx
index a4d2e680a4..d3f236437f 100644
--- a/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/AddNewProcessor.test.tsx
@@ -9,6 +9,20 @@ import { pipelineMockData } from '../mocks/pipeline';
 import AddNewProcessor from '../PipelineListsView/AddNewProcessor';
 import { matchMedia } from './AddNewPipeline.test';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 beforeAll(() => {
 	matchMedia();
 });
diff --git a/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx b/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx
index 451ef8807f..3b2fdfeb34 100644
--- a/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/DeleteAction.test.tsx
@@ -6,6 +6,20 @@ import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 describe('PipelinePage container test', () => {
 	it('should render DeleteAction section', () => {
 		const { asFragment } = render(
diff --git a/frontend/src/container/PipelinePage/tests/DragAction.test.tsx b/frontend/src/container/PipelinePage/tests/DragAction.test.tsx
index 168b3f042f..9f64714072 100644
--- a/frontend/src/container/PipelinePage/tests/DragAction.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/DragAction.test.tsx
@@ -6,6 +6,20 @@ import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 describe('PipelinePage container test', () => {
 	it('should render DragAction section', () => {
 		const { asFragment } = render(
diff --git a/frontend/src/container/PipelinePage/tests/EditAction.test.tsx b/frontend/src/container/PipelinePage/tests/EditAction.test.tsx
index c52991bf6d..56dd779600 100644
--- a/frontend/src/container/PipelinePage/tests/EditAction.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/EditAction.test.tsx
@@ -6,6 +6,20 @@ import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
 import store from 'store';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 describe('PipelinePage container test', () => {
 	it('should render EditAction section', () => {
 		const { asFragment } = render(
diff --git a/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx
index 83f503107b..d472f4745c 100644
--- a/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/PipelineActions.test.tsx
@@ -8,6 +8,20 @@ import store from 'store';
 import { pipelineMockData } from '../mocks/pipeline';
 import PipelineActions from '../PipelineListsView/TableComponents/PipelineActions';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 describe('PipelinePage container test', () => {
 	it('should render PipelineActions section', () => {
 		const { asFragment } = render(
diff --git a/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx
index 6875d11259..b9c78091dd 100644
--- a/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/PipelineExpandView.test.tsx
@@ -9,6 +9,20 @@ import { pipelineMockData } from '../mocks/pipeline';
 import PipelineExpandView from '../PipelineListsView/PipelineExpandView';
 import { matchMedia } from './AddNewPipeline.test';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 beforeAll(() => {
 	matchMedia();
 });
diff --git a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx
index 74f1f125e0..517e623ebe 100644
--- a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx
@@ -11,6 +11,20 @@ import store from 'store';
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
 import PipelineListsView from '../PipelineListsView';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 const samplePipelinePreviewResponse = {
 	isLoading: false,
 	logs: [
diff --git a/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx b/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx
index 91d5dfe244..a71bc1266d 100644
--- a/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/PipelinePageLayout.test.tsx
@@ -11,6 +11,20 @@ import { v4 } from 'uuid';
 import PipelinePageLayout from '../Layouts/Pipeline';
 import { matchMedia } from './AddNewPipeline.test';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 beforeAll(() => {
 	matchMedia();
 });
diff --git a/frontend/src/container/PipelinePage/tests/TagInput.test.tsx b/frontend/src/container/PipelinePage/tests/TagInput.test.tsx
index 24cedc2eb0..e95efb6715 100644
--- a/frontend/src/container/PipelinePage/tests/TagInput.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/TagInput.test.tsx
@@ -7,6 +7,20 @@ import store from 'store';
 
 import TagInput from '../components/TagInput';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 describe('Pipeline Page', () => {
 	it('should render TagInput section', () => {
 		const { asFragment } = render(
diff --git a/frontend/src/container/PipelinePage/tests/utils.test.ts b/frontend/src/container/PipelinePage/tests/utils.test.ts
index c21e8c5a4b..707ad06c2d 100644
--- a/frontend/src/container/PipelinePage/tests/utils.test.ts
+++ b/frontend/src/container/PipelinePage/tests/utils.test.ts
@@ -11,6 +11,20 @@ import {
 	getTableColumn,
 } from '../PipelineListsView/utils';
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 describe('Utils testing of Pipeline Page', () => {
 	test('it should be check form field of add pipeline', () => {
 		expect(pipelineFields.length).toBe(3);
diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts
index 03ad5f8caa..232efad04c 100644
--- a/frontend/src/lib/dashboard/getQueryResults.ts
+++ b/frontend/src/lib/dashboard/getQueryResults.ts
@@ -26,13 +26,13 @@ export async function GetMetricQueryRange(
 	headers?: Record<string, string>,
 ): Promise<SuccessResponse<MetricRangePayloadProps>> {
 	const { legendMap, queryPayload } = prepareQueryRangePayload(props);
-
 	const response = await getMetricsQueryRange(
 		queryPayload,
 		version || 'v3',
 		signal,
 		headers,
 	);
+	
 
 	if (response.statusCode >= 400) {
 		let error = `API responded with ${response.statusCode} -  ${response.error} status: ${response.message}`;
@@ -78,7 +78,7 @@ export interface GetQueryResultsProps {
 	query: Query;
 	graphType: PANEL_TYPES;
 	selectedTime: timePreferenceType;
-	globalSelectedInterval: Time | TimeV2 | CustomTimeType;
+	globalSelectedInterval?: Time | TimeV2 | CustomTimeType;
 	variables?: Record<string, unknown>;
 	params?: Record<string, unknown>;
 	fillGaps?: boolean;
@@ -87,4 +87,6 @@ export interface GetQueryResultsProps {
 		pagination?: Pagination;
 		selectColumns?: any;
 	};
+	start?: number;
+	end?: number;
 }
diff --git a/frontend/src/lib/dashboard/prepareQueryRangePayload.ts b/frontend/src/lib/dashboard/prepareQueryRangePayload.ts
index ffc2f0477c..4999726c63 100644
--- a/frontend/src/lib/dashboard/prepareQueryRangePayload.ts
+++ b/frontend/src/lib/dashboard/prepareQueryRangePayload.ts
@@ -23,6 +23,8 @@ export const prepareQueryRangePayload = ({
 	variables = {},
 	params = {},
 	fillGaps = false,
+	start: startTime,
+	end: endTime,
 }: GetQueryResultsProps): PrepareQueryRangePayload => {
 	let legendMap: Record<string, string> = {};
 	const {
@@ -100,8 +102,8 @@ export const prepareQueryRangePayload = ({
 		: undefined;
 
 	const queryPayload: QueryRangePayload = {
-		start: parseInt(start, 10) * 1e3,
-		end: endLogTimeStamp || parseInt(end, 10) * 1e3,
+		start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3,
+		end: endTime ? endTime * 1e3 : endLogTimeStamp || parseInt(end, 10) * 1e3,
 		step: getStep({
 			start: allowSelectedIntervalForStepGen
 				? start
diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
index 5000b0f0d8..447dd8d716 100644
--- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -54,6 +54,7 @@ export interface GetUPlotChartOptions {
 		}>
 	>;
 	customTooltipElement?: HTMLDivElement;
+	verticalLineTimestamp?: number;
 }
 
 /** the function converts series A , series B , series C to
@@ -156,6 +157,7 @@ export const getUPlotChartOptions = ({
 	hiddenGraph,
 	setHiddenGraph,
 	customTooltipElement,
+	verticalLineTimestamp,
 }: GetUPlotChartOptions): uPlot.Options => {
 	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
 
@@ -222,6 +224,29 @@ export const getUPlotChartOptions = ({
 				onClick: onClickHandler,
 				apiResponse,
 			}),
+			{
+				hooks: {
+					draw: [
+						(u): void => {
+							if (verticalLineTimestamp) {
+								const { ctx } = u;
+								ctx.save();
+								ctx.setLineDash([4, 2]);
+								ctx.strokeStyle = 'white';
+								ctx.lineWidth = 1;
+								const x = u.valToPos(verticalLineTimestamp, 'x', true);
+
+								ctx.beginPath();
+								ctx.moveTo(x, u.bbox.top);
+								ctx.lineTo(x, u.bbox.top + u.bbox.height);
+								ctx.stroke();
+								ctx.setLineDash([]);
+								ctx.restore();
+							}
+						},
+					],
+				},
+			},
 		],
 		hooks: {
 			draw: [
diff --git a/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx b/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx
index 4970d6cf17..66bf604fa1 100644
--- a/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx
+++ b/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx
@@ -26,6 +26,21 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import LogsExplorer from '../index';
 
 const queryRangeURL = 'http://localhost/api/v3/query_range';
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 // mocking the graph components in this test as this should be handled separately
 jest.mock(
 	'container/TimeSeriesView/TimeSeriesView',