loading combo boxes for acc flyout

Signed-off-by: Shenoy Pratik <[email protected]>
ps48 · Oct 4, 2023 · 2bbab50 · 2bbab50
1 parent e4e0a2e
commit 2bbab50
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -802,6 +802,7 @@ 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

diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
@@ -22,11 +22,13 @@ 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;
@@ -69,6 +71,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     this.setState({
       flyoutComponent: (
         <CreateAcceleration
+          http={this.props.http}
           dataSource="ds"
           resetFlyout={this.resetFlyout}
           updateQueries={this.props.updateSQLQueries}

diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
@@ -16,6 +16,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
 import {
   ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
   ACCELERATION_TIME_INTERVAL,
@@ -31,12 +32,14 @@ import { CreateAccelerationHeader } from './create_acceleration_header';
 import { formValidator, hasError } from './utils';
 
 export interface CreateAccelerationProps {
+  http: CoreStart['http'];
   dataSource: string;
   resetFlyout: () => void;
   updateQueries: (query: string) => void;
 }
 
 export const CreateAcceleration = ({
+  http,
   dataSource,
   resetFlyout,
   updateQueries,
@@ -107,6 +110,7 @@ export const CreateAcceleration = ({
             id="acceleration-form"
           >
             <AccelerationDataSourceSelector
+              http={http}
               accelerationFormData={accelerationFormData}
               setAccelerationFormData={setAccelerationFormData}
             />

diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
@@ -13,15 +13,19 @@ import {
 } from '@elastic/eui';
 import producer from 'immer';
 import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
 import { CreateAccelerationForm } from '../../../../common/types';
+import { getJobId, pollQueryStatus } from '../../SQLPage/utils';
 import { hasError, validateDataSource } from '../create/utils';
 
 interface AccelerationDataSourceSelectorProps {
+  http: CoreStart['http'];
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
 }
 
 export const AccelerationDataSourceSelector = ({
+  http,
   accelerationFormData,
   setAccelerationFormData,
 }: AccelerationDataSourceSelectorProps) => {
@@ -33,22 +37,53 @@ export const AccelerationDataSourceSelector = ({
   const [selectedDatabase, setSelectedDatabase] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [tables, setTables] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [selectedTable, setSelectedTable] = useState<EuiComboBoxOptionOption<string>[]>([]);
+  const [loadingComboBoxes, setLoadingComboBoxes] = useState({
+    dataSource: false,
+    database: false,
+    dataTable: false,
+  });
+
+  const loadDataSource = () => {
+    setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: true });
+    http
+      .get(`/api/get_datasources`)
+      .then((res) => {
+        const data = res.data.resp;
+        setDataConnections(
+          data
+            .filter((connection: any) => connection.connector.toUpperCase() === 'S3GLUE')
+            .map((connection: any) => ({ label: connection.name }))
+        );
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+    setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: false });
+  };
+
+  const loadDatabases = () => {
+    setLoadingComboBoxes({ ...loadingComboBoxes, database: true });
+    const query = {
+      lang: 'sql',
+      query: `SHOW SCHEMAS IN ${accelerationFormData.dataSource}`,
+      datasource: accelerationFormData.dataSource,
+    };
+    getJobId(query, http, (id) => {
+      pollQueryStatus(id, http, (data) => {
+        console.log('data', data);
+        setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
+      });
+    });
+  };
 
   useEffect(() => {
-    // TODO: remove hardcoded responses
-    setDataConnections([
-      {
-        label: 'spark1',
-      },
-      {
-        label: 'spark2',
-      },
-    ]);
+    loadDataSource();
   }, []);
 
   useEffect(() => {
     // TODO: remove hardcoded responses
     if (accelerationFormData.dataSource !== '') {
+      loadDatabases();
       setDatabases([
         {
           label: 'Database1',
@@ -132,6 +167,7 @@ export const AccelerationDataSourceSelector = ({
           }}
           isClearable={false}
           isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')}
+          isLoading={loadingComboBoxes.dataSource}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -156,6 +192,7 @@ export const AccelerationDataSourceSelector = ({
           }}
           isClearable={false}
           isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
+          isLoading={loadingComboBoxes.database}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -180,6 +217,7 @@ export const AccelerationDataSourceSelector = ({
           }}
           isClearable={false}
           isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
+          isLoading={loadingComboBoxes.dataTable}
         />
       </EuiFormRow>
     </>