[BUG] Notification for Lost WebSocket Connection

[RB3rg]

Title: [Bug] Notification for Lost WebSocket Connection

Description

Currently, the FUXA frontend does not notify users when the WebSocket connection to the backend is lost. This can lead to users mistakenly believing that the data displayed on the dashboard is current, when it might not be. This is critical for a monitoring application as it can cause significant issues in decision-making based on stale data.

Steps to Reproduce

1. Open the FUXA dashboard in a web browser.
2. Establish a connection to the backend server.
3. Simulate a loss of connection to the backend (e.g., disconnect the network or stop the backend server).
4. Observe that there is no notification indicating the loss of connection, and the dashboard continues to display the last received data.

Expected Behavior

The frontend should detect the loss of the WebSocket connection and display a prominent notification to the user. This notification should remain visible until the connection is restored.

Actual Behavior

There is no notification, and the dashboard continues to display the last received data without indicating the connection loss.

Suggested Solution

Implement a WebSocket connection status handler in the frontend to:

1. Detect when the WebSocket connection is lost.
2. Display a notification to the user.
3. Optionally, attempt to reconnect and update the notification accordingly.

Example implementation:

const socket = new WebSocket('ws://backend-server-address');

socket.onopen = function(event) {
    console.log('WebSocket connection established');
    hideConnectionLostNotification();
};

socket.onclose = function(event) {
    console.log('WebSocket connection closed');
    showConnectionLostNotification();
};

function showConnectionLostNotification() {
    const notification = document.createElement('div');
    notification.id = 'connection-lost';
    notification.innerText = 'Connection to the server has been lost.';
    notification.style.position = 'fixed';
    notification.style.top = '0';
    notification.style.width = '100%';
    notification.style.backgroundColor = 'red';
    notification.style.color = 'white';
    notification.style.textAlign = 'center';
    notification.style.padding = '10px';
    document.body.appendChild(notification);
}

function hideConnectionLostNotification() {
    const notification = document.getElementById('connection-lost');
    if (notification) {
        notification.remove();
    }
}

[unocelli]

Hi, I have fixed it, it should now work as expected