Update Rust crate clap to v4.5.22

.drone.yml

@@ -11,8 +11,7 @@ steps:
       path: /tmp/web_build
   commands:
   - cd virtweb_frontend
-  - npm install --legacy-peer-deps # TODO : remove when mui-file-input is updated
-  - npm run lint
+  - npm install
   - npm run build
   - mv dist /tmp/web_build
 
@@ -26,7 +25,6 @@ steps:
   - rustup component add clippy
   - cd virtweb_backend
   - cargo clippy -- -D warnings
-  - cargo clippy --examples -- -D warnings
   - cargo test
 
 - name: backend_compile
@@ -36,8 +34,6 @@ steps:
     path: /usr/local/cargo/registry
   - name: web_app
     path: /tmp/web_build
-  - name: release
-    path: /tmp/release
   depends_on:
   - backend_check
   - web_build
@@ -47,30 +43,10 @@ steps:
   - mv /tmp/web_build/dist static
   - cargo build --release
   - ls -lah target/release/virtweb_backend
-  - cp target/release/virtweb_backend /tmp/release
 
-- name: gitea_release
-  image: plugins/gitea-release
-  depends_on:
-  - backend_compile
-  when:
-    event:
-      - tag
-  volumes:
-  - name: release
-    path: /tmp/release
-  environment:
-    PLUGIN_API_KEY:
-      from_secret: API_KEY
-  settings:
-    base_url: https://gitea.communiquons.org
-    files: /tmp/release/*
-    checksum: sha512
 
 volumes:
 - name: rust_registry
   temp: {}
 - name: web_app
   temp: {}
-- name: release
-  temp: {}

renovate.json

@@ -1,3 +1,9 @@
 {
-  "extends": ["local>renovate/presets"]
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "packageRules": [
+    {
+      "matchUpdateTypes": ["major", "minor", "patch"],
+      "automerge": true
+    }
+  ]
 }

virtweb_backend/Cargo.toml

@@ -1,48 +1,48 @@
 [package]
 name = "virtweb_backend"
 version = "0.1.0"
-edition = "2024"
+edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-log = "0.4.27"
-env_logger = "0.11.7"
-clap = { version = "4.5.34", features = ["derive", "env"] }
-light-openid = { version = "1.0.4", features = ["crypto-wrapper"] }
+log = "0.4.21"
+env_logger = "0.11.3"
+clap = { version = "4.5.20", features = ["derive", "env"] }
+light-openid = { version = "1.0.2", features = ["crypto-wrapper"] }
 lazy_static = "1.5.0"
-actix = "0.13.5"
-actix-web = "4.10.2"
+actix = "0.13.3"
+actix-web = "4.9.0"
 actix-remote-ip = "0.1.0"
-actix-session = { version = "0.10.1", features = ["cookie-session"] }
+actix-session = { version = "0.10.0", features = ["cookie-session"] }
 actix-identity = "0.8.0"
-actix-cors = "0.7.1"
-actix-files = "0.6.6"
-actix-ws = "0.3.0"
-actix-http = "3.10.0"
-serde = { version = "1.0.219", features = ["derive"] }
-serde_json = "1.0.140"
-quick-xml = { version = "0.37.3", features = ["serialize", "overlapped-lists"] }
+actix-cors = "0.7.0"
+actix-files = "0.6.5"
+actix-web-actors = "4.3.0"
+actix-http = "3.9.0"
+serde = { version = "1.0.215", features = ["derive"] }
+serde_json = "1.0.132"
+quick-xml = { version = "0.37.1", features = ["serialize", "overlapped-lists"] }
 futures-util = "0.3.31"
-anyhow = "1.0.97"
-actix-multipart = "0.7.2"
-tempfile = "3.19.1"
-reqwest = { version = "0.12.15", features = ["stream"] }
-url = "2.5.4"
-virt = "0.4.2"
-sysinfo = { version = "0.34.2", features = ["serde"] }
-uuid = { version = "1.16.0", features = ["v4", "serde"] }
-lazy-regex = "3.4.1"
-thiserror = "2.0.12"
-image = "0.25.6"
-rand = "0.9.0"
-bytes = "1.10.1"
-tokio = { version = "1.44.1", features = ["rt", "time", "macros"] }
+anyhow = "1.0.93"
+actix-multipart = "0.7.0"
+tempfile = "3.14.0"
+reqwest = { version = "0.12.9", features = ["stream"] }
+url = "2.5.0"
+virt = "0.4.1"
+sysinfo = { version = "0.32.0", features = ["serde"] }
+uuid = { version = "1.11.0", features = ["v4", "serde"] }
+lazy-regex = "3.3.0"
+thiserror = "2.0.0"
+image = "0.25.4"
+rand = "0.8.5"
+bytes = "1.8.0"
+tokio = "1.41.1"
 futures = "0.3.31"
-ipnetwork = { version = "0.21.1", features = ["serde"] }
-num = "0.4.3"
-rust-embed = { version = "8.6.0" }
-mime_guess = "2.0.5"
+ipnetwork = "0.20.0"
+num = "0.4.2"
+rust-embed = { version = "8.5.0" }
+mime_guess = "2.0.4"
 dotenvy = "0.15.7"
 nix = { version = "0.29.0", features = ["net"] }
-basic-jwt = "0.3.0"
+basic-jwt = "0.2.0"

virtweb_backend/examples/api_curl.rs

@@ -55,13 +55,12 @@ fn main() {
 
     let jwt = key.sign_jwt(&claims).expect("Failed to sign JWT!");
 
-    let err = Command::new("curl")
+    Command::new("curl")
         .args(["-X", &args.verb])
         .args(["-H", &format!("x-token-id: {}", args.token_id)])
         .args(["-H", &format!("x-token-content: {jwt}")])
         .args(args.run)
         .arg(full_url)
         .exec();
-
-    panic!("Failed to run cURL! {err}")
+    panic!("Failed to run curl!")
 }

virtweb_backend/src/actors/mod.rs

@@ -1,3 +1,3 @@
 pub mod libvirt_actor;
-pub mod vnc_handler;
+pub mod vnc_actor;
 pub mod vnc_tokens_actor;

virtweb_backend/src/actors/vnc_actor.rs

@@ -0,0 +1,209 @@
+use actix::{Actor, ActorContext, AsyncContext, Handler, StreamHandler};
+use actix_http::ws::Item;
+use actix_web_actors::ws;
+use actix_web_actors::ws::Message;
+use bytes::Bytes;
+use image::EncodableLayout;
+use std::path::Path;
+use std::time::{Duration, Instant};
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::net::unix::{OwnedReadHalf, OwnedWriteHalf};
+use tokio::net::UnixStream;
+
+/// How often heartbeat pings are sent
+const HEARTBEAT_INTERVAL: Duration = Duration::from_secs(5);
+
+/// How long before lack of client response causes a timeout
+const CLIENT_TIMEOUT: Duration = Duration::from_secs(20);
+
+#[derive(thiserror::Error, Debug)]
+enum VNCError {
+    #[error("Socket file does not exists!")]
+    SocketDoesNotExists,
+}
+
+pub struct VNCActor {
+    /// Qemu -> WS
+    read_half: Option<OwnedReadHalf>,
+
+    /// WS -> Qemu
+    write_half: OwnedWriteHalf,
+
+    // Client must respond to ping at a specific interval, otherwise we drop connection
+    hb: Instant,
+}
+
+impl VNCActor {
+    pub async fn new(socket_path: &str) -> anyhow::Result<Self> {
+        let socket_path = Path::new(socket_path);
+
+        if !socket_path.exists() {
+            return Err(VNCError::SocketDoesNotExists.into());
+        }
+
+        let socket = UnixStream::connect(socket_path).await?;
+        let (read_half, write_half) = socket.into_split();
+
+        Ok(Self {
+            read_half: Some(read_half),
+            write_half,
+            hb: Instant::now(),
+        })
+    }
+
+    /// helper method that sends ping to client every second.
+    ///
+    /// also this method checks heartbeats from client
+    fn hb(&self, ctx: &mut ws::WebsocketContext<Self>) {
+        ctx.run_interval(HEARTBEAT_INTERVAL, |act, ctx| {
+            // check client heartbeats
+            if Instant::now().duration_since(act.hb) > CLIENT_TIMEOUT {
+                // heartbeat timed out
+                log::warn!("WebSocket Client heartbeat failed, disconnecting!");
+                ctx.stop();
+                return;
+            }
+
+            ctx.ping(b"");
+        });
+    }
+
+    fn send_to_socket(&mut self, bytes: Bytes, ctx: &mut ws::WebsocketContext<Self>) {
+        log::trace!("Received {} bytes for VNC socket", bytes.len());
+
+        if let Err(e) = futures::executor::block_on(self.write_half.write(bytes.as_bytes())) {
+            log::error!("Failed to relay bytes to VNC socket {e}");
+            ctx.close(None);
+        }
+    }
+
+    fn start_qemu_to_ws_end(&mut self, ctx: &mut ws::WebsocketContext<Self>) {
+        let mut read_half = self.read_half.take().unwrap();
+        let addr = ctx.address();
+        let future = async move {
+            let mut buff: [u8; 5000] = [0; 5000];
+            loop {
+                match read_half.read(&mut buff).await {
+                    Ok(mut l) => {
+                        if l == 0 {
+                            log::warn!("Got empty read!");
+
+                            // Ugly hack made to wait for next byte
+                            let mut one_byte_buff: [u8; 1] = [0; 1];
+                            match read_half.read_exact(&mut one_byte_buff).await {
+                                Ok(b) => {
+                                    if b == 0 {
+                                        log::error!("Did not get a byte !");
+                                        let _ = addr.send(CloseWebSocketReq).await;
+                                        break;
+                                    }
+                                    buff[0] = one_byte_buff[0];
+                                    l = 1;
+                                }
+                                Err(e) => {
+                                    log::error!("Failed to read 1 BYTE from remote socket. Stopping now... {:?}", e);
+                                    break;
+                                }
+                            }
+                        }
+
+                        let to_send = SendBytesReq(Vec::from(&buff[0..l]));
+                        if let Err(e) = addr.send(to_send).await {
+                            log::error!("Failed to send to websocket. Stopping now... {:?}", e);
+                            return;
+                        }
+                    }
+                    Err(e) => {
+                        log::error!("Failed to read from remote socket. Stopping now... {:?}", e);
+                        break;
+                    }
+                };
+            }
+
+            log::info!("Exited read loop");
+        };
+
+        tokio::spawn(future);
+    }
+}
+
+impl Actor for VNCActor {
+    type Context = ws::WebsocketContext<Self>;
+
+    fn started(&mut self, ctx: &mut Self::Context) {
+        self.hb(ctx);
+        self.start_qemu_to_ws_end(ctx);
+    }
+}
+
+impl StreamHandler<Result<Message, ws::ProtocolError>> for VNCActor {
+    fn handle(&mut self, msg: Result<Message, ws::ProtocolError>, ctx: &mut Self::Context) {
+        match msg {
+            Ok(Message::Ping(msg)) => ctx.pong(&msg),
+
+            Ok(Message::Text(_text)) => {
+                log::error!("Received unexpected text on VNC WebSocket!");
+            }
+
+            Ok(Message::Binary(bin)) => {
+                log::info!("Forward {} bytes to VNC server", bin.len());
+                self.send_to_socket(bin, ctx);
+            }
+
+            Ok(Message::Continuation(msg)) => match msg {
+                Item::FirstText(_) => {
+                    log::error!("Received unexpected split text!");
+                    ctx.close(None);
+                }
+                Item::FirstBinary(bin) | Item::Continue(bin) | Item::Last(bin) => {
+                    self.send_to_socket(bin, ctx);
+                }
+            },
+
+            Ok(Message::Pong(_)) => {
+                log::trace!("Received PONG message");
+                self.hb = Instant::now();
+            }
+
+            Ok(Message::Close(r)) => {
+                log::info!("WebSocket closed. Reason={r:?}");
+                ctx.close(r);
+            }
+
+            Ok(Message::Nop) => {
+                log::debug!("Received Nop message")
+            }
+
+            Err(e) => {
+                log::error!("WebSocket protocol error! {e}");
+                ctx.close(None)
+            }
+        }
+    }
+}
+
+#[derive(actix::Message)]
+#[rtype(result = "()")]
+pub struct SendBytesReq(Vec<u8>);
+
+impl Handler<SendBytesReq> for VNCActor {
+    type Result = ();
+
+    fn handle(&mut self, msg: SendBytesReq, ctx: &mut Self::Context) -> Self::Result {
+        log::trace!("Send {} bytes to WS", msg.0.len());
+        ctx.binary(msg.0);
+    }
+}
+
+#[derive(actix::Message)]
+#[rtype(result = "()")]
+pub struct CloseWebSocketReq;
+
+impl Handler<CloseWebSocketReq> for VNCActor {
+    type Result = ();
+
+    fn handle(&mut self, _msg: CloseWebSocketReq, ctx: &mut Self::Context) -> Self::Result {
+        log::trace!("Close websocket, because VNC socket has terminated");
+        ctx.close(None);
+    }
+}

virtweb_backend/src/actors/vnc_handler.rs

@@ -1,129 +0,0 @@
-use actix_http::ws::Message;
-use futures_util::StreamExt as _;
-use std::time::{Duration, Instant};
-use tokio::io::{AsyncReadExt, AsyncWriteExt};
-use tokio::net::UnixStream;
-use tokio::select;
-use tokio::time::interval;
-
-/// How often heartbeat pings are sent
-const HEARTBEAT_INTERVAL: Duration = Duration::from_secs(5);
-
-/// How long before lack of client response causes a timeout
-const CLIENT_TIMEOUT: Duration = Duration::from_secs(20);
-
-/// Broadcast text & binary messages received from a client, respond to ping messages, and monitor
-/// connection health to detect network issues and free up resources.
-pub async fn handle(
-    mut session: actix_ws::Session,
-    mut msg_stream: actix_ws::MessageStream,
-    mut socket: UnixStream,
-) {
-    log::info!("Connected to websocket");
-
-    let mut last_heartbeat = Instant::now();
-    let mut interval = interval(HEARTBEAT_INTERVAL);
-
-    let mut buf_socket = [0u8; 1024];
-
-    let reason = loop {
-        // waits for either `msg_stream` to receive a message from the client, the broadcast channel
-        // to send a message, or the heartbeat interval timer to tick, yielding the value of
-        // whichever one is ready first
-        select! {
-
-            // heartbeat interval ticked
-            _tick = interval.tick() => {
-                // if no heartbeat ping/pong received recently, close the connection
-                if Instant::now().duration_since(last_heartbeat) > CLIENT_TIMEOUT {
-                    log::info!(
-                        "client has not sent heartbeat in over {CLIENT_TIMEOUT:?}; disconnecting"
-                    );
-
-                    break None;
-                }
-
-                // send heartbeat ping
-                let _ = session.ping(b"").await;
-            }
-
-            msg = msg_stream.next() => {
-                let msg = match msg {
-                    // received message from WebSocket client
-                    Some(Ok(msg)) => msg,
-
-                    // client WebSocket stream error
-                    Some(Err(err)) => {
-                        log::error!("{err}");
-                        break None;
-                    }
-
-                    // client WebSocket stream ended
-                    None => break None
-                };
-
-                log::debug!("msg: {msg:?}");
-
-                match msg {
-                    Message::Text(_) => {
-                        log::error!("Received unexpected text on VNC WebSocket!");
-                    }
-
-                    Message::Binary(bin) => {
-                        log::info!("Forward {} bytes to VNC server", bin.len());
-                        if let Err(e) = socket.write(&bin).await {
-                            log::error!("Failed to relay bytes to VNC socket {e}");
-                            break None;
-                        }
-                    }
-
-                    Message::Close(reason) => {
-                        break reason;
-                    }
-
-                    Message::Ping(bytes) => {
-                        last_heartbeat = Instant::now();
-                        let _ = session.pong(&bytes).await;
-                    }
-
-                    Message::Pong(_) => {
-                        last_heartbeat = Instant::now();
-                    }
-
-                    Message::Continuation(_) => {
-                        log::warn!("no support for continuation frames");
-                    }
-
-                    // no-op; ignore
-                    Message::Nop => {}
-                };
-            }
-
-            // Forward socket packet to WS client
-            count = socket.read(&mut buf_socket) => {
-                let count = match count {
-                    Ok(count) => count,
-                    Err(e) => {
-                        log::error!("[VNC] Failed to read from upstream! {e}");
-                        break None;
-                    }
-                };
-
-                if count == 0 {
-                    log::warn!("[VNC] infinite loop (upstream), closing connection");
-                    break None;
-                }
-
-                if let Err(e)=session.binary(buf_socket[0..count].to_vec()).await{
-                    log::error!("[VNC] Failed to forward messages to upstream, will close connection! {e}");
-                    break None
-                }
-            }
-        }
-    };
-
-    // attempt to close connection gracefully
-    let _ = session.close(reason).await;
-
-    log::info!("Disconnected from websocket");
-}

virtweb_backend/src/constants.rs

@@ -17,11 +17,10 @@ pub const ROUTES_WITHOUT_AUTH: [&str; 5] = [
 ];
 
 /// Allowed ISO mimetypes
-pub const ALLOWED_ISO_MIME_TYPES: [&str; 4] = [
+pub const ALLOWED_ISO_MIME_TYPES: [&str; 3] = [
     "application/x-cd-image",
     "application/x-iso9660-image",
     "application/octet-stream",
-    "application/vnd.efi.iso",
 ];
 
 /// ISO max size

virtweb_backend/src/controllers/api_tokens_controller.rs

@@ -2,9 +2,9 @@
 
 use crate::api_tokens;
 use crate::api_tokens::{NewToken, TokenID, TokenRights};
-use crate::controllers::HttpResult;
 use crate::controllers::api_tokens_controller::rest_token::RestToken;
-use actix_web::{HttpResponse, web};
+use crate::controllers::HttpResult;
+use actix_web::{web, HttpResponse};
 use basic_jwt::JWTPrivateKey;
 
 /// Create a special module for REST token to enforce usage of constructor function

virtweb_backend/src/controllers/auth_controller.rs

@@ -1,6 +1,6 @@
 use actix_remote_ip::RemoteIP;
 use actix_web::web::Data;
-use actix_web::{HttpResponse, Responder, web};
+use actix_web::{web, HttpResponse, Responder};
 use light_openid::basic_state_manager::BasicStateManager;
 
 use crate::app_config::AppConfig;

virtweb_backend/src/controllers/iso_controller.rs

@@ -3,9 +3,9 @@ use crate::constants;
 use crate::controllers::HttpResult;
 use crate::utils::files_utils;
 use actix_files::NamedFile;
-use actix_multipart::form::MultipartForm;
 use actix_multipart::form::tempfile::TempFile;
-use actix_web::{HttpRequest, HttpResponse, web};
+use actix_multipart::form::MultipartForm;
+use actix_web::{web, HttpRequest, HttpResponse};
 use futures_util::StreamExt;
 use std::fs::File;
 use std::io::Write;

virtweb_backend/src/controllers/mod.rs

@@ -1,7 +1,7 @@
 use crate::libvirt_client::LibVirtClient;
 use actix_http::StatusCode;
 use actix_web::body::BoxBody;
-use actix_web::{HttpResponse, web};
+use actix_web::{web, HttpResponse};
 use std::error::Error;
 use std::fmt::{Display, Formatter};
 use std::io::ErrorKind;

virtweb_backend/src/controllers/network_controller.rs

@@ -1,7 +1,7 @@
 use crate::controllers::{HttpResult, LibVirtReq};
 use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::net::NetworkInfo;
-use actix_web::{HttpResponse, web};
+use actix_web::{web, HttpResponse};
 
 #[derive(serde::Serialize, serde::Deserialize)]
 pub struct NetworkID {

virtweb_backend/src/controllers/nwfilter_controller.rs

@@ -2,7 +2,7 @@ use crate::constants;
 use crate::controllers::{HttpResult, LibVirtReq};
 use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::nw_filter::NetworkFilter;
-use actix_web::{HttpResponse, web};
+use actix_web::{web, HttpResponse};
 
 #[derive(serde::Serialize, serde::Deserialize)]
 pub struct NetworkFilterID {

virtweb_backend/src/controllers/server_controller.rs

@@ -136,13 +136,16 @@ pub async fn server_info(client: LibVirtReq) -> HttpResult {
     system.refresh_all();
 
     let mut components = Components::new();
-    components.refresh(true);
+    components.refresh_list();
+    components.refresh();
 
     let mut disks = Disks::new();
-    disks.refresh(true);
+    disks.refresh_list();
+    disks.refresh();
 
     let mut networks = Networks::new();
-    networks.refresh(true);
+    networks.refresh_list();
+    networks.refresh();
 
     Ok(HttpResponse::Ok().json(ServerInfo {
         hypervisor: client.get_info().await?,

virtweb_backend/src/controllers/static_controller.rs

@@ -18,7 +18,7 @@ mod serve_static_debug {
 
 #[cfg(not(debug_assertions))]
 mod serve_static_release {
-    use actix_web::{HttpResponse, Responder, web};
+    use actix_web::{web, HttpResponse, Responder};
     use rust_embed::RustEmbed;
 
     #[derive(RustEmbed)]

virtweb_backend/src/controllers/vm_controller.rs

@@ -1,12 +1,11 @@
-use crate::actors::vnc_handler;
+use crate::actors::vnc_actor::VNCActor;
 use crate::actors::vnc_tokens_actor::VNCTokensManager;
 use crate::controllers::{HttpResult, LibVirtReq};
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::domain::DomainState;
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::vm::VMInfo;
-use actix_web::{HttpRequest, HttpResponse, rt, web};
-use std::path::Path;
-use tokio::net::UnixStream;
+use actix_web::{web, HttpRequest, HttpResponse};
+use actix_web_actors::ws;
 
 #[derive(serde::Serialize)]
 struct VMInfoAndState {
@@ -325,19 +324,5 @@ pub async fn vnc(
     };
 
     log::info!("Start VNC connection on socket {socket_path}");
-
-    let socket_path = Path::new(&socket_path);
-    if !socket_path.exists() {
-        log::error!("VNC socket path {socket_path:?} does not exist!");
-        return Ok(HttpResponse::ServiceUnavailable().json("VNC socket path does not exists!"));
-    }
-
-    let socket = UnixStream::connect(socket_path).await?;
-
-    let (res, session, msg_stream) = actix_ws::handle(&req, stream)?;
-
-    // spawn websocket handler (and don't await it) so that the response is returned immediately
-    rt::spawn(vnc_handler::handle(session, msg_stream, socket));
-
-    Ok(res)
+    Ok(ws::start(VNCActor::new(&socket_path).await?, &req, stream)?)
 }

virtweb_backend/src/extractors/auth_extractor.rs

@@ -1,7 +1,7 @@
 use actix_identity::Identity;
 use actix_web::dev::Payload;
 use actix_web::{Error, FromRequest, HttpMessage, HttpRequest};
-use futures_util::future::{Ready, ready};
+use futures_util::future::{ready, Ready};
 use std::fmt::Display;
 
 pub struct AuthExtractor {

virtweb_backend/src/extractors/group_vm_id_extractor.rs

@@ -1,11 +1,11 @@
 use crate::controllers::LibVirtReq;
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::domain::DomainXML;
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::vm::VMGroupId;
 use actix_http::Payload;
 use actix_web::error::ErrorBadRequest;
 use actix_web::web::Query;
-use actix_web::{Error, FromRequest, HttpRequest, web};
+use actix_web::{web, Error, FromRequest, HttpRequest};
 use std::future::Future;
 use std::pin::Pin;
 

virtweb_backend/src/extractors/local_auth_extractor.rs

@@ -1,7 +1,7 @@
 use crate::app_config::AppConfig;
 use actix_web::dev::Payload;
 use actix_web::{Error, FromRequest, HttpRequest};
-use futures_util::future::{Ready, ready};
+use futures_util::future::{ready, Ready};
 use std::ops::Deref;
 
 #[derive(Debug, Copy, Clone, PartialEq)]

virtweb_backend/src/libvirt_client.rs

@@ -1,9 +1,9 @@
 use crate::actors::libvirt_actor;
 use crate::actors::libvirt_actor::LibVirtActor;
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::domain::{DomainState, DomainXML};
 use crate::libvirt_lib_structures::network::NetworkXML;
 use crate::libvirt_lib_structures::nwfilter::NetworkFilterXML;
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::hypervisor::HypervisorInfo;
 use crate::libvirt_rest_structures::net::NetworkInfo;
 use crate::libvirt_rest_structures::nw_filter::NetworkFilter;

virtweb_backend/src/libvirt_rest_structures/net.rs

@@ -1,5 +1,5 @@
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::network::*;
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::LibVirtStructError::StructureExtraction;
 use crate::nat::nat_definition::Nat;
 use crate::nat::nat_lib;

virtweb_backend/src/libvirt_rest_structures/nw_filter.rs

@@ -1,9 +1,9 @@
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::nwfilter::{
     NetworkFilterRefXML, NetworkFilterRuleProtocolAllXML, NetworkFilterRuleProtocolArpXML,
     NetworkFilterRuleProtocolIpvx, NetworkFilterRuleProtocolLayer4, NetworkFilterRuleProtocolMac,
     NetworkFilterRuleXML, NetworkFilterXML,
 };
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::LibVirtStructError;
 use crate::libvirt_rest_structures::LibVirtStructError::{
     NetworkFilterExtraction, StructureExtraction,

virtweb_backend/src/libvirt_rest_structures/vm.rs

@@ -1,7 +1,7 @@
 use crate::app_config::AppConfig;
 use crate::constants;
-use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_lib_structures::domain::*;
+use crate::libvirt_lib_structures::XMLUuid;
 use crate::libvirt_rest_structures::LibVirtStructError;
 use crate::libvirt_rest_structures::LibVirtStructError::StructureExtraction;
 use crate::utils::disks_utils::Disk;

virtweb_backend/src/main.rs

@@ -1,17 +1,17 @@
 use actix::Actor;
 use actix_cors::Cors;
-use actix_identity::IdentityMiddleware;
 use actix_identity::config::LogoutBehaviour;
-use actix_multipart::form::MultipartFormConfig;
+use actix_identity::IdentityMiddleware;
 use actix_multipart::form::tempfile::TempFileConfig;
+use actix_multipart::form::MultipartFormConfig;
 use actix_remote_ip::RemoteIPConfig;
-use actix_session::SessionMiddleware;
 use actix_session::storage::CookieSessionStore;
+use actix_session::SessionMiddleware;
 use actix_web::cookie::{Key, SameSite};
 use actix_web::http::header;
 use actix_web::middleware::Logger;
 use actix_web::web::Data;
-use actix_web::{App, HttpServer, web};
+use actix_web::{web, App, HttpServer};
 use light_openid::basic_state_manager::BasicStateManager;
 use std::time::Duration;
 use virtweb_backend::actors::libvirt_actor::LibVirtActor;

virtweb_backend/src/middlewares/auth_middleware.rs

@@ -1,4 +1,4 @@
-use std::future::{Ready, ready};
+use std::future::{ready, Ready};
 use std::rc::Rc;
 
 use crate::app_config::AppConfig;
@@ -8,8 +8,8 @@ use crate::extractors::auth_extractor::AuthExtractor;
 use actix_web::body::EitherBody;
 use actix_web::dev::Payload;
 use actix_web::{
+    dev::{forward_ready, Service, ServiceRequest, ServiceResponse, Transform},
     Error, FromRequest, HttpResponse,
-    dev::{Service, ServiceRequest, ServiceResponse, Transform, forward_ready},
 };
 use futures_util::future::LocalBoxFuture;
 
@@ -68,10 +68,7 @@ where
                     .unwrap();
 
             if !AppConfig::get().is_allowed_ip(remote_ip.0) {
-                log::error!(
-                    "An attempt to access VirtWeb from an unauthorized network has been intercepted! {:?}",
-                    remote_ip
-                );
+                log::error!("An attempt to access VirtWeb from an unauthorized network has been intercepted! {:?}", remote_ip);
                 return Ok(req
                     .into_response(
                         HttpResponse::MethodNotAllowed()
@@ -89,8 +86,8 @@ where
                         Ok(auth) => auth,
                         Err(e) => {
                             log::error!(
-                                "Failed to extract API authentication information from request! {e}"
-                            );
+                            "Failed to extract API authentication information from request! {e}"
+                        );
                             return Ok(req
                                 .into_response(HttpResponse::PreconditionFailed().finish())
                                 .map_into_right_body());

virtweb_backend/src/nat/nat_conf_mode.rs

@@ -49,9 +49,7 @@ pub async fn sub_main() -> anyhow::Result<()> {
     let args = NatArgs::parse();
 
     if !args.network_file().exists() {
-        log::warn!(
-            "Cannot do anything for the network, because the NAT configuration file does not exixsts!"
-        );
+        log::warn!("Cannot do anything for the network, because the NAT configuration file does not exixsts!");
         return Ok(());
     }
 
@@ -186,9 +184,7 @@ fn toggle_port_forwarding(
         false => "tcp",
     };
 
-    log::info!(
-        "Forward (add={enable}) incoming {protocol} connections for {host_ip}:{host_port} to {guest_ip}:{guest_port} int {net_interface}"
-    );
+    log::info!("Forward (add={enable}) incoming {protocol} connections for {host_ip}:{host_port} to {guest_ip}:{guest_port} int {net_interface}");
 
     // Rule 1
     let cmd = Command::new(program)

virtweb_backend/src/utils/net_utils.rs

@@ -57,7 +57,7 @@ pub fn is_net_interface_name_valid<D: AsRef<str>>(int: D) -> bool {
 /// Get the list of available network interfaces
 pub fn net_list() -> Vec<String> {
     let mut networks = Networks::new();
-    networks.refresh(true);
+    networks.refresh_list();
 
     networks
         .list()

virtweb_backend/src/utils/rand_utils.rs

@@ -1,6 +1,12 @@
-use rand::distr::{Alphanumeric, SampleString};
+use rand::distributions::Alphanumeric;
+use rand::Rng;
 
 /// Generate a random string
 pub fn rand_str(len: usize) -> String {
-    Alphanumeric.sample_string(&mut rand::rng(), len)
+    let s: String = rand::thread_rng()
+        .sample_iter(&Alphanumeric)
+        .take(len)
+        .map(char::from)
+        .collect();
+    s
 }

virtweb_docs/SETUP_PROD.md

@@ -61,7 +61,7 @@ STORAGE=/home/virtweb/storage
 HYPERVISOR_URI=qemu:///system
 ```
 
-> Note: `HYPERVISOR_URI=qemu:///system` is used to specify that we want to use the main hypervisor.
+> Note: `HYPERVISOR_URI=qemu:///system` is used to sepcify that we want to use the main hypervisor.
 
 ## Register Virtweb service
 Before registering service, check that the configuration works correctly:

virtweb_frontend/README.md

@@ -1,12 +1,46 @@
-# Virtweb frontend
-Built with Vite + React + TypeScript
+# Getting Started with Create React App
 
-## Get dependencies
-```bash
-npm install
-```
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-# Run for developpment
-```bash
-npm run dev
-```
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

virtweb_frontend/eslint.config.js

@@ -1,54 +0,0 @@
-import js from "@eslint/js";
-import reactDom from "eslint-plugin-react-dom";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import reactX from "eslint-plugin-react-x";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config(
-  { ignores: ["dist"] },
-  {
-    extends: [
-      js.configs.recommended,
-      ...tseslint.configs.strictTypeChecked,
-      ...tseslint.configs.stylisticTypeChecked,
-    ],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-      "react-x": reactX,
-      "react-dom": reactDom,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": [
-        "warn",
-        { allowConstantExport: true },
-      ],
-      ...reactX.configs["recommended-typescript"].rules,
-      ...reactDom.configs.recommended.rules,
-      "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/no-misused-promises": "off",
-      "@typescript-eslint/no-floating-promises": "off",
-      "@typescript-eslint/restrict-template-expressions": "off",
-      "@typescript-eslint/no-extraneous-class": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-unsafe-assignment": "off",
-      "@typescript-eslint/no-unsafe-return": "off",
-      "@typescript-eslint/no-unsafe-call": "off",
-      "@typescript-eslint/no-unsafe-member-access": "off",
-      "@typescript-eslint/no-unsafe-argument": "off",
-      "react-refresh/only-export-components": "off",
-    },
-  }
-);

virtweb_frontend/package.json

@@ -3,51 +3,63 @@
   "version": "0.1.0",
   "type": "module",
   "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@fontsource/roboto": "^5.2.5",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/roboto": "^5.1.0",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
-    "@mui/x-charts": "^7.28.0",
-    "@mui/x-data-grid": "^7.28.1",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@mui/x-charts": "^7.22.3",
+    "@mui/x-data-grid": "^7.22.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/humanize-duration": "^3.27.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "date-and-time": "^3.6.0",
     "filesize": "^10.1.6",
     "humanize-duration": "^3.29.0",
-    "mui-file-input": "^7.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.4.0",
+    "mui-file-input": "^6.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.0.1",
     "react-syntax-highlighter": "^15.6.1",
-    "react-vnc": "^3.0.7",
-    "uuid": "^11.1.0",
+    "react-vnc": "^2.0.2",
+    "typescript": "^4.9.5",
+    "uuid": "^11.0.3",
+    "vite": "^6.0.0",
+    "vite-tsconfig-paths": "^5.1.3",
+    "web-vitals": "^3.5.2",
     "xml-formatter": "^3.6.0"
   },
-  "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@types/humanize-duration": "^3.27.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-dom": "^1.38.3",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-react-x": "^1.38.3",
-    "globals": "^15.15.0",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.3"
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

virtweb_frontend/src/App.tsx

@@ -51,10 +51,7 @@ export function App() {
 
   const context: AuthContext = {
     signedIn: signedIn,
-    setSignedIn: (s) => {
-      setSignedIn(s);
-      location.reload();
-    },
+    setSignedIn: (s) => setSignedIn(s),
   };
 
   const router = createBrowserRouter(
@@ -100,12 +97,12 @@ export function App() {
   );
 
   return (
-    <AuthContextK value={context}>
+    <AuthContextK.Provider value={context}>
       <RouterProvider router={router} />
-    </AuthContextK>
+    </AuthContextK.Provider>
   );
 }
 
 export function useAuth(): AuthContext {
-  return React.use(AuthContextK)!;
+  return React.useContext(AuthContextK)!;
 }

virtweb_frontend/src/api/ApiClient.ts

@@ -26,7 +26,7 @@ export class APIClient {
    * Get backend URL
    */
   static backendURL(): string {
-    const URL = String(import.meta.env.VITE_APP_BACKEND ?? "");
+    const URL = import.meta.env.VITE_APP_BACKEND ?? "";
     if (URL.length === 0) throw new Error("Backend URL undefined!");
     return URL;
   }
@@ -44,7 +44,7 @@ export class APIClient {
    */
   static async exec(args: RequestParams): Promise<APIResponse> {
     let body: string | undefined | FormData = undefined;
-    const headers: any = {};
+    let headers: any = {};
 
     // JSON request
     if (args.jsonData) {
@@ -66,25 +66,22 @@ export class APIClient {
     if (args.upProgress) {
       const res: XMLHttpRequest = await new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
-        xhr.upload.addEventListener("progress", (e) => {
-          args.upProgress!(e.loaded / e.total);
-        });
-        xhr.addEventListener("load", () => {
-          resolve(xhr);
-        });
-        xhr.addEventListener("error", () => {
-          reject(new Error("File upload failed"));
-        });
-        xhr.addEventListener("abort", () => {
-          reject(new Error("File upload aborted"));
-        });
-        xhr.addEventListener("timeout", () => {
-          reject(new Error("File upload timeout"));
-        });
+        xhr.upload.addEventListener("progress", (e) =>
+          args.upProgress!(e.loaded / e.total)
+        );
+        xhr.addEventListener("load", () => resolve(xhr));
+        xhr.addEventListener("error", () =>
+          reject(new Error("File upload failed"))
+        );
+        xhr.addEventListener("abort", () =>
+          reject(new Error("File upload aborted"))
+        );
+        xhr.addEventListener("timeout", () =>
+          reject(new Error("File upload timeout"))
+        );
         xhr.open(args.method, url, true);
         xhr.withCredentials = true;
         for (const key in headers) {
-          // eslint-disable-next-line no-prototype-builtins
           if (headers.hasOwnProperty(key))
             xhr.setRequestHeader(key, headers[key]);
         }

virtweb_frontend/src/api/NWFilterApi.ts

@@ -140,7 +140,7 @@ export interface NWFilter {
   rules: NWFilterRule[];
 }
 
-export function NWFilterURL(n: NWFilter, edit = false): string {
+export function NWFilterURL(n: NWFilter, edit: boolean = false): string {
   return `/nwfilter/${n.uuid}${edit ? "/edit" : ""}`;
 }
 
@@ -221,7 +221,7 @@ export class NWFilterApi {
   static async Delete(n: NWFilter): Promise<void> {
     await APIClient.exec({
       method: "DELETE",
-      uri: `/nwfilter/${n.uuid!}`,
+      uri: `/nwfilter/${n.uuid}`,
     });
   }
 }

virtweb_frontend/src/api/NetworksApi.ts

@@ -53,7 +53,7 @@ export interface NetworkInfo {
 
 export type NetworkStatus = "Started" | "Stopped";
 
-export function NetworkURL(n: NetworkInfo, edit = false): string {
+export function NetworkURL(n: NetworkInfo, edit: boolean = false): string {
   return `/net/${n.uuid}${edit ? "/edit" : ""}`;
 }
 

virtweb_frontend/src/api/TokensApi.ts

@@ -20,7 +20,7 @@ export interface APIToken {
   max_inactivity?: number;
 }
 
-export function APITokenURL(t: APIToken, edit = false): string {
+export function APITokenURL(t: APIToken, edit: boolean = false): string {
   return `/token/${t.id}${edit ? "/edit" : ""}`;
 }
 

virtweb_frontend/src/hooks/providers/AlertDialogProvider.tsx

@@ -39,7 +39,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <AlertContextK value={hook}>{p.children}</AlertContextK>
+      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
 
       <Dialog
         open={open}
@@ -67,5 +67,5 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useAlert(): AlertContext {
-  return React.use(AlertContextK)!;
+  return React.useContext(AlertContextK)!;
 }

virtweb_frontend/src/hooks/providers/ConfirmDialogProvider.tsx

@@ -59,13 +59,13 @@ export function ConfirmDialogProvider(
 
   return (
     <>
-      <ConfirmContextK value={hook}>
+      <ConfirmContextK.Provider value={hook}>
         {p.children}
-      </ConfirmContextK>
+      </ConfirmContextK.Provider>
 
       <Dialog
         open={open}
-        onClose={() => { handleClose(false); }}
+        onClose={() => handleClose(false)}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
@@ -76,10 +76,10 @@ export function ConfirmDialogProvider(
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => { handleClose(false); }} autoFocus>
+          <Button onClick={() => handleClose(false)} autoFocus>
             {cancelButton ?? "Cancel"}
           </Button>
-          <Button onClick={() => { handleClose(true); }} color="error">
+          <Button onClick={() => handleClose(true)} color="error">
             {confirmButton ?? "Confirm"}
           </Button>
         </DialogActions>
@@ -89,5 +89,5 @@ export function ConfirmDialogProvider(
 }
 
 export function useConfirm(): ConfirmContext {
-  return React.use(ConfirmContextK)!;
+  return React.useContext(ConfirmContextK)!;
 }

virtweb_frontend/src/hooks/providers/LoadingMessageProvider.tsx

@@ -6,10 +6,10 @@ import {
 } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
-interface LoadingMessageContext {
+type LoadingMessageContext = {
   show: (message: string) => void;
   hide: () => void;
-}
+};
 
 const LoadingMessageContextK =
   React.createContext<LoadingMessageContext | null>(null);
@@ -34,9 +34,9 @@ export function LoadingMessageProvider(
 
   return (
     <>
-      <LoadingMessageContextK value={hook}>
+      <LoadingMessageContextK.Provider value={hook}>
         {p.children}
-      </LoadingMessageContextK>
+      </LoadingMessageContextK.Provider>
 
       <Dialog open={open}>
         <DialogContent>
@@ -60,5 +60,5 @@ export function LoadingMessageProvider(
 }
 
 export function useLoadingMessage(): LoadingMessageContext {
-  return React.use(LoadingMessageContextK)!;
+  return React.useContext(LoadingMessageContextK)!;
 }

virtweb_frontend/src/hooks/providers/SnackbarProvider.tsx

@@ -24,9 +24,9 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <SnackbarContextK value={hook}>
+      <SnackbarContextK.Provider value={hook}>
         {p.children}
-      </SnackbarContextK>
+      </SnackbarContextK.Provider>
 
       <Snackbar
         open={open}
@@ -39,5 +39,5 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useSnackbar(): SnackbarContext {
-  return React.use(SnackbarContextK)!;
+  return React.useContext(SnackbarContextK)!;
 }

virtweb_frontend/src/index.tsx

@@ -7,6 +7,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import "./index.css";
+import reportWebVitals from "./reportWebVitals";
 import { LoadServerConfig } from "./widgets/LoadServerConfig";
 import { ThemeProvider, createTheme } from "@mui/material";
 import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
@@ -21,7 +22,7 @@ const darkTheme = createTheme({
 });
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root")!
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
@@ -40,3 +41,8 @@ root.render(
     </ThemeProvider>
   </React.StrictMode>
 );
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

virtweb_frontend/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

virtweb_frontend/src/routes/EditAPITokenRoute.tsx

@@ -116,7 +116,7 @@ function EditApiTokenRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
+  const forceUpdate = React.useCallback(() => updateState({}), []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditNWFilterRoute.tsx

@@ -99,7 +99,7 @@ function EditNetworkFilterRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
+  const forceUpdate = React.useCallback(() => updateState({}), []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -97,7 +97,7 @@ function EditNetworkRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
+  const forceUpdate = React.useCallback(() => updateState({}), []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -15,7 +15,7 @@ export function CreateVMRoute(): React.ReactElement {
   const alert = useAlert();
   const navigate = useNavigate();
 
-  const [vm, setVM] = React.useState(VMInfo.NewEmpty());
+  const [vm, setVM] = React.useState(VMInfo.NewEmpty);
 
   const create = async (v: VMInfo) => {
     try {
@@ -103,9 +103,7 @@ function EditVMInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => {
-    updateState({});
-  }, []);
+  const forceUpdate = React.useCallback(() => updateState({}), []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -96,7 +96,7 @@ function UploadIsoFileCard(p: {
       p.onFileUploaded();
     } catch (e) {
       console.error(e);
-      await alert(`Failed to perform file upload! ${e}`);
+      await alert("Failed to perform file upload! " + e);
     }
 
     setUploadProgress(null);
@@ -120,9 +120,7 @@ function UploadIsoFileCard(p: {
           value={value}
           onChange={handleChange}
           style={{ flex: 1 }}
-          slotProps={{
-            htmlInput: { accept: ServerApi.Config.iso_mimetypes.join(",") },
-          }}
+          inputProps={{ accept: ServerApi.Config.iso_mimetypes.join(",") }}
         />
 
         {value && <Button onClick={upload}>Upload file</Button>}
@@ -149,8 +147,6 @@ function UploadIsoFileFromUrlCard(p: {
       loadingMessage.show("Downloading file from URL...");
       await IsoFilesApi.UploadFromURL(url, actualFileName);
 
-      p.onFileUploaded();
-
       setURL("");
       setFilename(null);
       snackbar("Successfully downloaded file!");
@@ -168,18 +164,14 @@ function UploadIsoFileFromUrlCard(p: {
           label="URL"
           value={url}
           style={{ flex: 3 }}
-          onChange={(e) => {
-            setURL(e.target.value);
-          }}
+          onChange={(e) => setURL(e.target.value)}
         />
         <span style={{ width: "10px" }}></span>
         <TextField
           label="Filename"
           value={actualFileName}
           style={{ flex: 2 }}
-          onChange={(e) => {
-            setFilename(e.target.value);
-          }}
+          onChange={(e) => setFilename(e.target.value)}
         />
         {url !== "" && actualFileName !== "" && (
           <Button onClick={upload}>Upload file</Button>
@@ -206,7 +198,7 @@ function IsoFilesList(p: {
     try {
       const blob = await IsoFilesApi.Download(entry, setDlProgress);
 
-      downloadBlob(blob, entry.filename);
+      await downloadBlob(blob, entry.filename);
     } catch (e) {
       console.error(e);
       alert("Failed to download iso file!");
@@ -244,7 +236,7 @@ function IsoFilesList(p: {
       </Typography>
     );
 
-  const columns: GridColDef<IsoFile>[] = [
+  const columns: GridColDef[] = [
     { field: "filename", headerName: "File name", flex: 3 },
     {
       field: "size",
@@ -309,6 +301,7 @@ function IsoFilesList(p: {
           getRowId={(c) => c.filename}
           rows={p.list}
           columns={columns}
+          autoHeight={true}
         />
       </VirtWebPaper>
     </>

virtweb_frontend/src/routes/NetworkFiltersListRoute.tsx

@@ -66,7 +66,7 @@ function NetworkFiltersListRouteInner(p: {
     const onlyBuiltin = visibleFilters === VisibleFilters.Builtin;
 
     return p.list.filter((f) => NWFilterIsBuiltin(f) === onlyBuiltin);
-  }, [visibleFilters, p.list]);
+  }, [visibleFilters]);
 
   return (
     <VirtWebRouteContainer
@@ -78,9 +78,7 @@ function NetworkFiltersListRouteInner(p: {
             size="small"
             value={visibleFilters}
             exclusive
-            onChange={(_ev, v) => {
-              setVisibleFilters(v);
-            }}
+            onChange={(_ev, v) => setVisibleFilters(v)}
             aria-label="visible filters"
           >
             <ToggleButton value={VisibleFilters.All}>All</ToggleButton>
@@ -132,8 +130,8 @@ function NetworkFiltersListRouteInner(p: {
                   </TableCell>
                   <TableCell>
                     <ul>
-                      {t.join_filters.map((f) => (
-                        <li key={f}>{f}</li>
+                      {t.join_filters.map((f, n) => (
+                        <li key={n}>{f}</li>
                       ))}
                     </ul>
                   </TableCell>

virtweb_frontend/src/routes/SysInfoRoute.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import {
   mdiHarddisk,
   mdiInformation,
@@ -17,7 +16,7 @@ import {
   TableRow,
   Typography,
 } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import { PieChart } from "@mui/x-charts";
 import { filesize } from "filesize";
 import humanizeDuration from "humanize-duration";
@@ -237,7 +236,7 @@ export function SysInfoRouteInner(p: {
 function SysInfoDetailsTable(p: {
   label: string;
   icon: React.ReactElement;
-  entries: { label: string; value: string | number }[];
+  entries: Array<{ label: string; value: string | number }>;
 }): React.ReactElement {
   return (
     <VirtWebPaper

virtweb_frontend/src/routes/TokensListRoute.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
   Button,
@@ -100,9 +99,9 @@ export function TokensListRouteInner(p: {
                     {t.max_inactivity && timeDiff(0, t.max_inactivity)}
                   </TableCell>
                   <TableCell>
-                    {t.rights.map((r, n) => {
+                    {t.rights.map((r) => {
                       return (
-                        <div key={n}>
+                        <div>
                           {r.verb} {r.path}
                         </div>
                       );

virtweb_frontend/src/routes/VMListRoute.tsx

@@ -25,13 +25,13 @@ import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
 
 export function VMListRoute(): React.ReactElement {
-  const [groups, setGroups] = React.useState<(string | undefined)[]>();
+  const [groups, setGroups] = React.useState<Array<string | undefined>>();
   const [list, setList] = React.useState<VMInfo[] | undefined>();
 
   const loadKey = React.useRef(1);
 
   const load = async () => {
-    const groups: (string | undefined)[] = await GroupApi.GetList();
+    const groups: Array<string | undefined> = await GroupApi.GetList();
     const list = await VMApi.GetList();
 
     if (list.find((v) => !v.group) !== undefined) groups.push(undefined);
@@ -70,7 +70,7 @@ export function VMListRoute(): React.ReactElement {
 }
 
 function VMListWidget(p: {
-  groups: (string | undefined)[];
+  groups: Array<string | undefined>;
   list: VMInfo[];
   onReload: () => void;
 }): React.ReactElement {
@@ -115,8 +115,8 @@ function VMListWidget(p: {
           </TableRow>
         </TableHead>
         <TableBody>
-          {p.groups.map((g) => (
-            <React.Fragment key={g}>
+          {p.groups.map((g, num) => (
+            <React.Fragment key={num}>
               {p.groups.length > 1 && (
                 <TableRow>
                   <TableCell
@@ -125,11 +125,9 @@ function VMListWidget(p: {
                   >
                     <IconButton
                       size="small"
-                      onClick={() => {
-                        toggleHiddenGroup(g);
-                      }}
+                      onClick={() => toggleHiddenGroup(g)}
                     >
-                      {!hiddenGroups.has(g) ? (
+                      {!hiddenGroups?.has(g) ? (
                         <KeyboardArrowUpIcon />
                       ) : (
                         <KeyboardArrowDownIcon />
@@ -159,9 +157,7 @@ function VMListWidget(p: {
                       <TableCell>
                         <VMStatusWidget
                           vm={row}
-                          onChange={(s) => {
-                            updateVMState(row, s);
-                          }}
+                          onChange={(s) => updateVMState(row, s)}
                         />
                       </TableCell>
                       <TableCell>

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -1,16 +1,17 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
-import KeyboardAltIcon from "@mui/icons-material/KeyboardAlt";
 import { IconButton, Tooltip } from "@mui/material";
 import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { VncScreen, VncScreenHandle } from "react-vnc";
+import { VncScreen } from "react-vnc";
 import { ServerApi } from "../api/ServerApi";
 import { VMApi, VMInfo } from "../api/VMApi";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { time } from "../utils/DateUtils";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import RFB from "react-vnc/dist/types/noVNC/core/rfb";
+import KeyboardAltIcon from "@mui/icons-material/KeyboardAlt";
 
 interface VNCTokenInfo {
   url: string;
@@ -42,10 +43,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
 
   const [token, setToken] = React.useState<VNCTokenInfo | undefined>();
   const [counter, setCounter] = React.useState(1);
-  const [connected, setConnected] = React.useState(false);
+  const [rfb, setRFB] = React.useState<RFB | undefined>();
 
-  const vncRef = React.useRef<HTMLDivElement>(null);
-  const vncScreenRef = React.useRef<VncScreenHandle>(null);
+  const vncRef = React.createRef<HTMLDivElement>();
 
   const connect = async (force: boolean) => {
     try {
@@ -71,7 +71,7 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   };
 
   const disconnected = () => {
-    setConnected(false);
+    setRFB(undefined);
     connect(true);
   };
 
@@ -91,9 +91,7 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
     connect(false);
 
     if (vncRef.current) {
-      vncRef.current.onfullscreenchange = () => {
-        setCounter(counter + 1);
-      };
+      vncRef.current.onfullscreenchange = () => setCounter(counter + 1);
     }
   });
 
@@ -120,9 +118,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
         )}
 
         {/* Keystrokes */}
-        {connected && (
+        {rfb && (
           <Tooltip title="Send Ctrl+Alt+Del">
-            <IconButton onClick={() => vncScreenRef.current?.sendCtrlAltDel()}>
+            <IconButton onClick={() => rfb?.sendCtrlAltDel()}>
               <KeyboardAltIcon />
             </IconButton>
           </Tooltip>
@@ -139,15 +137,12 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
         }}
       >
         <VncScreen
-          ref={vncScreenRef}
           url={token.url}
           onDisconnect={() => {
-            console.info("VNC disconnected " + token.url);
+            console.info("VNC disconnected " + token?.url);
             disconnected();
           }}
-          onConnect={() => {
-            setConnected(true);
-          }}
+          onConnect={(rfb) => setRFB(rfb)}
         />
       </div>
     </div>

virtweb_frontend/src/routes/auth/LoginRoute.tsx

@@ -1,5 +1,4 @@
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { Visibility, VisibilityOff } from "@mui/icons-material";
 import {
   Alert,
   CircularProgress,
@@ -36,7 +35,7 @@ export function LoginRoute(): React.ReactElement {
   const canSubmit = username.length > 0 && password.length > 0;
 
   const [showPassword, setShowPassword] = React.useState(false);
-  const handleClickShowPassword = () => { setShowPassword((show) => !show); };
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
 
   const handleMouseDownPassword = (
     event: React.MouseEvent<HTMLButtonElement>
@@ -105,7 +104,7 @@ export function LoginRoute(): React.ReactElement {
               label="Username"
               name="username"
               value={username}
-              onChange={(e) => { setUsername(e.target.value); }}
+              onChange={(e) => setUsername(e.target.value)}
               autoComplete="username"
               autoFocus
             />
@@ -120,7 +119,7 @@ export function LoginRoute(): React.ReactElement {
                 type={showPassword ? "text" : "password"}
                 id="password"
                 value={password}
-                onChange={(e) => { setPassword(e.target.value); }}
+                onChange={(e) => setPassword(e.target.value)}
                 autoComplete="current-password"
                 endAdornment={
                   <InputAdornment position="end">
@@ -131,7 +130,7 @@ export function LoginRoute(): React.ReactElement {
                         onMouseDown={handleMouseDownPassword}
                         edge="end"
                       >
-                        {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
+                        {showPassword ? <VisibilityOff /> : <Visibility />}
                       </IconButton>
                     </Tooltip>
                   </InputAdornment>

virtweb_frontend/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

virtweb_frontend/src/utils/FilesUtils.ts

@@ -1,4 +1,4 @@
-export function downloadBlob(blob: Blob, filename: string) {
+export async function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
 
   const link = document.createElement("a");

virtweb_frontend/src/utils/RandUtils.ts

@@ -2,9 +2,8 @@
  * Generate a random MAC address
  */
 export function randomMacAddress(prefix: string | undefined): string {
-  prefix = prefix ?? "";
   let mac = "XX:XX:XX:XX:XX:XX";
-  mac = prefix + mac.slice(prefix.length);
+  mac = prefix + mac.slice(prefix?.length);
 
   return mac.replace(/X/g, () =>
     "0123456789abcdef".charAt(Math.floor(Math.random() * 16))

virtweb_frontend/src/widgets/AsyncWidget.tsx

@@ -19,7 +19,7 @@ export function AsyncWidget(p: {
 }): React.ReactElement {
   const [state, setState] = useState(State.Loading);
 
-  const counter = useRef<any>(null);
+  const counter = useRef<any | null>(null);
 
   const load = async () => {
     try {
@@ -67,7 +67,7 @@ export function AsyncWidget(p: {
 
           <Button onClick={load}>Try again</Button>
 
-          {p.errAdditionalElement?.()}
+          {p.errAdditionalElement && p.errAdditionalElement()}
         </Box>
       )
     );

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -13,9 +13,11 @@ import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemText
+  ListItemSecondaryAction,
+  ListItemText,
 } from "@mui/material";
 import { Outlet, useLocation } from "react-router-dom";
+import { isDebug } from "../utils/DebugUtils";
 import { RouterLink } from "./RouterLink";
 import { VirtWebAppBar } from "./VirtWebAppBar";
 
@@ -94,6 +96,7 @@ function NavLink(p: {
   icon: React.ReactElement;
   uri: string;
   label: string;
+  secondaryAction?: React.ReactElement;
 }): React.ReactElement {
   const location = useLocation();
   return (
@@ -101,6 +104,9 @@ function NavLink(p: {
       <ListItemButton selected={p.uri === location.pathname}>
         <ListItemIcon>{p.icon}</ListItemIcon>
         <ListItemText primary={p.label} />
+        {p.secondaryAction && (
+          <ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
+        )}
       </ListItemButton>
     </RouterLink>
   );

virtweb_frontend/src/widgets/BaseLoginPage.tsx

@@ -3,7 +3,7 @@ import Icon from "@mdi/react";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { Link, Outlet } from "react-router-dom";

virtweb_frontend/src/widgets/ConfigImportExportButtons.tsx

@@ -31,16 +31,14 @@ export function ConfigImportExportButtons(p: {
       fileEl.click();
 
       // Wait for a file to be chosen
-      await new Promise((res) => {
-        fileEl.addEventListener("change", () => {
-          res(null);
-        });
-      });
+      await new Promise((res, _rej) =>
+        fileEl.addEventListener("change", () => res(null))
+      );
 
       if ((fileEl.files?.length ?? 0) === 0) return null;
 
       // Import conf
-      const file = fileEl.files![0];
+      let file = fileEl.files![0];
       const content = await file.text();
       p.importConf?.(JSON.parse(content));
     } catch (e) {

virtweb_frontend/src/widgets/StateActionButton.tsx

@@ -23,7 +23,7 @@ export function StateActionButton<S>(p: {
       p.onExecuted();
     } catch (e) {
       console.error(e);
-      alert(`Failed to perform action! ${e}`);
+      alert("Failed to perform action! " + e);
     }
   };
 

virtweb_frontend/src/widgets/TabsWidget.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import { Box, Tab, Tabs } from "@mui/material";
 
 export interface TabWidgetOption<E> {
@@ -25,9 +24,7 @@ export function TabsWidget<E>(p: {
     <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
       <Tabs
         value={currTabIndex}
-        onChange={(_ev, newVal) => {
-          updateActiveTab(newVal);
-        }}
+        onChange={(_ev, newVal) => updateActiveTab(newVal)}
       >
         {activeOptions.map((o, index) => (
           <Tab key={index} label={o.label} style={{ color: o.color }} />

virtweb_frontend/src/widgets/forms/CheckboxInput.tsx

@@ -17,7 +17,7 @@ export function CheckboxInput(p: {
         <Checkbox
           disabled={!p.editable}
           checked={p.checked}
-          onChange={(e) => { p.onValueChange(e.target.checked); }}
+          onChange={(e) => p.onValueChange(e.target.checked)}
         />
       }
       label={p.label}

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 
 export function EditSection(
   p: {

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React from "react";
 import { TextInput } from "./TextInput";
 
@@ -33,7 +32,7 @@ export function IPInputWithMask(p: {
 
   const currValue =
     p.ipAndMask ??
-    `${p.ip ?? ""}${p.mask || showSlash.current ? "/" : ""}${p.mask ?? ""}`;
+    (p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
 
   const { onValueChange, ...props } = p;
   return (
@@ -45,7 +44,7 @@ export function IPInputWithMask(p: {
           return;
         }
 
-        const split = v.split("/");
+        const split = v?.split("/");
         const ip =
           p.version === 4 ? sanitizeIpV4(split[0]) : sanitizeIpV6(split[0]);
         let mask = undefined;
@@ -70,7 +69,7 @@ export function IPInputWithMask(p: {
 function sanitizeIpV4(s: string | undefined): string | undefined {
   if (s === "" || s === undefined) return s;
 
-  const split = s.split(".");
+  let split = s.split(".");
   if (split.length > 4) split.splice(4);
 
   let needAnotherIteration = false;
@@ -107,7 +106,7 @@ function sanitizeIpV6(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      const s = num.toString(16);
+      let s = num.toString(16);
       if (num > 0xffff) {
         needAnotherIteration = true;
         return s.slice(0, 4) + ":" + s.slice(4);

virtweb_frontend/src/widgets/forms/MACInput.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { TextInput } from "./TextInput";
 
 export function MACInput(p: {
@@ -33,7 +32,7 @@ function sanitizeMacAddress(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      const s = num.toString(16).padStart(2, "0");
+      let s = num.toString(16).padStart(2, "0");
       if (num > 0xff) {
         needAnotherIteration = true;
         return s.slice(0, 2) + ":" + s.slice(2);

virtweb_frontend/src/widgets/forms/NWFConnStateInput.tsx

@@ -12,7 +12,7 @@ export function NWFConnStateInput(p: {
       label="Connection state"
       value={p.value}
       onValueChange={(s) => {
-        p.onChange(s as any);
+        p.onChange?.(s as any);
       }}
       options={[
         { label: "None", value: undefined },

virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
-/* eslint-disable react-hooks/exhaustive-deps */
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { NWFilter, NWFilterURL } from "../../api/NWFilterApi";

virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx

@@ -13,7 +13,7 @@ export function NWFilterPriorityInput(p: {
       value={p.value?.toString()}
       type="number"
       onValueChange={(v) => {
-        p.onChange(v && v !== "" ? Number(v) : undefined);
+        p.onChange?.(v && v !== "" ? Number(v) : undefined);
       }}
       size={ServerApi.Config.constraints.nwfilter_priority}
       helperText="A lower priority value is accessed before one with a higher value"

virtweb_frontend/src/widgets/forms/NWFilterRules.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -67,19 +66,9 @@ export function NWFilterRules(p: {
             deleteRule(n);
           }}
           onGoDown={
-            n < p.rules.length - 1
-              ? () => {
-                  swapRules(n, n + 1);
-                }
-              : undefined
-          }
-          onGoUp={
-            n > 0
-              ? () => {
-                  swapRules(n, n - 1);
-                }
-              : undefined
+            n < p.rules.length - 1 ? () => swapRules(n, n + 1) : undefined
           }
+          onGoUp={n > 0 ? () => swapRules(n, n - 1) : undefined}
           {...p}
         />
       ))}
@@ -164,9 +153,7 @@ function NWRuleEdit(p: {
             editable={p.editable}
             onChange={p.onChange}
             selector={s}
-            onDelete={() => {
-              deleteSelector(n);
-            }}
+            onDelete={() => deleteSelector(n)}
           />
         ))}
       </CardContent>

virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx

@@ -25,7 +25,9 @@ export function NWFilterSelectInput(p: {
         value={selectedValue}
         onDelete={p.editable ? () => p.onChange?.(undefined) : undefined}
         onClick={
-          !p.editable ? () => navigate(NWFilterURL(selectedValue)) : undefined
+          !p.editable && selectedValue
+            ? () => navigate(NWFilterURL(selectedValue))
+            : undefined
         }
       />
     );
@@ -46,7 +48,7 @@ export function NWFilterSelectInput(p: {
       renderInput={(params) => (
         <TextField {...params} variant="standard" label={p.label} />
       )}
-      renderOption={(_props, option) => (
+      renderOption={(_props, option, _state) => (
         <NWFilterItem
           dense
           onClick={() => {

virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import { mdiIp } from "@mdi/js";
 import Icon from "@mdi/react";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -19,7 +18,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { IPInput } from "./IPInput";
 import { MACInput } from "./MACInput";
 import { TextInput } from "./TextInput";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 
 export function NetDHCPHostReservations(p: {
   editable: boolean;
@@ -131,7 +130,7 @@ function HostReservationWidget(p: {
             value={p.host.mac}
             onValueChange={(v) => {
               p.host.mac = v!;
-              p.onChange();
+              p.onChange?.();
             }}
           />
         )}
@@ -143,7 +142,7 @@ function HostReservationWidget(p: {
           value={p.host.ip}
           onValueChange={(v) => {
             p.host.ip = v!;
-            p.onChange();
+            p.onChange?.();
           }}
         />
       </div>

virtweb_frontend/src/widgets/forms/NetNatConfiguration.tsx

@@ -9,7 +9,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import React, { PropsWithChildren } from "react";
 import { NatEntry } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -54,7 +54,6 @@ export function NetNatConfiguration(p: {
     <>
       {p.nat.map((e, num) => (
         <NatEntryForm
-          // eslint-disable-next-line react-x/no-array-index-key
           key={num}
           {...p}
           entry={e}

virtweb_frontend/src/widgets/forms/PortInput.tsx

@@ -12,7 +12,7 @@ export function PortInput(p: {
       value={p.value?.toString() ?? ""}
       type="number"
       onValueChange={(v) => {
-        p.onChange(sanitizePort(v));
+        p.onChange?.(sanitizePort(v));
       }}
       checkValue={(v) => Number(v) <= 65535}
     />

virtweb_frontend/src/widgets/forms/RadioGroupInput.tsx

@@ -24,13 +24,10 @@ export function RadioGroupInput(p: {
       <RadioGroup
         row
         value={p.value}
-        onChange={(_ev, v) => {
-          p.onValueChange(v);
-        }}
+        onChange={(_ev, v) => p.onValueChange?.(v)}
       >
         {p.options.map((o) => (
           <FormControlLabel
-            key={o.value}
             disabled={!p.editable}
             value={o.value}
             control={<Radio />}

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -33,7 +33,7 @@ export function SelectInput(p: {
       <Select
         value={p.value ?? ""}
         label={p.label}
-        onChange={(e) => { p.onValueChange(e.target.value); }}
+        onChange={(e) => p.onValueChange(e.target.value)}
       >
         {p.options.map((e) => (
           <MenuItem

virtweb_frontend/src/widgets/forms/TextInput.tsx

@@ -2,7 +2,7 @@ import { TextField } from "@mui/material";
 import { LenConstraint } from "../../api/ServerApi";
 
 /**
- * Text input property edition
+ * Couple / Member property edition
  */
 export function TextInput(p: {
   label?: string;
@@ -42,14 +42,12 @@ export function TextInput(p: {
           e.target.value.length === 0 ? undefined : e.target.value
         )
       }
-      slotProps={{
-        htmlInput: {
-          maxLength: p.size?.max,
-        },
-        input: {
-          readOnly: !p.editable,
-          type: p.type,
-        },
+      inputProps={{
+        maxLength: p.size?.max,
+      }}
+      InputProps={{
+        readOnly: !p.editable,
+        type: p.type,
       }}
       variant={"standard"}
       style={p.style ?? { width: "100%", marginBottom: "15px" }}

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -40,7 +40,6 @@ export function VMDisksList(p: {
       {/* disks list */}
       {p.vm.disks.map((d, num) => (
         <DiskInfo
-          // eslint-disable-next-line react-x/no-array-index-key
           key={num}
           editable={p.editable}
           disk={d}

virtweb_frontend/src/widgets/forms/VMNetworkFilterParameters.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Button,

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-x/no-array-index-key */
 import { mdiNetworkOutline } from "@mdi/js";
 import Icon from "@mdi/react";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -11,7 +10,7 @@ import {
   ListItemText,
   Tooltip,
 } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import { NWFilter } from "../../api/NWFilterApi";
 import { NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -52,6 +51,7 @@ export function VMNetworksList(p: {
         {p.vm.networks.map((n, num) => (
           <EditSection key={num}>
             <NetworkInfoWidget
+              key={num}
               network={n}
               removeFromList={() => {
                 p.vm.networks.splice(num, 1);

virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx

@@ -19,7 +19,7 @@ export function VMSelectIsoInput(p: {
   attachedISOs: string[];
   onChange: (newVal: string[]) => void;
 }): React.ReactElement {
-  if (p.attachedISOs.length === 0 && !p.editable) return <></>;
+  if (!p.attachedISOs && !p.editable) return <></>;
 
   return (
     <>
@@ -27,7 +27,7 @@ export function VMSelectIsoInput(p: {
         const iso = p.isoList.find((d) => d.filename === isoName);
         return (
           <ListItem
-            key={isoName}
+            key={num}
             secondaryAction={
               p.editable && (
                 <IconButton
@@ -69,11 +69,12 @@ export function VMSelectIsoInput(p: {
           }
         }}
         options={p.isoList.map((i) => {
-          return {
-            label: `${i.filename} ${filesize(i.size)}`,
-            value: i.filename,
-          };
-        })}
+            return {
+              label: `${i.filename} ${filesize(i.size)}`,
+              value: i.filename,
+            };
+          })
+        }
       />
     </>
   );

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -1,5 +1,5 @@
 import { Button, Checkbox } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { IpConfig, NetworkApi, NetworkInfo } from "../../api/NetworksApi";
@@ -25,7 +25,7 @@ interface DetailsProps {
 }
 
 export function NetworkDetails(p: DetailsProps): React.ReactElement {
-  const [nicsList, setNicsList] = React.useState<string[] | undefined>();
+  const [nicsList, setNicsList] = React.useState<string[] | any>();
 
   const load = async () => {
     setNicsList(await ServerApi.GetNetworksList());
@@ -36,7 +36,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
       loadKey={"1"}
       load={load}
       errMsg="Failed to load the list of host network cards!"
-      build={() => <NetworkDetailsInner nicsList={nicsList!} {...p} />}
+      build={() => <NetworkDetailsInner nicsList={nicsList} {...p} />}
     />
   );
 }
@@ -260,7 +260,7 @@ function IPSection(p: {
   const confirm = useConfirm();
 
   const toggleNetwork = async () => {
-    if (p.config) {
+    if (!!p.config) {
       if (
         !(await confirm(
           `Do you really want to disable IPv${p.version} on this network? Specific configuration will be deleted!`
@@ -268,11 +268,11 @@ function IPSection(p: {
       )
         return;
 
-      p.onChange(undefined);
+      p.onChange?.(undefined);
       return;
     }
 
-    p.onChange({
+    p.onChange?.({
       bridge_address: p.version === 4 ? "192.168.1.1" : "fd00::1",
       prefix: p.version === 4 ? 24 : 8,
     });
@@ -298,7 +298,7 @@ function IPSection(p: {
       p.config!.dhcp = undefined;
     }
 
-    p.onChange(p.config);
+    p.onChange?.(p.config);
   };
 
   const toggleNAT = async (v: boolean) => {
@@ -306,7 +306,7 @@ function IPSection(p: {
       p.config!.nat = [];
     } else {
       if (
-        (p.config?.nat?.length ?? 0) > 0 &&
+        (p.config?.nat?.length ?? 0 > 0) &&
         !(await confirm(
           `Do you really want to disable IPv${p.version} NAT port forwarding on this network? Specific configuration will be deleted!`
         ))
@@ -315,7 +315,7 @@ function IPSection(p: {
       p.config!.nat = undefined;
     }
 
-    p.onChange(p.config);
+    p.onChange?.(p.config);
   };
 
   if (!p.config && !p.editable) return <></>;
@@ -338,10 +338,10 @@ function IPSection(p: {
               editable={p.editable}
               label="Bridge address"
               version={p.version}
-              value={p.config.bridge_address}
+              value={p.config?.bridge_address}
               onValueChange={(v) => {
                 p.config!.bridge_address = v ?? "";
-                p.onChange(p.config);
+                p.onChange?.(p.config);
               }}
             />
 
@@ -352,7 +352,7 @@ function IPSection(p: {
               type="number"
               onValueChange={(v) => {
                 p.config!.prefix = Number(v);
-                p.onChange(p.config);
+                p.onChange?.(p.config);
               }}
               size={
                 p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
@@ -407,7 +407,7 @@ function IPSection(p: {
             dhcp={p.config.dhcp}
             onChange={(d) => {
               p.config!.dhcp = d;
-              p.onChange(p.config);
+              p.onChange?.(p.config);
             }}
           />
         </EditSection>
@@ -431,7 +431,7 @@ function IPSection(p: {
               nat={p.config.nat}
               onChange={(n) => {
                 p.config!.nat = n;
-                p.onChange(p.config);
+                p.onChange?.(p.config);
               }}
             />
           )}

virtweb_frontend/src/widgets/net/NetworkStatusWidget.tsx

@@ -29,13 +29,13 @@ export function NetworkStatusWidget(p: {
     }
   };
 
-  const changedAction = () => { setState(undefined); };
+  const changedAction = () => setState(undefined);
 
   React.useEffect(() => {
     refresh();
     const i = setInterval(() => refresh(), 3000);
 
-    return () => { clearInterval(i); };
+    return () => clearInterval(i);
   });
 
   if (state === undefined)

virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import React, { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import {
@@ -28,9 +28,7 @@ interface DetailsProps {
 }
 
 export function NWFilterDetails(p: DetailsProps): ReactElement {
-  const [nwFiltersList, setNwFiltersList] = React.useState<
-    NWFilter[] | undefined
-  >();
+  const [nwFiltersList, setNwFiltersList] = React.useState<NWFilter[] | any>();
 
   const load = async () => {
     setNwFiltersList(await NWFilterApi.GetList());
@@ -42,7 +40,7 @@ export function NWFilterDetails(p: DetailsProps): ReactElement {
       load={load}
       errMsg="Failed to load the list of network filters!"
       build={() => (
-        <NetworkFilterDetailsInner nwFiltersList={nwFiltersList!} {...p} />
+        <NetworkFilterDetailsInner nwFiltersList={nwFiltersList} {...p} />
       )}
     />
   );
@@ -118,7 +116,7 @@ function NetworkFilterDetailsTabGeneral(
             p.nwfilter.name = v ?? "";
             p.onChange?.();
           }}
-          checkValue={(v) => /^[a-zA-Z0-9_-]+$/.test(v)}
+          checkValue={(v) => /^[a-zA-Z0-9\_\-]+$/.test(v)}
           size={ServerApi.Config.constraints.nwfilter_name_size}
         />
 

virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { GroupApi } from "../../api/GroupApi";
@@ -161,14 +161,14 @@ function APITokenTabGeneral(p: DetailsInnerProps): React.ReactElement {
         {p.status === TokenWidgetStatus.Create && (
           <RadioGroupInput
             {...p}
-            editable={true}
+            editable={p.status === TokenWidgetStatus.Create}
             options={[
               { label: "IPv4", value: "4" },
               { label: "IPv6", value: "6" },
             ]}
             value={ipVersion.toString()}
             onValueChange={(v) => {
-              setIpVersion(Number(v) as 4 | 6);
+              setIpVersion(Number(v) as any);
             }}
             label="Token IP restriction version"
           />

virtweb_frontend/src/widgets/tokens/TokenRawRightsEditor.tsx

@@ -63,7 +63,6 @@ export function TokenRawRightsEditor(p: {
         </TableHead>
         <TableBody>
           {p.token.rights.map((r, num) => (
-            // eslint-disable-next-line react-x/no-array-index-key
             <TableRow key={num} hover>
               <TableCell style={{ width: "100px" }}>
                 <SelectInput
@@ -96,11 +95,7 @@ export function TokenRawRightsEditor(p: {
               </TableCell>
               {p.editable && (
                 <TableCell style={{ width: "100px" }}>
-                  <IconButton
-                    onClick={() => {
-                      deleteRule(num);
-                    }}
-                  >
+                  <IconButton onClick={() => deleteRule(num)}>
                     <Tooltip title="Remove the rule">
                       <DeleteIcon />
                     </Tooltip>

virtweb_frontend/src/widgets/tokens/TokenRightsEditor.tsx

@@ -85,8 +85,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.vms.map((v) => (
-              <TableRow hover key={v.uuid}>
+            {p.vms.map((v, n) => (
+              <TableRow hover key={n}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -185,8 +185,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.vms.map((v) => (
-              <TableRow hover key={v.uuid}>
+            {p.vms.map((v, n) => (
+              <TableRow hover key={n}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -306,8 +306,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.groups.map((v) => (
-              <TableRow hover key={v}>
+            {p.groups.map((v, n) => (
+              <TableRow hover key={n}>
                 <TableCell>{v}</TableCell>
                 <CellRight
                   {...p}
@@ -448,8 +448,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per network operations */}
-            {p.networks.map((v) => (
-              <TableRow hover key={v.uuid}>
+            {p.networks.map((v, n) => (
+              <TableRow hover key={n}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -568,15 +568,15 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per network filter operations */}
-            {p.nwFilters.map((v) => (
-              <TableRow hover key={v.uuid}>
+            {p.nwFilters.map((v, n) => (
+              <TableRow hover key={n}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
                   right={{ verb: "GET", path: `/api/nwfilter/${v.uuid}` }}
                   parent={{ verb: "GET", path: "/api/nwfilter/*" }}
                 />
-                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name) ? (
+                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
                   <TableCell></TableCell>
                 ) : (
                   <CellRight
@@ -585,7 +585,7 @@ export function TokenRightsEditor(p: {
                     parent={{ verb: "PUT", path: "/api/nwfilter/*" }}
                   />
                 )}
-                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name) ? (
+                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
                   <TableCell></TableCell>
                 ) : (
                   <CellRight
@@ -645,8 +645,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per API token operations */}
-            {p.tokens.map((v) => (
-              <TableRow hover key={v.id}>
+            {p.tokens.map((v, n) => (
+              <TableRow hover key={n}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -767,7 +767,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
   const parentActivated =
     !!p.parent &&
     p.token.rights.findIndex(
-      (r) => r.verb === p.parent?.verb && r.path === p.parent.path
+      (r) => r.verb === p.parent?.verb && r.path === p.parent?.path
     ) !== -1;
 
   const toggle = (a: boolean) => {
@@ -804,9 +804,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
               <Checkbox
                 checked={activated || parentActivated}
                 disabled={!p.editable || parentActivated}
-                onChange={(_e, a) => {
-                  toggle(a);
-                }}
+                onChange={(_e, a) => toggle(a)}
               />
             }
             label={p.label}
@@ -816,9 +814,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
             <Checkbox
               checked={activated || parentActivated}
               disabled={!p.editable || parentActivated}
-              onChange={(_e, a) => {
-                toggle(a);
-              }}
+              onChange={(_e, a) => toggle(a)}
             />
           </span>
         )}

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -1,7 +1,7 @@
 import AddIcon from "@mui/icons-material/Add";
 import ListIcon from "@mui/icons-material/List";
 import { Button, IconButton, Tooltip } from "@mui/material";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { validate as validateUUID } from "uuid";
@@ -35,16 +35,14 @@ interface DetailsProps {
 }
 
 export function VMDetails(p: DetailsProps): React.ReactElement {
-  const [groupsList, setGroupsList] = React.useState<string[] | undefined>();
-  const [isoList, setIsoList] = React.useState<IsoFile[] | undefined>();
+  const [groupsList, setGroupsList] = React.useState<string[] | any>();
+  const [isoList, setIsoList] = React.useState<IsoFile[] | any>();
   const [vcpuCombinations, setVCPUCombinations] = React.useState<
-    number[] | undefined
-  >();
-  const [networksList, setNetworksList] = React.useState<
-    NetworkInfo[] | undefined
+    number[] | any
   >();
+  const [networksList, setNetworksList] = React.useState<NetworkInfo[] | any>();
   const [networkFiltersList, setNetworkFiltersList] = React.useState<
-    NWFilter[] | undefined
+    NWFilter[] | any
   >();
 
   const load = async () => {
@@ -62,11 +60,11 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
       errMsg="Failed to load the list of ISO files"
       build={() => (
         <VMDetailsInner
-          groupsList={groupsList!}
-          isoList={isoList!}
-          vcpuCombinations={vcpuCombinations!}
-          networksList={networksList!}
-          networkFiltersList={networkFiltersList!}
+          groupsList={groupsList}
+          isoList={isoList}
+          vcpuCombinations={vcpuCombinations}
+          networksList={networksList}
+          networkFiltersList={networkFiltersList}
           {...p}
         />
       )}
@@ -204,7 +202,7 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
               editable={p.editable}
               label="Group"
               onValueChange={(v) => {
-                p.vm.group = v!;
+                p.vm.group = v! as any;
                 p.onChange?.();
               }}
               value={p.vm.group}
@@ -224,11 +222,7 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
                   : "Add a new group instead of using existing one"
               }
             >
-              <IconButton
-                onClick={() => {
-                  setAddGroup(!addGroup);
-                }}
-              >
+              <IconButton onClick={() => setAddGroup(!addGroup)}>
                 {addGroup ? <ListIcon /> : <AddIcon />}
               </IconButton>
             </Tooltip>

virtweb_frontend/src/widgets/vms/VMScreenshot.tsx

@@ -9,7 +9,7 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
     string | undefined
   >();
 
-  const int = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const int = React.useRef<number | undefined>();
 
   React.useEffect(() => {
     const refresh = async () => {
@@ -25,9 +25,7 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
 
     if (int.current === undefined) {
       refresh();
-      int.current = setInterval(() => {
-        refresh();
-      }, 5000);
+      int.current = setInterval(() => refresh(), 5000);
     }
 
     return () => {

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -31,19 +31,13 @@ export function VMStatusWidget(p: {
     }
   };
 
-  const changedAction = () => {
-    setState(undefined);
-  };
+  const changedAction = () => setState(undefined);
 
   React.useEffect(() => {
     refresh();
-    const i = setInterval(() => {
-      refresh();
-    }, 3000);
+    const i = setInterval(() => refresh(), 3000);
 
-    return () => {
-      clearInterval(i);
-    };
+    return () => clearInterval(i);
   });
 
   if (state === undefined)
@@ -65,7 +59,6 @@ export function VMStatusWidget(p: {
             icon={<PersonalVideoIcon />}
             tooltip="Graphical remote control over the VM"
             performAction={async () => navigate(p.vm.VNCURL)}
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             onExecuted={() => {}}
           />
         )

virtweb_frontend/tsconfig.app.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

virtweb_frontend/tsconfig.json

@@ -1,7 +1,27 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "target": "ESNext",
+    "types": ["vite/client"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
   ]
 }

virtweb_frontend/tsconfig.node.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

virtweb_frontend/vite.config.ts

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  // depending on your application, base can also be "/"
+  base: "/",
+  plugins: [react(), viteTsconfigPaths()],
+  server: {
+    // this ensures that the browser opens upon server start
+    open: true,
+    // this sets a default port to 3000
+    port: 3000,
+  },
+});