khairul169/garage-webui
1
0
Fork 0
mirror of https://github.com/khairul169/garage-webui.git synced 2025-09-18 11:09:31 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: khairul169:main
Branches Tags
khairul169:main
khairul169:feat/terminal
khairul169:1.1.0
khairul169:1.0.9
khairul169:1.0.8
khairul169:1.0.7
khairul169:1.0.6
khairul169:1.0.5
khairul169:1.0.4
khairul169:1.0.3
khairul169:1.0.2
khairul169:1.0.1
khairul169:1.0.0
..
compare: khairul169:1.0.6
Branches Tags
khairul169:main
khairul169:feat/terminal
khairul169:1.1.0
khairul169:1.0.9
khairul169:1.0.8
khairul169:1.0.7
khairul169:1.0.6
khairul169:1.0.5
khairul169:1.0.4
khairul169:1.0.3
khairul169:1.0.2
khairul169:1.0.1
khairul169:1.0.0

No commits in common. "main" and "1.0.6" have entirely different histories.
main ... 1.0.6

39 changed files with 118 additions and 625 deletions
Show Stats Expand all files Collapse all files

14
Dockerfile
View File

@ -1,7 +1,9 @@
FROM node:20-slim AS frontend
WORKDIR /app
RUN npm install -g corepack@latest && corepack use pnpm@latest
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY package.json pnpm-lock.yaml ./
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
@ -9,7 +11,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
COPY . .
RUN pnpm run build
FROM golang:1.23 AS backend
FROM golang:1.22.5 AS backend
WORKDIR /app
COPY backend/go.mod backend/go.sum ./
@ -21,12 +23,6 @@ RUN make
FROM scratch
COPY --from=alpine /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
COPY --from=ghcr.io/tarampampam/curl:8.6.0 /bin/curl /bin/curl
COPY --from=backend /app/main /bin/main
HEALTHCHECK --interval=5m --timeout=2s --retries=3 --start-period=15s CMD [ \
"curl", "--fail", "http://127.0.0.1:3909" \
]
ENTRYPOINT [ "main" ]
CMD [ "/bin/main" ]

34
README.md
View File

@ -31,7 +31,7 @@ If you install Garage using Docker, you can install this web UI alongside Garage
```yml
services:
garage:
image: dxflrs/garage:v2.0.0
image: dxflrs/garage:v1.0.1
container_name: garage
volumes:
- ./garage.toml:/etc/garage.toml
@ -41,7 +41,7 @@ services:
ports:
- 3900:3900
- 3901:3901
- 3902:3902
- 3902:3903
- 3903:3903
webui:
@ -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.1.0/garage-webui-v1.1.0-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
```
@ -136,40 +136,14 @@ admin_token = "YOUR_ADMIN_TOKEN_HERE"
metrics_token = "YOUR_METRICS_TOKEN_HERE"
```
However, if it fails to load, you can set `API_BASE_URL` & `API_ADMIN_KEY` environment variables instead.
### Environment Variables
Configurable envs:
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`.
- `BASE_PATH`: Base path or prefix for Web UI.
- `API_BASE_URL`: Garage admin API endpoint URL.
- `API_ADMIN_KEY`: Admin API key.
- `S3_REGION`: S3 Region.
- `S3_ENDPOINT_URL`: S3 Endpoint url.
### Authentication
Enable authentication by setting the `AUTH_USER_PASS` environment variable in the format `username:password_hash`, where `password_hash` is a bcrypt hash of the password.
Generate the username and password hash using the following command:
```bash
htpasswd -nbBC 10 "YOUR_USERNAME" "YOUR_PASSWORD"
```
> If command 'htpasswd' is not found, install `apache2-utils` using your package manager.
Then update your `docker-compose.yml`:
```yml
webui:
....
environment:
AUTH_USER_PASS: "username:$2y$10$DSTi9o..."
```
### Running
Once your instance of Garage Web UI is started, you can open the web UI at http://your-ip:3909. You can place it behind a reverse proxy to secure it with SSL.

6
backend/.env.example
View File

@ -1,6 +0,0 @@
#
BASE_PATH=""
AUTH_USER_PASS='username:$2y$10$DSTi9o0uQPEHSNlf66xMEOgm9KgVNBP3vHxA3SK0Xha2EVMb3mTXm'
API_BASE_URL="http://garage:3903"
S3_ENDPOINT_URL="http://garage:3900"
API_ADMIN_KEY=""

6
backend/go.mod
View File

@ -1,8 +1,6 @@
module khairul169/garage-webui
go 1.23.0
toolchain go1.24.0
go 1.22.5
require (
github.com/aws/aws-sdk-go-v2 v1.30.4
@ -15,7 +13,6 @@ require (
)
require (
github.com/alexedwards/scs/v2 v2.8.0 // indirect
github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4 // indirect
github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.16 // indirect
github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.16 // indirect
@ -24,5 +21,4 @@ require (
github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.18 // indirect
github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.18 // indirect
github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.16 // indirect
golang.org/x/crypto v0.35.0
)

4
backend/go.sum
View File

@ -1,5 +1,3 @@
github.com/alexedwards/scs/v2 v2.8.0 h1:h31yUYoycPuL0zt14c0gd+oqxfRwIj6SOjHdKRZxhEw=
github.com/alexedwards/scs/v2 v2.8.0/go.mod h1:ToaROZxyKukJKT/xLcVQAChi5k6+Pn1Gvmdl7h3RRj8=
github.com/aws/aws-sdk-go-v2 v1.30.4 h1:frhcagrVNrzmT95RJImMHgabt99vkXGslubDaDagTk8=
github.com/aws/aws-sdk-go-v2 v1.30.4/go.mod h1:CT+ZPWXbYrci8chcARI3OmI/qgd+f6WtuLOoaIA8PR0=
github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4 h1:70PVAiL15/aBMh5LThwgXdSQorVr91L127ttckI9QQU=
@ -44,8 +42,6 @@ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
golang.org/x/crypto v0.35.0 h1:b15kiHdrGCHrP6LvwaQ3c03kgNhhiMgvlhxHQhmg2Xs=
golang.org/x/crypto v0.35.0/go.mod h1:dy7dXNW32cAb/6/PRuTNsix8T+vJAqvuIy5Bli/x0YQ=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=

21
backend/main.go
View File

@ -7,35 +7,20 @@ import (
"khairul169/garage-webui/utils"
"log"
"net/http"
"os"
"github.com/joho/godotenv"
)
func main() {
// Initialize app
godotenv.Load()
utils.InitCacheManager()
sessionMgr := utils.InitSessionManager()
if err := utils.Garage.LoadConfig(); err != nil {
log.Println("Cannot load garage config!", err)
}
basePath := os.Getenv("BASE_PATH")
mux := http.NewServeMux()
// Serve API
apiPrefix := basePath + "/api"
mux.Handle(apiPrefix+"/", http.StripPrefix(apiPrefix, router.HandleApiRouter()))
// Static files
ui.ServeUI(mux)
// Redirect to UI if BASE_PATH is set
if basePath != "" {
mux.Handle("/", http.RedirectHandler(basePath, http.StatusMovedPermanently))
}
http.Handle("/api/", http.StripPrefix("/api", router.HandleApiRouter()))
ui.ServeUI()
host := utils.GetEnv("HOST", "0.0.0.0")
port := utils.GetEnv("PORT", "3909")
@ -43,7 +28,7 @@ func main() {
addr := fmt.Sprintf("%s:%s", host, port)
log.Printf("Starting server on http://%s", addr)
if err := http.ListenAndServe(addr, sessionMgr.LoadAndSave(mux)); err != nil {
if err := http.ListenAndServe(addr, nil); err != nil {
log.Fatal(err)
}
}

27
backend/middleware/auth.go
View File

@ -1,27 +0,0 @@
package middleware
import (
"errors"
"khairul169/garage-webui/utils"
"net/http"
)
func AuthMiddleware(next http.Handler) http.Handler {
authData := utils.GetEnv("AUTH_USER_PASS", "")
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
auth := utils.Session.Get(r, "authenticated")
if authData == "" {
next.ServeHTTP(w, r)
return
}
if auth == nil || !auth.(bool) {
utils.ResponseErrorStatus(w, errors.New("unauthorized"), http.StatusUnauthorized)
return
}
next.ServeHTTP(w, r)
})
}

64
backend/router/auth.go
View File

@ -1,64 +0,0 @@
package router
import (
"encoding/json"
"errors"
"khairul169/garage-webui/utils"
"net/http"
"strings"
"golang.org/x/crypto/bcrypt"
)
type Auth struct{}
func (c *Auth) Login(w http.ResponseWriter, r *http.Request) {
var body struct {
Username string `json:"username"`
Password string `json:"password"`
}
if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
utils.ResponseError(w, err)
return
}
userPass := strings.Split(utils.GetEnv("AUTH_USER_PASS", ""), ":")
if len(userPass) < 2 {
utils.ResponseErrorStatus(w, errors.New("AUTH_USER_PASS not set"), 500)
return
}
if strings.TrimSpace(body.Username) != userPass[0] || bcrypt.CompareHashAndPassword([]byte(userPass[1]), []byte(body.Password)) != nil {
utils.ResponseErrorStatus(w, errors.New("invalid username or password"), 401)
return
}
utils.Session.Set(r, "authenticated", true)
utils.ResponseSuccess(w, map[string]bool{
"authenticated": true,
})
}
func (c *Auth) Logout(w http.ResponseWriter, r *http.Request) {
utils.Session.Clear(r)
utils.ResponseSuccess(w, true)
}
func (c *Auth) GetStatus(w http.ResponseWriter, r *http.Request) {
isAuthenticated := true
authSession := utils.Session.Get(r, "authenticated")
enabled := false
if utils.GetEnv("AUTH_USER_PASS", "") != "" {
enabled = true
}
if authSession != nil && authSession.(bool) {
isAuthenticated = true
}
utils.ResponseSuccess(w, map[string]bool{
"enabled": enabled,
"authenticated": isAuthenticated,
})
}

38
backend/router/browse.go
View File

@ -146,20 +146,11 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
return
}
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))
if object.ContentType != nil {
w.Header().Set("Content-Type", *object.ContentType)
} else {
w.Header().Set("Content-Type", "application/octet-stream")
}
if object.ContentLength != nil {
w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
}
if object.ETag != nil {
w.Header().Set("Etag", *object.ETag)
}
w.Header().Set("Etag", *object.ETag)
_, err = io.Copy(w, object.Body)
@ -292,7 +283,7 @@ func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
return cacheData.(aws.CredentialsProvider), nil
}
body, err := utils.Garage.Fetch("/v2/GetBucketInfo?globalAlias="+bucket, &utils.FetchOptions{})
body, err := utils.Garage.Fetch("/v1/bucket?globalAlias="+bucket, &utils.FetchOptions{})
if err != nil {
return nil, err
}
@ -309,7 +300,7 @@ func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
continue
}
body, err := utils.Garage.Fetch(fmt.Sprintf("/v2/GetKeyInfo?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
body, err := utils.Garage.Fetch(fmt.Sprintf("/v1/key?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
if err != nil {
return nil, err
}
@ -331,26 +322,15 @@ func getS3Client(bucket string) (*s3.Client, error) {
return nil, fmt.Errorf("cannot get credentials for bucket %s: %w", bucket, err)
}
// Determine endpoint and whether to disable HTTPS
endpoint := utils.Garage.GetS3Endpoint()
disableHTTPS := !strings.HasPrefix(endpoint, "https://")
// AWS config without BaseEndpoint
awsConfig := aws.Config{
Credentials: creds,
Region: utils.Garage.GetS3Region(),
Credentials: creds,
Region: utils.Garage.GetS3Region(),
BaseEndpoint: aws.String(utils.Garage.GetS3Endpoint()),
}
// Build S3 client with custom endpoint resolver for proper signing
client := s3.NewFromConfig(awsConfig, func(o *s3.Options) {
o.UsePathStyle = true
o.EndpointOptions.DisableHTTPS = disableHTTPS
o.EndpointResolver = s3.EndpointResolverFunc(func(region string, opts s3.EndpointResolverOptions) (aws.Endpoint, error) {
return aws.Endpoint{
URL: endpoint,
SigningRegion: utils.Garage.GetS3Region(),
}, nil
})
o.EndpointOptions.DisableHTTPS = true
})
return client, nil

4
backend/router/buckets.go
View File

@ -11,7 +11,7 @@ import (
type Buckets struct{}
func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
body, err := utils.Garage.Fetch("/v2/ListBuckets", &utils.FetchOptions{})
body, err := utils.Garage.Fetch("/v1/bucket?list", &utils.FetchOptions{})
if err != nil {
utils.ResponseError(w, err)
return
@ -27,7 +27,7 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
for _, bucket := range buckets {
go func() {
body, err := utils.Garage.Fetch(fmt.Sprintf("/v2/GetBucketInfo?id=%s", bucket.ID), &utils.FetchOptions{})
body, err := utils.Garage.Fetch(fmt.Sprintf("/v1/bucket?id=%s", bucket.ID), &utils.FetchOptions{})
if err != nil {
ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}

16
backend/router/router.go
View File

@ -1,19 +1,9 @@
package router
import (
"khairul169/garage-webui/middleware"
"net/http"
)
import "net/http"
func HandleApiRouter() *http.ServeMux {
mux := http.NewServeMux()
auth := &Auth{}
mux.HandleFunc("POST /auth/login", auth.Login)
router := http.NewServeMux()
router.HandleFunc("POST /auth/logout", auth.Logout)
router.HandleFunc("GET /auth/status", auth.GetStatus)
config := &Config{}
router.HandleFunc("GET /config", config.GetAll)
@ -27,9 +17,7 @@ func HandleApiRouter() *http.ServeMux {
router.HandleFunc("PUT /browse/{bucket}/{key...}", browse.PutObject)
router.HandleFunc("DELETE /browse/{bucket}/{key...}", browse.DeleteObject)
// Proxy request to garage api endpoint
router.HandleFunc("/", ProxyHandler)
mux.Handle("/", middleware.AuthMiddleware(router))
return mux
return router
}

2
backend/schema/bucket.go
View File

@ -4,7 +4,6 @@ type GetBucketsRes struct {
ID string `json:"id"`
GlobalAliases []string `json:"globalAliases"`
LocalAliases []LocalAlias `json:"localAliases"`
Created string `json:"created"`
}
type Bucket struct {
@ -21,7 +20,6 @@ type Bucket struct {
UnfinishedMultipartUploadParts int64 `json:"unfinishedMultipartUploadParts"`
UnfinishedMultipartUploadBytes int64 `json:"unfinishedMultipartUploadBytes"`
Quotas Quotas `json:"quotas"`
Created string `json:"created"`
}
type LocalAlias struct {

4
backend/ui/ui.go
View File

@ -3,6 +3,4 @@
package ui
import "net/http"
func ServeUI(mux *http.ServeMux) {}
func ServeUI() {}

37
backend/ui/ui_prod.go
View File

@ -7,57 +7,28 @@ import (
"embed"
"io/fs"
"net/http"
"os"
"path"
"regexp"
"strings"
)
//go:embed dist
var embeddedFs embed.FS
func ServeUI(mux *http.ServeMux) {
func ServeUI() {
distFs, _ := fs.Sub(embeddedFs, "dist")
fileServer := http.FileServer(http.FS(distFs))
basePath := os.Getenv("BASE_PATH")
mux.Handle(basePath+"/", http.StripPrefix(basePath, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
http.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
_path := path.Clean(r.URL.Path)[1:]
// Rewrite non-existing paths to index.html
if _, err := fs.Stat(distFs, _path); err != nil {
index, _ := fs.ReadFile(distFs, "index.html")
html := string(index)
// Set base path for the UI
html = strings.ReplaceAll(html, "%BASE_PATH%", basePath)
html = addBasePath(html, basePath)
w.Header().Add("Content-Type", "text/html")
w.WriteHeader(http.StatusOK)
w.Write([]byte(html))
return
}
// Add prefix to each /assets strings in js
if len(basePath) > 0 && strings.HasSuffix(_path, ".js") {
data, _ := fs.ReadFile(distFs, _path)
html := string(data)
html = strings.ReplaceAll(html, "assets/", basePath[1:]+"/assets/")
w.Header().Add("Content-Type", "text/javascript")
w.WriteHeader(http.StatusOK)
w.Write([]byte(html))
w.Write(index)
return
}
fileServer.ServeHTTP(w, r)
})))
}
func addBasePath(html string, basePath string) string {
re := regexp.MustCompile(`(href|src)=["'](/[^"'>]+)["']`)
return re.ReplaceAllStringFunc(html, func(match string) string {
return re.ReplaceAllString(match, `$1="`+basePath+`$2"`)
})
}))
}

33
backend/utils/session.go
View File

@ -1,33 +0,0 @@
package utils
import (
"net/http"
"time"
"github.com/alexedwards/scs/v2"
)
type SessionManager struct {
mgr *scs.SessionManager
}
var Session *SessionManager
func InitSessionManager() *scs.SessionManager {
sessMgr := scs.New()
sessMgr.Lifetime = 24 * time.Hour
Session = &SessionManager{mgr: sessMgr}
return sessMgr
}
func (s *SessionManager) Get(r *http.Request, key string) interface{} {
return s.mgr.Get(r.Context(), key)
}
func (s *SessionManager) Set(r *http.Request, key string, value interface{}) {
s.mgr.Put(r.Context(), key, value)
}
func (s *SessionManager) Clear(r *http.Request) error {
return s.mgr.Clear(r.Context())
}

11
docker-compose.yml
View File

@ -1,6 +1,6 @@
services:
garage:
image: dxflrs/garage:v2.0.0
image: dxflrs/garage:v1.0.1
container_name: garage
volumes:
- ./garage.toml:/etc/garage.toml
@ -8,10 +8,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
@ -24,3 +24,4 @@ services:
environment:
API_BASE_URL: "http://garage:3903"
S3_ENDPOINT_URL: "http://garage:3900"

3
index.html
View File

@ -10,9 +10,6 @@
<link rel="manifest" href="/site.webmanifest" />
<title>Garage Web UI</title>
<script>
window.__BASE_PATH = "%BASE_PATH%";
</script>
</head>
<body>
<div id="root"></div>

8
package.json
View File

@ -1,7 +1,7 @@
{
"name": "garage-webui",
"private": true,
"version": "1.1.0",
"version": "1.0.6",
"type": "module",
"scripts": {
"dev:client": "vite",
@ -47,11 +47,5 @@
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.0",
"vite": "^5.4.0"
},
"pnpm": {
"onlyBuiltDependencies": [
"@swc/core",
"esbuild"
]
}
}

81
src/app/router.tsx
View File

@ -1,65 +1,48 @@
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { lazy, Suspense } from "react";
import { lazy } from "react";
import AuthLayout from "@/components/layouts/auth-layout";
import MainLayout from "@/components/layouts/main-layout";
import { BASE_PATH } from "@/lib/consts";
const LoginPage = lazy(() => import("@/pages/auth/login"));
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 KeysPage = lazy(() => import("@/pages/keys/page"));
const router = createBrowserRouter(
[
{
path: "/auth",
Component: AuthLayout,
children: [
{
path: "login",
Component: LoginPage,
},
],
},
{
path: "/",
Component: MainLayout,
children: [
{
index: true,
Component: HomePage,
},
{
path: "cluster",
Component: ClusterPage,
},
{
path: "buckets",
children: [
{ index: true, Component: BucketsPage },
{ path: ":id", Component: ManageBucketPage },
],
},
{
path: "keys",
Component: KeysPage,
},
],
},
],
const router = createBrowserRouter([
{
basename: BASE_PATH,
}
);
path: "/auth",
Component: AuthLayout,
},
{
path: "/",
Component: MainLayout,
children: [
{
index: true,
Component: HomePage,
},
{
path: "cluster",
Component: ClusterPage,
},
{
path: "buckets",
children: [
{ index: true, Component: BucketsPage },
{ path: ":id", Component: ManageBucketPage },
],
},
{
path: "keys",
Component: KeysPage,
},
],
},
]);
const Router = () => {
return (
<Suspense>
<RouterProvider router={router} />
</Suspense>
);
return <RouterProvider router={router} />;
};
export default Router;

60
src/components/containers/sidebar.tsx
View File

@ -4,7 +4,6 @@ import {
HardDrive,
KeySquare,
LayoutDashboard,
LogOut,
Palette,
} from "lucide-react";
import { Dropdown, Menu } from "react-daisyui";
@ -13,11 +12,6 @@ import Button from "../ui/button";
import { themes } from "@/app/themes";
import appStore from "@/stores/app-store";
import garageLogo from "@/assets/garage-logo.svg";
import { useMutation } from "@tanstack/react-query";
import api from "@/lib/api";
import * as utils from "@/lib/utils";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";
const pages = [
{ icon: LayoutDashboard, title: "Dashboard", path: "/", exact: true },
@ -28,7 +22,6 @@ const pages = [
const Sidebar = () => {
const { pathname } = useLocation();
const auth = useAuth();
return (
<aside className="bg-base-100 border-r border-base-300/30 w-[80%] md:w-[250px] flex flex-col items-stretch overflow-hidden h-full">
@ -64,48 +57,23 @@ const Sidebar = () => {
})}
</Menu>
<div className="py-2 px-4 flex items-center gap-2">
<Dropdown vertical="top">
<Dropdown.Toggle button={false}>
<Button icon={Palette} color="ghost">
{!auth.isEnabled ? "Theme" : null}
</Button>
</Dropdown.Toggle>
<Dropdown className="my-2 mx-4" vertical="top">
<Dropdown.Toggle button={false}>
<Button icon={Palette} color="ghost">
Theme
</Button>
</Dropdown.Toggle>
<Dropdown.Menu className="max-h-[500px] overflow-y-auto">
{themes.map((theme) => (
<Dropdown.Item
key={theme}
onClick={() => appStore.setTheme(theme)}
>
{ucfirst(theme)}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
{auth.isEnabled ? <LogoutButton /> : null}
</div>
<Dropdown.Menu className="max-h-[200px] overflow-y-auto">
{themes.map((theme) => (
<Dropdown.Item key={theme} onClick={() => appStore.setTheme(theme)}>
{ucfirst(theme)}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</aside>
);
};
const LogoutButton = () => {
const logout = useMutation({
mutationFn: () => api.post("/auth/logout"),
onSuccess: () => {
window.location.href = utils.url("/auth/login");
},
onError: (err) => {
toast.error(err?.message || "Unknown error");
},
});
return (
<Button className="flex-1" icon={LogOut} onClick={() => logout.mutate()}>
Logout
</Button>
);
};
export default Sidebar;

19
src/components/layouts/auth-layout.tsx
View File

@ -1,22 +1,5 @@
import { useAuth } from "@/hooks/useAuth";
import { Navigate, Outlet } from "react-router-dom";
const AuthLayout = () => {
const auth = useAuth();
if (auth.isLoading) {
return null;
}
if (auth.isAuthenticated) {
return <Navigate to="/" replace />;
}
return (
<div className="min-h-svh flex items-center justify-center">
<Outlet />
</div>
);
return <div>AuthLayout</div>;
};
export default AuthLayout;

12
src/components/layouts/main-layout.tsx
View File

@ -1,17 +1,15 @@
import { PageContext } from "@/context/page-context";
import { Suspense, useContext, useEffect } from "react";
import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import Sidebar from "../containers/sidebar";
import { ArrowLeft, MenuIcon } from "lucide-react";
import Button from "../ui/button";
import { useDisclosure } from "@/hooks/useDisclosure";
import { Drawer } from "react-daisyui";
import { useAuth } from "@/hooks/useAuth";
const MainLayout = () => {
const sidebar = useDisclosure();
const { pathname } = useLocation();
const auth = useAuth();
useEffect(() => {
if (sidebar.isOpen) {
@ -19,14 +17,6 @@ const MainLayout = () => {
}
}, [pathname]);
if (auth.isLoading) {
return null;
}
if (!auth.isAuthenticated) {
return <Navigate to="/auth/login" />;
}
return (
<Drawer
open={sidebar.isOpen}

1
src/components/ui/button.tsx
View File

@ -4,7 +4,6 @@ import { Button as BaseButton } from "react-daisyui";
import { Link } from "react-router-dom";
type ButtonProps = ComponentPropsWithoutRef<typeof BaseButton> & {
type?: HTMLButtonElement["type"];
href?: string;
target?: "_blank" | "_self" | "_parent" | "_top";
icon?: LucideIcon;

7
src/global.d.ts vendored
View File

@ -1,7 +0,0 @@
export {};
declare global {
interface Window {
__BASE_PATH?: string;
}
}

20
src/hooks/useAuth.ts
View File

@ -1,20 +0,0 @@
import api from "@/lib/api";
import { useQuery } from "@tanstack/react-query";
type AuthResponse = {
enabled: boolean;
authenticated: boolean;
};
export const useAuth = () => {
const { data, isLoading } = useQuery({
queryKey: ["auth"],
queryFn: () => api.get<AuthResponse>("/auth/status"),
retry: false,
});
return {
isLoading,
isEnabled: data?.enabled,
isAuthenticated: data?.authenticated,
};
};

23
src/lib/api.ts
View File

@ -1,23 +1,10 @@
import * as utils from "@/lib/utils";
import { BASE_PATH } from "./consts";
type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
params?: Record<string, any>;
headers?: Record<string, string>;
body?: any;
};
export const API_URL = BASE_PATH + "/api";
export class APIError extends Error {
status!: number;
constructor(message: string, status: number = 400) {
super(message);
this.name = "APIError";
this.status = status;
}
}
export const API_URL = "/api";
const api = {
async fetch<T = any>(url: string, options?: Partial<FetchOptions>) {
@ -40,7 +27,6 @@ const api = {
const res = await fetch(_url, {
...options,
credentials: "include",
headers: { ...headers, ...(options?.headers || {}) },
});
@ -49,18 +35,13 @@ const api = {
?.includes("application/json");
const data = isJson ? await res.json() : await res.text();
if (res.status === 401 && !url.startsWith("/auth")) {
window.location.href = utils.url("/auth/login");
throw new APIError("unauthorized", res.status);
}
if (!res.ok) {
const message = isJson
? data?.message
: typeof data === "string"
? data
: res.statusText;
throw new APIError(message, res.status);
throw new Error(message);
}
return data as unknown as T;

6
src/lib/consts.ts
View File

@ -1,6 +0,0 @@
// consts.ts
export const BASE_PATH =
(import.meta.env.PROD ? window.__BASE_PATH : null) ||
import.meta.env.VITE_BASE_PATH ||
"";

5
src/lib/utils.ts
View File

@ -3,7 +3,6 @@ import { toast } from "sonner";
import { twMerge } from "tailwind-merge";
import dayjsRelativeTime from "dayjs/plugin/relativeTime";
import dayjs from "dayjs";
import { BASE_PATH } from "./consts";
dayjs.extend(dayjsRelativeTime);
export { dayjs };
@ -54,7 +53,3 @@ export const copyToClipboard = async (text: string) => {
textArea?.remove();
}
};
export const url = (...paths: unknown[]) => {
return BASE_PATH + paths.join("/");
};

21
src/pages/auth/hooks.ts
View File

@ -1,21 +0,0 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { z } from "zod";
import { loginSchema } from "./schema";
import api from "@/lib/api";
import { toast } from "sonner";
export const useLogin = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (body: z.infer<typeof loginSchema>) => {
return api.post("/auth/login", { body });
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["auth"] });
},
onError: (err) => {
toast.error(err?.message || "Unknown error");
},
});
};

54
src/pages/auth/login.tsx
View File

@ -1,54 +0,0 @@
import Button from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { Card } from "react-daisyui";
import { useForm } from "react-hook-form";
import { loginSchema } from "./schema";
import { InputField } from "@/components/ui/input";
import { useLogin } from "./hooks";
export default function LoginPage() {
const form = useForm({
resolver: zodResolver(loginSchema),
defaultValues: { username: "", password: "" },
});
const login = useLogin();
return (
<form onSubmit={form.handleSubmit((v) => login.mutate(v))}>
<Card className="w-full max-w-md" bordered>
<Card.Body>
<Card.Title tag="h2">Login</Card.Title>
<p className="text-base-content/60">
Enter username and password below to log in to your account
</p>
<InputField
form={form}
name="username"
title="Username"
placeholder="Enter your username"
/>
<InputField
form={form}
name="password"
title="Password"
type="password"
placeholder="Enter your password"
/>
<Card.Actions className="mt-4">
<Button
type="submit"
color="primary"
className="w-full md:w-auto min-w-[100px]"
loading={login.isPending}
>
Login
</Button>
</Card.Actions>
</Card.Body>
</Card>
</form>
);
}

6
src/pages/auth/schema.ts
View File

@ -1,6 +0,0 @@
import { z } from "zod";
export const loginSchema = z.object({
username: z.string().min(1, "Username is required"),
password: z.string().min(1, "Password is required"),
});

2
src/pages/buckets/hooks.ts
View File

@ -18,7 +18,7 @@ export const useCreateBucket = (
options?: UseMutationOptions<any, Error, CreateBucketSchema>
) => {
return useMutation({
mutationFn: (body) => api.post("/v2/CreateBucket", { body }),
mutationFn: (body) => api.post("/v1/bucket", { body }),
...options,
});
};

22
src/pages/buckets/manage/hooks.ts
View File

@ -10,7 +10,7 @@ import { Bucket, Permissions } from "../types";
export const useBucket = (id?: string | null) => {
return useQuery({
queryKey: ["bucket", id],
queryFn: () => api.get<Bucket>("/v2/GetBucketInfo", { params: { id } }),
queryFn: () => api.get<Bucket>("/v1/bucket", { params: { id } }),
enabled: !!id,
});
};
@ -18,10 +18,7 @@ export const useBucket = (id?: string | null) => {
export const useUpdateBucket = (id?: string | null) => {
return useMutation({
mutationFn: (values: any) => {
return api.post<any>("/v2/UpdateBucket", {
params: { id },
body: values,
});
return api.put<any>("/v1/bucket", { params: { id }, body: values });
},
});
};
@ -32,8 +29,8 @@ export const useAddAlias = (
) => {
return useMutation({
mutationFn: (alias: string) => {
return api.post("/v2/AddBucketAlias", {
body: { bucketId, globalAlias: alias },
return api.put("/v1/bucket/alias/global", {
params: { id: bucketId, alias },
});
},
...options,
@ -46,8 +43,8 @@ export const useRemoveAlias = (
) => {
return useMutation({
mutationFn: (alias: string) => {
return api.post("/v2/RemoveBucketAlias", {
body: { bucketId, globalAlias: alias },
return api.delete("/v1/bucket/alias/global", {
params: { id: bucketId, alias },
});
},
...options,
@ -65,7 +62,8 @@ export const useAllowKey = (
return useMutation({
mutationFn: async (payload) => {
const promises = payload.map(async (key) => {
return api.post("/v2/AllowBucketKey", {
console.log("test", key);
return api.post("/v1/bucket/allow", {
body: {
bucketId,
accessKeyId: key.keyId,
@ -90,7 +88,7 @@ export const useDenyKey = (
) => {
return useMutation({
mutationFn: (payload) => {
return api.post("/v2/DenyBucketKey", {
return api.post("/v1/bucket/deny", {
body: {
bucketId,
accessKeyId: payload.keyId,
@ -106,7 +104,7 @@ export const useRemoveBucket = (
options?: MutationOptions<any, Error, string>
) => {
return useMutation({
mutationFn: (id) => api.post("/v2/DeleteBucket", { params: { id } }),
mutationFn: (id) => api.delete("/v1/bucket", { params: { id } }),
...options,
});
};

34
src/pages/cluster/hooks.ts
View File

@ -3,7 +3,6 @@ import {
ApplyLayoutResult,
AssignNodeBody,
GetClusterLayoutResult,
GetNodeInfoResult,
GetStatusResult,
} from "./types";
import {
@ -12,37 +11,24 @@ import {
useQuery,
} from "@tanstack/react-query";
export const useNodeInfo = () => {
return useQuery({
queryKey: ["node-info"],
queryFn: () =>
api.get<GetNodeInfoResult>("/v2/GetNodeInfo", {
params: { node: "self" },
}),
select: (data) => Object.values(data?.success || {})?.[0],
});
};
export const useClusterStatus = () => {
return useQuery({
queryKey: ["status"],
queryFn: () => api.get<GetStatusResult>("/v2/GetClusterStatus"),
queryFn: () => api.get<GetStatusResult>("/v1/status"),
});
};
export const useClusterLayout = () => {
return useQuery({
queryKey: ["layout"],
queryFn: () => api.get<GetClusterLayoutResult>("/v2/GetClusterLayout"),
queryFn: () => api.get<GetClusterLayoutResult>("/v1/layout"),
});
};
export const useConnectNode = (options?: Partial<UseMutationOptions>) => {
return useMutation<any, Error, string>({
mutationFn: async (nodeId) => {
const [res] = await api.post("/v2/ConnectClusterNodes", {
body: [nodeId],
});
const [res] = await api.post("/v1/connect", { body: [nodeId] });
if (!res.success) {
throw new Error(res.error || "Unknown error");
}
@ -54,10 +40,7 @@ export const useConnectNode = (options?: Partial<UseMutationOptions>) => {
export const useAssignNode = (options?: Partial<UseMutationOptions>) => {
return useMutation<any, Error, AssignNodeBody>({
mutationFn: (data) =>
api.post("/v2/UpdateClusterLayout", {
body: { parameters: null, roles: [data] },
}),
mutationFn: (data) => api.post("/v1/layout", { body: [data] }),
...(options as any),
});
};
@ -65,16 +48,15 @@ export const useAssignNode = (options?: Partial<UseMutationOptions>) => {
export const useUnassignNode = (options?: Partial<UseMutationOptions>) => {
return useMutation<any, Error, string>({
mutationFn: (nodeId) =>
api.post("/v2/UpdateClusterLayout", {
body: { parameters: null, roles: [{ id: nodeId, remove: true }] },
}),
api.post("/v1/layout", { body: [{ id: nodeId, remove: true }] }),
...(options as any),
});
};
export const useRevertChanges = (options?: Partial<UseMutationOptions>) => {
return useMutation<any, Error, number>({
mutationFn: () => api.post("/v2/RevertClusterLayout"),
mutationFn: (version) =>
api.post("/v1/layout/revert", { body: { version } }),
...(options as any),
});
};
@ -82,7 +64,7 @@ export const useRevertChanges = (options?: Partial<UseMutationOptions>) => {
export const useApplyChanges = (options?: Partial<UseMutationOptions>) => {
return useMutation<ApplyLayoutResult, Error, number>({
mutationFn: (version) =>
api.post("/v2/ApplyClusterLayout", { body: { version } }),
api.post("/v1/layout/apply", { body: { version } }),
...(options as any),
});
};

12
src/pages/cluster/page.tsx
View File

@ -1,13 +1,11 @@
import Page from "@/context/page-context";
import { useClusterStatus, useNodeInfo } from "./hooks";
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 { data: node } = useNodeInfo();
const nodes = useMemo(() => {
if (!data) return [];
@ -29,13 +27,13 @@ const ClusterPage = () => {
<Card.Body className="gap-1">
<Card.Title className="mb-2">Details</Card.Title>
{/* <DetailItem title="Node ID" value={node?.nodeId} /> */}
<DetailItem title="Garage Version" value={node?.garageVersion} />
<DetailItem title="Node ID" value={data?.node} />
<DetailItem title="Version" value={data?.garageVersion} />
{/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
<DetailItem title="DB engine" value={node?.dbEngine} />
<DetailItem title="DB engine" value={data?.dbEngine} />
<DetailItem
title="Layout version"
value={data?.layoutVersion || data?.layout?.version || "-"}
value={data?.layoutVersion || data?.layout?.version}
/>
</Card.Body>
</Card>

14
src/pages/cluster/types.ts
View File

@ -1,19 +1,5 @@
//
export type GetNodeInfoResult = {
success: {
[key: string]: {
nodeId: string;
garageVersion: string;
garageFeatures: string[];
rustVersion: string;
dbEngine: string;
};
};
error: Error;
}
export type GetStatusResult = {
node: string;
garageVersion: string;

2
src/pages/home/hooks.ts
View File

@ -5,6 +5,6 @@ import { useQuery } from "@tanstack/react-query";
export const useNodesHealth = () => {
return useQuery({
queryKey: ["health"],
queryFn: () => api.get<GetHealthResult>("/v2/GetClusterHealth"),
queryFn: () => api.get<GetHealthResult>("/v1/health"),
});
};

8
src/pages/keys/hooks.ts
View File

@ -10,7 +10,7 @@ import { CreateKeySchema } from "./schema";
export const useKeys = () => {
return useQuery({
queryKey: ["keys"],
queryFn: () => api.get<Key[]>("/v2/ListKeys"),
queryFn: () => api.get<Key[]>("/v1/key?list"),
});
};
@ -20,9 +20,9 @@ export const useCreateKey = (
return useMutation({
mutationFn: async (body) => {
if (body.isImport) {
return api.post("/v2/ImportKey", { body });
return api.post("/v1/key/import", { body });
}
return api.post("/v2/CreateKey", { body });
return api.post("/v1/key", { body });
},
...options,
});
@ -32,7 +32,7 @@ export const useRemoveKey = (
options?: UseMutationOptions<any, Error, string>
) => {
return useMutation({
mutationFn: (id) => api.post("/v2/DeleteKey", { params: { id } }),
mutationFn: (id) => api.delete("/v1/key", { params: { id } }),
...options,
});
};

2
src/pages/keys/page.tsx
View File

@ -24,7 +24,7 @@ const KeysPage = () => {
const fetchSecretKey = useCallback(async (id: string) => {
try {
const result = await api.get("/v2/GetKeyInfo", {
const result = await api.get("/v1/key", {
params: { id, showSecretKey: "true" },
});
if (!result?.secretAccessKey) {