Event Analytics - Add index picker to explorer page (#125)

* Add index picker to explorer page

* Update explorer.tsx

public/components/common/search/searchindex.tsx

@@ -0,0 +1,66 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { EuiComboBox } from '@elastic/eui';
+import React, { useState, useEffect, memo } from 'react';
+
+
+export const IndexPicker = memo(function indexDropdown(props: any) {
+  return <SearchIndex {...props} />;
+});
+
+interface Fetch {
+  dslService: any;
+  query: any;
+  handleQueryChange: (query: string, index: string)  => void;
+}
+
+export function SearchIndex(options: Fetch) {
+
+  const [indicesFromBackend, setindicesFromBackend] = useState([]);
+
+  // fetch indices from backend
+  const getIndices = async (dslService: any) => {
+    if (indicesFromBackend.length === 0) {
+      const indices = (await dslService.fetchIndices()).filter(
+        ({ index }) => !index.startsWith('.')
+      );
+      for (let i = 0; i < indices.length; i++) {
+        indicesFromBackend.push({
+          label: indices[i].index,
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    getIndices(options.dslService);
+  }, []);
+
+  const [selectedOptions, setSelected] = useState(
+     []
+  );
+
+  // handle Index Change
+  const onChange = (selectedOptions) => {
+    options.handleQueryChange(options.query, selectedOptions);
+    setSelected(selectedOptions);
+  };
+
+  return (
+    <EuiComboBox
+      placeholder="Select one or more index"
+      options={indicesFromBackend}
+      selectedOptions={selectedOptions}
+      onChange={(e) => onChange(e)}
+    />
+  );
+}

public/components/explorer/explorer.tsx

@@ -36,6 +36,7 @@ import { NoResults } from './no_results';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
+import { IndexPicker } from '../common/search/searchindex';
 import {
   IField,
   IQueryTab
@@ -463,6 +464,11 @@ export const Explorer = ({
         onLiveStreamChange={ handleLiveStreamChecked }
         actionItems={ actionItems }
       />
+      <IndexPicker
+        dslService={ dslService }
+        query = { query }
+        handleQueryChange={(query: string, index: string) => { handleQueryChange(query, index) } }
+      />
       <EuiTabbedContent
         className="mainContentTabs"
         initialSelectedTab={ memorizedMainContentTabs[0] }
@@ -472,4 +478,4 @@ export const Explorer = ({
       />
     </div>
   );
-};
+};