diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 47c167c5689..6882a87da69 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -17,6 +17,7 @@ import "./directives/spectrum_picker";
import "./directives/tags";
import "./directives/topnav";
import "./directives/value_select_dropdown";
+import "./directives/give_focus";
import './jquery_extended';
import './partials';
diff --git a/public/app/core/directives/give_focus.ts b/public/app/core/directives/give_focus.ts
index 2d43b1c7d39..722cc4e5c10 100644
--- a/public/app/core/directives/give_focus.ts
+++ b/public/app/core/directives/give_focus.ts
@@ -2,7 +2,7 @@
import coreModule from '../core_module';
-coreModule.default.directive('giveFocus', function() {
+coreModule.directive('giveFocus', function() {
return function(scope, element, attrs) {
element.click(function(e) {
e.stopPropagation();
diff --git a/public/app/core/services/dynamic_directive_srv.ts b/public/app/core/services/dynamic_directive_srv.ts
index 71657c49d0d..80ddd774c22 100644
--- a/public/app/core/services/dynamic_directive_srv.ts
+++ b/public/app/core/services/dynamic_directive_srv.ts
@@ -28,7 +28,7 @@ class DynamicDirectiveSrv {
directiveInfo.fn.registered = true;
}
- this.addDirective(elem, directiveInfo.name, scope);
+ this.addDirective(elem, directiveInfo.name, directiveInfo.scope || scope);
}).catch(err => {
console.log('Plugin load:', err);
this.$rootScope.appEvent('alert-error', ['Plugin error', err.toString()]);
diff --git a/public/app/features/annotations/query_editor.ts b/public/app/features/annotations/query_editor.ts
index 6d4756ef766..387f17e1454 100644
--- a/public/app/features/annotations/query_editor.ts
+++ b/public/app/features/annotations/query_editor.ts
@@ -11,7 +11,6 @@ function annotationsQueryEditor(dynamicDirectiveSrv) {
},
watch: "datasource.type",
directive: scope => {
- console.log(scope.datasource);
return System.import(scope.datasource.meta.module).then(function(dsModule) {
return {
name: 'annotation-query-editor-' + scope.datasource.meta.id,
diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js
index da755ef65a9..ef3ea9b9b0f 100644
--- a/public/app/features/panel/all.js
+++ b/public/app/features/panel/all.js
@@ -5,4 +5,5 @@ define([
'./panel_helper',
'./solo_panel_ctrl',
'./panel_loader',
+ './query_editor',
], function () {});
diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js
index 2259a6d450b..b4c1a2d6a0f 100644
--- a/public/app/features/panel/panel_directive.js
+++ b/public/app/features/panel/panel_directive.js
@@ -23,37 +23,6 @@ function (angular, $) {
};
});
- module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
- return {
- restrict: 'E',
- link: function(scope, elem) {
- var editorScope;
-
- scope.$watch("panel.datasource", function() {
- var datasource = scope.target.datasource || scope.panel.datasource;
-
- datasourceSrv.get(datasource).then(function(ds) {
- if (editorScope) {
- editorScope.$destroy();
- elem.empty();
- }
-
- editorScope = scope.$new();
- editorScope.datasource = ds;
-
- if (!scope.target.refId) {
- scope.target.refId = 'A';
- }
-
- var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.id));
- elem.append(panelEl);
- $compile(panelEl)(editorScope);
- });
- });
- }
- };
- });
-
module.directive('panelResizer', function($rootScope) {
return {
restrict: 'E',
diff --git a/public/app/features/panel/query_editor.ts b/public/app/features/panel/query_editor.ts
new file mode 100644
index 00000000000..d86c2894bb5
--- /dev/null
+++ b/public/app/features/panel/query_editor.ts
@@ -0,0 +1,52 @@
+///
+
+import angular from 'angular';
+
+/** @ngInject */
+function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) {
+ return dynamicDirectiveSrv.create({
+ watch: "panel.datasource",
+ directive: scope => {
+ let datasource = scope.target.datasource || scope.panel.datasource;
+ let editorScope = null;
+
+ return datasourceSrv.get(datasource).then(ds => {
+ if (editorScope) {
+ editorScope.$destroy();
+ }
+
+ editorScope = scope.$new();
+ editorScope.datasource = ds;
+
+ return System.import(ds.meta.module).then(dsModule => {
+ return {
+ name: 'metrics-query-editor-' + ds.meta.id,
+ fn: dsModule.metricsQueryEditor,
+ scope: editorScope,
+ };
+ });
+ });
+ }
+ });
+}
+
+/** @ngInject */
+function metricsQueryOptions(dynamicDirectiveSrv, datasourceSrv) {
+ return dynamicDirectiveSrv.create({
+ watch: "panel.datasource",
+ directive: scope => {
+ return datasourceSrv.get(scope.panel.datasource).then(ds => {
+ return System.import(ds.meta.module).then(dsModule => {
+ return {
+ name: 'metrics-query-options-' + ds.meta.id,
+ fn: dsModule.metricsQueryOptions
+ };
+ });
+ });
+ }
+ });
+}
+
+angular.module('grafana.directives')
+ .directive('metricsQueryEditor', metricsQueryEditor)
+ .directive('metricsQueryOptions', metricsQueryOptions);
diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html
index 215bc2dd945..b5ff9f50327 100644
--- a/public/app/partials/metrics.html
+++ b/public/app/partials/metrics.html
@@ -1,8 +1,8 @@
-
-
+
+
@@ -26,7 +26,7 @@
-
+
diff --git a/public/app/plugins/datasource/elasticsearch/bucket_agg.js b/public/app/plugins/datasource/elasticsearch/bucket_agg.js
index 8f302d2b136..bda666b3602 100644
--- a/public/app/plugins/datasource/elasticsearch/bucket_agg.js
+++ b/public/app/plugins/datasource/elasticsearch/bucket_agg.js
@@ -8,6 +8,20 @@ function (angular, _, queryDef) {
var module = angular.module('grafana.directives');
+ module.directive('elasticBucketAgg', function() {
+ return {
+ templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucket_agg.html',
+ controller: 'ElasticBucketAggCtrl',
+ restrict: 'E',
+ scope: {
+ target: "=",
+ index: "=",
+ onChange: "&",
+ getFields: "&",
+ }
+ };
+ });
+
module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q, $rootScope) {
var bucketAggs = $scope.target.bucketAggs;
diff --git a/public/app/plugins/datasource/elasticsearch/metric_agg.js b/public/app/plugins/datasource/elasticsearch/metric_agg.js
index 60a84e01e19..02a60b885bb 100644
--- a/public/app/plugins/datasource/elasticsearch/metric_agg.js
+++ b/public/app/plugins/datasource/elasticsearch/metric_agg.js
@@ -8,6 +8,21 @@ function (angular, _, queryDef) {
var module = angular.module('grafana.directives');
+ module.directive('elasticMetricAgg', function() {
+ return {
+ templateUrl: 'app/plugins/datasource/elasticsearch/partials/metric_agg.html',
+ controller: 'ElasticMetricAggCtrl',
+ restrict: 'E',
+ scope: {
+ target: "=",
+ index: "=",
+ onChange: "&",
+ getFields: "&",
+ esVersion: '='
+ }
+ };
+ });
+
module.controller('ElasticMetricAggCtrl', function($scope, uiSegmentSrv, $q, $rootScope) {
var metricAggs = $scope.target.metrics;
diff --git a/public/app/plugins/datasource/elasticsearch/module.js b/public/app/plugins/datasource/elasticsearch/module.js
index 455c30860ee..171fa68308c 100644
--- a/public/app/plugins/datasource/elasticsearch/module.js
+++ b/public/app/plugins/datasource/elasticsearch/module.js
@@ -1,51 +1,19 @@
define([
- 'angular',
'./datasource',
'./edit_view',
'./bucket_agg',
'./metric_agg',
],
-function (angular, ElasticDatasource, editView) {
+function (ElasticDatasource, editView) {
'use strict';
- var module = angular.module('grafana.directives');
-
- module.directive('elasticMetricAgg', function() {
- return {
- templateUrl: 'app/plugins/datasource/elasticsearch/partials/metric_agg.html',
- controller: 'ElasticMetricAggCtrl',
- restrict: 'E',
- scope: {
- target: "=",
- index: "=",
- onChange: "&",
- getFields: "&",
- esVersion: '='
- }
- };
- });
-
- module.directive('elasticBucketAgg', function() {
- return {
- templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucket_agg.html',
- controller: 'ElasticBucketAggCtrl',
- restrict: 'E',
- scope: {
- target: "=",
- index: "=",
- onChange: "&",
- getFields: "&",
- }
- };
- });
-
- module.directive('metricQueryEditorElasticsearch', function() {
+ function metricsQueryEditor() {
return {controller: 'ElasticQueryCtrl', templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.editor.html'};
- });
+ }
- module.directive('metricQueryOptionsElasticsearch', function() {
+ function metricsQueryOptions() {
return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.options.html'};
- });
+ }
function annotationsQueryEditor() {
return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/annotations.editor.html'};
@@ -55,6 +23,8 @@ function (angular, ElasticDatasource, editView) {
Datasource: ElasticDatasource,
configView: editView.default,
annotationsQueryEditor: annotationsQueryEditor,
+ metricsQueryEditor: metricsQueryEditor,
+ metricsQueryOptions: metricsQueryOptions,
};
});
diff --git a/public/app/plugins/datasource/graphite/module.js b/public/app/plugins/datasource/graphite/module.js
index 44bd3879548..6d7592c421c 100644
--- a/public/app/plugins/datasource/graphite/module.js
+++ b/public/app/plugins/datasource/graphite/module.js
@@ -1,19 +1,16 @@
define([
- 'angular',
'./datasource',
],
-function (angular, GraphiteDatasource) {
+function (GraphiteDatasource) {
'use strict';
- var module = angular.module('grafana.directives');
-
- module.directive('metricQueryEditorGraphite', function() {
+ function metricsQueryEditor() {
return {controller: 'GraphiteQueryCtrl', templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html'};
- });
+ }
- module.directive('metricQueryOptionsGraphite', function() {
+ function metricsQueryOptions() {
return {templateUrl: 'app/plugins/datasource/graphite/partials/query.options.html'};
- });
+ }
function annotationsQueryEditor() {
return {templateUrl: 'app/plugins/datasource/graphite/partials/annotations.editor.html'};
@@ -27,5 +24,7 @@ function (angular, GraphiteDatasource) {
Datasource: GraphiteDatasource,
configView: configView,
annotationsQueryEditor: annotationsQueryEditor,
+ metricsQueryEditor: metricsQueryEditor,
+ metricsQueryOptions: metricsQueryOptions,
};
});