From c4956f1010644d55a53147f53d5d705efeb2d2c9 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 16 Oct 2024 12:35:40 -0400 Subject: [PATCH 1/5] create screen rendering module --- static/app/routes.tsx | 20 +++++ .../utils/analytics/insightAnalyticEvents.tsx | 2 + .../common/components/modulesOnboarding.tsx | 8 ++ .../common/queries/useHasFirstSpan.tsx | 1 + .../insights/common/utils/moduleTitles.tsx | 2 + .../insights/common/utils/useModuleURL.tsx | 2 + .../views/spans/selectors/actionSelector.tsx | 1 + .../views/spans/selectors/domainSelector.tsx | 1 + .../common/views/spans/spanTimeCharts.tsx | 1 + .../screenRenderingContent.tsx | 5 ++ .../screenRenderingLandingPage.tsx | 89 +++++++++++++++++++ .../screenRenderingSummaryPage.tsx | 53 +++++++++++ .../mobile/screenRendering/settings.ts | 17 ++++ .../components/screensOverviewTable.tsx | 27 ++++-- .../components/tables/spanOperationTable.tsx | 12 ++- .../pages/mobile/mobilePageHeader.tsx | 7 +- static/app/views/insights/settings.ts | 15 +++- static/app/views/insights/types.tsx | 1 + 18 files changed, 254 insertions(+), 10 deletions(-) create mode 100644 static/app/views/insights/mobile/screenRendering/screenRenderingContent.tsx create mode 100644 static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx create mode 100644 static/app/views/insights/mobile/screenRendering/screenRenderingSummaryPage.tsx create mode 100644 static/app/views/insights/mobile/screenRendering/settings.ts diff --git a/static/app/routes.tsx b/static/app/routes.tsx index 8c69f02c815bc7..b8efb9ccbf085b 100644 --- a/static/app/routes.tsx +++ b/static/app/routes.tsx @@ -13,6 +13,7 @@ import withDomainRequired from 'sentry/utils/withDomainRequired'; import App from 'sentry/views/app'; import AuthLayout from 'sentry/views/auth/layout'; import {MODULE_BASE_URLS} from 'sentry/views/insights/common/utils/useModuleURL'; +import {SUMMARY_PAGE_BASE_URL} from 'sentry/views/insights/mobile/screenRendering/settings'; import {AI_LANDING_SUB_PATH} from 'sentry/views/insights/pages/ai/settings'; import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings'; import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings'; @@ -1759,6 +1760,25 @@ function buildRoutes() { )} /> + + + import( + 'sentry/views/insights/mobile/screenRendering/screenRenderingLandingPage' + ) + )} + /> + + import( + 'ssentry/views/insights/mobile/screenRendering/screenRenderingSummaryPage' + ) + )} + /> + = { 'insight.page_loads.queue': 'Insights: Queue Page Load', 'insight.page_loads.screen_load': 'Insights: Screen Load Page Load', 'insight.page_loads.vital': 'Insights: Vital Page Load', + 'insight.page_loads.screen_rendering': 'Insights: Screen Rendering Page Load', 'insight.app_start.select_start_type': 'Insights: App Start - select app start type', 'insight.app_start.spans.filter_by_device_class': 'Insights: App Start - filter device class', diff --git a/static/app/views/insights/common/components/modulesOnboarding.tsx b/static/app/views/insights/common/components/modulesOnboarding.tsx index 97678326a0fa6c..d70fbc39f4be5d 100644 --- a/static/app/views/insights/common/components/modulesOnboarding.tsx +++ b/static/app/views/insights/common/components/modulesOnboarding.tsx @@ -458,4 +458,12 @@ const EMPTY_STATE_CONTENT: Record = { imageSrc: screenLoadsPreviewImg, supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'], }, + 'screen-rendering': { + description: t('TODO'), + heading: t('TODO'), + imageSrc: screenLoadsPreviewImg, // TODO - replace with actual image + valuePropDescription: t('TODO'), + valuePropPoints: [], + supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'], + }, }; diff --git a/static/app/views/insights/common/queries/useHasFirstSpan.tsx b/static/app/views/insights/common/queries/useHasFirstSpan.tsx index 5552d7c2218b7b..b8835047c9364e 100644 --- a/static/app/views/insights/common/queries/useHasFirstSpan.tsx +++ b/static/app/views/insights/common/queries/useHasFirstSpan.tsx @@ -25,6 +25,7 @@ const modulePropertyMap: Record< // Renamed resource to assets [ModuleName.RESOURCE]: 'hasInsightsAssets', [ModuleName.AI]: 'hasInsightsLlmMonitoring', + [ModuleName.SCREEN_RENDERING]: 'hasInsightsScreenLoad', // Screen rendering and screen loads share similar spans }; /** diff --git a/static/app/views/insights/common/utils/moduleTitles.tsx b/static/app/views/insights/common/utils/moduleTitles.tsx index cab5cbdbf69c0b..b430f1082554d5 100644 --- a/static/app/views/insights/common/utils/moduleTitles.tsx +++ b/static/app/views/insights/common/utils/moduleTitles.tsx @@ -6,6 +6,7 @@ import {MODULE_TITLE as HTTP_MODULE_TITLE} from 'sentry/views/insights/http/sett import {MODULE_TITLE as AI_MODULE_TITLE} from 'sentry/views/insights/llmMonitoring/settings'; import {MODULE_TITLE as APP_STARTS_MODULE_TITLE} from 'sentry/views/insights/mobile/appStarts/settings'; import {MODULE_TITLE as SCREEN_LOADS_MODULE_TITLE} from 'sentry/views/insights/mobile/screenload/settings'; +import {MODULE_TITLE as SCREEN_RENDERING_MODULE_TITLE} from 'sentry/views/insights/mobile/screenRendering/settings'; import {MODULE_TITLE as MOBILE_VITALS_MODULE_TITLE} from 'sentry/views/insights/mobile/screens/settings'; import {MODULE_TITLE as MOBILE_UI_MODULE_TITLE} from 'sentry/views/insights/mobile/ui/settings'; import {MODULE_TITLE as QUEUE_MODULE_TITLE} from 'sentry/views/insights/queues/settings'; @@ -23,5 +24,6 @@ export const MODULE_TITLES: Record = { [ModuleName.AI]: AI_MODULE_TITLE, [ModuleName.MOBILE_UI]: MOBILE_UI_MODULE_TITLE, [ModuleName.MOBILE_SCREENS]: MOBILE_VITALS_MODULE_TITLE, + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_MODULE_TITLE, [ModuleName.OTHER]: '', }; diff --git a/static/app/views/insights/common/utils/useModuleURL.tsx b/static/app/views/insights/common/utils/useModuleURL.tsx index 886e4eaf6cc513..eb2bf01ec59ef6 100644 --- a/static/app/views/insights/common/utils/useModuleURL.tsx +++ b/static/app/views/insights/common/utils/useModuleURL.tsx @@ -8,6 +8,7 @@ import {BASE_URL as HTTP_BASE_URL} from 'sentry/views/insights/http/settings'; import {BASE_URL as AI_BASE_URL} from 'sentry/views/insights/llmMonitoring/settings'; import {BASE_URL as APP_STARTS_BASE_URL} from 'sentry/views/insights/mobile/appStarts/settings'; import {BASE_URL as SCREEN_LOADS_BASE_URL} from 'sentry/views/insights/mobile/screenload/settings'; +import {BASE_URL as SCREEN_RENDERING_BASE_URL} from 'sentry/views/insights/mobile/screenRendering/settings'; import {BASE_URL as MOBILE_SCREENS_BASE_URL} from 'sentry/views/insights/mobile/screens/settings'; import {BASE_URL as MOBILE_UI_BASE_URL} from 'sentry/views/insights/mobile/ui/settings'; import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings'; @@ -31,6 +32,7 @@ export const MODULE_BASE_URLS: Record = { [ModuleName.AI]: AI_BASE_URL, [ModuleName.MOBILE_UI]: MOBILE_UI_BASE_URL, [ModuleName.MOBILE_SCREENS]: MOBILE_SCREENS_BASE_URL, + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_BASE_URL, [ModuleName.OTHER]: '', }; diff --git a/static/app/views/insights/common/views/spans/selectors/actionSelector.tsx b/static/app/views/insights/common/views/spans/selectors/actionSelector.tsx index f3447c0c37695d..90289d2cf6b8b2 100644 --- a/static/app/views/insights/common/views/spans/selectors/actionSelector.tsx +++ b/static/app/views/insights/common/views/spans/selectors/actionSelector.tsx @@ -121,6 +121,7 @@ const LABEL_FOR_MODULE_NAME: {[key in ModuleName]: ReactNode} = { other: t('Action'), 'mobile-ui': t('Action'), 'mobile-screens': t('Action'), + 'screen-rendering': t('Action'), ai: 'Action', }; diff --git a/static/app/views/insights/common/views/spans/selectors/domainSelector.tsx b/static/app/views/insights/common/views/spans/selectors/domainSelector.tsx index 5433136f4f8ebd..78f46316fbd05c 100644 --- a/static/app/views/insights/common/views/spans/selectors/domainSelector.tsx +++ b/static/app/views/insights/common/views/spans/selectors/domainSelector.tsx @@ -181,6 +181,7 @@ const LABEL_FOR_MODULE_NAME: {[key in ModuleName]: ReactNode} = { resource: t('Resource'), other: t('Domain'), ai: t('Domain'), + 'screen-rendering': t('Domain'), 'mobile-ui': t('Domain'), 'mobile-screens': t('Domain'), }; diff --git a/static/app/views/insights/common/views/spans/spanTimeCharts.tsx b/static/app/views/insights/common/views/spans/spanTimeCharts.tsx index 7fa4a5e6ce7005..79ca813ebd1078 100644 --- a/static/app/views/insights/common/views/spans/spanTimeCharts.tsx +++ b/static/app/views/insights/common/views/spans/spanTimeCharts.tsx @@ -106,6 +106,7 @@ export function SpanTimeCharts({ [ModuleName.AI]: [], [ModuleName.MOBILE_UI]: [], [ModuleName.MOBILE_SCREENS]: [], + [ModuleName.SCREEN_RENDERING]: [], [ModuleName.OTHER]: [], }; diff --git a/static/app/views/insights/mobile/screenRendering/screenRenderingContent.tsx b/static/app/views/insights/mobile/screenRendering/screenRenderingContent.tsx new file mode 100644 index 00000000000000..d143fdf36edf39 --- /dev/null +++ b/static/app/views/insights/mobile/screenRendering/screenRenderingContent.tsx @@ -0,0 +1,5 @@ +import ScreensOverview from 'sentry/views/insights/mobile/screens/components/screensOverview'; + +export function ScreenRenderingContent() { + return ; +} diff --git a/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx b/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx new file mode 100644 index 00000000000000..717c55c4b92829 --- /dev/null +++ b/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx @@ -0,0 +1,89 @@ +import styled from '@emotion/styled'; + +import ErrorBoundary from 'sentry/components/errorBoundary'; +import * as Layout from 'sentry/components/layouts/thirds'; +import {space} from 'sentry/styles/space'; +import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert'; +import useOrganization from 'sentry/utils/useOrganization'; +import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar'; +import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders'; +import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding'; +import {ReleaseComparisonSelector} from 'sentry/views/insights/common/components/releaseSelector'; +import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject'; +import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject'; +import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/components/platformSelector'; +import {ScreenRenderingContent} from 'sentry/views/insights/mobile/screenRendering/screenRenderingContent'; +import {MODULE_TITLE} from 'sentry/views/insights/mobile/screenRendering/settings'; +import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; +import {ModuleName} from 'sentry/views/insights/types'; +import Onboarding from 'sentry/views/performance/onboarding'; + +export function ScreenRenderingModule() { + const organization = useOrganization(); + const onboardingProject = useOnboardingProject(); + const {isProjectCrossPlatform} = useCrossPlatformProject(); + + return ( + + + } + /> + + + + + } + /> + + + + + {onboardingProject && ( + + + + )} + {!onboardingProject && } + + + + + + + ); +} + +function PageWithProviders() { + return ( + + + + ); +} + +export default PageWithProviders; + +const Container = styled('div')` + display: grid; + grid-template-rows: auto auto auto; + 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; + } +`; + +const OnboardingContainer = styled('div')` + margin-top: ${space(2)}; +`; diff --git a/static/app/views/insights/mobile/screenRendering/screenRenderingSummaryPage.tsx b/static/app/views/insights/mobile/screenRendering/screenRenderingSummaryPage.tsx new file mode 100644 index 00000000000000..7e4a38ebeb5208 --- /dev/null +++ b/static/app/views/insights/mobile/screenRendering/screenRenderingSummaryPage.tsx @@ -0,0 +1,53 @@ +import {Fragment} from 'react'; + +import * as Layout from 'sentry/components/layouts/thirds'; +import {t} from 'sentry/locale'; +import {useLocation} from 'sentry/utils/useLocation'; +import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout'; +import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders'; +import { + DATA_TYPE, + SUMMARY_PAGE_TITLE, +} from 'sentry/views/insights/mobile/screenRendering/settings'; +import {ScreenSummaryContent} from 'sentry/views/insights/mobile/ui/views/screenSummaryPage'; +import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; +import {MODULE_FEATURE_MAP} from 'sentry/views/insights/settings'; +import {ModuleName} from 'sentry/views/insights/types'; + +function ScreenRenderingSummary() { + const location = useLocation(); + + const {transaction: transactionName} = location.query; + return ( + + + + + + + + + + + + + ); +} + +function PageWithProviders() { + return ( + + + + ); +} + +export default PageWithProviders; diff --git a/static/app/views/insights/mobile/screenRendering/settings.ts b/static/app/views/insights/mobile/screenRendering/settings.ts new file mode 100644 index 00000000000000..aba6a2259ef66e --- /dev/null +++ b/static/app/views/insights/mobile/screenRendering/settings.ts @@ -0,0 +1,17 @@ +import {t} from 'sentry/locale'; + +export const MODULE_TITLE = t('Screen Rendering'); +export const DATA_TYPE = t('Screen Render'); +export const DATA_TYPE_PLURAL = t('Screen Renders'); + +export const CHART_HEIGHT = 160; + +export const MODULE_DESCRIPTION = t('TODO'); +export const MODULE_DOC_LINK = 'TODO'; + +export const BASE_URL = 'screen-rendering'; +export const SUMMARY_PAGE_BASE_URL = 'details'; + +export const SUMMARY_PAGE_TITLE = t('Render Summary'); + +export const MODULE_FEATURES = ['insights-addon-modules', 'insights-domain-view']; diff --git a/static/app/views/insights/mobile/screens/components/screensOverviewTable.tsx b/static/app/views/insights/mobile/screens/components/screensOverviewTable.tsx index 481243673060c0..1596fdb39c5d07 100644 --- a/static/app/views/insights/mobile/screens/components/screensOverviewTable.tsx +++ b/static/app/views/insights/mobile/screens/components/screensOverviewTable.tsx @@ -9,9 +9,12 @@ import type EventView from 'sentry/utils/discover/eventView'; import {NumberContainer} from 'sentry/utils/discover/styles'; import normalizeUrl from 'sentry/utils/url/normalizeUrl'; import {useLocation} from 'sentry/utils/useLocation'; +import useOrganization from 'sentry/utils/useOrganization'; import {OverflowEllipsisTextContainer} from 'sentry/views/insights/common/components/textAlign'; import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL'; import {ScreensTable} from 'sentry/views/insights/mobile/common/components/tables/screensTable'; +import {SUMMARY_PAGE_BASE_URL} from 'sentry/views/insights/mobile/screenRendering/settings'; +import {isModuleEnabled} from 'sentry/views/insights/pages/utils'; import {ModuleName} from 'sentry/views/insights/types'; type Props = { @@ -23,8 +26,13 @@ type Props = { function ScreensOverviewTable({data, eventView, isLoading, pageLinks}: Props) { const moduleURL = useModuleURL('mobile-screens'); + const screenRenderingModuleUrl = useModuleURL(ModuleName.SCREEN_RENDERING); + + const organization = useOrganization(); const location = useLocation(); + const isMobileScreensEnabled = isModuleEnabled(ModuleName.MOBILE_SCREENS, organization); + const columnNameMap = { transaction: t('Screen'), [`count()`]: t('Screen Loads'), @@ -43,13 +51,18 @@ function ScreensOverviewTable({data, eventView, isLoading, pageLinks}: Props) { const field = String(column.key); if (field === 'transaction') { - const link = normalizeUrl( - `${moduleURL}/details/?${qs.stringify({ - ...location.query, - project: row['project.id'], - transaction: row.transaction, - })}` - ); + const queryString = qs.stringify({ + ...location.query, + project: row['project.id'], + transaction: row.transaction, + }); + + const link = isMobileScreensEnabled + ? normalizeUrl(`${moduleURL}/details/?${queryString}`) + : normalizeUrl( + `${screenRenderingModuleUrl}/${SUMMARY_PAGE_BASE_URL}/?${queryString}` + ); + return ( diff --git a/static/app/views/insights/mobile/ui/components/tables/spanOperationTable.tsx b/static/app/views/insights/mobile/ui/components/tables/spanOperationTable.tsx index 19773097050832..49770d19ecd341 100644 --- a/static/app/views/insights/mobile/ui/components/tables/spanOperationTable.tsx +++ b/static/app/views/insights/mobile/ui/components/tables/spanOperationTable.tsx @@ -11,6 +11,7 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types'; import {decodeList, decodeScalar} from 'sentry/utils/queryString'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {useLocation} from 'sentry/utils/useLocation'; +import useOrganization from 'sentry/utils/useOrganization'; import usePageFilters from 'sentry/utils/usePageFilters'; import { PRIMARY_RELEASE_ALIAS, @@ -25,7 +26,9 @@ import type {SpanOperationTableProps} from 'sentry/views/insights/mobile/common/ import {ScreensTable} from 'sentry/views/insights/mobile/common/components/tables/screensTable'; import {useTableQuery} from 'sentry/views/insights/mobile/screenload/components/tables/screensTable'; import {MobileCursors} from 'sentry/views/insights/mobile/screenload/constants'; +import {SUMMARY_PAGE_BASE_URL} from 'sentry/views/insights/mobile/screenRendering/settings'; import {Referrer} from 'sentry/views/insights/mobile/ui/referrers'; +import {isModuleEnabled} from 'sentry/views/insights/pages/utils'; import { ModuleName, SpanMetricsField, @@ -42,7 +45,9 @@ export function SpanOperationTable({ secondaryRelease, }: SpanOperationTableProps) { const moduleURL = useModuleURL('mobile-ui'); + const screenRenderingModuleUrl = useModuleURL(ModuleName.SCREEN_RENDERING); const location = useLocation(); + const organization = useOrganization(); const {selection} = usePageFilters(); const cursor = decodeScalar(location.query?.[MobileCursors.SPANS_TABLE]); @@ -52,6 +57,8 @@ export function SpanOperationTable({ location.query[SpanMetricsField.USER_GEO_SUBREGION] ) as SubregionCode[]; + const isMobileScreensEnabled = isModuleEnabled(ModuleName.MOBILE_SCREENS, organization); + // TODO: These filters seem to be too aggressive, check that they are ingesting properly const searchQuery = new MutableSearch([ // 'has:span.description', @@ -155,7 +162,10 @@ export function SpanOperationTable({ if (column.key === SPAN_DESCRIPTION) { const label = row[SpanMetricsField.SPAN_DESCRIPTION]; - const pathname = `${moduleURL}/spans/`; + const pathname = isMobileScreensEnabled + ? `${moduleURL}/spans/` + : `${screenRenderingModuleUrl}/${SUMMARY_PAGE_BASE_URL}/`; + const query = { ...location.query, transaction, diff --git a/static/app/views/insights/pages/mobile/mobilePageHeader.tsx b/static/app/views/insights/pages/mobile/mobilePageHeader.tsx index d279da1e05b487..6218db6946626f 100644 --- a/static/app/views/insights/pages/mobile/mobilePageHeader.tsx +++ b/static/app/views/insights/pages/mobile/mobilePageHeader.tsx @@ -39,7 +39,12 @@ export function MobileHeader({ const modules = hasMobileScreens ? [ModuleName.MOBILE_SCREENS] - : [ModuleName.APP_START, ModuleName.SCREEN_LOAD, ModuleName.MOBILE_UI]; + : [ + ModuleName.APP_START, + ModuleName.SCREEN_LOAD, + ModuleName.SCREEN_RENDERING, + ModuleName.MOBILE_UI, + ]; return ( = { [ModuleName.AI]: AI_MODULE_TITLE, [ModuleName.MOBILE_UI]: MOBILE_UI_MODULE_TITLE, [ModuleName.MOBILE_SCREENS]: MOBILE_SCREENS_MODULE_TITLE, + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_MODULE_TITLE, [ModuleName.OTHER]: '', }; @@ -108,6 +116,7 @@ export const MODULE_DATA_TYPES: Record = { [ModuleName.AI]: AI_DATA_TYPE, [ModuleName.MOBILE_UI]: t('Mobile UI'), [ModuleName.MOBILE_SCREENS]: MOBILE_SCREENS_DATA_TYPE, + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_DATA_TYPE, [ModuleName.OTHER]: '', }; @@ -123,6 +132,7 @@ export const MODULE_DATA_TYPES_PLURAL: Record = { [ModuleName.AI]: AI_DATA_TYPE_PLURAL, [ModuleName.MOBILE_UI]: t('Mobile UI'), [ModuleName.MOBILE_SCREENS]: MOBILE_SCREENS_DATA_TYPE_PLURAL, + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_DATA_TYPE_PLURAL, [ModuleName.OTHER]: '', }; @@ -138,10 +148,11 @@ export const MODULE_PRODUCT_DOC_LINKS: Record = { [ModuleName.AI]: AI_MODULE_DOC_LINK, [ModuleName.MOBILE_UI]: MODULE_UI_DOC_LINK, [ModuleName.MOBILE_SCREENS]: MODULE_SCREENS_DOC_LINK, + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_MODULE_DOC_LINK, [ModuleName.OTHER]: '', }; -export const MODULE_FEATURE_MAP: Partial> = { +export const MODULE_FEATURE_MAP: Record = { [ModuleName.DB]: DB_MODULE_FEATURES, [ModuleName.APP_START]: APP_STARTS_MODULE_FEATURES, [ModuleName.HTTP]: HTTP_MODULE_FEATURES, @@ -153,4 +164,6 @@ export const MODULE_FEATURE_MAP: Partial> = { [ModuleName.SCREEN_LOAD]: SCREEN_LOADS_MODULE_FEATURES, [ModuleName.MOBILE_UI]: MOBILE_UI_MODULE_FEATURES, [ModuleName.MOBILE_SCREENS]: [MOBILE_SCREENS_MODULE_FEATURE], + [ModuleName.SCREEN_RENDERING]: SCREEN_RENDERING_MODULE_FEATURES, + [ModuleName.OTHER]: [], }; diff --git a/static/app/views/insights/types.tsx b/static/app/views/insights/types.tsx index 751cd8c1f34085..81f36d2321e158 100644 --- a/static/app/views/insights/types.tsx +++ b/static/app/views/insights/types.tsx @@ -16,6 +16,7 @@ export enum ModuleName { AI = 'ai', MOBILE_UI = 'mobile-ui', MOBILE_SCREENS = 'mobile-screens', + SCREEN_RENDERING = 'screen-rendering', OTHER = 'other', } From c7f63484433a660642e0ba72afd08d3445668ea3 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Wed, 16 Oct 2024 12:38:30 -0400 Subject: [PATCH 2/5] fix route --- static/app/routes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/routes.tsx b/static/app/routes.tsx index b8efb9ccbf085b..8b49a04e737904 100644 --- a/static/app/routes.tsx +++ b/static/app/routes.tsx @@ -1774,7 +1774,7 @@ function buildRoutes() { component={make( () => import( - 'ssentry/views/insights/mobile/screenRendering/screenRenderingSummaryPage' + 'sentry/views/insights/mobile/screenRendering/screenRenderingSummaryPage' ) )} /> From e67dd8ac3536723cd7a760b3223f5f3ee527657b Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Thu, 17 Oct 2024 12:15:45 -0400 Subject: [PATCH 3/5] update onboarding --- .../common/components/modulesOnboarding.tsx | 21 +++++++++++++++---- .../screenRenderingLandingPage.tsx | 18 ++-------------- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/static/app/views/insights/common/components/modulesOnboarding.tsx b/static/app/views/insights/common/components/modulesOnboarding.tsx index d70fbc39f4be5d..603069250b496a 100644 --- a/static/app/views/insights/common/components/modulesOnboarding.tsx +++ b/static/app/views/insights/common/components/modulesOnboarding.tsx @@ -30,6 +30,7 @@ import { MODULE_DATA_TYPES, MODULE_DATA_TYPES_PLURAL, MODULE_PRODUCT_DOC_LINKS, + MODULE_TITLES, } from 'sentry/views/insights/settings'; import {ModuleName} from 'sentry/views/insights/types'; import PerformanceOnboarding from 'sentry/views/performance/onboarding'; @@ -459,11 +460,23 @@ const EMPTY_STATE_CONTENT: Record = { supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'], }, 'screen-rendering': { - description: t('TODO'), - heading: t('TODO'), + description: t( + 'Screen Rendering shows you views within your application are presenting slow or frozen interactions and how frequently these hiccups are occurring.' + ), + heading: t('An app that loads quickly can still be terrible'), imageSrc: screenLoadsPreviewImg, // TODO - replace with actual image - valuePropDescription: t('TODO'), - valuePropPoints: [], + valuePropDescription: tct('With [moduleTitle]:', { + moduleTitle: MODULE_TITLES[ModuleName.SCREEN_RENDERING], + }), + valuePropPoints: [ + tct('Compare [dataType] performance between releases.', { + dataType: MODULE_DATA_TYPES[ModuleName.SCREEN_RENDERING].toLowerCase(), + }), + t('Drill down to specific suspect operations.'), + tct('Correlate [dataType] performance with real-user metrics.', { + dataType: MODULE_DATA_TYPES[ModuleName.SCREEN_RENDERING].toLowerCase(), + }), + ], supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'], }, }; diff --git a/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx b/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx index 717c55c4b92829..80ae37e5039940 100644 --- a/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx +++ b/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx @@ -4,23 +4,18 @@ import ErrorBoundary from 'sentry/components/errorBoundary'; import * as Layout from 'sentry/components/layouts/thirds'; import {space} from 'sentry/styles/space'; import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert'; -import useOrganization from 'sentry/utils/useOrganization'; import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar'; import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders'; import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding'; import {ReleaseComparisonSelector} from 'sentry/views/insights/common/components/releaseSelector'; -import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject'; import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject'; import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/components/platformSelector'; import {ScreenRenderingContent} from 'sentry/views/insights/mobile/screenRendering/screenRenderingContent'; import {MODULE_TITLE} from 'sentry/views/insights/mobile/screenRendering/settings'; import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; import {ModuleName} from 'sentry/views/insights/types'; -import Onboarding from 'sentry/views/performance/onboarding'; export function ScreenRenderingModule() { - const organization = useOrganization(); - const onboardingProject = useOnboardingProject(); const {isProjectCrossPlatform} = useCrossPlatformProject(); return ( @@ -42,13 +37,8 @@ export function ScreenRenderingModule() { - - {onboardingProject && ( - - - - )} - {!onboardingProject && } + + @@ -83,7 +73,3 @@ const Container = styled('div')` grid-template-columns: auto 1fr auto; } `; - -const OnboardingContainer = styled('div')` - margin-top: ${space(2)}; -`; From d05a14ac086ffdc74673f578d78f0b6545fb4a39 Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki <44422760+DominikB2014@users.noreply.github.com> Date: Fri, 18 Oct 2024 16:38:11 -0400 Subject: [PATCH 4/5] Update static/app/views/insights/common/components/modulesOnboarding.tsx Co-authored-by: Matt Quinn --- .../app/views/insights/common/components/modulesOnboarding.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/insights/common/components/modulesOnboarding.tsx b/static/app/views/insights/common/components/modulesOnboarding.tsx index 603069250b496a..193226837e83e1 100644 --- a/static/app/views/insights/common/components/modulesOnboarding.tsx +++ b/static/app/views/insights/common/components/modulesOnboarding.tsx @@ -461,7 +461,7 @@ const EMPTY_STATE_CONTENT: Record = { }, 'screen-rendering': { description: t( - 'Screen Rendering shows you views within your application are presenting slow or frozen interactions and how frequently these hiccups are occurring.' + 'Screen Rendering shows you views within your application that are presenting slow or frozen interactions and how frequently these hiccups are occurring.' ), heading: t('An app that loads quickly can still be terrible'), imageSrc: screenLoadsPreviewImg, // TODO - replace with actual image From f80a57f5a52220a220e7f701a0bc82f0e23709ef Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki Date: Fri, 18 Oct 2024 16:40:58 -0400 Subject: [PATCH 5/5] update --- .../mobile/screenRendering/screenRenderingLandingPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx b/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx index 80ae37e5039940..e4dd340e4c7d60 100644 --- a/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx +++ b/static/app/views/insights/mobile/screenRendering/screenRenderingLandingPage.tsx @@ -13,6 +13,7 @@ import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/componen import {ScreenRenderingContent} from 'sentry/views/insights/mobile/screenRendering/screenRenderingContent'; import {MODULE_TITLE} from 'sentry/views/insights/mobile/screenRendering/settings'; import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; +import {MODULE_FEATURE_MAP} from 'sentry/views/insights/settings'; import {ModuleName} from 'sentry/views/insights/types'; export function ScreenRenderingModule() { @@ -52,7 +53,7 @@ function PageWithProviders() { return (