mirror of
https://github.com/khairul169/garage-webui.git
synced 2025-04-28 14:59:31 +07:00
Compare commits
No commits in common. "main" and "1.0.3" have entirely different histories.
@ -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 ./
|
||||
|
||||
43
README.md
43
README.md
@ -31,18 +31,14 @@ If you install Garage using Docker, you can install this web UI alongside Garage
|
||||
```yml
|
||||
services:
|
||||
garage:
|
||||
image: dxflrs/garage:v1.0.1
|
||||
image: dxflrs/garage:v1.0.0
|
||||
container_name: garage
|
||||
volumes:
|
||||
- ./garage.toml:/etc/garage.toml
|
||||
- ./meta:/var/lib/garage/meta
|
||||
- ./data:/var/lib/garage/data
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 3900:3900
|
||||
- 3901:3901
|
||||
- 3902:3902
|
||||
- 3903:3903
|
||||
network_mode: host
|
||||
|
||||
webui:
|
||||
image: khairul169/garage-webui:latest
|
||||
@ -52,9 +48,6 @@ 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
|
||||
@ -62,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.9/garage-webui-v1.0.9-linux-amd64
|
||||
$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.2/garage-webui-v1.0.2-linux-amd64
|
||||
$ chmod +x garage-webui
|
||||
$ sudo cp garage-webui /usr/local/bin
|
||||
```
|
||||
@ -136,39 +129,11 @@ 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
|
||||
|
||||
|
||||
@ -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=""
|
||||
@ -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
|
||||
@ -10,12 +8,10 @@ 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
|
||||
)
|
||||
|
||||
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 +20,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
|
||||
)
|
||||
|
||||
@ -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=
|
||||
@ -29,8 +27,6 @@ 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=
|
||||
@ -44,8 +40,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=
|
||||
|
||||
@ -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)
|
||||
log.Fatal("Failed to load 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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
@ -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,
|
||||
})
|
||||
}
|
||||
@ -73,7 +73,8 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
|
||||
ObjectKey: &key,
|
||||
LastModified: object.LastModified,
|
||||
Size: object.Size,
|
||||
Url: fmt.Sprintf("/browse/%s/%s", bucket, *object.Key),
|
||||
ViewUrl: fmt.Sprintf("/browse/%s/%s?view=1", bucket, *object.Key),
|
||||
DownloadUrl: fmt.Sprintf("/browse/%s/%s?dl=1", bucket, *object.Key),
|
||||
})
|
||||
}
|
||||
|
||||
@ -83,10 +84,8 @@ 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")
|
||||
queryParams := r.URL.Query()
|
||||
view := queryParams.Get("view") == "1"
|
||||
thumbnail := queryParams.Get("thumb") == "1"
|
||||
download := queryParams.Get("dl") == "1"
|
||||
view := r.URL.Query().Get("view") == "1"
|
||||
download := r.URL.Query().Get("dl") == "1"
|
||||
|
||||
client, err := getS3Client(bucket)
|
||||
if err != nil {
|
||||
@ -94,18 +93,6 @@ 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),
|
||||
@ -122,51 +109,31 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
defer object.Body.Close()
|
||||
keys := strings.Split(key, "/")
|
||||
if view || download {
|
||||
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
|
||||
}
|
||||
|
||||
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("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 download {
|
||||
w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", keys[len(keys)-1]))
|
||||
}
|
||||
|
||||
if err != nil {
|
||||
utils.ResponseError(w, err)
|
||||
w.WriteHeader(http.StatusOK)
|
||||
_, err = io.Copy(w, object.Body)
|
||||
|
||||
if err != nil {
|
||||
utils.ResponseError(w, err)
|
||||
return
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
utils.ResponseSuccess(w, object)
|
||||
}
|
||||
|
||||
func (b *Browse) PutObject(w http.ResponseWriter, r *http.Request) {
|
||||
@ -333,7 +300,7 @@ func getS3Client(bucket string) (*s3.Client, error) {
|
||||
|
||||
awsConfig := aws.Config{
|
||||
Credentials: creds,
|
||||
Region: utils.Garage.GetS3Region(),
|
||||
Region: "garage",
|
||||
BaseEndpoint: aws.String(utils.Garage.GetS3Endpoint()),
|
||||
}
|
||||
|
||||
|
||||
@ -34,14 +34,13 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
|
||||
var data schema.Bucket
|
||||
if err := json.Unmarshal(body, &data); err != nil {
|
||||
var bucket schema.Bucket
|
||||
if err := json.Unmarshal(body, &bucket); err != nil {
|
||||
ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}
|
||||
return
|
||||
}
|
||||
|
||||
data.LocalAliases = bucket.LocalAliases
|
||||
ch <- data
|
||||
ch <- bucket
|
||||
}()
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -13,5 +13,6 @@ type BrowserObject struct {
|
||||
ObjectKey *string `json:"objectKey"`
|
||||
LastModified *time.Time `json:"lastModified"`
|
||||
Size *int64 `json:"size"`
|
||||
Url string `json:"url"`
|
||||
ViewUrl string `json:"viewUrl"`
|
||||
DownloadUrl string `json:"downloadUrl"`
|
||||
}
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
package schema
|
||||
|
||||
type GetBucketsRes struct {
|
||||
ID string `json:"id"`
|
||||
GlobalAliases []string `json:"globalAliases"`
|
||||
LocalAliases []LocalAlias `json:"localAliases"`
|
||||
ID string `json:"id"`
|
||||
GlobalAliases []string `json:"globalAliases"`
|
||||
LocalAliases []string `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"`
|
||||
@ -22,17 +21,12 @@ 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 []string `json:"bucketLocalAliases"`
|
||||
SecretAccessKey string `json:"secretAccessKey"`
|
||||
AccessKeyID string `json:"accessKeyId"`
|
||||
Name string `json:"name"`
|
||||
Permissions Permissions `json:"permissions"`
|
||||
BucketLocalAliases []interface{} `json:"bucketLocalAliases"`
|
||||
SecretAccessKey string `json:"secretAccessKey"`
|
||||
}
|
||||
|
||||
type Permissions struct {
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
package schema
|
||||
|
||||
type Config struct {
|
||||
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"`
|
||||
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"`
|
||||
}
|
||||
|
||||
type Admin struct {
|
||||
|
||||
@ -3,6 +3,4 @@
|
||||
|
||||
package ui
|
||||
|
||||
import "net/http"
|
||||
|
||||
func ServeUI(mux *http.ServeMux) {}
|
||||
func ServeUI() {}
|
||||
|
||||
@ -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"`)
|
||||
})
|
||||
}))
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ package utils
|
||||
import (
|
||||
"bytes"
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"fmt"
|
||||
"io"
|
||||
"khairul169/garage-webui/schema"
|
||||
@ -74,17 +73,6 @@ 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 {
|
||||
@ -165,7 +153,7 @@ func (g *garage) Fetch(url string, options *FetchOptions) ([]byte, error) {
|
||||
message = fmt.Sprintf("%v", data["message"])
|
||||
}
|
||||
|
||||
return nil, errors.New(message)
|
||||
return nil, fmt.Errorf(message)
|
||||
}
|
||||
|
||||
body, err := io.ReadAll(res.Body)
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
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,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())
|
||||
}
|
||||
@ -1,17 +1,13 @@
|
||||
services:
|
||||
garage:
|
||||
image: dxflrs/garage:v1.0.1
|
||||
image: dxflrs/garage:v1.0.0
|
||||
container_name: garage
|
||||
volumes:
|
||||
- ./garage.toml:/etc/garage.toml
|
||||
- ./meta:/var/lib/garage/meta
|
||||
- ./data:/var/lib/garage/data
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 3900:3900
|
||||
- 3901:3901
|
||||
- 3902:3903
|
||||
- 3903:3903
|
||||
network_mode: host
|
||||
|
||||
webui:
|
||||
image: khairul169/garage-webui:latest
|
||||
@ -21,7 +17,3 @@ services:
|
||||
- ./garage.toml:/etc/garage.toml:ro
|
||||
ports:
|
||||
- 3909:3909
|
||||
environment:
|
||||
API_BASE_URL: "http://garage:3903"
|
||||
S3_ENDPOINT_URL: "http://garage:3900"
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "garage-webui",
|
||||
"private": true,
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.2",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
7
src/global.d.ts
vendored
@ -1,7 +0,0 @@
|
||||
export {};
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__BASE_PATH?: string;
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
};
|
||||
};
|
||||
@ -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,30 +27,26 @@ const api = {
|
||||
|
||||
const res = await fetch(_url, {
|
||||
...options,
|
||||
credentials: "include",
|
||||
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 (res.status === 401 && !url.startsWith("/auth")) {
|
||||
window.location.href = utils.url("/auth/login");
|
||||
throw new APIError("unauthorized", res.status);
|
||||
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 APIError(message, res.status);
|
||||
}
|
||||
|
||||
return data as unknown as T;
|
||||
const text = await res.text();
|
||||
return text as unknown as T;
|
||||
},
|
||||
|
||||
async get<T = any>(url: string, options?: Partial<FetchOptions>) {
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
// consts.ts
|
||||
|
||||
export const BASE_PATH =
|
||||
(import.meta.env.PROD ? window.__BASE_PATH : null) ||
|
||||
import.meta.env.VITE_BASE_PATH ||
|
||||
"";
|
||||
@ -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("/");
|
||||
};
|
||||
|
||||
@ -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");
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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"),
|
||||
});
|
||||
@ -4,7 +4,7 @@ import { readableBytes } from "@/lib/utils";
|
||||
import Button from "@/components/ui/button";
|
||||
|
||||
type Props = {
|
||||
data: Bucket & { aliases: string[] };
|
||||
data: Bucket;
|
||||
};
|
||||
|
||||
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.aliases?.join(", ")}
|
||||
{data.globalAliases?.join(", ")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ import { shareDialog } from "./share-dialog";
|
||||
|
||||
type Props = {
|
||||
prefix?: string;
|
||||
object: Pick<Object, "objectKey" | "url">;
|
||||
object: Pick<Object, "objectKey" | "downloadUrl">;
|
||||
end?: boolean;
|
||||
};
|
||||
|
||||
@ -30,7 +30,7 @@ const ObjectActions = ({ prefix = "", object, end }: Props) => {
|
||||
});
|
||||
|
||||
const onDownload = () => {
|
||||
window.open(API_URL + object.url + "?dl=1", "_blank");
|
||||
window.open(API_URL + object.downloadUrl, "_blank");
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
|
||||
@ -1,16 +1,10 @@
|
||||
import { Alert, Loading, Table } from "react-daisyui";
|
||||
import { 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 {
|
||||
CircleXIcon,
|
||||
FileArchive,
|
||||
FileIcon,
|
||||
FileType,
|
||||
Folder,
|
||||
} from "lucide-react";
|
||||
import { FileArchive, FileIcon, FileType, Folder } from "lucide-react";
|
||||
import { useBucketContext } from "../context";
|
||||
import ObjectActions from "./object-actions";
|
||||
import GotoTopButton from "@/components/ui/goto-top-btn";
|
||||
@ -22,17 +16,14 @@ type Props = {
|
||||
|
||||
const ObjectList = ({ prefix, onPrefixChange }: Props) => {
|
||||
const { bucketName } = useBucketContext();
|
||||
const { data, error, isLoading } = useBrowseObjects(bucketName, {
|
||||
prefix,
|
||||
limit: 1000,
|
||||
});
|
||||
const { data } = useBrowseObjects(bucketName, { prefix, limit: 1000 });
|
||||
|
||||
const onObjectClick = (object: Object) => {
|
||||
window.open(API_URL + object.url + "?view=1", "_blank");
|
||||
window.open(API_URL + object.viewUrl, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto min-h-[400px]">
|
||||
<div className="overflow-x-auto overflow-y-hidden">
|
||||
<Table>
|
||||
<Table.Head>
|
||||
<span>Name</span>
|
||||
@ -41,29 +32,13 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
|
||||
</Table.Head>
|
||||
|
||||
<Table.Body>
|
||||
{isLoading ? (
|
||||
{!data?.prefixes?.length && !data?.objects?.length && (
|
||||
<tr>
|
||||
<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}>
|
||||
<td className="text-center py-8" colSpan={3}>
|
||||
No objects
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
)}
|
||||
|
||||
{data?.prefixes.map((prefix) => (
|
||||
<tr
|
||||
@ -84,7 +59,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
|
||||
</span>
|
||||
</td>
|
||||
<td colSpan={2} />
|
||||
<ObjectActions object={{ objectKey: prefix, url: "" }} />
|
||||
<ObjectActions object={{ objectKey: prefix, downloadUrl: "" }} />
|
||||
</tr>
|
||||
))}
|
||||
|
||||
@ -121,9 +96,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
|
||||
<ObjectActions
|
||||
prefix={data.prefix}
|
||||
object={object}
|
||||
end={
|
||||
idx >= data.objects.length - 2 && data.objects.length > 5
|
||||
}
|
||||
end={idx >= data.objects.length - 2}
|
||||
/>
|
||||
</tr>
|
||||
);
|
||||
@ -152,10 +125,9 @@ const FilePreview = ({ ext, object }: FilePreviewProps) => {
|
||||
}
|
||||
|
||||
if (type === "image") {
|
||||
const thumbnailSupport = ["jpg", "jpeg", "png", "gif"].includes(ext || "");
|
||||
return (
|
||||
<img
|
||||
src={API_URL + object.url + (thumbnailSupport ? "?thumb=1" : "?view=1")}
|
||||
src={API_URL + object.viewUrl}
|
||||
alt={object.objectKey}
|
||||
className="size-5 object-cover overflow-hidden mr-2"
|
||||
/>
|
||||
|
||||
@ -15,7 +15,8 @@ export type Object = {
|
||||
objectKey: string;
|
||||
lastModified: Date;
|
||||
size: number;
|
||||
url: string;
|
||||
viewUrl: string;
|
||||
downloadUrl: string;
|
||||
};
|
||||
|
||||
export type PutObjectPayload = {
|
||||
|
||||
@ -2,18 +2,12 @@ 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,
|
||||
CircleXIcon,
|
||||
FolderSearch,
|
||||
LockKeyhole,
|
||||
} from "lucide-react";
|
||||
import { ChartLine, 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[] = [
|
||||
{
|
||||
@ -38,40 +32,26 @@ const tabs: Tab[] = [
|
||||
|
||||
const ManageBucketPage = () => {
|
||||
const { id } = useParams();
|
||||
const { data, error, isLoading, refetch } = useBucket(id);
|
||||
const { data, refetch } = useBucket(id);
|
||||
|
||||
const name = data?.globalAliases[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
<Page
|
||||
title={name || "Manage Bucket"}
|
||||
prev="/buckets"
|
||||
actions={data ? <MenuButton /> : undefined}
|
||||
/>
|
||||
|
||||
{isLoading && (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<Loading size="lg" />
|
||||
</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>
|
||||
<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} className="max-w-2xl">
|
||||
<Modal ref={dialogRef} backdrop open={isOpen}>
|
||||
<Modal.Header className="mb-1">Allow Key</Modal.Header>
|
||||
<Modal.Body>
|
||||
<p>Enter the key you want to allow access to.</p>
|
||||
@ -100,7 +100,6 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
|
||||
/>
|
||||
Key
|
||||
</label>
|
||||
<label>Local Aliases</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
@ -130,31 +129,23 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
|
||||
<Table.Body>
|
||||
{!keyFields.length ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-center">
|
||||
<td colSpan={4} className="text-center">
|
||||
No keys found
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
{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>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,6 @@ const PermissionsTab = () => {
|
||||
<Table.Head>
|
||||
<span>#</span>
|
||||
<span>Key</span>
|
||||
<span>Aliases</span>
|
||||
<span>Read</span>
|
||||
<span>Write</span>
|
||||
<span>Owner</span>
|
||||
@ -62,7 +61,6 @@ 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,27 +10,20 @@ const BucketsPage = () => {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const items = useMemo(() => {
|
||||
let buckets =
|
||||
data?.map((bucket) => {
|
||||
return {
|
||||
...bucket,
|
||||
aliases: [
|
||||
...(bucket.globalAliases || []),
|
||||
...(bucket.localAliases?.map((l) => l.alias) || []),
|
||||
],
|
||||
};
|
||||
}) || [];
|
||||
let buckets = data || [];
|
||||
|
||||
if (search?.length > 0) {
|
||||
const q = search.toLowerCase();
|
||||
buckets = buckets.filter(
|
||||
(bucket) =>
|
||||
bucket.id.includes(q) ||
|
||||
bucket.aliases.find((alias) => alias.includes(q))
|
||||
bucket.globalAliases.find((alias) => alias.includes(q))
|
||||
);
|
||||
}
|
||||
|
||||
buckets = buckets.sort((a, b) => a.aliases[0].localeCompare(b.aliases[0]));
|
||||
buckets = buckets.sort((a, b) =>
|
||||
a.globalAliases[0].localeCompare(b.globalAliases[0])
|
||||
);
|
||||
|
||||
return buckets;
|
||||
}, [data, search]);
|
||||
|
||||
@ -5,7 +5,6 @@ export type GetBucketRes = Bucket[];
|
||||
export type Bucket = {
|
||||
id: string;
|
||||
globalAliases: string[];
|
||||
localAliases: LocalAlias[];
|
||||
websiteAccess: boolean;
|
||||
websiteConfig?: WebsiteConfig | null;
|
||||
keys: Key[];
|
||||
@ -18,16 +17,11 @@ export type Bucket = {
|
||||
quotas: Quotas;
|
||||
};
|
||||
|
||||
export type LocalAlias = {
|
||||
accessKeyId: string;
|
||||
alias: string;
|
||||
};
|
||||
|
||||
export type Key = {
|
||||
accessKeyId: string;
|
||||
name: string;
|
||||
permissions: Permissions;
|
||||
bucketLocalAliases: string[];
|
||||
bucketLocalAliases: any[];
|
||||
};
|
||||
|
||||
export type Permissions = {
|
||||
|
||||
@ -66,8 +66,7 @@ const AssignNodeDialog = () => {
|
||||
}, [data]);
|
||||
|
||||
const zoneList = useMemo(() => {
|
||||
const nodes = cluster?.nodes || cluster?.knownNodes || [];
|
||||
const list = nodes
|
||||
const list = cluster?.nodes
|
||||
.flatMap((i) => {
|
||||
const role = layout?.roles.find((role) => role.id === i.id);
|
||||
const staged = layout?.stagedRoleChanges.find(
|
||||
@ -84,8 +83,7 @@ const AssignNodeDialog = () => {
|
||||
}, [cluster, layout]);
|
||||
|
||||
const tagsList = useMemo(() => {
|
||||
const nodes = cluster?.nodes || cluster?.knownNodes || [];
|
||||
const list = nodes
|
||||
const list = cluster?.nodes
|
||||
.flatMap((i) => {
|
||||
const role = layout?.roles.find((role) => role.id === i.id);
|
||||
const staged = layout?.stagedRoleChanges.find(
|
||||
|
||||
@ -268,9 +268,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
|
||||
|
||||
<Dropdown
|
||||
end
|
||||
vertical={
|
||||
idx > 2 && idx >= items.length - 2 ? "top" : "bottom"
|
||||
}
|
||||
vertical={idx >= items.length - 2 ? "top" : "bottom"}
|
||||
>
|
||||
<Dropdown.Toggle button={false}>
|
||||
<Button shape="circle" color="ghost">
|
||||
|
||||
@ -2,22 +2,9 @@ import Page from "@/context/page-context";
|
||||
import { useClusterStatus } from "./hooks";
|
||||
import { Card } from "react-daisyui";
|
||||
import NodesList from "./components/nodes-list";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const ClusterPage = () => {
|
||||
const { data } = useClusterStatus();
|
||||
const nodes = useMemo(() => {
|
||||
if (!data) return [];
|
||||
|
||||
if (Array.isArray(data.knownNodes)) {
|
||||
return data.knownNodes.map((node) => ({
|
||||
...node,
|
||||
role: data.layout?.roles.find((role) => role.id === node.id),
|
||||
}));
|
||||
}
|
||||
|
||||
return data.nodes || [];
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
@ -31,10 +18,7 @@ const ClusterPage = () => {
|
||||
<DetailItem title="Version" value={data?.garageVersion} />
|
||||
{/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
|
||||
<DetailItem title="DB engine" value={data?.dbEngine} />
|
||||
<DetailItem
|
||||
title="Layout version"
|
||||
value={data?.layoutVersion || data?.layout?.version}
|
||||
/>
|
||||
<DetailItem title="Layout version" value={data?.layoutVersion} />
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
@ -42,7 +26,7 @@ const ClusterPage = () => {
|
||||
<Card.Body>
|
||||
<Card.Title>Nodes</Card.Title>
|
||||
|
||||
<NodesList nodes={nodes} />
|
||||
<NodesList nodes={data?.nodes || []} />
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -7,9 +7,7 @@ export type GetStatusResult = {
|
||||
rustVersion: string;
|
||||
dbEngine: string;
|
||||
layoutVersion: number;
|
||||
nodes?: Node[];
|
||||
knownNodes?: Node[];
|
||||
layout?: GetClusterLayoutResult;
|
||||
nodes: Node[];
|
||||
};
|
||||
|
||||
export type Node = {
|
||||
@ -19,9 +17,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 = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user