import styled from '@emotion/styled'; import omit from 'lodash/omit'; import type {Crumb} from 'sentry/components/breadcrumbs'; import Breadcrumbs from 'sentry/components/breadcrumbs'; import * as Layout from 'sentry/components/layouts/thirds'; import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; import PageFilterBar from 'sentry/components/organizations/pageFilterBar'; import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert'; import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import useRouter from 'sentry/utils/useRouter'; import {normalizeUrl} from 'sentry/utils/withDomainRequired'; import {SamplesTables} from 'sentry/views/performance/mobile/components/samplesTables'; import {ScreenLoadSpanSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples'; import {SpanOperationTable} from 'sentry/views/performance/mobile/ui/screenSummary/spanOperationTable'; import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector'; import {SpanMetricsField} from 'sentry/views/starfish/types'; import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters'; type Query = { 'device.class': string; primaryRelease: string; project: string; secondaryRelease: string; spanDescription: string; spanGroup: string; spanOp: string; transaction: string; }; function ScreenSummary() { const organization = useOrganization(); const location = useLocation(); const router = useRouter(); const { transaction: transactionName, spanGroup, spanDescription, spanOp, 'device.class': deviceClass, } = location.query; const crumbs: Crumb[] = [ { label: t('Performance'), to: normalizeUrl(`/organizations/${organization.slug}/performance/`), preservePageFilters: true, }, { label: t('Mobile UI'), to: normalizeUrl({ pathname: `/organizations/${organization.slug}/performance/mobile/ui/`, query: { ...omit(location.query, [ QueryParameterNames.SPANS_SORT, 'transaction', SpanMetricsField.SPAN_OP, ]), }, }), preservePageFilters: true, }, { label: t('Screen Summary'), }, ]; return ( {transactionName}
} /> {spanGroup && spanOp && ( { router.replace({ pathname: router.location.pathname, query: omit( router.location.query, 'spanGroup', 'transactionMethod', 'spanDescription', 'spanOp' ), }); }} /> )} ); } export default ScreenSummary; const ControlsContainer = styled('div')` display: flex; gap: ${space(1.5)}; `; const HeaderContainer = styled('div')` display: flex; flex-wrap: wrap; gap: ${space(2)}; justify-content: space-between; `; const SamplesContainer = styled('div')` margin-top: ${space(2)}; `;