Use selected time range for metaqueries in DE

CHANGELOG.md

@@ -6,6 +6,7 @@
 1. [12678](https://github.com/influxdata/influxdb/pull/12678): Enable the use of variables in the Data Explorer and Cell Editor Overlay
 1. [12655](https://github.com/influxdata/influxdb/pull/12655): Add a variable control bar to dashboards to select values for variables.
 1. [12706](https://github.com/influxdata/influxdb/pull/12706): Add ability to add variable to script from the side menu.
+1. [12791](https://github.com/influxdata/influxdb/pull/12791): Use time range for metaqueries in Data Explorer and Cell Editor Overlay
 
 ### Bug Fixes
 

ui/src/timeMachine/actions/index.ts

@@ -5,7 +5,10 @@ import {saveAndExecuteQueries} from 'src/timeMachine/actions/queries'
 // Types
 import {Dispatch} from 'redux-thunk'
 import {TimeMachineState} from 'src/timeMachine/reducers'
-import {Action as QueryBuilderAction} from 'src/timeMachine/actions/queryBuilder'
+import {
+  reloadTagSelectors,
+  Action as QueryBuilderAction,
+} from 'src/timeMachine/actions/queryBuilder'
 import {Action as QueryResultsAction} from 'src/timeMachine/actions/queries'
 import {TimeRange, ViewType} from 'src/types/v2'
 import {
@@ -114,6 +117,7 @@ const setTimeRangeSync = (timeRange: TimeRange): SetTimeRangeAction => ({
 export const setTimeRange = (timeRange: TimeRange) => dispatch => {
   dispatch(setTimeRangeSync(timeRange))
   dispatch(saveAndExecuteQueries())
+  dispatch(reloadTagSelectors())
 }
 
 interface SetTypeAction {

ui/src/timeMachine/actions/queryBuilder.ts

@@ -26,6 +26,7 @@ export type Action =
   | SelectFunctionAction
   | SetValuesSearchTermAction
   | SetKeysSearchTermAction
+  | SetBuilderTagsStatusAction
 
 interface SetBuilderBucketsStatusAction {
   type: 'SET_BUILDER_BUCKETS_STATUS'
@@ -64,6 +65,18 @@ const setBuilderBucket = (
   payload: {bucket, resetSelections},
 })
 
+interface SetBuilderTagsStatusAction {
+  type: 'SET_BUILDER_TAGS_STATUS'
+  payload: {status: RemoteDataState}
+}
+
+export const setBuilderTagsStatus = (
+  status: RemoteDataState
+): SetBuilderTagsStatusAction => ({
+  type: 'SET_BUILDER_TAGS_STATUS',
+  payload: {status},
+})
+
 interface SetBuilderTagKeysAction {
   type: 'SET_BUILDER_TAG_KEYS'
   payload: {index: number; keys: string[]}
@@ -206,7 +219,11 @@ export const loadBuckets = () => async (
   dispatch(setBuilderBucketsStatus(RemoteDataState.Loading))
 
   try {
-    const buckets = await queryBuilderFetcher.findBuckets(queryURL, orgID)
+    const buckets = await queryBuilderFetcher.findBuckets({
+      url: queryURL,
+      orgID,
+    })
+
     const selectedBucket = getActiveQuery(getState()).builderConfig.buckets[0]
 
     dispatch(setBuilderBuckets(buckets))
@@ -244,24 +261,25 @@ export const loadTagSelector = (index: number) => async (
     return
   }
 
-  const tagPredicates = tags.slice(0, index)
+  const tagsSelections = tags.slice(0, index)
   const queryURL = getState().links.query.self
   const orgID = getActiveOrg(getState()).id
 
   dispatch(setBuilderTagKeysStatus(index, RemoteDataState.Loading))
 
   try {
+    const timeRange = getActiveTimeMachine(getState()).timeRange
     const searchTerm = getActiveTimeMachine(getState()).queryBuilder.tags[index]
       .keysSearchTerm
 
-    const keys = await queryBuilderFetcher.findKeys(
-      index,
-      queryURL,
+    const keys = await queryBuilderFetcher.findKeys(index, {
+      url: queryURL,
       orgID,
-      buckets[0],
-      tagPredicates,
-      searchTerm
-    )
+      bucket: buckets[0],
+      tagsSelections,
+      searchTerm,
+      timeRange,
+    })
 
     const {key} = tags[index]
 
@@ -299,25 +317,27 @@ const loadTagSelectorValues = (index: number) => async (
 ) => {
   const state = getState()
   const {buckets, tags} = getActiveQuery(state).builderConfig
-  const tagPredicates = tags.slice(0, index)
+  const tagsSelections = tags.slice(0, index)
   const queryURL = state.links.query.self
   const orgID = getActiveOrg(state).id
 
   dispatch(setBuilderTagValuesStatus(index, RemoteDataState.Loading))
 
   try {
+    const timeRange = getActiveTimeMachine(getState()).timeRange
     const key = getActiveQuery(getState()).builderConfig.tags[index].key
     const searchTerm = getActiveTimeMachine(getState()).queryBuilder.tags[index]
       .valuesSearchTerm
-    const values = await queryBuilderFetcher.findValues(
-      index,
-      queryURL,
+
+    const values = await queryBuilderFetcher.findValues(index, {
+      url: queryURL,
       orgID,
-      buckets[0],
-      tagPredicates,
+      bucket: buckets[0],
+      tagsSelections,
       key,
-      searchTerm
-    )
+      searchTerm,
+      timeRange,
+    })
 
     const {values: selectedValues} = tags[index]
 
@@ -404,3 +424,8 @@ export const removeTagSelector = (index: number) => async (
   dispatch(removeTagSelectorSync(index))
   dispatch(loadTagSelector(index))
 }
+
+export const reloadTagSelectors = () => async (dispatch: Dispatch<Action>) => {
+  dispatch(setBuilderTagsStatus(RemoteDataState.Loading))
+  dispatch(loadTagSelector(0))
+}

ui/src/timeMachine/apis/QueryBuilderFetcher.ts

@@ -3,10 +3,12 @@ import {
   findBuckets,
   findKeys,
   findValues,
+  FindBucketsOptions,
+  FindKeysOptions,
+  FindValuesOptions,
 } from 'src/timeMachine/apis/queryBuilder'
 
 // Types
-import {BuilderConfig} from 'src/types/v2'
 import {WrappedCancelablePromise} from 'src/types/promises'
 
 type CancelableQuery = WrappedCancelablePromise<string[]>
@@ -19,17 +21,17 @@ class QueryBuilderFetcher {
   private findValuesCache: {[key: string]: string[]} = {}
   private findBucketsCache: {[key: string]: string[]} = {}
 
-  public async findBuckets(url: string, orgID: string): Promise<string[]> {
+  public async findBuckets(options: FindBucketsOptions): Promise<string[]> {
     this.cancelFindBuckets()
 
-    const cacheKey = JSON.stringify([...arguments])
+    const cacheKey = JSON.stringify(options)
     const cachedResult = this.findBucketsCache[cacheKey]
 
     if (cachedResult) {
       return Promise.resolve(cachedResult)
     }
 
-    const pendingResult = findBuckets(url, orgID)
+    const pendingResult = findBuckets(options)
 
     pendingResult.promise.then(result => {
       this.findBucketsCache[cacheKey] = result
@@ -46,28 +48,18 @@ class QueryBuilderFetcher {
 
   public async findKeys(
     index: number,
-    url: string,
-    orgID: string,
-    bucket: string,
-    tagsSelections: BuilderConfig['tags'],
-    searchTerm: string = ''
+    options: FindKeysOptions
   ): Promise<string[]> {
     this.cancelFindKeys(index)
 
-    const cacheKey = JSON.stringify([...arguments].slice(1))
+    const cacheKey = JSON.stringify(options)
     const cachedResult = this.findKeysCache[cacheKey]
 
     if (cachedResult) {
       return Promise.resolve(cachedResult)
     }
 
-    const pendingResult = findKeys(
-      url,
-      orgID,
-      bucket,
-      tagsSelections,
-      searchTerm
-    )
+    const pendingResult = findKeys(options)
 
     this.findKeysQueries[index] = pendingResult
 
@@ -86,30 +78,18 @@ class QueryBuilderFetcher {
 
   public async findValues(
     index: number,
-    url: string,
-    orgID: string,
-    bucket: string,
-    tagsSelections: BuilderConfig['tags'],
-    key: string,
-    searchTerm: string = ''
+    options: FindValuesOptions
   ): Promise<string[]> {
     this.cancelFindValues(index)
 
-    const cacheKey = JSON.stringify([...arguments].slice(1))
+    const cacheKey = JSON.stringify(options)
     const cachedResult = this.findValuesCache[cacheKey]
 
     if (cachedResult) {
       return Promise.resolve(cachedResult)
     }
 
-    const pendingResult = findValues(
-      url,
-      orgID,
-      bucket,
-      tagsSelections,
-      key,
-      searchTerm
-    )
+    const pendingResult = findValues(options)
 
     this.findValuesQueries[index] = pendingResult