tech(systemjs): ok, moving forward

public/app/app.ts

@@ -1,107 +1,4 @@
-///<reference path="headers/common.d.ts" />
 
-import 'bootstrap';
-import 'lodash-src';
-import 'angular-strap';
-import 'angular-route';
-import 'angular-sanitize';
-import 'angular-dragdrop';
-import 'angular-bindonce';
-import 'angular-ui';
-import 'app/core/core';
+import {GrafanaApp} from 'app/grafana_app';
 
-import _ = require('lodash');
-import $ = require('jquery');
-import bootstrap = require('bootstrap');
-import kbn = require('app/core/utils/kbn');
-import angular = require('angular');
-import config = require('app/core/config');
-
-import mod from 'app/core/core_module';
-console.log(mod);
-
-class GrafanaApp {
-  registerFunctions: any;
-  ngModuleDependencies: any[];
-  preBootModules: any[];
-
-  useModule(module) {
-    if (this.preBootModules) {
-      this.preBootModules.push(module);
-    } else {
-      _.extend(module, this.registerFunctions);
-    }
-    this.ngModuleDependencies.push(module.name);
-    return module;
-  }
-
-  init() {
-    this.registerFunctions = {};
-    this.preBootModules = [];
-
-    var app = angular.module('grafana', []);
-    app.constant('grafanaVersion', "@grafanaVersion@");
-
-    app.config(($locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) => {
-      console.log('app config');
-      this.registerFunctions.controller = $controllerProvider.register;
-      this.registerFunctions.directive  = $compileProvider.directive;
-      this.registerFunctions.factory    = $provide.factory;
-      this.registerFunctions.service    = $provide.service;
-      this.registerFunctions.filter     = $filterProvider.register;
-    });
-
-    this.ngModuleDependencies = [
-      'grafana.core',
-      'ngRoute',
-      'ngSanitize',
-      '$strap.directives',
-      'ang-drag-drop',
-      'grafana',
-      'pasvaz.bindonce',
-      'ui.bootstrap.tabs',
-    ];
-
-    var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];
-
-    _.each(module_types, type => {
-      var moduleName = 'grafana.' + type;
-      this.useModule(angular.module(moduleName, []));
-    });
-
-    //var preBootRequires = [System.import('app/features/all')];
-    var preBootRequires = [];
-    var pluginModules = config.bootData.pluginModules || [];
-
-    // add plugin modules
-    for (var i = 0; i < pluginModules.length; i++) {
-      preBootRequires.push(System.import(pluginModules[i]));
-    }
-
-    Promise.all(preBootRequires).then(() => {
-      // disable tool tip animation
-      //$.fn.tooltip.defaults.animation = false;
-      // bootstrap the app
-      angular.bootstrap(document, this.ngModuleDependencies).invoke(() => {
-        _.each(this.preBootModules, module => {
-          _.extend(module, this.registerFunctions);
-        });
-
-        this.preBootModules = null;
-      });
-    }).catch(function(err) {
-      console.log('Application boot failed:', err);
-    });
-  }
- }
-
- var grafanaApp = new GrafanaApp();
-
- export default {
-   init: function() {
-     grafanaApp.init();
-   },
-   useModule: function(m) {
-     grafanaApp.useModule(m);
-   }
- };
+export default new GrafanaApp();

public/app/core/core.ts

@@ -28,10 +28,4 @@ import * as routes from 'app/core/routes/all';
 // export * from './directives/give_focus'
 // export * from './filters/filters'
 
-import {Component} from 'vendor/npm/angular2/core';
-console.log(Component);
-
-//  console.log(Component);
-// // console.log(Component);
-
 export {arrayJoin, controllers, services, routes};

public/app/features/dashboard/timepicker/timepicker.ts

@@ -6,8 +6,8 @@ import _ = require('lodash');
 import moment = require('moment');
 import kbn = require('app/core/utils/kbn');
 
-import * as dateMath from '../../../core/utils/datemath';
-import * as rangeUtil from '../../../core/utils/rangeutil';
+import * as dateMath from 'app/core/utils/datemath';
+import * as rangeUtil from 'app/core/utils/rangeutil';
 
 declare var inputDate: any;
 

public/app/grafana_app.ts

@@ -0,0 +1,94 @@
+///<reference path="headers/common.d.ts" />
+
+import 'bootstrap';
+import 'lodash-src';
+import 'angular-strap';
+import 'angular-route';
+import 'angular-sanitize';
+import 'angular-dragdrop';
+import 'angular-bindonce';
+import 'angular-ui';
+import 'app/core/core';
+
+import _ = require('lodash');
+import $ = require('jquery');
+import bootstrap = require('bootstrap');
+import kbn = require('app/core/utils/kbn');
+import angular = require('angular');
+import config = require('app/core/config');
+
+export class GrafanaApp {
+  registerFunctions: any;
+  ngModuleDependencies: any[];
+  preBootModules: any[];
+
+  useModule(module) {
+    if (this.preBootModules) {
+      this.preBootModules.push(module);
+    } else {
+      _.extend(module, this.registerFunctions);
+    }
+    this.ngModuleDependencies.push(module.name);
+    return module;
+  }
+
+  init() {
+    this.registerFunctions = {};
+    this.preBootModules = [];
+
+    var app = angular.module('grafana', []);
+    app.constant('grafanaVersion', "@grafanaVersion@");
+
+    app.config(($locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) => {
+      console.log('app config');
+      this.registerFunctions.controller = $controllerProvider.register;
+      this.registerFunctions.directive  = $compileProvider.directive;
+      this.registerFunctions.factory    = $provide.factory;
+      this.registerFunctions.service    = $provide.service;
+      this.registerFunctions.filter     = $filterProvider.register;
+    });
+
+    this.ngModuleDependencies = [
+      'grafana.core',
+      'ngRoute',
+      'ngSanitize',
+      '$strap.directives',
+      'ang-drag-drop',
+      'grafana',
+      'pasvaz.bindonce',
+      'ui.bootstrap.tabs',
+    ];
+
+    var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];
+
+    _.each(module_types, type => {
+      var moduleName = 'grafana.' + type;
+      this.useModule(angular.module(moduleName, []));
+    });
+
+    //var preBootRequires = [System.import('app/features/all')];
+    var preBootRequires = [];
+    var pluginModules = config.bootData.pluginModules || [];
+
+    // add plugin modules
+    for (var i = 0; i < pluginModules.length; i++) {
+      preBootRequires.push(System.import(pluginModules[i]));
+    }
+
+    Promise.all(preBootRequires).then(() => {
+      // disable tool tip animation
+      $.fn.tooltip.defaults.animation = false;
+      // bootstrap the app
+      angular.bootstrap(document, this.ngModuleDependencies).invoke(() => {
+        _.each(this.preBootModules, module => {
+          _.extend(module, this.registerFunctions);
+        });
+
+        this.preBootModules = null;
+      });
+    }).catch(function(err) {
+      console.log('Application boot failed:', err);
+    });
+  }
+ }
+

public/views/index.html

@@ -60,10 +60,8 @@
 	<!-- build:js [[.AppSubUrl]]/public/app/app.js -->
 	<script src="[[.AppSubUrl]]/public/vendor/npm/es6-shim/es6-shim.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/es6-promise/dist/es6-promise.js"></script>
-	<script src="[[.AppSubUrl]]/public/vendor/npm/angular2/bundles/angular2-polyfills.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/systemjs/dist/system.src.js"></script>
 	<script src="[[.AppSubUrl]]/public/vendor/npm/rxjs/bundles/Rx.js"></script>
-	<script src="[[.AppSubUrl]]/public/vendor/npm/angular2/bundles/angular2.dev.js"></script>
 	<script src="[[.AppSubUrl]]/public/app/systemjs.conf.js"></script>
 	<!-- endbuild -->
 

tsconfig.json

@@ -1,15 +1,38 @@
 {
     "compilerOptions": {
-      "emitDecoratorMetadata": true,
-      "experimentalDecorators": true,
-      "sourceMap": true,
-      "declaration": true,
-      "outDir": "public_gen",
-      "noImplicitAny": false,
-      "target": "es5",
-      "rootDir": "public",
-      "module": "system",
-      "noEmitOnError": true,
-      "moduleResolution": "classic"
-    }
-}
+        "sourceMap": true,
+        "declaration": true,
+        "outDir": "public_gen",
+        "noImplicitAny": false,
+        "target": "es5",
+        "rootDir": "public/",
+        "module": "system",
+        "noEmitOnError": true,
+        "emitDecoratorMetadata": true
+    },
+    "files": [
+        "public/app/app.ts",
+        "public/app/core/controllers/grafana_ctrl.ts",
+        "public/app/core/controllers/signup_ctrl.ts",
+        "public/app/core/core.ts",
+        "public/app/core/core_module.ts",
+        "public/app/core/directives/array_join.ts",
+        "public/app/core/directives/give_focus.ts",
+        "public/app/core/filters/filters.ts",
+        "public/app/core/routes/bundle_loader.ts",
+        "public/app/core/table_model.ts",
+        "public/app/core/time_series.ts",
+        "public/app/core/utils/datemath.ts",
+        "public/app/core/utils/flatten.ts",
+        "public/app/core/utils/rangeutil.ts",
+        "public/app/features/dashboard/timepicker/timepicker.ts",
+        "public/app/features/panel/panel_meta.ts",
+        "public/app/plugins/datasource/influxdb/influx_query.ts",
+        "public/app/plugins/datasource/influxdb/query_part.ts",
+        "public/app/plugins/panels/table/controller.ts",
+        "public/app/plugins/panels/table/editor.ts",
+        "public/app/plugins/panels/table/module.ts",
+        "public/app/plugins/panels/table/renderer.ts",
+        "public/app/plugins/panels/table/transformers.ts"
+    ]
+}