Refresh Pools Button

Issue

UI tidak update secara otomatis setelah create atau destroy pool. User meminta tombol refresh pools untuk manual refresh.

Solution

Menambahkan tombol "Refresh Pools" yang melakukan refetch pools dari database, dan memperbaiki createPoolMutation untuk melakukan refetch dengan benar.

Changes Made

1. Added Refresh Pools Button

File: frontend/src/pages/Storage.tsx (line 446-459)

Menambahkan tombol baru di antara "Rescan Disks" dan "Create Pool":

<button
  onClick={async () => {
    await queryClient.invalidateQueries({ queryKey: ['storage', 'zfs', 'pools'] })
    await queryClient.refetchQueries({ queryKey: ['storage', 'zfs', 'pools'] })
  }}
  disabled={poolsLoading}
  className="flex items-center gap-2 px-4 py-2 rounded-lg border border-border-dark bg-card-dark text-white text-sm font-bold hover:bg-[#233648] transition-colors disabled:opacity-50"
  title="Refresh pools list from database"
>
  <span className={`material-symbols-outlined text-[20px] ${poolsLoading ? 'animate-spin' : ''}`}>
    sync
  </span>
  {poolsLoading ? 'Refreshing...' : 'Refresh Pools'}
</button>

Features:

Icon sync dengan animasi spin saat loading
Disabled saat pools sedang loading
Tooltip: "Refresh pools list from database"
Styling konsisten dengan tombol lainnya

2. Fixed createPoolMutation

File: frontend/src/pages/Storage.tsx (line 219-239)

Memperbaiki createPoolMutation untuk melakukan refetch dengan await:

onSuccess: async () => {
  // Invalidate and immediately refetch pools
  await queryClient.invalidateQueries({ queryKey: ['storage', 'zfs', 'pools'] })
  await queryClient.refetchQueries({ queryKey: ['storage', 'zfs', 'pools'] })
  await queryClient.invalidateQueries({ queryKey: ['storage', 'disks'] })
  // ... rest of the code
  alert('Pool created successfully!')
}

Improvements:

Menambahkan await pada refetchQueries untuk memastikan refetch selesai
Menambahkan success alert untuk feedback ke user

Button Layout

Sekarang ada 3 tombol di header:

Rescan Disks - Rescan physical disks dari sistem
Refresh Pools - Refresh pools list dari database (NEW)
Create Pool - Create new ZFS pool

Usage

User dapat klik tombol "Refresh Pools" kapan saja untuk:

Manual refresh setelah create pool
Manual refresh setelah destroy pool
Manual refresh jika auto-refresh (3 detik) tidak cukup cepat

Testing

Create pool → Klik "Refresh Pools" → Pool muncul
Destroy pool → Klik "Refresh Pools" → Pool hilang
Auto-refresh tetap berjalan setiap 3 detik

Status

✅ COMPLETED - Tombol Refresh Pools ditambahkan dan createPoolMutation diperbaiki

Date

2026-01-09

2.7 KiB Raw Blame History