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.

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx

@@ -213,6 +213,17 @@ const NodeLocalityColumn: React.FC<{ record: NodeStatusRow }> = ({
   );
 };
 
+const getStaleIndicator = (status: AggregatedNodeStatus | LivenessStatus): string =>
+  status === AggregatedNodeStatus.DEAD ||
+  status === LivenessStatus.NODE_STATUS_DEAD
+    ? " (stale)"
+    : "";
+
+const formatWithPossibleStaleIndicator = (
+  text: string,
+  record: NodeStatusRow,
+): string => `${text}${getStaleIndicator(record.status)}`;
+
 /**
  * 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 +279,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 +289,7 @@ export class NodeList extends React.Component<LiveNodeListProps> {
     {
       key: "replicas",
       dataIndex: "replicas",
+      render: formatWithPossibleStaleIndicator,
       title: <ReplicasTooltip>Replicas</ReplicasTooltip>,
       sorter: true,
       className: "column--align-right",
@@ -289,8 +302,7 @@ export class NodeList extends React.Component<LiveNodeListProps> {
           Capacity Usage
         </NodelistCapacityUsageTooltip>
       ),
-      render: (_text: string, record: NodeStatusRow) =>
-        util.Percentage(record.usedCapacity, record.availableCapacity),
+      render: formatWithPossibleStaleIndicator,
       sorter: (a: NodeStatusRow, b: NodeStatusRow) =>
         a.usedCapacity / a.availableCapacity -
         b.usedCapacity / b.availableCapacity,
@@ -300,8 +312,7 @@ 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),
+      render: formatWithPossibleStaleIndicator,
       sorter: (a: NodeStatusRow, b: NodeStatusRow) =>
         a.usedMemory / a.availableMemory - b.usedMemory / b.availableMemory,
       className: "column--align-right",