diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx index 72d7439ade..440c9652a7 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx @@ -39,16 +39,22 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { }); }; + const isMoreButtonAvilable = Boolean( + numberOfFilters && statusObj.length > numberOfFilters, + ); + return ( <> - setSearchFilter(e.target.value)} - style={{ - padding: '0 3%', - }} - placeholder="Filter Values" - /> + {statusObj.length > 0 && ( + setSearchFilter(e.target.value)} + style={{ + padding: '0 3%', + }} + placeholder="Filter Values" + /> + )} {statusObj .sort((a, b) => { @@ -60,13 +66,15 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element { } return countA - countB; }) - .filter((_, index) => index < numberOfFilters) .filter((filter) => { if (searchFilter.length === 0) { return true; } - return filter.includes(searchFilter); + return filter + .toLocaleLowerCase() + .includes(searchFilter.toLocaleLowerCase()); }) + .filter((_, index) => index < numberOfFilters) .map((e) => ( ))} - {numberOfFilters && statusObj.length > numberOfFilters && ( + {isMoreButtonAvilable && ( diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index 4023d375ca..3f7672cdd5 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/frontend/src/store/reducers/trace.ts @@ -24,7 +24,7 @@ import { } from 'types/actions/trace'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; -export const INITIAL_FILTER_VALUE = 4; +export const INITIAL_FILTER_VALUE = 8; const initialValue: TraceReducer = { filter: new Map(),