GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 03:46:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(logs): centralize time range handling in DateTimeSelectionV2 (#7175)

Browse Source 
- Remove custom time range handling logic from logs components
- Use unified time range selection through DateTimeSelectionV2 component
This commit is contained in:
Shaheer Kochai 2025-03-06 10:45:11 +04:30 committed by GitHub
parent 36ebde5470
commit 296a444bd8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 24 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/container/LogsExplorerViews/index.tsx
View File

@ -30,7 +30,6 @@ import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard'; import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils'; import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
import { LogTimeRange } from 'hooks/logs/types';
import { useCopyLogLink } from 'hooks/logs/useCopyLogLink'; import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange'; import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam'; import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
@ -104,7 +103,7 @@ function LogsExplorerViews({
// this is to respect the panel type present in the URL rather than defaulting it to list always. // this is to respect the panel type present in the URL rather than defaulting it to list always.
const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST); const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
const { activeLogId, onTimeRangeChange } = useCopyLogLink(); const { activeLogId } = useCopyLogLink();
const { queryData: pageSize } = useUrlQueryData( const { queryData: pageSize } = useUrlQueryData(
QueryParams.pageSize, QueryParams.pageSize,
@ -562,7 +561,6 @@ function LogsExplorerViews({
}, [handleSetConfig, panelTypes]); }, [handleSetConfig, panelTypes]);
useEffect(() => { useEffect(() => {
const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>;
const currentData = data?.payload?.data?.newResult?.data?.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({
@ -572,11 +570,6 @@ function LogsExplorerViews({
const newLogs = [...logs, ...currentLogs]; const newLogs = [...logs, ...currentLogs];
setLogs(newLogs); setLogs(newLogs);
onTimeRangeChange({
start: currentParams?.start,
end: currentParams?.end,
pageSize: newLogs.length,
});
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -612,7 +605,6 @@ function LogsExplorerViews({
pageSize, pageSize,
minTime, minTime,
activeLogId, activeLogId,
onTimeRangeChange,
panelType, panelType,
selectedView, selectedView,
]); ]);

50
frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
View File

@ -30,7 +30,7 @@ import getTimeString from 'lib/getTimeString';
import { isObject } from 'lodash-es'; import { isObject } from 'lodash-es';
import { Check, Copy, Info, Send, Undo } from 'lucide-react'; import { Check, Copy, Info, Send, Undo } from 'lucide-react';
import { useTimezone } from 'providers/Timezone'; import { useTimezone } from 'providers/Timezone';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { useQueryClient } from 'react-query'; import { useQueryClient } from 'react-query';
import { connect, useDispatch, useSelector } from 'react-redux'; import { connect, useDispatch, useSelector } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom'; import { RouteComponentProps, withRouter } from 'react-router-dom';
@ -314,11 +314,6 @@ function DateTimeSelection({
return `Refreshed ${secondsDiff} sec ago`; return `Refreshed ${secondsDiff} sec ago`;
}, [maxTime, minTime, selectedTime]); }, [maxTime, minTime, selectedTime]);
const isLogsExplorerPage = useMemo(
() => location.pathname === ROUTES.LOGS_EXPLORER,
[location.pathname],
);
const onSelectHandler = useCallback( const onSelectHandler = useCallback(
(value: Time | CustomTimeType): void => { (value: Time | CustomTimeType): void => {
if (isModalTimeSelection) { if (isModalTimeSelection) {
@ -347,15 +342,13 @@ function DateTimeSelection({
return; return;
} }
if (!isLogsExplorerPage) { urlQuery.delete('startTime');
urlQuery.delete('startTime'); urlQuery.delete('endTime');
urlQuery.delete('endTime');
urlQuery.set(QueryParams.relativeTime, value); urlQuery.set(QueryParams.relativeTime, value);
const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
safeNavigate(generatedUrl); safeNavigate(generatedUrl);
}
// For logs explorer - time range handling is managed in useCopyLogLink.ts:52 // For logs explorer - time range handling is managed in useCopyLogLink.ts:52
@ -368,7 +361,6 @@ function DateTimeSelection({
}, },
[ [
initQueryBuilderData, initQueryBuilderData,
isLogsExplorerPage,
isModalTimeSelection, isModalTimeSelection,
location.pathname, location.pathname,
onTimeChange, onTimeChange,
@ -438,16 +430,14 @@ function DateTimeSelection({
updateLocalStorageForRoutes(JSON.stringify({ startTime, endTime })); updateLocalStorageForRoutes(JSON.stringify({ startTime, endTime }));
if (!isLogsExplorerPage) { urlQuery.set(
urlQuery.set( QueryParams.startTime,
QueryParams.startTime, startTime?.toDate().getTime().toString(),
startTime?.toDate().getTime().toString(), );
); urlQuery.set(QueryParams.endTime, endTime?.toDate().getTime().toString());
urlQuery.set(QueryParams.endTime, endTime?.toDate().getTime().toString()); urlQuery.delete(QueryParams.relativeTime);
urlQuery.delete(QueryParams.relativeTime); const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; safeNavigate(generatedUrl);
safeNavigate(generatedUrl);
}
} }
} }
}; };
@ -466,15 +456,13 @@ function DateTimeSelection({
setIsValidteRelativeTime(true); setIsValidteRelativeTime(true);
if (!isLogsExplorerPage) { urlQuery.delete('startTime');
urlQuery.delete('startTime'); urlQuery.delete('endTime');
urlQuery.delete('endTime');
urlQuery.set(QueryParams.relativeTime, dateTimeStr); urlQuery.set(QueryParams.relativeTime, dateTimeStr);
const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
safeNavigate(generatedUrl); safeNavigate(generatedUrl);
}
if (!stagedQuery) { if (!stagedQuery) {
return; return;

2
frontend/src/hooks/logs/types.ts
View File

@ -5,7 +5,6 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
export type LogTimeRange = { export type LogTimeRange = {
start: number; start: number;
end: number; end: number;
pageSize: number;
}; };
export type UseCopyLogLink = { export type UseCopyLogLink = {
@ -13,7 +12,6 @@ export type UseCopyLogLink = {
isLogsExplorerPage: boolean; isLogsExplorerPage: boolean;
activeLogId: string | null; activeLogId: string | null;
onLogCopy: MouseEventHandler<HTMLElement>; onLogCopy: MouseEventHandler<HTMLElement>;
onTimeRangeChange: (newTimeRange: LogTimeRange | null) => void;
}; };
export type UseActiveLog = { export type UseActiveLog = {

27
frontend/src/hooks/logs/useCopyLogLink.ts
View File

@ -3,7 +3,6 @@ import ROUTES from 'constants/routes';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import useUrlQuery from 'hooks/useUrlQuery'; import useUrlQuery from 'hooks/useUrlQuery';
import useUrlQueryData from 'hooks/useUrlQueryData'; import useUrlQueryData from 'hooks/useUrlQueryData';
import history from 'lib/history';
import { import {
MouseEventHandler, MouseEventHandler,
useCallback, useCallback,
@ -18,7 +17,7 @@ import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime'; import { GlobalReducer } from 'types/reducer/globalTime';
import { HIGHLIGHTED_DELAY } from './configs'; import { HIGHLIGHTED_DELAY } from './configs';
import { LogTimeRange, UseCopyLogLink } from './types'; import { UseCopyLogLink } from './types';
export const useCopyLogLink = (logId?: string): UseCopyLogLink => { export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
const urlQuery = useUrlQuery(); const urlQuery = useUrlQuery();
@ -31,27 +30,8 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
null, null,
); );
const { selectedTime, minTime, maxTime } = useSelector< const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
AppState, (state) => state.globalTime,
GlobalReducer
>((state) => state.globalTime);
const onTimeRangeChange = useCallback(
(newTimeRange: LogTimeRange | null): void => {
if (selectedTime !== 'custom') {
urlQuery.delete(QueryParams.startTime);
urlQuery.delete(QueryParams.endTime);
urlQuery.set(QueryParams.relativeTime, selectedTime);
} else {
urlQuery.set(QueryParams.startTime, newTimeRange?.start.toString() || '');
urlQuery.set(QueryParams.endTime, newTimeRange?.end.toString() || '');
urlQuery.delete(QueryParams.relativeTime);
}
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
history.replace(generatedUrl);
},
[pathname, urlQuery, selectedTime],
); );
const isActiveLog = useMemo(() => activeLogId === logId, [activeLogId, logId]); const isActiveLog = useMemo(() => activeLogId === logId, [activeLogId, logId]);
@ -101,6 +81,5 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
isLogsExplorerPage, isLogsExplorerPage,
activeLogId, activeLogId,
onLogCopy, onLogCopy,
onTimeRangeChange,
}; };
}; };

9
frontend/src/hooks/useLogsData.ts
View File

@ -19,7 +19,6 @@ import {
import { QueryDataV3 } from 'types/api/widgets/getQuery'; import { QueryDataV3 } from 'types/api/widgets/getQuery';
import { GlobalReducer } from 'types/reducer/globalTime'; import { GlobalReducer } from 'types/reducer/globalTime';
import { LogTimeRange } from './logs/types';
import { useCopyLogLink } from './logs/useCopyLogLink'; import { useCopyLogLink } from './logs/useCopyLogLink';
import { useGetExplorerQueryRange } from './queryBuilder/useGetExplorerQueryRange'; import { useGetExplorerQueryRange } from './queryBuilder/useGetExplorerQueryRange';
import useUrlQueryData from './useUrlQueryData'; import useUrlQueryData from './useUrlQueryData';
@ -129,7 +128,7 @@ export const useLogsData = ({
return data; return data;
}; };
const { activeLogId, onTimeRangeChange } = useCopyLogLink(); const { activeLogId } = useCopyLogLink();
const { data, isFetching } = useGetExplorerQueryRange( const { data, isFetching } = useGetExplorerQueryRange(
requestData, requestData,
@ -150,7 +149,6 @@ export const useLogsData = ({
); );
useEffect(() => { useEffect(() => {
const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>;
const currentData = data?.payload?.data?.newResult?.data?.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({
@ -160,11 +158,6 @@ export const useLogsData = ({
const newLogs = [...logs, ...currentLogs]; const newLogs = [...logs, ...currentLogs];
setLogs(newLogs); setLogs(newLogs);
onTimeRangeChange({
start: currentParams?.start,
end: currentParams?.end,
pageSize: newLogs.length,
});
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps