Acceleration related changes and minor fixes

common/constants/index.ts

@@ -13,7 +13,7 @@ export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
   { label: 'Covering Index', value: 'covering' },
-  { label: 'Materialized View', value: 'materialized' },
+  // { label: 'Materialized View', value: 'materialized' }, Hidden Option -> Until opensearch-spark feature is ready
 ];
 
 export const ACCELERATION_AGGREGRATION_FUNCTIONS = [

public/components/Main/main.tsx

@@ -14,7 +14,7 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText
+  EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -83,6 +83,8 @@ export type DataRow = {
 interface MainProps {
   httpClient: CoreStart['http'];
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  isAccelerationFlyoutOpen: boolean;
+  urlDataSource: string;
 }
 
 interface MainState {
@@ -417,7 +419,11 @@ export class Main extends React.Component<MainProps, MainState> {
         queries.map((query: string) =>
           this.httpClient
             .post(endpoint, {
-              body: JSON.stringify({ lang: language, query: query, datasource: this.state.selectedDatasource[0].label}), // 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({
@@ -796,8 +802,11 @@ export class Main extends React.Component<MainProps, MainState> {
     if (this.state.language == 'SQL') {
       page = (
         <SQLPage
+          http={this.httpClient}
           onRun={
-            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch')
+              ? this.onRun
+              : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -814,7 +823,9 @@ export class Main extends React.Component<MainProps, MainState> {
       page = (
         <PPLPage
           onRun={
-            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch')
+              ? this.onRun
+              : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -876,7 +887,11 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
             <EuiText>Data Sources</EuiText>
-            <DataSelect http={this.httpClient} onSelect={this.handleDataSelect} />
+            <DataSelect
+              http={this.httpClient}
+              onSelect={this.handleDataSelect}
+              urlDataSource={this.props.urlDataSource}
+            />
             <EuiSpacer />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -903,6 +918,7 @@ export class Main extends React.Component<MainProps, MainState> {
                     <TableView
                       http={this.httpClient}
                       selectedItems={this.state.selectedDatasource}
+                      updateSQLQueries={this.updateSQLQueries}
                     />
                     <EuiSpacer />
                   </EuiFlexItem>

public/components/SQLPage/DataSelect.tsx

@@ -10,13 +10,18 @@ import { CoreStart } from '../../../../../src/core/public';
 interface CustomView {
   http: CoreStart['http'];
   onSelect: (selectedItems: []) => void;
+  urlDataSource: string;
 }
 
-export const DataSelect = ({ http, onSelect }: CustomView) => {
-  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([{ label: 'OpenSearch' }]);
+export const DataSelect = ({ http, onSelect, urlDataSource }: CustomView) => {
+  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([
+    { label: 'OpenSearch' },
+  ]);
   const [options, setOptions] = useState<any[]>([]);
 
   const datasources = () => {
+    let dataOptions: EuiComboBoxOptionOption[] = [];
+    let urlSourceFound = false;
     http
       .get(`/api/get_datasources`)
       .then((res) => {
@@ -34,21 +39,29 @@ export const DataSelect = ({ http, onSelect }: CustomView) => {
             }
 
             connectorGroups[connector].push(name);
+            if (name === urlDataSource) {
+              urlSourceFound = true;
+            }
           }
         });
-        options.push({ label: 'OpenSearch' });
+        dataOptions.push({ label: 'OpenSearch' });
+
         for (const connector in connectorGroups) {
           if (connectorGroups.hasOwnProperty(connector)) {
             const connectorNames = connectorGroups[connector];
 
-            options.push({
+            dataOptions.push({
               label: connector,
               options: connectorNames.map((name) => ({ label: name })),
             });
           }
         }
 
-        setOptions(options);
+        setOptions(dataOptions);
+        if (urlSourceFound) {
+          setSelectedOptions([{ label: urlDataSource }]);
+          onSelect([{ label: urlDataSource }]);
+        }
       })
       .catch((err) => {
         console.error(err);

public/components/SQLPage/SQLPage.tsx

@@ -7,6 +7,7 @@ import {
   EuiButton,
   EuiCodeBlock,
   EuiCodeEditor,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -21,18 +22,20 @@ import {
 import 'brace/ext/language_tools';
 import 'brace/mode/sql';
 import React from 'react';
+import { CoreStart } from '../../../../../src/core/public';
 import '../../ace-themes/sql_console';
 import { ResponseDetail, TranslateResult } from '../Main/main';
 import { CreateAcceleration } from '../acceleration/create/create_acceleration';
 
 interface SQLPageProps {
+  http: CoreStart['http'];
   onRun: (query: string) => void;
   onTranslate: (query: string) => void;
   onClear: () => void;
   updateSQLQueries: (query: string) => void;
   sqlQuery: string;
   sqlTranslations: ResponseDetail<TranslateResult>[];
-  selectedDatasource: string;
+  selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
 }
 
@@ -68,7 +71,8 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     this.setState({
       flyoutComponent: (
         <CreateAcceleration
-          dataSource="ds"
+          http={this.props.http}
+          selectedDatasource={this.props.selectedDatasource}
           resetFlyout={this.resetFlyout}
           updateQueries={this.props.updateSQLQueries}
         />
@@ -170,17 +174,18 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>
-            {this.props.selectedDatasource === 'S3' && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  fill={true}
-                  className="sql-accelerate-button"
-                  onClick={this.setAccelerationFlyout}
-                >
-                  Accelerate Table
-                </EuiButton>
-              </EuiFlexItem>
-            )}
+            {this.props.selectedDatasource &&
+              this.props.selectedDatasource[0].label !== 'OpenSearch' && (
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    fill={true}
+                    className="sql-accelerate-button"
+                    onClick={this.setAccelerationFlyout}
+                  >
+                    Accelerate Table
+                  </EuiButton>
+                </EuiFlexItem>
+              )}
           </EuiFlexGroup>
         </EuiPanel>
         {modal}

public/components/SQLPage/TableView.tsx

@@ -3,26 +3,51 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
+import { EuiComboBoxOptionOption, EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
 import { ON_LOAD_QUERY } from '../../../common/constants';
+import { AccelerationIndexFlyout } from './acceleration_index_flyout';
 import { getJobId, pollQueryStatus } from './utils';
 
 interface CustomView {
   http: CoreStart['http'];
-  selectedItems: any[];
+  selectedItems: EuiComboBoxOptionOption[];
+  updateSQLQueries: (query: string) => void;
 }
 
-export const TableView = ({ http, selectedItems }: CustomView) => {
+export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) => {
   const [tablenames, setTablenames] = useState<string[]>([]);
   const [selectedNode, setSelectedNode] = useState<string | null>(null);
   const [childData, setChildData] = useState<string[]>([]);
   const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
   const [indexData, setIndexedData] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [indiciesData, setIndiciesData] = useState<string []>([]);
+  const [indiciesData, setIndiciesData] = useState<string[]>([]);
+  const [indexFlyout, setIndexFlyout] = useState(<></>);
+
+  const resetFlyout = () => {
+    setIndexFlyout(<></>);
+  };
+
+  const handleAccelerationIndexClick = (
+    dataSource: string,
+    database: string,
+    dataTable: string,
+    indexName: string
+  ) => {
+    setIndexFlyout(
+      <AccelerationIndexFlyout
+        dataSource={dataSource}
+        database={database}
+        dataTable={dataTable}
+        indexName={indexName}
+        resetFlyout={resetFlyout}
+        updateSQLQueries={updateSQLQueries}
+      />
+    );
+  };
 
   const get_async_query_results = (id, http, callback) => {
     pollQueryStatus(id, http, callback);
@@ -64,7 +89,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
 
   useEffect(() => {
     getSidebarContent();
-  }, [selectedItems[0]['label']]);
+  }, [selectedItems]);
 
   const handleNodeClick = (nodeLabel: string) => {
     setSelectedNode(nodeLabel);
@@ -89,8 +114,8 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
     };
     getJobId(coverQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
-        data = [].concat(...data)
-        indiciesData.push(data)
+        data = [].concat(...data);
+        indiciesData.push(data);
         setIndexedData(indiciesData);
       });
     });
@@ -105,7 +130,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
     getJobId(skipQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
         if (data.length > 0) {
-            indiciesData.push('skip_index');
+          indiciesData.push('skip_index');
           callCoverQuery(nodeLabel1);
         }
       });
@@ -141,6 +166,13 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
                     label: indexChild,
                     id: `${table}_${indexChild}`,
                     icon: <EuiIcon type="bolt" size="s" />,
+                    callback: () =>
+                      handleAccelerationIndexClick(
+                        selectedItems[0].label,
+                        database,
+                        table,
+                        indexChild
+                      ),
                   }))
                 : undefined,
           }))
@@ -158,6 +190,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
           title={<h2>Error loading Datasources</h2>}
         />
       )}
+      {indexFlyout}
     </>
   );
 };

public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap

@@ -188,6 +188,7 @@ exports[`<SQLPage /> spec renders the component 1`] = `
           </div>
         </div>
       </div>
+
     </div>
   </div>
 </div>