[Discover Next] Dataset Dropdown

changelogs/fragments/7289.yml

@@ -0,0 +1,2 @@
+feat:
+- Add DataSet dropdown with index patterns and indices ([#7289](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7289))

src/plugins/data/public/index.ts

@@ -445,6 +445,7 @@ export {
   QueryEditorTopRow,
   // for BWC, keeping the old name
   IUiStart as DataPublicPluginStartUi,
+  DataSetNavigator,
 } from './ui';
 
 /**

src/plugins/data/public/ui/dataset_navigator/dataset_navigator.tsx

@@ -0,0 +1,253 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { EuiButtonEmpty, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { SavedObjectsClientContract, SimpleSavedObject } from 'opensearch-dashboards/public';
+import { map, scan } from 'rxjs/operators';
+import { ISearchStart } from '../../search/types';
+import { IIndexPattern } from '../..';
+import { getUiService, getIndexPatterns, getSearchService } from '../../services';
+
+const getClusters = async (savedObjectsClient: SavedObjectsClientContract) => {
+  return await savedObjectsClient.find({
+    type: 'data-source',
+    perPage: 10000,
+  });
+};
+
+export const searchResponseToArray = (showAllIndices: boolean) => (response) => {
+  const { rawResponse } = response;
+  if (!rawResponse.aggregations) {
+    return [];
+  } else {
+    return rawResponse.aggregations.indices.buckets
+      .map((bucket: { key: string }) => {
+        return bucket.key;
+      })
+      .filter((indexName: string) => {
+        if (showAllIndices) {
+          return true;
+        } else {
+          return !indexName.startsWith('.');
+        }
+      })
+      .map((indexName: string) => {
+        return {
+          name: indexName,
+          // item: {},
+        };
+      });
+  }
+};
+
+const buildSearchRequest = (showAllIndices: boolean, pattern: string, dataSourceId?: string) => {
+  const request = {
+    params: {
+      ignoreUnavailable: true,
+      expand_wildcards: showAllIndices ? 'all' : 'open',
+      index: pattern,
+      body: {
+        size: 0, // no hits
+        aggs: {
+          indices: {
+            terms: {
+              field: '_index',
+              size: 100,
+            },
+          },
+        },
+      },
+    },
+    dataSourceId,
+  };
+
+  return request;
+};
+
+const getIndices = async (search: ISearchStart, dataSourceId: string) => {
+  const request = buildSearchRequest(true, '*', dataSourceId);
+  return search
+    .getDefaultSearchInterceptor()
+    .search(request)
+    .pipe(map(searchResponseToArray(true)))
+    .pipe(scan((accumulator = [], value) => accumulator.join(value)))
+    .toPromise()
+    .catch(() => []);
+};
+
+interface DataSetOption {
+  id: string;
+  name: string;
+  dataSourceRef?: string;
+}
+
+interface DataSetNavigatorProps {
+  savedObjectsClient: SavedObjectsClientContract;
+  indexPatterns: Array<IIndexPattern | string>;
+}
+
+export const DataSetNavigator = ({ savedObjectsClient, indexPatterns }: DataSetNavigatorProps) => {
+  const [isDataSetNavigatorOpen, setIsDataSetNavigatorOpen] = useState(false);
+  const [clusterList, setClusterList] = useState<SimpleSavedObject[]>([]);
+  const [indexList, setIndexList] = useState<DataSetOption[]>([]);
+  const [selectedCluster, setSelectedCluster] = useState<any>();
+  const [selectedDataSet, setSelectedDataSet] = useState<DataSetOption>({
+    id: indexPatterns[0]?.id,
+    name: indexPatterns[0]?.title,
+  });
+  const [indexPatternList, setIndexPatternList] = useState<DataSetOption[]>([]);
+  const search = getSearchService();
+  const uiService = getUiService();
+  const indexPatternsService = getIndexPatterns();
+
+  const onButtonClick = () => setIsDataSetNavigatorOpen((isOpen) => !isOpen);
+  const closePopover = () => setIsDataSetNavigatorOpen(false);
+
+  const onDataSetClick = async (ds: DataSetOption) => {
+    const existingIndexPattern = indexPatternsService.getByTitle(ds.id, true);
+    const dataSet = await indexPatternsService.create(
+      { id: ds.id, title: ds.name },
+      !existingIndexPattern?.id
+    );
+    // save to cache by title because the id is not unique for temporary index pattern created
+    indexPatternsService.saveToCache(dataSet.title, dataSet);
+    uiService.Settings.setSelectedDataSet({
+      id: dataSet.id,
+      name: dataSet.title,
+      dataSourceRef: selectedCluster?.id ?? undefined,
+    });
+    setSelectedDataSet(ds);
+    closePopover();
+  };
+
+  useEffect(() => {
+    const subscription = uiService.Settings.getSelectedDataSet$().subscribe((dataSet) => {
+      if (dataSet) {
+        setSelectedDataSet(dataSet);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [uiService]);
+
+  // get all index patterns
+  useEffect(() => {
+    indexPatternsService.getIdsWithTitle().then((res) =>
+      setIndexPatternList(
+        res.map((indexPattern: { id: string; title: string }) => ({
+          id: indexPattern.id,
+          name: indexPattern.title,
+        }))
+      )
+    );
+  }, [indexPatternsService]);
+
+  useEffect(() => {
+    Promise.all([getClusters(savedObjectsClient)]).then((res) => {
+      setClusterList(res.length > 0 ? res?.[0].savedObjects : []);
+    });
+  }, [savedObjectsClient]);
+
+  useEffect(() => {
+    if (selectedCluster) {
+      // Get all indexes
+      getIndices(search, selectedCluster.id).then((res) => {
+        setIndexList(
+          res.map((index: { name: string }) => ({
+            name: index.name,
+            id: index.name,
+            dataSourceRef: selectedCluster.id,
+          }))
+        );
+      });
+    }
+  }, [search, selectedCluster, setIndexList]);
+
+  const dataSetButton = (
+    <EuiButtonEmpty
+      className="dataExplorerDSSelect"
+      color="text"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={onButtonClick}
+    >
+      {selectedDataSet ? selectedDataSet.name : 'Datasets'}
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover
+      button={dataSetButton}
+      isOpen={isDataSetNavigatorOpen}
+      closePopover={closePopover}
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenu
+        initialPanelId={0}
+        className="datasetNavigator"
+        panels={[
+          {
+            id: 0,
+            title: 'DATA',
+            items: [
+              {
+                name: 'Index Patterns',
+                panel: 1,
+              },
+              ...(clusterList
+                ? clusterList.map((cluster) => ({
+                    name: cluster.attributes.title,
+                    panel: 2,
+                    onClick: () => {
+                      setSelectedCluster(cluster);
+                    },
+                  }))
+                : []),
+            ],
+          },
+          {
+            id: 1,
+            title: 'Index Patterns',
+            items: [
+              ...(indexPatternList
+                ? indexPatternList.map((indexPattern) => ({
+                    name: indexPattern.name,
+                    onClick: () => onDataSetClick(indexPattern),
+                  }))
+                : []),
+            ],
+          },
+          {
+            id: 2,
+            title: selectedCluster ? selectedCluster.attributes.title : 'Cluster',
+            items: [
+              {
+                name: 'Indexes',
+                panel: 3,
+              },
+            ],
+          },
+          {
+            id: 3,
+            title: selectedCluster ? selectedCluster.attributes.title : 'Cluster',
+            items: [
+              ...(indexList
+                ? indexList.map((index) => ({
+                    name: index.name,
+                    onClick: () => onDataSetClick(index),
+                  }))
+                : []),
+            ],
+          },
+          {
+            id: 4,
+            title: 'clicked',
+          },
+        ]}
+      />
+    </EuiPopover>
+  );
+};

src/plugins/query_enhancements/public/data_source_connection/utils/index.ts → src/plugins/data/public/ui/dataset_navigator/index.tsx

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './create_extension';
+export { DataSetNavigator } from './dataset_navigator';

src/plugins/data/public/ui/index.ts

@@ -49,3 +49,4 @@ export {
 } from './query_editor';
 export { SearchBar, SearchBarProps, StatefulSearchBarProps } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
+export { DataSetNavigator } from './dataset_navigator';

src/plugins/data/public/ui/query_editor/_dataset_navigator.scss

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+.datasetNavigator {
+  min-width: 350px;
+  border-bottom: $euiBorderThin !important;
+}

src/plugins/data/public/ui/query_editor/_index.scss

@@ -1,2 +1,3 @@
 @import "./language_selector";
+@import "./dataset_navigator";
 @import "./query_editor";

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -53,6 +53,12 @@
   }
 }
 
+.osdQueryEditor__dataSetNavigatorWrapper {
+  :first-child {
+    border-bottom: $euiBorderThin !important;
+  }
+}
+
 @include euiBreakpoint("xs", "s") {
   .osdQueryEditor--withDatePicker {
     > :first-child {

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -6,8 +6,8 @@
 import { EuiFlexGroup, EuiFlexItem, htmlIdGenerator, PopoverAnchorPosition } from '@elastic/eui';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
-import React, { Component, createRef, RefObject } from 'react';
-import { Settings } from '..';
+import React, { Component, createRef, RefObject, useCallback } from 'react';
+import { DataSetNavigator, Settings } from '..';
 import { DataSource, IDataPluginServices, IIndexPattern, Query, TimeRange } from '../..';
 import {
   CodeEditor,
@@ -294,11 +294,12 @@ export default class QueryEditorUI extends Component<Props, State> {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="xs" alignItems="center" className={`${className}__wrapper`}>
               <EuiFlexItem grow={false}>{this.props.prepend}</EuiFlexItem>
-              {this.state.isDataSourcesVisible && (
-                <EuiFlexItem grow={false} className={`${className}__dataSourceWrapper`}>
-                  <div ref={this.props.dataSourceContainerRef} />
-                </EuiFlexItem>
-              )}
+              <EuiFlexItem grow={false} className={`${className}__dataSetNavigatorWrapper`}>
+                <DataSetNavigator
+                  savedObjectsClient={this.services.savedObjects.client}
+                  indexPatterns={this.props.indexPatterns}
+                />
+              </EuiFlexItem>
               <EuiFlexItem grow={false} className={`${className}__languageWrapper`}>
                 <QueryLanguageSelector
                   language={this.props.query.language}
@@ -307,11 +308,6 @@ export default class QueryEditorUI extends Component<Props, State> {
                   appName={this.services.appName}
                 />
               </EuiFlexItem>
-              {this.state.isDataSetsVisible && (
-                <EuiFlexItem grow={false} className={`${className}__dataSetWrapper`}>
-                  <div ref={this.props.containerRef} />
-                </EuiFlexItem>
-              )}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem onClick={this.onClickInput} grow={true}>

src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx

@@ -191,7 +191,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
   }
 
   function isValidQuery(query: Query | undefined) {
-    if (query && query.query) return true;
+    return query && query.query;
   }
 
   function getQueryStringInitialValue(language: string) {

src/plugins/data/public/ui/settings/settings.ts

@@ -27,6 +27,7 @@
   private isEnabled = false;
   private enabledQueryEnhancementsUpdated$ = new BehaviorSubject<boolean>(this.isEnabled);
   private enhancedAppNames: string[] = [];
+  private selectedDataSet$ = new BehaviorSubject<any>(null);
 
   constructor(
     private readonly config: ConfigSchema['enhancements'],
@@ -38,8 +39,28 @@
     this.isEnabled = true;
     this.setUserQueryEnhancementsEnabled(this.isEnabled);
     this.enhancedAppNames = this.isEnabled ? this.config.supportedAppNames : [];
+    this.setSelectedDataSet(this.getSelectedDataSet());
   }
 
+  /**
+   * @experimental - Sets the dataset BehaviorSubject
+   */
+  setSelectedDataSet = (dataSet: any) => {
+    this.storage.set('opensearchDashboards.userQueryDataSet', dataSet);
+    this.selectedDataSet$.next(dataSet);
+  };
+
+  /**
+   * @experimental - Gets the dataset Observable
+   */
+  getSelectedDataSet$ = () => {
+    return this.selectedDataSet$.asObservable();
+  };
+
+  getSelectedDataSet = () => {
+    return this.storage.get('opensearchDashboards.userQueryDataSet');
+  };
+
   supportsEnhancementsEnabled(appName: string) {
     return this.enhancedAppNames.includes(appName);
   }

src/plugins/data/public/ui/types.ts

@@ -66,6 +66,9 @@ export interface IUiStart {
   IndexPatternSelect: React.ComponentType<IndexPatternSelectProps>;
   SearchBar: React.ComponentType<StatefulSearchBarProps>;
   SuggestionsComponent: React.ComponentType<SuggestionsComponentProps>;
+  /**
+   * @experimental - Subject to change
+   */
   Settings: Settings;
   dataSourceContainer$: Observable<HTMLDivElement | null>;
   container$: Observable<HTMLDivElement | null>;