feat: create separate containers for traces, logs and metrics qbs

frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss

@@ -0,0 +1,5 @@
+.logs-qb {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}

frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx

@@ -0,0 +1,20 @@
+import './LogsQB.styles.scss';
+
+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';
+
+function LogsQB({ query }: { query: IBuilderQuery }): JSX.Element {
+	return (
+		<div className="logs-qb">
+			<QuerySearch />
+			<QueryAggregation source={DataSource.LOGS} />
+			<QueryAddOns query={query} version="v3" isListViewPanel={false} />
+		</div>
+	);
+}
+
+export default LogsQB;

frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.styles.scss

@@ -0,0 +1,5 @@
+.metrics-qb {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}

frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.tsx

@@ -0,0 +1,21 @@
+import './MetricsQB.styles.scss';
+
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import QueryAddOns from '../QueryAddOns/QueryAddOns';
+import QuerySearch from '../QuerySearch/QuerySearch';
+import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
+import { MetricsSelect } from './MetricsSelect/MetricsSelect';
+
+function MetricsQB({ query }: { query: IBuilderQuery }): JSX.Element {
+	return (
+		<div className="metrics-qb">
+			<MetricsSelect query={query} index={0} version="v4" />
+			<QuerySearch />
+			<MetricsAggregateSection query={query} index={0} version="v4" />
+			<QueryAddOns query={query} version="v3" isListViewPanel={false} />
+		</div>
+	);
+}
+
+export default MetricsQB;

frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss

@@ -0,0 +1,64 @@
+.add-ons-list {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.add-ons-tabs {
+		display: flex;
+
+		.add-on-tab-title {
+			display: flex;
+			gap: var(--margin-2);
+			align-items: center;
+			justify-content: center;
+			font-size: var(--font-size-xs);
+			font-style: normal;
+			font-weight: var(--font-weight-normal);
+		}
+
+		.tab {
+			border: 1px solid var(--bg-slate-400);
+			min-width: 114px;
+			height: 36px;
+			line-height: 36px;
+		}
+
+		.tab::before {
+			background: var(--bg-slate-400);
+		}
+
+		.selected_view {
+			color: var(--text-robin-500);
+			border: 1px solid var(--bg-slate-400);
+
+			display: none;
+		}
+
+		.selected_view::before {
+			background: var(--bg-slate-400);
+		}
+	}
+
+	.compass-button {
+		width: 30px;
+		height: 30px;
+
+		border-radius: 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+}
+
+.selected-add-ons-content {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 8px;
+	padding-bottom: 8px;
+
+	.add-on-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+}

frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx

@@ -1,3 +1,5 @@
+import './QueryAddOns.styles.scss';
+
 import { Button, Radio, RadioChangeEvent } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';

frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.styles.scss

@@ -182,7 +182,7 @@
 		height: 38px;
 		width: 38px;
 
-		border-left: none;
+		border-left: transparent;
 		border-top-left-radius: 0px;
 		border-bottom-left-radius: 0px;
 	}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -15,67 +15,4 @@
 	border: 1px solid var(--bg-slate-400);
 	border-right: none;
 	border-left: none;
-
-	.add-ons-list {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.add-ons-tabs {
-			display: flex;
-
-			.add-on-tab-title {
-				display: flex;
-				gap: var(--margin-2);
-				align-items: center;
-				justify-content: center;
-				font-size: var(--font-size-xs);
-				font-style: normal;
-				font-weight: var(--font-weight-normal);
-			}
-
-			.tab {
-				border: 1px solid var(--bg-slate-400);
-				min-width: 114px;
-				height: 36px;
-				line-height: 36px;
-			}
-
-			.tab::before {
-				background: var(--bg-slate-400);
-			}
-
-			.selected_view {
-				color: var(--text-robin-500);
-				border: 1px solid var(--bg-slate-400);
-			}
-
-			.selected_view::before {
-				background: var(--bg-slate-400);
-			}
-		}
-
-		.compass-button {
-			width: 30px;
-			height: 30px;
-
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	.selected-add-ons-content {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 4px;
-		padding-bottom: 4px;
-
-		.add-on-content {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-		}
-	}
 }

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -3,12 +3,10 @@ import './QueryBuilderV2.styles.scss';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import MetricsAggregateSection from './Metrics/MerticsAggregateSection/MetricsAggregateSection';
+import LogsQB from './Logs/LogsQB';
-import { MetricsSelect } from './Metrics/MetricsSelect/MetricsSelect';
+import MetricsQB from './Metrics/MetricsQB';
-import QueryAddOns from './QueryAddOns/QueryAddOns';
-import QueryAggregation from './QueryAggregation/QueryAggregation';
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
-import QuerySearch from './QuerySearch/QuerySearch';
+import TracesQB from './Traces/TracesQB';
 
 type QueryBuilderV2Props = {
 	source: DataSource;
@@ -19,23 +17,15 @@ function QueryBuilderV2Main({
 	source,
 	query,
 }: QueryBuilderV2Props): JSX.Element {
-	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
+	const isMetricsDataSource = source === DataSource.METRICS;
+	const isLogsDataSource = source === DataSource.LOGS;
+	const isTracesDataSource = source === DataSource.TRACES;
 
 	return (
 		<div className="query-builder-v2">
-			{isMetricsDataSource && (
+			{isMetricsDataSource ? <MetricsQB query={query} /> : null}
-				<MetricsSelect query={query} index={0} version="v4" />
+			{isLogsDataSource ? <LogsQB query={query} /> : null}
-			)}
+			{isTracesDataSource ? <TracesQB query={query} /> : null}
-
-			<QuerySearch />
-
-			{isMetricsDataSource ? (
-				<MetricsAggregateSection query={query} index={0} version="v4" />
-			) : (
-				<QueryAggregation source={source} />
-			)}
-
-			<QueryAddOns query={query} version="v3" isListViewPanel={false} />
 		</div>
 	);
 }

frontend/src/components/QueryBuilderV2/Traces/TracesQB.styles.scss

@@ -0,0 +1,28 @@
+.traces-qb {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	.traces-search-filter-container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+
+		.ant-select {
+			height: auto;
+		}
+
+		.ant-select-selector {
+			border-radius: 2px;
+			border: 1px solid var(--Slate-400, #1d212d) !important;
+			background: var(--Ink-300, #16181d) !important;
+			height: 34px !important;
+			box-sizing: border-box !important;
+		}
+
+		.ant-select-arrow {
+			color: var(--bg-vanilla-400) !important;
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/Traces/TracesQB.tsx

@@ -0,0 +1,25 @@
+import './TracesQB.styles.scss';
+
+import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
+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';
+
+function TracesQB({ query }: { query: IBuilderQuery }): JSX.Element {
+	return (
+		<div className="traces-qb">
+			<div className="traces-search-filter-container">
+				<QuerySearch />
+				<div className="traces-search-filter-in">in</div>
+				<SpanScopeSelector queryName={query.queryName} />
+			</div>
+			<QueryAggregation source={DataSource.TRACES} />
+			<QueryAddOns query={query} version="v3" isListViewPanel={false} />
+		</div>
+	);
+}
+
+export default TracesQB;

frontend/src/pages/TracesExplorer/index.tsx

@@ -6,6 +6,7 @@ import { Button, Card, Tabs, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
+import QueryBuilderV2 from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -18,6 +19,8 @@ import RightToolbarActions from 'container/QueryBuilder/components/ToolbarAction
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { defaultSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import QuerySection from 'container/TracesExplorer/QuerySection';
+import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -226,7 +229,11 @@ function TracesExplorer(): JSX.Element {
 						</div>
 					</div>
 					<ExplorerCard sourcepage={DataSource.TRACES}>
-						<QuerySection />
+						{/* <QuerySection /> */}
+						<QueryBuilderV2
+							source={DataSource.TRACES}
+							query={currentQuery.builder.queryData[0]}
+						/>
 					</ExplorerCard>
 
 					<Container className="traces-explorer-views">