Merge pull request #5 from khairul169/fix/v0-api

fix: make it compatible for garage v0.9.x

README.md

@@ -39,10 +39,10 @@ services:
       - ./data:/var/lib/garage/data
     restart: unless-stopped
     ports:
-       - 3900:3900
-       - 3901:3901
-       - 3902:3903
-       - 3903:3903
+      - 3900:3900
+      - 3901:3901
+      - 3902:3903
+      - 3903:3903
 
   webui:
     image: khairul169/garage-webui:latest
@@ -62,7 +62,7 @@ services:
 Get the latest binary from the [release page](https://github.com/khairul169/garage-webui/releases/latest) according to your OS architecture. For example:
 
 ```sh
-$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.5/garage-webui-v1.0.5-linux-amd64
+$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.6/garage-webui-v1.0.6-linux-amd64
 $ chmod +x garage-webui
 $ sudo cp garage-webui /usr/local/bin
 ```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "garage-webui",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev:client": "vite",
@@ -48,4 +48,4 @@
     "typescript-eslint": "^8.0.0",
     "vite": "^5.4.0"
   }
-}
+}

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(

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">

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>

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 = {