Merge pull request #16039 from mrtracy/mtracy/ui-build-output

ui: Reduce WebPack / Warning Spew during builds

pkg/ui/Makefile

@@ -41,9 +41,9 @@ lint: $(YARN_INSTALLED_TARGET) | protos
 test: $(YARN_INSTALLED_TARGET) | protos
 	karma start
 
-.PHONY: test-debug
-test-debug: $(YARN_INSTALLED_TARGET) | protos
-	karma start --browsers Chrome --no-single-run --reporters mocha
+.PHONY: test-watch
+test-watch: $(YARN_INSTALLED_TARGET) | protos
+	karma start --no-single-run --auto-watch
 
 $(GOBINDATA_TARGET): $(YARN_INSTALLED_TARGET) $(shell git ls-files | grep -vF $(GOBINDATA_TARGET)) | protos
 	rm -rf dist

pkg/ui/karma.conf.js

@@ -46,6 +46,12 @@ module.exports = function(config) {
       },
     }),
 
+    // "stats" needs to be copied to webpackMiddleware configuration in order
+    // to correctly configure console output
+    webpackMiddleware: {
+      noInfo: true,
+      stats: webpackConfig.stats,
+    },
 
     // test results reporter to use
     // possible values: 'dots', 'progress'

pkg/ui/package.json

@@ -19,6 +19,7 @@
     "@types/lodash": "^4.14.56",
     "@types/mocha": "^2.2.40",
     "@types/nvd3": "^1.8.36",
+    "@types/prop-types": "^15.5.1",
     "@types/react": "^15.0.18",
     "@types/react-codemirror": "^0.2.6",
     "@types/react-dom": "^0.14.23",
@@ -42,7 +43,7 @@
     "combokeys": "^2.4.6",
     "css-loader": "^0.28.0",
     "d3": "<4.0.0",
-    "enzyme": "^2.7.1",
+    "enzyme": "^2.8.2",
     "express": "^4.15.2",
     "favicons-webpack-plugin": "^0.0.7",
     "fetch-mock": "^5.9.4",
@@ -66,18 +67,20 @@
     "moment": "^2.18.1",
     "nib": "^1.1.2",
     "nvd3": "^1.8.5",
+    "prop-types": "^15.5.10",
     "protobufjs": "^6.7.3",
     "react": "^15.4.2",
     "react-addons-create-fragment": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-codemirror": "^1.0.0",
     "react-dom": "^15.4.2",
-    "react-paginate": "<3.0.0",
+    "react-paginate": "^4.4.2",
     "react-redux": "^5.0.3",
     "react-router": "<4.0.0",
     "react-router-redux": "<5.0.0",
-    "react-select": "^1.0.0-rc.3",
+    "react-select": "^1.0.0-rc.4",
     "react-sticky": "^5.0.5",
+    "react-test-renderer": "^15.5.4",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.0",

pkg/ui/proxy.js

@@ -27,7 +27,9 @@ const argv = require('yargs')
 
 const port = argv.port, remote = argv._[0];
 
-app.use(webpackDevMiddleware(compiler, {}));
+app.use(webpackDevMiddleware(compiler, {
+  stats: webpackConfig.stats,
+}));
 
 app.use('/', proxy({
   target: remote,

pkg/ui/src/components/alertBox.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 
 import { AlertInfo, AlertLevel } from "../redux/alerts";

pkg/ui/src/components/dropdown.tsx

@@ -1,5 +1,5 @@
 import Select from "react-select";
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 
 import {leftArrow, rightArrow} from "./icons";

pkg/ui/src/components/graphGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { MetricsDataProvider } from "../containers/metricsDataProvider";
 

pkg/ui/src/components/graphs.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import * as nvd3 from "nvd3";
 import * as d3 from "d3";

pkg/ui/src/components/layoutHeader.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * TopBar represents the static header bar that is present on all pages. The

pkg/ui/src/components/layoutSidebar.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ListLink, LinkProps } from "./listLink";
 import * as Icons from "./icons";
 import { trustIcon } from "../util/trust";

pkg/ui/src/components/linegraph.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as nvd3 from "nvd3";
 import { createSelector } from "reselect";
 

pkg/ui/src/components/listLink.tsx

@@ -7,12 +7,9 @@
  * activeClass, rather than the logic below.
  */
 
-import * as React from "react";
-import { Link, InjectedRouter } from "react-router";
-
-interface ListLinkContext {
-  router: InjectedRouter;
-}
+import React from "react";
+import PropTypes from "prop-types";
+import { Link, InjectedRouter, RouterState } from "react-router";
 
 export interface LinkProps {
   to: string;
@@ -21,16 +18,18 @@ export interface LinkProps {
 }
 
 export class ListLink extends React.Component<LinkProps, {}> {
+  // TODO(mrtracy): Switch this, and the other uses of contextTypes, to use the
+  // 'withRouter' HoC after upgrading to react-router 4.x.
   static contextTypes = {
-    router: React.PropTypes.object,
+    router: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
     className: "normal",
     onlyActiveOnIndex: false,
   };
 
-  context: ListLinkContext;
+  context: { router: InjectedRouter & RouterState; };
 
   render() {
     let { to, className, onlyActiveOnIndex, children } = this.props;

pkg/ui/src/components/metric.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * MetricProps reperesents the properties assigned to a selector component. A

pkg/ui/src/components/pageconfig.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Sticky } from "react-sticky";
 
 export function PageConfig(props: {children?: React.ReactNode}) {

pkg/ui/src/components/queryPlanGraph.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as d3 from "d3";
 import {event as d3Event} from "d3";
 

pkg/ui/src/components/sortabletable.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import { assert } from "chai";
 import { shallow } from "enzyme";

pkg/ui/src/components/sortabletable.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import classNames from "classnames";
 

pkg/ui/src/components/sortedtable.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import { assert } from "chai";
 import { mount } from "enzyme";

pkg/ui/src/components/sortedtable.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import { createSelector } from "reselect";
 

pkg/ui/src/components/summaryBar.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 
 import { MetricsDataProvider } from "../containers/metricsDataProvider";

pkg/ui/src/components/toolTip.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 
 interface ToolTipWrapperProps {

pkg/ui/src/components/visualization.tsx

@@ -1,7 +1,7 @@
 // tslint:disable-next-line:no-var-requires
 const spinner = require<string>("../../assets/spinner.gif");
 
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 import { ToolTipWrapper } from "./toolTip";
 

pkg/ui/src/containers/alertBanner.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Dispatch, bindActionCreators } from "redux";
 import { connect } from "react-redux";
 

pkg/ui/src/containers/alerts.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import { Dispatch, bindActionCreators } from "redux";
 import { connect } from "react-redux";

pkg/ui/src/containers/clusterViz.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {runVisualization, viewWidth, viewHeight} from "../js/sim/index";
 
 /**

pkg/ui/src/containers/databases/databaseGrants.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import * as protos from  "../../js/protos";

pkg/ui/src/containers/databases/databaseSummary.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
 
 import * as protos from "../../js/protos";
 

pkg/ui/src/containers/databases/databaseTables.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router";
 

pkg/ui/src/containers/databases/databases.tsx

@@ -1,5 +1,6 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
+import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { InjectedRouter, RouterState } from "react-router";
 
@@ -31,10 +32,12 @@ const databasePages = [
 class DatabaseListNav extends React.Component<{selected: string}, {}> {
   // Magic to add react router to the context.
   // See https://github.com/ReactTraining/react-router/issues/975
+  // TODO(mrtracy): Switch this, and the other uses of contextTypes, to use the
+  // 'withRouter' HoC after upgrading to react-router 4.x.
   static contextTypes = {
-    router: React.PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired,
   };
-  context: { router?: InjectedRouter & RouterState; };
+  context: { router: InjectedRouter & RouterState; };
 
   render() {
     return <PageConfig>

pkg/ui/src/containers/databases/tableDetails.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { RouterState, Link } from "react-router";
 import { connect } from "react-redux";
 

pkg/ui/src/containers/events.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { assert } from "chai";
 import { shallow } from "enzyme";
 import _ from "lodash";

pkg/ui/src/containers/events.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Link } from "react-router";
 import _ from "lodash";
 import { connect } from "react-redux";

pkg/ui/src/containers/layout.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import { RouterState } from "react-router";
 import { StickyContainer } from "react-sticky";

pkg/ui/src/containers/metricsDataProvider.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { assert } from "chai";
 import { shallow } from "enzyme";
 import _ from "lodash";

pkg/ui/src/containers/metricsDataProvider.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { createSelector } from "reselect";
 import { connect } from "react-redux";
 import _ from "lodash";

pkg/ui/src/containers/nodeGraphs.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
 import * as d3 from "d3";
 import { RouterState, Link } from "react-router";
 import { connect } from "react-redux";

pkg/ui/src/containers/nodeLogs.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
 import { RouterState, Link } from "react-router";
 import { AdminUIState } from "../redux/state";
 import { refreshLogs, refreshNodes } from "../redux/apiReducers";

pkg/ui/src/containers/nodeOverview.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { createSelector } from "reselect";
 import { RouterState, Link } from "react-router";

pkg/ui/src/containers/nodes.tsx

@@ -1,5 +1,6 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
+import PropTypes from "prop-types";
 import { InjectedRouter, RouterState } from "react-router";
 import { connect } from "react-redux";
 
@@ -45,10 +46,12 @@ const dashboards = [
 class ClusterOverview extends React.Component<ClusterOverviewProps, ClusterOverviewState> {
   // Magic to add react router to the context.
   // See https://github.com/ReactTraining/react-router/issues/975
+  // TODO(mrtracy): Switch this, and the other uses of contextTypes, to use the
+  // 'withRouter' HoC after upgrading to react-router 4.x.
   static contextTypes = {
-    router: React.PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired,
   };
-  context: { router?: InjectedRouter & RouterState; };
+  context: { router: InjectedRouter & RouterState; };
 
   state: ClusterOverviewState = {
     nodeOptions: [{ value: "", label: "Cluster"}],

pkg/ui/src/containers/nodesOverview.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Link } from "react-router";
 import { connect } from "react-redux";
 import moment from "moment";

pkg/ui/src/containers/queryPlan.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import _ from "lodash";
 import Combokeys from "combokeys";
 import { RouterState } from "react-router";

pkg/ui/src/containers/raft.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { ListLink } from "../components/listLink";
 

pkg/ui/src/containers/raftRanges.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import * as React from "react";
+import React from "react";
 import ReactPaginate from "react-paginate";
 import { Link } from "react-router";
 import { connect } from "react-redux";

pkg/ui/src/containers/timescale.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { connect } from "react-redux";
 import _ from "lodash";
 import moment from "moment";

pkg/ui/src/containers/timewindow.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { assert } from "chai";
 import { shallow } from "enzyme";
 import * as sinon from "sinon";