Introduce first TypeScript file to project

ui/package.json

@@ -28,6 +28,12 @@
     }
   },
   "devDependencies": {
+    "@kadira/storybook": "^2.21.0",
+    "@types/chai": "^4.1.2",
+    "@types/lodash": "^4.14.104",
+    "@types/mocha": "^2.2.48",
+    "@types/node": "^9.4.6",
+    "@types/react": "^16.0.38",
     "autoprefixer": "^6.3.1",
     "babel-core": "^6.5.1",
     "babel-eslint": "6.1.2",
@@ -91,6 +97,8 @@
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.0",
     "testem": "^1.2.1",
+    "ts-loader": "^3.5.0",
+    "tslib": "^1.9.0",
     "uglify-js": "^2.6.1",
     "webpack": "^3.11.0",
     "webpack-dev-server": "^2.11.1"
@@ -131,6 +139,7 @@
     "redux-auth-wrapper": "^1.0.0",
     "redux-thunk": "^1.0.3",
     "rome": "^2.1.22",
+    "typescript": "^2.7.2",
     "updeep": "^0.13.0"
   }
 }

ui/src/data_explorer/components/CustomCell.js

@@ -1,29 +0,0 @@
-import React, {PropTypes} from 'react'
-import moment from 'moment'
-
-const CustomCell = ({data, columnName}) => {
-  if (columnName === 'time') {
-    const date = moment(new Date(data)).format('MM/DD/YY hh:mm:ssA')
-
-    return (
-      <span>
-        {date}
-      </span>
-    )
-  }
-
-  return (
-    <span>
-      {data}
-    </span>
-  )
-}
-
-const {number, oneOfType, string} = PropTypes
-
-CustomCell.propTypes = {
-  data: oneOfType([number, string]),
-  columnName: string.isRequired,
-}
-
-export default CustomCell

ui/tsconfig.json

@@ -18,34 +18,11 @@
     "importHelpers": true,
     "noLib": false,
     "noEmitHelpers": true,
-    "noEmit": true,
     "preserveConstEnums": true,
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "checkJs": false,
     "sourceMap": true,
-    "paths": {
-      "*": ["*"],
-      "src/*": ["src/*"],
-      "admin/*": ["src/admin/*"],
-      "alerts/*": ["src/alerts/*"],
-      "auth/*": ["src/auth/*"],
-      "dashboards/*": ["src/dashboards/*"],
-      "data_explorer/*": ["src/data_explorer/*"],
-      "external/*": ["src/external/*"],
-      "hosts/*": ["src/hosts/*"],
-      "influxql/*": ["src/influxql/*"],
-      "kapacitor/*": ["src/kapacitor/*"],
-      "normalizers/*": ["src/normalizers/*"],
-      "shared/*": ["src/shared/*"],
-      "side_nav/*": ["src/side_nav/*"],
-      "sources/*": ["src/sources/*"],
-      "status/*": ["src/status/*"],
-      "store/*": ["src/store/*"],
-      "style/*": ["src/style/*"],
-      "utils/*": ["src/utils/*"]
-    },
-    "exclude": ["./build/*", "./node_modules/*"]
   }
 }

ui/webpack/devConfig.js

@@ -10,10 +10,27 @@ const package = require('../package.json')
 const dependencies = package.dependencies
 
 const buildDir = path.resolve(__dirname, '../build')
+const babelLoader = {
+  loader: 'babel-loader',
+  options: {
+    cacheDirectory: true,
+    presets: [
+      'react',
+      [
+        'es2015',
+        {
+          modules: false,
+        },
+      ],
+      'es2016',
+    ],
+  },
+}
 
 module.exports = {
   watch: true,
-  devtool: 'source-map',
+  cache: true,
+  devtool: 'inline-eval-cheap-source-map',
   entry: {
     app: path.resolve(__dirname, '..', 'src', 'index.js'),
     vendor: Object.keys(dependencies),
@@ -30,6 +47,7 @@ module.exports = {
       style: path.resolve(__dirname, '..', 'src', 'style'),
       utils: path.resolve(__dirname, '..', 'src', 'utils'),
     },
+    extensions: ['.ts', '.tsx', '.js'],
   },
   module: {
     noParse: [
@@ -80,6 +98,16 @@ module.exports = {
           cacheDirectory: true, // use a cache directory to speed up compilation
         },
       },
+      {
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        use: [
+          babelLoader,
+          {
+            loader: 'ts-loader',
+          },
+        ],
+      },
     ],
   },
   plugins: [

ui/yarn.lock

@@ -12,6 +12,26 @@
     lodash.isequal "^4.5.0"
     prop-types "^15.5.4"
 
+"@types/chai@^4.1.2":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.2.tgz#f1af664769cfb50af805431c407425ed619daa21"
+
+"@types/lodash@^4.14.104":
+  version "4.14.104"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.104.tgz#53ee2357fa2e6e68379341d92eb2ecea4b11bb80"
+
+"@types/mocha@^2.2.48":
+  version "2.2.48"
+  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-2.2.48.tgz#3523b126a0b049482e1c3c11877460f76622ffab"
+
+"@types/node@^9.4.6":
+  version "9.4.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.6.tgz#d8176d864ee48753d053783e4e463aec86b8d82e"
+
+"@types/react@^16.0.38":
+  version "16.0.38"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.38.tgz#76617433ea10274505f60bb86eddfdd0476ffdc2"
+
 JSONStream@^1.0.3:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
@@ -1714,7 +1734,7 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.1.0, chalk@^2.3.1:
+chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
   dependencies:
@@ -2841,7 +2861,7 @@ engine.io@~3.1.0:
   optionalDependencies:
     uws "~9.14.0"
 
-enhanced-resolve@^3.4.0:
+enhanced-resolve@^3.0.0, enhanced-resolve@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
   dependencies:
@@ -7748,7 +7768,7 @@ sell@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/sell/-/sell-1.0.0.tgz#3baca7e51f78ddee9e22eea1ac747a6368bd1630"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.3.0, semver@^5.4.1:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
@@ -8687,6 +8707,20 @@ trim-right@^1.0.1:
   dependencies:
     glob "^6.0.4"
 
+ts-loader@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-3.5.0.tgz#151d004dcddb4cf8e381a3bf9d6b74c2d957a9c0"
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^3.0.0"
+    loader-utils "^1.0.2"
+    micromatch "^3.1.4"
+    semver "^5.0.1"
+
+tslib@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
+
 tsscmp@~1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.5.tgz#7dc4a33af71581ab4337da91d85ca5427ebd9a97"
@@ -8738,6 +8772,10 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+
 ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"