list.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import styled from '@emotion/styled';
  2. import * as Layout from 'sentry/components/layouts/thirds';
  3. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  4. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  5. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  6. import {t} from 'sentry/locale';
  7. import {space} from 'sentry/styles/space';
  8. import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
  9. import useOrganization from 'sentry/utils/useOrganization';
  10. import {ReplaysFilters, ReplaysSearch} from 'sentry/views/replays/list/filters';
  11. import ReplaysErroneousDeadRageCards from 'sentry/views/replays/list/replaysErroneousDeadRageCards';
  12. import ReplaysList from 'sentry/views/replays/list/replaysList';
  13. function ReplaysListContainer() {
  14. useReplayPageview('replay.list-time-spent');
  15. const {slug: orgSlug} = useOrganization();
  16. return (
  17. <SentryDocumentTitle title={`Session Replay — ${orgSlug}`}>
  18. <Layout.Header>
  19. <Layout.HeaderContent>
  20. <Layout.Title>
  21. {t('Session Replay')}
  22. <PageHeadingQuestionTooltip
  23. title={t(
  24. 'A view of available video-like reproductions of user sessions so you can visualize repro steps to debug issues faster.'
  25. )}
  26. docsUrl="https://docs.sentry.io/product/session-replay/"
  27. />
  28. </Layout.Title>
  29. </Layout.HeaderContent>
  30. </Layout.Header>
  31. <PageFiltersContainer>
  32. <Layout.Body>
  33. <Layout.Main fullWidth>
  34. <LayoutGap>
  35. <ReplaysFilters />
  36. <ReplaysErroneousDeadRageCards />
  37. <ReplaysSearch />
  38. <ReplaysList />
  39. </LayoutGap>
  40. </Layout.Main>
  41. </Layout.Body>
  42. </PageFiltersContainer>
  43. </SentryDocumentTitle>
  44. );
  45. }
  46. const LayoutGap = styled('div')`
  47. display: grid;
  48. gap: ${space(2)};
  49. `;
  50. export default ReplaysListContainer;