diff --git a/src/pages/buckets/hooks.ts b/src/pages/buckets/hooks.ts index 958f4af..587201e 100644 --- a/src/pages/buckets/hooks.ts +++ b/src/pages/buckets/hooks.ts @@ -3,6 +3,7 @@ import { useMutation, UseMutationOptions, useQuery, + useQueries, } from "@tanstack/react-query"; import { GetBucketRes, Bucket } from "./types"; import { CreateBucketSchema } from "./schema"; @@ -22,6 +23,18 @@ export const useBucketDetails = (id?: string | null) => { }); }; +export const useBucketsWithDetails = () => { + const { data: buckets } = useBuckets(); + + return useQueries({ + queries: (buckets || []).map((bucket) => ({ + queryKey: ["bucket-details", bucket.id], + queryFn: () => api.get("/v2/GetBucketInfo", { params: { id: bucket.id } }), + enabled: !!bucket.id, + })), + }); +}; + export const useCreateBucket = ( options?: UseMutationOptions ) => { diff --git a/src/pages/home/page.tsx b/src/pages/home/page.tsx index e1d04d2..54d469e 100644 --- a/src/pages/home/page.tsx +++ b/src/pages/home/page.tsx @@ -13,16 +13,19 @@ import { PieChart, } from "lucide-react"; import { cn, readableBytes, ucfirst } from "@/lib/utils"; -import { useBuckets } from "../buckets/hooks"; +import { useBucketsWithDetails } from "../buckets/hooks"; import { useMemo } from "react"; const HomePage = () => { const { data: health } = useNodesHealth(); - const { data: buckets } = useBuckets(); + const bucketDetailsQueries = useBucketsWithDetails(); const totalUsage = useMemo(() => { - return buckets?.reduce((acc, bucket) => acc + bucket.bytes, 0); - }, [buckets]); + return bucketDetailsQueries + .map(query => query.data?.bytes) + .filter(bytes => bytes != null) + .reduce((acc, bytes) => acc + bytes, 0); + }, [bucketDetailsQueries]); return (
@@ -38,8 +41,8 @@ const HomePage = () => { health?.status === "healthy" ? "text-success" : health?.status === "degraded" - ? "text-warning" - : "text-error" + ? "text-warning" + : "text-error" )} />