sentry/static/app/views/performance/transactionDetails/eventMetas.tsx

import {Component, Fragment} from 'react';
import styled from '@emotion/styled';
import {Location} from 'history';

import {Button} from 'sentry/components/button';
import Clipboard from 'sentry/components/clipboard';
import DateTime from 'sentry/components/dateTime';
import ContextIcon from 'sentry/components/events/contextSummary/contextIcon';
import {generateIconName} from 'sentry/components/events/contextSummary/utils';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import TimeSince from 'sentry/components/timeSince';
import {Tooltip} from 'sentry/components/tooltip';
import {frontend} from 'sentry/data/platformCategories';
import {IconCopy, IconPlay} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {AvatarProject, OrganizationSummary} from 'sentry/types';
import {Event, EventTransaction} from 'sentry/types/event';
import {getShortEventId} from 'sentry/utils/events';
import {getDuration} from 'sentry/utils/formatters';
import getDynamicText from 'sentry/utils/getDynamicText';
import {
  QuickTraceQueryChildrenProps,
  TraceMeta,
} from 'sentry/utils/performance/quickTrace/types';
import {isTransaction} from 'sentry/utils/performance/quickTrace/utils';
import Projects from 'sentry/utils/projects';
import theme from 'sentry/utils/theme';
import EventCreatedTooltip from 'sentry/views/issueDetails/eventCreatedTooltip';

import QuickTraceMeta from './quickTraceMeta';
import {MetaData} from './styles';

type Props = Pick<
  React.ComponentProps<typeof QuickTraceMeta>,
  'errorDest' | 'transactionDest'
> & {
  event: Event;
  location: Location;
  meta: TraceMeta | null;
  organization: OrganizationSummary;
  projectId: string;
  quickTrace: QuickTraceQueryChildrenProps | null;
};

type State = {
  isLargeScreen: boolean;
};

/**
 * This should match the breakpoint chosen for the `EventDetailHeader` below
 */
const BREAKPOINT_MEDIA_QUERY = `(min-width: ${theme.breakpoints.large})`;

class EventMetas extends Component<Props, State> {
  state: State = {
    isLargeScreen: window.matchMedia?.(BREAKPOINT_MEDIA_QUERY)?.matches,
  };

  componentDidMount() {
    if (this.mq) {
      this.mq.addEventListener('change', this.handleMediaQueryChange);
    }
  }

  componentWillUnmount() {
    if (this.mq) {
      this.mq.removeEventListener('change', this.handleMediaQueryChange);
    }
  }

  mq = window.matchMedia?.(BREAKPOINT_MEDIA_QUERY);

  handleMediaQueryChange = (changed: MediaQueryListEvent) => {
    this.setState({
      isLargeScreen: changed.matches,
    });
  };

  render() {
    const {
      event,
      organization,
      projectId,
      location,
      quickTrace,
      meta,
      errorDest,
      transactionDest,
    } = this.props;
    const {isLargeScreen} = this.state;

    // Replay preview gets rendered as part of the breadcrumb section. We need
    // to check for presence of both to show the replay link button here.
    const hasReplay =
      organization.features.includes('session-replay-ui') &&
      Boolean(event.entries.find(({type}) => type === 'breadcrumbs')) &&
      Boolean(event?.tags?.find(({key}) => key === 'replayId')?.value);

    const type = isTransaction(event) ? 'transaction' : 'event';

    const timestamp = (
      <TimeSince
        tooltipBody={getDynamicText({
          value: (
            <EventCreatedTooltip
              event={{
                ...event,
                dateCreated:
                  event.dateCreated ||
                  new Date((event.endTimestamp || 0) * 1000).toISOString(),
              }}
            />
          ),
          fixed: 'Event Created Tooltip',
        })}
        date={event.dateCreated || (event.endTimestamp || 0) * 1000}
      />
    );

    const httpStatus = <HttpStatus event={event} />;

    return (
      <Projects orgId={organization.slug} slugs={[projectId]}>
        {({projects}) => {
          const project = projects.find(p => p.slug === projectId);
          return (
            <EventDetailHeader type={type} hasReplay={hasReplay}>
              <MetaData
                headingText={t('Event ID')}
                tooltipText={t('The unique ID assigned to this %s.', type)}
                bodyText={<EventID event={event} />}
                subtext={
                  <ProjectBadge
                    project={project ? project : {slug: projectId}}
                    avatarSize={16}
                  />
                }
              />
              {isTransaction(event) ? (
                <MetaData
                  headingText={t('Event Duration')}
                  tooltipText={t(
                    'The time elapsed between the start and end of this transaction.'
                  )}
                  bodyText={getDuration(
                    event.endTimestamp - event.startTimestamp,
                    2,
                    true
                  )}
                  subtext={timestamp}
                />
              ) : (
                <MetaData
                  headingText={t('Created')}
                  tooltipText={t('The time at which this event was created.')}
                  bodyText={timestamp}
                  subtext={getDynamicText({
                    value: <DateTime date={event.dateCreated} />,
                    fixed: 'May 6, 2021 3:27:01 UTC',
                  })}
                />
              )}
              {isTransaction(event) && (
                <MetaData
                  headingText={t('Status')}
                  tooltipText={t(
                    'The status of this transaction indicating if it succeeded or otherwise.'
                  )}
                  bodyText={getStatusBodyText(project, event, meta)}
                  subtext={httpStatus}
                />
              )}
              {isTransaction(event) &&
                (event.contexts.browser ? (
                  <MetaData
                    headingText={t('Browser')}
                    tooltipText={t('The browser used in this transaction.')}
                    bodyText={<BrowserDisplay event={event} />}
                    subtext={event.contexts.browser?.version}
                  />
                ) : (
                  <span />
                ))}
              {hasReplay && (
                <ReplayButtonContainer>
                  <Button href="#breadcrumbs" size="sm" icon={<IconPlay size="xs" />}>
                    {t('Replay')}
                  </Button>
                </ReplayButtonContainer>
              )}
              <QuickTraceContainer>
                <QuickTraceMeta
                  event={event}
                  project={project}
                  location={location}
                  quickTrace={quickTrace}
                  traceMeta={meta}
                  anchor={isLargeScreen ? 'right' : 'left'}
                  errorDest={errorDest}
                  transactionDest={transactionDest}
                />
              </QuickTraceContainer>
            </EventDetailHeader>
          );
        }}
      </Projects>
    );
  }
}

const BrowserCenter = styled('span')`
  display: flex;
  align-items: flex-start;
  gap: ${space(1)};
`;

const IconContainer = styled('div')`
  width: 20px;
  height: 20px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-top: ${space(0.25)};
`;

const BrowserDisplay = ({event}: {event: Event}) => {
  const icon = generateIconName(
    event.contexts.browser?.name,
    event.contexts.browser?.version
  );
  return (
    <BrowserCenter>
      <IconContainer>
        <ContextIcon name={icon} />
      </IconContainer>
      <span>{event.contexts.browser?.name}</span>
    </BrowserCenter>
  );
};

type EventDetailHeaderProps = {
  hasReplay: boolean;
  type?: 'transaction' | 'event';
};

function getEventDetailHeaderCols({hasReplay, type}: EventDetailHeaderProps): string {
  if (type === 'transaction') {
    return hasReplay
      ? 'grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr)  5fr minmax(325px, 1fr);'
      : 'grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr)  6fr;';
  }
  return hasReplay
    ? 'grid-template-columns: minmax(160px, 1fr) minmax(200px, 1fr) 5fr minmax(325px, 1fr);'
    : 'grid-template-columns: minmax(160px, 1fr) minmax(200px, 1fr) 6fr;';
}

const EventDetailHeader = styled('div')<EventDetailHeaderProps>`
  display: grid;
  grid-template-columns: repeat(${p => (p.type === 'transaction' ? 3 : 2)}, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: ${space(2)};
  margin-bottom: ${space(2)};

  @media (min-width: ${p => p.theme.breakpoints.medium}) {
    margin-bottom: 0;
  }

  /* This should match the breakpoint chosen for BREAKPOINT_MEDIA_QUERY above. */
  @media (min-width: ${p => p.theme.breakpoints.large}) {
    ${p => getEventDetailHeaderCols(p)};
    grid-row-gap: 0;
  }
`;

const ReplayButtonContainer = styled('div')`
  order: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  @media (min-width: ${p => p.theme.breakpoints.large}) {
    order: 4;
  }
`;

const QuickTraceContainer = styled('div')`
  grid-column: 1 / -2;
  order: 1;
  @media (min-width: ${p => p.theme.breakpoints.large}) {
    order: 5;
    justify-self: flex-end;
    min-width: 325px;
    grid-column: unset;
  }
`;

function EventID({event}: {event: Event}) {
  return (
    <Clipboard value={event.eventID}>
      <EventIDContainer>
        <EventIDWrapper>{getShortEventId(event.eventID)}</EventIDWrapper>
        <Tooltip title={event.eventID} position="top">
          <IconCopy color="subText" />
        </Tooltip>
      </EventIDContainer>
    </Clipboard>
  );
}

const EventIDContainer = styled('div')`
  display: flex;
  align-items: center;
  cursor: pointer;
`;

const EventIDWrapper = styled('span')`
  margin-right: ${space(1)};
`;

export function HttpStatus({event}: {event: Event}) {
  const {tags} = event;

  const emptyStatus = <Fragment>{'\u2014'}</Fragment>;

  if (!Array.isArray(tags)) {
    return emptyStatus;
  }

  const tag = tags.find(tagObject => tagObject.key === 'http.status_code');

  if (!tag) {
    return emptyStatus;
  }

  return <Fragment>HTTP {tag.value}</Fragment>;
}

/*
  TODO: Ash
  I put this in place as a temporary patch to prevent successful frontend transactions from being set as 'unknown', which is what Relay sets by default
  if there is no status set by the SDK. In the future, the possible statuses will be revised and frontend transactions should properly have a status set.
  When that change is implemented, this function can simply be replaced with:

  event.contexts?.trace?.status ?? '\u2014';
*/

export function getStatusBodyText(
  project: AvatarProject | undefined,
  event: EventTransaction,
  meta: TraceMeta | null
): string {
  const isFrontendProject = frontend.some(val => val === project?.platform);

  if (
    isFrontendProject &&
    meta &&
    meta.errors === 0 &&
    event.contexts?.trace?.status === 'unknown'
  ) {
    return 'ok';
  }

  return event.contexts?.trace?.status ?? '\u2014';
}

export default EventMetas;