diff --git a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx index 8e3f0e1889..bb7cb47765 100644 --- a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx +++ b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx @@ -9,7 +9,6 @@ import { StyledIconOpen, StyledInner, StyledLink, - StyledWrapper, } from './AdditionalFiltersToggler.styled'; export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({ @@ -41,12 +40,12 @@ export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({ }); return ( - +
{isOpenedFilters ? : } {!isOpenedFilters && Add conditions for {filtersTexts}} {isOpenedFilters && {children}} - +
); }); diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx index a5c27c6a6d..d6b1837081 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx +++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx @@ -19,6 +19,7 @@ import { OperatorsSelect, ReduceToFilter, } from 'container/QueryBuilder/filters'; +import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter'; import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch'; import { useQueryBuilder } from 'hooks/useQueryBuilder'; import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator'; @@ -64,6 +65,7 @@ export const Query = memo(function Query({ ...query, aggregateOperator: value, having: [], + limit: null, }; if (!aggregateDataType || query.dataSource === DataSource.METRICS) { @@ -191,6 +193,17 @@ export const Query = memo(function Query({ [query.dataSource], ); + const handleChangeLimit = useCallback( + (value: number | null): void => { + const newQuery: IBuilderQueryForm = { + ...query, + limit: value, + }; + handleSetQueryData(index, newQuery); + }, + [index, query, handleSetQueryData], + ); + return ( @@ -253,8 +266,16 @@ export const Query = memo(function Query({ - {/* TODO: Render filter by Col component */} - test additional filter + {!isMatricsDataSource && ( + + + + + + + + + )} diff --git a/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx new file mode 100644 index 0000000000..e9f136691f --- /dev/null +++ b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx @@ -0,0 +1,37 @@ +import { InputNumber } from 'antd'; +import React, { useState } 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(null); + const onChangeHandler = (value: number | null): void => { + setIsData(value); + }; + + const handleEnter = (e: { key: string }): void => { + if (e.key === 'Enter') { + onChange(isData); + } + }; + + return ( + + ); +} + +interface LimitFilterProps { + onChange: (values: number | null) => void; + query: IBuilderQueryForm; +} + +export default LimitFilter; diff --git a/frontend/src/types/api/queryBuilder/queryBuilderData.ts b/frontend/src/types/api/queryBuilder/queryBuilderData.ts index c70a1f4aeb..693d2910e5 100644 --- a/frontend/src/types/api/queryBuilder/queryBuilderData.ts +++ b/frontend/src/types/api/queryBuilder/queryBuilderData.ts @@ -40,7 +40,7 @@ export type IBuilderQuery = { expression: string; disabled: boolean; having: Having[]; - limit: number; + limit: number | null; stepInterval: number; orderBy: string[]; reduceTo: string;