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.1" have entirely different histories.
@ -1,7 +1,9 @@
|
|||||||
FROM node:20-slim AS frontend
|
FROM node:20-slim AS frontend
|
||||||
WORKDIR /app
|
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 ./
|
COPY package.json pnpm-lock.yaml ./
|
||||||
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
|
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 . .
|
COPY . .
|
||||||
RUN pnpm run build
|
RUN pnpm run build
|
||||||
|
|
||||||
FROM golang:1.23 AS backend
|
FROM golang:1.22.5 AS backend
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
COPY backend/go.mod backend/go.sum ./
|
COPY backend/go.mod backend/go.sum ./
|
||||||
|
|||||||
95
README.md
95
README.md
@ -6,17 +6,9 @@ A simple admin web UI for [Garage](https://garagehq.deuxfleurs.fr/), a self-host
|
|||||||
|
|
||||||
[ [Screenshots](misc/SCREENSHOTS.md) | [Install Garage](https://garagehq.deuxfleurs.fr/documentation/quick-start/) | [Garage Git](https://git.deuxfleurs.fr/Deuxfleurs/garage) ]
|
[ [Screenshots](misc/SCREENSHOTS.md) | [Install Garage](https://garagehq.deuxfleurs.fr/documentation/quick-start/) | [Garage Git](https://git.deuxfleurs.fr/Deuxfleurs/garage) ]
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- Garage health status
|
|
||||||
- Cluster & layout management
|
|
||||||
- Create, update, or view bucket information
|
|
||||||
- Integrated objects/bucket browser
|
|
||||||
- Create & assign access keys
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
The Garage Web UI is available as a single executable binary and docker image. You can install it using the command line or with Docker Compose.
|
The Garage Web UI is available as a Docker image. You can install it using the command line or with Docker Compose.
|
||||||
|
|
||||||
### Docker CLI
|
### Docker CLI
|
||||||
|
|
||||||
@ -31,18 +23,14 @@ If you install Garage using Docker, you can install this web UI alongside Garage
|
|||||||
```yml
|
```yml
|
||||||
services:
|
services:
|
||||||
garage:
|
garage:
|
||||||
image: dxflrs/garage:v1.0.1
|
image: dxflrs/garage:v1.0.0
|
||||||
container_name: garage
|
container_name: garage
|
||||||
volumes:
|
volumes:
|
||||||
- ./garage.toml:/etc/garage.toml
|
- ./garage.toml:/etc/garage.toml
|
||||||
- ./meta:/var/lib/garage/meta
|
- ./meta:/var/lib/garage/meta
|
||||||
- ./data:/var/lib/garage/data
|
- ./data:/var/lib/garage/data
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
network_mode: host
|
||||||
- 3900:3900
|
|
||||||
- 3901:3901
|
|
||||||
- 3902:3902
|
|
||||||
- 3903:3903
|
|
||||||
|
|
||||||
webui:
|
webui:
|
||||||
image: khairul169/garage-webui:latest
|
image: khairul169/garage-webui:latest
|
||||||
@ -52,53 +40,6 @@ services:
|
|||||||
- ./garage.toml:/etc/garage.toml:ro
|
- ./garage.toml:/etc/garage.toml:ro
|
||||||
ports:
|
ports:
|
||||||
- 3909:3909
|
- 3909:3909
|
||||||
environment:
|
|
||||||
API_BASE_URL: "http://garage:3903"
|
|
||||||
S3_ENDPOINT_URL: "http://garage:3900"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Without Docker
|
|
||||||
|
|
||||||
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
|
|
||||||
$ chmod +x garage-webui
|
|
||||||
$ sudo cp garage-webui /usr/local/bin
|
|
||||||
```
|
|
||||||
|
|
||||||
Run the program with specified `garage.toml` config path.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ CONFIG_PATH=./garage.toml garage-webui
|
|
||||||
```
|
|
||||||
|
|
||||||
If you want to run the program at startup, you may want to create a systemd service.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ sudo nano /etc/systemd/system/garage-webui.service
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
[Unit]
|
|
||||||
Description=Garage Web UI
|
|
||||||
After=network.target
|
|
||||||
|
|
||||||
[Service]
|
|
||||||
Environment="PORT=3919"
|
|
||||||
Environment="CONFIG_PATH=/etc/garage.toml"
|
|
||||||
ExecStart=/usr/local/bin/garage-webui
|
|
||||||
Restart=always
|
|
||||||
|
|
||||||
[Install]
|
|
||||||
WantedBy=default.target
|
|
||||||
```
|
|
||||||
|
|
||||||
Then reload and start the garage-webui service.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
$ sudo systemctl daemon-reload
|
|
||||||
$ sudo systemctl enable --now garage-webui
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Configuration
|
### Configuration
|
||||||
@ -136,39 +77,11 @@ admin_token = "YOUR_ADMIN_TOKEN_HERE"
|
|||||||
metrics_token = "YOUR_METRICS_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.
|
However, if it fails to load, you can set these environment variables instead:
|
||||||
|
|
||||||
### Environment Variables
|
|
||||||
|
|
||||||
Configurable envs:
|
|
||||||
|
|
||||||
- `CONFIG_PATH`: Path to the Garage `config.toml` file. Defaults to `/etc/garage.toml`.
|
- `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_BASE_URL`: Garage admin API endpoint URL.
|
||||||
- `API_ADMIN_KEY`: Admin API key.
|
- `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
|
### 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,28 +1,8 @@
|
|||||||
module khairul169/garage-webui
|
module khairul169/garage-webui
|
||||||
|
|
||||||
go 1.23.0
|
go 1.22.5
|
||||||
|
|
||||||
toolchain go1.24.0
|
|
||||||
|
|
||||||
require (
|
require (
|
||||||
github.com/aws/aws-sdk-go-v2 v1.30.4
|
github.com/joho/godotenv v1.5.1 // indirect
|
||||||
github.com/aws/aws-sdk-go-v2/credentials v1.17.28
|
github.com/pelletier/go-toml/v2 v2.2.2 // indirect
|
||||||
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
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.16 // indirect
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.11.4 // indirect
|
|
||||||
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,39 +1,9 @@
|
|||||||
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=
|
|
||||||
github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.6.4/go.mod h1:/MQxMqci8tlqDH+pjmoLu1i0tbWCUP1hhyMRuFxpQCw=
|
|
||||||
github.com/aws/aws-sdk-go-v2/credentials v1.17.28 h1:m8+AHY/ND8CMHJnPoH7PJIRakWGa4gbfbxuY9TGTUXM=
|
|
||||||
github.com/aws/aws-sdk-go-v2/credentials v1.17.28/go.mod h1:6TF7dSc78ehD1SL6KpRIPKMA1GyyWflIkjqg+qmf4+c=
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.16 h1:TNyt/+X43KJ9IJJMjKfa3bNTiZbUP7DeCxfbTROESwY=
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/configsources v1.3.16/go.mod h1:2DwJF39FlNAUiX5pAc0UNeiz16lK2t7IaFcm0LFHEgc=
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.16 h1:jYfy8UPmd+6kJW5YhY0L1/KftReOGxI/4NtVSTh9O/I=
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.6.16/go.mod h1:7ZfEPZxkW42Afq4uQB8H2E2e6ebh6mXTueEpYzjCzcs=
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.16 h1:mimdLQkIX1zr8GIPY1ZtALdBQGxcASiBd2MOp8m/dMc=
|
|
||||||
github.com/aws/aws-sdk-go-v2/internal/v4a v1.3.16/go.mod h1:YHk6owoSwrIsok+cAH9PENCOGoH5PU2EllX4vLtSrsY=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.11.4 h1:KypMCbLPPHEmf9DgMGw51jMj77VfGPAN2Kv4cfhlfgI=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/accept-encoding v1.11.4/go.mod h1:Vz1JQXliGcQktFTN/LN6uGppAIRoLBR2bMvIMP0gOjc=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.18 h1:GckUnpm4EJOAio1c8o25a+b3lVfwVzC9gnSBqiiNmZM=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.18/go.mod h1:Br6+bxfG33Dk3ynmkhsW2Z/t9D4+lRqdLDNCKi85w0U=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.18 h1:tJ5RnkHCiSH0jyd6gROjlJtNwov0eGYNz8s8nFcR0jQ=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.18/go.mod h1:++NHzT+nAF7ZPrHPsA+ENvsXkOO8wEu+C6RXltAG4/c=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.16 h1:jg16PhLPUiHIj8zYIW6bqzeQSuHVEiWnGA0Brz5Xv2I=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.16/go.mod h1:Uyk1zE1VVdsHSU7096h/rwnXDzOzYQVl+FNPhPw7ShY=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/s3 v1.59.0 h1:Cso4Ev/XauMVsbwdhYEoxg8rxZWw43CFqqaPB5w3W2c=
|
|
||||||
github.com/aws/aws-sdk-go-v2/service/s3 v1.59.0/go.mod h1:BSPI0EfnYUuNHPS0uqIo5VrRwzie+Fp+YhQOUs16sKI=
|
|
||||||
github.com/aws/smithy-go v1.20.4 h1:2HK1zBdPgRbjFOHlfeQZfpC4r72MOb9bZkiFwggKO+4=
|
|
||||||
github.com/aws/smithy-go v1.20.4/go.mod h1:irrKGvNn1InZwb2d7fkIRNucdfwR8R+Ts3wxYa/cJHg=
|
|
||||||
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||||
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/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 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
|
||||||
github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
|
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 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
|
||||||
github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
|
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=
|
|
||||||
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
||||||
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
|
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
|
||||||
github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
|
github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
|
||||||
@ -42,11 +12,7 @@ github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/
|
|||||||
github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
||||||
github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
|
github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
|
||||||
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
|
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=
|
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/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.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||||
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
|
|
||||||
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||||
|
|||||||
@ -7,35 +7,22 @@ import (
|
|||||||
"khairul169/garage-webui/utils"
|
"khairul169/garage-webui/utils"
|
||||||
"log"
|
"log"
|
||||||
"net/http"
|
"net/http"
|
||||||
"os"
|
|
||||||
|
|
||||||
"github.com/joho/godotenv"
|
"github.com/joho/godotenv"
|
||||||
)
|
)
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
// Initialize app
|
|
||||||
godotenv.Load()
|
godotenv.Load()
|
||||||
utils.InitCacheManager()
|
|
||||||
sessionMgr := utils.InitSessionManager()
|
|
||||||
|
|
||||||
if err := utils.Garage.LoadConfig(); err != nil {
|
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")
|
http.HandleFunc("/api/config", router.GetConfig)
|
||||||
mux := http.NewServeMux()
|
http.HandleFunc("/api/buckets", router.GetAllBuckets)
|
||||||
|
http.HandleFunc("/api/*", router.ProxyHandler)
|
||||||
|
|
||||||
// Serve API
|
ui.ServeUI()
|
||||||
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))
|
|
||||||
}
|
|
||||||
|
|
||||||
host := utils.GetEnv("HOST", "0.0.0.0")
|
host := utils.GetEnv("HOST", "0.0.0.0")
|
||||||
port := utils.GetEnv("PORT", "3909")
|
port := utils.GetEnv("PORT", "3909")
|
||||||
@ -43,7 +30,7 @@ func main() {
|
|||||||
addr := fmt.Sprintf("%s:%s", host, port)
|
addr := fmt.Sprintf("%s:%s", host, port)
|
||||||
log.Printf("Starting server on http://%s", addr)
|
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)
|
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,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,346 +0,0 @@
|
|||||||
package router
|
|
||||||
|
|
||||||
import (
|
|
||||||
"context"
|
|
||||||
"encoding/json"
|
|
||||||
"errors"
|
|
||||||
"fmt"
|
|
||||||
"io"
|
|
||||||
"khairul169/garage-webui/schema"
|
|
||||||
"khairul169/garage-webui/utils"
|
|
||||||
"net/http"
|
|
||||||
"strconv"
|
|
||||||
"strings"
|
|
||||||
"time"
|
|
||||||
|
|
||||||
"github.com/aws/aws-sdk-go-v2/aws"
|
|
||||||
"github.com/aws/aws-sdk-go-v2/credentials"
|
|
||||||
"github.com/aws/aws-sdk-go-v2/service/s3"
|
|
||||||
"github.com/aws/aws-sdk-go-v2/service/s3/types"
|
|
||||||
"github.com/aws/smithy-go"
|
|
||||||
)
|
|
||||||
|
|
||||||
type Browse struct{}
|
|
||||||
|
|
||||||
func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
|
|
||||||
query := r.URL.Query()
|
|
||||||
bucket := r.PathValue("bucket")
|
|
||||||
prefix := query.Get("prefix")
|
|
||||||
continuationToken := query.Get("next")
|
|
||||||
|
|
||||||
limit, err := strconv.Atoi(query.Get("limit"))
|
|
||||||
if err != nil {
|
|
||||||
limit = 100
|
|
||||||
}
|
|
||||||
|
|
||||||
client, err := getS3Client(bucket)
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
objects, err := client.ListObjectsV2(context.Background(), &s3.ListObjectsV2Input{
|
|
||||||
Bucket: aws.String(bucket),
|
|
||||||
Prefix: aws.String(prefix),
|
|
||||||
Delimiter: aws.String("/"),
|
|
||||||
MaxKeys: aws.Int32(int32(limit)),
|
|
||||||
ContinuationToken: aws.String(continuationToken),
|
|
||||||
})
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
result := schema.BrowseObjectResult{
|
|
||||||
Prefixes: []string{},
|
|
||||||
Objects: []schema.BrowserObject{},
|
|
||||||
Prefix: prefix,
|
|
||||||
NextToken: objects.NextContinuationToken,
|
|
||||||
}
|
|
||||||
|
|
||||||
for _, prefix := range objects.CommonPrefixes {
|
|
||||||
result.Prefixes = append(result.Prefixes, *prefix.Prefix)
|
|
||||||
}
|
|
||||||
|
|
||||||
for _, object := range objects.Contents {
|
|
||||||
key := strings.TrimPrefix(*object.Key, prefix)
|
|
||||||
if key == "" {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
result.Objects = append(result.Objects, schema.BrowserObject{
|
|
||||||
ObjectKey: &key,
|
|
||||||
LastModified: object.LastModified,
|
|
||||||
Size: object.Size,
|
|
||||||
Url: fmt.Sprintf("/browse/%s/%s", bucket, *object.Key),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
utils.ResponseSuccess(w, result)
|
|
||||||
}
|
|
||||||
|
|
||||||
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"
|
|
||||||
|
|
||||||
client, err := getS3Client(bucket)
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
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),
|
|
||||||
})
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
var ae smithy.APIError
|
|
||||||
if errors.As(err, &ae) && ae.ErrorCode() == "NoSuchKey" {
|
|
||||||
utils.ResponseErrorStatus(w, err, http.StatusNotFound)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
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("Etag", *object.ETag)
|
|
||||||
}
|
|
||||||
|
|
||||||
_, err = io.Copy(w, object.Body)
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
func (b *Browse) PutObject(w http.ResponseWriter, r *http.Request) {
|
|
||||||
bucket := r.PathValue("bucket")
|
|
||||||
key := r.PathValue("key")
|
|
||||||
isDirectory := strings.HasSuffix(key, "/")
|
|
||||||
|
|
||||||
file, headers, err := r.FormFile("file")
|
|
||||||
if err != nil && !isDirectory {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if file != nil {
|
|
||||||
defer file.Close()
|
|
||||||
}
|
|
||||||
|
|
||||||
client, err := getS3Client(bucket)
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var contentType string = ""
|
|
||||||
var size int64 = 0
|
|
||||||
|
|
||||||
if file != nil {
|
|
||||||
contentType = headers.Header.Get("Content-Type")
|
|
||||||
size = headers.Size
|
|
||||||
}
|
|
||||||
|
|
||||||
result, err := client.PutObject(context.Background(), &s3.PutObjectInput{
|
|
||||||
Bucket: aws.String(bucket),
|
|
||||||
Key: aws.String(key),
|
|
||||||
Body: file,
|
|
||||||
ContentLength: aws.Int64(size),
|
|
||||||
ContentType: aws.String(contentType),
|
|
||||||
})
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, fmt.Errorf("cannot put object: %w", err))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
utils.ResponseSuccess(w, result)
|
|
||||||
}
|
|
||||||
|
|
||||||
func (b *Browse) DeleteObject(w http.ResponseWriter, r *http.Request) {
|
|
||||||
bucket := r.PathValue("bucket")
|
|
||||||
key := r.PathValue("key")
|
|
||||||
recursive := r.URL.Query().Get("recursive") == "true"
|
|
||||||
isDirectory := strings.HasSuffix(key, "/")
|
|
||||||
|
|
||||||
client, err := getS3Client(bucket)
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Delete directory and its content
|
|
||||||
if isDirectory && recursive {
|
|
||||||
objects, err := client.ListObjectsV2(context.Background(), &s3.ListObjectsV2Input{
|
|
||||||
Bucket: aws.String(bucket),
|
|
||||||
Prefix: aws.String(key),
|
|
||||||
})
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if len(objects.Contents) == 0 {
|
|
||||||
utils.ResponseSuccess(w, true)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
keys := make([]types.ObjectIdentifier, 0, len(objects.Contents))
|
|
||||||
|
|
||||||
for _, object := range objects.Contents {
|
|
||||||
keys = append(keys, types.ObjectIdentifier{
|
|
||||||
Key: object.Key,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
res, err := client.DeleteObjects(context.Background(), &s3.DeleteObjectsInput{
|
|
||||||
Bucket: aws.String(bucket),
|
|
||||||
Delete: &types.Delete{Objects: keys},
|
|
||||||
})
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, fmt.Errorf("cannot delete object: %w", err))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if len(res.Errors) > 0 {
|
|
||||||
utils.ResponseError(w, fmt.Errorf("cannot delete object: %v", res.Errors[0]))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
utils.ResponseSuccess(w, res)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Delete single object
|
|
||||||
res, err := client.DeleteObject(context.Background(), &s3.DeleteObjectInput{
|
|
||||||
Bucket: aws.String(bucket),
|
|
||||||
Key: aws.String(key),
|
|
||||||
})
|
|
||||||
|
|
||||||
if err != nil {
|
|
||||||
utils.ResponseError(w, fmt.Errorf("cannot delete object: %w", err))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
utils.ResponseSuccess(w, res)
|
|
||||||
}
|
|
||||||
|
|
||||||
func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
|
|
||||||
cacheKey := fmt.Sprintf("key:%s", bucket)
|
|
||||||
cacheData := utils.Cache.Get(cacheKey)
|
|
||||||
|
|
||||||
if cacheData != nil {
|
|
||||||
return cacheData.(aws.CredentialsProvider), nil
|
|
||||||
}
|
|
||||||
|
|
||||||
body, err := utils.Garage.Fetch("/v1/bucket?globalAlias="+bucket, &utils.FetchOptions{})
|
|
||||||
if err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
|
|
||||||
var bucketData schema.Bucket
|
|
||||||
if err := json.Unmarshal(body, &bucketData); err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
|
|
||||||
var key schema.KeyElement
|
|
||||||
|
|
||||||
for _, k := range bucketData.Keys {
|
|
||||||
if !k.Permissions.Read || !k.Permissions.Write {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
body, err := utils.Garage.Fetch(fmt.Sprintf("/v1/key?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
|
|
||||||
if err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
if err := json.Unmarshal(body, &key); err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
credential := credentials.NewStaticCredentialsProvider(key.AccessKeyID, key.SecretAccessKey, "")
|
|
||||||
utils.Cache.Set(cacheKey, credential, time.Hour)
|
|
||||||
|
|
||||||
return credential, nil
|
|
||||||
}
|
|
||||||
|
|
||||||
func getS3Client(bucket string) (*s3.Client, error) {
|
|
||||||
creds, err := getBucketCredentials(bucket)
|
|
||||||
if err != nil {
|
|
||||||
return nil, fmt.Errorf("cannot get credentials for bucket %s: %w", bucket, err)
|
|
||||||
}
|
|
||||||
|
|
||||||
awsConfig := aws.Config{
|
|
||||||
Credentials: creds,
|
|
||||||
Region: utils.Garage.GetS3Region(),
|
|
||||||
BaseEndpoint: aws.String(utils.Garage.GetS3Endpoint()),
|
|
||||||
}
|
|
||||||
|
|
||||||
client := s3.NewFromConfig(awsConfig, func(o *s3.Options) {
|
|
||||||
o.UsePathStyle = true
|
|
||||||
o.EndpointOptions.DisableHTTPS = true
|
|
||||||
})
|
|
||||||
|
|
||||||
return client, nil
|
|
||||||
}
|
|
||||||
@ -8,9 +8,7 @@ import (
|
|||||||
"net/http"
|
"net/http"
|
||||||
)
|
)
|
||||||
|
|
||||||
type Buckets struct{}
|
func GetAllBuckets(w http.ResponseWriter, r *http.Request) {
|
||||||
|
|
||||||
func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
|
|
||||||
body, err := utils.Garage.Fetch("/v1/bucket?list", &utils.FetchOptions{})
|
body, err := utils.Garage.Fetch("/v1/bucket?list", &utils.FetchOptions{})
|
||||||
if err != nil {
|
if err != nil {
|
||||||
utils.ResponseError(w, err)
|
utils.ResponseError(w, err)
|
||||||
@ -34,14 +32,13 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
var data schema.Bucket
|
var bucket schema.Bucket
|
||||||
if err := json.Unmarshal(body, &data); err != nil {
|
if err := json.Unmarshal(body, &bucket); err != nil {
|
||||||
ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}
|
ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
data.LocalAliases = bucket.LocalAliases
|
ch <- bucket
|
||||||
ch <- data
|
|
||||||
}()
|
}()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -5,9 +5,7 @@ import (
|
|||||||
"net/http"
|
"net/http"
|
||||||
)
|
)
|
||||||
|
|
||||||
type Config struct{}
|
func GetConfig(w http.ResponseWriter, r *http.Request) {
|
||||||
|
|
||||||
func (c *Config) GetAll(w http.ResponseWriter, r *http.Request) {
|
|
||||||
config := utils.Garage.Config
|
config := utils.Garage.Config
|
||||||
utils.ResponseSuccess(w, config)
|
utils.ResponseSuccess(w, config)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
package router
|
|
||||||
|
|
||||||
import (
|
|
||||||
"khairul169/garage-webui/middleware"
|
|
||||||
"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)
|
|
||||||
|
|
||||||
buckets := &Buckets{}
|
|
||||||
router.HandleFunc("GET /buckets", buckets.GetAll)
|
|
||||||
|
|
||||||
browse := &Browse{}
|
|
||||||
router.HandleFunc("GET /browse/{bucket}", browse.GetObjects)
|
|
||||||
router.HandleFunc("GET /browse/{bucket}/{key...}", browse.GetOneObject)
|
|
||||||
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
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
package schema
|
|
||||||
|
|
||||||
import "time"
|
|
||||||
|
|
||||||
type BrowseObjectResult struct {
|
|
||||||
Prefixes []string `json:"prefixes"`
|
|
||||||
Objects []BrowserObject `json:"objects"`
|
|
||||||
Prefix string `json:"prefix"`
|
|
||||||
NextToken *string `json:"nextToken"`
|
|
||||||
}
|
|
||||||
|
|
||||||
type BrowserObject struct {
|
|
||||||
ObjectKey *string `json:"objectKey"`
|
|
||||||
LastModified *time.Time `json:"lastModified"`
|
|
||||||
Size *int64 `json:"size"`
|
|
||||||
Url string `json:"url"`
|
|
||||||
}
|
|
||||||
@ -3,13 +3,12 @@ package schema
|
|||||||
type GetBucketsRes struct {
|
type GetBucketsRes struct {
|
||||||
ID string `json:"id"`
|
ID string `json:"id"`
|
||||||
GlobalAliases []string `json:"globalAliases"`
|
GlobalAliases []string `json:"globalAliases"`
|
||||||
LocalAliases []LocalAlias `json:"localAliases"`
|
LocalAliases []string `json:"localAliases"`
|
||||||
}
|
}
|
||||||
|
|
||||||
type Bucket struct {
|
type Bucket struct {
|
||||||
ID string `json:"id"`
|
ID string `json:"id"`
|
||||||
GlobalAliases []string `json:"globalAliases"`
|
GlobalAliases []string `json:"globalAliases"`
|
||||||
LocalAliases []LocalAlias `json:"localAliases"`
|
|
||||||
WebsiteAccess bool `json:"websiteAccess"`
|
WebsiteAccess bool `json:"websiteAccess"`
|
||||||
WebsiteConfig WebsiteConfig `json:"websiteConfig"`
|
WebsiteConfig WebsiteConfig `json:"websiteConfig"`
|
||||||
Keys []KeyElement `json:"keys"`
|
Keys []KeyElement `json:"keys"`
|
||||||
@ -22,17 +21,11 @@ type Bucket struct {
|
|||||||
Quotas Quotas `json:"quotas"`
|
Quotas Quotas `json:"quotas"`
|
||||||
}
|
}
|
||||||
|
|
||||||
type LocalAlias struct {
|
|
||||||
AccessKeyID string `json:"accessKeyId"`
|
|
||||||
Alias string `json:"alias"`
|
|
||||||
}
|
|
||||||
|
|
||||||
type KeyElement struct {
|
type KeyElement struct {
|
||||||
AccessKeyID string `json:"accessKeyId"`
|
AccessKeyID string `json:"accessKeyId"`
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
Permissions Permissions `json:"permissions"`
|
Permissions Permissions `json:"permissions"`
|
||||||
BucketLocalAliases []string `json:"bucketLocalAliases"`
|
BucketLocalAliases []interface{} `json:"bucketLocalAliases"`
|
||||||
SecretAccessKey string `json:"secretAccessKey"`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type Permissions struct {
|
type Permissions struct {
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
package schema
|
package schema
|
||||||
|
|
||||||
type Config struct {
|
type Config struct {
|
||||||
|
CompressionLevel int64 `json:"compression_level" toml:"compression_level"`
|
||||||
|
DataDir string `json:"data_dir" toml:"data_dir"`
|
||||||
|
DBEngine string `json:"db_engine" toml:"db_engine"`
|
||||||
|
MetadataAutoSnapshotInterval string `json:"metadata_auto_snapshot_interval" toml:"metadata_auto_snapshot_interval"`
|
||||||
|
MetadataDir string `json:"metadata_dir" toml:"metadata_dir"`
|
||||||
|
ReplicationFactor int64 `json:"replication_factor" toml:"replication_factor"`
|
||||||
RPCBindAddr string `json:"rpc_bind_addr" toml:"rpc_bind_addr"`
|
RPCBindAddr string `json:"rpc_bind_addr" toml:"rpc_bind_addr"`
|
||||||
RPCPublicAddr string `json:"rpc_public_addr" toml:"rpc_public_addr"`
|
RPCPublicAddr string `json:"rpc_public_addr" toml:"rpc_public_addr"`
|
||||||
RPCSecret string `json:"rpc_secret" toml:"rpc_secret"`
|
RPCSecret string `json:"rpc_secret" toml:"rpc_secret"`
|
||||||
|
|||||||
@ -3,6 +3,4 @@
|
|||||||
|
|
||||||
package ui
|
package ui
|
||||||
|
|
||||||
import "net/http"
|
func ServeUI() {}
|
||||||
|
|
||||||
func ServeUI(mux *http.ServeMux) {}
|
|
||||||
|
|||||||
@ -7,57 +7,28 @@ import (
|
|||||||
"embed"
|
"embed"
|
||||||
"io/fs"
|
"io/fs"
|
||||||
"net/http"
|
"net/http"
|
||||||
"os"
|
|
||||||
"path"
|
"path"
|
||||||
"regexp"
|
|
||||||
"strings"
|
|
||||||
)
|
)
|
||||||
|
|
||||||
//go:embed dist
|
//go:embed dist
|
||||||
var embeddedFs embed.FS
|
var embeddedFs embed.FS
|
||||||
|
|
||||||
func ServeUI(mux *http.ServeMux) {
|
func ServeUI() {
|
||||||
distFs, _ := fs.Sub(embeddedFs, "dist")
|
distFs, _ := fs.Sub(embeddedFs, "dist")
|
||||||
fileServer := http.FileServer(http.FS(distFs))
|
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:]
|
_path := path.Clean(r.URL.Path)[1:]
|
||||||
|
|
||||||
// Rewrite non-existing paths to index.html
|
// Rewrite non-existing paths to index.html
|
||||||
if _, err := fs.Stat(distFs, _path); err != nil {
|
if _, err := fs.Stat(distFs, _path); err != nil {
|
||||||
index, _ := fs.ReadFile(distFs, "index.html")
|
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.Header().Add("Content-Type", "text/html")
|
||||||
w.WriteHeader(http.StatusOK)
|
w.WriteHeader(http.StatusOK)
|
||||||
w.Write([]byte(html))
|
w.Write(index)
|
||||||
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))
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
fileServer.ServeHTTP(w, r)
|
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"`)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,49 +0,0 @@
|
|||||||
package utils
|
|
||||||
|
|
||||||
import (
|
|
||||||
"sync"
|
|
||||||
"time"
|
|
||||||
)
|
|
||||||
|
|
||||||
type CacheEntry struct {
|
|
||||||
value interface{}
|
|
||||||
expiresAt time.Time
|
|
||||||
}
|
|
||||||
|
|
||||||
type CacheManager struct {
|
|
||||||
cache *sync.Map
|
|
||||||
}
|
|
||||||
|
|
||||||
var Cache *CacheManager
|
|
||||||
|
|
||||||
func InitCacheManager() {
|
|
||||||
Cache = &CacheManager{
|
|
||||||
cache: &sync.Map{},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
func (c *CacheManager) Set(key string, value interface{}, ttl time.Duration) {
|
|
||||||
c.cache.Store(key, CacheEntry{
|
|
||||||
value: value,
|
|
||||||
expiresAt: time.Now().Add(ttl),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (c *CacheManager) Get(key string) interface{} {
|
|
||||||
entry, ok := c.cache.Load(key)
|
|
||||||
if !ok {
|
|
||||||
return nil
|
|
||||||
}
|
|
||||||
|
|
||||||
cacheEntry := entry.(CacheEntry)
|
|
||||||
if cacheEntry.expiresAt.Before(time.Now()) {
|
|
||||||
c.cache.Delete(key)
|
|
||||||
return nil
|
|
||||||
}
|
|
||||||
|
|
||||||
return cacheEntry.value
|
|
||||||
}
|
|
||||||
|
|
||||||
func (c *CacheManager) IsExpired(entry CacheEntry) bool {
|
|
||||||
return entry.expiresAt.Before(time.Now())
|
|
||||||
}
|
|
||||||
@ -3,7 +3,6 @@ package utils
|
|||||||
import (
|
import (
|
||||||
"bytes"
|
"bytes"
|
||||||
"encoding/json"
|
"encoding/json"
|
||||||
"errors"
|
|
||||||
"fmt"
|
"fmt"
|
||||||
"io"
|
"io"
|
||||||
"khairul169/garage-webui/schema"
|
"khairul169/garage-webui/schema"
|
||||||
@ -57,34 +56,6 @@ func (g *garage) GetAdminEndpoint() string {
|
|||||||
return endpoint
|
return endpoint
|
||||||
}
|
}
|
||||||
|
|
||||||
func (g *garage) GetS3Endpoint() string {
|
|
||||||
endpoint := os.Getenv("S3_ENDPOINT_URL")
|
|
||||||
if len(endpoint) > 0 {
|
|
||||||
return endpoint
|
|
||||||
}
|
|
||||||
|
|
||||||
host := strings.Split(g.Config.RPCPublicAddr, ":")[0]
|
|
||||||
port := LastString(strings.Split(g.Config.S3API.APIBindAddr, ":"))
|
|
||||||
|
|
||||||
endpoint = fmt.Sprintf("%s:%s", host, port)
|
|
||||||
if !strings.HasPrefix(endpoint, "http") {
|
|
||||||
endpoint = fmt.Sprintf("http://%s", endpoint)
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
func (g *garage) GetAdminKey() string {
|
||||||
key := os.Getenv("API_ADMIN_KEY")
|
key := os.Getenv("API_ADMIN_KEY")
|
||||||
if len(key) > 0 {
|
if len(key) > 0 {
|
||||||
@ -165,7 +136,7 @@ func (g *garage) Fetch(url string, options *FetchOptions) ([]byte, error) {
|
|||||||
message = fmt.Sprintf("%v", data["message"])
|
message = fmt.Sprintf("%v", data["message"])
|
||||||
}
|
}
|
||||||
|
|
||||||
return nil, errors.New(message)
|
return nil, fmt.Errorf(message)
|
||||||
}
|
}
|
||||||
|
|
||||||
body, err := io.ReadAll(res.Body)
|
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())
|
|
||||||
}
|
|
||||||
@ -23,11 +23,6 @@ func ResponseError(w http.ResponseWriter, err error) {
|
|||||||
w.Write([]byte(err.Error()))
|
w.Write([]byte(err.Error()))
|
||||||
}
|
}
|
||||||
|
|
||||||
func ResponseErrorStatus(w http.ResponseWriter, err error, status int) {
|
|
||||||
w.WriteHeader(status)
|
|
||||||
w.Write([]byte(err.Error()))
|
|
||||||
}
|
|
||||||
|
|
||||||
func ResponseSuccess(w http.ResponseWriter, data interface{}) {
|
func ResponseSuccess(w http.ResponseWriter, data interface{}) {
|
||||||
w.Header().Set("Content-Type", "application/json")
|
w.Header().Set("Content-Type", "application/json")
|
||||||
w.WriteHeader(http.StatusOK)
|
w.WriteHeader(http.StatusOK)
|
||||||
|
|||||||
@ -1,17 +1,13 @@
|
|||||||
services:
|
services:
|
||||||
garage:
|
garage:
|
||||||
image: dxflrs/garage:v1.0.1
|
image: dxflrs/garage:v1.0.0
|
||||||
container_name: garage
|
container_name: garage
|
||||||
volumes:
|
volumes:
|
||||||
- ./garage.toml:/etc/garage.toml
|
- ./garage.toml:/etc/garage.toml
|
||||||
- ./meta:/var/lib/garage/meta
|
- ./meta:/var/lib/garage/meta
|
||||||
- ./data:/var/lib/garage/data
|
- ./data:/var/lib/garage/data
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
network_mode: host
|
||||||
- 3900:3900
|
|
||||||
- 3901:3901
|
|
||||||
- 3902:3903
|
|
||||||
- 3903:3903
|
|
||||||
|
|
||||||
webui:
|
webui:
|
||||||
image: khairul169/garage-webui:latest
|
image: khairul169/garage-webui:latest
|
||||||
@ -21,7 +17,3 @@ services:
|
|||||||
- ./garage.toml:/etc/garage.toml:ro
|
- ./garage.toml:/etc/garage.toml:ro
|
||||||
ports:
|
ports:
|
||||||
- 3909:3909
|
- 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" />
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
|
|
||||||
<title>Garage Web UI</title>
|
<title>Garage Web UI</title>
|
||||||
<script>
|
|
||||||
window.__BASE_PATH = "%BASE_PATH%";
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@ -6,12 +6,3 @@
|
|||||||
[](img/buckets-overview.png)
|
[](img/buckets-overview.png)
|
||||||
[](img/buckets-permissions.png)
|
[](img/buckets-permissions.png)
|
||||||
[](img/keys.png)
|
[](img/keys.png)
|
||||||
[](img/buckets-browse.png)
|
|
||||||
[](img/buckets-browse-sharing.png)
|
|
||||||
|
|
||||||
### Mobile
|
|
||||||
|
|
||||||
[](img/mobile-dashboard.png)
|
|
||||||
[](img/mobile-cluster.png)
|
|
||||||
[](img/mobile-buckets.png)
|
|
||||||
[](img/mobile-bucket-browse.png)
|
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
#!/bin/sh
|
|
||||||
|
|
||||||
set -e
|
|
||||||
|
|
||||||
BINARY=garage-webui
|
|
||||||
VERSION=$(cat package.json | grep \"version\" | cut -d'"' -f 4)
|
|
||||||
PLATFORMS="linux"
|
|
||||||
ARCHITECTURES="386 amd64 arm arm64"
|
|
||||||
|
|
||||||
echo "Building version $VERSION"
|
|
||||||
|
|
||||||
npm run build
|
|
||||||
cd backend && rm -rf dist && mkdir -p dist && rm -rf ./ui/dist && cp -r ../dist ./ui/dist
|
|
||||||
|
|
||||||
for PLATFORM in $PLATFORMS; do
|
|
||||||
for ARCH in $ARCHITECTURES; do
|
|
||||||
echo "Building $PLATFORM-$ARCH"
|
|
||||||
|
|
||||||
GOOS=$PLATFORM GOARCH=$ARCH go build -o "dist/$BINARY-v$VERSION-$PLATFORM-$ARCH" -tags="prod" main.go
|
|
||||||
done
|
|
||||||
done
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
10
package.json
10
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "garage-webui",
|
"name": "garage-webui",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.9",
|
"version": "1.0.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev:client": "vite",
|
"dev:client": "vite",
|
||||||
@ -15,9 +15,7 @@
|
|||||||
"@hookform/resolvers": "^3.9.0",
|
"@hookform/resolvers": "^3.9.0",
|
||||||
"@tanstack/react-query": "^5.51.23",
|
"@tanstack/react-query": "^5.51.23",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"dayjs": "^1.11.12",
|
|
||||||
"lucide-react": "^0.427.0",
|
"lucide-react": "^0.427.0",
|
||||||
"mime": "^4.0.4",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-daisyui": "^5.0.3",
|
"react-daisyui": "^5.0.3",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
@ -47,11 +45,5 @@
|
|||||||
"typescript": "^5.5.3",
|
"typescript": "^5.5.3",
|
||||||
"typescript-eslint": "^8.0.0",
|
"typescript-eslint": "^8.0.0",
|
||||||
"vite": "^5.4.0"
|
"vite": "^5.4.0"
|
||||||
},
|
|
||||||
"pnpm": {
|
|
||||||
"onlyBuiltDependencies": [
|
|
||||||
"@swc/core",
|
|
||||||
"esbuild"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
18
pnpm-lock.yaml
generated
18
pnpm-lock.yaml
generated
@ -17,15 +17,9 @@ importers:
|
|||||||
clsx:
|
clsx:
|
||||||
specifier: ^2.1.1
|
specifier: ^2.1.1
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
dayjs:
|
|
||||||
specifier: ^1.11.12
|
|
||||||
version: 1.11.12
|
|
||||||
lucide-react:
|
lucide-react:
|
||||||
specifier: ^0.427.0
|
specifier: ^0.427.0
|
||||||
version: 0.427.0(react@18.3.1)
|
version: 0.427.0(react@18.3.1)
|
||||||
mime:
|
|
||||||
specifier: ^4.0.4
|
|
||||||
version: 4.0.4
|
|
||||||
react:
|
react:
|
||||||
specifier: ^18.3.1
|
specifier: ^18.3.1
|
||||||
version: 18.3.1
|
version: 18.3.1
|
||||||
@ -848,9 +842,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
|
resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
|
||||||
engines: {node: '>=0.11'}
|
engines: {node: '>=0.11'}
|
||||||
|
|
||||||
dayjs@1.11.12:
|
|
||||||
resolution: {integrity: sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==}
|
|
||||||
|
|
||||||
debug@4.3.6:
|
debug@4.3.6:
|
||||||
resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
|
resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
|
||||||
engines: {node: '>=6.0'}
|
engines: {node: '>=6.0'}
|
||||||
@ -1195,11 +1186,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
|
resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
|
||||||
engines: {node: '>=8.6'}
|
engines: {node: '>=8.6'}
|
||||||
|
|
||||||
mime@4.0.4:
|
|
||||||
resolution: {integrity: sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==}
|
|
||||||
engines: {node: '>=16'}
|
|
||||||
hasBin: true
|
|
||||||
|
|
||||||
minimatch@3.1.2:
|
minimatch@3.1.2:
|
||||||
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
|
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
|
||||||
|
|
||||||
@ -2409,8 +2395,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@babel/runtime': 7.25.0
|
'@babel/runtime': 7.25.0
|
||||||
|
|
||||||
dayjs@1.11.12: {}
|
|
||||||
|
|
||||||
debug@4.3.6:
|
debug@4.3.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.2
|
ms: 2.1.2
|
||||||
@ -2751,8 +2735,6 @@ snapshots:
|
|||||||
braces: 3.0.3
|
braces: 3.0.3
|
||||||
picomatch: 2.3.1
|
picomatch: 2.3.1
|
||||||
|
|
||||||
mime@4.0.4: {}
|
|
||||||
|
|
||||||
minimatch@3.1.2:
|
minimatch@3.1.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
brace-expansion: 1.1.11
|
brace-expansion: 1.1.11
|
||||||
|
|||||||
@ -1,27 +1,18 @@
|
|||||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||||
import { lazy, Suspense } from "react";
|
import { lazy } from "react";
|
||||||
import AuthLayout from "@/components/layouts/auth-layout";
|
import AuthLayout from "@/components/layouts/auth-layout";
|
||||||
import MainLayout from "@/components/layouts/main-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 ClusterPage = lazy(() => import("@/pages/cluster/page"));
|
||||||
const HomePage = lazy(() => import("@/pages/home/page"));
|
const HomePage = lazy(() => import("@/pages/home/page"));
|
||||||
const BucketsPage = lazy(() => import("@/pages/buckets/page"));
|
const BucketsPage = lazy(() => import("@/pages/buckets/page"));
|
||||||
const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
|
const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
|
||||||
const KeysPage = lazy(() => import("@/pages/keys/page"));
|
const KeysPage = lazy(() => import("@/pages/keys/page"));
|
||||||
|
|
||||||
const router = createBrowserRouter(
|
const router = createBrowserRouter([
|
||||||
[
|
|
||||||
{
|
{
|
||||||
path: "/auth",
|
path: "/auth",
|
||||||
Component: AuthLayout,
|
Component: AuthLayout,
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: "login",
|
|
||||||
Component: LoginPage,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
@ -48,18 +39,10 @@ const router = createBrowserRouter(
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
]);
|
||||||
{
|
|
||||||
basename: BASE_PATH,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const Router = () => {
|
const Router = () => {
|
||||||
return (
|
return <RouterProvider router={router} />;
|
||||||
<Suspense>
|
|
||||||
<RouterProvider router={router} />
|
|
||||||
</Suspense>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Router;
|
export default Router;
|
||||||
|
|||||||
@ -4,7 +4,6 @@ import {
|
|||||||
HardDrive,
|
HardDrive,
|
||||||
KeySquare,
|
KeySquare,
|
||||||
LayoutDashboard,
|
LayoutDashboard,
|
||||||
LogOut,
|
|
||||||
Palette,
|
Palette,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Dropdown, Menu } from "react-daisyui";
|
import { Dropdown, Menu } from "react-daisyui";
|
||||||
@ -13,11 +12,6 @@ import Button from "../ui/button";
|
|||||||
import { themes } from "@/app/themes";
|
import { themes } from "@/app/themes";
|
||||||
import appStore from "@/stores/app-store";
|
import appStore from "@/stores/app-store";
|
||||||
import garageLogo from "@/assets/garage-logo.svg";
|
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 = [
|
const pages = [
|
||||||
{ icon: LayoutDashboard, title: "Dashboard", path: "/", exact: true },
|
{ icon: LayoutDashboard, title: "Dashboard", path: "/", exact: true },
|
||||||
@ -28,7 +22,6 @@ const pages = [
|
|||||||
|
|
||||||
const Sidebar = () => {
|
const Sidebar = () => {
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const auth = useAuth();
|
|
||||||
|
|
||||||
return (
|
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">
|
<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>
|
</Menu>
|
||||||
|
|
||||||
<div className="py-2 px-4 flex items-center gap-2">
|
<Dropdown className="my-2 mx-4" vertical="top">
|
||||||
<Dropdown vertical="top">
|
|
||||||
<Dropdown.Toggle button={false}>
|
<Dropdown.Toggle button={false}>
|
||||||
<Button icon={Palette} color="ghost">
|
<Button icon={Palette} color="ghost">
|
||||||
{!auth.isEnabled ? "Theme" : null}
|
Theme
|
||||||
</Button>
|
</Button>
|
||||||
</Dropdown.Toggle>
|
</Dropdown.Toggle>
|
||||||
|
|
||||||
<Dropdown.Menu className="max-h-[500px] overflow-y-auto">
|
<Dropdown.Menu className="max-h-[200px] overflow-y-auto">
|
||||||
{themes.map((theme) => (
|
{themes.map((theme) => (
|
||||||
<Dropdown.Item
|
<Dropdown.Item key={theme} onClick={() => appStore.setTheme(theme)}>
|
||||||
key={theme}
|
|
||||||
onClick={() => appStore.setTheme(theme)}
|
|
||||||
>
|
|
||||||
{ucfirst(theme)}
|
{ucfirst(theme)}
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
))}
|
))}
|
||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
|
||||||
{auth.isEnabled ? <LogoutButton /> : null}
|
|
||||||
</div>
|
|
||||||
</aside>
|
</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;
|
export default Sidebar;
|
||||||
|
|||||||
@ -8,7 +8,7 @@ export type Tab = {
|
|||||||
name: string;
|
name: string;
|
||||||
title?: string;
|
title?: string;
|
||||||
icon?: LucideIcon;
|
icon?: LucideIcon;
|
||||||
Component?: () => JSX.Element | null;
|
Component?: () => JSX.Element;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -36,16 +36,13 @@ const TabView = ({
|
|||||||
<>
|
<>
|
||||||
<Tabs
|
<Tabs
|
||||||
variant="boxed"
|
variant="boxed"
|
||||||
className={cn(
|
className={cn("w-auto inline-flex flex-row items-stretch", className)}
|
||||||
"w-auto inline-flex flex-row items-stretch overflow-x-auto",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{tabs.map(({ icon: Icon, ...tab }) => (
|
{tabs.map(({ icon: Icon, ...tab }) => (
|
||||||
<Tabs.Tab
|
<Tabs.Tab
|
||||||
key={tab.name}
|
key={tab.name}
|
||||||
active={curTab === tab.name}
|
active={curTab === tab.name}
|
||||||
className="flex flex-row items-center gap-x-2 h-auto shrink-0"
|
className="flex flex-row items-center gap-x-2 h-auto"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSearchParams((params) => {
|
setSearchParams((params) => {
|
||||||
params.set(name, tab.name);
|
params.set(name, tab.name);
|
||||||
|
|||||||
@ -1,22 +1,5 @@
|
|||||||
import { useAuth } from "@/hooks/useAuth";
|
|
||||||
import { Navigate, Outlet } from "react-router-dom";
|
|
||||||
|
|
||||||
const AuthLayout = () => {
|
const AuthLayout = () => {
|
||||||
const auth = useAuth();
|
return <div>AuthLayout</div>;
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AuthLayout;
|
export default AuthLayout;
|
||||||
|
|||||||
@ -1,17 +1,15 @@
|
|||||||
import { PageContext } from "@/context/page-context";
|
import { PageContext } from "@/context/page-context";
|
||||||
import { Suspense, useContext, useEffect } from "react";
|
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 Sidebar from "../containers/sidebar";
|
||||||
import { ArrowLeft, MenuIcon } from "lucide-react";
|
import { ArrowLeft, MenuIcon } from "lucide-react";
|
||||||
import Button from "../ui/button";
|
import Button from "../ui/button";
|
||||||
import { useDisclosure } from "@/hooks/useDisclosure";
|
import { useDisclosure } from "@/hooks/useDisclosure";
|
||||||
import { Drawer } from "react-daisyui";
|
import { Drawer } from "react-daisyui";
|
||||||
import { useAuth } from "@/hooks/useAuth";
|
|
||||||
|
|
||||||
const MainLayout = () => {
|
const MainLayout = () => {
|
||||||
const sidebar = useDisclosure();
|
const sidebar = useDisclosure();
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const auth = useAuth();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (sidebar.isOpen) {
|
if (sidebar.isOpen) {
|
||||||
@ -19,19 +17,11 @@ const MainLayout = () => {
|
|||||||
}
|
}
|
||||||
}, [pathname]);
|
}, [pathname]);
|
||||||
|
|
||||||
if (auth.isLoading) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!auth.isAuthenticated) {
|
|
||||||
return <Navigate to="/auth/login" />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer
|
<Drawer
|
||||||
open={sidebar.isOpen}
|
open={sidebar.isOpen}
|
||||||
onClickOverlay={sidebar.onClose}
|
onClickOverlay={sidebar.onClose}
|
||||||
className="md:drawer-open h-screen max-h-dvh"
|
className="md:drawer-open h-screen"
|
||||||
side={<Sidebar />}
|
side={<Sidebar />}
|
||||||
contentClassName="flex flex-col overflow-hidden"
|
contentClassName="flex flex-col overflow-hidden"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -4,7 +4,6 @@ import { Button as BaseButton } from "react-daisyui";
|
|||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
type ButtonProps = ComponentPropsWithoutRef<typeof BaseButton> & {
|
type ButtonProps = ComponentPropsWithoutRef<typeof BaseButton> & {
|
||||||
type?: HTMLButtonElement["type"];
|
|
||||||
href?: string;
|
href?: string;
|
||||||
target?: "_blank" | "_self" | "_parent" | "_top";
|
target?: "_blank" | "_self" | "_parent" | "_top";
|
||||||
icon?: LucideIcon;
|
icon?: LucideIcon;
|
||||||
|
|||||||
@ -1,49 +0,0 @@
|
|||||||
import { useEffect, useRef, useState } from "react";
|
|
||||||
import Button from "./button";
|
|
||||||
import { ArrowUp } from "lucide-react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
const GotoTopButton = () => {
|
|
||||||
const mainElRef = useRef<HTMLElement | null>(null);
|
|
||||||
const [show, setShow] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const mainEl = document.querySelector("main");
|
|
||||||
if (!mainEl) return;
|
|
||||||
|
|
||||||
mainElRef.current = mainEl;
|
|
||||||
|
|
||||||
const onScroll = () => {
|
|
||||||
if (mainEl.scrollTop > 300) {
|
|
||||||
setShow(true);
|
|
||||||
} else {
|
|
||||||
setShow(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
mainEl.addEventListener("scroll", onScroll);
|
|
||||||
return () => mainEl.removeEventListener("scroll", onScroll);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onClick = () => {
|
|
||||||
const mainEl = mainElRef.current;
|
|
||||||
if (!mainEl) return;
|
|
||||||
|
|
||||||
mainEl.scrollTo({ top: 0, behavior: "smooth" });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
icon={ArrowUp}
|
|
||||||
className={cn(
|
|
||||||
"fixed bottom-4 right-4 invisible opacity-0 transition-opacity",
|
|
||||||
show && "visible opacity-100"
|
|
||||||
)}
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
Top
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GotoTopButton;
|
|
||||||
@ -46,7 +46,6 @@ export const ToggleField = <T extends FieldValues>({
|
|||||||
{...props}
|
{...props}
|
||||||
{...field}
|
{...field}
|
||||||
className={inputClassName}
|
className={inputClassName}
|
||||||
color={field.value ? "primary" : undefined}
|
|
||||||
checked={field.value || false}
|
checked={field.value || false}
|
||||||
onChange={(e) => field.onChange(e.target.checked)}
|
onChange={(e) => field.onChange(e.target.checked)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
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,28 +1,13 @@
|
|||||||
import * as utils from "@/lib/utils";
|
|
||||||
import { BASE_PATH } from "./consts";
|
|
||||||
|
|
||||||
type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
|
type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
|
||||||
params?: Record<string, any>;
|
params?: Record<string, any>;
|
||||||
headers?: Record<string, string>;
|
headers?: Record<string, string>;
|
||||||
body?: any;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const api = {
|
const api = {
|
||||||
async fetch<T = any>(url: string, options?: Partial<FetchOptions>) {
|
async fetch<T = any>(url: string, options?: Partial<FetchOptions>) {
|
||||||
const headers: Record<string, string> = {};
|
const headers: Record<string, string> = {};
|
||||||
const _url = new URL(API_URL + url, window.location.origin);
|
const _url = new URL("/api" + url, window.location.origin);
|
||||||
|
|
||||||
if (options?.params) {
|
if (options?.params) {
|
||||||
Object.entries(options.params).forEach(([key, value]) => {
|
Object.entries(options.params).forEach(([key, value]) => {
|
||||||
@ -40,30 +25,26 @@ const api = {
|
|||||||
|
|
||||||
const res = await fetch(_url, {
|
const res = await fetch(_url, {
|
||||||
...options,
|
...options,
|
||||||
credentials: "include",
|
|
||||||
headers: { ...headers, ...(options?.headers || {}) },
|
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
|
const isJson = res.headers
|
||||||
.get("Content-Type")
|
.get("Content-Type")
|
||||||
?.includes("application/json");
|
?.includes("application/json");
|
||||||
const data = isJson ? await res.json() : await res.text();
|
|
||||||
|
|
||||||
if (res.status === 401 && !url.startsWith("/auth")) {
|
if (isJson) {
|
||||||
window.location.href = utils.url("/auth/login");
|
const json = (await res.json()) as T;
|
||||||
throw new APIError("unauthorized", res.status);
|
return json;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!res.ok) {
|
const text = await res.text();
|
||||||
const message = isJson
|
return text as unknown as T;
|
||||||
? data?.message
|
|
||||||
: typeof data === "string"
|
|
||||||
? data
|
|
||||||
: res.statusText;
|
|
||||||
throw new APIError(message, res.status);
|
|
||||||
}
|
|
||||||
|
|
||||||
return data as unknown as T;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
async get<T = any>(url: string, options?: Partial<FetchOptions>) {
|
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 ||
|
|
||||||
"";
|
|
||||||
@ -1,4 +1,3 @@
|
|||||||
import { useEffect, useRef } from "react";
|
|
||||||
import { createStore, useStore } from "zustand";
|
import { createStore, useStore } from "zustand";
|
||||||
|
|
||||||
export const createDisclosure = <T = any>() => {
|
export const createDisclosure = <T = any>() => {
|
||||||
@ -7,28 +6,9 @@ export const createDisclosure = <T = any>() => {
|
|||||||
isOpen: false,
|
isOpen: false,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const useDisclosure = () => {
|
|
||||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
|
||||||
const data = useStore(store);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const dlg = dialogRef.current;
|
|
||||||
if (!dlg || !data.isOpen) return;
|
|
||||||
|
|
||||||
const onDialogClose = () => {
|
|
||||||
store.setState({ isOpen: false });
|
|
||||||
};
|
|
||||||
|
|
||||||
dlg.addEventListener("close", onDialogClose);
|
|
||||||
return () => dlg.removeEventListener("close", onDialogClose);
|
|
||||||
}, [dialogRef, data.isOpen]);
|
|
||||||
|
|
||||||
return { ...data, dialogRef } as const;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
use: useDisclosure,
|
use: () => useStore(store),
|
||||||
open: (data?: T | null) => store.setState({ isOpen: true, data }),
|
open: (data?: T | null) => store.setState({ isOpen: true, data }),
|
||||||
close: () => store.setState({ isOpen: false }),
|
close: () => store.setState({ isOpen: false }),
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,12 +1,6 @@
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { twMerge } from "tailwind-merge";
|
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 };
|
|
||||||
|
|
||||||
export const cn = (...args: any[]) => {
|
export const cn = (...args: any[]) => {
|
||||||
return twMerge(clsx(...args));
|
return twMerge(clsx(...args));
|
||||||
@ -54,7 +48,3 @@ export const copyToClipboard = async (text: string) => {
|
|||||||
textArea?.remove();
|
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";
|
import Button from "@/components/ui/button";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
data: Bucket & { aliases: string[] };
|
data: Bucket;
|
||||||
};
|
};
|
||||||
|
|
||||||
const BucketCard = ({ data }: Props) => {
|
const BucketCard = ({ data }: Props) => {
|
||||||
@ -15,7 +15,7 @@ const BucketCard = ({ data }: Props) => {
|
|||||||
<ArchiveIcon size={28} className="shrink-0" />
|
<ArchiveIcon size={28} className="shrink-0" />
|
||||||
|
|
||||||
<p className="text-xl font-medium truncate">
|
<p className="text-xl font-medium truncate">
|
||||||
{data.aliases?.join(", ")}
|
{data.globalAliases?.join(", ")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -40,9 +40,7 @@ const BucketCard = ({ data }: Props) => {
|
|||||||
|
|
||||||
<div className="flex flex-row justify-end gap-4">
|
<div className="flex flex-row justify-end gap-4">
|
||||||
<Button href={`/buckets/${data.id}`}>Manage</Button>
|
<Button href={`/buckets/${data.id}`}>Manage</Button>
|
||||||
<Button color="primary" href={`/buckets/${data.id}?tab=browse`}>
|
{/* <Button color="primary">Browse</Button> */}
|
||||||
Browse
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,138 +0,0 @@
|
|||||||
import { FolderPlus, UploadIcon } from "lucide-react";
|
|
||||||
import Button from "@/components/ui/button";
|
|
||||||
import { usePutObject } from "./hooks";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { handleError } from "@/lib/utils";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
import { useDisclosure } from "@/hooks/useDisclosure";
|
|
||||||
import { Modal } from "react-daisyui";
|
|
||||||
import { createFolderSchema, CreateFolderSchema } from "./schema";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { InputField } from "@/components/ui/input";
|
|
||||||
import { useEffect } from "react";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
prefix: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Actions = ({ prefix }: Props) => {
|
|
||||||
const { bucketName } = useBucketContext();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const putObject = usePutObject(bucketName, {
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("File uploaded!");
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["browse", bucketName] });
|
|
||||||
},
|
|
||||||
onError: handleError,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onUploadFile = () => {
|
|
||||||
const input = document.createElement("input");
|
|
||||||
input.type = "file";
|
|
||||||
input.multiple = true;
|
|
||||||
|
|
||||||
input.onchange = (e) => {
|
|
||||||
const files = (e.target as HTMLInputElement).files;
|
|
||||||
if (!files?.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (files.length > 20) {
|
|
||||||
toast.error("You can only upload up to 20 files at a time");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const file of files) {
|
|
||||||
const key = prefix + file.name;
|
|
||||||
putObject.mutate({ key, file });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
input.click();
|
|
||||||
input.remove();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CreateFolderAction prefix={prefix} />
|
|
||||||
{/* <Button icon={FilePlus} color="ghost" /> */}
|
|
||||||
<Button
|
|
||||||
icon={UploadIcon}
|
|
||||||
color="ghost"
|
|
||||||
title="Upload File"
|
|
||||||
onClick={onUploadFile}
|
|
||||||
/>
|
|
||||||
{/* <Button icon={EllipsisVertical} color="ghost" /> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type CreateFolderActionProps = {
|
|
||||||
prefix: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CreateFolderAction = ({ prefix }: CreateFolderActionProps) => {
|
|
||||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
||||||
const { bucketName } = useBucketContext();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const form = useForm<CreateFolderSchema>({
|
|
||||||
resolver: zodResolver(createFolderSchema),
|
|
||||||
defaultValues: { name: "" },
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) form.setFocus("name");
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const createFolder = usePutObject(bucketName, {
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Folder created!");
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["browse", bucketName] });
|
|
||||||
onClose();
|
|
||||||
form.reset();
|
|
||||||
},
|
|
||||||
onError: handleError,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = form.handleSubmit((values) => {
|
|
||||||
createFolder.mutate({ key: `${prefix}${values.name}/`, file: null });
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
icon={FolderPlus}
|
|
||||||
color="ghost"
|
|
||||||
onClick={onOpen}
|
|
||||||
title="Create Folder"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Modal open={isOpen}>
|
|
||||||
<Modal.Header>Create Folder</Modal.Header>
|
|
||||||
|
|
||||||
<Modal.Body>
|
|
||||||
<form onSubmit={onSubmit}>
|
|
||||||
<InputField form={form} name="name" title="Name" />
|
|
||||||
</form>
|
|
||||||
</Modal.Body>
|
|
||||||
|
|
||||||
<Modal.Actions>
|
|
||||||
<Button onClick={onClose}>Cancel</Button>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
onClick={onSubmit}
|
|
||||||
disabled={createFolder.isPending}
|
|
||||||
>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</Modal.Actions>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Actions;
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
import { useSearchParams } from "react-router-dom";
|
|
||||||
import { Card } from "react-daisyui";
|
|
||||||
|
|
||||||
import ObjectList from "./object-list";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import ObjectListNavigator from "./object-list-navigator";
|
|
||||||
import Actions from "./actions";
|
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
import ShareDialog from "./share-dialog";
|
|
||||||
|
|
||||||
const getInitialPrefixes = (searchParams: URLSearchParams) => {
|
|
||||||
const prefix = searchParams.get("prefix");
|
|
||||||
if (prefix) {
|
|
||||||
const paths = prefix.split("/").filter((p) => p);
|
|
||||||
return paths.map((_, i) => paths.slice(0, i + 1).join("/") + "/");
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
};
|
|
||||||
|
|
||||||
const BrowseTab = () => {
|
|
||||||
const { bucket } = useBucketContext();
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const [prefixHistory, setPrefixHistory] = useState<string[]>(
|
|
||||||
getInitialPrefixes(searchParams)
|
|
||||||
);
|
|
||||||
const [curPrefix, setCurPrefix] = useState(prefixHistory.length - 1);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const prefix = prefixHistory[curPrefix] || "";
|
|
||||||
const newParams = new URLSearchParams(searchParams);
|
|
||||||
newParams.set("prefix", prefix);
|
|
||||||
setSearchParams(newParams);
|
|
||||||
}, [curPrefix]);
|
|
||||||
|
|
||||||
const gotoPrefix = (prefix: string) => {
|
|
||||||
const history = prefixHistory.slice(0, curPrefix + 1);
|
|
||||||
setPrefixHistory([...history, prefix]);
|
|
||||||
setCurPrefix(history.length);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!bucket.keys.find((k) => k.permissions.read && k.permissions.write)) {
|
|
||||||
return (
|
|
||||||
<div className="p-4 min-h-[200px] flex flex-col items-center justify-center">
|
|
||||||
<p className="text-center max-w-sm">
|
|
||||||
You need to add a key with read & write access to your bucket to be
|
|
||||||
able to browse it.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Card className="pb-2">
|
|
||||||
<ObjectListNavigator
|
|
||||||
curPrefix={curPrefix}
|
|
||||||
setCurPrefix={setCurPrefix}
|
|
||||||
prefixHistory={prefixHistory}
|
|
||||||
actions={<Actions prefix={prefixHistory[curPrefix] || ""} />}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ObjectList
|
|
||||||
prefix={prefixHistory[curPrefix] || ""}
|
|
||||||
onPrefixChange={gotoPrefix}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ShareDialog />
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BrowseTab;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import api from "@/lib/api";
|
|
||||||
import {
|
|
||||||
useMutation,
|
|
||||||
UseMutationOptions,
|
|
||||||
useQuery,
|
|
||||||
} from "@tanstack/react-query";
|
|
||||||
import {
|
|
||||||
GetObjectsResult,
|
|
||||||
PutObjectPayload,
|
|
||||||
UseBrowserObjectOptions,
|
|
||||||
} from "./types";
|
|
||||||
|
|
||||||
export const useBrowseObjects = (
|
|
||||||
bucket: string,
|
|
||||||
options?: UseBrowserObjectOptions
|
|
||||||
) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["browse", bucket, options],
|
|
||||||
queryFn: () =>
|
|
||||||
api.get<GetObjectsResult>(`/browse/${bucket}`, { params: options }),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const usePutObject = (
|
|
||||||
bucket: string,
|
|
||||||
options?: UseMutationOptions<any, Error, PutObjectPayload>
|
|
||||||
) => {
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async (body) => {
|
|
||||||
const formData = new FormData();
|
|
||||||
if (body.file) {
|
|
||||||
formData.append("file", body.file);
|
|
||||||
}
|
|
||||||
|
|
||||||
return api.put(`/browse/${bucket}/${body.key}`, { body: formData });
|
|
||||||
},
|
|
||||||
...options,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useDeleteObject = (
|
|
||||||
bucket: string,
|
|
||||||
options?: UseMutationOptions<any, Error, { key: string; recursive?: boolean }>
|
|
||||||
) => {
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: (data) =>
|
|
||||||
api.delete(`/browse/${bucket}/${data.key}`, {
|
|
||||||
params: { recursive: data.recursive },
|
|
||||||
}),
|
|
||||||
...options,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import { Dropdown } from "react-daisyui";
|
|
||||||
import { Object } from "./types";
|
|
||||||
import Button from "@/components/ui/button";
|
|
||||||
import { DownloadIcon, EllipsisVertical, Share2, Trash } from "lucide-react";
|
|
||||||
import { useDeleteObject } from "./hooks";
|
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { handleError } from "@/lib/utils";
|
|
||||||
import { API_URL } from "@/lib/api";
|
|
||||||
import { shareDialog } from "./share-dialog";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
prefix?: string;
|
|
||||||
object: Pick<Object, "objectKey" | "url">;
|
|
||||||
end?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ObjectActions = ({ prefix = "", object, end }: Props) => {
|
|
||||||
const { bucketName } = useBucketContext();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const isDirectory = object.objectKey.endsWith("/");
|
|
||||||
|
|
||||||
const deleteObject = useDeleteObject(bucketName, {
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Object deleted!");
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["browse", bucketName] });
|
|
||||||
},
|
|
||||||
onError: handleError,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onDownload = () => {
|
|
||||||
window.open(API_URL + object.url + "?dl=1", "_blank");
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDelete = () => {
|
|
||||||
if (
|
|
||||||
window.confirm(
|
|
||||||
`Are you sure you want to delete this ${
|
|
||||||
isDirectory ? "directory and its content" : "object"
|
|
||||||
}?`
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
deleteObject.mutate({
|
|
||||||
key: prefix + object.objectKey,
|
|
||||||
recursive: isDirectory,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<td className="!p-0 w-auto">
|
|
||||||
<span className="w-full flex flex-row justify-end pr-2">
|
|
||||||
{!isDirectory && (
|
|
||||||
<Button icon={DownloadIcon} color="ghost" onClick={onDownload} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Dropdown end vertical={end ? "top" : "bottom"}>
|
|
||||||
<Dropdown.Toggle button={false}>
|
|
||||||
<Button icon={EllipsisVertical} color="ghost" />
|
|
||||||
</Dropdown.Toggle>
|
|
||||||
|
|
||||||
<Dropdown.Menu className="gap-y-1">
|
|
||||||
<Dropdown.Item
|
|
||||||
onClick={() =>
|
|
||||||
shareDialog.open({ key: object.objectKey, prefix })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Share2 /> Share
|
|
||||||
</Dropdown.Item>
|
|
||||||
<Dropdown.Item
|
|
||||||
className="text-error bg-error/10"
|
|
||||||
onClick={onDelete}
|
|
||||||
>
|
|
||||||
<Trash /> Delete
|
|
||||||
</Dropdown.Item>
|
|
||||||
</Dropdown.Menu>
|
|
||||||
</Dropdown>
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ObjectActions;
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import Button from "@/components/ui/button";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { ChevronLeft, ChevronRight, Home, LucideIcon } from "lucide-react";
|
|
||||||
import { Fragment } from "react/jsx-runtime";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
curPrefix: number;
|
|
||||||
setCurPrefix: React.Dispatch<React.SetStateAction<number>>;
|
|
||||||
prefixHistory: string[];
|
|
||||||
actions?: React.ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ObjectListNavigator = ({
|
|
||||||
curPrefix,
|
|
||||||
setCurPrefix,
|
|
||||||
prefixHistory,
|
|
||||||
actions,
|
|
||||||
}: Props) => {
|
|
||||||
const onGoBack = () => {
|
|
||||||
if (curPrefix >= 0) setCurPrefix(curPrefix - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onGoForward = () => {
|
|
||||||
if (curPrefix < prefixHistory.length - 1) setCurPrefix(curPrefix + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-row flex-wrap items-center p-2 gap-y-2">
|
|
||||||
<div className="order-1 flex flex-row items-center">
|
|
||||||
<Button
|
|
||||||
icon={ChevronLeft}
|
|
||||||
color="ghost"
|
|
||||||
disabled={curPrefix < 0}
|
|
||||||
onClick={onGoBack}
|
|
||||||
className="col-span-2"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
icon={ChevronRight}
|
|
||||||
color="ghost"
|
|
||||||
disabled={curPrefix >= prefixHistory.length - 1}
|
|
||||||
onClick={onGoForward}
|
|
||||||
className="col-span-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="order-3 md:order-2 flex flex-row w-full overflow-x-auto items-center bg-base-200 h-10 flex-1 shrink-0 min-w-[80%] md:min-w-0 rounded-lg mx-2 px-2">
|
|
||||||
<HistoryItem
|
|
||||||
icon={Home}
|
|
||||||
isActive={curPrefix === -1}
|
|
||||||
onClick={() => setCurPrefix(-1)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{prefixHistory.map((prefix, i) => (
|
|
||||||
<Fragment key={prefix}>
|
|
||||||
<ChevronRight className="shrink-0" size={18} />
|
|
||||||
<HistoryItem
|
|
||||||
title={prefix
|
|
||||||
.substring(0, prefix.lastIndexOf("/"))
|
|
||||||
.split("/")
|
|
||||||
.pop()}
|
|
||||||
isActive={i === curPrefix}
|
|
||||||
onClick={() => setCurPrefix(i)}
|
|
||||||
/>
|
|
||||||
</Fragment>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="order-2 flex flex-row items-center flex-1 md:order-3 md:flex-initial justify-end">
|
|
||||||
{actions}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type HistoryItemProps = {
|
|
||||||
icon?: LucideIcon;
|
|
||||||
title?: string;
|
|
||||||
isActive: boolean;
|
|
||||||
onClick: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const HistoryItem = ({
|
|
||||||
icon: Icon,
|
|
||||||
title,
|
|
||||||
isActive,
|
|
||||||
onClick,
|
|
||||||
}: HistoryItemProps) => {
|
|
||||||
if (!title && !Icon) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
onClick();
|
|
||||||
}}
|
|
||||||
className={cn(
|
|
||||||
"px-2 rounded-md shrink-0 max-w-[150px] truncate",
|
|
||||||
isActive && "bg-neutral",
|
|
||||||
Icon ? "py-1" : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{Icon ? <Icon size={18} /> : null}
|
|
||||||
{title}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ObjectListNavigator;
|
|
||||||
@ -1,177 +0,0 @@
|
|||||||
import { Alert, Loading, Table } from "react-daisyui";
|
|
||||||
import { useBrowseObjects } from "./hooks";
|
|
||||||
import { dayjs, readableBytes } from "@/lib/utils";
|
|
||||||
import mime from "mime/lite";
|
|
||||||
import { Object } from "./types";
|
|
||||||
import { API_URL } from "@/lib/api";
|
|
||||||
import {
|
|
||||||
CircleXIcon,
|
|
||||||
FileArchive,
|
|
||||||
FileIcon,
|
|
||||||
FileType,
|
|
||||||
Folder,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
import ObjectActions from "./object-actions";
|
|
||||||
import GotoTopButton from "@/components/ui/goto-top-btn";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
prefix?: string;
|
|
||||||
onPrefixChange?: (prefix: string) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ObjectList = ({ prefix, onPrefixChange }: Props) => {
|
|
||||||
const { bucketName } = useBucketContext();
|
|
||||||
const { data, error, isLoading } = useBrowseObjects(bucketName, {
|
|
||||||
prefix,
|
|
||||||
limit: 1000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const onObjectClick = (object: Object) => {
|
|
||||||
window.open(API_URL + object.url + "?view=1", "_blank");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="overflow-x-auto min-h-[400px]">
|
|
||||||
<Table>
|
|
||||||
<Table.Head>
|
|
||||||
<span>Name</span>
|
|
||||||
<span>Size</span>
|
|
||||||
<span>Last Modified</span>
|
|
||||||
</Table.Head>
|
|
||||||
|
|
||||||
<Table.Body>
|
|
||||||
{isLoading ? (
|
|
||||||
<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}>
|
|
||||||
No objects
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{data?.prefixes.map((prefix) => (
|
|
||||||
<tr
|
|
||||||
key={prefix}
|
|
||||||
className="hover:bg-neutral/60 hover:text-neutral-content group"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="cursor-pointer"
|
|
||||||
role="button"
|
|
||||||
onClick={() => onPrefixChange?.(prefix)}
|
|
||||||
>
|
|
||||||
<span className="flex items-center gap-2 font-normal">
|
|
||||||
<Folder size={20} className="text-primary" />
|
|
||||||
{prefix
|
|
||||||
.substring(0, prefix.lastIndexOf("/"))
|
|
||||||
.split("/")
|
|
||||||
.pop()}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td colSpan={2} />
|
|
||||||
<ObjectActions object={{ objectKey: prefix, url: "" }} />
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{data?.objects.map((object, idx) => {
|
|
||||||
const extIdx = object.objectKey.lastIndexOf(".");
|
|
||||||
const filename =
|
|
||||||
extIdx >= 0
|
|
||||||
? object.objectKey.substring(0, extIdx)
|
|
||||||
: object.objectKey;
|
|
||||||
const ext = extIdx >= 0 ? object.objectKey.substring(extIdx) : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={object.objectKey}
|
|
||||||
className="hover:bg-neutral/60 hover:text-neutral-content group"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
className="cursor-pointer"
|
|
||||||
role="button"
|
|
||||||
onClick={() => onObjectClick(object)}
|
|
||||||
>
|
|
||||||
<span className="flex items-center font-normal w-full">
|
|
||||||
<FilePreview ext={ext?.substring(1)} object={object} />
|
|
||||||
<span className="truncate max-w-[40vw]">{filename}</span>
|
|
||||||
{ext && <span className="text-base-content/60">{ext}</span>}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="whitespace-nowrap">
|
|
||||||
{readableBytes(object.size)}
|
|
||||||
</td>
|
|
||||||
<td className="whitespace-nowrap">
|
|
||||||
{dayjs(object.lastModified).fromNow()}
|
|
||||||
</td>
|
|
||||||
<ObjectActions
|
|
||||||
prefix={data.prefix}
|
|
||||||
object={object}
|
|
||||||
end={
|
|
||||||
idx >= data.objects.length - 2 && data.objects.length > 5
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Table.Body>
|
|
||||||
</Table>
|
|
||||||
|
|
||||||
<GotoTopButton />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type FilePreviewProps = {
|
|
||||||
ext?: string | null;
|
|
||||||
object: Object;
|
|
||||||
};
|
|
||||||
|
|
||||||
const FilePreview = ({ ext, object }: FilePreviewProps) => {
|
|
||||||
const type = mime.getType(ext || "")?.split("/")[0];
|
|
||||||
let Icon = FileIcon;
|
|
||||||
|
|
||||||
if (
|
|
||||||
["zip", "rar", "7z", "iso", "tar", "gz", "bz2", "xz"].includes(ext || "")
|
|
||||||
) {
|
|
||||||
Icon = FileArchive;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === "image") {
|
|
||||||
const thumbnailSupport = ["jpg", "jpeg", "png", "gif"].includes(ext || "");
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
src={API_URL + object.url + (thumbnailSupport ? "?thumb=1" : "?view=1")}
|
|
||||||
alt={object.objectKey}
|
|
||||||
className="size-5 object-cover overflow-hidden mr-2"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === "text") {
|
|
||||||
Icon = FileType;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
size={20}
|
|
||||||
className="text-base-content/60 group-hover:text-neutral-content/80 mr-2"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ObjectList;
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
export const createFolderSchema = z.object({
|
|
||||||
name: z
|
|
||||||
.string()
|
|
||||||
.min(1, "Folder Name is required")
|
|
||||||
.regex(/^[a-zA-Z0-9_-]+$/, "Folder Name invalid"),
|
|
||||||
});
|
|
||||||
|
|
||||||
export type CreateFolderSchema = z.infer<typeof createFolderSchema>;
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import { createDisclosure } from "@/lib/disclosure";
|
|
||||||
import { Alert, Modal } from "react-daisyui";
|
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
import { useConfig } from "@/hooks/useConfig";
|
|
||||||
import { useEffect, useMemo, useState } from "react";
|
|
||||||
import Input from "@/components/ui/input";
|
|
||||||
import Button from "@/components/ui/button";
|
|
||||||
import { Copy, FileWarningIcon } from "lucide-react";
|
|
||||||
import { copyToClipboard } from "@/lib/utils";
|
|
||||||
import Checkbox from "@/components/ui/checkbox";
|
|
||||||
|
|
||||||
export const shareDialog = createDisclosure<{ key: string; prefix: string }>();
|
|
||||||
|
|
||||||
const ShareDialog = () => {
|
|
||||||
const { isOpen, data, dialogRef } = shareDialog.use();
|
|
||||||
const { bucket, bucketName } = useBucketContext();
|
|
||||||
const { data: config } = useConfig();
|
|
||||||
const [domain, setDomain] = useState(bucketName);
|
|
||||||
|
|
||||||
const websitePort = config?.s3_web?.bind_addr?.split(":").pop() || "80";
|
|
||||||
const rootDomain = config?.s3_web?.root_domain;
|
|
||||||
|
|
||||||
const domains = useMemo(
|
|
||||||
() => [
|
|
||||||
bucketName,
|
|
||||||
bucketName + rootDomain,
|
|
||||||
bucketName + rootDomain + `:${websitePort}`,
|
|
||||||
],
|
|
||||||
[bucketName, config?.s3_web]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setDomain(bucketName);
|
|
||||||
}, [domains]);
|
|
||||||
|
|
||||||
const url = "http://" + domain + "/" + data?.prefix + data?.key;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal ref={dialogRef} open={isOpen} backdrop>
|
|
||||||
<Modal.Header className="truncate">Share {data?.key || ""}</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{!bucket.websiteAccess && (
|
|
||||||
<Alert className="mb-4 items-start text-sm">
|
|
||||||
<FileWarningIcon className="mt-1" />
|
|
||||||
Sharing is only available for buckets with enabled website access.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
<div className="flex flex-row overflow-x-auto pb-2">
|
|
||||||
{domains.map((item) => (
|
|
||||||
<Checkbox
|
|
||||||
key={item}
|
|
||||||
label={item}
|
|
||||||
checked={item === domain}
|
|
||||||
onChange={() => setDomain(item)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="relative mt-2">
|
|
||||||
<Input
|
|
||||||
value={url}
|
|
||||||
className="w-full pr-12"
|
|
||||||
onFocus={(e) => e.target.select()}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
icon={Copy}
|
|
||||||
onClick={() => copyToClipboard(url)}
|
|
||||||
className="absolute top-0 right-0"
|
|
||||||
color="ghost"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Actions>
|
|
||||||
<Button onClick={() => shareDialog.close()}>Close</Button>
|
|
||||||
</Modal.Actions>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ShareDialog;
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
export type UseBrowserObjectOptions = Partial<{
|
|
||||||
prefix: string;
|
|
||||||
limit: number;
|
|
||||||
next: string;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type GetObjectsResult = {
|
|
||||||
prefixes: string[];
|
|
||||||
objects: Object[];
|
|
||||||
prefix: string;
|
|
||||||
nextToken: string | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Object = {
|
|
||||||
objectKey: string;
|
|
||||||
lastModified: Date;
|
|
||||||
size: number;
|
|
||||||
url: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type PutObjectPayload = {
|
|
||||||
key: string;
|
|
||||||
file: File | null;
|
|
||||||
};
|
|
||||||
@ -12,14 +12,13 @@ import { useAllowKey } from "../hooks";
|
|||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { handleError } from "@/lib/utils";
|
import { handleError } from "@/lib/utils";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
id?: string;
|
||||||
currentKeys?: string[];
|
currentKeys?: string[];
|
||||||
};
|
};
|
||||||
|
|
||||||
const AllowKeyDialog = ({ currentKeys }: Props) => {
|
const AllowKeyDialog = ({ id, currentKeys }: Props) => {
|
||||||
const { bucket } = useBucketContext();
|
|
||||||
const { dialogRef, isOpen, onOpen, onClose } = useDisclosure();
|
const { dialogRef, isOpen, onOpen, onClose } = useDisclosure();
|
||||||
const { data: keys } = useKeys();
|
const { data: keys } = useKeys();
|
||||||
const form = useForm<AllowKeysSchema>({
|
const form = useForm<AllowKeysSchema>({
|
||||||
@ -31,12 +30,12 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
|
|||||||
});
|
});
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const allowKey = useAllowKey(bucket.id, {
|
const allowKey = useAllowKey(id, {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
form.reset();
|
form.reset();
|
||||||
onClose();
|
onClose();
|
||||||
toast.success("Key allowed!");
|
toast.success("Key allowed!");
|
||||||
queryClient.invalidateQueries({ queryKey: ["bucket", bucket.id] });
|
queryClient.invalidateQueries({ queryKey: ["bucket", id] });
|
||||||
},
|
},
|
||||||
onError: handleError,
|
onError: handleError,
|
||||||
});
|
});
|
||||||
@ -84,7 +83,7 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
|
|||||||
Allow Key
|
Allow Key
|
||||||
</Button>
|
</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.Header className="mb-1">Allow Key</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
<p>Enter the key you want to allow access to.</p>
|
<p>Enter the key you want to allow access to.</p>
|
||||||
@ -100,7 +99,6 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
|
|||||||
/>
|
/>
|
||||||
Key
|
Key
|
||||||
</label>
|
</label>
|
||||||
<label>Local Aliases</label>
|
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
color="primary"
|
color="primary"
|
||||||
@ -130,31 +128,23 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
|
|||||||
<Table.Body>
|
<Table.Body>
|
||||||
{!keyFields.length ? (
|
{!keyFields.length ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={5} className="text-center">
|
<td colSpan={4} className="text-center">
|
||||||
No keys found
|
No keys found
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : null}
|
) : null}
|
||||||
{keyFields.map((field, index) => {
|
{keyFields.map((field, index) => (
|
||||||
const curKey = bucket.keys.find(
|
|
||||||
(key) => key.accessKeyId === field.keyId
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<Table.Row key={field.id}>
|
<Table.Row key={field.id}>
|
||||||
<CheckboxField
|
<CheckboxField
|
||||||
form={form}
|
form={form}
|
||||||
name={`keys.${index}.checked`}
|
name={`keys.${index}.checked`}
|
||||||
label={field.name || field.keyId?.substring(0, 8)}
|
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}.read`} />
|
||||||
<CheckboxField form={form} name={`keys.${index}.write`} />
|
<CheckboxField form={form} name={`keys.${index}.write`} />
|
||||||
<CheckboxField form={form} name={`keys.${index}.owner`} />
|
<CheckboxField form={form} name={`keys.${index}.owner`} />
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</Table.Body>
|
</Table.Body>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import { Modal } from "react-daisyui";
|
import { Modal } from "react-daisyui";
|
||||||
import { Plus } from "lucide-react";
|
import { Plus } from "lucide-react";
|
||||||
import Chips from "@/components/ui/chips";
|
import Chips from "@/components/ui/chips";
|
||||||
|
import { Bucket } from "../../types";
|
||||||
import { useDisclosure } from "@/hooks/useDisclosure";
|
import { useDisclosure } from "@/hooks/useDisclosure";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
@ -12,11 +13,12 @@ import { handleError } from "@/lib/utils";
|
|||||||
import { InputField } from "@/components/ui/input";
|
import { InputField } from "@/components/ui/input";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
|
|
||||||
const AliasesSection = () => {
|
type Props = {
|
||||||
const { bucket: data } = useBucketContext();
|
data?: Bucket;
|
||||||
|
};
|
||||||
|
|
||||||
|
const AliasesSection = ({ data }: Props) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const removeAlias = useRemoveAlias(data?.id, {
|
const removeAlias = useRemoveAlias(data?.id, {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
@ -4,13 +4,15 @@ import { QuotaSchema, quotaSchema } from "../schema";
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useDebounce } from "@/hooks/useDebounce";
|
import { useDebounce } from "@/hooks/useDebounce";
|
||||||
import { useUpdateBucket } from "../hooks";
|
import { useUpdateBucket } from "../hooks";
|
||||||
|
import { Bucket } from "../../types";
|
||||||
import { InputField } from "@/components/ui/input";
|
import { InputField } from "@/components/ui/input";
|
||||||
import { ToggleField } from "@/components/ui/toggle";
|
import { ToggleField } from "@/components/ui/toggle";
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
|
|
||||||
const QuotaSection = () => {
|
type Props = {
|
||||||
const { bucket: data } = useBucketContext();
|
data?: Bucket;
|
||||||
|
};
|
||||||
|
|
||||||
|
const QuotaSection = ({ data }: Props) => {
|
||||||
const form = useForm<QuotaSchema>({
|
const form = useForm<QuotaSchema>({
|
||||||
resolver: zodResolver(quotaSchema),
|
resolver: zodResolver(quotaSchema),
|
||||||
});
|
});
|
||||||
@ -21,7 +23,7 @@ const QuotaSection = () => {
|
|||||||
const onChange = useDebounce((values: DeepPartial<QuotaSchema>) => {
|
const onChange = useDebounce((values: DeepPartial<QuotaSchema>) => {
|
||||||
const { enabled } = values;
|
const { enabled } = values;
|
||||||
const maxObjects = Number(values.maxObjects);
|
const maxObjects = Number(values.maxObjects);
|
||||||
const maxSize = Math.round(Number(values.maxSize) * 1024 ** 3);
|
const maxSize = Math.round(Number(values.maxSize) * 1024 * 1024);
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
maxObjects: enabled && maxObjects > 0 ? maxObjects : null,
|
maxObjects: enabled && maxObjects > 0 ? maxObjects : null,
|
||||||
@ -35,7 +37,9 @@ const QuotaSection = () => {
|
|||||||
form.reset({
|
form.reset({
|
||||||
enabled:
|
enabled:
|
||||||
data?.quotas?.maxSize != null || data?.quotas?.maxObjects != null,
|
data?.quotas?.maxSize != null || data?.quotas?.maxObjects != null,
|
||||||
maxSize: data?.quotas?.maxSize ? data?.quotas?.maxSize / 1024 ** 3 : null,
|
maxSize: data?.quotas?.maxSize
|
||||||
|
? data?.quotas?.maxSize / 1024 / 1024
|
||||||
|
: null,
|
||||||
maxObjects: data?.quotas?.maxObjects || null,
|
maxObjects: data?.quotas?.maxObjects || null,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1,22 +1,24 @@
|
|||||||
import { Card } from "react-daisyui";
|
import { Card } from "react-daisyui";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useBucket } from "../hooks";
|
||||||
import { ChartPie, ChartScatter } from "lucide-react";
|
import { ChartPie, ChartScatter } from "lucide-react";
|
||||||
import { readableBytes } from "@/lib/utils";
|
import { readableBytes } from "@/lib/utils";
|
||||||
import WebsiteAccessSection from "./overview-website-access";
|
import WebsiteAccessSection from "./overview-website-access";
|
||||||
import AliasesSection from "./overview-aliases";
|
import AliasesSection from "./overview-aliases";
|
||||||
import QuotaSection from "./overview-quota";
|
import QuotaSection from "./overview-quota";
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
|
|
||||||
const OverviewTab = () => {
|
const OverviewTab = () => {
|
||||||
const { bucket: data } = useBucketContext();
|
const { id } = useParams();
|
||||||
|
const { data } = useBucket(id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-start">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-start">
|
||||||
<Card className="card-body gap-0 items-start order-2 md:order-1">
|
<Card className="card-body gap-0 items-start order-2 md:order-1">
|
||||||
<Card.Title>Summary</Card.Title>
|
<Card.Title>Summary</Card.Title>
|
||||||
|
|
||||||
<AliasesSection />
|
<AliasesSection data={data} />
|
||||||
<WebsiteAccessSection />
|
<WebsiteAccessSection data={data} />
|
||||||
<QuotaSection />
|
<QuotaSection data={data} />
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card className="card-body order-1 md:order-2">
|
<Card className="card-body order-1 md:order-2">
|
||||||
@ -7,16 +7,20 @@ import { useUpdateBucket } from "../hooks";
|
|||||||
import { useConfig } from "@/hooks/useConfig";
|
import { useConfig } from "@/hooks/useConfig";
|
||||||
import { Info, LinkIcon } from "lucide-react";
|
import { Info, LinkIcon } from "lucide-react";
|
||||||
import Button from "@/components/ui/button";
|
import Button from "@/components/ui/button";
|
||||||
|
import { Bucket } from "../../types";
|
||||||
import { InputField } from "@/components/ui/input";
|
import { InputField } from "@/components/ui/input";
|
||||||
import { ToggleField } from "@/components/ui/toggle";
|
import { ToggleField } from "@/components/ui/toggle";
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
|
|
||||||
const WebsiteAccessSection = () => {
|
type Props = {
|
||||||
const { bucket: data, bucketName } = useBucketContext();
|
data?: Bucket;
|
||||||
|
};
|
||||||
|
|
||||||
|
const WebsiteAccessSection = ({ data }: Props) => {
|
||||||
const { data: config } = useConfig();
|
const { data: config } = useConfig();
|
||||||
const form = useForm<WebsiteConfigSchema>({
|
const form = useForm<WebsiteConfigSchema>({
|
||||||
resolver: zodResolver(websiteConfigSchema),
|
resolver: zodResolver(websiteConfigSchema),
|
||||||
});
|
});
|
||||||
|
const bucketName = data?.globalAliases[0] || "";
|
||||||
const isEnabled = useWatch({ control: form.control, name: "websiteAccess" });
|
const isEnabled = useWatch({ control: form.control, name: "websiteAccess" });
|
||||||
|
|
||||||
const websitePort = config?.s3_web?.bind_addr?.split(":").pop() || "80";
|
const websitePort = config?.s3_web?.bind_addr?.split(":").pop() || "80";
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import { useDenyKey } from "../hooks";
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useBucket, useDenyKey } from "../hooks";
|
||||||
import { Card, Checkbox, Table } from "react-daisyui";
|
import { Card, Checkbox, Table } from "react-daisyui";
|
||||||
import Button from "@/components/ui/button";
|
import Button from "@/components/ui/button";
|
||||||
import { Trash } from "lucide-react";
|
import { Trash } from "lucide-react";
|
||||||
@ -6,12 +7,12 @@ import AllowKeyDialog from "./allow-key-dialog";
|
|||||||
import { useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { handleError } from "@/lib/utils";
|
import { handleError } from "@/lib/utils";
|
||||||
import { useBucketContext } from "../context";
|
|
||||||
|
|
||||||
const PermissionsTab = () => {
|
const PermissionsTab = () => {
|
||||||
const { bucket, refetch } = useBucketContext();
|
const { id } = useParams();
|
||||||
|
const { data, refetch } = useBucket(id);
|
||||||
|
|
||||||
const denyKey = useDenyKey(bucket.id, {
|
const denyKey = useDenyKey(id, {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
toast.success("Key removed!");
|
toast.success("Key removed!");
|
||||||
refetch();
|
refetch();
|
||||||
@ -20,13 +21,13 @@ const PermissionsTab = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const keys = useMemo(() => {
|
const keys = useMemo(() => {
|
||||||
return bucket?.keys.filter(
|
return data?.keys.filter(
|
||||||
(key) =>
|
(key) =>
|
||||||
key.permissions.read !== false ||
|
key.permissions.read !== false ||
|
||||||
key.permissions.write !== false ||
|
key.permissions.write !== false ||
|
||||||
key.permissions.owner !== false
|
key.permissions.owner !== false
|
||||||
);
|
);
|
||||||
}, [bucket?.keys]);
|
}, [data?.keys]);
|
||||||
|
|
||||||
const onRemove = (id: string) => {
|
const onRemove = (id: string) => {
|
||||||
if (window.confirm("Are you sure you want to remove this key?")) {
|
if (window.confirm("Are you sure you want to remove this key?")) {
|
||||||
@ -42,7 +43,10 @@ const PermissionsTab = () => {
|
|||||||
<Card className="card-body">
|
<Card className="card-body">
|
||||||
<div className="flex flex-row items-center gap-2">
|
<div className="flex flex-row items-center gap-2">
|
||||||
<Card.Title className="flex-1 truncate">Access Keys</Card.Title>
|
<Card.Title className="flex-1 truncate">Access Keys</Card.Title>
|
||||||
<AllowKeyDialog currentKeys={keys?.map((key) => key.accessKeyId)} />
|
<AllowKeyDialog
|
||||||
|
id={id}
|
||||||
|
currentKeys={keys?.map((key) => key.accessKeyId)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
@ -50,7 +54,6 @@ const PermissionsTab = () => {
|
|||||||
<Table.Head>
|
<Table.Head>
|
||||||
<span>#</span>
|
<span>#</span>
|
||||||
<span>Key</span>
|
<span>Key</span>
|
||||||
<span>Aliases</span>
|
|
||||||
<span>Read</span>
|
<span>Read</span>
|
||||||
<span>Write</span>
|
<span>Write</span>
|
||||||
<span>Owner</span>
|
<span>Owner</span>
|
||||||
@ -62,7 +65,6 @@ const PermissionsTab = () => {
|
|||||||
<Table.Row>
|
<Table.Row>
|
||||||
<span>{idx + 1}</span>
|
<span>{idx + 1}</span>
|
||||||
<span>{key.name || key.accessKeyId?.substring(0, 8)}</span>
|
<span>{key.name || key.accessKeyId?.substring(0, 8)}</span>
|
||||||
<span>{key.bucketLocalAliases?.join(", ") || "-"}</span>
|
|
||||||
<span>
|
<span>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={key.permissions?.read}
|
checked={key.permissions?.read}
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { createContext, useContext } from "react";
|
|
||||||
import { Bucket } from "../types";
|
|
||||||
|
|
||||||
export const BucketContext = createContext<{
|
|
||||||
bucket: Bucket;
|
|
||||||
refetch: () => void;
|
|
||||||
bucketName: string;
|
|
||||||
} | null>(null);
|
|
||||||
|
|
||||||
export const useBucketContext = () => {
|
|
||||||
const bucket = useContext(BucketContext);
|
|
||||||
if (!bucket) {
|
|
||||||
throw new Error(
|
|
||||||
"BucketContext must be used within a BucketContextProvider"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return bucket;
|
|
||||||
};
|
|
||||||
@ -2,18 +2,10 @@ import { useParams } from "react-router-dom";
|
|||||||
import { useBucket } from "./hooks";
|
import { useBucket } from "./hooks";
|
||||||
import Page from "@/context/page-context";
|
import Page from "@/context/page-context";
|
||||||
import TabView, { Tab } from "@/components/containers/tab-view";
|
import TabView, { Tab } from "@/components/containers/tab-view";
|
||||||
import {
|
import { ChartLine, LockKeyhole } from "lucide-react";
|
||||||
ChartLine,
|
import OverviewTab from "./components/overview-tab";
|
||||||
CircleXIcon,
|
import PermissionsTab from "./components/permissions-tab";
|
||||||
FolderSearch,
|
|
||||||
LockKeyhole,
|
|
||||||
} from "lucide-react";
|
|
||||||
import OverviewTab from "./overview/overview-tab";
|
|
||||||
import PermissionsTab from "./permissions/permissions-tab";
|
|
||||||
import MenuButton from "./components/menu-button";
|
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[] = [
|
const tabs: Tab[] = [
|
||||||
{
|
{
|
||||||
@ -28,50 +20,28 @@ const tabs: Tab[] = [
|
|||||||
icon: LockKeyhole,
|
icon: LockKeyhole,
|
||||||
Component: PermissionsTab,
|
Component: PermissionsTab,
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: "browse",
|
// name: "browse",
|
||||||
title: "Browse",
|
// title: "Browse",
|
||||||
icon: FolderSearch,
|
// icon: FolderSearch,
|
||||||
Component: BrowseTab,
|
// },
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const ManageBucketPage = () => {
|
const ManageBucketPage = () => {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const { data, error, isLoading, refetch } = useBucket(id);
|
const { data } = useBucket(id);
|
||||||
|
|
||||||
const name = data?.globalAliases[0];
|
const name = data?.globalAliases[0];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="container">
|
||||||
<Page
|
<Page
|
||||||
title={name || "Manage Bucket"}
|
title={name || "Manage Bucket"}
|
||||||
prev="/buckets"
|
prev="/buckets"
|
||||||
actions={data ? <MenuButton /> : undefined}
|
actions={<MenuButton />}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{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" />
|
<TabView tabs={tabs} className="bg-base-100 h-14 px-1.5" />
|
||||||
</BucketContext.Provider>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -10,29 +10,16 @@ const BucketsPage = () => {
|
|||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
|
|
||||||
const items = useMemo(() => {
|
const items = useMemo(() => {
|
||||||
let buckets =
|
if (!search?.length) {
|
||||||
data?.map((bucket) => {
|
return data;
|
||||||
return {
|
|
||||||
...bucket,
|
|
||||||
aliases: [
|
|
||||||
...(bucket.globalAliases || []),
|
|
||||||
...(bucket.localAliases?.map((l) => l.alias) || []),
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}) || [];
|
|
||||||
|
|
||||||
if (search?.length > 0) {
|
|
||||||
const q = search.toLowerCase();
|
|
||||||
buckets = buckets.filter(
|
|
||||||
(bucket) =>
|
|
||||||
bucket.id.includes(q) ||
|
|
||||||
bucket.aliases.find((alias) => alias.includes(q))
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
buckets = buckets.sort((a, b) => a.aliases[0].localeCompare(b.aliases[0]));
|
const q = search.toLowerCase();
|
||||||
|
return data?.filter(
|
||||||
return buckets;
|
(bucket) =>
|
||||||
|
bucket.id.includes(q) ||
|
||||||
|
bucket.globalAliases.find((alias) => alias.includes(q))
|
||||||
|
);
|
||||||
}, [data, search]);
|
}, [data, search]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -5,7 +5,6 @@ export type GetBucketRes = Bucket[];
|
|||||||
export type Bucket = {
|
export type Bucket = {
|
||||||
id: string;
|
id: string;
|
||||||
globalAliases: string[];
|
globalAliases: string[];
|
||||||
localAliases: LocalAlias[];
|
|
||||||
websiteAccess: boolean;
|
websiteAccess: boolean;
|
||||||
websiteConfig?: WebsiteConfig | null;
|
websiteConfig?: WebsiteConfig | null;
|
||||||
keys: Key[];
|
keys: Key[];
|
||||||
@ -18,16 +17,11 @@ export type Bucket = {
|
|||||||
quotas: Quotas;
|
quotas: Quotas;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type LocalAlias = {
|
|
||||||
accessKeyId: string;
|
|
||||||
alias: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Key = {
|
export type Key = {
|
||||||
accessKeyId: string;
|
accessKeyId: string;
|
||||||
name: string;
|
name: string;
|
||||||
permissions: Permissions;
|
permissions: Permissions;
|
||||||
bucketLocalAliases: string[];
|
bucketLocalAliases: any[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Permissions = {
|
export type Permissions = {
|
||||||
|
|||||||
@ -66,8 +66,7 @@ const AssignNodeDialog = () => {
|
|||||||
}, [data]);
|
}, [data]);
|
||||||
|
|
||||||
const zoneList = useMemo(() => {
|
const zoneList = useMemo(() => {
|
||||||
const nodes = cluster?.nodes || cluster?.knownNodes || [];
|
const list = cluster?.nodes
|
||||||
const list = nodes
|
|
||||||
.flatMap((i) => {
|
.flatMap((i) => {
|
||||||
const role = layout?.roles.find((role) => role.id === i.id);
|
const role = layout?.roles.find((role) => role.id === i.id);
|
||||||
const staged = layout?.stagedRoleChanges.find(
|
const staged = layout?.stagedRoleChanges.find(
|
||||||
@ -84,8 +83,7 @@ const AssignNodeDialog = () => {
|
|||||||
}, [cluster, layout]);
|
}, [cluster, layout]);
|
||||||
|
|
||||||
const tagsList = useMemo(() => {
|
const tagsList = useMemo(() => {
|
||||||
const nodes = cluster?.nodes || cluster?.knownNodes || [];
|
const list = cluster?.nodes
|
||||||
const list = nodes
|
|
||||||
.flatMap((i) => {
|
.flatMap((i) => {
|
||||||
const role = layout?.roles.find((role) => role.id === i.id);
|
const role = layout?.roles.find((role) => role.id === i.id);
|
||||||
const staged = layout?.stagedRoleChanges.find(
|
const staged = layout?.stagedRoleChanges.find(
|
||||||
|
|||||||
@ -184,7 +184,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
|
|||||||
</Alert>
|
</Alert>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<div className="w-full overflow-x-auto overflow-y-hidden min-h-[400px]">
|
<div className="w-full overflow-x-auto min-h-[400px] pb-16">
|
||||||
<Table size="sm" className="min-w-[800px]">
|
<Table size="sm" className="min-w-[800px]">
|
||||||
<Table.Head>
|
<Table.Head>
|
||||||
<span>#</span>
|
<span>#</span>
|
||||||
@ -266,12 +266,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
|
|||||||
: "Inactive"}
|
: "Inactive"}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
||||||
<Dropdown
|
<Dropdown end>
|
||||||
end
|
|
||||||
vertical={
|
|
||||||
idx > 2 && idx >= items.length - 2 ? "top" : "bottom"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Dropdown.Toggle button={false}>
|
<Dropdown.Toggle button={false}>
|
||||||
<Button shape="circle" color="ghost">
|
<Button shape="circle" color="ghost">
|
||||||
<EllipsisVertical />
|
<EllipsisVertical />
|
||||||
|
|||||||
@ -2,22 +2,9 @@ import Page from "@/context/page-context";
|
|||||||
import { useClusterStatus } from "./hooks";
|
import { useClusterStatus } from "./hooks";
|
||||||
import { Card } from "react-daisyui";
|
import { Card } from "react-daisyui";
|
||||||
import NodesList from "./components/nodes-list";
|
import NodesList from "./components/nodes-list";
|
||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
const ClusterPage = () => {
|
const ClusterPage = () => {
|
||||||
const { data } = useClusterStatus();
|
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 (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
@ -31,10 +18,7 @@ const ClusterPage = () => {
|
|||||||
<DetailItem title="Version" value={data?.garageVersion} />
|
<DetailItem title="Version" value={data?.garageVersion} />
|
||||||
{/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
|
{/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
|
||||||
<DetailItem title="DB engine" value={data?.dbEngine} />
|
<DetailItem title="DB engine" value={data?.dbEngine} />
|
||||||
<DetailItem
|
<DetailItem title="Layout version" value={data?.layoutVersion} />
|
||||||
title="Layout version"
|
|
||||||
value={data?.layoutVersion || data?.layout?.version}
|
|
||||||
/>
|
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
@ -42,7 +26,7 @@ const ClusterPage = () => {
|
|||||||
<Card.Body>
|
<Card.Body>
|
||||||
<Card.Title>Nodes</Card.Title>
|
<Card.Title>Nodes</Card.Title>
|
||||||
|
|
||||||
<NodesList nodes={nodes} />
|
<NodesList nodes={data?.nodes || []} />
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,9 +7,7 @@ export type GetStatusResult = {
|
|||||||
rustVersion: string;
|
rustVersion: string;
|
||||||
dbEngine: string;
|
dbEngine: string;
|
||||||
layoutVersion: number;
|
layoutVersion: number;
|
||||||
nodes?: Node[];
|
nodes: Node[];
|
||||||
knownNodes?: Node[];
|
|
||||||
layout?: GetClusterLayoutResult;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Node = {
|
export type Node = {
|
||||||
@ -19,9 +17,9 @@ export type Node = {
|
|||||||
hostname: string;
|
hostname: string;
|
||||||
isUp: boolean;
|
isUp: boolean;
|
||||||
lastSeenSecsAgo: number | null;
|
lastSeenSecsAgo: number | null;
|
||||||
draining?: boolean;
|
draining: boolean;
|
||||||
dataPartition?: DataPartition;
|
dataPartition: DataPartition;
|
||||||
metadataPartition?: DataPartition;
|
metadataPartition: DataPartition;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type DataPartition = {
|
export type DataPartition = {
|
||||||
|
|||||||
@ -96,7 +96,6 @@ const KeysPage = () => {
|
|||||||
icon={Eye}
|
icon={Eye}
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => fetchSecretKey(key.id)}
|
onClick={() => fetchSecretKey(key.id)}
|
||||||
className="shrink-0 min-w-[80px]"
|
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user