add exception page filters support (#1919)

* feat: backend changes for supporting exception filters

* feat: frontend changes for exception page filter support

* chore: extractSingleFilterValue is updated

* fix: handle frontend edge case

Co-authored-by: Ankit Nayan <ankit@signoz.io>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

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,
+};

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<AppState, GlobalReducer>(
 		(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(() => <SearchOutlined />, []);
 
-	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 (
 				<Card size="small">
 					<Space align="start" direction="vertical">
@@ -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)}
 						/>
 						<Button
 							type="primary"
-							onClick={handleSearch(confirm)}
+							onClick={handleSearch(confirm, selectedKeys[0], filterKey)}
 							icon={<SearchOutlined />}
 							size="small"
 						>
@@ -140,7 +197,7 @@ function AllErrors(): JSX.Element {
 				</Card>
 			);
 		},
-		[],
+		[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
 	);
 
 	const onExceptionTypeFilter = useCallback(
@@ -167,6 +224,7 @@ function AllErrors(): JSX.Element {
 		(
 			onFilter: ColumnType<Exception>['onFilter'],
 			placeholder: string,
+			filterKey: string,
 		): ColumnType<Exception> => ({
 			onFilter,
 			filterIcon,
@@ -176,6 +234,7 @@ function AllErrors(): JSX.Element {
 					selectedKeys,
 					confirm,
 					placeholder,
+					filterKey,
 				}),
 		}),
 		[filterIcon, filterDropdownWrapper],
@@ -186,7 +245,7 @@ function AllErrors(): JSX.Element {
 			title: 'Exception Type',
 			dataIndex: 'exceptionType',
 			key: 'exceptionType',
-			...getFilter(onExceptionTypeFilter, 'Search By Exception'),
+			...getFilter(onExceptionTypeFilter, 'Search By Exception', 'exceptionType'),
 			render: (value, record): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
 					<Link
@@ -266,26 +325,35 @@ function AllErrors(): JSX.Element {
 				updatedOrder,
 				'serviceName',
 			),
-			...getFilter(onApplicationTypeFilter, 'Search By Application'),
+			...getFilter(
+				onApplicationTypeFilter,
+				'Search By Application',
+				'serviceName',
+			),
 		},
 	];
 
 	const onChangeHandler: TableProps<Exception>['onChange'] = (
 		paginations,
-		_,
+		filters,
 		sorter,
 	) => {
 		if (!Array.isArray(sorter)) {
 			const { pageSize = 0, current = 0 } = paginations;
 			const { columnKey = '', order } = sorter;
 			const updatedOrder = order === 'ascend' ? 'ascending' : 'descending';
-
+			const { exceptionType, serviceName } = extractFilterValues(filters, {
+				serviceName: getUpdatedServiceName,
+				exceptionType: getUpdatedExceptionType,
+			});
 			history.replace(
 				`${pathname}?${createQueryParams({
 					order: updatedOrder,
 					offset: (current - 1) * pageSize,
 					orderParam: columnKey,
 					pageSize,
+					exceptionType,
+					serviceName,
 				})}`,
 			);
 		}

frontend/src/container/AllError/utils.ts

@@ -1,7 +1,13 @@
-import { SortOrder } from 'antd/lib/table/interface';
+import { FilterValue, SortOrder } from 'antd/lib/table/interface';
 import Timestamp from 'timestamp-nano';
 import { Order, OrderBy } from 'types/api/errors/getAll';
 
+import {
+	DEFAULT_FILTER_VALUE,
+	EXCEPTION_TYPE_FILTER_NAME,
+	SERVICE_NAME_FILTER_NAME,
+} from './constant';
+
 export const isOrder = (order: string | null): order is Order =>
 	!!(order === 'ascending' || order === 'descending');
 
@@ -10,6 +16,8 @@ export const urlKey = {
 	offset: 'offset',
 	orderParam: 'orderParam',
 	pageSize: 'pageSize',
+	exceptionType: 'exceptionType',
+	serviceName: 'serviceName',
 };
 
 export const isOrderParams = (orderBy: string | null): orderBy is OrderBy => {
@@ -87,3 +95,94 @@ export const getUpdatePageSize = (pageSize: string | null): number => {
 	}
 	return 10;
 };
+
+export const getFilterString = (filter: string | null): string => {
+	if (filter) {
+		return filter;
+	}
+	return '';
+};
+
+export const getDefaultFilterValue = (
+	filterKey: string | null,
+	serviceName: string,
+	exceptionType: string,
+): string | undefined => {
+	let defaultValue: string | undefined;
+	switch (filterKey) {
+		case SERVICE_NAME_FILTER_NAME:
+			defaultValue = serviceName;
+			break;
+		case EXCEPTION_TYPE_FILTER_NAME:
+			defaultValue = exceptionType;
+			break;
+		default:
+			break;
+	}
+	return defaultValue;
+};
+
+export const getFilterValues = (
+	serviceName: string,
+	exceptionType: string,
+	filterKey: string,
+	filterValue: string,
+): { exceptionFilterValue: string; serviceFilterValue: string } => {
+	let serviceFilterValue = serviceName;
+	let exceptionFilterValue = exceptionType;
+	switch (filterKey) {
+		case EXCEPTION_TYPE_FILTER_NAME:
+			exceptionFilterValue = filterValue;
+			break;
+		case SERVICE_NAME_FILTER_NAME:
+			serviceFilterValue = filterValue;
+			break;
+		default:
+			break;
+	}
+	return { exceptionFilterValue, serviceFilterValue };
+};
+
+type FilterValues = { exceptionType: string; serviceName: string };
+
+const extractSingleFilterValue = (
+	filterName: string,
+	filters: Filter,
+): string => {
+	const filterValues = filters[filterName];
+
+	if (
+		!filterValues ||
+		!Array.isArray(filterValues) ||
+		filterValues.length === 0
+	) {
+		return DEFAULT_FILTER_VALUE;
+	}
+
+	return String(filterValues[0]);
+};
+
+type Filter = Record<string, FilterValue | null>;
+
+export const extractFilterValues = (
+	filters: Filter,
+	prefilledFilters: FilterValues,
+): FilterValues => {
+	const filterValues: FilterValues = {
+		exceptionType: prefilledFilters.exceptionType,
+		serviceName: prefilledFilters.serviceName,
+	};
+	if (filters[EXCEPTION_TYPE_FILTER_NAME]) {
+		filterValues.exceptionType = extractSingleFilterValue(
+			EXCEPTION_TYPE_FILTER_NAME,
+			filters,
+		);
+	}
+	if (filters[SERVICE_NAME_FILTER_NAME]) {
+		filterValues.serviceName = extractSingleFilterValue(
+			SERVICE_NAME_FILTER_NAME,
+			filters,
+		);
+	}
+	return filterValues;
+};

frontend/src/types/api/errors/getAll.ts

@@ -15,6 +15,8 @@ export interface Props {
 	orderParam?: OrderBy;
 	limit?: number;
 	offset?: number;
+	exceptionType?: string;
+	serviceName?: string;
 }
 
 export interface Exception {

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

@@ -2528,8 +2528,35 @@ func (r *ClickHouseReader) ListErrors(ctx context.Context, queryParams *model.Li
 
 	var getErrorResponses []model.Error
 
-	query := fmt.Sprintf("SELECT any(exceptionType) as exceptionType, any(exceptionMessage) as exceptionMessage, count() AS exceptionCount, min(timestamp) as firstSeen, max(timestamp) as lastSeen, any(serviceName) as serviceName, groupID FROM %s.%s WHERE timestamp >= @timestampL AND timestamp <= @timestampU GROUP BY groupID", r.TraceDB, r.errorTable)
+	query := "SELECT any(exceptionMessage) as exceptionMessage, count() AS exceptionCount, min(timestamp) as firstSeen, max(timestamp) as lastSeen, groupID"
+	if len(queryParams.ServiceName) != 0 {
+		query = query + ", serviceName"
+	} else {
+		query = query + ", any(serviceName) as serviceName"
+	}
+	if len(queryParams.ExceptionType) != 0 {
+		query = query + ", exceptionType"
+	} else {
+		query = query + ", any(exceptionType) as exceptionType"
+	}
+	query += fmt.Sprintf(" FROM %s.%s WHERE timestamp >= @timestampL AND timestamp <= @timestampU", r.TraceDB, r.errorTable)
 	args := []interface{}{clickhouse.Named("timestampL", strconv.FormatInt(queryParams.Start.UnixNano(), 10)), clickhouse.Named("timestampU", strconv.FormatInt(queryParams.End.UnixNano(), 10))}
+
+	if len(queryParams.ServiceName) != 0 {
+		query = query + " AND serviceName ilike @serviceName"
+		args = append(args, clickhouse.Named("serviceName", "%"+queryParams.ServiceName+"%"))
+	}
+	if len(queryParams.ExceptionType) != 0 {
+		query = query + " AND exceptionType ilike @exceptionType"
+		args = append(args, clickhouse.Named("exceptionType", "%"+queryParams.ExceptionType+"%"))
+	}
+	query = query + " GROUP BY groupID"
+	if len(queryParams.ServiceName) != 0 {
+		query = query + ", serviceName"
+	}
+	if len(queryParams.ExceptionType) != 0 {
+		query = query + ", exceptionType"
+	}
 	if len(queryParams.OrderParam) != 0 {
 		if queryParams.Order == constants.Descending {
 			query = query + " ORDER BY " + queryParams.OrderParam + " DESC"
@@ -2564,7 +2591,14 @@ func (r *ClickHouseReader) CountErrors(ctx context.Context, queryParams *model.C
 
 	query := fmt.Sprintf("SELECT count(distinct(groupID)) FROM %s.%s WHERE timestamp >= @timestampL AND timestamp <= @timestampU", r.TraceDB, r.errorTable)
 	args := []interface{}{clickhouse.Named("timestampL", strconv.FormatInt(queryParams.Start.UnixNano(), 10)), clickhouse.Named("timestampU", strconv.FormatInt(queryParams.End.UnixNano(), 10))}
-
+	if len(queryParams.ServiceName) != 0 {
+		query = query + " AND serviceName = @serviceName"
+		args = append(args, clickhouse.Named("serviceName", queryParams.ServiceName))
+	}
+	if len(queryParams.ExceptionType) != 0 {
+		query = query + " AND exceptionType = @exceptionType"
+		args = append(args, clickhouse.Named("exceptionType", queryParams.ExceptionType))
+	}
 	err := r.db.QueryRow(ctx, query, args...).Scan(&errorCount)
 	zap.S().Info(query)
 

pkg/query-service/app/parser.go

@@ -480,14 +480,18 @@ func parseListErrorsRequest(r *http.Request) (*model.ListErrorsParams, error) {
 	if err != nil {
 		return nil, errors.New("offset param is not in correct format")
 	}
+	serviceName := r.URL.Query().Get("serviceName")
+	exceptionType := r.URL.Query().Get("exceptionType")
 
 	params := &model.ListErrorsParams{
-		Start:      startTime,
-		End:        endTime,
-		OrderParam: orderParam,
-		Order:      order,
-		Limit:      int64(limitInt),
-		Offset:     int64(offsetInt),
+		Start:         startTime,
+		End:           endTime,
+		OrderParam:    orderParam,
+		Order:         order,
+		Limit:         int64(limitInt),
+		Offset:        int64(offsetInt),
+		ServiceName:   serviceName,
+		ExceptionType: exceptionType,
 	}
 
 	return params, nil

pkg/query-service/model/queryParams.go

@@ -296,17 +296,21 @@ type GetTTLParams struct {
 }
 
 type ListErrorsParams struct {
-	Start      *time.Time
-	End        *time.Time
-	Limit      int64
-	OrderParam string
-	Order      string
-	Offset     int64
+	Start         *time.Time
+	End           *time.Time
+	Limit         int64
+	OrderParam    string
+	Order         string
+	Offset        int64
+	ServiceName   string
+	ExceptionType string
 }
 
 type CountErrorsParams struct {
-	Start *time.Time
-	End   *time.Time
+	Start         *time.Time
+	End           *time.Time
+	ServiceName   string
+	ExceptionType string
 }
 
 type GetErrorParams struct {