feat: added Order By filter (#2551)

* fix: remove frontend code owner

* chore: set Cache-Control for auto complete requests (#2504)

* feat(filter): add group by filter (#2538)

* feat: poc of search bar

* feat: poc of search bar

* feat: attribute keys auto complete  api

* chore: conflict resolve

* chore: conflict resolve

* fix: menu was not open on click

* feat: re-used antoney's hooks code

* fix: linting & type issue

* fix: unwanted file changes

* fix: conflic changes

* feat: added orderby filter

* chore: rebased changes

* feat: poc of search bar

* feat: poc of search bar

* feat: attribute keys auto complete  api

* chore: conflict resolve

* fix: menu was not open on click

* feat: re-used antoney's hooks code

* fix: linting & type issue

* fix: uncomment qb component

* fix: unwanted file changes

* fix: conflic changes

* fix: suggested changes

* fix: reused label component

* fix: unwanted changes

* fix: unwanted changes

* fix: recovered old changes

* fix: orderby reset behaviour

* chore: rebased changes

* fix: resolved unwanted changes

* fix: ui of filter row

* fix: resolved order by filter issue on label

* fix: resolved reset behaviour

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
Co-authored-by: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/constants/queryBuilder.ts

@@ -44,7 +44,7 @@ export const initialQueryBuilderFormValues: IBuilderQueryForm = {
 	queryName: createNewQueryName([]),
 	aggregateOperator: Object.values(MetricAggregateOperator)[0],
 	aggregateAttribute: initialAggregateAttribute,
-	tagFilters: [],
+	tagFilters: { items: [], op: 'AND' },
 	expression: '',
 	disabled: false,
 	having: [],

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx

@@ -1,4 +1,3 @@
-import { Row } from 'antd';
 import React, { Fragment, memo, ReactNode, useState } from 'react';
 
 // ** Types
@@ -45,7 +44,7 @@ export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
 				{isOpenedFilters ? <StyledIconClose /> : <StyledIconOpen />}
 				{!isOpenedFilters && <span>Add conditions for {filtersTexts}</span>}
 			</StyledInner>
-			{isOpenedFilters && <Row>{children}</Row>}
+			{isOpenedFilters && children}
 		</div>
 	);
 });

frontend/src/container/QueryBuilder/components/Query/Query.styled.ts

@@ -20,3 +20,7 @@ export const StyledDeleteEntity = styled(CloseCircleOutlined)`
 export const StyledRow = styled(Row)`
 	padding-right: 3rem;
 `;
+
+export const StyledFilterRow = styled(Row)`
+	margin-bottom: 0.875rem;
+`;

frontend/src/container/QueryBuilder/components/Query/Query.tsx

@@ -21,20 +21,24 @@ import {
 } from 'container/QueryBuilder/filters';
 import AggregateEveryFilter from 'container/QueryBuilder/filters/AggregateEveryFilter';
 import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
+import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { useQueryBuilder } from 'hooks/useQueryBuilder';
 import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator';
 // ** Hooks
 import React, { memo, useCallback, useMemo } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQueryForm,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 // ** Types
 import { QueryProps } from './Query.interfaces';
 // ** Styles
-import { StyledDeleteEntity, StyledRow } from './Query.styled';
+import { StyledDeleteEntity, StyledFilterRow, StyledRow } from './Query.styled';
 
 export const Query = memo(function Query({
 	index,
@@ -66,10 +70,13 @@ export const Query = memo(function Query({
 				...query,
 				aggregateOperator: value,
 				having: [],
+				groupBy: [],
+				orderBy: [],
 				limit: null,
+				tagFilters: { items: [], op: 'AND' },
 			};
 
-			if (!aggregateDataType || query.dataSource === DataSource.METRICS) {
+			if (!aggregateDataType) {
 				handleSetQueryData(index, newQuery);
 				return;
 			}
@@ -194,6 +201,17 @@ export const Query = memo(function Query({
 		[query.dataSource],
 	);
 
+	const handleChangeOrderByKeys = useCallback(
+		(values: BaseAutocompleteData[]): void => {
+			const newQuery: IBuilderQueryForm = {
+				...query,
+				orderBy: values,
+			};
+			handleSetQueryData(index, newQuery);
+		},
+		[handleSetQueryData, index, query],
+	);
+
 	const handleChangeLimit = useCallback(
 		(value: number | null): void => {
 			const newQuery: IBuilderQueryForm = {
@@ -216,6 +234,17 @@ export const Query = memo(function Query({
 		[index, query, handleSetQueryData],
 	);
 
+	const handleChangeTagFilters = useCallback(
+		(value: TagFilter): void => {
+			const newQuery: IBuilderQueryForm = {
+				...query,
+				tagFilters: value,
+			};
+			handleSetQueryData(index, newQuery);
+		},
+		[index, query, handleSetQueryData],
+	);
+
 	return (
 		<StyledRow gutter={[0, 15]}>
 			<StyledDeleteEntity onClick={handleDeleteQuery} />
@@ -241,7 +270,7 @@ export const Query = memo(function Query({
 						{isMatricsDataSource && <FilterLabel label="WHERE" />}
 					</Col>
 					<Col span={isMatricsDataSource ? 17 : 20}>
-						<QueryBuilderSearch query={query} />
+						<QueryBuilderSearch query={query} onChange={handleChangeTagFilters} />
 					</Col>
 				</Row>
 			</Col>
@@ -279,20 +308,26 @@ export const Query = memo(function Query({
 			<Col span={24}>
 				<AdditionalFiltersToggler listOfAdditionalFilter={listOfAdditionalFilters}>
 					{!isMatricsDataSource && (
-						<Row gutter={[11, 5]}>
-							<Col span={6}>
+						<StyledFilterRow gutter={[11, 5]} justify="space-around">
+							<Col span={2}>
+								<FilterLabel label="Order by" />
+							</Col>
+							<Col span={10}>
+								<OrderByFilter query={query} onChange={handleChangeOrderByKeys} />
+							</Col>
+							<Col span={1.5}>
 								<FilterLabel label="Limit" />
 							</Col>
-							<Col span={18}>
+							<Col span={10}>
 								<LimitFilter query={query} onChange={handleChangeLimit} />
 							</Col>
-						</Row>
+						</StyledFilterRow>
 					)}
 					<Row gutter={[11, 5]}>
-						<Col span={10}>
+						<Col span={3}>
 							<FilterLabel label="Aggregate Every" />
 						</Col>
-						<Col span={14}>
+						<Col span={8}>
 							<AggregateEveryFilter
 								query={query}
 								onChange={handleChangeAggregateEvery}

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -1,17 +1,17 @@
 import { Select, Spin } from 'antd';
-// ** Api
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 // ** Constants
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 // ** Components
 // ** Helpers
 import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { MetricAggregateOperator } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 
-// ** Types
+import { selectStyle } from '../QueryBuilderSearch/config';
 import {
 	GroupByFilterProps,
 	GroupByFilterValue,
@@ -81,13 +81,20 @@ export const GroupByFilter = memo(function GroupByFilter({
 		title: undefined,
 	}));
 
+	const isDisabledSelect = useMemo(
+		() =>
+			!query.aggregateAttribute.key ||
+			query.aggregateOperator === MetricAggregateOperator.NOOP,
+		[query.aggregateAttribute.key, query.aggregateOperator],
+	);
+
 	return (
 		<Select
 			mode="tags"
-			style={{ width: '100%' }}
+			style={selectStyle}
 			onSearch={handleSearchKeys}
 			showSearch
-			disabled={!query.aggregateAttribute.key}
+			disabled={isDisabledSelect}
 			showArrow={false}
 			filterOption={false}
 			options={optionsData}

frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx

@@ -1,30 +1,21 @@
 import { InputNumber } from 'antd';
-import React, { useState } from 'react';
+import React from 'react';
 import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 
 function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
-	const [isData, setIsData] = useState<number | null>(null);
 	const onChangeHandler = (value: number | null): void => {
-		setIsData(value);
-	};
-
-	const handleEnter = (e: { key: string }): void => {
-		if (e.key === 'Enter') {
-			onChange(isData);
-		}
+		onChange(value);
 	};
 
 	return (
 		<InputNumber
 			min={1}
 			type="number"
-			placeholder="e.g 10"
 			disabled={!query.aggregateAttribute.key}
 			style={selectStyle}
 			onChange={onChangeHandler}
-			onPressEnter={handleEnter}
 		/>
 	);
 }

frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx

@@ -5,6 +5,7 @@ import { SelectOption } from 'types/common/select';
 // ** Helpers
 import { transformToUpperCase } from 'utils/transformToUpperCase';
 
+import { selectStyle } from '../QueryBuilderSearch/config';
 import { OperatorsSelectProps } from './OperatorsSelect.interfaces';
 
 export const OperatorsSelect = memo(function OperatorsSelect({
@@ -25,7 +26,7 @@ export const OperatorsSelect = memo(function OperatorsSelect({
 			options={operatorsOptions}
 			value={value}
 			onChange={onChange}
-			style={{ width: '100%' }}
+			style={selectStyle}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...props}
 		/>

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts

@@ -0,0 +1,15 @@
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
+
+export type OrderByFilterProps = {
+	query: IBuilderQueryForm;
+	onChange: (values: BaseAutocompleteData[]) => void;
+};
+
+export type OrderByFilterValue = {
+	disabled: boolean | undefined;
+	key: string;
+	label: string;
+	title: string | undefined;
+	value: string;
+};

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx

@@ -0,0 +1,141 @@
+import { Select, Spin } from 'antd';
+import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
+import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { IOption } from 'hooks/useResourceAttribute/types';
+import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
+import { MetricAggregateOperator } from 'types/common/queryBuilder';
+
+import { selectStyle } from '../QueryBuilderSearch/config';
+import {
+	OrderByFilterProps,
+	OrderByFilterValue,
+} from './OrderByFilter.interfaces';
+import { getLabelFromValue, mapLabelValuePairs } from './utils';
+
+export function OrderByFilter({
+	query,
+	onChange,
+}: OrderByFilterProps): JSX.Element {
+	const [searchText, setSearchText] = useState<string>('');
+	const [selectedValue, setSelectedValue] = useState<OrderByFilterValue[]>([]);
+
+	const { data, isFetching } = useQuery(
+		[QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText],
+		async () =>
+			getAggregateKeys({
+				aggregateAttribute: query.aggregateAttribute.key,
+				tagType: query.aggregateAttribute.type,
+				dataSource: query.dataSource,
+				aggregateOperator: query.aggregateOperator,
+				searchText,
+			}),
+		{ enabled: !!query.aggregateAttribute.key, keepPreviousData: true },
+	);
+
+	const handleSearchKeys = useCallback(
+		(searchText: string): void => setSearchText(searchText),
+		[],
+	);
+
+	const generateOptionsData = (
+		attributeKeys: BaseAutocompleteData[] | undefined,
+		selectedValue: OrderByFilterValue[],
+		query: IBuilderQueryForm,
+	): IOption[] => {
+		const selectedValueLabels = getLabelFromValue(selectedValue);
+
+		const noAggregationOptions = attributeKeys
+			? mapLabelValuePairs(attributeKeys)
+					.flat()
+					.filter(
+						(option) => !selectedValueLabels.includes(option.label.split(' ')[0]),
+					)
+			: [];
+
+		const aggregationOptions = mapLabelValuePairs(query.groupBy)
+			.flat()
+			.concat([
+				{
+					label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`,
+					value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`,
+				},
+				{
+					label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`,
+					value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`,
+				},
+			])
+			.filter(
+				(option) => !selectedValueLabels.includes(option.label.split(' ')[0]),
+			);
+
+		return query.aggregateOperator === MetricAggregateOperator.NOOP
+			? noAggregationOptions
+			: aggregationOptions;
+	};
+
+	const optionsData = useMemo(
+		() => generateOptionsData(data?.payload?.attributeKeys, selectedValue, query),
+		[data?.payload?.attributeKeys, query, selectedValue],
+	);
+
+	const handleChange = (values: OrderByFilterValue[]): void => {
+		setSelectedValue(values);
+		const orderByValues: BaseAutocompleteData[] = values?.map((item) => {
+			const iterationArray = data?.payload?.attributeKeys || query.orderBy;
+			const existingOrderValues = iterationArray.find(
+				(group) => group.key === item.value,
+			);
+			if (existingOrderValues) {
+				return existingOrderValues;
+			}
+
+			return {
+				isColumn: null,
+				key: item.value,
+				dataType: null,
+				type: null,
+			};
+		});
+		onChange(orderByValues);
+	};
+
+	const values: OrderByFilterValue[] = query.orderBy.map((item) => ({
+		label: transformStringWithPrefix({
+			str: item.key,
+			prefix: item.type || '',
+			condition: !item.isColumn,
+		}),
+		key: item.key,
+		value: item.key,
+		disabled: undefined,
+		title: undefined,
+	}));
+
+	const isDisabledSelect = useMemo(
+		() =>
+			!query.aggregateAttribute.key ||
+			query.aggregateOperator === MetricAggregateOperator.NOOP,
+		[query.aggregateAttribute.key, query.aggregateOperator],
+	);
+
+	return (
+		<Select
+			mode="tags"
+			style={selectStyle}
+			onSearch={handleSearchKeys}
+			showSearch
+			disabled={isDisabledSelect}
+			showArrow={false}
+			filterOption={false}
+			options={optionsData}
+			labelInValue
+			value={values}
+			notFoundContent={isFetching ? <Spin size="small" /> : null}
+			onChange={handleChange}
+		/>
+	);
+}

frontend/src/container/QueryBuilder/filters/OrderByFilter/index.ts

@@ -0,0 +1 @@
+export { OrderByFilter } from './OrderByFilter';

frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts

@@ -0,0 +1,32 @@
+import { IOption } from 'hooks/useResourceAttribute/types';
+import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { OrderByFilterValue } from './OrderByFilter.interfaces';
+
+export function mapLabelValuePairs(
+	arr: BaseAutocompleteData[],
+): Array<IOption>[] {
+	return arr.map((item) => {
+		const label = transformStringWithPrefix({
+			str: item.key,
+			prefix: item.type || '',
+			condition: !item.isColumn,
+		});
+		const value = item.key;
+		return [
+			{
+				label: `${label} asc`,
+				value: `${value} asc`,
+			},
+			{
+				label: `${label} desc`,
+				value: `${value} desc`,
+			},
+		];
+	});
+}
+
+export function getLabelFromValue(arr: OrderByFilterValue[]): string[] {
+	return arr.map((value) => value.label.split(' ')[0]);
+}

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

@@ -1,13 +1,20 @@
 import { Select, Spin, Tag, Tooltip } from 'antd';
 import { useAutoComplete } from 'hooks/queryBuilder/useAutoComplete';
-import React from 'react';
-import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
+import React, { useEffect, useMemo } from 'react';
+import {
+	IBuilderQueryForm,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuid } from 'uuid';
 
 import { selectStyle } from './config';
 import { StyledCheckOutlined, TypographyText } from './style';
 import { isInNotInOperator } from './utils';
 
-function QueryBuilderSearch({ query }: QueryBuilderSearchProps): JSX.Element {
+function QueryBuilderSearch({
+	query,
+	onChange,
+}: QueryBuilderSearchProps): JSX.Element {
 	const {
 		handleClearTag,
 		handleKeyDown,
@@ -51,6 +58,26 @@ function QueryBuilderSearch({ query }: QueryBuilderSearchProps): JSX.Element {
 		if (isMulti || event.key === 'Backspace') handleKeyDown(event);
 	};
 
+	const queryTags = useMemo(() => {
+		if (!query.aggregateAttribute.key) return [];
+		return tags;
+	}, [query.aggregateAttribute.key, tags]);
+
+	useEffect(() => {
+		const initialTagFilters: TagFilter = { items: [], op: 'AND' };
+		initialTagFilters.items = tags.map((tag) => {
+			const [tagKey, tagOperator, ...tagValue] = tag.split(' ');
+			return {
+				id: uuid().slice(0, 8),
+				key: tagKey,
+				op: tagOperator,
+				value: tagValue.map((i) => i.replace(',', '')),
+			};
+		});
+		onChange(initialTagFilters);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [tags]);
+
 	return (
 		<Select
 			virtual
@@ -60,7 +87,7 @@ function QueryBuilderSearch({ query }: QueryBuilderSearchProps): JSX.Element {
 			autoClearSearchValue={false}
 			mode="multiple"
 			placeholder="Search Filter"
-			value={tags}
+			value={queryTags}
 			searchValue={searchValue}
 			disabled={!query.aggregateAttribute.key}
 			style={selectStyle}
@@ -83,6 +110,7 @@ function QueryBuilderSearch({ query }: QueryBuilderSearchProps): JSX.Element {
 
 interface QueryBuilderSearchProps {
 	query: IBuilderQueryForm;
+	onChange: (value: TagFilter) => void;
 }
 
 export interface CustomTagProps {

frontend/src/hooks/queryBuilder/useAutoComplete.ts

@@ -58,7 +58,7 @@ export const useAutoComplete = (query: IBuilderQueryForm): IAutoComplete => {
 					}
 					return checkStringEndsWithSpace(prev)
 						? `${prev} ${value}`
-						: `${prev}, ${value}`;
+						: `${prev} ${value},`;
 				});
 			}
 			if (!isMulti && isValidTag && !isExistsNotExistsOperator(value)) {

frontend/src/hooks/queryBuilder/useOptions.ts

@@ -27,7 +27,7 @@ export const useOptions = (
 			);
 		} else if (key && !operator) {
 			setOptions(
-				operators.map((o) => ({
+				operators?.map((o) => ({
 					value: `${key} ${o}`,
 					label: `${key} ${o.replace('_', ' ')}`,
 				})),

frontend/src/types/api/queryBuilder/queryBuilderData.ts

@@ -11,6 +11,7 @@ export interface IBuilderFormula {
 }
 
 export interface TagFilterItem {
+	id: string;
 	key: string;
 	// TODO: type it in the future
 	op: string;
@@ -18,7 +19,7 @@ export interface TagFilterItem {
 }
 
 export interface TagFilter {
-	items: TagFilterItem[];
+	items: TagFilterItem[] | [];
 	// TODO: type it in the future
 	op: string;
 }
@@ -35,14 +36,14 @@ export type IBuilderQuery = {
 	dataSource: DataSource;
 	aggregateOperator: string;
 	aggregateAttribute: string;
-	tagFilters: TagFilter[];
+	tagFilters: TagFilter;
 	groupBy: BaseAutocompleteData[];
 	expression: string;
 	disabled: boolean;
 	having: Having[];
 	limit: number | null;
 	stepInterval: number;
-	orderBy: string[];
+	orderBy: BaseAutocompleteData[];
 	reduceTo: string;
 };