fix: resource attribute tag key type is updated (#2231)

* fix: resource attribute tag key type is updated
from array to string

* chore: convert tag key from array to string

frontend/src/api/trace/getSpans.ts

@@ -10,7 +10,7 @@ const getSpans = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: e.Key[0],
+			Key: e.Key,
 			Operator: e.Operator,
 			StringValues: e.StringValues,
 			NumberValues: e.NumberValues,

frontend/src/api/trace/getSpansAggregate.ts

@@ -28,7 +28,7 @@ const getSpanAggregate = async (
 		});
 
 		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: e.Key[0],
+			Key: e.Key,
 			Operator: e.Operator,
 			StringValues: e.StringValues,
 			NumberValues: e.NumberValues,

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

@@ -6,7 +6,7 @@ import { Tags } from 'types/reducer/trace';
 
 export const dbSystemTags: Tags[] = [
 	{
-		Key: ['db.system.(string)'],
+		Key: 'db.system.(string)',
 		StringValues: [''],
 		NumberValues: [],
 		BoolValues: [],

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

@@ -16,7 +16,7 @@ function TagsKey(props: TagsKeysProps): JSX.Element {
 
 	const { index, setLocalSelectedTags, tag } = props;
 
-	const [selectedKey, setSelectedKey] = useState<string>(tag.Key[0] || '');
+	const [selectedKey, setSelectedKey] = useState<string>(tag.Key || '');
 
 	const traces = useSelector<AppState, TraceReducer>((state) => state.traces);
 

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

@@ -150,12 +150,12 @@ function SingleTags(props: AllTagsProps): JSX.Element {
 				}
 			</SelectComponent>
 
-			{selectedKey[0] ? (
+			{selectedKey ? (
 				<TagValue
 					index={index}
 					tag={tag}
 					setLocalSelectedTags={setLocalSelectedTags}
-					tagKey={selectedKey[0]}
+					tagKey={selectedKey}
 				/>
 			) : (
 				<SelectComponent />

frontend/src/container/Trace/Search/AllTags/Tag/utils.ts

@@ -72,7 +72,7 @@ export function onTagValueChange(
 export function disableTagValue(
 	selectedOperator: OperatorValues,
 	setLocalValue: React.Dispatch<React.SetStateAction<TagValueTypes[]>>,
-	selectedKeys: string[],
+	selectedKeys: string,
 	setLocalSelectedTags: React.Dispatch<React.SetStateAction<Tags[]>>,
 	index: number,
 ): boolean {
@@ -169,9 +169,9 @@ export function selectOptions(
 	return [];
 }
 
-export function mapOperators(selectedKey: string[]): AllMenuProps[] {
+export function mapOperators(selectedKey: string): AllMenuProps[] {
 	return AllMenu.filter((e) =>
-		e?.supportedTypes?.includes(extractTagType(selectedKey[0])),
+		e?.supportedTypes?.includes(extractTagType(selectedKey)),
 	);
 }
 
@@ -192,7 +192,7 @@ export function onTagKeySelect(
 		setLocalSelectedTags((tags) => [
 			...tags.slice(0, index),
 			{
-				Key: [value],
+				Key: value,
 				Operator: tag.Operator,
 				StringValues: tag.StringValues,
 				NumberValues: tag.NumberValues,

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

@@ -39,7 +39,7 @@ function AllTags({
 		setLocalSelectedTags((tags) => [
 			...tags,
 			{
-				Key: [],
+				Key: '',
 				Operator: 'Equals',
 				StringValues: [],
 				NumberValues: [],
@@ -94,7 +94,7 @@ function AllTags({
 			<CurrentTagsContainer>
 				{localSelectedTags.map((tags, index) => (
 					<Tags
-						key={tags.Key.join(',')}
+						key={tags.Key}
 						tag={tags}
 						index={index}
 						onCloseHandler={(): void => onCloseHandler(index)}

frontend/src/container/Trace/Search/util.ts

@@ -59,7 +59,7 @@ export const parseQueryToTags = (query: string): PayloadProps<Tags> => {
 		// If the operator is Exists or NotExists, then return the tag object without values
 		if (operator === 'Exists' || operator === 'NotExists') {
 			return {
-				Key: [tagName],
+				Key: tagName,
 				StringValues: [],
 				NumberValues: [],
 				BoolValues: [],
@@ -97,7 +97,7 @@ export const parseQueryToTags = (query: string): PayloadProps<Tags> => {
 
 		// Return the tag object
 		return {
-			Key: [tagName],
+			Key: tagName,
 			StringValues,
 			NumberValues,
 			BoolValues,
@@ -120,31 +120,31 @@ export const parseTagsToQuery = (tags: Tags): PayloadProps<string> => {
 	const payload = tags
 		.map(({ StringValues, NumberValues, BoolValues, Key, Operator }) => {
 			// Check if the key of the tag is undefined
-			if (!Key[0]) {
+			if (!Key) {
 				isError = true;
 			}
 			if (Operator === 'Exists' || Operator === 'NotExists') {
-				return `${Key[0]} ${Operator}`;
+				return `${Key} ${Operator}`;
 			}
 			// Check if the tag has string values
 			if (StringValues.length > 0) {
 				// Format the string values and join them with a ','
 				const formattedStringValues = formatValues(StringValues);
-				return `${Key[0]} ${Operator} (${formattedStringValues})`;
+				return `${Key} ${Operator} (${formattedStringValues})`;
 			}
 
 			// Check if the tag has number values
 			if (NumberValues.length > 0) {
 				// Format the number values and join them with a ','
 				const formattedNumberValues = formatValues(NumberValues);
-				return `${Key[0]} ${Operator} (${formattedNumberValues})`;
+				return `${Key} ${Operator} (${formattedNumberValues})`;
 			}
 
 			// Check if the tag has boolean values
 			if (BoolValues.length > 0) {
 				// Format the boolean values and join them with a ','
 				const formattedBoolValues = formatValues(BoolValues);
-				return `${Key[0]} ${Operator} (${formattedBoolValues})`;
+				return `${Key} ${Operator} (${formattedBoolValues})`;
 			}
 
 			return '';

frontend/src/lib/resourceAttributes.ts

@@ -37,7 +37,7 @@ export const convertRawQueriesToTraceSelectedTags = (
 	queries: IResourceAttributeQuery[],
 ): Tags[] =>
 	queries.map((query) => ({
-		Key: [convertMetricKeyToTrace(query.tagKey)],
+		Key: convertMetricKeyToTrace(query.tagKey),
 		Operator: convertOperatorLabelToTraceOperator(query.operator),
 		StringValues: query.tagValue,
 		NumberValues: [],

frontend/src/types/reducer/trace.ts

@@ -47,7 +47,7 @@ interface SpansAggregateData {
 }
 
 export interface Tags {
-	Key: string[];
+	Key: string;
 	Operator: OperatorValues;
 	StringValues: string[];
 	NumberValues: number[];