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

…icks for default and other queries Signed-off-by: sumukhswamy <[email protected]>
opensearch-project · Jan 31, 2024 · 942768e · 942768e
1 parent f1f0775
commit 942768e
Show file tree

Hide file tree

Showing 27 changed files with 181 additions and 761 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
@@ -86,7 +86,7 @@ export interface CreateAccelerationForm {
   formErrors: FormErrorsType;
 }
 
-export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED';
+export type AsyncQueryLoadingStatus = 'success' | 'failed' | 'running' | 'scheduled' | 'cancelled';
 export type TreeItemType =
   | 'covering_index'
   | 'skipping_index'

diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -8211,11 +8211,7 @@ exports[`<Main /> spec renders the component 1`] = `
                   viewBox="0 0 16 16"
                   width="16"
                   xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                  />
-                </svg>
+                />
               </button>
             </div>
           </div>
@@ -8312,11 +8308,7 @@ exports[`<Main /> spec renders the component 1`] = `
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-            />
-          </svg>
+          />
           <span
             class="euiButton__text"
           >
@@ -8356,11 +8348,7 @@ exports[`<Main /> spec renders the component 1`] = `
                 viewBox="0 0 16 16"
                 width="16"
                 xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                />
-              </svg>
+              />
             </button>
           </div>
           <div
@@ -8417,11 +8405,7 @@ exports[`<Main /> spec renders the component 1`] = `
                           viewBox="0 0 16 16"
                           width="16"
                           xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                          />
-                        </svg>
+                        />
                       </span>
                       <span
                         class="euiTreeView__nodeLabel"

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: 'success',
       asyncQueryError: '',
       asyncJobId: '',
       refreshTree: false,
@@ -424,7 +424,7 @@ export class Main extends React.Component<MainProps, MainState> {
             queryResultsTEXT: [],
             searchQuery: '',
             asyncLoading: false,
-            asyncLoadingStatus: 'SUCCESS',
+            asyncLoadingStatus: '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: '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: 'success',
       isCallOutVisible: false,
     });
   };

diff --git a/public/components/QueryResults/QueryResults.test.tsx b/public/components/QueryResults/QueryResults.test.tsx
@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '@testing-library/jest-dom/extend-expect';
+import { configure, fireEvent, render } from '@testing-library/react';
+import 'mutationobserver-shim';
 import React from 'react';
 import 'regenerator-runtime';
-import 'mutationobserver-shim';
-import '@testing-library/jest-dom/extend-expect';
-import { render, fireEvent, configure } from '@testing-library/react';
-import { mockQueryResults, mockQueries } from '../../../test/mocks/mockData';
+import { mockQueries, mockQueryResults } from '../../../test/mocks/mockData';
 import { MESSAGE_TAB_LABEL } from '../../utils/constants';
+import { ItemIdToExpandedRowMap, QueryResult, ResponseDetail, Tab } from '../Main/main';
 import QueryResults from './QueryResults';
-import { Tab, ItemIdToExpandedRowMap, ResponseDetail, QueryResult } from '../Main/main';
 
 configure({ testIdAttribute: 'data-test-subj' });
 
@@ -53,7 +53,7 @@ function renderSQLQueryResults(
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
-        asyncLoadingStatus="SUCCESS"
+        asyncLoadingStatus="success"
         asyncQueryError=""
         selectedDatasource={[{ label: 'OpenSearch' }]}
         cancelAsyncQuery={() => {}}
@@ -189,7 +189,7 @@ function renderPPLQueryResults(
         getText={getText}
         isResultFullScreen={false}
         setIsResultFullScreen={setIsResultFullScreen}
-        asyncLoadingStatus="SUCCESS"
+        asyncLoadingStatus="success"
         asyncQueryError=""
         selectedDatasource={[{ label: 'OpenSearch' }]}
         cancelAsyncQuery={() => {}}
@@ -315,7 +315,7 @@ describe('<AsyncQueryResults /> spec', () => {
           getText={() => {}}
           isResultFullScreen={false}
           setIsResultFullScreen={() => {}}
-          asyncLoadingStatus="RUNNING"
+          asyncLoadingStatus="running"
           asyncQueryError=""
           selectedDatasource={[{ label: 'mys3' }]}
           cancelAsyncQuery={() => {}}
@@ -352,7 +352,7 @@ describe('<AsyncQueryResults /> spec', () => {
           getText={() => {}}
           isResultFullScreen={false}
           setIsResultFullScreen={() => {}}
-          asyncLoadingStatus="FAILED"
+          asyncLoadingStatus="failed"
           asyncQueryError="custom error"
           selectedDatasource={[{ label: 'mys3' }]}
           cancelAsyncQuery={() => {}}

diff --git a/public/components/QueryResults/QueryResults.tsx b/public/components/QueryResults/QueryResults.tsx
@@ -45,8 +45,8 @@ import {
   ResponseDetail,
   Tab,
 } from '../Main/main';
-import { AsyncQueryBody } from './async_query_body';
 import QueryResultsBody from './QueryResultsBody';
+import { AsyncQueryBody } from './async_query_body';
 
 interface QueryResultsProps {
   language: string;
@@ -335,8 +335,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