othman.suseno/calypso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix storage

Browse Source
This commit is contained in:
othman hendy suseno
2026-01-09 16:54:39 +00:00
parent dcb54c26ec
commit 7b91e0fd24
37 changed files with 3283 additions and 1227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/pages/Storage.tsx
View File

@@ -154,6 +154,7 @@ export default function StoragePage() {
const [showCreateDatasetModal, setShowCreateDatasetModal] = useState(false)
const [selectedPoolForDataset, setSelectedPoolForDataset] = useState<ZFSPool | null>(null)
const [selectedSpareDisks, setSelectedSpareDisks] = useState<string[]>([])
const [isRefreshingPools, setIsRefreshingPools] = useState(false)
const [datasetForm, setDatasetForm] = useState({
name: '',
type: 'filesystem' as 'filesystem' | 'volume',
@@ -218,9 +219,11 @@ export default function StoragePage() {
const createPoolMutation = useMutation({
mutationFn: zfsApi.createPool,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['storage', 'zfs', 'pools'] })
queryClient.invalidateQueries({ queryKey: ['storage', 'disks'] })
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'] })
setShowCreateModal(false)
setCreateForm({
name: '',
@@ -231,6 +234,7 @@ export default function StoragePage() {
deduplication: false,
auto_expand: false,
})
alert('Pool created successfully!')
},
onError: (error: any) => {
console.error('Failed to create pool:', error)
@@ -259,8 +263,8 @@ export default function StoragePage() {
onSuccess: async () => {
// Invalidate and immediately refetch
await queryClient.invalidateQueries({ queryKey: ['storage', 'zfs', 'pools'] })
queryClient.refetchQueries({ queryKey: ['storage', 'zfs', 'pools'] })
queryClient.invalidateQueries({ queryKey: ['storage', 'disks'] })
await queryClient.refetchQueries({ queryKey: ['storage', 'zfs', 'pools'] })
await queryClient.invalidateQueries({ queryKey: ['storage', 'disks'] })
setSelectedPool(null)
alert('Pool destroyed successfully!')
},
@@ -440,6 +444,31 @@ export default function StoragePage() {
</span>
{syncDisksMutation.isPending ? 'Rescanning...' : 'Rescan Disks'}
</button>
<button
onClick={async () => {
setIsRefreshingPools(true)
try {
await queryClient.invalidateQueries({ queryKey: ['storage', 'zfs', 'pools'] })
await queryClient.refetchQueries({ queryKey: ['storage', 'zfs', 'pools'] })
// Small delay to show feedback
await new Promise(resolve => setTimeout(resolve, 300))
alert('Pools refreshed successfully!')
} catch (error) {
console.error('Failed to refresh pools:', error)
alert('Failed to refresh pools. Please try again.')
} finally {
setIsRefreshingPools(false)
}
}}
disabled={poolsLoading || isRefreshingPools}
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 disabled:cursor-not-allowed"
title="Refresh pools list from database"
>
<span className={`material-symbols-outlined text-[20px] ${(poolsLoading || isRefreshingPools) ? 'animate-spin' : ''}`}>
sync
</span>
{(poolsLoading || isRefreshingPools) ? 'Refreshing...' : 'Refresh Pools'}
</button>
<button
onClick={() => setShowCreateModal(true)}
className="relative flex items-center gap-2 px-4 py-2 rounded-lg border border-primary/30 bg-card-dark text-white text-sm font-bold hover:bg-[#233648] transition-all overflow-hidden electric-glow electric-glow-border"