From 6a4643558caa1e32f62b5f07ccd2efac8c67c7f0 Mon Sep 17 00:00:00 2001 From: rahulkeswani101 Date: Thu, 3 Oct 2024 15:36:17 +0530 Subject: [PATCH] feat: added step interval instead of tplusone --- .../MetricsApplication/Tabs/DBCall.tsx | 14 +++++++++++++ .../MetricsApplication/Tabs/External.tsx | 15 +++++++++++++ .../MetricsApplication/Tabs/Overview.tsx | 21 ++++++++++++++++--- .../Tabs/Overview/ServiceOverview.tsx | 5 ++++- .../container/MetricsApplication/Tabs/util.ts | 10 +++++---- 5 files changed, 57 insertions(+), 8 deletions(-) diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx index da7bbbfc60..9ce242582b 100644 --- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx @@ -14,10 +14,12 @@ import { resourceAttributesToTagFilterItems, } from 'hooks/useResourceAttribute/utils'; import useUrlQuery from 'hooks/useUrlQuery'; +import getStep from 'lib/getStep'; import history from 'lib/history'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import { useLocation, useParams } from 'react-router-dom'; +import store from 'store'; import { UpdateTimeInterval } from 'store/actions'; import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData'; import { EQueryType } from 'types/common/dashboard'; @@ -123,6 +125,16 @@ function DBCall(): JSX.Element { [servicename, tagFilterItems], ); + const stepInterval = useMemo( + () => + getStep({ + end: store.getState().globalTime.maxTime, + inputFormat: 'ns', + start: store.getState().globalTime.minTime, + }), + [], + ); + const logEventCalledRef = useRef(false); useEffect(() => { @@ -158,6 +170,7 @@ function DBCall(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces @@ -192,6 +205,7 @@ function DBCall(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx index 5ba3d3df6c..328a544472 100644 --- a/frontend/src/container/MetricsApplication/Tabs/External.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx @@ -16,10 +16,12 @@ import { resourceAttributesToTagFilterItems, } from 'hooks/useResourceAttribute/utils'; import useUrlQuery from 'hooks/useUrlQuery'; +import getStep from 'lib/getStep'; import history from 'lib/history'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import { useLocation, useParams } from 'react-router-dom'; +import store from 'store'; import { UpdateTimeInterval } from 'store/actions'; import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { EQueryType } from 'types/common/dashboard'; @@ -141,6 +143,15 @@ function External(): JSX.Element { ], }); + const stepInterval = useMemo( + () => + getStep({ + end: store.getState().globalTime.maxTime, + inputFormat: 'ns', + start: store.getState().globalTime.minTime, + }), + [], + ); const logEventCalledRef = useRef(false); useEffect(() => { if (!logEventCalledRef.current) { @@ -222,6 +233,7 @@ function External(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery: errorApmToTraceQuery, + stepInterval, })} > View Traces @@ -257,6 +269,7 @@ function External(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces @@ -295,6 +308,7 @@ function External(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces @@ -330,6 +344,7 @@ function External(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index a8d40f3dd9..77bf86b80f 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx @@ -15,6 +15,7 @@ import { resourceAttributesToTagFilterItems, } from 'hooks/useResourceAttribute/utils'; import useUrlQuery from 'hooks/useUrlQuery'; +import getStep from 'lib/getStep'; import history from 'lib/history'; import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin'; import { defaultTo } from 'lodash-es'; @@ -180,6 +181,16 @@ function Application(): JSX.Element { id: SERVICE_CHART_ID.errorPercentage, }); + const stepInterval = useMemo( + () => + getStep({ + end: maxTime, + inputFormat: 'ns', + start: minTime, + }), + [maxTime, minTime], + ); + const onDragSelect = useCallback( (start: number, end: number) => { const startTimestamp = Math.trunc(start); @@ -204,11 +215,12 @@ function Application(): JSX.Element { isViewLogsClicked?: boolean, ): (() => void) => (): void => { const currentTime = timestamp; - const tPlusOne = timestamp + 60; + const endTime = timestamp + stepInterval; + console.log(endTime, stepInterval); const urlParams = new URLSearchParams(search); urlParams.set(QueryParams.startTime, currentTime.toString()); - urlParams.set(QueryParams.endTime, tPlusOne.toString()); + urlParams.set(QueryParams.endTime, endTime.toString()); urlParams.delete(QueryParams.relativeTime); const avialableParams = routeConfig[ROUTES.TRACE]; const queryString = getQueryString(avialableParams, urlParams); @@ -229,7 +241,7 @@ function Application(): JSX.Element { history.push(newPath); }, // eslint-disable-next-line react-hooks/exhaustive-deps - [], + [stepInterval], ); const logErrorQuery = useGetAPMToLogsQueries({ @@ -280,6 +292,7 @@ function Application(): JSX.Element { selectedTraceTags={selectedTraceTags} topLevelOperationsRoute={topLevelOperationsRoute} topLevelOperationsIsLoading={topLevelOperationsIsLoading} + stepInterval={stepInterval} /> @@ -293,6 +306,7 @@ function Application(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces @@ -321,6 +335,7 @@ function Application(): JSX.Element { selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} > View Traces diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx index 0b7d86d660..24e2233244 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx @@ -35,6 +35,7 @@ function ServiceOverview({ selectedTimeStamp, topLevelOperationsRoute, topLevelOperationsIsLoading, + stepInterval, }: ServiceOverviewProps): JSX.Element { const { servicename: encodedServiceName } = useParams(); const servicename = decodeURIComponent(encodedServiceName); @@ -88,12 +89,14 @@ function ServiceOverview({ timestamp: selectedTimeStamp, apmToTraceQuery: apmToLogQuery, isViewLogsClicked: true, + stepInterval, })} onViewTracesClick={onViewTracePopupClick({ servicename, selectedTraceTags, timestamp: selectedTimeStamp, apmToTraceQuery, + stepInterval, })} /> @@ -120,8 +123,8 @@ function ServiceOverview({ ); } - interface ServiceOverviewProps { + stepInterval: number; selectedTimeStamp: number; selectedTraceTags: string; onDragSelect: (start: number, end: number) => void; diff --git a/frontend/src/container/MetricsApplication/Tabs/util.ts b/frontend/src/container/MetricsApplication/Tabs/util.ts index c13c0857e5..e6d58831a0 100644 --- a/frontend/src/container/MetricsApplication/Tabs/util.ts +++ b/frontend/src/container/MetricsApplication/Tabs/util.ts @@ -35,6 +35,7 @@ interface OnViewTracePopupClickProps { timestamp: number; apmToTraceQuery: Query; isViewLogsClicked?: boolean; + stepInterval?: number; } export function generateExplorerPath( @@ -54,21 +55,22 @@ export function generateExplorerPath( }=${JSONCompositeQuery}&${queryString.join('&')}`; } +// TODO(@rahul-signoz): update the name of this function once we have view logs button in every panel export function onViewTracePopupClick({ selectedTraceTags, servicename, timestamp, apmToTraceQuery, isViewLogsClicked, + stepInterval, }: OnViewTracePopupClickProps): VoidFunction { return (): void => { const currentTime = timestamp; - - const tPlusOne = timestamp + 60; + const endTime = timestamp + (stepInterval || 60); const urlParams = new URLSearchParams(window.location.search); urlParams.set(QueryParams.startTime, currentTime.toString()); - urlParams.set(QueryParams.endTime, tPlusOne.toString()); + urlParams.set(QueryParams.endTime, endTime.toString()); urlParams.delete(QueryParams.relativeTime); const avialableParams = routeConfig[ROUTES.TRACE]; const queryString = getQueryString(avialableParams, urlParams); @@ -175,7 +177,7 @@ export function useGetAPMToLogsQueries({ const serviceName = { id: 'service.name--string--resource--true', dataType: DataTypes.String, - isColumn: true, + isColumn: false, key: 'service.name', type: 'resource', isJSON: false,