From 5042c56b4cf18598b3a92463495f85779ec70673 Mon Sep 17 00:00:00 2001 From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com> Date: Fri, 7 Jul 2023 15:49:35 +0300 Subject: [PATCH] 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 --- .../LogExplorerQuerySection/index.tsx | 51 +++++++++++++++++++ .../LeftContainer/QuerySection/index.tsx | 15 +++++- .../QueryBuilder/QueryBuilder.interfaces.ts | 4 +- .../container/QueryBuilder/QueryBuilder.tsx | 4 +- .../components/Query/Query.interfaces.ts | 2 +- .../QueryBuilder/components/Query/Query.tsx | 14 +++-- .../filters/AggregateEveryFilter/index.tsx | 5 +- .../TracesExplorer/QuerySection/index.tsx | 12 ++++- .../hooks/queryBuilder/useQueryOperations.ts | 6 +-- frontend/src/pages/LogsExplorer/index.tsx | 51 ++----------------- frontend/src/types/common/operations.types.ts | 2 +- 11 files changed, 103 insertions(+), 63 deletions(-) create mode 100644 frontend/src/container/LogExplorerQuerySection/index.tsx diff --git a/frontend/src/container/LogExplorerQuerySection/index.tsx b/frontend/src/container/LogExplorerQuerySection/index.tsx new file mode 100644 index 0000000000..7f4983d27c --- /dev/null +++ b/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 ( + + + + } + /> + ); +} + +export default memo(LogExplorerQuerySection); diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx index e99484af0d..51501c8b39 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx +++ b/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: Query Builder, - children: , + children: ( + + ), }, { key: EQueryType.CLICKHOUSE, diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts index 6135e0b670..f14dfee184 100644 --- a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts +++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts @@ -14,5 +14,7 @@ export type QueryBuilderProps = { config?: QueryBuilderConfig; panelType: ITEMS; actions?: ReactNode; - inactiveFilters?: Partial>; + filterConfigs?: Partial< + Record + >; }; diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/QueryBuilder/QueryBuilder.tsx index 125440fb2a..aa3cbae646 100644 --- a/frontend/src/container/QueryBuilder/QueryBuilder.tsx +++ b/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} /> ))} diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts b/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts index 8cee2d9dad..a2b6a55787 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts +++ b/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts @@ -6,4 +6,4 @@ export type QueryProps = { isAvailableToDisable: boolean; query: IBuilderQuery; queryVariant: 'static' | 'dropdown'; -} & Pick; +} & Pick; diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx index dd42404c6d..2eba663e34 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx +++ b/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 ? ( @@ -120,12 +120,18 @@ export const Query = memo(function Query({ ) : null, - [inactiveFilters?.stepInterval, query, handleChangeAggregateEvery], + [ + filterConfigs?.stepInterval?.isHidden, + filterConfigs?.stepInterval?.isDisabled, + query, + handleChangeAggregateEvery, + ], ); const renderAdditionalFilters = useCallback((): ReactNode => { diff --git a/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx b/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx index c68dad2cff..658987fd35 100644 --- a/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx +++ b/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 ( void; query: IBuilderQuery; + disabled: boolean; } export default AggregateEveryFilter; diff --git a/frontend/src/container/TracesExplorer/QuerySection/index.tsx b/frontend/src/container/TracesExplorer/QuerySection/index.tsx index dbb922c139..177311dae0 100644 --- a/frontend/src/container/TracesExplorer/QuerySection/index.tsx +++ b/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 ( - - } - /> + diff --git a/frontend/src/types/common/operations.types.ts b/frontend/src/types/common/operations.types.ts index 2664d95ae7..00ca569126 100644 --- a/frontend/src/types/common/operations.types.ts +++ b/frontend/src/types/common/operations.types.ts @@ -7,7 +7,7 @@ import { DataSource } from 'types/common/queryBuilder'; import { SelectOption } from './select'; type UseQueryOperationsParams = Pick & - Pick; + Pick; export type HandleChangeQueryData = < Key extends keyof IBuilderQuery,