Introduce appendFrom funtionality

ui/package.json

@@ -9,7 +9,7 @@
     "url": "github:influxdata/chronograf"
   },
   "scripts": {
-    "build": "yarn run clean && webpack --config ./webpack/prod.config.js",
+    "build": "yarn run clean && webpack --config ./webpack/prod.config.js --display-error-details",
     "build:dev": "webpack --config ./webpack/dev.config.js",
     "build:vendor": "webpack --config webpack/vendor.config.js",
     "start": "yarn run clean && yarn run build:vendor && webpack --watch --config ./webpack/dev.config.js --progress",
@@ -157,4 +157,4 @@
     "rome": "^2.1.22",
     "uuid": "^3.2.1"
   }
-}
+}

ui/src/ifql/components/BodyBuilder.tsx

@@ -4,12 +4,14 @@ import _ from 'lodash'
 import ExpressionNode from 'src/ifql/components/ExpressionNode'
 import VariableName from 'src/ifql/components/VariableName'
 import FuncSelector from 'src/ifql/components/FuncSelector'
+import {funcNames} from 'src/ifql/constants'
 
 import {FlatBody, Suggestion} from 'src/types/ifql'
 
 interface Props {
   body: Body[]
   suggestions: Suggestion[]
+  onAppendFrom: () => void
 }
 
 interface Body extends FlatBody {
@@ -61,7 +63,7 @@ class BodyBuilder extends PureComponent<Props> {
           <FuncSelector
             bodyID="fake-body-id"
             declarationID="fake-declaration-id"
-            onAddNode={this.createNewDeclaration}
+            onAddNode={this.createNewBody}
             funcs={this.newDeclarationFuncs}
             connectorVisible={false}
           />
@@ -72,14 +74,13 @@ class BodyBuilder extends PureComponent<Props> {
 
   private get newDeclarationFuncs(): string[] {
     // 'JOIN' only available if there are at least 2 named declarations
-    return ['from', 'join', 'variable']
+    return ['from']
   }
 
-  private createNewDeclaration = (bodyID, name, declarationID) => {
-    // Returning a string here so linter stops yelling
-    // TODO: write a real function
-
-    return `${bodyID} / ${name} / ${declarationID}`
+  private createNewBody = name => {
+    if (name === funcNames.FROM) {
+      this.props.onAppendFrom()
+    }
   }
 
   private get funcNames() {

ui/src/ifql/components/TimeMachine.tsx

@@ -22,6 +22,7 @@ interface Props {
   suggestions: Suggestion[]
   onChangeScript: OnChangeScript
   onSubmitScript: OnSubmitScript
+  onAppendFrom: () => void
   onAnalyze: () => void
 }
 
@@ -71,6 +72,7 @@ class TimeMachine extends PureComponent<Props> {
       status,
       onAnalyze,
       suggestions,
+      onAppendFrom,
       onChangeScript,
       onSubmitScript,
     } = this.props
@@ -112,7 +114,13 @@ class TimeMachine extends PureComponent<Props> {
         name: 'Build',
         headerButtons: [],
         menuOptions: [],
-        render: () => <BodyBuilder body={body} suggestions={suggestions} />,
+        render: () => (
+          <BodyBuilder
+            body={body}
+            suggestions={suggestions}
+            onAppendFrom={onAppendFrom}
+          />
+        ),
       },
     ]
   }

ui/src/ifql/constants/builder.ts

@@ -0,0 +1 @@
+export const NEW_FROM = `from(db: "pick a db")\n\t|> filter(fn: (r) => r.tag == "value")\n\t|> range(start: -1m)`

ui/src/ifql/constants/index.ts

@@ -1,6 +1,7 @@
-import * as funcNames from 'src/ifql/constants/funcNames'
-import * as argTypes from 'src/ifql/constants/argumentTypes'
 import {ast} from 'src/ifql/constants/ast'
 import * as editor from 'src/ifql/constants/editor'
+import * as argTypes from 'src/ifql/constants/argumentTypes'
+import * as funcNames from 'src/ifql/constants/funcNames'
+import * as builder from 'src/ifql/constants/builder'
 
-export {ast, funcNames, argTypes, editor}
+export {ast, funcNames, argTypes, editor, builder}

ui/src/ifql/containers/IFQLPage.tsx

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 import _ from 'lodash'
 
 import TimeMachine from 'src/ifql/components/TimeMachine'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 import KeyboardShortcuts from 'src/shared/components/KeyboardShortcuts'
 import {InputArg, Handlers, DeleteFuncNodeArgs, Func} from 'src/types/ifql'
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -11,10 +12,10 @@ import {analyzeSuccess} from 'src/shared/copy/notifications'
 
 import {bodyNodes} from 'src/ifql/helpers'
 import {getSuggestions, getAST, getTimeSeries} from 'src/ifql/apis'
-import * as argTypes from 'src/ifql/constants/argumentTypes'
-import {Suggestion, FlatBody, Links} from 'src/types/ifql'
+import {builder, argTypes} from 'src/ifql/constants'
+
 import {Notification} from 'src/types'
-import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Suggestion, FlatBody, Links} from 'src/types/ifql'
 
 interface Status {
   type: string
@@ -50,7 +51,7 @@ export class IFQLPage extends PureComponent<Props, State> {
       ast: null,
       data: 'Hit "Get Data!" or Ctrl + Enter to run your script',
       suggestions: [],
-      script: `fil = (r) => r._measurement == \"cpu\"\ntele = from(db: \"telegraf\") \n\t\t|> filter(fn: fil)\n        |> range(start: -1m)\n        |> sum()`,
+      script: `fil = (r) => r._measurement == \"cpu\"\ntele = from(db: \"telegraf\") \n\t\t|> filter(fn: fil)\n        |> range(start: -1m)\n        |> sum()\n\n`,
       status: {
         type: 'none',
         text: '',
@@ -100,6 +101,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               status={status}
               suggestions={suggestions}
               onAnalyze={this.handleAnalyze}
+              onAppendFrom={this.handleAppendFrom}
               onChangeScript={this.handleChangeScript}
               onSubmitScript={this.handleSubmitScript}
             />
@@ -240,6 +242,13 @@ export class IFQLPage extends PureComponent<Props, State> {
       .join(', ')
   }
 
+  private handleAppendFrom = (): void => {
+    const {script} = this.state
+    const newScript = `${script.trim()}\n\n${builder.NEW_FROM}\n\n`
+
+    this.getASTResponse(newScript)
+  }
+
   private handleChangeScript = (script: string): void => {
     this.setState({script})
   }

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

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