Skip to content

feat(app-start): Add start type toggle to overview page #65357

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
narsaynorath merged 1 commit into from
Feb 20, 2024
Merged

feat(app-start): Add start type toggle to overview page #65357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions static/app/views/starfish/modules/mobile/appStartup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import {useEffect} from 'react';
import {browserHistory} from 'react-router';
import styled from '@emotion/styled';

import Feature from 'sentry/components/acl/feature';
Expand All @@ -11,13 +13,36 @@ import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilt
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
import {space} from 'sentry/styles/space';
import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
import {decodeScalar} from 'sentry/utils/queryString';
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector';
import {SpanMetricsField} from 'sentry/views/starfish/types';
import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
import AppStartup from 'sentry/views/starfish/views/appStartup';
import {
COLD_START_TYPE,
StartTypeSelector,
} from 'sentry/views/starfish/views/appStartup/screenSummary/startTypeSelector';

export default function InitializationModule() {
const organization = useOrganization();
const location = useLocation();

const appStartType =
decodeScalar(location.query[SpanMetricsField.APP_START_TYPE]) ?? '';
useEffect(() => {
// Default the start type to cold start if not present
if (!appStartType) {
browserHistory.replace({
...location,
query: {
...location.query,
[SpanMetricsField.APP_START_TYPE]: COLD_START_TYPE,
},
});
}
}, [location, appStartType]);

return (
<Feature features="starfish-mobile-appstart" organization={organization}>
Expand All @@ -41,11 +66,12 @@ export default function InitializationModule() {
<DatePageFilter />
</PageFilterBar>
<ReleaseComparisonSelector />
<StartTypeSelector />
</Container>
<ErrorBoundary mini>
<AppStartup chartHeight={240} />
</ErrorBoundary>
</PageFiltersContainer>
<ErrorBoundary mini>
<AppStartup chartHeight={240} />
</ErrorBoundary>
</Layout.Main>
</Layout.Body>
</PageAlertProvider>
Expand All @@ -56,13 +82,8 @@ export default function InitializationModule() {
}

const Container = styled('div')`
display: grid;
grid-template-rows: auto auto auto;
display: flex;
gap: ${space(2)};
margin-bottom: ${space(2)};

@media (min-width: ${p => p.theme.breakpoints.large}) {
grid-template-rows: auto;
grid-template-columns: auto 1fr auto;
}
flex-wrap: wrap;
`;
15 changes: 7 additions & 8 deletions static/app/views/starfish/views/appStartup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,21 +73,20 @@ function AppStartup({additionalFilters, chartHeight}: Props) {

const queryString = appendReleaseFilters(query, primaryRelease, secondaryRelease);

const orderby = decodeScalar(locationQuery.sort, `-count_total_starts`);
const appStartType =
decodeScalar(location.query[SpanMetricsField.APP_START_TYPE]) ?? '';
const sortCountField = `count_starts_measurements_app_start_${appStartType}`;
const orderby = decodeScalar(locationQuery.sort, `-${sortCountField}`);
const newQuery: NewQuery = {
name: '',
fields: [
'transaction',
SpanMetricsField.PROJECT_ID,
`avg_if(measurements.app_start_cold,release,${primaryRelease})`,
`avg_if(measurements.app_start_cold,release,${secondaryRelease})`,
`avg_if(measurements.app_start_warm,release,${primaryRelease})`,
`avg_if(measurements.app_start_warm,release,${secondaryRelease})`,
`avg_compare(measurements.app_start_cold,release,${primaryRelease},${secondaryRelease})`,
`avg_compare(measurements.app_start_warm,release,${primaryRelease},${secondaryRelease})`,
`avg_if(measurements.app_start_${appStartType},release,${primaryRelease})`,
`avg_if(measurements.app_start_${appStartType},release,${secondaryRelease})`,
`avg_compare(measurements.app_start_${appStartType},release,${primaryRelease},${secondaryRelease})`,
'count_starts(measurements.app_start_cold)',
'count_starts(measurements.app_start_warm)',
'count_total_starts()',
],
query: queryString,
dataset: DiscoverDatasets.METRICS,
Expand Down
22 changes: 12 additions & 10 deletions static/app/views/starfish/views/appStartup/screensTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import type EventView from 'sentry/utils/discover/eventView';
import {isFieldSortable} from 'sentry/utils/discover/eventView';
import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
import {fieldAlignment} from 'sentry/utils/discover/fields';
import {decodeScalar} from 'sentry/utils/queryString';
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import {normalizeUrl} from 'sentry/utils/withDomainRequired';
Expand All @@ -23,6 +24,7 @@ import {
SECONDARY_RELEASE_ALIAS,
} from 'sentry/views/starfish/components/releaseSelector';
import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
import {SpanMetricsField} from 'sentry/views/starfish/types';
import Breakdown from 'sentry/views/starfish/views/appStartup/breakdown';
import {TOP_SCREENS} from 'sentry/views/starfish/views/screens';

Expand All @@ -38,6 +40,8 @@ export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
const organization = useOrganization();
const {primaryRelease, secondaryRelease} = useReleaseSelection();

const startType = decodeScalar(location.query[SpanMetricsField.APP_START_TYPE]) ?? '';

const columnNameMap = {
transaction: t('Screen'),
[`avg_if(measurements.app_start_cold,release,${primaryRelease})`]: t(
Expand All @@ -61,7 +65,8 @@ export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
[`avg_compare(measurements.app_start_warm,release,${primaryRelease},${secondaryRelease})`]:
t('Change'),
app_start_breakdown: t('Type Breakdown'),
'count_total_starts()': t('Total Count'),
'count_starts(measurements.app_start_cold)': t('Total Count'),
'count_starts(measurements.app_start_warm)': t('Total Count'),
};

function renderBodyCell(column, row): React.ReactNode {
Expand Down Expand Up @@ -173,14 +178,11 @@ export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
data={data?.data as TableDataRow[]}
columnOrder={[
'transaction',
`avg_if(measurements.app_start_cold,release,${primaryRelease})`,
`avg_if(measurements.app_start_cold,release,${secondaryRelease})`,
`avg_compare(measurements.app_start_cold,release,${primaryRelease},${secondaryRelease})`,
`avg_if(measurements.app_start_warm,release,${primaryRelease})`,
`avg_if(measurements.app_start_warm,release,${secondaryRelease})`,
`avg_compare(measurements.app_start_warm,release,${primaryRelease},${secondaryRelease})`,
`app_start_breakdown`,
'count_total_starts()',
`avg_if(measurements.app_start_${startType},release,${primaryRelease})`,
`avg_if(measurements.app_start_${startType},release,${secondaryRelease})`,
`avg_compare(measurements.app_start_${startType},release,${primaryRelease},${secondaryRelease})`,
'app_start_breakdown',
`count_starts(measurements.app_start_${startType})`,
].map(columnKey => {
return {
key: columnKey,
Expand All @@ -190,7 +192,7 @@ export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
})}
columnSortBy={[
{
key: 'count_total_starts',
key: `count_starts_measurements_app_start_${startType}`,
order: 'desc',
},
]}
Expand Down