[Backport 2.x] [Explorer] Fixes for cancel button and saved object loading

common/constants/data_sources.ts

@@ -19,3 +19,4 @@ export enum DATA_SOURCE_TYPES {
   SPARK = 'spark',
   S3Glue = 's3glue',
 }
+export const ASYNC_POLLING_INTERVAL = 2000;

public/components/common/search/sql_search.tsx

@@ -21,7 +21,7 @@ import {
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
-import { QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
+import { ASYNC_POLLING_INTERVAL, QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
 import { APP_ANALYTICS_TAB_ID_REGEX, RAW_QUERY } from '../../../../common/constants/explorer';
 import { PPL_NEWLINE_REGEX, PPL_SPAN_REGEX } from '../../../../common/constants/shared';
 import { DirectQueryLoadingStatus, DirectQueryRequest } from '../../../../common/types/explorer';
@@ -103,7 +103,7 @@ export const DirectSearch = (props: any) => {
     stopPolling,
   } = usePolling<any, any>((params) => {
     return sqlService.fetchWithJobId(params);
-  }, 2000);
+  }, ASYNC_POLLING_INTERVAL);
 
   const requestParams = { tabId };
   const { dispatchOnGettingHis } = useFetchEvents({

public/components/event_analytics/explorer/direct_query_running.tsx

@@ -20,23 +20,22 @@ export const DirectQueryRunning = ({ tabId }: { tabId: string }) => {
   const sqlService = new SQLService(coreRefs.http);
 
   const cancelQuery = () => {
-    if (explorerSearchMeta.queryId !== '') {
-      sqlService
-        .deleteWithJobId({ queryId: explorerSearchMeta.queryId })
-        .catch((e) => {
-          console.error(e);
-        })
-        .finally(() => {
-          dispatch(
-            updateSearchMetaData({
-              tabId,
-              data: {
-                isPolling: false,
-              },
-            })
-          );
-        });
+    if (explorerSearchMeta.queryId) {
+      sqlService.deleteWithJobId({ queryId: explorerSearchMeta.queryId }).catch((e) => {
+        console.error(e);
+      });
     }
+
+    // reset isPolling flag to remove loading page and queryId to empty
+    dispatch(
+      updateSearchMetaData({
+        tabId,
+        data: {
+          isPolling: false,
+          queryId: '',
+        },
+      })
+    );
   };
 
   return (

public/components/event_analytics/home/home.tsx

@@ -229,16 +229,6 @@ const EventAnalyticsHome = (props: IHomeProps) => {
     >
       Delete
     </EuiContextMenuItem>,
-    <EuiContextMenuItem
-      key="redirect"
-      onClick={() => {
-        setIsActionsPopoverOpen(false);
-        history.push(`/explorer`);
-      }}
-      data-test-subj="eventHomeAction__explorer"
-    >
-      Event Explorer
-    </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="addSample"
       onClick={() => {
@@ -294,6 +284,19 @@ const EventAnalyticsHome = (props: IHomeProps) => {
                       <EuiContextMenuPanel items={popoverItems} />
                     </EuiPopover>
                   </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiButton
+                      key="redirect"
+                      onClick={() => {
+                        setIsActionsPopoverOpen(false);
+                        history.push(`/explorer`);
+                      }}
+                      data-test-subj="eventHomeAction__explorer"
+                      fill
+                    >
+                      Event Explorer
+                    </EuiButton>
+                  </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageContentHeaderSection>
             </EuiPageContentHeader>

public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts

@@ -29,6 +29,7 @@ import {
 import { QueryManager } from '../../../../common/query_manager';
 import { statsChunk } from '../../../../common/query_manager/ast/types/stats';
 import {
+  DirectQueryRequest,
   IField,
   SavedQuery,
   SavedVisualization,
@@ -43,6 +44,9 @@ import { PollingConfigurations } from '../../../components/hooks';
 import { SQLService } from '../../requests/sql';
 import { coreRefs } from '../../../framework/core_refs';
 import { UsePolling } from '../../../components/hooks/use_polling';
+import { getAsyncSessionId, setAsyncSessionId } from '../../../../common/utils/query_session_utils';
+import { get as getObjValue } from '../../../../common/utils/shared';
+import { ASYNC_POLLING_INTERVAL } from '../../../../common/constants/data_sources';
 
 enum DIRECT_DATA_SOURCE_TYPES {
   DEFAULT_INDEX_PATTERNS = 'DEFAULT_INDEX_PATTERNS',
@@ -300,6 +304,12 @@ export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements
       dispatchOnGettingHis(pollingResult, '');
       return true;
     }
+    dispatch(
+      updateSearchMetaData({
+        tabId,
+        data: { status: pollingResult.status },
+      })
+    );
     return false;
   };
 
@@ -316,13 +326,23 @@ export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements
   loadSparkGlue = ({ objectData, dataSources, tabId }) => {
     const { dispatch } = this.dispatchers;
     const sqlService = new SQLService(coreRefs.http);
+    const sessionId = getAsyncSessionId();
+    const requestPayload = {
+      lang: objectData.query_lang.toLowerCase(),
+      query: objectData.query,
+      datasource: dataSources[0].label,
+    } as DirectQueryRequest;
+
+    if (sessionId) {
+      requestPayload.sessionId = sessionId;
+    }
 
     // Create an instance of UsePolling
     const polling = new UsePolling<any, any>(
       (params) => {
         return sqlService.fetchWithJobId(params);
       },
-      5000,
+      ASYNC_POLLING_INTERVAL,
       this.handleDirectQuerySuccess,
       this.handleDirectQueryError,
       { tabId }
@@ -343,13 +363,11 @@ export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements
     );
 
     sqlService
-      .fetch({
-        lang: objectData.query_lang.toLowerCase(),
-        query: objectData.query,
-        datasource: dataSources[0].label,
-      })
+      .fetch(requestPayload)
       .then((result) => {
+        setAsyncSessionId(getObjValue(result, 'sessionId', null));
         if (result.queryId) {
+          dispatch(updateSearchMetaData({ tabId, data: { queryId: result.queryId } }));
           startPolling({ queryId: result.queryId });
         } else {
           console.log('no query id found in response');