chore: clean out the logs time range issues / old logs explorer routes issue (#5590)

* chore: clean out the logs time range async issues

* chore: correct the permissions for old logs explorer

frontend/src/container/LogsExplorerList/index.tsx

@@ -155,6 +155,7 @@ function LogsExplorerList({
 			>
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
+						key={activeLogIndex || 'logs-virtuoso'}
 						ref={ref}
 						initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 						data={logs}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -100,14 +100,14 @@ function LogsExplorerViews({
 	// 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 { activeLogId, timeRange, onTimeRangeChange } = useCopyLogLink();
+	const { activeLogId, onTimeRangeChange } = useCopyLogLink();
 
 	const { queryData: pageSize } = useUrlQueryData(
 		QueryParams.pageSize,
 		DEFAULT_PER_PAGE_VALUE,
 	);
 
-	const { minTime } = useSelector<AppState, GlobalReducer>(
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
 
@@ -254,11 +254,10 @@ function LogsExplorerViews({
 			enabled: !isLimit && !!requestData,
 		},
 		{
-			...(timeRange &&
+			...(activeLogId &&
-				activeLogId &&
 				!logs.length && {
-					start: timeRange.start,
+					start: minTime,
-					end: timeRange.end,
+					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:
+				pageSize,
-					timeRange?.pageSize && activeLogId ? timeRange?.pageSize : pageSize,
 			});
 
 			setLogs([]);
@@ -554,7 +552,6 @@ function LogsExplorerViews({
 		listQuery,
 		pageSize,
 		minTime,
-		timeRange,
 		activeLogId,
 		onTimeRangeChange,
 		panelType,

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 {
 				</OverlayScrollbar>
 			</Card>
 		);
-	}, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]);
+	}, [
+		getItemContent,
+		linesPerRow,
+		logs,
+		onSetActiveLog,
+		options.fontSize,
+		selected,
+		viewMode,
+	]);
 
 	if (isLoading) {
 		return <Spinner height={20} tip="Getting Logs" />;

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()}`;

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<HTMLElement>;
 	onTimeRangeChange: (newTimeRange: LogTimeRange | null) => void;
 };

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<LogTimeRange | null>(
-		QueryParams.timeRange,
-		null,
-	);
-
 	const { queryData: activeLogId } = useUrlQueryData<string | null>(
 		QueryParams.activeLogId,
 		null,
 	);
 
-	const { selectedTime } = useSelector<AppState, GlobalReducer>(
+	const { selectedTime, minTime, maxTime } = useSelector<
-		(state) => state.globalTime,
+		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, minTime?.toString() || '');
-			urlQuery.set(QueryParams.startTime, timeRange?.start.toString() || '');
+			urlQuery.set(QueryParams.endTime, maxTime?.toString() || '');
-			urlQuery.set(QueryParams.endTime, timeRange?.end.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,
 	};

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<Query | null>(null);
 	const [shouldLoadMoreLogs, setShouldLoadMoreLogs] = useState<boolean>(false);
 
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(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,
+					start: minTime,
-					end: timeRange.end,
+					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,
 			});
 		}

frontend/src/utils/permission/index.ts

@@ -95,7 +95,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	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'],