feat(lsp): Add lsp wasm and connect to monaco

ui/cypress/e2e/explorer.test.ts

@@ -498,9 +498,9 @@ describe('DataExplorer', () => {
           .click()
           .focused()
           .type(
-            `from(bucket: "defbuck")
-  |> range(start: -10s)
-  |> filter(fn: (r) => r._measurement == "no exist")`,
+            `from(bucket: "defbuck"{rightarrow}
+  |> range(start: -10s{rightarrow}
+  |> filter(fn: (r{rightarrow} => r._measurement == "no exist"{rightarrow}`,
             {force: true, delay: TYPE_DELAY}
           )
         cy.getByTestID('time-machine-submit-button').click()
@@ -518,24 +518,16 @@ describe('DataExplorer', () => {
           .click()
           .focused()
           .type(
-            `from(bucket: "defbuck")
-  |> range(start: -15m, stop: now())
-  |> filter(fn: (r) => r._measurement == `,
+            `from(bucket: "defbuck"{rightarrow}
+  |> range(start: -15m, stop: now({rightarrow}{rightarrow}
+  |> filter(fn: (r{rightarrow} => r._measurement ==`,
             {force: true, delay: TYPE_DELAY}
           )
       })
 
       cy.getByTestID('toolbar-tab').click()
       //insert variable name by clicking on variable
       cy.get('.variables-toolbar--label').click()
-      // finish flux
-      cy.getByTestID('flux-editor').within(() => {
-        cy.get('.react-monaco-editor-container')
-          .should('exist')
-          .click()
-          .focused()
-          .type(`)`, {force: true, delay: TYPE_DELAY})
-      })
 
       cy.getByTestID('save-query-as').click()
       cy.getByTestID('task--radio-button').click()

ui/cypress/e2e/tasks.test.ts

@@ -28,11 +28,11 @@ describe('Tasks', () => {
     const taskName = 'Bad Task'
 
     createFirstTask(taskName, ({name}) => {
-      return `import "influxdata/influxdb/v1"
-v1.tagValues(bucket: "${name}", tag: "_field")
-from(bucket: "${name}")
-  |> range(start: -2m)
-  |> to(org: "${name}")`
+      return `import "influxdata/influxdb/v1{rightarrow}
+v1.tagValues(bucket: "${name}", tag: "_field"{rightarrow}
+from(bucket: "${name}"{rightarrow}
+  |> range(start: -2m{rightarrow}
+  |> to(org: "${name}"{rightarrow}`
     })
 
     cy.getByTestID('task-save-btn').click()
@@ -46,10 +46,10 @@ from(bucket: "${name}")
   it('can create a task', () => {
     const taskName = 'Task'
     createFirstTask(taskName, ({name}) => {
-      return `import "influxdata/influxdb/v1"
-v1.tagValues(bucket: "${name}", tag: "_field")
-from(bucket: "${name}")
-  |> range(start: -2m)`
+      return `import "influxdata/influxdb/v1{rightarrow}
+v1.tagValues(bucket: "${name}", tag: "_field"{rightarrow}
+from(bucket: "${name}"{rightarrow}
+   |> range(start: -2m{rightarrow}`
     })
 
     cy.getByTestID('task-save-btn').click()
@@ -62,11 +62,11 @@ from(bucket: "${name}")
   it.skip('can create a task using http.post', () => {
     const taskName = 'Task'
     createFirstTask(taskName, () => {
-      return `import "http"
+      return `import "http{rightarrow}
 http.post(
   url: "https://foo.bar/baz",
-  data: bytes(v: "body")
-)`
+  data: bytes(v: "body"{rightarrow}
+  {rightarrow}`
     })
 
     cy.getByTestID('task-save-btn').click()
@@ -229,10 +229,10 @@ http.post(
       createFirstTask(
         taskName,
         ({name}) => {
-          return `import "influxdata/influxdb/v1"
-  v1.tagValues(bucket: "${name}", tag: "_field")
-  from(bucket: "${name}")
-    |> range(start: -2m)`
+          return `import "influxdata/influxdb/v1{rightarrow}
+  v1.tagValues(bucket: "${name}", tag: "_field"{rightarrow}
+  from(bucket: "${name}"{rightarrow}
+    |> range(start: -2m{rightarrow}`
         },
         interval,
         offset
@@ -304,55 +304,22 @@ http.post(
     // https://github.com/influxdata/influxdb/issues/15552
     const firstTask = 'First_Task'
     const secondTask = 'Second_Task'
-    const interval = '12h'
-    const offset = '30m'
-    const flux = name => `import "influxdata/influxdb/v1"
-    v1.tagValues(bucket: "${name}", tag: "_field")
-    from(bucket: "${name}")
-      |> range(start: -2m)`
     beforeEach(() => {
-      createFirstTask(
-        firstTask,
-        ({name}) => {
-          return flux(name)
-        },
-        interval,
-        offset
-      )
-      cy.getByTestID('task-save-btn').click()
-      cy.getByTestID('task-card')
-        .should('have.length', 1)
-        .and('contain', firstTask)
-
-      cy.getByTestID('add-resource-dropdown--button').click()
-      cy.getByTestID('add-resource-dropdown--new').click()
-      cy.getByInputName('name').type(secondTask)
-      cy.getByTestID('task-form-schedule-input').type(interval)
-      cy.getByTestID('task-form-offset-input').type(offset)
-      cy.get<Bucket>('@bucket').then(bucket => {
-        cy.getByTestID('flux-editor').within(() => {
-          cy.get('.react-monaco-editor-container')
-            .should('be.visible')
-            .click()
-            .focused()
-            .type(flux(bucket), {force: true, delay: 2})
+      cy.get('@org').then(({id}: Organization) => {
+        cy.get<string>('@token').then(token => {
+          cy.createTask(token, id, firstTask)
+          cy.createTask(token, id, secondTask)
+        })
+      })
+
+      cy.fixture('routes').then(({orgs}) => {
+        cy.get('@org').then(({id}: Organization) => {
+          cy.visit(`${orgs}/${id}/tasks`)
         })
       })
-      cy.getByTestID('task-save-btn').click()
-      cy.getByTestID('task-card')
-        .should('have.length', 2)
-        .and('contain', firstTask)
-        .and('contain', secondTask)
-      cy.getByTestID('task-card--name')
-        .contains(firstTask)
-        .click()
     })
 
     it('when navigating using the navbar', () => {
-      // verify that the previously input data exists
-      cy.getByInputValue(firstTask)
-      // navigate home
-      cy.get('div.cf-nav--item.active').click()
       // click on the second task
       cy.getByTestID('task-card--name')
         .contains(secondTask)
@@ -368,10 +335,6 @@ http.post(
     })
 
     it('when navigating using the cancel button', () => {
-      // verify that the previously input data exists
-      cy.getByInputValue(firstTask)
-      // navigate home
-      cy.getByTestID('task-cancel-btn').click()
       // click on the second task
       cy.getByTestID('task-card--name')
         .contains(secondTask)
@@ -388,10 +351,6 @@ http.post(
     })
 
     it('when navigating using the save button', () => {
-      // verify that the previously input data exists
-      cy.getByInputValue(firstTask)
-      // navigate home
-      cy.getByTestID('task-save-btn').click()
       // click on the second task
       cy.getByTestID('task-card--name')
         .contains(secondTask)
@@ -421,16 +380,16 @@ function createFirstTask(
 
   cy.getByTestID('add-resource-dropdown--new').click()
 
-  cy.getByInputName('name').type(name)
-  cy.getByTestID('task-form-schedule-input').type(interval)
-  cy.getByTestID('task-form-offset-input').type(offset)
-
   cy.get<Bucket>('@bucket').then(bucket => {
     cy.getByTestID('flux-editor').within(() => {
-      cy.get('.react-monaco-editor-container')
+      cy.get('textarea.inputarea')
         .click()
         .focused()
         .type(flux(bucket), {force: true, delay: 2})
     })
   })
+
+  cy.getByInputName('name').type(name)
+  cy.getByTestID('task-form-schedule-input').type(interval)
+  cy.getByTestID('task-form-offset-input').type(offset)
 }

ui/global.d.ts

@@ -1,5 +1,16 @@
+import {MonacoType} from 'src/types'
+
 //
 // got some globals here that only exist during compilation
 //
 
 declare module '*.png'
+declare let monaco: MonacoType
+
+declare global {
+  interface Window {
+    monaco: MonacoType
+  }
+}
+
+window.monaco = window.monaco || {}

ui/package.json

@@ -130,6 +130,7 @@
   },
   "dependencies": {
     "@influxdata/clockface": "1.1.5",
+    "@influxdata/flux-lsp-browser": "^0.2.2",
     "@influxdata/flux-parser": "^0.3.0",
     "@influxdata/giraffe": "0.17.4",
     "@influxdata/influx": "0.5.5",
@@ -154,9 +155,10 @@
     "lodash": "^4.3.0",
     "memoize-one": "^4.0.2",
     "moment": "^2.13.0",
-    "monaco-editor": "^0.18.1",
+    "monaco-editor": "^0.19.2",
     "monaco-editor-textmate": "^2.2.1",
-    "monaco-editor-webpack-plugin": "^1.7.0",
+    "monaco-languageclient": "^0.11.0",
+    "monaco-editor-webpack-plugin": "^1.8.2",
     "monaco-textmate": "^3.0.1",
     "normalizr": "^3.4.1",
     "onigasm": "^2.2.4",
@@ -174,7 +176,7 @@
     "react-grid-layout": "^0.16.6",
     "react-loadable": "^5.5.0",
     "react-markdown": "^4.0.3",
-    "react-monaco-editor": "^0.32.1",
+    "react-monaco-editor": "^0.33.0",
     "react-redux": "^5.1.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.8",

ui/src/external/constants.ts

@@ -0,0 +1 @@
+export const FLUXLANGID = 'flux' as const

ui/src/external/monaco.fluxCompletions.ts

@@ -1,20 +1,83 @@
+// Libraries
+import {completion, sendMessage} from 'src/external/monaco.lspMessages'
+import {
+  MonacoToProtocolConverter,
+  ProtocolToMonacoConverter,
+} from 'monaco-languageclient/lib/monaco-converter'
+import {get} from 'lodash'
+
+// Constants
+import {FLUXLANGID} from 'src/external/constants'
+
 // Types
+import {CompletionItem} from 'monaco-languageclient/lib/services'
 import {MonacoType} from 'src/types'
+import {IDisposable} from 'monaco-editor'
+
+const m2p = new MonacoToProtocolConverter()
+const p2m = new ProtocolToMonacoConverter()
+
+export const registerCompletion = (monaco: MonacoType, server): IDisposable => {
+  const completionProvider = monaco.languages.registerCompletionItemProvider(
+    FLUXLANGID,
+    {
+      provideCompletionItems: (model, position, context) => {
+        const wordUntil = model.getWordUntilPosition(position)
+        const defaultRange = new monaco.Range(
+          position.lineNumber,
+          wordUntil.startColumn,
+          position.lineNumber,
+          wordUntil.endColumn
+        )
+        const response = sendMessage(
+          completion(
+            m2p.asPosition(position.lineNumber, position.column),
+            context
+          ),
+          server
+        )
+
+        const completionItems = get(
+          response,
+          'result.items',
+          null
+        ) as CompletionItem[]
 
-export const addSnippets = (monaco: MonacoType) => {
-  monaco.languages.registerCompletionItemProvider('flux', {
-    provideCompletionItems: () => {
-      const suggestions = [
-        {
-          label: 'from',
-          kind: monaco.languages.CompletionItemKind.Snippet,
-          insertText: ['from(bucket: ${1})', '\t|>'].join('\n'),
-          insertTextRules:
-            monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-          documentation: 'From-Statement',
-        },
-      ] as any[]
-      return {suggestions: suggestions}
-    },
-  })
+        if (!completionItems) {
+          return
+        }
+        return p2m.asCompletionResult(completionItems, defaultRange)
+      },
+      triggerCharacters: [
+        '.',
+        'a',
+        'b',
+        'c',
+        'd',
+        'e',
+        'f',
+        'g',
+        'h',
+        'i',
+        'j',
+        'k',
+        'l',
+        'm',
+        'n',
+        'o',
+        'p',
+        'q',
+        'r',
+        's',
+        't',
+        'u',
+        'v',
+        'w',
+        'x',
+        'y',
+        'z',
+      ],
+    }
+  )
+  return completionProvider
 }

ui/src/external/monaco.fluxLang.ts

@@ -1,7 +1,10 @@
+// Constants
+import {FLUXLANGID} from 'src/external/constants'
+
 export const tokenizeFlux = monaco => {
-  monaco.languages.register({id: 'flux'})
+  monaco.languages.register({id: FLUXLANGID})
 
-  monaco.languages.setMonarchTokensProvider('flux', {
+  monaco.languages.setMonarchTokensProvider(FLUXLANGID, {
     keywords: ['from', 'range', 'filter', 'to'],
     tokenizer: {
       root: [