mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-10-12 15:28:12 +00:00
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:
@@ -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');
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user