diff --git a/frontend/public/locales/en-GB/trace.json b/frontend/public/locales/en-GB/trace.json index 587f565a21..c1e5519141 100644 --- a/frontend/public/locales/en-GB/trace.json +++ b/frontend/public/locales/en-GB/trace.json @@ -2,7 +2,7 @@ "options_menu": { "options": "Options", "format": "Format", - "row": "Row", + "raw": "Raw", "default": "Default", "column": "Column", "maxLines": "Max lines per Row", diff --git a/frontend/public/locales/en/trace.json b/frontend/public/locales/en/trace.json index 587f565a21..c1e5519141 100644 --- a/frontend/public/locales/en/trace.json +++ b/frontend/public/locales/en/trace.json @@ -2,7 +2,7 @@ "options_menu": { "options": "Options", "format": "Format", - "row": "Row", + "raw": "Raw", "default": "Default", "column": "Column", "maxLines": "Max lines per Row", diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts index d2988c9be5..d7ae2b010a 100644 --- a/frontend/src/constants/localStorage.ts +++ b/frontend/src/constants/localStorage.ts @@ -6,4 +6,5 @@ export enum LOCALSTORAGE { THEME = 'THEME', LOGS_VIEW_MODE = 'LOGS_VIEW_MODE', LOGS_LINES_PER_ROW = 'LOGS_LINES_PER_ROW', + LIST_OPTIONS = 'LIST_OPTIONS', } diff --git a/frontend/src/container/OptionsMenu/FormatField/index.tsx b/frontend/src/container/OptionsMenu/FormatField/index.tsx index 3b82631a5d..2f7dfa7ee4 100644 --- a/frontend/src/container/OptionsMenu/FormatField/index.tsx +++ b/frontend/src/container/OptionsMenu/FormatField/index.tsx @@ -18,7 +18,7 @@ function FormatField({ config }: FormatFieldProps): JSX.Element | null { value={config.value} onChange={config.onChange} > - {t('options_menu.row')} + {t('options_menu.raw')} {t('options_menu.default')} {t('options_menu.column')} diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts index 7488ae492c..f5719fe37a 100644 --- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts +++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts @@ -1,5 +1,8 @@ import { RadioChangeEvent } from 'antd'; +import getFromLocalstorage from 'api/browser/localstorage/get'; +import setToLocalstorage from 'api/browser/localstorage/set'; import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys'; +import { LOCALSTORAGE } from 'constants/localStorage'; import { QueryBuilderKeys } from 'constants/queryBuilder'; import useUrlQueryData from 'hooks/useUrlQueryData'; import { useCallback, useEffect, useMemo } from 'react'; @@ -28,6 +31,10 @@ const useOptionsMenu = ({ aggregateOperator, initialOptions = {}, }: UseOptionsMenuProps): UseOptionsMenu => { + const localStorageOptionsQuery = getFromLocalstorage( + LOCALSTORAGE.LIST_OPTIONS, + ); + const { query: optionsQuery, queryData: optionsQueryData, @@ -66,9 +73,21 @@ const useOptionsMenu = ({ [optionsQueryData], ); - const addColumnOptions = useMemo( - () => getOptionsFromKeys(attributeKeys, selectedColumnKeys), - [attributeKeys, selectedColumnKeys], + const addColumnOptions = useMemo(() => { + const filteredAttributeKeys = attributeKeys.filter( + (item) => item.key !== 'body', + ); + + return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys); + }, [attributeKeys, selectedColumnKeys]); + + const handleRedirectWithOptionsData = useCallback( + (newQueryData: OptionsQuery) => { + redirectWithOptionsData(newQueryData); + + setToLocalstorage(LOCALSTORAGE.LIST_OPTIONS, JSON.stringify(newQueryData)); + }, + [redirectWithOptionsData], ); const handleSelectedColumnsChange = useCallback( @@ -83,15 +102,17 @@ const useOptionsMenu = ({ return [...acc, column]; }, [] as BaseAutocompleteData[]); - redirectWithOptionsData({ + const optionsData: OptionsQuery = { ...optionsQueryData, selectColumns: newSelectedColumns, - }); + }; + + handleRedirectWithOptionsData(optionsData); }, [ selectedColumnKeys, - redirectWithOptionsData, optionsQueryData, + handleRedirectWithOptionsData, attributeKeys, ], ); @@ -102,48 +123,54 @@ const useOptionsMenu = ({ ({ id }) => id !== columnKey, ); - redirectWithOptionsData({ - ...defaultOptionsQuery, + const optionsData: OptionsQuery = { + ...optionsQueryData, selectColumns: newSelectedColumns, - }); + }; + + handleRedirectWithOptionsData(optionsData); }, - [optionsQueryData, redirectWithOptionsData], + [optionsQueryData, handleRedirectWithOptionsData], ); const handleFormatChange = useCallback( (event: RadioChangeEvent) => { - redirectWithOptionsData({ + const optionsData: OptionsQuery = { ...optionsQueryData, format: event.target.value, - }); + }; + + handleRedirectWithOptionsData(optionsData); }, - [optionsQueryData, redirectWithOptionsData], + [handleRedirectWithOptionsData, optionsQueryData], ); const handleMaxLinesChange = useCallback( (value: string | number | null) => { - redirectWithOptionsData({ + const optionsData: OptionsQuery = { ...optionsQueryData, maxLines: value as number, - }); + }; + + handleRedirectWithOptionsData(optionsData); }, - [optionsQueryData, redirectWithOptionsData], + [handleRedirectWithOptionsData, optionsQueryData], ); const optionsMenuConfig: Required = useMemo( () => ({ addColumn: { - value: optionsQueryData?.selectColumns || defaultOptionsQuery.selectColumns, + value: optionsQueryData.selectColumns || defaultOptionsQuery.selectColumns, options: addColumnOptions || [], onChange: handleSelectedColumnsChange, onRemove: handleRemoveSelectedColumn, }, format: { - value: optionsQueryData?.format || defaultOptionsQuery.format, + value: optionsQueryData.format || defaultOptionsQuery.format, onChange: handleFormatChange, }, maxLines: { - value: optionsQueryData?.maxLines || defaultOptionsQuery.maxLines, + value: optionsQueryData.maxLines || defaultOptionsQuery.maxLines, onChange: handleMaxLinesChange, }, }), @@ -162,8 +189,18 @@ const useOptionsMenu = ({ useEffect(() => { if (optionsQuery || !isFetched) return; - redirectWithOptionsData(initialOptionsQuery); - }, [isFetched, optionsQuery, initialOptionsQuery, redirectWithOptionsData]); + const nextOptionsQuery = localStorageOptionsQuery + ? JSON.parse(localStorageOptionsQuery) + : initialOptionsQuery; + + redirectWithOptionsData(nextOptionsQuery); + }, [ + isFetched, + optionsQuery, + initialOptionsQuery, + redirectWithOptionsData, + localStorageOptionsQuery, + ]); return { isLoading,