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

feat: added traceoperator component and styles

Browse Source
This commit is contained in:
ahrefabhi 2025-08-20 11:19:35 +05:30
parent d26efd2833
commit 4e2c7c6309
2 changed files with 211 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss Normal file
View File

@ -0,0 +1,94 @@
.qb-trace-operator {
padding: 8px;
&.non-list-view {
padding-left: 40px;
position: relative;
&::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 12px;
height: calc(100% - 48px);
width: 1px;
background: repeating-linear-gradient(
to bottom,
#1d212d,
#1d212d 4px,
transparent 4px,
transparent 8px
);
}
}
&-arrow {
position: relative;
&::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -26px;
height: 1px;
width: 20px;
background: repeating-linear-gradient(
to right,
#1d212d,
#1d212d 4px,
transparent 4px,
transparent 8px
);
}
&::after {
content: '';
position: absolute;
top: 50%;
left: -10px;
transform: translateY(-50%);
height: 4px;
width: 4px;
border-radius: 50%;
background-color: var(--bg-slate-400);
}
}
&-input {
width: 100%;
}
&-container {
display: flex;
flex-direction: column;
gap: 8px;
}
&-aggregation-container {
display: flex;
flex-direction: column;
gap: 8px;
}
&-add-ons-container {
width: 100%;
display: flex;
flex-direction: row;
gap: 16px;
}
&-add-ons-input {
position: relative;
&::before {
content: '';
position: absolute;
left: -16px;
top: 50%;
height: 1px;
width: 16px;
background-color: var(--bg-slate-400);
}
}
}

117
frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx Normal file
View File

@ -0,0 +1,117 @@
/* eslint-disable react/require-default-props */
/* eslint-disable sonarjs/no-duplicate-string */
import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
import cx from 'classnames';
import './TraceOperator.styles.scss';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useCallback } from 'react';
import {
IBuilderQuery,
IBuilderTraceOperator,
} from 'types/api/queryBuilder/queryBuilderData';
import QueryAddOns from '../QueryAddOns/QueryAddOns';
import QueryAggregation from '../QueryAggregation/QueryAggregation';
import { useTraceOperatorOperations } from 'hooks/queryBuilder/userTraceOperatorOperations';
export default function TraceOperator({
traceOperator,
isListViewPanel = false,
}: {
traceOperator: IBuilderTraceOperator | undefined;
isListViewPanel?: boolean;
}): JSX.Element {
const { panelType, currentQuery } = useQueryBuilder();
const { handleChangeTraceOperatorData } = useTraceOperatorOperations({
index: 0,
query: traceOperator,
});
const handleTraceOperatorChange = useCallback(
(traceOperatorExpression: string) => {
handleChangeTraceOperatorData('expression', traceOperatorExpression);
},
[handleChangeTraceOperatorData],
);
const handleChangeAggregateEvery = useCallback(
(value: IBuilderQuery['stepInterval']) => {
handleChangeTraceOperatorData('stepInterval', value);
},
[handleChangeTraceOperatorData],
);
const handleChangeAggregation = useCallback(
(value: string) => {
handleChangeTraceOperatorData('aggregations', [
{
expression: value,
},
]);
},
[handleChangeTraceOperatorData],
);
const handleChangeSpanSource = useCallback(
(value: string) => {
handleChangeTraceOperatorData('returnSpansFrom', value);
},
[handleChangeTraceOperatorData],
);
return (
<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
<div className="qb-trace-operator-container">
<InputWithLabel
className={cx(
'qb-trace-operator-input',
!isListViewPanel && 'qb-trace-operator-arrow',
)}
initialValue={traceOperator?.expression || ''}
label="TRACES MATCHING"
placeholder="Add condition..."
type="text"
onChange={handleTraceOperatorChange}
/>
{!isListViewPanel && (
<div className="qb-trace-operator-aggregation-container">
<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
<QueryAggregation
dataSource={currentQuery.builder.queryData[0].dataSource}
key={`query-search-${currentQuery.builder.queryData[0].queryName}-${currentQuery.builder.queryData[0].dataSource}`}
panelType={panelType || undefined}
onAggregationIntervalChange={handleChangeAggregateEvery}
onChange={handleChangeAggregation}
queryData={currentQuery.builder.queryData[0]} //TODO: replace this with the traceoperator
/>
</div>
<div
className={cx(
'qb-trace-operator-add-ons-container',
!isListViewPanel && 'qb-trace-operator-arrow',
)}
>
<QueryAddOns
index={0}
query={currentQuery.builder.queryData[0]} //TODO: replace this with the traceoperator
version="v3"
isListViewPanel={false}
showReduceTo={false}
panelType={panelType}
>
<InputWithLabel
className="qb-trace-operator-add-ons-input"
initialValue={traceOperator?.expression || ''}
label="Using spans from"
placeholder="Add condition..."
type="text"
onChange={handleChangeSpanSource}
/>
</QueryAddOns>
</div>
</div>
)}
</div>
</div>
);
}