feat(plugins): made it possible to have relative plugin template urls

examples/nginx-app/module.js

@@ -3,13 +3,13 @@ define([
   'use strict';
 
   function StreamPageCtrl() {}
-  StreamPageCtrl.templateUrl = 'public/plugins/nginx-app/partials/stream.html';
+  StreamPageCtrl.templateUrl = 'partials/stream.html';
 
   function LogsPageCtrl() {}
-  LogsPageCtrl.templateUrl = 'public/plugins/nginx-app/partials/logs.html';
+  LogsPageCtrl.templateUrl = 'partials/logs.html';
 
   function NginxConfigCtrl() {}
-  NginxConfigCtrl.templateUrl = 'public/plugins/nginx-app/partials/config.html';
+  NginxConfigCtrl.templateUrl = 'partials/config.html';
 
   return {
     ConfigCtrl: NginxConfigCtrl,

examples/panel-boilerplate-es5/module.js

@@ -12,7 +12,7 @@ define([
     // BoilerPlatePanel.template = '<h2>boilerplate</h2>';
 
     // all panel static assets can be accessed via 'public/plugins/<plugin-id>/<file>
-    BoilerPlatePanel.templateUrl = 'public/plugins/panel-boilerplate-es5/panel.html';
+    BoilerPlatePanel.templateUrl = 'panel.html';
 
     BoilerPlatePanel.prototype = Object.create(_super.prototype);
     BoilerPlatePanel.prototype.constructor = BoilerPlatePanel;

pkg/api/dtos/apps.go

@@ -11,6 +11,7 @@ type AppSettings struct {
 	Enabled  bool                      `json:"enabled"`
 	Pinned   bool                      `json:"pinned"`
 	Module   string                    `json:"module"`
+	BaseUrl  string                    `json:"baseUrl"`
 	Info     *plugins.PluginInfo       `json:"info"`
 	Pages    []*plugins.AppPluginPage  `json:"pages"`
 	Includes []*plugins.AppIncludeInfo `json:"includes"`
@@ -23,6 +24,7 @@ func NewAppSettingsDto(def *plugins.AppPlugin, data *models.AppSettings) *AppSet
 		Name:     def.Name,
 		Info:     &def.Info,
 		Module:   def.Module,
+		BaseUrl:  def.BaseUrl,
 		Pages:    def.Pages,
 		Includes: def.Includes,
 	}

pkg/api/frontendsettings.go

@@ -122,6 +122,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
 	for _, panel := range enabledPlugins.Panels {
 		panels[panel.Id] = map[string]interface{}{
 			"module":  panel.Module,
+			"baseUrl": panel.BaseUrl,
 			"name":    panel.Name,
 			"id":      panel.Id,
 			"info":    panel.Info,

pkg/plugins/frontend_plugin.go

@@ -9,6 +9,7 @@ import (
 type FrontendPluginBase struct {
 	PluginBase
 	Module        string `json:"module"`
+	BaseUrl       string `json:"baseUrl"`
 	StaticRoot    string `json:"staticRoot"`
 	StaticRootAbs string `json:"-"`
 }
@@ -34,10 +35,12 @@ func (fp *FrontendPluginBase) handleModuleDefaults() {
 
 	if fp.StaticRoot != "" {
 		fp.Module = path.Join("plugins", fp.Id, "module")
+		fp.BaseUrl = path.Join("public/plugins", fp.Id)
 		return
 	}
 
 	fp.Module = path.Join("app/plugins", fp.Type, fp.Id, "module")
+	fp.BaseUrl = path.Join("public/app/plugins", fp.Type, fp.Id)
 }
 
 func evalRelativePluginUrlPath(pathStr string, pluginId string) string {

pkg/plugins/plugins.go

@@ -102,6 +102,10 @@ func (scanner *PluginScanner) walker(currentPath string, f os.FileInfo, err erro
 		return err
 	}
 
+	if f.Name() == "node_modules" {
+		return util.WalkSkipDir
+	}
+
 	if f.IsDir() {
 		return nil
 	}

public/app/core/directives/plugin_component.ts

@@ -23,7 +23,16 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     });
   }
 
+  function relativeTemplateUrlToAbs(templateUrl, baseUrl) {
+    if (!templateUrl) { return undefined; }
+    if (templateUrl.indexOf('public') === 0) { return templateUrl; }
+    return baseUrl + '/' + templateUrl;
+  }
+
   function getPluginComponentDirective(options) {
+    // handle relative template urls for plugin templates
+    options.Component.templateUrl = relativeTemplateUrlToAbs(options.Component.templateUrl, options.baseUrl);
+
     return function() {
       return {
         templateUrl: options.Component.templateUrl,
@@ -74,6 +83,10 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
         });
       }
 
+      if (panelInfo) {
+        PanelCtrl.templateUrl = relativeTemplateUrlToAbs(PanelCtrl.templateUrl, panelInfo.baseUrl);
+      }
+
       PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
         PanelCtrl.templateUrl = null;
         PanelCtrl.template = `<grafana-panel ctrl="ctrl">${template}</grafana-panel>`;
@@ -94,6 +107,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
 
           return System.import(ds.meta.module).then(dsModule => {
             return {
+              baseUrl: ds.meta.baseUrl,
               name: 'query-ctrl-' + ds.meta.id,
               bindings: {target: "=", panelCtrl: "=", datasource: "="},
               attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
@@ -111,6 +125,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
             }
 
             return {
+              baseUrl: ds.meta.baseUrl,
               name: 'query-options-ctrl-' + ds.meta.id,
               bindings: {panelCtrl: "="},
               attrs: {"panel-ctrl": "ctrl"},
@@ -123,6 +138,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
       case "annotations-query-ctrl": {
         return System.import(scope.currentDatasource.meta.module).then(function(dsModule) {
           return {
+            baseUrl: scope.currentDatasource.meta.baseUrl,
             name: 'annotations-query-ctrl-' + scope.currentDatasource.meta.id,
             bindings: {annotation: "=", datasource: "="},
             attrs: {"annotation": "currentAnnotation", datasource: "currentDatasource"},
@@ -134,6 +150,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
       case 'datasource-config-ctrl': {
         return System.import(scope.datasourceMeta.module).then(function(dsModule) {
           return {
+            baseUrl: scope.datasourceMeta.baseUrl,
             name: 'ds-config-' + scope.datasourceMeta.id,
             bindings: {meta: "=", current: "="},
             attrs: {meta: "datasourceMeta", current: "current"},
@@ -146,6 +163,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
         let appModel = scope.ctrl.appModel;
         return System.import(appModel.module).then(function(appModule) {
           return {
+            baseUrl: appModel.baseUrl,
             name: 'app-config-' + appModel.appId,
             bindings: {appModel: "=", appEditCtrl: "="},
             attrs: {"app-model": "ctrl.appModel", "app-edit-ctrl": "ctrl"},
@@ -158,6 +176,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
         let appModel = scope.ctrl.appModel;
         return System.import(appModel.module).then(function(appModule) {
           return {
+            baseUrl: appModel.baseUrl,
             name: 'app-page-' + appModel.appId + '-' + scope.ctrl.page.slug,
             bindings: {appModel: "="},
             attrs: {"app-model": "ctrl.appModel"},

public/app/plugins/datasource/cloudwatch/module.ts

@@ -4,11 +4,11 @@ import {CloudWatchDatasource} from './datasource';
 import {CloudWatchQueryCtrl} from './query_ctrl';
 
 class CloudWatchConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/config.html';
+  static templateUrl = 'partials/config.html';
 }
 
 class CloudWatchAnnotationsQueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html';
+  static templateUrl = 'partials/annotations.editor.html';
 }
 
 export {

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

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 export class CloudWatchQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
 
   aliasSyntax: string;
 

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

@@ -3,11 +3,11 @@ import {ElasticQueryCtrl} from './query_ctrl';
 import {ElasticConfigCtrl} from './config_ctrl';
 
 class ElasticQueryOptionsCtrl {
-  static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/query.options.html';
+  static templateUrl = 'partials/query.options.html';
 }
 
 class ElasticAnnotationsQueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html';
+  static templateUrl = 'partials/annotations.editor.html';
 }
 
 export {

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

@@ -8,7 +8,7 @@ import _ from 'lodash';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 export class ElasticQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
 
   esVersion: any;
   rawQueryOld: string;

public/app/plugins/datasource/grafana/module.ts

@@ -5,7 +5,7 @@ import {GrafanaDatasource} from './datasource';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 class GrafanaQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/grafana/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
 }
 
 export {

public/app/plugins/datasource/graphite/module.ts

@@ -2,15 +2,15 @@ import {GraphiteDatasource} from './datasource';
 import {GraphiteQueryCtrl} from './query_ctrl';
 
 class GraphiteConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/graphite/partials/config.html';
+  static templateUrl = 'partials/config.html';
 }
 
 class GraphiteQueryOptionsCtrl {
-  static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.options.html';
+  static templateUrl = 'partials/query.options.html';
 }
 
 class AnnotationsQueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/graphite/partials/annotations.editor.html';
+  static templateUrl = 'partials/annotations.editor.html';
 }
 
 export {

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

@@ -11,7 +11,7 @@ import {Parser} from './parser';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 export class GraphiteQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
 
   functions: any[];
   segments: any[];

public/app/plugins/datasource/influxdb/module.ts

@@ -2,15 +2,15 @@ import {InfluxDatasource} from './datasource';
 import {InfluxQueryCtrl} from './query_ctrl';
 
 class InfluxConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/influxdb/partials/config.html';
+  static templateUrl = 'partials/config.html';
 }
 
 class InfluxQueryOptionsCtrl {
-  static templateUrl = 'public/app/plugins/datasource/influxdb/partials/query.options.html';
+  static templateUrl = 'partials/query.options.html';
 }
 
 class InfluxAnnotationsQueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/influxdb/partials/annotations.editor.html';
+  static templateUrl = 'partials/annotations.editor.html';
 }
 
 export {

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

@@ -11,7 +11,7 @@ import queryPart from './query_part';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 export class InfluxQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/influxdb/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
 
   queryModel: InfluxQuery;
   queryBuilder: any;

public/app/plugins/datasource/opentsdb/module.ts

@@ -2,7 +2,7 @@ import {OpenTsDatasource} from './datasource';
 import {OpenTsQueryCtrl} from './query_ctrl';
 
 class OpenTsConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/opentsdb/partials/config.html';
+  static templateUrl = 'partials/config.html';
 }
 
 export {

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

@@ -5,7 +5,7 @@ import kbn from 'app/core/utils/kbn';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 export class OpenTsQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/opentsdb/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
   aggregators: any;
   fillPolicies: any;
   aggregator: any;

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

@@ -2,11 +2,11 @@ import {PrometheusDatasource} from './datasource';
 import {PrometheusQueryCtrl} from './query_ctrl';
 
 class PrometheusConfigCtrl {
-  static templateUrl = 'public/app/plugins/datasource/prometheus/partials/config.html';
+  static templateUrl = 'partials/config.html';
 }
 
 class PrometheusAnnotationsQueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/prometheus/partials/annotations.editor.html';
+  static templateUrl = 'annotations.editor.html';
 }
 
 export {

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

@@ -8,7 +8,7 @@ import * as dateMath from 'app/core/utils/datemath';
 import {QueryCtrl} from 'app/plugins/sdk';
 
 class PrometheusQueryCtrl extends QueryCtrl {
-  static templateUrl = 'public/app/plugins/datasource/prometheus/partials/query.editor.html';
+  static templateUrl = 'partials/query.editor.html';
 
   metric: any;
   resolutions: any;

public/app/plugins/panel/dashlist/module.ts

@@ -13,7 +13,7 @@ var panelDefaults = {
 };
 
 class DashListCtrl extends PanelCtrl {
-  static templateUrl = 'public/app/plugins/panel/dashlist/module.html';
+  static templateUrl = 'module.html';
 
   dashList: any[];
   modes: any[];

public/app/plugins/panel/graph/module.ts

@@ -82,7 +82,7 @@ var panelDefaults = {
 };
 
 class GraphCtrl extends MetricsPanelCtrl {
-  static templateUrl = 'public/app/plugins/panel/graph/module.html';
+  static templateUrl = 'module.html';
 
   hiddenSeries: any = {};
   seriesList: any = [];

public/app/plugins/panel/singlestat/module.ts

@@ -42,7 +42,7 @@ var panelDefaults = {
 };
 
 class SingleStatCtrl extends MetricsPanelCtrl {
-  static templateUrl = 'public/app/plugins/panel/singlestat/module.html';
+  static templateUrl = 'module.html';
 
   series: any[];
   data: any[];

public/app/plugins/panel/table/module.ts

@@ -38,7 +38,7 @@ var panelDefaults = {
 };
 
 class TablePanelCtrl extends MetricsPanelCtrl {
-  static templateUrl = 'public/app/plugins/panel/table/module.html';
+  static templateUrl = 'module.html';
 
   pageIndex: number;
   dataRaw: any;