79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
# 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":
|
|
```typescript
|
|
<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`:
|
|
```typescript
|
|
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:
|
|
1. **Rescan Disks** - Rescan physical disks dari sistem
|
|
2. **Refresh Pools** - Refresh pools list dari database (NEW)
|
|
3. **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
|
|
1. Create pool → Klik "Refresh Pools" → Pool muncul
|
|
2. Destroy pool → Klik "Refresh Pools" → Pool hilang
|
|
3. Auto-refresh tetap berjalan setiap 3 detik
|
|
|
|
## Status
|
|
✅ **COMPLETED** - Tombol Refresh Pools ditambahkan dan createPoolMutation diperbaiki
|
|
|
|
## Date
|
|
2026-01-09
|