Implement status bars for Storage, Backups, and Hosts tabs #744
This commit is contained in:
courtmanr@gmail.com
parent
68ffa1bc0b
commit
0c7af34ad2
8 changed files with 768 additions and 648 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
|||
4.32.4
|
||||
4.32.5
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ interface BackupsFilterProps {
|
|||
setSortDirection: (value: 'asc' | 'desc') => void;
|
||||
sortOptions?: { value: string; label: string }[];
|
||||
onReset?: () => void;
|
||||
statusFilter?: () => 'all' | 'verified' | 'unverified';
|
||||
setStatusFilter?: (value: 'all' | 'verified' | 'unverified') => void;
|
||||
}
|
||||
|
||||
export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
||||
|
|
@ -305,8 +307,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode('all')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'all'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'all'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -316,8 +317,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode(props.viewMode() === 'snapshot' ? 'all' : 'snapshot')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'snapshot'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'snapshot'
|
||||
? 'bg-white dark:bg-gray-800 text-yellow-600 dark:text-yellow-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -327,8 +327,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode(props.viewMode() === 'pve' ? 'all' : 'pve')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'pve'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'pve'
|
||||
? 'bg-white dark:bg-gray-800 text-orange-600 dark:text-orange-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -338,8 +337,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode(props.viewMode() === 'pbs' ? 'all' : 'pbs')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'pbs'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'pbs'
|
||||
? 'bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -363,8 +361,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setTypeFilter!('all')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.typeFilter!() === 'all'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'all'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -374,8 +371,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setTypeFilter!(props.typeFilter!() === 'VM' ? 'all' : 'VM')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.typeFilter!() === 'VM'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'VM'
|
||||
? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -385,8 +381,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setTypeFilter!(props.typeFilter!() === 'LXC' ? 'all' : 'LXC')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.typeFilter!() === 'LXC'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'LXC'
|
||||
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -396,8 +391,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setTypeFilter!(props.typeFilter!() === 'Host' ? 'all' : 'Host')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.typeFilter!() === 'Host'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'Host'
|
||||
? 'bg-white dark:bg-gray-800 text-orange-600 dark:text-orange-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -413,8 +407,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setGroupBy('date')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.groupBy() === 'date'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy() === 'date'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -424,8 +417,7 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setGroupBy(props.groupBy() === 'guest' ? 'date' : 'guest')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.groupBy() === 'guest'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy() === 'guest'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -476,6 +468,42 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
|
||||
<div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusFilter && props.setStatusFilter('all')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'all'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusFilter && props.setStatusFilter('verified')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'verified'
|
||||
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
Verified
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusFilter && props.setStatusFilter('unverified')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'unverified'
|
||||
? 'bg-white dark:bg-gray-800 text-amber-600 dark:text-amber-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
Unverified
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
|
||||
|
||||
{/* Reset Button */}
|
||||
<button
|
||||
onClick={() => {
|
||||
|
|
@ -485,16 +513,17 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
|
|||
props.setSearch('');
|
||||
props.setViewMode('all');
|
||||
props.setGroupBy('date');
|
||||
if (props.setStatusFilter) props.setStatusFilter('all');
|
||||
}
|
||||
}}
|
||||
title="Reset all filters"
|
||||
class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
|
||||
props.search().trim() !== '' ||
|
||||
class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${props.search().trim() !== '' ||
|
||||
props.viewMode() !== 'all' ||
|
||||
props.groupBy() !== 'date' ||
|
||||
props.sortKey() !== 'backupTime' ||
|
||||
props.sortDirection() !== 'desc' ||
|
||||
(props.typeFilter && props.typeFilter() !== 'all')
|
||||
(props.typeFilter && props.typeFilter() !== 'all') ||
|
||||
(props.statusFilter && props.statusFilter() !== 'all')
|
||||
? 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-900/70'
|
||||
: 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ const UnifiedBackups: Component = () => {
|
|||
const [selectedNode, setSelectedNode] = createSignal<string | null>(null);
|
||||
const [typeFilter, setTypeFilter] = createSignal<'all' | FilterableGuestType>('all');
|
||||
const [backupTypeFilter, setBackupTypeFilter] = createSignal<'all' | BackupType>('all');
|
||||
const [statusFilter, setStatusFilter] = createSignal<'all' | 'verified' | 'unverified'>('all');
|
||||
const [groupByMode, setGroupByMode] = createSignal<'date' | 'guest'>('date');
|
||||
|
||||
// Convert between UI filter and internal filter for BackupsFilter component
|
||||
|
|
@ -429,6 +430,7 @@ const UnifiedBackups: Component = () => {
|
|||
const search = searchTerm().toLowerCase();
|
||||
const type = typeFilter();
|
||||
const backupType = backupTypeFilter();
|
||||
const status = statusFilter();
|
||||
const dateRange = selectedDateRange();
|
||||
const nodeFilter = selectedNode();
|
||||
|
||||
|
|
@ -533,6 +535,15 @@ const UnifiedBackups: Component = () => {
|
|||
data = data.filter((item) => item.backupType === backupType);
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (status !== 'all') {
|
||||
data = data.filter((item) => {
|
||||
if (status === 'verified') return item.verified === true;
|
||||
if (status === 'unverified') return item.verified === false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
// Sort
|
||||
const key = sortKey();
|
||||
const dir = sortDirection();
|
||||
|
|
@ -734,6 +745,7 @@ const UnifiedBackups: Component = () => {
|
|||
setIsSearchLocked(false);
|
||||
setTypeFilter('all');
|
||||
setBackupTypeFilter('all');
|
||||
setStatusFilter('all');
|
||||
setGroupByMode('date');
|
||||
setSortKey('backupTime');
|
||||
setSortDirection('desc');
|
||||
|
|
@ -764,6 +776,7 @@ const UnifiedBackups: Component = () => {
|
|||
selectedNode() ||
|
||||
typeFilter() !== 'all' ||
|
||||
backupTypeFilter() !== 'all' ||
|
||||
statusFilter() !== 'all' ||
|
||||
selectedDateRange() !== null ||
|
||||
sortKey() !== 'backupTime' ||
|
||||
sortDirection() !== 'desc'
|
||||
|
|
@ -1149,8 +1162,7 @@ const UnifiedBackups: Component = () => {
|
|||
|
||||
return (
|
||||
<tr
|
||||
class={`hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer transition-colors ${
|
||||
isSelected() ? 'bg-blue-50 dark:bg-blue-900/20' : ''
|
||||
class={`hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer transition-colors ${isSelected() ? 'bg-blue-50 dark:bg-blue-900/20' : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
const currentSearch = searchTerm();
|
||||
|
|
@ -1199,8 +1211,7 @@ const UnifiedBackups: Component = () => {
|
|||
<td class="p-0.5 px-1.5 whitespace-nowrap">
|
||||
<div class="flex items-center gap-1">
|
||||
<span
|
||||
class={`h-2 w-2 rounded-full ${
|
||||
isOnline() ? 'bg-green-500' : 'bg-red-500'
|
||||
class={`h-2 w-2 rounded-full ${isOnline() ? 'bg-green-500' : 'bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">
|
||||
|
|
@ -1341,8 +1352,7 @@ const UnifiedBackups: Component = () => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setChartTimeRange(7)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
|
||||
chartTimeRange() === 7
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 7
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
|
|
@ -1352,8 +1362,7 @@ const UnifiedBackups: Component = () => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setChartTimeRange(30)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
|
||||
chartTimeRange() === 30
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 30
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
|
|
@ -1363,8 +1372,7 @@ const UnifiedBackups: Component = () => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setChartTimeRange(90)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
|
||||
chartTimeRange() === 90
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 90
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
|
|
@ -1374,8 +1382,7 @@ const UnifiedBackups: Component = () => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setChartTimeRange(365)}
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
|
||||
chartTimeRange() === 365
|
||||
class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 365
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
|
||||
: 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
|
|
@ -1695,8 +1702,7 @@ const UnifiedBackups: Component = () => {
|
|||
let tooltipText = `${formattedDate}`;
|
||||
|
||||
if (d.total > 0) {
|
||||
tooltipText += `\nAvailable: ${d.total} backup${
|
||||
d.total > 1 ? 's' : ''
|
||||
tooltipText += `\nAvailable: ${d.total} backup${d.total > 1 ? 's' : ''
|
||||
}`;
|
||||
|
||||
const breakdown: string[] = [];
|
||||
|
|
@ -1846,6 +1852,8 @@ const UnifiedBackups: Component = () => {
|
|||
searchInputRef={(el) => (searchInputRef = el)}
|
||||
typeFilter={typeFilter}
|
||||
setTypeFilter={setTypeFilter}
|
||||
statusFilter={statusFilter}
|
||||
setStatusFilter={setStatusFilter}
|
||||
hasHostBackups={hasHostBackups}
|
||||
sortOptions={sortKeyOptions}
|
||||
sortKey={sortKey}
|
||||
|
|
@ -1945,8 +1953,7 @@ const UnifiedBackups: Component = () => {
|
|||
<div class="flex items-center justify-between gap-2 mb-1">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<span
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0 ${
|
||||
item.type === 'VM'
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0 ${item.type === 'VM'
|
||||
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||
: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
}`}
|
||||
|
|
@ -1960,8 +1967,7 @@ const UnifiedBackups: Component = () => {
|
|||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<span
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${
|
||||
item.backupType === 'snapshot'
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${item.backupType === 'snapshot'
|
||||
? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
|
||||
: item.backupType === 'local'
|
||||
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||
|
|
@ -2157,8 +2163,7 @@ const UnifiedBackups: Component = () => {
|
|||
<td class="p-0.5 pl-5 pr-1.5 text-sm align-middle">{item.vmid}</td>
|
||||
<td class="p-0.5 px-1.5 align-middle">
|
||||
<span
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
|
||||
item.type === 'VM'
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.type === 'VM'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
|
||||
: item.type === 'Host'
|
||||
? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300'
|
||||
|
|
@ -2196,8 +2201,7 @@ const UnifiedBackups: Component = () => {
|
|||
<td class="p-0.5 px-1.5 align-middle">
|
||||
<div class="flex items-center gap-1">
|
||||
<span
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
|
||||
item.backupType === 'snapshot'
|
||||
class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.backupType === 'snapshot'
|
||||
? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-300'
|
||||
: item.backupType === 'local'
|
||||
? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300'
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ interface DashboardProps {
|
|||
}
|
||||
|
||||
type ViewMode = 'all' | 'vm' | 'lxc';
|
||||
type StatusMode = 'all' | 'running' | 'stopped';
|
||||
type StatusMode = 'all' | 'running' | 'degraded' | 'stopped';
|
||||
type GroupingMode = 'grouped' | 'flat';
|
||||
|
||||
export function Dashboard(props: DashboardProps) {
|
||||
|
|
@ -232,7 +232,9 @@ export function Dashboard(props: DashboardProps) {
|
|||
|
||||
const [statusMode, setStatusMode] = usePersistentSignal<StatusMode>('dashboardStatusMode', 'all', {
|
||||
deserialize: (raw) =>
|
||||
raw === 'all' || raw === 'running' || raw === 'stopped' ? raw : ('all' as StatusMode),
|
||||
raw === 'all' || raw === 'running' || raw === 'degraded' || raw === 'stopped'
|
||||
? (raw as StatusMode)
|
||||
: 'all',
|
||||
});
|
||||
|
||||
// Grouping mode - grouped by node or flat list
|
||||
|
|
@ -487,6 +489,14 @@ export function Dashboard(props: DashboardProps) {
|
|||
// Filter by status
|
||||
if (statusMode() === 'running') {
|
||||
guests = guests.filter((g) => g.status === 'running');
|
||||
} else if (statusMode() === 'degraded') {
|
||||
guests = guests.filter((g) => {
|
||||
const status = (g.status || '').toLowerCase();
|
||||
return (
|
||||
DEGRADED_HEALTH_STATUSES.has(status) ||
|
||||
(status !== 'running' && !OFFLINE_HEALTH_STATUSES.has(status))
|
||||
);
|
||||
});
|
||||
} else if (statusMode() === 'stopped') {
|
||||
guests = guests.filter((g) => g.status !== 'running');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ interface DashboardFilterProps {
|
|||
isSearchLocked: () => boolean;
|
||||
viewMode: () => 'all' | 'vm' | 'lxc';
|
||||
setViewMode: (value: 'all' | 'vm' | 'lxc') => void;
|
||||
statusMode: () => 'all' | 'running' | 'stopped';
|
||||
setStatusMode: (value: 'all' | 'running' | 'stopped') => void;
|
||||
statusMode: () => 'all' | 'running' | 'degraded' | 'stopped';
|
||||
setStatusMode: (value: 'all' | 'running' | 'degraded' | 'stopped') => void;
|
||||
groupingMode: () => 'grouped' | 'flat';
|
||||
setGroupingMode: (value: 'grouped' | 'flat') => void;
|
||||
setSortKey: (value: string) => void;
|
||||
|
|
@ -292,8 +292,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode('all')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'all'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'all'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -303,8 +302,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode(props.viewMode() === 'vm' ? 'all' : 'vm')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'vm'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'vm'
|
||||
? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -314,8 +312,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setViewMode(props.viewMode() === 'lxc' ? 'all' : 'lxc')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.viewMode() === 'lxc'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'lxc'
|
||||
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -331,8 +328,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusMode('all')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.statusMode() === 'all'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'all'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -342,19 +338,27 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusMode(props.statusMode() === 'running' ? 'all' : 'running')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.statusMode() === 'running'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'running'
|
||||
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
Running
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusMode(props.statusMode() === 'degraded' ? 'all' : 'degraded')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'degraded'
|
||||
? 'bg-white dark:bg-gray-800 text-amber-600 dark:text-amber-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
Degraded
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusMode(props.statusMode() === 'stopped' ? 'all' : 'stopped')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.statusMode() === 'stopped'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'stopped'
|
||||
? 'bg-white dark:bg-gray-800 text-red-600 dark:text-red-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -370,8 +374,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setGroupingMode('grouped')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.groupingMode() === 'grouped'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupingMode() === 'grouped'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -382,8 +385,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setGroupingMode(props.groupingMode() === 'flat' ? 'grouped' : 'flat')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.groupingMode() === 'flat'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupingMode() === 'flat'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -411,8 +413,7 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
|
|||
props.setGroupingMode('grouped');
|
||||
}}
|
||||
title="Reset all filters"
|
||||
class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
|
||||
props.search() ||
|
||||
class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${props.search() ||
|
||||
props.viewMode() !== 'all' ||
|
||||
props.statusMode() !== 'all' ||
|
||||
props.groupingMode() !== 'grouped'
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ export interface DockerSummaryStats {
|
|||
containers: {
|
||||
total: number;
|
||||
running: number;
|
||||
degraded: number;
|
||||
stopped: number;
|
||||
error: number;
|
||||
};
|
||||
|
|
@ -123,6 +124,7 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
|
|||
// Container stats
|
||||
let totalContainers = 0;
|
||||
let runningContainers = 0;
|
||||
let degradedContainers = 0;
|
||||
let stoppedContainers = 0;
|
||||
let errorContainers = 0;
|
||||
|
||||
|
|
@ -144,8 +146,15 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
|
|||
|
||||
containers.forEach(container => {
|
||||
const state = container.state?.toLowerCase();
|
||||
const health = container.health?.toLowerCase();
|
||||
|
||||
if (state === 'running') {
|
||||
if (health === 'unhealthy') {
|
||||
degradedContainers++;
|
||||
} else {
|
||||
runningContainers++;
|
||||
}
|
||||
|
||||
// Sum CPU/Memory for running containers
|
||||
if (typeof container.cpuPercent === 'number' && !Number.isNaN(container.cpuPercent)) {
|
||||
totalCpu += container.cpuPercent;
|
||||
|
|
@ -187,6 +196,7 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
|
|||
containers: {
|
||||
total: totalContainers,
|
||||
running: runningContainers,
|
||||
degraded: degradedContainers,
|
||||
stopped: stoppedContainers,
|
||||
error: errorContainers,
|
||||
},
|
||||
|
|
@ -305,6 +315,16 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
|
|||
isActive={isActive('container-state', 'running')}
|
||||
/>
|
||||
|
||||
<Show when={summary().containers.degraded > 0}>
|
||||
<StatCard
|
||||
label="Degraded"
|
||||
value={summary().containers.degraded}
|
||||
variant="warning"
|
||||
onClick={() => props.onFilterChange?.({ type: 'container-state', value: 'degraded' })}
|
||||
isActive={isActive('container-state', 'degraded')}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={summary().containers.stopped > 0}>
|
||||
<StatCard
|
||||
label="Stopped"
|
||||
|
|
|
|||
|
|
@ -49,6 +49,14 @@ const Storage: Component = () => {
|
|||
deserialize: (raw) => (raw === 'desc' ? 'desc' : 'asc'),
|
||||
},
|
||||
);
|
||||
const [statusFilter, setStatusFilter] = usePersistentSignal<'all' | 'available' | 'offline'>(
|
||||
'storageStatusFilter',
|
||||
'all',
|
||||
{
|
||||
deserialize: (raw) =>
|
||||
raw === 'all' || raw === 'available' || raw === 'offline' ? raw : 'all',
|
||||
},
|
||||
);
|
||||
|
||||
// Create a mapping from node instance ID to node object
|
||||
const nodeByInstance = createMemo(() => {
|
||||
|
|
@ -316,6 +324,18 @@ const Storage: Component = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Apply status filter
|
||||
if (statusFilter() !== 'all') {
|
||||
storage = storage.filter((s) => {
|
||||
if (statusFilter() === 'available') {
|
||||
return s.status === 'available';
|
||||
} else {
|
||||
// Offline includes anything not available
|
||||
return s.status !== 'available';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Apply search filter
|
||||
let search = searchTerm().toLowerCase().trim();
|
||||
if (search) {
|
||||
|
|
@ -477,6 +497,7 @@ const Storage: Component = () => {
|
|||
setViewMode('node');
|
||||
setSortKey('name');
|
||||
setSortDirection('asc');
|
||||
setStatusFilter('all');
|
||||
};
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
|
|
@ -495,7 +516,12 @@ const Storage: Component = () => {
|
|||
// Escape key behavior
|
||||
if (e.key === 'Escape') {
|
||||
// Clear search and reset filters
|
||||
if (searchTerm().trim() || selectedNode() || viewMode() !== 'node') {
|
||||
if (
|
||||
searchTerm().trim() ||
|
||||
selectedNode() ||
|
||||
viewMode() !== 'node' ||
|
||||
statusFilter() !== 'all'
|
||||
) {
|
||||
resetFilters();
|
||||
|
||||
// Blur the search input if it's focused
|
||||
|
|
@ -539,8 +565,7 @@ const Storage: Component = () => {
|
|||
<button
|
||||
onClick={() => setTabView('pools')}
|
||||
type="button"
|
||||
class={`inline-flex items-center px-2 sm:px-3 py-1 text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${
|
||||
tabView() === 'pools'
|
||||
class={`inline-flex items-center px-2 sm:px-3 py-1 text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${tabView() === 'pools'
|
||||
? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
|
||||
: 'hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
|
||||
}`}
|
||||
|
|
@ -550,8 +575,7 @@ const Storage: Component = () => {
|
|||
<button
|
||||
onClick={() => setTabView('disks')}
|
||||
type="button"
|
||||
class={`inline-flex items-center px-2 sm:px-3 py-1 text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${
|
||||
tabView() === 'disks'
|
||||
class={`inline-flex items-center px-2 sm:px-3 py-1 text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${tabView() === 'disks'
|
||||
? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
|
||||
: 'hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
|
||||
}`}
|
||||
|
|
@ -573,6 +597,8 @@ const Storage: Component = () => {
|
|||
setSortKey={setSortKey}
|
||||
sortDirection={sortDirection}
|
||||
setSortDirection={setSortDirection}
|
||||
statusFilter={statusFilter}
|
||||
setStatusFilter={setStatusFilter}
|
||||
searchInputRef={(el) => (searchInputRef = el)}
|
||||
/>
|
||||
</Show>
|
||||
|
|
@ -1025,8 +1051,7 @@ const Storage: Component = () => {
|
|||
<td class={`${firstCellClass()} align-middle`}>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span
|
||||
class={`text-sm font-medium text-gray-900 dark:text-gray-100 truncate ${
|
||||
canExpand() ? 'max-w-[180px]' : 'max-w-[200px]'
|
||||
class={`text-sm font-medium text-gray-900 dark:text-gray-100 truncate ${canExpand() ? 'max-w-[180px]' : 'max-w-[200px]'
|
||||
}`}
|
||||
title={storage.name}
|
||||
>
|
||||
|
|
@ -1035,8 +1060,7 @@ const Storage: Component = () => {
|
|||
{/* ZFS Health Badge */}
|
||||
<Show when={zfsPool && zfsPool.state !== 'ONLINE'}>
|
||||
<span
|
||||
class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
|
||||
zfsPool?.state === 'DEGRADED'
|
||||
class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${zfsPool?.state === 'DEGRADED'
|
||||
? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
|
||||
: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
|
||||
}`}
|
||||
|
|
@ -1100,8 +1124,7 @@ const Storage: Component = () => {
|
|||
</td>
|
||||
<td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
|
||||
<span
|
||||
class={`${
|
||||
storage.status === 'available'
|
||||
class={`${storage.status === 'available'
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: 'text-red-600 dark:text-red-400'
|
||||
}`}
|
||||
|
|
@ -1142,16 +1165,14 @@ const Storage: Component = () => {
|
|||
</tr>
|
||||
<Show when={isCephStorage() && isExpanded()}>
|
||||
<tr
|
||||
class={`text-[11px] border-t border-gray-200 dark:border-gray-700 ${
|
||||
drawerDisabled()
|
||||
class={`text-[11px] border-t border-gray-200 dark:border-gray-700 ${drawerDisabled()
|
||||
? 'bg-gray-100/70 text-gray-400 dark:bg-gray-900/30 dark:text-gray-500'
|
||||
: 'bg-gray-50/60 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<td colSpan={9} class="px-4 py-3">
|
||||
<div
|
||||
class={`grid gap-3 md:grid-cols-2 xl:grid-cols-2 ${
|
||||
drawerDisabled() ? 'opacity-60 pointer-events-none' : ''
|
||||
class={`grid gap-3 md:grid-cols-2 xl:grid-cols-2 ${drawerDisabled() ? 'opacity-60 pointer-events-none' : ''
|
||||
}`}
|
||||
>
|
||||
<div class="rounded-lg border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-600/60 dark:bg-gray-900/30">
|
||||
|
|
@ -1211,8 +1232,7 @@ const Storage: Component = () => {
|
|||
ZFS Pool Status:
|
||||
</span>
|
||||
<span
|
||||
class={`px-1.5 py-0.5 rounded text-xs font-medium ${
|
||||
storage.zfsPool!.state === 'ONLINE'
|
||||
class={`px-1.5 py-0.5 rounded text-xs font-medium ${storage.zfsPool!.state === 'ONLINE'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
|
||||
: storage.zfsPool!.state === 'DEGRADED'
|
||||
? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ interface StorageFilterProps {
|
|||
setSortDirection: (value: 'asc' | 'desc') => void;
|
||||
sortOptions?: { value: string; label: string }[];
|
||||
searchInputRef?: (el: HTMLInputElement) => void;
|
||||
statusFilter?: () => 'all' | 'available' | 'offline';
|
||||
setStatusFilter?: (value: 'all' | 'available' | 'offline') => void;
|
||||
}
|
||||
|
||||
export const StorageFilter: Component<StorageFilterProps> = (props) => {
|
||||
|
|
@ -299,8 +301,7 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setGroupBy!('node')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.groupBy!() === 'node'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy!() === 'node'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -310,8 +311,7 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => props.setGroupBy!(props.groupBy!() === 'storage' ? 'node' : 'storage')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
||||
props.groupBy!() === 'storage'
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy!() === 'storage'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
|
|
@ -322,6 +322,41 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
|
|||
<div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
|
||||
</Show>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusFilter && props.setStatusFilter('all')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'all'
|
||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusFilter && props.setStatusFilter('available')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'available'
|
||||
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
Available
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => props.setStatusFilter && props.setStatusFilter('offline')}
|
||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'offline'
|
||||
? 'bg-white dark:bg-gray-800 text-red-600 dark:text-red-400 shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||
}`}
|
||||
>
|
||||
Offline
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
|
||||
|
||||
{/* Sort controls */}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
|
|
@ -368,13 +403,14 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
|
|||
props.setSortKey('name');
|
||||
props.setSortDirection('asc');
|
||||
if (props.setGroupBy) props.setGroupBy('node');
|
||||
if (props.setStatusFilter) props.setStatusFilter('all');
|
||||
}}
|
||||
title="Reset all filters"
|
||||
class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
|
||||
props.search().trim() !== '' ||
|
||||
class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${props.search().trim() !== '' ||
|
||||
props.sortKey() !== 'name' ||
|
||||
props.sortDirection() !== 'asc' ||
|
||||
(props.groupBy && props.groupBy!() !== 'node')
|
||||
(props.groupBy && props.groupBy!() !== 'node') ||
|
||||
(props.statusFilter && props.statusFilter!() !== 'all')
|
||||
? 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-900/70'
|
||||
: 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
|
|
|
|||
Loading…
Reference in a new issue