From c4ce3293a205192bbafe962cd01c83c6e17b7009 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 Jan 2016 14:37:04 +0100 Subject: [PATCH] feat(plugins): now solved all cases of loading plugin directives, now just have to upgrade all panels and data sources --- public/app/core/core.ts | 1 + public/app/core/directives/give_focus.ts | 2 +- .../core/services/dynamic_directive_srv.ts | 2 +- .../app/features/annotations/query_editor.ts | 1 - public/app/features/panel/all.js | 1 + public/app/features/panel/panel_directive.js | 31 ----------- public/app/features/panel/query_editor.ts | 52 +++++++++++++++++++ public/app/partials/metrics.html | 6 +-- .../datasource/elasticsearch/bucket_agg.js | 14 +++++ .../datasource/elasticsearch/metric_agg.js | 15 ++++++ .../datasource/elasticsearch/module.js | 44 +++------------- .../app/plugins/datasource/graphite/module.js | 15 +++--- 12 files changed, 102 insertions(+), 82 deletions(-) create mode 100644 public/app/features/panel/query_editor.ts 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, }; });