Get actual databases for From component

ui/src/ifql/components/BodyBuilder.tsx

@@ -6,9 +6,11 @@ import VariableName from 'src/ifql/components/VariableName'
 import FuncSelector from 'src/ifql/components/FuncSelector'
 import {funcNames} from 'src/ifql/constants'
 
+import {Service} from 'src/types'
 import {FlatBody, Suggestion} from 'src/types/ifql'
 
 interface Props {
+  service: Service
   body: Body[]
   suggestions: Suggestion[]
   onAppendFrom: () => void

ui/src/ifql/components/ExpressionNode.tsx

@@ -19,7 +19,13 @@ class ExpressionNode extends PureComponent<Props> {
     const {declarationID, bodyID, funcNames, funcs} = this.props
     return (
       <IFQLContext.Consumer>
-        {({onDeleteFuncNode, onAddNode, onChangeArg, onGenerateScript}) => {
+        {({
+          onDeleteFuncNode,
+          onAddNode,
+          onChangeArg,
+          onGenerateScript,
+          service,
+        }) => {
           return (
             <>
               {funcs.map((func, i) => (
@@ -27,6 +33,7 @@ class ExpressionNode extends PureComponent<Props> {
                   key={i}
                   func={func}
                   bodyID={bodyID}
+                  service={service}
                   onChangeArg={onChangeArg}
                   onDelete={onDeleteFuncNode}
                   declarationID={declarationID}

ui/src/ifql/components/From.tsx

@@ -1,9 +1,11 @@
 import React, {PureComponent} from 'react'
 
-import {getDatabases} from 'src/ifql/apis'
+import {showDatabases} from 'src/shared/apis/metaQuery'
+import showDatabasesParser from 'src/shared/parsing/showDatabases'
 
 import Dropdown from 'src/shared/components/Dropdown'
 import {OnChangeArg} from 'src/types/ifql'
+import {Service} from 'src/types'
 
 interface Props {
   funcID: string
@@ -12,6 +14,7 @@ interface Props {
   bodyID: string
   declarationID: string
   onChangeArg: OnChangeArg
+  service: Service
 }
 
 interface State {
@@ -31,11 +34,16 @@ class From extends PureComponent<Props, State> {
   }
 
   public async componentDidMount() {
+    const {service} = this.props
+
     try {
-      const dbs = await getDatabases()
-      this.setState({dbs})
-    } catch (error) {
-      // TODO: notity error
+      const {data} = await showDatabases(`${service.links.source}/proxy`)
+      const {databases} = showDatabasesParser(data)
+      const sorted = databases.sort()
+
+      this.setState({dbs: sorted})
+    } catch (err) {
+      console.error(err)
     }
   }
 

ui/src/ifql/components/FuncArg.tsx

@@ -8,8 +8,10 @@ import From from 'src/ifql/components/From'
 
 import {funcNames, argTypes} from 'src/ifql/constants'
 import {OnChangeArg} from 'src/types/ifql'
+import {Service} from 'src/types'
 
 interface Props {
+  service: Service
   funcName: string
   funcID: string
   argKey: string
@@ -30,6 +32,7 @@ class FuncArg extends PureComponent<Props> {
       type,
       bodyID,
       funcID,
+      service,
       funcName,
       onChangeArg,
       declarationID,
@@ -39,6 +42,7 @@ class FuncArg extends PureComponent<Props> {
     if (funcName === funcNames.FROM) {
       return (
         <From
+          service={service}
           argKey={argKey}
           funcID={funcID}
           value={this.value}

ui/src/ifql/components/FuncArgs.tsx

@@ -4,9 +4,11 @@ import {OnChangeArg} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {Func} from 'src/types/ifql'
 import {funcNames} from 'src/ifql/constants'
+import {Service} from 'src/types'
 
 interface Props {
   func: Func
+  service: Service
   bodyID: string
   onChangeArg: OnChangeArg
   declarationID: string
@@ -20,6 +22,7 @@ export default class FuncArgs extends PureComponent<Props> {
     const {
       func,
       bodyID,
+      service,
       onChangeArg,
       onDeleteFunc,
       declarationID,
@@ -37,6 +40,7 @@ export default class FuncArgs extends PureComponent<Props> {
               value={value}
               bodyID={bodyID}
               funcID={func.id}
+              service={service}
               funcName={func.name}
               onChangeArg={onChangeArg}
               declarationID={declarationID}

ui/src/ifql/components/FuncNode.tsx

@@ -4,9 +4,11 @@ import FuncArgs from 'src/ifql/components/FuncArgs'
 import FuncArgsPreview from 'src/ifql/components/FuncArgsPreview'
 import {OnDeleteFuncNode, OnChangeArg, Func} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Service} from 'src/types'
 
 interface Props {
   func: Func
+  service: Service
   bodyID: string
   declarationID?: string
   onDelete: OnDeleteFuncNode
@@ -35,6 +37,7 @@ export default class FuncNode extends PureComponent<Props, State> {
     const {
       func,
       bodyID,
+      service,
       onChangeArg,
       declarationID,
       onGenerateScript,
@@ -53,6 +56,7 @@ export default class FuncNode extends PureComponent<Props, State> {
           <FuncArgs
             func={func}
             bodyID={bodyID}
+            service={service}
             onChangeArg={onChangeArg}
             declarationID={declarationID}
             onGenerateScript={onGenerateScript}

ui/src/ifql/components/TimeMachine.tsx

@@ -120,6 +120,7 @@ class TimeMachine extends PureComponent<Props> {
         render: () => (
           <BodyBuilder
             body={body}
+            service={service}
             suggestions={suggestions}
             onAppendFrom={onAppendFrom}
             onAppendJoin={onAppendJoin}

ui/src/ifql/containers/IFQLPage.tsx

@@ -22,7 +22,7 @@ import {
   FlatBody,
   Links,
   InputArg,
-  Handlers,
+  Context,
   DeleteFuncNodeArgs,
   Func,
   ScriptStatus,
@@ -90,7 +90,7 @@ export class IFQLPage extends PureComponent<Props, State> {
     const {script} = this.props
 
     return (
-      <IFQLContext.Provider value={this.handlers}>
+      <IFQLContext.Provider value={this.getContext}>
         <KeyboardShortcuts onControlEnter={this.getTimeSeries}>
           <div className="page hosts-list-page">
             {this.header}
@@ -129,7 +129,7 @@ export class IFQLPage extends PureComponent<Props, State> {
     return this.props.services[0]
   }
 
-  private get handlers(): Handlers {
+  private get getContext(): Context {
     return {
       onAddNode: this.handleAddNode,
       onChangeArg: this.handleChangeArg,
@@ -137,6 +137,7 @@ export class IFQLPage extends PureComponent<Props, State> {
       onChangeScript: this.handleChangeScript,
       onDeleteFuncNode: this.handleDeleteFuncNode,
       onGenerateScript: this.handleGenerateScript,
+      service: this.service,
     }
   }
 

ui/src/types/ifql.ts

@@ -1,3 +1,4 @@
+import {Service} from 'src/types'
 // function definitions
 export type OnDeleteFuncNode = (ids: DeleteFuncNodeArgs) => void
 export type OnChangeArg = (inputArg: InputArg) => void
@@ -15,13 +16,14 @@ export interface ScriptStatus {
   text: string
 }
 
-export interface Handlers {
+export interface Context {
   onAddNode: OnAddNode
   onChangeArg: OnChangeArg
   onSubmitScript: OnSubmitScript
   onChangeScript: OnChangeScript
   onDeleteFuncNode: OnDeleteFuncNode
   onGenerateScript: OnGenerateScript
+  service: Service
 }
 
 export interface DeleteFuncNodeArgs {

ui/test/ifql/components/From.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 import From from 'src/ifql/components/From'
+import {service} from 'test/resources'
 
 jest.mock('src/ifql/apis', () => require('mocks/ifql/apis'))
 
@@ -11,6 +12,7 @@ const setup = () => {
     value: 'db1',
     bodyID: '2',
     declarationID: '1',
+    service,
     onChangeArg: () => {},
   }
 

ui/test/ifql/components/FuncArg.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 import FuncArg from 'src/ifql/components/FuncArg'
+import {service} from 'test/resources'
 
 const setup = () => {
   const props = {
@@ -11,6 +12,7 @@ const setup = () => {
     argKey: '',
     value: '',
     type: '',
+    service,
     onChangeArg: () => {},
     onGenerateScript: () => {},
   }