provide ace editor for external datasource plugin (#9224)

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

@@ -40,11 +40,11 @@ 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_MODULES = ['theme-grafana-dark'];
 const GRAFANA_MODULE_BASE = "public/app/core/components/code_editor/";
 
 // Trick for loading additional modules
-function setModuleUrl(moduleType, name) {
+function setModuleUrl(moduleType, name, pluginBaseUrl = null) {
   let baseUrl = ACE_SRC_BASE;
   let aceModeName = `ace/${moduleType}/${name}`;
   let moduleName = `${moduleType}-${name}`;
@@ -54,6 +54,10 @@ function setModuleUrl(moduleType, name) {
     baseUrl = GRAFANA_MODULE_BASE;
   }
 
+  if (pluginBaseUrl) {
+    baseUrl = pluginBaseUrl + '/';
+  }
+
   if (moduleType === 'snippets') {
     componentName = `${moduleType}/${name}.js`;
   }
@@ -159,8 +163,8 @@ function link(scope, elem, attrs) {
 
   function setLangMode(lang) {
     let aceModeName = `ace/mode/${lang}`;
-    setModuleUrl("mode", lang);
-    setModuleUrl("snippets", lang);
+    setModuleUrl("mode", lang, scope.datasource.meta.baseUrl || null);
+    setModuleUrl("snippets", lang, scope.datasource.meta.baseUrl || null);
     editorSession.setMode(aceModeName);
 
     ace.config.loadModule("ace/ext/language_tools", (language_tools) => {
@@ -210,6 +214,7 @@ export function codeEditorDirective() {
     template: editorTemplate,
     scope: {
       content: "=",
+      datasource: "=",
       codeEditorFocus: "<",
       onChange: "&",
       getCompleter: "&"

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

@@ -1,7 +1,7 @@
 <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">
-			<code-editor content="ctrl.target.expr" on-change="ctrl.refreshMetricData()"
+			<code-editor content="ctrl.target.expr" datasource="ctrl.datasource" on-change="ctrl.refreshMetricData()"
 				get-completer="ctrl.getCompleter()" data-mode="prometheus" code-editor-focus="ctrl.isLastQuery">
 			</code-editor>
 		</div>