From cf98a16db09fe87b6ada6a41be02e8c8f9c446d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 9 Jan 2016 18:07:42 +0100 Subject: [PATCH] feat(plugins): made data source custom edit view into a directive instead of html path config in plugin.json --- public/app/core/services/datasource_srv.js | 1 + public/app/features/org/datasourceEditCtrl.js | 21 +------ .../features/org/partials/datasourceEdit.html | 2 +- public/app/features/panel/panel_directive.js | 56 +++++++---------- .../datasource/elasticsearch/datasource.d.ts | 2 +- .../datasource/elasticsearch/datasource.js | 5 +- .../datasource/elasticsearch/directives.js | 4 ++ .../datasource/elasticsearch/edit_view.ts | 38 ++++++++++++ .../datasource/elasticsearch/module.js | 60 +++++++++++++++++++ .../partials/{config.html => edit_view.html} | 4 +- .../datasource/elasticsearch/plugin.json | 9 +-- .../elasticsearch/specs/datasource_specs.ts | 2 +- .../plugins/datasource/graphite/plugin.json | 1 - .../graphite/specs/datasource_specs.ts | 2 +- 14 files changed, 134 insertions(+), 73 deletions(-) create mode 100644 public/app/plugins/datasource/elasticsearch/edit_view.ts create mode 100644 public/app/plugins/datasource/elasticsearch/module.js rename public/app/plugins/datasource/elasticsearch/partials/{config.html => edit_view.html} (96%) diff --git a/public/app/core/services/datasource_srv.js b/public/app/core/services/datasource_srv.js index 054504ec602..1f2b492ee93 100644 --- a/public/app/core/services/datasource_srv.js +++ b/public/app/core/services/datasource_srv.js @@ -60,6 +60,7 @@ function (angular, _, coreModule, config) { var deferred = $q.defer(); var pluginDef = dsConfig.meta; + console.log(pluginDef); System.import(pluginDef.module).then(function(plugin) { // check if its in cache now if (self.datasources[name]) { diff --git a/public/app/features/org/datasourceEditCtrl.js b/public/app/features/org/datasourceEditCtrl.js index b7f141f480e..5eadd9a07b1 100644 --- a/public/app/features/org/datasourceEditCtrl.js +++ b/public/app/features/org/datasourceEditCtrl.js @@ -15,20 +15,6 @@ function (angular, _, config) { var defaults = {name: '', type: 'graphite', url: '', access: 'proxy', jsonData: {}}; - $scope.indexPatternTypes = [ - {name: 'No pattern', value: undefined}, - {name: 'Hourly', value: 'Hourly', example: '[logstash-]YYYY.MM.DD.HH'}, - {name: 'Daily', value: 'Daily', example: '[logstash-]YYYY.MM.DD'}, - {name: 'Weekly', value: 'Weekly', example: '[logstash-]GGGG.WW'}, - {name: 'Monthly', value: 'Monthly', example: '[logstash-]YYYY.MM'}, - {name: 'Yearly', value: 'Yearly', example: '[logstash-]YYYY'}, - ]; - - $scope.esVersions = [ - {name: '1.x', value: 1}, - {name: '2.x', value: 2}, - ]; - $scope.init = function() { $scope.isNew = true; $scope.datasources = []; @@ -59,7 +45,7 @@ function (angular, _, config) { backendSrv.get('/api/datasources/' + id).then(function(ds) { $scope.isNew = false; $scope.current = ds; - $scope.typeChanged(); + return $scope.typeChanged(); }); }; @@ -127,11 +113,6 @@ function (angular, _, config) { } }; - $scope.indexPatternTypeChanged = function() { - var def = _.findWhere($scope.indexPatternTypes, {value: $scope.current.jsonData.interval}); - $scope.current.database = def.example || 'es-index-name'; - }; - $scope.init(); }); diff --git a/public/app/features/org/partials/datasourceEdit.html b/public/app/features/org/partials/datasourceEdit.html index 6ea33e5a43c..fda9acde58a 100644 --- a/public/app/features/org/partials/datasourceEdit.html +++ b/public/app/features/org/partials/datasourceEdit.html @@ -42,7 +42,7 @@
-
+
Testing....
diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index ef36d3a1a2a..504c5843004 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -43,28 +43,30 @@ function (angular, $, config) { }; }); - module.service('dynamicDirectiveSrv', function($compile, $parse, datasourceSrv) { - var self = this; + module.directive('datasourceCustomSettingsView', function($compile) { + return { + restrict: 'E', + scope: { + dsMeta: "=", + current: "=", + }, + link: function(scope, elem) { + scope.$watch("dsMeta.module", function() { + if (!scope.dsMeta) { + return; + } - this.addDirective = function(options, type, editorScope) { - var panelEl = angular.element(document.createElement(options.name + '-' + type)); - options.parentElem.append(panelEl); - $compile(panelEl)(editorScope); - }; - - this.define = function(options) { - var editorScope; - options.scope.$watch(options.datasourceProperty, function(newVal) { - if (editorScope) { - editorScope.$destroy(); - options.parentElem.empty(); - } - - editorScope = options.scope.$new(); - datasourceSrv.get(newVal).then(function(ds) { - self.addDirective(options, ds.meta.type, editorScope); + System.import(scope.dsMeta.module).then(function(module) { + console.log('datasourceCustomSettingsView', module); + var panelEl = angular.element(document.createElement('datasource-custom-settings-view-' + scope.dsMeta.id)); + elem.append(panelEl); + $compile(panelEl)(scope); + }).catch(function(err) { + console.log('Failed to load plugin:', err); + scope.appEvent('alert-error', ['Plugin Load Error', 'Failed to load plugin ' + scope.dsMeta.id + ', ' + err]); + }); }); - }); + } }; }); @@ -99,20 +101,6 @@ function (angular, $, config) { }; }); - module.directive('datasourceEditorView', function(dynamicDirectiveSrv) { - return { - restrict: 'E', - link: function(scope, elem, attrs) { - dynamicDirectiveSrv.define({ - datasourceProperty: attrs.datasource, - name: attrs.name, - scope: scope, - parentElem: elem, - }); - } - }; - }); - module.directive('panelResizer', function($rootScope) { return { restrict: 'E', diff --git a/public/app/plugins/datasource/elasticsearch/datasource.d.ts b/public/app/plugins/datasource/elasticsearch/datasource.d.ts index 4de8bcda15d..a50d7ca49cc 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.d.ts +++ b/public/app/plugins/datasource/elasticsearch/datasource.d.ts @@ -1,3 +1,3 @@ declare var Datasource: any; -export {Datasource}; +export default Datasource; diff --git a/public/app/plugins/datasource/elasticsearch/datasource.js b/public/app/plugins/datasource/elasticsearch/datasource.js index e8760a93cc8..da31c6b50bb 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.js +++ b/public/app/plugins/datasource/elasticsearch/datasource.js @@ -7,7 +7,6 @@ define([ './index_pattern', './elastic_response', './query_ctrl', - './directives' ], function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticResponse) { 'use strict'; @@ -305,7 +304,5 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes }; } - return { - Datasource: ElasticDatasource, - }; + return ElasticDatasource; }); diff --git a/public/app/plugins/datasource/elasticsearch/directives.js b/public/app/plugins/datasource/elasticsearch/directives.js index a7ad8f6dfbf..9246ca90039 100644 --- a/public/app/plugins/datasource/elasticsearch/directives.js +++ b/public/app/plugins/datasource/elasticsearch/directives.js @@ -20,6 +20,10 @@ function (angular) { return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/annotations.editor.html'}; }); + module.directive('datasourceCustomSettingsViewElasticsearch', function() { + return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/config.html'}; + }); + module.directive('elasticMetricAgg', function() { return { templateUrl: 'app/plugins/datasource/elasticsearch/partials/metric_agg.html', diff --git a/public/app/plugins/datasource/elasticsearch/edit_view.ts b/public/app/plugins/datasource/elasticsearch/edit_view.ts new file mode 100644 index 00000000000..8315a389953 --- /dev/null +++ b/public/app/plugins/datasource/elasticsearch/edit_view.ts @@ -0,0 +1,38 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; + +export class EditViewCtrl { + + constructor($scope) { + $scope.indexPatternTypes = [ + {name: 'No pattern', value: undefined}, + {name: 'Hourly', value: 'Hourly', example: '[logstash-]YYYY.MM.DD.HH'}, + {name: 'Daily', value: 'Daily', example: '[logstash-]YYYY.MM.DD'}, + {name: 'Weekly', value: 'Weekly', example: '[logstash-]GGGG.WW'}, + {name: 'Monthly', value: 'Monthly', example: '[logstash-]YYYY.MM'}, + {name: 'Yearly', value: 'Yearly', example: '[logstash-]YYYY'}, + ]; + + $scope.esVersions = [ + {name: '1.x', value: 1}, + {name: '2.x', value: 2}, + ]; + + $scope.indexPatternTypeChanged = function() { + var def = _.findWhere($scope.indexPatternTypes, {value: $scope.current.jsonData.interval}); + $scope.current.database = def.example || 'es-index-name'; + }; + } +} + +function editViewDirective() { + return { + templateUrl: 'app/plugins/datasource/elasticsearch/partials/edit_view.html', + controller: EditViewCtrl, + }; +}; + + +export default editViewDirective; diff --git a/public/app/plugins/datasource/elasticsearch/module.js b/public/app/plugins/datasource/elasticsearch/module.js new file mode 100644 index 00000000000..958eb3eb8e7 --- /dev/null +++ b/public/app/plugins/datasource/elasticsearch/module.js @@ -0,0 +1,60 @@ +define([ + 'angular', + './datasource', + './edit_view', + './bucket_agg', + './metric_agg', +], +function (angular, ElasticDatasource, editView) { + 'use strict'; + + var module = angular.module('grafana.directives'); + + module.directive('metricQueryEditorElasticsearch', function() { + return {controller: 'ElasticQueryCtrl', templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.editor.html'}; + }); + + module.directive('metricQueryOptionsElasticsearch', function() { + return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/query.options.html'}; + }); + + module.directive('annotationsQueryEditorElasticsearch', function() { + return {templateUrl: 'app/plugins/datasource/elasticsearch/partials/annotations.editor.html'}; + }); + + 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('datasourceCustomSettingsViewElasticsearch', editView.default); + + return { + Datasource: ElasticDatasource, + }; + +}); diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/edit_view.html similarity index 96% rename from public/app/plugins/datasource/elasticsearch/partials/config.html rename to public/app/plugins/datasource/elasticsearch/partials/edit_view.html index 595588c1be0..2f5b011d8cc 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/edit_view.html @@ -42,8 +42,8 @@
- +
Default query settings
@@ -53,7 +53,7 @@
  • + spellcheck='false' placeholder="example: >10s">
  • diff --git a/public/app/plugins/datasource/elasticsearch/plugin.json b/public/app/plugins/datasource/elasticsearch/plugin.json index c06f9e7ba99..fecdb3ae7cc 100644 --- a/public/app/plugins/datasource/elasticsearch/plugin.json +++ b/public/app/plugins/datasource/elasticsearch/plugin.json @@ -3,14 +3,7 @@ "name": "Elasticsearch", "id": "elasticsearch", - "serviceName": "ElasticDatasource", - - "module": "app/plugins/datasource/elasticsearch/datasource", - - "partials": { - "config": "app/plugins/datasource/elasticsearch/partials/config.html", - "annotations": "app/plugins/datasource/elasticsearch/partials/annotations.editor.html" - }, + "module": "app/plugins/datasource/elasticsearch/module", "defaultMatchFormat": "lucene", "annotations": true, diff --git a/public/app/plugins/datasource/elasticsearch/specs/datasource_specs.ts b/public/app/plugins/datasource/elasticsearch/specs/datasource_specs.ts index 88700838cc0..a7e6a642550 100644 --- a/public/app/plugins/datasource/elasticsearch/specs/datasource_specs.ts +++ b/public/app/plugins/datasource/elasticsearch/specs/datasource_specs.ts @@ -3,7 +3,7 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/co import moment from 'moment'; import angular from 'angular'; import helpers from 'test/specs/helpers'; -import {Datasource} from "../datasource"; +import Datasource from "../datasource"; describe('ElasticDatasource', function() { var ctx = new helpers.ServiceTestContext(); diff --git a/public/app/plugins/datasource/graphite/plugin.json b/public/app/plugins/datasource/graphite/plugin.json index 9a7360ba50a..d6f5f8475a4 100644 --- a/public/app/plugins/datasource/graphite/plugin.json +++ b/public/app/plugins/datasource/graphite/plugin.json @@ -3,7 +3,6 @@ "type": "datasource", "id": "graphite", - "serviceName": "GraphiteDatasource", "module": "app/plugins/datasource/graphite/datasource", "partials": { diff --git a/public/app/plugins/datasource/graphite/specs/datasource_specs.ts b/public/app/plugins/datasource/graphite/specs/datasource_specs.ts index 52ec58cf5bc..439e865bd43 100644 --- a/public/app/plugins/datasource/graphite/specs/datasource_specs.ts +++ b/public/app/plugins/datasource/graphite/specs/datasource_specs.ts @@ -5,7 +5,7 @@ import {Datasource} from "../datasource"; describe('graphiteDatasource', function() { var ctx = new helpers.ServiceTestContext(); - var instanceSettings: any = {url:['']}; + var instanceSettings: any = {url: ['']}; beforeEach(angularMocks.module('grafana.core')); beforeEach(angularMocks.module('grafana.services'));