From 93aff683ec4ad735f7ac1826bbf2ec913cf07118 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 19 Aug 2025 17:48:21 +0000
Subject: [PATCH] fix: restore Storage and Backups tab functionality for
 PBS-only setups

- Storage tab now shows PBS storage even without PVE nodes
- Backups tab now shows PBS backups even without PVE nodes
- Empty state message only shows when truly no nodes are configured
- Both tabs remain functional for PBS-only deployments
---
 .../src/components/Backups/UnifiedBackups.tsx | 16 ++++++------
 .../src/components/Storage/Storage.tsx        | 25 +++++--------------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index d5b7c157c..2737c6c35 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -736,15 +736,15 @@ const UnifiedBackups: Component = () => {
 
   return (
     <div class="space-y-4">
-      {/* Empty State - No PVE Nodes Configured */}
-      <Show when={!isLoading() && (state.nodes || []).filter((n: any) => n.type === 'pve').length === 0}>
+      {/* Empty State - No nodes at all configured */}
+      <Show when={!isLoading() && (state.nodes || []).length === 0 && (!state.pbs || state.pbs.length === 0)}>
         <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
           <div class="text-center">
             <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
             </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No Proxmox VE nodes configured</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE node in the Settings tab to start monitoring your infrastructure.</p>
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No backup sources configured</h3>
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE or PBS node in the Settings tab to start monitoring backups.</p>
             <button
               onClick={() => {
                 const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
@@ -758,8 +758,8 @@ const UnifiedBackups: Component = () => {
         </div>
       </Show>
       
-      {/* PBS Status Summary */}
-      <Show when={state.pbs && state.pbs.length > 0 && (state.nodes || []).filter((n: any) => n.type === 'pve').length > 0}>
+      {/* PBS Status Summary - show regardless of PVE nodes */}
+      <Show when={state.pbs && state.pbs.length > 0}>
         <div class="flex flex-wrap gap-2">
           <For each={state.pbs}>
             {(instance) => (
@@ -798,8 +798,8 @@ const UnifiedBackups: Component = () => {
         </div>
       </Show>
 
-      {/* Main Content - Only show when PVE nodes are configured */}
-      <Show when={(state.nodes || []).filter((n: any) => n.type === 'pve').length > 0}>
+      {/* Main Content - show when any nodes or PBS are configured */}
+      <Show when={(state.nodes || []).length > 0 || (state.pbs && state.pbs.length > 0)}>
       {/* Backup Frequency Chart */}
       <div class="p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
         <div class="flex justify-between items-center mb-3">
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 02614b239..150766715 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -302,15 +302,15 @@ const Storage: Component = () => {
         </div>
       </Show>
 
-      {/* Empty State - No PVE Nodes Configured */}
-      <Show when={connected() && initialDataReceived() && (state.nodes || []).filter((n: any) => n.type === 'pve').length === 0}>
+      {/* Helpful hint for no PVE nodes but still show content */}
+      <Show when={connected() && initialDataReceived() && (state.nodes || []).filter((n: any) => n.type === 'pve').length === 0 && sortedStorage().length === 0}>
         <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
           <div class="text-center">
             <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
             </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No Proxmox VE nodes configured</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE node in the Settings tab to start monitoring your infrastructure.</p>
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No storage configured</h3>
+            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE or PBS node in the Settings tab to start monitoring storage.</p>
             <button
               onClick={() => {
                 const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
@@ -324,21 +324,8 @@ const Storage: Component = () => {
         </div>
       </Show>
       
-      {/* Empty State - No Storage Found (but nodes are configured) */}
-      <Show when={connected() && initialDataReceived() && (state.nodes || []).filter((n: any) => n.type === 'pve').length > 0 && sortedStorage().length === 0}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No storage found</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400">No storage repositories are configured or visible.</p>
-          </div>
-        </div>
-      </Show>
-      
-      {/* Storage Table */}
-      <Show when={connected() && initialDataReceived() && (state.nodes || []).filter((n: any) => n.type === 'pve').length > 0 && sortedStorage().length > 0}>
+      {/* Storage Table - shows for both PVE and PBS storage */}
+      <Show when={connected() && initialDataReceived() && sortedStorage().length > 0}>
         <ComponentErrorBoundary name="Storage Table">
           <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded overflow-x-auto">
             <table class="w-full text-xs">