index.tsx 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. import type {ReactNode} from 'react';
  2. import {memo} from 'react';
  3. import styled from '@emotion/styled';
  4. import {Alert} from 'sentry/components/alert';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import {PanelTable} from 'sentry/components/panels/panelTable';
  7. import {t} from 'sentry/locale';
  8. import EventView from 'sentry/utils/discover/eventView';
  9. import type {Sort} from 'sentry/utils/discover/fields';
  10. import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
  11. import {useLocation} from 'sentry/utils/useLocation';
  12. import useOrganization from 'sentry/utils/useOrganization';
  13. import {useRoutes} from 'sentry/utils/useRoutes';
  14. import useUrlParams from 'sentry/utils/useUrlParams';
  15. import type {ReplayListRecordWithTx} from 'sentry/views/performance/transactionSummary/transactionReplays/useReplaysWithTxData';
  16. import HeaderCell from 'sentry/views/replays/replayTable/headerCell';
  17. import {
  18. ActivityCell,
  19. BrowserCell,
  20. DeadClickCountCell,
  21. DurationCell,
  22. ErrorCountCell,
  23. OSCell,
  24. PlayPauseCell,
  25. RageClickCountCell,
  26. ReplayCell,
  27. TransactionCell,
  28. } from 'sentry/views/replays/replayTable/tableCell';
  29. import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
  30. import type {ReplayListRecord} from 'sentry/views/replays/types';
  31. type Props = {
  32. fetchError: undefined | Error;
  33. isFetching: boolean;
  34. replays: undefined | ReplayListRecord[] | ReplayListRecordWithTx[];
  35. sort: Sort | undefined;
  36. visibleColumns: ReplayColumn[];
  37. emptyMessage?: ReactNode;
  38. gridRows?: string;
  39. onClickPlay?: (index: number) => void;
  40. referrerLocation?: string;
  41. showDropdownFilters?: boolean;
  42. };
  43. // Memoizing this component to avoid unnecessary re-renders
  44. const ReplayTable = memo(
  45. ({
  46. fetchError,
  47. isFetching,
  48. replays,
  49. sort,
  50. visibleColumns,
  51. emptyMessage,
  52. gridRows,
  53. showDropdownFilters,
  54. onClickPlay,
  55. referrerLocation,
  56. }: Props) => {
  57. const routes = useRoutes();
  58. const location = useLocation();
  59. const organization = useOrganization();
  60. // we may have a selected replay index in the URLs
  61. const urlParams = useUrlParams();
  62. const rawReplayIndex = urlParams.getParamValue('selected_replay_index');
  63. const selectedReplayIndex = parseInt(
  64. typeof rawReplayIndex === 'string' ? rawReplayIndex : '0',
  65. 10
  66. );
  67. const tableHeaders = visibleColumns
  68. .filter(Boolean)
  69. .map(column => <HeaderCell key={column} column={column} sort={sort} />);
  70. if (fetchError && !isFetching) {
  71. return (
  72. <StyledPanelTable
  73. headers={tableHeaders}
  74. isLoading={false}
  75. visibleColumns={visibleColumns}
  76. data-test-id="replay-table"
  77. gridRows={undefined}
  78. >
  79. <StyledAlert type="error" showIcon>
  80. {typeof fetchError === 'string'
  81. ? fetchError
  82. : t(
  83. 'Sorry, the list of replays could not be loaded. This could be due to invalid search parameters or an internal systems error.'
  84. )}
  85. </StyledAlert>
  86. </StyledPanelTable>
  87. );
  88. }
  89. const referrer = getRouteStringFromRoutes(routes);
  90. const eventView = EventView.fromLocation(location);
  91. return (
  92. <StyledPanelTable
  93. headers={tableHeaders}
  94. isEmpty={replays?.length === 0}
  95. isLoading={isFetching}
  96. visibleColumns={visibleColumns}
  97. disablePadding
  98. data-test-id="replay-table"
  99. emptyMessage={emptyMessage}
  100. gridRows={isFetching ? undefined : gridRows}
  101. loader={<LoadingIndicator style={{margin: '54px auto'}} />}
  102. >
  103. {replays?.map(
  104. (replay: ReplayListRecord | ReplayListRecordWithTx, index: number) => {
  105. return (
  106. <Row
  107. key={replay.id}
  108. isPlaying={index === selectedReplayIndex && referrerLocation !== 'replay'}
  109. onClick={() => onClickPlay?.(index)}
  110. showCursor={onClickPlay !== undefined}
  111. >
  112. {visibleColumns.map(column => {
  113. switch (column) {
  114. case ReplayColumn.ACTIVITY:
  115. return (
  116. <ActivityCell
  117. key="activity"
  118. replay={replay}
  119. showDropdownFilters={showDropdownFilters}
  120. />
  121. );
  122. case ReplayColumn.BROWSER:
  123. return (
  124. <BrowserCell
  125. key="browser"
  126. replay={replay}
  127. showDropdownFilters={showDropdownFilters}
  128. />
  129. );
  130. case ReplayColumn.COUNT_DEAD_CLICKS:
  131. return (
  132. <DeadClickCountCell
  133. key="countDeadClicks"
  134. replay={replay}
  135. showDropdownFilters={showDropdownFilters}
  136. />
  137. );
  138. case ReplayColumn.COUNT_ERRORS:
  139. return (
  140. <ErrorCountCell
  141. key="countErrors"
  142. replay={replay}
  143. showDropdownFilters={showDropdownFilters}
  144. />
  145. );
  146. case ReplayColumn.COUNT_RAGE_CLICKS:
  147. return (
  148. <RageClickCountCell
  149. key="countRageClicks"
  150. replay={replay}
  151. showDropdownFilters={showDropdownFilters}
  152. />
  153. );
  154. case ReplayColumn.DURATION:
  155. return (
  156. <DurationCell
  157. key="duration"
  158. replay={replay}
  159. showDropdownFilters={showDropdownFilters}
  160. />
  161. );
  162. case ReplayColumn.OS:
  163. return (
  164. <OSCell
  165. key="os"
  166. replay={replay}
  167. showDropdownFilters={showDropdownFilters}
  168. />
  169. );
  170. case ReplayColumn.REPLAY:
  171. return (
  172. <ReplayCell
  173. key="session"
  174. replay={replay}
  175. eventView={eventView}
  176. organization={organization}
  177. referrer={referrer}
  178. referrer_table="main"
  179. />
  180. );
  181. case ReplayColumn.PLAY_PAUSE:
  182. return (
  183. <PlayPauseCell
  184. key="play"
  185. isSelected={selectedReplayIndex === index}
  186. handleClick={() => onClickPlay?.(index)}
  187. />
  188. );
  189. case ReplayColumn.SLOWEST_TRANSACTION:
  190. return (
  191. <TransactionCell
  192. key="slowestTransaction"
  193. replay={replay}
  194. organization={organization}
  195. />
  196. );
  197. default:
  198. return null;
  199. }
  200. })}
  201. </Row>
  202. );
  203. }
  204. )}
  205. </StyledPanelTable>
  206. );
  207. }
  208. );
  209. const StyledPanelTable = styled(PanelTable)<{
  210. visibleColumns: ReplayColumn[];
  211. gridRows?: string;
  212. }>`
  213. margin-bottom: 0;
  214. grid-template-columns: ${p =>
  215. p.visibleColumns
  216. .filter(Boolean)
  217. .map(column => (column === 'replay' ? 'minmax(100px, 1fr)' : 'max-content'))
  218. .join(' ')};
  219. ${props =>
  220. props.gridRows
  221. ? `grid-template-rows: ${props.gridRows};`
  222. : `grid-template-rows: 44px max-content;`}
  223. `;
  224. const StyledAlert = styled(Alert)`
  225. border-radius: 0;
  226. border-width: 1px 0 0 0;
  227. grid-column: 1/-1;
  228. margin-bottom: 0;
  229. `;
  230. const Row = styled('div')<{isPlaying?: boolean; showCursor?: boolean}>`
  231. display: contents;
  232. & > * {
  233. background-color: ${p => (p.isPlaying ? p.theme.translucentInnerBorder : 'inherit')};
  234. border-bottom: 1px solid ${p => p.theme.border};
  235. cursor: ${p => (p.showCursor ? 'pointer' : 'default')};
  236. }
  237. :hover {
  238. background-color: ${p => (p.showCursor ? p.theme.translucentInnerBorder : 'inherit')};
  239. }
  240. `;
  241. export default ReplayTable;