[EBT] Add Meta description for EBT metrics on management pages (#225095)

## Summary

Resolves https://github.com/elastic/observability-dev/issues/4556.

This PR will amend the existing EBT `onPageReady` tracking for TTFCP
with some descriptions to help consumers of the telemetry data
understand the context around what we are tracking for this timing data.

Also exports the `Meta` type for re-use in a Synthetics-specific
implementation that needs to accept this parameter.

src/platform/packages/shared/kbn-ebt-tools/src/performance_metrics/context/types.ts

@@ -10,7 +10,18 @@
 type ApmPageId = 'services' | 'traces' | 'dependencies';
 type InfraPageId = 'hosts';
 type OnboardingPageId = 'onboarding';
+type AlertingPageId = 'alerts';
+type AlertDetailsPageId = 'alert_details';
+type SloPageId = 'slos';
+type SyntheticsPageId = 'synthetics';
 
-export type Key = `${ApmPageId}` | `${InfraPageId}` | `${OnboardingPageId}`;
+export type Key =
+  | `${ApmPageId}`
+  | `${InfraPageId}`
+  | `${OnboardingPageId}`
+  | `${AlertingPageId}`
+  | `${AlertDetailsPageId}`
+  | `${SloPageId}`
+  | `${SyntheticsPageId}`;
 
 export type DescriptionWithPrefix = `[ttfmp_${Key}] ${string}`;

src/platform/packages/shared/kbn-ebt-tools/src/performance_metrics/index.tsx

@@ -24,4 +24,5 @@ function dynamic<TElement extends React.ComponentType<any>, TRef = {}>(loader: L
 export { usePerformanceContext } from './context/use_performance_context';
 export { perfomanceMarkers } from './performance_markers';
 export { usePageReady } from './context/use_page_ready';
+export { type Meta } from './context/performance_context';
 export const PerformanceContextProvider = dynamic(() => import('./context/performance_context'));

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.tsx

@@ -195,6 +195,10 @@ export function AlertDetails() {
   usePageReady({
     isRefreshing: isLoading,
     isReady: !isLoading && !!alertDetail && activeTabId === 'overview',
+    meta: {
+      description:
+        '[ttfmp_alert_details] The Observability Alert Details overview page has loaded successfully.',
+    },
   });
 
   if (isLoading) {

x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx

@@ -136,6 +136,7 @@ function InternalAlertsPage() {
     meta: {
       rangeFrom: alertSearchBarStateProps.rangeFrom,
       rangeTo: alertSearchBarStateProps.rangeTo,
+      description: '[ttfmp_alerts] The Observability Alerts page has loaded a table of alerts.',
     },
   });
 

x-pack/solutions/observability/plugins/slo/public/pages/slo_details/slo_details.tsx

@@ -108,6 +108,9 @@ export function SloDetailsPage() {
   usePageReady({
     isReady: !isLoading && slo !== undefined,
     isRefreshing: isRefetching,
+    meta: {
+      description: '[ttfmp_slos] The SLO details page has loaded and SLO data is present.',
+    },
   });
 
   useBreadcrumbs(getBreadcrumbs(basePath, slo), { serverless });

x-pack/solutions/observability/plugins/slo/public/pages/slos/components/slo_list.tsx

@@ -82,6 +82,13 @@ export function SloList() {
   usePageReady({
     isReady: !isLoading && sloList !== undefined,
     isRefreshing: isLoading,
+    customMetrics: {
+      key1: 'slo_list_count',
+      value1: sloList?.total ?? 0,
+    },
+    meta: {
+      description: '[ttfmp_slos] The SLOs list has finished loading.',
+    },
   });
 
   return (

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_container.tsx

@@ -39,7 +39,9 @@ export const MonitorListContainer = ({
 
   const { status: overviewStatus } = useSelector(selectOverviewStatus);
 
-  useSyntheticsPageReady();
+  useSyntheticsPageReady({
+    meta: { description: '[ttfmp_synthetics] Synthetics monitor list has loaded.' },
+  });
 
   // TODO: Display inline errors in the management table
 

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview_page.tsx

@@ -42,7 +42,9 @@ export const OverviewPage: React.FC = () => {
 
   const { loading: locationsLoading, locationsLoaded } = useSelector(selectServiceLocationsState);
 
-  useSyntheticsPageReady();
+  useSyntheticsPageReady({
+    meta: { description: '[ttfmp_synthetics] Synthetics overview page has loaded monitor data.' },
+  });
 
   useEffect(() => {
     if (!locationsLoading && !locationsLoaded) {

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/hooks/use_synthetics_page_ready.ts

@@ -6,10 +6,10 @@
  */
 
 import { useDispatch, useSelector } from 'react-redux';
-import { usePageReady } from '@kbn/ebt-tools';
+import { usePageReady, type Meta } from '@kbn/ebt-tools';
 import { initialLoadReported, selectOverviewStatus } from '../state/overview_status';
 
-export const useSyntheticsPageReady = () => {
+export const useSyntheticsPageReady = (props?: { meta?: Meta }) => {
   const {
     loaded,
     isInitialLoad,
@@ -29,5 +29,6 @@ export const useSyntheticsPageReady = () => {
     // This will collect the metric even when we are periodically refreshing the data in the background
     // and not only when the user decides to refresh the data, the action is the same
     isRefreshing: loaded && isLoadingOverviewStatus,
+    meta: props?.meta,
   });
 };