ui: use import instead of require for asset bundling

Previously, require was used to get around TypeScript's checking
of imported modules.  But this is ugly, and fortunately we can
avoid it by declaring a module for anything in the assets dir.

Release note: None

pkg/ui/src/interfaces/assets.d.ts

@@ -1,3 +1,8 @@
+declare module "assets/*" {
+    var _: string;
+    export default _;
+}
+
 declare module "!!raw-loader!*" {
     var _: string;
     export default _;

pkg/ui/src/views/cluster/components/visualization/index.tsx

@@ -1,13 +1,11 @@
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
-
 import React from "react";
 import classNames from "classnames";
 
-import "./visualizations.styl";
-
 import { ToolTipWrapper } from "src/views/shared/components/toolTip";
 
+import "./visualizations.styl";
+import spinner from "assets/spinner.gif";
+
 interface VisualizationProps {
   title: string;
   subtitle?: string;

pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx

@@ -12,9 +12,7 @@ import createChartComponent from "src/views/shared/util/d3-react";
 import capacityChart from "./capacity";
 
 import "./cluster.styl";
-
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
+import spinner from "assets/spinner.gif";
 
 // tslint:disable-next-line:variable-name
 const CapacityChart = createChartComponent(capacityChart);
@@ -167,7 +165,7 @@ class ClusterSummary extends React.Component<ClusterSummaryProps, {}> {
       children.push(
         ...renderCapacityUsage(this.props.capacityUsage),
         ...renderNodeLiveness(this.props.nodeLiveness),
-        ...renderReplicationStatus(this.props.replicationStatus)
+        ...renderReplicationStatus(this.props.replicationStatus),
       );
     }
 

pkg/ui/src/views/jobs/index.tsx

@@ -1,8 +1,3 @@
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
-// tslint:disable-next-line:no-var-requires
-const noResults = require<string>("assets/noresults.svg");
-
 import _ from "lodash";
 import moment from "moment";
 import { Line } from "rc-progress";
@@ -22,6 +17,9 @@ import { SortSetting } from "src/views/shared/components/sortabletable";
 import { ColumnDescriptor, SortedTable } from "src/views/shared/components/sortedtable";
 import { ToolTipWrapper } from "src/views/shared/components/toolTip";
 
+import spinner from "assets/spinner.gif";
+import noResults from "assets/noresults.svg";
+
 type Job = protos.cockroach.server.serverpb.JobsResponse.Job;
 
 type JobType = protos.cockroach.sql.jobs.Type;

pkg/ui/src/views/reports/containers/range/logTable.tsx

@@ -1,6 +1,3 @@
-// tslint:disable-next-line:no-var-requires
-const spinner = require<string>("assets/spinner.gif");
-
 import _ from "lodash";
 import React from "react";
 
@@ -10,6 +7,8 @@ import Print from "src/views/reports/containers/range/print";
 import Loading from "src/views/shared/components/loading";
 import { TimestampToMoment } from "src/util/convert";
 
+import spinner from "assets/spinner.gif";
+
 interface LogTableProps {
   rangeID: Long;
   log: protos.cockroach.server.serverpb.RangeLogResponse$Properties;