chore: mark version 1.0.6

fix: err cluster page for garage v0.9.x
docs: update readme & docker-compose.yml
2026-09-18 10:23:21 +07:00 · 2025-02-01 02:56:52 +00:00 · 2025-02-01 02:49:29 +00:00 · 2024-11-18 10:18:03 +00:00 · 2024-10-14 00:21:30 +00:00 · 2024-10-14 00:14:34 +00:00
27 changed files with 295 additions and 122 deletions
@@ -31,14 +31,18 @@ If you install Garage using Docker, you can install this web UI alongside Garage
 ```yml
 services:
  garage:
-    image: dxflrs/garage:v1.0.0
+    image: dxflrs/garage:v1.0.1
    container_name: garage
    volumes:
      - ./garage.toml:/etc/garage.toml
      - ./meta:/var/lib/garage/meta
      - ./data:/var/lib/garage/data
    restart: unless-stopped
-    network_mode: host
+    ports:
+      - 3900:3900
+      - 3901:3901
+      - 3902:3903
+      - 3903:3903

  webui:
    image: khairul169/garage-webui:latest
@@ -48,6 +52,9 @@ services:
      - ./garage.toml:/etc/garage.toml:ro
    ports:
      - 3909:3909
+    environment:
+      API_BASE_URL: "http://garage:3903"
+      S3_ENDPOINT_URL: "http://garage:3900"
 ```

 ### Without Docker
@@ -55,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.2/garage-webui-v1.0.2-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
 ```
@@ -134,6 +141,8 @@ However, if it fails to load, you can set these environment variables instead:
 - `CONFIG_PATH`: Path to the Garage `config.toml` file. Defaults to `/etc/garage.toml`.
 - `API_BASE_URL`: Garage admin API endpoint URL.
 - `API_ADMIN_KEY`: Admin API key.
+- `S3_REGION`: S3 Region.
+- `S3_ENDPOINT_URL`: S3 Endpoint url.

 ### Running

@@ -8,6 +8,7 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/s3 v1.59.0
 	github.com/aws/smithy-go v1.20.4
 	github.com/joho/godotenv v1.5.1
+	github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
 	github.com/pelletier/go-toml/v2 v2.2.2
 )

@@ -27,6 +27,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646 h1:zYyBkD/k9seD2A7fsi6Oo2LfFZAehjjQMERAvZLEDnQ=
+github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646/go.mod h1:jpp1/29i3P1S/RLdc7JQKbRpFeM1dOBd8T9ki5s+AY8=
 github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
 github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
@@ -16,7 +16,7 @@ func main() {
 	utils.InitCacheManager()

 	if err := utils.Garage.LoadConfig(); err != nil {
-		log.Fatal("Failed to load config! ", err)
+		log.Println("Cannot load garage config!", err)
 	}

 	http.Handle("/api/", http.StripPrefix("/api", router.HandleApiRouter()))
@@ -73,8 +73,7 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
 			ObjectKey:    &key,
 			LastModified: object.LastModified,
 			Size:         object.Size,
-			ViewUrl:      fmt.Sprintf("/browse/%s/%s?view=1", bucket, *object.Key),
-			DownloadUrl:  fmt.Sprintf("/browse/%s/%s?dl=1", bucket, *object.Key),
+			Url:          fmt.Sprintf("/browse/%s/%s", bucket, *object.Key),
 		})
 	}

@@ -84,8 +83,10 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
 func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
 	bucket := r.PathValue("bucket")
 	key := r.PathValue("key")
-	view := r.URL.Query().Get("view") == "1"
-	download := r.URL.Query().Get("dl") == "1"
+	queryParams := r.URL.Query()
+	view := queryParams.Get("view") == "1"
+	thumbnail := queryParams.Get("thumb") == "1"
+	download := queryParams.Get("dl") == "1"

 	client, err := getS3Client(bucket)
 	if err != nil {
@@ -93,6 +94,18 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
 		return
 	}

+	if !view && !download && !thumbnail {
+		object, err := client.HeadObject(context.Background(), &s3.HeadObjectInput{
+			Bucket: aws.String(bucket),
+			Key:    aws.String(key),
+		})
+		if err != nil {
+			utils.ResponseError(w, err)
+		}
+		utils.ResponseSuccess(w, object)
+		return
+	}
+
 	object, err := client.GetObject(context.Background(), &s3.GetObjectInput{
 		Bucket: aws.String(bucket),
 		Key:    aws.String(key),
@@ -109,31 +122,42 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
 		return
 	}

-	if view || download {
-		defer object.Body.Close()
-		keys := strings.Split(key, "/")
-
-		w.Header().Set("Content-Type", *object.ContentType)
-		w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
-		w.Header().Set("Cache-Control", "max-age=86400")
-		w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
-		w.Header().Set("Etag", *object.ETag)
-
-		if download {
-			w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", keys[len(keys)-1]))
-		}
-
-		w.WriteHeader(http.StatusOK)
-		_, err = io.Copy(w, object.Body)
+	defer object.Body.Close()
+	keys := strings.Split(key, "/")

+	if download {
+		w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", keys[len(keys)-1]))
+	} else if thumbnail {
+		body, err := io.ReadAll(object.Body)
 		if err != nil {
 			utils.ResponseError(w, err)
 			return
 		}
+
+		thumb, err := utils.CreateThumbnailImage(body, 64, 64)
+		if err != nil {
+
+			utils.ResponseError(w, err)
+			return
+		}
+
+		w.Header().Set("Content-Type", "image/png")
+		w.Write(thumb)
 		return
 	}

-	utils.ResponseSuccess(w, object)
+	w.Header().Set("Content-Type", *object.ContentType)
+	w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
+	w.Header().Set("Cache-Control", "max-age=86400")
+	w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
+	w.Header().Set("Etag", *object.ETag)
+
+	_, err = io.Copy(w, object.Body)
+
+	if err != nil {
+		utils.ResponseError(w, err)
+		return
+	}
 }

 func (b *Browse) PutObject(w http.ResponseWriter, r *http.Request) {
@@ -300,7 +324,7 @@ func getS3Client(bucket string) (*s3.Client, error) {

 	awsConfig := aws.Config{
 		Credentials:  creds,
-		Region:       "garage",
+		Region:       utils.Garage.GetS3Region(),
 		BaseEndpoint: aws.String(utils.Garage.GetS3Endpoint()),
 	}

@@ -34,13 +34,14 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
 				return
 			}

-			var bucket schema.Bucket
-			if err := json.Unmarshal(body, &bucket); err != nil {
+			var data schema.Bucket
+			if err := json.Unmarshal(body, &data); err != nil {
 				ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}
 				return
 			}

-			ch <- bucket
+			data.LocalAliases = bucket.LocalAliases
+			ch <- data
 		}()
 	}

@@ -13,6 +13,5 @@ type BrowserObject struct {
 	ObjectKey    *string    `json:"objectKey"`
 	LastModified *time.Time `json:"lastModified"`
 	Size         *int64     `json:"size"`
-	ViewUrl      string     `json:"viewUrl"`
-	DownloadUrl  string     `json:"downloadUrl"`
+	Url          string     `json:"url"`
 }
@@ -1,14 +1,15 @@
 package schema

 type GetBucketsRes struct {
-	ID            string   `json:"id"`
-	GlobalAliases []string `json:"globalAliases"`
-	LocalAliases  []string `json:"localAliases"`
+	ID            string       `json:"id"`
+	GlobalAliases []string     `json:"globalAliases"`
+	LocalAliases  []LocalAlias `json:"localAliases"`
 }

 type Bucket struct {
 	ID                             string        `json:"id"`
 	GlobalAliases                  []string      `json:"globalAliases"`
+	LocalAliases                   []LocalAlias  `json:"localAliases"`
 	WebsiteAccess                  bool          `json:"websiteAccess"`
 	WebsiteConfig                  WebsiteConfig `json:"websiteConfig"`
 	Keys                           []KeyElement  `json:"keys"`
@@ -21,12 +22,17 @@ type Bucket struct {
 	Quotas                         Quotas        `json:"quotas"`
 }

+type LocalAlias struct {
+	AccessKeyID string `json:"accessKeyId"`
+	Alias       string `json:"alias"`
+}
+
 type KeyElement struct {
-	AccessKeyID        string        `json:"accessKeyId"`
-	Name               string        `json:"name"`
-	Permissions        Permissions   `json:"permissions"`
-	BucketLocalAliases []interface{} `json:"bucketLocalAliases"`
-	SecretAccessKey    string        `json:"secretAccessKey"`
+	AccessKeyID        string      `json:"accessKeyId"`
+	Name               string      `json:"name"`
+	Permissions        Permissions `json:"permissions"`
+	BucketLocalAliases []string    `json:"bucketLocalAliases"`
+	SecretAccessKey    string      `json:"secretAccessKey"`
 }

 type Permissions struct {
@@ -1,18 +1,12 @@
 package schema

 type Config struct {
-	CompressionLevel             int64  `json:"compression_level" toml:"compression_level"`
-	DataDir                      string `json:"data_dir" toml:"data_dir"`
-	DBEngine                     string `json:"db_engine" toml:"db_engine"`
-	MetadataAutoSnapshotInterval string `json:"metadata_auto_snapshot_interval" toml:"metadata_auto_snapshot_interval"`
-	MetadataDir                  string `json:"metadata_dir" toml:"metadata_dir"`
-	ReplicationFactor            int64  `json:"replication_factor" toml:"replication_factor"`
-	RPCBindAddr                  string `json:"rpc_bind_addr" toml:"rpc_bind_addr"`
-	RPCPublicAddr                string `json:"rpc_public_addr" toml:"rpc_public_addr"`
-	RPCSecret                    string `json:"rpc_secret" toml:"rpc_secret"`
-	Admin                        Admin  `json:"admin" toml:"admin"`
-	S3API                        S3API  `json:"s3_api" toml:"s3_api"`
-	S3Web                        S3Web  `json:"s3_web" toml:"s3_web"`
+	RPCBindAddr   string `json:"rpc_bind_addr" toml:"rpc_bind_addr"`
+	RPCPublicAddr string `json:"rpc_public_addr" toml:"rpc_public_addr"`
+	RPCSecret     string `json:"rpc_secret" toml:"rpc_secret"`
+	Admin         Admin  `json:"admin" toml:"admin"`
+	S3API         S3API  `json:"s3_api" toml:"s3_api"`
+	S3Web         S3Web  `json:"s3_web" toml:"s3_web"`
 }

 type Admin struct {
@@ -3,6 +3,7 @@ package utils
 import (
 	"bytes"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"khairul169/garage-webui/schema"
@@ -73,6 +74,17 @@ func (g *garage) GetS3Endpoint() string {
 	return endpoint
 }

+func (g *garage) GetS3Region() string {
+	endpoint := os.Getenv("S3_REGION")
+	if len(endpoint) > 0 {
+		return endpoint
+	}
+	if len(g.Config.S3API.S3Region) == 0 {
+		return "garage"
+	}
+	return g.Config.S3API.S3Region
+}
+
 func (g *garage) GetAdminKey() string {
 	key := os.Getenv("API_ADMIN_KEY")
 	if len(key) > 0 {
@@ -153,7 +165,7 @@ func (g *garage) Fetch(url string, options *FetchOptions) ([]byte, error) {
 			message = fmt.Sprintf("%v", data["message"])
 		}

-		return nil, fmt.Errorf(message)
+		return nil, errors.New(message)
 	}

 	body, err := io.ReadAll(res.Body)
@@ -0,0 +1,26 @@
+package utils
+
+import (
+	"bytes"
+	"image"
+	_ "image/gif"
+	"image/jpeg"
+	_ "image/png"
+
+	"github.com/nfnt/resize"
+)
+
+func CreateThumbnailImage(buffer []byte, width uint, height uint) ([]byte, error) {
+	img, _, err := image.Decode(bytes.NewReader(buffer))
+	if err != nil {
+		return nil, err
+	}
+
+	thumb := resize.Thumbnail(width, height, img, resize.NearestNeighbor)
+	buf := new(bytes.Buffer)
+	if err := jpeg.Encode(buf, thumb, nil); err != nil {
+		return nil, err
+	}
+
+	return buf.Bytes(), nil
+}
@@ -1,13 +1,17 @@
 services:
  garage:
-    image: dxflrs/garage:v1.0.0
+    image: dxflrs/garage:v1.0.1
    container_name: garage
    volumes:
      - ./garage.toml:/etc/garage.toml
      - ./meta:/var/lib/garage/meta
      - ./data:/var/lib/garage/data
    restart: unless-stopped
-    network_mode: host
+    ports:
+       - 3900:3900
+       - 3901:3901
+       - 3902:3903
+       - 3903:3903

  webui:
    image: khairul169/garage-webui:latest
@@ -17,3 +21,7 @@ services:
      - ./garage.toml:/etc/garage.toml:ro
    ports:
      - 3909:3909
+    environment:
+      API_BASE_URL: "http://garage:3903"
+      S3_ENDPOINT_URL: "http://garage:3900"
+
@@ -1,7 +1,7 @@
 {
  "name": "garage-webui",
  "private": true,
-  "version": "1.0.2",
+  "version": "1.0.6",
  "type": "module",
  "scripts": {
    "dev:client": "vite",
@@ -30,23 +30,21 @@ const api = {
      headers: { ...headers, ...(options?.headers || {}) },
    });

-    if (!res.ok) {
-      const json = await res.json().catch(() => {});
-      const message = json?.message || res.statusText;
-      throw new Error(message);
-    }
-
    const isJson = res.headers
      .get("Content-Type")
      ?.includes("application/json");
+    const data = isJson ? await res.json() : await res.text();

-    if (isJson) {
-      const json = (await res.json()) as T;
-      return json;
+    if (!res.ok) {
+      const message = isJson
+        ? data?.message
+        : typeof data === "string"
+        ? data
+        : res.statusText;
+      throw new Error(message);
    }

-    const text = await res.text();
-    return text as unknown as T;
+    return data as unknown as T;
  },

  async get<T = any>(url: string, options?: Partial<FetchOptions>) {
@@ -4,7 +4,7 @@ import { readableBytes } from "@/lib/utils";
 import Button from "@/components/ui/button";

 type Props = {
-  data: Bucket;
+  data: Bucket & { aliases: string[] };
 };

 const BucketCard = ({ data }: Props) => {
@@ -15,7 +15,7 @@ const BucketCard = ({ data }: Props) => {
          <ArchiveIcon size={28} className="shrink-0" />

          <p className="text-xl font-medium truncate">
-            {data.globalAliases?.join(", ")}
+            {data.aliases?.join(", ")}
          </p>
        </div>

@@ -12,7 +12,7 @@ import { shareDialog } from "./share-dialog";

 type Props = {
  prefix?: string;
-  object: Pick<Object, "objectKey" | "downloadUrl">;
+  object: Pick<Object, "objectKey" | "url">;
  end?: boolean;
 };

@@ -30,7 +30,7 @@ const ObjectActions = ({ prefix = "", object, end }: Props) => {
  });

  const onDownload = () => {
-    window.open(API_URL + object.downloadUrl, "_blank");
+    window.open(API_URL + object.url + "?dl=1", "_blank");
  };

  const onDelete = () => {
@@ -1,10 +1,16 @@
-import { Table } from "react-daisyui";
+import { Alert, Loading, Table } from "react-daisyui";
 import { useBrowseObjects } from "./hooks";
 import { dayjs, readableBytes } from "@/lib/utils";
 import mime from "mime/lite";
 import { Object } from "./types";
 import { API_URL } from "@/lib/api";
-import { FileArchive, FileIcon, FileType, Folder } from "lucide-react";
+import {
+  CircleXIcon,
+  FileArchive,
+  FileIcon,
+  FileType,
+  Folder,
+} from "lucide-react";
 import { useBucketContext } from "../context";
 import ObjectActions from "./object-actions";
 import GotoTopButton from "@/components/ui/goto-top-btn";
@@ -16,14 +22,17 @@ type Props = {

 const ObjectList = ({ prefix, onPrefixChange }: Props) => {
  const { bucketName } = useBucketContext();
-  const { data } = useBrowseObjects(bucketName, { prefix, limit: 1000 });
+  const { data, error, isLoading } = useBrowseObjects(bucketName, {
+    prefix,
+    limit: 1000,
+  });

  const onObjectClick = (object: Object) => {
-    window.open(API_URL + object.viewUrl, "_blank");
+    window.open(API_URL + object.url + "?view=1", "_blank");
  };

  return (
-    <div className="overflow-x-auto overflow-y-hidden">
+    <div className="overflow-x-auto min-h-[400px]">
      <Table>
        <Table.Head>
          <span>Name</span>
@@ -32,13 +41,29 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
        </Table.Head>

        <Table.Body>
-          {!data?.prefixes?.length && !data?.objects?.length && (
+          {isLoading ? (
            <tr>
-              <td className="text-center py-8" colSpan={3}>
+              <td colSpan={3}>
+                <div className="h-[320px] flex items-center justify-center">
+                  <Loading />
+                </div>
+              </td>
+            </tr>
+          ) : error ? (
+            <tr>
+              <td colSpan={3}>
+                <Alert status="error" icon={<CircleXIcon />}>
+                  <span>{error.message}</span>
+                </Alert>
+              </td>
+            </tr>
+          ) : !data?.prefixes?.length && !data?.objects?.length ? (
+            <tr>
+              <td className="text-center py-16" colSpan={3}>
                No objects
              </td>
            </tr>
-          )}
+          ) : null}

          {data?.prefixes.map((prefix) => (
            <tr
@@ -59,7 +84,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
                </span>
              </td>
              <td colSpan={2} />
-              <ObjectActions object={{ objectKey: prefix, downloadUrl: "" }} />
+              <ObjectActions object={{ objectKey: prefix, url: "" }} />
            </tr>
          ))}

@@ -96,7 +121,9 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
                <ObjectActions
                  prefix={data.prefix}
                  object={object}
-                  end={idx >= data.objects.length - 2}
+                  end={
+                    idx >= data.objects.length - 2 && data.objects.length > 5
+                  }
                />
              </tr>
            );
@@ -125,9 +152,10 @@ const FilePreview = ({ ext, object }: FilePreviewProps) => {
  }

  if (type === "image") {
+    const thumbnailSupport = ["jpg", "jpeg", "png", "gif"].includes(ext || "");
    return (
      <img
-        src={API_URL + object.viewUrl}
+        src={API_URL + object.url + (thumbnailSupport ? "?thumb=1" : "?view=1")}
        alt={object.objectKey}
        className="size-5 object-cover overflow-hidden mr-2"
      />
@@ -15,8 +15,7 @@ export type Object = {
  objectKey: string;
  lastModified: Date;
  size: number;
-  viewUrl: string;
-  downloadUrl: string;
+  url: string;
 };

 export type PutObjectPayload = {
@@ -2,12 +2,18 @@ import { useParams } from "react-router-dom";
 import { useBucket } from "./hooks";
 import Page from "@/context/page-context";
 import TabView, { Tab } from "@/components/containers/tab-view";
-import { ChartLine, FolderSearch, LockKeyhole } from "lucide-react";
+import {
+  ChartLine,
+  CircleXIcon,
+  FolderSearch,
+  LockKeyhole,
+} from "lucide-react";
 import OverviewTab from "./overview/overview-tab";
 import PermissionsTab from "./permissions/permissions-tab";
 import MenuButton from "./components/menu-button";
 import BrowseTab from "./browse/browse-tab";
 import { BucketContext } from "./context";
+import { Alert, Loading } from "react-daisyui";

 const tabs: Tab[] = [
  {
@@ -32,26 +38,40 @@ const tabs: Tab[] = [

 const ManageBucketPage = () => {
  const { id } = useParams();
-  const { data, refetch } = useBucket(id);
+  const { data, error, isLoading, refetch } = useBucket(id);

  const name = data?.globalAliases[0];

  return (
-    <div className="container">
+    <>
      <Page
        title={name || "Manage Bucket"}
        prev="/buckets"
        actions={data ? <MenuButton /> : undefined}
      />

-      {data && (
-        <BucketContext.Provider
-          value={{ bucket: data, refetch, bucketName: name || "" }}
-        >
-          <TabView tabs={tabs} className="bg-base-100 h-14 px-1.5" />
-        </BucketContext.Provider>
+      {isLoading && (
+        <div className="h-full flex items-center justify-center">
+          <Loading size="lg" />
+        </div>
      )}
-    </div>
+
+      {error != null && (
+        <Alert status="error" icon={<CircleXIcon />}>
+          <span>{error.message}</span>
+        </Alert>
+      )}
+
+      {data && (
+        <div className="container">
+          <BucketContext.Provider
+            value={{ bucket: data, refetch, bucketName: name || "" }}
+          >
+            <TabView tabs={tabs} className="bg-base-100 h-14 px-1.5" />
+          </BucketContext.Provider>
+        </div>
+      )}
+    </>
  );
 };

@@ -84,7 +84,7 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
        Allow Key
      </Button>

-      <Modal ref={dialogRef} backdrop open={isOpen}>
+      <Modal ref={dialogRef} backdrop open={isOpen} className="max-w-2xl">
        <Modal.Header className="mb-1">Allow Key</Modal.Header>
        <Modal.Body>
          <p>Enter the key you want to allow access to.</p>
@@ -100,6 +100,7 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
                  />
                  Key
                </label>
+                <label>Local Aliases</label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <Checkbox
                    color="primary"
@@ -129,23 +130,31 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
              <Table.Body>
                {!keyFields.length ? (
                  <tr>
-                    <td colSpan={4} className="text-center">
+                    <td colSpan={5} className="text-center">
                      No keys found
                    </td>
                  </tr>
                ) : null}
-                {keyFields.map((field, index) => (
-                  <Table.Row key={field.id}>
-                    <CheckboxField
-                      form={form}
-                      name={`keys.${index}.checked`}
-                      label={field.name || field.keyId?.substring(0, 8)}
-                    />
-                    <CheckboxField form={form} name={`keys.${index}.read`} />
-                    <CheckboxField form={form} name={`keys.${index}.write`} />
-                    <CheckboxField form={form} name={`keys.${index}.owner`} />
-                  </Table.Row>
-                ))}
+                {keyFields.map((field, index) => {
+                  const curKey = bucket.keys.find(
+                    (key) => key.accessKeyId === field.keyId
+                  );
+                  return (
+                    <Table.Row key={field.id}>
+                      <CheckboxField
+                        form={form}
+                        name={`keys.${index}.checked`}
+                        label={field.name || field.keyId?.substring(0, 8)}
+                      />
+                      <span>
+                        {curKey?.bucketLocalAliases?.join(", ") || "-"}
+                      </span>
+                      <CheckboxField form={form} name={`keys.${index}.read`} />
+                      <CheckboxField form={form} name={`keys.${index}.write`} />
+                      <CheckboxField form={form} name={`keys.${index}.owner`} />
+                    </Table.Row>
+                  );
+                })}
              </Table.Body>
            </Table>
          </div>
@@ -50,6 +50,7 @@ const PermissionsTab = () => {
            <Table.Head>
              <span>#</span>
              <span>Key</span>
+              <span>Aliases</span>
              <span>Read</span>
              <span>Write</span>
              <span>Owner</span>
@@ -61,6 +62,7 @@ const PermissionsTab = () => {
                <Table.Row>
                  <span>{idx + 1}</span>
                  <span>{key.name || key.accessKeyId?.substring(0, 8)}</span>
+                  <span>{key.bucketLocalAliases?.join(", ") || "-"}</span>
                  <span>
                    <Checkbox
                      checked={key.permissions?.read}
@@ -10,20 +10,27 @@ const BucketsPage = () => {
  const [search, setSearch] = useState("");

  const items = useMemo(() => {
-    let buckets = data || [];
+    let buckets =
+      data?.map((bucket) => {
+        return {
+          ...bucket,
+          aliases: [
+            ...(bucket.globalAliases || []),
+            ...(bucket.localAliases?.map((l) => l.alias) || []),
+          ],
+        };
+      }) || [];

    if (search?.length > 0) {
      const q = search.toLowerCase();
      buckets = buckets.filter(
        (bucket) =>
          bucket.id.includes(q) ||
-          bucket.globalAliases.find((alias) => alias.includes(q))
+          bucket.aliases.find((alias) => alias.includes(q))
      );
    }

-    buckets = buckets.sort((a, b) =>
-      a.globalAliases[0].localeCompare(b.globalAliases[0])
-    );
+    buckets = buckets.sort((a, b) => a.aliases[0].localeCompare(b.aliases[0]));

    return buckets;
  }, [data, search]);
@@ -5,6 +5,7 @@ export type GetBucketRes = Bucket[];
 export type Bucket = {
  id: string;
  globalAliases: string[];
+  localAliases: LocalAlias[];
  websiteAccess: boolean;
  websiteConfig?: WebsiteConfig | null;
  keys: Key[];
@@ -17,11 +18,16 @@ export type Bucket = {
  quotas: Quotas;
 };

+export type LocalAlias = {
+  accessKeyId: string;
+  alias: string;
+};
+
 export type Key = {
  accessKeyId: string;
  name: string;
  permissions: Permissions;
-  bucketLocalAliases: any[];
+  bucketLocalAliases: string[];
 };

 export type Permissions = {
@@ -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(
@@ -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">
@@ -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>
@@ -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 = {
Author	SHA1	Message	Date
khairul169	8728108d18	chore: mark version 1.0.6	2025-02-01 02:56:52 +00:00
khairul169	0d844c7ac6	fix: err cluster page for garage v0.9.x	2025-02-01 02:49:29 +00:00
khairul169	ccfa2cde25	docs: update readme & docker-compose.yml	2024-11-18 10:18:03 +00:00
khairul169	b8b87d8289	chore: mark version 1.0.5, update readme	2024-10-14 00:21:30 +00:00
khairul169	1b1b815443	feat: show thumbnails in browser listing, fix object actions overflow	2024-10-14 00:14:34 +00:00
khairul169	37027396ca	fix: make s3_region configurable to support values other than "garage"	2024-10-13 23:39:22 +00:00
khairul169	c1619276c0	feat: properly handle data fetching state on view bucket page	2024-10-13 22:49:20 +00:00
khairul169	611258d0db	chore: bump version to 1.0.4, update readme	2024-10-04 17:15:03 +00:00
khairul169	91c396dd68	fix: remove unused config struct key, fix local aliases parsing error	2024-10-04 17:13:47 +00:00
khairul169	5a90dd8377	chore: mark version 1.0.3	2024-08-23 05:29:42 +07:00