diff --git a/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss index 5c05c38476b2..cbfe3e8d28b6 100644 --- a/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss +++ b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss @@ -1,5 +1,5 @@ .logs-qb { display: flex; - flex-direction: column; + flex-direction: row; gap: 8px; } diff --git a/frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx index fb07e87e59f4..ff42033a5a7a 100644 --- a/frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx +++ b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx @@ -1,20 +1,171 @@ import './LogsQB.styles.scss'; +import { Button, Dropdown } from 'antd'; +import { ENTITY_VERSION_V4 } from 'constants/app'; +import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions'; +import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces'; +import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; +import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations'; +import { Copy, Ellipsis, Plus, Sigma, Trash } from 'lucide-react'; +import { memo, useCallback, useState } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; import QueryAddOns from '../QueryAddOns/QueryAddOns'; import QueryAggregation from '../QueryAggregation/QueryAggregation'; import QuerySearch from '../QuerySearch/QuerySearch'; +import { Formula } from 'container/QueryBuilder/components/Formula/Formula'; + +export const LogsQB = memo(function LogsQB({ + query, + filterConfigs, +}: { + query: IBuilderQuery; + filterConfigs: QueryBuilderProps['filterConfigs']; +}): JSX.Element { + const showFunctions = query?.functions?.length > 0; + const version = ENTITY_VERSION_V4; + + const { + currentQuery, + cloneQuery, + addNewFormula, + addNewBuilderQuery, + } = useQueryBuilder(); + + const [isCollapsed, setIsCollapsed] = useState(false); + + console.log('isCollapsed', isCollapsed); + + const isListViewPanel = false; + const index = 0; + + const { + isMetricsDataSource, + handleChangeQueryData, + handleDeleteQuery, + handleQueryFunctionsUpdates, + } = useQueryOperations({ + index, + query, + filterConfigs, + isListViewPanel, + entityVersion: version, + }); + + const handleToggleDisableQuery = useCallback(() => { + handleChangeQueryData('disabled', !query.disabled); + }, [handleChangeQueryData, query]); + + const handleToggleCollapsQuery = (): void => { + setIsCollapsed(!isCollapsed); + }; -function LogsQB({ query }: { query: IBuilderQuery }): JSX.Element { return (
- - - +
+
+
+
+
+ 1} + isListViewPanel={isListViewPanel} + index={index} + /> +
+ + , + }, + { + label: 'Delete', + key: 'delete-query', + icon: , + }, + ], + }} + placement="bottomRight" + > + + +
+
+ +
+ + + +
+
+ +
+ {currentQuery.builder.queryFormulas.map((formula, index) => { + const query = + currentQuery.builder.queryData[index] || + currentQuery.builder.queryData[0]; + + return ( +
+ +
+ ); + })} +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
); -} - -export default LogsQB; +}); diff --git a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss b/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss index 85846c1e8df5..0e7ac0f57223 100644 --- a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss +++ b/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss @@ -14,13 +14,20 @@ font-size: var(--font-size-xs); font-style: normal; font-weight: var(--font-weight-normal); + + color: var(--Vanilla-400, #c0c1c3); } .tab { border: 1px solid var(--bg-slate-400); + border-left: none; min-width: 114px; height: 36px; line-height: 36px; + + &:first-child { + border-left: 1px solid var(--bg-slate-400); + } } .tab::before { diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss index a428abb8b045..ddf40b3ce0ce 100644 --- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss +++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss @@ -7,7 +7,6 @@ height: 100%; display: flex; flex-direction: column; - padding: 8px; gap: 4px; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; @@ -15,4 +14,279 @@ border: 1px solid var(--bg-slate-400); border-right: none; border-left: none; + + .qb-content-container { + display: flex; + flex-direction: column; + + flex: 1; + + position: relative; + } + + .qb-content-section { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px; + + flex: 1; + + .qb-header-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + margin-left: 32px; + + .query-actions-container { + display: flex; + flex-direction: row; + gap: 8px; + justify-content: space-between; + align-items: center; + width: 100%; + } + } + + .qb-elements-container { + display: flex; + flex-direction: column; + gap: 8px; + + margin-left: 108px; + + .code-mirror-where-clause, + .query-aggregation-container, + .query-add-ons { + position: relative; + + &::before { + content: ''; + position: absolute; + left: -10px; + top: 12px; + width: 6px; + height: 6px; + border-left: 6px dotted #1d212d; + } + + /* Horizontal line pointing from vertical to the item */ + &::after { + content: ''; + position: absolute; + left: -28px; + top: 15px; + width: 24px; + height: 1px; + background: repeating-linear-gradient( + to right, + #1d212d, + #1d212d 4px, + transparent 4px, + transparent 8px + ); + } + } + } + } + + .query-names-section { + display: flex; + flex-direction: column; + gap: 8px; + + width: 44px; + padding-left: 8px; + + border-left: 1px solid var(--bg-slate-400); + } + + .qb-formulas-container { + display: flex; + flex-direction: column; + gap: 8px; + + margin-left: 32px; + padding-bottom: 16px; + + .qb-formula { + .ant-row { + row-gap: 0px !important; + } + + .qb-entity-options { + margin-left: 8px; + + padding-right: 8px; + } + + .formula-container { + margin-left: 82px; + padding: 4px 0px; + + .ant-col { + &::before { + content: ''; + position: absolute; + left: -10px; + top: 12px; + width: 6px; + height: 6px; + border-left: 6px dotted #1d212d; + } + + /* Horizontal line pointing from vertical to the item */ + &::after { + content: ''; + position: absolute; + left: -28px; + top: 15px; + width: 24px; + height: 1px; + background: repeating-linear-gradient( + to right, + #1d212d, + #1d212d 4px, + transparent 4px, + transparent 8px + ); + } + } + + .formula-expression { + border-bottom-left-radius: 0px !important; + border-bottom-right-radius: 0px !important; + + resize: none; + } + + .formula-legend { + border-top-left-radius: 0px !important; + border-top-right-radius: 0px !important; + + .ant-input-group-addon { + border-top-left-radius: 0px !important; + border-top-right-radius: 0px !important; + } + + .ant-input { + border-top-left-radius: 0px !important; + border-top-right-radius: 0px !important; + } + } + } + } + } + + .qb-footer { + padding: 0 8px 16px 8px; + + .qb-footer-container { + display: flex; + flex-direction: row; + gap: 8px; + + margin-left: 32px; + + .qb-add-new-query { + display: flex; + flex-direction: row; + gap: 8px; + + &::before { + content: ''; + height: calc(100% - 82px); + content: ''; + position: absolute; + left: 56px; + top: 31px; + bottom: 0; + width: 1px; + background: repeating-linear-gradient( + to bottom, + #1d212d, + #1d212d 4px, + transparent 4px, + transparent 8px + ); + } + } + } + } + + .qb-entity-options { + display: flex; + flex-direction: row; + gap: 8px; + + .options { + .query-name.sync-btn { + border-radius: 0px 2px 2px 0px !important; + border: 1px solid rgba(242, 71, 105, 0.2) !important; + background: rgba(242, 71, 105, 0.1) !important; + + color: var(--Sakura-400, #f56c87) !important; + font-family: 'Space Mono'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + text-transform: uppercase; + + &::before { + content: ''; + height: 120px; + content: ''; + position: absolute; + left: 0; + top: 31px; + bottom: 0; + width: 1px; + background: repeating-linear-gradient( + to bottom, + #1d212d, + #1d212d 4px, + transparent 4px, + transparent 8px + ); + left: 15px; + } + } + + .formula-name { + border-radius: 0px 2px 2px 0px !important; + border: 1px solid rgba(242, 71, 105, 0.2) !important; + background: rgba(242, 71, 105, 0.1) !important; + + color: var(--Sakura-400, #f56c87) !important; + font-family: 'Space Mono'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 128.571% */ + text-transform: uppercase; + + &::before { + content: ''; + height: 80px; + content: ''; + position: absolute; + left: 0; + top: 31px; + bottom: 0; + width: 1px; + background: repeating-linear-gradient( + to bottom, + #1d212d, + #1d212d 4px, + transparent 4px, + transparent 8px + ); + left: 15px; + } + } + } + } } diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx index 17b0e4bfe140..21020f61db78 100644 --- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx +++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx @@ -1,9 +1,12 @@ import './QueryBuilderV2.styles.scss'; +import { OPERATORS } from 'constants/queryBuilder'; +import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces'; +import { useMemo } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; -import LogsQB from './Logs/LogsQB'; +import { LogsQB } from './Logs/LogsQB'; import MetricsQB from './Metrics/MetricsQB'; import { QueryBuilderV2Provider } from './QueryBuilderV2Context'; import TracesQB from './Traces/TracesQB'; @@ -21,10 +24,46 @@ function QueryBuilderV2Main({ const isLogsDataSource = source === DataSource.LOGS; const isTracesDataSource = source === DataSource.TRACES; + const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => { + const config: QueryBuilderProps['filterConfigs'] = { + stepInterval: { isHidden: true, isDisabled: true }, + having: { isHidden: true, isDisabled: true }, + filters: { + customKey: 'body', + customOp: OPERATORS.CONTAINS, + }, + }; + + return config; + }, []); + + const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => { + const config: QueryBuilderProps['filterConfigs'] = { + stepInterval: { isHidden: true, isDisabled: true }, + having: { isHidden: true, isDisabled: true }, + limit: { isHidden: true, isDisabled: true }, + filters: { + customKey: 'body', + customOp: OPERATORS.CONTAINS, + }, + }; + + return config; + }, []); + return (
{isMetricsDataSource ? : null} - {isLogsDataSource ? : null} + {isLogsDataSource ? ( + + ) : null} {isTracesDataSource ? : null}
); diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx index b6f9ebf89467..ff57d320ee6e 100644 --- a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx +++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx @@ -161,6 +161,7 @@ export function Formula({ : } - + {/* {entityType === 'query' && ( - )} + )} */}