Merge pull request #928 from palash-signoz/tag-value-suggestion

feat: Tag value suggestion

frontend/src/api/trace/getTagValue.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getTagValue';
+
+const getTagValue = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.post<PayloadProps>(`/getTagValues`, {
+			start: props.start.toString(),
+			end: props.end.toString(),
+			tagKey: props.tagKey,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTagValue;

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

@@ -0,0 +1,69 @@
+import { Select } from 'antd';
+import { DefaultOptionType } from 'antd/lib/select';
+import getTagValue from 'api/trace/getTagValue';
+import useFetch from 'hooks/useFetch';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { PayloadProps, Props } from 'types/api/trace/getTagValue';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { TraceReducer } from 'types/reducer/trace';
+
+import { Value } from '.';
+import { SelectComponent } from './styles';
+
+function TagValue(props: TagValueProps): JSX.Element {
+	const { tag, setLocalSelectedTags, index, tagKey } = props;
+	const {
+		Key: selectedKey,
+		Operator: selectedOperator,
+		Values: selectedValues,
+	} = tag;
+
+	const globalReducer = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const valueSuggestion = useFetch<PayloadProps, Props>(getTagValue, {
+		end: globalReducer.maxTime,
+		start: globalReducer.minTime,
+		tagKey,
+	});
+
+	return (
+		<SelectComponent
+			onSelect={(value: unknown): void => {
+				if (typeof value === 'string') {
+					setLocalSelectedTags((tags) => [
+						...tags.slice(0, index),
+						{
+							Key: selectedKey,
+							Operator: selectedOperator,
+							Values: [...selectedValues, value],
+						},
+						...tags.slice(index + 1, tags.length),
+					]);
+				}
+			}}
+			loading={valueSuggestion.loading || false}
+		>
+			{valueSuggestion.payload &&
+				valueSuggestion.payload.map((suggestion) => (
+					<Select.Option key={suggestion.tagValues} value={suggestion.tagValues}>
+						{suggestion.tagValues}
+					</Select.Option>
+				))}
+		</SelectComponent>
+	);
+}
+
+interface TagValueProps {
+	index: number;
+	tag: FlatArray<TraceReducer['selectedTags'], 1>;
+	setLocalSelectedTags: React.Dispatch<
+		React.SetStateAction<TraceReducer['selectedTags']>
+	>;
+	tagKey: string;
+}
+
+export default TagValue;

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

@@ -5,13 +5,9 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { TraceReducer } from 'types/reducer/trace';
 
-import {
+import { Container, IconContainer, SelectComponent } from './styles';
-	Container,
-	IconContainer,
-	SelectComponent,
-	ValueSelect,
-} from './styles';
 import TagsKey from './TagKey';
+import TagValue from './TagValue';
 
 const { Option } = Select;
 
@@ -68,7 +64,6 @@ function SingleTags(props: AllTagsProps): JSX.Element {
 				tag={tag}
 				setLocalSelectedTags={setLocalSelectedTags}
 			/>
-
 			<SelectComponent
 				onChange={onChangeOperatorHandler}
 				value={AllMenu.find((e) => e.key === selectedOperator)?.value || ''}
@@ -80,21 +75,16 @@ function SingleTags(props: AllTagsProps): JSX.Element {
 				))}
 			</SelectComponent>
 
-			<ValueSelect
+			{selectedKey[0] ? (
-				value={selectedValues}
+				<TagValue
-				onChange={(value): void => {
+					index={index}
-					setLocalSelectedTags((tags) => [
+					tag={tag}
-						...tags.slice(0, index),
+					setLocalSelectedTags={setLocalSelectedTags}
-						{
+					tagKey={selectedKey[0]}
-							Key: selectedKey,
+				/>
-							Operator: selectedOperator,
+			) : (
-							Values: value as string[],
+				<SelectComponent />
-						},
+			)}
-						...tags.slice(index + 1, tags.length),
-					]);
-				}}
-				mode="tags"
-			/>
 
 			<IconContainer role="button" onClick={(): void => onDeleteTagHandler(index)}>
 				<CloseOutlined />
@@ -112,4 +102,10 @@ interface AllTagsProps {
 	>;
 }
 
+export interface Value {
+	key: string;
+	label: string;
+	value: string;
+}
+
 export default SingleTags;

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

@@ -15,12 +15,6 @@ export const SelectComponent = styled(Select)`
 	}
 `;
 
-export const ValueSelect = styled(Select)`
-	&&& {
-		width: 100%;
-	}
-`;
-
 export const Container = styled.div`
 	&&& {
 		display: flex;

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

@@ -0,0 +1,13 @@
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+export interface Props {
+	start: GlobalReducer['minTime'];
+	end: GlobalReducer['maxTime'];
+	tagKey: string;
+}
+
+interface Value {
+	tagValues: string;
+}
+
+export type PayloadProps = Value[];