feat: add autocomplete to groupBy filters (#2156)

* feat: add autocomplete to groupBy filters

* chore: handle none groupby in frontend

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/api/trace/getSpans.ts

@@ -37,7 +37,7 @@ const getSpans = async (
 				start: String(props.start),
 				end: String(props.end),
 				function: props.function,
-				groupBy: props.groupBy,
+				groupBy: props.groupBy === 'none' ? '' : props.groupBy,
 				step: props.step,
 				tags: updatedSelectedTags,
 				...nonDuration,

frontend/src/container/Trace/Graph/index.tsx

@@ -22,7 +22,7 @@ function TraceGraph(): JSX.Element {
 
 	const ChartData = useMemo(
 		() =>
-			selectedGroupBy.length === 0
+			selectedGroupBy.length === 0 || selectedGroupBy === 'none'
 				? getChartData(payload)
 				: getChartDataforGroupBy(payload),
 		[payload, selectedGroupBy],

frontend/src/container/Trace/TraceGraphFilter/config.ts

@@ -9,13 +9,12 @@ interface Dropdown {
 export const groupBy: DefaultOptionType[] = [
 	{
 		label: 'None',
-		value: '',
+		value: 'none',
 	},
 	{
 		label: 'Service Name',
 		value: 'serviceName',
 	},
-
 	{
 		label: 'Operation',
 		value: 'name',

frontend/src/container/Trace/TraceGraphFilter/index.tsx

@@ -1,6 +1,6 @@
 import { AutoComplete, Input, Space } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -10,6 +10,7 @@ import { TraceReducer } from 'types/reducer/trace';
 import { functions } from './config';
 import { SelectComponent } from './styles';
 import {
+	filterGroupBy,
 	getSelectedValue,
 	initOptions,
 	onClickSelectedFunctionHandler,
@@ -24,6 +25,9 @@ function TraceGraphFilter(): JSX.Element {
 		AppState,
 		TraceReducer
 	>((state) => state.traces);
+	const [selectedGroupByLocal, setSelectedGroupByLocal] = useState<string>(
+		selectedGroupBy,
+	);
 	const globalTime = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -75,8 +79,12 @@ function TraceGraphFilter(): JSX.Element {
 				id="selectedGroupBy"
 				data-testid="selectedGroupBy"
 				options={options}
-				value={selectedGroupByValue(selectedGroupBy, options)}
+				value={selectedGroupByValue(selectedGroupByLocal, options)}
-				onChange={onClickSelectedGroupByHandler(options)}
+				onChange={(e): void => setSelectedGroupByLocal(e.toString())}
+				onSelect={onClickSelectedGroupByHandler(options)}
+				filterOption={(inputValue, option): boolean =>
+					filterGroupBy(inputValue, option)
+				}
 			>
 				<Input disabled={isLoading} placeholder="Please select" />
 			</AutoComplete>

frontend/src/container/Trace/TraceGraphFilter/utils.ts

@@ -61,13 +61,28 @@ export function onClickSelectedFunctionHandler(value: unknown): void {
 		}
 	}
 }
+
 export function selectedGroupByValue(
 	selectedGroupBy: string,
 	options: DefaultOptionType[],
 ): ReactNode {
-	return options.find((e) => selectedGroupBy === e.value)?.label;
+	const optionValue = options.find((e) => selectedGroupBy === e.value)?.label;
+	if (optionValue) {
+		return optionValue;
+	}
+	return selectedGroupBy;
 }
 
 export function getSelectedValue(selectedFunction: string): unknown {
 	return functions.find((e) => selectedFunction === e.key)?.displayValue;
 }
+
+export function filterGroupBy(
+	inputValue: string,
+	option: DefaultOptionType | undefined,
+): boolean {
+	return (
+		option?.label?.toString().toUpperCase().indexOf(inputValue.toUpperCase()) !==
+		-1
+	);
+}