From 4fba8c899496aff2cb0a4adedfac8e6e1a39a326 Mon Sep 17 00:00:00 2001
From: Aaron Buck <aaron.buck@cockroachlabs.com>
Date: Wed, 25 Jan 2023 14:50:10 -0500
Subject: [PATCH] 71618: ui: set overview page node list data with stale tag if
 node is dead

Issue: #71618
Epic: None

Release note (ui change): Currently, the stale node metrics displayed to a
user in the Cluster Overview Nodes Table may mislead users in to thinking
that they are current values when in fact they are stale. This change
rectifies that and adds a stale tag to metrics displayed to the user.
This allows for users to be informed about the staleness of the data
displayed to them regarding dead nodes.
---
 .../containers/nodesOverview/index.tsx        | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx
index 97a5831f203b..df5465defd37 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx
@@ -213,6 +213,20 @@ const NodeLocalityColumn: React.FC<{ record: NodeStatusRow }> = ({
   );
 };
 
+const formatWithPossibleStaleIndicator = (
+  text: string,
+  record: NodeStatusRow,
+): string => {
+  if (
+    record.status === LivenessStatus.NODE_STATUS_DEAD ||
+    record.status === AggregatedNodeStatus.DEAD
+  ) {
+    return `${text} (stale)`;
+  }
+
+  return text;
+};
+
 /**
  * LiveNodeList displays a sortable table of all "live" nodes, which includes
  * both healthy and suspect nodes. Included is a side-bar with summary
@@ -268,6 +282,7 @@ export class NodeList extends React.Component<LiveNodeListProps> {
     {
       key: "uptime",
       dataIndex: "uptime",
+      render: formatWithPossibleStaleIndicator,
       title: <UptimeTooltip>Uptime</UptimeTooltip>,
       sorter: true,
       className: "column--align-right",
@@ -277,6 +292,7 @@ export class NodeList extends React.Component<LiveNodeListProps> {
     {
       key: "replicas",
       dataIndex: "replicas",
+      render: formatWithPossibleStaleIndicator,
       title: <ReplicasTooltip>Replicas</ReplicasTooltip>,
       sorter: true,
       className: "column--align-right",
@@ -290,7 +306,10 @@ export class NodeList extends React.Component<LiveNodeListProps> {
         </NodelistCapacityUsageTooltip>
       ),
       render: (_text: string, record: NodeStatusRow) =>
-        util.Percentage(record.usedCapacity, record.availableCapacity),
+        formatWithPossibleStaleIndicator(
+          util.Percentage(record.usedCapacity, record.availableCapacity),
+          record,
+        ),
       sorter: (a: NodeStatusRow, b: NodeStatusRow) =>
         a.usedCapacity / a.availableCapacity -
         b.usedCapacity / b.availableCapacity,
@@ -301,7 +320,10 @@ export class NodeList extends React.Component<LiveNodeListProps> {
       key: "memoryUse",
       title: <MemoryUseTooltip>Memory Use</MemoryUseTooltip>,
       render: (_text: string, record: NodeStatusRow) =>
-        util.Percentage(record.usedMemory, record.availableMemory),
+        formatWithPossibleStaleIndicator(
+          util.Percentage(record.usedMemory, record.availableMemory),
+          record,
+        ),
       sorter: (a: NodeStatusRow, b: NodeStatusRow) =>
         a.usedMemory / a.availableMemory - b.usedMemory / b.availableMemory,
       className: "column--align-right",