feat(cancel-query-request): added abort query request functionality after submitting a query

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Features
 
+1. [18387](https://github.com/influxdata/influxdb/pull/18387): Integrate query cancellation after queries have been submitted
+
 ## v2.0.0-beta.12 [2020-06-12]
 
 ### Features

ui/jestSetup.ts

@@ -1,13 +1,31 @@
 import {cleanup} from '@testing-library/react'
 import 'intersection-observer'
 import MutationObserver from 'mutation-observer'
+import fetchMock from 'jest-fetch-mock'
+
+// global vars
+process.env.API_PREFIX = 'http://example.com/'
+
+declare global {
+  interface Window {
+    flushAllPromises: () => Promise<any>
+    MutationObserver: MutationObserver
+  }
+}
+
 // Adds MutationObserver as a polyfill for testing
 window.MutationObserver = MutationObserver
 
+window.flushAllPromises = async () => {
+  return new Promise(resolve => setImmediate(resolve))
+}
+
+// mocks and stuff
+fetchMock.enableMocks()
 jest.mock('honeybadger-js', () => () => null)
 
-process.env.API_PREFIX = '/'
 // cleans up state between @testing-library/react tests
 afterEach(() => {
   cleanup()
+  fetchMock.resetMocks()
 })

ui/src/shared/apis/query.ts

@@ -36,7 +36,8 @@ export interface RunQueryErrorResult {
 export const runQuery = (
   orgID: string,
   query: string,
-  extern?: File
+  extern?: File,
+  abortController?: AbortController
 ): CancelBox<RunQueryResult> => {
   const url = `${API_BASE_PATH}api/v2/query?${new URLSearchParams({orgID})}`
 
@@ -51,7 +52,7 @@ export const runQuery = (
     dialect: {annotations: ['group', 'datatype', 'default']},
   }
 
-  const controller = new AbortController()
+  const controller = abortController || new AbortController()
 
   const request = fetch(url, {
     method: 'POST',

ui/src/shared/copy/notifications.ts

@@ -529,6 +529,11 @@ export const resourceLimitReached = (resourceName: string): Notification => ({
   type: 'resourceLimitReached',
 })
 
+export const queryCancelRequest = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Cancelling query...`,
+})
+
 export const taskNotCreated = (additionalMessage: string): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to create new task: ${additionalMessage}`,

ui/src/timeMachine/actions/queries.ts

@@ -110,7 +110,10 @@ const isFromBucket = (node: Node) => {
   )
 }
 
-export const executeQueries = () => async (dispatch, getState: GetState) => {
+export const executeQueries = (abortController?: AbortController) => async (
+  dispatch,
+  getState: GetState
+) => {
   reportSimpleQueryPerformanceEvent('executeQueries function start')
 
   const state = getState()
@@ -160,9 +163,8 @@ export const executeQueries = () => async (dispatch, getState: GetState) => {
 
       const extern = buildVarsOption(variableAssignments)
 
-      return runQuery(orgID, text, extern)
+      return runQuery(orgID, text, extern, abortController)
     })
-
     const results = await Promise.all(pendingResults.map(r => r.promise))
     reportSimpleQueryPerformanceEvent('executeQueries queries end')
 
@@ -209,13 +211,15 @@ export const executeQueries = () => async (dispatch, getState: GetState) => {
       setQueryResults(RemoteDataState.Done, files, duration, null, statuses)
     )
     reportSimpleQueryPerformanceEvent('executeQueries function start')
-  } catch (e) {
-    if (e.name === 'CancellationError') {
+    return results
+  } catch (error) {
+    if (error.name === 'CancellationError' || error.name === 'AbortError') {
+      dispatch(setQueryResults(RemoteDataState.Done, null, null))
       return
     }
 
-    console.error(e)
-    dispatch(setQueryResults(RemoteDataState.Error, null, null, e.message))
+    console.error(error)
+    dispatch(setQueryResults(RemoteDataState.Error, null, null, error.message))
   }
 }
 
@@ -227,9 +231,12 @@ const saveDraftQueries = (): SaveDraftQueriesAction => ({
   type: 'SAVE_DRAFT_QUERIES',
 })
 
-export const saveAndExecuteQueries = () => dispatch => {
+export const saveAndExecuteQueries = (
+  abortController?: AbortController
+) => dispatch => {
   dispatch(saveDraftQueries())
-  dispatch(executeQueries())
+  dispatch(setQueryResults(RemoteDataState.Loading, [], null))
+  dispatch(executeQueries(abortController))
 }
 
 export const executeCheckQuery = () => async (dispatch, getState: GetState) => {

ui/src/timeMachine/components/SubmitQueryButton.test.tsx

@@ -0,0 +1,202 @@
+// Libraries
+import React from 'react'
+import {mocked} from 'ts-jest/utils'
+import {fireEvent} from '@testing-library/react'
+
+import {renderWithRedux} from 'src/mockState'
+import {RemoteDataState} from 'src/types'
+
+declare global {
+  interface Window {
+    TextDecoder: any
+  }
+}
+
+class FakeTextDecoder {
+  decode() {
+    return ''
+  }
+}
+
+window.TextDecoder = FakeTextDecoder
+
+jest.mock('src/external/parser', () => {
+  return {
+    parse: jest.fn(() => {
+      return {
+        type: 'File',
+        package: {
+          name: {
+            name: 'fake',
+            type: 'Identifier',
+          },
+          type: 'PackageClause',
+        },
+        imports: [],
+        body: [],
+      }
+    }),
+  }
+})
+
+jest.mock('src/variables/actions/thunks', () => {
+  return {
+    hydrateVariables: jest.fn(() => {
+      return (_dispatch, _getState) => {
+        return Promise.resolve()
+      }
+    }),
+  }
+})
+
+import SubmitQueryButton from 'src/timeMachine/components/SubmitQueryButton'
+
+const stateOverride = {
+  timeMachines: {
+    activeTimeMachineID: 'veo',
+    timeMachines: {
+      veo: {
+        draftQueries: [
+          {
+            text: `from(bucket: "apps")
+  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
+  |> filter(fn: (r) => r["_measurement"] == "rum")
+  |> filter(fn: (r) => r["_field"] == "domInteractive")
+  |> map(fn: (r) => ({r with _value: r._value / 1000.0}))
+  |> group()`,
+          },
+        ],
+        activeQueryIndex: 0,
+        queryResults: {
+          status: RemoteDataState.NotStarted,
+        },
+        view: {
+          properties: {
+            queries: [{text: 'draftstate'}],
+          },
+        },
+      },
+    },
+  },
+}
+
+describe('TimeMachine.Components.SubmitQueryButton', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('it changes the Submit button to Cancel when the request is in flight, then back to Submit after the request has resolved', async () => {
+    const fakeReader = {
+      cancel: jest.fn(),
+      read: jest.fn(() => {
+        return Promise.resolve({
+          done: true,
+        })
+      }),
+    }
+
+    const fakeResponse = {
+      status: 200,
+      body: {
+        getReader: () => fakeReader,
+      },
+    }
+
+    const expectedMockedFetchCall = {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json', 'Accept-Encoding': 'gzip'},
+      body: JSON.stringify({
+        query: stateOverride.timeMachines.timeMachines.veo.draftQueries[0].text,
+        extern: {
+          type: 'File',
+          package: null,
+          imports: null,
+          body: [
+            {
+              type: 'OptionStatement',
+              assignment: {
+                type: 'VariableAssignment',
+                id: {type: 'Identifier', name: 'v'},
+                init: {
+                  type: 'ObjectExpression',
+                  properties: [
+                    {
+                      type: 'Property',
+                      key: {type: 'Identifier', name: 'timeRangeStart'},
+                      value: {
+                        type: 'UnaryExpression',
+                        operator: '-',
+                        argument: {
+                          type: 'DurationLiteral',
+                          values: [{magnitude: 1, unit: 'h'}],
+                        },
+                      },
+                    },
+                    {
+                      type: 'Property',
+                      key: {type: 'Identifier', name: 'timeRangeStop'},
+                      value: {
+                        type: 'CallExpression',
+                        callee: {type: 'Identifier', name: 'now'},
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+        dialect: {annotations: ['group', 'datatype', 'default']},
+      }),
+      signal: new AbortController().signal,
+    }
+
+    mocked(fetch).mockImplementation(() => {
+      return Promise.resolve(fakeResponse)
+    })
+    const {getByTitle} = renderWithRedux(<SubmitQueryButton />, s => ({
+      ...s,
+      ...stateOverride,
+    }))
+
+    fireEvent.click(getByTitle('Submit'))
+    expect(getByTitle('Cancel')).toBeTruthy()
+    await window.flushAllPromises()
+
+    expect(mocked(fetch)).toHaveBeenCalledWith(
+      'http://example.com/api/v2/query?orgID=orgid',
+      expectedMockedFetchCall
+    )
+    expect(getByTitle('Submit')).toBeTruthy()
+  })
+
+  it("cancels the query after submission if the query hasn't finished and resolved", async () => {
+    mocked(fetchMock).mockResponse(() => {
+      return new Promise((resolve, _reject) => {
+        setTimeout(() => {
+          resolve('')
+        }, 3000)
+      })
+    })
+
+    const {getByTitle} = renderWithRedux(<SubmitQueryButton />, s => ({
+      ...s,
+      ...stateOverride,
+    }))
+    const SubmitBtn = getByTitle('Submit')
+    fireEvent.click(SubmitBtn)
+
+    const CancelBtn = getByTitle('Cancel')
+    fireEvent.click(CancelBtn)
+    await window.flushAllPromises()
+
+    const {type, value: error} = mocked(fetch).mock.results[0] as any
+    expect(type).toBe('throw')
+    expect(error.name).toBe('AbortError')
+
+    expect(getByTitle('Submit')).toBeTruthy()
+  })
+})