feat(ui): use time range in flux Schema Explorer

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ### Features
 
+1. [#5852](https://github.com/influxdata/chronograf/pull/5852): Add Flux Query Builder.
+1. [#5858](https://github.com/influxdata/chronograf/pull/5858): Use time range in flux Schema Explorer.
+
 ### Bug Fixes
 
 ### Other

ui/src/flux/components/DatabaseList.tsx

@@ -3,13 +3,14 @@ import React, {PureComponent} from 'react'
 import DatabaseListItem from 'src/flux/components/DatabaseListItem'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {Source, NotificationAction} from 'src/types'
+import {Source, NotificationAction, TimeRange} from 'src/types'
 import {executeQuery} from 'src/shared/apis/flux/query'
 import {parseResponse} from 'src/shared/parsing/flux/response'
 import {isEqual} from 'lodash'
 
 interface Props {
   source: Source
+  timeRange: TimeRange
   notify: NotificationAction
 }
 
@@ -71,11 +72,17 @@ class DatabaseList extends PureComponent<Props, State> {
 
   public render() {
     const {databases} = this.state
-    const {source, notify} = this.props
+    const {source, timeRange, notify} = this.props
 
     return databases.map(db => {
       return (
-        <DatabaseListItem db={db} key={db} source={source} notify={notify} />
+        <DatabaseListItem
+          db={db}
+          key={db}
+          source={source}
+          timeRange={timeRange}
+          notify={notify}
+        />
       )
     })
   }

ui/src/flux/components/DatabaseListItem.tsx

@@ -8,12 +8,13 @@ import SchemaExplorerTree from 'src/flux/components/SchemaExplorerTree'
 import {OpenState} from 'src/flux/constants/explorer'
 
 // Types
-import {Source, NotificationAction} from 'src/types'
+import {Source, NotificationAction, TimeRange} from 'src/types'
 import SchemaItemCategories from 'src/flux/components/SchemaItemCategories'
 
 interface Props {
   db: string
   source: Source
+  timeRange: TimeRange
   notify: NotificationAction
 }
 
@@ -49,19 +50,25 @@ class DatabaseListItem extends PureComponent<Props, State> {
   }
 
   private get categories(): JSX.Element {
-    const {db, source, notify} = this.props
+    const {db, source, timeRange, notify} = this.props
     const {opened} = this.state
     const isOpen = opened === OpenState.OPENED
     const isUnopen = opened === OpenState.UNOPENED
 
     if (!isUnopen) {
       return (
         <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
-          <SchemaExplorerTree bucket={db} source={source} key={db}>
+          <SchemaExplorerTree
+            bucket={db}
+            source={source}
+            timeRange={timeRange}
+            key={db + ':' + timeRange.lower + ':' + timeRange.upper}
+          >
             {tree => (
               <SchemaItemCategories
                 db={db}
                 source={source}
+                timeRange={timeRange}
                 notify={notify}
                 categoryTree={tree}
               />

ui/src/flux/components/FetchFields.tsx

@@ -2,14 +2,14 @@
 import {PureComponent} from 'react'
 
 // Utils
-import {fieldsByMeasurement as fetchFieldsByMeasurementAsync} from 'src/shared/apis/flux/metaQueries'
-import {parseFieldsByMeasurements} from 'src/shared/parsing/flux/values'
+import {fetchFieldsByMeasurement} from 'src/shared/apis/flux/metaQueries'
 
 // Types
-import {Source, RemoteDataState} from 'src/types'
+import {Source, RemoteDataState, TimeRange} from 'src/types'
 
 interface Props {
   source: Source
+  timeRange: TimeRange
   bucket: string
   children: (fields, fieldsByMeasurement, fieldsLoading) => JSX.Element
 }
@@ -43,13 +43,13 @@ class FetchFields extends PureComponent<Props, State> {
   }
 
   private async fetchFields() {
-    const {source, bucket} = this.props
+    const {source, timeRange, bucket} = this.props
     this.setState({loading: RemoteDataState.Loading})
     try {
-      const fieldsResults = await fetchFieldsByMeasurementAsync(source, bucket)
-
-      const {fields, fieldsByMeasurements} = parseFieldsByMeasurements(
-        fieldsResults
+      const {fields, fieldsByMeasurements} = await fetchFieldsByMeasurement(
+        source,
+        timeRange,
+        bucket
       )
 
       this.setState({

ui/src/flux/components/FetchMeasurements.tsx

@@ -2,14 +2,14 @@
 import {PureComponent} from 'react'
 
 // Utils
-import {measurements as fetchMeasurementsAsync} from 'src/shared/apis/flux/metaQueries'
-import parseValuesColumn from 'src/shared/parsing/flux/values'
+import {fetchMeasurements} from 'src/shared/apis/flux/metaQueries'
 
 // Types
-import {Source, RemoteDataState} from 'src/types'
+import {Source, RemoteDataState, TimeRange} from 'src/types'
 
 interface Props {
   source: Source
+  timeRange: TimeRange
   bucket: string
   children: (measurements, measurementsLoading) => JSX.Element
 }
@@ -19,14 +19,6 @@ interface State {
   loading: RemoteDataState
 }
 
-export async function fetchFluxMeasurements(
-  source: Source,
-  bucket: string
-): Promise<string[]> {
-  const measurementResults = await fetchMeasurementsAsync(source, bucket)
-  return parseValuesColumn(measurementResults)
-}
-
 class FetchMeasurements extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
@@ -36,18 +28,18 @@ class FetchMeasurements extends PureComponent<Props, State> {
     }
   }
   public componentDidMount() {
-    this.fetchMeasurements()
+    this.fetchData()
   }
 
   public render() {
     return this.props.children(this.state.measurements, this.state.loading)
   }
 
-  private async fetchMeasurements() {
-    const {source, bucket} = this.props
+  private async fetchData() {
+    const {source, timeRange, bucket} = this.props
     this.setState({loading: RemoteDataState.Loading})
     try {
-      const measurements = await fetchFluxMeasurements(source, bucket)
+      const measurements = await fetchMeasurements(source, timeRange, bucket)
       this.setState({measurements, loading: RemoteDataState.Done})
     } catch (error) {
       this.setState({loading: RemoteDataState.Error})

ui/src/flux/components/FetchTagKeys.tsx

@@ -2,14 +2,14 @@
 import {PureComponent} from 'react'
 
 // Utils
-import parseValuesColumn from 'src/shared/parsing/flux/values'
-import {tagKeys as fetchTagKeysAsync} from 'src/shared/apis/flux/metaQueries'
+import {fetchTagKeys} from 'src/shared/apis/flux/metaQueries'
 
 // Types
-import {Source, RemoteDataState} from 'src/types'
+import {Source, RemoteDataState, TimeRange} from 'src/types'
 
 interface Props {
   source: Source
+  timeRange: TimeRange
   bucket: string
   children: (tagKeys, tagsLoading) => JSX.Element
 }
@@ -29,21 +29,18 @@ class FetchTagKeys extends PureComponent<Props, State> {
   }
 
   public componentDidMount() {
-    this.fetchTagKeys()
+    this.fetchData()
   }
 
   public render() {
     return this.props.children(this.state.tagKeys, this.state.loading)
   }
 
-  private async fetchTagKeys() {
-    const {source, bucket} = this.props
+  private async fetchData() {
+    const {source, timeRange, bucket} = this.props
     this.setState({loading: RemoteDataState.Loading})
     try {
-      const tagKeysResults = await fetchTagKeysAsync(source, bucket, [])
-
-      const tagKeys = parseValuesColumn(tagKeysResults)
-
+      const tagKeys = await fetchTagKeys(source, timeRange, bucket)
       this.setState({tagKeys, loading: RemoteDataState.Done})
     } catch (error) {
       this.setState({loading: RemoteDataState.Error})

ui/src/flux/components/FieldList.tsx

@@ -94,7 +94,9 @@ class FieldList extends PureComponent<Props, State> {
     return (
       <div className="flux-schema-tree flux-schema--child">
         <div className="flux-schema--item no-hover" onClick={this.handleClick}>
-          <div className="no-results">No more fields.</div>
+          <div className="no-results">{`No ${
+            term ? 'matching ' : ''
+          }fields in the selected time range.`}</div>
         </div>
       </div>
     )

ui/src/flux/components/MeasurementList.tsx

@@ -65,6 +65,7 @@ class MeasurementsList extends PureComponent<Props, State> {
     const {source, db, notify, loading} = this.props
     const {searchTerm} = this.state
     const measurementEntries = Object.entries(this.props.measurements)
+    measurementEntries.sort((a, b) => a[0].localeCompare(b[0]))
 
     if (loading === RemoteDataState.Error) {
       return (
@@ -127,7 +128,11 @@ class MeasurementsList extends PureComponent<Props, State> {
     return (
       <div className="flux-schema-tree flux-schema--child">
         <div className="flux-schema--item no-hover" onClick={this.handleClick}>
-          <div className="no-results">No more measurements.</div>
+          <div className="no-results">
+            {`No ${
+              term ? 'matching ' : ''
+            }measurements in the selected time range.`}
+          </div>
         </div>
       </div>
     )

ui/src/flux/components/SchemaExplorer.tsx

@@ -2,20 +2,21 @@ import React, {PureComponent} from 'react'
 
 import DatabaseList from 'src/flux/components/DatabaseList'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import {Source, NotificationAction} from 'src/types'
+import {Source, NotificationAction, TimeRange} from 'src/types'
 
 interface Props {
   source: Source
+  timeRange: TimeRange
   notify: NotificationAction
 }
 
 class SchemaExplorer extends PureComponent<Props> {
   public render() {
-    const {source, notify} = this.props
+    const {source, timeRange, notify} = this.props
     return (
       <div className="flux-schema-explorer">
         <FancyScrollbar>
-          <DatabaseList source={source} notify={notify} />
+          <DatabaseList source={source} timeRange={timeRange} notify={notify} />
         </FancyScrollbar>
       </div>
     )

ui/src/flux/components/SchemaExplorerTree.tsx

@@ -9,11 +9,12 @@ import FetchTagKeys from 'src/flux/components/FetchTagKeys'
 import FetchFields from 'src/flux/components/FetchFields'
 
 // Types
-import {Source, RemoteDataState} from 'src/types'
+import {Source, RemoteDataState, TimeRange} from 'src/types'
 
 interface Props {
   bucket: string
   source: Source
+  timeRange: TimeRange
   children: (tree: CategoryTree) => JSX.Element
 }
 
@@ -33,14 +34,18 @@ export interface CategoryTree {
 @ErrorHandling
 class SchemaExplorerTree extends PureComponent<Props> {
   public render() {
-    const {source, bucket} = this.props
+    const {source, timeRange, bucket} = this.props
 
     return (
-      <FetchMeasurements source={source} bucket={bucket}>
+      <FetchMeasurements source={source} timeRange={timeRange} bucket={bucket}>
         {(measurements, measurementsLoading) => (
-          <FetchTagKeys source={source} bucket={bucket}>
+          <FetchTagKeys source={source} timeRange={timeRange} bucket={bucket}>
             {(tagKeys, tagsLoading) => (
-              <FetchFields source={source} bucket={bucket}>
+              <FetchFields
+                source={source}
+                timeRange={timeRange}
+                bucket={bucket}
+              >
                 {(fields, fieldsByMeasurements, fieldsLoading) =>
                   this.props.children(
                     this.tree(

ui/src/flux/components/SchemaItemCategories.tsx

@@ -8,11 +8,12 @@ import SchemaItemCategory, {
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Source, NotificationAction} from 'src/types'
+import {Source, NotificationAction, TimeRange} from 'src/types'
 import {CategoryTree} from 'src/flux/components/SchemaExplorerTree'
 
 interface Props {
   source: Source
+  timeRange: TimeRange
   db: string
   categoryTree: CategoryTree
   notify: NotificationAction
@@ -21,26 +22,29 @@ interface Props {
 @ErrorHandling
 class SchemaItemCategories extends PureComponent<Props> {
   public render() {
-    const {source, db, categoryTree, notify} = this.props
+    const {source, timeRange, db, categoryTree, notify} = this.props
 
     return (
       <>
         <SchemaItemCategory
           source={source}
+          timeRange={timeRange}
           db={db}
           type={CategoryType.Measurements}
           categoryTree={categoryTree}
           notify={notify}
         />
         <SchemaItemCategory
           source={source}
+          timeRange={timeRange}
           db={db}
           type={CategoryType.Tags}
           categoryTree={categoryTree}
           notify={notify}
         />
         <SchemaItemCategory
           source={source}
+          timeRange={timeRange}
           db={db}
           type={CategoryType.Fields}
           categoryTree={categoryTree}