diff --git a/ui/src/ifql/components/BodyBuilder.tsx b/ui/src/ifql/components/BodyBuilder.tsx index a6d8d6f647..e81855fa64 100644 --- a/ui/src/ifql/components/BodyBuilder.tsx +++ b/ui/src/ifql/components/BodyBuilder.tsx @@ -21,17 +21,24 @@ class BodyBuilder extends PureComponent { return b.declarations.map(d => { if (d.funcs) { return ( - +
+
{d.name} =
+ +
) } - return
{b.source}
+ return ( +
+ {b.source} +
+ ) }) } diff --git a/ui/src/ifql/components/ExpressionNode.tsx b/ui/src/ifql/components/ExpressionNode.tsx index c945acc3b7..8ef81749bb 100644 --- a/ui/src/ifql/components/ExpressionNode.tsx +++ b/ui/src/ifql/components/ExpressionNode.tsx @@ -22,14 +22,6 @@ class ExpressionNode extends PureComponent { {({onDeleteFuncNode, onAddNode, onChangeArg, onGenerateScript}) => { return (
-

- -

{funcs.map(func => ( { onGenerateScript={onGenerateScript} /> ))} +
) }} diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx index db8ba47c07..2ad7d99b42 100644 --- a/ui/src/ifql/containers/IFQLPage.tsx +++ b/ui/src/ifql/containers/IFQLPage.tsx @@ -45,7 +45,7 @@ export class IFQLPage extends PureComponent { ast: null, suggestions: [], script: - 'foo = "baz"\n\nfoo = from(db: "telegraf")\n\t|> filter() \n\t|> range(start: -15m)\n\nbar = from(db: "telegraf")\n\t|> filter() \n\t|> range(start: -15m)\n\n', + 'baz = "baz"\n\nfoo = from(db: "telegraf")\n\t|> filter() \n\t|> range(start: -15m)\n\nbar = from(db: "telegraf")\n\t|> filter() \n\t|> range(start: -15m)\n\n', } } @@ -234,7 +234,9 @@ export class IFQLPage extends PureComponent { declarationID: string ): void => { const script = this.state.body.reduce((acc, body) => { - if (body.id === bodyID) { + const {id, source, funcs} = body + + if (id === bodyID) { const declaration = body.declarations.find(d => d.id === declarationID) if (declaration) { return `${acc}${declaration.name} = ${this.appendFunc( @@ -243,10 +245,10 @@ export class IFQLPage extends PureComponent { )}` } - return `${acc}${this.appendFunc(body.funcs, name)}` + return `${acc}${this.appendFunc(funcs, name)}` } - return `${acc}${body.source}` + return `${acc}${this.formatSource(source)}` }, '') this.getASTResponse(script) @@ -262,7 +264,7 @@ export class IFQLPage extends PureComponent { const script = this.state.body .map((body, bodyIndex) => { if (body.id !== bodyID) { - return body.source + return this.formatSource(body.source) } const isLast = bodyIndex === this.state.body.length - 1 @@ -278,24 +280,38 @@ export class IFQLPage extends PureComponent { const functions = declaration.funcs.filter(f => f.id !== funcID) const s = this.funcsToSource(functions) - return `${declaration.name} = ${this.parseLastSource(s, isLast)}` + return `${declaration.name} = ${this.formatLastSource(s, isLast)}` } const funcs = body.funcs.filter(f => f.id !== funcID) const source = this.funcsToSource(funcs) - return this.parseLastSource(source, isLast) + return this.formatLastSource(source, isLast) }) .join('') this.getASTResponse(script) } + private formatSource = (source: string): string => { + // currently a bug in the AST which does not add newlines to literal variable assignment bodies + if (!source.match(/\n\n/)) { + return `${source}\n\n` + } + + return `${source}` + } + // formats the last line of a body string to include two new lines - private parseLastSource = (source: string, isLast: boolean): string => { + private formatLastSource = (source: string, isLast: boolean): string => { if (isLast) { return `${source}` } + // currently a bug in the AST which does not add newlines to literal variable assignment bodies + if (!source.match(/\n\n/)) { + return `${source}\n\n` + } + return `${source}\n\n` } diff --git a/ui/src/style/components/func-node.scss b/ui/src/style/components/func-node.scss index 84c3b13742..82dcfed978 100644 --- a/ui/src/style/components/func-node.scss +++ b/ui/src/style/components/func-node.scss @@ -14,7 +14,6 @@ width: auto; display: flex; color: $ix-text-default; - text-transform: uppercase; margin-bottom: $ix-marg-a; font-family: $ix-text-font; font-weight: 500;