feat(ml): shared DataViewSwitcher component and proper way of opening dropdown list

KodeRad · KodeRad · commit aa4fb6973b86 · 2026-05-05T10:19:54.000+02:00
- Added a new `DataViewSwitcher` component to streamline data view selection across various ML UIs like AIOps and Data Visualizer
- Enhanced auto-open behavior for the picker
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -943,6 +943,7 @@ x-pack/platform/packages/private/ml/category_validator @elastic/ml-ui
 x-pack/platform/packages/private/ml/creation_wizard_utils @elastic/ml-ui
 x-pack/platform/packages/private/ml/data_frame_analytics_utils @elastic/ml-ui
 x-pack/platform/packages/private/ml/data_grid @elastic/ml-ui
+x-pack/platform/packages/private/ml/data_view_switcher @elastic/ml-ui
 x-pack/platform/packages/private/ml/data_view_utils @elastic/ml-ui
 x-pack/platform/packages/private/ml/date_picker @elastic/ml-ui
 x-pack/platform/packages/private/ml/date_utils @elastic/ml-ui
diff --git a/package.json b/package.json
@@ -825,6 +825,7 @@
     "@kbn/ml-creation-wizard-utils": "link:x-pack/platform/packages/private/ml/creation_wizard_utils",
     "@kbn/ml-data-frame-analytics-utils": "link:x-pack/platform/packages/private/ml/data_frame_analytics_utils",
     "@kbn/ml-data-grid": "link:x-pack/platform/packages/private/ml/data_grid",
+    "@kbn/ml-data-view-switcher": "link:x-pack/platform/packages/private/ml/data_view_switcher",
     "@kbn/ml-data-view-utils": "link:x-pack/platform/packages/private/ml/data_view_utils",
     "@kbn/ml-date-picker": "link:x-pack/platform/packages/private/ml/date_picker",
     "@kbn/ml-date-utils": "link:x-pack/platform/packages/private/ml/date_utils",
diff --git a/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx b/src/platform/plugins/shared/unified_search/public/dataview_picker/change_dataview.tsx
@@ -66,9 +66,14 @@ export function ChangeDataView({
   onCreateDefaultAdHocDataView,
   onClosePopover,
   getDataViewHelpText,
+  isOpen,
 }: DataViewPickerProps) {
   const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setPopoverIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) setPopoverIsOpen(true);
+  }, [isOpen]);
   const [dataViewsList, setDataViewsList] = useState<DataViewListItemEnhanced[]>([]);
 
   const popoverId = useMemo(() => htmlIdGenerator()(), []);
diff --git a/src/platform/plugins/shared/unified_search/public/dataview_picker/data_view_picker.tsx b/src/platform/plugins/shared/unified_search/public/dataview_picker/data_view_picker.tsx
@@ -78,6 +78,10 @@ export interface DataViewPickerProps {
    * Optional callback to get help text based on the active data view
    */
   getDataViewHelpText?: (dataView: DataView) => ReactNode | string | undefined;
+  /**
+   * When true the picker popover opens immediately on mount.
+   */
+  isOpen?: boolean;
 }
 
 export const DataViewPicker = ({
@@ -95,6 +99,7 @@ export const DataViewPicker = ({
   onCreateDefaultAdHocDataView,
   isDisabled,
   getDataViewHelpText,
+  isOpen,
 }: DataViewPickerProps) => {
   return (
     <ChangeDataView
@@ -112,6 +117,7 @@ export const DataViewPicker = ({
       selectableProps={selectableProps}
       isDisabled={isDisabled}
       getDataViewHelpText={getDataViewHelpText}
+      isOpen={isOpen}
     />
   );
 };
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -1624,6 +1624,8 @@
       "@kbn/ml-data-frame-analytics-utils/*": ["x-pack/platform/packages/private/ml/data_frame_analytics_utils/*"],
       "@kbn/ml-data-grid": ["x-pack/platform/packages/private/ml/data_grid"],
       "@kbn/ml-data-grid/*": ["x-pack/platform/packages/private/ml/data_grid/*"],
+      "@kbn/ml-data-view-switcher": ["x-pack/platform/packages/private/ml/data_view_switcher"],
+      "@kbn/ml-data-view-switcher/*": ["x-pack/platform/packages/private/ml/data_view_switcher/*"],
       "@kbn/ml-data-view-utils": ["x-pack/platform/packages/private/ml/data_view_utils"],
       "@kbn/ml-data-view-utils/*": ["x-pack/platform/packages/private/ml/data_view_utils/*"],
       "@kbn/ml-date-picker": ["x-pack/platform/packages/private/ml/date_picker"],
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
@@ -85,6 +85,7 @@
       "platform/packages/shared/ml/anomaly_utils",
       "platform/packages/private/ml/creation_wizard_utils",
       "platform/packages/private/ml/data_grid",
+      "platform/packages/private/ml/data_view_switcher",
       "platform/packages/private/ml/data_view_utils",
       "platform/packages/private/ml/date_picker",
       "platform/packages/private/ml/field_stats_flyout",
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/README.md b/x-pack/platform/packages/private/ml/data_view_switcher/README.md
@@ -0,0 +1,14 @@
+## @kbn/ml-data-view-switcher
+
+Reusable data view switcher used in UIs maintained by the @elastic/ml-ui team
+(AIOps, Data Visualizer, etc.). Wraps the `DataViewPicker` from
+`@kbn/unified-search-plugin/public` with conventions shared across these views:
+
+- defaults the dropdown to time-based data views,
+- renders a screen-reader-only page title alongside the picker,
+- supports an optional auto-open behaviour for landing pages, and
+- exposes slots for an "Open in Discover" link and additional right-side
+  items.
+
+Navigation is driven by the consumer via the `onChangeDataView` callback so
+the component stays decoupled from any specific routing or URL convention.
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/index.ts b/x-pack/platform/packages/private/ml/data_view_switcher/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { DataViewSwitcher } from './src/data_view_switcher';
+export type { DataViewSwitcherProps } from './src/data_view_switcher';
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/jest.config.js b/x-pack/platform/packages/private/ml/data_view_switcher/jest.config.js
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../../..',
+  roots: ['<rootDir>/x-pack/platform/packages/private/ml/data_view_switcher'],
+};
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/kibana.jsonc b/x-pack/platform/packages/private/ml/data_view_switcher/kibana.jsonc
@@ -0,0 +1,9 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/ml-data-view-switcher",
+  "owner": [
+    "@elastic/ml-ui"
+  ],
+  "group": "platform",
+  "visibility": "private"
+}
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/moon.yml b/x-pack/platform/packages/private/ml/data_view_switcher/moon.yml
@@ -0,0 +1,37 @@
+# This file is generated by the @kbn/moon package. Any manual edits will be erased!
+#  To extend this, write your extensions/overrides to 'moon.extend.yml'
+#  then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/ml-data-view-switcher'
+
+$schema: https://moonrepo.dev/schemas/project.json
+id: '@kbn/ml-data-view-switcher'
+layer: unknown
+owners:
+  defaultOwner: '@elastic/ml-ui'
+toolchains:
+  default: node
+language: typescript
+project:
+  title: '@kbn/ml-data-view-switcher'
+  description: Moon project for @kbn/ml-data-view-switcher
+  channel: ''
+  owner: '@elastic/ml-ui'
+  sourceRoot: x-pack/platform/packages/private/ml/data_view_switcher
+dependsOn:
+  - '@kbn/data-views-plugin'
+  - '@kbn/i18n'
+  - '@kbn/unified-search-plugin'
+tags:
+  - shared-browser
+  - package
+  - prod
+  - group-platform
+  - private
+  - jest-unit-tests
+fileGroups:
+  src:
+    - '**/*.ts'
+    - '**/*.tsx'
+    - '!target/**/*'
+  jest-config:
+    - jest.config.js
+tasks: {}
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/package.json b/x-pack/platform/packages/private/ml/data_view_switcher/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/ml-data-view-switcher",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0",
+  "sideEffects": false
+}
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/src/data_view_switcher.test.tsx b/x-pack/platform/packages/private/ml/data_view_switcher/src/data_view_switcher.test.tsx
@@ -0,0 +1,146 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import type { DataView, DataViewListItem } from '@kbn/data-views-plugin/common';
+import type { DataViewsContract } from '@kbn/data-views-plugin/public';
+
+import { DataViewSwitcher } from './data_view_switcher';
+
+const dataViewPickerProps: Array<Record<string, unknown>> = [];
+
+jest.mock('@kbn/unified-search-plugin/public', () => ({
+  DataViewPicker: jest.fn((props) => {
+    dataViewPickerProps.push(props);
+    return <div data-test-subj="mockDataViewPicker" />;
+  }),
+}));
+
+const buildDataViewsService = (items: DataViewListItem[]): DataViewsContract =>
+  ({
+    getIdsWithTitle: jest.fn().mockResolvedValue(items),
+  } as unknown as DataViewsContract);
+
+const dataViewItems: DataViewListItem[] = [
+  { id: 'logs', title: 'logs-*', name: 'Logs', timeFieldName: '@timestamp' },
+  { id: 'metrics', title: 'metrics-*', name: 'Metrics', timeFieldName: '@timestamp' },
+  { id: 'static', title: 'static-*', name: 'Static' },
+];
+
+const buildDataView = (id: string, name: string, indexPattern: string): DataView =>
+  ({
+    id,
+    getName: () => name,
+    getIndexPattern: () => indexPattern,
+  } as unknown as DataView);
+
+describe('DataViewSwitcher', () => {
+  beforeEach(() => {
+    dataViewPickerProps.length = 0;
+  });
+
+  it('passes only time-based data views to the picker by default', async () => {
+    render(
+      <DataViewSwitcher
+        dataView={undefined}
+        dataViewsService={buildDataViewsService(dataViewItems)}
+        pageTitle="Test page"
+        onChangeDataView={jest.fn()}
+      />
+    );
+
+    await waitFor(() => {
+      const last = dataViewPickerProps[dataViewPickerProps.length - 1];
+      expect(last?.savedDataViews).toEqual(dataViewItems.filter((item) => !!item.timeFieldName));
+    });
+  });
+
+  it('honours a custom filter', async () => {
+    render(
+      <DataViewSwitcher
+        dataView={undefined}
+        dataViewsService={buildDataViewsService(dataViewItems)}
+        pageTitle="Test page"
+        onChangeDataView={jest.fn()}
+        filter={(item) => item.id === 'static'}
+      />
+    );
+
+    await waitFor(() => {
+      const last = dataViewPickerProps[dataViewPickerProps.length - 1];
+      expect(last?.savedDataViews).toEqual([dataViewItems[2]]);
+    });
+  });
+
+  it('does not flag a selected non-time-based data view as missing', async () => {
+    render(
+      <DataViewSwitcher
+        dataView={buildDataView('static', 'Static', 'static-*')}
+        dataViewsService={buildDataViewsService(dataViewItems)}
+        pageTitle="Test page"
+        onChangeDataView={jest.fn()}
+      />
+    );
+
+    await waitFor(() => {
+      const last = dataViewPickerProps[dataViewPickerProps.length - 1];
+      expect(last?.isMissingCurrent).toBe(false);
+    });
+  });
+
+  it('flags a selected data view as missing when it is not in the saved list', async () => {
+    render(
+      <DataViewSwitcher
+        dataView={buildDataView('orphan', 'Orphan', 'orphan-*')}
+        dataViewsService={buildDataViewsService(dataViewItems)}
+        pageTitle="Test page"
+        onChangeDataView={jest.fn()}
+      />
+    );
+
+    await waitFor(() => {
+      const last = dataViewPickerProps[dataViewPickerProps.length - 1];
+      expect(last?.isMissingCurrent).toBe(true);
+    });
+  });
+
+  it('renders the Open in Discover link when a discoverUrl is provided', async () => {
+    const { findByTestId, queryByTestId } = render(
+      <DataViewSwitcher
+        dataView={buildDataView('logs', 'Logs', 'logs-*')}
+        dataViewsService={buildDataViewsService(dataViewItems)}
+        pageTitle="Test page"
+        onChangeDataView={jest.fn()}
+        discoverUrl="/app/discover#/?_a=()"
+        testSubjPrefix="aiopsDataViewSwitcher"
+      />
+    );
+
+    expect(queryByTestId('aiopsDataViewSwitcherOpenInDiscover')).not.toBeNull();
+    const link = await findByTestId('aiopsDataViewSwitcherOpenInDiscover');
+    expect(link).toHaveAttribute('href', '/app/discover#/?_a=()');
+  });
+
+  it('omits the Open in Discover link when no URL is provided', async () => {
+    const { queryByTestId } = render(
+      <DataViewSwitcher
+        dataView={buildDataView('logs', 'Logs', 'logs-*')}
+        dataViewsService={buildDataViewsService(dataViewItems)}
+        pageTitle="Test page"
+        onChangeDataView={jest.fn()}
+      />
+    );
+
+    await waitFor(() => {
+      expect(dataViewPickerProps.length).toBeGreaterThan(0);
+    });
+    expect(queryByTestId('dataViewSwitcherOpenInDiscover')).toBeNull();
+  });
+});
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/src/data_view_switcher.tsx b/x-pack/platform/packages/private/ml/data_view_switcher/src/data_view_switcher.tsx
diff --git a/x-pack/platform/packages/private/ml/data_view_switcher/tsconfig.json b/x-pack/platform/packages/private/ml/data_view_switcher/tsconfig.json
diff --git a/x-pack/platform/plugins/shared/aiops/public/components/data_view_switcher/data_view_switcher.tsx b/x-pack/platform/plugins/shared/aiops/public/components/data_view_switcher/data_view_switcher.tsx
diff --git a/x-pack/platform/plugins/shared/aiops/public/hooks/use_data.ts b/x-pack/platform/plugins/shared/aiops/public/hooks/use_data.ts
diff --git a/x-pack/platform/plugins/shared/aiops/tsconfig.json b/x-pack/platform/plugins/shared/aiops/tsconfig.json
diff --git a/yarn.lock b/yarn.lock
