feat(plugins): changed so that plugins can load css async via util function exposed from app/plugins/sdk

package.json

@@ -50,7 +50,7 @@
     "phantomjs": "^1.9.19",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "systemjs": "0.19.6",
+    "systemjs": "0.19.20",
     "zone.js": "0.5.10"
   },
   "engines": {
@@ -68,9 +68,9 @@
     "grunt-jscs": "~1.5.x",
     "grunt-sync": "^0.4.1",
     "karma-sinon": "^1.0.3",
-    "lodash": "^2.4.1",
+    "lodash": "^4.0.0",
     "sinon": "1.16.1",
-    "systemjs-builder": "^0.14.15",
+    "systemjs-builder": "^0.15.7",
     "tslint": "^3.2.1",
     "typescript": "^1.7.5"
   }

pkg/api/dtos/index.go

@@ -7,10 +7,7 @@ type IndexViewData struct {
 	AppSubUrl          string
 	GoogleAnalyticsId  string
 	GoogleTagManagerId string
-
-	PluginCss     []*PluginCss
-	PluginModules []string
-	MainNavLinks  []*NavLink
+	MainNavLinks       []*NavLink
 }
 
 type PluginCss struct {

pkg/api/index.go

@@ -81,10 +81,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 	}
 
 	for _, plugin := range enabledPlugins.Apps {
-		if plugin.Css != nil {
-			data.PluginCss = append(data.PluginCss, &dtos.PluginCss{Light: plugin.Css.Light, Dark: plugin.Css.Dark})
-		}
-
 		if plugin.Pinned {
 			pageLink := &dtos.NavLink{
 				Text: plugin.Name,

pkg/plugins/app_plugin.go

@@ -28,7 +28,6 @@ type AppIncludeInfo struct {
 
 type AppPlugin struct {
 	FrontendPluginBase
-	Css      *AppPluginCss     `json:"css"`
 	Pages    []*AppPluginPage  `json:"pages"`
 	Routes   []*AppPluginRoute `json:"routes"`
 	Includes []*AppIncludeInfo `json:"-"`
@@ -68,11 +67,6 @@ func (app *AppPlugin) Load(decoder *json.Decoder, pluginDir string) error {
 func (app *AppPlugin) initApp() {
 	app.initFrontendPlugin()
 
-	if app.Css != nil {
-		app.Css.Dark = evalRelativePluginUrlPath(app.Css.Dark, app.Id)
-		app.Css.Light = evalRelativePluginUrlPath(app.Css.Light, app.Id)
-	}
-
 	// check if we have child panels
 	for _, panel := range Panels {
 		if strings.HasPrefix(panel.PluginDir, app.PluginDir) {

public/app/plugins/sdk.ts

@@ -2,6 +2,16 @@ import {PanelCtrl} from 'app/features/panel/panel_ctrl';
 import {MetricsPanelCtrl} from 'app/features/panel/metrics_panel_ctrl';
 import {QueryCtrl} from 'app/features/panel/query_ctrl';
 
+import config from 'app/core/config';
+
+export function loadPluginCss(options) {
+  if (config.bootData.user.lightTheme) {
+    System.import(options.light + '!css');
+  } else {
+    System.import(options.dark + '!css');
+  }
+}
+
 export {
   PanelCtrl,
   MetricsPanelCtrl,

public/views/index.html

@@ -10,14 +10,8 @@
 
 		[[if .User.LightTheme]]
 		  <link rel="stylesheet" href="[[.AppSubUrl]]/public/css/grafana.light.min.css">
-		  [[ range $css := .PluginCss ]]
-			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css.Light ]]">
-		  [[ end ]]
 		[[else]]
 		  <link rel="stylesheet" href="[[.AppSubUrl]]/public/css/grafana.dark.min.css">
-		  [[ range $css := .PluginCss ]]
-			<link rel="stylesheet" href="[[$.AppSubUrl]]/[[ $css.Dark ]]">
-		  [[ end ]]
 		[[end]]
 
     <link rel="icon" type="image/png" href="[[.AppSubUrl]]/public/img/fav32.png">