External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-17 23:47:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yunus M 2025-05-16 15:07:00 +05:30 committed by SagarRajput-7
parent 231b9072b1
commit 7a98bed694
12 changed files with 188 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/QueryBuilderV2/Logs/LogsQB.styles.scss Normal file
View File

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

20
frontend/src/components/QueryBuilderV2/Logs/LogsQB.tsx Normal file
View File

@ -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;

5
frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.styles.scss Normal file
View File

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

21
frontend/src/components/QueryBuilderV2/Metrics/MetricsQB.tsx Normal file
View File

@ -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;

64
frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.styles.scss Normal file
View File

@ -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;
}
}

2
frontend/src/components/QueryBuilderV2/QueryAddOns/QueryAddOns.tsx
View File

@ -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';

2
frontend/src/components/QueryBuilderV2/QueryAggregation/QueryAggregation.styles.scss
View File

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

63
frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
View File

@ -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;
}
}
}

28
frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
View File

@ -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 (
<div className="query-builder-v2">
{isMetricsDataSource && (
<MetricsSelect query={query} index={0} version="v4" />
)}
<QuerySearch />
{isMetricsDataSource ? (
<MetricsAggregateSection query={query} index={0} version="v4" />
) : (
<QueryAggregation source={source} />
)}
<QueryAddOns query={query} version="v3" isListViewPanel={false} />
{isMetricsDataSource ? <MetricsQB query={query} /> : null}
{isLogsDataSource ? <LogsQB query={query} /> : null}
{isTracesDataSource ? <TracesQB query={query} /> : null}
</div>
);
}

28
frontend/src/components/QueryBuilderV2/Traces/TracesQB.styles.scss Normal file
View File

@ -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;
}
}
}

25
frontend/src/components/QueryBuilderV2/Traces/TracesQB.tsx Normal file
View File

@ -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;

9
frontend/src/pages/TracesExplorer/index.tsx
View File

@ -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">