Introduce code mirror mode and theme for InfluxQL

ui/src/external/codemirror.js

@@ -1,4 +1,8 @@
-import {modeFlux, modeTickscript} from 'src/shared/constants/codeMirrorModes'
+import {
+  modeFlux,
+  modeTickscript,
+  modeInfluxQL,
+} from 'src/shared/constants/codeMirrorModes'
 import 'codemirror/addon/hint/show-hint'
 
 /* eslint-disable */
@@ -314,4 +318,5 @@ function indentFunction(states, meta) {
 
 // Modes
 CodeMirror.defineSimpleMode('flux', modeFlux)
-CodeMirror.defineSimpleMode('tickscript', modeTickscript)
+CodeMirror.defineSimpleMode('tickscript', modeTickscript)
+CodeMirror.defineSimpleMode('influxQL', modeInfluxQL)

ui/src/shared/constants/codeMirrorModes.ts

@@ -174,3 +174,80 @@ export const modeTickscript = {
     lineComment: '//',
   },
 }
+
+export const modeInfluxQL = {
+  // The start state contains the rules that are intially used
+  start: [
+    // The regex matches the token, the token property contains the type
+    {
+      regex: /"(?:[^\\]|\\.)*?(?:"|$)/,
+      token: 'string.double',
+    },
+    {
+      regex: /'(?:[^\\]|\\.)*?(?:'|$)/,
+      token: 'string.single',
+    },
+    {
+      regex: /(function)(\s+)([a-z$][\w$]*)/,
+      token: ['keyword', null, 'variable-2'],
+    },
+    // Rules are matched in the order in which they appear, so there is
+    // no ambiguity between this one and the one above
+    {
+      regex: /(SELECT\s|AS\s|FROM\s|WHERE\s|GROUP\sBY\s)/i,
+      token: 'clause',
+    },
+    {
+      regex: /FILL(?=[(])/i,
+      token: 'clause',
+    },
+    {
+      regex: /(CREATE\s|SHOW\s|DROP\s)/i,
+      token: 'meta',
+    },
+    {
+      regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
+      token: 'number',
+    },
+    {
+      regex: /[:](interval|dashboardTime|dashboardUpper)[:]/,
+      token: 'temp-system',
+    },
+    {
+      regex: /[:]\w+[:]/,
+      token: 'temp-var',
+    },
+    {
+      regex: /now[(][)]\s\S\s\S+/,
+      token: 'now',
+    },
+    {
+      regex: /[-+\/*=~<>!]+/,
+      token: 'operator',
+    },
+    {
+      regex: /(NULL)/i,
+      token: 'null',
+    },
+  ],
+  // The multi-line comment state.
+  comment: [
+    {
+      regex: /.*?\*\//,
+      token: 'comment',
+      next: 'start',
+    },
+    {
+      regex: /.*/,
+      token: 'comment',
+    },
+  ],
+  // The meta property contains global information about the mode. It
+  // can contain properties like lineComment, which are supported by
+  // all modes, and also directives like dontIndentStates, which are
+  // specific to simple modes.
+  meta: {
+    dontIndentStates: ['comment'],
+    lineComment: '//',
+  },
+}

ui/src/style/components/code-mirror/_influxql.scss

@@ -0,0 +1,42 @@
+/*
+  CodeMirror "InfluxQL" Theme
+  ------------------------------------------------------------------------------
+  Intended for use with the influxQL CodeMirror Mode
+*/
+
+.cm-s-influxql {
+  color: $g11-sidewalk;
+  font-weight: 600;
+
+  .cm-clause {
+    color: $c-pool;
+  }
+  .cm-meta {
+    color: $c-honeydew;
+  }
+  .cm-string {
+    color: $g15-platinum;
+  }
+  .cm-comment {
+    color: $g8-storm;
+  }
+  .cm-number {
+    color: $c-pineapple;
+  }
+  .cm-operator {
+    color: $c-pool;
+  }
+  .cm-temp-var {
+    color: $c-comet;
+  }
+  .cm-temp-system {
+    color: #ff4d9e ;
+  }
+  .cm-now {
+    color: $c-pineapple;
+  }
+  .cm-null {
+    color: $g8-storm;
+    font-style: italic;
+  }
+}

ui/src/style/components/code-mirror/theme.scss

@@ -90,4 +90,5 @@ div.CodeMirror-selected,
 */
 @import 'time-machine';
 @import 'tickscript';
+@import 'influxql';
 @import 'hints';