Update flux editor to use static functions file for suggestions

ui/src/flux/components/flux_functions_toolbar/ToolbarFunction.tsx

@@ -51,7 +51,7 @@ class ToolbarFunction extends PureComponent<Props, State> {
       >
         {this.tooltip}
         <dd>
-          {func.name} {this.helperText}
+          {func.name}() {this.helperText}
         </dd>
       </div>
     )

ui/src/flux/constants/functions.ts

@@ -3,7 +3,7 @@ import {FluxToolbarFunction} from 'src/types/flux'
 
 export const functions: FluxToolbarFunction[] = [
   {
-    name: 'count()',
+    name: 'count',
     args: [
       {
         name: 'columns',
@@ -18,7 +18,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'covariance()',
+    name: 'covariance',
     args: [
       {
         name: 'columns',
@@ -46,7 +46,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'cumulativeSum()',
+    name: 'cumulativeSum',
     args: [
       {
         name: 'columns',
@@ -62,7 +62,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'derivative()',
+    name: 'derivative',
     args: [
       {
         name: 'unit',
@@ -95,7 +95,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'difference()',
+    name: 'difference',
     args: [
       {
         name: 'nonNegative',
@@ -116,7 +116,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'distinct()',
+    name: 'distinct',
     args: [
       {
         name: 'column',
@@ -130,7 +130,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'drop()',
+    name: 'drop',
     args: [
       {
         name: 'columns',
@@ -152,7 +152,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'duplicate()',
+    name: 'duplicate',
     args: [
       {
         name: 'column',
@@ -171,7 +171,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'filter()',
+    name: 'filter',
     args: [
       {
         name: 'fn',
@@ -187,7 +187,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'first()',
+    name: 'first',
     args: [],
     desc: 'Selects the first non-null record from an input table.',
     example: 'first()',
@@ -195,7 +195,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'from()',
+    name: 'from',
     args: [
       {
         name: 'bucket',
@@ -215,7 +215,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'fromRows()',
+    name: 'fromRows',
     args: [
       {
         name: 'bucket',
@@ -235,7 +235,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'group()',
+    name: 'group',
     args: [
       {
         name: 'by',
@@ -262,7 +262,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'histogram()',
+    name: 'histogram',
     args: [
       {
         name: 'column',
@@ -303,7 +303,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'histogramQuantile()',
+    name: 'histogramQuantile',
     args: [
       {
         name: 'quantile',
@@ -344,7 +344,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'integral()',
+    name: 'integral',
     args: [
       {
         name: 'unit',
@@ -365,7 +365,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'intervals()',
+    name: 'intervals',
     args: [
       {
         name: 'every',
@@ -404,7 +404,7 @@ export const functions: FluxToolbarFunction[] = [
     link: 'http://example.com',
   },
   {
-    name: 'join()',
+    name: 'join',
     args: [
       {
         name: 'tables',

ui/src/flux/helpers/suggestions.ts

@@ -0,0 +1,16 @@
+// Constants
+import {functions} from 'src/flux/constants'
+
+// Types
+import {Suggestion} from 'src/types/flux'
+
+export const getSuggestions = (): Suggestion[] => {
+  return functions.map(({args, name}) => {
+    const params = args.reduce((acc, {name: argName, type}) => {
+      acc[argName] = type
+      return acc
+    }, {})
+
+    return {name, params}
+  })
+}

ui/src/shared/apis/flux/suggestions.ts

@@ -1,14 +0,0 @@
-import AJAX from 'src/utils/ajax'
-
-export const getSuggestions = async (url: string) => {
-  try {
-    const {data} = await AJAX({
-      url,
-    })
-
-    return data.funcs
-  } catch (error) {
-    console.error('Could not get suggestions', error)
-    throw error
-  }
-}

ui/src/shared/components/TimeMachine/FluxQueryMaker.tsx

@@ -14,12 +14,12 @@ import FluxFunctionsToolbar from 'src/flux/components/flux_functions_toolbar/Flu
 import {HANDLE_VERTICAL} from 'src/shared/constants'
 
 // Utils
-import {getSuggestions} from 'src/shared/apis/flux/suggestions'
 import {getAST} from 'src/shared/apis/flux/ast'
 import {restartable} from 'src/shared/utils/restartable'
 import DefaultDebouncer, {Debouncer} from 'src/shared/utils/debouncer'
 import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
 import {parseError} from 'src/flux/helpers/scriptBuilder'
+import {getSuggestions} from 'src/flux/helpers/suggestions'
 
 // Types
 import {NotificationAction, Source} from 'src/types'
@@ -61,14 +61,13 @@ class FluxQueryMaker extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      suggestions: [],
+      suggestions: getSuggestions(),
       draftScriptStatus: {type: 'none', text: ''},
       isWizardActive: false,
     }
   }
 
   public componentDidMount() {
-    this.fetchSuggestions()
     this.checkDraftScript()
   }
 
@@ -216,13 +215,6 @@ class FluxQueryMaker extends PureComponent<Props, State> {
 
     this.setState({draftScriptStatus})
   }
-
-  private fetchSuggestions = async (): Promise<void> => {
-    const {links} = this.props
-    const suggestions = await getSuggestions(links.suggestions)
-
-    this.setState({suggestions})
-  }
 }
 
 const ConnectedFluxQueryMaker = (props: PassedProps) => (

ui/test/flux/apis/flux.test.ts

@@ -1,20 +0,0 @@
-import {getSuggestions} from 'src/shared/apis/flux/suggestions'
-import AJAX from 'src/utils/ajax'
-
-jest.mock('src/utils/ajax', () => require('mocks/utils/ajax'))
-
-describe('Flux.Apis', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe('getSuggestions', () => {
-    it('is called with the expected body', () => {
-      const url = '/chronograf/v1/suggestions'
-      getSuggestions(url)
-      expect(AJAX).toHaveBeenCalledWith({
-        url,
-      })
-    })
-  })
-})