From 4cd755051247936ef53ea0546586bc4c6d0e256f Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 16 May 2018 14:28:24 -0700
Subject: [PATCH] Enable multiple line error spans

---
 ui/src/ifql/components/TimeMachineEditor.tsx | 47 +++++++++++++++-----
 ui/src/ifql/containers/IFQLPage.tsx          |  3 +-
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/ui/src/ifql/components/TimeMachineEditor.tsx b/ui/src/ifql/components/TimeMachineEditor.tsx
index 528e8ab264..5ed261747a 100644
--- a/ui/src/ifql/components/TimeMachineEditor.tsx
+++ b/ui/src/ifql/components/TimeMachineEditor.tsx
@@ -6,6 +6,11 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import {OnChangeScript, OnSubmitScript} from 'src/types/ifql'
 import {editor} from 'src/ifql/constants'
 
+interface Gutter {
+  line: number
+  text: string
+}
+
 interface Status {
   type: string
   text: string
@@ -86,22 +91,36 @@ class TimeMachineEditor extends PureComponent<Props> {
   }
 
   private makeError(): void {
-    const {status} = this.props
     this.editor.clearGutter('error-gutter')
-    const span = document.createElement('span')
-    span.className = 'icon stop error-warning'
-    span.title = status.text
-    const lineNumber = this.statusLine
-    this.editor.setGutterMarker(lineNumber - 1, 'error-gutter', span)
+    const lineNumbers = this.statusLine
+    lineNumbers.forEach(({line, text}) => {
+      this.editor.setGutterMarker(
+        line - 1,
+        'error-gutter',
+        this.errorMarker(text)
+      )
+    })
+
     this.editor.refresh()
   }
 
-  private get statusLine(): number {
-    const {status} = this.props
-    const numbers = status.text.split(' ')[0]
-    const [lineNumber] = numbers.split(':')
+  private errorMarker(message: string): HTMLElement {
+    const span = document.createElement('span')
+    span.className = 'icon stop error-warning'
+    span.title = message
+    return span
+  }
 
-    return Number(lineNumber)
+  private get statusLine(): Gutter[] {
+    const {status} = this.props
+    const messages = status.text.split('\n')
+    const lineNumbers = messages.map(text => {
+      const [numbers] = text.split(' ')
+      const [lineNumber] = numbers.split(':')
+      return {line: Number(lineNumber), text}
+    })
+
+    return lineNumbers
   }
 
   private handleMount = (instance: EditorInstance) => {
@@ -113,7 +132,11 @@ class TimeMachineEditor extends PureComponent<Props> {
     const {key} = e
     const prevKey = this.prevKey
 
-    if (prevKey === 'Control' || prevKey === 'Meta') {
+    if (
+      prevKey === 'Control' ||
+      prevKey === 'Meta' ||
+      (prevKey === 'Shift' && key === '.')
+    ) {
       return (this.prevKey = key)
     }
 
diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx
index 8c4719d45a..a1d44a4a29 100644
--- a/ui/src/ifql/containers/IFQLPage.tsx
+++ b/ui/src/ifql/containers/IFQLPage.tsx
@@ -46,8 +46,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"
-      tele = from(db: "telegraf") |> filter(fn: fil) |> range(start: -1m) |> sum()`,
+      script: `"fil = (r) => r._measurement == \"cpu\"\ntele = from(db: \"telegraf\") \n\t\t|> filter(fn: fil)\n        |> range(start: -1m)\n        |> sum()"`,
       status: {
         type: 'none',
         text: '',