Add initial ability to handle string argument types

ui/src/ifql/components/FuncArg.tsx

@@ -9,24 +9,34 @@ interface Props {
   value: string
   type: string
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 class FuncArg extends PureComponent<Props> {
   public render() {
-    const {argKey, value, type, onChangeArg, funcID} = this.props
+    const {
+      argKey,
+      value,
+      type,
+      onChangeArg,
+      funcID,
+      onGenerateScript,
+    } = this.props
 
     switch (true) {
       case this.isInput: {
         return (
           <FuncArgInput
-            funcID={funcID}
             type={type}
             value={value}
             argKey={argKey}
+            funcID={funcID}
             onChangeArg={onChangeArg}
+            onGenerateScript={onGenerateScript}
           />
         )
       }
+
       case types.BOOL === type: {
         // TODO: make boolean arg component
         return (
@@ -56,7 +66,14 @@ class FuncArg extends PureComponent<Props> {
   private get isInput() {
     const {type} = this.props
 
-    return type !== types.FUNCTION || types.NIL || types.BOOL || types.INVALID
+    return (
+      type === types.STRING ||
+      type === types.DURATION ||
+      type === types.TIME ||
+      type === types.INT ||
+      type === types.REGEXP ||
+      type === types.UINT
+    )
   }
 }
 

ui/src/ifql/components/FuncArgInput.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent, ChangeEvent} from 'react'
+import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 
 export type OnChangeArg = (inputArg: InputArg) => void
 
@@ -14,6 +14,7 @@ interface Props {
   value: string
   type: string
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 class FuncArgInput extends PureComponent<Props> {
@@ -23,22 +24,32 @@ class FuncArgInput extends PureComponent<Props> {
       <div>
         <label htmlFor={argKey}>{argKey}: </label>
         <input
-          type="text"
           name={argKey}
-          className="form-control input-xs"
+          value={value}
           placeholder={type}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          type="text"
+          className="form-control input-xs"
           spellCheck={false}
           autoComplete="off"
-          value={value}
-          onChange={this.handleChange}
         />
       </div>
     )
   }
 
+  private handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') {
+      return
+    }
+
+    this.props.onGenerateScript()
+    e.preventDefault()
+  }
+
   private handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const {funcID, argKey} = this.props
-    console.log(this.props)
+
     this.props.onChangeArg({funcID, key: argKey, value: e.target.value})
   }
 }

ui/src/ifql/components/FuncArgs.tsx

@@ -18,11 +18,12 @@ export interface Func {
 interface Props {
   func: Func
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
-    const {func, onChangeArg} = this.props
+    const {func, onChangeArg, onGenerateScript} = this.props
 
     return (
       <div className="func-args">
@@ -31,10 +32,11 @@ export default class FuncArgs extends PureComponent<Props> {
             <FuncArg
               funcID={func.id}
               key={key}
+              type={type}
               argKey={key}
               value={value}
-              type={type}
               onChangeArg={onChangeArg}
+              onGenerateScript={onGenerateScript}
             />
           )
         })}

ui/src/ifql/components/FuncNode.tsx

@@ -7,6 +7,7 @@ interface Props {
   func: Func
   onDelete: (id: string) => void
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 interface State {
@@ -22,7 +23,7 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {func, onChangeArg} = this.props
+    const {func, onChangeArg, onGenerateScript} = this.props
     const {isOpen} = this.state
 
     return (
@@ -30,7 +31,13 @@ export default class FuncNode extends PureComponent<Props, State> {
         <div className="func-node--name" onClick={this.handleClick}>
           <div>{func.name}</div>
         </div>
-        {isOpen && <FuncArgs func={func} onChangeArg={onChangeArg} />}
+        {isOpen && (
+          <FuncArgs
+            func={func}
+            onChangeArg={onChangeArg}
+            onGenerateScript={onGenerateScript}
+          />
+        )}
         <div className="btn btn-danger btn-square" onClick={this.handleDelete}>
           <span className="icon-trash" />
         </div>

ui/src/ifql/components/TimeMachine.tsx

@@ -22,6 +22,7 @@ interface Props {
   onSubmitScript: (script: string) => void
   onDeleteFuncNode: (id: string) => void
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 class TimeMachine extends PureComponent<Props> {
@@ -30,10 +31,11 @@ class TimeMachine extends PureComponent<Props> {
       funcs,
       script,
       onAddNode,
+      onChangeArg,
       onChangeScript,
       onSubmitScript,
       onDeleteFuncNode,
-      onChangeArg,
+      onGenerateScript,
     } = this.props
 
     return (
@@ -50,6 +52,7 @@ class TimeMachine extends PureComponent<Props> {
               func={f}
               onChangeArg={onChangeArg}
               onDelete={onDeleteFuncNode}
+              onGenerateScript={onGenerateScript}
             />
           ))}
           <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />

ui/src/ifql/containers/IFQLPage.tsx

@@ -10,6 +10,7 @@ import {Func} from 'src/ifql/components/FuncArgs'
 import {InputArg} from 'src/ifql/components/FuncArgInput'
 
 import {getSuggestions, getAST} from 'src/ifql/apis'
+import * as argTypes from 'src/ifql/constants/argumentTypes'
 
 interface Links {
   self: string
@@ -75,6 +76,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               onSubmitScript={this.getASTResponse}
               onChangeScript={this.handleChangeScript}
               onDeleteFuncNode={this.handleDeleteFuncNode}
+              onGenerateScript={this.handleGenerateScript}
             />
           </div>
         </div>
@@ -82,6 +84,10 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
+  private handleGenerateScript = () => {
+    this.getASTResponse(this.funcsToScript)
+  }
+
   private handleChangeArg = ({funcID, key, value}: InputArg) => {
     const funcs = this.state.funcs.map(f => {
       if (f.id !== funcID) {
@@ -102,6 +108,26 @@ export class IFQLPage extends PureComponent<Props, State> {
     this.setState({funcs})
   }
 
+  private get funcsToScript(): string {
+    return this.state.funcs
+      .map(func => `${func.name}(${this.argsToScript(func.args)})`)
+      .join('\n\t|> ')
+  }
+
+  private argsToScript(args): string {
+    const withValues = args.filter(arg => arg.value)
+
+    return withValues
+      .map(({key, value, type}) => {
+        if (type === argTypes.STRING) {
+          return `${key}: "${value}"`
+        }
+
+        return `${key}: ${value}`
+      })
+      .join(', ')
+  }
+
   private handleChangeScript = (script: string): void => {
     this.setState({script})
   }

ui/test/ifql/components/TimeMachine.test.tsx

@@ -12,6 +12,7 @@ const setup = () => {
     onSubmitScript: () => {},
     onDeleteFuncNode: () => {},
     onChangeArg: () => {},
+    onGenerateScript: () => {},
   }
 
   const wrapper = shallow(<TimeMachine {...props} />)