eventMessage.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import styled from '@emotion/styled';
  2. import ErrorLevel from 'sentry/components/events/errorLevel';
  3. import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
  4. import {t} from 'sentry/locale';
  5. import {space} from 'sentry/styles/space';
  6. import {EventOrGroupType, type Level} from 'sentry/types/event';
  7. type Props = {
  8. type: EventOrGroupType;
  9. annotations?: React.ReactNode;
  10. className?: string;
  11. hasGuideAnchor?: boolean;
  12. level?: Level;
  13. levelIndicatorSize?: string;
  14. message?: React.ReactNode;
  15. showUnhandled?: boolean;
  16. };
  17. const EVENT_TYPES_WITH_LOG_LEVEL = new Set([
  18. EventOrGroupType.ERROR,
  19. EventOrGroupType.CSP,
  20. EventOrGroupType.EXPECTCT,
  21. EventOrGroupType.DEFAULT,
  22. EventOrGroupType.EXPECTSTAPLE,
  23. EventOrGroupType.HPKP,
  24. EventOrGroupType.NEL,
  25. ]);
  26. function EventOrGroupLevel({
  27. level,
  28. levelIndicatorSize,
  29. type,
  30. }: Pick<Props, 'level' | 'levelIndicatorSize' | 'type'>) {
  31. if (level && EVENT_TYPES_WITH_LOG_LEVEL.has(type)) {
  32. return <ErrorLevel level={level} size={levelIndicatorSize} />;
  33. }
  34. return null;
  35. }
  36. function EventMessage({
  37. className,
  38. annotations,
  39. level,
  40. levelIndicatorSize,
  41. message,
  42. type,
  43. showUnhandled = false,
  44. }: Props) {
  45. return (
  46. <LevelMessageContainer className={className}>
  47. <EventOrGroupLevel
  48. level={level}
  49. levelIndicatorSize={levelIndicatorSize}
  50. type={type}
  51. />
  52. {showUnhandled ? <UnhandledTag /> : null}
  53. {message ? (
  54. <Message>{message}</Message>
  55. ) : (
  56. <NoMessage>({t('No error message')})</NoMessage>
  57. )}
  58. {annotations}
  59. </LevelMessageContainer>
  60. );
  61. }
  62. const LevelMessageContainer = styled('div')`
  63. display: flex;
  64. gap: ${space(1)};
  65. align-items: center;
  66. position: relative;
  67. line-height: 1.2;
  68. overflow: hidden;
  69. `;
  70. const Message = styled('div')`
  71. ${p => p.theme.overflowEllipsis}
  72. width: auto;
  73. max-height: 38px;
  74. `;
  75. const NoMessage = styled(Message)`
  76. color: ${p => p.theme.subText};
  77. `;
  78. export default EventMessage;