fix: disable step interval for all views (#3070)

* fix: disable step interval for all views

* fix: disable interval for dashboard

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/src/container/LogExplorerQuerySection/index.tsx

@@ -0,0 +1,51 @@
+import { Button } from 'antd';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilder } from 'container/QueryBuilder';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
+import { ButtonWrapperStyled } from 'pages/LogsExplorer/styles';
+import { prepareQueryWithDefaultTimestamp } from 'pages/LogsExplorer/utils';
+import { memo, useMemo } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+function LogExplorerQuerySection(): JSX.Element {
+	const { handleRunQuery, updateAllQueriesOperators } = useQueryBuilder();
+	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const defaultValue = useMemo(() => {
+		const updatedQuery = updateAllQueriesOperators(
+			initialQueriesMap.logs,
+			PANEL_TYPES.LIST,
+			DataSource.LOGS,
+		);
+		return prepareQueryWithDefaultTimestamp(updatedQuery);
+	}, [updateAllQueriesOperators]);
+
+	useShareBuilderUrl(defaultValue);
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isTable = panelTypes === PANEL_TYPES.TABLE;
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: isTable, isDisabled: true },
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	return (
+		<QueryBuilder
+			panelType={panelTypes}
+			config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
+			filterConfigs={filterConfigs}
+			actions={
+				<ButtonWrapperStyled>
+					<Button type="primary" onClick={handleRunQuery}>
+						Run Query
+					</Button>
+				</ButtonWrapperStyled>
+			}
+		/>
+	);
+}
+
+export default memo(LogExplorerQuerySection);

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -3,12 +3,13 @@ import TextToolTip from 'components/TextToolTip';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
 import { WidgetGraphProps } from 'container/NewWidget/types';
 import { QueryBuilder } from 'container/QueryBuilder';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -101,12 +102,22 @@ function QuerySection({
 		handleStageQuery(currentQuery);
 	};
 
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: false, isDisabled: true },
+		};
+
+		return config;
+	}, []);
+
 	const items = [
 		{
 			key: EQueryType.QUERY_BUILDER,
 			label: 'Query Builder',
 			tab: <Typography>Query Builder</Typography>,
-			children: <QueryBuilder panelType={selectedGraph} />,
+			children: (
+				<QueryBuilder panelType={selectedGraph} filterConfigs={filterConfigs} />
+			),
 		},
 		{
 			key: EQueryType.CLICKHOUSE,

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

@@ -14,5 +14,7 @@ export type QueryBuilderProps = {
 	config?: QueryBuilderConfig;
 	panelType: ITEMS;
 	actions?: ReactNode;
-	inactiveFilters?: Partial<Record<keyof IBuilderQuery, boolean>>;
+	filterConfigs?: Partial<
+		Record<keyof IBuilderQuery, { isHidden: boolean; isDisabled: boolean }>
+	>;
 };

frontend/src/container/QueryBuilder/QueryBuilder.tsx

@@ -15,7 +15,7 @@ export const QueryBuilder = memo(function QueryBuilder({
 	config,
 	panelType: newPanelType,
 	actions,
-	inactiveFilters = {},
+	filterConfigs = {},
 }: QueryBuilderProps): JSX.Element {
 	const {
 		currentQuery,
@@ -73,7 +73,7 @@ export const QueryBuilder = memo(function QueryBuilder({
 								isAvailableToDisable={isAvailableToDisableQuery}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								query={query}
-								inactiveFilters={inactiveFilters}
+								filterConfigs={filterConfigs}
 							/>
 						</Col>
 					))}

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

@@ -6,4 +6,4 @@ export type QueryProps = {
 	isAvailableToDisable: boolean;
 	query: IBuilderQuery;
 	queryVariant: 'static' | 'dropdown';
-} & Pick<QueryBuilderProps, 'inactiveFilters'>;
+} & Pick<QueryBuilderProps, 'filterConfigs'>;

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

@@ -35,7 +35,7 @@ export const Query = memo(function Query({
 	isAvailableToDisable,
 	queryVariant,
 	query,
-	inactiveFilters,
+	filterConfigs,
 }: QueryProps): JSX.Element {
 	const { panelType } = useQueryBuilder();
 	const {
@@ -48,7 +48,7 @@ export const Query = memo(function Query({
 		handleChangeQueryData,
 		handleChangeOperator,
 		handleDeleteQuery,
-	} = useQueryOperations({ index, query, inactiveFilters });
+	} = useQueryOperations({ index, query, filterConfigs });
 
 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
@@ -112,7 +112,7 @@ export const Query = memo(function Query({
 
 	const renderAggregateEveryFilter = useCallback(
 		(): JSX.Element | null =>
-			!inactiveFilters?.stepInterval ? (
+			!filterConfigs?.stepInterval?.isHidden ? (
 				<Row gutter={[11, 5]}>
 					<Col flex="5.93rem">
 						<FilterLabel label="Aggregate Every" />
@@ -120,12 +120,18 @@ export const Query = memo(function Query({
 					<Col flex="1 1 6rem">
 						<AggregateEveryFilter
 							query={query}
+							disabled={filterConfigs?.stepInterval?.isDisabled || false}
 							onChange={handleChangeAggregateEvery}
 						/>
 					</Col>
 				</Row>
 			) : null,
-		[inactiveFilters?.stepInterval, query, handleChangeAggregateEvery],
+		[
+			filterConfigs?.stepInterval?.isHidden,
+			filterConfigs?.stepInterval?.isDisabled,
+			query,
+			handleChangeAggregateEvery,
+		],
 	);
 
 	const renderAdditionalFilters = useCallback((): ReactNode => {

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

@@ -8,6 +8,7 @@ import { selectStyle } from '../QueryBuilderSearch/config';
 function AggregateEveryFilter({
 	onChange,
 	query,
+	disabled,
 }: AggregateEveryFilterProps): JSX.Element {
 	const isMetricsDataSource = useMemo(
 		() => query.dataSource === DataSource.METRICS,
@@ -20,7 +21,8 @@ function AggregateEveryFilter({
 		}
 	};
 
-	const isDisabled = isMetricsDataSource && !query.aggregateAttribute.key;
+	const isDisabled =
+		(isMetricsDataSource && !query.aggregateAttribute.key) || disabled;
 
 	return (
 		<InputNumber
@@ -37,6 +39,7 @@ function AggregateEveryFilter({
 interface AggregateEveryFilterProps {
 	onChange: (values: number) => void;
 	query: IBuilderQuery;
+	disabled: boolean;
 }
 
 export default AggregateEveryFilter;

frontend/src/container/TracesExplorer/QuerySection/index.tsx

@@ -1,9 +1,10 @@
 import { Button } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QueryBuilder } from 'container/QueryBuilder';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { ButtonWrapper, Container } from './styles';
@@ -13,6 +14,14 @@ function QuerySection(): JSX.Element {
 
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: false, isDisabled: true },
+		};
+
+		return config;
+	}, []);
+
 	return (
 		<Container>
 			<QueryBuilder
@@ -21,6 +30,7 @@ function QuerySection(): JSX.Element {
 					queryVariant: 'static',
 					initialDataSource: DataSource.TRACES,
 				}}
+				filterConfigs={filterConfigs}
 				actions={
 					<ButtonWrapper>
 						<Button onClick={handleRunQuery} type="primary">

frontend/src/hooks/queryBuilder/useQueryOperations.ts

@@ -20,7 +20,7 @@ import { SelectOption } from 'types/common/select';
 export const useQueryOperations: UseQueryOperations = ({
 	query,
 	index,
-	inactiveFilters,
+	filterConfigs,
 }) => {
 	const {
 		handleSetQueryData,
@@ -64,7 +64,7 @@ export const useQueryOperations: UseQueryOperations = ({
 		(dataSource: DataSource): string[] => {
 			const result: string[] = mapOfFilters[dataSource].reduce<string[]>(
 				(acc, item) => {
-					if (inactiveFilters && inactiveFilters[item.field]) {
+					if (filterConfigs && filterConfigs[item.field]?.isHidden) {
 						return acc;
 					}
 
@@ -78,7 +78,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			return result;
 		},
 
-		[inactiveFilters],
+		[filterConfigs],
 	);
 
 	const handleChangeAggregatorAttribute = useCallback(

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,59 +1,16 @@
-import { Button, Col, Row } from 'antd';
+import { Col, Row } from 'antd';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViews from 'container/LogsExplorerViews';
-import { QueryBuilder } from 'container/QueryBuilder';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { useMemo } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
 
 // ** Styles
-import { ButtonWrapperStyled, WrapperStyled } from './styles';
+import { WrapperStyled } from './styles';
-import { prepareQueryWithDefaultTimestamp } from './utils';
 
 function LogsExplorer(): JSX.Element {
-	const { handleRunQuery, updateAllQueriesOperators } = useQueryBuilder();
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
-
-	const defaultValue = useMemo(() => {
-		const updatedQuery = updateAllQueriesOperators(
-			initialQueriesMap.logs,
-			PANEL_TYPES.LIST,
-			DataSource.LOGS,
-		);
-		return prepareQueryWithDefaultTimestamp(updatedQuery);
-	}, [updateAllQueriesOperators]);
-
-	useShareBuilderUrl(defaultValue);
-
-	const inactiveLogsFilters: QueryBuilderProps['inactiveFilters'] = useMemo(() => {
-		if (panelTypes === PANEL_TYPES.TABLE) {
-			const result: QueryBuilderProps['inactiveFilters'] = { stepInterval: true };
-
-			return result;
-		}
-
-		return {};
-	}, [panelTypes]);
-
 	return (
 		<WrapperStyled>
 			<Row gutter={[0, 28]}>
 				<Col xs={24}>
-					<QueryBuilder
+					<LogExplorerQuerySection />
-						panelType={panelTypes}
-						config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
-						inactiveFilters={inactiveLogsFilters}
-						actions={
-							<ButtonWrapperStyled>
-								<Button type="primary" onClick={handleRunQuery}>
-									Run Query
-								</Button>
-							</ButtonWrapperStyled>
-						}
-					/>
 				</Col>
 				<Col xs={24}>
 					<LogsExplorerViews />

frontend/src/types/common/operations.types.ts

@@ -7,7 +7,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from './select';
 
 type UseQueryOperationsParams = Pick<QueryProps, 'index' | 'query'> &
-	Pick<QueryBuilderProps, 'inactiveFilters'>;
+	Pick<QueryBuilderProps, 'filterConfigs'>;
 
 export type HandleChangeQueryData = <
 	Key extends keyof IBuilderQuery,