/* eslint-disable sonarjs/cognitive-complexity */ import './Query.styles.scss'; import { Col, Input, Row } from 'antd'; // ** Constants import { PANEL_TYPES } from 'constants/queryBuilder'; import ROUTES from 'constants/routes'; // ** Components import { AdditionalFiltersToggler, DataSourceDropdown, FilterLabel, } from 'container/QueryBuilder/components'; import { AggregatorFilter, GroupByFilter, HavingFilter, OperatorsSelect, OrderByFilter, 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/queryBuilder/useQueryBuilder'; import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations'; // ** Hooks import { ChangeEvent, memo, ReactNode, useCallback, useMemo, useState, } from 'react'; import { useLocation } from 'react-use'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { transformToUpperCase } from 'utils/transformToUpperCase'; import QBEntityOptions from '../QBEntityOptions/QBEntityOptions'; // ** Types import { QueryProps } from './Query.interfaces'; export const Query = memo(function Query({ index, queryVariant, query, filterConfigs, queryComponents, isListViewPanel = false, }: QueryProps): JSX.Element { const { panelType, currentQuery } = useQueryBuilder(); const { pathname } = useLocation(); const [isCollapse, setIsCollapsed] = useState(false); const { operators, isMetricsDataSource, isTracePanelType, listOfAdditionalFilters, handleChangeAggregatorAttribute, handleChangeQueryData, handleChangeDataSource, handleChangeOperator, handleDeleteQuery, } = useQueryOperations({ index, query, filterConfigs, isListViewPanel }); const handleChangeAggregateEvery = useCallback( (value: IBuilderQuery['stepInterval']) => { handleChangeQueryData('stepInterval', value); }, [handleChangeQueryData], ); const handleChangeLimit = useCallback( (value: IBuilderQuery['limit']) => { handleChangeQueryData('limit', value); }, [handleChangeQueryData], ); const handleChangeHavingFilter = useCallback( (value: IBuilderQuery['having']) => { handleChangeQueryData('having', value); }, [handleChangeQueryData], ); const handleChangeOrderByKeys = useCallback( (value: IBuilderQuery['orderBy']) => { handleChangeQueryData('orderBy', value); }, [handleChangeQueryData], ); const handleToggleDisableQuery = useCallback(() => { handleChangeQueryData('disabled', !query.disabled); }, [handleChangeQueryData, query]); const handleChangeTagFilters = useCallback( (value: IBuilderQuery['filters']) => { handleChangeQueryData('filters', value); }, [handleChangeQueryData], ); const handleChangeReduceTo = useCallback( (value: IBuilderQuery['reduceTo']) => { handleChangeQueryData('reduceTo', value); }, [handleChangeQueryData], ); const handleChangeGroupByKeys = useCallback( (value: IBuilderQuery['groupBy']) => { handleChangeQueryData('groupBy', value); }, [handleChangeQueryData], ); const handleChangeQueryLegend = useCallback( (event: ChangeEvent) => { handleChangeQueryData('legend', event.target.value); }, [handleChangeQueryData], ); const handleToggleCollapsQuery = (): void => { setIsCollapsed(!isCollapse); }; const renderOrderByFilter = useCallback((): ReactNode => { if (queryComponents?.renderOrderBy) { return queryComponents.renderOrderBy({ query, onChange: handleChangeOrderByKeys, }); } return ( ); }, [queryComponents, query, handleChangeOrderByKeys, isListViewPanel]); const renderAggregateEveryFilter = useCallback( (): JSX.Element | null => !filterConfigs?.stepInterval?.isHidden ? ( ) : null, [ filterConfigs?.stepInterval?.isHidden, filterConfigs?.stepInterval?.isDisabled, query, handleChangeAggregateEvery, ], ); const isExplorerPage = useMemo( () => pathname === ROUTES.LOGS_EXPLORER || pathname === ROUTES.TRACES_EXPLORER, [pathname], ); const renderAdditionalFilters = useCallback((): ReactNode => { switch (panelType) { case PANEL_TYPES.TIME_SERIES: { return ( <> {renderOrderByFilter()} {renderAggregateEveryFilter()} ); } case PANEL_TYPES.VALUE: { return ( <> {renderAggregateEveryFilter()} ); } default: { return ( <> {!filterConfigs?.limit?.isHidden && ( )} {!filterConfigs?.having?.isHidden && ( )} {renderOrderByFilter()} {renderAggregateEveryFilter()} ); } } }, [ panelType, query, filterConfigs?.limit?.isHidden, filterConfigs?.having?.isHidden, handleChangeLimit, handleChangeHavingFilter, renderOrderByFilter, renderAggregateEveryFilter, ]); return ( 1} isListViewPanel={isListViewPanel} /> {!isCollapse && ( {!isExplorerPage && ( {queryVariant === 'dropdown' ? ( ) : ( )} )} {isMetricsDataSource && ( )} {isMetricsDataSource && ( )} {!isMetricsDataSource && !isListViewPanel && ( )} {!isListViewPanel && ( {panelType === PANEL_TYPES.VALUE ? ( ) : ( )} )} {!isTracePanelType && !isListViewPanel && ( {renderAdditionalFilters()} )} {isListViewPanel && ( {renderAdditionalFilters()} )} {panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && ( )} )} ); });