fix: resource attribute is fixed trace data source (#3319)

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

@@ -189,7 +189,6 @@ function Application(): JSX.Element {
 						handleGraphClick={handleGraphClick}
 						selectedTimeStamp={selectedTimeStamp}
 						selectedTraceTags={selectedTraceTags}
-						tagFilterItems={tagFilterItems}
 						topLevelOperationsRoute={topLevelOperationsRoute}
 					/>
 				</Col>

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

@@ -6,30 +6,40 @@ import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsAppli
 import { latency } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import useFeatureFlag from 'hooks/useFeatureFlag';
+import useResourceAttribute from 'hooks/useResourceAttribute';
+import { resourceAttributesToTagFilterItems } from 'hooks/useResourceAttribute/utils';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
 import { ClickHandlerType } from '../Overview';
 import { Button } from '../styles';
 import { IServiceName } from '../types';
-import { onViewTracePopupClick } from '../util';
+import { handleNonInQueryRange, onViewTracePopupClick } from '../util';
 
 function ServiceOverview({
 	onDragSelect,
 	handleGraphClick,
 	selectedTraceTags,
 	selectedTimeStamp,
-	tagFilterItems,
 	topLevelOperationsRoute,
 }: ServiceOverviewProps): JSX.Element {
 	const { servicename } = useParams<IServiceName>();
 
 	const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS)
 		?.active;
 
+	const { queries } = useResourceAttribute();
+
+	const tagFilterItems = useMemo(
+		() =>
+			handleNonInQueryRange(
+				resourceAttributesToTagFilterItems(queries, !isSpanMetricEnable),
+			) || [],
+		[isSpanMetricEnable, queries],
+	);
+
 	const latencyWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -48,7 +58,7 @@ function ServiceOverview({
 				title: GraphTitle.LATENCY,
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 			}),
-		[servicename, tagFilterItems, isSpanMetricEnable, topLevelOperationsRoute],
+		[servicename, isSpanMetricEnable, topLevelOperationsRoute, tagFilterItems],
 	);
 
 	const isQueryEnabled = topLevelOperationsRoute.length > 0;
@@ -88,7 +98,6 @@ interface ServiceOverviewProps {
 	selectedTraceTags: string;
 	onDragSelect: (start: number, end: number) => void;
 	handleGraphClick: (type: string) => ClickHandlerType;
-	tagFilterItems: TagFilterItem[];
 	topLevelOperationsRoute: string[];
 }
 

frontend/src/hooks/useResourceAttribute/utils.ts

@@ -4,6 +4,7 @@ import {
 } from 'api/metrics/getResourceAttributes';
 import { OperatorConversions } from 'constants/resourceAttributes';
 import ROUTES from 'constants/routes';
+import { DataType, MetricsType } from 'container/MetricsApplication/constant';
 import {
 	IOption,
 	IResourceAttribute,
@@ -63,13 +64,29 @@ export const convertRawQueriesToTraceSelectedTags = (
 /* Convert resource attributes to tagFilter items for queryBuilder */
 export const resourceAttributesToTagFilterItems = (
 	queries: IResourceAttribute[],
-): TagFilterItem[] =>
-	queries.map((res) => ({
+	isTraceDataSource = false,
+): TagFilterItem[] => {
+	if (isTraceDataSource) {
+		return convertRawQueriesToTraceSelectedTags(queries).map((e) => ({
+			id: e.Key,
+			op: e.Operator,
+			value: e.StringValues,
+			key: {
+				dataType: DataType.STRING,
+				type: MetricsType.Resource,
+				isColumn: false,
+				key: e.Key,
+			},
+		}));
+	}
+
+	return queries.map((res) => ({
 		id: `${res.id}`,
 		key: { key: res.tagKey, isColumn: false, type: null, dataType: null },
 		op: `${res.operator}`,
 		value: `${res.tagValue}`.split(','),
 	}));
+};
 
 export const OperatorSchema: IOption[] = OperatorConversions.map(
 	(operator) => ({