chore: store the preserved view as object in Local Storage, overall r…

…efactoring

frontend/src/constants/localStorage.ts

@@ -19,7 +19,6 @@ export enum LOCALSTORAGE {
 	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 	THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
-	LAST_USED_SAVED_LOGS_VIEW = 'LAST_USED_SAVED_LOGS_VIEW',
-	LAST_USED_SAVED_TRACES_VIEW = 'LAST_USED_SAVED_TRACES_VIEW',
+	LAST_USED_SAVED_VIEWS = 'LAST_USED_SAVED_VIEWS',
 	SHOW_LOGS_QUICK_FILTERS = 'SHOW_LOGS_QUICK_FILTERS',
 }

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -63,7 +63,9 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
+import { PreservedViewsTypes } from './constants';
 import ExplorerOptionsHideArea from './ExplorerOptionsHideArea';
+import { PreservedViewsInLocalStorage } from './types';
 import {
 	DATASOURCE_VS_ROUTES,
 	generateRGBAFromHex,
@@ -94,9 +96,10 @@ function ExplorerOptions({
 	const isDarkMode = useIsDarkMode();
 	const isLogsExplorer = sourcepage === DataSource.LOGS;
 
-	const PRESERVED_VIEW_LOCAL_STORAGE_KEY = isLogsExplorer
-		? LOCALSTORAGE.LAST_USED_SAVED_LOGS_VIEW
-		: LOCALSTORAGE.LAST_USED_SAVED_TRACES_VIEW;
+	const PRESERVED_VIEW_LOCAL_STORAGE_KEY = LOCALSTORAGE.LAST_USED_SAVED_VIEWS;
+	const PRESERVED_VIEW_TYPE = isLogsExplorer
+		? PreservedViewsTypes.LOGS
+		: PreservedViewsTypes.TRACES;
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -272,6 +275,31 @@ function ExplorerOptions({
 		[viewsData, handleExplorerTabChange],
 	);
 
+	const updatePreservedViewInLocalStorage = (option: {
+		key: string;
+		value: string;
+	}): void => {
+		// Retrieve stored views from local storage
+		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+
+		// Initialize or parse the stored views
+		const updatedViews: PreservedViewsInLocalStorage = storedViews
+			? JSON.parse(storedViews)
+			: {};
+
+		// Update the views with the new selection
+		updatedViews[PRESERVED_VIEW_TYPE] = {
+			key: option.key,
+			value: option.value,
+		};
+
+		// Save the updated views back to local storage
+		localStorage.setItem(
+			PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+			JSON.stringify(updatedViews),
+		);
+	};
+
 	const handleSelect = (
 		value: string,
 		option: { key: string; value: string },
@@ -291,23 +319,34 @@ function ExplorerOptions({
 			});
 		}
 
-		localStorage.setItem(
-			PRESERVED_VIEW_LOCAL_STORAGE_KEY,
-			JSON.stringify({
-				key: option.key,
-				value: option.value,
-			}),
-		);
+		updatePreservedViewInLocalStorage(option);
 
 		if (ref.current) {
 			ref.current.blur();
 		}
 	};
 
-	const handleClearSelect = (): void => {
-		if (localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY)) {
-			localStorage.removeItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+	const removeCurrentViewFromLocalStorage = (): void => {
+		// Retrieve stored views from local storage
+		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+
+		if (storedViews) {
+			// Parse the stored views
+			const parsedViews = JSON.parse(storedViews);
+
+			// Remove the current view type from the parsed views
+			delete parsedViews[PRESERVED_VIEW_TYPE];
+
+			// Update local storage with the modified views
+			localStorage.setItem(
+				PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+				JSON.stringify(parsedViews),
+			);
 		}
+	};
+
+	const handleClearSelect = (): void => {
+		removeCurrentViewFromLocalStorage();
 
 		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
 	};
@@ -384,8 +423,12 @@ function ExplorerOptions({
 	] = useState(false);
 
 	useEffect(() => {
-		const value = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
-		const preservedView = JSON.parse(value || '{}');
+		const parsedPreservedView = JSON.parse(
+			localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
+		);
+
+		const preservedView = parsedPreservedView[PRESERVED_VIEW_TYPE] || {};
+
 		let timeoutId: string | number | NodeJS.Timeout | undefined;
 
 		if (
@@ -404,6 +447,7 @@ function ExplorerOptions({
 		return (): void => clearTimeout(timeoutId);
 	}, [
 		PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+		PRESERVED_VIEW_TYPE,
 		isRecentlyUsedSavedViewSelected,
 		onMenuItemSelectHandler,
 		viewKey,

frontend/src/container/ExplorerOptions/constants.ts

@@ -0,0 +1,4 @@
+export enum PreservedViewsTypes {
+	LOGS = 'logs',
+	TRACES = 'traces',
+}

frontend/src/container/ExplorerOptions/types.ts

@@ -8,6 +8,8 @@ import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
+import { PreservedViewsTypes } from './constants';
+
 export interface SaveNewViewHandlerProps {
 	viewName: string;
 	compositeQuery: ICompositeMetricQuery;
@@ -26,3 +28,11 @@ export interface SaveNewViewHandlerProps {
 	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
 	setNewViewName: Dispatch<SetStateAction<string>>;
 }
+
+export type PreservedViewType =
+	| PreservedViewsTypes.LOGS
+	| PreservedViewsTypes.TRACES;
+
+export type PreservedViewsInLocalStorage = Partial<
+	Record<PreservedViewType, { key: string; value: string }>
+>;