allEventsTable.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import {useState} from 'react';
  2. import {Location} from 'history';
  3. import LoadingError from 'sentry/components/loadingError';
  4. import {t} from 'sentry/locale';
  5. import {Organization} from 'sentry/types';
  6. import EventView, {decodeSorts} from 'sentry/utils/discover/eventView';
  7. import {useRoutes} from 'sentry/utils/useRoutes';
  8. import EventsTable from 'sentry/views/performance/transactionSummary/transactionEvents/eventsTable';
  9. export interface Props {
  10. isPerfIssue: boolean;
  11. issueId: string;
  12. location: Location;
  13. organization: Organization;
  14. projectId: string;
  15. projectSlug: string;
  16. excludedTags?: string[];
  17. totalEventCount?: string;
  18. }
  19. const AllEventsTable = (props: Props) => {
  20. const {
  21. location,
  22. organization,
  23. issueId,
  24. isPerfIssue,
  25. excludedTags,
  26. projectSlug,
  27. projectId,
  28. totalEventCount,
  29. } = props;
  30. const [error, setError] = useState<string>('');
  31. const routes = useRoutes();
  32. const isReplayEnabled = organization.features.includes('session-replay-ui');
  33. const fields: string[] = [
  34. 'id',
  35. 'transaction',
  36. 'trace',
  37. 'release',
  38. 'environment',
  39. 'user.display',
  40. ...(isPerfIssue ? ['transaction.duration'] : []),
  41. 'timestamp',
  42. ...(isReplayEnabled ? ['replayId'] : []),
  43. ];
  44. const eventView: EventView = EventView.fromLocation(props.location);
  45. eventView.fields = fields.map(fieldName => ({field: fieldName}));
  46. eventView.sorts = decodeSorts(location).filter(sort => fields.includes(sort.field));
  47. if (!eventView.sorts.length) {
  48. eventView.sorts = [{field: 'timestamp', kind: 'desc'}];
  49. }
  50. const idQuery = isPerfIssue
  51. ? `performance.issue_ids:${issueId} event.type:transaction`
  52. : `issue.id:${issueId}`;
  53. eventView.project = [parseInt(projectId, 10)];
  54. eventView.query = `${idQuery} ${props.location.query.query || ''}`;
  55. eventView.statsPeriod = '90d';
  56. const columnTitles: Readonly<string[]> = [
  57. t('event id'),
  58. t('transaction'),
  59. t('trace id'),
  60. t('release'),
  61. t('environment'),
  62. t('user'),
  63. ...(isPerfIssue ? [t('total duration')] : []),
  64. t('timestamp'),
  65. ...(isReplayEnabled ? [t('replay')] : []),
  66. t('minidump'),
  67. ];
  68. if (error) {
  69. return <LoadingError message={error} />;
  70. }
  71. return (
  72. <EventsTable
  73. eventView={eventView}
  74. location={location}
  75. issueId={issueId}
  76. organization={organization}
  77. routes={routes}
  78. excludedTags={excludedTags}
  79. projectSlug={projectSlug}
  80. totalEventCount={totalEventCount}
  81. customColumns={['minidump']}
  82. setError={(msg: string | undefined) => setError(msg ?? '')}
  83. transactionName=""
  84. columnTitles={columnTitles.slice()}
  85. referrer="api.issues.issue_events"
  86. />
  87. );
  88. };
  89. export default AllEventsTable;