{[...Array(depth).keys()].map((i) => (
+ className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}
+ >
))}
{
e.stopPropagation();
- }}>
+ }}
+ >
)}
-
+
+ {props.displayAnnotations && }
) : (
@@ -488,8 +521,9 @@ const StepSubTable = (props: {
latestTimeSeen: Date;
expandNonSpanAttributes: boolean;
topToBottomChronological: boolean;
+ displayAnnotations: boolean;
}) => {
- const { currentHoverIndex, currentSelectedIndex } = useContext(AppViewHighlightContext);
+ const { currentHoverIndex, currentSelectedIndex } = useContext(AppContext);
const attributesBySpanID = props.attributes.reduce((acc, attr) => {
const existing = acc.get(attr.span_id) || [];
existing.push(attr);
@@ -581,6 +615,7 @@ const StepSubTable = (props: {
latestTimeSeen={props.latestTimeSeen}
displayFullAppWaterfall={displayFullAppWaterfall}
displaySpanID={true}
+ displayAnnotations={props.displayAnnotations}
/>
);
} else {
@@ -611,6 +646,7 @@ const StepSubTable = (props: {
latestTimeSeen={props.latestTimeSeen}
displayFullAppWaterfall={displayFullAppWaterfall}
displaySpanID={true}
+ displayAnnotations={props.displayAnnotations}
/>
);
}
@@ -637,6 +673,7 @@ const StepSubTable = (props: {
latestTimeSeen={props.latestTimeSeen}
displayFullAppWaterfall={displayFullAppWaterfall}
displaySpanID={displaySpanID}
+ displayAnnotations={props.displayAnnotations}
/>
);
})
@@ -683,6 +720,7 @@ const StepSubTable = (props: {
}
}}
displayAttributes={spanIdsWithAttributesDisplayed.includes(spanID)}
+ displayAnnotations={props.displayAnnotations}
/>,
...attributesToDisplay.map((attr, i) => {
return (
@@ -703,6 +741,7 @@ const StepSubTable = (props: {
latestTimeSeen={props.latestTimeSeen}
displayFullAppWaterfall={displayFullAppWaterfall}
displaySpanID={false}
+ displayAnnotations={props.displayAnnotations}
/>
);
})
@@ -795,7 +834,8 @@ const WaterfallPiece: React.FC<{
bottom: '5%',
height: '90%',
left: `${leftPositionPercentage}%`
- }}>
+ }}
+ >
{hoverItem}
}
@@ -945,6 +987,8 @@ const ActionSubTable = (props: {
pauseLocation?: 'top' | 'bottom'; // If it's top then we put one above, if it's bottom then below, otherwise no pause
pauseTime?: number;
topToBottomChronological: boolean;
+ displayAnnotations: boolean;
+ annotationsForStep: AnnotationOut[];
}) => {
const {
step,
@@ -991,6 +1035,12 @@ const ActionSubTable = (props: {
expandNonSpanAttributes={expandNonSpanAttributes}
setExpandNonSpanAttributes={setExpandNonSpanAttributes}
streamingEvents={step.streaming_events}
+ displayAnnotations={props.displayAnnotations}
+ existingAnnotation={props.annotationsForStep.find(
+ (annotation) =>
+ annotation.step_sequence_id === step.step_start_log.sequence_id &&
+ annotation.span_id === null
+ )}
/>
{isTraceExpanded && (