feat: add cluster & bucket management

src/app/router.tsx

@@ -1,8 +1,12 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { lazy } from "react";
 import AuthLayout from "@/components/layouts/auth-layout";
 import MainLayout from "@/components/layouts/main-layout";
-import ClusterPage from "@/pages/cluster/page";
-import HomePage from "@/pages/home/page";
+
+const ClusterPage = lazy(() => import("@/pages/cluster/page"));
+const HomePage = lazy(() => import("@/pages/home/page"));
+const BucketsPage = lazy(() => import("@/pages/buckets/page"));
+const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
 
 const router = createBrowserRouter([
   {
@@ -21,6 +25,13 @@ const router = createBrowserRouter([
         path: "cluster",
         Component: ClusterPage,
       },
+      {
+        path: "buckets",
+        children: [
+          { index: true, Component: BucketsPage },
+          { path: ":id", Component: ManageBucketPage },
+        ],
+      },
     ],
   },
 ]);

src/app/styles.css

@@ -5,7 +5,13 @@
 @layer base {
   html,
   body {
-    @apply bg-base-200;
+    @apply bg-base-200 overflow-hidden;
+  }
+}
+
+@layer utilities {
+  .container {
+    @apply max-w-5xl;
   }
 }
 

src/components/containers/sidebar.tsx

@@ -0,0 +1,40 @@
+import { Cylinder, HardDrive, LayoutDashboard } from "lucide-react";
+import { Menu } from "react-daisyui";
+import { Link } from "react-router-dom";
+
+const Sidebar = () => {
+  return (
+    <aside className="bg-base-100 border-r border-base-300/30 w-[220px] overflow-y-auto">
+      <div className="p-4">
+        <img
+          src="https://garagehq.deuxfleurs.fr/images/garage-logo.svg"
+          alt="logo"
+          className="w-full max-w-[100px] mx-auto"
+        />
+        <p className="text-sm font-medium text-center">WebUI</p>
+      </div>
+      <Menu className="gap-y-1">
+        <Menu.Item>
+          <Link to="/">
+            <LayoutDashboard />
+            <p>Dashboard</p>
+          </Link>
+        </Menu.Item>
+        <Menu.Item>
+          <Link to="/cluster">
+            <HardDrive />
+            <p>Cluster</p>
+          </Link>
+        </Menu.Item>
+        <Menu.Item>
+          <Link to="/buckets">
+            <Cylinder />
+            <p>Buckets</p>
+          </Link>
+        </Menu.Item>
+      </Menu>
+    </aside>
+  );
+};
+
+export default Sidebar;

src/components/containers/tab-view.tsx

@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { useMemo } from "react";
+import { Tabs } from "react-daisyui";
+import { useSearchParams } from "react-router-dom";
+
+export type Tab = {
+  name: string;
+  title?: string;
+  icon?: LucideIcon;
+  Component?: () => JSX.Element;
+};
+
+type Props = {
+  tabs: Tab[];
+  name?: string;
+  className?: string;
+  contentClassName?: string;
+};
+
+const TabView = ({
+  tabs,
+  name = "tab",
+  className,
+  contentClassName,
+}: Props) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const curTab = searchParams.get(name) || tabs[0].name;
+
+  const content = useMemo(() => {
+    const Comp = tabs.find((tab) => tab.name === curTab)?.Component;
+    return Comp ? <Comp /> : null;
+  }, [curTab, tabs]);
+
+  return (
+    <>
+      <Tabs
+        variant="boxed"
+        className={cn("w-auto inline-flex flex-row items-stretch", className)}
+      >
+        {tabs.map(({ icon: Icon, ...tab }) => (
+          <Tabs.Tab
+            key={tab.name}
+            active={curTab === tab.name}
+            className="flex flex-row items-center gap-x-2 h-auto"
+            onClick={() => {
+              setSearchParams((params) => {
+                params.set(name, tab.name);
+                return params;
+              });
+            }}
+          >
+            {Icon ? <Icon size={20} /> : null}
+            <span>{tab.title || tab.name}</span>
+          </Tabs.Tab>
+        ))}
+      </Tabs>
+
+      <div className={cn("mt-4", contentClassName)}>{content}</div>
+    </>
+  );
+};
+
+export default TabView;

src/components/layouts/main-layout.tsx

@@ -1,8 +1,9 @@
 import { PageContext } from "@/context/page-context";
-import { useContext } from "react";
-import { Link, Outlet } from "react-router-dom";
-import { Menu } from "react-daisyui";
-import { HardDrive, LayoutDashboard } from "lucide-react";
+import { Suspense, useContext } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import Sidebar from "../containers/sidebar";
+import { ArrowLeft } from "lucide-react";
+import Button from "../ui/button";
 
 const MainLayout = () => {
   return (
@@ -13,50 +14,33 @@ const MainLayout = () => {
         <Header />
 
         <main className="flex-1 overflow-y-auto p-4 md:p-8">
-          <div className="container max-w-5xl">
+          <Suspense>
             <Outlet />
-          </div>
+          </Suspense>
         </main>
       </div>
     </div>
   );
 };
 
-const Sidebar = () => {
-  return (
-    <aside className="bg-base-100 border-r border-base-300/30 w-[220px] overflow-y-auto">
-      <div className="p-4">
-        <img
-          src="https://garagehq.deuxfleurs.fr/images/garage-logo.svg"
-          alt="logo"
-          className="w-full max-w-[100px] mx-auto"
-        />
-        <p className="text-sm font-medium text-center">WebUI</p>
-      </div>
-      <Menu className="gap-y-1">
-        <Menu.Item>
-          <Link to="/">
-            <LayoutDashboard />
-            <p>Dashboard</p>
-          </Link>
-        </Menu.Item>
-        <Menu.Item>
-          <Link to="/cluster">
-            <HardDrive />
-            <p>Cluster</p>
-          </Link>
-        </Menu.Item>
-      </Menu>
-    </aside>
-  );
-};
-
 const Header = () => {
   const page = useContext(PageContext);
+  const navigate = useNavigate();
 
   return (
-    <header className="bg-base-100 p-4 md:p-8 md:py-6 flex flex-row items-center gap-4">
-      <h1 className="text-2xl font-medium">{page?.title || "Dashboard"}</h1>
+    <header className="bg-base-100 px-4 h-16 md:px-8 md:h-20 flex flex-row items-center gap-4">
+      {page?.prev ? (
+        <Button
+          href={page.prev}
+          onClick={() => navigate(page.prev!, { replace: true })}
+          color="ghost"
+          shape="circle"
+          className="-ml-4"
+        >
+          <ArrowLeft />
+        </Button>
+      ) : null}
+      <h1 className="text-xl">{page?.title || "Dashboard"}</h1>
     </header>
   );
 };

src/components/ui/button.tsx

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { Button as BaseButton } from "react-daisyui";
+import { Link } from "react-router-dom";
+
+type ButtonProps = ComponentPropsWithoutRef<typeof BaseButton> & {
+  href?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ href, ...props }, ref) => {
+    return (
+      <BaseButton
+        ref={ref}
+        tag={href ? Link : undefined}
+        {...props}
+        {...(href ? { to: href } : {})}
+      />
+    );
+  }
+);
+
+export default Button;

src/components/ui/chips.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+import React, { forwardRef } from "react";
+import { Button } from "react-daisyui";
+
+type Props = React.ComponentPropsWithoutRef<"div"> & {
+  onClick?: () => void;
+  onRemove?: () => void;
+};
+
+const Chips = forwardRef<HTMLDivElement, Props>(
+  ({ className, children, onRemove, ...props }, ref) => {
+    const Comp = props.onClick ? "button" : "div";
+
+    return (
+      <Comp
+        ref={ref as never}
+        className={cn(
+          "inline-flex flex-row items-center h-8 px-4 rounded-full text-sm border border-primary/80 text-base-content cursor-default",
+          className
+        )}
+        {...(props as any)}
+      >
+        {children}
+        {onRemove ? (
+          <Button
+            color="ghost"
+            shape="circle"
+            size="sm"
+            className="-mr-3"
+            onClick={onRemove}
+          >
+            <X size={16} />
+          </Button>
+        ) : null}
+      </Comp>
+    );
+  }
+);
+
+export default Chips;

src/context/page-context.tsx

@@ -1,48 +1,59 @@
 import {
   createContext,
+  memo,
   PropsWithChildren,
+  useCallback,
   useContext,
   useEffect,
   useState,
 } from "react";
 
 type PageContextValues = {
-  title?: string | null;
-  setTitle: (title?: string | null) => void;
+  title: string | null;
+  prev: string | null;
 };
 
-export const PageContext = createContext<PageContextValues | null>(null);
+export const PageContext = createContext<
+  | (PageContextValues & {
+      setValue: (values: Partial<PageContextValues>) => void;
+    })
+  | null
+>(null);
+
+const initialValues: PageContextValues = {
+  title: null,
+  prev: null,
+};
 
 export const PageContextProvider = ({ children }: PropsWithChildren) => {
-  const [title, setTitle] = useState<PageContextValues["title"]>(null);
+  const [values, setValues] = useState<PageContextValues>(initialValues);
 
-  const contextValues = {
-    title,
-    setTitle,
-  };
+  const setValue = useCallback((value: Partial<PageContextValues>) => {
+    setValues((prev) => ({ ...prev, ...value }));
+  }, []);
 
-  return <PageContext.Provider children={children} value={contextValues} />;
+  return (
+    <PageContext.Provider children={children} value={{ ...values, setValue }} />
+  );
 };
 
-type PageProps = {
-  title?: string;
-};
+type PageProps = Partial<PageContextValues>;
 
-const Page = ({ title }: PageProps) => {
+const Page = memo((props: PageProps) => {
   const context = useContext(PageContext);
   if (!context) {
     throw new Error("Page component must be used within a PageContextProvider");
   }
 
   useEffect(() => {
-    context.setTitle(title);
+    context.setValue(props);
 
     return () => {
-      context.setTitle(null);
+      context.setValue(initialValues);
     };
-  }, [title, context.setTitle]);
+  }, [props, context.setValue]);
 
   return null;
-};
+});
 
 export default Page;

src/hooks/useConfig.ts

@@ -0,0 +1,10 @@
+import api from "@/lib/api";
+import { Config } from "@/types/garage";
+import { useQuery } from "@tanstack/react-query";
+
+export const useConfig = () => {
+  return useQuery<Config>({
+    queryKey: ["config"],
+    queryFn: () => api.get("/config"),
+  });
+};

src/hooks/useDebounce.ts

@@ -0,0 +1,20 @@
+import { useCallback, useRef } from "react";
+
+export const useDebounce = <T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number = 500
+) => {
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const debouncedFn = useCallback(
+    (...args: any[]) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => fn(...args), delay);
+    },
+    [fn]
+  );
+
+  return debouncedFn as T;
+};

src/lib/api.ts

@@ -4,8 +4,6 @@ type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
   body?: any;
 };
 
-const ADMIN_KEY = "E1tDBf4mhc/XMHq1YJkDE6N1j3AZG9dRWR+vDDTyASk=";
-
 const api = {
   async fetch<T = any>(url: string, options?: Partial<FetchOptions>) {
     const headers: Record<string, string> = {};
@@ -25,10 +23,6 @@ const api = {
       headers["Content-Type"] = "application/json";
     }
 
-    if (ADMIN_KEY) {
-      headers["Authorization"] = `Bearer ${ADMIN_KEY}`;
-    }
-
     const res = await fetch(_url, {
       ...options,
       headers: { ...headers, ...(options?.headers || {}) },
@@ -64,6 +58,20 @@ const api = {
       method: "POST",
     });
   },
+
+  async put<T = any>(url: string, options?: Partial<FetchOptions>) {
+    return this.fetch<T>(url, {
+      ...options,
+      method: "PUT",
+    });
+  },
+
+  async delete<T = any>(url: string, options?: Partial<FetchOptions>) {
+    return this.fetch<T>(url, {
+      ...options,
+      method: "DELETE",
+    });
+  },
 };
 
 export default api;

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

@@ -0,0 +1,47 @@
+import { Bucket } from "../types";
+import { ArchiveIcon, ChartPie, ChartScatter } from "lucide-react";
+import { readableBytes } from "@/lib/utils";
+import Button from "@/components/ui/button";
+
+type Props = {
+  data: Bucket;
+};
+
+const BucketCard = ({ data }: Props) => {
+  return (
+    <div className="card card-body p-6">
+      <div className="flex flex-row items-start gap-4 p-2 pb-0">
+        <ArchiveIcon size={28} />
+
+        <div className="flex-1">
+          <p className="text-xl font-medium">
+            {data.globalAliases?.join(", ")}
+          </p>
+        </div>
+
+        <div className="flex-1">
+          <p className="text-sm flex items-center gap-1">
+            <ChartPie className="inline" size={16} />
+            Usage
+          </p>
+          <p className="text-2xl font-medium">{readableBytes(data.bytes)}</p>
+        </div>
+
+        <div className="flex-1">
+          <p className="text-sm flex items-center gap-1">
+            <ChartScatter className="inline" size={16} />
+            Objects
+          </p>
+          <p className="text-2xl font-medium">{data.objects}</p>
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-row justify-end gap-4">
+        <Button href={`/buckets/${data.id}`}>Manage</Button>
+        {/* <Button color="primary">Browse</Button> */}
+      </div>
+    </div>
+  );
+};
+
+export default BucketCard;

src/pages/buckets/hooks.ts

@@ -0,0 +1,10 @@
+import api from "@/lib/api";
+import { useQuery } from "@tanstack/react-query";
+import { GetBucketRes } from "./types";
+
+export const useBuckets = () => {
+  return useQuery({
+    queryKey: ["buckets"],
+    queryFn: () => api.get<GetBucketRes>("/buckets"),
+  });
+};

src/pages/buckets/manage/components/overview-aliases.tsx

@@ -0,0 +1,32 @@
+import { Button } from "react-daisyui";
+import { Plus } from "lucide-react";
+import Chips from "@/components/ui/chips";
+import { Bucket } from "../../types";
+
+type Props = {
+  data: Bucket;
+};
+
+const AliasesSection = ({ data }: Props) => {
+  const aliases = data?.globalAliases?.slice(1);
+
+  return (
+    <div className="mt-2">
+      <p className="inline label label-text">Aliases</p>
+
+      <div className="flex flex-row flex-wrap gap-2 mt-1">
+        {aliases?.map((alias: string) => (
+          <Chips key={alias} onRemove={() => {}}>
+            {alias}
+          </Chips>
+        ))}
+        <Button size="sm">
+          <Plus className="-ml-1" size={18} />
+          Add Alias
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AliasesSection;

src/pages/buckets/manage/components/overview-quota.tsx

@@ -0,0 +1,97 @@
+import { Controller, DeepPartial, useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { QuotaSchema, quotaSchema } from "../schema";
+import { useEffect } from "react";
+import { Input, Toggle } from "react-daisyui";
+import FormControl from "@/components/ui/form-control";
+import { useDebounce } from "@/hooks/useDebounce";
+import { useUpdateBucket } from "../hooks";
+import { Bucket } from "../../types";
+
+type Props = {
+  data: Bucket;
+};
+
+const QuotaSection = ({ data }: Props) => {
+  const form = useForm<QuotaSchema>({
+    resolver: zodResolver(quotaSchema),
+  });
+  const isEnabled = useWatch({ control: form.control, name: "enabled" });
+
+  const updateMutation = useUpdateBucket(data?.id);
+
+  const onChange = useDebounce((values: DeepPartial<QuotaSchema>) => {
+    const { enabled } = values;
+    const maxObjects = Number(values.maxObjects);
+    const maxSize = Math.round(Number(values.maxSize) * 1024 * 1024);
+
+    const data = {
+      maxObjects: enabled && maxObjects > 0 ? maxObjects : null,
+      maxSize: enabled && maxSize > 0 ? maxSize : null,
+    };
+
+    updateMutation.mutate({ quotas: data });
+  });
+
+  useEffect(() => {
+    form.reset({
+      enabled:
+        data?.quotas?.maxSize != null || data?.quotas?.maxObjects != null,
+      maxSize: data?.quotas?.maxSize
+        ? data?.quotas?.maxSize / 1024 / 1024
+        : null,
+      maxObjects: data?.quotas?.maxObjects || null,
+    });
+
+    const { unsubscribe } = form.watch((values) => onChange(values));
+    return unsubscribe;
+  }, [data]);
+
+  return (
+    <div className="mt-8">
+      <p className="label label-text py-0">Quotas</p>
+
+      <label className="inline-flex label label-text gap-2 cursor-pointer">
+        <Controller
+          control={form.control}
+          name="enabled"
+          render={({ field }) => (
+            <Toggle {...(field as any)} checked={field.value} />
+          )}
+        />
+        Enabled
+      </label>
+
+      {isEnabled && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormControl
+            form={form}
+            name="maxObjects"
+            title="Max Objects"
+            render={(field) => (
+              <Input
+                {...field}
+                type="number"
+                value={String(field.value || "")}
+              />
+            )}
+          />
+          <FormControl
+            form={form}
+            name="maxSize"
+            title="Max Size (GB)"
+            render={(field) => (
+              <Input
+                {...field}
+                type="number"
+                value={String(field.value || "")}
+              />
+            )}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default QuotaSection;

src/pages/buckets/manage/components/overview-tab.tsx

@@ -0,0 +1,51 @@
+import { Card } from "react-daisyui";
+import { useParams } from "react-router-dom";
+import { useBucket } from "../hooks";
+import { ChartPie, ChartScatter } from "lucide-react";
+import { readableBytes } from "@/lib/utils";
+import WebsiteAccessSection from "./overview-website-access";
+import AliasesSection from "./overview-aliases";
+import QuotaSection from "./overview-quota";
+
+const OverviewTab = () => {
+  const { id } = useParams();
+  const { data } = useBucket(id);
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8">
+      <Card className="card-body gap-0 items-start">
+        <Card.Title>Summary</Card.Title>
+
+        <AliasesSection data={data} />
+        <WebsiteAccessSection data={data} />
+        <QuotaSection data={data} />
+      </Card>
+
+      <Card className="card-body">
+        <Card.Title>Usage</Card.Title>
+
+        <div className="grid grid-cols-2 gap-4 mt-4">
+          <div className="flex flex-row gap-3">
+            <ChartPie className="mt-1" size={20} />
+            <div className="flex-1">
+              <p className="text-sm flex items-center gap-1">Storage</p>
+              <p className="text-2xl font-medium">
+                {readableBytes(data?.bytes)}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-row gap-3">
+            <ChartScatter className="mt-1" size={20} />
+            <div className="flex-1">
+              <p className="text-sm flex items-center gap-1">Objects</p>
+              <p className="text-2xl font-medium">{data?.objects}</p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default OverviewTab;

src/pages/buckets/manage/components/overview-website-access.tsx

@@ -0,0 +1,143 @@
+import { Controller, DeepPartial, useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { websiteConfigSchema, WebsiteConfigSchema } from "../schema";
+import { useEffect } from "react";
+import { Input, Toggle } from "react-daisyui";
+import FormControl from "@/components/ui/form-control";
+import { useDebounce } from "@/hooks/useDebounce";
+import { useUpdateBucket } from "../hooks";
+import { useConfig } from "@/hooks/useConfig";
+import { Info, LinkIcon } from "lucide-react";
+import Button from "@/components/ui/button";
+import { Bucket } from "../../types";
+
+type Props = {
+  data: Bucket;
+};
+
+const WebsiteAccessSection = ({ data }: Props) => {
+  const { data: config } = useConfig();
+  const form = useForm<WebsiteConfigSchema>({
+    resolver: zodResolver(websiteConfigSchema),
+  });
+  const bucketName = data?.globalAliases[0] || "";
+  const isEnabled = useWatch({ control: form.control, name: "websiteAccess" });
+
+  const websitePort = config?.s3_web?.bind_addr?.split(":").pop() || "80";
+  const rootDomain = config?.s3_web?.root_domain;
+
+  const updateMutation = useUpdateBucket(data?.id);
+
+  const onChange = useDebounce((values: DeepPartial<WebsiteConfigSchema>) => {
+    const data = {
+      enabled: values.websiteAccess,
+      indexDocument: values.websiteAccess
+        ? values.websiteConfig?.indexDocument
+        : undefined,
+      errorDocument: values.websiteAccess
+        ? values.websiteConfig?.errorDocument
+        : undefined,
+    };
+
+    updateMutation.mutate({
+      websiteAccess: data,
+    });
+  });
+
+  useEffect(() => {
+    form.reset({
+      websiteAccess: data?.websiteAccess,
+      websiteConfig: {
+        indexDocument: data?.websiteConfig?.indexDocument || "index.html",
+        errorDocument: data?.websiteConfig?.errorDocument || "error/400.html",
+      },
+    });
+
+    const { unsubscribe } = form.watch((values) => onChange(values));
+    return unsubscribe;
+  }, [data]);
+
+  return (
+    <div className="mt-8">
+      <div className="flex flex-row gap-2">
+        <p className="label label-text py-0 grow-0">Website Access</p>
+        <Button
+          href="https://garagehq.deuxfleurs.fr/documentation/cookbook/exposing-websites"
+          target="_blank"
+          size="sm"
+          shape="circle"
+          color="ghost"
+        >
+          <Info size={16} />
+        </Button>
+      </div>
+
+      <label className="inline-flex label label-text gap-2 cursor-pointer">
+        <Controller
+          control={form.control}
+          name="websiteAccess"
+          render={({ field }) => (
+            <Toggle {...(field as any)} checked={field.value} />
+          )}
+        />
+        Enabled
+      </label>
+
+      {isEnabled && (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormControl
+              form={form}
+              name="websiteConfig.indexDocument"
+              title="Index Document"
+              render={(field) => (
+                <Input {...field} value={String(field.value || "")} />
+              )}
+            />
+            <FormControl
+              form={form}
+              name="websiteConfig.errorDocument"
+              title="Error Document"
+              render={(field) => (
+                <Input {...field} value={String(field.value || "")} />
+              )}
+            />
+          </div>
+
+          <div className="mt-4 alert flex flex-row flex-wrap">
+            <a
+              href={`http://${bucketName}`}
+              className="inline-flex items-center flex-row gap-2 font-medium hover:link"
+              target="_blank"
+            >
+              <LinkIcon size={14} />
+              {bucketName}
+            </a>
+            {rootDomain ? (
+              <>
+                <a
+                  href={`http://${bucketName}${rootDomain}`}
+                  className="inline-flex items-center flex-row gap-2 font-medium hover:link"
+                  target="_blank"
+                >
+                  <LinkIcon size={14} />
+                  {bucketName + rootDomain}
+                </a>
+                <a
+                  href={`http://${bucketName}${rootDomain}:${websitePort}`}
+                  className="inline-flex items-center flex-row gap-2 font-medium hover:link"
+                  target="_blank"
+                >
+                  <LinkIcon size={14} />
+                  {bucketName + rootDomain + ":" + websitePort}
+                </a>
+              </>
+            ) : null}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default WebsiteAccessSection;

src/pages/buckets/manage/hooks.ts

@@ -0,0 +1,19 @@
+import api from "@/lib/api";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Bucket } from "../types";
+
+export const useBucket = (id?: string | null) => {
+  return useQuery({
+    queryKey: ["bucket", id],
+    queryFn: () => api.get<Bucket>("/v1/bucket", { params: { id } }),
+    enabled: !!id,
+  });
+};
+
+export const useUpdateBucket = (id?: string | null) => {
+  return useMutation({
+    mutationFn: (values: any) => {
+      return api.put<any>("/v1/bucket", { params: { id }, body: values });
+    },
+  });
+};

src/pages/buckets/manage/page.tsx

@@ -0,0 +1,36 @@
+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 } from "lucide-react";
+import OverviewTab from "./components/overview-tab";
+
+const tabs: Tab[] = [
+  {
+    name: "overview",
+    title: "Overview",
+    icon: ChartLine,
+    Component: OverviewTab,
+  },
+  // {
+  //   name: "browse",
+  //   title: "Browse",
+  //   icon: FolderSearch,
+  // },
+];
+
+const ManageBucketPage = () => {
+  const { id } = useParams();
+  const { data } = useBucket(id);
+
+  const name = data?.globalAliases[0];
+
+  return (
+    <div className="container">
+      <Page title={name || "Manage Bucket"} prev="/buckets" />
+      <TabView tabs={tabs} className="bg-base-100 h-14 px-1.5" />
+    </div>
+  );
+};
+
+export default ManageBucketPage;

src/pages/buckets/manage/schema.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+export const websiteConfigSchema = z.object({
+  websiteAccess: z.boolean(),
+  websiteConfig: z
+    .object({ indexDocument: z.string(), errorDocument: z.string() })
+    .nullish(),
+});
+
+export type WebsiteConfigSchema = z.infer<typeof websiteConfigSchema>;
+
+export const quotaSchema = z.object({
+  enabled: z.boolean(),
+  maxObjects: z.coerce.number().nullish(),
+  maxSize: z.coerce.number().nullish(),
+});
+
+export type QuotaSchema = z.infer<typeof quotaSchema>;

src/pages/buckets/page.tsx

@@ -0,0 +1,34 @@
+import Page from "@/context/page-context";
+import { useBuckets } from "./hooks";
+import { Button, Input } from "react-daisyui";
+import { Plus } from "lucide-react";
+import BucketCard from "./components/bucket-card";
+
+const BucketsPage = () => {
+  const { data } = useBuckets();
+
+  return (
+    <div className="container">
+      <Page title="Buckets" />
+
+      <div>
+        <div className="flex flex-row items-center gap-2">
+          <Input placeholder="Search..." />
+          <div className="flex-1" />
+          <Button color="primary">
+            <Plus />
+            Create Bucket
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-stretch mt-4 md:mt-8">
+          {data?.map((bucket) => (
+            <BucketCard key={bucket.id} data={bucket} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BucketsPage;

src/pages/buckets/types.ts

@@ -0,0 +1,41 @@
+//
+
+export type GetBucketRes = Bucket[];
+
+export type Bucket = {
+  id: string;
+  globalAliases: string[];
+  websiteAccess: boolean;
+  websiteConfig?: WebsiteConfig | null;
+  keys: Key[];
+  objects: number;
+  bytes: number;
+  unfinishedUploads: number;
+  unfinishedMultipartUploads: number;
+  unfinishedMultipartUploadParts: number;
+  unfinishedMultipartUploadBytes: number;
+  quotas: Quotas;
+};
+
+export type Key = {
+  accessKeyId: string;
+  name: string;
+  permissions: Permissions;
+  bucketLocalAliases: any[];
+};
+
+export type Permissions = {
+  read: boolean;
+  write: boolean;
+  owner: boolean;
+};
+
+export type WebsiteConfig = {
+  indexDocument: string;
+  errorDocument: string;
+};
+
+export type Quotas = {
+  maxSize: null;
+  maxObjects: null;
+};

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

@@ -7,6 +7,7 @@ import { ConnectNodeSchema, connectNodeSchema } from "../schema";
 import { useCallback, useRef } from "react";
 import { toast } from "sonner";
 import { useQueryClient } from "@tanstack/react-query";
+import { Plug } from "lucide-react";
 
 const ConnectNodeDialog = () => {
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -45,6 +46,7 @@ const ConnectNodeDialog = () => {
   return (
     <>
       <Button color="primary" onClick={handleShow}>
+        <Plug />
         Connect
       </Button>
 
@@ -58,7 +60,7 @@ const ConnectNodeDialog = () => {
           <Modal.Header>Connect Node</Modal.Header>
           <Modal.Body>
             <p>Run this command to get node id:</p>
-            <Code className="mt-2">docker exec -it garage /garage node id</Code>
+            <Code className="mt-2">docker exec garage /garage node id</Code>
 
             <p className="mt-8">Enter node id:</p>
             <Input

src/pages/cluster/page.tsx

@@ -7,7 +7,7 @@ const ClusterPage = () => {
   const { data } = useClusterStatus();
 
   return (
-    <div>
+    <div className="container">
       <Page title="Cluster" />
 
       <Card>

src/pages/home/page.tsx

@@ -17,7 +17,7 @@ const HomePage = () => {
   const { data: health } = useNodesHealth();
 
   return (
-    <div>
+    <div className="container">
       <Page title="Dashboard" />
 
       <section className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
@@ -27,7 +27,11 @@ const HomePage = () => {
           value={ucfirst(health?.status)}
           valueClassName={cn(
             "text-lg",
-            health?.status === "healthy" ? "text-success" : "text-error"
+            health?.status === "healthy"
+              ? "text-success"
+              : health?.status === "degraded"
+              ? "text-warning"
+              : "text-error"
           )}
         />
         <StatsCard title="Nodes" icon={HardDrive} value={health?.knownNodes} />

src/types/garage.ts

@@ -0,0 +1,32 @@
+export type Config = {
+  metadata_dir: string;
+  data_dir: string;
+  db_engine: string;
+  metadata_auto_snapshot_interval: string;
+  replication_factor: number;
+  compression_level: number;
+  rpc_bind_addr: string;
+  rpc_public_addr: string;
+  rpc_secret: string;
+  s3_api?: S3API;
+  s3_web?: S3Web;
+  admin?: Admin;
+};
+
+export type Admin = {
+  api_bind_addr: string;
+  admin_token: string;
+  metrics_token: string;
+};
+
+export type S3API = {
+  s3_region: string;
+  api_bind_addr: string;
+  root_domain: string;
+};
+
+export type S3Web = {
+  bind_addr: string;
+  root_domain: string;
+  index: string;
+};