eventCreatedTooltip.tsx 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import moment from 'moment-timezone';
  4. import AutoSelectText from 'sentry/components/autoSelectText';
  5. import {t} from 'sentry/locale';
  6. import ConfigStore from 'sentry/stores/configStore';
  7. import {space} from 'sentry/styles/space';
  8. import {Event} from 'sentry/types/event';
  9. const formatDateDelta = (reference: moment.Moment, observed: moment.Moment) => {
  10. const duration = moment.duration(Math.abs(+observed - +reference));
  11. const hours = Math.floor(+duration / (60 * 60 * 1000));
  12. const minutes = duration.minutes();
  13. const results: string[] = [];
  14. if (hours) {
  15. results.push(`${hours} hour${hours !== 1 ? 's' : ''}`);
  16. }
  17. if (minutes) {
  18. results.push(`${minutes} minute${minutes !== 1 ? 's' : ''}`);
  19. }
  20. if (results.length === 0) {
  21. results.push('a few seconds');
  22. }
  23. return results.join(', ');
  24. };
  25. type Props = {
  26. event: Event;
  27. };
  28. export default function EventCreatedTooltip({event}: Props) {
  29. const user = ConfigStore.get('user');
  30. const options = user?.options ?? {};
  31. const format = options.clock24Hours ? 'HH:mm:ss z' : 'LTS z';
  32. const dateCreated = event.dateCreated ? moment(event.dateCreated) : null;
  33. const dateReceived = event.dateReceived ? moment(event.dateReceived) : null;
  34. return (
  35. <DescriptionList>
  36. <dt>{t('Occurred')}</dt>
  37. <dd>
  38. {dateCreated ? (
  39. <Fragment>
  40. <AutoSelectText>
  41. {dateCreated.format('ll')} {dateCreated.format(format)}
  42. </AutoSelectText>
  43. </Fragment>
  44. ) : (
  45. <NotApplicableText>{t('n/a')}</NotApplicableText>
  46. )}
  47. </dd>
  48. {dateReceived && (
  49. <Fragment>
  50. <dt>{t('Received')}</dt>
  51. <dd>
  52. <AutoSelectText>
  53. {dateReceived.format('ll')} {dateReceived.format(format)}
  54. </AutoSelectText>
  55. </dd>
  56. <dt>{t('Latency')}</dt>
  57. <dd>
  58. <AutoSelectText>
  59. {dateCreated ? (
  60. formatDateDelta(dateCreated, dateReceived)
  61. ) : (
  62. <NotApplicableText>{t('n/a')}</NotApplicableText>
  63. )}
  64. </AutoSelectText>
  65. </dd>
  66. </Fragment>
  67. )}
  68. </DescriptionList>
  69. );
  70. }
  71. const DescriptionList = styled('dl')`
  72. display: grid;
  73. grid-template-columns: max-content 1fr;
  74. gap: ${space(0.75)} ${space(1)};
  75. text-align: left;
  76. margin: 0;
  77. `;
  78. const NotApplicableText = styled('span')`
  79. color: ${p => p.theme.subText};
  80. `;