ui: add MVCC range stats to Db Console

This patch extends node details with `rangeKeyBytes` and `rangeValueBytes` stats. Also, it adds the same stats to Advanced Debug > Range Status section. Release note (ui change): Added "Range Key Bytes" and "Range Value Bytes" stats on Node details page.
cockroachdb · Aug 4, 2022 · 154faa6 · 154faa6
1 parent f353698
commit 154faa6
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/pkg/ui/workspaces/db-console/src/util/proto.ts b/pkg/ui/workspaces/db-console/src/util/proto.ts
@@ -64,6 +64,8 @@ export namespace MetricConstants {
  export const liveBytes: string = "livebytes";
  export const keyBytes: string = "keybytes";
  export const valBytes: string = "valbytes";
+ export const rangeKeyBytes: string = "rangekeybytes";
+ export const rangeValBytes: string = "rangevalbytes";
  export const totalBytes: string = "totalbytes";
  export const intentBytes: string = "intentbytes";
  export const liveCount: string = "livecount";

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeOverview/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeOverview/index.tsx
@@ -44,6 +44,8 @@ import {
  NodeUsedCapacityTooltip,
  NodeAvailableCapacityTooltip,
  NodeMaximumCapacityTooltip,
+ MVCCRangeKeyBytesTooltip,
+ MVCCRangeValueBytesTooltip,
 } from "./tooltips";
 import { TooltipProps } from "src/components/tooltip/tooltip";
 
@@ -187,6 +189,24 @@ export class NodeOverview extends React.Component<NodeOverviewProps, {}> {
  nodeName={nodesSummary.nodeDisplayNameByID[node.desc.node_id]}
  CellTooltip={ValueBytesTooltip}
  />
+ <TableRow
+ data={node}
+ title="MVCC Range Key Bytes"
+ valueFn={metrics =>
+ Bytes(metrics[MetricConstants.rangeKeyBytes] || 0)
+ }
+ nodeName={nodesSummary.nodeDisplayNameByID[node.desc.node_id]}
+ CellTooltip={MVCCRangeKeyBytesTooltip}
+ />
+ <TableRow
+ data={node}
+ title="MVCC Range Value Bytes"
+ valueFn={metrics =>
+ Bytes(metrics[MetricConstants.rangeValBytes] || 0)
+ }
+ nodeName={nodesSummary.nodeDisplayNameByID[node.desc.node_id]}
+ CellTooltip={MVCCRangeValueBytesTooltip}
+ />
  <TableRow
  data={node}
  title="Intent Bytes"

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeOverview/tooltips.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeOverview/tooltips.tsx
@@ -85,6 +85,48 @@ export const ValueBytesTooltip: React.FC<
  </Tooltip>
 );
 
+export const MVCCRangeKeyBytesTooltip: React.FC<
+ TooltipProps & {
+ nodeName: string;
+ }
+> = props => (
+ <Tooltip
+ {...props}
+ placement="bottom"
+ title={
+ <div className="tooltip__table--title">
+ <p>
+ Number of bytes stored in MVCC range keys on node{" "}
+ {props.nodeName || "NodeName"}.
+ </p>
+ </div>
+ }
+ >
+ {props.children}
+ </Tooltip>
+);
+
+export const MVCCRangeValueBytesTooltip: React.FC<
+ TooltipProps & {
+ nodeName: string;
+ }
+> = props => (
+ <Tooltip
+ {...props}
+ placement="bottom"
+ title={
+ <div className="tooltip__table--title">
+ <p>
+ Number of bytes stored in MVCC range values on node{" "}
+ {props.nodeName || "NodeName"}.
+ </p>
+ </div>
+ }
+ >
+ {props.children}
+ </Tooltip>
+);
+
 export const IntentBytesTooltip: React.FC<TooltipProps> = props => (
  <Tooltip
  {...props}

diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/range/rangeTable.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/range/rangeTable.tsx
@@ -170,6 +170,16 @@ const rangeTableDisplayList: RangeTableRow[] = [
  display: "MVCC Value Bytes/Count",
  compareToLeader: true,
  },
+ {
+ variable: "mvccRangeKeyBytesCount",
+ display: "MVCC Range Key Bytes/Count",
+ compareToLeader: true,
+ },
+ {
+ variable: "mvccRangeValueBytesCount",
+ display: "MVCC Range Value Bytes/Count",
+ compareToLeader: true,
+ },
  {
  variable: "mvccIntentBytesCount",
  display: "MVCC Intent Bytes/Count",
@@ -796,6 +806,14 @@ export default class RangeTable extends React.Component<RangeTableProps, {}> {
  FixLong(mvcc.val_bytes),
  FixLong(mvcc.val_count),
  ),
+ mvccRangeKeyBytesCount: this.contentMVCC(
+ FixLong(mvcc.range_key_bytes || 0),
+ FixLong(mvcc.range_key_count || 0),
+ ),
+ mvccRangeValueBytesCount: this.contentMVCC(
+ FixLong(mvcc.range_val_bytes || 0),
+ FixLong(mvcc.range_val_count || 0),
+ ),
  mvccIntentBytesCount: this.contentMVCC(
  FixLong(mvcc.intent_bytes),
  FixLong(mvcc.intent_count),