README.md

@@ -39,10 +39,10 @@ services:
       - ./data:/var/lib/garage/data
     restart: unless-stopped
     ports:
-      - 3900:3900
+       - 3900:3900
-      - 3901:3901
+       - 3901:3901
-      - 3902:3903
+       - 3902:3903
-      - 3903: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.6/garage-webui-v1.0.6-linux-amd64
+$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.5/garage-webui-v1.0.5-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.6",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "dev:client": "vite",

src/pages/cluster/components/assign-node-dialog.tsx

@@ -66,8 +66,7 @@ const AssignNodeDialog = () => {
   }, [data]);
 
   const zoneList = useMemo(() => {
-    const nodes = cluster?.nodes || cluster?.knownNodes || [];
+    const list = cluster?.nodes
-    const list = nodes
       .flatMap((i) => {
         const role = layout?.roles.find((role) => role.id === i.id);
         const staged = layout?.stagedRoleChanges.find(
@@ -84,8 +83,7 @@ const AssignNodeDialog = () => {
   }, [cluster, layout]);
 
   const tagsList = useMemo(() => {
-    const nodes = cluster?.nodes || cluster?.knownNodes || [];
+    const list = cluster?.nodes
-    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,9 +268,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
 
                 <Dropdown
                   end
-                  vertical={
+                  vertical={idx >= items.length - 2 ? "top" : "bottom"}
-                    idx > 2 && idx >= items.length - 2 ? "top" : "bottom"
-                  }
                 >
                   <Dropdown.Toggle button={false}>
                     <Button shape="circle" color="ghost">

src/pages/cluster/page.tsx

@@ -2,22 +2,9 @@ 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">
@@ -31,10 +18,7 @@ const ClusterPage = () => {
           <DetailItem title="Version" value={data?.garageVersion} />
           {/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
           <DetailItem title="DB engine" value={data?.dbEngine} />
-          <DetailItem
+          <DetailItem title="Layout version" value={data?.layoutVersion} />
-            title="Layout version"
-            value={data?.layoutVersion || data?.layout?.version}
-          />
         </Card.Body>
       </Card>
 
@@ -42,7 +26,7 @@ const ClusterPage = () => {
         <Card.Body>
           <Card.Title>Nodes</Card.Title>
 
-          <NodesList nodes={nodes} />
+          <NodesList nodes={data?.nodes || []} />
         </Card.Body>
       </Card>
     </div>

src/pages/cluster/types.ts

@@ -7,9 +7,7 @@ export type GetStatusResult = {
   rustVersion: string;
   dbEngine: string;
   layoutVersion: number;
-  nodes?: Node[];
+  nodes: Node[];
-  knownNodes?: Node[];
-  layout?: GetClusterLayoutResult;
 };
 
 export type Node = {
@@ -19,9 +17,9 @@ export type Node = {
   hostname: string;
   isUp: boolean;
   lastSeenSecsAgo: number | null;
-  draining?: boolean;
+  draining: boolean;
-  dataPartition?: DataPartition;
+  dataPartition: DataPartition;
-  metadataPartition?: DataPartition;
+  metadataPartition: DataPartition;
 };
 
 export type DataPartition = {