feat(plugins): made data source custom edit view into a directive instead of…

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

@@ -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]) {

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();
 
   });

public/app/features/org/partials/datasourceEdit.html

@@ -42,7 +42,7 @@
 				<div class="clearfix"></div>
 			</div>
 
-			<div ng-include="datasourceMeta.partials.config" ng-if="datasourceMeta.partials.config"></div>
+			<datasource-custom-settings-view ds-meta="datasourceMeta" current="current"></datasource-custom-settings-view>
 
 			<div ng-if="testing" style="margin-top: 25px">
 				<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>

public/app/features/panel/panel_directive.js

@@ -43,28 +43,30 @@ function (angular, $, config) {
     };
   });
 
-  module.service('dynamicDirectiveSrv', function($compile, $parse, datasourceSrv) {
-    var self = this;
-
-    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();
+  module.directive('datasourceCustomSettingsView', function($compile) {
+    return {
+      restrict: 'E',
+      scope: {
+        dsMeta: "=",
+        current: "=",
+      },
+      link: function(scope, elem) {
+        scope.$watch("dsMeta.module", function() {
+          if (!scope.dsMeta) {
+            return;
           }
 
-        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',

public/app/plugins/datasource/elasticsearch/datasource.d.ts

 declare var Datasource: any;
-export {Datasource};
+export default Datasource;
 

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;
 });

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',

public/app/plugins/datasource/elasticsearch/edit_view.ts

+///<reference path="../../../headers/common.d.ts" />
+
+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;

public/app/plugins/datasource/elasticsearch/module.js

+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,
+  };
+
+});

public/app/plugins/datasource/elasticsearch/partials/config.html → public/app/plugins/datasource/elasticsearch/partials/edit_view.html

@@ -42,8 +42,8 @@
 	</ul>
 	<div class="clearfix"></div>
 </div>
-</div>
 
+<br>
 <h5>Default query settings</h5>
 
 <div class="tight-form last">

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,

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();

public/app/plugins/datasource/graphite/plugin.json

@@ -3,7 +3,6 @@
   "type": "datasource",
   "id": "graphite",
 
-  "serviceName": "GraphiteDatasource",
   "module": "app/plugins/datasource/graphite/datasource",
 
   "partials": {

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'));