From c682722c94469a99af196cec2a4cf33cdad633ce Mon Sep 17 00:00:00 2001 From: Tomasz Misiukiewicz Date: Wed, 17 Jan 2024 12:22:35 +0100 Subject: [PATCH 1/4] add metrics for SearchPage --- src/CONST.ts | 2 ++ src/components/OptionsList/BaseOptionsList.tsx | 10 ++++++++++ src/libs/OptionsListUtils.js | 7 ++++++- src/pages/home/sidebar/SidebarLinks.js | 4 ++++ 4 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index bc56e345de7c..552c94ceaf6c 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -716,6 +716,8 @@ const CONST = { REPORT_INITIAL_RENDER: 'report_initial_render', SWITCH_REPORT: 'switch_report', SIDEBAR_LOADED: 'sidebar_loaded', + OPEN_SEARCH: 'open_search', + LOAD_SEARCH_OPTIONS: 'load_search_options', COLD: 'cold', WARM: 'warm', REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500, diff --git a/src/components/OptionsList/BaseOptionsList.tsx b/src/components/OptionsList/BaseOptionsList.tsx index c1e4562a0c2d..d056b858b3e8 100644 --- a/src/components/OptionsList/BaseOptionsList.tsx +++ b/src/components/OptionsList/BaseOptionsList.tsx @@ -9,6 +9,7 @@ import SectionList from '@components/SectionList'; import Text from '@components/Text'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; +import Performance from '@libs/Performance'; import type {OptionData} from '@libs/ReportUtils'; import StringUtils from '@libs/StringUtils'; import variables from '@styles/variables'; @@ -108,6 +109,15 @@ function BaseOptionsList( flattenedData.current = buildFlatSectionArray(); }); + useEffect(() => { + if (isLoading) { + return; + } + + // Mark the end of the search page load time. This data is collected only for Search page. + Performance.markEnd(CONST.TIMING.OPEN_SEARCH); + }, [isLoading]); + const onViewableItemsChanged = () => { if (didLayout.current || !onLayout) { return; diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 2973228af51f..b0a13fda9df6 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -23,6 +23,7 @@ import * as ReportUtils from './ReportUtils'; import * as TaskUtils from './TaskUtils'; import * as TransactionUtils from './TransactionUtils'; import * as UserUtils from './UserUtils'; +import Performance from './Performance'; /** * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can @@ -1651,7 +1652,8 @@ function getOptions( * @returns {Object} */ function getSearchOptions(reports, personalDetails, searchValue = '', betas) { - return getOptions(reports, personalDetails, { + Performance.markStart(CONST.TIMING.LOAD_SEARCH_OPTIONS); + const options = getOptions(reports, personalDetails, { betas, searchInputValue: searchValue.trim(), includeRecentReports: true, @@ -1666,6 +1668,9 @@ function getSearchOptions(reports, personalDetails, searchValue = '', betas) { includeMoneyRequests: true, includeTasks: true, }); + Performance.markEnd(CONST.TIMING.LOAD_SEARCH_OPTIONS); + + return options; } /** diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index ffcba2048d18..d2a80e713f5a 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -29,6 +29,7 @@ import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import Performance from '@libs/Performance'; import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; const basePropTypes = { @@ -123,6 +124,9 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority return; } + // Capture metric for opening the search page + Performance.markStart(CONST.TIMING.OPEN_SEARCH) + Navigation.navigate(ROUTES.SEARCH); }, [isCreateMenuOpen]); From ed557d57d7bf9f27b04c388614f52741d1192e0e Mon Sep 17 00:00:00 2001 From: Tomasz Misiukiewicz Date: Wed, 17 Jan 2024 12:22:36 +0100 Subject: [PATCH 2/4] lint files --- src/libs/OptionsListUtils.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index b0a13fda9df6..5b494cb09254 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -14,6 +14,7 @@ import * as Localize from './Localize'; import * as LoginUtils from './LoginUtils'; import ModifiedExpenseMessage from './ModifiedExpenseMessage'; import Navigation from './Navigation/Navigation'; +import Performance from './Performance'; import Permissions from './Permissions'; import * as PersonalDetailsUtils from './PersonalDetailsUtils'; import * as PhoneNumber from './PhoneNumber'; @@ -23,7 +24,6 @@ import * as ReportUtils from './ReportUtils'; import * as TaskUtils from './TaskUtils'; import * as TransactionUtils from './TransactionUtils'; import * as UserUtils from './UserUtils'; -import Performance from './Performance'; /** * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index d2a80e713f5a..08791f4e16fd 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -20,6 +20,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Navigation from '@libs/Navigation/Navigation'; import onyxSubscribe from '@libs/onyxSubscribe'; +import Performance from '@libs/Performance'; import SidebarUtils from '@libs/SidebarUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes'; @@ -29,7 +30,6 @@ import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import Performance from '@libs/Performance'; import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; const basePropTypes = { @@ -125,7 +125,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority } // Capture metric for opening the search page - Performance.markStart(CONST.TIMING.OPEN_SEARCH) + Performance.markStart(CONST.TIMING.OPEN_SEARCH); Navigation.navigate(ROUTES.SEARCH); }, [isCreateMenuOpen]); From e4c678f36fb92fa281a093d28abddb6f637c3479 Mon Sep 17 00:00:00 2001 From: Tomasz Misiukiewicz Date: Wed, 17 Jan 2024 13:40:27 +0100 Subject: [PATCH 3/4] use Timing to track metric --- src/components/OptionsList/BaseOptionsList.tsx | 2 ++ src/libs/OptionsListUtils.js | 3 +++ src/pages/home/sidebar/SidebarLinks.js | 2 ++ 3 files changed, 7 insertions(+) diff --git a/src/components/OptionsList/BaseOptionsList.tsx b/src/components/OptionsList/BaseOptionsList.tsx index d056b858b3e8..8cac059436b5 100644 --- a/src/components/OptionsList/BaseOptionsList.tsx +++ b/src/components/OptionsList/BaseOptionsList.tsx @@ -9,6 +9,7 @@ import SectionList from '@components/SectionList'; import Text from '@components/Text'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; +import Timing from '@libs/actions/Timing'; import Performance from '@libs/Performance'; import type {OptionData} from '@libs/ReportUtils'; import StringUtils from '@libs/StringUtils'; @@ -115,6 +116,7 @@ function BaseOptionsList( } // Mark the end of the search page load time. This data is collected only for Search page. + Timing.end(CONST.TIMING.OPEN_SEARCH); Performance.markEnd(CONST.TIMING.OPEN_SEARCH); }, [isLoading]); diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 5b494cb09254..15e2e5ca269c 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -24,6 +24,7 @@ import * as ReportUtils from './ReportUtils'; import * as TaskUtils from './TaskUtils'; import * as TransactionUtils from './TransactionUtils'; import * as UserUtils from './UserUtils'; +import Timing from './actions/Timing'; /** * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can @@ -1652,6 +1653,7 @@ function getOptions( * @returns {Object} */ function getSearchOptions(reports, personalDetails, searchValue = '', betas) { + Timing.start(CONST.TIMING.LOAD_SEARCH_OPTIONS); Performance.markStart(CONST.TIMING.LOAD_SEARCH_OPTIONS); const options = getOptions(reports, personalDetails, { betas, @@ -1668,6 +1670,7 @@ function getSearchOptions(reports, personalDetails, searchValue = '', betas) { includeMoneyRequests: true, includeTasks: true, }); + Timing.end(CONST.TIMING.LOAD_SEARCH_OPTIONS); Performance.markEnd(CONST.TIMING.LOAD_SEARCH_OPTIONS); return options; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 08791f4e16fd..3c7aa4352911 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -30,6 +30,7 @@ import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import Timing from '@libs/actions/Timing'; import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; const basePropTypes = { @@ -125,6 +126,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority } // Capture metric for opening the search page + Timing.start(CONST.TIMING.OPEN_SEARCH); Performance.markStart(CONST.TIMING.OPEN_SEARCH); Navigation.navigate(ROUTES.SEARCH); From ff3da8489fff129872ffc3603d0f82fcb060121a Mon Sep 17 00:00:00 2001 From: Tomasz Misiukiewicz Date: Wed, 17 Jan 2024 13:50:50 +0100 Subject: [PATCH 4/4] lint files --- src/libs/OptionsListUtils.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 15e2e5ca269c..d44df3c6c39c 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -7,6 +7,7 @@ import Onyx from 'react-native-onyx'; import _ from 'underscore'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import Timing from './actions/Timing'; import * as CollectionUtils from './CollectionUtils'; import * as ErrorUtils from './ErrorUtils'; import * as LocalePhoneNumber from './LocalePhoneNumber'; @@ -24,7 +25,6 @@ import * as ReportUtils from './ReportUtils'; import * as TaskUtils from './TaskUtils'; import * as TransactionUtils from './TransactionUtils'; import * as UserUtils from './UserUtils'; -import Timing from './actions/Timing'; /** * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 3c7aa4352911..09362d88555c 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -17,6 +17,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import Timing from '@libs/actions/Timing'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import Navigation from '@libs/Navigation/Navigation'; import onyxSubscribe from '@libs/onyxSubscribe'; @@ -30,7 +31,6 @@ import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import Timing from '@libs/actions/Timing'; import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; const basePropTypes = {