Merge branch 'ace-editor'

package.json

@@ -63,6 +63,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "ace-builds": "^1.2.8",
     "eventemitter3": "^2.0.2",
     "gaze": "^1.1.2",
     "grunt-jscs": "3.0.1",

public/app/core/components/code_editor/code_editor.ts

+/**
+ * codeEditor directive based on Ace code editor
+ * https://github.com/ajaxorg/ace
+ *
+ * Basic usage:
+ * <code-editor content="ctrl.target.query" on-change="ctrl.panelCtrl.refresh()"
+ *  data-mode="sql" data-show-gutter>
+ * </code-editor>
+ *
+ * Params:
+ * content:      Editor content.
+ * onChange:     Function called on content change (invoked on editor blur, ctrl+enter, not on every change).
+ * getCompleter: Function returned external completer. Completer is an object implemented getCompletions() method,
+ *               see Prometheus Data Source implementation for details.
+ *
+ * Some Ace editor options available via data-* attributes:
+ * data-mode               - Language mode (text, sql, javascript, etc.). Default is 'text'.
+ * data-theme              - Editor theme (eg 'solarized_dark').
+ * data-max-lines          - Max editor height in lines. Editor grows automatically from 1 to maxLines.
+ * data-show-gutter        - Show gutter (contains line numbers and additional info).
+ * data-tab-size           - Tab size, default is 2.
+ * data-behaviours-enabled - Specifies whether to use behaviors or not. "Behaviors" in this case is the auto-pairing of
+ *                           special characters, like quotation marks, parenthesis, or brackets.
+ *
+ * Keybindings:
+ * Ctrl-Enter (Command-Enter): run onChange() function
+ */
+
+///<reference path="../../../headers/common.d.ts" />
+import _ from 'lodash';
+import coreModule from 'app/core/core_module';
+import config from 'app/core/config';
+import ace from 'ace';
+
+const ACE_SRC_BASE = "public/vendor/npm/ace-builds/src-noconflict/";
+const DEFAULT_THEME_DARK = "grafana-dark";
+const DEFAULT_THEME_LIGHT = "textmate";
+const DEFAULT_MODE = "text";
+const DEFAULT_MAX_LINES = 10;
+const DEFAULT_TAB_SIZE = 2;
+const DEFAULT_BEHAVIOURS = true;
+
+const GRAFANA_MODULES = ['mode-prometheus', 'snippets-prometheus', 'theme-grafana-dark'];
+const GRAFANA_MODULE_BASE = "public/app/core/components/code_editor/";
+
+// Trick for loading additional modules
+function setModuleUrl(moduleType, name) {
+  let baseUrl = ACE_SRC_BASE;
+  let aceModeName = `ace/${moduleType}/${name}`;
+  let moduleName = `${moduleType}-${name}`;
+  let componentName = `${moduleName}.js`;
+
+  if (_.includes(GRAFANA_MODULES, moduleName)) {
+    baseUrl = GRAFANA_MODULE_BASE;
+  }
+
+  if (moduleType === 'snippets') {
+    componentName = `${moduleType}/${name}.js`;
+  }
+
+  ace.config.setModuleUrl(aceModeName, baseUrl + componentName);
+}
+
+setModuleUrl("ext", "language_tools");
+setModuleUrl("mode", "text");
+setModuleUrl("snippets", "text");
+
+let editorTemplate = `<div></div>`;
+
+function link(scope, elem, attrs) {
+  let lightTheme = config.bootData.user.lightTheme;
+  let default_theme = lightTheme ? DEFAULT_THEME_LIGHT : DEFAULT_THEME_DARK;
+
+  // Options
+  let langMode = attrs.mode || DEFAULT_MODE;
+  let maxLines = attrs.maxLines || DEFAULT_MAX_LINES;
+  let showGutter = attrs.showGutter !== undefined;
+  let theme = attrs.theme || default_theme;
+  let tabSize = attrs.tabSize || DEFAULT_TAB_SIZE;
+  let behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIOURS;
+
+  // Initialize editor
+  let aceElem = elem.get(0);
+  let codeEditor = ace.edit(aceElem);
+  let editorSession = codeEditor.getSession();
+
+  let editorOptions = {
+    maxLines: maxLines,
+    showGutter: showGutter,
+    tabSize: tabSize,
+    behavioursEnabled: behavioursEnabled,
+    highlightActiveLine: false,
+    showPrintMargin: false,
+    autoScrollEditorIntoView: true // this is needed if editor is inside scrollable page
+  };
+
+  // Set options
+  codeEditor.setOptions(editorOptions);
+  // disable depreacation warning
+  codeEditor.$blockScrolling = Infinity;
+  // Padding hacks
+  codeEditor.renderer.setScrollMargin(15, 15);
+  codeEditor.renderer.setPadding(10);
+
+  setThemeMode(theme);
+  setLangMode(langMode);
+  setEditorContent(scope.content);
+
+  // Add classes
+  elem.addClass("gf-code-editor");
+  let textarea = elem.find("textarea");
+  textarea.addClass('gf-form-input');
+
+  // Event handlers
+  editorSession.on('change', (e) => {
+    scope.$apply(() => {
+      let newValue = codeEditor.getValue();
+      scope.content = newValue;
+    });
+  });
+
+  // Sync with outer scope - update editor content if model has been changed from outside of directive.
+  scope.$watch('content', (newValue, oldValue) => {
+    let editorValue = codeEditor.getValue();
+    if (newValue !== editorValue && newValue !== oldValue) {
+      scope.$$postDigest(function() {
+        setEditorContent(newValue);
+      });
+    }
+  });
+
+  codeEditor.on('blur', () => {
+    scope.onChange();
+  });
+
+  scope.$on("$destroy", () => {
+    codeEditor.destroy();
+  });
+
+  // Keybindings
+  codeEditor.commands.addCommand({
+    name: 'executeQuery',
+    bindKey: {win: 'Ctrl-Enter', mac: 'Command-Enter'},
+    exec: () => {
+      scope.onChange();
+    }
+  });
+
+  function setLangMode(lang) {
+    let aceModeName = `ace/mode/${lang}`;
+    setModuleUrl("mode", lang);
+    setModuleUrl("snippets", lang);
+    editorSession.setMode(aceModeName);
+
+    ace.config.loadModule("ace/ext/language_tools", (language_tools) => {
+      codeEditor.setOptions({
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: true
+      });
+
+      console.log('getting completer', lang);
+      if (scope.getCompleter()) {
+        // make copy of array as ace seems to share completers array between instances
+        codeEditor.completers = codeEditor.completers.slice();
+        codeEditor.completers.push(scope.getCompleter());
+      }
+    });
+  }
+
+  function setThemeMode(theme) {
+    setModuleUrl("theme", theme);
+    let themeModule = `ace/theme/${theme}`;
+    ace.config.loadModule(themeModule, (theme_module) => {
+      // Check is theme light or dark and fix if needed
+      let lightTheme = config.bootData.user.lightTheme;
+      let fixedTheme = theme;
+      if (lightTheme && theme_module.isDark) {
+        fixedTheme = DEFAULT_THEME_LIGHT;
+      } else if (!lightTheme && !theme_module.isDark) {
+        fixedTheme = DEFAULT_THEME_DARK;
+      }
+      setModuleUrl("theme", fixedTheme);
+      themeModule = `ace/theme/${fixedTheme}`;
+      codeEditor.setTheme(themeModule);
+
+      elem.addClass("gf-code-editor--theme-loaded");
+    });
+  }
+
+  function setEditorContent(value) {
+    codeEditor.setValue(value);
+    codeEditor.clearSelection();
+  }
+}
+
+export function codeEditorDirective() {
+  return {
+    restrict: 'E',
+    template: editorTemplate,
+    scope: {
+      content: "=",
+      onChange: "&",
+      getCompleter: "&"
+    },
+    link: link
+  };
+}
+
+coreModule.directive('codeEditor', codeEditorDirective);

public/app/core/components/code_editor/snippets/prometheus.js

+// jshint ignore: start
+// jscs: disable
+ace.define("ace/snippets/prometheus",["require","exports","module"], function(require, exports, module) {
+"use strict";
+
+// exports.snippetText = "# rate\n\
+// snippet r\n\
+//   rate(${1:metric}[${2:range}])\n\
+// ";
+
+exports.snippets = [
+  {
+    "content": "rate(${1:metric}[${2:range}])",
+    "name": "rate()",
+    "scope": "prometheus",
+    "tabTrigger": "r"
+  }
+];
+
+exports.scope = "prometheus";
+});

public/app/core/components/code_editor/theme-grafana-dark.js

+/* jshint ignore:start */
+
+ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"], function(require, exports, module) {
+  "use strict";
+
+  exports.isDark = true;
+  exports.cssClass = "gf-code-dark";
+  exports.cssText = ".gf-code-dark .ace_gutter {\
+  background: #2f3129;\
+  color: #8f908a\
+  }\
+  .gf-code-dark .ace_print-margin {\
+  width: 1px;\
+  background: #555651\
+  }\
+  .gf-code-dark {\
+  background-color: #111;\
+  color: #e0e0e0\
+  }\
+  .gf-code-dark .ace_cursor {\
+  color: #f8f8f0\
+  }\
+  .gf-code-dark .ace_marker-layer .ace_selection {\
+  background: #49483e\
+  }\
+  .gf-code-dark.ace_multiselect .ace_selection.ace_start {\
+  box-shadow: 0 0 3px 0px #272822;\
+  }\
+  .gf-code-dark .ace_marker-layer .ace_step {\
+  background: rgb(102, 82, 0)\
+  }\
+  .gf-code-dark .ace_marker-layer .ace_bracket {\
+  margin: -1px 0 0 -1px;\
+  border: 1px solid #49483e\
+  }\
+  .gf-code-dark .ace_marker-layer .ace_active-line {\
+  background: #202020\
+  }\
+  .gf-code-dark .ace_gutter-active-line {\
+  background-color: #272727\
+  }\
+  .gf-code-dark .ace_marker-layer .ace_selected-word {\
+  border: 1px solid #49483e\
+  }\
+  .gf-code-dark .ace_invisible {\
+  color: #52524d\
+  }\
+  .gf-code-dark .ace_entity.ace_name.ace_tag,\
+  .gf-code-dark .ace_keyword,\
+  .gf-code-dark .ace_meta.ace_tag,\
+  .gf-code-dark .ace_storage {\
+  color: #66d9ef\
+  }\
+  .gf-code-dark .ace_punctuation,\
+  .gf-code-dark .ace_punctuation.ace_tag {\
+  color: #fff\
+  }\
+  .gf-code-dark .ace_constant.ace_character,\
+  .gf-code-dark .ace_constant.ace_language,\
+  .gf-code-dark .ace_constant.ace_numeric,\
+  .gf-code-dark .ace_constant.ace_other {\
+  color: #fe85fc\
+  }\
+  .gf-code-dark .ace_invalid {\
+  color: #f8f8f0;\
+  background-color: #f92672\
+  }\
+  .gf-code-dark .ace_invalid.ace_deprecated {\
+  color: #f8f8f0;\
+  background-color: #ae81ff\
+  }\
+  .gf-code-dark .ace_support.ace_constant,\
+  .gf-code-dark .ace_support.ace_function {\
+  color: #59e6e3\
+  }\
+  .gf-code-dark .ace_fold {\
+  background-color: #a6e22e;\
+  border-color: #f8f8f2\
+  }\
+  .gf-code-dark .ace_storage.ace_type,\
+  .gf-code-dark .ace_support.ace_class,\
+  .gf-code-dark .ace_support.ace_type {\
+  font-style: italic;\
+  color: #66d9ef\
+  }\
+  .gf-code-dark .ace_entity.ace_name.ace_function,\
+  .gf-code-dark .ace_entity.ace_other,\
+  .gf-code-dark .ace_entity.ace_other.ace_attribute-name,\
+  .gf-code-dark .ace_variable {\
+  color: #a6e22e\
+  }\
+  .gf-code-dark .ace_variable.ace_parameter {\
+  font-style: italic;\
+  color: #fd971f\
+  }\
+  .gf-code-dark .ace_string {\
+  color: #74e680\
+  }\
+  .gf-code-dark .ace_paren {\
+    color: #f0a842\
+  }\
+  .gf-code-dark .ace_operator {\
+    color: #FFF\
+  }\
+  .gf-code-dark .ace_comment {\
+  color: #75715e\
+  }\
+  .gf-code-dark .ace_indent-guide {\
+  background: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaccayaaaczgbynaaaaekleqvqimwpq0fd0zxbzd/wpaajvaoxesgneaaaaaelftksuqmcc) right repeat-y\
+  }";
+
+  var dom = require("../lib/dom");
+  dom.importCssString(exports.cssText, exports.cssClass);
+});
+
+/* jshint ignore:end */

public/app/core/core.ts

@@ -19,6 +19,7 @@ import "./directives/diff-view";
 import './jquery_extended';
 import './partials';
 import './components/jsontree/jsontree';
+import './components/code_editor/code_editor';
 
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';

public/app/headers/common.d.ts

@@ -72,3 +72,8 @@ declare module 'd3' {
   var d3: any;
   export default d3;
 }
+
+declare module 'ace' {
+  var ace: any;
+  export default ace;
+}

public/app/plugins/datasource/mysql/partials/query.editor.html

 <query-editor-row query-ctrl="ctrl" can-collapse="false">
 	<div class="gf-form-inline">
 		<div class="gf-form gf-form--grow">
-			<textarea rows="10" class="gf-form-input" ng-model="ctrl.target.rawSql" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"></textarea>
+			<code-editor content="ctrl.target.rawSql" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
+			</code-editor>
 		</div>
 	</div>
 

public/app/plugins/datasource/prometheus/completer.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import {PrometheusDatasource} from "./datasource";
+
+export class PromCompleter {
+  identifierRegexps = [/[\[\]a-zA-Z_0-9=]/];
+
+  constructor(private datasource: PrometheusDatasource) {
+  }
+
+  getCompletions(editor, session, pos, prefix, callback) {
+    if (prefix === '[') {
+      var vectors = [];
+      for (let unit of ['s', 'm', 'h']) {
+        for (let value of [1,5,10,30]) {
+         vectors.push({caption: value+unit, value: '['+value+unit, meta: 'range vector'});
+        }
+      }
+      callback(null, vectors);
+      return;
+    }
+
+    var query = prefix;
+    var line = editor.session.getLine(pos.row);
+
+    return this.datasource.performSuggestQuery(query).then(metricNames => {
+      callback(null, metricNames.map(name => {
+        let value = name;
+        if (prefix === '(') {
+          value = '(' + name;
+        }
+
+        return {
+          caption: name,
+          value: value,
+          meta: 'metric',
+        };
+      }));
+    });
+  }
+
+}

public/app/plugins/datasource/prometheus/datasource.ts

@@ -11,8 +11,26 @@ import TableModel from 'app/core/table_model';
 
 var durationSplitRegexp = /(\d+)(ms|s|m|h|d|w|M|y)/;
 
-/** @ngInject */
-export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateSrv, timeSrv) {
+function prometheusSpecialRegexEscape(value) {
+  return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&');
+}
+
+export class PrometheusDatasource {
+  type: string;
+  editorSrc: string;
+  name: string;
+  supportMetrics: boolean;
+  url: string;
+  directUrl: string;
+  basicAuth: any;
+  withCredentials: any;
+
+  /** @ngInject */
+  constructor(instanceSettings,
+              private $q,
+              private backendSrv,
+              private templateSrv,
+              private timeSrv) {
     this.type = 'prometheus';
     this.editorSrc = 'app/features/prometheus/partials/query.editor.html';
     this.name = instanceSettings.name;
@@ -21,8 +39,9 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
     this.directUrl = instanceSettings.directUrl;
     this.basicAuth = instanceSettings.basicAuth;
     this.withCredentials = instanceSettings.withCredentials;
+  }
 
-  this._request = function(method, url, requestId) {
+  _request(method, url, requestId?) {
     var options: any = {
       url: this.url + url,
       method: method,
@@ -32,20 +51,17 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
     if (this.basicAuth || this.withCredentials) {
       options.withCredentials = true;
     }
+
     if (this.basicAuth) {
       options.headers = {
         "Authorization": this.basicAuth
       };
     }
 
-    return backendSrv.datasourceRequest(options);
-  };
-
-  function prometheusSpecialRegexEscape(value) {
-    return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&');
+    return this.backendSrv.datasourceRequest(options);
   }
 
-  this.interpolateQueryExpr = function(value, variable, defaultFormatFn) {
+  interpolateQueryExpr(value, variable, defaultFormatFn) {
     // if no multi or include all do not regexEscape
     if (!variable.multi && !variable.includeAll) {
       return value;
@@ -57,14 +73,13 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
 
     var escapedValues = _.map(value, prometheusSpecialRegexEscape);
     return escapedValues.join('|');
-  };
+  }
 
-  this.targetContainsTemplate = function(target) {
-    return templateSrv.variableExists(target.expr);
-  };
+  targetContainsTemplate(target) {
+    return this.templateSrv.variableExists(target.expr);
+  }
 
-  // Called once per panel (graph)
-  this.query = function(options) {
+  query(options) {
     var self = this;
     var start = this.getPrometheusTime(options.range.from, false);
     var end = this.getPrometheusTime(options.range.to, true);
@@ -82,10 +97,10 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
       activeTargets.push(target);
 
       var query: any = {};
-      query.expr = templateSrv.replace(target.expr, options.scopedVars, self.interpolateQueryExpr);
+      query.expr = this.templateSrv.replace(target.expr, options.scopedVars, self.interpolateQueryExpr);
       query.requestId = options.panelId + target.refId;
 
-      var interval = templateSrv.replace(target.interval, options.scopedVars) || options.interval;
+      var interval = this.templateSrv.replace(target.interval, options.scopedVars) || options.interval;
       var intervalFactor = target.intervalFactor || 1;
       target.step = query.step = this.calculateInterval(interval, intervalFactor);
       var range = Math.ceil(end - start);
@@ -95,14 +110,14 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
 
     // No valid targets, return the empty result to save a round trip.
     if (_.isEmpty(queries)) {
-      return $q.when({ data: [] });
+      return this.$q.when({ data: [] });
     }
 
     var allQueryPromise = _.map(queries, query => {
       return this.performTimeSeriesQuery(query, start, end);
     });
 
-    return $q.all(allQueryPromise).then(responseList => {
+    return this.$q.all(allQueryPromise).then(responseList => {
       var result = [];
       var index = 0;
 
@@ -122,27 +137,27 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
 
       return { data: result };
     });
-  };
+  }
 
-  this.adjustStep = function(step, autoStep, range) {
+  adjustStep(step, autoStep, range) {
     // Prometheus drop query if range/step > 11000
     // calibrate step if it is too big
     if (step !== 0 && range / step > 11000) {
       step = Math.ceil(range / 11000);
     }
     return Math.max(step, autoStep);
-  };
+  }
 
-  this.performTimeSeriesQuery = function(query, start, end) {
+  performTimeSeriesQuery(query, start, end) {
     if (start > end) {
       throw { message: 'Invalid time range' };
     }
 
     var url = '/api/v1/query_range?query=' + encodeURIComponent(query.expr) + '&start=' + start + '&end=' + end + '&step=' + query.step;
     return this._request('GET', url, query.requestId);
-  };
+  }
 
-  this.performSuggestQuery = function(query) {
+  performSuggestQuery(query) {
     var url = '/api/v1/label/__name__/values';
 
     return this._request('GET', url).then(function(result) {
@@ -150,41 +165,30 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
         return metricName.indexOf(query) !== 1;
       });
     });
-  };
-
-  this.metricFindQuery = function(query) {
-    if (!query) { return $q.when([]); }
-
-    var interpolated;
-    try {
-      interpolated = templateSrv.replace(query, {}, this.interpolateQueryExpr);
-    } catch (err) {
-      return $q.reject(err);
   }
 
-    var metricFindQuery = new PrometheusMetricFindQuery(this, interpolated, timeSrv);
+  metricFindQuery(query) {
+    if (!query) { return this.$q.when([]); }
+
+    let interpolated = this.templateSrv.replace(query, {}, this.interpolateQueryExpr);
+    var metricFindQuery = new PrometheusMetricFindQuery(this, interpolated, this.timeSrv);
     return metricFindQuery.process();
-  };
+  }
 
-  this.annotationQuery = function(options) {
+  annotationQuery(options) {
     var annotation = options.annotation;
     var expr = annotation.expr || '';
     var tagKeys = annotation.tagKeys || '';
     var titleFormat = annotation.titleFormat || '';
     var textFormat = annotation.textFormat || '';
 
-    if (!expr) { return $q.when([]); }
+    if (!expr) { return this.$q.when([]); }
 
-    var interpolated;
-    try {
-      interpolated = templateSrv.replace(expr, {}, this.interpolateQueryExpr);
-    } catch (err) {
-      return $q.reject(err);
-    }
+    var interpolated = this.templateSrv.replace(expr, {}, this.interpolateQueryExpr);
 
     var step = '60s';
     if (annotation.step) {
-      step = templateSrv.replace(annotation.step);
+      step = this.templateSrv.replace(annotation.step);
     }
 
     var start = this.getPrometheusTime(options.range.from, false);
@@ -222,19 +226,19 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
 
       return eventList;
     });
-  };
+  }
 
-  this.testDatasource = function() {
+  testDatasource() {
     return this.metricFindQuery('metrics(.*)').then(function() {
       return { status: 'success', message: 'Data source is working', title: 'Success' };
     });
-  };
+  }
 
-  this.calculateInterval = function(interval, intervalFactor) {
+  calculateInterval(interval, intervalFactor) {
     return Math.ceil(this.intervalSeconds(interval) * intervalFactor);
-  };
+  }
 
-  this.intervalSeconds = function(interval) {
+  intervalSeconds(interval) {
     var m = interval.match(durationSplitRegexp);
     var dur = moment.duration(parseInt(m[1]), m[2]);
     var sec = dur.asSeconds();
@@ -243,9 +247,9 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
     }
 
     return sec;
-  };
+  }
 
-  this.transformMetricData = function(md, options, start, end) {
+  transformMetricData(md, options, start, end) {
     var dps = [],
       metricLabel = null;
 
@@ -273,9 +277,9 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
     }
 
     return { target: metricLabel, datapoints: dps };
-  };
+  }
 
-  this.transformMetricDataToTable = function(md) {
+  transformMetricDataToTable(md) {
     var table = new TableModel();
     var i, j;
     var metricLabels = {};
@@ -325,17 +329,17 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
     });
 
     return table;
-  };
+  }
 
-  this.createMetricLabel = function(labelData, options) {
+  createMetricLabel(labelData, options) {
     if (_.isUndefined(options) || _.isEmpty(options.legendFormat)) {
       return this.getOriginalMetricName(labelData);
     }
 
-    return this.renderTemplate(templateSrv.replace(options.legendFormat), labelData) || '{}';
-  };
+    return this.renderTemplate(this.templateSrv.replace(options.legendFormat), labelData) || '{}';
+  }
 
-  this.renderTemplate = function(aliasPattern, aliasData) {
+  renderTemplate(aliasPattern, aliasData) {
     var aliasRegex = /\{\{\s*(.+?)\s*\}\}/g;
     return aliasPattern.replace(aliasRegex, function(match, g1) {
       if (aliasData[g1]) {
@@ -343,21 +347,21 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS
       }
       return g1;
     });
-  };
+  }
 
-  this.getOriginalMetricName = function(labelData) {
+  getOriginalMetricName(labelData) {
     var metricName = labelData.__name__ || '';
     delete labelData.__name__;
     var labelPart = _.map(_.toPairs(labelData), function(label) {
       return label[0] + '="' + label[1] + '"';
     }).join(',');
     return metricName + '{' + labelPart + '}';
-  };
+  }
 
-  this.getPrometheusTime = function(date, roundUp) {
+  getPrometheusTime(date, roundUp) {
     if (_.isString(date)) {
       date = dateMath.parse(date, roundUp);
     }
     return Math.ceil(date.valueOf() / 1000);
-  };
+  }
 }

public/app/plugins/datasource/prometheus/partials/query.editor.html

 <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="false">
 	<div class="gf-form-inline">
 		<div class="gf-form gf-form--grow">
-			<textarea rows="3" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 give-focus="ctrl.target.refId == 'A'" ng-model-onblur ng-change="ctrl.refreshMetricData()"></textarea>
+			<code-editor content="ctrl.target.expr" on-change="ctrl.refreshMetricData()"
+				get-completer="ctrl.getCompleter()" data-mode="prometheus">
+			</code-editor>
 		</div>
 	</div>
 
@@ -38,17 +40,6 @@
 			</div>
 		</div>
 
-		<div class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
-
-	<div class="gf-form-inline">
-		<div class="gf-form max-width-26">
-			<label class="gf-form-label width-8">Metric lookup</label>
-			<input type="text" class="gf-form-input" ng-model="ctrl.target.metric" spellcheck='false' bs-typeahead="ctrl.suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100>
-		</div>
-
 		<div class="gf-form">
 			<label class="gf-form-label width-6">Format as</label>
 			<div class="gf-form-select-wrapper width-8">
@@ -66,4 +57,5 @@
 		</div>
 	</div>
 
+
 </query-editor-row>

public/app/plugins/datasource/prometheus/query_ctrl.ts

@@ -6,6 +6,7 @@ import moment from 'moment';
 
 import * as dateMath from 'app/core/utils/datemath';
 import {QueryCtrl} from 'app/plugins/sdk';
+import {PromCompleter} from './completer';
 
 class PrometheusQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
@@ -15,6 +16,7 @@ class PrometheusQueryCtrl extends QueryCtrl {
   formats: any;
   oldTarget: any;
   suggestMetrics: any;
+  getMetricsAutocomplete: any;
   linkToPrometheus: any;
 
   /** @ngInject */
@@ -36,24 +38,19 @@ class PrometheusQueryCtrl extends QueryCtrl {
       {text: 'Table', value: 'table'},
     ];
 
-    $scope.$on('typeahead-updated', () => {
-      this.$scope.$apply(() => {
-        this.target.expr += this.target.metric;
-        this.metric = '';
-        this.refreshMetricData();
-      });
-    });
-
-    // called from typeahead so need this
-    // here in order to ensure this ref
-    this.suggestMetrics = (query, callback) => {
-      console.log(this);
-      this.datasource.performSuggestQuery(query).then(callback);
-    };
-
     this.updateLink();
   }
 
+  getCompleter(query) {
+    return new PromCompleter(this.datasource);
+    // console.log('getquery);
+    // return this.datasource.performSuggestQuery(query).then(res => {
+    //   return res.map(item => {
+    //     return {word: item, type: 'metric'};
+    //   });
+    // });
+  }
+
   getDefaultFormat() {
     if (this.panelCtrl.panel.type === 'table') {
       return 'table';

public/app/system.conf.js

@@ -33,6 +33,7 @@ System.config({
     "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
     "d3": "vendor/d3/d3.js",
     "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
+    "ace": "vendor/npm/ace-builds/src-noconflict/ace"
   },
 
   packages: {
@@ -73,5 +74,9 @@ System.config({
       format: 'global',
       exports: 'Mousetrap'
     },
+    'vendor/npm/ace-builds/src-noconflict/ace.js': {
+      format: 'global',
+      exports: 'ace'
+    }
   }
 });

public/sass/_grafana.scss

@@ -77,6 +77,7 @@
 @import "components/row.scss";
 @import "components/json_explorer.scss";
 @import "components/collapse_box.scss";
+@import "components/code_editor.scss";
 
 // PAGES
 @import "pages/login";

public/sass/components/_code_editor.scss

+.gf-code-editor {
+  min-height: 2.60rem;
+  min-width: 20rem;
+  flex-grow: 1;
+  margin-right: 0.25rem;
+  visibility: hidden;
+
+  &.ace_editor {
+    @include font-family-monospace();
+    font-size: 1rem;
+    min-height: 2.60rem;
+
+    @include border-radius($input-border-radius-sm);
+    border: $input-btn-border-width solid $input-border-color;
+  }
+
+  &--theme-loaded {
+    visibility: visible;
+  }
+}
+
+.ace_editor.ace_autocomplete {
+  @include font-family-monospace();
+  font-size: 1rem;
+
+  // Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
+  // is used for overriding styles with the same CSS specificity.
+  background-color: $dropdownBackground !important;
+  color: $dropdownLinkColor !important;
+  border: 1px solid $dropdownBorder !important;
+  width: 320px !important;
+
+  .ace_scroller {
+    .ace_selected, .ace_active-line, .ace_line-hover {
+      color: $dropdownLinkColorHover;
+      background-color: $dropdownLinkBackgroundHover !important;
+    }
+
+    .ace_line-hover {
+      border-color: transparent;
+    }
+
+    .ace_completion-highlight {
+      color: $yellow;
+    }
+
+    .ace_rightAlignedText {
+      color: $text-muted;
+      z-index: 0;
+    }
+  }
+}
+
+$doc-font-size: $font-size-sm;
+
+.ace_tooltip.ace_doc-tooltip {
+  @include font-family-monospace();
+  font-size: $doc-font-size;
+
+  background-color: $popover-help-bg;
+  color: $popover-help-color;
+  background-image: none;
+  border: 1px solid $dropdownBorder;
+  padding: 0.5rem 1rem;
+
+  hr {
+    background-color: $popover-help-color;
+    margin: 0.5rem 0rem;
+  }
+
+  code {
+    padding: 0px 1px;
+    margin: 0px;
+  }
+}
+
+.ace_tooltip {
+  border-radius: 3px;
+}

public/test/test-main.js

@@ -41,6 +41,7 @@
       "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
       "d3": "vendor/d3/d3.js",
       "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
+      "ace": "vendor/npm/ace-builds/src-noconflict/ace",
     },
 
     packages: {
@@ -73,6 +74,10 @@
         format: 'global',
         exports: 'Mousetrap'
       },
+      'vendor/npm/ace-builds/src-noconflict/ace.js': {
+        format: 'global',
+        exports: 'ace'
+      },
     }
   });
 

tasks/options/copy.js

@@ -19,6 +19,7 @@ module.exports = function(config) {
       cwd: './node_modules',
       expand: true,
       src: [
+        'ace-builds/src-noconflict/**/*',
         'eventemitter3/*.js',
         'systemjs/dist/*.js',
         'es6-promise/**/*',

tasks/options/watch.js

@@ -21,7 +21,10 @@ module.exports = function(config, grunt) {
       return;
     }
 
-    gaze(config.srcDir + '/**/*', function(err, watcher) {
+    gaze([
+      config.srcDir + '/app/**/*',
+      config.srcDir + '/sass/**/*',
+    ], function(err, watcher) {
 
       console.log('Gaze watchers setup');