Merge #27626

27626: ui: add hardware metrics to new "Hardware" dashboard r=vilterp a=vilterp First two commits are from #27137; that PR will go in first. ![image](https://user-images.githubusercontent.com/7341/42787591-2166749e-8929-11e8-886b-fa89ff580d88.png) TODO - [ ] tooltips - [ ] format CPU percentage (currently 100% of one core = 1) Co-authored-by: Pete Vilter <[email protected]>
cockroachdb · Jul 23, 2018 · abdb466 · abdb466
2 parents d489b89 + 2f25296
commit abdb466
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 5 deletions.
diff --git a/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/hardware.tsx b/pkg/ui/src/views/cluster/containers/nodeGraphs/dashboards/hardware.tsx
@@ -0,0 +1,181 @@
+import React from "react";
+
+import { LineGraph } from "src/views/cluster/components/linegraph";
+import { Metric, Axis, AxisUnits } from "src/views/shared/components/metricQuery";
+
+import { GraphDashboardProps, nodeDisplayName } from "./dashboardUtils";
+import * as docsURL from "oss/src/util/docs";
+
+// TODO(vilterp): tooltips
+
+export default function (props: GraphDashboardProps) {
+  const { nodeIDs, nodesSummary, nodeSources, storeSources, tooltipSelection } = props;
+
+  return [
+    <LineGraph
+      title="User CPU Percent"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Percentage} label="CPU">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.cpu.user.percent"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="System CPU Percent"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Percentage} label="CPU">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.cpu.sys.percent"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Memory Usage"
+      sources={nodeSources}
+      tooltip={(
+        <div>
+          Memory in use {tooltipSelection}
+        </div>
+      )}
+    >
+      <Axis units={AxisUnits.Bytes} label="memory usage">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.rss"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Disk Read Bytes"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Bytes} label="bytes">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.host.disk.read.bytes"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+            nonNegativeRate
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Disk Write Bytes"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Bytes} label="bytes">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.host.disk.write.bytes"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+            nonNegativeRate
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Disk IOPS In Progress"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Count} label="IOPS">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.host.disk.iopsinprogress"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Disk Capacity"
+      sources={storeSources}
+      tooltip={(
+        <div>
+          <dl>
+            <dt>Capacity</dt>
+            <dd>
+              Total disk space available {tooltipSelection} to CockroachDB.
+              {" "}
+              <em>
+                Control this value per node with the
+                {" "}
+                <code>
+                  <a href={docsURL.startFlags} target="_blank">
+                    --store
+                  </a>
+                </code>
+                {" "}
+                flag.
+              </em>
+            </dd>
+            <dt>Available</dt>
+            <dd>Free disk space available {tooltipSelection} to CockroachDB.</dd>
+            <dt>Used</dt>
+            <dd>Disk space used {tooltipSelection} by CockroachDB.</dd>
+          </dl>
+        </div>
+      )}
+    >
+      <Axis units={AxisUnits.Bytes} label="capacity">
+        <Metric name="cr.store.capacity" title="Capacity" />
+        <Metric name="cr.store.capacity.available" title="Available" />
+        <Metric name="cr.store.capacity.used" title="Used" />
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Network Bytes Received"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Bytes} label="bytes">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.host.net.recv.bytes"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+            nonNegativeRate
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Network Bytes Sent"
+      sources={nodeSources}
+    >
+      <Axis units={AxisUnits.Bytes} label="bytes">
+        {nodeIDs.map((nid) => (
+          <Metric
+            name="cr.node.sys.host.net.send.bytes"
+            title={nodeDisplayName(nodesSummary, nid)}
+            sources={[nid]}
+            nonNegativeRate
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+  ];
+}
diff --git a/pkg/ui/src/views/cluster/containers/nodeGraphs/index.tsx b/pkg/ui/src/views/cluster/containers/nodeGraphs/index.tsx
@@ -34,6 +34,7 @@ import replicationDashboard from "./dashboards/replication";
 import distributedDashboard from "./dashboards/distributed";
 import queuesDashboard from "./dashboards/queues";
 import requestsDashboard from "./dashboards/requests";
+import hardwareDashboard from "./dashboards/hardware";
 
 interface GraphDashboard {
   label: string;
@@ -42,13 +43,14 @@ interface GraphDashboard {
 
 const dashboards: {[key: string]: GraphDashboard} = {
   "overview" : { label: "Overview", component: overviewDashboard },
+  "hardware": { label: "Hardware", component: hardwareDashboard },
   "runtime" : { label: "Runtime", component: runtimeDashboard },
   "sql": { label: "SQL", component: sqlDashboard },
   "storage": { label: "Storage", component: storageDashboard },
   "replication": { label: "Replication", component: replicationDashboard },
   "distributed": { label: "Distributed", component: distributedDashboard },
   "queues": { label: "Queues", component: queuesDashboard },
-  "requests": { label: "Slow Requests", component: requestsDashboard},
+  "requests": { label: "Slow Requests", component: requestsDashboard },
 };
 
 const defaultDashboard = "overview";

diff --git a/pkg/ui/src/views/cluster/util/graphs.ts b/pkg/ui/src/views/cluster/util/graphs.ts
@@ -89,7 +89,9 @@ const countIncrementTable = [0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8,
 //
 // "Human-friendly" increments are taken from the supplied countIncrementTable,
 // which should include decimal values between 0 and 1.
-function computeNormalizedIncrement(range: number) {
+function computeNormalizedIncrement(
+  range: number, incrementTbl: number[] = countIncrementTable,
+) {
   if (range === 0) {
     throw new Error("cannot compute tick increment with zero range");
   }
@@ -101,8 +103,8 @@ function computeNormalizedIncrement(range: number) {
     x++;
     rawIncrement = rawIncrement / 10;
   }
-  const normalizedIncrementIdx = _.sortedIndex(countIncrementTable, rawIncrement);
-  return countIncrementTable[normalizedIncrementIdx] * Math.pow(10, x);
+  const normalizedIncrementIdx = _.sortedIndex(incrementTbl, rawIncrement);
+  return incrementTbl[normalizedIncrementIdx] * Math.pow(10, x);
 }
 
 function computeAxisDomain(extent: Extent, factor: number = 1): AxisDomain {
@@ -173,6 +175,20 @@ function ComputeDurationAxisDomain(extent: Extent): AxisDomain {
   return axisDomain;
 }
 
+const percentIncrementTable = [0.25, 0.5, 0.75, 1.0];
+
+function ComputePercentageAxisDomain(
+  min: number, max: number,
+) {
+  const range = max - min;
+  const increment = computeNormalizedIncrement(range, percentIncrementTable);
+  const axisDomain = new AxisDomain([min, max], increment);
+  axisDomain.label = "percentage";
+  axisDomain.tickFormat = d3.format(".0%");
+  axisDomain.guideFormat = d3.format(".2%");
+  return axisDomain;
+}
+
 const timeIncrementDurations = [
   moment.duration(1, "m"),
   moment.duration(5, "m"),
@@ -236,6 +252,8 @@ function calculateYAxisDomain(axisUnits: AxisUnits, data: TSResponse): AxisDomai
       return ComputeByteAxisDomain(yExtent);
     case AxisUnits.Duration:
       return ComputeDurationAxisDomain(yExtent);
+    case AxisUnits.Percentage:
+      return ComputePercentageAxisDomain(yExtent[0], yExtent[1]);
     default:
       return ComputeCountAxisDomain(yExtent);
   }

diff --git a/pkg/ui/src/views/shared/components/metricQuery/index.tsx b/pkg/ui/src/views/shared/components/metricQuery/index.tsx
@@ -43,6 +43,10 @@ export enum AxisUnits {
    * Units are durations expressed in nanoseconds.
    */
   Duration,
+  /**
+   * Units are percentages expressed as fractional values of 1 (1.0 = 100%).
+   */
+  Percentage,
 }
 
 /**

diff --git a/pkg/ui/styl/shame.styl b/pkg/ui/styl/shame.styl
@@ -49,7 +49,7 @@
   padding 0 0
 
 .Select-menu, .Select-menu-outer
-  max-height 300px !important
+  max-height 350px !important
 
 .Select-value-label
   display block !important