diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx index 78843e6bf..368a7f739 100644 --- a/frontend-modern/src/components/Settings/Settings.tsx +++ b/frontend-modern/src/components/Settings/Settings.tsx @@ -39,10 +39,6 @@ const Settings: Component = () => { // System settings const [pollingInterval, setPollingInterval] = createSignal(5); - const [backendPort, setBackendPort] = createSignal(3000); - const [frontendPort, setFrontendPort] = createSignal(7655); - const [showRestartModal, setShowRestartModal] = createSignal(false); - const [pendingPortChanges, setPendingPortChanges] = createSignal<{backend?: number, frontend?: number} | null>(null); const tabs: { id: SettingsTab; label: string; icon: string }[] = [ { @@ -82,8 +78,6 @@ const Settings: Component = () => { const response = await SettingsAPI.getSettings(); const settings = response.current; setPollingInterval((settings.monitoring.pollingInterval || 5000) / 1000); - setBackendPort(settings.server.backend.port); - setFrontendPort(settings.server.frontend.port); } catch (error) { console.error('Failed to load settings:', error); } @@ -92,50 +86,10 @@ const Settings: Component = () => { } }); - const validatePort = (port: number): string | null => { - if (isNaN(port) || port < 1 || port > 65535) { - return 'Port must be between 1 and 65535'; - } - return null; - }; - const saveSettings = async () => { try { if (activeTab() === 'system') { - // Check if ports have changed - const settingsResp = await SettingsAPI.getSettings(); - const currentSettings = settingsResp.current; - const currentBackendPort = currentSettings.server.backend.port; - const currentFrontendPort = currentSettings.server.frontend.port; - const portChanged = - backendPort() !== currentBackendPort || - frontendPort() !== currentFrontendPort; - - if (portChanged) { - // Validate ports - const backendError = validatePort(backendPort()); - const frontendError = validatePort(frontendPort()); - - if (backendError || frontendError) { - showError(backendError || frontendError || 'Invalid port configuration'); - return; - } - - if (backendPort() === frontendPort()) { - showError('Backend and frontend ports must be different'); - return; - } - - // Show restart confirmation modal - setPendingPortChanges({ - backend: backendPort(), - frontend: frontendPort() - }); - setShowRestartModal(true); - return; - } - - // Save other system settings without restart + // Save system settings const response = await fetch('/api/settings/update', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -157,40 +111,6 @@ const Settings: Component = () => { showError('Failed to save settings'); } }; - - const applyPortChanges = async () => { - try { - const response = await fetch('/api/settings/update', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - server: { - backend: { port: pendingPortChanges()?.backend }, - frontend: { port: pendingPortChanges()?.frontend } - }, - monitoring: { - pollingInterval: pollingInterval() * 1000 - } - }) - }); - - if (!response.ok) { - throw new Error('Failed to update settings'); - } - - showSuccess('Settings saved. The application will restart...'); - setHasUnsavedChanges(false); - setShowRestartModal(false); - - // The backend will handle the restart - setTimeout(() => { - window.location.href = `${window.location.protocol}//${window.location.hostname}:${pendingPortChanges()?.frontend}`; - }, 3000); - } catch (error) { - showError('Failed to apply port changes'); - setShowRestartModal(false); - } - }; const deleteNode = async (nodeId: string) => { if (!confirm('Are you sure you want to delete this node?')) return; @@ -230,58 +150,6 @@ const Settings: Component = () => { return ( <> - {/* Restart Confirmation Modal */} - -
-
-

- Confirm Port Changes -

- -
-

- Changing ports will require restarting the application. You will be automatically redirected to the new port. -

- -
-
- Backend Port: - {pendingPortChanges()?.backend} -
-
- Frontend Port: - {pendingPortChanges()?.frontend} -
-
- -
-

- Warning: Make sure these ports are not already in use by other applications. -

-
-
- -
- - -
-
-
- -
{/* Header with better styling */}
@@ -548,70 +416,12 @@ const Settings: Component = () => {
- {/* Port Configuration */} -
+
- -

API server port

- { - const val = parseInt(e.currentTarget.value); - if (!isNaN(val) && val >= 1 && val <= 65535) { - setBackendPort(val); - setHasUnsavedChanges(true); - } - }} - min="1" - max="65535" - class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white" - placeholder="3000" - /> -
- -
- -

Web UI port

- { - const val = parseInt(e.currentTarget.value); - if (!isNaN(val)) { - setFrontendPort(val); - setHasUnsavedChanges(true); - } - }} - min="1" - max="65535" - class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600 - focus:ring-2 focus:ring-blue-500 focus:border-transparent" - /> -
-
- -
-
- - - - - -
-

Changing ports requires restart

-

The application will restart automatically when you save port changes. Make sure the new ports are not already in use.

-
-
-
- -
-
-
- -

- How often to fetch data from servers -

+ +

+ How often to fetch data from servers +

-
@@ -667,6 +476,14 @@ const Settings: Component = () => { {connected() ? 'Connected' : 'Disconnected'}
+
+ Backend Port: + {window.location.hostname === 'localhost' ? '3000' : '3000'} +
+
+ Frontend Port: + {window.location.port || (window.location.protocol === 'https:' ? '443' : '80')} +
@@ -714,9 +531,7 @@ const Settings: Component = () => { }, websocket: { connected: connected(), - url: window.location.hostname === 'localhost' - ? 'ws://localhost:3000/ws' - : `ws://${window.location.hostname}:3000/ws` + url: `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws` }, nodes: nodes(), state: { diff --git a/frontend-modern/src/stores/websocket-global.ts b/frontend-modern/src/stores/websocket-global.ts index 37fc59a82..26400c187 100644 --- a/frontend-modern/src/stores/websocket-global.ts +++ b/frontend-modern/src/stores/websocket-global.ts @@ -10,9 +10,8 @@ declare global { export function getGlobalWebSocketStore() { if (!window.__pulseWsStore) { const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; - // Use backend port 3000 for WebSocket connection - const hostname = window.location.hostname; - const wsUrl = `${protocol}//${hostname}:3000/ws`; + // Use relative URL that works behind proxies + const wsUrl = `${protocol}//${window.location.host}/ws`; window.__pulseWsStore = createWebSocketStore(wsUrl); }