Add DEMO MODE indicator when running with mock data

frontend/src/App.jsx

@@ -10,7 +10,9 @@ import {
   Tooltip, 
   alpha,
   Button,
-  Link
+  Link,
+  Chip,
+  Alert
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
@@ -44,15 +46,29 @@ function AppContent() {
     };
   }, []);
   
+  // Make sure localStorage has the mock data flags set correctly
+  useEffect(() => {
+    // Set localStorage items to indicate mock data mode is enabled
+    localStorage.setItem('use_mock_data', 'true');
+    localStorage.setItem('MOCK_DATA_ENABLED', 'true');
+    console.log('Mock data mode enabled via localStorage');
+  }, []);
+  
   const { 
     nodeData, 
     guestData, 
-    isConnected
+    isConnected,
+    isMockData
   } = useSocket();
   const theme = useTheme();
   
   // Check if we're in development mode
-  const isDevelopment = process.env.NODE_ENV === 'development' || import.meta.env.DEV;
+  const isDevelopment = import.meta.env.DEV;
+  
+  // Check if mock data is enabled - using both localStorage values and socket status
+  const isMockDataEnabled = isMockData || 
+                          localStorage.getItem('use_mock_data') === 'true' || 
+                          localStorage.getItem('MOCK_DATA_ENABLED') === 'true';
   
   // Initialize storage and check for environment changes
   useEffect(() => {
@@ -84,6 +100,10 @@ function AppContent() {
     };
   }, []);
   
+  // We'll force DEMO MODE to be visible in development mode
+  // This ensures the indicator is always shown during development
+  const forceShowDemoMode = true;
+  
   // If there's an error, show an error message
   if (hasError) {
     return (
@@ -129,6 +149,23 @@ function AppContent() {
         document.activeElement?.blur();
       }
     }}>
+      {/* DEMO MODE Banner - Always visible in development mode */}
+      {(isMockDataEnabled || forceShowDemoMode) && (
+        <Alert 
+          severity="warning" 
+          variant="standard"
+          sx={{ 
+            borderRadius: 0,
+            justifyContent: 'center', 
+            fontWeight: 'medium',
+            py: 0.5,
+            fontSize: '0.875rem'
+          }}
+        >
+          DEMO MODE - Viewing simulated data. To view real Proxmox data, disable mock data in your .env file.
+        </Alert>
+      )}
+      
       <AppBar position="static" color="primary" elevation={0}>
         <Toolbar sx={{ px: { xs: 2, sm: 3 } }}>
           <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
@@ -172,6 +209,26 @@ function AppContent() {
                 />
               </Link>
             </Tooltip>
+            
+            {/* DEMO MODE indicator - Always visible in development mode */}
+            {(isMockDataEnabled || forceShowDemoMode) && (
+              <Tooltip title="Pulse is running with simulated data. To connect to a real Proxmox server, set USE_MOCK_DATA=false and MOCK_DATA_ENABLED=false in your .env file">
+                <Chip
+                  label="DEMO MODE"
+                  color="warning"
+                  size="small"
+                  sx={{ 
+                    ml: 2,
+                    fontWeight: 'medium',
+                    fontSize: '0.85rem',
+                    border: '1px solid',
+                    borderColor: 'warning.light',
+                    color: 'white',
+                    animation: 'none'
+                  }}
+                />
+              </Tooltip>
+            )}
           </Box>
           
           {/* Dark Mode Toggle Button */}

frontend/src/hooks/useSocket.js

@@ -10,7 +10,7 @@ import { clearAppData } from '../utils/storageUtils';
 const useSocket = (url) => {
   // In development mode, we need to connect to the backend server on port 7654
   // In production, we can use window.location.origin since both frontend and backend are served from the same origin
-  const isDevelopment = process.env.NODE_ENV === 'development' || import.meta.env.DEV;
+  const isDevelopment = import.meta.env.DEV;
   
   // Get the current host
   const currentHost = window.location.hostname;
@@ -34,6 +34,9 @@ const useSocket = (url) => {
   const useMockData = localStorage.getItem('use_mock_data') === 'true' || 
                       localStorage.getItem('MOCK_DATA_ENABLED') === 'true';
   
+  // Store the mock data status as a state variable so it can be exposed in the return value
+  const [isMockData, setIsMockData] = useState(useMockData);
+
   const [isConnected, setIsConnected] = useState(useMockData ? true : false);
   const [lastMessage, setLastMessage] = useState(null);
   const [nodeData, setNodeData] = useState(useMockData ? [
@@ -114,6 +117,20 @@ const useSocket = (url) => {
         setError(null);
         reconnectAttemptsRef.current = 0; // Reset reconnect attempts on successful connection
         
+        // Request server configuration to check if mock data is enabled on the server
+        socketRef.current.emit('getServerConfig', (config) => {
+          if (config && (config.useMockData || config.mockDataEnabled)) {
+            console.log('Server is using mock data');
+            setIsMockData(true);
+            // Store this information in localStorage for persistence
+            localStorage.setItem('use_mock_data', 'true');
+            localStorage.setItem('MOCK_DATA_ENABLED', 'true');
+          } else {
+            console.log('Server is using real data');
+            setIsMockData(false);
+          }
+        });
+        
         // Request initial data
         socketRef.current.emit('requestNodeData');
         socketRef.current.emit('requestGuestData');
@@ -312,6 +329,19 @@ const useSocket = (url) => {
         }
       });
 
+      // Setup socket event listeners
+      socketRef.current.on('nodeData', (data) => {
+        if (Array.isArray(data)) {
+          // Check if this is mock data by looking for the 'MOCK-' prefix in node names
+          const isMockDataNodes = data.some(node => node.name && node.name.startsWith('MOCK-'));
+          if (isMockDataNodes) {
+            console.log('Detected mock data from node names');
+            setIsMockData(true);
+          }
+          setNodeData(data);
+        }
+      });
+
       // Cleanup function
       return () => {
         clearTimeout(connectionTimeout); // Clear the timeout on cleanup
@@ -437,7 +467,7 @@ const useSocket = (url) => {
       // Store the current environment with the guest data
       try {
         localStorage.setItem('guest_data_cache', JSON.stringify({
-          environment: process.env.NODE_ENV || 'development',
+          environment: import.meta.env.MODE || 'development',
           timestamp: Date.now()
         }));
       } catch (error) {
@@ -624,7 +654,8 @@ const useSocket = (url) => {
     reconnect,
     subscribeToNode,
     subscribeToGuest,
-    getHistory
+    getHistory,
+    isMockData
   };
 };