feat(ui/flux): add title to 'time range' links

ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx

@@ -25,8 +25,9 @@ import {
 import {QueryBuilderState, TimeMachineQueryProps} from './types'
 import {addTagSelectorThunk} from './actions/thunks'
 import timeRangeWindowPeriod from './util/timeRangeWindowPeriod'
-import {RemoteDataState} from 'src/types'
+import {RemoteDataState, TimeZones} from 'src/types'
 import {buildQuery} from './util/generateFlux'
+import {timeRangeLabel} from '../../TimeRangeLabel'
 
 interface OwnProps extends TimeMachineQueryProps {
   onSubmit: (script: string) => void
@@ -42,14 +43,19 @@ const FluxQueryBuilder = ({
   tags,
   isRunnable,
   builderState,
+  timeZone,
   notify,
   onSubmit,
   onShowEditor,
   onAddTagSelector,
 }: Props) => {
-  const defaultPeriod = useMemo(() => timeRangeWindowPeriod(timeRange), [
-    timeRange,
-  ])
+  const [defaultPeriod, timeRangeText] = useMemo(
+    () => [
+      timeRangeWindowPeriod(timeRange),
+      timeRangeLabel({timeRange, timeZone}),
+    ],
+    [timeRange, timeZone]
+  )
 
   return (
     <div className="flux-query-builder" data-testid="flux-query-builder">
@@ -64,6 +70,7 @@ const FluxQueryBuilder = ({
               <TagSelector
                 source={source}
                 timeRange={timeRange}
+                timeRangeText={timeRangeText}
                 key={tag.tagIndex}
                 tagIndex={tag.tagIndex}
               />
@@ -150,9 +157,11 @@ const FluxQueryBuilder = ({
 }
 const mstp = (state: any) => {
   const fluxQueryBuilder = state?.fluxQueryBuilder as QueryBuilderState
+  const timeZone = state?.app?.persisted?.timeZone as TimeZones
   return {
     builderState: fluxQueryBuilder,
     tags: fluxQueryBuilder.tags,
+    timeZone,
     isRunnable:
       fluxQueryBuilder.buckets.status === RemoteDataState.Done &&
       !!fluxQueryBuilder.buckets.selectedBucket,

ui/src/shared/components/TimeMachine/fluxQueryBuilder/TagSelector.tsx

@@ -40,7 +40,9 @@ function renderType(type: BuilderAggregateFunctionType) {
 }
 
 type Callbacks = ReturnType<typeof mdtp>
-type Props = TagSelectorState & Callbacks & TimeMachineQueryProps
+type Props = TagSelectorState &
+  Callbacks &
+  TimeMachineQueryProps & {timeRangeText: string}
 
 const TagSelector = (props: Props) => {
   const {
@@ -92,6 +94,7 @@ const TagSelectorBody = (props: Props) => {
     onIncreaseKeysLimit,
     onSearchKeys,
     tagValues: selectedValues,
+    timeRangeText,
   } = props
   if (aggregateFunctionType === 'filter') {
     if (keysStatus === RemoteDataState.Error) {
@@ -108,7 +111,7 @@ const TagSelectorBody = (props: Props) => {
           No tag keys found{' '}
           <small>
             in the current{' '}
-            <a href="#" onClick={hightlightDropdown}>
+            <a href="#" onClick={hightlightDropdown} title={timeRangeText}>
               time range
             </a>
           </small>
@@ -212,6 +215,7 @@ const TagSelectorValues = (props: Props & {onLoadMoreValues: () => void}) => {
     tagValues: selectedValues,
     onSelectValues,
     onLoadMoreValues,
+    timeRangeText,
   } = props
   if (aggregateFunctionType === 'filter') {
     if (keysStatus === RemoteDataState.NotStarted) {
@@ -268,7 +272,7 @@ const TagSelectorValues = (props: Props & {onLoadMoreValues: () => void}) => {
           No values found{' '}
           <small>
             in the current{' '}
-            <a href="#" onClick={hightlightDropdown}>
+            <a href="#" onClick={hightlightDropdown} title={timeRangeText}>
               time range
             </a>
           </small>
@@ -302,7 +306,7 @@ const TagSelectorValues = (props: Props & {onLoadMoreValues: () => void}) => {
           )
         })}
         {valuesTruncated && aggregateFunctionType === 'filter' ? (
-          <div className="flux-query-builder--list-item" key={`__truncated`}>
+          <div className="flux-query-builder--list-item" key="__truncated">
             {valuesStatus !== RemoteDataState.Loading ? (
               <Button
                 text="Load More Values"
@@ -319,6 +323,14 @@ const TagSelectorValues = (props: Props & {onLoadMoreValues: () => void}) => {
             )}
           </div>
         ) : undefined}
+        <div className="flux-query-builder--list-item" key="__infomsg">
+          <small style={{textAlign: 'center', width: '100%'}}>
+            keys/values depend on{' '}
+            <a href="#" onClick={hightlightDropdown} title={timeRangeText}>
+              time range
+            </a>
+          </small>
+        </div>
       </div>
     </BuilderCard.Body>
   )