From fa6c7a68f8bab14d3adb1825619ab8724f8d5659 Mon Sep 17 00:00:00 2001
From: Drew Davis <drew.davis@clickhouse.com>
Date: Wed, 5 Aug 2026 11:43:14 -0400
Subject: [PATCH 1/2] fix: Only auto-detect metric tables when the database
 selection changes

---
 ...etric-table-autofill-on-database-change.md |   5 +
 .../SourceForm/MetricTableModelForm.tsx       |  35 ++-
 .../Sources/SourceForm/SourceForm.tsx         |   7 +-
 .../Sources/SourceForm/TableModelForm.tsx     |  10 +-
 .../components/Sources/SourceForm/types.ts    |   2 +
 .../__tests__/MetricTableModelForm.test.tsx   | 260 ++++++++++++++++++
 .../e2e/components/SourceFormComponent.ts     |  68 +++++
 .../features/metric-table-autofill.spec.ts    | 165 +++++++++++
 packages/app/tests/e2e/seed-clickhouse.ts     |  25 ++
 packages/app/tests/e2e/utils/constants.ts     |  10 +
 10 files changed, 582 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/metric-table-autofill-on-database-change.md
 create mode 100644 packages/app/src/components/__tests__/MetricTableModelForm.test.tsx
 create mode 100644 packages/app/tests/e2e/features/metric-table-autofill.spec.ts

diff --git a/.changeset/metric-table-autofill-on-database-change.md b/.changeset/metric-table-autofill-on-database-change.md
new file mode 100644
index 0000000000..cd349fc59c
--- /dev/null
+++ b/.changeset/metric-table-autofill-on-database-change.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: Only auto-detect metric tables when the database selection changes
diff --git a/packages/app/src/components/Sources/SourceForm/MetricTableModelForm.tsx b/packages/app/src/components/Sources/SourceForm/MetricTableModelForm.tsx
index 2a462bc988..5e4021d659 100644
--- a/packages/app/src/components/Sources/SourceForm/MetricTableModelForm.tsx
+++ b/packages/app/src/components/Sources/SourceForm/MetricTableModelForm.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useWatch } from 'react-hook-form';
-import { MetricsDataType } from '@hyperdx/common-utils/dist/types';
+import { MetricsDataType, SourceKind } from '@hyperdx/common-utils/dist/types';
 import { Stack, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
@@ -10,7 +10,7 @@ import { DBTableSelectControlled } from '@/components/DBTableSelect';
 import { SourceSelectControlled } from '@/components/SourceSelect';
 import { useMetadataWithSettings } from '@/hooks/useMetadata';
 import { useMetricsSeriesTableAvailability } from '@/hooks/useMetricsSeriesTableAvailability';
-import { isValidMetricTable } from '@/source';
+import { isValidMetricTable, useSource } from '@/source';
 import { useBrandDisplayName } from '@/theme/ThemeProvider';
 import {
   matchMetricTables,
@@ -21,7 +21,11 @@ import { DEFAULT_DATABASE, OTEL_CLICKHOUSE_EXPRESSIONS } from './constants';
 import { FormRow } from './FormRow';
 import { TableModelProps } from './types';
 
-export function MetricTableModelForm({ control, setValue }: TableModelProps) {
+export function MetricTableModelForm({
+  control,
+  setValue,
+  sourceId,
+}: TableModelProps) {
   const brandName = useBrandDisplayName();
   const { data: team } = api.useTeam();
   const isMetricsSeriesTableEnabled = !!team?.isMetricsSeriesTableEnabled;
@@ -143,10 +147,31 @@ export function MetricTableModelForm({ control, setValue }: TableModelProps) {
     { enabled: !!databaseName && !!connectionId },
   );
 
+  const { data: savedSource } = useSource({ id: sourceId });
+  const savedDatabaseName = savedSource?.from?.databaseName;
+  const wasSavedAsMetricSource = savedSource?.kind === SourceKind.Metric;
+  const isExistingSource = !!sourceId;
+
   const lastAutofillKeyRef = useRef('');
+  const hasLoadedSavedSourceRef = useRef(false);
 
   useEffect(() => {
     const key = `${databaseName}:${connectionId}`;
+
+    if (isExistingSource && !hasLoadedSavedSourceRef.current) {
+      // Until the saved source lands in the form the watched values are still
+      // the new-source defaults, so nothing here reflects a user choice yet.
+      if (!savedSource) return;
+      if (savedDatabaseName && databaseName !== savedDatabaseName) return;
+      hasLoadedSavedSourceRef.current = true;
+      if (wasSavedAsMetricSource) {
+        // Treat the saved database as already handled — only a later switch to
+        // a different database triggers autofill.
+        lastAutofillKeyRef.current = key;
+        return;
+      }
+    }
+
     if (key === lastAutofillKeyRef.current) return; // already ran for this db
 
     const tableNames = tablesData?.data?.map((t: { name: string }) => t.name);
@@ -230,6 +255,10 @@ export function MetricTableModelForm({ control, setValue }: TableModelProps) {
     connectionId,
     metadata,
     isMetricsSeriesTableEnabled,
+    isExistingSource,
+    savedSource,
+    savedDatabaseName,
+    wasSavedAsMetricSource,
   ]);
 
   return (
diff --git a/packages/app/src/components/Sources/SourceForm/SourceForm.tsx b/packages/app/src/components/Sources/SourceForm/SourceForm.tsx
index e1d8a4c36f..4cb391eb76 100644
--- a/packages/app/src/components/Sources/SourceForm/SourceForm.tsx
+++ b/packages/app/src/components/Sources/SourceForm/SourceForm.tsx
@@ -728,7 +728,12 @@ export function TableSourceForm({
           </Button>
         </FormRow>
       </Stack>
-      <TableModelForm control={control} setValue={setValue} kind={kind} />
+      <TableModelForm
+        control={control}
+        setValue={setValue}
+        kind={kind}
+        sourceId={sourceId}
+      />
       <Group justify="flex-end" mt="lg">
         {onCancel && (
           <Button variant="secondary" onClick={onCancel} size="xs">
diff --git a/packages/app/src/components/Sources/SourceForm/TableModelForm.tsx b/packages/app/src/components/Sources/SourceForm/TableModelForm.tsx
index edf7116f8d..4fb5c6d464 100644
--- a/packages/app/src/components/Sources/SourceForm/TableModelForm.tsx
+++ b/packages/app/src/components/Sources/SourceForm/TableModelForm.tsx
@@ -18,10 +18,12 @@ export function TableModelForm({
   control,
   setValue,
   kind,
+  sourceId,
 }: {
   control: Control<TSource>;
   setValue: UseFormSetValue<TSource>;
   kind: SourceKind;
+  sourceId?: string;
 }) {
   switch (kind) {
     case SourceKind.Log:
@@ -31,7 +33,13 @@ export function TableModelForm({
     case SourceKind.Session:
       return <SessionTableModelForm control={control} setValue={setValue} />;
     case SourceKind.Metric:
-      return <MetricTableModelForm control={control} setValue={setValue} />;
+      return (
+        <MetricTableModelForm
+          control={control}
+          setValue={setValue}
+          sourceId={sourceId}
+        />
+      );
     case SourceKind.Promql:
       return <PromqlTableModelForm control={control} setValue={setValue} />;
   }
diff --git a/packages/app/src/components/Sources/SourceForm/types.ts b/packages/app/src/components/Sources/SourceForm/types.ts
index 95b3fde080..4e46912c19 100644
--- a/packages/app/src/components/Sources/SourceForm/types.ts
+++ b/packages/app/src/components/Sources/SourceForm/types.ts
@@ -4,4 +4,6 @@ import { TSource } from '@hyperdx/common-utils/dist/types';
 export interface TableModelProps {
   control: Control<TSource>;
   setValue: UseFormSetValue<TSource>;
+  // Set when editing an existing source
+  sourceId?: string;
 }
diff --git a/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx b/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx
new file mode 100644
index 0000000000..4a38315852
--- /dev/null
+++ b/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx
@@ -0,0 +1,260 @@
+import React, { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
+import { MantineProvider } from '@mantine/core';
+import { render, waitFor } from '@testing-library/react';
+
+import { MetricTableModelForm } from '@/components/Sources/SourceForm/MetricTableModelForm';
+
+import '@testing-library/jest-dom';
+
+// Table lists per database, used by the mocked `useTablesDirect`.
+const TABLES_BY_DB: Record<string, string[]> = {
+  default: ['otel_metrics_gauge', 'otel_metrics_sum'],
+  otel_v2: ['otel_metrics_gauge', 'otel_metrics_sum', 'otel_metrics_histogram'],
+  other_db: [
+    'other_metrics_gauge',
+    'other_metrics_sum',
+    'other_metrics_histogram',
+  ],
+};
+
+let savedSource: TSource | undefined;
+
+jest.mock('@/api', () => ({
+  useTeam: () => ({ data: { isMetricsSeriesTableEnabled: false } }),
+}));
+
+jest.mock('@/clickhouse', () => ({
+  useTablesDirect: ({ database }: { database: string }) => ({
+    data: {
+      data: (TABLES_BY_DB[database] ?? []).map(name => ({ name })),
+    },
+  }),
+}));
+
+jest.mock('@/hooks/useMetadata', () => ({
+  useMetadataWithSettings: () => ({}),
+}));
+
+jest.mock('@/hooks/useMetricsSeriesTableAvailability', () => ({
+  useMetricsSeriesTableAvailability: () => ({
+    status: 'disabled',
+    missingSeriesHashTables: [],
+  }),
+}));
+
+jest.mock('@/source', () => ({
+  isValidMetricTable: jest.fn(() => Promise.resolve(true)),
+  useSource: ({ id }: { id?: string }) => ({
+    data: id ? savedSource : undefined,
+  }),
+}));
+
+jest.mock('@/theme/ThemeProvider', () => ({
+  useBrandDisplayName: () => 'HyperDX',
+}));
+
+jest.mock('@mantine/notifications', () => ({
+  notifications: { show: jest.fn() },
+}));
+
+jest.mock('@/components/DBTableSelect', () => ({
+  DBTableSelectControlled: ({ name }: { name: string }) => <div>{name}</div>,
+}));
+
+jest.mock('@/components/SourceSelect', () => ({
+  SourceSelectControlled: () => <div />,
+}));
+
+const mockSetValue = jest.fn();
+
+// Rendered with a wrapper rather than the global `renderWithMantine` helper so
+// that `rerender` keeps the provider (and the component instance) in place.
+function renderHarness(ui: React.ReactElement) {
+  return render(ui, {
+    wrapper: ({ children }) => <MantineProvider>{children}</MantineProvider>,
+  });
+}
+
+function Harness({
+  databaseName,
+  metricTables,
+  sourceId,
+}: {
+  databaseName: string;
+  metricTables?: Record<string, string>;
+  sourceId?: string;
+}) {
+  const { control, setValue } = useForm<TSource>({
+    defaultValues: {
+      kind: SourceKind.Metric,
+      connection: 'conn-1',
+      from: { databaseName, tableName: '' },
+
+      metricTables: metricTables as any,
+    },
+  });
+
+  // Mirrors how SourceForm's watched database changes — either from the user
+  // picking one, or from the saved source landing in the form.
+  useEffect(() => {
+    setValue('from.databaseName', databaseName);
+  }, [databaseName, setValue]);
+
+  return (
+    <MetricTableModelForm
+      control={control}
+      setValue={mockSetValue}
+      sourceId={sourceId}
+    />
+  );
+}
+
+// The component also pushes the fixed OTEL expressions through setValue; only
+// the table fields are autofill.
+function autofilledTables() {
+  return mockSetValue.mock.calls
+    .filter(
+      ([path]) =>
+        typeof path === 'string' &&
+        (path.startsWith('metricTables.') || path === 'seriesTable'),
+    )
+    .map(([path, value]) => [path, value]);
+}
+
+const SAVED_SOURCE: TSource = {
+  id: 'metric-source-1',
+  kind: SourceKind.Metric,
+  name: 'Metrics',
+  connection: 'conn-1',
+  from: { databaseName: 'otel_v2', tableName: '' },
+  timestampValueExpression: 'TimeUnix',
+  metricTables: {
+    gauge: 'otel_metrics_gauge',
+    sum: 'otel_metrics_sum',
+  } as any,
+} as any;
+
+describe('MetricTableModelForm metric table autofill', () => {
+  beforeEach(() => {
+    mockSetValue.mockClear();
+    savedSource = undefined;
+  });
+
+  it('autofills tables for a new source', async () => {
+    renderHarness(<Harness databaseName="default" />);
+
+    await waitFor(() => {
+      expect(autofilledTables()).toEqual(
+        expect.arrayContaining([
+          ['metricTables.gauge', 'otel_metrics_gauge'],
+          ['metricTables.sum', 'otel_metrics_sum'],
+        ]),
+      );
+    });
+  });
+
+  it('autofills when a new source switches database', async () => {
+    const { rerender } = renderHarness(<Harness databaseName="default" />);
+
+    await waitFor(() => {
+      expect(autofilledTables().length).toBeGreaterThan(0);
+    });
+    mockSetValue.mockClear();
+
+    rerender(<Harness databaseName="otel_v2" />);
+
+    await waitFor(() => {
+      expect(autofilledTables()).toEqual(
+        expect.arrayContaining([
+          ['metricTables.histogram', 'otel_metrics_histogram'],
+        ]),
+      );
+    });
+  });
+
+  it('does not autofill when opening an existing configured source', async () => {
+    // Saved source hasn't loaded yet, so the form still shows the new-source
+    // default database — autofill must not fire against it.
+    const { rerender } = renderHarness(
+      <Harness databaseName="default" sourceId="metric-source-1" />,
+    );
+    await waitFor(() => {
+      expect(mockSetValue).toHaveBeenCalled(); // OTEL expressions applied
+    });
+    expect(autofilledTables()).toEqual([]);
+
+    // Saved source arrives and the form resets to its saved values.
+    savedSource = SAVED_SOURCE;
+    rerender(
+      <Harness
+        databaseName="otel_v2"
+        metricTables={{ gauge: 'otel_metrics_gauge', sum: 'otel_metrics_sum' }}
+        sourceId="metric-source-1"
+      />,
+    );
+
+    // `otel_v2` has an unconfigured histogram table, but opening the source
+    // must leave the form untouched.
+    await waitFor(() => {
+      expect(autofilledTables()).toEqual([]);
+    });
+  });
+
+  it('autofills when an existing configured source switches database', async () => {
+    savedSource = SAVED_SOURCE;
+    const { rerender } = renderHarness(
+      <Harness
+        databaseName="otel_v2"
+        metricTables={{ gauge: 'otel_metrics_gauge', sum: 'otel_metrics_sum' }}
+        sourceId="metric-source-1"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockSetValue).toHaveBeenCalled();
+    });
+    expect(autofilledTables()).toEqual([]);
+
+    // Switching database fills the metric types that are still unset. Types
+    // the user already configured are never overwritten.
+    rerender(
+      <Harness
+        databaseName="other_db"
+        metricTables={{ gauge: 'otel_metrics_gauge', sum: 'otel_metrics_sum' }}
+        sourceId="metric-source-1"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(autofilledTables()).toEqual([
+        ['metricTables.histogram', 'other_metrics_histogram'],
+      ]);
+    });
+  });
+
+  // A saved source of another kind switched over to OTEL Metrics has no metric
+  // tables to preserve, so it autofills like a new source.
+  it('autofills for an existing source switched to the metrics kind', async () => {
+    savedSource = {
+      ...SAVED_SOURCE,
+      kind: SourceKind.Log,
+      metricTables: undefined,
+    } as any;
+
+    renderHarness(
+      <Harness databaseName="otel_v2" sourceId="metric-source-1" />,
+    );
+
+    await waitFor(() => {
+      expect(autofilledTables()).toEqual(
+        expect.arrayContaining([
+          ['metricTables.gauge', 'otel_metrics_gauge'],
+          ['metricTables.histogram', 'otel_metrics_histogram'],
+          ['metricTables.sum', 'otel_metrics_sum'],
+        ]),
+      );
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/components/SourceFormComponent.ts b/packages/app/tests/e2e/components/SourceFormComponent.ts
index 16b4057424..dc4dcb16c3 100644
--- a/packages/app/tests/e2e/components/SourceFormComponent.ts
+++ b/packages/app/tests/e2e/components/SourceFormComponent.ts
@@ -67,4 +67,72 @@ export class SourceFormComponent {
       });
     await expect(notification).toBeVisible({ timeout: 15000 });
   }
+
+  // --- Source settings / metric tables ---
+
+  get nameInput(): Locator {
+    return this.page.locator('input[name="name"]');
+  }
+
+  /** Picks a source kind via the "Source Data Type" radio group. */
+  async selectSourceKind(label: string): Promise<void> {
+    await this.page.getByLabel(label, { exact: true }).click();
+  }
+
+  /**
+   * The Database select. Mantine keeps the form value on a hidden input and
+   * renders a separate combobox for interaction, so clicks have to target the
+   * combobox (its accessible name comes from the "Database" placeholder).
+   */
+  get databaseSelect(): Locator {
+    return this.page.getByRole('combobox', { name: 'Database' });
+  }
+
+  async selectDatabase(databaseName: string): Promise<void> {
+    await this.databaseSelect.click();
+    await this.page
+      .getByRole('option', { name: databaseName, exact: true })
+      .click();
+  }
+
+  /**
+   * Hidden input holding the form value for one OTEL metric type's table
+   * ('gauge', 'sum', ...) — use it to assert values, not to click.
+   */
+  getMetricTableInput(metricType: string): Locator {
+    return this.page.locator(`input[name="metricTables.${metricType}"]`);
+  }
+
+  /**
+   * First metric table combobox (gauge). Disabled while the selected database's
+   * table list loads, so it doubles as a readiness signal for autofill, whose
+   * only input is that list.
+   */
+  private get firstMetricTableSelect(): Locator {
+    return this.page.getByRole('combobox', { name: 'Table' }).first();
+  }
+
+  private get metricTableAutofillNotification(): Locator {
+    return this.page
+      .locator('.mantine-Notification-root')
+      .filter({ hasText: 'Auto-detected metric tables from database.' });
+  }
+
+  async waitForMetricTableAutofill(): Promise<void> {
+    await expect(this.metricTableAutofillNotification).toBeVisible({
+      timeout: 15000,
+    });
+  }
+
+  /**
+   * Asserts metric tables were not autofilled. Anchored on the metric table
+   * select being enabled (the database's table list has loaded) plus an idle
+   * network, so autofill would have had its input and finished validating
+   * candidate tables by the time this resolves.
+   */
+  async expectNoMetricTableAutofill(): Promise<void> {
+    await expect(this.firstMetricTableSelect).toBeEnabled();
+    await this.page.waitForLoadState('networkidle');
+    await expect(this.metricTableAutofillNotification).toHaveCount(0);
+  }
 }
diff --git a/packages/app/tests/e2e/features/metric-table-autofill.spec.ts b/packages/app/tests/e2e/features/metric-table-autofill.spec.ts
new file mode 100644
index 0000000000..b2b5f229f0
--- /dev/null
+++ b/packages/app/tests/e2e/features/metric-table-autofill.spec.ts
@@ -0,0 +1,165 @@
+/**
+ * Metric table autofill — E2E tests.
+ *
+ * The metrics source form auto-detects metric tables by matching table-name
+ * suffixes in the selected database. Autofill is meant to be a reaction to
+ * picking a database: it should run for a new source and whenever the database
+ * selection changes, but never when a saved metrics source is opened —
+ * otherwise the form silently gains unsaved changes the user never made.
+ *
+ * Two databases back these tests (see `seed-clickhouse.ts`):
+ *   - `default`          — e2e_otel_metrics_gauge / e2e_otel_metrics_sum
+ *   - `e2e_metrics_alt`  — alt_otel_metrics_gauge / alt_otel_metrics_sum
+ *
+ * The distinct table names let an assertion prove which database a detected
+ * table came from.
+ *
+ * Sources are created through the API per test (and deleted afterwards) so the
+ * shared 'E2E Metrics' fixture is never mutated, and the forms are always
+ * closed without saving.
+ */
+import type { Page } from '@playwright/test';
+
+import { SourceFormComponent } from '../components/SourceFormComponent';
+import { SearchPage } from '../page-objects/SearchPage';
+import { getApiUrl, getSources } from '../utils/api-helpers';
+import { expect, test } from '../utils/base-test';
+import {
+  DEFAULT_METRICS_SOURCE_NAME,
+  E2E_ALT_METRICS_DATABASE,
+  E2E_ALT_METRICS_SUM_TABLE,
+  E2E_CLICKHOUSE_DATABASE,
+  E2E_METRICS_GAUGE_TABLE,
+  E2E_METRICS_SUM_TABLE,
+} from '../utils/constants';
+
+test.describe(
+  'Metric Table Autofill',
+  { tag: ['@full-stack', '@sources'] },
+  () => {
+    /**
+     * Creates a metrics source with only its gauge table configured, so
+     * autofill has something left to fill in (the sum table) and any autofill
+     * on open would be visible as an unsaved change.
+     */
+    async function createPartiallyConfiguredMetricSource(
+      page: Page,
+      name: string,
+    ): Promise<string> {
+      const metricSources = await getSources(page, 'metric');
+      const existing = metricSources.find(
+        (s: any) => s.name === DEFAULT_METRICS_SOURCE_NAME,
+      );
+      expect(existing).toBeDefined();
+
+      const createResponse = await page.request.post(`${getApiUrl()}/sources`, {
+        data: {
+          kind: 'metric',
+          name,
+          connection: existing.connection,
+          from: {
+            databaseName: E2E_CLICKHOUSE_DATABASE,
+            tableName: '',
+          },
+          timestampValueExpression: existing.timestampValueExpression,
+          resourceAttributesExpression: existing.resourceAttributesExpression,
+          // Gauge only — sum is deliberately left unset.
+          metricTables: { gauge: E2E_METRICS_GAUGE_TABLE },
+        },
+      });
+      expect(createResponse.ok()).toBeTruthy();
+      const created = await createResponse.json();
+      return created._id;
+    }
+
+    test('autofills metric tables for a new source', async ({ page }) => {
+      const searchPage = new SearchPage(page);
+      const sourceForm = new SourceFormComponent(page);
+
+      await searchPage.goto();
+      await searchPage.sourceActionsMenu.click();
+      await searchPage.createNewSourceItem.click();
+
+      // Switching the kind to OTEL Metrics renders the metric table selects for
+      // the default database, which is what autofill reacts to.
+      await sourceForm.selectSourceKind('OTEL Metrics');
+
+      await sourceForm.waitForMetricTableAutofill();
+      await expect(sourceForm.getMetricTableInput('gauge')).toHaveValue(
+        E2E_METRICS_GAUGE_TABLE,
+      );
+      await expect(sourceForm.getMetricTableInput('sum')).toHaveValue(
+        E2E_METRICS_SUM_TABLE,
+      );
+
+      // Discard the new source without creating it.
+      await page.keyboard.press('Escape');
+    });
+
+    test('does not autofill when opening a saved metrics source', async ({
+      page,
+    }) => {
+      const sourceForm = new SourceFormComponent(page);
+      const sourceName = `E2E Metrics Autofill Open ${Date.now()}`;
+      let sourceId = '';
+
+      try {
+        sourceId = await createPartiallyConfiguredMetricSource(
+          page,
+          sourceName,
+        );
+
+        // Opening `/team#source-<id>` expands that source's form inline.
+        await page.goto(`/team#source-${sourceId}`);
+        await expect(sourceForm.nameInput).toHaveValue(sourceName);
+        await expect(sourceForm.getMetricTableInput('gauge')).toHaveValue(
+          E2E_METRICS_GAUGE_TABLE,
+        );
+
+        // The default database has a matching sum table, but merely opening the
+        // source must leave the form exactly as saved.
+        await sourceForm.expectNoMetricTableAutofill();
+        await expect(sourceForm.getMetricTableInput('sum')).toHaveValue('');
+      } finally {
+        await page.request.delete(`${getApiUrl()}/sources/${sourceId}`);
+      }
+    });
+
+    test('autofills when the database changes on a saved metrics source', async ({
+      page,
+    }) => {
+      const sourceForm = new SourceFormComponent(page);
+      const sourceName = `E2E Metrics Autofill Switch ${Date.now()}`;
+      let sourceId = '';
+
+      try {
+        sourceId = await createPartiallyConfiguredMetricSource(
+          page,
+          sourceName,
+        );
+
+        await page.goto(`/team#source-${sourceId}`);
+        await expect(sourceForm.nameInput).toHaveValue(sourceName);
+        await expect(sourceForm.getMetricTableInput('gauge')).toHaveValue(
+          E2E_METRICS_GAUGE_TABLE,
+        );
+        await sourceForm.expectNoMetricTableAutofill();
+
+        // Changing the database is the user action autofill should react to.
+        await sourceForm.selectDatabase(E2E_ALT_METRICS_DATABASE);
+
+        await sourceForm.waitForMetricTableAutofill();
+        // The detected table comes from the newly selected database. The gauge
+        // table the user had already configured is never overwritten.
+        await expect(sourceForm.getMetricTableInput('sum')).toHaveValue(
+          E2E_ALT_METRICS_SUM_TABLE,
+        );
+        await expect(sourceForm.getMetricTableInput('gauge')).toHaveValue(
+          E2E_METRICS_GAUGE_TABLE,
+        );
+      } finally {
+        await page.request.delete(`${getApiUrl()}/sources/${sourceId}`);
+      }
+    });
+  },
+);
diff --git a/packages/app/tests/e2e/seed-clickhouse.ts b/packages/app/tests/e2e/seed-clickhouse.ts
index a5f61caa26..4c53f35b49 100644
--- a/packages/app/tests/e2e/seed-clickhouse.ts
+++ b/packages/app/tests/e2e/seed-clickhouse.ts
@@ -10,6 +10,9 @@
  */
 
 import {
+  E2E_ALT_METRICS_DATABASE,
+  E2E_ALT_METRICS_GAUGE_TABLE,
+  E2E_ALT_METRICS_SUM_TABLE,
   E2E_CLICKHOUSE_DATABASE,
   E2E_INTERESTING_FILTER_KEYS_TABLE,
   E2E_LOGS_TABLE,
@@ -815,11 +818,33 @@ async function clearTestData(
   console.log('  Existing data cleared');
 }
 
+// A second database with OTEL-shaped metric tables, used by the metric table
+// autofill tests to exercise changing the source form's database. Only the
+// schema matters (autofill validates a candidate table by its columns), so the
+// tables are structure-only copies and stay empty. Created here rather than in
+// `init-db-e2e.sh` because that script only runs on a fresh ClickHouse volume.
+async function createAltMetricsDatabase(
+  client: ReturnType<typeof createClickHouseClient>,
+): Promise<void> {
+  console.log('  Ensuring alternate metrics database...');
+  await client.query(
+    `CREATE DATABASE IF NOT EXISTS ${E2E_ALT_METRICS_DATABASE}`,
+  );
+  await client.query(
+    `CREATE TABLE IF NOT EXISTS ${E2E_ALT_METRICS_DATABASE}.${E2E_ALT_METRICS_GAUGE_TABLE} AS ${E2E_CLICKHOUSE_DATABASE}.${E2E_METRICS_GAUGE_TABLE}`,
+  );
+  await client.query(
+    `CREATE TABLE IF NOT EXISTS ${E2E_ALT_METRICS_DATABASE}.${E2E_ALT_METRICS_SUM_TABLE} AS ${E2E_CLICKHOUSE_DATABASE}.${E2E_METRICS_SUM_TABLE}`,
+  );
+  console.log(`  ${E2E_ALT_METRICS_DATABASE} ready`);
+}
+
 export async function seedClickHouse(): Promise<void> {
   console.log('Seeding ClickHouse with test data...');
   const client = createClickHouseClient();
 
   await waitForClickHouse(client);
+  await createAltMetricsDatabase(client);
   await clearTestData(client);
 
   const seedRef = Date.now();
diff --git a/packages/app/tests/e2e/utils/constants.ts b/packages/app/tests/e2e/utils/constants.ts
index 202a0910e9..a2239000d1 100644
--- a/packages/app/tests/e2e/utils/constants.ts
+++ b/packages/app/tests/e2e/utils/constants.ts
@@ -47,6 +47,16 @@ export const E2E_TRACES_MV_TABLE = 'e2e_otel_traces_1m';
 export const E2E_SESSIONS_TABLE = 'e2e_hyperdx_sessions';
 export const E2E_METRICS_GAUGE_TABLE = 'e2e_otel_metrics_gauge';
 export const E2E_METRICS_SUM_TABLE = 'e2e_otel_metrics_sum';
+// A second database holding OTEL-shaped metric tables, so the metric table
+// autofill tests can switch the source form's database and see tables detected
+// from the new one. The table names differ from the `default` database's so an
+// assertion can tell which database a detected table came from. Created
+// (idempotently, structure copied from the `default` tables) by
+// `seed-clickhouse.ts` rather than `init-db-e2e.sh`, so an existing ClickHouse
+// volume picks it up without being reset.
+export const E2E_ALT_METRICS_DATABASE = 'e2e_metrics_alt';
+export const E2E_ALT_METRICS_GAUGE_TABLE = 'alt_otel_metrics_gauge';
+export const E2E_ALT_METRICS_SUM_TABLE = 'alt_otel_metrics_sum';
 // Table backing the INTERESTING_FILTER_KEYS_SOURCE_NAME source. Created in
 // `docker/clickhouse/local/init-db-e2e.sh` and seeded in `seed-clickhouse.ts`.
 export const E2E_INTERESTING_FILTER_KEYS_TABLE =

From b6cc2447686ab8ab53ce0b8cc4bcce1ecc91c4a1 Mon Sep 17 00:00:00 2001
From: Drew Davis <drew.davis@clickhouse.com>
Date: Thu, 6 Aug 2026 08:28:02 -0400
Subject: [PATCH 2/2] chore: Fix lint warnings

---
 .../src/components/__tests__/MetricTableModelForm.test.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx b/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx
index 4a38315852..2f1ce9abab 100644
--- a/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx
+++ b/packages/app/src/components/__tests__/MetricTableModelForm.test.tsx
@@ -91,8 +91,7 @@ function Harness({
       kind: SourceKind.Metric,
       connection: 'conn-1',
       from: { databaseName, tableName: '' },
-
-      metricTables: metricTables as any,
+      metricTables,
     },
   });
 
@@ -123,6 +122,7 @@ function autofilledTables() {
     .map(([path, value]) => [path, value]);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
 const SAVED_SOURCE: TSource = {
   id: 'metric-source-1',
   kind: SourceKind.Metric,
@@ -133,7 +133,7 @@ const SAVED_SOURCE: TSource = {
   metricTables: {
     gauge: 'otel_metrics_gauge',
     sum: 'otel_metrics_sum',
-  } as any,
+  },
 } as any;
 
 describe('MetricTableModelForm metric table autofill', () => {
@@ -237,6 +237,7 @@ describe('MetricTableModelForm metric table autofill', () => {
   // A saved source of another kind switched over to OTEL Metrics has no metric
   // tables to preserve, so it autofills like a new source.
   it('autofills for an existing source switched to the metrics kind', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
     savedSource = {
       ...SAVED_SOURCE,
       kind: SourceKind.Log,