diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx index 419b88739..1d591816a 100644 --- a/frontend-modern/src/components/Storage/Storage.tsx +++ b/frontend-modern/src/components/Storage/Storage.tsx @@ -18,6 +18,8 @@ import { getNodeDisplayName } from '@/utils/nodes'; import { usePersistentSignal } from '@/hooks/usePersistentSignal'; import { useDebouncedValue } from '@/hooks/useDebouncedValue'; import { useAlertsActivation } from '@/stores/alertsActivation'; +import { useColumnVisibility, type ColumnDef } from '@/hooks/useColumnVisibility'; +import { STORAGE_KEYS } from '@/utils/localStorage'; type StorageSortKey = 'name' | 'node' | 'type' | 'status' | 'usage' | 'free' | 'total'; @@ -61,6 +63,24 @@ const Storage: Component = () => { }, ); + // Column definitions for storage table + const STORAGE_COLUMNS: ColumnDef[] = [ + { id: 'type', label: 'Type', priority: 3 }, + { id: 'content', label: 'Content', priority: 4 }, + { id: 'status', label: 'Status', priority: 2 }, + { id: 'shared', label: 'Shared', priority: 5, hiddenByDefault: true }, + { id: 'free', label: 'Free', priority: 4 }, + { id: 'total', label: 'Total', priority: 3 }, + ]; + + // Column visibility management + const columnVisibility = useColumnVisibility( + STORAGE_COLUMNS, + STORAGE_KEYS.STORAGE_HIDDEN_COLUMNS + ); + + const isColumnVisible = (id: string) => !columnVisibility.isHiddenByUser(id); + // PERFORMANCE: Debounce search term to prevent jank during rapid typing const debouncedSearchTerm = useDebouncedValue(() => searchTerm(), 200); @@ -601,6 +621,7 @@ const Storage: Component = () => { statusFilter={statusFilter} setStatusFilter={setStatusFilter} searchInputRef={(el) => (searchInputRef = el)} + columnVisibility={columnVisibility} /> @@ -794,16 +815,22 @@ const Storage: Component = () => { Storage - - Type - - - Content - - - Status - - + + + Type + + + + + Content + + + + + Status + + + Shared @@ -811,12 +838,16 @@ const Storage: Component = () => { Usage - - Free - - - Total - + + + Free + + + + + Total + + @@ -1154,30 +1185,36 @@ const Storage: Component = () => { - - - {storage.type} - - - - - {storage.content || '-'} - - - - - {storage.status || 'unknown'} - - - + + + + {storage.type} + + + + + + + {storage.content || '-'} + + + + + + + {storage.status || 'unknown'} + + + + {storage.shared ? '✓' : '-'} @@ -1193,12 +1230,16 @@ const Storage: Component = () => { zfsPool={storage.zfsPool} /> - - {formatBytes(storage.free || 0, 0)} - - - {formatBytes(storage.total || 0, 0)} - + + + {formatBytes(storage.free || 0, 0)} + + + + + {formatBytes(storage.total || 0, 0)} + + diff --git a/frontend-modern/src/components/Storage/StorageFilter.tsx b/frontend-modern/src/components/Storage/StorageFilter.tsx index c9fe946e7..f4f374798 100644 --- a/frontend-modern/src/components/Storage/StorageFilter.tsx +++ b/frontend-modern/src/components/Storage/StorageFilter.tsx @@ -1,6 +1,8 @@ import { Component, Show, For, createSignal, onMount, createEffect, onCleanup } from 'solid-js'; import { Card } from '@/components/shared/Card'; import { SearchTipsPopover } from '@/components/shared/SearchTipsPopover'; +import { ColumnPicker } from '@/components/shared/ColumnPicker'; +import type { ColumnDef } from '@/hooks/useColumnVisibility'; import { STORAGE_KEYS } from '@/utils/localStorage'; import { createSearchHistoryManager } from '@/utils/searchHistory'; @@ -17,6 +19,13 @@ interface StorageFilterProps { searchInputRef?: (el: HTMLInputElement) => void; statusFilter?: () => 'all' | 'available' | 'offline'; setStatusFilter?: (value: 'all' | 'available' | 'offline') => void; + // Column visibility (optional) + columnVisibility?: { + availableToggles: () => ColumnDef[]; + isHiddenByUser: (id: string) => boolean; + toggle: (id: string) => void; + resetToDefaults: () => void; + }; } export const StorageFilter: Component = (props) => { @@ -387,6 +396,17 @@ export const StorageFilter: Component = (props) => { + {/* Column Picker */} + + + + + {/* Reset Button - Only show when filters are active */} diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx index 3933fb877..8b7d54195 100644 --- a/frontend-modern/src/pages/Alerts.tsx +++ b/frontend-modern/src/pages/Alerts.tsx @@ -2661,7 +2661,8 @@ function OverviewTab(props: { {/* Sub-tabs for AI Insights vs Active Alerts */} - + {/* Show tabs when patrol is enabled OR when there are legacy findings to clear */} + 0}>