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

feat: update to garage v2 api endpoint

Browse Source
This commit is contained in:
Khairul Hidayat 2025-09-01 09:23:44 +00:00
parent 90a1018235
commit 72411c7f97
14 changed files with 80 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -31,7 +31,7 @@ If you install Garage using Docker, you can install this web UI alongside Garage
```yml
services:
garage:
image: dxflrs/garage:v1.0.1
image: dxflrs/garage:v2.0.0
container_name: garage
volumes:
- ./garage.toml:/etc/garage.toml

4
backend/router/browse.go
View File

@ -292,7 +292,7 @@ func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
return cacheData.(aws.CredentialsProvider), nil
}
body, err := utils.Garage.Fetch("/v1/bucket?globalAlias="+bucket, &utils.FetchOptions{})
body, err := utils.Garage.Fetch("/v2/GetBucketInfo?globalAlias="+bucket, &utils.FetchOptions{})
if err != nil {
return nil, err
}
@ -309,7 +309,7 @@ func getBucketCredentials(bucket string) (aws.CredentialsProvider, error) {
continue
}
body, err := utils.Garage.Fetch(fmt.Sprintf("/v1/key?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
body, err := utils.Garage.Fetch(fmt.Sprintf("/v2/GetKeyInfo?id=%s&showSecretKey=true", k.AccessKeyID), &utils.FetchOptions{})
if err != nil {
return nil, err
}

4
backend/router/buckets.go
View File

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

2
backend/schema/bucket.go
View File

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

3
docker-compose.yml
View File

@ -1,6 +1,6 @@
services:
garage:
image: dxflrs/garage:v1.0.1
image: dxflrs/garage:v2.0.0
container_name: garage
volumes:
- ./garage.toml:/etc/garage.toml
@ -24,4 +24,3 @@ services:
environment:
API_BASE_URL: "http://garage:3903"
S3_ENDPOINT_URL: "http://garage:3900"

3
src/app/app.tsx
View File

@ -8,6 +8,9 @@ import "./styles.css";
const App = () => {
const [queryClient] = useState(() => new QueryClient());
const [test, setTest] = useState();
console.log({test});
return (
<PageContextProvider>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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