headerCell.tsx 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import {t} from 'sentry/locale';
  2. import type {Sort} from 'sentry/utils/discover/fields';
  3. import SortableHeader from 'sentry/views/replays/replayTable/sortableHeader';
  4. import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
  5. type Props = {
  6. column: ReplayColumn;
  7. sort?: Sort;
  8. };
  9. function HeaderCell({column, sort}: Props) {
  10. switch (column) {
  11. case ReplayColumn.ACTIVITY:
  12. return (
  13. <SortableHeader
  14. sort={sort}
  15. fieldName="activity"
  16. label={t('Activity')}
  17. tooltip={t(
  18. 'Activity represents how much user activity happened in a replay. It is determined by the number of errors encountered, duration, and UI events.'
  19. )}
  20. />
  21. );
  22. case ReplayColumn.BROWSER:
  23. return <SortableHeader sort={sort} fieldName="browser.name" label={t('Browser')} />;
  24. case ReplayColumn.COUNT_DEAD_CLICKS:
  25. return (
  26. <SortableHeader
  27. sort={sort}
  28. fieldName="count_dead_clicks"
  29. label={t('Dead clicks')}
  30. tooltip={t(
  31. 'A dead click is a user click that does not result in any page activity after 7 seconds.'
  32. )}
  33. />
  34. );
  35. case ReplayColumn.COUNT_ERRORS:
  36. return <SortableHeader sort={sort} fieldName="count_errors" label={t('Errors')} />;
  37. case ReplayColumn.COUNT_RAGE_CLICKS:
  38. return (
  39. <SortableHeader
  40. sort={sort}
  41. fieldName="count_rage_clicks"
  42. label={t('Rage clicks')}
  43. tooltip={t(
  44. 'A rage click is 5 or more clicks on a dead element, which exhibits no page activity after 7 seconds.'
  45. )}
  46. />
  47. );
  48. case ReplayColumn.DURATION:
  49. return <SortableHeader sort={sort} fieldName="duration" label={t('Duration')} />;
  50. case ReplayColumn.OS:
  51. return <SortableHeader sort={sort} fieldName="os.name" label={t('OS')} />;
  52. case ReplayColumn.REPLAY:
  53. return <SortableHeader sort={sort} fieldName="started_at" label={t('Replay')} />;
  54. case ReplayColumn.MOST_ERRONEOUS_REPLAYS:
  55. return <SortableHeader label={t('Most erroneous replays')} />;
  56. case ReplayColumn.MOST_DEAD_CLICKS:
  57. return <SortableHeader label={t('Most dead clicks')} />;
  58. case ReplayColumn.SLOWEST_TRANSACTION:
  59. return (
  60. <SortableHeader
  61. label={t('Slowest Transaction')}
  62. tooltip={t(
  63. 'Slowest single instance of this transaction captured by this session.'
  64. )}
  65. />
  66. );
  67. default:
  68. return null;
  69. }
  70. }
  71. export default HeaderCell;