chore(chronograf): new build configuration

.gitignore

@@ -1,8 +1,8 @@
-node_modules
 vendor
 .netrc
 .vscode
 .vs
+.tern-project
 
 # binary databases
 idpdb.bolt
@@ -16,3 +16,8 @@ idpdb.bolt
 /fluxd
 /transpilerd
 /bin
+
+chronograf/ui/node_modules
+chronograf/ui/yarn-error.log
+chronograf/ui/build
+chronograf/ui/.cache

chronograf/.gitignore

@@ -16,6 +16,7 @@ backup/
 .jssrc
 .dev-jssrc
 .bindata
+.eslintcache
 
 # Files
 chronograf*.db

chronograf/Makefile

@@ -83,7 +83,7 @@ endif
 ifndef YARN
 	$(error Please install yarn 0.19.1+)
 else
-	cd ui && yarn --no-progress --no-emoji
+	cd ui && yarn --no-progress
 	@touch .jsdep
 endif
 
@@ -92,7 +92,8 @@ gen: internal.pb.go
 internal.pb.go: bolt/internal/internal.proto
 	go generate -x ./bolt/internal
 
-test: jstest gotest gotestrace
+test: jstest jslint gotest gotestrace
+
 
 gotest:
 	go test -timeout 10s ./...
@@ -100,11 +101,12 @@ gotest:
 gotestrace:
 	go test -race ./...
 
+
 jstest:
 	cd ui && yarn test --runInBand
 
 jslint:
-	cd ui && yarn run lint:fix
+	cd ui && yarn run eslint && yarn run tslint && yarn run tsc # fail fast for ci process
 
 run: ${BINARY}
 	./chronograf
@@ -112,9 +114,6 @@ run: ${BINARY}
 run-dev: chronogiraffe
 	./chronograf -d --log-level=debug
 
-run-hmr:
-	cd ui && npm run start:hmr
-
 clean:
 	if [ -f ${BINARY} ] ; then rm ${BINARY} ; fi
 	cd ui && yarn run clean

chronograf/ui/.babelrc

@@ -3,8 +3,18 @@
     "syntax-trailing-function-commas",
     "transform-decorators-legacy",
     "transform-object-rest-spread",
+    "transform-class-properties",
     "transform-runtime",
-    "lodash"
+    "lodash",
+    ["module-resolver", {
+      "root": ["./src"],
+      "alias": {
+        "src": "./src",
+	"shared": "./src/shared",
+	"style": "./src/style",
+	"utils": "./src/utils"
+      }
+    }]
   ],
   "presets": ["env", "react", "stage-0"],
   "env": {

chronograf/ui/.gitignore

@@ -1,9 +0,0 @@
-node_modules/
-artifacts/
-spec/allSpecs.js
-dev/
-dist/
-bower_components/
-log/
-.tern-project
-yarn-error.log

chronograf/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chronograf-ui",
-  "version": "1.5.0-0",
+  "version": "2.0",
   "private": false,
   "license": "AGPL-3.0",
   "description": "",
@@ -9,32 +9,23 @@
     "url": "github:influxdata/chronograf"
   },
   "scripts": {
-    "build": "yarn run clean && webpack --config ./webpack/prod.config.js",
+    "start": "parcel watch -d build src/index.html",
-    "build:dev": "webpack --config ./webpack/dev.config.js",
+    "build": "parcel build -d build --no-source-maps src/index.html",
-    "build:vendor": "webpack --config webpack/vendor.config.js",
+    "clean": "rm -rf ./build/* && rm -rf ./.cache",
-    "start": "yarn run clean && yarn run build:vendor && webpack --watch --config ./webpack/dev.config.js",
-    "start:fast": "webpack --watch --config ./webpack/dev.config.js",
-    "start:hmr": "webpack-dev-server --open --config ./webpack/dev.config.js",
-    "lint": "esw src/",
     "test": "jest",
-    "test:lint": "yarn run lint; yarn run test",
     "test:watch": "jest --watch",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch",
-    "clean": "rm -rf ./build/*",
+    "lint": "yarn run eslint; yarn run tslint; yarn run tsc",
+    "eslint": "eslint src",
+    "eslint:watch": "esw src --watch --cache",
     "eslint:fix": "eslint src --fix",
+    "tslint": "tslint -c ./tslint.json '{src,test}/**/*.ts?(x)'",
     "tslint:fix": "tslint --fix -c ./tslint.json '{src,test}/**/*.ts?(x)'",
-    "prettier": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --semi false --write \"{src,spec}/**/*.js\"",
+    "tsc": "tsc -p ./tsconfig.json --noEmit --pretty",
-    "lint:fix": "yarn run prettier && yarn run eslint:fix && yarn run tslint:fix",
+    "tsc:watch": "tsc -p ./tsconfig.json --noEmit --pretty -w"
-    "eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check"
   },
   "author": "",
-  "eslintConfig": {
-    "env": {
-      "mocha": true
-    }
-  },
   "devDependencies": {
-    "@types/chai": "^4.1.2",
     "@types/chroma-js": "^1.3.4",
     "@types/codemirror": "^0.0.56",
     "@types/d3-color": "^1.2.1",
@@ -59,72 +50,44 @@
     "autoprefixer": "^6.3.1",
     "babel-core": "^6.5.1",
     "babel-eslint": "6.1.2",
-    "babel-loader": "^7.1.4",
     "babel-plugin-lodash": "^2.0.1",
+    "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.16.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.1",
     "babel-plugin-transform-runtime": "^6.5.0",
     "babel-polyfill": "^6.13.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.16.0",
     "babel-runtime": "^6.5.0",
-    "concurrently": "^3.5.0",
-    "core-js": "^2.1.3",
-    "css-loader": "^0.28.11",
-    "envify": "^3.4.0",
     "enzyme": "^3.3.0",
     "enzyme-to-json": "^3.3.4",
     "eslint": "^3.14.1",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-loader": "^2.0.0",
     "eslint-plugin-jest": "^21.12.2",
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "6.6.0",
     "eslint-watch": "^3.1.2",
     "express": "^4.14.0",
-    "file-loader": "^1.1.11",
+    "http-proxy-middleware": "^0.18.0",
-    "fork-ts-checker-webpack-plugin": "^0.4.2",
-    "hanson": "^1.1.1",
-    "html-webpack-include-assets-plugin": "^1.0.2",
-    "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^0.6.5",
     "jest": "^23.1.0",
     "jest-runner-eslint": "^0.6.0",
     "jest-runner-tslint": "^1.0.4",
     "jsdom": "^9.0.0",
-    "json-loader": "^0.5.7",
+    "node-sass": "^4.9.3",
-    "mini-css-extract-plugin": "^0.4.0",
+    "parcel": "^1.9.7",
-    "node-sass": "^4.5.3",
+    "prettier": "1.12.1",
-    "optimize-css-assets-webpack-plugin": "^4.0.2",
-    "postcss-browser-reporter": "^0.4.0",
-    "postcss-calc": "^5.2.0",
-    "postcss-loader": "^2.1.5",
-    "postcss-reporter": "^1.3.1",
-    "precss": "^1.4.0",
-    "prettier": "^1.11.1",
-    "progress-bar-webpack-plugin": "^1.11.0",
-    "resolve-url-loader": "^2.3.0",
-    "sass-loader": "^7.0.3",
-    "style-loader": "^0.21.0",
-    "thread-loader": "^1.1.5",
     "ts-jest": "^22.4.2",
-    "ts-loader": "^4.4.1",
     "tslib": "^1.9.0",
     "tslint": "^5.9.1",
     "tslint-config-prettier": "^1.10.0",
-    "tslint-loader": "^3.6.0",
     "tslint-plugin-prettier": "^1.3.0",
     "tslint-react": "^3.5.1",
-    "typescript": "^2.7.2",
+    "typescript": "2.7.2"
-    "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^4.12.0",
-    "webpack-bundle-analyzer": "^2.10.1",
-    "webpack-cli": "^3.0.3",
-    "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
     "axios": "^0.18.0",

chronograf/ui/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title>Chronograf</title>
+    <link rel="shortcut icon" href="../assets/images/favicon.ico" />
+  </head>
+  <body>
+    <div id='react-root' data-basepath=""></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

chronograf/ui/src/index.template.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-  <title>Chronograf</title>
-  <link rel="shortcut icon" href="../assets/images/favicon.ico" type="image/x-icon" />
-</head>
-
-<body>
-  <div id='react-root' data-basepath=""></div>
-</body>
-
-</html>

chronograf/ui/src/localStorage.ts

@@ -6,7 +6,7 @@ import {
 
 import {LocalStorage} from 'src/types/localStorage'
 
-declare const VERSION: string
+const VERSION = process.env.npm_package_version
 
 export const loadLocalStorage = (errorsQueue: any[]): LocalStorage | {} => {
   try {

chronograf/ui/src/side_nav/components/NavItems.tsx

@@ -75,7 +75,8 @@ class NavBlock extends PureComponent<NavBlockProps> {
     const children = React.Children.map(
       this.props.children,
       (child: ReactElement<any>) => {
-        if (child && child.type === NavListItem) {
+        // FIXME
+        if (child && String(child.type) === String(NavListItem)) {
           return React.cloneElement(child, {location})
         }
 

chronograf/ui/src/sources/containers/ManageSources.tsx

@@ -22,7 +22,7 @@ interface Props {
   removeAndLoadSources: sourcesActions.RemoveAndLoadSources
 }
 
-declare var VERSION: string
+const VERSION = process.env.npm_package_version
 
 @ErrorHandling
 class ManageSources extends PureComponent<Props> {

chronograf/ui/src/style/chronograf.scss

@@ -17,12 +17,11 @@
 @import 'theme/chronograf-theme';
 
 // Vendor
-@import 'external/react-grid-layout';
 @import 'external/fixed-data-table-base';
 @import 'external/fixed-data-table-style';
 @import 'external/fixed-data-table';
 @import 'external/codemirror';
-@import '../../node_modules/codemirror/theme/material.css';
+@import 'external/react-grid-layout';
 
 // Layout
 @import 'layout/page';
@@ -78,7 +77,6 @@
 
 // Pages
 @import 'pages/config-endpoints';
-@import 'pages/signup';
 @import 'pages/auth-page';
 @import 'pages/kapacitor';
 @import 'pages/dashboards';

chronograf/ui/src/style/components/drag-and-drop.scss

@@ -22,14 +22,14 @@ input[type='file'].drag-and-drop--input {
 }
 
 .drag-and-drop--graphic {
-  background-image: url(assets/images/drag-drop-icon.svg);
+  background-image: url('../../assets/images/drag-drop-icon.svg');
   background-size: 100% 100%;
   background-position: center center;
   width: 90px;
   height: 90px;
 
   &.success {
-    background-image: url(assets/images/drag-drop-icon--success.svg);
+    background-image: url('../../assets/images/drag-drop-icon--success.svg');
   }
 }
 

chronograf/ui/src/style/components/graph.scss

@@ -149,7 +149,7 @@ $graph-gutter: 16px;
 .graph-spinner {
   width: 121px !important;
   height: 121px !important;
-  background-image: url(assets/images/laser-spinner.png);
+  background-image: url('../../assets/images/laser-spinner.png');
   background-size: 100% 100%;
   background-position: center center;
   background-repeat: no-repeat;

chronograf/ui/src/style/components/write-data-form.scss

@@ -87,7 +87,7 @@ textarea.form-control.write-data-form--input {
   }
 }
 .write-data-form--graphic {
-  background-image: url(assets/images/drag-drop-icon.svg);
+  background-image: url('../../assets/images/drag-drop-icon.svg');
   background-size: 100% 100%;
   background-position: center center;
   width: 90px;
@@ -95,7 +95,7 @@ textarea.form-control.write-data-form--input {
   margin-bottom: 68px;
 
   &.write-data-form--graphic_success {
-    background-image: url(assets/images/drag-drop-icon--success.svg);
+    background-image: url('../../assets/images/drag-drop-icon--success.svg');
     margin-bottom: 0;
   }
 }

chronograf/ui/src/style/external/material.scss

@@ -0,0 +1,53 @@
+/*
+
+    Name:       material
+    Author:     Michael Kaminsky (http://github.com/mkaminsky11)
+
+    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
+
+*/
+
+.cm-s-material.CodeMirror {
+  background-color: #263238;
+  color: rgba(233, 237, 237, 1);
+}
+.cm-s-material .CodeMirror-gutters {
+  background: #263238;
+  color: rgb(83,127,126);
+  border: none;
+}
+.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
+.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
+.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
+
+.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
+.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); }
+.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
+.cm-s-material .cm-variable-2 { color: #80CBC4; }
+.cm-s-material .cm-variable-3, .cm-s-material .cm-type { color: #82B1FF; }
+.cm-s-material .cm-builtin { color: #DECB6B; }
+.cm-s-material .cm-atom { color: #F77669; }
+.cm-s-material .cm-number { color: #F77669; }
+.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
+.cm-s-material .cm-string { color: #C3E88D; }
+.cm-s-material .cm-string-2 { color: #80CBC4; }
+.cm-s-material .cm-comment { color: #546E7A; }
+.cm-s-material .cm-variable { color: #82B1FF; }
+.cm-s-material .cm-tag { color: #80CBC4; }
+.cm-s-material .cm-meta { color: #80CBC4; }
+.cm-s-material .cm-attribute { color: #FFCB6B; }
+.cm-s-material .cm-property { color: #80CBAE; }
+.cm-s-material .cm-qualifier { color: #DECB6B; }
+.cm-s-material .cm-variable-3, .cm-s-material .cm-type { color: #DECB6B; }
+.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
+.cm-s-material .cm-error {
+  color: rgba(255, 255, 255, 1.0);
+  background-color: #EC5F67;
+}
+.cm-s-material .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}

chronograf/ui/src/style/external/react-grid-layout.scss

@@ -1 +1,53 @@
-@import '~react-grid-layout/css/styles.css';
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top;
+}
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: red;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}

chronograf/ui/src/style/fonts/fonts.scss

@@ -2,43 +2,43 @@
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 200;
-  src: url('Roboto-Thin.ttf');
+  src: url('./fonts/Roboto-Thin.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: url('Roboto-Light.ttf');
+  src: url('./fonts/Roboto-Light.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url('Roboto-Regular.ttf');
+  src: url('./fonts/Roboto-Regular.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
-  src: url('Roboto-Medium.ttf');
+  src: url('./fonts/Roboto-Medium.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 600;
-  src: url('Roboto-Bold.ttf');
+  src: url('./fonts/Roboto-Bold.ttf');
 }
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: url('Roboto-Black.ttf');
+  src: url('./fonts/Roboto-Black.ttf');
 }
 @font-face {
   font-family: 'RobotoMono';
   font-style: normal;
   font-weight: 500;
-  src: url('RobotoMono-Medium.ttf');
+  src: url('./fonts/RobotoMono-Medium.ttf');
 }
 
 $default-font: 'Roboto', Helvetica, sans-serif;

chronograf/ui/src/style/fonts/icon-font.scss

@@ -7,12 +7,12 @@
 
 @font-face {
   font-family: 'icomoon';
-  src:    url('icomoon.eot');
+  src:    url('./fonts/icomoon.eot');
-  src:    url('icomoon.eot') format('embedded-opentype'),
+  src:    url('./fonts/icomoon.eot') format('embedded-opentype'),
-      url('icomoon.woff2') format('woff2'),
+      url('./fonts/icomoon.woff2') format('woff2'),
-      url('icomoon.ttf') format('truetype'),
+      url('./fonts/icomoon.ttf') format('truetype'),
-      url('icomoon.woff') format('woff'),
+      url('./fonts/icomoon.woff') format('woff'),
-      url('icomoon.svg') format('svg');
+      url('./fonts/icomoon.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }

chronograf/ui/src/style/pages/auth-page.scss

@@ -14,7 +14,7 @@
   padding: $sidebar--width;
 }
 .auth-image {
-  background-image: url(assets/images/auth-bg.svg);
+  background-image: url('../../assets/images/auth-bg.svg');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
@@ -66,7 +66,7 @@
   }
 }
 .auth-logo {
-  background-image: url(assets/images/auth-logo.svg);
+  background-image: url('../../assets/images/auth-logo.svg');
   background-size: 100% 100%;
   background-position: center center;
   background-repeat: no-repeat;

chronograf/ui/src/style/pages/signup.scss

@@ -1,212 +0,0 @@
-#signup-page {
-  padding: 100px 0;
-
-  // Progress indicator for admin signup
-  .signup-progress-circle {
-    margin-top: 20px;
-    display: inline-block;
-    width: 90px;
-    height: 90px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    line-height: 90px;
-    text-align: center;
-    font-weight: 300;
-    font-size: 22px;
-
-    &.step1of3 {
-      background-image: url(/assets/images/signup-progress-circle-1.svg);
-    }
-    &.step2of3 {
-      background-image: url(/assets/images/signup-progress-circle-2.svg);
-    }
-    &.step3of3 {
-      background-image: url(/assets/images/signup-progress-circle-3.svg);
-    }
-    &.step1of2 {
-      background-image: url(/assets/images/signup-progress-circle-1of2.svg);
-    }
-    &.step2of2 {
-      background-image: url(/assets/images/signup-progress-circle-2of2.svg);
-    }
-  }
-
-  // Custom Styles for "Next" buttons in signup flow
-  .btn.btn-next {
-    margin-top: 40px;
-    margin-bottom: 10px;
-
-    > span {
-      font-weight: 400;
-    }
-  }
-  
-  // Making the one panel in signup flow more spacious
-  .panel-body {
-    padding: 40px;
-  }
-
-  // Custom single-line form for inviting users
-  .user-invite-form {
-    display: flex;
-    align-items: center;
-
-    input[type="email"] {
-      flex: 6;
-      margin-left: 5px;
-    }
-    select {
-      flex: 3;
-    }
-    .btn {
-      flex: 1;
-      margin-left: 5px;
-    }
-  }
-  .role-description {
-    color: $g10-wolf;
-    margin-top: 8px;
-    margin-bottom: 40px;
-  }
-
-  // Invited Users Table
-  table.table.invited-users {
-    tbody tr td,
-    thead tr th {
-
-      text-align: right;
-
-      &:first-child {
-        text-align: left;
-        font-weight: 600;
-      }
-    }
-
-    tbody tr:last-child td {
-      border-bottom: 2px solid $g18-cloud;
-    }
-  }
-  // Custom style for uninviting users
-  a.uninvite-user {
-    color: $g13-mist;
-
-    &:hover {
-      color: $c-curacao;
-    }
-  }
-
-  .database-options-container {
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
-  }
-
-  #server {
-    margin-bottom: -2px;
-  }
-
-  .server-group {
-    .form-group {
-      margin-bottom: 1px;
-    }
-    display: flex;
-    align-items: center;
-
-    .btn {
-      margin-left: 10px;
-      align-self: flex-end;
-    }
-  }
-
-  .confirmation-group {
-    margin-top: 20px;
-  }
-
-  .invite-user-group {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-
-    .form-group.invite-user-email {
-      flex: none;
-      margin-bottom: 0;
-      width: 60%;
-    }
-
-    .btn-invite {
-      width: 15%;
-    }
-
-  }
-
-
-  .signup-progress {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 50%;
-    margin: auto;
-    border-radius: 50px;
-    border: none;
-    font-size: large;
-    margin-top: 20px;
-  }
-
-  .global-admin,
-  .setup-database,
-  .create-admin,
-  .create-login,
-  .access-info,
-  .create-cluster {
-    margin-top: 20px;
-    padding: 0 60px;
-    border: 1px solid #EEF0F2;
-    display: flex;
-    flex-direction: column;
-
-    .password-group {
-      display: flex;
-    }
-
-    .table-container {
-      max-height: 170px;
-      overflow-y: auto;
-    }
-
-    .server-table {
-      background-color: white;
-      margin-bottom: 0;
-    }
-
-    .confirmation-group {
-      display: flex;
-      justify-content: center;
-
-      .btn {
-        width: 200px;
-        margin-right: 10px;
-      }
-    }
-
-    .form-group {
-      flex: 1;
-    }
-
-    h1 {
-      text-align: center;
-    }
-
-    .copy {
-      align-self: center;
-      text-align: center;
-      background-color: white;
-      width: 100%;
-    }
-
-    .label.label-success,
-    .label.label-danger {
-      margin-right: 5px;
-    }
-  }
-}

chronograf/ui/tsconfig.json

@@ -1,22 +1,9 @@
 {
   "compilerOptions": {
-    "types": [
-      "node",
-      "chai",
-      "lodash",
-      "enzyme",
-      "react",
-      "prop-types",
-      "jest",
-      "react-router",
-      "text-encoding",
-      "react-dnd",
-      "react-dnd-html5-backend"
-    ],
     "target": "es6",
     "module": "es2015",
     "moduleResolution": "node",
-    "lib": ["es6", "es2017", "dom"],
+    "lib": ["es2017", "dom"],
     "skipLibCheck": true,
     "isolatedModules": false,
     "jsx": "react",
@@ -36,8 +23,7 @@
     "allowJs": true,
     "checkJs": false,
     "sourceMap": true,
-    "baseUrl": "./",
+    "baseUrl": "./"
-    "rootDir": "./src"
   },
-  "exclude": ["./assets/*", "./build/*", "./node_modules/*"]
+  "exclude": ["assets", "build", "node_modules"]
 }

chronograf/ui/webpack/dev.config.js

@@ -1,262 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
-const keys = require('lodash/keys')
-const difference = require('lodash/difference')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
-
-const buildDir = path.resolve(__dirname, '../build')
-
-const babelLoader = {
-  loader: 'babel-loader',
-  options: {
-    cacheDirectory: true,
-    presets: [
-      [
-        'env',
-        {
-          modules: false,
-        },
-      ],
-      'react',
-      'stage-0',
-    ],
-  },
-}
-
-const stats = {
-  colors: true,
-  children: false,
-  modules: false,
-  version: false,
-  assetsSort: '!size',
-  excludeAssets: [/\.(hot-update|woff|eot|ttf|svg|ico|png)/],
-}
-
-module.exports = {
-  mode: 'development',
-  stats,
-  optimization: {
-    concatenateModules: true,
-    splitChunks: {
-      cacheGroups: {
-        styles: {
-          name: 'chronograf',
-          test: /\.scss$/,
-          chunks: 'all',
-          enforce: true,
-        },
-      },
-    },
-  },
-  node: {
-    fs: 'empty',
-    module: 'empty',
-  },
-  watch: true,
-  cache: true,
-  devtool: 'eval-source-map',
-  entry: {
-    app: path.resolve(__dirname, '..', 'src', 'index.tsx'),
-  },
-  output: {
-    publicPath: '/',
-    path: path.resolve(__dirname, '../build'),
-    filename: '[name].[hash].dev.js',
-  },
-  resolve: {
-    alias: {
-      src: path.resolve(__dirname, '..', 'src'),
-      shared: path.resolve(__dirname, '..', 'src', 'shared'),
-      style: path.resolve(__dirname, '..', 'src', 'style'),
-      utils: path.resolve(__dirname, '..', 'src', 'utils'),
-    },
-    extensions: ['.ts', '.tsx', '.js'],
-  },
-  module: {
-    noParse: [
-      path.resolve(
-        __dirname,
-        '..',
-        'node_modules',
-        'memoizerific',
-        'memoizerific.js'
-      ),
-    ],
-    rules: [
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        loader: 'tslint-loader',
-        enforce: 'pre',
-        options: {
-          emitWarning: true,
-          configFile: path.resolve(__dirname, '..', 'tslint.json'),
-        },
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        options: {
-          emitWarning: true,
-        },
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-              plugins() {
-                return []
-              },
-            },
-          },
-          'sass-loader',
-          'resolve-url-loader',
-          'sass-loader?sourceMap',
-        ],
-      },
-      {
-        test: /\.(ico|png|cur|jpg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-        loader: 'file-loader',
-      },
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, '..', 'src'),
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'thread-loader',
-          },
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['env', 'react', 'stage-0'],
-              plugins: ['transform-decorators-legacy'],
-              cacheDirectory: true, // use a cache directory to speed up compilation
-            },
-          },
-        ],
-      },
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'thread-loader',
-            options: {
-              // there should be 1 cpu for the fork-ts-checker-webpack-plugin
-              workers: require('os').cpus().length - 1,
-            },
-          },
-          babelLoader,
-          {
-            loader: 'ts-loader',
-            options: {
-              happyPackMode: true, // required for use with thread-loader
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new ProgressBarPlugin(),
-    new webpack.DllReferencePlugin({
-      context: process.cwd(),
-      manifest: require('../build/vendor.dll.json'),
-    }),
-    new ForkTsCheckerWebpackPlugin({
-      checkSyntacticErrors: true,
-    }),
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        postcss: require('./postcss'),
-        sassLoader: {
-          includePaths: [path.resolve(__dirname, 'node_modules')],
-        },
-        eslint: {
-          failOnWarning: false,
-          failOnError: false,
-        },
-      },
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, '..', 'src', 'index.template.html'),
-      inject: 'body',
-      favicon: 'assets/images/favicon.ico',
-    }),
-    new HtmlWebpackIncludeAssetsPlugin({
-      assets: ['vendor.dll.js'],
-      append: false,
-    }),
-    new webpack.DefinePlugin({
-      VERSION: JSON.stringify(require('../package.json').version),
-    }),
-    {
-      apply: compiler => {
-        compiler.hooks.afterEmit.tap('AfterEmitPlugin', compilation => {
-          const newlyCreatedAssets = compilation.assets
-          fs.readdir(buildDir, (readdirErr, buildDirFiles) => {
-            if (readdirErr) {
-              console.error('webpack build directory error')
-              return
-            }
-
-            const assetFileNames = keys(newlyCreatedAssets)
-            const filesToRemove = difference(buildDirFiles, assetFileNames)
-
-            for (const file of filesToRemove) {
-              if (file.includes('dll')) {
-                return
-              }
-
-              const ext = path.extname(file)
-              if (['.js', '.json', '.map'].includes(ext)) {
-                fs.unlink(path.join(buildDir, file), unlinkErr => {
-                  if (unlinkErr) {
-                    console.error('webpack cleanup error', unlinkErr)
-                  }
-                })
-              }
-            }
-          })
-        })
-      },
-    },
-  ],
-  target: 'web',
-  devServer: {
-    stats,
-    hot: true,
-    historyApiFallback: true,
-    clientLogLevel: 'info',
-    contentBase: 'build',
-    quiet: false,
-    watchOptions: {
-      aggregateTimeout: 300,
-      poll: 1000,
-    },
-    proxy: {
-      '/v2': {
-        target: 'http://localhost:9999',
-        secure: false,
-      },
-    },
-  },
-}

chronograf/ui/webpack/postcss.js

@@ -1,13 +0,0 @@
-/* eslint-disable */
-
-var precss = require('precss');
-var autoprefixer = require('autoprefixer');
-var calc = require('postcss-calc');
-var consoleReporter = require('postcss-reporter');
-var browserReporter = require('postcss-browser-reporter');
-
-module.exports = function() {
-  return {
-    defaults: [precss, autoprefixer, calc, consoleReporter, browserReporter],
-  };
-};

chronograf/ui/webpack/prod.config.js

@@ -1,180 +0,0 @@
-const webpack = require('webpack')
-const path = require('path')
-const get = require('lodash/get')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
-
-const pkg = require('../package.json')
-const dependencies = pkg.dependencies
-
-const babelLoader = {
-  loader: 'babel-loader',
-  options: {
-    cacheDirectory: false,
-    presets: [['env', {modules: false}], 'react', 'stage-0'],
-    plugins: ['transform-decorators-legacy'],
-  },
-}
-
-const config = {
-  mode: 'production',
-  stats: 'errors-only',
-  optimization: {
-    concatenateModules: true,
-    splitChunks: {
-      name: 'vendor',
-      minChunks: 2,
-    },
-    minimizer: [
-      new UglifyJsPlugin({
-        parallel: true,
-        sourceMap: true,
-        uglifyOptions: {
-          ie8: false,
-        },
-      }),
-      new OptimizeCSSAssetsPlugin({}),
-    ],
-  },
-  node: {
-    fs: 'empty',
-    module: 'empty',
-  },
-  bail: true,
-  devtool: false,
-  entry: {
-    app: path.resolve(__dirname, '..', 'src', 'index.tsx'),
-    vendor: Object.keys(dependencies),
-  },
-  output: {
-    publicPath: '/',
-    path: path.resolve(__dirname, '../build'),
-    filename: '[name].[chunkhash].js',
-  },
-  resolve: {
-    alias: {
-      app: path.resolve(__dirname, '..', 'app'),
-      src: path.resolve(__dirname, '..', 'src'),
-      shared: path.resolve(__dirname, '..', 'src', 'shared'),
-      style: path.resolve(__dirname, '..', 'src', 'style'),
-      utils: path.resolve(__dirname, '..', 'src', 'utils'),
-    },
-    extensions: ['.ts', '.tsx', '.js'],
-  },
-  module: {
-    noParse: [
-      path.resolve(
-        __dirname,
-        '..',
-        'node_modules',
-        'memoizerific',
-        'memoizerific.js'
-      ),
-    ],
-    rules: [
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        loader: 'tslint-loader',
-        enforce: 'pre',
-        options: {
-          emitErrors: true,
-          configFile: path.resolve(__dirname, '..', 'tslint.json'),
-        },
-      },
-      {
-        test: /\.js$/,
-        exclude: [/node_modules/, /(_s|S)pec\.js$/],
-        use: 'eslint-loader',
-        enforce: 'pre',
-      },
-      {
-        test: /\.(sa|sc|c)ss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader',
-          'resolve-url-loader',
-          'sass-loader?sourceMap',
-        ],
-      },
-      {
-        test: /\.(ico|png|cur|jpg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-        loader: 'file-loader',
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: [{loader: 'thread-loader'}, babelLoader],
-      },
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'thread-loader',
-            options: {
-              // there should be 1 cpu for the fork-ts-checker-webpack-plugin
-              workers: require('os').cpus().length - 1,
-            },
-          },
-          babelLoader,
-          {
-            loader: 'ts-loader',
-            options: {
-              happyPackMode: true, // required for use with thread-loader
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      VERSION: JSON.stringify(require('../package.json').version),
-    }),
-    new ForkTsCheckerWebpackPlugin({
-      checkSyntacticErrors: true,
-    }),
-    new webpack.LoaderOptionsPlugin({
-      postcss: require('./postcss'),
-      options: {
-        eslint: {
-          failOnWarning: false,
-          failOnError: false,
-        },
-      },
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'chronograf.[chunkhash].css',
-      chunkFilename: '[id].css',
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, '..', 'src', 'index.template.html'),
-      inject: 'body',
-      chunksSortMode: 'dependency',
-      favicon: 'assets/images/favicon.ico',
-    }),
-    {
-      apply: compiler => {
-        compiler.hooks.afterEmit.tap('AfterEmitPlugin', ({compilation}) => {
-          /* Webpack does not exit with non-zero status if error. */
-          const errors = get(compilation, 'errors', [])
-
-          if (errors.length) {
-            errors.forEach(err => console.error(err))
-            process.exit(1)
-          }
-        })
-      },
-    },
-    new ProgressBarPlugin(),
-  ],
-  target: 'web',
-}
-
-module.exports = config

chronograf/ui/webpack/vendor.config.js

@@ -1,43 +0,0 @@
-const path = require('path')
-const webpack = require('webpack')
-const packages = require('../package.json')
-const dependencies = packages.dependencies
-const ProgressBarPlugin = require('progress-bar-webpack-plugin')
-
-const stats = {
-  colors: true,
-  children: false,
-  modules: false,
-  version: false,
-  warnings: false,
-  assetsSort: '!size',
-}
-
-module.exports = {
-  mode: 'development',
-  stats,
-  node: {
-    fs: 'empty',
-    module: 'empty',
-  },
-  context: process.cwd(),
-  resolve: {
-    extensions: ['.js', '.jsx', '.json'],
-    modules: [__dirname, 'node_modules'],
-  },
-  entry: {
-    vendor: Object.keys(dependencies),
-  },
-  output: {
-    filename: '[name].dll.js',
-    path: path.resolve(__dirname, '../build'),
-    library: '[name]',
-  },
-  plugins: [
-    new ProgressBarPlugin(),
-    new webpack.DllPlugin({
-      name: '[name]',
-      path: './build/[name].dll.json',
-    }),
-  ],
-}