feat: search filter is added in the trace filter

frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx

@@ -1,12 +1,19 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
+import { Button, Input } from 'antd';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
+import { INITIAL_FILTER_VALUE } from 'store/reducers/trace';
+import AppActions from 'types/actions';
+import { UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE } from 'types/actions/trace';
 import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 
 import CheckBoxComponent from '../Common/Checkbox';
 
+const { Search } = Input;
+
 function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element {
-	const { filter } = useSelector<AppState, TraceReducer>(
+	const { filter, filterDisplayValue } = useSelector<AppState, TraceReducer>(
 		(state) => state.traces,
 	);
 
@@ -15,9 +22,34 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element {
 	const status = filter.get(name) || {};
 
 	const statusObj = Object.keys(status);
+	const numberOfFilters = filterDisplayValue.get(name) || 0;
+	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const [searchFilter, setSearchFilter] = useState<string>('');
+
+	const onClickMoreHandler = (): void => {
+		const newFilterDisplayValue = new Map(filterDisplayValue);
+		const preValue =
+			(newFilterDisplayValue.get(name) || 0) + INITIAL_FILTER_VALUE;
+
+		newFilterDisplayValue.set(name, preValue);
+
+		dispatch({
+			type: UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE,
+			payload: newFilterDisplayValue,
+		});
+	};
 
 	return (
 		<>
+			<Search
+				value={searchFilter}
+				onChange={(e): void => setSearchFilter(e.target.value)}
+				style={{
+					padding: '0 3%',
+				}}
+				placeholder="Filter Values"
+			/>
+
 			{statusObj
 				.sort((a, b) => {
 					const countA = +status[a];
@@ -28,6 +60,13 @@ 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);
+				})
 				.map((e) => (
 					<CheckBoxComponent
 						key={e}
@@ -38,6 +77,12 @@ function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element {
 						}}
 					/>
 				))}
+
+			{numberOfFilters && statusObj.length > numberOfFilters && (
+				<Button onClick={onClickMoreHandler} type="link">
+					More
+				</Button>
+			)}
 		</>
 	);
 }

frontend/src/store/reducers/trace.ts

@@ -11,6 +11,7 @@ import {
 	UPDATE_SELECTED_TAGS,
 	UPDATE_SPAN_ORDER,
 	UPDATE_SPAN_ORDER_PARAMS,
+	UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE,
 	UPDATE_SPANS_AGGREGATE,
 	UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
@@ -23,6 +24,8 @@ import {
 } from 'types/actions/trace';
 import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 
+export const INITIAL_FILTER_VALUE = 4;
+
 const initialValue: TraceReducer = {
 	filter: new Map(),
 	filterToFetchData: ['duration', 'status', 'serviceName'],
@@ -53,6 +56,17 @@ const initialValue: TraceReducer = {
 		loading: true,
 		payload: { items: {} },
 	},
+	filterDisplayValue: new Map<TraceFilterEnum, number>([
+		['component', INITIAL_FILTER_VALUE],
+		['duration', INITIAL_FILTER_VALUE],
+		['httpCode', INITIAL_FILTER_VALUE],
+		['httpHost', INITIAL_FILTER_VALUE],
+		['httpMethod', INITIAL_FILTER_VALUE],
+		['httpUrl', INITIAL_FILTER_VALUE],
+		['operation', INITIAL_FILTER_VALUE],
+		['serviceName', INITIAL_FILTER_VALUE],
+		['status', INITIAL_FILTER_VALUE],
+	]),
 };
 
 const traceReducer = (
@@ -251,6 +265,13 @@ const traceReducer = (
 			};
 		}
 
+		case UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE: {
+			return {
+				...state,
+				filterDisplayValue: action.payload,
+			};
+		}
+
 		default:
 			return state;
 	}

frontend/src/types/actions/trace.ts

@@ -31,6 +31,8 @@ export const UPDATE_SPANS_AGGREGATE_PAGE_NUMBER =
 export const UPDATE_SPANS_AGGREGATE_PAGE_SIZE =
 	'UPDATE_SPANS_AGGREGATE_PAGE_SIZE';
 export const UPDATE_SPAN_ORDER_PARAMS = 'UPDATE_SPAN_ORDER_PARAMS';
+export const UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE =
+	'UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE';
 
 export interface UpdateFilter {
 	type: typeof UPDATE_TRACE_FILTER;
@@ -187,6 +189,11 @@ export interface UpdateSpanParams {
 	};
 }
 
+export interface UpdateTraceFilterDisplayValue {
+	type: typeof UPDATE_SPAN_UPDATE_FILTER_DISPLAY_VALUE;
+	payload: TraceReducer['filterDisplayValue'];
+}
+
 export type TraceActions =
 	| UpdateFilter
 	| GetTraceFilter
@@ -208,4 +215,5 @@ export type TraceActions =
 	| UpdateSpanOrder
 	| UpdateSpansAggregatePageNumber
 	| UpdateSpanSize
-	| UpdateSpanParams;
+	| UpdateSpanParams
+	| UpdateTraceFilterDisplayValue;

frontend/src/types/reducer/trace.ts

@@ -32,6 +32,7 @@ export interface TraceReducer {
 		payload: PayloadProps;
 	};
 	yAxisUnit: string | undefined;
+	filterDisplayValue: Map<TraceFilterEnum, number>;
 }
 
 interface SpansAggregateData {