Merge branch 'react-poc'

package.json

@@ -10,6 +10,8 @@
     "url": "http://github.com/grafana/grafana.git"
   },
   "devDependencies": {
+    "@types/react": "^16.0.5",
+    "@types/react-dom": "^15.5.4",
     "autoprefixer": "^6.4.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.1",
@@ -48,7 +50,7 @@
     "mocha": "3.2.0",
     "phantomjs-prebuilt": "^2.1.14",
     "reflect-metadata": "0.1.8",
-    "rxjs": "^5.0.0-rc.5",
+    "rxjs": "^5.4.3",
     "sass-lint": "^1.10.2",
     "systemjs": "0.19.41",
     "zone.js": "^0.7.2"
@@ -60,6 +62,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@types/enzyme": "^2.8.8",
     "ace-builds": "^1.2.8",
     "eventemitter3": "^2.0.2",
     "gaze": "^1.1.2",
@@ -70,13 +73,17 @@
     "karma-sinon": "^1.0.5",
     "lodash": "^4.17.4",
     "mousetrap": "^1.6.0",
+    "ngreact": "^0.4.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.1",
     "remarkable": "^1.7.1",
     "sinon": "1.17.6",
     "systemjs-builder": "^0.15.34",
     "tether": "^1.4.0",
     "tether-drop": "https://github.com/torkelo/drop",
-    "tslint": "^5.1.0",
-    "typescript": "^2.2.2",
+    "tslint": "^5.7.0",
+    "typescript": "^2.5.2",
     "virtual-scroll": "^1.1.1"
   }
 }

public/app/app.ts

@@ -9,6 +9,7 @@ import 'angular-sanitize';
 import 'angular-dragdrop';
 import 'angular-bindonce';
 import 'angular-ui';
+import 'ngreact';
 
 import $ from 'jquery';
 import angular from 'angular';
@@ -84,6 +85,7 @@ export class GrafanaApp {
       'pasvaz.bindonce',
       'ui.bootstrap',
       'ui.bootstrap.tpls',
+      'react'
     ];
 
     var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];

public/app/core/components/CoolButton.tsx

@@ -0,0 +1,67 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import coreModule from '../core_module';
+
+export interface ICoolButtonProps {
+  count: number;
+}
+
+export interface ICoolButtonState {
+  count: number;
+}
+
+
+export class CoolButton extends React.Component<ICoolButtonProps, ICoolButtonState> {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {count: 1};
+  }
+
+  onClick() {
+    this.setState(prevState => ({
+      count: prevState.count + 1
+    }));
+    console.log(this.state.count);
+  }
+
+  render() {
+    return (
+      <div>
+        <h2 onClick={this.onClick.bind(this)}>Hello</h2>
+        <div>{this.state.count}</div>
+        <a href="/alerting">Go to alerting</a>
+      </div>
+    );
+  }
+}
+
+export interface Props {
+  fname: string;
+  onClick: () => void;
+}
+
+function SecondButton({fname, onClick}: Props) {
+  return (
+    <div className="hello">
+      <div className="greeting">
+        Hello {fname}
+      </div>
+      <div>
+        <button onClick={onClick}>button</button>
+      </div>
+    </div>
+  );
+}
+
+coreModule.directive('coolButton', function(reactDirective) {
+  return reactDirective(CoolButton);
+});
+
+coreModule.directive('secondButton', function(reactDirective) {
+  return reactDirective(SecondButton, [
+    ['fname', {watchDepth: 'value'}]
+  ]);
+});

public/app/core/components/PasswordStrength.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import coreModule from '../core_module';
+
+export interface IProps {
+  password: string;
+}
+
+export class PasswordStrength extends React.Component<IProps, any> {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let strengthText = "strength: strong like a bull.";
+    let strengthClass = "password-strength-good";
+
+    if (this.props.password.length < 4) {
+      strengthText = "strength: weak sauce.";
+      strengthClass = "password-strength-bad";
+    }
+
+    if (this.props.password.length <= 8) {
+      strengthText = "strength: you can do better.";
+      strengthClass = "password-strength-ok";
+    }
+
+    return (
+      <div className={`password-strength small ${strengthClass}`}>
+        <em>{strengthText}</em>
+      </div>
+    );
+  }
+}
+
+coreModule.directive('passwordStrength', function(reactDirective) {
+  return reactDirective(PasswordStrength, ['password']);
+});

public/app/core/components/collapse_box.ts

@@ -1,58 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import coreModule from 'app/core/core_module';
-
-const template = `
-<div class="collapse-box">
-  <div class="collapse-box__header">
-    <a class="collapse-box__header-title pointer" ng-click="ctrl.toggle()">
-      <span class="fa fa-fw fa-caret-right" ng-hide="ctrl.isOpen"></span>
-      <span class="fa fa-fw fa-caret-down" ng-hide="!ctrl.isOpen"></span>
-      {{ctrl.title}}
-    </a>
-    <div class="collapse-box__header-actions" ng-transclude="actions" ng-if="ctrl.isOpen"></div>
-  </div>
-  <div class="collapse-box__body" ng-transclude="body" ng-if="ctrl.isOpen">
-  </div>
-</div>
-`;
-
-export class CollapseBoxCtrl {
-  isOpen: boolean;
-  stateChanged: () => void;
-
-  /** @ngInject **/
-  constructor(private $timeout) {
-    this.isOpen = false;
-  }
-
-  toggle() {
-    this.isOpen = !this.isOpen;
-    this.$timeout(() => {
-      this.stateChanged();
-    });
-  }
-}
-
-export function collapseBox() {
-  return {
-    restrict: 'E',
-    template: template,
-    controller: CollapseBoxCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    scope: {
-      "title": "@",
-      "isOpen": "=?",
-      "stateChanged": "&"
-    },
-    transclude: {
-      'actions': '?collapseBoxActions',
-      'body': 'collapseBoxBody',
-    },
-    link: function(scope, elem, attrs) {
-    }
-  };
-}
-
-coreModule.directive('collapseBox', collapseBox);

public/app/core/components/scroll/scroll.ts

@@ -1,211 +0,0 @@
-// ///<reference path="../../headers/common.d.ts" />
-//
-// import _ from 'lodash';
-//
-// var objectAssign = require('object-assign');
-// var Emitter = require('tiny-emitter');
-// var Lethargy = require('lethargy').Lethargy;
-// var support = require('./support');
-// var clone = require('./clone');
-// var bindAll = require('bindall-standalone');
-// var EVT_ID = 'virtualscroll';
-//
-// var keyCodes = {
-//     LEFT: 37,
-//     UP: 38,
-//     RIGHT: 39,
-//     DOWN: 40
-// };
-//
-// function VirtualScroll(this: any, options) {
-//     _.bindAll(this, '_onWheel', '_onMouseWheel', '_onTouchStart', '_onTouchMove', '_onKeyDown');
-//
-//     this.el = window;
-//     if (options && options.el) {
-//         this.el = options.el;
-//         delete options.el;
-//     }
-//
-//     this.options = _.assign({
-//         mouseMultiplier: 1,
-//         touchMultiplier: 2,
-//         firefoxMultiplier: 15,
-//         keyStep: 120,
-//         preventTouch: false,
-//         unpreventTouchClass: 'vs-touchmove-allowed',
-//         limitInertia: false
-//     }, options);
-//
-//     if (this.options.limitInertia) this._lethargy = new Lethargy();
-//
-//     this._emitter = new Emitter();
-//     this._event = {
-//         y: 0,
-//         x: 0,
-//         deltaX: 0,
-//         deltaY: 0
-//     };
-//
-//     this.touchStartX = null;
-//     this.touchStartY = null;
-//     this.bodyTouchAction = null;
-// }
-//
-// VirtualScroll.prototype._notify = function(e) {
-//     var evt = this._event;
-//     evt.x += evt.deltaX;
-//     evt.y += evt.deltaY;
-//
-//    this._emitter.emit(EVT_ID, {
-//         x: evt.x,
-//         y: evt.y,
-//         deltaX: evt.deltaX,
-//         deltaY: evt.deltaY,
-//         originalEvent: e
-//    });
-// };
-//
-// VirtualScroll.prototype._onWheel = function(e) {
-//     var options = this.options;
-//     if (this._lethargy && this._lethargy.check(e) === false) return;
-//
-//     var evt = this._event;
-//
-//     // In Chrome and in Firefox (at least the new one)
-//     evt.deltaX = e.wheelDeltaX || e.deltaX * -1;
-//     evt.deltaY = e.wheelDeltaY || e.deltaY * -1;
-//
-//     // for our purpose deltamode = 1 means user is on a wheel mouse, not touch pad
-//     // real meaning: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent#Delta_modes
-//     if(support.isFirefox && e.deltaMode == 1) {
-//         evt.deltaX *= options.firefoxMultiplier;
-//         evt.deltaY *= options.firefoxMultiplier;
-//     }
-//
-//     evt.deltaX *= options.mouseMultiplier;
-//     evt.deltaY *= options.mouseMultiplier;
-//
-//     this._notify(e);
-// };
-//
-// VirtualScroll.prototype._onMouseWheel = function(e) {
-//     if (this.options.limitInertia && this._lethargy.check(e) === false) return;
-//
-//     var evt = this._event;
-//
-//     // In Safari, IE and in Chrome if 'wheel' isn't defined
-//     evt.deltaX = (e.wheelDeltaX) ? e.wheelDeltaX : 0;
-//     evt.deltaY = (e.wheelDeltaY) ? e.wheelDeltaY : e.wheelDelta;
-//
-//     this._notify(e);
-// };
-//
-// VirtualScroll.prototype._onTouchStart = function(e) {
-//     var t = (e.targetTouches) ? e.targetTouches[0] : e;
-//     this.touchStartX = t.pageX;
-//     this.touchStartY = t.pageY;
-// };
-//
-// VirtualScroll.prototype._onTouchMove = function(e) {
-//     var options = this.options;
-//     if(options.preventTouch
-//         && !e.target.classList.contains(options.unpreventTouchClass)) {
-//         e.preventDefault();
-//     }
-//
-//     var evt = this._event;
-//
-//     var t = (e.targetTouches) ? e.targetTouches[0] : e;
-//
-//     evt.deltaX = (t.pageX - this.touchStartX) * options.touchMultiplier;
-//     evt.deltaY = (t.pageY - this.touchStartY) * options.touchMultiplier;
-//
-//     this.touchStartX = t.pageX;
-//     this.touchStartY = t.pageY;
-//
-//     this._notify(e);
-// };
-//
-// VirtualScroll.prototype._onKeyDown = function(e) {
-//     var evt = this._event;
-//     evt.deltaX = evt.deltaY = 0;
-//
-//     switch(e.keyCode) {
-//         case keyCodes.LEFT:
-//         case keyCodes.UP:
-//             evt.deltaY = this.options.keyStep;
-//             break;
-//
-//         case keyCodes.RIGHT:
-//         case keyCodes.DOWN:
-//             evt.deltaY = - this.options.keyStep;
-//             break;
-//
-//         default:
-//             return;
-//     }
-//
-//     this._notify(e);
-// };
-//
-// VirtualScroll.prototype._bind = function() {
-//     if(support.hasWheelEvent) this.el.addEventListener('wheel', this._onWheel);
-//     if(support.hasMouseWheelEvent) this.el.addEventListener('mousewheel', this._onMouseWheel);
-//
-//     if(support.hasTouch) {
-//         this.el.addEventListener('touchstart', this._onTouchStart);
-//         this.el.addEventListener('touchmove', this._onTouchMove);
-//     }
-//
-//     if(support.hasPointer && support.hasTouchWin) {
-//         this.bodyTouchAction = document.body.style.msTouchAction;
-//         document.body.style.msTouchAction = 'none';
-//         this.el.addEventListener('MSPointerDown', this._onTouchStart, true);
-//         this.el.addEventListener('MSPointerMove', this._onTouchMove, true);
-//     }
-//
-//     if(support.hasKeyDown) document.addEventListener('keydown', this._onKeyDown);
-// };
-//
-// VirtualScroll.prototype._unbind = function() {
-//     if(support.hasWheelEvent) this.el.removeEventListener('wheel', this._onWheel);
-//     if(support.hasMouseWheelEvent) this.el.removeEventListener('mousewheel', this._onMouseWheel);
-//
-//     if(support.hasTouch) {
-//         this.el.removeEventListener('touchstart', this._onTouchStart);
-//         this.el.removeEventListener('touchmove', this._onTouchMove);
-//     }
-//
-//     if(support.hasPointer && support.hasTouchWin) {
-//         document.body.style.msTouchAction = this.bodyTouchAction;
-//         this.el.removeEventListener('MSPointerDown', this._onTouchStart, true);
-//         this.el.removeEventListener('MSPointerMove', this._onTouchMove, true);
-//     }
-//
-//     if(support.hasKeyDown) document.removeEventListener('keydown', this._onKeyDown);
-// };
-//
-// VirtualScroll.prototype.on = function(cb, ctx) {
-//   this._emitter.on(EVT_ID, cb, ctx);
-//
-//   var events = this._emitter.e;
-//   if (events && events[EVT_ID] && events[EVT_ID].length === 1) this._bind();
-// };
-//
-// VirtualScroll.prototype.off = function(cb, ctx) {
-//   this._emitter.off(EVT_ID, cb, ctx);
-//
-//   var events = this._emitter.e;
-//   if (!events[EVT_ID] || events[EVT_ID].length <= 0) this._unbind();
-// };
-//
-// VirtualScroll.prototype.reset = function() {
-//     var evt = this._event;
-//     evt.x = 0;
-//     evt.y = 0;
-// };
-//
-// VirtualScroll.prototype.destroy = function() {
-//     this._emitter.off();
-//     this._unbind();
-// };

public/app/core/components/wizard/wizard.html

@@ -1,32 +0,0 @@
-<div class="modal-body">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-cog fa-spin"></i>
-			<span class="p-l-1">{{model.name}}</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content">
-    <div ng-if="activeStep">
-
-    </div>
-
-		<!-- <table class="filter&#45;table"> -->
-		<!-- 	<tbody> -->
-		<!-- 		<tr ng&#45;repeat="step in model.steps"> -->
-		<!-- 			<td>{{step.name}}</td> -->
-		<!-- 			<td>{{step.status}}</td> -->
-		<!-- 			<td width="1%"> -->
-		<!-- 				<i class="fa fa&#45;check" style="color: #39A039"></i> -->
-		<!-- 			</td> -->
-		<!-- 		</tr> -->
-		<!-- 	</tbody> -->
-		<!-- </table> -->
-	</div>
-
-</div>
-

public/app/core/components/wizard/wizard.ts

@@ -1,73 +0,0 @@
-///<reference path="../../../headers/common.d.ts" />
-
-import config from 'app/core/config';
-import _ from 'lodash';
-import $ from 'jquery';
-
-import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
-
-export class WizardSrv {
-  /** @ngInject */
-  constructor() {
-  }
-}
-
-export interface WizardStep {
-  name: string;
-  type: string;
-  process: any;
-}
-
-export class SelectOptionStep {
-  type: string;
-  name: string;
-  fulfill: any;
-
-  constructor() {
-    this.type = 'select';
-  }
-
-  process() {
-    return new Promise((fulfill, reject) => {
-
-    });
-  }
-}
-
-export class WizardFlow {
-  name: string;
-  steps: WizardStep[];
-
-  constructor(name) {
-    this.name = name;
-    this.steps = [];
-  }
-
-  addStep(step) {
-    this.steps.push(step);
-  }
-
-  next(index) {
-    var step = this.steps[0];
-
-    return step.process().then(() => {
-      if (this.steps.length === index+1) {
-        return;
-      }
-
-      return this.next(index+1);
-    });
-  }
-
-  start() {
-    appEvents.emit('show-modal', {
-      src: 'public/app/core/components/wizard/wizard.html',
-      model: this
-    });
-
-    return this.next(0);
-  }
-}
-
-coreModule.service('wizardSrv', WizardSrv);

public/app/core/core.ts

@@ -35,7 +35,6 @@ import {layoutSelector} from './components/layout_selector/layout_selector';
 import {switchDirective} from './components/switch';
 import {dashboardSelector} from './components/dashboard_selector';
 import {queryPartEditorDirective} from './components/query_part/query_part_editor';
-import {WizardFlow} from './components/wizard/wizard';
 import {formDropdownDirective} from './components/form_dropdown/form_dropdown';
 import 'app/core/controllers/all';
 import 'app/core/services/all';
@@ -48,11 +47,10 @@ import {assignModelProperties} from './utils/model_utils';
 import {contextSrv} from './services/context_srv';
 import {KeybindingSrv} from './services/keybindingSrv';
 import {helpModal} from './components/help/help';
-import {collapseBox} from './components/collapse_box';
+import {PasswordStrength} from './components/PasswordStrength';
 import {JsonExplorer} from './components/json_explorer/json_explorer';
 import {NavModelSrv, NavModel} from './nav_model_srv';
 
-
 export {
   arrayJoin,
   coreModule,
@@ -69,15 +67,14 @@ export {
   appEvents,
   dashboardSelector,
   queryPartEditorDirective,
-  WizardFlow,
   colors,
   formDropdownDirective,
   assignModelProperties,
   contextSrv,
   KeybindingSrv,
   helpModal,
-  collapseBox,
   JsonExplorer,
   NavModelSrv,
   NavModel,
+  PasswordStrength,
 };

public/app/core/directives/password_strength.js

@@ -4,7 +4,7 @@ define([
 function (coreModule) {
   'use strict';
 
-  coreModule.default.directive('passwordStrength', function() {
+  coreModule.default.directive('passwordStrength2', function() {
     var template = '<div class="password-strength small" ng-if="!loginMode" ng-class="strengthClass">' +
       '<em>{{strengthText}}</em>' +
       '</div>';

public/app/core/specs/PasswordStrength_specs.tsx

@@ -0,0 +1,14 @@
+// import React from 'react';
+// import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
+// import {shallow} from 'enzyme';
+//
+// import {PasswordStrength} from '../components/PasswordStrength';
+//
+// describe('PasswordStrength', () => {
+//
+//   it.skip('should have class bad if length below 4', () => {
+//     const wrapper = shallow(<PasswordStrength password="asd" />);
+//     expect(wrapper.find(".password-strength-bad")).to.have.length(3);
+//   });
+// });
+//

public/app/headers/common.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="./es6-shim/es6-shim.d.ts" />
 
 declare var System: any;
 
@@ -53,11 +52,6 @@ declare module 'eventemitter3' {
   export default config;
 }
 
-declare module 'virtual-scroll' {
-  var config: any;
-  export default config;
-}
-
 declare module 'mousetrap' {
   var config: any;
   export default config;

public/app/partials/signup_step2.html

@@ -55,7 +55,7 @@
 					<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
 				</div>
 
-				<div style="margin-left: 7.5rem; width: 254px;">
+				<div style="margin-left: 9rem; width: 194px;">
 					<password-strength password="formModel.password"></password-strength>
 				</div>
 

public/app/system.conf.js

@@ -2,7 +2,9 @@ System.config({
   defaultJSExtenions: true,
   baseURL: 'public',
   paths: {
-    'virtual-scroll': 'vendor/npm/virtual-scroll/src/index.js',
+    'react': 'vendor/npm/react/dist/react.js',
+    'react-dom': 'vendor/npm/react-dom/dist/react-dom.js',
+    'ngreact': 'vendor/npm/ngreact/ngReact.js',
     'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
     'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
     'tether': 'vendor/npm/tether/dist/js/tether.js',

public/sass/_grafana.scss

@@ -76,7 +76,6 @@
 @import "components/edit_sidemenu.scss";
 @import "components/row.scss";
 @import "components/json_explorer.scss";
-@import "components/collapse_box.scss";
 @import "components/code_editor.scss";
 
 // PAGES

public/sass/components/_collapse_box.scss

@@ -1,46 +0,0 @@
-.collapse-box {
-  margin-bottom: $spacer;
-
-  &--error {
-    .collapse-box__header {
-      border-color: $collapse-box-body-error-border;
-    }
-    .collapse-box__body {
-      border-color: $collapse-box-body-error-border;
-    }
-  }
-
-}
-
-.collapse-box__header {
-  display: flex;
-  flex-direction: row;
-  padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
-  background-color: $input-label-bg;
-  font-size: $font-size-sm;
-  margin-right: $gf-form-margin;
-  border: $input-btn-border-width solid $collapse-box-body-border;
-  @include border-radius($label-border-radius-sm);
-}
-
-.collapse-box__header-title {
-  flex-grow: 1;
-}
-
-.collapse-box__body {
-  padding: $input-padding-y*2 $input-padding-x;
-  display: block;
-  margin-right: $gf-form-margin;
-  border: $input-btn-border-width solid $collapse-box-body-border;
-  border-top: none;
-  @include border-radius($label-border-radius-sm);
-}
-
-.collapse-box__header-actions {
-  display: flex;
-  flex-direction: row;
-  a {
-    margin-left: $spacer;
-  }
-}

public/test/test-main.js

@@ -10,6 +10,9 @@
     baseURL: '/base/',
     defaultJSExtensions: true,
     paths: {
+      'react': 'vendor/npm/react/dist/react.js',
+      'react-dom': 'vendor/npm/react-dom/dist/react-dom.js',
+      'ngreact': 'vendor/npm/ngreact/ngReact.js',
       'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
       'eventemitter3': 'vendor/npm/eventemitter3/index.js',
       'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
@@ -83,7 +86,7 @@
 
   function file2moduleName(filePath) {
     return filePath.replace(/\\/g, '/')
-    .replace(/^\/base\//, '')
+      .replace(/^\/base\//, '')
       .replace(/\.\w*$/, '');
   }
 
@@ -112,12 +115,12 @@
     // load specs
     return Promise.all(
       Object.keys(window.__karma__.files) // All files served by Karma.
-      .filter(onlySpecFiles)
-      .map(file2moduleName)
-      .map(function(path) {
-        // console.log(path);
-        return System.import(path);
-      }));
+        .filter(onlySpecFiles)
+        .map(file2moduleName)
+        .map(function(path) {
+          // console.log(path);
+          return System.import(path);
+        }));
   }).then(function()  {
     window.__karma__.start();
   }, function(error) {

tasks/options/copy.js

@@ -38,6 +38,9 @@ module.exports = function(config) {
         'remarkable/dist/*',
         'virtual-scroll/**/*',
         'mousetrap/**/*',
+        'react/dist/*.js',
+        'react-dom/dist/*.js',
+        'ngreact/ngReact.js',
       ],
       dest: '<%= srcDir %>/vendor/npm'
     }

tsconfig.json

@@ -5,19 +5,22 @@
         "outDir": "public_gen",
         "noImplicitAny": false,
         "target": "es5",
+        "lib": ["es6", "dom"],
         "rootDir": "public/",
         "module": "system",
+        "jsx": "react",
         "noEmitOnError": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "noImplicitReturns":false,
-        "noImplicitThis":false,
+        "noImplicitThis": false,
         "noImplicitUseStrict":false,
         "noUnusedLocals":false,
         "moduleResolution": "classic"
     },
     "include": [
         "public/app/**/*.ts",
+        "public/app/**/*.tsx",
         "public/test/**/*.ts"
     ],
     "exclude": [

yarn.lock

@@ -2,6 +2,27 @@
 # yarn lockfile v1
 
 
+"@types/cheerio@*":
+  version "0.22.2"
+  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.2.tgz#539625874bc856086ad491c2fdc9b10c05ae308e"
+
+"@types/enzyme@^2.8.8":
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-2.8.8.tgz#ddef76ac5435bb6d96c129b2b541d72c0ce75a41"
+  dependencies:
+    "@types/cheerio" "*"
+    "@types/react" "*"
+
+"@types/react-dom@^15.5.4":
+  version "15.5.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f"
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.0.5":
+  version "16.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.5.tgz#d713cf67cc211dea20463d2a0b66005c22070c4b"
+
 "JSV@>= 4.0.x":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
@@ -196,6 +217,10 @@ arrify@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
 
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
 asn1@~0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
@@ -767,16 +792,12 @@ commander@2.8.x:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@2.9.0, commander@2.9.x, commander@~2.9.0:
+commander@2.9.0, commander@2.9.x, commander@^2.8.1, commander@^2.9.0, commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.8.1, commander@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
 comment-parser@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-0.3.2.tgz#3c03f0776b86a36dfd9a0a2c97c6307f332082fe"
@@ -858,6 +879,10 @@ convert-source-map@~1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
 core-js@^2.2.0, core-js@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086"
@@ -877,6 +902,14 @@ crc@^3.4.4:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"
 
+create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -1106,6 +1139,12 @@ encodeurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
 
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
@@ -1449,6 +1488,18 @@ faye-websocket@~0.10.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fbjs@^0.8.9:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.15.tgz#4f0695fdfcc16c37c0b07facec8cb4c4091685b9"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -2202,7 +2253,7 @@ iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
-iconv-lite@0.4.15:
+iconv-lite@0.4.15, iconv-lite@~0.4.13:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
 
@@ -2463,6 +2514,13 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@0.1.x, isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -2911,7 +2969,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -3159,12 +3217,23 @@ ng-annotate@^1.2.1:
     stringset "~0.2.1"
     tryor "~0.1.2"
 
+ngreact@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/ngreact/-/ngreact-0.4.1.tgz#53d8f0db7c687c6daa340827a5ef04a903c14701"
+
 no-case@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-gyp@^3.3.1:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
@@ -3290,7 +3359,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -3578,6 +3647,12 @@ progress@^1.1.8, progress@~1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
 promised-io@0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/promised-io/-/promised-io-0.3.5.tgz#4ad217bb3658bcaae9946b17a8668ecd851e1356"
@@ -3592,6 +3667,13 @@ prompt@~0.2.14:
     utile "0.2.x"
     winston "0.8.x"
 
+prop-types@^15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -3656,6 +3738,32 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-dom@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
+react-test-renderer@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.1.tgz#026f4a5bb5552661fd2cc4bbcd0d4bc8a35ebf7e"
+  dependencies:
+    fbjs "^0.8.9"
+    object-assign "^4.1.0"
+
+react@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -3942,9 +4050,9 @@ rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
-rxjs@^5.0.0-rc.5:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.2.tgz#2a3236fcbf03df57bae06fd6972fd99e5c08fcf7"
+rxjs@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.3.tgz#0758cddee6033d68e0fd53676f0f3596ce3d483f"
   dependencies:
     symbol-observable "^1.0.1"
 
@@ -4017,6 +4125,10 @@ set-immediate-shim@^1.0.0, set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
 setprototypeof@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -4501,9 +4613,9 @@ tslib@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
 
-tslint@^5.1.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.5.0.tgz#10e8dab3e3061fa61e9442e8cee3982acf20a6aa"
+tslint@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.7.0.tgz#c25e0d0c92fa1201c2bc30e844e08e682b4f3552"
   dependencies:
     babel-code-frame "^6.22.0"
     colors "^1.1.2"
@@ -4514,11 +4626,11 @@ tslint@^5.1.0:
     resolve "^1.3.2"
     semver "^5.3.0"
     tslib "^1.7.1"
-    tsutils "^2.5.1"
+    tsutils "^2.8.1"
 
-tsutils@^2.5.1:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.0.tgz#0160173729b3bf138628dd14a1537e00851d814a"
+tsutils@^2.8.1:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.2.tgz#2c1486ba431260845b0ac6f902afd9d708a8ea6a"
   dependencies:
     tslib "^1.7.1"
 
@@ -4553,9 +4665,13 @@ typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@^2.2.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
+typescript@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"
+
+ua-parser-js@^0.7.9:
+  version "0.7.14"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
 uglify-js@2.6.x:
   version "2.6.4"
@@ -4736,6 +4852,10 @@ websocket-extensions@>=0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
 
+whatwg-fetch@>=0.10.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+
 when@^3.7.5:
   version "3.7.8"
   resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"