draft: terminal

README.md

@@ -31,18 +31,14 @@ If you install Garage using Docker, you can install this web UI alongside Garage
 ```yml
 services:
   garage:
-    image: dxflrs/garage:v1.0.1
+    image: dxflrs/garage:v1.0.0
     container_name: garage
     volumes:
       - ./garage.toml:/etc/garage.toml
       - ./meta:/var/lib/garage/meta
       - ./data:/var/lib/garage/data
     restart: unless-stopped
-    ports:
+    network_mode: host
-      - 3900:3900
-      - 3901:3901
-      - 3902:3903
-      - 3903:3903
 
   webui:
     image: khairul169/garage-webui:latest
@@ -52,9 +48,6 @@ services:
       - ./garage.toml:/etc/garage.toml:ro
     ports:
       - 3909:3909
-    environment:
-      API_BASE_URL: "http://garage:3903"
-      S3_ENDPOINT_URL: "http://garage:3900"
 ```
 
 ### Without Docker
@@ -62,7 +55,7 @@ services:
 Get the latest binary from the [release page](https://github.com/khairul169/garage-webui/releases/latest) according to your OS architecture. For example:
 
 ```sh
-$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.6/garage-webui-v1.0.6-linux-amd64
+$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.2/garage-webui-v1.0.2-linux-amd64
 $ chmod +x garage-webui
 $ sudo cp garage-webui /usr/local/bin
 ```
@@ -141,8 +134,6 @@ However, if it fails to load, you can set these environment variables instead:
 - `CONFIG_PATH`: Path to the Garage `config.toml` file. Defaults to `/etc/garage.toml`.
 - `API_BASE_URL`: Garage admin API endpoint URL.
 - `API_ADMIN_KEY`: Admin API key.
-- `S3_REGION`: S3 Region.
-- `S3_ENDPOINT_URL`: S3 Endpoint url.
 
 ### Running
 

backend/go.mod

@@ -8,7 +8,6 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/s3 v1.59.0
 	github.com/aws/smithy-go v1.20.4
 	github.com/joho/godotenv v1.5.1
-	github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
 	github.com/pelletier/go-toml/v2 v2.2.2
 )
 
@@ -21,4 +20,6 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.18 // indirect
 	github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.18 // indirect
 	github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.16 // indirect
+	github.com/coder/websocket v1.8.12 // indirect
+	golang.org/x/net v0.28.0 // indirect
 )

backend/go.sum

@@ -22,13 +22,13 @@ github.com/aws/aws-sdk-go-v2/service/s3 v1.59.0 h1:Cso4Ev/XauMVsbwdhYEoxg8rxZWw4
 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/coder/websocket v1.8.12 h1:5bUXkEPPIbewrnkU8LTCLVaxi4N4J8ahufH2vlo4NAo=
+github.com/coder/websocket v1.8.12/go.mod h1:LNVeNrXQZfe5qhS9ALED3uA+l5pPqvwXg3CKoDBB2gs=
 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/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
-github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646 h1:zYyBkD/k9seD2A7fsi6Oo2LfFZAehjjQMERAvZLEDnQ=
-github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646/go.mod h1:jpp1/29i3P1S/RLdc7JQKbRpFeM1dOBd8T9ki5s+AY8=
 github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
 github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
@@ -42,6 +42,8 @@ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
 github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
+golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=

backend/main.go

@@ -16,10 +16,12 @@ func main() {
 	utils.InitCacheManager()
 
 	if err := utils.Garage.LoadConfig(); err != nil {
-		log.Println("Cannot load garage config!", err)
+		log.Fatal("Failed to load config! ", err)
 	}
 
 	http.Handle("/api/", http.StripPrefix("/api", router.HandleApiRouter()))
+	http.Handle("/ws/", http.StripPrefix("/ws", router.HandleWebsocket()))
+
 	ui.ServeUI()
 
 	host := utils.GetEnv("HOST", "0.0.0.0")

backend/router/browse.go

@@ -73,7 +73,8 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
 			ObjectKey:    &key,
 			LastModified: object.LastModified,
 			Size:         object.Size,
-			Url:          fmt.Sprintf("/browse/%s/%s", bucket, *object.Key),
+			ViewUrl:      fmt.Sprintf("/browse/%s/%s?view=1", bucket, *object.Key),
+			DownloadUrl:  fmt.Sprintf("/browse/%s/%s?dl=1", bucket, *object.Key),
 		})
 	}
 
@@ -83,10 +84,8 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
 func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
 	bucket := r.PathValue("bucket")
 	key := r.PathValue("key")
-	queryParams := r.URL.Query()
+	view := r.URL.Query().Get("view") == "1"
-	view := queryParams.Get("view") == "1"
+	download := r.URL.Query().Get("dl") == "1"
-	thumbnail := queryParams.Get("thumb") == "1"
-	download := queryParams.Get("dl") == "1"
 
 	client, err := getS3Client(bucket)
 	if err != nil {
@@ -94,18 +93,6 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	if !view && !download && !thumbnail {
-		object, err := client.HeadObject(context.Background(), &s3.HeadObjectInput{
-			Bucket: aws.String(bucket),
-			Key:    aws.String(key),
-		})
-		if err != nil {
-			utils.ResponseError(w, err)
-		}
-		utils.ResponseSuccess(w, object)
-		return
-	}
-
 	object, err := client.GetObject(context.Background(), &s3.GetObjectInput{
 		Bucket: aws.String(bucket),
 		Key:    aws.String(key),
@@ -122,42 +109,31 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	defer object.Body.Close()
+	if view || download {
-	keys := strings.Split(key, "/")
+		defer object.Body.Close()
+		keys := strings.Split(key, "/")
+
+		w.Header().Set("Content-Type", *object.ContentType)
+		w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
+		w.Header().Set("Cache-Control", "max-age=86400")
+		w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
+		w.Header().Set("Etag", *object.ETag)
+
+		if download {
+			w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", keys[len(keys)-1]))
+		}
+
+		w.WriteHeader(http.StatusOK)
+		_, err = io.Copy(w, object.Body)
 
-	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("Content-Type", *object.ContentType)
+	utils.ResponseSuccess(w, object)
-	w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
-	w.Header().Set("Cache-Control", "max-age=86400")
-	w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
-	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) {
@@ -324,7 +300,7 @@ func getS3Client(bucket string) (*s3.Client, error) {
 
 	awsConfig := aws.Config{
 		Credentials:  creds,
-		Region:       utils.Garage.GetS3Region(),
+		Region:       "garage",
 		BaseEndpoint: aws.String(utils.Garage.GetS3Endpoint()),
 	}
 

backend/router/buckets.go

@@ -34,14 +34,13 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
 				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}
 				return
 			}
 
-			data.LocalAliases = bucket.LocalAliases
+			ch <- bucket
-			ch <- data
 		}()
 	}
 

backend/router/router.go

@@ -1,6 +1,8 @@
 package router
 
-import "net/http"
+import (
+	"net/http"
+)
 
 func HandleApiRouter() *http.ServeMux {
 	router := http.NewServeMux()
@@ -21,3 +23,11 @@ func HandleApiRouter() *http.ServeMux {
 
 	return router
 }
+
+func HandleWebsocket() *http.ServeMux {
+	router := http.NewServeMux()
+
+	router.HandleFunc("/terminal", TerminalHandler)
+
+	return router
+}

backend/router/terminal.go

@@ -0,0 +1,114 @@
+package router
+
+import (
+	"context"
+	"fmt"
+	"net/http"
+	"os"
+	"os/exec"
+
+	"github.com/coder/websocket"
+)
+
+type Terminal struct {
+	ws         *websocket.Conn
+	remoteAddr string
+	cmd        *exec.Cmd
+}
+
+func (c *Terminal) NewSession(w http.ResponseWriter, r *http.Request) {
+	cwd, err := os.Getwd()
+	if err != nil {
+		fmt.Printf("Failed to get current working directory: %v\n", err)
+	}
+
+	cmd := &exec.Cmd{
+		// Path: "/bin/bash",
+		Path: "/usr/bin/fish",
+		Dir:  cwd,
+	}
+	c.cmd = cmd
+
+	stdin, err := cmd.StdinPipe()
+	if err != nil {
+		fmt.Printf("Failed to create stdin pipe: %v\n", err)
+		return
+	}
+
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		fmt.Printf("Failed to create stdout pipe: %v\n", err)
+		return
+	}
+	cmd.Stderr = cmd.Stdout
+	cmd.Stdout = os.Stdout
+
+	if err := cmd.Start(); err != nil {
+		fmt.Printf("Failed to start command: %v\n", err)
+		return
+	}
+
+	go func() {
+		// if err := cmd.Wait(); err != nil {
+		// 	fmt.Printf("Shell exited with error: %v\n", err)
+		// }
+		// c.ws.CloseNow()
+	}()
+
+	go func() {
+		buf := make([]byte, 1024)
+		for {
+			n, err := stdout.Read(buf)
+			if err != nil {
+				return
+			}
+
+			fmt.Printf("Data from stdout: %s\n", string(buf[:n]))
+
+			err = c.ws.Write(context.Background(), websocket.MessageText, buf[:n])
+			if err != nil {
+				fmt.Printf("Failed to write data to websocket: %v\n", err)
+				return
+			}
+
+		}
+	}()
+
+	for {
+		_, data, err := c.ws.Read(context.Background())
+		if err != nil {
+			return
+		}
+
+		fmt.Printf("Data from websocket: %s\n", string(data))
+
+		if _, err := stdin.Write(data); err != nil {
+			fmt.Printf("Failed to write data to stdin: %v\n", err)
+			continue
+		}
+	}
+}
+
+func (c *Terminal) Close() {
+	if c.cmd != nil {
+		c.cmd.Process.Kill()
+	}
+
+	fmt.Println("Terminal session closed:", c.remoteAddr)
+	c.ws.Close(websocket.StatusInternalError, "the connection is closed")
+}
+
+func TerminalHandler(w http.ResponseWriter, r *http.Request) {
+	fmt.Printf("New terminal session: %s\n", r.RemoteAddr)
+
+	c, err := websocket.Accept(w, r, nil)
+	if err != nil {
+		fmt.Printf("Failed to accept websocket: %v\n", err)
+		return
+	}
+
+	term := &Terminal{ws: c, remoteAddr: r.RemoteAddr}
+	defer term.Close()
+
+	term.NewSession(w, r)
+}

backend/schema/browse.go

@@ -13,5 +13,6 @@ type BrowserObject struct {
 	ObjectKey    *string    `json:"objectKey"`
 	LastModified *time.Time `json:"lastModified"`
 	Size         *int64     `json:"size"`
-	Url          string     `json:"url"`
+	ViewUrl      string     `json:"viewUrl"`
+	DownloadUrl  string     `json:"downloadUrl"`
 }

backend/schema/bucket.go

@@ -1,15 +1,14 @@
 package schema
 
 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 {
 	ID                             string        `json:"id"`
 	GlobalAliases                  []string      `json:"globalAliases"`
-	LocalAliases                   []LocalAlias  `json:"localAliases"`
 	WebsiteAccess                  bool          `json:"websiteAccess"`
 	WebsiteConfig                  WebsiteConfig `json:"websiteConfig"`
 	Keys                           []KeyElement  `json:"keys"`
@@ -22,17 +21,12 @@ type Bucket struct {
 	Quotas                         Quotas        `json:"quotas"`
 }
 
-type LocalAlias struct {
-	AccessKeyID string `json:"accessKeyId"`
-	Alias       string `json:"alias"`
-}
-
 type KeyElement struct {
-	AccessKeyID        string      `json:"accessKeyId"`
+	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"`
+	SecretAccessKey    string        `json:"secretAccessKey"`
 }
 
 type Permissions struct {

backend/schema/config.go

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

backend/utils/garage.go

@@ -3,7 +3,6 @@ package utils
 import (
 	"bytes"
 	"encoding/json"
-	"errors"
 	"fmt"
 	"io"
 	"khairul169/garage-webui/schema"
@@ -74,17 +73,6 @@ func (g *garage) GetS3Endpoint() string {
 	return endpoint
 }
 
-func (g *garage) GetS3Region() string {
-	endpoint := os.Getenv("S3_REGION")
-	if len(endpoint) > 0 {
-		return endpoint
-	}
-	if len(g.Config.S3API.S3Region) == 0 {
-		return "garage"
-	}
-	return g.Config.S3API.S3Region
-}
-
 func (g *garage) GetAdminKey() string {
 	key := os.Getenv("API_ADMIN_KEY")
 	if len(key) > 0 {
@@ -165,7 +153,7 @@ func (g *garage) Fetch(url string, options *FetchOptions) ([]byte, error) {
 			message = fmt.Sprintf("%v", data["message"])
 		}
 
-		return nil, errors.New(message)
+		return nil, fmt.Errorf(message)
 	}
 
 	body, err := io.ReadAll(res.Body)

backend/utils/image.go

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

docker-compose.yml

@@ -1,17 +1,13 @@
 services:
   garage:
-    image: dxflrs/garage:v1.0.1
+    image: dxflrs/garage:v1.0.0
     container_name: garage
     volumes:
       - ./garage.toml:/etc/garage.toml
       - ./meta:/var/lib/garage/meta
       - ./data:/var/lib/garage/data
     restart: unless-stopped
-    ports:
+    network_mode: host
-       - 3900:3900
-       - 3901:3901
-       - 3902:3903
-       - 3903:3903
 
   webui:
     image: khairul169/garage-webui:latest
@@ -21,7 +17,3 @@ services:
       - ./garage.toml:/etc/garage.toml:ro
     ports:
       - 3909:3909
-    environment:
-      API_BASE_URL: "http://garage:3903"
-      S3_ENDPOINT_URL: "http://garage:3900"
-

package.json

@@ -1,7 +1,7 @@
 {
   "name": "garage-webui",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.2",
   "type": "module",
   "scripts": {
     "dev:client": "vite",
@@ -14,6 +14,8 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
     "@tanstack/react-query": "^5.51.23",
+    "@xterm/addon-attach": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.12",
     "lucide-react": "^0.427.0",

pnpm-lock.yaml

@@ -14,6 +14,12 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.51.23
         version: 5.51.23([email protected])
+      '@xterm/addon-attach':
+        specifier: ^0.11.0
+        version: 0.11.0(@xterm/[email protected])
+      '@xterm/xterm':
+        specifier: ^5.5.0
+        version: 5.5.0
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -675,6 +681,14 @@ packages:
     peerDependencies:
       vite: ^4 || ^5
 
+  '@xterm/[email protected]':
+    resolution: {integrity: sha512-JboCN0QAY6ZLY/SSB/Zl2cQ5zW1Eh4X3fH7BnuR1NB7xGRhzbqU2Npmpiw/3zFlxDaU88vtKzok44JKi2L2V2Q==}
+    peerDependencies:
+      '@xterm/xterm': ^5.0.0
+
+  '@xterm/[email protected]':
+    resolution: {integrity: sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==}
+
   [email protected]:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -2224,6 +2238,12 @@ snapshots:
     transitivePeerDependencies:
       - '@swc/helpers'
 
+  '@xterm/[email protected](@xterm/[email protected])':
+    dependencies:
+      '@xterm/xterm': 5.5.0
+
+  '@xterm/[email protected]': {}
+
   [email protected]([email protected]):
     dependencies:
       acorn: 8.12.1

src/app/router.tsx

@@ -8,6 +8,7 @@ const HomePage = lazy(() => import("@/pages/home/page"));
 const BucketsPage = lazy(() => import("@/pages/buckets/page"));
 const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
 const KeysPage = lazy(() => import("@/pages/keys/page"));
+const TerminalPage = lazy(() => import("@/pages/terminal/page"));
 
 const router = createBrowserRouter([
   {
@@ -37,6 +38,10 @@ const router = createBrowserRouter([
         path: "keys",
         Component: KeysPage,
       },
+      {
+        path: "terminal",
+        Component: TerminalPage,
+      },
     ],
   },
 ]);

src/components/containers/sidebar.tsx

@@ -5,6 +5,7 @@ import {
   KeySquare,
   LayoutDashboard,
   Palette,
+  SquareTerminal,
 } from "lucide-react";
 import { Dropdown, Menu } from "react-daisyui";
 import { Link, useLocation } from "react-router-dom";
@@ -18,6 +19,7 @@ const pages = [
   { icon: HardDrive, title: "Cluster", path: "/cluster" },
   { icon: ArchiveIcon, title: "Buckets", path: "/buckets" },
   { icon: KeySquare, title: "Keys", path: "/keys" },
+  { icon: SquareTerminal, title: "Terminal", path: "/terminal" },
 ];
 
 const Sidebar = () => {

src/lib/api.ts

@@ -30,21 +30,23 @@ const api = {
       headers: { ...headers, ...(options?.headers || {}) },
     });
 
-    const isJson = res.headers
-      .get("Content-Type")
-      ?.includes("application/json");
-    const data = isJson ? await res.json() : await res.text();
-
     if (!res.ok) {
-      const message = isJson
+      const json = await res.json().catch(() => {});
-        ? data?.message
+      const message = json?.message || res.statusText;
-        : typeof data === "string"
-        ? data
-        : res.statusText;
       throw new Error(message);
     }
 
-    return data as unknown as T;
+    const isJson = res.headers
+      .get("Content-Type")
+      ?.includes("application/json");
+
+    if (isJson) {
+      const json = (await res.json()) as T;
+      return json;
+    }
+
+    const text = await res.text();
+    return text as unknown as T;
   },
 
   async get<T = any>(url: string, options?: Partial<FetchOptions>) {

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

@@ -4,7 +4,7 @@ import { readableBytes } from "@/lib/utils";
 import Button from "@/components/ui/button";
 
 type Props = {
-  data: Bucket & { aliases: string[] };
+  data: Bucket;
 };
 
 const BucketCard = ({ data }: Props) => {
@@ -15,7 +15,7 @@ const BucketCard = ({ data }: Props) => {
           <ArchiveIcon size={28} className="shrink-0" />
 
           <p className="text-xl font-medium truncate">
-            {data.aliases?.join(", ")}
+            {data.globalAliases?.join(", ")}
           </p>
         </div>
 

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

@@ -12,7 +12,7 @@ import { shareDialog } from "./share-dialog";
 
 type Props = {
   prefix?: string;
-  object: Pick<Object, "objectKey" | "url">;
+  object: Pick<Object, "objectKey" | "downloadUrl">;
   end?: boolean;
 };
 
@@ -30,7 +30,7 @@ const ObjectActions = ({ prefix = "", object, end }: Props) => {
   });
 
   const onDownload = () => {
-    window.open(API_URL + object.url + "?dl=1", "_blank");
+    window.open(API_URL + object.downloadUrl, "_blank");
   };
 
   const onDelete = () => {

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

@@ -1,16 +1,10 @@
-import { Alert, Loading, Table } from "react-daisyui";
+import { Table } from "react-daisyui";
 import { useBrowseObjects } from "./hooks";
 import { dayjs, readableBytes } from "@/lib/utils";
 import mime from "mime/lite";
 import { Object } from "./types";
 import { API_URL } from "@/lib/api";
-import {
+import { FileArchive, FileIcon, FileType, Folder } from "lucide-react";
-  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";
@@ -22,17 +16,14 @@ type Props = {
 
 const ObjectList = ({ prefix, onPrefixChange }: Props) => {
   const { bucketName } = useBucketContext();
-  const { data, error, isLoading } = useBrowseObjects(bucketName, {
+  const { data } = useBrowseObjects(bucketName, { prefix, limit: 1000 });
-    prefix,
-    limit: 1000,
-  });
 
   const onObjectClick = (object: Object) => {
-    window.open(API_URL + object.url + "?view=1", "_blank");
+    window.open(API_URL + object.viewUrl, "_blank");
   };
 
   return (
-    <div className="overflow-x-auto min-h-[400px]">
+    <div className="overflow-x-auto overflow-y-hidden">
       <Table>
         <Table.Head>
           <span>Name</span>
@@ -41,29 +32,13 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
         </Table.Head>
 
         <Table.Body>
-          {isLoading ? (
+          {!data?.prefixes?.length && !data?.objects?.length && (
             <tr>
-              <td colSpan={3}>
+              <td className="text-center py-8" 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
@@ -84,7 +59,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
                 </span>
               </td>
               <td colSpan={2} />
-              <ObjectActions object={{ objectKey: prefix, url: "" }} />
+              <ObjectActions object={{ objectKey: prefix, downloadUrl: "" }} />
             </tr>
           ))}
 
@@ -121,9 +96,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
                 <ObjectActions
                   prefix={data.prefix}
                   object={object}
-                  end={
+                  end={idx >= data.objects.length - 2}
-                    idx >= data.objects.length - 2 && data.objects.length > 5
-                  }
                 />
               </tr>
             );
@@ -152,10 +125,9 @@ const FilePreview = ({ ext, object }: FilePreviewProps) => {
   }
 
   if (type === "image") {
-    const thumbnailSupport = ["jpg", "jpeg", "png", "gif"].includes(ext || "");
     return (
       <img
-        src={API_URL + object.url + (thumbnailSupport ? "?thumb=1" : "?view=1")}
+        src={API_URL + object.viewUrl}
         alt={object.objectKey}
         className="size-5 object-cover overflow-hidden mr-2"
       />

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

@@ -15,7 +15,8 @@ export type Object = {
   objectKey: string;
   lastModified: Date;
   size: number;
-  url: string;
+  viewUrl: string;
+  downloadUrl: string;
 };
 
 export type PutObjectPayload = {

src/pages/buckets/manage/page.tsx

@@ -2,18 +2,12 @@ import { useParams } from "react-router-dom";
 import { useBucket } from "./hooks";
 import Page from "@/context/page-context";
 import TabView, { Tab } from "@/components/containers/tab-view";
-import {
+import { ChartLine, FolderSearch, LockKeyhole } from "lucide-react";
-  ChartLine,
-  CircleXIcon,
-  FolderSearch,
-  LockKeyhole,
-} from "lucide-react";
 import OverviewTab from "./overview/overview-tab";
 import PermissionsTab from "./permissions/permissions-tab";
 import MenuButton from "./components/menu-button";
 import BrowseTab from "./browse/browse-tab";
 import { BucketContext } from "./context";
-import { Alert, Loading } from "react-daisyui";
 
 const tabs: Tab[] = [
   {
@@ -38,40 +32,26 @@ const tabs: Tab[] = [
 
 const ManageBucketPage = () => {
   const { id } = useParams();
-  const { data, error, isLoading, refetch } = useBucket(id);
+  const { data, refetch } = useBucket(id);
 
   const name = data?.globalAliases[0];
 
   return (
-    <>
+    <div className="container">
       <Page
         title={name || "Manage Bucket"}
         prev="/buckets"
         actions={data ? <MenuButton /> : undefined}
       />
 
-      {isLoading && (
-        <div className="h-full flex items-center justify-center">
-          <Loading size="lg" />
-        </div>
-      )}
-
-      {error != null && (
-        <Alert status="error" icon={<CircleXIcon />}>
-          <span>{error.message}</span>
-        </Alert>
-      )}
-
       {data && (
-        <div className="container">
+        <BucketContext.Provider
-          <BucketContext.Provider
+          value={{ bucket: data, refetch, bucketName: name || "" }}
-            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>
-          </BucketContext.Provider>
-        </div>
       )}
-    </>
+    </div>
   );
 };
 

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

@@ -84,7 +84,7 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
         Allow Key
       </Button>
 
-      <Modal ref={dialogRef} backdrop open={isOpen} className="max-w-2xl">
+      <Modal ref={dialogRef} backdrop open={isOpen}>
         <Modal.Header className="mb-1">Allow Key</Modal.Header>
         <Modal.Body>
           <p>Enter the key you want to allow access to.</p>
@@ -100,7 +100,6 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
                   />
                   Key
                 </label>
-                <label>Local Aliases</label>
                 <label className="flex items-center gap-2 cursor-pointer">
                   <Checkbox
                     color="primary"
@@ -130,31 +129,23 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
               <Table.Body>
                 {!keyFields.length ? (
                   <tr>
-                    <td colSpan={5} className="text-center">
+                    <td colSpan={4} className="text-center">
                       No keys found
                     </td>
                   </tr>
                 ) : null}
-                {keyFields.map((field, index) => {
+                {keyFields.map((field, index) => (
-                  const curKey = bucket.keys.find(
+                  <Table.Row key={field.id}>
-                    (key) => key.accessKeyId === field.keyId
+                    <CheckboxField
-                  );
+                      form={form}
-                  return (
+                      name={`keys.${index}.checked`}
-                    <Table.Row key={field.id}>
+                      label={field.name || field.keyId?.substring(0, 8)}
-                      <CheckboxField
+                    />
-                        form={form}
+                    <CheckboxField form={form} name={`keys.${index}.read`} />
-                        name={`keys.${index}.checked`}
+                    <CheckboxField form={form} name={`keys.${index}.write`} />
-                        label={field.name || field.keyId?.substring(0, 8)}
+                    <CheckboxField form={form} name={`keys.${index}.owner`} />
-                      />
+                  </Table.Row>
-                      <span>
+                ))}
-                        {curKey?.bucketLocalAliases?.join(", ") || "-"}
-                      </span>
-                      <CheckboxField form={form} name={`keys.${index}.read`} />
-                      <CheckboxField form={form} name={`keys.${index}.write`} />
-                      <CheckboxField form={form} name={`keys.${index}.owner`} />
-                    </Table.Row>
-                  );
-                })}
               </Table.Body>
             </Table>
           </div>

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

@@ -50,7 +50,6 @@ const PermissionsTab = () => {
             <Table.Head>
               <span>#</span>
               <span>Key</span>
-              <span>Aliases</span>
               <span>Read</span>
               <span>Write</span>
               <span>Owner</span>
@@ -62,7 +61,6 @@ const PermissionsTab = () => {
                 <Table.Row>
                   <span>{idx + 1}</span>
                   <span>{key.name || key.accessKeyId?.substring(0, 8)}</span>
-                  <span>{key.bucketLocalAliases?.join(", ") || "-"}</span>
                   <span>
                     <Checkbox
                       checked={key.permissions?.read}

src/pages/buckets/page.tsx

@@ -10,27 +10,20 @@ const BucketsPage = () => {
   const [search, setSearch] = useState("");
 
   const items = useMemo(() => {
-    let buckets =
+    let buckets = data || [];
-      data?.map((bucket) => {
-        return {
-          ...bucket,
-          aliases: [
-            ...(bucket.globalAliases || []),
-            ...(bucket.localAliases?.map((l) => l.alias) || []),
-          ],
-        };
-      }) || [];
 
     if (search?.length > 0) {
       const q = search.toLowerCase();
       buckets = buckets.filter(
         (bucket) =>
           bucket.id.includes(q) ||
-          bucket.aliases.find((alias) => alias.includes(q))
+          bucket.globalAliases.find((alias) => alias.includes(q))
       );
     }
 
-    buckets = buckets.sort((a, b) => a.aliases[0].localeCompare(b.aliases[0]));
+    buckets = buckets.sort((a, b) =>
+      a.globalAliases[0].localeCompare(b.globalAliases[0])
+    );
 
     return buckets;
   }, [data, search]);

src/pages/buckets/types.ts

@@ -5,7 +5,6 @@ export type GetBucketRes = Bucket[];
 export type Bucket = {
   id: string;
   globalAliases: string[];
-  localAliases: LocalAlias[];
   websiteAccess: boolean;
   websiteConfig?: WebsiteConfig | null;
   keys: Key[];
@@ -18,16 +17,11 @@ export type Bucket = {
   quotas: Quotas;
 };
 
-export type LocalAlias = {
-  accessKeyId: string;
-  alias: string;
-};
-
 export type Key = {
   accessKeyId: string;
   name: string;
   permissions: Permissions;
-  bucketLocalAliases: string[];
+  bucketLocalAliases: any[];
 };
 
 export type Permissions = {

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

@@ -66,8 +66,7 @@ const AssignNodeDialog = () => {
   }, [data]);
 
   const zoneList = useMemo(() => {
-    const nodes = cluster?.nodes || cluster?.knownNodes || [];
+    const list = cluster?.nodes
-    const list = nodes
       .flatMap((i) => {
         const role = layout?.roles.find((role) => role.id === i.id);
         const staged = layout?.stagedRoleChanges.find(
@@ -84,8 +83,7 @@ const AssignNodeDialog = () => {
   }, [cluster, layout]);
 
   const tagsList = useMemo(() => {
-    const nodes = cluster?.nodes || cluster?.knownNodes || [];
+    const list = cluster?.nodes
-    const list = nodes
       .flatMap((i) => {
         const role = layout?.roles.find((role) => role.id === i.id);
         const staged = layout?.stagedRoleChanges.find(

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

@@ -268,9 +268,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
 
                 <Dropdown
                   end
-                  vertical={
+                  vertical={idx >= items.length - 2 ? "top" : "bottom"}
-                    idx > 2 && idx >= items.length - 2 ? "top" : "bottom"
-                  }
                 >
                   <Dropdown.Toggle button={false}>
                     <Button shape="circle" color="ghost">

src/pages/cluster/page.tsx

@@ -2,22 +2,9 @@ import Page from "@/context/page-context";
 import { useClusterStatus } from "./hooks";
 import { Card } from "react-daisyui";
 import NodesList from "./components/nodes-list";
-import { useMemo } from "react";
 
 const ClusterPage = () => {
   const { data } = useClusterStatus();
-  const nodes = useMemo(() => {
-    if (!data) return [];
-
-    if (Array.isArray(data.knownNodes)) {
-      return data.knownNodes.map((node) => ({
-        ...node,
-        role: data.layout?.roles.find((role) => role.id === node.id),
-      }));
-    }
-
-    return data.nodes || [];
-  }, [data]);
 
   return (
     <div className="container">
@@ -31,10 +18,7 @@ const ClusterPage = () => {
           <DetailItem title="Version" value={data?.garageVersion} />
           {/* <DetailItem title="Rust version" value={data?.rustVersion} /> */}
           <DetailItem title="DB engine" value={data?.dbEngine} />
-          <DetailItem
+          <DetailItem title="Layout version" value={data?.layoutVersion} />
-            title="Layout version"
-            value={data?.layoutVersion || data?.layout?.version}
-          />
         </Card.Body>
       </Card>
 
@@ -42,7 +26,7 @@ const ClusterPage = () => {
         <Card.Body>
           <Card.Title>Nodes</Card.Title>
 
-          <NodesList nodes={nodes} />
+          <NodesList nodes={data?.nodes || []} />
         </Card.Body>
       </Card>
     </div>

src/pages/cluster/types.ts

@@ -7,9 +7,7 @@ export type GetStatusResult = {
   rustVersion: string;
   dbEngine: string;
   layoutVersion: number;
-  nodes?: Node[];
+  nodes: Node[];
-  knownNodes?: Node[];
-  layout?: GetClusterLayoutResult;
 };
 
 export type Node = {
@@ -19,9 +17,9 @@ export type Node = {
   hostname: string;
   isUp: boolean;
   lastSeenSecsAgo: number | null;
-  draining?: boolean;
+  draining: boolean;
-  dataPartition?: DataPartition;
+  dataPartition: DataPartition;
-  metadataPartition?: DataPartition;
+  metadataPartition: DataPartition;
 };
 
 export type DataPartition = {

src/pages/terminal/page.tsx

@@ -0,0 +1,42 @@
+import Page from "@/context/page-context";
+import { useEffect, useRef } from "react";
+import { Terminal } from "@xterm/xterm";
+import { AttachAddon } from "@xterm/addon-attach";
+import "@xterm/xterm/css/xterm.css";
+
+const WS_URL = "ws://" + location.host + "/ws";
+
+const TerminalPage = () => {
+  const terminalContainerRef = useRef<HTMLDivElement | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    const container = terminalContainerRef.current;
+    if (!container || wsRef.current) {
+      return;
+    }
+
+    const url = WS_URL + "/terminal";
+    const ws = new WebSocket(url);
+    wsRef.current = ws;
+
+    const term = new Terminal();
+    const attachAddon = new AttachAddon(ws);
+    term.loadAddon(attachAddon);
+    term.open(container);
+
+    // return () => {
+    //   term.dispose();
+    //   ws.close();
+    // };
+  }, []);
+
+  return (
+    <div className="container">
+      <Page title="Terminal" />
+      <div ref={terminalContainerRef}></div>
+    </div>
+  );
+};
+
+export default TerminalPage;

vite.config.ts

@@ -19,6 +19,10 @@ export default defineConfig(({ mode }) => {
           target: process.env.VITE_API_URL,
           changeOrigin: true,
         },
+        "/ws": {
+          target: process.env.VITE_API_URL?.replace("http", "ws"),
+          ws: true,
+        },
       },
     },
   };