feat(fluxWizard): introduce timeRangeWindowPeriod

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

@@ -14,10 +14,9 @@ import {
 } from 'src/reusable_ui'
 import AggregationSelector from './AggregationSelector'
 import TagSelector from './TagSelector'
-import {fluxPeriodFromRangeSeconds} from 'src/tempVars/utils/replace'
-import moment from 'moment'
 import {TagSelectorState, TimeMachineQueryProps} from './types'
 import {addTagSelectorThunk} from './actions/thunks'
+import timeRangeWindowPeriod from './util/timeRangeWindowPeriod'
 
 interface OwnProps extends TimeMachineQueryProps {
   onSubmit: () => void
@@ -34,18 +33,9 @@ const FluxQueryBuilder = ({
   onShowEditor,
   onAddTagSelector,
 }: Props) => {
-  const defaultPeriod = useMemo(() => {
+  const defaultPeriod = useMemo(() => timeRangeWindowPeriod(timeRange), [
-    if (timeRange) {
+    timeRange,
-      if (timeRange.seconds) {
+  ])
-        return fluxPeriodFromRangeSeconds(timeRange.seconds)
-      }
-      // calculate from upper / lower
-      const seconds = Math.round(
-        moment(timeRange.upper).diff(moment(timeRange.lower)) / 1000
-      )
-      return fluxPeriodFromRangeSeconds(seconds)
-    }
-  }, [timeRange])
 
   return (
     <div className="flux-query-builder" data-testid="flux-query-builder">

ui/src/shared/components/TimeMachine/fluxQueryBuilder/util/timeRangeWindowPeriod.ts

@@ -0,0 +1,18 @@
+import moment from 'moment'
+import {fluxPeriodFromRangeSeconds} from 'src/tempVars/utils/replace'
+import {TimeRange} from 'src/types'
+
+function timeRangeWindowPeriod(timeRange: TimeRange | undefined) {
+  if (timeRange) {
+    if (timeRange.seconds) {
+      return fluxPeriodFromRangeSeconds(timeRange.seconds)
+    }
+    // calculate from upper / lower
+    const seconds = Math.round(
+      moment(timeRange.upper).diff(moment(timeRange.lower)) / 1000
+    )
+    return fluxPeriodFromRangeSeconds(seconds)
+  }
+}
+
+export default timeRangeWindowPeriod