exampleReplaysList.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import {Fragment, useMemo} from 'react';
  2. import type {Location} from 'history';
  3. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  4. import LoadingIndicator from 'sentry/components/loadingIndicator';
  5. import {t} from 'sentry/locale';
  6. import EventView from 'sentry/utils/discover/eventView';
  7. import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
  8. import useReplayList from 'sentry/utils/replays/hooks/useReplayList';
  9. import useOrganization from 'sentry/utils/useOrganization';
  10. import {useRoutes} from 'sentry/utils/useRoutes';
  11. import {StatusContainer} from 'sentry/views/profiling/landing/styles';
  12. import {ReplayCell} from 'sentry/views/replays/replayTable/tableCell';
  13. export default function ExampleReplaysList({
  14. location,
  15. clickType,
  16. selectorQuery,
  17. projectId,
  18. }: {
  19. clickType: 'count_dead_clicks' | 'count_rage_clicks';
  20. location: Location;
  21. projectId: number;
  22. selectorQuery: string;
  23. }) {
  24. const organization = useOrganization();
  25. const {project, environment, start, statsPeriod, utc, end} = location.query;
  26. const emptyLocation: Location = useMemo(() => {
  27. return {
  28. pathname: '',
  29. search: '',
  30. hash: '',
  31. state: '',
  32. action: 'PUSH' as const,
  33. key: '',
  34. query: {project, environment, start, statsPeriod, utc, end},
  35. };
  36. }, [project, environment, start, statsPeriod, utc, end]);
  37. const eventView = useMemo(
  38. () =>
  39. EventView.fromNewQueryWithLocation(
  40. {
  41. id: '',
  42. name: '',
  43. version: 2,
  44. fields: [
  45. 'activity',
  46. 'duration',
  47. 'id',
  48. 'project_id',
  49. 'user',
  50. 'finished_at',
  51. 'is_archived',
  52. 'started_at',
  53. ],
  54. projects: [projectId],
  55. query: selectorQuery,
  56. orderby: `-${clickType}`,
  57. },
  58. emptyLocation
  59. ),
  60. [emptyLocation, selectorQuery, clickType, projectId]
  61. );
  62. const {replays, isFetching, fetchError} = useReplayList({
  63. eventView,
  64. location: emptyLocation,
  65. organization,
  66. perPage: 3,
  67. });
  68. const routes = useRoutes();
  69. const referrer = getRouteStringFromRoutes(routes);
  70. return (
  71. <Fragment>
  72. {fetchError || (!isFetching && !replays?.length) ? (
  73. <EmptyStateWarning withIcon={false} small>
  74. {t('No replays found')}
  75. </EmptyStateWarning>
  76. ) : isFetching ? (
  77. <StatusContainer>
  78. <LoadingIndicator />
  79. </StatusContainer>
  80. ) : (
  81. replays?.map(r => {
  82. return (
  83. <ReplayCell
  84. key={r.id}
  85. replay={r}
  86. eventView={eventView}
  87. organization={organization}
  88. referrer={referrer}
  89. referrer_table="selector-widget"
  90. isWidget
  91. />
  92. );
  93. })
  94. )}
  95. </Fragment>
  96. );
  97. }