added changes for cancel query not being able to cancel, added back ticks

common/constants/index.ts

@@ -18,7 +18,7 @@ export const TREE_ITEM_TABLE_NAME_DEFAULT_NAME = `table`;
 export const TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME = `Load Materialized View`;
 export const TREE_ITEM_BADGE_NAME = `badge`;
 export const LOAD_OPENSEARCH_INDICES_QUERY = `SHOW tables LIKE '%';`;
-export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON datasource.database.table 
+export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON \`datasource\`.\`database\`.\`table\` 
 (status VALUE_SET) 
 WITH (
   auto_refresh = true,

common/types/index.ts

@@ -32,7 +32,7 @@ export interface RefreshIntervalType {
   refreshInterval: string;
 }
 
-export interface watermarkDelayType {
+export interface WatermarkDelayType {
   delayWindow: number;
   delayInterval: string;
 }
@@ -45,7 +45,7 @@ export interface GroupByTumbleType {
   tumbleInterval: string;
 }
 
-export interface materializedViewQueryType {
+export interface MaterializedViewQueryType {
   columnsValues: MaterializedViewColumn[];
   groupByTumbleValue: GroupByTumbleType;
 }
@@ -75,18 +75,25 @@ export interface CreateAccelerationForm {
   accelerationIndexType: AccelerationIndexType;
   skippingIndexQueryData: SkippingIndexRowType[];
   coveringIndexQueryData: string[];
-  materializedViewQueryData: materializedViewQueryType;
+  materializedViewQueryData: MaterializedViewQueryType;
   accelerationIndexName: string;
   primaryShardsCount: number;
   replicaShardsCount: number;
   refreshType: AccelerationRefreshType;
   checkpointLocation: string | undefined;
-  watermarkDelay: watermarkDelayType;
+  watermarkDelay: WatermarkDelayType;
   refreshIntervalOptions: RefreshIntervalType;
   formErrors: FormErrorsType;
 }
 
-export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED';
+export enum AsyncQueryLoadingStatus {
+  Success = 'success',
+  Failed = 'failed',
+  Running = 'running',
+  Scheduled = 'scheduled',
+  Cancelled = 'cancelled',
+}
+
 export type TreeItemType =
   | 'covering_index'
   | 'skipping_index'

public/components/Main/main.tsx

@@ -48,8 +48,8 @@
 
 interface ResponseData {
   ok: boolean;
   resp: any;
   body: any;
 }
 
 export interface ResponseDetail<T> {
@@ -59,11 +59,11 @@
 }
 
 export interface TranslateResult {
   [key: string]: any;
 }
 
 export interface QueryMessage {
   text: any;
   className: string;
 }
 
@@ -83,13 +83,13 @@
   [key: string]: {
     nodes: Tree;
     expandedRow?: {};
     selectedNodes?: { [key: string]: any };
   };
 }
 
 export interface DataRow {
   rowId: number;
   data: { [key: string]: any };
 }
 
 interface MainProps {
@@ -128,7 +128,7 @@
 
 const SUCCESS_MESSAGE = 'Success';
 
 const errorQueryResponse = (queryResultResponseDetail: any) => {
   const errorMessage =
     queryResultResponseDetail.errorMessage +
     ', this query is not runnable. \n \n' +
@@ -156,7 +156,7 @@
         const dataRows: DataRow[] = [];
 
         const schema: object[] = _.get(responseObj, 'schema');
         const datarows: any[][] = _.get(responseObj, 'datarows');
         let queryType = 'default';
 
         for (const column of schema.values()) {
@@ -181,7 +181,7 @@
             }
 
             for (const [id, field] of datarows.entries()) {
               const row: { [key: string]: any } = {};
               row.TABLE_NAME = field[index];
               const dataRow: DataRow = {
                 rowId: id,
@@ -194,7 +194,7 @@
           case 'describe':
           case 'default':
             for (const [id, field] of schema.entries()) {
               let alias: any = null;
               try {
                 alias = _.get(field, 'alias');
               } catch (e) {
@@ -259,7 +259,7 @@
       isResultFullScreen: false,
       selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
-      asyncLoadingStatus: 'SUCCESS',
+      asyncLoadingStatus: AsyncQueryLoadingStatus.Success,
       asyncQueryError: '',
       asyncJobId: '',
       refreshTree: false,
@@ -424,7 +424,7 @@
             queryResultsTEXT: [],
             searchQuery: '',
             asyncLoading: false,
-            asyncLoadingStatus: 'SUCCESS',
+            asyncLoadingStatus: AsyncQueryLoadingStatus.Success,
             isCallOutVisible: false,
           },
           () => console.log('Successfully updated the states')
@@ -497,7 +497,7 @@
                 selectedTabName: MESSAGE_TAB_LABEL,
                 itemIdToExpandedRowMap: {},
                 asyncLoading: true,
-                asyncLoadingStatus: 'SCHEDULED',
+                asyncLoadingStatus: AsyncQueryLoadingStatus.Scheduled,
                 asyncJobId: queryId,
                 isCallOutVisible: false,
               });
@@ -533,8 +533,8 @@
       const result: ResponseDetail<string> = this.processQueryResponse(
         response as IHttpResponse<ResponseData>
       );
-      const status = result.data.status;
-      if (_.isEqual(status, 'SUCCESS')) {
+      const status = result.data.status.toLowerCase();
+      if (_.isEqual(status, 'success')) {
         const resultTable: Array<ResponseDetail<QueryResult>> = getQueryResultsForTable(
           [result],
           false
@@ -555,7 +555,7 @@
           asyncLoadingStatus: status,
           isCallOutVisible: !(result.data.schema.length > 0),
         });
-      } else if (_.isEqual(status, 'FAILED') || _.isEqual(status, 'CANCELLED')) {
+      } else if (_.isEqual(status, 'failed') || _.isEqual(status, 'cancelled')) {
         this.setState({
           asyncLoading: false,
           asyncLoadingStatus: status,
@@ -792,7 +792,7 @@
       selectedTabName: MESSAGE_TAB_LABEL,
       itemIdToExpandedRowMap: {},
       asyncLoading: false,
-      asyncLoadingStatus: 'SUCCESS',
+      asyncLoadingStatus: AsyncQueryLoadingStatus.Success,
       isCallOutVisible: false,
     });
   };

public/components/QueryResults/QueryResults.test.tsx

@@ -5,6 +5,8 @@
 
 import '@testing-library/jest-dom/extend-expect';
 import { configure, fireEvent, render } from '@testing-library/react';
+import { AsyncQueryLoadingStatus } from "../../../common/types/index";
+
 import 'mutationobserver-shim';
 import React from 'react';
 import 'regenerator-runtime';
@@ -16,8 +18,8 @@
 configure({ testIdAttribute: 'data-test-subj' });
 
 function renderSQLQueryResults(
   mockQueryResults: ResponseDetail<QueryResult>[],
   mockQueries: string[] = [],
   mockSearchQuery: string = '',
   onSelectedTabIdChange: (tab: Tab) => void,
   onQueryChange: () => {},
@@ -53,7 +55,7 @@
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
-        asyncLoadingStatus="SUCCESS"
+        asyncLoadingStatus={AsyncQueryLoadingStatus.Success}
         asyncQueryError=""
         selectedDatasource={[{ label: 'OpenSearch' }]}
         cancelAsyncQuery={() => {}}
@@ -86,7 +88,7 @@
       getAllByRole,
       getByText,
       getAllByText,
       getAllByTestId,
       getAllByLabelText,
     } = renderSQLQueryResults(
       mockQueryResults,
@@ -108,7 +110,7 @@
     expect(getAllByRole('tab')[0].getAttribute('aria-selected')).toEqual('false');
     expect(getAllByRole('tab')[1].getAttribute('aria-selected')).toEqual('true');
 
     //It tests that there is one tab for each QueryResult
     expect(getAllByRole('tab')).toHaveLength(11);
 
     // It tests Tab button
@@ -121,10 +123,10 @@
     // It tests pagination
     await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
     await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
     expect(getByText('10 rows'));
     expect(getByText('20 rows'));
     expect(getByText('50 rows'));
     expect(getByText('100 rows'));
     await fireEvent.click(getByText('20 rows'));
   });
 
@@ -215,7 +217,7 @@
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
-        asyncLoadingStatus="SUCCESS"
+        asyncLoadingStatus={AsyncQueryLoadingStatus.Success}
         asyncQueryError=""
         selectedDatasource={[{ label: 'OpenSearch' }]}
         cancelAsyncQuery={() => {}}
@@ -341,7 +343,7 @@
           getText={() => {}}
           isResultFullScreen={false}
           setIsResultFullScreen={() => {}}
-          asyncLoadingStatus="RUNNING"
+          asyncLoadingStatus={AsyncQueryLoadingStatus.Running}
           asyncQueryError=""
           selectedDatasource={[{ label: 'mys3' }]}
           cancelAsyncQuery={() => {}}
@@ -378,7 +380,7 @@
           getText={() => {}}
           isResultFullScreen={false}
           setIsResultFullScreen={() => {}}
-          asyncLoadingStatus="FAILED"
+          asyncLoadingStatus={AsyncQueryLoadingStatus.Failed}
           asyncQueryError="custom error"
           selectedDatasource={[{ label: 'mys3' }]}
           cancelAsyncQuery={() => {}}

public/components/QueryResults/QueryResults.tsx

@@ -336,8 +336,8 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
             </EuiFlexItem>
           </EuiFlexGroup>
         </div>
-        {this.props.asyncLoadingStatus === 'SUCCESS' ||
-        this.props.asyncLoadingStatus === 'CANCELLED' ? (
+        {this.props.asyncLoadingStatus === 'success' ||
+        this.props.asyncLoadingStatus === 'cancelled' ? (
           <>
             {this.props.queryResults.length === 0 ? (
               // show no results message instead of the results table when there are no results

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

@@ -206,7 +206,7 @@ exports[`<AsyncQueryResults /> spec renders async query loading component 1`] =
           class="euiText euiText--medium"
         >
           Status: 
-          RUNNING
+          running
         </div>
         <button
           class="euiButton euiButton--primary"

public/components/QueryResults/async_query_body.tsx

@@ -4,19 +4,19 @@
  */
 
 import {
-  EuiFlexGroup,
-  EuiText,
-  EuiLoadingSpinner,
   EuiButton,
+  EuiFlexGroup,
   EuiIcon,
+  EuiLoadingSpinner,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
+  EuiText,
 } from '@elastic/eui';
-import { AsyncQueryLoadingStatus } from '../../../common/types';
 import React, { useState } from 'react';
+import { AsyncQueryLoadingStatus } from '../../../common/types';
 
 interface AsyncQueryBodyProps {
   asyncLoadingStatus: AsyncQueryLoadingStatus;
@@ -51,7 +51,7 @@ export function AsyncQueryBody(props: AsyncQueryBodyProps) {
 
   return (
     <EuiFlexGroup direction="column" alignItems="center">
-      {asyncLoadingStatus == 'FAILED' ? (
+      {asyncLoadingStatus == AsyncQueryLoadingStatus.Failed ? (
         <>
           <EuiIcon size="l" type="alert" color="danger" />
           <EuiText>

public/components/SQLPage/table_view.tsx

@@ -139,7 +139,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
       setTableNames([]);
       const query = {
         lang: 'sql',
-        query: `SHOW SCHEMAS IN ${selectedItems[0].label}`,
+        query: `SHOW SCHEMAS IN \`${selectedItems[0]['label']}\``,
         datasource: selectedItems[0].label,
       };
       getJobId(selectedItems[0].label, query, http, (id) => {
@@ -202,7 +202,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
     setSelectedDatabase(databaseName);
     const query = {
       lang: 'sql',
-      query: `SHOW TABLES IN ${selectedItems[0].label}.${databaseName}`,
+      query: `SHOW TABLES IN \`${selectedItems[0]['label']}\`.\`${databaseName}\``,
       datasource: selectedItems[0].label,
     };
     getJobId(selectedItems[0].label, query, http, (id) => {
@@ -270,7 +270,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
   const loadCoveringIndex = (tableName: string, databaseName: string) => {
     const coverQuery = {
       lang: 'sql',
-      query: `SHOW INDEX ON ${selectedItems[0].label}.${databaseName}.${tableName}`,
+      query: `SHOW INDEX ON \`${selectedItems[0]['label']}\`.\`${databaseName}\`.\`${tableName}\``,
       datasource: selectedItems[0].label,
     };
     getJobId(selectedItems[0].label, coverQuery, http, (id) => {
@@ -354,7 +354,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
     setLoadingForTableElements(databaseName, tableName);
     const materializedViewQuery = {
       lang: 'sql',
-      query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0].label}.${databaseName}`,
+      query: `SHOW MATERIALIZED VIEW IN \`${selectedItems[0]['label']}\`.\`${databaseName}\``,
       datasource: selectedItems[0].label,
     };
     getJobId(selectedItems[0].label, materializedViewQuery, http, (id) => {
@@ -418,7 +418,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
     setLoadingForTableElements(databaseName, tableName);
     const skipQuery = {
       lang: 'sql',
-      query: `DESC SKIPPING INDEX ON ${selectedItems[0].label}.${databaseName}.${tableName}`,
+      query: `DESC SKIPPING INDEX ON \`${selectedItems[0]['label']}\`.\`${databaseName}\`.\`${tableName}\``,
       datasource: selectedItems[0].label,
     };
     getJobId(selectedItems[0].label, skipQuery, http, (id) => {
@@ -472,7 +472,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
   };
   const handleQuery = (e: MouseEvent, parentName: string, tableName: string) => {
     e.stopPropagation();
-    updateSQLQueries(`select * from ${selectedItems[0].label}.${parentName}.${tableName} limit 10`);
+    updateSQLQueries(`select * from \`${selectedItems[0].label}\`.\`${parentName}\`.\`${tableName}\` limit 10`);
   };
 
   const iconCreation = (node: TreeItem) => {

public/components/acceleration/create/utils.tsx

@@ -12,8 +12,8 @@ import {
   AccelerationRefreshType,
   CreateAccelerationForm,
   FormErrorsType,
+  MaterializedViewQueryType,
   SkippingIndexRowType,
-  materializedViewQueryType,
 } from '../../../../common/types';
 
 export const pluralizeTime = (timeWindow: number) => {
@@ -103,7 +103,7 @@ export const validateCoveringIndexData = (
 
 export const validateMaterializedViewData = (
   accelerationIndexType: AccelerationIndexType,
-  materializedViewQueryData: materializedViewQueryType
+  materializedViewQueryData: MaterializedViewQueryType
 ) => {
   if (accelerationIndexType !== 'materialized') return [];
 

public/components/acceleration/selectors/index_type_selector.tsx

@@ -49,7 +49,7 @@ export const IndexTypeSelector = ({
       const idPrefix = htmlIdGenerator()();
       const query = {
         lang: 'sql',
-        query: `DESC ${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.dataTable}`,
+        query: `DESC \`${accelerationFormData.dataSource}\`.\`${accelerationFormData.database}\`.\`${accelerationFormData.dataTable}\``,
         datasource: accelerationFormData.dataSource,
       };
       const errorMessage = 'ERROR: failed to load table columns';

public/components/acceleration/selectors/source_selector.tsx

@@ -67,7 +67,7 @@ export const AccelerationDataSourceSelector = ({
     setLoadingComboBoxes({ ...loadingComboBoxes, database: true });
     const query = {
       lang: 'sql',
-      query: `SHOW SCHEMAS IN ${accelerationFormData.dataSource}`,
+      query: `SHOW SCHEMAS IN \`${accelerationFormData.dataSource}\``,
       datasource: accelerationFormData.dataSource,
     };
     const errorMessage = `ERROR: failed to load databases`;
@@ -96,7 +96,7 @@ export const AccelerationDataSourceSelector = ({
     setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: true });
     const query = {
       lang: 'sql',
-      query: `SHOW TABLES IN ${accelerationFormData.dataSource}.${accelerationFormData.database}`,
+      query: `SHOW TABLES IN \`${accelerationFormData.dataSource}.\`${accelerationFormData.database}\``,
       datasource: accelerationFormData.dataSource,
     };
     const errorMessage = `ERROR: failed to load tables`;

test/mocks/accelerationMock.ts

@@ -4,13 +4,13 @@
  */
 
 import {
-  ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
-  ACCELERATION_TIME_INTERVAL,
+    ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
+    ACCELERATION_TIME_INTERVAL,
 } from '../../common/constants';
 import {
-  CreateAccelerationForm,
-  SkippingIndexRowType,
-  materializedViewQueryType,
+    CreateAccelerationForm,
+    MaterializedViewQueryType,
+    SkippingIndexRowType,
 } from '../../common/types';
 
 export const skippingIndexDataMock: SkippingIndexRowType[] = [
@@ -39,7 +39,7 @@ export const materializedViewEmptyDataMock = {
   },
 };
 
-export const materializedViewEmptyTumbleDataMock: materializedViewQueryType = {
+export const materializedViewEmptyTumbleDataMock: MaterializedViewQueryType = {
   columnsValues: [
     {
       id: '1',
@@ -54,7 +54,7 @@ export const materializedViewEmptyTumbleDataMock: materializedViewQueryType = {
   },
 };
 
-export const materializedViewStaleDataMock: materializedViewQueryType = {
+export const materializedViewStaleDataMock: MaterializedViewQueryType = {
   columnsValues: [],
   groupByTumbleValue: {
     timeField: 'timestamp',
@@ -63,7 +63,7 @@ export const materializedViewStaleDataMock: materializedViewQueryType = {
   },
 };
 
-export const materializedViewValidDataMock: materializedViewQueryType = {
+export const materializedViewValidDataMock: MaterializedViewQueryType = {
   columnsValues: [
     {
       id: '1',