123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- import {Fragment, useMemo} from 'react';
- import type {Location} from 'history';
- import EmptyStateWarning from 'sentry/components/emptyStateWarning';
- import LoadingIndicator from 'sentry/components/loadingIndicator';
- import {t} from 'sentry/locale';
- import EventView from 'sentry/utils/discover/eventView';
- import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
- import useReplayList from 'sentry/utils/replays/hooks/useReplayList';
- import useOrganization from 'sentry/utils/useOrganization';
- import {useRoutes} from 'sentry/utils/useRoutes';
- import {StatusContainer} from 'sentry/views/profiling/landing/styles';
- import {ReplayCell} from 'sentry/views/replays/replayTable/tableCell';
- export default function ExampleReplaysList({
- location,
- clickType,
- selectorQuery,
- projectId,
- }: {
- clickType: 'count_dead_clicks' | 'count_rage_clicks';
- location: Location;
- projectId: number;
- selectorQuery: string;
- }) {
- const organization = useOrganization();
- const {project, environment, start, statsPeriod, utc, end} = location.query;
- const emptyLocation: Location = useMemo(() => {
- return {
- pathname: '',
- search: '',
- hash: '',
- state: '',
- action: 'PUSH' as const,
- key: '',
- query: {project, environment, start, statsPeriod, utc, end},
- };
- }, [project, environment, start, statsPeriod, utc, end]);
- const eventView = useMemo(
- () =>
- EventView.fromNewQueryWithLocation(
- {
- id: '',
- name: '',
- version: 2,
- fields: [
- 'activity',
- 'duration',
- 'id',
- 'project_id',
- 'user',
- 'finished_at',
- 'is_archived',
- 'started_at',
- ],
- projects: [projectId],
- query: selectorQuery,
- orderby: `-${clickType}`,
- },
- emptyLocation
- ),
- [emptyLocation, selectorQuery, clickType, projectId]
- );
- const {replays, isFetching, fetchError} = useReplayList({
- eventView,
- location: emptyLocation,
- organization,
- perPage: 3,
- });
- const routes = useRoutes();
- const referrer = getRouteStringFromRoutes(routes);
- return (
- <Fragment>
- {fetchError || (!isFetching && !replays?.length) ? (
- <EmptyStateWarning withIcon={false} small>
- {t('No replays found')}
- </EmptyStateWarning>
- ) : isFetching ? (
- <StatusContainer>
- <LoadingIndicator />
- </StatusContainer>
- ) : (
- replays?.map(r => {
- return (
- <ReplayCell
- key={r.id}
- replay={r}
- eventView={eventView}
- organization={organization}
- referrer={referrer}
- referrer_table="selector-widget"
- isWidget
- />
- );
- })
- )}
- </Fragment>
- );
- }
|