From 0d844c7ac6695efd849d8dc61fca9af453299aa1 Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <me@khairul.my.id>
Date: Sat, 1 Feb 2025 02:49:29 +0000
Subject: [PATCH] fix: err cluster page for garage v0.9.x

---
 .../cluster/components/assign-node-dialog.tsx |  6 ++++--
 src/pages/cluster/components/nodes-list.tsx   |  4 +++-
 src/pages/cluster/page.tsx                    | 20 +++++++++++++++++--
 src/pages/cluster/types.ts                    | 10 ++++++----
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/pages/cluster/components/assign-node-dialog.tsx b/src/pages/cluster/components/assign-node-dialog.tsx
index c2a7fa6..acb0af0 100644
--- a/src/pages/cluster/components/assign-node-dialog.tsx
+++ b/src/pages/cluster/components/assign-node-dialog.tsx
@@ -66,7 +66,8 @@ const AssignNodeDialog = () => {
   }, [data]);
 
   const zoneList = useMemo(() => {
-    const list = cluster?.nodes
+    const nodes = cluster?.nodes || cluster?.knownNodes || [];
+    const list = nodes
       .flatMap((i) => {
         const role = layout?.roles.find((role) => role.id === i.id);
         const staged = layout?.stagedRoleChanges.find(
@@ -83,7 +84,8 @@ const AssignNodeDialog = () => {
   }, [cluster, layout]);
 
   const tagsList = useMemo(() => {
-    const list = cluster?.nodes
+    const nodes = cluster?.nodes || cluster?.knownNodes || [];
+    const list = nodes
       .flatMap((i) => {
         const role = layout?.roles.find((role) => role.id === i.id);
         const staged = layout?.stagedRoleChanges.find(
diff --git a/src/pages/cluster/components/nodes-list.tsx b/src/pages/cluster/components/nodes-list.tsx
index da93c63..bfdcd70 100644
--- a/src/pages/cluster/components/nodes-list.tsx
+++ b/src/pages/cluster/components/nodes-list.tsx
@@ -268,7 +268,9 @@ const NodesList = ({ nodes }: NodeListProps) => {
 
                 <Dropdown
                   end
-                  vertical={idx >= items.length - 2 ? "top" : "bottom"}
+                  vertical={
+                    idx > 2 && idx >= items.length - 2 ? "top" : "bottom"
+                  }
                 >
                   <Dropdown.Toggle button={false}>
                     <Button shape="circle" color="ghost">
diff --git a/src/pages/cluster/page.tsx b/src/pages/cluster/page.tsx
index fc58552..66a3dc9 100644
--- a/src/pages/cluster/page.tsx
+++ b/src/pages/cluster/page.tsx
@@ -2,9 +2,22 @@ import Page from "@/context/page-context";
 import { useClusterStatus } from "./hooks";
 import { Card } from "react-daisyui";
 import NodesList from "./components/nodes-list";
+import { useMemo } from "react";
 
 const ClusterPage = () => {
   const { data } = useClusterStatus();
+  const nodes = useMemo(() => {
+    if (!data) return [];
+
+    if (Array.isArray(data.knownNodes)) {
+      return data.knownNodes.map((node) => ({
+        ...node,
+        role: data.layout?.roles.find((role) => role.id === node.id),
+      }));
+    }
+
+    return data.nodes || [];
+  }, [data]);
 
   return (
     <div className="container">
@@ -18,7 +31,10 @@ const ClusterPage = () => {
           <DetailItem title="Version" value={data?.garageVersion} />
           {/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
           <DetailItem title="DB engine" value={data?.dbEngine} />
-          <DetailItem title="Layout version" value={data?.layoutVersion} />
+          <DetailItem
+            title="Layout version"
+            value={data?.layoutVersion || data?.layout?.version}
+          />
         </Card.Body>
       </Card>
 
@@ -26,7 +42,7 @@ const ClusterPage = () => {
         <Card.Body>
           <Card.Title>Nodes</Card.Title>
 
-          <NodesList nodes={data?.nodes || []} />
+          <NodesList nodes={nodes} />
         </Card.Body>
       </Card>
     </div>
diff --git a/src/pages/cluster/types.ts b/src/pages/cluster/types.ts
index f84ab8e..184a360 100644
--- a/src/pages/cluster/types.ts
+++ b/src/pages/cluster/types.ts
@@ -7,7 +7,9 @@ export type GetStatusResult = {
   rustVersion: string;
   dbEngine: string;
   layoutVersion: number;
-  nodes: Node[];
+  nodes?: Node[];
+  knownNodes?: Node[];
+  layout?: GetClusterLayoutResult;
 };
 
 export type Node = {
@@ -17,9 +19,9 @@ export type Node = {
   hostname: string;
   isUp: boolean;
   lastSeenSecsAgo: number | null;
-  draining: boolean;
-  dataPartition: DataPartition;
-  metadataPartition: DataPartition;
+  draining?: boolean;
+  dataPartition?: DataPartition;
+  metadataPartition?: DataPartition;
 };
 
 export type DataPartition = {