added the skipping index queries, covering index queries,updates the …

public/components/Main/main.test.tsx

@@ -3,40 +3,35 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import { render, fireEvent } from "@testing-library/react";
-import { httpClientMock } from "../../../test/mocks";
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { httpClientMock } from '../../../test/mocks';
 import {
-  mockQueryResultJDBCResponse,
+  mockDatasourcesQuery,
+  mockHttpQuery,
   mockNotOkQueryResultResponse,
+  mockQueryResultJDBCResponse,
   mockQueryTranslationResponse,
   mockResultWithNull,
-  mockHttpQuery
-} from "../../../test/mocks/mockData";
-import Main from "./main";
+} from '../../../test/mocks/mockData';
+import Main from './main';
 
 const setBreadcrumbsMock = jest.fn();
 
-describe("<Main /> spec", () => {
-
-  it("renders the component", async () => {
-
+describe('<Main /> spec', () => {
+  it('renders the component', async () => {
     const client = httpClientMock;
-    client.post = jest.fn().mockResolvedValue(mockHttpQuery)
-
+    client.post = jest.fn().mockResolvedValue(mockHttpQuery);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
     const asyncTest = () => {
-      render(
-        <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
-      );
+      render(<Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />);
     };
     await asyncTest();
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-
-  it("click run button, and response is ok", async () => {
+  it('click run button, and response is ok', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryResultJDBCResponse);
 
@@ -51,9 +46,10 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click run button, response fills null and missing values", async () => {
+  it('click run button, response fills null and missing values', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockResultWithNull);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
@@ -64,11 +60,12 @@ describe("<Main /> spec", () => {
     };
     await asyncTest();
     expect(document.body.children[0]).toMatchSnapshot();
-  })
+  });
 
-  it("click run button, and response causes an error", async () => {
+  it('click run button, and response causes an error', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockRejectedValue('err');
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
@@ -81,9 +78,10 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click run button, and response is not ok", async () => {
+  it('click run button, and response is not ok', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockNotOkQueryResultResponse);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
@@ -96,9 +94,11 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click translation button, and response is ok", async () => {
+  it('click translation button, and response is ok', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryTranslationResponse);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
+
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
@@ -110,8 +110,10 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click clear button", async () => {
+  it('click clear button', async () => {
     const client = httpClientMock;
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
+
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );

public/components/Main/main.tsx

@@ -5,7 +5,7 @@
 
 import {
   EuiButton,
-  EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPage,
@@ -14,12 +14,13 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText,
+  EuiText
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
 import React from 'react';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
+import { AsyncQueryLoadingStatus } from '../../../common/types';
 import { MESSAGE_TAB_LABEL } from '../../utils/constants';
 import {
   Tree,
@@ -31,9 +32,9 @@ import {
 import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
+import { DataSelect } from '../SQLPage/DataSelect';
 import { SQLPage } from '../SQLPage/SQLPage';
 import { TableView } from '../SQLPage/TableView';
-import { AsyncQueryLoadingStatus } from '../../../common/types';
 
 interface ResponseData {
   ok: boolean;
@@ -101,7 +102,7 @@ interface MainState {
   itemIdToExpandedRowMap: ItemIdToExpandedRowMap;
   messages: Array<QueryMessage>;
   isResultFullScreen: boolean;
-  selectedDatasource: string;
+  selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
   asyncJobId: string;
@@ -238,7 +239,7 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
-      selectedDatasource: 'Opensearch',
+      selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
       asyncLoadingStatus: 'SUCCESS',
       asyncJobId: '',
@@ -416,7 +417,7 @@ export class Main extends React.Component<MainProps, MainState> {
         queries.map((query: string) =>
           this.httpClient
             .post(endpoint, {
-              body: JSON.stringify({ lang: language, query: query, datasource: 'my_glue' }), // TODO: dynamically datasource when accurate
+              body: JSON.stringify({ lang: language, query: query, datasource: this.state.selectedDatasource[0].label}), // TODO: dynamically datasource when accurate
             })
             .catch((error: any) => {
               this.setState({
@@ -781,9 +782,9 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   }
 
-  handleComboOptionChange = (selectedOption: string) => {
+  handleDataSelect = (selectedItems: []) => {
     this.setState({
-      selectedDatasource: selectedOption,
+      selectedDatasource: selectedItems,
     });
   };
 
@@ -796,7 +797,7 @@ export class Main extends React.Component<MainProps, MainState> {
       page = (
         <SQLPage
           onRun={
-            _.isEqual(this.state.selectedDatasource, 'Opensearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -813,7 +814,7 @@ export class Main extends React.Component<MainProps, MainState> {
       page = (
         <PPLPage
           onRun={
-            _.isEqual(this.state.selectedDatasource, 'Opensearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -875,21 +876,7 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
             <EuiText>Data Sources</EuiText>
-            <EuiComboBox
-              singleSelection={true}
-              placeholder="Connection Name"
-              options={[
-                { label: 'S3', value: 'S3' },
-                { label: 'Opensearch', value: 'Opensearch' },
-              ]}
-              selectedOptions={
-                this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []
-              }
-              onChange={(selectedOptions) => {
-                const selectedValue = selectedOptions[0] ? selectedOptions[0].value : '';
-                this.handleComboOptionChange(selectedValue);
-              }}
-            />
+            <DataSelect http={this.httpClient} onSelect={this.handleDataSelect} />
             <EuiSpacer />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -915,7 +902,7 @@ export class Main extends React.Component<MainProps, MainState> {
                     <EuiSpacer />
                     <TableView
                       http={this.httpClient}
-                      dataConnection={this.state.selectedDatasource}
+                      selectedItems={this.state.selectedDatasource}
                     />
                     <EuiSpacer />
                   </EuiFlexItem>

public/components/SQLPage/DataSelect.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../src/core/public';
+
+interface CustomView {
+  http: CoreStart['http'];
+  onSelect: (selectedItems: []) => void;
+}
+
+export const DataSelect = ({ http, onSelect }: CustomView) => {
+  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([{ label: 'OpenSearch' }]);
+  const [options, setOptions] = useState<any[]>([]);
+
+  const datasources = () => {
+    http
+      .get(`/api/get_datasources`)
+      .then((res) => {
+        const data = res.data.resp;
+
+        const connectorGroups = {};
+
+        data.forEach((item) => {
+          const connector = item.connector;
+          const name = item.name;
+
+          if (connector === 'S3GLUE') {
+            if (!connectorGroups[connector]) {
+              connectorGroups[connector] = [];
+            }
+
+            connectorGroups[connector].push(name);
+          }
+        });
+        options.push({ label: 'OpenSearch' });
+        for (const connector in connectorGroups) {
+          if (connectorGroups.hasOwnProperty(connector)) {
+            const connectorNames = connectorGroups[connector];
+
+            options.push({
+              label: connector,
+              options: connectorNames.map((name) => ({ label: name })),
+            });
+          }
+        }
+
+        setOptions(options);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  useEffect(() => {
+    datasources();
+  }, []);
+
+  const handleSelectionChange = (selectedItems: any[]) => {
+    setSelectedOptions(selectedItems);
+    onSelect(selectedItems);
+  };
+
+  return (
+    <EuiComboBox
+      singleSelection={{ asPlainText: true }}
+      isClearable={false}
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={(selectedItems) => handleSelectionChange(selectedItems)}
+    />
+  );
+};