From 32166521e9375a8c9a0710d2f2fdb32957654539 Mon Sep 17 00:00:00 2001
From: Xin Hao Zhang <xzhang@cockroachlabs.com>
Date: Thu, 17 Oct 2024 11:31:49 -0400
Subject: [PATCH] ui: table details bug fixes

- Only render table overview when data is non-null
- Render table details resp error if it occurs
- Dedup node ids in table overview

Epic: CRDB-37558
Release note: None
---
 .../cluster-ui/src/tableDetailsV2/index.tsx   |  4 ++--
 .../src/tableDetailsV2/tableOverview.tsx      | 23 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/index.tsx b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/index.tsx
index 276197bb0eb1..5d1590036469 100644
--- a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/index.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/index.tsx
@@ -55,8 +55,8 @@ export const TableDetailsPageV2 = () => {
       key: TabKeys.OVERVIEW,
       label: "Overview",
       children: (
-        <Loading page="TableDetailsOverview" loading={isLoading}>
-          <TableOverview tableDetails={data} />
+        <Loading error={error} page="TableDetailsOverview" loading={isLoading}>
+          {data && <TableOverview tableDetails={data} />}
         </Loading>
       ),
     },
diff --git a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
index 901ebbc7bf0c..113fbb318365 100644
--- a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
@@ -16,9 +16,10 @@ import { PageSection } from "src/layouts";
 import { SqlBox, SqlBoxSize } from "src/sql";
 import { SummaryCard, SummaryCardItem } from "src/summaryCard";
 import { Timestamp } from "src/timestamp";
-import { StoreID } from "src/types/clusterTypes";
 import { Bytes, DATE_WITH_SECONDS_FORMAT_24_TZ } from "src/util";
 
+import { mapStoreIDsToNodeRegions } from "../util/nodeUtils";
+
 type TableOverviewProps = {
   tableDetails: TableDetails;
 };
@@ -28,7 +29,7 @@ export const TableOverview: React.FC<TableOverviewProps> = ({
 }) => {
   const clusterDetails = useContext(ClusterDetailsContext);
   const isTenant = clusterDetails.isTenant;
-  const { metadata } = tableDetails;
+  const metadata = tableDetails.metadata;
   const {
     nodeIDToRegion,
     storeIDToNodeID,
@@ -38,19 +39,15 @@ export const TableOverview: React.FC<TableOverviewProps> = ({
   // getNodesByRegionDisplayStr returns a string that displays
   // the regions and nodes that the table is replicated across.
   const getNodesByRegionDisplayStr = (): string => {
-    if (nodesLoading || !tableDetails?.metadata) {
+    if (nodesLoading) {
       return "";
     }
-    const nodesByRegion: Record<string, number[]> = {};
-    metadata.storeIds.forEach(storeID => {
-      const nodeID = storeIDToNodeID[storeID as StoreID];
-      const region = nodeIDToRegion[nodeID];
-      if (!nodesByRegion[region]) {
-        nodesByRegion[region] = [];
-      }
-      nodesByRegion[region].push(nodeID);
-    });
-    return Object.entries(nodesByRegion)
+    const regionsToNodes = mapStoreIDsToNodeRegions(
+      tableDetails.metadata.storeIds,
+      nodeIDToRegion,
+      storeIDToNodeID,
+    );
+    return Object.entries(regionsToNodes)
       .map(
         ([region, nodes]) =>
           `${region} (${nodes.map(nid => "n" + nid).join(",")})`,