feat: added trace-filter in new trace-explorer

frontend/src/container/NewExplorerCTA/config.ts

@@ -8,4 +8,5 @@ export const buttonText: Record<string, string> = {
 	[ROUTES.LOGS_EXPLORER]: 'Switch to Old Logs Explorer',
 	[ROUTES.TRACE]: 'Try new Traces Explorer',
 	[ROUTES.OLD_LOGS_EXPLORER]: 'Switch to New Logs Explorer',
+	[ROUTES.TRACES_EXPLORER]: 'Switch to Old Trace Explorer',
 };

frontend/src/container/NewExplorerCTA/index.tsx

@@ -14,7 +14,8 @@ function NewExplorerCTA(): JSX.Element | null {
 		() =>
 			location.pathname === ROUTES.LOGS_EXPLORER ||
 			location.pathname === ROUTES.TRACE ||
-			location.pathname === ROUTES.OLD_LOGS_EXPLORER,
+			location.pathname === ROUTES.OLD_LOGS_EXPLORER ||
+			location.pathname === ROUTES.TRACES_EXPLORER,
 		[location.pathname],
 	);
 
@@ -25,6 +26,8 @@ function NewExplorerCTA(): JSX.Element | null {
 			history.push(ROUTES.TRACES_EXPLORER);
 		} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
 			history.push(ROUTES.LOGS_EXPLORER);
+		} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
+			history.push(ROUTES.TRACE);
 		}
 	}, [location.pathname]);
 
@@ -47,6 +50,10 @@ function NewExplorerCTA(): JSX.Element | null {
 		return null;
 	}
 
+	if (location.pathname === ROUTES.TRACES_EXPLORER) {
+		return button;
+	}
+
 	if (location.pathname === ROUTES.LOGS_EXPLORER) {
 		return button;
 	}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -180,7 +180,7 @@ function QueryBuilderSearch({
 			const { tagKey, tagOperator, tagValue } = getTagToken(tag);
 
 			const filterAttribute = [...initialSourceKeys, ...sourceKeys].find(
-				(key) => key.key === getRemovePrefixFromKey(tagKey),
+				(key) => key?.key === getRemovePrefixFromKey(tagKey),
 			);
 
 			const computedTagValue =

frontend/src/container/SideNav/menuItems.tsx

@@ -72,7 +72,7 @@ const menuItems: SidebarItem[] = [
 		icon: <BarChart2 size={16} />,
 	},
 	{
-		key: ROUTES.TRACE,
+		key: ROUTES.TRACES_EXPLORER,
 		label: 'Traces',
 		icon: <DraftingCompass size={16} />,
 	},

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -19,6 +19,7 @@ import {
 	defaultLiveQueryDataConfig,
 } from 'container/LiveLogs/constants';
 import { QueryHistoryState } from 'container/LiveLogs/types';
+import NewExplorerCTA from 'container/NewExplorerCTA';
 import dayjs, { Dayjs } from 'dayjs';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
@@ -63,6 +64,7 @@ function DateTimeSelection({
 	location,
 	updateTimeInterval,
 	globalTimeLoading,
+	showOldExplorerCTA = false,
 }: Props): JSX.Element {
 	const [formSelector] = Form.useForm();
 
@@ -561,6 +563,11 @@ function DateTimeSelection({
 
 	return (
 		<div className="date-time-selector">
+			{showOldExplorerCTA && (
+				<div style={{ marginRight: 12 }}>
+					<NewExplorerCTA />
+				</div>
+			)}
 			{!hasSelectedTimeError && !refreshButtonHidden && (
 				<RefreshText
 					{...{
@@ -646,10 +653,12 @@ function DateTimeSelection({
 interface DateTimeSelectionV2Props {
 	showAutoRefresh: boolean;
 	hideShareModal?: boolean;
+	showOldExplorerCTA?: boolean;
 }
 
 DateTimeSelection.defaultProps = {
 	hideShareModal: false,
+	showOldExplorerCTA: false,
 };
 interface DispatchProps {
 	updateTimeInterval: (

frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts

@@ -41,6 +41,7 @@ export const useFetchKeysAndValues = (
 	const [keys, setKeys] = useState<BaseAutocompleteData[]>([]);
 	const [sourceKeys, setSourceKeys] = useState<BaseAutocompleteData[]>([]);
 	const [results, setResults] = useState<string[]>([]);
+	const [isAggregateFetching, setAggregateFetching] = useState<boolean>(false);
 
 	const memoizedSearchParams = useMemo(
 		() => [
@@ -106,22 +107,29 @@ export const useFetchKeysAndValues = (
 		if (!tagKey || !tagOperator) {
 			return;
 		}
-
-		const { payload } = await getAttributesValues({
-			aggregateOperator: query.aggregateOperator,
-			dataSource: query.dataSource,
-			aggregateAttribute: query.aggregateAttribute.key,
-			attributeKey: filterAttributeKey?.key ?? tagKey,
-			filterAttributeKeyDataType: filterAttributeKey?.dataType ?? DataTypes.EMPTY,
-			tagType: filterAttributeKey?.type ?? '',
-			searchText: isInNInOperator(tagOperator)
-				? tagValue[tagValue.length - 1]?.toString() ?? '' // last element of tagvalue will be always user search value
-				: tagValue?.toString() ?? '',
-		});
-
-		if (payload) {
-			const values = Object.values(payload).find((el) => !!el) || [];
-			setResults(values);
+		setAggregateFetching(true);
+
+		try {
+			const { payload } = await getAttributesValues({
+				aggregateOperator: query.aggregateOperator,
+				dataSource: query.dataSource,
+				aggregateAttribute: query.aggregateAttribute.key,
+				attributeKey: filterAttributeKey?.key ?? tagKey,
+				filterAttributeKeyDataType: filterAttributeKey?.dataType ?? DataTypes.EMPTY,
+				tagType: filterAttributeKey?.type ?? '',
+				searchText: isInNInOperator(tagOperator)
+					? tagValue[tagValue.length - 1]?.toString() ?? '' // last element of tagvalue will be always user search value
+					: tagValue?.toString() ?? '',
+			});
+
+			if (payload) {
+				const values = Object.values(payload).find((el) => !!el) || [];
+				setResults(values);
+			}
+		} catch (e) {
+			console.error(e);
+		} finally {
+			setAggregateFetching(false);
 		}
 	};
 
@@ -157,7 +165,7 @@ export const useFetchKeysAndValues = (
 	return {
 		keys,
 		results,
-		isFetching,
+		isFetching: isFetching || isAggregateFetching,
 		sourceKeys,
 		handleRemoveSourceKey,
 	};

frontend/src/pages/TracesExplorer/Filter/DurationSection.tsx

@@ -0,0 +1,143 @@
+import { Input, Slider } from 'antd';
+import { SliderRangeProps } from 'antd/es/slider';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import {
+	ChangeEventHandler,
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+
+import { addFilter, FilterType, traceFilterKeys } from './filterUtils';
+
+interface DurationProps {
+	selectedFilters: FilterType | undefined;
+	setSelectedFilters: Dispatch<SetStateAction<FilterType | undefined>>;
+}
+
+export function DurationSection(props: DurationProps): JSX.Element {
+	const { setSelectedFilters, selectedFilters } = props;
+
+	const getDuration = useMemo(() => {
+		if (selectedFilters?.durationNanoMin || selectedFilters?.durationNanoMax) {
+			return {
+				minDuration: selectedFilters?.durationNanoMin?.values || '',
+				maxDuration: selectedFilters?.durationNanoMax?.values || '',
+			};
+		}
+
+		if (selectedFilters?.durationNano) {
+			return {
+				minDuration: getMs(selectedFilters?.durationNano?.values?.[0] || ''),
+				maxDuration: getMs(selectedFilters?.durationNano?.values?.[1] || ''),
+			};
+		}
+
+		return {
+			maxDuration: '',
+			minDuration: '',
+		};
+	}, [selectedFilters]);
+
+	const [preMax, setPreMax] = useState<string>('');
+	const [preMin, setPreMin] = useState<string>('');
+
+	useEffect(() => {
+		setPreMax(getDuration.maxDuration as string);
+		setPreMin(getDuration.minDuration as string);
+	}, [getDuration]);
+
+	const updateDurationFilter = (min: string, max: string): void => {
+		const durationMin = 'durationNanoMin';
+		const durationMax = 'durationNanoMax';
+
+		addFilter(durationMin, min, setSelectedFilters, traceFilterKeys.durationNano);
+		addFilter(durationMax, max, setSelectedFilters, traceFilterKeys.durationNano);
+	};
+
+	const onRangeSliderHandler = (number: [string, string]): void => {
+		const [min, max] = number;
+
+		setPreMin(min);
+		setPreMax(max);
+	};
+
+	const debouncedFunction = useDebouncedFn(
+		(min, max) => {
+			updateDurationFilter(min as string, max as string);
+		},
+		1500,
+		undefined,
+	);
+
+	const onChangeMaxHandler: ChangeEventHandler<HTMLInputElement> = (event) => {
+		const { value } = event.target;
+		const min = preMin;
+		const max = value;
+
+		onRangeSliderHandler([min, max]);
+		debouncedFunction(min, max);
+	};
+
+	const onChangeMinHandler: ChangeEventHandler<HTMLInputElement> = (event) => {
+		const { value } = event.target;
+		const min = value;
+		const max = preMax;
+
+		onRangeSliderHandler([min, max]);
+		debouncedFunction(min, max);
+	};
+
+	const onRangeHandler: SliderRangeProps['onChange'] = ([min, max]) => {
+		updateDurationFilter(min.toString(), max.toString());
+	};
+
+	const TipComponent = useCallback((value: undefined | number) => {
+		if (value === undefined) {
+			return <div />;
+		}
+		return <div>{`${value?.toString()}ms`}</div>;
+	}, []);
+
+	return (
+		<div>
+			<div className="duration-inputs">
+				<Input
+					type="number"
+					addonBefore="MIN"
+					placeholder="0"
+					className="min-max-input"
+					onChange={onChangeMinHandler}
+					value={preMin}
+					addonAfter="ms"
+				/>
+				<Input
+					type="number"
+					addonBefore="MAX"
+					placeholder="100000000"
+					className="min-max-input"
+					onChange={onChangeMaxHandler}
+					value={preMax}
+					addonAfter="ms"
+				/>
+			</div>
+			<div>
+				<Slider
+					min={0}
+					max={100000}
+					range
+					tooltip={{ formatter: TipComponent }}
+					onChange={([min, max]): void => {
+						onRangeSliderHandler([String(min), String(max)]);
+					}}
+					onAfterChange={onRangeHandler}
+					value={[Number(preMin), Number(preMax)]}
+				/>
+			</div>
+		</div>
+	);
+}