fix: enables Sample Data for the metric selector (#4854)

Author: asalem1

package.json

@@ -166,7 +166,7 @@
     "@docsearch/react": "^3.0.0-alpha.37",
     "@influxdata/clockface": "^4.2.1",
     "@influxdata/flux-lsp-browser": "0.8.15",
-    "@influxdata/giraffe": "^2.28.0",
+    "@influxdata/giraffe": "^2.29.0",
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "abortcontroller-polyfill": "^1.3.0",

src/flows/pipes/MetricSelector/context.tsx

@@ -239,11 +239,16 @@ export const SchemaProvider: FC = React.memo(({children}) => {
 
     const scope = getPanelQueries(data.id)?.scope ?? {}
 
-    const text = `from(bucket: "${data.bucket.name}")
-|> range(${range})
-|> first()
-|> drop(columns: ["_value"])
-|> group()`
+    let source = `from(bucket: "${data.bucket.name}")`
+    if (data.bucket.type === 'sample') {
+      source = `import "influxdata/influxdb/sample"
+      sample.data(set: "${data.bucket.id}")`
+    }
+    const text = `${source}
+    |> range(${range})
+    |> first()
+    |> drop(columns: ["_value"])
+    |> group()`
 
     query(text, scope)
       .then((response: FluxResult) => {

src/flows/pipes/MetricSelector/index.ts

@@ -11,7 +11,7 @@ export default register => {
     component: View,
     readOnlyComponent: ReadOnly,
     button: 'Metric Selector',
-    featureFlag: 'flow-panel--metric-selector',
+    // featureFlag: 'flow-panel--metric-selector',
     initial: {
       field: '',
       measurement: '',
@@ -28,7 +28,13 @@ export default register => {
         return ''
       }
 
-      let text = `from(bucket: "${bucket.name}")\n\t|> range(start: v.timeRangeStart, stop: v.timeRangeStop)`
+      let from = `from(bucket: "${bucket.name}")`
+      if (bucket.type === 'sample') {
+        from = `import "influxdata/influxdb/sample"
+        sample.data(set: "${bucket.id}")`
+      }
+
+      let text = `${from}\n\t|> range(start: v.timeRangeStart, stop: v.timeRangeStop)`
       if (measurement) {
         text += ` |> filter(fn: (r) => r["_measurement"] == "${measurement}")`
       }

src/shared/contexts/buckets.tsx

@@ -1,5 +1,12 @@
 // Libraries
-import React, {FC, createContext, useEffect, useMemo, useRef} from 'react'
+import React, {
+  FC,
+  createContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useContext,
+} from 'react'
 import {useDispatch} from 'react-redux'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
 import {normalize} from 'normalizr'
@@ -18,6 +25,7 @@ import {
 // Types
 import {Bucket, BucketEntities, RemoteDataState} from 'src/types'
 import {QueryScope} from 'src/types/flows'
+import {PipeContext} from 'src/flows/context/pipe'
 
 let MeasurementSchemaCreateRequest = null
 if (CLOUD) {
@@ -56,6 +64,7 @@ interface Props {
 export const BucketProvider: FC<Props> = ({children, scope}) => {
   const cacheKey = `${scope.region};;<${scope.org}>`
   const [bucketCache, setBucketCache] = useLocalStorageState()
+  const {data} = useContext(PipeContext)
   const dispatch = useDispatch()
   const buckets = bucketCache[cacheKey]?.buckets ?? []
   const lastFetch = bucketCache[cacheKey]?.lastFetch ?? 0
@@ -309,6 +318,6 @@ export const BucketProvider: FC<Props> = ({children, scope}) => {
         {children}
       </BucketContext.Provider>
     ),
-    [loading, buckets]
+    [data.bucket, loading, buckets]
   )
 }

yarn.lock

@@ -1461,7 +1461,7 @@
   resolved "https://registry.yarnpkg.com/@influxdata/flux-lsp-browser/-/flux-lsp-browser-0.8.15.tgz#5ae511c317ac5fb9f70e86a8195fb95e10b41da2"
   integrity sha512-i0JVjMy+ZSUcvV0ILh+UQ38x2tYUp8nfUcxmNkYcwizG0HLPPmN0Xr7j311uWKj0LpTpQ4IxjRQsOsPNfF2KtA==
 
-"@influxdata/giraffe@^2.28.0":
+"@influxdata/giraffe@^2.29.0":
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-2.29.1.tgz#7b85d9cefdb9c149f64051e9d35759858fc179d3"
   integrity sha512-FUg2MM98Ax3SnS6I6X4gEU9wAIeoSK5oAT1TGt/gE5WEHmxZKbBN2b8zik/bTkJNfoCDNn9jwN7E5mO3OjjBRA==