diff --git a/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss
new file mode 100644
index 000000000000..5c05c38476b2
--- /dev/null
+++ b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss
@@ -0,0 +1,5 @@
+.logs-qb {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
diff --git a/frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx b/frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx
new file mode 100644
index 000000000000..fb07e87e59f4
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+}
+
+export default LogsQB;
diff --git a/frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.styles.scss b/frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.styles.scss
new file mode 100644
index 000000000000..160f1997762b
--- /dev/null
+++ b/frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.styles.scss
@@ -0,0 +1,5 @@
+.metrics-qb {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
diff --git a/frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.tsx b/frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.tsx
new file mode 100644
index 000000000000..6ba75f91737f
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+}
+
+export default MetricsQB;
diff --git a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss b/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss
new file mode 100644
index 000000000000..14825281654f
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx b/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx
index 983f5dcc55be..bc887265d802 100644
--- a/frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx
+++ b/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';
diff --git a/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.styles.scss b/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.styles.scss
index 9e9d389d6442..9d6ba78e456c 100644
--- a/frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.styles.scss
+++ b/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;
}
diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
index d18743718732..a428abb8b045 100644
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/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;
- }
- }
}
diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
index 7fa64fa20a3b..17b0e4bfe140 100644
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/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 { MetricsSelect } from './Metrics/MetricsSelect/MetricsSelect';
-import QueryAddOns from './QueryAddOns/QueryAddOns';
-import QueryAggregation from './QueryAggregation/QueryAggregation';
+import LogsQB from './Logs/LogsQB';
+import MetricsQB from './Metrics/MetricsQB';
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 (
- {isMetricsDataSource && (
-
- )}
-
-
-
- {isMetricsDataSource ? (
-
- ) : (
-
- )}
-
-
+ {isMetricsDataSource ? : null}
+ {isLogsDataSource ? : null}
+ {isTracesDataSource ? : null}
);
}
diff --git a/frontend/src/components/QueryBuilderV2/Traces/TracesQB.styles.scss b/frontend/src/components/QueryBuilderV2/Traces/TracesQB.styles.scss
new file mode 100644
index 000000000000..4c434ad92416
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/frontend/src/components/QueryBuilderV2/Traces/TracesQB.tsx b/frontend/src/components/QueryBuilderV2/Traces/TracesQB.tsx
new file mode 100644
index 000000000000..7c896af6002a
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default TracesQB;
diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx
index ec7f3d0b7964..d7945ee27c26 100644
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/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 {
-
+ {/* */}
+