diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss index 02834330bfeb..a5caffe15da6 100644 --- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss +++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss @@ -183,7 +183,7 @@ flex-direction: column; gap: 8px; - margin-left: 32px; + margin-left: 26px; padding-bottom: 16px; padding-left: 8px; @@ -199,8 +199,8 @@ } .formula-container { - margin-left: 82px; - padding: 4px 0px; + padding: 8px; + margin-left: 74px; .ant-col { &::before { @@ -335,6 +335,12 @@ ); left: 15px; } + + &.has-trace-operator { + &::before { + height: 0px; + } + } } .formula-name { @@ -351,7 +357,7 @@ &::before { content: ''; - height: 65px; + height: 128px; content: ''; position: absolute; left: 0; diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx index 7a0886ac9c53..3f5ac217859e 100644 --- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx @@ -2,20 +2,15 @@ import './QueryBuilderV2.styles.scss'; import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder'; import { Formula } from 'container/QueryBuilder/components/Formula'; -import { - QueryBuilderProps, - TraceView, -} from 'container/QueryBuilder/QueryBuilder.interfaces'; +import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; -import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { memo, useEffect, useMemo, useRef } from 'react'; import { DataSource } from 'types/common/queryBuilder'; import { QueryBuilderV2Provider } from './QueryBuilderV2Context'; import QueryFooter from './QueryV2/QueryFooter/QueryFooter'; import { QueryV2 } from './QueryV2/QueryV2'; import TraceOperator from './QueryV2/TraceOperator/TraceOperator'; -import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup'; -import { ChartNoAxesGantt, DraftingCompass } from 'lucide-react'; import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData'; export const QueryBuilderV2 = memo(function QueryBuilderV2({ @@ -25,38 +20,20 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({ queryComponents, isListViewPanel = false, showOnlyWhereClause = false, - showTraceViewSelector = false, + showTraceOperator = false, version, - onChangeTraceView, }: QueryBuilderProps): JSX.Element { const { currentQuery, addNewBuilderQuery, addNewFormula, handleSetConfig, + addTraceOperator, panelType, initialDataSource, } = useQueryBuilder(); const containerRef = useRef(null); - const [selectedTraceView, setSelectedTraceView] = useState( - TraceView.SPANS, - ); - - const traceViewOptions: { label: string; value: TraceView }[] = useMemo(() => { - return [ - { - label: 'Spans', - value: TraceView.SPANS, - icon: , - }, - { - label: 'Traces', - value: TraceView.TRACES, - icon: , - }, - ]; - }, []); const currentDataSource = useMemo( () => @@ -124,62 +101,49 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({ listViewTracesFilterConfigs, ]); - const handleChangeTraceView = useCallback( - (value: TraceView) => { - setSelectedTraceView(value); - if ( - currentDataSource === DataSource.TRACES && - typeof onChangeTraceView === 'function' - ) { - onChangeTraceView(value); - } - }, - [onChangeTraceView, currentDataSource], - ); - - const shouldShowTraceOperator = useMemo(() => { - return ( - currentDataSource === DataSource.TRACES && - (!isListViewPanel ? selectedTraceView === TraceView.TRACES : true) - ); - }, [currentDataSource, isListViewPanel, selectedTraceView]); - - const shouldShowTraceViewSelector = useMemo(() => { - return currentDataSource === DataSource.TRACES && showTraceViewSelector; - }, [currentDataSource, showTraceViewSelector]); - - const showFormula = useMemo(() => { - if (currentDataSource === DataSource.TRACES) { - return !isListViewPanel && selectedTraceView === TraceView.SPANS; - } - - return true; - }, [isListViewPanel, selectedTraceView, currentDataSource]); - const traceOperator = useMemo((): IBuilderTraceOperator | undefined => { - if (currentQuery.builder.queryTraceOperator.length > 0) { - return currentQuery.builder.queryTraceOperator[0] || {}; + if ( + currentQuery.builder.queryTraceOperator && + currentQuery.builder.queryTraceOperator.length > 0 + ) { + return currentQuery.builder.queryTraceOperator[0]; } return undefined; }, [currentQuery.builder.queryTraceOperator]); + const shouldShowTraceOperator = useMemo(() => { + return ( + showTraceOperator && + currentDataSource === DataSource.TRACES && + Boolean(traceOperator) + ); + }, [currentDataSource, isListViewPanel, showTraceOperator, traceOperator]); + + const shouldShowFooter = useMemo(() => { + return ( + (!showOnlyWhereClause && !isListViewPanel) || + (currentDataSource === DataSource.TRACES && showTraceOperator) + ); + }, [ + isListViewPanel, + showTraceOperator, + showOnlyWhereClause, + currentDataSource, + ]); + + const showFormula = useMemo(() => { + if (currentDataSource === DataSource.TRACES) { + return !isListViewPanel; + } + + return true; + }, [isListViewPanel, currentDataSource]); + return (
- {shouldShowTraceViewSelector && ( -
- { - handleChangeTraceView(e.target.value); - }} - /> -
- )} - {isListViewPanel && currentDataSource !== DataSource.TRACES && ( )} - {((!showOnlyWhereClause && !isListViewPanel) || - shouldShowTraceOperator) && ( + {shouldShowFooter && ( )} diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx index 6a752b9ac3a8..28d9b3c4ca73 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx @@ -4,11 +4,15 @@ import { Plus, Sigma } from 'lucide-react'; export default function QueryFooter({ addNewBuilderQuery, addNewFormula, - showFormula = true, + addTraceOperator, + showAddFormula = true, + showAddTraceOperator = false, }: { addNewBuilderQuery: () => void; addNewFormula: () => void; - showFormula?: boolean; + addTraceOperator?: () => void; + showAddTraceOperator: boolean; + showAddFormula?: boolean; }): JSX.Element { return (
@@ -24,7 +28,7 @@ export default function QueryFooter({
- {showFormula && ( + {showAddFormula && (
)} + {showAddTraceOperator && ( +
+ + Add Trace Matching + + {' '} +
+ Learn more +
+
+ } + > + + +
+ )}
); diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx index 005f5f00e335..aa1bc7acd912 100644 --- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx @@ -114,6 +114,7 @@ export const QueryV2 = memo(function QueryV2({
)}
+ {true && ( + + + + )}
); } diff --git a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx index bd7142cc54ef..ff728b47b511 100644 --- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx +++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx @@ -39,6 +39,7 @@ interface QBEntityOptionsProps { showCloneOption?: boolean; isListViewPanel?: boolean; index?: number; + hasTraceOperator?: boolean; queryVariant?: 'dropdown' | 'static'; onChangeDataSource?: (value: DataSource) => void; } @@ -61,6 +62,7 @@ export default function QBEntityOptions({ onCloneQuery, index, queryVariant, + hasTraceOperator = false, onChangeDataSource, }: QBEntityOptionsProps): JSX.Element { const handleCloneEntity = (): void => { @@ -115,6 +117,7 @@ export default function QBEntityOptions({ className={cx( 'periscope-btn', entityType === 'query' ? 'query-name' : 'formula-name', + hasTraceOperator && 'has-trace-operator', isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '', )} > diff --git a/frontend/src/container/TracesExplorer/QuerySection/index.tsx b/frontend/src/container/TracesExplorer/QuerySection/index.tsx index 725f033afbc9..48d6bc813e8b 100644 --- a/frontend/src/container/TracesExplorer/QuerySection/index.tsx +++ b/frontend/src/container/TracesExplorer/QuerySection/index.tsx @@ -2,21 +2,12 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2'; import { PANEL_TYPES } from 'constants/queryBuilder'; import ExplorerOrderBy from 'container/ExplorerOrderBy'; import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces'; -import { - QueryBuilderProps, - TraceView, -} from 'container/QueryBuilder/QueryBuilder.interfaces'; +import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces'; import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam'; -import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { memo, useCallback, useMemo } from 'react'; import { DataSource } from 'types/common/queryBuilder'; -function QuerySection({ - onChangeTraceView = (): void => {}, -}: { - onChangeTraceView?: (view: TraceView) => void; -}): JSX.Element { - const { removeAllQueryBuilderEntities } = useQueryBuilder(); +function QuerySection(): JSX.Element { const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST); const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => { @@ -51,29 +42,10 @@ function QuerySection({ [panelTypes], ); - const handleChangeTraceView = useCallback( - (view: TraceView) => { - if (isListViewPanel) { - removeAllQueryBuilderEntities('queryFormulas'); - } else { - if (view === TraceView.SPANS) { - removeAllQueryBuilderEntities('queryTraceOperator'); - } else { - removeAllQueryBuilderEntities('queryFormulas'); - } - } - onChangeTraceView(view); - }, - [onChangeTraceView, isListViewPanel, removeAllQueryBuilderEntities], - ); - return (