Merge cockroachdb#132856

132856: ui: table details bug fixes r=xinhaoz a=xinhaoz - 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 <img width="1310" alt="Pasted Graphic 2" src="https://github.com/user-attachments/assets/ef71321f-e87a-4237-b138-f8303f2d3b36"> <img width="629" alt="Replicas" src="https://github.com/user-attachments/assets/3f3d607e-20a7-4b2f-9074-4da3593bad29"> Co-authored-by: Xin Hao Zhang <[email protected]>
annrpom · Oct 17, 2024 · ea879f3 · ea879f3
2 parents c49e4e0 + 3216652
commit ea879f3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git 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
@@ -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(",")})`,