feat(traceview): Add previous trace link

static/app/components/events/interfaces/spans/types.tsx

@@ -39,6 +39,7 @@ export type RawSpanType = {
   description?: string;
   exclusive_time?: number;
   hash?: string;
+  links?: SpanLink[];
   op?: string;
   origin?: string;
   parent_span_id?: string;
@@ -199,6 +200,16 @@ export enum TickAlignment {
   CENTER = 2,
 }
 
+type AttributeValue = string | number | boolean | string[] | number[] | boolean[];
+
+export type SpanLink = {
+  span_id: string;
+  trace_id: string;
+  attributes?: Record<string, AttributeValue> & {'sentry.link.type'?: AttributeValue};
+  parent_span_id?: string;
+  sampled?: boolean;
+};
+
 export type TraceContextType = {
   client_sample_rate?: number;
   count?: number;
@@ -207,6 +218,7 @@ export type TraceContextType = {
   exclusive_time?: number;
   frequency?: number;
   hash?: string;
+  links?: SpanLink[];
   op?: string;
   parent_span_id?: string;
   span_id?: string;

static/app/views/performance/newTraceDetails/traceContextPanel.tsx

@@ -8,9 +8,11 @@ import {space} from 'sentry/styles/space';
 import type {EventTransaction} from 'sentry/types/event';
 import type {UseApiQueryResult} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
+import useOrganization from 'sentry/utils/useOrganization';
 import type {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
 import {TraceContextVitals} from 'sentry/views/performance/newTraceDetails/traceContextVitals';
+import {TraceLinkNavigationButton} from 'sentry/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 import {TraceViewLogsSection} from 'sentry/views/performance/newTraceDetails/traceOurlogs';
 
@@ -35,8 +37,25 @@ export function TraceContextPanel({tree, rootEvent}: Props) {
     );
   }, [rootEvent.data]);
 
+  const organization = useOrganization();
+  const showLinkedTraces = organization?.features.includes('trace-view-linked-traces');
+
   return (
     <Container>
+      {showLinkedTraces && (
+        <TraceLinksNavigationContainer>
+          <TraceLinkNavigationButton
+            direction={'previous'}
+            isLoading={rootEvent.isLoading}
+            traceContext={rootEvent.data?.contexts.trace}
+            currentTraceTimestamps={{
+              start: rootEvent.data?.startTimestamp,
+              end: rootEvent.data?.endTimestamp,
+            }}
+          />
+        </TraceLinksNavigationContainer>
+      )}
+
       <VitalMetersContainer>
         <TraceContextVitals tree={tree} />
       </VitalMetersContainer>
@@ -77,3 +96,10 @@ const TraceTagsContainer = styled('div')`
   border-radius: ${p => p.theme.borderRadius};
   padding: ${space(1)};
 `;
+
+const TraceLinksNavigationContainer = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  margin: ${space(1)} 0;
+`;

static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton.tsx

@@ -0,0 +1,147 @@
+import {useMemo} from 'react';
+import styled from '@emotion/styled';
+
+import type {
+  SpanLink,
+  TraceContextType,
+} from 'sentry/components/events/interfaces/spans/types';
+import Link from 'sentry/components/links/link';
+import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconChevron} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useTrace} from 'sentry/views/performance/newTraceDetails/traceApi/useTrace';
+import {isEmptyTrace} from 'sentry/views/performance/newTraceDetails/traceApi/utils';
+import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
+
+// Currently, we only support previous but component can be used for 'next trace' in the future
+type ConnectedTraceConnection = 'previous'; // | 'next';
+
+const LINKED_TRACE_MAX_DURATION = 3600; // 1h in seconds
+
+function useIsTraceAvailable(
+  traceLink?: SpanLink,
+  previousTraceTimestamp?: number
+): {
+  isAvailable: boolean;
+  isLoading: boolean;
+} {
+  const trace = useTrace({
+    traceSlug: traceLink?.trace_id,
+    timestamp: previousTraceTimestamp,
+  });
+
+  const isAvailable = useMemo(() => {
+    if (!traceLink) {
+      return false;
+    }
+
+    return Boolean(trace.data && !isEmptyTrace(trace.data));
+  }, [traceLink, trace]);
+
+  return {
+    isAvailable,
+    isLoading: trace.isLoading,
+  };
+}
+
+type TraceLinkNavigationButtonProps = {
+  currentTraceTimestamps: {end?: number; start?: number};
+  direction: ConnectedTraceConnection;
+  isLoading?: boolean;
+  traceContext?: TraceContextType;
+};
+
+export function TraceLinkNavigationButton({
+  direction,
+  traceContext,
+  isLoading,
+  currentTraceTimestamps,
+}: TraceLinkNavigationButtonProps) {
+  const organization = useOrganization();
+  const location = useLocation();
+
+  const traceLink = traceContext?.links?.find(
+    link => link.attributes?.['sentry.link.type'] === `${direction}_trace`
+  );
+
+  // We connect traces over a 1h period - As we don't have timestamps of the linked trace, it is calculated based on this timeframe
+  const linkedTraceTimestamp =
+    direction === 'previous' && currentTraceTimestamps.start
+      ? currentTraceTimestamps.start - LINKED_TRACE_MAX_DURATION // Earliest start times of previous trace
+      : // : direction === 'next' && currentTraceTimestamps.end
+        // ? currentTraceTimestamps.end + LINKED_TRACE_MAX_DURATION
+        undefined;
+
+  const dateSelection = useMemo(
+    () => normalizeDateTimeParams(location.query),
+    [location.query]
+  );
+
+  const {isAvailable: isLinkedTraceAvailable} = useIsTraceAvailable(
+    traceLink,
+    linkedTraceTimestamp
+  );
+
+  if (isLoading) {
+    // We don't show a placeholder/skeleton here as it would cause layout shifts most of the time.
+    // Most traces don't have a next/previous trace and the hard to avoid layout shift should only occur if the actual button can be shown.
+    return null;
+  }
+
+  if (traceLink && isLinkedTraceAvailable) {
+    return (
+      <TraceLink
+        color="gray500"
+        to={getTraceDetailsUrl({
+          traceSlug: traceLink.trace_id,
+          spanId: traceLink.span_id,
+          dateSelection,
+          timestamp: linkedTraceTimestamp,
+          location,
+          organization,
+        })}
+      >
+        <IconChevron direction="left" />
+        <TraceLinkText>{t('Go to Previous Trace')}</TraceLinkText>
+      </TraceLink>
+    );
+  }
+
+  if (traceLink?.sampled === false) {
+    return (
+      <StyledTooltip
+        position="right"
+        title={t(
+          'Trace contains a link to unsampled trace. Increase traces sample rate in SDK settings to see more connected traces'
+        )}
+      >
+        <TraceLinkText>{t('Previous trace not available')}</TraceLinkText>
+      </StyledTooltip>
+    );
+  }
+
+  // If there is no linked trace or an undefined sampling decision
+  return null;
+}
+
+const StyledTooltip = styled(Tooltip)`
+  padding: ${space(0.5)} ${space(1)};
+  text-decoration: underline dotted
+    ${p => (p.disabled ? p.theme.gray300 : p.theme.gray300)};
+`;
+
+const TraceLink = styled(Link)`
+  font-weight: ${p => p.theme.fontWeightNormal};
+  color: ${p => p.theme.subText};
+  padding: ${space(0.25)} ${space(0.5)};
+  display: flex;
+  align-items: center;
+`;
+
+const TraceLinkText = styled('span')`
+  line-height: normal;
+`;