cherrypick-2.0: ui: a variety of minor fixes

pkg/ui/ccl/src/views/clusterviz/containers/map/nodeList.tsx

@@ -25,20 +25,23 @@ export default class NodeList extends React.Component<RouterState & { router: In
 
     // TODO(vilterp): dedup with ClusterVisualization
     return (
-      <div style={{
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-        background: "white",
-        paddingBottom: 24,
-      }}>
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          background: "white",
+          paddingBottom: 24,
+        }}
+        className="clusterviz"
+      >
         <div style={{
           flex: "none",
           backgroundColor: "white",
           boxShadow: "0 0 4px 0 rgba(0, 0, 0, 0.2)",
           zIndex: 5,
-          padding: "16px 24px",
+          padding: "4px 12px",
         }}>
           <div style={{ float: "left" }}>
             <Dropdown

pkg/ui/src/index.tsx

@@ -44,7 +44,7 @@ import NodeLogs from "src/views/cluster/containers/nodeLogs";
 import JobsPage from "src/views/jobs";
 import Certificates from "src/views/reports/containers/certificates";
 import CommandQueue from "src/views/reports/containers/commandQueue";
-import CustomGraph from "src/views/reports/containers/customgraph";
+import CustomChart from "src/views/reports/containers/customChart";
 import Debug from "src/views/reports/containers/debug";
 import ProblemRanges from "src/views/reports/containers/problemRanges";
 import Localities from "src/views/reports/containers/localities";
@@ -126,7 +126,7 @@ ReactDOM.render(
         <Route path="debug">
           <IndexRoute component={Debug} />
           <Route path="redux" component={ReduxDebug} />
-          <Route path="graph" component={CustomGraph} />
+          <Route path="chart" component={CustomChart} />
         </Route>
         <Route path="raft" component={ Raft }>
           <IndexRedirect to="ranges" />

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

@@ -75,6 +75,9 @@ export class LineGraph extends React.Component<LineGraphProps, {}> {
   }
 
   mouseMove = (e: any) => {
+    // TODO(couchand): handle the following cases:
+    //   - first series is missing data points
+    //   - series are missing data points at different timestamps
     const datapoints = this.props.data.results[0].datapoints;
     const timeScale = this.chart.xAxis.scale();
 
@@ -111,7 +114,7 @@ export class LineGraph extends React.Component<LineGraphProps, {}> {
       result = moment(new Date(series[index]));
     }
 
-    if (!this.props.hoverState) {
+    if (!this.props.hoverState || !result) {
       return;
     }
 

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

@@ -134,9 +134,6 @@ export class EventPageUnconnected extends React.Component<EventPageProps, {}> {
         // TODO(mrtracy): This currently always links back to the main cluster
         // page, when it should link back to the dashboard previously visible.
       }
-      <section className="section parent-link">
-        <Link to="/">&lt; Back to Cluster</Link>
-      </section>
       <section className="section section--heading">
         <h2>Events</h2>
       </section>

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

@@ -1,6 +1,6 @@
 import _ from "lodash";
 import React from "react";
-import { RouterState, Link } from "react-router";
+import { RouterState } from "react-router";
 import { connect } from "react-redux";
 
 import * as protos from "src/js/protos";
@@ -90,9 +90,6 @@ class Logs extends React.Component<LogProps & RouterState, {}> {
     }
     return (
       <div>
-        <section className="section parent-link">
-          <Link to="/nodes">&lt; Back to Node List</Link>
-        </section>
         <div className="section section--heading">
           <h2>Logs Node { this.props.params[nodeIDAttr] } / { nodeAddress }</h2>
         </div>

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

@@ -61,9 +61,6 @@ class NodeOverview extends React.Component<NodeOverviewProps, {}> {
 
     return (
       <div>
-        <section className="section parent-link">
-          <Link to="/nodes">&lt; Back to Node List</Link>
-        </section>
         <div className="section section--heading">
           <h2>{`Node ${node.desc.node_id} / ${node.desc.address.address_field}`}</h2>
         </div>

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

@@ -386,9 +386,6 @@ const NodesMainConnected = connect(
 function NodesPage() {
   return (
     <div>
-      <section className="section parent-link">
-        <Link to="/">&lt; Back to Cluster</Link>
-      </section>
       <NodesMainConnected />
     </div>
   );

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { RouterState, Link } from "react-router";
+import { Link, RouterState } from "react-router";
 import { connect } from "react-redux";
 
 import "./sqlhighlight.styl";
@@ -77,15 +77,19 @@ class TableMain extends React.Component<TableMainProps, {}> {
     hljs.highlightBlock(this.createStmtNode);
   }
 
+  componentDidUpdate() {
+    hljs.highlightBlock(this.createStmtNode);
+  }
+
   render() {
     const { tableInfo, grantsSortSetting } = this.props;
 
     if (tableInfo) {
       return <div>
-        <section className="section parent-link">
-          <Link to="/databases/tables">&lt; Back to Databases</Link>
-        </section>
         <section className="section">
+          <section className="section parent-link">
+            <Link to="/databases/tables">&lt; Back to Databases</Link>
+          </section>
           <div className="database-summary-title">
             <h2>{ this.props.params[tableNameAttr] }</h2>
           </div>

pkg/ui/src/views/reports/containers/customgraph/index.tsx → pkg/ui/src/views/reports/containers/customChart/index.tsx

@@ -15,7 +15,7 @@ import { Metric, Axis, AxisUnits } from "src/views/shared/components/metricQuery
 import { PageConfig, PageConfigItem } from "src/views/shared/components/pageconfig";
 
 import { CustomMetricState, CustomMetricRow } from "./customMetric";
-import "./customgraph.styl";
+import "./customChart.styl";
 
 import { NodeStatus$Properties } from "../../../../util/proto";
 
@@ -25,7 +25,7 @@ const axisUnitsOptions: DropdownOption[] = [
   AxisUnits.Duration,
 ].map(au => ({ label: AxisUnits[au], value: au.toString() }));
 
-export interface CustomGraphProps {
+export interface CustomChartProps {
   refreshNodes: typeof refreshNodes;
   nodesQueryValid: boolean;
   nodesSummary: NodesSummary;
@@ -36,7 +36,7 @@ interface UrlState {
   units: string;
 }
 
-class CustomGraph extends React.Component<CustomGraphProps & WithRouterProps> {
+class CustomChart extends React.Component<CustomChartProps & WithRouterProps> {
   // Selector which computes dropdown options based on the nodes available on
   // the cluster.
   private nodeOptions = createSelector(
@@ -81,7 +81,7 @@ class CustomGraph extends React.Component<CustomGraphProps & WithRouterProps> {
   );
 
   static title() {
-    return "Custom Graph";
+    return "Custom Chart";
   }
 
   refresh(props = this.props) {
@@ -94,7 +94,7 @@ class CustomGraph extends React.Component<CustomGraphProps & WithRouterProps> {
     this.refresh();
   }
 
-  componentWillReceiveProps(props: CustomGraphProps & WithRouterProps) {
+  componentWillReceiveProps(props: CustomChartProps & WithRouterProps) {
     this.refresh(props);
   }
 
@@ -146,22 +146,22 @@ class CustomGraph extends React.Component<CustomGraphProps & WithRouterProps> {
     });
   }
 
-  // Render a graph of the currently selected metrics.
-  renderGraph() {
+  // Render a chart of the currently selected metrics.
+  renderChart() {
     const metrics = this.currentMetrics();
     const units = this.currentAxisUnits();
     const { nodesSummary } = this.props;
     if (_.isEmpty(metrics)) {
       return (
         <section className="section">
-          <h3>Click "Add Metric" to add a metric to the custom graph.</h3>
+          <h3>Click "Add Metric" to add a metric to the custom chart.</h3>
         </section>
       );
     }
 
     return (
       <section className="section">
-        <MetricsDataProvider id="debug-custom-graph">
+        <MetricsDataProvider id="debug-custom-chart">
           <LineGraph>
             <Axis units={units}>
               {
@@ -269,7 +269,7 @@ class CustomGraph extends React.Component<CustomGraphProps & WithRouterProps> {
             />
           </PageConfigItem>
         </PageConfig>
-        { this.renderGraph() }
+        { this.renderChart() }
         { this.renderMetricsTable() }
       </div>
     );
@@ -287,7 +287,7 @@ const mapDispatchToProps = {
   refreshNodes,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(withRouter(CustomGraph));
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(CustomChart));
 
 function isStoreMetric(nodeStatus: NodeStatus$Properties, metricName: string) {
   return _.has(nodeStatus.store_statuses[0].metrics, metricName);

pkg/ui/src/views/reports/containers/debug/index.tsx

@@ -225,10 +225,10 @@ export default function Debug() {
             url="#/debug/redux"
           />
         </DebugTableRow>
-        <DebugTableRow title="Custom Time-Series Graph">
+        <DebugTableRow title="Custom Time-Series Chart">
           <DebugTableLink
-            name="Customizable graph of time series metrics"
-            url="#/debug/graph"
+            name="Customizable chart of time series metrics"
+            url="#/debug/chart"
           />
         </DebugTableRow>
       </DebugTable>

pkg/ui/src/views/shared/util/table.styl

@@ -40,6 +40,7 @@ $table-base
     padding 10px 20px
     border-right $table-cell-border
     font-weight inherit
+    vertical-align top
 
     a
       font-weight 400