From d15ed6463e8b9527be7b478c4046a9384f059ce6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Oct 2023 16:39:54 +0000
Subject: [PATCH] Adding minor updates and bug fixes (#140)

* adding minor updates to acceleration ui

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* edits to acceleration index flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* adding minor edits to table view

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update snapshots

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* remove console log

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* minor fixes to namings and tableview

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update tableview clear db

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
(cherry picked from commit 56a6bce458da6c765b69d2e0e074a627cb8fb71e)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 common/constants/index.ts                     |  16 +--
 .../Main/__snapshots__/main.test.tsx.snap     |  51 ++++++++-
 public/components/Main/main.tsx               |  11 +-
 public/components/PPLPage/PPLPage.tsx         |  15 ++-
 .../__snapshots__/PPLPage.test.tsx.snap       |   8 +-
 public/components/SQLPage/CreateButton.tsx    |  30 ++---
 public/components/SQLPage/SQLPage.tsx         |   4 +-
 public/components/SQLPage/TableView.tsx       |  60 ++++++----
 .../SQLPage/acceleration_index_flyout.tsx     | 104 ++++++++++--------
 public/components/SQLPage/utils.tsx           |  17 ++-
 .../selectors/index_type_selector.tsx         |  12 +-
 .../visual_editors/query_builder.tsx          |  12 +-
 test/mocks/accelerationMock.ts                |  12 +-
 13 files changed, 217 insertions(+), 135 deletions(-)

diff --git a/common/constants/index.ts b/common/constants/index.ts
index 4fc24444..ed37754e 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -8,20 +8,20 @@ export const PLUGIN_NAME = 'Query Workbench';
 export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 
-export const SKIPPING_INDEX = `skipping_index`
+export const SKIPPING_INDEX = `skipping_index`;
 export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
 export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs 
 (status VALUE_SET) 
 WITH (
   auto_refresh = true
-  )`
-export const COVERING_INDEX_QUERY =`CREATE INDEX covering_idx ON myS3.logs_db.http_logs
+  )`;
+export const COVERING_INDEX_QUERY = `CREATE INDEX covering_idx ON myS3.logs_db.http_logs
  (status) 
  WITH (
   auto_refresh = true
-  )`
-export const CREATE_DATABASE_QUERY =`CREATE DATABASE myS3.logs_db`
-export const CREATE_TABLE_QUERY =`CREATE EXTERNAL TABLE logs (
+  )`;
+export const CREATE_DATABASE_QUERY = `CREATE DATABASE myS3.logs_db`;
+export const CREATE_TABLE_QUERY = `CREATE EXTERNAL TABLE myS3.logs_db.logs (
   key BIGINT,
   status INTEGER,
   size FLOAT,
@@ -32,7 +32,7 @@ USING JSON
 OPTIONS (
   path 's3://test/path',
   compression 'gzip'
-);`
+);`;
 
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
@@ -80,3 +80,5 @@ export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices
 ##### Note:
 - All user given index names must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed.  
   `;
+
+export const SIDEBAR_POLL_INTERVAL_MS = 5000;
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index ff0dd051..d8ef37d5 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -193,6 +193,7 @@ exports[`<Main /> spec click clear button 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -752,6 +753,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1311,6 +1313,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1870,6 +1873,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1974,7 +1978,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            2
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                2
+                              </div>
+                            </span>
                              
                           </div>
                         </span>
@@ -2015,7 +2027,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            2
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                2
+                              </div>
+                            </span>
                              
                           </div>
                         </span>
@@ -2501,6 +2521,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -2605,6 +2626,13 @@ exports[`<Main /> spec click run button, response fills null and missing values
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </span>
                              
                           </div>
                         </span>
@@ -2645,6 +2673,13 @@ exports[`<Main /> spec click run button, response fills null and missing values
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </span>
                              
                           </div>
                         </span>
@@ -3133,6 +3168,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3683,6 +3719,7 @@ exports[`<Main /> spec renders the component 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3778,7 +3815,15 @@ exports[`<Main /> spec renders the component 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            .kibana_1
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                .kibana_1
+                              </div>
+                            </span>
                              
                           </div>
                         </span>
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 046554dc..a8b38326 100644
--- a/public/components/Main/main.tsx
+++ b/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';
@@ -790,6 +790,9 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   handleDataSelect = (selectedItems: []) => {
+    if (selectedItems[0].label !== 'OpenSearch' && this.state.language === 'SQL') {
+      this.updateSQLQueries('');
+    }
     this.setState({
       selectedDatasource: selectedItems,
     });
@@ -912,13 +915,11 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
             <EuiPanel>
-              <EuiPageSideBar>
+              <EuiPageSideBar style={{ maxWidth: '400px', width: '400px' }}>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <CreateButton
-                        updateSQLQueries={this.updateSQLQueries}
-                      />
+                      <CreateButton updateSQLQueries={this.updateSQLQueries} />
                     </EuiFlexItem>
                     <EuiSpacer />
                     <TableView
diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index 4130bea7..98c5a920 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -3,25 +3,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import {
-  EuiPanel,
   EuiButton,
+  EuiCodeBlock,
+  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
-  EuiCodeEditor,
-  EuiSpacer,
-  EuiCodeBlock,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
+import React from 'react';
 import { ResponseDetail, TranslateResult } from '../Main/main';
-import _ from 'lodash';
 
 interface PPLPageProps {
   onRun: (query: string) => void;
@@ -107,7 +106,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         <EuiCodeEditor
           theme="sql_console"
           width="100%"
-          height="5rem"
+          height="7rem"
           value={this.props.pplQuery}
           onChange={this.props.updatePPLQueries}
           showPrintMargin={false}
diff --git a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
index c3c70679..2f2c4817 100644
--- a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
+++ b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
     <div
       class="euiCodeEditorWrapper"
       data-test-subj="codeEditorContainer"
-      style="width: 100%; height: 5rem;"
+      style="width: 100%; height: 7rem;"
     >
       <button
         class="euiCodeEditorKeyboardHint"
@@ -39,7 +39,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
       <div
         class=" ace_editor ace-tm"
         id="some_html_id"
-        style="width: 100%; height: 5rem; font-size: 14px;"
+        style="width: 100%; height: 7rem; font-size: 14px;"
       >
         <textarea
           aria-label="Code Editor"
@@ -211,7 +211,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
     <div
       class="euiCodeEditorWrapper"
       data-test-subj="codeEditorContainer"
-      style="width: 100%; height: 5rem;"
+      style="width: 100%; height: 7rem;"
     >
       <button
         class="euiCodeEditorKeyboardHint"
@@ -232,7 +232,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
       <div
         class=" ace_editor ace-tm"
         id="some_html_id"
-        style="width: 100%; height: 5rem; font-size: 14px;"
+        style="width: 100%; height: 7rem; font-size: 14px;"
       >
         <textarea
           aria-label="Code Editor"
diff --git a/public/components/SQLPage/CreateButton.tsx b/public/components/SQLPage/CreateButton.tsx
index 9e4db734..b7ccf53c 100644
--- a/public/components/SQLPage/CreateButton.tsx
+++ b/public/components/SQLPage/CreateButton.tsx
@@ -5,14 +5,18 @@
 
 import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
-import { COVERING_INDEX_QUERY, CREATE_DATABASE_QUERY, CREATE_TABLE_QUERY, SKIPPING_INDEX_QUERY } from '../../../common/constants';
-
+import {
+  COVERING_INDEX_QUERY,
+  CREATE_DATABASE_QUERY,
+  CREATE_TABLE_QUERY,
+  SKIPPING_INDEX_QUERY,
+} from '../../../common/constants';
 
 interface CreateButtonProps {
-  updateSQLQueries: (query: string) => void
+  updateSQLQueries: (query: string) => void;
 }
 
-export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
+export const CreateButton = ({ updateSQLQueries }: CreateButtonProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(null);
 
@@ -26,17 +30,17 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
   };
 
   const handleSubMenuClick = (query: string) => {
-    updateSQLQueries(query)
+    updateSQLQueries(query);
     closePopover();
   };
 
   const fromSqlItems = [
     {
-      name: 'Create Table',
+      name: 'Create Database',
       onClick: () => handleSubMenuClick(CREATE_DATABASE_QUERY),
     },
     {
-      name: 'SQL Command',
+      name: 'Create Table',
       onClick: () => handleSubMenuClick(CREATE_TABLE_QUERY),
     },
   ];
@@ -71,30 +75,30 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
         panels={[
           {
             id: 0,
-            title: 'Choose an option',
+            title: 'Create options',
             items: [
               {
-                name: 'FROM SQL',
+                name: 'Spark SQL',
                 panel: 1,
               },
               {
-                name: 'Accelerated Index',
+                name: 'Acceleration Index',
                 panel: 2,
               },
             ],
           },
           {
             id: 1,
-            title: 'FROM SPARK SQL Options',
+            title: 'SPARK SQL Options',
             items: fromSqlItems,
           },
           {
             id: 2,
-            title: 'Accelerated Index Options',
+            title: 'Acceleration Index Options',
             items: acceleratedIndexItems,
           },
         ]}
       />
     </EuiPopover>
   );
-}
\ No newline at end of file
+};
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 9894b143..6d6436c8 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -17,7 +17,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiPanel,
-  EuiSpacer
+  EuiSpacer,
 } from '@elastic/eui';
 import 'brace/ext/language_tools';
 import 'brace/mode/sql';
@@ -124,7 +124,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     }
 
     return (
-      <>  
+      <>
         <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
           <EuiSpacer size="s" />
           <EuiCodeEditor
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
index f3c97f24..017fbf19 100644
--- a/public/components/SQLPage/TableView.tsx
+++ b/public/components/SQLPage/TableView.tsx
@@ -10,6 +10,8 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiLoadingSpinner,
+  EuiText,
+  EuiToolTip,
   EuiTreeView,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -32,8 +34,11 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
   const [indexData, setIndexedData] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [indiciesData, setIndiciesData] = useState<string[]>([]);
   const [indexFlyout, setIndexFlyout] = useState(<></>);
+  const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({});
+  const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({});
+
+  let indiciesData: string[] = [];
 
   const resetFlyout = () => {
     setIndexFlyout(<></>);
@@ -56,15 +61,13 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       />
     );
   };
-  const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({});
-  const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({});
 
   const get_async_query_results = (id, http, callback) => {
     pollQueryStatus(id, http, callback);
   };
 
   const getSidebarContent = () => {
-    if (selectedItems[0].label == 'OpenSearch') {
+    if (selectedItems[0].label === 'OpenSearch') {
       setTablenames([]);
       const query = { query: ON_LOAD_QUERY };
       http
@@ -100,6 +103,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   };
 
   useEffect(() => {
+    setIsLoading(false);
     getSidebarContent();
   }, [selectedItems]);
 
@@ -135,9 +139,13 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
     };
     getJobId(coverQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
-        data = [].concat(...data);
-        indiciesData.concat(data);
-        setIndexedData(indiciesData);
+        const res = [].concat(data);
+        const final = indiciesData.concat(...res);
+        setIndexedData(final);
+        setChildLoadingStates((prevState) => ({
+          ...prevState,
+          [nodeLabel1]: false,
+        }));
       });
     });
   };
@@ -157,13 +165,8 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       get_async_query_results(id, http, (data) => {
         if (data.length > 0) {
           indiciesData.push(SKIPPING_INDEX);
-          callCoverQuery(nodeLabel1);
-
-          setChildLoadingStates((prevState) => ({
-            ...prevState,
-            [nodeLabel1]: false,
-          }));
         }
+        callCoverQuery(nodeLabel1);
       });
     });
   };
@@ -171,13 +174,17 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   const treeData = tablenames.map((database, index) => ({
     label: (
       <div>
-        {database} {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
+        <EuiToolTip position="right" content={database} delay="long">
+          <EuiText>{_.truncate(database, { length: 50 })}</EuiText>
+        </EuiToolTip>{' '}
+        {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
       </div>
     ),
     icon: <EuiIcon type="database" size="m" />,
     id: 'element_' + index,
     callback: () => {
-      handleNodeClick(database);
+      setChildData([]);
+      selectedItems[0].label !== 'OpenSearch' && handleNodeClick(database);
     },
     isSelectable: true,
     isExpanded: true,
@@ -186,7 +193,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
         ? childData.map((table) => ({
             label: (
               <div>
-                {table} {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
+                <EuiToolTip position="right" content={table} delay="long">
+                  <EuiText>{_.truncate(table, { length: 50 })}</EuiText>
+                </EuiToolTip>{' '}
+                {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
               </div>
             ),
             id: `${database}_${table}`,
@@ -194,13 +204,23 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
             callback: () => {
               setIndexedData([]);
               handleChildClick(table);
+              setChildLoadingStates((prevState) => ({
+                ...prevState,
+                [selectedChildNode]: false,
+              }));
             },
             sSelectable: true,
             isExpanded: true,
             children:
               selectedChildNode === table
                 ? indexData.map((indexChild) => ({
-                    label: indexChild,
+                    label: (
+                      <div>
+                        <EuiToolTip position="right" content={indexChild} delay="long">
+                          <EuiText>{_.truncate(indexChild, { length: 50 })}</EuiText>
+                        </EuiToolTip>
+                      </div>
+                    ),
                     id: `${table}_${indexChild}`,
                     icon: <EuiIcon type="bolt" size="s" />,
                     callback: () =>
@@ -220,9 +240,9 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
     <>
       <EuiFlexGroup>
         {isLoading ? (
-          <EuiFlexGroup alignItems="center" gutterSize='s'>
-            <EuiFlexItem grow={false}>Loading your databases</EuiFlexItem>
-            <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>Loading databases</EuiFlexItem>
+            <EuiFlexItem>
               <EuiLoadingSpinner size="m" />
             </EuiFlexItem>
           </EuiFlexGroup>
diff --git a/public/components/SQLPage/acceleration_index_flyout.tsx b/public/components/SQLPage/acceleration_index_flyout.tsx
index 9b855384..b07f2d89 100644
--- a/public/components/SQLPage/acceleration_index_flyout.tsx
+++ b/public/components/SQLPage/acceleration_index_flyout.tsx
@@ -6,6 +6,9 @@
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -16,6 +19,7 @@ import {
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
@@ -63,59 +67,39 @@ export const AccelerationIndexFlyout = ({
             <EuiPageHeader>
               <EuiPageHeaderSection>
                 <EuiTitle size="l" data-test-subj="acceleration-index-desc-header">
-                  <h1>{indexName}</h1>
+                  <h2>{indexName}</h2>
                 </EuiTitle>
               </EuiPageHeaderSection>
             </EuiPageHeader>
           </div>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
-          <h3>Acceleration index Source</h3>
-          <EuiHorizontalRule />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <h3>Data Source</h3>
-              <EuiSpacer />
-              <p>{dataSource}</p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <h3>Database</h3>
-              <EuiSpacer />
-              <p>{database}</p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <h3>Table</h3>
-              <EuiSpacer />
-              <p>{dataTable}</p>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <h3>Acceleration index destination</h3>
-          <EuiHorizontalRule />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <h3>OpenSearch Index</h3>
-              <EuiSpacer />
-              <p>
-                {indexName === 'skipping_index'
-                  ? `flint_${dataSource}_${database}_${dataTable}_skipping_index`
-                  : `flint_${dataSource}_${database}_${dataTable}_${indexName}_index`}
-              </p>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <h3>Acceleration index actions</h3>
-          <EuiHorizontalRule />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiButton iconSide="right" fill iconType="lensApp" onClick={updateDescribeQuery}>
-                Describe Index
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton iconSide="right" iconType="trash" onClick={updateDropQuery} color="danger">
-                Drop Index
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <EuiText>
+            <h3>Acceleration index source</h3>
+          </EuiText>
+          <EuiHorizontalRule margin="s" />
+          <EuiDescriptionList>
+            <EuiDescriptionListTitle>Data Source</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{dataSource}</EuiDescriptionListDescription>
+            <EuiDescriptionListTitle>Database</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{database}</EuiDescriptionListDescription>
+            <EuiDescriptionListTitle>Data Table</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{dataTable}</EuiDescriptionListDescription>
+          </EuiDescriptionList>
+          <EuiSpacer size="xl" />
+          <EuiText>
+            <h3>Acceleration index destination</h3>
+          </EuiText>
+          <EuiHorizontalRule margin="s" />
+          <EuiDescriptionList>
+            <EuiDescriptionListTitle>OpenSearch Index</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              {indexName === 'skipping_index'
+                ? `flint_${dataSource}_${database}_${dataTable}_skipping_index`
+                : `flint_${dataSource}_${database}_${dataTable}_${indexName}_index`}
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+          <EuiSpacer size="xl" />
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
@@ -124,6 +108,32 @@ export const AccelerationIndexFlyout = ({
                 Close
               </EuiButtonEmpty>
             </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    iconSide="right"
+                    fill
+                    iconType="lensApp"
+                    onClick={updateDescribeQuery}
+                    size="s"
+                  >
+                    Describe Index
+                  </EuiButton>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    iconSide="right"
+                    iconType="trash"
+                    onClick={updateDropQuery}
+                    color="danger"
+                    size="s"
+                  >
+                    Drop Index
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutFooter>
       </EuiFlyout>
diff --git a/public/components/SQLPage/utils.tsx b/public/components/SQLPage/utils.tsx
index 48909ab8..a8d2cfcb 100644
--- a/public/components/SQLPage/utils.tsx
+++ b/public/components/SQLPage/utils.tsx
@@ -2,19 +2,26 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-const POLL_INTERVAL_MS = 5000;
+
 import _ from 'lodash';
 import { CoreStart } from '../../../../../src/core/public';
+import { SIDEBAR_POLL_INTERVAL_MS } from '../../../common/constants';
 
+let previousJobTimer: NodeJS.Timeout | null = null;
 
-
-export const pollQueryStatus = (id: string, http :CoreStart['http'], callback) => {
+export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) => {
+  if (previousJobTimer) {
+    clearTimeout(previousJobTimer);
+  }
   http
     .get(`/api/spark_sql_console/job/` + id)
     .then((res) => {
       const status = res.data.resp.status;
       if (status === 'PENDING' || status === 'RUNNING' || status === 'SCHEDULED') {
-        setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
+        previousJobTimer = setTimeout(
+          () => pollQueryStatus(id, http, callback),
+          SIDEBAR_POLL_INTERVAL_MS
+        );
       } else if (status === 'FAILED') {
         callback([]);
       } else if (status === 'SUCCESS') {
@@ -36,7 +43,7 @@ export const getJobId = (query: {}, http: CoreStart['http'], callback) => {
     })
     .then((res) => {
       id = res.data.resp.queryId;
-      callback(id)
+      callback(id);
     })
     .catch((err) => {
       console.error(err);
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index 5c8c9bca..7437e24d 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -52,11 +52,13 @@ export const IndexTypeSelector = ({
       };
       getJobId(query, http, (id: string) => {
         pollQueryStatus(id, http, (data: any[]) => {
-          const dataTableFields: DataTableFieldsType[] = data.map((field, index) => ({
-            id: `${idPrefix}${index + 1}`,
-            fieldName: field.col_name,
-            dataType: field.data_type,
-          }));
+          const dataTableFields: DataTableFieldsType[] = data
+            .filter((row) => !row[0].startsWith('#'))
+            .map((row, index) => ({
+              id: `${idPrefix}${index + 1}`,
+              fieldName: row[0],
+              dataType: row[1],
+            }));
           setAccelerationFormData({
             ...accelerationFormData,
             dataTableFields: dataTableFields,
diff --git a/public/components/acceleration/visual_editors/query_builder.tsx b/public/components/acceleration/visual_editors/query_builder.tsx
index ef15bc9e..b4537f0e 100644
--- a/public/components/acceleration/visual_editors/query_builder.tsx
+++ b/public/components/acceleration/visual_editors/query_builder.tsx
@@ -58,8 +58,7 @@ const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[
  * Skipping Index create query example:
  *
  * CREATE SKIPPING INDEX
- * ON datasource.database.table
- * FOR COLUMNS (
+ * ON datasource.database.table (
  *    field1 VALUE_SET,
  *    field2 PARTITION,
  *    field3 MIN_MAX,
@@ -74,8 +73,7 @@ export const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerati
   const { dataSource, database, dataTable, skippingIndexQueryData } = accelerationformData;
 
   const codeQuery = `CREATE SKIPPING INDEX
-ON ${dataSource}.${database}.${dataTable}
-  FOR COLUMNS (
+ON ${dataSource}.${database}.${dataTable} (
 ${buildSkippingIndexColumns(skippingIndexQueryData)}
   ) ${buildIndexOptions(accelerationformData)}`;
 
@@ -92,8 +90,7 @@ const buildCoveringIndexColumns = (coveringIndexQueryData: string[]) => {
  * Covering Index create query example:
  *
  * CREATE INDEX index_name
- * ON datasource.database.table
- * FOR COLUMNS (
+ * ON datasource.database.table (
  *    field1,
  *    field2,
  *    field3,
@@ -114,8 +111,7 @@ export const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerati
   } = accelerationformData;
 
   const codeQuery = `CREATE INDEX ${accelerationIndexName}
-ON ${dataSource}.${database}.${dataTable}
-  FOR COLUMNS (
+ON ${dataSource}.${database}.${dataTable} (
 ${buildCoveringIndexColumns(coveringIndexQueryData)}
   ) ${buildIndexOptions(accelerationformData)}`;
 
diff --git a/test/mocks/accelerationMock.ts b/test/mocks/accelerationMock.ts
index 085459de..3cc0c2ae 100644
--- a/test/mocks/accelerationMock.ts
+++ b/test/mocks/accelerationMock.ts
@@ -202,8 +202,7 @@ export const skippingIndexBuilderMock1: CreateAccelerationForm = {
 };
 
 export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1 PARTITION, 
    field2 VALUE_SET, 
    field3 MIN_MAX
@@ -234,8 +233,7 @@ export const skippingIndexBuilderMock2: CreateAccelerationForm = {
 };
 
 export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1 PARTITION
   ) WITH (
 index_settings = '{"number_of_shards":5,"number_of_replicas":3}',
@@ -261,8 +259,7 @@ export const coveringIndexBuilderMock1: CreateAccelerationForm = {
 };
 
 export const coveringIndexBuilderMockResult1 = `CREATE INDEX index_name
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1, 
    field2, 
    field3
@@ -287,8 +284,7 @@ export const coveringIndexBuilderMock2: CreateAccelerationForm = {
 };
 
 export const coveringIndexBuilderMockResult2 = `CREATE INDEX index_name
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1
   ) WITH (
 index_settings = '{"number_of_shards":5,"number_of_replicas":3}',