feat: apply resource filters on coming from service details to traces page (#5827)

* feat: apply resource fitlers on coming from service details to traces page

* fix: remove value splitting from resourceAttributesToTracesFilterItems

* chore: handle 'Not IN' inside resourceAttributesToTracesFilterItems

* fix: add resource attributes filter to useGetAPMToTracesQueries

* fix: update query on changing resource attributes queries

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

@@ -4,6 +4,8 @@ import ROUTES from 'constants/routes';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useResourceAttribute from 'hooks/useResourceAttribute';
+import { resourceAttributesToTracesFilterItems } from 'hooks/useResourceAttribute/utils';
 import history from 'lib/history';
 import { traceFilterKeys } from 'pages/TracesExplorer/Filter/filterUtils';
 import { Dispatch, SetStateAction, useMemo } from 'react';
@@ -142,7 +144,12 @@ export function useGetAPMToTracesQueries({
 	filters?: TagFilterItem[];
 }): Query {
 	const { updateAllQueriesOperators } = useQueryBuilder();
+	const { queries } = useResourceAttribute();
 
+	const resourceAttributesFilters = useMemo(
+		() => resourceAttributesToTracesFilterItems(queries),
+		[queries],
+	);
 	const finalFilters: TagFilterItem[] = [];
 	let spanKindFilter: TagFilterItem;
 	let dbCallFilter: TagFilterItem;
@@ -185,6 +192,10 @@ export function useGetAPMToTracesQueries({
 		finalFilters.push(...filters);
 	}
 
+	if (resourceAttributesFilters?.length) {
+		finalFilters.push(...resourceAttributesFilters);
+	}
+
 	return useMemo(() => {
 		const updatedQuery = updateAllQueriesOperators(
 			initialQueriesMap.traces,
@@ -199,5 +210,5 @@ export function useGetAPMToTracesQueries({
 			finalFilters,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [servicename, updateAllQueriesOperators]);
+	}, [servicename, queries, updateAllQueriesOperators]);
 }

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -50,19 +50,21 @@ function TopOperationsTable({
 		const { servicename: encodedServiceName } = params;
 		const servicename = decodeURIComponent(encodedServiceName);
 
-		const opFilter: TagFilterItem = {
-			id: uuid().slice(0, 8),
-			key: {
-				key: 'name',
-				dataType: DataTypes.String,
-				type: 'tag',
-				isColumn: true,
-				isJSON: false,
-				id: 'name--string--tag--true',
+		const opFilters: TagFilterItem[] = [
+			{
+				id: uuid().slice(0, 8),
+				key: {
+					key: 'name',
+					dataType: DataTypes.String,
+					type: 'tag',
+					isColumn: true,
+					isJSON: false,
+					id: 'name--string--tag--true',
+				},
+				op: 'in',
+				value: [operation],
 			},
-			op: 'in',
-			value: [operation],
-		};
+		];
 
 		const preparedQuery: Query = {
 			...apmToTraceQuery,
@@ -72,7 +74,7 @@ function TopOperationsTable({
 					...item,
 					filters: {
 						...item.filters,
-						items: [...item.filters.items, opFilter],
+						items: [...item.filters.items, ...opFilters],
 					},
 				})),
 			},

frontend/src/hooks/useResourceAttribute/utils.ts

@@ -93,6 +93,22 @@ export const resourceAttributesToTagFilterItems = (
 		value: `${res.tagValue}`.split(','),
 	}));
 };
+/* Convert resource attributes to trace filters items for queryBuilder */
+export const resourceAttributesToTracesFilterItems = (
+	queries: IResourceAttribute[],
+): TagFilterItem[] =>
+	queries.map((res) => ({
+		id: `${res.id}`,
+		key: {
+			key: convertMetricKeyToTrace(res.tagKey),
+			isColumn: false,
+			type: MetricsType.Resource,
+			dataType: DataTypes.String,
+			id: `${convertMetricKeyToTrace(res.tagKey)}--string--resource--true`,
+		},
+		op: `${res.operator === 'Not IN' ? 'nin' : res.operator}`,
+		value: res.tagValue,
+	}));
 
 export const OperatorSchema: IOption[] = OperatorConversions.map(
 	(operator) => ({