diff --git a/ui/src/ifql/components/FuncArgInput.tsx b/ui/src/ifql/components/FuncArgInput.tsx index 24881f6de..ea0070a80 100644 --- a/ui/src/ifql/components/FuncArgInput.tsx +++ b/ui/src/ifql/components/FuncArgInput.tsx @@ -39,8 +39,8 @@ class FuncArgInput extends PureComponent { return } - this.props.onGenerateScript() e.preventDefault() + this.props.onGenerateScript() } private handleChange = (e: ChangeEvent) => { diff --git a/ui/src/ifql/components/FuncSelector.tsx b/ui/src/ifql/components/FuncSelector.tsx index 0e4034067..8654f6ef1 100644 --- a/ui/src/ifql/components/FuncSelector.tsx +++ b/ui/src/ifql/components/FuncSelector.tsx @@ -3,6 +3,7 @@ import _ from 'lodash' import {ClickOutside} from 'src/shared/components/ClickOutside' import FuncList from 'src/ifql/components/FuncList' +import {OnAddNode} from 'src/types/ifql' import {ErrorHandling} from 'src/shared/decorators/errors' interface State { @@ -13,7 +14,8 @@ interface State { interface Props { funcs: string[] - onAddNode: (name: string) => void + expressionID: string + onAddNode: OnAddNode } @ErrorHandling @@ -64,7 +66,7 @@ export class FuncSelector extends PureComponent { private handleAddNode = (name: string) => { this.handleCloseList() - this.props.onAddNode(name) + this.props.onAddNode(name, this.props.expressionID) } private get availableFuncs() { diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx index bae48616c..170b7c0cf 100644 --- a/ui/src/ifql/components/TimeMachine.tsx +++ b/ui/src/ifql/components/TimeMachine.tsx @@ -4,7 +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, OnDeleteFuncNode} from 'src/types/ifql' +import {OnChangeArg, OnDeleteFuncNode, OnAddNode} from 'src/types/ifql' import {ErrorHandling} from 'src/shared/decorators/errors' export interface Suggestion { @@ -24,8 +24,8 @@ interface Props { suggestions: Suggestion[] expressions: Expression[] onSubmitScript: () => void - onAddNode: (name: string) => void onChangeScript: (script: string) => void + onAddNode: OnAddNode onChangeArg: OnChangeArg onDeleteFuncNode: OnDeleteFuncNode onGenerateScript: () => void @@ -56,7 +56,14 @@ class TimeMachine extends PureComponent { {expressions.map(({funcs, id}, i) => { return (
-

Expression {i}

+

+ Expression {i} + +

{funcs.map(func => ( { onGenerateScript={onGenerateScript} /> ))} -
) })} diff --git a/ui/src/ifql/components/TimeMachineEditor.tsx b/ui/src/ifql/components/TimeMachineEditor.tsx index 744312348..6c51e89e1 100644 --- a/ui/src/ifql/components/TimeMachineEditor.tsx +++ b/ui/src/ifql/components/TimeMachineEditor.tsx @@ -23,6 +23,7 @@ class TimeMachineEditor extends PureComponent { lineNumbers: true, theme: 'material', tabIndex: 1, + readonly: false, } return ( diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx index 272d076ef..c4f827421 100644 --- a/ui/src/ifql/containers/IFQLPage.tsx +++ b/ui/src/ifql/containers/IFQLPage.tsx @@ -112,7 +112,7 @@ export class IFQLPage extends PureComponent { expressionID, }: InputArg): void => { const expressions = this.state.expressions.map(expression => { - if (expression.id === expressionID) { + if (expression.id !== expressionID) { return expression } @@ -144,7 +144,7 @@ export class IFQLPage extends PureComponent { private get expressionsToScript(): string { return this.state.expressions.reduce((acc, expression) => { - return acc + this.funcsToScript(expression.funcs) + return `${acc + this.funcsToScript(expression.funcs)}\n\n` }, '') } @@ -176,8 +176,16 @@ export class IFQLPage extends PureComponent { this.setState({script}) } - private handleAddNode = (name: string): void => { - const script = `${this.state.script}\n\t|> ${name}()` + private handleAddNode = (name: string, expressionID: string): void => { + const script = this.state.expressions.reduce((acc, expression) => { + if (expression.id === expressionID) { + const {funcs} = expression + return `${acc}${this.funcsToScript(funcs)}\n\t|> ${name}()\n\n` + } + + return acc + expression.source + }, '') + this.getASTResponse(script) } diff --git a/ui/src/types/ifql.ts b/ui/src/types/ifql.ts index 334489f45..d6028dc1a 100644 --- a/ui/src/types/ifql.ts +++ b/ui/src/types/ifql.ts @@ -1,6 +1,7 @@ // function definitions export type OnDeleteFuncNode = (funcID: string, expressionID: string) => void export type OnChangeArg = (inputArg: InputArg) => void +export type OnAddNode = (expressionID: string, funcName: string) => void export interface InputArg { funcID: string expressionID: string diff --git a/ui/test/ifql/components/FuncSelector.test.tsx b/ui/test/ifql/components/FuncSelector.test.tsx index 270996f16..b6c9536e8 100644 --- a/ui/test/ifql/components/FuncSelector.test.tsx +++ b/ui/test/ifql/components/FuncSelector.test.tsx @@ -8,6 +8,7 @@ import FuncList from 'src/ifql/components/FuncList' const setup = (override = {}) => { const props = { funcs: ['count', 'range'], + expressionID: '1', onAddNode: () => {}, ...override, }