Fix: Pool-Größe aus zpool list statt aus Dataset-Summen

Size/Allocated/Free/Fragmentation kommen jetzt direkt aus den Pool-Daten
(zpool list) statt aus aufsummierten Dataset-Werten, die zu Doppelzählung
führten. Pools werden parallel zu Datasets geladen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/app/datasets/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { api, Dataset, SambaShare, NfsShare } from "@/lib/api"
+import { api, Dataset, SambaShare, NfsShare, Pool } from "@/lib/api"
 import { Header } from "@/components/Header"
 import { Button } from "@/components/ui/button"
 import { Dialog } from "@/components/ui/dialog"
@@ -13,6 +13,7 @@ import { Badge } from "@/components/ui/badge"
 export default function DatasetsPage() {
   const [tab, setTab] = useState<"datasets" | "shares">("datasets")
   const [datasets, setDatasets] = useState<Dataset[]>([])
+  const [pools, setPools] = useState<Pool[]>([])
   const [sambaShares, setSambaShares] = useState<SambaShare[]>([])
   const [nfsShares, setNfsShares] = useState<NfsShare[]>([])
   const [loading, setLoading] = useState(true)
@@ -50,14 +51,16 @@ export default function DatasetsPage() {
   const loadData = async () => {
     setLoading(true)
     try {
-      const [ds, samba, nfs] = await Promise.all([
+      const [ds, samba, nfs, poolData] = await Promise.all([
         api.getDatasets(),
         api.getSambaShares(),
         api.getNfsShares(),
+        api.getPools().catch(() => ({ pools: [] })),
       ])
       setDatasets(ds)
       setSambaShares(samba)
       setNfsShares(nfs)
+      setPools((poolData as { pools: Pool[] }).pools || [])
     } catch (err) {
       console.error("Failed to load data:", err)
     } finally {
@@ -339,6 +342,7 @@ export default function DatasetsPage() {
 
             {getTopLevelDatasets().map((pool) => {
               const stats = getPoolStats(pool.name)
+              const poolInfo = pools.find((p) => p.name === pool.name)
               const currentPoolTab = poolTabs.get(pool.name) || "filesystems"
               const childDatasets = getChildDatasets(pool.name)
 
@@ -363,19 +367,19 @@ export default function DatasetsPage() {
                     <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
                       <div>
                         <p className="text-xs text-muted-foreground">Size</p>
-                        <p className="font-bold">{formatBytes(stats.totalSize)}</p>
+                        <p className="font-bold">{formatBytes(poolInfo?.size || 0)}</p>
                       </div>
                       <div>
                         <p className="text-xs text-muted-foreground">Allocated</p>
-                        <p className="font-bold">{formatBytes(stats.totalUsed)}</p>
+                        <p className="font-bold">{formatBytes(poolInfo?.alloc || 0)}</p>
                       </div>
                       <div>
                         <p className="text-xs text-muted-foreground">Free</p>
-                        <p className="font-bold">{formatBytes(stats.totalAvail)}</p>
+                        <p className="font-bold">{formatBytes(poolInfo?.free || 0)}</p>
                       </div>
                       <div>
                         <p className="text-xs text-muted-foreground">Fragmentation</p>
-                        <p className="font-bold">0%</p>
+                        <p className="font-bold">{poolInfo?.fragmentation || "0%"}</p>
                       </div>
                       <div>
                         <p className="text-xs text-muted-foreground">Usage</p>
@@ -384,21 +388,20 @@ export default function DatasetsPage() {
                     </div>
 
                     {/* Usage Bar */}
-                    <div className="space-y-1">
-                      <div className="flex h-6 bg-muted rounded overflow-hidden">
-                        <div
-                          className="bg-blue-500"
-                          style={{ width: `${stats.usagePercent}%` }}
-                        />
-                        <div
-                          className="bg-green-500"
-                          style={{ width: `${100 - stats.usagePercent}%` }}
-                        />
-                      </div>
-                      <p className="text-xs text-muted-foreground text-center">
-                        {stats.usagePercent.toFixed(2)}% Allocated • {(100 - stats.usagePercent).toFixed(2)}% Free
-                      </p>
-                    </div>
+                    {(() => {
+                      const pct = poolInfo?.size ? (poolInfo.alloc / poolInfo.size) * 100 : 0
+                      return (
+                        <div className="space-y-1">
+                          <div className="flex h-6 bg-muted rounded overflow-hidden">
+                            <div className="bg-blue-500" style={{ width: `${pct}%` }} />
+                            <div className="bg-green-500" style={{ width: `${100 - pct}%` }} />
+                          </div>
+                          <p className="text-xs text-muted-foreground text-center">
+                            {pct.toFixed(2)}% Allocated • {(100 - pct).toFixed(2)}% Free
+                          </p>
+                        </div>
+                      )
+                    })()}
                   </CardHeader>
 
                   {/* Tabs */}