123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import styled from '@emotion/styled';
- import Clipboard from 'sentry/components/clipboard';
- import {IconCopy} from 'sentry/icons';
- import {t} from 'sentry/locale';
- import space from 'sentry/styles/space';
- import {getShortEventId} from 'sentry/utils/events';
- type Props = {
- traceID?: string;
- };
- const Header = ({traceID}: Props) => (
- <Wrapper>
- <h4>{t('Issues with the same trace ID')}</h4>
- {traceID ? (
- <Clipboard value={traceID}>
- <ClipboardWrapper>
- <span>{getShortEventId(traceID)}</span>
- <IconCopy />
- </ClipboardWrapper>
- </Clipboard>
- ) : (
- <span>{'-'}</span>
- )}
- </Wrapper>
- );
- export default Header;
- const Wrapper = styled('div')`
- display: grid;
- grid-template-columns: max-content 1fr;
- gap: ${space(1)};
- align-items: center;
- font-size: ${p => p.theme.headerFontSize};
- color: ${p => p.theme.gray300};
- h4 {
- font-size: ${p => p.theme.headerFontSize};
- color: ${p => p.theme.textColor};
- font-weight: normal;
- margin-bottom: 0;
- }
- `;
- const ClipboardWrapper = styled('div')`
- display: grid;
- grid-template-columns: max-content 1fr;
- gap: ${space(1)};
- align-items: center;
- &:hover {
- cursor: pointer;
- }
- `;
|