+
+
+
+
+
+
+
+
+
+ {/* Table header */}
+
+
+
+
+ Name
+
+
+
+
+ Documents
+
+
+
+
+ Size
+
+
+
+
+
+ {/* Table rows */}
+
+ {visibleIndices.map((indexName) => {
+ const indexInfo = indexInfoCache[indexName];
+ const isLoadingIndexInfo = loadingInfoForIndexSet.has(indexName);
+
+ return (
+
+
+
+ {indexName}
+
+
+ {isLoadingIndexInfo ? (
+
+ ) : indexInfo?.['docs.count'] ? (
+ {indexInfo['docs.count']}
+ ) : (
+
+ —
+
+ )}
+
+
+ {isLoadingIndexInfo ? (
+
+ ) : indexInfo?.['store.size'] ? (
+ {indexInfo['store.size']}
+ ) : (
+
+ —
+
+ )}
+
+
+
+ );
+ })}
+
+
+
+ {/* EUI-styled pagination */}
+
+ {
+ setWildcardPopoverPage((prev) => ({
+ ...prev,
+ [item.title]: { ...pagination, pageIndex: newPageIndex },
+ }));
+ }}
+ itemsPerPage={pageSize}
+ onChangeItemsPerPage={(newPageSize) => {
+ setWildcardPopoverPage((prev) => ({
+ ...prev,
+ [item.title]: { pageIndex: 0, pageSize: newPageSize },
+ }));
+ }}
+ itemsPerPageOptions={[5, 10, 20]}
+ />
+
+
-
-
-
-
-
-
-
- {selectionMode === 'single' && selectedIndexIds.length > 0 && (
- <>
-
-
- {i18n.translate('data.datasetService.indexSelector.selectedIndicesLabel', {
- defaultMessage: 'Selected Indices:',
- })}
-
-
-
-
- {selectedIndexIds.map((indexId) => {
- const indexTitle =
- current.children?.find((child) => child.id === indexId)?.title || indexId;
+ {/* Selected items - full width */}
+
+
+ {i18n.translate('data.datasetService.unifiedSelector.selectedItemsLabel', {
+ defaultMessage: 'Selected:',
+ })}
+
+
+
+
+ {selectedItems.length === 0 ? (
+
+
+
+
+
+ ) : (
+
+ {/* Table header */}
+
+
+
+
+
+ {i18n.translate('data.datasetService.unifiedSelector.nameHeader', {
+ defaultMessage: 'Name',
+ })}
+
+
+
+
+
+
+ {i18n.translate('data.datasetService.unifiedSelector.statusHeader', {
+ defaultMessage: 'Status',
+ })}
+
+
+
+
+
+
+ {i18n.translate('data.datasetService.unifiedSelector.documentsHeader', {
+ defaultMessage: 'Documents',
+ })}
+
+
+
+
+
+
+ {i18n.translate('data.datasetService.unifiedSelector.sizeHeader', {
+ defaultMessage: 'Size',
+ })}
+
+
+
+
+
+
+ {i18n.translate('data.datasetService.unifiedSelector.actionsHeader', {
+ defaultMessage: 'Actions',
+ })}
+
+
+
+
+
+ {/* Table rows */}
+ {selectedItems.map((item, itemIndex) => {
+ const infoData = indexInfoCache[item.title];
+ const matchingIndices = matchingIndicesCache[item.title];
+ const isLoadingInfo = loadingInfoForIndexSet.has(item.title);
+ const isLoadingMatches = loadingMatchingIndicesSet.has(item.title);
+
return (
-
-
{
- const newSelectedIds = selectedIndexIds.filter((id) => id !== indexId);
- handleMultiIndexSelectionChange(newSelectedIds);
- }}
- iconOnClickAriaLabel={i18n.translate(
- 'data.datasetService.indexSelector.removeIndex',
- {
- defaultMessage: 'Remove index {indexTitle}',
- values: { indexTitle },
- }
- )}
- >
- {indexTitle}
-
+
+
+ {/* Name Column */}
+
+ {item.title}
+
+
+ {/* Status Column */}
+
+ {isLoadingInfo || isLoadingMatches ? (
+
+ ) : item.isWildcard ? (
+ matchingIndices && matchingIndices.length > 0 ? (
+
+ handleInfoIconClick(itemIndex, item)}
+ className="indexDataStructureCreator__wildcardButton"
+ >
+
+ {matchingIndices.length}{' '}
+ {matchingIndices.length === 1 ? 'index' : 'indices'}
+
+
+
+ }
+ isOpen={openPopoverIndex === itemIndex}
+ closePopover={() => setOpenPopoverIndex(null)}
+ anchorPosition="rightCenter"
+ >
+ {renderHealthPopover(item, itemIndex)}
+
+ ) : (
+
+ —
+
+ )
+ ) : infoData ? (
+
+ {infoData.health}
+
+ ) : (
+
+ —
+
+ )}
+
+
+ {/* Documents Column */}
+
+ {item.isWildcard ? (
+
+ —
+
+ ) : infoData?.['docs.count'] ? (
+ {infoData['docs.count']}
+ ) : (
+
+ —
+
+ )}
+
+
+ {/* Size Column */}
+
+ {item.isWildcard ? (
+
+ —
+
+ ) : infoData?.['store.size'] ? (
+ {infoData['store.size']}
+ ) : (
+
+ —
+
+ )}
+
+
+ {/* Actions Column */}
+
+ handleRemoveItem(itemIndex)}
+ aria-label={i18n.translate(
+ 'data.datasetService.unifiedSelector.removeItem',
+ {
+ defaultMessage: 'Remove {item}',
+ values: { item: item.title },
+ }
+ )}
+ />
+
+
);
})}
-
+ )}
+
);
};
diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.scss b/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.scss
deleted file mode 100644
index b9ab29db9786..000000000000
--- a/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@import "@elastic/eui/src/global_styling/variables/size";
-
-.indexSelector {
- position: relative;
-
- &__popover {
- position: absolute;
- top: 100%;
- left: 0;
- right: 0;
- z-index: 1000;
- background-color: $euiColorEmptyShade;
- border: $euiBorderThin;
- border-radius: $euiBorderRadius;
- box-shadow: none;
- margin-top: $euiSizeXS;
- }
-}
-
-.indexSelectorOption {
- width: 100%;
-}
diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.test.tsx b/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.test.tsx
deleted file mode 100644
index 74067b8563fa..000000000000
--- a/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.test.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
-import { I18nProvider } from '@osd/i18n/react';
-import { IndexSelector } from './index_selector';
-
-const mockHttpGet = jest.fn();
-const mockOnMultiSelectionChange = jest.fn();
-
-const mockServices = {
- http: {
- get: mockHttpGet,
- },
-};
-
-const mockPath = [{ id: 'test-datasource', type: 'DATA_SOURCE', title: 'Test DataSource' }];
-
-const defaultProps = {
- selectedIndexIds: [],
- onMultiSelectionChange: mockOnMultiSelectionChange,
- services: mockServices as any,
- path: mockPath as any,
-};
-
-const mockApiResponse = {
- indices: [{ name: 'logs-2024' }, { name: 'metrics-2024' }, { name: 'otel-logs' }],
- aliases: [{ name: 'logs-alias' }],
- data_streams: [{ name: 'logs-stream' }],
-};
-
-const renderComponent = (props = {}) =>
- render(
-
-
-
- );
-
-describe('IndexSelector', () => {
- beforeEach(() => {
- jest.clearAllMocks();
- jest.useFakeTimers();
- mockHttpGet.mockResolvedValue(mockApiResponse);
- });
-
- afterEach(() => {
- jest.useRealTimers();
- });
-
- test('renders search field', () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
- expect(searchField).toBeInTheDocument();
- });
-
- test('loads initial results on mount', async () => {
- renderComponent();
-
- // Fast-forward timers to trigger initial load
- jest.runAllTimers();
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*',
- expect.objectContaining({
- query: expect.objectContaining({
- expand_wildcards: 'all',
- }),
- })
- );
- });
- });
-
- test('opens popover on search field focus', () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
-
- expect(screen.queryByTestId('dataset-index-selector')).toBeInTheDocument();
- });
-
- test('searches for indices when user types', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'otel' } });
-
- // Fast-forward past debounce delay
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*otel*',
- expect.objectContaining({
- query: expect.objectContaining({
- expand_wildcards: 'all',
- }),
- })
- );
- });
- });
-
- test('debounces search input', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- // Initial load should fire on mount
- jest.runAllTimers();
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*',
- expect.any(Object)
- );
- });
-
- // Clear mock and type rapidly
- mockHttpGet.mockClear();
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'o' } });
- fireEvent.change(searchField, { target: { value: 'ot' } });
- fireEvent.change(searchField, { target: { value: 'ote' } });
-
- // Should not call API immediately
- expect(mockHttpGet).not.toHaveBeenCalled();
-
- // Fast-forward past debounce delay
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- // Should only call once with final value
- expect(mockHttpGet).toHaveBeenCalledTimes(1);
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*ote*',
- expect.any(Object)
- );
- });
- });
-
- test('includes data source in query when available', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'logs' } });
-
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*logs*',
- expect.objectContaining({
- query: expect.objectContaining({
- expand_wildcards: 'all',
- data_source: 'test-datasource',
- }),
- })
- );
- });
- });
-
- test('handles API errors gracefully', async () => {
- mockHttpGet.mockRejectedValueOnce(new Error('API Error'));
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'test' } });
-
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalled();
- });
-
- // Should not throw error, just show empty results
- expect(screen.getByTestId('dataset-index-selector')).toBeInTheDocument();
- });
-
- test('fetches indices and makes them available for selection', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'logs' } });
-
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*logs*',
- expect.any(Object)
- );
- });
-
- // Verify the EuiSelectable is present with the selector
- await waitFor(() => {
- expect(screen.getByTestId('dataset-index-selector')).toBeInTheDocument();
- });
- });
-
- test('resets to initial results when search is cleared', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices') as HTMLInputElement;
-
- // First, do a search
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'logs' } });
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- expect.stringContaining('*logs*'),
- expect.any(Object)
- );
- });
-
- // Clear the search
- fireEvent.change(searchField, { target: { value: '' } });
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- // Should query for * again (initial results)
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*',
- expect.any(Object)
- );
- });
- });
-
- test('closes popover when clicking outside', () => {
- const { container } = renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- // Open popover
- fireEvent.focus(searchField);
- expect(screen.queryByTestId('dataset-index-selector')).toBeInTheDocument();
-
- // Click outside
- fireEvent.mouseDown(document.body);
-
- // Popover should close
- expect(screen.queryByTestId('dataset-index-selector')).not.toBeInTheDocument();
- });
-
- test('displays limited results message when showing first 100 of many indices', async () => {
- // Mock a response with more than 100 indices
- const manyIndices = Array.from({ length: 150 }, (_, i) => ({ name: `index-${i}` }));
- mockHttpGet.mockResolvedValue({ indices: manyIndices, aliases: [], data_streams: [] });
-
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
-
- // Initial load happens automatically
- jest.runAllTimers();
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalled();
- });
-
- // Should show limited results message
- await waitFor(() => {
- expect(screen.getByText(/Showing first 100 of 150 indices/)).toBeInTheDocument();
- });
- });
-
- test('handles wildcard patterns in search', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'logs*' } });
-
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- // Should use the pattern as-is (not wrap with *)
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/logs*',
- expect.any(Object)
- );
- });
- });
-
- test('combines indices, aliases, and data streams in results', async () => {
- renderComponent();
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'test' } });
-
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*test*',
- expect.any(Object)
- );
- });
-
- // Should have EuiSelectable with all types combined (3 indices + 1 alias + 1 data_stream)
- await waitFor(() => {
- expect(screen.getByTestId('dataset-index-selector')).toBeInTheDocument();
- });
- });
-
- test('preserves existing selections when searching', async () => {
- const existingSelections = ['test-datasource::existing-index'];
- renderComponent({ selectedIndexIds: existingSelections });
-
- const searchField = screen.getByPlaceholderText('Search indices');
-
- fireEvent.focus(searchField);
- fireEvent.change(searchField, { target: { value: 'logs' } });
-
- jest.advanceTimersByTime(300);
-
- await waitFor(() => {
- expect(mockHttpGet).toHaveBeenCalledWith(
- '/internal/index-pattern-management/resolve_index/*logs*',
- expect.any(Object)
- );
- });
-
- // Verify component loaded with existing selections
- // The actual selection preservation logic is tested through the onChange handler
- // which filters selections to keep those not in displayOptions
- await waitFor(() => {
- expect(screen.getByTestId('dataset-index-selector')).toBeInTheDocument();
- });
- });
-});
diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.tsx b/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.tsx
deleted file mode 100644
index 5a125dd25e2a..000000000000
--- a/src/plugins/data/public/query/query_string/dataset_service/lib/index_data_structure_creator/index_selector.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import {
- EuiSelectable,
- EuiSelectableOption,
- EuiFlexGroup,
- EuiFlexItem,
- EuiFieldText,
-} from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { DataStructure } from '../../../../../../common';
-import { IDataPluginServices } from '../../../../../types';
-import { useIndexFetcher } from './use_index_fetcher';
-import { MAX_INITIAL_RESULTS } from './constants';
-import './index_selector.scss';
-
-interface IndexSelectorProps {
- selectedIndexIds: string[];
- onMultiSelectionChange: (selectedIds: string[]) => void;
- services?: IDataPluginServices;
- path?: DataStructure[];
-}
-
-export const IndexSelector: React.FC
= ({
- selectedIndexIds,
- onMultiSelectionChange,
- services,
- path,
-}) => {
- const [isPopoverOpen, setIsPopoverOpen] = useState(false);
- const [searchValue, setSearchValue] = useState('');
- const [searchResults, setSearchResults] = useState([]);
- const [totalCount, setTotalCount] = useState(0);
- const [isLoading, setIsLoading] = useState(false);
- const containerRef = useRef(null);
- const debounceTimerRef = useRef(null);
- const hasLoadedInitial = useRef(false);
-
- // Use shared hook for fetching indices
- const { fetchIndices: fetchIndicesFromHook } = useIndexFetcher({ services, path });
-
- // Fetch indices matching search using shared hook
- const fetchIndices = useCallback(
- async (search: string, limit?: number) => {
- if (!search || search.trim() === '') {
- setSearchResults([]);
- setTotalCount(0);
- return;
- }
-
- setIsLoading(true);
-
- try {
- // Use wildcard pattern for search
- const searchPattern = search.includes('*') ? search : `*${search}*`;
-
- // Fetch indices using shared hook
- const allIndices = await fetchIndicesFromHook({
- patterns: [searchPattern],
- limit: undefined, // Don't limit in hook, we need total count
- });
-
- // Set total count
- setTotalCount(allIndices.length);
-
- // Apply limit if specified
- if (limit && allIndices.length > limit) {
- setSearchResults(allIndices.slice(0, limit));
- } else {
- setSearchResults(allIndices);
- }
- } catch (error) {
- // Error handling is done in the shared hook
- setSearchResults([]);
- setTotalCount(0);
- } finally {
- setIsLoading(false);
- }
- },
- [fetchIndicesFromHook]
- );
-
- // Load initial results on mount
- useEffect(() => {
- if (!hasLoadedInitial.current && services?.http) {
- hasLoadedInitial.current = true;
- fetchIndices('*', MAX_INITIAL_RESULTS);
- }
- }, [services, fetchIndices]);
-
- // Debounced search
- useEffect(() => {
- if (!searchValue || searchValue.trim() === '') {
- // Reset to initial results when search is cleared
- if (hasLoadedInitial.current) {
- fetchIndices('*', MAX_INITIAL_RESULTS);
- }
- return;
- }
-
- // Clear existing timer
- if (debounceTimerRef.current) {
- clearTimeout(debounceTimerRef.current);
- }
-
- // Set new timer - no limit for user searches
- debounceTimerRef.current = setTimeout(() => {
- fetchIndices(searchValue);
- }, 300);
-
- // Cleanup
- return () => {
- if (debounceTimerRef.current) {
- clearTimeout(debounceTimerRef.current);
- }
- };
- }, [searchValue, fetchIndices]);
-
- // Create options from search results
- const displayOptions: EuiSelectableOption[] = searchResults.map((indexName) => {
- const dataSourceId = path?.find((item) => item.type === 'DATA_SOURCE')?.id || 'local';
- const indexId = `${dataSourceId}::${indexName}`;
-
- return {
- label: indexName,
- key: indexId,
- checked: selectedIndexIds.includes(indexId) ? 'on' : undefined,
- };
- });
-
- const onChange = (newOptions: EuiSelectableOption[]) => {
- // Only update selections from the visible options, but preserve existing selections
- const visibleSelectedIds = newOptions
- .filter((option) => option.checked === 'on')
- .map((option) => option.key!)
- .filter(Boolean);
-
- // Keep existing selections that aren't in the current search results
- const existingHiddenSelections = selectedIndexIds.filter(
- (id) => !displayOptions.some((option) => option.key === id)
- );
-
- const finalSelectedIds = [...existingHiddenSelections, ...visibleSelectedIds];
- onMultiSelectionChange(finalSelectedIds);
- };
-
- const renderOption = (option: EuiSelectableOption) => {
- return (
-
-
- {option.label}
-
-
- );
- };
-
- // Close popover when clicking outside
- useEffect(() => {
- const handleClickOutside = (event: MouseEvent) => {
- if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
- setIsPopoverOpen(false);
- }
- };
-
- document.addEventListener('mousedown', handleClickOutside);
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- };
- }, []);
-
- return (
-
- {/* Always visible search field */}
-
setSearchValue(e.target.value)}
- onFocus={() => setIsPopoverOpen(true)}
- fullWidth
- />
-
- {/* Popover that appears over content */}
- {isPopoverOpen && (
-
- {/* Show count message when results are limited */}
- {!searchValue && totalCount > MAX_INITIAL_RESULTS && (
-
- {i18n.translate('data.datasetService.indexSelector.limitedResultsMessage', {
- defaultMessage:
- 'Showing first {displayed} of {total} indices. Type to search for more.',
- values: { displayed: searchResults.length, total: totalCount },
- })}
-
- )}
-
- {(list) => list}
-
-
+
+ {i18n.translate('data.datasetService.unifiedSelector.helpText', {
+ defaultMessage:
+ 'Click indices to add them, or enter wildcards (e.g., otel*) and use Add wildcard button',
+ })}
+
+
+
+
+
+ setIsPopoverOpen(true)}
+ isInvalid={hasValidationErrors}
+ fullWidth
+ />
+ }
+ isOpen={isPopoverOpen}
+ closePopover={() => setIsPopoverOpen(false)}
+ panelPaddingSize="none"
+ anchorPosition="downCenter"
+ display="block"
+ ownFocus={false}
+ >
+
+ {!searchValue && totalCount > MAX_INITIAL_RESULTS && searchResults.length > 0 && (
+
+ {i18n.translate('data.datasetService.unifiedSelector.limitedResultsMessage', {
+ defaultMessage:
+ 'Showing first {displayed} of {total} indices. Type to search for more.',
+ values: { displayed: searchResults.length, total: totalCount },
+ })}
+
+ )}
+
+ {(list) => list}
+
+
+
+
+
+
+
+
+ {dataSourceName}
+
+
+
+ {title}
+
+
+ );
+ },
+ sortable: true,
+ },
+ {
+ field: 'description',
+ name: i18n.translate('data.datasetSelect.viewModal.descriptionColumn', {
+ defaultMessage: 'Description',
+ }),
+ render: (description: string) => description || '—',
+ truncateText: true,
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ isClearable
+ fullWidth
+ />
+
+ ({
+ onClick: () => handleDatasetClick(dataset),
+ style: { cursor: 'pointer' },
+ })}
+ pagination={{
+ pageSize: 10,
+ pageSizeOptions: [10],
+ }}
+ />
+
+
+ );
+};
+
/**
* @experimental This component is experimental and may change in future versions
*/
const DatasetSelect: React.FC = ({ onSelect, supportedTypes, signalType }) => {
const { services } = useOpenSearchDashboards();
const isMounted = useRef(true);
+ const hasCompletedInitialLoad = useRef(false);
+ const previousSignalType = useRef(signalType);
const [isOpen, setIsOpen] = useState(false);
const [datasets, setDatasets] = useState([]);
const [selectedDataset, setSelectedDataset] = useState();
@@ -69,6 +253,17 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
const currentQuery = queryString.getQuery();
const currentDataset = currentQuery.dataset;
+ // Handle signal type changes (e.g., navigating from logs to traces)
+ useEffect(() => {
+ const signalTypeChanged = previousSignalType.current !== signalType;
+ if (signalTypeChanged) {
+ previousSignalType.current = signalType;
+ // Reset initial load flag AND clear datasets to force refetch with new signal type
+ hasCompletedInitialLoad.current = false;
+ setDatasets([]);
+ }
+ }, [signalType]);
+
useEffect(() => {
const updateSelectedDataset = async () => {
if (!currentDataset) {
@@ -76,9 +271,23 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
return;
}
+ // If datasets array is empty during a refetch, don't update selection
+ // This prevents clearing the dataset when fetchDatasets temporarily clears the array
+ if (datasets.length === 0 && hasCompletedInitialLoad.current) {
+ return;
+ }
+
const matchingDataset = datasets.find((d) => d.id === currentDataset.id);
if (matchingDataset) {
- setSelectedDataset(matchingDataset);
+ const isCompatible = isDatasetCompatibleWithSignalType(matchingDataset, signalType);
+
+ if (isCompatible) {
+ setSelectedDataset(matchingDataset);
+ } else {
+ // Don't clear incompatible dataset - just ignore it
+ // This handles cases where flyouts temporarily change the query dataset
+ // Keep the current UI state - don't update
+ }
return;
}
@@ -98,10 +307,27 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
signalType: dataView.signalType,
} as DetailedDataset;
- setSelectedDataset(detailedDataset);
+ const isCompatible = isDatasetCompatibleWithSignalType(detailedDataset, signalType);
+
+ if (isCompatible) {
+ setSelectedDataset(detailedDataset);
+ } else {
+ // Don't clear incompatible dataset - just ignore it
+ // This handles cases where flyouts temporarily change the query dataset
+ // (e.g., trace flyout querying related logs changes dataset from traces to logs)
+ // Keep the current UI state - don't update selectedDataset
+ }
};
updateSelectedDataset();
- }, [currentDataset, dataViews, datasets]);
+ }, [
+ currentDataset,
+ dataViews,
+ datasets,
+ signalType,
+ queryString,
+ currentQuery.language,
+ onSelect,
+ ]);
const datasetTypeConfig = datasetService.getType(
selectedDataset?.sourceDatasetRef?.type || selectedDataset?.type || ''
@@ -175,21 +401,51 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
const filteredDatasets = fetchedDatasets.filter(onFilter);
- const defaultDataView = await dataViews.getDefault();
- if (defaultDataView) {
- setDefaultDatasetId(defaultDataView.id);
+ // Deduplicate datasets by id to prevent duplicates from multiple sources
+ const deduplicatedDatasets = Array.from(
+ new Map(filteredDatasets.map((dataset) => [dataset.id, dataset])).values()
+ );
+
+ let defaultDataView;
+ try {
+ defaultDataView = await dataViews.getDefault();
+ if (defaultDataView) {
+ setDefaultDatasetId(defaultDataView.id);
+ }
+ } catch (error) {
+ // Default dataset not found (stale reference), continue without it
+ // eslint-disable-next-line no-console
+ console.warn('[DatasetSelect] Default dataset not found, using first available:', error);
}
const defaultDataset =
- filteredDatasets.find((d) => d.id === defaultDataView?.id) ?? filteredDatasets[0];
+ deduplicatedDatasets.find((d) => d.id === defaultDataView?.id) ?? deduplicatedDatasets[0];
// Get fresh current dataset value at execution time
const currentlySelectedDataset = queryString.getQuery().dataset;
- if (defaultDataset && !currentlySelectedDataset) {
+
+ // Only auto-select datasets on initial load when there's no dataset selected
+ // During refetches (e.g., when flyouts open), we don't want to trigger dataset changes
+ // IMPORTANT: Don't run auto-select when signalType is null (component is still mounting)
+ // IMPORTANT: Don't override a dataset that's already selected - it may have been set by
+ // a saved query, test, or manual selection, and may not be in the fetched list
+ if (
+ !hasCompletedInitialLoad.current &&
+ signalType !== null &&
+ !currentlySelectedDataset &&
+ defaultDataset
+ ) {
+ // No dataset selected but default is available - select it
onSelect(defaultDataset);
}
- setDatasets(filteredDatasets);
+ if (isMounted.current) {
+ setDatasets(deduplicatedDatasets);
+ }
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('[DatasetSelect] Error fetching datasets:', error);
} finally {
if (isMounted.current) {
setIsLoading(false);
+ hasCompletedInitialLoad.current = true;
}
}
}, [dataViews, signalType, onSelect, queryString, datasetService, services, supportedTypes]);
@@ -208,16 +464,40 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
}, []);
const options = datasets.map((dataset) => {
- const { id, title, type, description, displayName } = dataset;
+ const { id, title, type, description, displayName, dataSource, timeFieldName } = dataset;
const isSelected = id === selectedDataset?.id;
const isDefault = id === defaultDatasetId;
const typeConfig = datasetService.getType(type);
const iconType = typeConfig?.meta?.icon?.type || 'database';
const label = displayName || title;
+
+ // Build subtitle with data source and time field
+ const subtitleParts = [];
+ if (dataSource?.title) {
+ subtitleParts.push(dataSource.title);
+ } else {
+ // For local data sources (no dataSourceRef), show "Local cluster"
+ subtitleParts.push(
+ i18n.translate('data.datasetSelect.localCluster', {
+ defaultMessage: 'Local cluster',
+ })
+ );
+ }
+ if (timeFieldName) {
+ subtitleParts.push(
+ i18n.translate('data.datasetSelect.timeField', {
+ defaultMessage: 'Time field: {timeField}',
+ values: { timeField: timeFieldName },
+ })
+ );
+ }
+ const subtitle = subtitleParts.length > 0 ? subtitleParts.join(' • ') : '';
+
// Prepending the label to the searchable label to allow for better search, render will strip it out
- const searchableLabel = `${label}${typeConfig?.title || DEFAULT_DATA.STRUCTURES.ROOT.title}${
- description && description.trim() !== '' ? ` - ${description}` : ''
- }`.trim();
+ // Adding a separator before subtitle if it exists so renderOption can parse it correctly
+ const searchableLabel = subtitle
+ ? `${label} ${subtitle}${description && description.trim() !== '' ? ` - ${description}` : ''}`
+ : `${label}${description && description.trim() !== '' ? ` - ${description}` : ''}`;
return {
label,
@@ -303,7 +583,6 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
className="datasetSelect__contextMenu"
hasBorder={false}
hasShadow={false}
- onFocus={() => {}}
direction="column"
>
@@ -314,13 +593,35 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
- {datasetTypeConfig?.title || DEFAULT_DATA.STRUCTURES.ROOT.title}
+ {(() => {
+ const parts = [];
+ if (selectedDataset?.dataSource?.title) {
+ parts.push(selectedDataset.dataSource.title);
+ } else if (selectedDataset) {
+ // For local data sources (no dataSourceRef), show "Local cluster"
+ parts.push(
+ i18n.translate('data.datasetSelect.localCluster', {
+ defaultMessage: 'Local cluster',
+ })
+ );
+ }
+ if (selectedDataset?.timeFieldName) {
+ parts.push(
+ i18n.translate('data.datasetSelect.timeField', {
+ defaultMessage: 'Time field: {timeField}',
+ values: { timeField: selectedDataset.timeFieldName },
+ })
+ );
+ }
+ return parts.length > 0
+ ? parts.join(' • ')
+ : datasetTypeConfig?.title || DEFAULT_DATA.STRUCTURES.ROOT.title;
+ })()}
),
- panel: 1,
icon: ,
},
{
@@ -408,23 +709,6 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
},
],
},
- {
- id: 1,
- title: (
-
- ),
- content: (
-
- ),
- },
]}
/>
@@ -434,17 +718,17 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
justifyContent="spaceBetween"
alignItems="center"
responsive={false}
- gutterSize="none"
+ gutterSize="s"
className="datasetSelect__footer"
>
{
closePopover();
const overlay = overlays?.openModal(
@@ -510,8 +794,37 @@ const DatasetSelect: React.FC = ({ onSelect, supportedTypes,
}}
>
+
+
+
+ {
+ closePopover();
+ const overlay = overlays?.openModal(
+ toMountPoint(
+ overlay?.close()}
+ services={services}
+ />
+ ),
+ {
+ maxWidth: '800px',
+ className: 'datasetSelect__viewDatasetsModal',
+ }
+ );
+ }}
+ >
+
diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
index 2f92480a4413..8360f8d0647d 100644
--- a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
+++ b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
@@ -23,9 +23,31 @@
// euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
max-height: calc(90vh - $euiSizeL);
+ /* stylelint-disable @osd/stylelint/no_modifying_global_selectors */
.euiModal__flex {
max-height: none;
}
+
+ .osdOverlayMountWrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+
+ .euiModalBody {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .euiModalBody__overflow {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
+ /* stylelint-enable @osd/stylelint/no_modifying_global_selectors */
}
&__checkbox {
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
index e2a914b059f8..3a8c3f71bbe0 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx
@@ -51,39 +51,77 @@ export const DatasetExplorer = ({
const uiSettings = services.uiSettings;
const [explorerDataset, setExplorerDataset] = useState(undefined);
const [loading, setLoading] = useState(false);
+ const [autoSelectionDone, setAutoSelectionDone] = useState>(new Set());
const datasetService = queryString.getDatasetService();
- const fetchNextDataStructure = async (
- nextPath: DataStructure[],
- dataType: string,
- options?: DataStructureFetchOptions
- ) => datasetService.fetchOptions(services, nextPath, dataType, options);
+ const fetchNextDataStructure = React.useCallback(
+ async (nextPath: DataStructure[], dataType: string, options?: DataStructureFetchOptions) =>
+ datasetService.fetchOptions(services, nextPath, dataType, options),
+ [datasetService, services]
+ );
+
+ const selectDataStructure = React.useCallback(
+ async (item: DataStructure | undefined, newPath: DataStructure[]) => {
+ if (!item) {
+ setExplorerDataset(undefined);
+ return;
+ }
+ const lastPathItem = newPath[newPath.length - 1];
+ const nextPath = [...newPath, item];
+
+ const typeConfig = datasetService.getType(nextPath[1].id);
+ if (!typeConfig) return;
- const selectDataStructure = async (item: DataStructure | undefined, newPath: DataStructure[]) => {
- if (!item) {
- setExplorerDataset(undefined);
+ if (!lastPathItem.hasNext) {
+ const dataset = typeConfig!.toDataset(nextPath);
+ setExplorerDataset(dataset as BaseDataset);
+ return;
+ }
+
+ setLoading(true);
+ const nextDataStructure = await fetchNextDataStructure(nextPath, typeConfig.id);
+ setLoading(false);
+
+ setPath([...newPath, nextDataStructure]);
+ },
+ [datasetService, fetchNextDataStructure, setPath]
+ );
+
+ // Auto-select if there's only one option at the current level, or if at data source level
+ React.useEffect(() => {
+ const currentIndex = path.length - 1;
+ const current = path[currentIndex];
+
+ // Skip if we've already auto-selected at this level
+ if (autoSelectionDone.has(currentIndex)) {
return;
}
- const lastPathItem = newPath[newPath.length - 1];
- const nextPath = [...newPath, item];
-
- const typeConfig = datasetService.getType(nextPath[1].id);
- if (!typeConfig) return;
- if (!lastPathItem.hasNext) {
- const dataset = typeConfig!.toDataset(nextPath);
- setExplorerDataset(dataset as BaseDataset);
+ // Skip if loading or if there are no children
+ if (loading || !current.children || current.children.length === 0) {
return;
}
- setLoading(true);
- const nextDataStructure = await fetchNextDataStructure(nextPath, typeConfig.id);
- setLoading(false);
+ // Check if we're at the data source level (children have type DATA_SOURCE)
+ const isDataSourceLevel = current.children.some((child) => child.type === 'DATA_SOURCE');
- setPath([...newPath, nextDataStructure]);
- };
+ // Auto-select if there's exactly one child, OR if we're at data source level (always select first)
+ if (current.children.length === 1 || isDataSourceLevel) {
+ const firstChild = current.children[0];
+ // Mark this level as auto-selected
+ setAutoSelectionDone((prev) => new Set([...prev, currentIndex]));
+ // Automatically select it
+ selectDataStructure(firstChild, path.slice(0, currentIndex + 1));
+ }
+ }, [path, loading, autoSelectionDone, selectDataStructure]);
- const columnCount = path[path.length - 1]?.hasNext ? path.length + 1 : path.length;
+ // Skip first column if it only has one child (auto-selected)
+ const shouldSkipFirstColumn = path.length > 0 && path[0].children?.length === 1;
+ const visiblePath = shouldSkipFirstColumn ? path.slice(1) : path;
+ const columnCount =
+ visiblePath.length > 0 && visiblePath[visiblePath.length - 1]?.hasNext
+ ? visiblePath.length + 1
+ : visiblePath.length;
return (
<>
@@ -94,7 +132,7 @@ export const DatasetExplorer = ({
@@ -165,7 +203,9 @@ export const DatasetExplorer = ({
}, minmax(200px, 240px)) minmax(300px, 1fr)`,
}}
>
- {path.map((current, index) => {
+ {visiblePath.map((current, visibleIndex) => {
+ // Calculate the actual index in the full path
+ const index = shouldSkipFirstColumn ? visibleIndex + 1 : visibleIndex;
const isLast = index === path.length - 1;
const isFinal = isLast && !current.hasNext;
return (
@@ -242,7 +282,9 @@ export const DatasetExplorer = ({