diff --git a/frontend/src/container/AllError/constant.ts b/frontend/src/container/AllError/constant.ts new file mode 100644 index 0000000000..268f3ff89c --- /dev/null +++ b/frontend/src/container/AllError/constant.ts @@ -0,0 +1,9 @@ +const DEFAULT_FILTER_VALUE = ''; +const EXCEPTION_TYPE_FILTER_NAME = 'exceptionType'; +const SERVICE_NAME_FILTER_NAME = 'serviceName'; + +export { + DEFAULT_FILTER_VALUE, + EXCEPTION_TYPE_FILTER_NAME, + SERVICE_NAME_FILTER_NAME, +}; diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index 6db945b9bc..3b3939a4a7 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -17,6 +17,7 @@ import getAll from 'api/errors/getAll'; import getErrorCounts from 'api/errors/getErrorCounts'; import ROUTES from 'constants/routes'; import dayjs from 'dayjs'; +import useUrlQuery from 'hooks/useUrlQuery'; import createQueryParams from 'lib/createQueryParams'; import history from 'lib/history'; import React, { useCallback, useEffect, useMemo } from 'react'; @@ -30,7 +31,11 @@ import { Exception, PayloadProps } from 'types/api/errors/getAll'; import { GlobalReducer } from 'types/reducer/globalTime'; import { + extractFilterValues, + getDefaultFilterValue, getDefaultOrder, + getFilterString, + getFilterValues, getNanoSeconds, getOffSet, getOrder, @@ -43,15 +48,27 @@ function AllErrors(): JSX.Element { const { maxTime, minTime, loading } = useSelector( (state) => state.globalTime, ); - const { search, pathname } = useLocation(); - const params = useMemo(() => new URLSearchParams(search), [search]); - + const { pathname } = useLocation(); + const params = useUrlQuery(); const { t } = useTranslation(['common']); - - const updatedOrder = getOrder(params.get(urlKey.order)); - const getUpdatedOffset = getOffSet(params.get(urlKey.offset)); - const getUpdatedParams = getOrderParams(params.get(urlKey.orderParam)); - const getUpdatedPageSize = getUpdatePageSize(params.get(urlKey.pageSize)); + const { + updatedOrder, + getUpdatedOffset, + getUpdatedParams, + getUpdatedPageSize, + getUpdatedExceptionType, + getUpdatedServiceName, + } = useMemo( + () => ({ + updatedOrder: getOrder(params.get(urlKey.order)), + getUpdatedOffset: getOffSet(params.get(urlKey.offset)), + getUpdatedParams: getOrderParams(params.get(urlKey.orderParam)), + getUpdatedPageSize: getUpdatePageSize(params.get(urlKey.pageSize)), + getUpdatedExceptionType: getFilterString(params.get(urlKey.exceptionType)), + getUpdatedServiceName: getFilterString(params.get(urlKey.serviceName)), + }), + [params], + ); const updatedPath = useMemo( () => @@ -60,6 +77,8 @@ function AllErrors(): JSX.Element { offset: getUpdatedOffset, orderParam: getUpdatedParams, pageSize: getUpdatedPageSize, + exceptionType: getUpdatedExceptionType, + serviceName: getUpdatedServiceName, })}`, [ pathname, @@ -67,6 +86,8 @@ function AllErrors(): JSX.Element { getUpdatedOffset, getUpdatedParams, getUpdatedPageSize, + getUpdatedExceptionType, + getUpdatedServiceName, ], ); @@ -81,6 +102,8 @@ function AllErrors(): JSX.Element { limit: getUpdatedPageSize, offset: getUpdatedOffset, orderParam: getUpdatedParams, + exceptionType: getUpdatedExceptionType, + serviceName: getUpdatedServiceName, }), enabled: !loading, }, @@ -108,14 +131,43 @@ function AllErrors(): JSX.Element { const filterIcon = useCallback(() => , []); - const handleSearch = ( - confirm: (param?: FilterConfirmProps) => void, - ): VoidFunction => (): void => { - confirm(); - }; + const handleSearch = useCallback( + ( + confirm: (param?: FilterConfirmProps) => void, + filterValue: string, + filterKey: string, + ): VoidFunction => (): void => { + const { exceptionFilterValue, serviceFilterValue } = getFilterValues( + getUpdatedServiceName, + getUpdatedExceptionType, + filterKey, + filterValue, + ); + history.replace( + `${pathname}?${createQueryParams({ + order: updatedOrder, + offset: getUpdatedOffset, + orderParam: getUpdatedParams, + pageSize: getUpdatedPageSize, + exceptionType: exceptionFilterValue, + serviceName: serviceFilterValue, + })}`, + ); + confirm(); + }, + [ + getUpdatedExceptionType, + getUpdatedOffset, + getUpdatedPageSize, + getUpdatedParams, + getUpdatedServiceName, + pathname, + updatedOrder, + ], + ); const filterDropdownWrapper = useCallback( - ({ setSelectedKeys, selectedKeys, confirm, placeholder }) => { + ({ setSelectedKeys, selectedKeys, confirm, placeholder, filterKey }) => { return ( @@ -126,11 +178,16 @@ function AllErrors(): JSX.Element { setSelectedKeys(e.target.value ? [e.target.value] : []) } allowClear - onPressEnter={handleSearch(confirm)} + defaultValue={getDefaultFilterValue( + filterKey, + getUpdatedServiceName, + getUpdatedExceptionType, + )} + onPressEnter={handleSearch(confirm, selectedKeys[0], filterKey)} />