groupDetails.tsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749
  1. import {cloneElement, Component, Fragment, isValidElement} from 'react';
  2. import {browserHistory, RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import * as Sentry from '@sentry/react';
  5. import omit from 'lodash/omit';
  6. import * as PropTypes from 'prop-types';
  7. import {Client} from 'sentry/api';
  8. import LoadingError from 'sentry/components/loadingError';
  9. import LoadingIndicator from 'sentry/components/loadingIndicator';
  10. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  11. import MissingProjectMembership from 'sentry/components/projects/missingProjectMembership';
  12. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  13. import {Item, TabPanels, Tabs} from 'sentry/components/tabs';
  14. import {t} from 'sentry/locale';
  15. import SentryTypes from 'sentry/sentryTypes';
  16. import GroupStore from 'sentry/stores/groupStore';
  17. import space from 'sentry/styles/space';
  18. import {
  19. AvatarProject,
  20. Group,
  21. GroupActivityAssigned,
  22. GroupActivityType,
  23. IssueCategory,
  24. Organization,
  25. Project,
  26. } from 'sentry/types';
  27. import {Event} from 'sentry/types/event';
  28. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  29. import {getUtcDateString} from 'sentry/utils/dates';
  30. import {TableData} from 'sentry/utils/discover/discoverQuery';
  31. import EventView from 'sentry/utils/discover/eventView';
  32. import {doDiscoverQuery} from 'sentry/utils/discover/genericDiscoverQuery';
  33. import {getAnalyicsDataForEvent, getMessage, getTitle} from 'sentry/utils/events';
  34. import getDaysSinceDate from 'sentry/utils/getDaysSinceDate';
  35. import Projects from 'sentry/utils/projects';
  36. import recreateRoute from 'sentry/utils/recreateRoute';
  37. import withApi from 'sentry/utils/withApi';
  38. import {ERROR_TYPES} from './constants';
  39. import GroupHeader from './header';
  40. import SampleEventAlert from './sampleEventAlert';
  41. import {Tab, TabPaths} from './types';
  42. import {
  43. fetchGroupEvent,
  44. getGroupReprocessingStatus,
  45. markEventSeen,
  46. ReprocessingStatus,
  47. } from './utils';
  48. /**
  49. * Return the integration type for the first assignment via integration
  50. */
  51. function getAssignmentIntegration(group: Group) {
  52. if (!group.activity) {
  53. return '';
  54. }
  55. const assignmentAcitivies = group.activity.filter(
  56. activity => activity.type === GroupActivityType.ASSIGNED
  57. ) as GroupActivityAssigned[];
  58. const integrationAssignments = assignmentAcitivies.find(
  59. activity => !!activity.data.integration
  60. );
  61. return integrationAssignments?.data.integration || '';
  62. }
  63. type Error = typeof ERROR_TYPES[keyof typeof ERROR_TYPES] | null;
  64. type Props = {
  65. api: Client;
  66. children: React.ReactNode;
  67. environments: string[];
  68. isGlobalSelectionReady: boolean;
  69. organization: Organization;
  70. projects: Project[];
  71. } & RouteComponentProps<{groupId: string; orgId: string; eventId?: string}, {}>;
  72. type State = {
  73. error: boolean;
  74. errorType: Error;
  75. eventError: boolean;
  76. group: Group | null;
  77. loading: boolean;
  78. loadingEvent: boolean;
  79. loadingGroup: boolean;
  80. loadingReplayIds: boolean;
  81. project: null | (Pick<Project, 'id' | 'slug'> & Partial<Pick<Project, 'platform'>>);
  82. replayIds: null | string[];
  83. event?: Event;
  84. };
  85. class GroupDetails extends Component<Props, State> {
  86. static childContextTypes = {
  87. group: SentryTypes.Group,
  88. location: PropTypes.object,
  89. };
  90. state = this.initialState;
  91. getChildContext() {
  92. return {
  93. group: this.state.group,
  94. location: this.props.location,
  95. };
  96. }
  97. componentDidMount() {
  98. // only track the view if we are loading the event early
  99. this.fetchData(this.canLoadEventEarly(this.props));
  100. if (this.props.organization.features.includes('session-replay-ui')) {
  101. this.fetchReplayIds();
  102. }
  103. this.updateReprocessingProgress();
  104. }
  105. componentDidUpdate(prevProps: Props, prevState: State) {
  106. const globalSelectionReadyChanged =
  107. prevProps.isGlobalSelectionReady !== this.props.isGlobalSelectionReady;
  108. if (
  109. globalSelectionReadyChanged ||
  110. prevProps.location.pathname !== this.props.location.pathname
  111. ) {
  112. // Skip tracking for other navigation events like switching events
  113. this.fetchData(globalSelectionReadyChanged && this.canLoadEventEarly(this.props));
  114. }
  115. if (
  116. (!this.canLoadEventEarly(prevProps) && !prevState?.group && this.state.group) ||
  117. (prevProps.params?.eventId !== this.props.params?.eventId && this.state.group)
  118. ) {
  119. // if we are loading events we should record analytics after it's loaded
  120. this.getEvent(this.state.group).then(
  121. () => this.state.group?.project && this.trackView(this.state.group?.project)
  122. );
  123. }
  124. }
  125. componentWillUnmount() {
  126. GroupStore.reset();
  127. this.listener?.();
  128. if (this.refetchInterval) {
  129. window.clearInterval(this.refetchInterval);
  130. }
  131. }
  132. refetchInterval: number | null = null;
  133. get initialState(): State {
  134. return {
  135. group: null,
  136. loading: true,
  137. loadingReplayIds: true,
  138. loadingEvent: true,
  139. loadingGroup: true,
  140. error: false,
  141. eventError: false,
  142. errorType: null,
  143. project: null,
  144. replayIds: null,
  145. };
  146. }
  147. trackView(project: Project) {
  148. const {group, event} = this.state;
  149. const {organization, params, location} = this.props;
  150. const {alert_date, alert_rule_id, alert_type} = location.query;
  151. trackAdvancedAnalyticsEvent('issue_details.viewed', {
  152. organization,
  153. project_id: parseInt(project.id, 10),
  154. group_id: parseInt(params.groupId, 10),
  155. // group properties
  156. issue_category: group?.issueCategory ?? IssueCategory.ERROR,
  157. issue_status: group?.status,
  158. issue_age: group?.firstSeen ? getDaysSinceDate(group.firstSeen) : -1,
  159. issue_level: group?.level,
  160. is_assigned: !!group?.assignedTo,
  161. error_count: Number(group?.count || -1),
  162. num_comments: group ? group.numComments : -1,
  163. project_platform: group?.project.platform,
  164. has_external_issue: group?.annotations ? group?.annotations.length > 0 : false,
  165. has_owner: group?.owners ? group?.owners.length > 0 : false,
  166. integration_assignment_source: group ? getAssignmentIntegration(group) : '',
  167. // event properties
  168. ...getAnalyicsDataForEvent(event),
  169. // Alert properties track if the user came from email/slack alerts
  170. alert_date:
  171. typeof alert_date === 'string' ? getUtcDateString(Number(alert_date)) : undefined,
  172. alert_rule_id: typeof alert_rule_id === 'string' ? alert_rule_id : undefined,
  173. alert_type: typeof alert_type === 'string' ? alert_type : undefined,
  174. });
  175. }
  176. remountComponent = () => {
  177. this.setState(this.initialState);
  178. this.fetchData();
  179. };
  180. canLoadEventEarly(props: Props) {
  181. return !props.params.eventId || ['oldest', 'latest'].includes(props.params.eventId);
  182. }
  183. get groupDetailsEndpoint() {
  184. return `/issues/${this.props.params.groupId}/`;
  185. }
  186. get groupReleaseEndpoint() {
  187. return `/issues/${this.props.params.groupId}/first-last-release/`;
  188. }
  189. async getEvent(group?: Group) {
  190. if (group) {
  191. this.setState({loadingEvent: true, eventError: false});
  192. }
  193. const {params, environments, api} = this.props;
  194. const orgSlug = params.orgId;
  195. const groupId = params.groupId;
  196. const eventId = params.eventId ?? 'latest';
  197. const projectId = group?.project?.slug;
  198. try {
  199. const event = await fetchGroupEvent(
  200. api,
  201. orgSlug,
  202. groupId,
  203. eventId,
  204. environments,
  205. projectId
  206. );
  207. this.setState({event, loading: false, eventError: false, loadingEvent: false});
  208. } catch (err) {
  209. // This is an expected error, capture to Sentry so that it is not considered as an unhandled error
  210. Sentry.captureException(err);
  211. this.setState({eventError: true, loading: false, loadingEvent: false});
  212. }
  213. }
  214. getCurrentRouteInfo(group: Group): {baseUrl: string; currentTab: Tab} {
  215. const {organization, router, routes} = this.props;
  216. const {event} = this.state;
  217. const currentRoute = routes[routes.length - 1];
  218. let currentTab: Tab;
  219. // If we're in the tag details page ("/tags/:tagKey/")
  220. if (router.params.tagKey) {
  221. currentTab = Tab.TAGS;
  222. } else {
  223. currentTab =
  224. Object.values(Tab).find(tab => currentRoute.path === TabPaths[tab]) ??
  225. Tab.DETAILS;
  226. }
  227. const baseUrl = `/organizations/${organization.slug}/issues/${group.id}/${
  228. router.params.eventId && event ? `events/${event.id}/` : ''
  229. }`;
  230. return {baseUrl, currentTab};
  231. }
  232. updateReprocessingProgress() {
  233. const hasReprocessingV2Feature = this.hasReprocessingV2Feature();
  234. if (!hasReprocessingV2Feature) {
  235. return;
  236. }
  237. if (this.refetchInterval) {
  238. window.clearInterval(this.refetchInterval);
  239. }
  240. this.refetchInterval = window.setInterval(this.refetchGroup, 30000);
  241. }
  242. hasReprocessingV2Feature() {
  243. const {organization} = this.props;
  244. return organization.features?.includes('reprocessing-v2');
  245. }
  246. getReprocessingNewRoute(data: Group) {
  247. const {routes, location, params} = this.props;
  248. const {groupId} = params;
  249. const {id: nextGroupId} = data;
  250. const hasReprocessingV2Feature = this.hasReprocessingV2Feature();
  251. const reprocessingStatus = getGroupReprocessingStatus(data);
  252. const {currentTab, baseUrl} = this.getCurrentRouteInfo(data);
  253. if (groupId !== nextGroupId) {
  254. if (hasReprocessingV2Feature) {
  255. // Redirects to the Activities tab
  256. if (
  257. reprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT &&
  258. currentTab !== Tab.ACTIVITY
  259. ) {
  260. return {
  261. pathname: `${baseUrl}${Tab.ACTIVITY}/`,
  262. query: {...params, groupId: nextGroupId},
  263. };
  264. }
  265. }
  266. return recreateRoute('', {
  267. routes,
  268. location,
  269. params: {...params, groupId: nextGroupId},
  270. });
  271. }
  272. if (hasReprocessingV2Feature) {
  273. if (
  274. reprocessingStatus === ReprocessingStatus.REPROCESSING &&
  275. currentTab !== Tab.DETAILS
  276. ) {
  277. return {
  278. pathname: baseUrl,
  279. query: params,
  280. };
  281. }
  282. if (
  283. reprocessingStatus === ReprocessingStatus.REPROCESSED_AND_HASNT_EVENT &&
  284. currentTab !== Tab.ACTIVITY &&
  285. currentTab !== Tab.USER_FEEDBACK
  286. ) {
  287. return {
  288. pathname: `${baseUrl}${Tab.ACTIVITY}/`,
  289. query: params,
  290. };
  291. }
  292. }
  293. return undefined;
  294. }
  295. getGroupQuery(): Record<string, string | string[]> {
  296. const {environments} = this.props;
  297. // Note, we do not want to include the environment key at all if there are no environments
  298. const query: Record<string, string | string[]> = {
  299. ...(environments ? {environment: environments} : {}),
  300. expand: ['inbox', 'owners'],
  301. collapse: 'release',
  302. };
  303. return query;
  304. }
  305. getFetchDataRequestErrorType(status: any): Error {
  306. if (!status) {
  307. return null;
  308. }
  309. if (status === 404) {
  310. return ERROR_TYPES.GROUP_NOT_FOUND;
  311. }
  312. if (status === 403) {
  313. return ERROR_TYPES.MISSING_MEMBERSHIP;
  314. }
  315. return null;
  316. }
  317. handleRequestError(error: any) {
  318. Sentry.captureException(error);
  319. const errorType = this.getFetchDataRequestErrorType(error?.status);
  320. this.setState({
  321. loadingGroup: false,
  322. loading: false,
  323. error: true,
  324. errorType,
  325. });
  326. }
  327. refetchGroup = async () => {
  328. const {loadingGroup, loading, loadingEvent, group} = this.state;
  329. if (
  330. group?.status !== ReprocessingStatus.REPROCESSING ||
  331. loadingGroup ||
  332. loading ||
  333. loadingEvent
  334. ) {
  335. return;
  336. }
  337. const {api} = this.props;
  338. this.setState({loadingGroup: true});
  339. try {
  340. const updatedGroup = await api.requestPromise(this.groupDetailsEndpoint, {
  341. query: this.getGroupQuery(),
  342. });
  343. const reprocessingNewRoute = this.getReprocessingNewRoute(updatedGroup);
  344. if (reprocessingNewRoute) {
  345. browserHistory.push(reprocessingNewRoute);
  346. return;
  347. }
  348. this.setState({group: updatedGroup, loadingGroup: false});
  349. } catch (error) {
  350. this.handleRequestError(error);
  351. }
  352. };
  353. async fetchGroupReleases() {
  354. const {api} = this.props;
  355. const releases = await api.requestPromise(this.groupReleaseEndpoint);
  356. GroupStore.onPopulateReleases(this.props.params.groupId, releases);
  357. }
  358. async fetchReplayIds() {
  359. const {api, location, organization, params} = this.props;
  360. const {groupId} = params;
  361. this.setState({loadingReplayIds: true});
  362. const eventView = EventView.fromNewQueryWithLocation(
  363. {
  364. id: '',
  365. name: `Errors within replay`,
  366. version: 2,
  367. fields: ['replayId', 'count()'],
  368. query: `issue.id:${groupId} !replayId:""`,
  369. projects: [],
  370. },
  371. location
  372. );
  373. try {
  374. const [data] = await doDiscoverQuery<TableData>(
  375. api,
  376. `/organizations/${organization.slug}/events/`,
  377. eventView.getEventsAPIPayload(location)
  378. );
  379. const replayIds = data.data.map(record => String(record.replayId));
  380. this.setState({
  381. replayIds,
  382. loadingReplayIds: false,
  383. });
  384. } catch (err) {
  385. this.setState({loadingReplayIds: false});
  386. }
  387. }
  388. async fetchData(trackView = false) {
  389. const {api, isGlobalSelectionReady, params} = this.props;
  390. // Need to wait for global selection store to be ready before making request
  391. if (!isGlobalSelectionReady) {
  392. return;
  393. }
  394. try {
  395. const eventPromise = this.canLoadEventEarly(this.props)
  396. ? this.getEvent()
  397. : undefined;
  398. const groupPromise = await api.requestPromise(this.groupDetailsEndpoint, {
  399. query: this.getGroupQuery(),
  400. });
  401. const [data] = await Promise.all([groupPromise, eventPromise]);
  402. const groupReleasePromise = this.fetchGroupReleases();
  403. const reprocessingNewRoute = this.getReprocessingNewRoute(data);
  404. if (reprocessingNewRoute) {
  405. browserHistory.push(reprocessingNewRoute);
  406. return;
  407. }
  408. const project = data.project;
  409. markEventSeen(api, params.orgId, project.slug, params.groupId);
  410. if (!project) {
  411. Sentry.withScope(() => {
  412. Sentry.captureException(new Error('Project not found'));
  413. });
  414. } else {
  415. const locationWithProject = {...this.props.location};
  416. if (
  417. locationWithProject.query.project === undefined &&
  418. locationWithProject.query._allp === undefined
  419. ) {
  420. // We use _allp as a temporary measure to know they came from the
  421. // issue list page with no project selected (all projects included in
  422. // filter).
  423. //
  424. // If it is not defined, we add the locked project id to the URL
  425. // (this is because if someone navigates directly to an issue on
  426. // single-project priveleges, then goes back - they were getting
  427. // assigned to the first project).
  428. //
  429. // If it is defined, we do not so that our back button will bring us
  430. // to the issue list page with no project selected instead of the
  431. // locked project.
  432. locationWithProject.query = {...locationWithProject.query, project: project.id};
  433. }
  434. // We delete _allp from the URL to keep the hack a bit cleaner, but
  435. // this is not an ideal solution and will ultimately be replaced with
  436. // something smarter.
  437. delete locationWithProject.query._allp;
  438. browserHistory.replace(locationWithProject);
  439. }
  440. this.setState({project, loadingGroup: false});
  441. GroupStore.loadInitialData([data]);
  442. if (trackView) {
  443. // make sure releases have loaded before we track the view
  444. groupReleasePromise.then(() => this.trackView(project));
  445. }
  446. } catch (error) {
  447. this.handleRequestError(error);
  448. }
  449. }
  450. listener = GroupStore.listen(itemIds => this.onGroupChange(itemIds), undefined);
  451. onGroupChange(itemIds: Set<string>) {
  452. const id = this.props.params.groupId;
  453. if (itemIds.has(id)) {
  454. const group = GroupStore.get(id) as Group;
  455. if (group) {
  456. // TODO(ts) This needs a better approach. issueActions is splicing attributes onto
  457. // group objects to cheat here.
  458. if ((group as Group & {stale?: boolean}).stale) {
  459. this.fetchData();
  460. return;
  461. }
  462. this.setState({
  463. group,
  464. });
  465. }
  466. }
  467. }
  468. getTitle() {
  469. const {organization} = this.props;
  470. const {group} = this.state;
  471. const defaultTitle = 'Sentry';
  472. if (!group) {
  473. return defaultTitle;
  474. }
  475. const {title} = getTitle(group, organization?.features);
  476. const message = getMessage(group);
  477. const {project} = group;
  478. const eventDetails = `${organization.slug} - ${project.slug}`;
  479. if (title && message) {
  480. return `${title}: ${message} - ${eventDetails}`;
  481. }
  482. return `${title || message || defaultTitle} - ${eventDetails}`;
  483. }
  484. tabClickAnalyticsEvent(tab: Tab) {
  485. const {organization} = this.props;
  486. const {project, group} = this.state;
  487. if (!project || !group) {
  488. return;
  489. }
  490. trackAdvancedAnalyticsEvent('issue_details.tab_changed', {
  491. organization,
  492. group_id: parseInt(group.id, 10),
  493. issue_category: group.issueCategory,
  494. project_id: parseInt(project.id, 10),
  495. tab,
  496. });
  497. }
  498. renderError() {
  499. const {projects, location} = this.props;
  500. const projectId = location.query.project;
  501. const project = projects.find(proj => proj.id === projectId);
  502. switch (this.state.errorType) {
  503. case ERROR_TYPES.GROUP_NOT_FOUND:
  504. return (
  505. <StyledLoadingError
  506. message={t('The issue you were looking for was not found.')}
  507. />
  508. );
  509. case ERROR_TYPES.MISSING_MEMBERSHIP:
  510. return (
  511. <MissingProjectMembership
  512. organization={this.props.organization}
  513. project={project}
  514. />
  515. );
  516. default:
  517. return <StyledLoadingError onRetry={this.remountComponent} />;
  518. }
  519. }
  520. renderContent(project: AvatarProject, group: Group) {
  521. const {children, environments, organization, location, router} = this.props;
  522. const {loadingEvent, eventError, event, replayIds} = this.state;
  523. const {currentTab, baseUrl} = this.getCurrentRouteInfo(group);
  524. const groupReprocessingStatus = getGroupReprocessingStatus(group);
  525. let childProps: Record<string, any> = {
  526. environments,
  527. group,
  528. project,
  529. };
  530. if (currentTab === Tab.DETAILS) {
  531. if (group.id !== event?.groupID && !eventError) {
  532. // if user pastes only the event id into the url, but it's from another group, redirect to correct group/event
  533. const redirectUrl = `/organizations/${organization.slug}/issues/${event?.groupID}/events/${event?.id}/`;
  534. router.push(redirectUrl);
  535. } else {
  536. childProps = {
  537. ...childProps,
  538. event,
  539. loadingEvent,
  540. eventError,
  541. groupReprocessingStatus,
  542. onRetry: () => this.remountComponent(),
  543. };
  544. }
  545. }
  546. if (currentTab === Tab.TAGS) {
  547. childProps = {...childProps, event, baseUrl};
  548. } else if (currentTab === Tab.REPLAYS) {
  549. childProps = {...childProps, replayIds};
  550. }
  551. return (
  552. <Tabs
  553. value={currentTab}
  554. onChange={tab => {
  555. this.tabClickAnalyticsEvent(tab);
  556. router.push({
  557. pathname: `${baseUrl}${TabPaths[tab]}`,
  558. query: tab === Tab.EVENTS ? omit(location.query, 'query') : location.query,
  559. });
  560. }}
  561. >
  562. <GroupHeader
  563. organization={organization}
  564. groupReprocessingStatus={groupReprocessingStatus}
  565. event={event}
  566. group={group}
  567. replaysCount={replayIds?.length}
  568. baseUrl={baseUrl}
  569. project={project as Project}
  570. />
  571. <GroupTabPanels>
  572. <Item key={currentTab}>
  573. {isValidElement(children) ? cloneElement(children, childProps) : children}
  574. </Item>
  575. </GroupTabPanels>
  576. </Tabs>
  577. );
  578. }
  579. renderPageContent() {
  580. const {error: isError, group, project, loading} = this.state;
  581. const isLoading = loading || (!group && !isError);
  582. if (isLoading) {
  583. return <LoadingIndicator />;
  584. }
  585. if (isError) {
  586. return this.renderError();
  587. }
  588. const {organization} = this.props;
  589. return (
  590. <Projects
  591. orgId={organization.slug}
  592. slugs={[project?.slug ?? '']}
  593. data-test-id="group-projects-container"
  594. >
  595. {({projects, initiallyLoaded, fetchError}) =>
  596. initiallyLoaded ? (
  597. fetchError ? (
  598. <StyledLoadingError message={t('Error loading the specified project')} />
  599. ) : (
  600. // TODO(ts): Update renderContent function to deal with empty group
  601. this.renderContent(projects[0], group!)
  602. )
  603. ) : (
  604. <LoadingIndicator />
  605. )
  606. }
  607. </Projects>
  608. );
  609. }
  610. render() {
  611. const {project, group} = this.state;
  612. const {organization} = this.props;
  613. const isSampleError = group?.tags?.some(tag => tag.key === 'sample_event');
  614. return (
  615. <Fragment>
  616. {isSampleError && project && (
  617. <SampleEventAlert project={project} organization={organization} />
  618. )}
  619. <SentryDocumentTitle noSuffix title={this.getTitle()}>
  620. <PageFiltersContainer
  621. skipLoadLastUsed
  622. forceProject={project}
  623. shouldForceProject
  624. >
  625. {this.renderPageContent()}
  626. </PageFiltersContainer>
  627. </SentryDocumentTitle>
  628. </Fragment>
  629. );
  630. }
  631. }
  632. export default withApi(Sentry.withProfiler(GroupDetails));
  633. const StyledLoadingError = styled(LoadingError)`
  634. margin: ${space(2)};
  635. `;
  636. const GroupTabPanels = styled(TabPanels)`
  637. flex-grow: 1;
  638. display: flex;
  639. flex-direction: column;
  640. justify-content: stretch;
  641. `;