GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 20:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: save list options to local storage (#3055)

Browse Source 
* feat: save list options to local storage

* fix: removing of the columns field

* fix: filter body column from columns

* fix: typo for raw

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
This commit is contained in:
Yevhen Shevchenko 2023-07-06 18:56:51 +03:00 committed by GitHub
parent eb2a955323
commit 360029f350
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/locales/en-GB/trace.json
View File

@ -2,7 +2,7 @@
"options_menu": {
"options": "Options",
"format": "Format",
"row": "Row",
"raw": "Raw",
"default": "Default",
"column": "Column",
"maxLines": "Max lines per Row",

2
frontend/public/locales/en/trace.json
View File

@ -2,7 +2,7 @@
"options_menu": {
"options": "Options",
"format": "Format",
"row": "Row",
"raw": "Raw",
"default": "Default",
"column": "Column",
"maxLines": "Max lines per Row",

1
frontend/src/constants/localStorage.ts
View File

@ -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',
}

2
frontend/src/container/OptionsMenu/FormatField/index.tsx
View File

@ -18,7 +18,7 @@ function FormatField({ config }: FormatFieldProps): JSX.Element | null {
value={config.value}
onChange={config.onChange}
>
<RadioButton value="raw">{t('options_menu.row')}</RadioButton>
<RadioButton value="raw">{t('options_menu.raw')}</RadioButton>
<RadioButton value="list">{t('options_menu.default')}</RadioButton>
<RadioButton value="table">{t('options_menu.column')}</RadioButton>
</RadioGroup>

79
frontend/src/container/OptionsMenu/useOptionsMenu.ts
View File

@ -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<OptionsMenuConfig> = 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,