From a66c78a4f1447e7c0af76acaecbcd5cae2703bb5 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Tue, 10 Sep 2024 17:51:02 +0530 Subject: [PATCH] fix: custom date time issue while plotting the graph --- .../InfraMetrics/NodeMetrics.tsx | 23 ++++++-- .../InfraMetrics/PodMetrics.tsx | 26 ++++++--- .../LogDetailedView/InfraMetrics/constants.ts | 56 +++++++++++-------- frontend/src/lib/dashboard/getQueryResults.ts | 10 +++- 4 files changed, 75 insertions(+), 40 deletions(-) diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx index 8675d65cf5..b77e9b5a1a 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx @@ -5,6 +5,7 @@ import { ENTITY_VERSION_V4 } from 'constants/app'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; +import useUrlQuery from 'hooks/useUrlQuery'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; @@ -31,6 +32,10 @@ function NodeMetrics({ hostName: string; logLineTimestamp: string; }): JSX.Element { + const queryParams = useUrlQuery(); + const globalSelectedInterval = queryParams.get('relativeTime') + ? '6h' + : 'custom'; const { start, end, verticalLineTimestamp } = useMemo(() => { const logTimestamp = dayjs(logLineTimestamp); const now = dayjs(); @@ -49,18 +54,24 @@ function NodeMetrics({ const queryPayloads = useMemo(() => { if (nodeName) { - return getNodeQueryPayload(clusterName, nodeName); + return getNodeQueryPayload(clusterName, nodeName, globalSelectedInterval); } - return getHostQueryPayload(hostName); - }, [clusterName, nodeName, hostName]); + return getHostQueryPayload(hostName, globalSelectedInterval); + }, [nodeName, hostName, globalSelectedInterval, clusterName]); const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo; - + const extendedEnd = !queryParams.get('relative'); const queries = useQueries( queryPayloads.map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'NODE'], queryFn: (): Promise> => - GetMetricQueryRange(payload, ENTITY_VERSION_V4), + GetMetricQueryRange( + payload, + ENTITY_VERSION_V4, + undefined, + undefined, + extendedEnd, + ), enabled: !!payload, })), ); @@ -95,8 +106,8 @@ function NodeMetrics({ dimensions, widgetInfo, start, - end, verticalLineTimestamp, + end, ], ); diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx index cf2ea86910..0b1dee3510 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx +++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx @@ -5,6 +5,7 @@ import { ENTITY_VERSION_V4 } from 'constants/app'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; +import useUrlQuery from 'hooks/useUrlQuery'; import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults'; import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions'; import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData'; @@ -24,6 +25,10 @@ function PodMetrics({ clusterName: string; logLineTimestamp: string; }): JSX.Element { + const queryParams = useUrlQuery(); + const globalSelectedInterval = queryParams.get('relativeTime') + ? '6h' + : 'custom'; const { start, end, verticalLineTimestamp } = useMemo(() => { const logTimestamp = dayjs(logLineTimestamp); const now = dayjs(); @@ -39,16 +44,23 @@ function PodMetrics({ verticalLineTimestamp: logTimestamp.unix(), }; }, [logLineTimestamp]); - const queryPayloads = useMemo(() => getPodQueryPayload(clusterName, podName), [ - clusterName, - podName, - ]); - + console.log(start, end, verticalLineTimestamp, logLineTimestamp); + const queryPayloads = useMemo( + () => getPodQueryPayload(clusterName, podName, globalSelectedInterval), + [clusterName, globalSelectedInterval, podName], + ); + const extendedEnd = !queryParams.get('relative'); const queries = useQueries( queryPayloads.map((payload) => ({ queryKey: ['metrics', payload, ENTITY_VERSION_V4, 'POD'], queryFn: (): Promise> => - GetMetricQueryRange(payload, ENTITY_VERSION_V4), + GetMetricQueryRange( + payload, + ENTITY_VERSION_V4, + undefined, + undefined, + extendedEnd, + ), enabled: !!payload, })), ); @@ -77,7 +89,7 @@ function PodMetrics({ verticalLineTimestamp, }), ), - [queries, isDarkMode, dimensions, start, end, verticalLineTimestamp], + [queries, isDarkMode, dimensions, start, verticalLineTimestamp, end], ); const renderCardContent = ( diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts index 34262bbc23..7b16a2812f 100644 --- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts +++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts @@ -1,5 +1,10 @@ /* eslint-disable sonarjs/no-duplicate-string */ import { PANEL_TYPES } from 'constants/queryBuilder'; +import { Time } from 'container/TopNav/DateTimeSelection/config'; +import { + CustomTimeType, + Time as TimeV2, +} from 'container/TopNav/DateTimeSelectionV2/config'; import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults'; import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { EQueryType } from 'types/common/dashboard'; @@ -8,6 +13,7 @@ import { DataSource } from 'types/common/queryBuilder'; export const getPodQueryPayload = ( clusterName: string, podName: string, + globalSelectedInterval: Time | TimeV2 | CustomTimeType, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -102,7 +108,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -199,7 +205,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -366,7 +372,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -533,7 +539,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -700,7 +706,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -867,7 +873,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1032,7 +1038,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, @@ -1127,7 +1133,7 @@ export const getPodQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1136,6 +1142,7 @@ export const getPodQueryPayload = ( export const getNodeQueryPayload = ( clusterName: string, nodeName: string, + globalSelectedInterval: Time | TimeV2 | CustomTimeType, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -1286,7 +1293,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, @@ -1438,7 +1445,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, fillGaps: false, formatForWeb: false, @@ -1547,7 +1554,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1710,7 +1717,7 @@ export const getNodeQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1718,6 +1725,7 @@ export const getNodeQueryPayload = ( export const getHostQueryPayload = ( hostName: string, + globalSelectedInterval: Time | TimeV2 | CustomTimeType, ): GetQueryResultsProps[] => [ { selectedTime: 'GLOBAL_TIME', @@ -1849,7 +1857,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -1933,7 +1941,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2094,7 +2102,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2192,7 +2200,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2284,7 +2292,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2376,7 +2384,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2468,7 +2476,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2560,7 +2568,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2635,7 +2643,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2733,7 +2741,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2823,7 +2831,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, @@ -2921,7 +2929,7 @@ export const getHostQueryPayload = ( ], queryType: EQueryType.QUERY_BUILDER, }, - globalSelectedInterval: '6h', + globalSelectedInterval, variables: {}, formatForWeb: false, }, diff --git a/frontend/src/lib/dashboard/getQueryResults.ts b/frontend/src/lib/dashboard/getQueryResults.ts index 2b3065594e..3b8df28dbb 100644 --- a/frontend/src/lib/dashboard/getQueryResults.ts +++ b/frontend/src/lib/dashboard/getQueryResults.ts @@ -24,11 +24,15 @@ export async function GetMetricQueryRange( version: string, signal?: AbortSignal, headers?: Record, + extendedEnd?: boolean, ): Promise> { const { legendMap, queryPayload } = prepareQueryRangePayload(props); - - console.log(props); - + console.log(extendedEnd); + if (extendedEnd) { + // const currentTime = Date.now(); + queryPayload.end += 3 * 60 * 60 * 1000; + // queryPayload.end = Math.min(queryPayload.end, currentTime); + } const response = await getMetricsQueryRange( queryPayload, version || 'v3',