123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- import styled from '@emotion/styled';
- import * as Layout from 'sentry/components/layouts/thirds';
- import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
- import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
- import {space} from 'sentry/styles/space';
- import {
- PageErrorAlert,
- PageErrorProvider,
- } from 'sentry/utils/performance/contexts/pageError';
- import useOrganization from 'sentry/utils/useOrganization';
- import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
- import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector';
- import {StarfishPageFiltersContainer} from 'sentry/views/starfish/components/starfishPageFiltersContainer';
- import {StarfishProjectSelector} from 'sentry/views/starfish/components/starfishProjectSelector';
- import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
- import {ScreensView, YAxis} from 'sentry/views/starfish/views/screens';
- export default function PageloadModule() {
- const organization = useOrganization();
- return (
- <SentryDocumentTitle title={ROUTE_NAMES.pageload} orgSlug={organization.slug}>
- <Layout.Page>
- <PageErrorProvider>
- <Layout.Header>
- <Layout.HeaderContent>
- <Layout.Title>{ROUTE_NAMES.pageload}</Layout.Title>
- </Layout.HeaderContent>
- </Layout.Header>
- <Layout.Body>
- <Layout.Main fullWidth>
- <PageErrorAlert />
- <StarfishPageFiltersContainer>
- <SearchContainerWithFilterAndMetrics>
- <PageFilterBar condensed>
- <StarfishProjectSelector />
- <StarfishDatePicker />
- </PageFilterBar>
- <ReleaseComparisonSelector />
- </SearchContainerWithFilterAndMetrics>
- <ScreensView yAxes={[YAxis.TTID, YAxis.TTFD]} />
- </StarfishPageFiltersContainer>
- </Layout.Main>
- </Layout.Body>
- </PageErrorProvider>
- </Layout.Page>
- </SentryDocumentTitle>
- );
- }
- const SearchContainerWithFilterAndMetrics = styled('div')`
- display: grid;
- grid-template-rows: auto auto auto;
- gap: ${space(2)};
- margin-bottom: ${space(2)};
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- grid-template-rows: auto;
- grid-template-columns: auto 1fr auto;
- }
- `;
|