feat: added aggregate every filter (#2581)

* fix: remove frontend code owner

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

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

* feat: added aggregate every filter

---------

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

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

@@ -19,6 +19,7 @@ import {
 	OperatorsSelect,
 	ReduceToFilter,
 } from 'container/QueryBuilder/filters';
+import AggregateEveryFilter from 'container/QueryBuilder/filters/AggregateEveryFilter';
 import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { useQueryBuilder } from 'hooks/useQueryBuilder';
@@ -204,6 +205,17 @@ export const Query = memo(function Query({
 		[index, query, handleSetQueryData],
 	);
 
+	const handleChangeAggregateEvery = useCallback(
+		(value: number): void => {
+			const newQuery: IBuilderQueryForm = {
+				...query,
+				stepInterval: value,
+			};
+			handleSetQueryData(index, newQuery);
+		},
+		[index, query, handleSetQueryData],
+	);
+
 	return (
 		<StyledRow gutter={[0, 15]}>
 			<StyledDeleteEntity onClick={handleDeleteQuery} />
@@ -276,6 +288,17 @@ export const Query = memo(function Query({
 							</Col>
 						</Row>
 					)}
+					<Row gutter={[11, 5]}>
+						<Col span={10}>
+							<FilterLabel label="Aggregate Every" />
+						</Col>
+						<Col span={14}>
+							<AggregateEveryFilter
+								query={query}
+								onChange={handleChangeAggregateEvery}
+							/>
+						</Col>
+					</Row>
 				</AdditionalFiltersToggler>
 			</Col>
 			<Row style={{ width: '100%' }}>

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

@@ -0,0 +1,62 @@
+import { Input } from 'antd';
+import getStep from 'lib/getStep';
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { selectStyle } from '../QueryBuilderSearch/config';
+
+function AggregateEveryFilter({
+	onChange,
+	query,
+}: AggregateEveryFilterProps): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const stepInterval = useMemo(
+		() =>
+			getStep({
+				start: minTime,
+				end: maxTime,
+				inputFormat: 'ns',
+			}),
+		[maxTime, minTime],
+	);
+
+	const handleKeyDown = (event: {
+		keyCode: number;
+		which: number;
+		preventDefault: () => void;
+	}): void => {
+		const keyCode = event.keyCode || event.which;
+		const isBackspace = keyCode === 8;
+		const isNumeric =
+			(keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
+
+		if (!isNumeric && !isBackspace) {
+			event.preventDefault();
+		}
+	};
+
+	return (
+		<Input
+			type="text"
+			placeholder="Enter in seconds"
+			disabled={!query.aggregateAttribute.key}
+			style={selectStyle}
+			defaultValue={stepInterval ?? query.stepInterval}
+			onChange={(event): void => onChange(Number(event.target.value))}
+			onKeyDown={handleKeyDown}
+		/>
+	);
+}
+
+interface AggregateEveryFilterProps {
+	onChange: (values: number) => void;
+	query: IBuilderQueryForm;
+}
+
+export default AggregateEveryFilter;

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

@@ -35,7 +35,7 @@ function QueryBuilderSearch({ query }: QueryBuilderSearchProps): JSX.Element {
 		return (
 			<Tag closable={closable} onClose={onCloseHandler}>
 				<Tooltip title={value}>
-					<TypographyText ellipsis isInNin={isInNin}>
+					<TypographyText ellipsis $isInNin={isInNin}>
 						{value}
 					</TypographyText>
 				</Tooltip>

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts

@@ -2,8 +2,8 @@ import { CheckOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
 import styled from 'styled-components';
 
-export const TypographyText = styled(Typography.Text)<{ isInNin: boolean }>`
+export const TypographyText = styled(Typography.Text)<{ $isInNin: boolean }>`
-	width: ${({ isInNin }): string => (isInNin ? '10rem' : 'auto')};
+	width: ${({ $isInNin }): string => ($isInNin ? '10rem' : 'auto')};
 `;
 
 export const StyledCheckOutlined = styled(CheckOutlined)`