3 Commits
20 changed files with 74 additions and 256 deletions
+2 -2
View File
@@ -31,7 +31,7 @@ If you install Garage using Docker, you can install this web UI alongside Garage
```yml
services:
garage:
image: dxflrs/garage:v1.0.0
image: dxflrs/garage:v1.0.1
container_name: garage
volumes:
- ./garage.toml:/etc/garage.toml
@@ -55,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.2/garage-webui-v1.0.2-linux-amd64
$ wget -O garage-webui https://github.com/khairul169/garage-webui/releases/download/1.0.4/garage-webui-v1.0.4-linux-amd64
$ chmod +x garage-webui
$ sudo cp garage-webui /usr/local/bin
```
-2
View File
@@ -20,6 +20,4 @@ require (
github.com/aws/aws-sdk-go-v2/service/internal/checksum v1.3.18 // indirect
github.com/aws/aws-sdk-go-v2/service/internal/presigned-url v1.11.18 // indirect
github.com/aws/aws-sdk-go-v2/service/internal/s3shared v1.17.16 // indirect
github.com/coder/websocket v1.8.12 // indirect
golang.org/x/net v0.28.0 // indirect
)
-4
View File
@@ -22,8 +22,6 @@ 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=
@@ -42,8 +40,6 @@ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
golang.org/x/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=
-2
View File
@@ -20,8 +20,6 @@ func main() {
}
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")
+4 -3
View File
@@ -34,13 +34,14 @@ func (b *Buckets) GetAll(w http.ResponseWriter, r *http.Request) {
return
}
var bucket schema.Bucket
if err := json.Unmarshal(body, &bucket); err != nil {
var data schema.Bucket
if err := json.Unmarshal(body, &data); err != nil {
ch <- schema.Bucket{ID: bucket.ID, GlobalAliases: bucket.GlobalAliases}
return
}
ch <- bucket
data.LocalAliases = bucket.LocalAliases
ch <- data
}()
}
+1 -11
View File
@@ -1,8 +1,6 @@
package router
import (
"net/http"
)
import "net/http"
func HandleApiRouter() *http.ServeMux {
router := http.NewServeMux()
@@ -23,11 +21,3 @@ func HandleApiRouter() *http.ServeMux {
return router
}
func HandleWebsocket() *http.ServeMux {
router := http.NewServeMux()
router.HandleFunc("/terminal", TerminalHandler)
return router
}
-114
View File
@@ -1,114 +0,0 @@
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)
}
+8 -2
View File
@@ -3,12 +3,13 @@ package schema
type GetBucketsRes struct {
ID string `json:"id"`
GlobalAliases []string `json:"globalAliases"`
LocalAliases []string `json:"localAliases"`
LocalAliases []LocalAlias `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"`
@@ -21,11 +22,16 @@ type Bucket struct {
Quotas Quotas `json:"quotas"`
}
type LocalAlias struct {
AccessKeyID string `json:"accessKeyId"`
Alias string `json:"alias"`
}
type KeyElement struct {
AccessKeyID string `json:"accessKeyId"`
Name string `json:"name"`
Permissions Permissions `json:"permissions"`
BucketLocalAliases []interface{} `json:"bucketLocalAliases"`
BucketLocalAliases []string `json:"bucketLocalAliases"`
SecretAccessKey string `json:"secretAccessKey"`
}
-6
View File
@@ -1,12 +1,6 @@
package schema
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"`
RPCPublicAddr string `json:"rpc_public_addr" toml:"rpc_public_addr"`
RPCSecret string `json:"rpc_secret" toml:"rpc_secret"`
+1 -3
View File
@@ -1,7 +1,7 @@
{
"name": "garage-webui",
"private": true,
"version": "1.0.2",
"version": "1.0.4",
"type": "module",
"scripts": {
"dev:client": "vite",
@@ -14,8 +14,6 @@
"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",
-20
View File
@@ -14,12 +14,6 @@ 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
@@ -681,14 +675,6 @@ 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:
@@ -2238,12 +2224,6 @@ 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
-5
View File
@@ -8,7 +8,6 @@ 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([
{
@@ -38,10 +37,6 @@ const router = createBrowserRouter([
path: "keys",
Component: KeysPage,
},
{
path: "terminal",
Component: TerminalPage,
},
],
},
]);
-2
View File
@@ -5,7 +5,6 @@ import {
KeySquare,
LayoutDashboard,
Palette,
SquareTerminal,
} from "lucide-react";
import { Dropdown, Menu } from "react-daisyui";
import { Link, useLocation } from "react-router-dom";
@@ -19,7 +18,6 @@ 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 = () => {
+2 -2
View File
@@ -4,7 +4,7 @@ import { readableBytes } from "@/lib/utils";
import Button from "@/components/ui/button";
type Props = {
data: Bucket;
data: Bucket & { aliases: string[] };
};
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.globalAliases?.join(", ")}
{data.aliases?.join(", ")}
</p>
</div>
@@ -84,7 +84,7 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
Allow Key
</Button>
<Modal ref={dialogRef} backdrop open={isOpen}>
<Modal ref={dialogRef} backdrop open={isOpen} className="max-w-2xl">
<Modal.Header className="mb-1">Allow Key</Modal.Header>
<Modal.Body>
<p>Enter the key you want to allow access to.</p>
@@ -100,6 +100,7 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
/>
Key
</label>
<label>Local Aliases</label>
<label className="flex items-center gap-2 cursor-pointer">
<Checkbox
color="primary"
@@ -129,23 +130,31 @@ const AllowKeyDialog = ({ currentKeys }: Props) => {
<Table.Body>
{!keyFields.length ? (
<tr>
<td colSpan={4} className="text-center">
<td colSpan={5} className="text-center">
No keys found
</td>
</tr>
) : 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}>
<CheckboxField
form={form}
name={`keys.${index}.checked`}
label={field.name || field.keyId?.substring(0, 8)}
/>
<span>
{curKey?.bucketLocalAliases?.join(", ") || "-"}
</span>
<CheckboxField form={form} name={`keys.${index}.read`} />
<CheckboxField form={form} name={`keys.${index}.write`} />
<CheckboxField form={form} name={`keys.${index}.owner`} />
</Table.Row>
))}
);
})}
</Table.Body>
</Table>
</div>
@@ -50,6 +50,7 @@ const PermissionsTab = () => {
<Table.Head>
<span>#</span>
<span>Key</span>
<span>Aliases</span>
<span>Read</span>
<span>Write</span>
<span>Owner</span>
@@ -61,6 +62,7 @@ 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}
+12 -5
View File
@@ -10,20 +10,27 @@ const BucketsPage = () => {
const [search, setSearch] = useState("");
const items = useMemo(() => {
let buckets = data || [];
let buckets =
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.globalAliases.find((alias) => alias.includes(q))
bucket.aliases.find((alias) => alias.includes(q))
);
}
buckets = buckets.sort((a, b) =>
a.globalAliases[0].localeCompare(b.globalAliases[0])
);
buckets = buckets.sort((a, b) => a.aliases[0].localeCompare(b.aliases[0]));
return buckets;
}, [data, search]);
+7 -1
View File
@@ -5,6 +5,7 @@ export type GetBucketRes = Bucket[];
export type Bucket = {
id: string;
globalAliases: string[];
localAliases: LocalAlias[];
websiteAccess: boolean;
websiteConfig?: WebsiteConfig | null;
keys: Key[];
@@ -17,11 +18,16 @@ export type Bucket = {
quotas: Quotas;
};
export type LocalAlias = {
accessKeyId: string;
alias: string;
};
export type Key = {
accessKeyId: string;
name: string;
permissions: Permissions;
bucketLocalAliases: any[];
bucketLocalAliases: string[];
};
export type Permissions = {
-42
View File
@@ -1,42 +0,0 @@
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;
-4
View File
@@ -19,10 +19,6 @@ export default defineConfig(({ mode }) => {
target: process.env.VITE_API_URL,
changeOrigin: true,
},
"/ws": {
target: process.env.VITE_API_URL?.replace("http", "ws"),
ws: true,
},
},
},
};