added changes for cancel query not being able to cancel, added back t…

…icks (opensearch-project#256) * added changes for cancel query not being able to cancel, added back ticks for default and other queries Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * added lint check changes Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * addressed comments Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * addressed comments Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * changed location of types Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * updated snapshots Signed-off-by: sumukhswamy <sumukhhs@amazon.com> --------- Signed-off-by: sumukhswamy <sumukhhs@amazon.com> Signed-off-by: Sumukh Swamy <sumukhhs@amazon.com>
sumukhswamy · Feb 6, 2024 · 886af5f · 886af5f
1 parent 5c06b27
commit 886af5f
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 44 deletions.
diff --git a/common/constants/index.ts b/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,

diff --git a/common/types/index.ts b/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'

diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -259,7 +259,7 @@ export class Main extends React.Component<MainProps, MainState> {
       isResultFullScreen: false,
       selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
-      asyncLoadingStatus: 'SUCCESS',
+      asyncLoadingStatus: AsyncQueryLoadingStatus.Success,
       asyncQueryError: '',
       asyncJobId: '',
       refreshTree: false,
@@ -424,7 +424,7 @@ export class Main extends React.Component<MainProps, MainState> {
             queryResultsTEXT: [],
             searchQuery: '',
             asyncLoading: false,
-            asyncLoadingStatus: 'SUCCESS',
+            asyncLoadingStatus: AsyncQueryLoadingStatus.Success,
             isCallOutVisible: false,
           },
           () => console.log('Successfully updated the states')
@@ -497,7 +497,7 @@ export class Main extends React.Component<MainProps, MainState> {
                 selectedTabName: MESSAGE_TAB_LABEL,
                 itemIdToExpandedRowMap: {},
                 asyncLoading: true,
-                asyncLoadingStatus: 'SCHEDULED',
+                asyncLoadingStatus: AsyncQueryLoadingStatus.Scheduled,
                 asyncJobId: queryId,
                 isCallOutVisible: false,
               });
@@ -533,8 +533,8 @@ export class Main extends React.Component<MainProps, MainState> {
       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 @@ export class Main extends React.Component<MainProps, MainState> {
           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 @@ export class Main extends React.Component<MainProps, MainState> {
       selectedTabName: MESSAGE_TAB_LABEL,
       itemIdToExpandedRowMap: {},
       asyncLoading: false,
-      asyncLoadingStatus: 'SUCCESS',
+      asyncLoadingStatus: AsyncQueryLoadingStatus.Success,
       isCallOutVisible: false,
     });
   };

diff --git a/public/components/QueryResults/QueryResults.test.tsx b/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';
@@ -53,7 +55,7 @@ function renderSQLQueryResults(
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
-        asyncLoadingStatus="SUCCESS"
+        asyncLoadingStatus={AsyncQueryLoadingStatus.Success}
         asyncQueryError=""
         selectedDatasource={[{ label: 'OpenSearch' }]}
         cancelAsyncQuery={() => {}}
@@ -215,7 +217,7 @@ function renderPPLQueryResults(
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
-        asyncLoadingStatus="SUCCESS"
+        asyncLoadingStatus={AsyncQueryLoadingStatus.Success}
         asyncQueryError=""
         selectedDatasource={[{ label: 'OpenSearch' }]}
         cancelAsyncQuery={() => {}}
@@ -341,7 +343,7 @@ describe('<AsyncQueryResults /> spec', () => {
           getText={() => {}}
           isResultFullScreen={false}
           setIsResultFullScreen={() => {}}
-          asyncLoadingStatus="RUNNING"
+          asyncLoadingStatus={AsyncQueryLoadingStatus.Running}
           asyncQueryError=""
           selectedDatasource={[{ label: 'mys3' }]}
           cancelAsyncQuery={() => {}}
@@ -378,7 +380,7 @@ describe('<AsyncQueryResults /> spec', () => {
           getText={() => {}}
           isResultFullScreen={false}
           setIsResultFullScreen={() => {}}
-          asyncLoadingStatus="FAILED"
+          asyncLoadingStatus={AsyncQueryLoadingStatus.Failed}
           asyncQueryError="custom error"
           selectedDatasource={[{ label: 'mys3' }]}
           cancelAsyncQuery={() => {}}

diff --git a/public/components/QueryResults/QueryResults.tsx b/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

diff --git a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap b/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"

diff --git a/public/components/QueryResults/async_query_body.tsx b/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>

diff --git a/public/components/SQLPage/table_view.tsx b/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) => {

diff --git a/public/components/acceleration/create/utils.tsx b/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 [];
 

diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/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';

diff --git a/public/components/acceleration/selectors/source_selector.tsx b/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`;

diff --git a/test/mocks/accelerationMock.ts b/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',