fix: [GH-3790]: timerange not working for different users (#4192)

This commit is contained in:
Vikrant Gupta 2023-12-14 22:14:58 +05:30 committed by GitHub
parent 1d1154aa8c
commit 7efe907757
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 22 deletions

View File

@ -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 (
<>

View File

@ -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<LogTimeRange | null>(QueryParams.timeRange, null);
const { queryData: timeRange } = useUrlQueryData<LogTimeRange | null>(
QueryParams.timeRange,
null,
);
const { queryData: activeLogId } = useUrlQueryData<string | null>(
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<boolean>(isActiveLog);