Add searchable dataset pickers to dashboards

frontend/README.md

@@ -64,7 +64,7 @@ This creates `build.zip` with a top-level `dist/` directory, including `dist/ind
 - Add data: JSON HTTP, OTLP HTTP and OpenTelemetry Collector setup, compatible dataset selection/creation, endpoint validation, generated commands/configuration with copy feedback, and server ingestion checks that distinguish existing data from increases since a previous check. API keys remain in the sender's environment.
 - Alerts: searchable, sortable lists with tag filters and 25-row pagination; PromQL and SQL threshold creation/editing, query previews without notifications, hold duration, runtime instances and delivery errors, evaluate/enable/mute/duplicate/delete actions, and Slack/Webhook/Alertmanager targets with masked secrets. PromQL creation requires explicit server capability; existing builder rules are read-only.
 - Datasets: search, create logs/metrics/traces with an optional custom partition, manage information and ingestion/storage statistics, inspect schema, explore, set/clear retention, configure/disable hot tier when the server enables it, and delete with typed name confirmation. Time partitions cannot be set at creation. Static schema upload, tags/labels, existing partition editing and index management are not supported.
-- Dashboards: server-backed lists and detail routes, search/tags/favourites/sort/pagination, ownership, full-document saves with conflict resolution, SQL and PromQL tiles, six variable types, URL time ranges and selections, classic import/export, and explicit migration of old browser-local dashboards. Demo dashboards use independent in-memory state per client.
+- Dashboards: server-backed lists and detail routes, search/tags/favourites/sort/pagination, ownership, full-document saves with conflict resolution, SQL and PromQL tiles, six variable types, URL time ranges and selections, classic import/export, and explicit migration of old browser-local dashboards. Default dataset and tile dataset fields offer keyboard-accessible dropdowns with fuzzy search and retryable discovery. Changing a dashboard default seeds new tiles; existing tile queries retain their datasets. Demo dashboards use independent in-memory state per client.
 - Team: native users and one-time passwords, role and privilege management, default OIDC role configuration, provider group mappings and role provenance, and API key creation/copy/deletion with configurable expiration from 30 minutes to 90 days or no expiration. New UI-created keys default to 90 days; existing keys keep their original lifetime. Search and 25-row pagination apply to every tab; authorization stays with the backend.
 - Agents: schema-discovered GenAI datasets, related spans grouped into runs, successful/failed/incomplete status, observed duration, models and recorded token usage. Run details include the span tree, model and tool calls, errors, captured conversation and raw fields. Search/status/model filters and captured time bounds survive navigation between Agents, Traces and Logs. Missing telemetry and bounded samples are explicit; evaluations and cost estimates remain deferred.
 - Cluster: registered node reachability and resource metrics with independent request states; read-only.

frontend/e2e-live/dashboards.spec.ts

@@ -195,7 +195,8 @@ test('create SQL and PromQL tiles and variables in the native UI; verify exact c
   await variable.getByLabel('Variable name').fill('metrics_dataset');
   await variable.getByLabel('Variable label').fill('Metrics dataset');
   await variable.getByLabel('Variable type').selectOption('dataset');
-  await variable.getByLabel('Default dataset').fill(metrics);
+  await variable.getByRole('combobox', { name: 'Default dataset' }).fill(metrics);
+  await variable.getByRole('option', { name: metrics, exact: true }).click();
   await variable.locator('[data-dialog-confirm]').click();
   await page.getByRole('button', { name: 'Add variable', exact: true }).click();
   variable = page.getByRole('dialog', { name: 'Add variable', exact: true });
@@ -211,7 +212,8 @@ test('create SQL and PromQL tiles and variables in the native UI; verify exact c
   await page.getByRole('button', { name: 'Add tile', exact: true }).click();
   let editor = page.getByRole('dialog', { name: 'Add tile', exact: true });
   await editor.getByLabel('Tile title').fill('Live log events');
-  await editor.getByLabel('Dataset', { exact: true }).selectOption(logs);
+  await editor.getByRole('combobox', { name: 'Dataset', exact: true }).click();
+  await editor.getByRole('option', { name: logs, exact: true }).click();
   await editor.getByRole('textbox', { name: 'SQL query', exact: true }).fill(sql);
   await editor.getByLabel('Chart type').selectOption('table');
   await editor.getByLabel('Width (columns)').selectOption('12');
@@ -220,7 +222,8 @@ test('create SQL and PromQL tiles and variables in the native UI; verify exact c
   editor = page.getByRole('dialog', { name: 'Add tile', exact: true });
   await editor.getByLabel('Tile title').fill('Live host load');
   await editor.getByLabel('Query language').selectOption('promql');
-  await editor.getByLabel('Dataset', { exact: true }).selectOption('$metrics_dataset');
+  await editor.getByRole('combobox', { name: 'Dataset', exact: true }).click();
+  await editor.getByRole('option', { name: '$metrics_dataset', exact: true }).click();
   await editor.getByRole('textbox', { name: 'PromQL query A', exact: true }).fill(promql);
   await editor.getByLabel('Width (columns)').selectOption('12');
   await editor.locator('[data-dialog-confirm]').click();

frontend/e2e/dashboard-builder-regressions.spec.ts

@@ -75,7 +75,8 @@ async function addBuilder(page: Page) {
   await page.getByRole('button', { name: 'Add tile', exact: true }).click();
   const editor = page.getByRole('dialog', { name: 'Add tile', exact: true });
   await editor.getByLabel('Tile title', { exact: true }).fill('Bucket counts');
-  await editor.getByLabel('Dataset', { exact: true }).selectOption('app-logs');
+  await editor.getByRole('combobox', { name: 'Dataset', exact: true }).click();
+  await editor.getByRole('option', { name: 'app-logs', exact: true }).click();
   await editor.getByLabel('Query language', { exact: true }).selectOption('builder');
   return editor;
 }

frontend/e2e/dashboard-editor.spec.ts

@@ -73,7 +73,8 @@ async function openEditor(page: Page, title: string, chart: string, sql: string)
   await page.getByRole('button', { name: 'Add tile', exact: true }).click();
   const editor = page.getByRole('dialog', { name: 'Add tile', exact: true });
   await editor.getByLabel('Tile title').fill(title);
-  await editor.getByLabel('Dataset', { exact: true }).selectOption('app-logs');
+  await editor.getByRole('combobox', { name: 'Dataset', exact: true }).click();
+  await editor.getByRole('option', { name: 'app-logs', exact: true }).click();
   await editor.getByRole('textbox', { name: 'SQL query', exact: true }).fill(sql);
   await editor.getByLabel('Chart type').selectOption({ label: chart });
   return editor;

frontend/e2e/dashboard-layout-sections.spec.ts

@@ -199,7 +199,8 @@ test('visual builder generates executable filtered SQL and survives save/reload'
   await page.getByRole('button', { name: 'Add tile', exact: true }).click();
   const editor = page.getByRole('dialog', { name: 'Add tile', exact: true });
   await editor.getByLabel('Tile title').fill('Requests');
-  await editor.getByLabel('Dataset', { exact: true }).selectOption('app-logs');
+  await editor.getByRole('combobox', { name: 'Dataset', exact: true }).click();
+  await editor.getByRole('option', { name: 'app-logs', exact: true }).click();
   await editor.getByLabel('Query language').selectOption('builder');
   await editor.getByLabel('Chart type').selectOption('table');
   await expect(editor.getByLabel('Dimension 1')).toBeVisible();