import {Fragment, useEffect} from 'react'; import styled from '@emotion/styled'; import * as Sentry from '@sentry/react'; import EventOrGroupExtraDetails from 'sentry/components/eventOrGroupExtraDetails'; import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader'; import {PanelTable} from 'sentry/components/panels'; import ReplayCountContext from 'sentry/components/replays/replayCountContext'; import useReplaysCount from 'sentry/components/replays/useReplaysCount'; import {DEFAULT_STREAM_GROUP_STATS_PERIOD} from 'sentry/components/stream/group'; import GroupChart from 'sentry/components/stream/groupChart'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import {Group, Organization} from 'sentry/types'; import {useQuery} from 'sentry/utils/queryClient'; import RequestError from 'sentry/utils/requestError/requestError'; import theme from 'sentry/utils/theme'; import useApi from 'sentry/utils/useApi'; import useMedia from 'sentry/utils/useMedia'; import useOrganization from 'sentry/utils/useOrganization'; type Props = { projectId: string; replayId: string; }; const columns = [t('Issue'), t('Graph'), t('Events'), t('Users')]; function IssueList({projectId, replayId}: Props) { const api = useApi(); const organization = useOrganization(); const isScreenLarge = useMedia(`(min-width: ${theme.breakpoints.large})`); const url = `/organizations/${organization.slug}/issues/`; const query = { query: `replayId:${replayId}`, }; const { data: issues = [], isLoading, isError, error, } = useQuery({ queryKey: [url, query], queryFn: () => api.requestPromise(url, { query, headers: { 'x-sentry-replay-request': '1', }, }), }); useEffect(() => { if (!isError) { return; } Sentry.captureException(error); }, [isError, error]); const counts = useReplaysCount({ groupIds: issues.map(issue => issue.id), organization, }); return ( column !== t('Graph')) } > {issues // prioritize the replay issues for the project first, followed by first_seen .sort((a, b) => { if (a.project.id === projectId) { if (a.project.id === b.project.id) { return new Date(a.firstSeen).getTime() - new Date(b.firstSeen).getTime(); } return -1; } return 1; }) .map(issue => ( )) || null} ); } function TableRow({ isScreenLarge, issue, organization, }: { isScreenLarge: boolean; issue: Group; organization: Organization; }) { return ( {isScreenLarge && ( )} {issue.count} {issue.userCount} ); } const ChartWrapper = styled('div')` width: 200px; margin-left: -${space(2)}; padding-left: ${space(0)}; `; const Item = styled('div')` display: flex; align-items: center; `; const IssueDetailsWrapper = styled('div')` overflow: hidden; line-height: normal; `; const StyledPanelTable = styled(PanelTable)` /* overflow: visible allows the tooltip to be completely shown */ overflow: visible; grid-template-columns: minmax(1fr, max-content) repeat(3, max-content); @media (max-width: ${p => p.theme.breakpoints.large}) { grid-template-columns: minmax(0, 1fr) repeat(2, max-content); } `; export default IssueList;