From d9d34f2b9291c48b8be3bd9c25bed381a9aad2ee Mon Sep 17 00:00:00 2001 From: ahmadshaheer Date: Mon, 9 Sep 2024 09:37:13 +0430 Subject: [PATCH] chore: store the preserved view as object in Local Storage, overall refactoring --- frontend/src/constants/localStorage.ts | 3 +- .../ExplorerOptions/ExplorerOptions.tsx | 74 +++++++++++++++---- .../container/ExplorerOptions/constants.ts | 4 + .../src/container/ExplorerOptions/types.ts | 10 +++ 4 files changed, 74 insertions(+), 17 deletions(-) create mode 100644 frontend/src/container/ExplorerOptions/constants.ts diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts index a427a7fcf3..4e6859a2dd 100644 --- a/frontend/src/constants/localStorage.ts +++ b/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', } diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 5a9ea71b10..5be22deb2e 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/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, diff --git a/frontend/src/container/ExplorerOptions/constants.ts b/frontend/src/container/ExplorerOptions/constants.ts new file mode 100644 index 0000000000..4a4e63f612 --- /dev/null +++ b/frontend/src/container/ExplorerOptions/constants.ts @@ -0,0 +1,4 @@ +export enum PreservedViewsTypes { + LOGS = 'logs', + TRACES = 'traces', +} diff --git a/frontend/src/container/ExplorerOptions/types.ts b/frontend/src/container/ExplorerOptions/types.ts index 398fe0d8a0..5f71efd033 100644 --- a/frontend/src/container/ExplorerOptions/types.ts +++ b/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>; } + +export type PreservedViewType = + | PreservedViewsTypes.LOGS + | PreservedViewsTypes.TRACES; + +export type PreservedViewsInLocalStorage = Partial< + Record +>;