[Perfomance] Add is_initial_load meta

src/core/packages/analytics/browser-internal/src/track_performance_measure_entries.ts

@@ -72,9 +72,9 @@ export function trackPerformanceMeasureEntries(analytics: AnalyticsClient, isDev
             duration,
             ...customMetrics,
             meta: {
-              target,
               query_range_secs: meta?.queryRangeSecs,
               query_offset_secs: meta?.queryOffsetSecs,
+              is_initial_load: meta?.isInitialLoad,
             },
           });
         } catch (error) {

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

@@ -12,24 +12,25 @@ import {
   getOffsetFromNowInSeconds,
   getTimeDifferenceInSeconds,
 } from '@kbn/timerange';
-import { perfomanceMarkers } from '../../performance_markers';
 import { EventData } from '../performance_context';
+import { perfomanceMarkers } from '../../performance_markers';
 
 interface PerformanceMeta {
   queryRangeSecs: number;
   queryOffsetSecs: number;
+  isInitialLoad?: boolean;
 }
 
-export function measureInteraction() {
+export function measureInteraction(pathname: string) {
   performance.mark(perfomanceMarkers.startPageChange);
-  const trackedRoutes: string[] = [];
+
   return {
     /**
      * Marks the end of the page ready state and measures the performance between the start of the page change and the end of the page ready state.
      * @param pathname - The pathname of the page.
      * @param customMetrics - Custom metrics to be included in the performance measure.
      */
-    pageReady(pathname: string, eventData?: EventData) {
+    pageReady(eventData?: EventData) {
       let performanceMeta: PerformanceMeta | undefined;
       performance.mark(perfomanceMarkers.endPageReady);
 
@@ -49,18 +50,44 @@ export function measureInteraction() {
         };
       }
 
-      if (!trackedRoutes.includes(pathname)) {
-        performance.measure(pathname, {
+      if (
+        performance.getEntriesByName(perfomanceMarkers.startPageChange).length > 0 &&
+        performance.getEntriesByName(perfomanceMarkers.endPageReady).length > 0
+      ) {
+        performance.measure(`[ttfmp:initial] - ${pathname}`, {
           detail: {
             eventName: 'kibana:plugin_render_time',
             type: 'kibana:performance',
             customMetrics: eventData?.customMetrics,
-            meta: performanceMeta,
+            meta: { ...performanceMeta, isInitialLoad: true },
           },
           start: perfomanceMarkers.startPageChange,
           end: perfomanceMarkers.endPageReady,
         });
-        trackedRoutes.push(pathname);
+
+        // Clean up the marks once the measure is done
+        performance.clearMarks(perfomanceMarkers.startPageChange);
+        performance.clearMarks(perfomanceMarkers.endPageReady);
+      }
+
+      if (
+        performance.getEntriesByName(perfomanceMarkers.startPageRefresh).length > 0 &&
+        performance.getEntriesByName(perfomanceMarkers.endPageReady).length > 0
+      ) {
+        performance.measure(`[ttfmp:refresh] - ${pathname}`, {
+          detail: {
+            eventName: 'kibana:plugin_render_time',
+            type: 'kibana:performance',
+            customMetrics: eventData?.customMetrics,
+            meta: { ...performanceMeta, isInitialLoad: false },
+          },
+          start: perfomanceMarkers.startPageRefresh,
+          end: perfomanceMarkers.endPageReady,
+        });
+
+        // // Clean up the marks once the measure is done
+        performance.clearMarks(perfomanceMarkers.startPageRefresh);
+        performance.clearMarks(perfomanceMarkers.endPageReady);
       }
     },
   };

src/platform/packages/shared/kbn-ebt-tools/src/performance_metrics/context/measure_interaction/measure_interaction.test.tsx

@@ -22,14 +22,16 @@ describe('measureInteraction', () => {
   });
 
   it('should mark the start of the page change', () => {
-    measureInteraction();
+    const pathname = '/test-path';
+    measureInteraction(pathname);
     expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.startPageChange);
   });
 
   it('should mark the end of the page ready state and measure performance', () => {
-    const interaction = measureInteraction();
     const pathname = '/test-path';
-    interaction.pageReady(pathname);
+    const interaction = measureInteraction(pathname);
+
+    interaction.pageReady();
 
     expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.endPageReady);
     expect(performance.measure).toHaveBeenCalledWith(pathname, {
@@ -43,14 +45,14 @@ describe('measureInteraction', () => {
   });
 
   it('should include custom metrics and meta in the performance measure', () => {
-    const interaction = measureInteraction();
     const pathname = '/test-path';
+    const interaction = measureInteraction(pathname);
     const eventData = {
       customMetrics: { key1: 'foo-metric', value1: 100 },
       meta: { rangeFrom: 'now-15m', rangeTo: 'now' },
     };
 
-    interaction.pageReady(pathname, eventData);
+    interaction.pageReady(eventData);
 
     expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.endPageReady);
     expect(performance.measure).toHaveBeenCalledWith(pathname, {
@@ -61,6 +63,7 @@ describe('measureInteraction', () => {
         meta: {
           queryRangeSecs: 900,
           queryOffsetSecs: 0,
+          isInitialLoad: true,
         },
       },
       end: 'end::pageReady',
@@ -69,15 +72,15 @@ describe('measureInteraction', () => {
   });
 
   it('should handle absolute date format correctly', () => {
-    const interaction = measureInteraction();
     const pathname = '/test-path';
+    const interaction = measureInteraction(pathname);
     jest.spyOn(global.Date, 'now').mockReturnValue(1733704200000); // 2024-12-09T00:30:00Z
 
     const eventData = {
       meta: { rangeFrom: '2024-12-09T00:00:00Z', rangeTo: '2024-12-09T00:30:00Z' },
     };
 
-    interaction.pageReady(pathname, eventData);
+    interaction.pageReady(eventData);
 
     expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.endPageReady);
     expect(performance.measure).toHaveBeenCalledWith(pathname, {
@@ -88,6 +91,7 @@ describe('measureInteraction', () => {
         meta: {
           queryRangeSecs: 1800,
           queryOffsetSecs: 0,
+          isInitialLoad: true,
         },
       },
       end: 'end::pageReady',
@@ -96,15 +100,15 @@ describe('measureInteraction', () => {
   });
 
   it('should handle negative offset when rangeTo is in the past', () => {
-    const interaction = measureInteraction();
     const pathname = '/test-path';
+    const interaction = measureInteraction(pathname);
     jest.spyOn(global.Date, 'now').mockReturnValue(1733704200000); // 2024-12-09T00:30:00Z
 
     const eventData = {
       meta: { rangeFrom: '2024-12-08T00:00:00Z', rangeTo: '2024-12-09T00:00:00Z' },
     };
 
-    interaction.pageReady(pathname, eventData);
+    interaction.pageReady(eventData);
 
     expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.endPageReady);
     expect(performance.measure).toHaveBeenCalledWith(pathname, {
@@ -115,6 +119,7 @@ describe('measureInteraction', () => {
         meta: {
           queryRangeSecs: 86400,
           queryOffsetSecs: -1800,
+          isInitialLoad: true,
         },
       },
       end: 'end::pageReady',
@@ -123,15 +128,16 @@ describe('measureInteraction', () => {
   });
 
   it('should handle positive offset when rangeTo is in the future', () => {
-    const interaction = measureInteraction();
     const pathname = '/test-path';
+
+    const interaction = measureInteraction(pathname);
     jest.spyOn(global.Date, 'now').mockReturnValue(1733704200000); // 2024-12-09T00:30:00Z
 
     const eventData = {
       meta: { rangeFrom: '2024-12-08T01:00:00Z', rangeTo: '2024-12-09T01:00:00Z' },
     };
 
-    interaction.pageReady(pathname, eventData);
+    interaction.pageReady(eventData);
 
     expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.endPageReady);
     expect(performance.measure).toHaveBeenCalledWith(pathname, {
@@ -142,20 +148,40 @@ describe('measureInteraction', () => {
         meta: {
           queryRangeSecs: 86400,
           queryOffsetSecs: 1800,
+          isInitialLoad: true,
         },
       },
       end: 'end::pageReady',
       start: 'start::pageChange',
     });
   });
 
-  it('should not measure the same route twice', () => {
-    const interaction = measureInteraction();
+  it('should set isInitialLoad to false on subsequent pageReady calls', () => {
     const pathname = '/test-path';
+    const interaction = measureInteraction(pathname);
+    jest.spyOn(global.Date, 'now').mockReturnValue(1733704200000); // 2024-12-09T00:30:00Z
 
-    interaction.pageReady(pathname);
-    interaction.pageReady(pathname);
+    const eventData = {
+      meta: { rangeFrom: '2024-12-08T01:00:00Z', rangeTo: '2024-12-09T01:00:00Z' },
+    };
+
+    interaction.pageReady(eventData);
+    interaction.pageReady(eventData);
 
-    expect(performance.measure).toHaveBeenCalledTimes(1);
+    expect(performance.mark).toHaveBeenCalledWith(perfomanceMarkers.endPageReady);
+    expect(performance.measure).toHaveBeenCalledWith(pathname, {
+      detail: {
+        eventName: 'kibana:plugin_render_time',
+        type: 'kibana:performance',
+        customMetrics: undefined,
+        meta: {
+          queryRangeSecs: 86400,
+          queryOffsetSecs: 1800,
+          isInitialLoad: false,
+        },
+      },
+      end: 'end::pageReady',
+      start: 'start::pageChange',
+    });
   });
 });

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

@@ -13,6 +13,7 @@ import { useLocation } from 'react-router-dom';
 import { PerformanceApi, PerformanceContext } from './use_performance_context';
 import { PerformanceMetricEvent } from '../../performance_metric_events';
 import { measureInteraction } from './measure_interaction';
+import { perfomanceMarkers } from '../performance_markers';
 
 export type CustomMetrics = Omit<PerformanceMetricEvent, 'eventName' | 'meta' | 'duration'>;
 
@@ -28,7 +29,8 @@ export interface EventData {
 export function PerformanceContextProvider({ children }: { children: React.ReactElement }) {
   const [isRendered, setIsRendered] = useState(false);
   const location = useLocation();
-  const interaction = measureInteraction();
+
+  const interaction = useMemo(() => measureInteraction(location.pathname), [location.pathname]);
 
   React.useEffect(() => {
     afterFrame(() => {
@@ -44,11 +46,14 @@ export function PerformanceContextProvider({ children }: { children: React.React
     () => ({
       onPageReady(eventData) {
         if (isRendered) {
-          interaction.pageReady(location.pathname, eventData);
+          interaction.pageReady(eventData);
         }
       },
+      markPerformanceRefreshStart() {
+        performance.mark(perfomanceMarkers.startPageRefresh);
+      },
     }),
-    [isRendered, location.pathname, interaction]
+    [isRendered, interaction]
   );
 
   return <PerformanceContext.Provider value={api}>{children}</PerformanceContext.Provider>;

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

@@ -15,6 +15,19 @@ export interface PerformanceApi {
    * @param eventData - Data to send with the performance measure, conforming the structure of a {@link EventData}.
    */
   onPageReady(eventData?: EventData): void;
+  /**
+   * Marks the start of a page refresh event for performance tracking.
+   * This method adds a performance marker start::pageRefresh to indicate when a page refresh begins.
+   *
+   * Usage:
+   * ```ts
+   * markPerformanceRefreshStart();
+   * ```
+   *
+   * The marker set by this function can later be used in performance measurements
+   * along with an end marker end::pageReady to determine the total refresh duration.
+   */
+  markPerformanceRefreshStart(): void;
 }
 
 export const PerformanceContext = createContext<PerformanceApi | undefined>(undefined);

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

@@ -11,4 +11,5 @@
 export const perfomanceMarkers = {
   startPageChange: 'start::pageChange',
   endPageReady: 'end::pageReady',
+  startPageRefresh: 'start::pageRefresh',
 };

x-pack/solutions/observability/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx

@@ -8,10 +8,10 @@
 import { EuiBadge, EuiIconTip, EuiToolTip, RIGHT_ALIGNMENT } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from '@emotion/styled';
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { apmEnableTableSearchBar } from '@kbn/observability-plugin/common';
 import { usePerformanceContext } from '@kbn/ebt-tools';
-import { FETCH_STATUS, isPending } from '../../../../hooks/use_fetcher';
+import { isPending, isSuccess } from '../../../../hooks/use_fetcher';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { asBigNumber } from '../../../../../common/utils/formatters';
 import { useAnyOfApmParams } from '../../../../hooks/use_apm_params';
@@ -85,7 +85,6 @@ export function ErrorGroupList({
   const { offset, rangeFrom, rangeTo } = query;
 
   const [renderedItems, setRenderedItems] = useState<ErrorGroupItem[]>([]);
-  const hasTableLoaded = useRef(false);
   const [sorting, setSorting] = useState<TableOptions<ErrorGroupItem>['sort']>(defaultSorting);
 
   const {
@@ -103,11 +102,7 @@ export function ErrorGroupList({
   useEffect(() => {
     // this component is used both for the service overview tab and the errors tab,
     // onLoadTable will be defined if it's the service overview tab
-    if (
-      mainStatisticsStatus === FETCH_STATUS.SUCCESS &&
-      detailedStatisticsStatus === FETCH_STATUS.SUCCESS &&
-      !hasTableLoaded.current
-    ) {
+    if (isSuccess(mainStatisticsStatus) && isSuccess(detailedStatisticsStatus)) {
       if (onLoadTable) {
         onLoadTable();
       } else {
@@ -118,15 +113,14 @@ export function ErrorGroupList({
           },
         });
       }
-      hasTableLoaded.current = true;
     }
   }, [
     mainStatisticsStatus,
     detailedStatisticsStatus,
-    onLoadTable,
     rangeFrom,
     rangeTo,
     onPageReady,
+    onLoadTable,
   ]);
 
   const columns = useMemo(() => {