Logged-in Performance Profiler: Display performance content (#94493)

* Add PerformanceReport component

* Hoist page fetching so we can get the wpcom_performance_url object

client/site-performance/components/PageSelector.tsx

@@ -1,16 +1,8 @@
-import page from '@automattic/calypso-router';
 import { SearchableDropdown } from '@automattic/components';
-import { useDebouncedInput } from '@wordpress/compose';
 import { translate } from 'i18n-calypso';
-import { useSelector } from 'calypso/state';
-import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
-import { useSitePages } from '../hooks/useSitePages';
-
-export const PageSelector = () => {
-	const queryParams = useSelector( getCurrentQueryArguments );
-	const [ , setQuery, query ] = useDebouncedInput();
-	const pages = useSitePages( { query } );
+import { ComponentProps } from 'react';
 
+export const PageSelector = ( props: ComponentProps< typeof SearchableDropdown > ) => {
 	return (
 		<div
 			css={ {
@@ -23,20 +15,7 @@ export const PageSelector = () => {
 		>
 			<div>{ translate( 'Page' ) }</div>
 			<SearchableDropdown
-				onFilterValueChange={ setQuery }
-				options={ pages }
-				value={ queryParams?.page_id?.toString() }
-				onChange={ ( page_id ) => {
-					const url = new URL( window.location.href );
-
-					if ( page_id ) {
-						url.searchParams.set( 'page_id', page_id );
-					} else {
-						url.searchParams.delete( 'page_id' );
-					}
-
-					page.replace( url.pathname + url.search );
-				} }
+				{ ...props }
 				css={ {
 					maxWidth: '240px',
 					minWidth: '240px',

client/site-performance/components/PerformanceReport.tsx

@@ -0,0 +1,39 @@
+import { useUrlBasicMetricsQuery } from 'calypso/data/site-profiler/use-url-basic-metrics-query';
+import { useUrlPerformanceInsightsQuery } from 'calypso/data/site-profiler/use-url-performance-insights';
+import { PerformanceProfilerDashboardContent } from 'calypso/performance-profiler/components/dashboard-content';
+import { Tab } from './device-tab-control';
+
+interface PerformanceReportProps {
+	wpcom_performance_url?: { url: string; hash: string };
+	activeTab: Tab;
+}
+
+export const PerformanceReport = ( {
+	wpcom_performance_url,
+	activeTab,
+}: PerformanceReportProps ) => {
+	const { url = '', hash = '' } = wpcom_performance_url || {};
+
+	const { data: basicMetrics } = useUrlBasicMetricsQuery( url, hash, true );
+	const { final_url: finalUrl } = basicMetrics || {};
+	const { data: performanceInsights } = useUrlPerformanceInsightsQuery( url, hash );
+
+	const mobileReport =
+		typeof performanceInsights?.mobile === 'string' ? undefined : performanceInsights?.mobile;
+	const desktopReport =
+		typeof performanceInsights?.desktop === 'string' ? undefined : performanceInsights?.desktop;
+
+	const performanceReport = activeTab === 'mobile' ? mobileReport : desktopReport;
+
+	if ( ! performanceReport ) {
+		return null;
+	}
+
+	return (
+		<PerformanceProfilerDashboardContent
+			performanceReport={ performanceReport }
+			url={ finalUrl ?? url }
+			hash={ hash }
+		/>
+	);
+};

client/site-performance/components/device-tab-control/index.tsx

@@ -1,22 +1,17 @@
 import { SegmentedControl } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import { useState } from 'react';
 
 import './style.scss';
 
+export type Tab = 'mobile' | 'desktop';
+
 type DeviceTabControlsProps = {
-	onDeviceTabChange: ( tab: string ) => void;
+	onDeviceTabChange: ( tab: Tab ) => void;
+	value: Tab;
 };
 
-export const DeviceTabControls = ( { onDeviceTabChange }: DeviceTabControlsProps ) => {
+export const DeviceTabControls = ( { onDeviceTabChange, value }: DeviceTabControlsProps ) => {
 	const translate = useTranslate();
-	const [ selectedOption, setSelectedOption ] = useState( 'mobile' );
-
-	const handleOptionClick = ( newSelectedOption: string ) => {
-		setSelectedOption( newSelectedOption );
-
-		onDeviceTabChange( newSelectedOption );
-	};
 
 	const options = [
 		{
@@ -38,8 +33,8 @@ export const DeviceTabControls = ( { onDeviceTabChange }: DeviceTabControlsProps
 						<SegmentedControl.Item
 							key={ option.value }
 							value={ option.value }
-							selected={ selectedOption === option.value }
-							onClick={ () => handleOptionClick( option.value ) }
+							selected={ value === option.value }
+							onClick={ () => onDeviceTabChange( option.value as Tab ) }
 						>
 							{ option.label }
 						</SegmentedControl.Item>

client/site-performance/hooks/useSitePages.ts

@@ -11,7 +11,10 @@ interface SitePage {
 	id: number;
 	link: string;
 	title: { rendered: string };
-	wpcom_performance_url?: string;
+	wpcom_performance_url?: {
+		url: string;
+		hash: string;
+	};
 }
 
 const getPages = ( siteId: number, query = '' ) => {
@@ -59,7 +62,8 @@ export const useSitePages = ( { query = '' } ) => {
 	} );
 
 	const { getSiteSetting } = useSiteSettings( site?.slug );
-	const homePagePerformanceUrl = getSiteSetting( 'wpcom_performance_url' );
+	const homePagePerformanceUrl: SitePage[ 'wpcom_performance_url' ] =
+		getSiteSetting( 'wpcom_performance_url' ) || undefined;
 
 	const pages = useMemo( () => {
 		if ( ! query ) {
@@ -68,7 +72,7 @@ export const useSitePages = ( { query = '' } ) => {
 					url: '/',
 					label: __( 'Home' ),
 					value: 'home',
-					wpcom_performance_url: homePagePerformanceUrl || undefined,
+					wpcom_performance_url: homePagePerformanceUrl,
 				},
 				...( data ?? [] ),
 			];

client/site-performance/site-performance.tsx

@@ -1,11 +1,31 @@
+import page from '@automattic/calypso-router';
+import { useDebouncedInput } from '@wordpress/compose';
 import { translate } from 'i18n-calypso';
+import { useMemo, useState } from 'react';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import NavigationHeader from 'calypso/components/navigation-header';
+import { useSelector } from 'calypso/state';
+import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import { PageSelector } from './components/PageSelector';
-import { DeviceTabControls } from './components/device-tab-control';
+import { PerformanceReport } from './components/PerformanceReport';
+import { DeviceTabControls, Tab } from './components/device-tab-control';
+import { useSitePages } from './hooks/useSitePages';
+
 import './style.scss';
 
 export const SitePerformance = () => {
+	const [ activeTab, setActiveTab ] = useState< Tab >( 'mobile' );
+
+	const queryParams = useSelector( getCurrentQueryArguments );
+	const [ , setQuery, query ] = useDebouncedInput();
+	const pages = useSitePages( { query } );
+
+	const currentPageId = queryParams?.page_id?.toString();
+
+	const wpcom_performance_url = useMemo( () => {
+		return pages.find( ( page ) => page.value === currentPageId )?.wpcom_performance_url;
+	}, [ pages, currentPageId ] );
+
 	return (
 		<div className="site-performance">
 			<div className="site-performance-device-tab-controls__container">
@@ -21,10 +41,25 @@ export const SitePerformance = () => {
 						}
 					) }
 				/>
-				<PageSelector />
-				<DeviceTabControls onDeviceTabChange={ () => {} } />
+				<PageSelector
+					onFilterValueChange={ setQuery }
+					options={ pages }
+					onChange={ ( page_id ) => {
+						const url = new URL( window.location.href );
+
+						if ( page_id ) {
+							url.searchParams.set( 'page_id', page_id );
+						} else {
+							url.searchParams.delete( 'page_id' );
+						}
+
+						page.replace( url.pathname + url.search );
+					} }
+					value={ currentPageId }
+				/>
+				<DeviceTabControls onDeviceTabChange={ setActiveTab } value={ activeTab } />
 			</div>
-			<div>Peformance insights</div>
+			<PerformanceReport wpcom_performance_url={ wpcom_performance_url } activeTab={ activeTab } />
 		</div>
 	);
 };