feat(plugins): more work on plugin editors,prometheus query editor is working

public/app/core/directives/plugin_component.ts

@@ -35,8 +35,8 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
           return System.import(ds.meta.module).then(dsModule => {
             return {
               name: 'metrics-query-editor-' + ds.meta.id,
-              bindings: {target: "=", panelCtrl: "="},
-              attrs: {"target": "target", "panel-ctrl": "ctrl"},
+              bindings: {target: "=", panelCtrl: "=", datasource: "="},
+              attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
               Component: dsModule.MetricsQueryEditor
             };
           });

public/app/core/directives/plugin_directive_loader.ts

-///<reference path="../../headers/common.d.ts" />
-
-import angular from 'angular';
-import _ from 'lodash';
-
-import coreModule from '../core_module';
-
-/** @ngInject */
-function pluginComponentLoader($compile, datasourceSrv) {
-
-  function getPluginComponentDirective(options) {
-    return function() {
-      return {
-        templateUrl: options.Component.templateUrl,
-        restrict: 'E',
-        controller: options.Component,
-        controllerAs: 'ctrl',
-        bindToController: true,
-        scope: options.bindings,
-        link: (scope, elem, attrs, ctrl) => {
-          if (ctrl.link) {
-            ctrl.link(scope, elem, attrs, ctrl);
-          }
-        }
-      };
-    };
-  }
-
-  function getModule(scope, attrs) {
-    switch (attrs.type) {
-      case "metrics-query-editor":
-        let datasource = scope.target.datasource || scope.ctrl.panel.datasource;
-        return datasourceSrv.get(datasource).then(ds => {
-          if (!scope.target.refId) {
-            scope.target.refId = 'A';
-          }
-
-          return System.import(ds.meta.module).then(dsModule => {
-            return {
-              name: 'metrics-query-editor-' + ds.meta.id,
-              bindings: {target: "=", panelCtrl: "="},
-              attrs: {"target": "target", "panel-ctrl": "ctrl"},
-              Component: dsModule.MetricsQueryEditor
-            };
-          });
-        });
-      case 'datasource-config-view':
-        return System.import(scope.datasourceMeta.module).then(function(dsModule) {
-          return {
-            name: 'ds-config-' + scope.datasourceMeta.id,
-            bindings: {meta: "=", current: "="},
-            attrs: {meta: "datasourceMeta", current: "current"},
-            Component: dsModule.ConfigView,
-          };
-        });
-    }
-  }
-
-  function appendAndCompile(scope, elem, componentInfo) {
-    var child = angular.element(document.createElement(componentInfo.name));
-    _.each(componentInfo.attrs, (value, key) => {
-      child.attr(key, value);
-    });
-
-    $compile(child)(scope);
-
-    elem.empty();
-    elem.append(child);
-  }
-
-  function registerPluginComponent(scope, elem, attrs, componentInfo) {
-    if (!componentInfo.Component.registered) {
-      var directiveName = attrs.$normalize(componentInfo.name);
-      var directiveFn = getPluginComponentDirective(componentInfo);
-      coreModule.directive(directiveName, directiveFn);
-      componentInfo.Component.registered = true;
-    }
-
-    appendAndCompile(scope, elem, componentInfo);
-  }
-
-  return {
-    restrict: 'E',
-    link: function(scope, elem, attrs) {
-      getModule(scope, attrs).then(function (componentInfo) {
-        registerPluginComponent(scope, elem, attrs, componentInfo);
-      });
-    }
-  };
-}
-
-coreModule.directive('pluginComponent', pluginComponentLoader);

public/app/features/datasources/partials/edit.html

@@ -42,8 +42,8 @@
 			</div>
 
 			<div rebuild-on-change="datasourceMeta.id">
-				<plugin-directive-loader type="datasource-config-view">
-				</plugin-directive-loader>
+				<plugin-component type="datasource-config-view">
+				</plugin-component>
 			</div>
 
 			<div ng-if="testing" style="margin-top: 25px">

public/app/features/panel/query_editor.ts

@@ -9,9 +9,8 @@ export class QueryEditorCtrl {
   panelCtrl: any;
   panel: any;
 
-  constructor(private $scope, private $injector) {
+  constructor(public $scope, private $injector) {
     this.panel = this.panelCtrl.panel;
-    this.datasource = $scope.datasource;
 
     if (!this.target.refId) {
       this.target.refId = this.getNextQueryLetter();
@@ -44,8 +43,8 @@ export class QueryEditorCtrl {
     _.move(this.panel.targets, index, index + direction);
   }
 
-  toggleHideQuery(target) {
-    target.hide = !target.hide;
+  toggleHideQuery() {
+    this.target.hide = !this.target.hide;
     this.panelCtrl.refresh();
   }
 }

public/app/plugins/datasource/prometheus/partials/query.editor.html

 <div class="tight-form">
   <ul class="tight-form-list pull-right">
-    <li class="tight-form-item small" ng-show="target.datasource">
+    <li class="tight-form-item small" ng-show="ctrl.target.datasource">
       <em>{{ctrl.target.datasource}}</em>
     </li>
     <li class="tight-form-item">
@@ -27,7 +27,7 @@
       {{ctrl.target.refId}}
     </li>
     <li>
-      <a class="tight-form-item" ng-click="ctrl.toggleHideQuery(ctrl.target);" role="menuitem">
+      <a class="tight-form-item" ng-click="ctrl.toggleHideQuery();" role="menuitem">
         <i class="fa fa-eye"></i>
       </a>
     </li>
@@ -40,12 +40,12 @@
     <li>
       <input type="text"
              class="input-xxlarge tight-form-input"
-             ng-model="target.expr"
+             ng-model="ctrl.target.expr"
              spellcheck='false'
              placeholder="query expression"
              data-min-length=0 data-items=100
              ng-model-onblur
-             ng-change="refreshMetricData()">
+             ng-change="ctrl.refreshMetricData()">
     </li>
     <li class="tight-form-item">
       Metric
@@ -53,9 +53,9 @@
     <li>
       <input type="text"
              class="input-medium tight-form-input"
-             ng-model="target.metric"
+             ng-model="ctrl.target.metric"
              spellcheck='false'
-             bs-typeahead="suggestMetrics"
+             bs-typeahead="ctrl.suggestMetrics"
              placeholder="metric name"
              data-min-length=0 data-items=100>
     </li>
@@ -70,9 +70,9 @@
       Legend format
     </li>
     <li>
-      <input type="text" class="tight-form-input input-xxlarge" ng-model="target.legendFormat"
+      <input type="text" class="tight-form-input input-xxlarge" ng-model="ctrl.target.legendFormat"
              spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
-             ng-model-onblur ng-change="refreshMetricData()">
+             ng-model-onblur ng-change="ctrl.refreshMetricData()">
       </input>
     </li>
   </ul>
@@ -86,14 +86,14 @@
       Step
     </li>
     <li>
-      <input type="text" class="input-mini tight-form-input" ng-model="target.interval"
+      <input type="text" class="input-mini tight-form-input" ng-model="ctrl.target.interval"
              bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
              data-placement="right"
              spellcheck='false'
-             placeholder="{{interval}}"
+             placeholder="{{ctrl.panelCtrl.interval}}"
              data-min-length=0 data-items=100
              ng-model-onblur
-             ng-change="refreshMetricData()"
+             ng-change="ctrl.refreshMetricData()"
              />
       </input>
     </li>
@@ -102,13 +102,13 @@
       Resolution
     </li>
     <li>
-      <select ng-model="target.intervalFactor" class="tight-form-input input-mini"
-             ng-options="r.factor as r.label for r in resolutions"
-             ng-change="refreshMetricData()">
+      <select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
+             ng-options="r.factor as r.label for r in ctrl.resolutions"
+             ng-change="ctrl.refreshMetricData()">
       </select>
     </li>
     <li class="tight-form-item">
-      <a href="{{linkToPrometheus()}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
+      <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
         <i class="fa fa-share-square-o"></i>
       </a>
     </li>

public/app/plugins/datasource/prometheus/query_ctrl.ts

@@ -13,6 +13,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
   metric: any;
   resolutions: any;
   oldTarget: any;
+  suggestMetrics: any;
+  linkToPrometheus: any;
 
   constructor($scope, $injector, private templateSrv) {
     super($scope, $injector);
@@ -27,28 +29,33 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
     });
 
     $scope.$on('typeahead-updated', () => {
-      $scope.$apply(this.inputMetric);
+      this.$scope.$apply(() => {
+
+        this.target.expr += this.target.metric;
+        this.metric = '';
         this.refreshMetricData();
       });
+    });
+
+    // called from typeahead so need this
+    // here in order to ensure this ref
+    this.suggestMetrics = (query, callback) => {
+      console.log(this);
+      this.datasource.performSuggestQuery(query).then(callback);
+    };
+
+    this.updateLink();
   }
 
   refreshMetricData() {
     if (!_.isEqual(this.oldTarget, this.target)) {
       this.oldTarget = angular.copy(this.target);
       this.panelCtrl.refresh();
+      this.updateLink();
     }
   }
 
-  inputMetric() {
-    this.target.expr += this.target.metric;
-    this.metric = '';
-  }
-
-  suggestMetrics(query, callback) {
-    this.datasource.performSuggestQuery(query).then(callback);
-  }
-
-  linkToPrometheus() {
+  updateLink() {
     var range = this.panelCtrl.range;
     var rangeDiff = Math.ceil((range.to.valueOf() - range.from.valueOf()) / 1000);
     var endTime = range.to.utc().format('YYYY-MM-DD HH:mm');
@@ -61,8 +68,8 @@ class PrometheusQueryCtrl extends QueryEditorCtrl {
       tab: 0
     };
     var hash = encodeURIComponent(JSON.stringify([expr]));
-    return this.datasource.directUrl + '/graph#' + hash;
-  };
+    this.linkToPrometheus = this.datasource.directUrl + '/graph#' + hash;
+  }
 }
 
 export {PrometheusQueryCtrl};