feat(FE): span Kind is added in the trace filter page (#2281)

frontend/src/api/trace/getFilters.ts

@@ -32,6 +32,7 @@ const getFilters = async (
 			maxDuration: String((duration.duration || [])[0] || ''),
 			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
+			spanKind: props.spanKind,
 		});
 
 		return {

frontend/src/api/trace/getSpans.ts

@@ -44,6 +44,7 @@ const getSpans = async (
 				maxDuration: String((duration.duration || [])[0] || ''),
 				minDuration: String((duration.duration || [])[1] || ''),
 				exclude,
+				spanKind: props.spanKind,
 			},
 		);
 

frontend/src/api/trace/getSpansAggregate.ts

@@ -48,6 +48,7 @@ const getSpanAggregate = async (
 			maxDuration: String((duration.duration || [])[0] || ''),
 			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
+			spanKind: props.spanKind,
 		});
 
 		return {

frontend/src/api/trace/getTagFilter.ts

@@ -32,6 +32,7 @@ const getTagFilters = async (
 			maxDuration: String((duration.duration || [])[0] || ''),
 			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
+			spanKind: props.spanKind,
 		});
 
 		return {

frontend/src/api/trace/getTagValue.ts

@@ -15,6 +15,7 @@ const getTagValue = async (
 				Key: props.tagKey.Key,
 				Type: props.tagKey.Type,
 			},
+			spanKind: props.spanKind,
 		});
 		return {
 			statusCode: 200,

frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts

@@ -161,7 +161,7 @@ export const externalCallDurationByAddress = ({
 };
 
 interface ExternalCallDurationByAddressProps extends ExternalCallProps {
-	legend: '{{address}}';
+	legend: string;
 }
 
 export interface ExternalCallProps {

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -79,11 +79,11 @@ function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
 					type="default"
 					size="small"
 					id="database_call_rps_button"
-					onClick={onViewTracePopupClick(
+					onClick={onViewTracePopupClick({
 						servicename,
 						selectedTraceTags,
-						selectedTimeStamp,
+						timestamp: selectedTimeStamp,
-					)}
+					})}
 				>
 					View Traces
 				</Button>
@@ -114,11 +114,11 @@ function DBCall({ getWidgetQueryBuilder }: DBCallProps): JSX.Element {
 					type="default"
 					size="small"
 					id="database_call_avg_duration_button"
-					onClick={onViewTracePopupClick(
+					onClick={onViewTracePopupClick({
 						servicename,
 						selectedTraceTags,
-						selectedTimeStamp,
+						timestamp: selectedTimeStamp,
-					)}
+					})}
 				>
 					View Traces
 				</Button>

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -6,8 +6,11 @@ import {
 	externalCallErrorPercent,
 	externalCallRpsByAddress,
 } from 'container/MetricsApplication/MetricsPageQueries/ExternalQueries';
-import { resourceAttributesToTagFilterItems } from 'lib/resourceAttributes';
+import {
-import React, { useMemo } from 'react';
+	convertRawQueriesToTraceSelectedTags,
+	resourceAttributesToTagFilterItems,
+} from 'lib/resourceAttributes';
+import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -15,8 +18,13 @@ import { Widgets } from 'types/api/dashboard/getAll';
 import MetricReducer from 'types/reducer/metrics';
 
 import { Card, GraphContainer, GraphTitle, Row } from '../styles';
+import { legend } from './constant';
+import { Button } from './styles';
+import { onGraphClickHandler, onViewTracePopupClick } from './util';
 
 function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
+	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
+
 	const { servicename } = useParams<{ servicename?: string }>();
 	const { resourceAttributeQueries } = useSelector<AppState, MetricReducer>(
 		(state) => state.metrics,
@@ -27,8 +35,6 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 		[resourceAttributeQueries],
 	);
 
-	const legend = '{{address}}';
-
 	const externalCallErrorWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -36,7 +42,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 				promQL: [],
 				metricsBuilder: externalCallErrorPercent({
 					servicename,
-					legend,
+					legend: legend.address,
 					tagFilterItems,
 				}),
 				clickHouse: [],
@@ -44,6 +50,14 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 		[getWidgetQueryBuilder, servicename, tagFilterItems],
 	);
 
+	const selectedTraceTags = useMemo(
+		() =>
+			JSON.stringify(
+				convertRawQueriesToTraceSelectedTags(resourceAttributeQueries) || [],
+			),
+		[resourceAttributeQueries],
+	);
+
 	const externalCallDurationWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -65,7 +79,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 				promQL: [],
 				metricsBuilder: externalCallRpsByAddress({
 					servicename,
-					legend,
+					legend: legend.address,
 					tagFilterItems,
 				}),
 				clickHouse: [],
@@ -80,7 +94,7 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 				promQL: [],
 				metricsBuilder: externalCallDurationByAddress({
 					servicename,
-					legend,
+					legend: legend.address,
 					tagFilterItems,
 				}),
 				clickHouse: [],
@@ -92,6 +106,19 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 		<>
 			<Row gutter={24}>
 				<Col span={12}>
+					<Button
+						type="default"
+						size="small"
+						id="external_call_error_percentage_button"
+						onClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							isExternalCall: true,
+						})}
+					>
+						View Traces
+					</Button>
 					<Card>
 						<GraphTitle>External Call Error Percentage</GraphTitle>
 						<GraphContainer>
@@ -100,12 +127,35 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={externalCallErrorWidget}
 								yAxisUnit="%"
+								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
+									onGraphClickHandler(setSelectedTimeStamp)(
+										ChartEvent,
+										activeElements,
+										chart,
+										data,
+										'external_call_error_percentage',
+									);
+								}}
 							/>
 						</GraphContainer>
 					</Card>
 				</Col>
 
 				<Col span={12}>
+					<Button
+						type="default"
+						size="small"
+						id="external_call_duration_button"
+						onClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							isExternalCall: true,
+						})}
+					>
+						View Traces
+					</Button>
+
 					<Card>
 						<GraphTitle>External Call duration</GraphTitle>
 						<GraphContainer>
@@ -114,6 +164,15 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={externalCallDurationWidget}
 								yAxisUnit="ms"
+								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
+									onGraphClickHandler(setSelectedTimeStamp)(
+										ChartEvent,
+										activeElements,
+										chart,
+										data,
+										'external_call_duration',
+									);
+								}}
 							/>
 						</GraphContainer>
 					</Card>
@@ -122,6 +181,19 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 
 			<Row gutter={24}>
 				<Col span={12}>
+					<Button
+						type="default"
+						size="small"
+						id="external_call_rps_by_address_button"
+						onClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							isExternalCall: true,
+						})}
+					>
+						View Traces
+					</Button>
 					<Card>
 						<GraphTitle>External Call RPS(by Address)</GraphTitle>
 						<GraphContainer>
@@ -130,12 +202,35 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={externalCallRPSWidget}
 								yAxisUnit="reqps"
+								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
+									onGraphClickHandler(setSelectedTimeStamp)(
+										ChartEvent,
+										activeElements,
+										chart,
+										data,
+										'external_call_rps_by_address',
+									);
+								}}
 							/>
 						</GraphContainer>
 					</Card>
 				</Col>
 
 				<Col span={12}>
+					<Button
+						type="default"
+						size="small"
+						id="external_call_duration_by_address_button"
+						onClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							isExternalCall: true,
+						})}
+					>
+						View Traces
+					</Button>
+
 					<Card>
 						<GraphTitle>External Call duration(by Address)</GraphTitle>
 						<GraphContainer>
@@ -144,6 +239,15 @@ function External({ getWidgetQueryBuilder }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={externalCallDurationAddressWidget}
 								yAxisUnit="ms"
+								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
+									onGraphClickHandler(setSelectedTimeStamp)(
+										ChartEvent,
+										activeElements,
+										chart,
+										data,
+										'external_call_duration_by_address',
+									);
+								}}
 							/>
 						</GraphContainer>
 					</Card>

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -181,11 +181,11 @@ function Application({ getWidgetQueryBuilder }: DashboardProps): JSX.Element {
 						type="default"
 						size="small"
 						id="Service_button"
-						onClick={onViewTracePopupClick(
+						onClick={onViewTracePopupClick({
 							servicename,
 							selectedTraceTags,
-							selectedTimeStamp,
+							timestamp: selectedTimeStamp,
-						)}
+						})}
 					>
 						View Traces
 					</Button>
@@ -210,11 +210,11 @@ function Application({ getWidgetQueryBuilder }: DashboardProps): JSX.Element {
 						type="default"
 						size="small"
 						id="Rate_button"
-						onClick={onViewTracePopupClick(
+						onClick={onViewTracePopupClick({
 							servicename,
 							selectedTraceTags,
-							selectedTimeStamp,
+							timestamp: selectedTimeStamp,
-						)}
+						})}
 					>
 						View Traces
 					</Button>

frontend/src/container/MetricsApplication/Tabs/constant.ts

@@ -0,0 +1,3 @@
+export const legend = {
+	address: '{{address}}',
+};

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -14,11 +14,18 @@ export const dbSystemTags: Tags[] = [
 	},
 ];
 
-export function onViewTracePopupClick(
+interface OnViewTracePopupClickProps {
-	servicename: string | undefined,
+	servicename: string | undefined;
-	selectedTraceTags: string,
+	selectedTraceTags: string;
-	timestamp: number,
+	timestamp: number;
-): VoidFunction {
+	isExternalCall?: boolean;
+}
+export function onViewTracePopupClick({
+	selectedTraceTags,
+	servicename,
+	timestamp,
+	isExternalCall,
+}: OnViewTracePopupClickProps): VoidFunction {
 	return (): void => {
 		const currentTime = timestamp;
 		const tPlusOne = timestamp + 60 * 1000;
@@ -30,7 +37,9 @@ export function onViewTracePopupClick(
 		history.replace(
 			`${
 				ROUTES.TRACE
-			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&&isFilterExclude={"serviceName":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&spanAggregateCurrentPage=1`,
+			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&&isFilterExclude={"serviceName":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&spanAggregateCurrentPage=1${
+				isExternalCall ? '&spanKind=3' : ''
+			}`,
 		);
 	};
 }

frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx

@@ -24,6 +24,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 		filter,
 		userSelectedFilter,
 		isFilterExclude,
+		spanKind,
 	} = useSelector<AppState, TraceReducer>((state) => state.traces);
 
 	const globalTime = useSelector<AppState, GlobalReducer>(
@@ -91,6 +92,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 				start: String(globalTime.minTime),
 				getFilters: filterToFetchData.filter((e) => e !== name),
 				isFilterExclude: preIsFilterExclude,
+				spanKind,
 			});
 
 			if (response.statusCode === 200) {
@@ -125,6 +127,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 						order: spansAggregate.order,
 						orderParam: spansAggregate.orderParam,
 						pageSize: spansAggregate.pageSize,
+						spanKind,
 					},
 				});
 

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

@@ -30,6 +30,7 @@ function Duration(): JSX.Element {
 		selectedTags,
 		userSelectedFilter,
 		isFilterExclude,
+		spanKind,
 	} = useSelector<AppState, TraceReducer>((state) => state.traces);
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -88,6 +89,7 @@ function Duration(): JSX.Element {
 			other: Object.fromEntries(preSelectedFilter),
 			start: String(globalTime.minTime),
 			isFilterExclude,
+			spanKind,
 		});
 
 		if (response.statusCode === 200) {
@@ -113,6 +115,7 @@ function Duration(): JSX.Element {
 					order: spansAggregate.order,
 					pageSize: spansAggregate.pageSize,
 					orderParam: spansAggregate.orderParam,
+					spanKind,
 				},
 			});
 

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

@@ -22,6 +22,7 @@ function TraceID(): JSX.Element {
 		selectedTags,
 		userSelectedFilter,
 		isFilterExclude,
+		spanKind,
 	} = useSelector<AppState, TraceReducer>((state) => state.traces);
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const globalTime = useSelector<AppState, GlobalReducer>(
@@ -52,6 +53,7 @@ function TraceID(): JSX.Element {
 				start: String(globalTime.minTime),
 				getFilters: filterToFetchData,
 				isFilterExclude,
+				spanKind,
 			});
 
 			if (response.statusCode === 200) {
@@ -77,6 +79,7 @@ function TraceID(): JSX.Element {
 						order: spansAggregate.order,
 						pageSize: spansAggregate.pageSize,
 						orderParam: spansAggregate.orderParam,
+						spanKind,
 					},
 				});
 

frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx

@@ -37,6 +37,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 		filter,
 		isFilterExclude,
 		userSelectedFilter,
+		spanKind,
 	} = useSelector<AppState, TraceReducer>((state) => state.traces);
 
 	const { name: PanelName, isOpen: IsPanelOpen } = props;
@@ -75,6 +76,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 				getFilters: updatedFilterData,
 				other: Object.fromEntries(getprepdatedSelectedFilter),
 				isFilterExclude,
+				spanKind,
 			});
 
 			if (response.statusCode === 200) {
@@ -107,6 +109,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 						order: spansAggregate.order,
 						pageSize: spansAggregate.pageSize,
 						orderParam: spansAggregate.orderParam,
+						spanKind,
 					},
 				});
 
@@ -160,6 +163,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 				order: spansAggregate.order,
 				pageSize: spansAggregate.pageSize,
 				orderParam: spansAggregate.orderParam,
+				spanKind,
 			},
 		});
 
@@ -195,6 +199,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 				getFilters: filterToFetchData,
 				other: Object.fromEntries(updatedFilter),
 				isFilterExclude: postIsFilterExclude,
+				spanKind,
 			});
 
 			if (response.statusCode === 200 && response.payload) {
@@ -213,6 +218,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 						order: spansAggregate.order,
 						pageSize: spansAggregate.pageSize,
 						orderParam: spansAggregate.orderParam,
+						spanKind,
 					},
 				});
 

frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx

@@ -27,6 +27,7 @@ function TagsKey(props: TagsKeysProps): JSX.Element {
 			globalTime.maxTime,
 			traces.selectedFilter,
 			traces.isFilterExclude,
+			traces.spanKind,
 		],
 		{
 			queryFn: () =>
@@ -35,6 +36,7 @@ function TagsKey(props: TagsKeysProps): JSX.Element {
 					end: globalTime.maxTime,
 					other: Object.fromEntries(traces.selectedFilter),
 					isFilterExclude: traces.isFilterExclude,
+					spanKind: traces.spanKind,
 				}),
 			cacheTime: 120000,
 		},

frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx

@@ -30,6 +30,8 @@ function TagValue(props: TagValueProps): JSX.Element {
 		BoolValues: selectedBoolValues,
 	} = tag;
 
+	const traces = useSelector<AppState, TraceReducer>((state) => state.traces);
+
 	const [localTagValue, setLocalTagValue] = useState<TagValueTypes[]>(
 		getInitialLocalValue(
 			selectedNumberValues,
@@ -45,7 +47,14 @@ function TagValue(props: TagValueProps): JSX.Element {
 	const tagType = useMemo(() => extractTagType(tagKey), [tagKey]);
 
 	const { isLoading, data } = useQuery(
-		['tagKey', globalReducer.minTime, globalReducer.maxTime, tagKey, tagType],
+		[
+			'tagKey',
+			globalReducer.minTime,
+			globalReducer.maxTime,
+			tagKey,
+			tagType,
+			traces.spanKind,
+		],
 		{
 			queryFn: () =>
 				getTagValue({
@@ -55,6 +64,7 @@ function TagValue(props: TagValueProps): JSX.Element {
 						Key: extractTagKey(tagKey),
 						Type: tagType,
 					},
+					spanKind: traces.spanKind,
 				}),
 		},
 	);

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

@@ -67,6 +67,7 @@ function Search({
 				order: traces.spansAggregate.order,
 				pageSize: traces.spansAggregate.pageSize,
 				orderParam: traces.spansAggregate.orderParam,
+				spanKind: traces.spanKind,
 			},
 		});
 

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

@@ -40,6 +40,7 @@ function TraceGraphFilter(): JSX.Element {
 			globalTime.maxTime,
 			traces.selectedFilter,
 			traces.isFilterExclude,
+			traces.spanKind,
 		],
 		{
 			queryFn: () =>
@@ -48,8 +49,10 @@ function TraceGraphFilter(): JSX.Element {
 					end: globalTime.maxTime,
 					other: Object.fromEntries(traces.selectedFilter),
 					isFilterExclude: traces.isFilterExclude,
+					spanKind: traces.spanKind,
 				}),
 			cacheTime: 120000,
+			enabled: traces.filter.size > 0,
 		},
 	);
 

frontend/src/pages/Trace/index.tsx

@@ -52,6 +52,7 @@ function Trace({
 		selectedFunction,
 		selectedGroupBy,
 		isFilterExclude,
+		spanKind,
 	} = useSelector<AppState, TraceReducer>((state) => state.traces);
 
 	const { notifications } = useNotifications();
@@ -71,6 +72,7 @@ function Trace({
 				selectedTags,
 				order: spansAggregate.order,
 				orderParam: spansAggregate.orderParam,
+				spanKind,
 			},
 			notifications,
 		);
@@ -85,6 +87,7 @@ function Trace({
 		spansAggregate.order,
 		spansAggregate.orderParam,
 		notifications,
+		spanKind,
 	]);
 
 	useEffect(() => {
@@ -98,6 +101,7 @@ function Trace({
 				start: minTime,
 				step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
 				isFilterExclude,
+				spanKind,
 			},
 			notifications,
 		);
@@ -111,6 +115,7 @@ function Trace({
 		getSpans,
 		isFilterExclude,
 		notifications,
+		spanKind,
 	]);
 
 	useEffect(

frontend/src/store/actions/trace/getInitialFilter.ts

@@ -12,6 +12,7 @@ import {
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 
+import { parseQueryIntoSpanKind } from './parseFilter/parseSpanKind';
 import {
 	isTraceFilterEnum,
 	parseAggregateOrderParams,
@@ -55,6 +56,8 @@ export const GetInitialTraceFilter = (
 			traces.filterToFetchData,
 		);
 
+		const parsedSpanKind = parseQueryIntoSpanKind(query, traces.spanKind);
+
 		const getUserSelected = parseSelectedFilter(query, traces.userSelectedFilter);
 
 		const getIsFilterExcluded = parseFilterExclude(query, traces.isFilterExclude);
@@ -102,6 +105,7 @@ export const GetInitialTraceFilter = (
 			start: String(minTime),
 			other: Object.fromEntries(getSelectedFilter.currentValue),
 			isFilterExclude: getIsFilterExcluded.currentValue,
+			spanKind: parsedSpanKind.currentValue,
 		});
 
 		const preSelectedFilter: Map<TraceFilterEnum, string[]> = new Map(
@@ -164,6 +168,7 @@ export const GetInitialTraceFilter = (
 					order: parsedQueryOrder.currentValue,
 					pageSize: parsedPageSize.currentValue,
 					orderParam: parsedOrderParams.currentValue,
+					spanKind: parsedSpanKind.currentValue,
 				},
 			});
 		} else {

frontend/src/store/actions/trace/getInitialSpansAggregate.ts

@@ -61,6 +61,7 @@ export const GetSpansAggregate = (
 			isFilterExclude: traces.isFilterExclude,
 			order,
 			orderParam: props.orderParam,
+			spanKind: props.spanKind,
 		});
 
 		if (response.statusCode === 200) {
@@ -140,4 +141,5 @@ export interface GetSpansAggregateProps {
 	selectedTags: TraceReducer['selectedTags'];
 	order: GetSpanAggregateProps['order'];
 	orderParam: GetSpanAggregateProps['orderParam'];
+	spanKind: TraceReducer['spanKind'];
 }

frontend/src/store/actions/trace/getSpans.ts

@@ -63,6 +63,7 @@ export const GetSpans = (
 				start,
 				step: props.step,
 				isFilterExclude: props.isFilterExclude,
+				spanKind: props.spanKind,
 			});
 
 			if (response.statusCode === 200) {

frontend/src/store/actions/trace/parseFilter/parseSpanKind.ts

@@ -0,0 +1,39 @@
+import { TraceReducer } from 'types/reducer/trace';
+
+import { ParsedUrl } from '../util';
+
+export const parseQueryIntoSpanKind = (
+	query: string,
+	stateCurrent: TraceReducer['spanKind'],
+): ParsedUrl<TraceReducer['spanKind']> => {
+	const url = new URLSearchParams(query);
+
+	let current = '';
+
+	const selected = url.get('spanKind');
+
+	if (selected) {
+		try {
+			const parsedValue = selected;
+
+			if (parsedValue && typeof parsedValue === 'string') {
+				current = parsedValue;
+			}
+		} catch (error) {
+			console.log(error);
+			console.log('error while parsing json');
+		}
+	}
+
+	if (selected) {
+		return {
+			currentValue: current,
+			urlValue: current,
+		};
+	}
+
+	return {
+		currentValue: stateCurrent,
+		urlValue: current,
+	};
+};

frontend/src/store/reducers/trace.ts

@@ -70,6 +70,7 @@ const initialValue: TraceReducer = {
 		['status', INITIAL_FILTER_VALUE],
 		['traceID', INITIAL_FILTER_VALUE],
 	]),
+	spanKind: undefined,
 };
 
 const traceReducer = (
@@ -97,6 +98,7 @@ const traceReducer = (
 				order,
 				pageSize,
 				orderParam,
+				spanKind,
 			} = payload;
 
 			return {
@@ -114,6 +116,7 @@ const traceReducer = (
 					order,
 					orderParam,
 				},
+				spanKind,
 			};
 		}
 

frontend/src/types/actions/trace.ts

@@ -82,6 +82,7 @@ export interface UpdateAllFilters {
 		order: TraceReducer['spansAggregate']['order'];
 		pageSize: TraceReducer['spansAggregate']['pageSize'];
 		orderParam: TraceReducer['spansAggregate']['orderParam'];
+		spanKind?: TraceReducer['spanKind'];
 	};
 }
 

frontend/src/types/api/trace/getFilters.ts

@@ -8,6 +8,7 @@ export interface Props {
 		[k: string]: string[];
 	};
 	isFilterExclude: TraceReducer['isFilterExclude'];
+	spanKind?: TraceReducer['spanKind'];
 }
 
 export interface PayloadProps {

frontend/src/types/api/trace/getSpanAggregate.ts

@@ -10,6 +10,7 @@ export interface Props {
 	order?: TraceReducer['spansAggregate']['order'];
 	isFilterExclude: TraceReducer['isFilterExclude'];
 	orderParam: TraceReducer['spansAggregate']['orderParam'];
+	spanKind?: TraceReducer['spanKind'];
 }
 
 export type PayloadProps = {

frontend/src/types/api/trace/getSpans.ts

@@ -9,6 +9,7 @@ export interface Props {
 	selectedFilter: TraceReducer['selectedFilter'];
 	selectedTags: TraceReducer['selectedTags'];
 	isFilterExclude: TraceReducer['isFilterExclude'];
+	spanKind?: TraceReducer['spanKind'];
 }
 
 export interface PayloadProps {

frontend/src/types/api/trace/getTagFilters.ts

@@ -7,6 +7,7 @@ export interface Props {
 		[k: string]: string[];
 	};
 	isFilterExclude: TraceReducer['isFilterExclude'];
+	spanKind?: TraceReducer['spanKind'];
 }
 
 export interface PayloadProps {

frontend/src/types/api/trace/getTagValue.ts

@@ -1,4 +1,5 @@
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { TraceReducer } from 'types/reducer/trace';
 
 export interface Props {
 	start: GlobalReducer['minTime'];
@@ -7,6 +8,7 @@ export interface Props {
 		Key: string;
 		Type: string;
 	};
+	spanKind?: TraceReducer['spanKind'];
 }
 
 export interface PayloadProps {

frontend/src/types/reducer/trace.ts

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

pkg/query-service/app/clickhouseReader/reader.go

@@ -1001,6 +1001,11 @@ func (r *ClickHouseReader) GetSpanFilters(ctx context.Context, queryParams *mode
 		args = append(args, clickhouse.Named("durationNanoMax", queryParams.MaxDuration))
 	}
 
+	if len(queryParams.SpanKind) != 0 {
+		query = query + " AND kind = @kind"
+		args = append(args, clickhouse.Named("kind", queryParams.SpanKind))
+	}
+
 	query = getStatusFilters(query, queryParams.Status, excludeMap)
 
 	traceFilterReponse := model.SpanFiltersResponse{
@@ -1364,9 +1369,9 @@ func (r *ClickHouseReader) GetFilteredSpans(ctx context.Context, queryParams *mo
 	}
 	query = getStatusFilters(query, queryParams.Status, excludeMap)
 
-	if len(queryParams.Kind) != 0 {
+	if len(queryParams.SpanKind) != 0 {
 		query = query + " AND kind = @kind"
-		args = append(args, clickhouse.Named("kind", queryParams.Kind))
+		args = append(args, clickhouse.Named("kind", queryParams.SpanKind))
 	}
 
 	// create TagQuery from TagQueryParams
@@ -1666,6 +1671,10 @@ func (r *ClickHouseReader) GetTagFilters(ctx context.Context, queryParams *model
 		query = query + " AND durationNano <= @durationNanoMax"
 		args = append(args, clickhouse.Named("durationNanoMax", queryParams.MaxDuration))
 	}
+	if len(queryParams.SpanKind) != 0 {
+		query = query + " AND kind = @kind"
+		args = append(args, clickhouse.Named("kind", queryParams.SpanKind))
+	}
 
 	query = getStatusFilters(query, queryParams.Status, excludeMap)
 
@@ -1781,6 +1790,10 @@ func (r *ClickHouseReader) GetTagValues(ctx context.Context, queryParams *model.
 		query = query + " AND durationNano <= @durationNanoMax"
 		args = append(args, clickhouse.Named("durationNanoMax", queryParams.MaxDuration))
 	}
+	if len(queryParams.SpanKind) != 0 {
+		query = query + " AND kind = @kind"
+		args = append(args, clickhouse.Named("kind", queryParams.SpanKind))
+	}
 
 	query = getStatusFilters(query, queryParams.Status, excludeMap)
 
@@ -2113,9 +2126,9 @@ func (r *ClickHouseReader) GetFilteredSpansAggregates(ctx context.Context, query
 	}
 	query = getStatusFilters(query, queryParams.Status, excludeMap)
 
-	if len(queryParams.Kind) != 0 {
+	if len(queryParams.SpanKind) != 0 {
 		query = query + " AND kind = @kind"
-		args = append(args, clickhouse.Named("kind", queryParams.Kind))
+		args = append(args, clickhouse.Named("kind", queryParams.SpanKind))
 	}
 	// create TagQuery from TagQueryParams
 	tags := createTagQueryFromTagQueryParams(queryParams.Tags)

pkg/query-service/model/queryParams.go

@@ -312,7 +312,7 @@ type GetFilteredSpansParams struct {
 	TraceID            []string        `json:"traceID"`
 	ServiceName        []string        `json:"serviceName"`
 	Operation          []string        `json:"operation"`
-	Kind               string          `json:"kind"`
+	SpanKind           string          `json:"spanKind"`
 	Status             []string        `json:"status"`
 	HttpRoute          []string        `json:"httpRoute"`
 	HttpCode           []string        `json:"httpCode"`
@@ -340,7 +340,7 @@ type GetFilteredSpanAggregatesParams struct {
 	TraceID            []string        `json:"traceID"`
 	ServiceName        []string        `json:"serviceName"`
 	Operation          []string        `json:"operation"`
-	Kind               string          `json:"kind"`
+	SpanKind           string          `json:"spanKind"`
 	Status             []string        `json:"status"`
 	HttpRoute          []string        `json:"httpRoute"`
 	HttpCode           []string        `json:"httpCode"`
@@ -369,6 +369,7 @@ type SpanFilterParams struct {
 	TraceID            []string `json:"traceID"`
 	Status             []string `json:"status"`
 	ServiceName        []string `json:"serviceName"`
+	SpanKind           string   `json:"spanKind"`
 	HttpRoute          []string `json:"httpRoute"`
 	HttpCode           []string `json:"httpCode"`
 	HttpUrl            []string `json:"httpUrl"`
@@ -394,6 +395,7 @@ type TagFilterParams struct {
 	ServiceName        []string `json:"serviceName"`
 	HttpRoute          []string `json:"httpRoute"`
 	HttpCode           []string `json:"httpCode"`
+	SpanKind           string   `json:"spanKind"`
 	HttpUrl            []string `json:"httpUrl"`
 	HttpHost           []string `json:"httpHost"`
 	HttpMethod         []string `json:"httpMethod"`