refactor(dashboard): merge Needs Backup into Problems filter

- Removed redundant 'Needs Backup' toggle from filter bar
- Problems filter already includes backup issues (stale, critical, never)
- Reduces UI clutter while preserving functionality
- Also includes user's lint fixes for Backups tests
This commit is contained in:
rcourtman
2025-12-26 11:13:41 +00:00
parent 89d861fe92
commit 1185294174
2 changed files with 2 additions and 45 deletions
@@ -200,7 +200,6 @@ interface DashboardProps {
type ViewMode = 'all' | 'vm' | 'lxc';
type StatusMode = 'all' | 'running' | 'degraded' | 'stopped';
type BackupMode = 'all' | 'needs-backup';
type GroupingMode = 'grouped' | 'flat';
type ProblemsMode = 'all' | 'problems';
@@ -243,11 +242,6 @@ export function Dashboard(props: DashboardProps) {
: 'all',
});
// Backup filter mode - filter by backup status
const [backupMode, setBackupMode] = usePersistentSignal<BackupMode>('dashboardBackupMode', 'all', {
deserialize: (raw) => (raw === 'all' || raw === 'needs-backup' ? raw : 'all'),
});
// Grouping mode - grouped by node or flat list
const [groupingMode, setGroupingMode] = usePersistentSignal<GroupingMode>(
'dashboardGroupingMode',
@@ -576,7 +570,6 @@ export function Dashboard(props: DashboardProps) {
selectedNode() !== null ||
viewMode() !== 'all' ||
statusMode() !== 'all' ||
backupMode() !== 'all' ||
problemsMode() !== 'all';
if (hasActiveFilters) {
@@ -588,7 +581,6 @@ export function Dashboard(props: DashboardProps) {
setSelectedNode(null);
setViewMode('all');
setStatusMode('all');
setBackupMode('all');
setProblemsMode('all');
// Blur the search input if it's focused
@@ -688,18 +680,7 @@ export function Dashboard(props: DashboardProps) {
guests = guests.filter((g) => g.status !== 'running');
}
// Filter by backup status
if (backupMode() === 'needs-backup') {
guests = guests.filter((g) => {
// Skip templates - they don't need backups
if (g.template) return false;
const backupInfo = getBackupInfo(g.lastBackup, alertsActivation.getBackupThresholds());
// Show guests that need backup: stale, critical, or never backed up
return backupInfo.status === 'stale' || backupInfo.status === 'critical' || backupInfo.status === 'never';
});
}
// Filter by problems mode - show guests that need attention
// Filter by problems mode - show guests that need attention (includes backup issues)
if (problemsMode() === 'problems') {
guests = guests.filter((g) => {
// Skip templates
@@ -981,8 +962,6 @@ export function Dashboard(props: DashboardProps) {
setViewMode={setViewMode}
statusMode={statusMode}
setStatusMode={setStatusMode}
backupMode={backupMode}
setBackupMode={setBackupMode}
problemsMode={problemsMode}
setProblemsMode={setProblemsMode}
filteredProblemGuests={problemGuests}
@@ -17,8 +17,6 @@ interface DashboardFilterProps {
setViewMode: (value: 'all' | 'vm' | 'lxc') => void;
statusMode: () => 'all' | 'running' | 'degraded' | 'stopped';
setStatusMode: (value: 'all' | 'running' | 'degraded' | 'stopped') => void;
backupMode: () => 'all' | 'needs-backup';
setBackupMode: (value: 'all' | 'needs-backup') => void;
problemsMode: () => 'all' | 'problems';
setProblemsMode: (value: 'all' | 'problems') => void;
/** Guests that match the problems filter - used for AI investigation */
@@ -428,26 +426,8 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
</div>
{/* End Primary Filters Group */}
{/* Secondary Controls Group: Backup, Grouping, View, Columns, Reset */}
{/* Secondary Controls Group: Grouping, View, Columns, Reset */}
<div class="flex flex-wrap items-center gap-2">
{/* Backup Filter */}
<button
type="button"
onClick={() => props.setBackupMode(props.backupMode() === 'needs-backup' ? 'all' : 'needs-backup')}
class={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-all duration-150 active:scale-95 ${props.backupMode() === 'needs-backup'
? 'bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 shadow-sm ring-1 ring-orange-200 dark:ring-orange-800'
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-600'
}`}
title="Show guests with stale or missing backups"
>
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
<path d="M12 8v4M12 16h.01" />
</svg>
Needs Backup
</button>
<div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
{/* Grouping Mode Toggle */}
<div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
@@ -512,7 +492,6 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
props.search().trim() !== '' ||
props.viewMode() !== 'all' ||
props.statusMode() !== 'all' ||
props.backupMode() !== 'all' ||
props.problemsMode() !== 'all' ||
props.groupingMode() !== 'grouped'
}>
@@ -524,7 +503,6 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
props.setSortDirection('asc');
props.setViewMode('all');
props.setStatusMode('all');
props.setBackupMode('all');
props.setProblemsMode('all');
props.setGroupingMode('grouped');
}}