storage/ui: add remote proposals to Range debug page

This would have helped when debugging cockroachdb#30064.

Release note: None

pkg/storage/replica.go

@@ -1905,6 +1905,7 @@ func (r *Replica) State() storagebase.RangeInfo {
 	ri.ReplicaState = *(protoutil.Clone(&r.mu.state)).(*storagebase.ReplicaState)
 	ri.LastIndex = r.mu.lastIndex
 	ri.NumPending = uint64(len(r.mu.localProposals))
+	ri.NumRemotePending = uint64(len(r.mu.remoteProposals))
 	ri.RaftLogSize = r.mu.raftLogSize
 	ri.NumDropped = uint64(r.mu.droppedMessages)
 	if r.mu.proposalQuota != nil {

pkg/storage/storagebase/state.proto

@@ -90,6 +90,7 @@ message RangeInfo {
   // The highest (and last) index in the Raft log.
   uint64 last_index = 2;
   uint64 num_pending = 3;
+  uint64 num_remote_pending = 9;
   reserved 4; // previously last verification timestamp for verify queue.
   uint64 num_dropped = 5;
   // raft_log_size may be initially inaccurate after a server restart.

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

@@ -60,7 +60,8 @@ const rangeTableDisplayList: RangeTableRow[] = [
   { variable: "leaseHolderQPS", display: "Lease Holder QPS", compareToLeader: false },
   { variable: "keysWrittenPS", display: "Average Keys Written Per Second", compareToLeader: false },
   { variable: "approxProposalQuota", display: "Approx Proposal Quota", compareToLeader: false },
-  { variable: "pendingCommands", display: "Pending Commands", compareToLeader: false },
+  { variable: "pendingCommands", display: "Pending Local Commands", compareToLeader: false },
+  { variable: "remoteCommands", display: "Pending Remote Commands", compareToLeader: false },
   { variable: "droppedCommands", display: "Dropped Commands", compareToLeader: false },
   { variable: "truncatedIndex", display: "Truncated Index", compareToLeader: true },
   { variable: "truncatedTerm", display: "Truncated Term", compareToLeader: true },
@@ -485,6 +486,7 @@ export default class RangeTable extends React.Component<RangeTableProps, {}> {
         keysWrittenPS: this.createContent(info.stats.writes_per_second.toFixed(4)),
         approxProposalQuota: raftLeader ? this.createContent(FixLong(info.state.approximate_proposal_quota)) : rangeTableEmptyContent,
         pendingCommands: this.createContent(FixLong(info.state.num_pending)),
+        remoteCommands: raftLeader ? this.createContent(FixLong(info.state.num_remote_pending)) : rangeTableEmptyContent,
         droppedCommands: this.createContent(
           FixLong(info.state.num_dropped),
           FixLong(info.state.num_dropped).greaterThan(0) ? "range-table__cell--warning" : "",