feat(profiling) add function metrics table (#76110)

JonasBa · web-flow · commit 9713e5cc3051 · 2024-08-15T09:39:19.000-04:00
First pass at adding function metrics table. This just renders a table
with the function metrics and is missing time series and better linking
to examples
diff --git a/static/app/types/profiling.d.ts b/static/app/types/profiling.d.ts
@@ -217,6 +217,20 @@ declare namespace Profiling {
     scriptId?: number;
   };
 
+  type FunctionMetric = {
+    avg: number;
+    count: number;
+    examples: ProfileReference[];
+    fingerprint: number;
+    in_app: boolean;
+    name: string;
+    p75: number;
+    p95: number;
+    p99: number;
+    package: string;
+    sum: number;
+  };
+
   type ProfileInput =
     | Profiling.Schema
     | JSSelfProfiling.Trace
@@ -286,5 +300,6 @@ declare namespace Profiling {
       profiles?: ReadonlyArray<ProfileReference>;
     };
     activeProfileIndex?: number;
+    metrics?: FunctionMetric[];
   }
 }
diff --git a/static/app/utils/profiling/hooks/useAggregateFlamegraphQuery.ts b/static/app/utils/profiling/hooks/useAggregateFlamegraphQuery.ts
@@ -12,6 +12,7 @@ interface BaseAggregateFlamegraphQueryParameters {
   datetime?: PageFilters['datetime'];
   enabled?: boolean;
   environments?: PageFilters['environments'];
+  metrics?: true;
   projects?: PageFilters['projects'];
 }
 
@@ -30,6 +31,7 @@ interface TransactionsAggregateFlamegraphQueryParameters
 
 interface ProfilesAggregateFlamegraphQueryParameters
   extends BaseAggregateFlamegraphQueryParameters {
+  // query is not supported when querying from profiles
   dataSource: 'profiles';
 }
 
@@ -46,7 +48,7 @@ export type UseAggregateFlamegraphQueryResult = UseApiQueryResult<
 export function useAggregateFlamegraphQuery(
   props: AggregateFlamegraphQueryParameters
 ): UseAggregateFlamegraphQueryResult {
-  const {dataSource, datetime, enabled, environments, projects} = props;
+  const {dataSource, metrics, datetime, enabled, environments, projects} = props;
 
   let fingerprint: string | undefined = undefined;
   let query: string | undefined = undefined;
@@ -62,7 +64,9 @@ export function useAggregateFlamegraphQuery(
   const {selection} = usePageFilters();
 
   const endpointOptions = useMemo(() => {
-    const params = {
+    const params: {
+      query: Record<string, any>;
+    } = {
       query: {
         project: projects ?? selection.projects,
         environment: environments ?? selection.environments,
@@ -73,8 +77,21 @@ export function useAggregateFlamegraphQuery(
       },
     };
 
+    if (metrics) {
+      params.query.expand = 'metrics';
+    }
+
     return params;
-  }, [dataSource, datetime, environments, projects, fingerprint, query, selection]);
+  }, [
+    dataSource,
+    datetime,
+    environments,
+    projects,
+    fingerprint,
+    query,
+    metrics,
+    selection,
+  ]);
 
   return useApiQuery<Profiling.Schema>(
     [`/organizations/${organization.slug}/profiling/flamegraph/`, endpointOptions],
diff --git a/static/app/views/profiling/content.tsx b/static/app/views/profiling/content.tsx
@@ -46,6 +46,7 @@ import {LandingWidgetSelector} from './landing/landingWidgetSelector';
 import {ProfilesChart} from './landing/profileCharts';
 import {ProfilesChartWidget} from './landing/profilesChartWidget';
 import {ProfilingSlowestTransactionsPanel} from './landing/profilingSlowestTransactionsPanel';
+import {SlowestFunctionsTable} from './landing/slowestFunctionsTable';
 import {ProfilingOnboardingPanel} from './profilingOnboardingPanel';
 
 const LEFT_WIDGET_CURSOR = 'leftCursor';
@@ -478,7 +479,18 @@ function ProfilingTransactionsContent(props: ProfilingTabContentProps) {
         <ProfilingOnboardingCTA />
       ) : (
         <Fragment>
-          {organization.features.includes('profiling-global-suspect-functions') ? (
+          {organization.features.includes('continuous-profiling-compat') ? (
+            <Fragment>
+              <ProfilesChartWidget
+                chartHeight={150}
+                referrer="api.profiling.landing-chart"
+                userQuery={query}
+                selection={selection}
+                continuousProfilingCompat={continuousProfilingCompat}
+              />
+              <SlowestFunctionsTable />
+            </Fragment>
+          ) : organization.features.includes('profiling-global-suspect-functions') ? (
             <Fragment>
               <ProfilesChartWidget
                 chartHeight={150}
diff --git a/static/app/views/profiling/landing/slowestFunctionsTable.spec.tsx b/static/app/views/profiling/landing/slowestFunctionsTable.spec.tsx
@@ -0,0 +1,187 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {SlowestFunctionsTable} from 'sentry/views/profiling/landing/slowestFunctionsTable';
+
+describe('SlowestFunctionsTable', () => {
+  it('shows loading state', () => {
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      body: [],
+    });
+
+    render(<SlowestFunctionsTable />);
+    expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+  });
+
+  it('shows error state', async () => {
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      body: [],
+      statusCode: 500,
+    });
+
+    render(<SlowestFunctionsTable />);
+    expect(await screen.findByTestId('error-indicator')).toBeInTheDocument();
+  });
+
+  it('shows no functions state', async () => {
+    // @ts-expect-error partial schema mock
+    const schema: Profiling.Schema = {
+      metrics: [],
+    };
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      match: [
+        MockApiClient.matchQuery({
+          expand: 'metrics',
+        }),
+      ],
+      body: schema,
+    });
+
+    render(<SlowestFunctionsTable />);
+    expect(await screen.findByText('No functions found')).toBeInTheDocument();
+  });
+  it('renders function fields', async () => {
+    // @ts-expect-error partial schema mock
+    const schema: Profiling.Schema = {
+      metrics: [
+        {
+          name: 'slow-function',
+          package: 'slow-package',
+          p75: 1500 * 1e6,
+          p95: 2000 * 1e6,
+          p99: 3000 * 1e6,
+          sum: 60_000 * 1e6,
+          count: 5000,
+          avg: 0.5 * 1e6,
+          in_app: true,
+          fingerprint: 12345,
+          examples: [
+            {
+              project_id: 1,
+              profile_id: 'profile-id',
+            },
+          ],
+        },
+      ],
+    };
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      match: [
+        MockApiClient.matchQuery({
+          expand: 'metrics',
+        }),
+      ],
+      body: schema,
+    });
+
+    render(<SlowestFunctionsTable />);
+    for (const value of [
+      'slow-function',
+      'slow-package',
+      '5k',
+      '1.50s',
+      '2.00s',
+      '3.00s',
+      '1.00min',
+    ]) {
+      expect(await screen.findByText(value)).toBeInTheDocument();
+    }
+  });
+  it('paginates response', async () => {
+    // @ts-expect-error partial schema mock
+    const schema: Profiling.Schema = {
+      metrics: [],
+    };
+
+    for (let i = 0; i < 10; i++) {
+      schema.metrics?.push({
+        name: 'slow-function',
+        package: 'slow-package',
+        p75: 1500 * 1e6,
+        p95: 2000 * 1e6,
+        p99: 3000 * 1e6,
+        sum: 60_000 * 1e6,
+        count: 5000,
+        avg: 0.5 * 1e6,
+        in_app: true,
+        fingerprint: 12345,
+        examples: [
+          {
+            project_id: 1,
+            profile_id: 'profile-id',
+          },
+        ],
+      });
+    }
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      match: [
+        MockApiClient.matchQuery({
+          expand: 'metrics',
+        }),
+      ],
+      body: schema,
+    });
+
+    render(<SlowestFunctionsTable />);
+    expect(await screen.findAllByText('slow-function')).toHaveLength(5);
+  });
+
+  it('paginates results', async () => {
+    // @ts-expect-error partial schema mock
+    const schema: Profiling.Schema = {
+      metrics: [],
+    };
+
+    for (let i = 0; i < 10; i++) {
+      schema.metrics?.push({
+        name: 'slow-function-' + i,
+        package: 'slow-package',
+        p75: 1500 * 1e6,
+        p95: 2000 * 1e6,
+        p99: 3000 * 1e6,
+        sum: 60_000 * 1e6,
+        count: 5000,
+        avg: 0.5 * 1e6,
+        in_app: true,
+        fingerprint: 12345,
+        examples: [
+          {
+            project_id: 1,
+            profile_id: 'profile-id',
+          },
+        ],
+      });
+    }
+
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/profiling/flamegraph/',
+      match: [
+        MockApiClient.matchQuery({
+          expand: 'metrics',
+        }),
+      ],
+      body: schema,
+    });
+
+    render(<SlowestFunctionsTable />);
+    expect(await screen.findAllByText('slow-package')).toHaveLength(5);
+
+    userEvent.click(screen.getByLabelText('Next'));
+    for (let i = 6; i < 10; i++) {
+      expect(await screen.findByText('slow-function-' + i)).toBeInTheDocument();
+    }
+    expect(screen.getByLabelText('Next')).toBeDisabled();
+
+    userEvent.click(screen.getByLabelText('Previous'));
+    for (let i = 0; i < 5; i++) {
+      expect(await screen.findByText('slow-function-' + i)).toBeInTheDocument();
+    }
+    expect(screen.getByLabelText('Previous')).toBeDisabled();
+  });
+});
diff --git a/static/app/views/profiling/landing/slowestFunctionsTable.tsx b/static/app/views/profiling/landing/slowestFunctionsTable.tsx
