diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx index 42cffb92cd..dd97916ce6 100644 --- a/frontend/src/container/LogsExplorerList/index.tsx +++ b/frontend/src/container/LogsExplorerList/index.tsx @@ -155,6 +155,7 @@ function LogsExplorerList({ > ( + const { minTime, maxTime } = useSelector( (state) => state.globalTime, ); @@ -254,11 +254,10 @@ function LogsExplorerViews({ enabled: !isLimit && !!requestData, }, { - ...(timeRange && - activeLogId && + ...(activeLogId && !logs.length && { - start: timeRange.start, - end: timeRange.end, + start: minTime, + end: maxTime, }), }, undefined, @@ -521,7 +520,7 @@ function LogsExplorerViews({ setLogs(newLogs); onTimeRangeChange({ start: currentParams?.start, - end: timeRange?.end || currentParams?.end, + end: currentParams?.end, pageSize: newLogs.length, }); } @@ -538,8 +537,7 @@ function LogsExplorerViews({ filters: listQuery?.filters || initialFilters, page: 1, log: null, - pageSize: - timeRange?.pageSize && activeLogId ? timeRange?.pageSize : pageSize, + pageSize, }); setLogs([]); @@ -554,7 +552,6 @@ function LogsExplorerViews({ listQuery, pageSize, minTime, - timeRange, activeLogId, onTimeRangeChange, panelType, diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx index 5717136304..577533adcf 100644 --- a/frontend/src/container/LogsTable/index.tsx +++ b/frontend/src/container/LogsTable/index.tsx @@ -10,12 +10,14 @@ import LogsTableView from 'components/Logs/TableView'; import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar'; import Spinner from 'components/Spinner'; import { CARD_BODY_STYLE } from 'constants/card'; -import { FontSize } from 'container/OptionsMenu/types'; +import { LOCALSTORAGE } from 'constants/localStorage'; +import { useOptionsMenu } from 'container/OptionsMenu'; import { useActiveLog } from 'hooks/logs/useActiveLog'; import { memo, useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { Virtuoso } from 'react-virtuoso'; import { AppState } from 'store/reducers'; +import { DataSource, StringOperators } from 'types/common/queryBuilder'; // interfaces import { ILogsReducer } from 'types/reducer/logs'; @@ -57,6 +59,14 @@ function LogsTable(props: LogsTableProps): JSX.Element { liveTail, ]); + const { options } = useOptionsMenu({ + storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS, + // this component will alwyays be called on old logs explorer page itself! + dataSource: DataSource.LOGS, + // and we do not have table / timeseries aggregated views in the old logs explorer! + aggregateOperator: StringOperators.NOOP, + }); + const getItemContent = useCallback( (index: number): JSX.Element => { const log = logs[index]; @@ -68,7 +78,7 @@ function LogsTable(props: LogsTableProps): JSX.Element { data={log} linesPerRow={linesPerRow} selectedFields={selected} - fontSize={FontSize.SMALL} + fontSize={options.fontSize} /> ); } @@ -81,11 +91,19 @@ function LogsTable(props: LogsTableProps): JSX.Element { linesPerRow={linesPerRow} onAddToQuery={onAddToQuery} onSetActiveLog={onSetActiveLog} - fontSize={FontSize.SMALL} + fontSize={options.fontSize} /> ); }, - [logs, viewMode, selected, onAddToQuery, onSetActiveLog, linesPerRow], + [ + logs, + viewMode, + selected, + linesPerRow, + onAddToQuery, + onSetActiveLog, + options.fontSize, + ], ); const renderContent = useMemo(() => { @@ -96,7 +114,7 @@ function LogsTable(props: LogsTableProps): JSX.Element { logs={logs} fields={selected} linesPerRow={linesPerRow} - fontSize={FontSize.SMALL} + fontSize={options.fontSize} /> ); } @@ -108,7 +126,15 @@ function LogsTable(props: LogsTableProps): JSX.Element { ); - }, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]); + }, [ + getItemContent, + linesPerRow, + logs, + onSetActiveLog, + options.fontSize, + selected, + viewMode, + ]); if (isLoading) { return ; diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx index 2b553f8017..3895d8b38c 100644 --- a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx +++ b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx @@ -468,7 +468,6 @@ function DateTimeSelection({ if (updatedTime !== 'custom') { urlQuery.delete('startTime'); urlQuery.delete('endTime'); - urlQuery.set(QueryParams.relativeTime, updatedTime); } else { const startTime = preStartTime.toString(); @@ -476,6 +475,7 @@ function DateTimeSelection({ urlQuery.set(QueryParams.startTime, startTime); urlQuery.set(QueryParams.endTime, endTime); + urlQuery.delete(QueryParams.relativeTime); } const generatedUrl = `${location.pathname}?${urlQuery.toString()}`; diff --git a/frontend/src/hooks/logs/types.ts b/frontend/src/hooks/logs/types.ts index 508c3254ee..e76e2de794 100644 --- a/frontend/src/hooks/logs/types.ts +++ b/frontend/src/hooks/logs/types.ts @@ -12,7 +12,6 @@ export type UseCopyLogLink = { isHighlighted: boolean; isLogsExplorerPage: boolean; activeLogId: string | null; - timeRange: LogTimeRange | null; onLogCopy: MouseEventHandler; onTimeRangeChange: (newTimeRange: LogTimeRange | null) => void; }; diff --git a/frontend/src/hooks/logs/useCopyLogLink.ts b/frontend/src/hooks/logs/useCopyLogLink.ts index 8dee58c710..b3b512f380 100644 --- a/frontend/src/hooks/logs/useCopyLogLink.ts +++ b/frontend/src/hooks/logs/useCopyLogLink.ts @@ -26,33 +26,25 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { const [, setCopy] = useCopyToClipboard(); const { notifications } = useNotifications(); - const { queryData: timeRange } = useUrlQueryData( - QueryParams.timeRange, - null, - ); - const { queryData: activeLogId } = useUrlQueryData( QueryParams.activeLogId, null, ); - const { selectedTime } = useSelector( - (state) => state.globalTime, - ); + const { selectedTime, minTime, maxTime } = useSelector< + AppState, + GlobalReducer + >((state) => state.globalTime); const onTimeRangeChange = useCallback( (newTimeRange: LogTimeRange | null): void => { - urlQuery.set(QueryParams.timeRange, JSON.stringify(newTimeRange)); - 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); } @@ -76,14 +68,12 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { event.preventDefault(); event.stopPropagation(); - const range = JSON.stringify(timeRange); - urlQuery.delete(QueryParams.activeLogId); - urlQuery.delete(QueryParams.timeRange); + urlQuery.delete(QueryParams.relativeTime); + urlQuery.set(QueryParams.activeLogId, `"${logId}"`); - urlQuery.set(QueryParams.timeRange, range); - urlQuery.set(QueryParams.startTime, timeRange?.start.toString() || ''); - urlQuery.set(QueryParams.endTime, timeRange?.end.toString() || ''); + urlQuery.set(QueryParams.startTime, minTime?.toString() || ''); + urlQuery.set(QueryParams.endTime, maxTime?.toString() || ''); const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`; @@ -92,7 +82,7 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { message: 'Copied to clipboard', }); }, - [logId, timeRange, urlQuery, pathname, setCopy, notifications], + [logId, urlQuery, minTime, maxTime, pathname, setCopy, notifications], ); useEffect(() => { @@ -110,7 +100,6 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { isHighlighted, isLogsExplorerPage, activeLogId, - timeRange, onLogCopy, onTimeRangeChange, }; diff --git a/frontend/src/hooks/useLogsData.ts b/frontend/src/hooks/useLogsData.ts index 16e550ba56..a26e57abfa 100644 --- a/frontend/src/hooks/useLogsData.ts +++ b/frontend/src/hooks/useLogsData.ts @@ -7,6 +7,8 @@ import { import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config'; import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData'; import { useEffect, useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; import { ILog } from 'types/api/logs/log'; import { IBuilderQuery, @@ -15,6 +17,7 @@ import { TagFilter, } from 'types/api/queryBuilder/queryBuilderData'; import { QueryDataV3 } from 'types/api/widgets/getQuery'; +import { GlobalReducer } from 'types/reducer/globalTime'; import { LogTimeRange } from './logs/types'; import { useCopyLogLink } from './logs/useCopyLogLink'; @@ -39,6 +42,10 @@ export const useLogsData = ({ const [requestData, setRequestData] = useState(null); const [shouldLoadMoreLogs, setShouldLoadMoreLogs] = useState(false); + const { minTime, maxTime } = useSelector( + (state) => state.globalTime, + ); + const { queryData: pageSize } = useUrlQueryData( QueryParams.pageSize, DEFAULT_PER_PAGE_VALUE, @@ -122,7 +129,7 @@ export const useLogsData = ({ return data; }; - const { activeLogId, timeRange, onTimeRangeChange } = useCopyLogLink(); + const { activeLogId, onTimeRangeChange } = useCopyLogLink(); const { data, isFetching } = useGetExplorerQueryRange( requestData, @@ -133,11 +140,10 @@ export const useLogsData = ({ enabled: !isLimit && !!requestData, }, { - ...(timeRange && - activeLogId && + ...(activeLogId && !logs.length && { - start: timeRange.start, - end: timeRange.end, + start: minTime, + end: maxTime, }), }, shouldLoadMoreLogs, @@ -156,7 +162,7 @@ export const useLogsData = ({ setLogs(newLogs); onTimeRangeChange({ start: currentParams?.start, - end: timeRange?.end || currentParams?.end, + end: currentParams?.end, pageSize: newLogs.length, }); } diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts index 8af1c68f3f..83f8370944 100644 --- a/frontend/src/utils/permission/index.ts +++ b/frontend/src/utils/permission/index.ts @@ -95,7 +95,7 @@ export const routePermission: Record = { TRACES_SAVE_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'], API_KEYS: ['ADMIN'], LOGS_BASE: [], - OLD_LOGS_EXPLORER: [], + OLD_LOGS_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'], SHORTCUTS: ['ADMIN', 'EDITOR', 'VIEWER'], INTEGRATIONS: ['ADMIN', 'EDITOR', 'VIEWER'], SERVICE_TOP_LEVEL_OPERATIONS: ['ADMIN', 'EDITOR', 'VIEWER'],