Add inputs for various argument types

ui/src/ifql/components/FuncArg.tsx

@@ -0,0 +1,63 @@
+import React, {PureComponent} from 'react'
+
+import FuncArgInput, {OnChangeArg} from 'src/ifql/components/FuncArgInput'
+import * as types from 'src/ifql/constants/argumentTypes'
+
+interface Props {
+  funcID: string
+  argKey: string
+  value: string
+  type: string
+  onChangeArg: OnChangeArg
+}
+
+class FuncArg extends PureComponent<Props> {
+  public render() {
+    const {argKey, value, type, onChangeArg, funcID} = this.props
+
+    switch (true) {
+      case this.isInput: {
+        return (
+          <FuncArgInput
+            funcID={funcID}
+            type={type}
+            value={value}
+            argKey={argKey}
+            onChangeArg={onChangeArg}
+          />
+        )
+      }
+      case types.BOOL === type: {
+        // TODO: make boolean arg component
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
+      case types.FUNCTION === type: {
+        // TODO: make separate function component
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
+      default: {
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
+    }
+  }
+
+  private get isInput() {
+    const {type} = this.props
+
+    return type !== types.FUNCTION || types.NIL || types.BOOL || types.INVALID
+  }
+}
+
+export default FuncArg

ui/src/ifql/components/FuncArgInput.tsx

@@ -0,0 +1,46 @@
+import React, {PureComponent, ChangeEvent} from 'react'
+
+export type OnChangeArg = (inputArg: InputArg) => void
+
+export interface InputArg {
+  funcID: string
+  key: string
+  value: string
+}
+
+interface Props {
+  funcID: string
+  argKey: string
+  value: string
+  type: string
+  onChangeArg: OnChangeArg
+}
+
+class FuncArgInput extends PureComponent<Props> {
+  public render() {
+    const {argKey, value, type} = this.props
+    return (
+      <div>
+        <label htmlFor={argKey}>{argKey}: </label>
+        <input
+          type="text"
+          name={argKey}
+          className="form-control input-xs"
+          placeholder={type}
+          spellCheck={false}
+          autoComplete="off"
+          value={value}
+          onChange={this.handleChange}
+        />
+      </div>
+    )
+  }
+
+  private handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const {funcID, argKey} = this.props
+    console.log(this.props)
+    this.props.onChangeArg({funcID, key: argKey, value: e.target.value})
+  }
+}
+
+export default FuncArgInput

ui/src/ifql/components/FuncArgs.tsx

@@ -1,4 +1,6 @@
 import React, {PureComponent} from 'react'
+import FuncArg from 'src/ifql/components/FuncArg'
+import {OnChangeArg} from 'src/ifql/components/FuncArgInput'
 
 interface Arg {
   key: string
@@ -15,17 +17,27 @@ export interface Func {
 
 interface Props {
   func: Func
+  onChangeArg: OnChangeArg
 }
 
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
+    const {func, onChangeArg} = this.props
+
     return (
       <div className="func-args">
-        {this.props.func.args.map(({key, value}) => (
-          <div className="func-arg" key={key}>
-            {key} : {value}
-          </div>
-        ))}
+        {func.args.map(({key, value, type}) => {
+          return (
+            <FuncArg
+              funcID={func.id}
+              key={key}
+              argKey={key}
+              value={value}
+              type={type}
+              onChangeArg={onChangeArg}
+            />
+          )
+        })}
       </div>
     )
   }

ui/src/ifql/components/FuncNode.tsx

@@ -1,10 +1,12 @@
 import React, {PureComponent, MouseEvent} from 'react'
 import FuncArgs from 'src/ifql/components/FuncArgs'
 import {Func} from 'src/ifql/components/FuncArgs'
+import {OnChangeArg} from 'src/ifql/components/FuncArgInput'
 
 interface Props {
   func: Func
   onDelete: (id: string) => void
+  onChangeArg: OnChangeArg
 }
 
 interface State {
@@ -20,7 +22,7 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {func} = this.props
+    const {func, onChangeArg} = this.props
     const {isOpen} = this.state
 
     return (
@@ -28,7 +30,7 @@ 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} />}
+        {isOpen && <FuncArgs func={func} onChangeArg={onChangeArg} />}
         <div className="btn btn-danger btn-square" onClick={this.handleDelete}>
           <span className="icon-trash" />
         </div>
@@ -40,7 +42,7 @@ export default class FuncNode extends PureComponent<Props, State> {
     this.props.onDelete(this.props.func.id)
   }
 
-  private handleClick = (e: MouseEvent<HTMLElement>) => {
+  private handleClick = (e: MouseEvent<HTMLElement>): void => {
     e.stopPropagation()
 
     const {isOpen} = this.state

ui/src/ifql/components/TimeMachine.tsx

@@ -4,6 +4,7 @@ import FuncNode from 'src/ifql/components/FuncNode'
 import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor'
 
 import {Func} from 'src/ifql/components/FuncArgs'
+import {OnChangeArg} from 'src/ifql/components/FuncArgInput'
 
 export interface Suggestion {
   name: string
@@ -20,6 +21,7 @@ interface Props {
   onChangeScript: (script: string) => void
   onSubmitScript: (script: string) => void
   onDeleteFuncNode: (id: string) => void
+  onChangeArg: OnChangeArg
 }
 
 class TimeMachine extends PureComponent<Props> {
@@ -31,6 +33,7 @@ class TimeMachine extends PureComponent<Props> {
       onChangeScript,
       onSubmitScript,
       onDeleteFuncNode,
+      onChangeArg,
     } = this.props
 
     return (
@@ -42,7 +45,12 @@ class TimeMachine extends PureComponent<Props> {
         />
         <div className="func-nodes-container">
           {funcs.map(f => (
-            <FuncNode key={f.id} func={f} onDelete={onDeleteFuncNode} />
+            <FuncNode
+              key={f.id}
+              func={f}
+              onChangeArg={onChangeArg}
+              onDelete={onDeleteFuncNode}
+            />
           ))}
           <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />
         </div>

ui/src/ifql/constants/argumentTypes.ts

@@ -0,0 +1,13 @@
+export const INVALID = 'invalid'
+export const NIL = 'nil'
+export const STRING = 'string'
+export const INT = 'int'
+export const UINT = 'uint'
+export const FLOAT = 'float'
+export const BOOL = 'bool'
+export const TIME = 'time'
+export const DURATION = 'duration'
+export const REGEXP = 'regexp'
+export const ARRAY = 'array'
+export const OBJECT = 'object'
+export const FUNCTION = 'function'

ui/src/ifql/containers/IFQLPage.tsx

@@ -7,6 +7,7 @@ import _ from 'lodash'
 import TimeMachine, {Suggestion} from 'src/ifql/components/TimeMachine'
 import Walker from 'src/ifql/ast/walker'
 import {Func} from 'src/ifql/components/FuncArgs'
+import {InputArg} from 'src/ifql/components/FuncArgInput'
 
 import {getSuggestions, getAST} from 'src/ifql/apis'
 
@@ -70,6 +71,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               funcs={this.state.funcs}
               suggestions={suggestions}
               onAddNode={this.handleAddNode}
+              onChangeArg={this.handleChangeArg}
               onSubmitScript={this.getASTResponse}
               onChangeScript={this.handleChangeScript}
               onDeleteFuncNode={this.handleDeleteFuncNode}
@@ -80,6 +82,26 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
+  private handleChangeArg = ({funcID, key, value}: InputArg) => {
+    const funcs = this.state.funcs.map(f => {
+      if (f.id !== funcID) {
+        return f
+      }
+
+      const args = f.args.map(a => {
+        if (a.key === key) {
+          return {...a, value}
+        }
+
+        return a
+      })
+
+      return {...f, args}
+    })
+
+    this.setState({funcs})
+  }
+
   private handleChangeScript = (script: string): void => {
     this.setState({script})
   }

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

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