release-2.1: ui: design updates to the Statements pages

pkg/ui/src/util/sql/summarize.ts

@@ -12,6 +12,7 @@ const keywords: { [key: string]: RegExp } = {
   insert: /^insert\s+into\s+([^ \t(]+)/i,
   delete: /^delete\s+from\s+(\S+)/i,
   create: /^create\s+table\s+(\S+)/i,
+  set: /^set\s+((cluster\s+setting\s+)?\S+)/i,
 };
 
 // summarize takes a string SQL statement and produces a structured summary

pkg/ui/src/views/app/components/layoutSidebar/index.tsx

@@ -124,7 +124,7 @@ export default class Sidebar extends React.Component {
           <IconLink to="/overview" icon={homeIcon} title="Overview" activeFor="/node" />
           <IconLink to="/metrics" icon={metricsIcon} title="Metrics" />
           <IconLink to="/databases" icon={databasesIcon} title="Databases" activeFor="/database" />
-          <IconLink to="/statements" icon={statementsIcon} title="Statements" />
+          <IconLink to="/statements" icon={statementsIcon} title="Statements" activeFor="/statement" />
           <IconLink to="/jobs" icon={jobsIcon} title="Jobs" />
         </ul>
         <ul className="navigation-bar__list navigation-bar__list--bottom">

pkg/ui/src/views/shared/components/pageconfig/index.tsx

@@ -1,16 +1,31 @@
+import classnames from "classnames";
 import React from "react";
 
-export function PageConfig(props: {children?: React.ReactNode}) {
+export interface PageConfigProps {
+  layout?: "list" | "spread";
+  children?: React.ReactNode;
+}
+
+export function PageConfig(props: PageConfigProps) {
+  const classes = classnames({
+    "page-config__list": props.layout !== "spread",
+    "page-config__spread": props.layout === "spread",
+  });
+
   return (
     <div className="page-config">
-      <ul className="page-config__list">
+      <ul className={ classes }>
         { props.children }
       </ul>
     </div>
   );
 }
 
-export function PageConfigItem(props: {children?: React.ReactNode}) {
+export interface PageConfigItemProps {
+  children?: React.ReactNode;
+}
+
+export function PageConfigItem(props: PageConfigItemProps) {
   return (
     <li className="page-config__item">
       { props.children }

pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl

@@ -14,7 +14,7 @@
           display inline-block
           width 20px
           line-height 12px
-          font-size 6px
+          font-size 10px
           vertical-align middle
           text-align center
           content "▼"

pkg/ui/src/views/shared/components/sortedtable/index.tsx

@@ -10,7 +10,7 @@ import { SortableTable, SortableColumn, SortSetting } from "src/views/shared/com
  */
 export interface ColumnDescriptor<T> {
   // Title string that should appear in the header column.
-  title: string;
+  title: React.ReactNode;
   // Function which generates the contents of an individual cell in this table.
   cell: (obj: T) => React.ReactNode;
   // Function which returns a value that can be used to sort the collection of

pkg/ui/src/views/shared/components/summaryBar/summarybar.styl

@@ -21,6 +21,7 @@
     text-transform uppercase
     letter-spacing 2px
     color $tooltip-color
+    white-space nowrap
 
   &__value
     font-weight 200

pkg/ui/src/views/shared/components/toolTip/index.tsx

@@ -5,6 +5,7 @@ import "./tooltip.styl";
 
 interface ToolTipWrapperProps {
   text: React.ReactNode;
+  short?: boolean;
 }
 
 interface ToolTipWrapperState {
@@ -37,11 +38,12 @@ export class ToolTipWrapper extends React.Component<ToolTipWrapperProps, ToolTip
   }
 
   render() {
-    const { text } = this.props;
+    const { text, short } = this.props;
     const { hovered } = this.state;
     const tooltipClassNames = classNames({
       "hover-tooltip": true,
       "hover-tooltip--hovered": hovered,
+      "hover-tooltip--short": short,
     });
 
     return (

pkg/ui/src/views/shared/components/toolTip/tooltip.styl

@@ -30,6 +30,8 @@
 
 .hover-tooltip
   position relative
+  width 100%
+  height 100%
 
   &__text
     visibility hidden
@@ -47,6 +49,10 @@
     text-align left
     color $body-color
 
+  &--short &__text
+    width unset
+    max-width 400px
+
   &--hovered &__text
     visibility visible
 

pkg/ui/src/views/statements/barCharts.tsx

@@ -1,5 +1,6 @@
 import d3 from "d3";
 import _ from "lodash";
+import Long from "long";
 import React from "react";
 
 import { ToolTipWrapper } from "src/views/shared/components/toolTip";
@@ -12,11 +13,14 @@ import * as protos from "src/js/protos";
 
 type StatementStatistics = protos.cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
 
-const longToInt = (d: number | Long) => FixLong(d).toInt();
+const longToInt = (d: number | Long) => Long.fromValue(FixLong(d)).toInt();
 const clamp = (i: number) => i < 0 ? 0 : i;
 
 const countBars = [
   bar("count-first-try", (d: StatementStatistics) => longToInt(d.stats.first_attempt_count)),
+];
+
+const retryBars = [
   bar("count-retry", (d: StatementStatistics) => longToInt(d.stats.count) - longToInt(d.stats.first_attempt_count)),
 ];
 
@@ -38,8 +42,30 @@ function bar(name: string, value: (d: StatementStatistics) => number) {
   return { name, value };
 }
 
+function renderNumericStatLegend(count: number | Long, stat: number, sd: number, formatter: (d: number) => string) {
+  return (
+    <table className="numeric-stat-legend">
+      <tbody>
+        <tr>
+          <th>
+            <div className="numeric-stat-legend__bar numeric-stat-legend__bar--mean" />
+            Mean
+          </th>
+          <td>{ formatter(stat) }</td>
+        </tr>
+        <tr>
+          <th>
+            <div className="numeric-stat-legend__bar numeric-stat-legend__bar--dev" />
+            Standard Deviation
+          </th>
+          <td>{ longToInt(count) < 2 ? "-" : sd ? formatter(sd) : "0" }</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
 function makeBarChart(
-  title: string,
   accessors: { name: string, value: (d: StatementStatistics) => number }[],
   formatter: (d: number) => string = (x) => `${x}`,
   stdDevAccessor?: { name: string, value: (d: StatementStatistics) => number },
@@ -97,23 +123,27 @@ function makeBarChart(
         );
       }
 
-      let titleText = title + ": " + formatter(sum);
       if (stdDevAccessor) {
         const sd = stdDevAccessor.value(d);
-        if (sd) {
-          titleText += " Std. Dev.: " + formatter(sd);
-        }
-      }
+        const titleText = renderNumericStatLegend(rows.length, sum, sd, formatter);
 
-      return (
-        <div className={ "bar-chart" + (rows.length === 0 ? " bar-chart--singleton" : "") }>
-          <ToolTipWrapper text={ titleText }>
+        return (
+          <div className={ "bar-chart" + (rows.length === 0 ? " bar-chart--singleton" : "") }>
+            <ToolTipWrapper text={ titleText } short>
+              <div className="label">{ formatter(getTotal(d)) }</div>
+              { bars }
+              { renderStdDev() }
+            </ToolTipWrapper>
+          </div>
+        );
+      } else {
+        return (
+          <div className={ "bar-chart" + (rows.length === 0 ? " bar-chart--singleton" : "") }>
             <div className="label">{ formatter(getTotal(d)) }</div>
             { bars }
-            { renderStdDev() }
-          </ToolTipWrapper>
-        </div>
-      );
+          </div>
+        );
+      }
     };
   };
 }
@@ -135,9 +165,10 @@ export function approximify(value: number) {
   return "" + Math.round(value);
 }
 
-export const countBarChart = makeBarChart("Execution Count", countBars, approximify);
-export const rowsBarChart = makeBarChart("Rows Affected.  Mean", rowsBars, approximify, rowsStdDev);
-export const latencyBarChart = makeBarChart("Latency.  Mean", latencyBars, v => Duration(v * 1e9), latencyStdDev);
+export const countBarChart = makeBarChart(countBars, approximify);
+export const retryBarChart = makeBarChart(retryBars, approximify);
+export const rowsBarChart = makeBarChart(rowsBars, approximify, rowsStdDev);
+export const latencyBarChart = makeBarChart(latencyBars, v => Duration(v * 1e9), latencyStdDev);
 
 export function countBreakdown(s: StatementStatistics) {
   const count = longToInt(s.stats.count);
@@ -153,38 +184,47 @@ export function countBreakdown(s: StatementStatistics) {
     firstAttemptsBarChart() {
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={"First Try Count: " + firstAttempts}>
-            <div
-              className="count-first-try bar-chart__bar"
-              style={{ width: scale(firstAttempts) + "%" }}
-            />
-          </ToolTipWrapper>
+          <div className="label">{ firstAttempts }</div>
+          <div
+            className="count-first-try bar-chart__bar"
+            style={{ width: scale(firstAttempts) + "%" }}
+          />
         </div>
       );
     },
 
     retriesBarChart() {
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ "Retry Count: " + retries }>
-            <div
-              className="count-retry bar-chart__bar"
-              style={{ width: scale(retries) + "%", position: "absolute", right: "0" }}
-            />
-          </ToolTipWrapper>
+          <div className="label">{ retries }</div>
+          <div
+            className="count-retry bar-chart__bar"
+            style={{ width: scale(retries) + "%", position: "absolute", right: "0" }}
+          />
         </div>
       );
     },
 
     maxRetriesBarChart() {
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ "Max Retries: " + retries }>
-            <div
-              className="count-retry bar-chart__bar"
-              style={{ width: scale(maxRetries) + "%", position: "absolute", right: "0" }}
-            />
-          </ToolTipWrapper>
+          <div className="label">{ maxRetries }</div>
+          <div
+            className="count-max-retries bar-chart__bar"
+            style={{ width: scale(maxRetries) + "%" }}
+          />
+        </div>
+      );
+    },
+
+    totalCountBarChart() {
+      return (
+        <div className="bar-chart bar-chart--breakdown">
+          <div className="label">{ count }</div>
+          <div
+            className="count-total bar-chart__bar"
+            style={{ width: scale(count) + "%" }}
+          />
         </div>
       );
     },
@@ -206,10 +246,11 @@ export function rowsBreakdown(s: StatementStatistics) {
       const width = scale(clamp(mean - sd));
       const right = scale(mean);
       const spread = scale(sd + (sd > mean ? mean : sd));
-      const title = "Row Count.  Mean: " + format(mean) + " Std.Dev.: " + format(sd);
+      const title = renderNumericStatLegend(s.stats.count, mean, sd, format);
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ title }>
+          <ToolTipWrapper text={ title } short>
+            <div className="label">{ Math.round(mean * 100) / 100 }</div>
             <div
               className="rows bar-chart__bar"
               style={{ width: right + "%", position: "absolute", left: 0 }}
@@ -260,10 +301,11 @@ export function latencyBreakdown(s: StatementStatistics) {
       const width = scale(clamp(parseMean - parseSd));
       const right = scale(parseMean);
       const spread = scale(parseSd + (parseSd > parseMean ? parseMean : parseSd));
-      const title = "Parse Latency.  Mean: " + format(parseMean) + " Std. Dev.: " + format(parseSd);
+      const title = renderNumericStatLegend(s.stats.count, parseMean, parseSd, format);
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ title }>
+          <ToolTipWrapper text={ title } short>
+            <div className="label">{ Duration(parseMean * 1e9) }</div>
             <div
               className="latency-parse bar-chart__bar"
               style={{ width: right + "%", position: "absolute", left: 0 }}
@@ -282,10 +324,11 @@ export function latencyBreakdown(s: StatementStatistics) {
       const width = scale(clamp(planMean - planSd));
       const right = scale(planMean);
       const spread = scale(planSd + (planSd > planMean ? planMean : planSd));
-      const title = "Plan Latency.  Mean: " + format(planMean) + " Std. Dev.: " + format(planSd);
+      const title = renderNumericStatLegend(s.stats.count, planMean, planSd, format);
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ title }>
+          <ToolTipWrapper text={ title } short>
+            <div className="label">{ Duration(planMean * 1e9) }</div>
             <div
               className="latency-plan bar-chart__bar"
               style={{ width: right + "%", position: "absolute", left: left + "%" }}
@@ -304,10 +347,11 @@ export function latencyBreakdown(s: StatementStatistics) {
       const width = scale(clamp(runMean - runSd));
       const right = scale(runMean);
       const spread = scale(runSd + (runSd > runMean ? runMean : runSd));
-      const title = "Run Latency.  Mean: " + format(runMean) + " Std. Dev.: " + format(runSd);
+      const title = renderNumericStatLegend(s.stats.count, runMean, runSd, format);
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ title }>
+          <ToolTipWrapper text={ title } short>
+            <div className="label">{ Duration(runMean * 1e9) }</div>
             <div
               className="latency-run bar-chart__bar"
               style={{ width: right + "%", position: "absolute", left: left + "%" }}
@@ -326,10 +370,11 @@ export function latencyBreakdown(s: StatementStatistics) {
       const width = scale(clamp(overheadMean - overheadSd));
       const right = scale(overheadMean);
       const spread = scale(overheadSd + (overheadSd > overheadMean ? overheadMean : overheadSd));
-      const title = "Overhead Latency.  Mean: " + format(overheadMean) + " Std. Dev.: " + format(overheadSd);
+      const title = renderNumericStatLegend(s.stats.count, overheadMean, overheadSd, format);
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ title }>
+          <ToolTipWrapper text={ title } short>
+            <div className="label">{ Duration(overheadMean * 1e9) }</div>
             <div
               className="latency-overhead bar-chart__bar"
               style={{ width: right + "%", position: "absolute", left: left + "%" }}
@@ -350,10 +395,11 @@ export function latencyBreakdown(s: StatementStatistics) {
       const overhead = scale(overheadMean);
       const width = scale(clamp(overallMean - overallSd));
       const spread = scale(overallSd + (overallSd > overallMean ? overallMean : overallSd));
-      const title = "Overall Latency.  Mean: " + format(overallMean) + " Std. Dev.: " + format(overallSd);
+      const title = renderNumericStatLegend(s.stats.count, overallMean, overallSd, format);
       return (
         <div className="bar-chart bar-chart--breakdown">
-          <ToolTipWrapper text={ title }>
+          <ToolTipWrapper text={ title } short>
+            <div className="label">{ Duration(overallMean * 1e9) }</div>
             <div
               className="latency-parse bar-chart__bar"
               style={{ width: parse + "%", position: "absolute", left: 0 }}