diff --git a/examples/nginx-app/.gitignore b/examples/nginx-app/.gitignore
new file mode 100644
index 00000000000..8c2c350441b
--- /dev/null
+++ b/examples/nginx-app/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+
+node_modules
+tmp/*
+npm-debug.log
+dist/*
+
diff --git a/examples/nginx-app/.jscs.json b/examples/nginx-app/.jscs.json
new file mode 100644
index 00000000000..dcf694dcc63
--- /dev/null
+++ b/examples/nginx-app/.jscs.json
@@ -0,0 +1,13 @@
+{
+ "disallowImplicitTypeConversion": ["string"],
+ "disallowKeywords": ["with"],
+ "disallowMultipleLineBreaks": true,
+ "disallowMixedSpacesAndTabs": true,
+ "disallowTrailingWhitespace": true,
+ "requireSpacesInFunctionExpression": {
+ "beforeOpeningCurlyBrace": true
+ },
+ "disallowSpacesInsideArrayBrackets": true,
+ "disallowSpacesInsideParentheses": true,
+ "validateIndentation": 2
+}
\ No newline at end of file
diff --git a/examples/nginx-app/.jshintrc b/examples/nginx-app/.jshintrc
new file mode 100644
index 00000000000..3725af83afc
--- /dev/null
+++ b/examples/nginx-app/.jshintrc
@@ -0,0 +1,36 @@
+{
+ "browser": true,
+ "esnext": true,
+
+ "bitwise":false,
+ "curly": true,
+ "eqnull": true,
+ "devel": true,
+ "eqeqeq": true,
+ "forin": false,
+ "immed": true,
+ "supernew": true,
+ "expr": true,
+ "indent": 2,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "noempty": true,
+ "undef": true,
+ "boss": true,
+ "trailing": true,
+ "laxbreak": true,
+ "laxcomma": true,
+ "sub": true,
+ "unused": true,
+ "maxdepth": 6,
+ "maxlen": 140,
+
+ "globals": {
+ "System": true,
+ "define": true,
+ "require": true,
+ "Chromath": false,
+ "setImmediate": true
+ }
+}
diff --git a/examples/nginx-app/Gruntfile.js b/examples/nginx-app/Gruntfile.js
new file mode 100644
index 00000000000..d36a4716f31
--- /dev/null
+++ b/examples/nginx-app/Gruntfile.js
@@ -0,0 +1,54 @@
+module.exports = function(grunt) {
+
+ require('load-grunt-tasks')(grunt);
+
+ grunt.loadNpmTasks('grunt-execute');
+ grunt.loadNpmTasks('grunt-contrib-clean');
+
+ grunt.initConfig({
+
+ clean: ["dist"],
+
+ copy: {
+ src_to_dist: {
+ cwd: 'src',
+ expand: true,
+ src: ['**/*', '!**/*.js', '!**/*.scss'],
+ dest: 'dist'
+ },
+ pluginDef: {
+ expand: true,
+ src: 'plugin.json',
+ dest: 'dist',
+ }
+ },
+
+ watch: {
+ rebuild_all: {
+ files: ['src/**/*', 'plugin.json'],
+ tasks: ['default'],
+ options: {spawn: false}
+ },
+ },
+
+ babel: {
+ options: {
+ sourceMap: true,
+ presets: ["es2015"],
+ plugins: ['transform-es2015-modules-systemjs', "transform-es2015-for-of"],
+ },
+ dist: {
+ files: [{
+ cwd: 'src',
+ expand: true,
+ src: ['**/*.js'],
+ dest: 'dist',
+ ext:'.js'
+ }]
+ },
+ },
+
+ });
+
+ grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'babel']);
+};
diff --git a/examples/nginx-app/module.js b/examples/nginx-app/module.js
deleted file mode 100644
index 9c1cccb2e52..00000000000
--- a/examples/nginx-app/module.js
+++ /dev/null
@@ -1,20 +0,0 @@
-define([
-], function() {
- 'use strict';
-
- function StreamPageCtrl() {}
- StreamPageCtrl.templateUrl = 'partials/stream.html';
-
- function LogsPageCtrl() {}
- LogsPageCtrl.templateUrl = 'partials/logs.html';
-
- function NginxConfigCtrl() {}
- NginxConfigCtrl.templateUrl = 'partials/config.html';
-
- return {
- ConfigCtrl: NginxConfigCtrl,
- StreamPageCtrl: StreamPageCtrl,
- LogsPageCtrl: LogsPageCtrl,
- };
-
-});
diff --git a/examples/nginx-app/package.json b/examples/nginx-app/package.json
new file mode 100644
index 00000000000..91c53734ec8
--- /dev/null
+++ b/examples/nginx-app/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "kentik-app",
+ "private": true,
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/raintank/kentik-app-poc.git"
+ },
+ "author": "",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/raintank/kentik-app-poc/issues"
+ },
+ "devDependencies": {
+ "grunt": "~0.4.5",
+ "babel": "~6.5.1",
+ "grunt-babel": "~6.0.0",
+ "grunt-contrib-copy": "~0.8.2",
+ "grunt-contrib-watch": "^0.6.1",
+ "grunt-contrib-uglify": "~0.11.0",
+ "grunt-systemjs-builder": "^0.2.5",
+ "load-grunt-tasks": "~3.2.0",
+ "grunt-execute": "~0.2.2",
+ "grunt-contrib-clean": "~0.6.0"
+ },
+ "dependencies": {
+ "babel-plugin-transform-es2015-modules-systemjs": "^6.5.0",
+ "babel-preset-es2015": "^6.5.0",
+ "lodash": "~4.0.0"
+ },
+ "homepage": "https://github.com/raintank/kentik-app-poc#readme"
+}
diff --git a/examples/nginx-app/panel/module.js b/examples/nginx-app/panel/module.js
deleted file mode 100644
index 9ccc5b6c962..00000000000
--- a/examples/nginx-app/panel/module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-define([
- 'app/plugins/sdk'
-], function(sdk) {
- 'use strict';
-
- var NginxPanel = (function(_super) {
- function NginxPanel($scope, $injector) {
- _super.call(this, $scope, $injector);
- }
-
- NginxPanel.template = '
nginx!
';
- NginxPanel.prototype = Object.create(_super.prototype);
- NginxPanel.prototype.constructor = NginxPanel;
-
- return NginxPanel;
- })(sdk.PanelCtrl);
-
- return {
- PanelCtrl: NginxPanel
- };
-});
diff --git a/examples/nginx-app/partials/config.html b/examples/nginx-app/partials/config.html
deleted file mode 100644
index cdd6b8d9b60..00000000000
--- a/examples/nginx-app/partials/config.html
+++ /dev/null
@@ -1 +0,0 @@
-nginx config
diff --git a/examples/nginx-app/partials/logs.html b/examples/nginx-app/partials/logs.html
deleted file mode 100644
index f6bef036395..00000000000
--- a/examples/nginx-app/partials/logs.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-Logs!
diff --git a/examples/nginx-app/partials/stream.html b/examples/nginx-app/partials/stream.html
deleted file mode 100644
index 092c36cc24c..00000000000
--- a/examples/nginx-app/partials/stream.html
+++ /dev/null
@@ -1 +0,0 @@
-streams!
diff --git a/examples/nginx-app/src/components/config.html b/examples/nginx-app/src/components/config.html
new file mode 100644
index 00000000000..c531ec36d76
--- /dev/null
+++ b/examples/nginx-app/src/components/config.html
@@ -0,0 +1,3 @@
+
+ Nginx config!
+
diff --git a/examples/nginx-app/src/components/config.js b/examples/nginx-app/src/components/config.js
new file mode 100644
index 00000000000..bb8f007b9bc
--- /dev/null
+++ b/examples/nginx-app/src/components/config.js
@@ -0,0 +1,6 @@
+
+export class NginxAppConfigCtrl {
+}
+NginxAppConfigCtrl.templateUrl = 'components/config.html';
+
+
diff --git a/examples/nginx-app/src/components/logs.html b/examples/nginx-app/src/components/logs.html
new file mode 100644
index 00000000000..ca215772bf5
--- /dev/null
+++ b/examples/nginx-app/src/components/logs.html
@@ -0,0 +1,3 @@
+
+ Logs page!
+
diff --git a/examples/nginx-app/src/components/logs.js b/examples/nginx-app/src/components/logs.js
new file mode 100644
index 00000000000..5b67290381b
--- /dev/null
+++ b/examples/nginx-app/src/components/logs.js
@@ -0,0 +1,6 @@
+
+export class LogsPageCtrl {
+}
+LogsPageCtrl.templateUrl = 'components/logs.html';
+
+
diff --git a/examples/nginx-app/src/components/stream.html b/examples/nginx-app/src/components/stream.html
new file mode 100644
index 00000000000..ad70ca4df50
--- /dev/null
+++ b/examples/nginx-app/src/components/stream.html
@@ -0,0 +1,3 @@
+
+ Stream page!
+
diff --git a/examples/nginx-app/src/components/stream.js b/examples/nginx-app/src/components/stream.js
new file mode 100644
index 00000000000..8684b36c64d
--- /dev/null
+++ b/examples/nginx-app/src/components/stream.js
@@ -0,0 +1,6 @@
+
+export class StreamPageCtrl {
+}
+StreamPageCtrl.templateUrl = 'components/stream.html';
+
+
diff --git a/examples/nginx-app/css/dark.css b/examples/nginx-app/src/css/dark.css
similarity index 100%
rename from examples/nginx-app/css/dark.css
rename to examples/nginx-app/src/css/dark.css
diff --git a/examples/nginx-app/css/light.css b/examples/nginx-app/src/css/light.css
similarity index 100%
rename from examples/nginx-app/css/light.css
rename to examples/nginx-app/src/css/light.css
diff --git a/examples/nginx-app/src/dashboards/dashboard.js b/examples/nginx-app/src/dashboards/dashboard.js
new file mode 100644
index 00000000000..794e2c5217b
--- /dev/null
+++ b/examples/nginx-app/src/dashboards/dashboard.js
@@ -0,0 +1,17 @@
+require([
+], function () {
+
+ function Dashboard() {
+
+ this.getInputs = function() {
+
+ };
+
+ this.buildDashboard = function() {
+
+ };
+ }
+
+ return Dashboard;
+});
+
diff --git a/examples/nginx-app/img/logo_large.png b/examples/nginx-app/src/img/logo_large.png
similarity index 100%
rename from examples/nginx-app/img/logo_large.png
rename to examples/nginx-app/src/img/logo_large.png
diff --git a/examples/nginx-app/img/logo_small.png b/examples/nginx-app/src/img/logo_small.png
similarity index 100%
rename from examples/nginx-app/img/logo_small.png
rename to examples/nginx-app/src/img/logo_small.png
diff --git a/examples/nginx-app/src/module.js b/examples/nginx-app/src/module.js
new file mode 100644
index 00000000000..b5aeecc6ccf
--- /dev/null
+++ b/examples/nginx-app/src/module.js
@@ -0,0 +1,9 @@
+import {LogsPageCtrl} from './components/logs';
+import {StreamPageCtrl} from './components/stream';
+import {NginxAppConfigCtrl} from './components/config';
+
+export {
+ NginxAppConfigCtrl as ConfigCtrl,
+ StreamPageCtrl,
+ LogsPageCtrl
+};
diff --git a/examples/nginx-app/src/panel/module.js b/examples/nginx-app/src/panel/module.js
new file mode 100644
index 00000000000..899586da81b
--- /dev/null
+++ b/examples/nginx-app/src/panel/module.js
@@ -0,0 +1,15 @@
+import {PanelCtrl} from 'app/plugins/sdk';
+
+class NginxPanelCtrl extends PanelCtrl {
+
+ constructor($scope, $injector) {
+ super($scope, $injector);
+ }
+
+}
+NginxPanelCtrl.template = 'nginx!
';
+
+export {
+ NginxPanelCtrl as PanelCtrl
+};
+
diff --git a/examples/nginx-app/panel/plugin.json b/examples/nginx-app/src/panel/plugin.json
similarity index 100%
rename from examples/nginx-app/panel/plugin.json
rename to examples/nginx-app/src/panel/plugin.json
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 2497732928b..85431964cd9 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -32,7 +32,7 @@ var panelTemplate = `