Add append handlers for join function

ui/src/ifql/components/BodyBuilder.tsx

@@ -12,6 +12,7 @@ interface Props {
   body: Body[]
   suggestions: Suggestion[]
   onAppendFrom: () => void
+  onAppendJoin: () => void
 }
 
 interface Body extends FlatBody {

ui/src/ifql/components/TimeMachine.tsx

@@ -23,6 +23,7 @@ interface Props {
   onChangeScript: OnChangeScript
   onSubmitScript: OnSubmitScript
   onAppendFrom: () => void
+  onAppendJoin: () => void
   onAnalyze: () => void
 }
 
@@ -73,6 +74,7 @@ class TimeMachine extends PureComponent<Props> {
       onAnalyze,
       suggestions,
       onAppendFrom,
+      onAppendJoin,
       onChangeScript,
       onSubmitScript,
     } = this.props
@@ -119,6 +121,7 @@ class TimeMachine extends PureComponent<Props> {
             body={body}
             suggestions={suggestions}
             onAppendFrom={onAppendFrom}
+            onAppendJoin={onAppendJoin}
           />
         ),
       },

ui/src/ifql/constants/builder.ts

@@ -1 +1,2 @@
 export const NEW_FROM = `from(db: "pick a db")\n\t|> filter(fn: (r) => r.tag == "value")\n\t|> range(start: -1m)`
+export const NEW_JOIN = `join(tables: {table1:table1, table2:table2}, on:["host"], fn: (tables) => tables.table1["_value"] + tables.table2["_value"])`

ui/src/ifql/containers/IFQLPage.tsx

@@ -102,6 +102,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               suggestions={suggestions}
               onAnalyze={this.handleAnalyze}
               onAppendFrom={this.handleAppendFrom}
+              onAppendJoin={this.handleAppendJoin}
               onChangeScript={this.handleChangeScript}
               onSubmitScript={this.handleSubmitScript}
             />
@@ -249,6 +250,13 @@ export class IFQLPage extends PureComponent<Props, State> {
     this.getASTResponse(newScript)
   }
 
+  private handleAppendJoin = (): void => {
+    const {script} = this.state
+    const newScript = `${script.trim()}\n\n${builder.NEW_JOIN}\n\n`
+
+    this.getASTResponse(newScript)
+  }
+
   private handleChangeScript = (script: string): void => {
     this.setState({script})
   }

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

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