Skip to content

Commit

Permalink
fix: custom date time issue while plotting the graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@rahulkeswani101
rahulkeswani101 committed Sep 10, 2024
1 parent 03adb40 commit a66c78a
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 40 deletions.
23 changes: 17 additions & 6 deletions frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand All @@ -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<SuccessResponse<MetricRangePayloadProps>> =>
GetMetricQueryRange(payload, ENTITY_VERSION_V4),
GetMetricQueryRange(
payload,
ENTITY_VERSION_V4,
undefined,
undefined,
extendedEnd,
),
enabled: !!payload,
})),
);
Expand Down Expand Up @@ -95,8 +106,8 @@ function NodeMetrics({
dimensions,
widgetInfo,
start,
end,
verticalLineTimestamp,
end,
],
);

Expand Down
26 changes: 19 additions & 7 deletions frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand All @@ -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<SuccessResponse<MetricRangePayloadProps>> =>
GetMetricQueryRange(payload, ENTITY_VERSION_V4),
GetMetricQueryRange(
payload,
ENTITY_VERSION_V4,
undefined,
undefined,
extendedEnd,
),
enabled: !!payload,
})),
);
Expand Down Expand Up @@ -77,7 +89,7 @@ function PodMetrics({
verticalLineTimestamp,
}),
),
[queries, isDarkMode, dimensions, start, end, verticalLineTimestamp],
[queries, isDarkMode, dimensions, start, verticalLineTimestamp, end],
);

const renderCardContent = (
Expand Down
56 changes: 32 additions & 24 deletions frontend/src/container/LogDetailedView/InfraMetrics/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
Expand Down Expand Up @@ -102,7 +108,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -199,7 +205,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -366,7 +372,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -533,7 +539,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -700,7 +706,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -867,7 +873,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -1032,7 +1038,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
fillGaps: false,
formatForWeb: false,
Expand Down Expand Up @@ -1127,7 +1133,7 @@ export const getPodQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand All @@ -1136,6 +1142,7 @@ export const getPodQueryPayload = (
export const getNodeQueryPayload = (
clusterName: string,
nodeName: string,
globalSelectedInterval: Time | TimeV2 | CustomTimeType,
): GetQueryResultsProps[] => [
{
selectedTime: 'GLOBAL_TIME',
Expand Down Expand Up @@ -1286,7 +1293,7 @@ export const getNodeQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
fillGaps: false,
formatForWeb: false,
Expand Down Expand Up @@ -1438,7 +1445,7 @@ export const getNodeQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
fillGaps: false,
formatForWeb: false,
Expand Down Expand Up @@ -1547,7 +1554,7 @@ export const getNodeQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -1710,14 +1717,15 @@ export const getNodeQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
];

export const getHostQueryPayload = (
hostName: string,
globalSelectedInterval: Time | TimeV2 | CustomTimeType,
): GetQueryResultsProps[] => [
{
selectedTime: 'GLOBAL_TIME',
Expand Down Expand Up @@ -1849,7 +1857,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -1933,7 +1941,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2094,7 +2102,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2192,7 +2200,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2284,7 +2292,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2376,7 +2384,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2468,7 +2476,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2560,7 +2568,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2635,7 +2643,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2733,7 +2741,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2823,7 +2831,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down Expand Up @@ -2921,7 +2929,7 @@ export const getHostQueryPayload = (
],
queryType: EQueryType.QUERY_BUILDER,
},
globalSelectedInterval: '6h',
globalSelectedInterval,
variables: {},
formatForWeb: false,
},
Expand Down
10 changes: 7 additions & 3 deletions frontend/src/lib/dashboard/getQueryResults.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,15 @@ export async function GetMetricQueryRange(
version: string,
signal?: AbortSignal,
headers?: Record<string, string>,
extendedEnd?: boolean,
): Promise<SuccessResponse<MetricRangePayloadProps>> {
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',
Expand Down

0 comments on commit a66c78a

Please sign in to comment.