Update virtweb_backend/src/constants.rs

Reviewed-on: #305

.drone.yml

@@ -11,7 +11,8 @@ steps:
       path: /tmp/web_build
   commands:
   - cd virtweb_frontend
-  - npm install
+  - npm install --legacy-peer-deps # TODO : remove when mui-file-input is updated
+  - npm run lint
   - npm run build
   - mv dist /tmp/web_build
 
@@ -25,6 +26,7 @@ steps:
   - rustup component add clippy
   - cd virtweb_backend
   - cargo clippy -- -D warnings
+  - cargo clippy --examples -- -D warnings
   - cargo test
 
 - name: backend_compile
@@ -34,6 +36,8 @@ steps:
     path: /usr/local/cargo/registry
   - name: web_app
     path: /tmp/web_build
+  - name: release
+    path: /tmp/release
   depends_on:
   - backend_check
   - web_build
@@ -43,10 +47,30 @@ 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,9 +1,3 @@
 {
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["local>renovate/presets"]
-  "packageRules": [
-    {
-      "matchUpdateTypes": ["major", "minor", "patch"],
-      "automerge": true
-    }
-  ]
 }

virtweb_backend/Cargo.toml

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

virtweb_backend/docker-compose.yaml

@@ -1,9 +1,8 @@
 services:
   oidc:
-    image: qlik/simple-oidc-provider
+    image: dexidp/dex
-    environment:
-    - REDIRECTS=http://localhost:3000/oidc_cb,http://localhost:5173/oidc_cb
-    - PORT=9001
     ports:
       - 9001:9001
-    
+    volumes:
+      - ./docker/dex:/conf:ro
+    command: [ "dex", "serve", "/conf/dex.config.yaml" ]

virtweb_backend/docker/dex/dex.config.yaml

@@ -0,0 +1,27 @@
+issuer: http://127.0.0.1:9001/dex
+
+storage:
+  type: memory
+
+web:
+  http: 0.0.0.0:9001
+
+oauth2:
+  # Automate some clicking
+  # Note: this might actually make some tests pass that otherwise wouldn't.
+  skipApprovalScreen: false
+
+connectors:
+  # Note: this might actually make some tests pass that otherwise wouldn't.
+  - type: mockCallback
+    id: mock
+    name: Example
+
+# Basic OP test suite requires two clients.
+staticClients:
+  - id: foo
+    secret: bar
+    redirectURIs:
+      - http://localhost:3000/oidc_cb
+      - http://localhost:5173/oidc_cb
+    name: Project

virtweb_backend/examples/api_curl.rs

@@ -55,12 +55,13 @@ fn main() {
 
     let jwt = key.sign_jwt(&claims).expect("Failed to sign JWT!");
 
-    Command::new("curl")
+    let err = 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!")
+
+    panic!("Failed to run cURL! {err}")
 }

virtweb_backend/src/actors/mod.rs

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

virtweb_backend/src/actors/vnc_actor.rs

@@ -1,209 +0,0 @@
-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

@@ -0,0 +1,129 @@
+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/app_config.rs

@@ -68,7 +68,7 @@ pub struct AppConfig {
     #[arg(
         long,
         env,
-        default_value = "http://localhost:9001/.well-known/openid-configuration"
+        default_value = "http://localhost:9001/dex/.well-known/openid-configuration"
     )]
     pub oidc_configuration_url: String,
 

virtweb_backend/src/constants.rs

@@ -17,10 +17,11 @@ pub const ROUTES_WITHOUT_AUTH: [&str; 5] = [
 ];
 
 /// Allowed ISO mimetypes
-pub const ALLOWED_ISO_MIME_TYPES: [&str; 3] = [
+pub const ALLOWED_ISO_MIME_TYPES: [&str; 4] = [
     "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::api_tokens_controller::rest_token::RestToken;
 use crate::controllers::HttpResult;
-use actix_web::{web, HttpResponse};
+use crate::controllers::api_tokens_controller::rest_token::RestToken;
+use actix_web::{HttpResponse, web};
 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::{web, HttpResponse, Responder};
+use actix_web::{HttpResponse, Responder, web};
 use light_openid::basic_state_manager::BasicStateManager;
 
 use crate::app_config::AppConfig;

virtweb_backend/src/controllers/groups_controller.rs

@@ -1,5 +1,8 @@
 use crate::controllers::{HttpResult, LibVirtReq};
+use crate::extractors::group_vm_id_extractor::GroupVmIdExtractor;
+use crate::libvirt_rest_structures::vm::VMInfo;
 use actix_web::HttpResponse;
+use std::collections::HashMap;
 
 /// Get the list of groups
 pub async fn list(client: LibVirtReq) -> HttpResult {
@@ -14,3 +17,132 @@ pub async fn list(client: LibVirtReq) -> HttpResult {
 
     Ok(HttpResponse::Ok().json(groups))
 }
+
+/// Get information about the VMs of a group
+pub async fn vm_info(vms_xml: GroupVmIdExtractor) -> HttpResult {
+    let mut vms = Vec::new();
+    for vm in vms_xml.0 {
+        vms.push(VMInfo::from_domain(vm)?)
+    }
+    Ok(HttpResponse::Ok().json(vms))
+}
+
+#[derive(Default, serde::Serialize)]
+pub struct TreatmentResult {
+    ok: usize,
+    failed: usize,
+}
+
+/// Start the VMs of a group
+pub async fn vm_start(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.start_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Shutdown the VMs of a group
+pub async fn vm_shutdown(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.shutdown_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Suspend the VMs of a group
+pub async fn vm_suspend(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.suspend_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Resume the VMs of a group
+pub async fn vm_resume(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.resume_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Kill the VMs of a group
+pub async fn vm_kill(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.kill_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Reset the VMs of a group
+pub async fn vm_reset(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut res = TreatmentResult::default();
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            match client.reset_domain(uuid).await {
+                Ok(_) => res.ok += 1,
+                Err(_) => res.failed += 1,
+            }
+        }
+    }
+    Ok(HttpResponse::Ok().json(res))
+}
+
+/// Get the screenshot of the VMs of a group
+pub async fn vm_screenshot(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    if vms.0.is_empty() {
+        return Ok(HttpResponse::NoContent().finish());
+    }
+
+    let image = if vms.0.len() == 1 {
+        client.screenshot_domain(vms.0[0].uuid.unwrap()).await?
+    } else {
+        return Ok(
+            HttpResponse::UnprocessableEntity().json("Cannot return multiple VM screenshots!!")
+        );
+    };
+
+    Ok(HttpResponse::Ok().content_type("image/png").body(image))
+}
+
+/// Get the state of the VMs
+pub async fn vm_state(client: LibVirtReq, vms: GroupVmIdExtractor) -> HttpResult {
+    let mut states = HashMap::new();
+
+    for vm in vms.0 {
+        if let Some(uuid) = vm.uuid {
+            states.insert(uuid, client.get_domain_state(uuid).await?);
+        }
+    }
+
+    Ok(HttpResponse::Ok().json(states))
+}

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::tempfile::TempFile;
 use actix_multipart::form::MultipartForm;
-use actix_web::{web, HttpRequest, HttpResponse};
+use actix_multipart::form::tempfile::TempFile;
+use actix_web::{HttpRequest, HttpResponse, web};
 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::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 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::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 
 #[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::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 
 #[derive(serde::Serialize, serde::Deserialize)]
 pub struct NetworkFilterID {

virtweb_backend/src/controllers/server_controller.rs

@@ -136,16 +136,13 @@ pub async fn server_info(client: LibVirtReq) -> HttpResult {
     system.refresh_all();
 
     let mut components = Components::new();
-    components.refresh_list();
+    components.refresh(true);
-    components.refresh();
 
     let mut disks = Disks::new();
-    disks.refresh_list();
+    disks.refresh(true);
-    disks.refresh();
 
     let mut networks = Networks::new();
-    networks.refresh_list();
+    networks.refresh(true);
-    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::{web, HttpResponse, Responder};
+    use actix_web::{HttpResponse, Responder, web};
     use rust_embed::RustEmbed;
 
     #[derive(RustEmbed)]

virtweb_backend/src/controllers/vm_controller.rs

@@ -1,11 +1,12 @@
-use crate::actors::vnc_actor::VNCActor;
+use crate::actors::vnc_handler;
 use crate::actors::vnc_tokens_actor::VNCTokensManager;
 use crate::controllers::{HttpResult, LibVirtReq};
-use crate::libvirt_lib_structures::domain::DomainState;
 use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::domain::DomainState;
 use crate::libvirt_rest_structures::vm::VMInfo;
-use actix_web::{web, HttpRequest, HttpResponse};
+use actix_web::{HttpRequest, HttpResponse, rt, web};
-use actix_web_actors::ws;
+use std::path::Path;
+use tokio::net::UnixStream;
 
 #[derive(serde::Serialize)]
 struct VMInfoAndState {
@@ -324,5 +325,19 @@ pub async fn vnc(
     };
 
     log::info!("Start VNC connection on socket {socket_path}");
-    Ok(ws::start(VNCActor::new(&socket_path).await?, &req, stream)?)
+
+    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)
 }

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

@@ -0,0 +1,66 @@
+use crate::controllers::LibVirtReq;
+use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::domain::DomainXML;
+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 std::future::Future;
+use std::pin::Pin;
+
+pub struct GroupVmIdExtractor(pub Vec<DomainXML>);
+
+#[derive(serde::Deserialize)]
+struct GroupIDInPath {
+    gid: VMGroupId,
+}
+
+#[derive(serde::Deserialize)]
+struct FilterVM {
+    vm_id: Option<XMLUuid>,
+}
+
+impl FromRequest for GroupVmIdExtractor {
+    type Error = Error;
+    type Future = Pin<Box<dyn Future<Output = Result<Self, Self::Error>>>>;
+
+    fn from_request(req: &HttpRequest, _payload: &mut Payload) -> Self::Future {
+        let req = req.clone();
+
+        Box::pin(async move {
+            let Ok(group_id) =
+                web::Path::<GroupIDInPath>::from_request(&req, &mut Payload::None).await
+            else {
+                return Err(ErrorBadRequest("Group ID not specified in path!"));
+            };
+            let group_id = group_id.into_inner().gid;
+
+            let filter_vm = match Query::<FilterVM>::from_request(&req, &mut Payload::None).await {
+                Ok(v) => v,
+                Err(e) => {
+                    log::error!("Failed to extract VM id from request! {e}");
+                    return Err(ErrorBadRequest("Failed to extract VM id from request!"));
+                }
+            };
+
+            let Ok(client) = LibVirtReq::from_request(&req, &mut Payload::None).await else {
+                return Err(ErrorBadRequest("Failed to extract client handle!"));
+            };
+
+            let vms = match client.get_full_group_vm_list(&group_id).await {
+                Ok(vms) => vms,
+                Err(e) => {
+                    log::error!("Failed to get the VMs of the group {group_id:?}: {e}");
+                    return Err(ErrorBadRequest("Failed to get the VMs of the group!"));
+                }
+            };
+
+            // Filter (if requested by the user)
+            Ok(GroupVmIdExtractor(match filter_vm.vm_id {
+                None => vms,
+                Some(id) => vms.into_iter().filter(|vms| vms.uuid == Some(id)).collect(),
+            }))
+        })
+    }
+}

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/extractors/mod.rs

@@ -1,3 +1,4 @@
 pub mod api_auth_extractor;
 pub mod auth_extractor;
+pub mod group_vm_id_extractor;
 pub mod local_auth_extractor;

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;
@@ -122,6 +122,21 @@ impl LibVirtClient {
         Ok(out)
     }
 
+    /// Get the full list of VMs of a given group
+    pub async fn get_full_group_vm_list(
+        &self,
+        group: &VMGroupId,
+    ) -> anyhow::Result<Vec<DomainXML>> {
+        let vms = self.get_full_domains_list().await?;
+        let mut out = Vec::new();
+        for vm in vms {
+            if VMInfo::from_domain(vm.clone())?.group == Some(group.clone()) {
+                out.push(vm);
+            }
+        }
+        Ok(out)
+    }
+
     /// Update a network configuration
     pub async fn update_network(
         &self,

virtweb_backend/src/libvirt_lib_structures/domain.rs

@@ -19,7 +19,7 @@ pub struct DomainMetadataXML {
 }
 
 /// OS information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "os")]
 pub struct OSXML {
     #[serde(rename = "@firmware", default)]
@@ -29,7 +29,7 @@ pub struct OSXML {
 }
 
 /// OS Type information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "os")]
 pub struct OSTypeXML {
     #[serde(rename = "@arch")]
@@ -41,7 +41,7 @@ pub struct OSTypeXML {
 }
 
 /// OS Loader information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "loader")]
 pub struct OSLoaderXML {
     #[serde(rename = "@secure")]
@@ -49,39 +49,39 @@ pub struct OSLoaderXML {
 }
 
 /// Hypervisor features
-#[derive(serde::Serialize, serde::Deserialize, Default, Debug)]
+#[derive(serde::Serialize, serde::Deserialize, Clone, Default, Debug)]
 #[serde(rename = "features")]
 pub struct FeaturesXML {
     pub acpi: ACPIXML,
 }
 
 /// ACPI feature
-#[derive(serde::Serialize, serde::Deserialize, Default, Debug)]
+#[derive(serde::Serialize, serde::Deserialize, Clone, Default, Debug)]
 #[serde(rename = "acpi")]
 pub struct ACPIXML {}
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "mac")]
 pub struct NetMacAddress {
     #[serde(rename = "@address")]
     pub address: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "source")]
 pub struct NetIntSourceXML {
     #[serde(rename = "@network")]
     pub network: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "model")]
 pub struct NetIntModelXML {
     #[serde(rename = "@type")]
     pub r#type: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "filterref")]
 pub struct NetIntFilterParameterXML {
     #[serde(rename = "@name")]
@@ -90,7 +90,7 @@ pub struct NetIntFilterParameterXML {
     pub value: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "filterref")]
 pub struct NetIntfilterRefXML {
     #[serde(rename = "@filter")]
@@ -99,7 +99,7 @@ pub struct NetIntfilterRefXML {
     pub parameters: Vec<NetIntFilterParameterXML>,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "interface")]
 pub struct DomainNetInterfaceXML {
     #[serde(rename = "@type")]
@@ -113,14 +113,14 @@ pub struct DomainNetInterfaceXML {
     pub filterref: Option<NetIntfilterRefXML>,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "input")]
 pub struct DomainInputXML {
     #[serde(rename = "@type")]
     pub r#type: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "backend")]
 pub struct TPMBackendXML {
     #[serde(rename = "@type")]
@@ -130,7 +130,7 @@ pub struct TPMBackendXML {
     pub r#version: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "tpm")]
 pub struct TPMDeviceXML {
     #[serde(rename = "@model")]
@@ -139,7 +139,7 @@ pub struct TPMDeviceXML {
 }
 
 /// Devices information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "devices")]
 pub struct DevicesXML {
     /// Graphics (used for VNC)
@@ -168,7 +168,7 @@ pub struct DevicesXML {
 }
 
 /// Graphics information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "graphics")]
 pub struct GraphicsXML {
     #[serde(rename = "@type")]
@@ -178,14 +178,14 @@ pub struct GraphicsXML {
 }
 
 /// Video device information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "video")]
 pub struct VideoXML {
     pub model: VideoModelXML,
 }
 
 /// Video model device information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "model")]
 pub struct VideoModelXML {
     #[serde(rename = "@type")]
@@ -193,7 +193,7 @@ pub struct VideoModelXML {
 }
 
 /// Disk information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "disk")]
 pub struct DiskXML {
     #[serde(rename = "@type")]
@@ -211,7 +211,7 @@ pub struct DiskXML {
     pub address: Option<DiskAddressXML>,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "driver")]
 pub struct DiskDriverXML {
     #[serde(rename = "@name")]
@@ -222,14 +222,14 @@ pub struct DiskDriverXML {
     pub r#cache: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "source")]
 pub struct DiskSourceXML {
     #[serde(rename = "@file")]
     pub file: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "target")]
 pub struct DiskTargetXML {
     #[serde(rename = "@dev")]
@@ -238,18 +238,18 @@ pub struct DiskTargetXML {
     pub bus: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "readonly")]
 pub struct DiskReadOnlyXML {}
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "boot")]
 pub struct DiskBootXML {
     #[serde(rename = "@order")]
     pub order: String,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "address")]
 pub struct DiskAddressXML {
     #[serde(rename = "@type")]
@@ -269,7 +269,7 @@ pub struct DiskAddressXML {
 }
 
 /// Domain RAM information
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "memory")]
 pub struct DomainMemoryXML {
     #[serde(rename = "@unit")]
@@ -279,7 +279,7 @@ pub struct DomainMemoryXML {
     pub memory: usize,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "topology")]
 pub struct DomainCPUTopology {
     #[serde(rename = "@sockets")]
@@ -290,14 +290,14 @@ pub struct DomainCPUTopology {
     pub threads: usize,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "cpu")]
 pub struct DomainVCPUXML {
     #[serde(rename = "$value")]
     pub body: usize,
 }
 
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "cpu")]
 pub struct DomainCPUXML {
     #[serde(rename = "@mode")]
@@ -306,7 +306,7 @@ pub struct DomainCPUXML {
 }
 
 /// Domain information, see https://libvirt.org/formatdomain.html
-#[derive(Debug, serde::Serialize, serde::Deserialize)]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
 #[serde(rename = "domain")]
 pub struct DomainXML {
     /// Domain type (kvm)

virtweb_backend/src/libvirt_lib_structures/mod.rs

@@ -1,4 +1,4 @@
-#[derive(serde::Serialize, serde::Deserialize, Clone, Copy, Debug)]
+#[derive(serde::Serialize, serde::Deserialize, Clone, Copy, Debug, Eq, PartialEq, Hash)]
 pub struct XMLUuid(pub uuid::Uuid);
 
 impl XMLUuid {

virtweb_backend/src/libvirt_rest_structures/net.rs

@@ -1,5 +1,5 @@
-use crate::libvirt_lib_structures::network::*;
 use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::network::*;
 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::domain::*;
 use crate::libvirt_lib_structures::XMLUuid;
+use crate::libvirt_lib_structures::domain::*;
 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::config::LogoutBehaviour;
 use actix_identity::IdentityMiddleware;
-use actix_multipart::form::tempfile::TempFileConfig;
+use actix_identity::config::LogoutBehaviour;
 use actix_multipart::form::MultipartFormConfig;
+use actix_multipart::form::tempfile::TempFileConfig;
 use actix_remote_ip::RemoteIPConfig;
-use actix_session::storage::CookieSessionStore;
 use actix_session::SessionMiddleware;
+use actix_session::storage::CookieSessionStore;
 use actix_web::cookie::{Key, SameSite};
 use actix_web::http::header;
 use actix_web::middleware::Logger;
 use actix_web::web::Data;
-use actix_web::{web, App, HttpServer};
+use actix_web::{App, HttpServer, web};
 use light_openid::basic_state_manager::BasicStateManager;
 use std::time::Duration;
 use virtweb_backend::actors::libvirt_actor::LibVirtActor;
@@ -212,6 +212,42 @@ async fn main() -> std::io::Result<()> {
             .route("/api/vnc", web::get().to(vm_controller::vnc))
             // Groups controller
             .route("/api/group/list", web::get().to(groups_controller::list))
+            .route(
+                "/api/group/{gid}/vm/info",
+                web::get().to(groups_controller::vm_info),
+            )
+            .route(
+                "/api/group/{gid}/vm/start",
+                web::get().to(groups_controller::vm_start),
+            )
+            .route(
+                "/api/group/{gid}/vm/shutdown",
+                web::get().to(groups_controller::vm_shutdown),
+            )
+            .route(
+                "/api/group/{gid}/vm/suspend",
+                web::get().to(groups_controller::vm_suspend),
+            )
+            .route(
+                "/api/group/{gid}/vm/resume",
+                web::get().to(groups_controller::vm_resume),
+            )
+            .route(
+                "/api/group/{gid}/vm/kill",
+                web::get().to(groups_controller::vm_kill),
+            )
+            .route(
+                "/api/group/{gid}/vm/reset",
+                web::get().to(groups_controller::vm_reset),
+            )
+            .route(
+                "/api/group/{gid}/vm/screenshot",
+                web::get().to(groups_controller::vm_screenshot),
+            )
+            .route(
+                "/api/group/{gid}/vm/state",
+                web::get().to(groups_controller::vm_state),
+            )
             // Network controller
             .route(
                 "/api/network/create",

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,7 +68,10 @@ 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()

virtweb_backend/src/nat/nat_conf_mode.rs

@@ -49,7 +49,9 @@ 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(());
     }
 
@@ -184,7 +186,9 @@ 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_list();
+    networks.refresh(true);
 
     networks
         .list()

virtweb_backend/src/utils/rand_utils.rs

@@ -1,12 +1,6 @@
-use rand::distributions::Alphanumeric;
+use rand::distr::{Alphanumeric, SampleString};
-use rand::Rng;
 
 /// Generate a random string
 pub fn rand_str(len: usize) -> String {
-    let s: String = rand::thread_rng()
+    Alphanumeric.sample_string(&mut rand::rng(), len)
-        .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 sepcify that we want to use the main hypervisor.
+> Note: `HYPERVISOR_URI=qemu:///system` is used to specify 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,46 +1,12 @@
-# Getting Started with Create React App
+# Virtweb frontend
+Built with Vite + React + TypeScript
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Get dependencies
+```bash
+npm install
+```
 
-## Available Scripts
+# Run for developpment
-
+```bash
-In the project directory, you can run:
+npm run dev
-
+```
-### `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

@@ -0,0 +1,54 @@
+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,63 +3,51 @@
   "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.11.1",
+    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.14.0",
-    "@fontsource/roboto": "^5.1.0",
+    "@fontsource/roboto": "^5.2.5",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^6.1.6",
+    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^6.1.6",
+    "@mui/material": "^7.0.0",
-    "@mui/x-charts": "^7.22.1",
+    "@mui/x-charts": "^7.28.0",
-    "@mui/x-data-grid": "^7.22.1",
+    "@mui/x-data-grid": "^7.28.1",
-    "@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": "^6.0.0",
+    "mui-file-input": "^7.0.0",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^7.4.0",
     "react-syntax-highlighter": "^15.6.1",
-    "react-vnc": "^2.0.2",
+    "react-vnc": "^3.0.7",
-    "typescript": "^4.9.5",
+    "uuid": "^11.1.0",
-    "uuid": "^11.0.2",
-    "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.0.1",
-    "web-vitals": "^3.5.2",
     "xml-formatter": "^3.6.0"
   },
-  "scripts": {
+  "devDependencies": {
-    "start": "vite",
+    "@eslint/js": "^9.21.0",
-    "build": "tsc && vite build",
+    "@types/humanize-duration": "^3.27.1",
-    "preview": "vite preview"
+    "@types/jest": "^29.5.14",
-  },
+    "@types/react": "^19.0.12",
-  "eslintConfig": {
+    "@types/react-dom": "^19.0.4",
-    "extends": [
+    "@types/react-syntax-highlighter": "^15.5.13",
-      "react-app",
+    "@types/uuid": "^10.0.0",
-      "react-app/jest"
+    "@vitejs/plugin-react": "^4.3.4",
-    ]
+    "eslint": "^9.21.0",
-  },
+    "eslint-plugin-react-dom": "^1.38.3",
-  "browserslist": {
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "production": [
+    "eslint-plugin-react-refresh": "^0.4.19",
-      ">0.2%",
+    "eslint-plugin-react-x": "^1.38.3",
-      "not dead",
+    "globals": "^15.15.0",
-      "not op_mini all"
+    "typescript": "^5.8.2",
-    ],
+    "typescript-eslint": "^8.24.1",
-    "development": [
+    "vite": "^6.2.3"
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

virtweb_frontend/src/App.tsx

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

virtweb_frontend/src/api/ApiClient.ts

@@ -26,7 +26,7 @@ export class APIClient {
    * Get backend URL
    */
   static backendURL(): string {
-    const URL = import.meta.env.VITE_APP_BACKEND ?? "";
+    const URL = String(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;
-    let headers: any = {};
+    const headers: any = {};
 
     // JSON request
     if (args.jsonData) {
@@ -66,22 +66,25 @@ export class APIClient {
     if (args.upProgress) {
       const res: XMLHttpRequest = await new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
-        xhr.upload.addEventListener("progress", (e) =>
+        xhr.upload.addEventListener("progress", (e) => {
-          args.upProgress!(e.loaded / e.total)
+          args.upProgress!(e.loaded / e.total);
-        );
+        });
-        xhr.addEventListener("load", () => resolve(xhr));
+        xhr.addEventListener("load", () => {
-        xhr.addEventListener("error", () =>
+          resolve(xhr);
-          reject(new Error("File upload failed"))
+        });
-        );
+        xhr.addEventListener("error", () => {
-        xhr.addEventListener("abort", () =>
+          reject(new Error("File upload failed"));
-          reject(new Error("File upload aborted"))
+        });
-        );
+        xhr.addEventListener("abort", () => {
-        xhr.addEventListener("timeout", () =>
+          reject(new Error("File upload aborted"));
-          reject(new Error("File upload timeout"))
+        });
-        );
+        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: boolean = false): string {
+export function NWFilterURL(n: NWFilter, edit = 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: boolean = false): string {
+export function NetworkURL(n: NetworkInfo, edit = 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: boolean = false): string {
+export function APITokenURL(t: APIToken, edit = 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.Provider value={hook}>{p.children}</AlertContextK.Provider>
+      <AlertContextK value={hook}>{p.children}</AlertContextK>
 
       <Dialog
         open={open}
@@ -67,5 +67,5 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useAlert(): AlertContext {
-  return React.useContext(AlertContextK)!;
+  return React.use(AlertContextK)!;
 }

virtweb_frontend/src/hooks/providers/ConfirmDialogProvider.tsx

@@ -59,13 +59,13 @@ export function ConfirmDialogProvider(
 
   return (
     <>
-      <ConfirmContextK.Provider value={hook}>
+      <ConfirmContextK value={hook}>
         {p.children}
-      </ConfirmContextK.Provider>
+      </ConfirmContextK>
 
       <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.useContext(ConfirmContextK)!;
+  return React.use(ConfirmContextK)!;
 }

virtweb_frontend/src/hooks/providers/LoadingMessageProvider.tsx

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

virtweb_frontend/src/hooks/providers/SnackbarProvider.tsx

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

virtweb_frontend/src/index.tsx

@@ -7,7 +7,6 @@ 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";
@@ -22,7 +21,7 @@ const darkTheme = createTheme({
 });
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root")!
 );
 root.render(
   <React.StrictMode>
@@ -41,8 +40,3 @@ 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

@@ -1,15 +0,0 @@
-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,7 +103,9 @@ 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,7 +120,9 @@ function UploadIsoFileCard(p: {
           value={value}
           onChange={handleChange}
           style={{ flex: 1 }}
-          inputProps={{ accept: ServerApi.Config.iso_mimetypes.join(",") }}
+          slotProps={{
+            htmlInput: { accept: ServerApi.Config.iso_mimetypes.join(",") },
+          }}
         />
 
         {value && <Button onClick={upload}>Upload file</Button>}
@@ -147,6 +149,8 @@ function UploadIsoFileFromUrlCard(p: {
       loadingMessage.show("Downloading file from URL...");
       await IsoFilesApi.UploadFromURL(url, actualFileName);
 
+      p.onFileUploaded();
+
       setURL("");
       setFilename(null);
       snackbar("Successfully downloaded file!");
@@ -164,14 +168,18 @@ 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>
@@ -198,7 +206,7 @@ function IsoFilesList(p: {
     try {
       const blob = await IsoFilesApi.Download(entry, setDlProgress);
 
-      await downloadBlob(blob, entry.filename);
+      downloadBlob(blob, entry.filename);
     } catch (e) {
       console.error(e);
       alert("Failed to download iso file!");
@@ -236,7 +244,7 @@ function IsoFilesList(p: {
       </Typography>
     );
 
-  const columns: GridColDef[] = [
+  const columns: GridColDef<IsoFile>[] = [
     { field: "filename", headerName: "File name", flex: 3 },
     {
       field: "size",
@@ -301,7 +309,6 @@ 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]);
+  }, [visibleFilters, p.list]);
 
   return (
     <VirtWebRouteContainer
@@ -78,7 +78,9 @@ 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>
@@ -130,8 +132,8 @@ function NetworkFiltersListRouteInner(p: {
                   </TableCell>
                   <TableCell>
                     <ul>
-                      {t.join_filters.map((f, n) => (
+                      {t.join_filters.map((f) => (
-                        <li key={n}>{f}</li>
+                        <li key={f}>{f}</li>
                       ))}
                     </ul>
                   </TableCell>

virtweb_frontend/src/routes/SysInfoRoute.tsx

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

virtweb_frontend/src/routes/TokensListRoute.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
   Button,
@@ -99,9 +100,9 @@ export function TokensListRouteInner(p: {
                     {t.max_inactivity && timeDiff(0, t.max_inactivity)}
                   </TableCell>
                   <TableCell>
-                    {t.rights.map((r) => {
+                    {t.rights.map((r, n) => {
                       return (
-                        <div>
+                        <div key={n}>
                           {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<Array<string | undefined>>();
+  const [groups, setGroups] = React.useState<(string | undefined)[]>();
   const [list, setList] = React.useState<VMInfo[] | undefined>();
 
   const loadKey = React.useRef(1);
 
   const load = async () => {
-    const groups: Array<string | undefined> = await GroupApi.GetList();
+    const groups: (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: Array<string | undefined>;
+  groups: (string | undefined)[];
   list: VMInfo[];
   onReload: () => void;
 }): React.ReactElement {
@@ -115,8 +115,8 @@ function VMListWidget(p: {
           </TableRow>
         </TableHead>
         <TableBody>
-          {p.groups.map((g, num) => (
+          {p.groups.map((g) => (
-            <React.Fragment key={num}>
+            <React.Fragment key={g}>
               {p.groups.length > 1 && (
                 <TableRow>
                   <TableCell
@@ -125,9 +125,11 @@ function VMListWidget(p: {
                   >
                     <IconButton
                       size="small"
-                      onClick={() => toggleHiddenGroup(g)}
+                      onClick={() => {
+                        toggleHiddenGroup(g);
+                      }}
                     >
-                      {!hiddenGroups?.has(g) ? (
+                      {!hiddenGroups.has(g) ? (
                         <KeyboardArrowUpIcon />
                       ) : (
                         <KeyboardArrowDownIcon />
@@ -157,7 +159,9 @@ 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,17 +1,16 @@
 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 } from "react-vnc";
+import { VncScreen, VncScreenHandle } 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;
@@ -43,9 +42,10 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
 
   const [token, setToken] = React.useState<VNCTokenInfo | undefined>();
   const [counter, setCounter] = React.useState(1);
-  const [rfb, setRFB] = React.useState<RFB | undefined>();
+  const [connected, setConnected] = React.useState(false);
 
-  const vncRef = React.createRef<HTMLDivElement>();
+  const vncRef = React.useRef<HTMLDivElement>(null);
+  const vncScreenRef = React.useRef<VncScreenHandle>(null);
 
   const connect = async (force: boolean) => {
     try {
@@ -71,7 +71,7 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   };
 
   const disconnected = () => {
-    setRFB(undefined);
+    setConnected(false);
     connect(true);
   };
 
@@ -91,7 +91,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
     connect(false);
 
     if (vncRef.current) {
-      vncRef.current.onfullscreenchange = () => setCounter(counter + 1);
+      vncRef.current.onfullscreenchange = () => {
+        setCounter(counter + 1);
+      };
     }
   });
 
@@ -118,9 +120,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
         )}
 
         {/* Keystrokes */}
-        {rfb && (
+        {connected && (
           <Tooltip title="Send Ctrl+Alt+Del">
-            <IconButton onClick={() => rfb?.sendCtrlAltDel()}>
+            <IconButton onClick={() => vncScreenRef.current?.sendCtrlAltDel()}>
               <KeyboardAltIcon />
             </IconButton>
           </Tooltip>
@@ -137,12 +139,15 @@ 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={(rfb) => setRFB(rfb)}
+          onConnect={() => {
+            setConnected(true);
+          }}
         />
       </div>
     </div>

virtweb_frontend/src/routes/auth/LoginRoute.tsx

@@ -1,4 +1,5 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import {
   Alert,
   CircularProgress,
@@ -35,7 +36,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>
@@ -104,7 +105,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
             />
@@ -119,7 +120,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">
@@ -130,7 +131,7 @@ export function LoginRoute(): React.ReactElement {
                         onMouseDown={handleMouseDownPassword}
                         edge="end"
                       >
-                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                        {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
                       </IconButton>
                     </Tooltip>
                   </InputAdornment>

virtweb_frontend/src/setupTests.ts

@@ -1,5 +0,0 @@
-// 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 async function downloadBlob(blob: Blob, filename: string) {
+export function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
 
   const link = document.createElement("a");

virtweb_frontend/src/utils/RandUtils.ts

@@ -2,8 +2,9 @@
  * 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>(null);
+  const counter = useRef<any>(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,11 +13,9 @@ import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
+  ListItemText
-  ListItemText,
 } from "@mui/material";
 import { Outlet, useLocation } from "react-router-dom";
-import { isDebug } from "../utils/DebugUtils";
 import { RouterLink } from "./RouterLink";
 import { VirtWebAppBar } from "./VirtWebAppBar";
 
@@ -96,7 +94,6 @@ function NavLink(p: {
   icon: React.ReactElement;
   uri: string;
   label: string;
-  secondaryAction?: React.ReactElement;
 }): React.ReactElement {
   const location = useLocation();
   return (
@@ -104,9 +101,6 @@ 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/Grid2";
+import Grid from "@mui/material/Grid";
 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,14 +31,16 @@ export function ConfigImportExportButtons(p: {
       fileEl.click();
 
       // Wait for a file to be chosen
-      await new Promise((res, _rej) =>
+      await new Promise((res) => {
-        fileEl.addEventListener("change", () => res(null))
+        fileEl.addEventListener("change", () => {
-      );
+          res(null);
+        });
+      });
 
       if ((fileEl.files?.length ?? 0) === 0) return null;
 
       // Import conf
-      let file = fileEl.files![0];
+      const 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,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import { Box, Tab, Tabs } from "@mui/material";
 
 export interface TabWidgetOption<E> {
@@ -24,7 +25,9 @@ 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,6 +1,7 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 
 export function EditSection(
   p: {

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React from "react";
 import { TextInput } from "./TextInput";
 
@@ -32,7 +33,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 (
@@ -44,7 +45,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;
@@ -69,7 +70,7 @@ export function IPInputWithMask(p: {
 function sanitizeIpV4(s: string | undefined): string | undefined {
   if (s === "" || s === undefined) return s;
 
-  let split = s.split(".");
+  const split = s.split(".");
   if (split.length > 4) split.splice(4);
 
   let needAnotherIteration = false;
@@ -106,7 +107,7 @@ function sanitizeIpV6(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      let s = num.toString(16);
+      const 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,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { TextInput } from "./TextInput";
 
 export function MACInput(p: {
@@ -32,7 +33,7 @@ function sanitizeMacAddress(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      let s = num.toString(16).padStart(2, "0");
+      const 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,3 +1,5 @@
+/* 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,3 +1,4 @@
+/* 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";
@@ -66,9 +67,19 @@ export function NWFilterRules(p: {
             deleteRule(n);
           }}
           onGoDown={
-            n < p.rules.length - 1 ? () => swapRules(n, n + 1) : undefined
+            n < p.rules.length - 1
+              ? () => {
+                  swapRules(n, n + 1);
+                }
+              : undefined
+          }
+          onGoUp={
+            n > 0
+              ? () => {
+                  swapRules(n, n - 1);
+                }
+              : undefined
           }
-          onGoUp={n > 0 ? () => swapRules(n, n - 1) : undefined}
           {...p}
         />
       ))}
@@ -153,7 +164,9 @@ 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,9 +25,7 @@ export function NWFilterSelectInput(p: {
         value={selectedValue}
         onDelete={p.editable ? () => p.onChange?.(undefined) : undefined}
         onClick={
-          !p.editable && selectedValue
+          !p.editable ? () => navigate(NWFilterURL(selectedValue)) : undefined
-            ? () => navigate(NWFilterURL(selectedValue))
-            : undefined
         }
       />
     );
@@ -48,7 +46,7 @@ export function NWFilterSelectInput(p: {
       renderInput={(params) => (
         <TextField {...params} variant="standard" label={p.label} />
       )}
-      renderOption={(_props, option, _state) => (
+      renderOption={(_props, option) => (
         <NWFilterItem
           dense
           onClick={() => {

virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx

@@ -1,3 +1,4 @@
+/* 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";
@@ -18,7 +19,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { IPInput } from "./IPInput";
 import { MACInput } from "./MACInput";
 import { TextInput } from "./TextInput";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 
 export function NetDHCPHostReservations(p: {
   editable: boolean;
@@ -130,7 +131,7 @@ function HostReservationWidget(p: {
             value={p.host.mac}
             onValueChange={(v) => {
               p.host.mac = v!;
-              p.onChange?.();
+              p.onChange();
             }}
           />
         )}
@@ -142,7 +143,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/Grid2";
+import Grid from "@mui/material/Grid";
 import React, { PropsWithChildren } from "react";
 import { NatEntry } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -54,6 +54,7 @@ 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,10 +24,13 @@ 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";
 
 /**
- * Couple / Member property edition
+ * Text input property edition
  */
 export function TextInput(p: {
   label?: string;
@@ -42,12 +42,14 @@ export function TextInput(p: {
           e.target.value.length === 0 ? undefined : e.target.value
         )
       }
-      inputProps={{
+      slotProps={{
+        htmlInput: {
           maxLength: p.size?.max,
-      }}
+        },
-      InputProps={{
+        input: {
           readOnly: !p.editable,
           type: p.type,
+        },
       }}
       variant={"standard"}
       style={p.style ?? { width: "100%", marginBottom: "15px" }}

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -40,6 +40,7 @@ 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,3 +1,4 @@
+/* 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,3 +1,4 @@
+/* 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";
@@ -10,7 +11,7 @@ import {
   ListItemText,
   Tooltip,
 } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import { NWFilter } from "../../api/NWFilterApi";
 import { NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -51,7 +52,6 @@ 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 && !p.editable) return <></>;
+  if (p.attachedISOs.length === 0 && !p.editable) return <></>;
 
   return (
     <>
@@ -27,7 +27,7 @@ export function VMSelectIsoInput(p: {
         const iso = p.isoList.find((d) => d.filename === isoName);
         return (
           <ListItem
-            key={num}
+            key={isoName}
             secondaryAction={
               p.editable && (
                 <IconButton
@@ -73,8 +73,7 @@ export function VMSelectIsoInput(p: {
             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/Grid2";
+import Grid from "@mui/material/Grid";
 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[] | any>();
+  const [nicsList, setNicsList] = React.useState<string[] | undefined>();
 
   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/Grid2";
+import Grid from "@mui/material/Grid";
 import React, { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import {
@@ -28,7 +28,9 @@ interface DetailsProps {
 }
 
 export function NWFilterDetails(p: DetailsProps): ReactElement {
-  const [nwFiltersList, setNwFiltersList] = React.useState<NWFilter[] | any>();
+  const [nwFiltersList, setNwFiltersList] = React.useState<
+    NWFilter[] | undefined
+  >();
 
   const load = async () => {
     setNwFiltersList(await NWFilterApi.GetList());
@@ -40,7 +42,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} />
       )}
     />
   );
@@ -116,7 +118,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,7 +1,8 @@
 import { Button } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { GroupApi } from "../../api/GroupApi";
 import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
 import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -35,12 +36,14 @@ interface DetailsProps {
 
 export function APITokenDetails(p: DetailsProps): React.ReactElement {
   const [vms, setVMs] = React.useState<VMInfo[]>();
+  const [groups, setGroups] = React.useState<string[]>();
   const [networks, setNetworks] = React.useState<NetworkInfo[]>();
   const [nwFilters, setNetworkFilters] = React.useState<NWFilter[]>();
   const [tokens, setTokens] = React.useState<APIToken[]>();
 
   const load = async () => {
     setVMs(await VMApi.GetList());
+    setGroups(await GroupApi.GetList());
     setNetworks(await NetworkApi.GetList());
     setNetworkFilters(await NWFilterApi.GetList());
     setTokens(await TokensApi.GetList());
@@ -54,6 +57,7 @@ export function APITokenDetails(p: DetailsProps): React.ReactElement {
       build={() => (
         <APITokenDetailsInner
           vms={vms!}
+          groups={groups!}
           networks={networks!}
           nwFilters={nwFilters!}
           tokens={tokens!}
@@ -73,6 +77,7 @@ enum TokenTab {
 
 type DetailsInnerProps = DetailsProps & {
   vms: VMInfo[];
+  groups: string[];
   networks: NetworkInfo[];
   nwFilters: NWFilter[];
   tokens: APIToken[];
@@ -156,14 +161,14 @@ function APITokenTabGeneral(p: DetailsInnerProps): React.ReactElement {
         {p.status === TokenWidgetStatus.Create && (
           <RadioGroupInput
             {...p}
-            editable={p.status === TokenWidgetStatus.Create}
+            editable={true}
             options={[
               { label: "IPv4", value: "4" },
               { label: "IPv6", value: "6" },
             ]}
             value={ipVersion.toString()}
             onValueChange={(v) => {
-              setIpVersion(Number(v) as any);
+              setIpVersion(Number(v) as 4 | 6);
             }}
             label="Token IP restriction version"
           />

virtweb_frontend/src/widgets/tokens/TokenRawRightsEditor.tsx

@@ -63,6 +63,7 @@ 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
@@ -95,7 +96,11 @@ 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

@@ -22,6 +22,7 @@ export function TokenRightsEditor(p: {
   editable: boolean;
   onChange?: () => void;
   vms: VMInfo[];
+  groups: string[];
   networks: NetworkInfo[];
   nwFilters: NWFilter[];
   tokens: APIToken[];
@@ -84,8 +85,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.vms.map((v, n) => (
+            {p.vms.map((v) => (
-              <TableRow hover key={n}>
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -184,8 +185,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.vms.map((v, n) => (
+            {p.vms.map((v) => (
-              <TableRow hover key={n}>
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -238,6 +239,139 @@ export function TokenRightsEditor(p: {
         </Table>
       </RightsSection>
 
+      <RightsSection label="VM groups">
+        <RouteRight
+          {...p}
+          right={{ verb: "POST", path: "/api/group/list" }}
+          label="Get the list of groups"
+        />
+
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Group name</TableCell>
+              <TableCell align="center">Get VM info</TableCell>
+              <TableCell align="center">Start VM</TableCell>
+              <TableCell align="center">Shutdown VM</TableCell>
+              <TableCell align="center">Suspend VM</TableCell>
+              <TableCell align="center">Resume VM</TableCell>
+              <TableCell align="center">Kill VM</TableCell>
+              <TableCell align="center">Reset VM</TableCell>
+              <TableCell align="center">Screenshot VM</TableCell>
+              <TableCell align="center">Get VM State</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* All Group operations */}
+            <TableRow hover>
+              <TableCell>
+                <i>All</i>
+              </TableCell>
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/info" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/start" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/shutdown" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/suspend" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/resume" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/kill" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/reset" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/screenshot" }}
+              />
+              <CellRight
+                {...p}
+                right={{ verb: "GET", path: "/api/group/*/vm/state" }}
+              />
+            </TableRow>
+
+            {/* Per VM operations */}
+            {p.groups.map((v) => (
+              <TableRow hover key={v}>
+                <TableCell>{v}</TableCell>
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/info` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/info" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/start` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/start" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/shutdown`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/shutdown" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/suspend`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/suspend" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/resume`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/resume" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/kill` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/kill" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/reset` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/reset" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{
+                    verb: "GET",
+                    path: `/api/group/${v}/vm/screenshot`,
+                  }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/screenshot" }}
+                />
+                <CellRight
+                  {...p}
+                  right={{ verb: "GET", path: `/api/group/${v}/vm/state` }}
+                  parent={{ verb: "GET", path: "/api/group/*/vm/state" }}
+                />
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </RightsSection>
+
       {/* Networks */}
       <RightsSection label="Networks">
         <RouteRight
@@ -314,8 +448,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per network operations */}
-            {p.networks.map((v, n) => (
+            {p.networks.map((v) => (
-              <TableRow hover key={n}>
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -434,15 +568,15 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per network filter operations */}
-            {p.nwFilters.map((v, n) => (
+            {p.nwFilters.map((v) => (
-              <TableRow hover key={n}>
+              <TableRow hover key={v.uuid}>
                 <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
@@ -451,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
@@ -511,8 +645,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per API token operations */}
-            {p.tokens.map((v, n) => (
+            {p.tokens.map((v) => (
-              <TableRow hover key={n}>
+              <TableRow hover key={v.id}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -633,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) => {
@@ -670,7 +804,9 @@ 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}
@@ -680,7 +816,9 @@ 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/Grid2";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { validate as validateUUID } from "uuid";
@@ -35,14 +35,16 @@ interface DetailsProps {
 }
 
 export function VMDetails(p: DetailsProps): React.ReactElement {
-  const [groupsList, setGroupsList] = React.useState<string[] | any>();
+  const [groupsList, setGroupsList] = React.useState<string[] | undefined>();
-  const [isoList, setIsoList] = React.useState<IsoFile[] | any>();
+  const [isoList, setIsoList] = React.useState<IsoFile[] | undefined>();
   const [vcpuCombinations, setVCPUCombinations] = React.useState<
-    number[] | any
+    number[] | undefined
+  >();
+  const [networksList, setNetworksList] = React.useState<
+    NetworkInfo[] | undefined
   >();
-  const [networksList, setNetworksList] = React.useState<NetworkInfo[] | any>();
   const [networkFiltersList, setNetworkFiltersList] = React.useState<
-    NWFilter[] | any
+    NWFilter[] | undefined
   >();
 
   const load = async () => {
@@ -60,11 +62,11 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
       errMsg="Failed to load the list of ISO files"
       build={() => (
         <VMDetailsInner
-          groupsList={groupsList}
+          groupsList={groupsList!}
-          isoList={isoList}
+          isoList={isoList!}
-          vcpuCombinations={vcpuCombinations}
+          vcpuCombinations={vcpuCombinations!}
-          networksList={networksList}
+          networksList={networksList!}
-          networkFiltersList={networkFiltersList}
+          networkFiltersList={networkFiltersList!}
           {...p}
         />
       )}
@@ -202,7 +204,7 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
               editable={p.editable}
               label="Group"
               onValueChange={(v) => {
-                p.vm.group = v! as any;
+                p.vm.group = v!;
                 p.onChange?.();
               }}
               value={p.vm.group}
@@ -222,7 +224,11 @@ 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>