diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx index 742409e455..14f454dbb1 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx +++ b/frontend/src/container/TopNav/DateTimeSelection/index.tsx @@ -3,12 +3,16 @@ import { Button, Select as DefaultSelect } from 'antd'; import getLocalStorageKey from 'api/browser/localstorage/get'; import setLocalStorageKey from 'api/browser/localstorage/set'; import { LOCALSTORAGE } from 'constants/localStorage'; +import { QueryParams } from 'constants/query'; +import ROUTES from 'constants/routes'; import dayjs, { Dayjs } from 'dayjs'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; +import useUrlQuery from 'hooks/useUrlQuery'; import GetMinMax from 'lib/getMinMax'; import getTimeString from 'lib/getTimeString'; -import { useCallback, useEffect, useState } from 'react'; +import history from 'lib/history'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; @@ -34,9 +38,9 @@ function DateTimeSelection({ }: Props): JSX.Element { const [formSelector] = Form.useForm(); - const params = new URLSearchParams(location.search); - const searchStartTime = params.get('startTime'); - const searchEndTime = params.get('endTime'); + const urlQuery = useUrlQuery(); + const searchStartTime = urlQuery.get('startTime'); + const searchEndTime = urlQuery.get('endTime'); const localstorageStartTime = getLocalStorageKey('startTime'); const localstorageEndTime = getLocalStorageKey('endTime'); @@ -169,6 +173,11 @@ function DateTimeSelection({ return `Last refresh - ${secondsDiff} sec ago`; }, [maxTime, minTime, selectedTime]); + const isLogsExplorerPage = useMemo( + () => location.pathname === ROUTES.LOGS_EXPLORER, + [location.pathname], + ); + const onSelectHandler = (value: Time): void => { if (value !== 'custom') { updateTimeInterval(value); @@ -181,12 +190,18 @@ function DateTimeSelection({ setCustomDTPickerVisible(true); } + const { maxTime, minTime } = GetMinMax(value, getTime()); + + if (!isLogsExplorerPage) { + urlQuery.set(QueryParams.startTime, minTime.toString()); + urlQuery.set(QueryParams.endTime, maxTime.toString()); + const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; + history.replace(generatedUrl); + } + if (!stagedQuery) { return; } - - const { maxTime, minTime } = GetMinMax(value, getTime()); - initQueryBuilderData(updateStepInterval(stagedQuery, maxTime, minTime)); }; @@ -207,6 +222,12 @@ function DateTimeSelection({ setLocalStorageKey('startTime', startTimeMoment.toString()); setLocalStorageKey('endTime', endTimeMoment.toString()); updateLocalStorageForRoutes('custom'); + if (!isLogsExplorerPage) { + urlQuery.set(QueryParams.startTime, startTimeMoment.toString()); + urlQuery.set(QueryParams.endTime, endTimeMoment.toString()); + const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; + history.replace(generatedUrl); + } } } }; @@ -234,7 +255,6 @@ function DateTimeSelection({ if (searchEndTime !== null && searchStartTime !== null) { return 'custom'; } - if ( (localstorageEndTime === null || localstorageStartTime === null) && time === 'custom' @@ -252,16 +272,8 @@ function DateTimeSelection({ setRefreshButtonHidden(updatedTime === 'custom'); updateTimeInterval(updatedTime, [preStartTime, preEndTime]); - }, [ - location.pathname, - getTime, - localstorageEndTime, - localstorageStartTime, - searchEndTime, - searchStartTime, - updateTimeInterval, - globalTimeLoading, - ]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [location.pathname, updateTimeInterval, globalTimeLoading]); return ( <> diff --git a/frontend/src/hooks/logs/useCopyLogLink.ts b/frontend/src/hooks/logs/useCopyLogLink.ts index 8401b6433f..35b4293f51 100644 --- a/frontend/src/hooks/logs/useCopyLogLink.ts +++ b/frontend/src/hooks/logs/useCopyLogLink.ts @@ -3,6 +3,7 @@ import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; import useUrlQuery from 'hooks/useUrlQuery'; import useUrlQueryData from 'hooks/useUrlQueryData'; +import history from 'lib/history'; import { MouseEventHandler, useCallback, @@ -28,16 +29,27 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { (state) => state.globalTime, ); - const { - queryData: timeRange, - redirectWithQuery: onTimeRangeChange, - } = useUrlQueryData(QueryParams.timeRange, null); + const { queryData: timeRange } = useUrlQueryData( + QueryParams.timeRange, + null, + ); const { queryData: activeLogId } = useUrlQueryData( QueryParams.activeLogId, null, ); + const onTimeRangeChange = useCallback( + (newTimeRange: LogTimeRange | null): void => { + urlQuery.set(QueryParams.timeRange, JSON.stringify(newTimeRange)); + urlQuery.set(QueryParams.startTime, newTimeRange?.start.toString() || ''); + urlQuery.set(QueryParams.endTime, newTimeRange?.end.toString() || ''); + const generatedUrl = `${pathname}?${urlQuery.toString()}`; + history.replace(generatedUrl); + }, + [pathname, urlQuery], + ); + const isActiveLog = useMemo(() => activeLogId === logId, [activeLogId, logId]); const [isHighlighted, setIsHighlighted] = useState(isActiveLog);