provide ace editor for external datasource plugin (#9224)

This commit is contained in:
Mitsuhiro Tanda 2017-09-13 16:29:53 +09:00 committed by Torkel Ödegaard
parent dd67c9d420
commit b349b3ef55
4 changed files with 10 additions and 5 deletions

View File

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

View File

@ -1,7 +1,7 @@
<query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="false"> <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="false">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-form--grow"> <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"> get-completer="ctrl.getCompleter()" data-mode="prometheus" code-editor-focus="ctrl.isLastQuery">
</code-editor> </code-editor>
</div> </div>