chore: bump version to 1.0.4, update readme

README.md

@@ -31,7 +31,7 @@ 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
@@ -55,7 +55,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.1/garage-webui-v1.0.1-linux-amd64
+$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.4/garage-webui-v1.0.4-linux-amd64
 $ chmod +x garage-webui
 $ sudo cp garage-webui /usr/local/bin
 ```

backend/router/browse.go

@@ -16,6 +16,7 @@ import (
 	"github.com/aws/aws-sdk-go-v2/aws"
 	"github.com/aws/aws-sdk-go-v2/credentials"
 	"github.com/aws/aws-sdk-go-v2/service/s3"
+	"github.com/aws/aws-sdk-go-v2/service/s3/types"
 	"github.com/aws/smithy-go"
 )
 
@@ -183,6 +184,8 @@ func (b *Browse) PutObject(w http.ResponseWriter, r *http.Request) {
 func (b *Browse) DeleteObject(w http.ResponseWriter, r *http.Request) {
 	bucket := r.PathValue("bucket")
 	key := r.PathValue("key")
+	recursive := r.URL.Query().Get("recursive") == "true"
+	isDirectory := strings.HasSuffix(key, "/")
 
 	client, err := getS3Client(bucket)
 	if err != nil {
@@ -190,7 +193,52 @@ func (b *Browse) DeleteObject(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	_, err = client.DeleteObject(context.Background(), &s3.DeleteObjectInput{
+	// Delete directory and its content
+	if isDirectory && recursive {
+		objects, err := client.ListObjectsV2(context.Background(), &s3.ListObjectsV2Input{
+			Bucket: aws.String(bucket),
+			Prefix: aws.String(key),
+		})
+
+		if err != nil {
+			utils.ResponseError(w, err)
+			return
+		}
+
+		if len(objects.Contents) == 0 {
+			utils.ResponseSuccess(w, true)
+			return
+		}
+
+		keys := make([]types.ObjectIdentifier, 0, len(objects.Contents))
+
+		for _, object := range objects.Contents {
+			keys = append(keys, types.ObjectIdentifier{
+				Key: object.Key,
+			})
+		}
+
+		res, err := client.DeleteObjects(context.Background(), &s3.DeleteObjectsInput{
+			Bucket: aws.String(bucket),
+			Delete: &types.Delete{Objects: keys},
+		})
+
+		if err != nil {
+			utils.ResponseError(w, fmt.Errorf("cannot delete object: %w", err))
+			return
+		}
+
+		if len(res.Errors) > 0 {
+			utils.ResponseError(w, fmt.Errorf("cannot delete object: %v", res.Errors[0]))
+			return
+		}
+
+		utils.ResponseSuccess(w, res)
+		return
+	}
+
+	// Delete single object
+	res, err := client.DeleteObject(context.Background(), &s3.DeleteObjectInput{
 		Bucket: aws.String(bucket),
 		Key:    aws.String(key),
 	})
@@ -200,7 +248,7 @@ func (b *Browse) DeleteObject(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	utils.ResponseSuccess(w, nil)
+	utils.ResponseSuccess(w, res)
 }
 
 func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {

backend/router/buckets.go

@@ -34,13 +34,14 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
 				return
 			}
 
-			var bucket schema.Bucket
+			var data schema.Bucket
-			if err := json.Unmarshal(body, &bucket); err != nil {
+			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
 		}()
 	}
 

backend/schema/bucket.go

@@ -1,14 +1,15 @@
 package schema
 
 type GetBucketsRes struct {
-	ID            string   `json:"id"`
+	ID            string       `json:"id"`
-	GlobalAliases []string `json:"globalAliases"`
+	GlobalAliases []string     `json:"globalAliases"`
-	LocalAliases  []string `json:"localAliases"`
+	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"`
+	AccessKeyID        string      `json:"accessKeyId"`
-	Name               string        `json:"name"`
+	Name               string      `json:"name"`
-	Permissions        Permissions   `json:"permissions"`
+	Permissions        Permissions `json:"permissions"`
-	BucketLocalAliases []interface{} `json:"bucketLocalAliases"`
+	BucketLocalAliases []string    `json:"bucketLocalAliases"`
-	SecretAccessKey    string        `json:"secretAccessKey"`
+	SecretAccessKey    string      `json:"secretAccessKey"`
 }
 
 type Permissions struct {

backend/schema/config.go

@@ -1,18 +1,12 @@
 package schema
 
 type Config struct {
-	CompressionLevel             int64  `json:"compression_level" toml:"compression_level"`
+	RPCBindAddr   string `json:"rpc_bind_addr" toml:"rpc_bind_addr"`
-	DataDir                      string `json:"data_dir" toml:"data_dir"`
+	RPCPublicAddr string `json:"rpc_public_addr" toml:"rpc_public_addr"`
-	DBEngine                     string `json:"db_engine" toml:"db_engine"`
+	RPCSecret     string `json:"rpc_secret" toml:"rpc_secret"`
-	MetadataAutoSnapshotInterval string `json:"metadata_auto_snapshot_interval" toml:"metadata_auto_snapshot_interval"`
+	Admin         Admin  `json:"admin" toml:"admin"`
-	MetadataDir                  string `json:"metadata_dir" toml:"metadata_dir"`
+	S3API         S3API  `json:"s3_api" toml:"s3_api"`
-	ReplicationFactor            int64  `json:"replication_factor" toml:"replication_factor"`
+	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 {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "garage-webui",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev:client": "vite",

src/components/layouts/main-layout.tsx

@@ -21,7 +21,7 @@ const MainLayout = () => {
     <Drawer
       open={sidebar.isOpen}
       onClickOverlay={sidebar.onClose}
-      className="md:drawer-open h-screen"
+      className="md:drawer-open h-screen max-h-dvh"
       side={<Sidebar />}
       contentClassName="flex flex-col overflow-hidden"
     >

src/pages/buckets/components/bucket-card.tsx

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

src/pages/buckets/manage/browse/hooks.ts

@@ -40,10 +40,13 @@ export const usePutObject = (
 
 export const useDeleteObject = (
   bucket: string,
-  options?: UseMutationOptions<any, Error, string>
+  options?: UseMutationOptions<any, Error, { key: string; recursive?: boolean }>
 ) => {
   return useMutation({
-    mutationFn: (key) => api.delete(`/browse/${bucket}/${key}`),
+    mutationFn: (data) =>
+      api.delete(`/browse/${bucket}/${data.key}`, {
+        params: { recursive: data.recursive },
+      }),
     ...options,
   });
 };

src/pages/buckets/manage/browse/object-actions.tsx

@@ -13,9 +13,10 @@ import { shareDialog } from "./share-dialog";
 type Props = {
   prefix?: string;
   object: Pick<Object, "objectKey" | "downloadUrl">;
+  end?: boolean;
 };
 
-const ObjectActions = ({ prefix = "", object }: Props) => {
+const ObjectActions = ({ prefix = "", object, end }: Props) => {
   const { bucketName } = useBucketContext();
   const queryClient = useQueryClient();
   const isDirectory = object.objectKey.endsWith("/");
@@ -33,8 +34,17 @@ const ObjectActions = ({ prefix = "", object }: Props) => {
   };
 
   const onDelete = () => {
-    if (window.confirm("Are you sure you want to delete this object?")) {
+    if (
-      deleteObject.mutate(prefix + object.objectKey);
+      window.confirm(
+        `Are you sure you want to delete this ${
+          isDirectory ? "directory and its content" : "object"
+        }?`
+      )
+    ) {
+      deleteObject.mutate({
+        key: prefix + object.objectKey,
+        recursive: isDirectory,
+      });
     }
   };
 
@@ -45,12 +55,12 @@ const ObjectActions = ({ prefix = "", object }: Props) => {
           <Button icon={DownloadIcon} color="ghost" onClick={onDownload} />
         )}
 
-        <Dropdown end>
+        <Dropdown end vertical={end ? "top" : "bottom"}>
           <Dropdown.Toggle button={false}>
             <Button icon={EllipsisVertical} color="ghost" />
           </Dropdown.Toggle>
 
-          <Dropdown.Menu className="bg-base-300 gap-y-1">
+          <Dropdown.Menu className="gap-y-1">
             <Dropdown.Item
               onClick={() =>
                 shareDialog.open({ key: object.objectKey, prefix })

src/pages/buckets/manage/browse/object-list.tsx

@@ -23,7 +23,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
   };
 
   return (
-    <div className="overflow-x-auto pb-32">
+    <div className="overflow-x-auto overflow-y-hidden">
       <Table>
         <Table.Head>
           <span>Name</span>
@@ -63,7 +63,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
             </tr>
           ))}
 
-          {data?.objects.map((object) => {
+          {data?.objects.map((object, idx) => {
             const extIdx = object.objectKey.lastIndexOf(".");
             const filename =
               extIdx >= 0
@@ -93,7 +93,11 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
                 <td className="whitespace-nowrap">
                   {dayjs(object.lastModified).fromNow()}
                 </td>
-                <ObjectActions prefix={data.prefix} object={object} />
+                <ObjectActions
+                  prefix={data.prefix}
+                  object={object}
+                  end={idx >= data.objects.length - 2}
+                />
               </tr>
             );
           })}

src/pages/buckets/manage/permissions/allow-key-dialog.tsx

@@ -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) => (
+                {keyFields.map((field, index) => {
-                  <Table.Row key={field.id}>
+                  const curKey = bucket.keys.find(
-                    <CheckboxField
+                    (key) => key.accessKeyId === field.keyId
-                      form={form}
+                  );
-                      name={`keys.${index}.checked`}
+                  return (
-                      label={field.name || field.keyId?.substring(0, 8)}
+                    <Table.Row key={field.id}>
-                    />
+                      <CheckboxField
-                    <CheckboxField form={form} name={`keys.${index}.read`} />
+                        form={form}
-                    <CheckboxField form={form} name={`keys.${index}.write`} />
+                        name={`keys.${index}.checked`}
-                    <CheckboxField form={form} name={`keys.${index}.owner`} />
+                        label={field.name || field.keyId?.substring(0, 8)}
-                  </Table.Row>
+                      />
-                ))}
+                      <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>

src/pages/buckets/manage/permissions/permissions-tab.tsx

@@ -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}

src/pages/buckets/page.tsx

@@ -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) =>
+    buckets = buckets.sort((a, b) => a.aliases[0].localeCompare(b.aliases[0]));
-      a.globalAliases[0].localeCompare(b.globalAliases[0])
-    );
 
     return buckets;
   }, [data, search]);

src/pages/buckets/types.ts

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

src/pages/cluster/components/nodes-list.tsx

@@ -184,7 +184,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
         </Alert>
       ) : null}
 
-      <div className="w-full overflow-x-auto min-h-[400px] pb-16">
+      <div className="w-full overflow-x-auto overflow-y-hidden min-h-[400px]">
         <Table size="sm" className="min-w-[800px]">
           <Table.Head>
             <span>#</span>
@@ -266,7 +266,10 @@ const NodesList = ({ nodes }: NodeListProps) => {
                     : "Inactive"}
                 </Badge>
 
-                <Dropdown end>
+                <Dropdown
+                  end
+                  vertical={idx >= items.length - 2 ? "top" : "bottom"}
+                >
                   <Dropdown.Toggle button={false}>
                     <Button shape="circle" color="ghost">
                       <EllipsisVertical />

src/pages/keys/page.tsx

@@ -96,6 +96,7 @@ const KeysPage = () => {
                       icon={Eye}
                       size="sm"
                       onClick={() => fetchSecretKey(key.id)}
+                      className="shrink-0 min-w-[80px]"
                     >
                       View
                     </Button>