Ready to implement groups web ui integration

remote_backend/Cargo.lock

@@ -1,6 +1,6 @@
 # This file is automatically @generated by Cargo.
 # It is not intended for manual editing.
-version = 4
+version = 3
 
 [[package]]
 name = "actix-codec"
@@ -568,9 +568,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.5.22"
+version = "4.5.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "69371e34337c4c984bbe322360c2547210bf632eb2814bbe78a6e87a2935bd2b"
+checksum = "fb3b4b9e5a7c7514dfa52869339ee98b3156b0bfb4e8a77c4ff4babb64b1604f"
 dependencies = [
  "clap_builder",
  "clap_derive",
@@ -578,9 +578,9 @@ dependencies = [
 
 [[package]]
 name = "clap_builder"
-version = "4.5.22"
+version = "4.5.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e24c1b4099818523236a8ca881d2b45db98dadfb4625cf6608c12069fcbbde1"
+checksum = "b17a95aa67cc7b5ebd32aa5370189aa0d79069ef1c64ce893bd30fb24bff20ec"
 dependencies = [
  "anstream",
  "anstyle",
@@ -865,7 +865,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "33d852cb9b869c2a9b3df2f71a3074817f01e1844f839a144f5fcef059a4eb5d"
 dependencies = [
  "libc",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -1951,7 +1951,7 @@ dependencies = [
  "reqwest",
  "rust-embed",
  "serde",
- "thiserror 2.0.4",
+ "thiserror 2.0.3",
  "uuid",
 ]
 
@@ -2421,7 +2421,7 @@ dependencies = [
  "fastrand",
  "once_cell",
  "rustix",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -2435,11 +2435,11 @@ dependencies = [
 
 [[package]]
 name = "thiserror"
-version = "2.0.4"
+version = "2.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2f49a1853cf82743e3b7950f77e0f4d622ca36cf4317cba00c767838bac8d490"
+checksum = "c006c85c7651b3cf2ada4584faa36773bd07bac24acfb39f3c431b36d7e667aa"
 dependencies = [
- "thiserror-impl 2.0.4",
+ "thiserror-impl 2.0.3",
 ]
 
 [[package]]
@@ -2455,9 +2455,9 @@ dependencies = [
 
 [[package]]
 name = "thiserror-impl"
-version = "2.0.4"
+version = "2.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8381894bb3efe0c4acac3ded651301ceee58a15d47c2e34885ed1908ad667061"
+checksum = "f077553d607adc1caf65430528a576c757a71ed73944b66ebb58ef2bbd243568"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2800,7 +2800,7 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf221c93e13a30d793f7645a0e7762c55d169dbb0a49671918a2319d289b10bb"
 dependencies = [
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]

remote_backend/src/controllers/group_controller.rs

@@ -0,0 +1,79 @@
+use crate::controllers::HttpResult;
+use crate::virtweb_client;
+use crate::virtweb_client::{GroupID, VMUuid};
+use actix_web::{web, HttpResponse};
+
+#[derive(serde::Deserialize)]
+pub struct GroupIDInPath {
+    gid: GroupID,
+}
+
+#[derive(serde::Deserialize)]
+pub struct VMIDInQuery {
+    vm_id: Option<VMUuid>,
+}
+
+/// Get the state of one or all VM
+pub async fn vm_state(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_state(&path.gid, query.vm_id).await?))
+}
+
+/// Start one or all VM
+pub async fn vm_start(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_start(&path.gid, query.vm_id).await?))
+}
+
+/// Shutdown one or all VM
+pub async fn vm_shutdown(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_shutdown(&path.gid, query.vm_id).await?))
+}
+
+/// Kill one or all VM
+pub async fn vm_kill(path: web::Path<GroupIDInPath>, query: web::Query<VMIDInQuery>) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_kill(&path.gid, query.vm_id).await?))
+}
+
+/// Reset one or all VM
+pub async fn vm_reset(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_reset(&path.gid, query.vm_id).await?))
+}
+
+/// Suspend one or all VM
+pub async fn vm_suspend(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_suspend(&path.gid, query.vm_id).await?))
+}
+
+/// Resume one or all VM
+pub async fn vm_resume(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    Ok(HttpResponse::Ok().json(virtweb_client::group_vm_resume(&path.gid, query.vm_id).await?))
+}
+
+/// Screenshot one or all VM
+pub async fn vm_screenshot(
+    path: web::Path<GroupIDInPath>,
+    query: web::Query<VMIDInQuery>,
+) -> HttpResult {
+    let screenshot = virtweb_client::group_vm_screenshot(&path.gid, query.vm_id).await?;
+
+    Ok(HttpResponse::Ok()
+        .insert_header(("content-type", "image/png"))
+        .body(screenshot))
+}

remote_backend/src/controllers/mod.rs

@@ -6,6 +6,7 @@ use std::fmt::{Display, Formatter};
 use std::io::ErrorKind;
 
 pub mod auth_controller;
+pub mod group_controller;
 pub mod server_controller;
 pub mod static_controller;
 pub mod sys_info_controller;

remote_backend/src/controllers/server_controller.rs

@@ -2,7 +2,7 @@ use crate::app_config::AppConfig;
 use crate::controllers::HttpResult;
 use crate::extractors::auth_extractor::AuthExtractor;
 use crate::virtweb_client;
-use crate::virtweb_client::VMUuid;
+use crate::virtweb_client::{GroupID, VMCaps, VMInfo};
 use actix_web::HttpResponse;
 
 #[derive(serde::Serialize)]
@@ -20,54 +20,70 @@ pub async fn config(auth: AuthExtractor) -> HttpResult {
 
 #[derive(Default, Debug, serde::Serialize)]
 pub struct Rights {
+    groups: Vec<GroupInfo>,
     vms: Vec<VMInfoAndCaps>,
     sys_info: bool,
 }
 
+#[derive(Debug, serde::Serialize)]
+pub struct GroupInfo {
+    id: GroupID,
+    vms: Vec<VMInfo>,
+    #[serde(flatten)]
+    caps: VMCaps,
+}
+
 #[derive(Debug, serde::Serialize)]
 pub struct VMInfoAndCaps {
-    uiid: VMUuid,
-    name: String,
-    description: Option<String>,
-    architecture: String,
-    memory: usize,
-    number_vcpu: usize,
-    can_get_state: bool,
-    can_start: bool,
-    can_shutdown: bool,
-    can_kill: bool,
-    can_reset: bool,
-    can_suspend: bool,
-    can_resume: bool,
-    can_screenshot: bool,
+    #[serde(flatten)]
+    info: VMInfo,
+    #[serde(flatten)]
+    caps: VMCaps,
 }
 
 pub async fn rights() -> HttpResult {
     let rights = virtweb_client::get_token_info().await?;
 
     let mut res = Rights {
+        groups: vec![],
         vms: vec![],
         sys_info: rights.can_retrieve_system_info(),
     };
 
+    for g in rights.list_groups() {
+        let group_vms = virtweb_client::group_vm_info(&g).await?;
+
+        res.groups.push(GroupInfo {
+            id: g.clone(),
+            vms: group_vms,
+            caps: VMCaps {
+                can_get_state: rights.is_route_allowed("GET", &g.route_vm_state(None)),
+                can_start: rights.is_route_allowed("GET", &g.route_vm_start(None)),
+                can_shutdown: rights.is_route_allowed("GET", &g.route_vm_shutdown(None)),
+                can_kill: rights.is_route_allowed("GET", &g.route_vm_kill(None)),
+                can_reset: rights.is_route_allowed("GET", &g.route_vm_reset(None)),
+                can_suspend: rights.is_route_allowed("GET", &g.route_vm_suspend(None)),
+                can_resume: rights.is_route_allowed("GET", &g.route_vm_resume(None)),
+                can_screenshot: rights.is_route_allowed("GET", &g.route_vm_screenshot(None)),
+            },
+        })
+    }
+
     for v in rights.list_vm() {
         let vm_info = virtweb_client::vm_info(v).await?;
 
         res.vms.push(VMInfoAndCaps {
-            uiid: vm_info.uuid,
-            name: vm_info.name,
-            description: vm_info.description.clone(),
-            architecture: vm_info.architecture.to_string(),
-            memory: vm_info.memory,
-            number_vcpu: vm_info.number_vcpu,
-            can_get_state: rights.is_route_allowed("GET", &v.route_state()),
-            can_start: rights.is_route_allowed("GET", &v.route_start()),
-            can_shutdown: rights.is_route_allowed("GET", &v.route_shutdown()),
-            can_kill: rights.is_route_allowed("GET", &v.route_kill()),
-            can_reset: rights.is_route_allowed("GET", &v.route_reset()),
-            can_suspend: rights.is_route_allowed("GET", &v.route_suspend()),
-            can_resume: rights.is_route_allowed("GET", &v.route_resume()),
-            can_screenshot: rights.is_route_allowed("GET", &v.route_screenshot()),
+            info: vm_info,
+            caps: VMCaps {
+                can_get_state: rights.is_route_allowed("GET", &v.route_state()),
+                can_start: rights.is_route_allowed("GET", &v.route_start()),
+                can_shutdown: rights.is_route_allowed("GET", &v.route_shutdown()),
+                can_kill: rights.is_route_allowed("GET", &v.route_kill()),
+                can_reset: rights.is_route_allowed("GET", &v.route_reset()),
+                can_suspend: rights.is_route_allowed("GET", &v.route_suspend()),
+                can_resume: rights.is_route_allowed("GET", &v.route_resume()),
+                can_screenshot: rights.is_route_allowed("GET", &v.route_screenshot()),
+            },
         })
     }
 

remote_backend/src/main.rs

@@ -12,7 +12,8 @@ use light_openid::basic_state_manager::BasicStateManager;
 use remote_backend::app_config::AppConfig;
 use remote_backend::constants;
 use remote_backend::controllers::{
-    auth_controller, server_controller, static_controller, sys_info_controller, vm_controller,
+    auth_controller, group_controller, server_controller, static_controller, sys_info_controller,
+    vm_controller,
 };
 use remote_backend::middlewares::auth_middleware::AuthChecker;
 use std::time::Duration;
@@ -86,6 +87,39 @@ async fn main() -> std::io::Result<()> {
                 "/api/server/rights",
                 web::get().to(server_controller::rights),
             )
+            // Groups routes
+            .route(
+                "/api/group/{gid}/vm/state",
+                web::get().to(group_controller::vm_state),
+            )
+            .route(
+                "/api/group/{gid}/vm/start",
+                web::get().to(group_controller::vm_start),
+            )
+            .route(
+                "/api/group/{gid}/vm/shutdown",
+                web::get().to(group_controller::vm_shutdown),
+            )
+            .route(
+                "/api/group/{gid}/vm/kill",
+                web::get().to(group_controller::vm_kill),
+            )
+            .route(
+                "/api/group/{gid}/vm/reset",
+                web::get().to(group_controller::vm_reset),
+            )
+            .route(
+                "/api/group/{gid}/vm/suspend",
+                web::get().to(group_controller::vm_suspend),
+            )
+            .route(
+                "/api/group/{gid}/vm/resume",
+                web::get().to(group_controller::vm_resume),
+            )
+            .route(
+                "/api/group/{gid}/vm/screenshot",
+                web::get().to(group_controller::vm_screenshot),
+            )
             // VM routes
             .route("/api/vm/{uid}/state", web::get().to(vm_controller::state))
             .route("/api/vm/{uid}/start", web::get().to(vm_controller::start))

remote_backend/src/virtweb_client.rs

@@ -1,6 +1,7 @@
 use crate::app_config::AppConfig;
 use crate::utils::time;
 use lazy_regex::regex;
+use std::collections::HashMap;
 use std::fmt::Display;
 use std::str::FromStr;
 use thiserror::Error;
@@ -12,9 +13,105 @@ pub enum VirtWebClientError {
     InvalidStatusCode(u16),
 }
 
-#[derive(Eq, PartialEq, Debug, Copy, Clone, serde::Serialize, serde::Deserialize)]
+#[derive(Eq, PartialEq, Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct GroupID(String);
+
+impl GroupID {
+    pub fn route_vm_info(&self) -> String {
+        format!("/api/group/{}/vm/info", self.0)
+    }
+
+    pub fn route_vm_state(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/state{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_start(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/start{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_shutdown(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/shutdown{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_suspend(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/suspend{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_resume(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/resume{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_kill(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/kill{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_reset(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/reset{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+    pub fn route_vm_screenshot(&self, vm: Option<VMUuid>) -> String {
+        format!(
+            "/api/group/{}/vm/screenshot{}",
+            self.0,
+            match vm {
+                None => "".to_string(),
+                Some(id) => format!("?vm_id={}", id.0),
+            }
+        )
+    }
+}
+
+#[derive(Eq, PartialEq, Debug, Copy, Clone, serde::Serialize, serde::Deserialize, Hash)]
 pub struct VMUuid(Uuid);
 
+#[derive(Default, serde::Deserialize, serde::Serialize)]
+pub struct TreatmentResult {
+    ok: usize,
+    failed: usize,
+}
+
 impl VMUuid {
     pub fn route_info(&self) -> String {
         format!("/api/vm/{}", self.0)
@@ -69,7 +166,7 @@ pub struct TokenClaims {
     pub nonce: String,
 }
 
-#[derive(serde::Deserialize, Debug)]
+#[derive(serde::Deserialize, serde::Serialize, Debug)]
 pub struct VMInfo {
     pub uuid: VMUuid,
     pub name: String,
@@ -79,6 +176,18 @@ pub struct VMInfo {
     pub number_vcpu: usize,
 }
 
+#[derive(serde::Deserialize, serde::Serialize, Debug)]
+pub struct VMCaps {
+    pub can_get_state: bool,
+    pub can_start: bool,
+    pub can_shutdown: bool,
+    pub can_kill: bool,
+    pub can_reset: bool,
+    pub can_suspend: bool,
+    pub can_resume: bool,
+    pub can_screenshot: bool,
+}
+
 #[derive(serde::Deserialize, serde::Serialize, Debug)]
 pub struct VMState {
     pub state: String,
@@ -147,6 +256,16 @@ impl TokenInfo {
         false
     }
 
+    /// List the groups with access
+    pub fn list_groups(&self) -> Vec<GroupID> {
+        self.rights
+            .iter()
+            .filter(|r| r.verb == "GET")
+            .filter(|r| regex!("^/api/group/[^/]+/vm/info$").is_match(&r.path))
+            .map(|r| GroupID(r.path.split("/").nth(3).unwrap().to_string()))
+            .collect::<Vec<_>>()
+    }
+
     /// List the virtual machines with access
     pub fn list_vm(&self) -> Vec<VMUuid> {
         self.rights
@@ -168,12 +287,13 @@ async fn request<D: Display>(uri: D) -> anyhow::Result<reqwest::Response> {
     let url = format!("{}{}", AppConfig::get().virtweb_base_url, uri);
     log::debug!("Will query {uri}...");
 
+    let uri = uri.to_string();
     let jwt = TokenClaims {
         sub: AppConfig::get().virtweb_token_id.to_string(),
         iat: time() - 60 * 2,
         exp: time() + 60 * 3,
         verb: "GET".to_string(),
-        path: uri.to_string(),
+        path: uri.split_once('?').map(|s| s.0).unwrap_or(&uri).to_string(),
         nonce: Uuid::new_v4().to_string(),
     };
     let jwt = AppConfig::get().token_private_key().sign_jwt(&jwt)?;
@@ -260,6 +380,73 @@ pub async fn vm_screenshot(id: VMUuid) -> anyhow::Result<Vec<u8>> {
         .to_vec())
 }
 
+/// Get the VM of a group
+pub async fn group_vm_info(id: &GroupID) -> anyhow::Result<Vec<VMInfo>> {
+    json_request(id.route_vm_info()).await
+}
+
+/// Get the state of one or all VMs of a group
+pub async fn group_vm_state(
+    id: &GroupID,
+    vm_id: Option<VMUuid>,
+) -> anyhow::Result<HashMap<VMUuid, String>> {
+    json_request(id.route_vm_state(vm_id)).await
+}
+
+/// Start one or all VMs of a group
+pub async fn group_vm_start(
+    id: &GroupID,
+    vm_id: Option<VMUuid>,
+) -> anyhow::Result<TreatmentResult> {
+    json_request(id.route_vm_start(vm_id)).await
+}
+
+/// Shutdown one or all VMs of a group
+pub async fn group_vm_shutdown(
+    id: &GroupID,
+    vm_id: Option<VMUuid>,
+) -> anyhow::Result<TreatmentResult> {
+    json_request(id.route_vm_shutdown(vm_id)).await
+}
+
+/// Kill one or all VMs of a group
+pub async fn group_vm_kill(id: &GroupID, vm_id: Option<VMUuid>) -> anyhow::Result<TreatmentResult> {
+    json_request(id.route_vm_kill(vm_id)).await
+}
+
+/// Reset one or all VMs of a group
+pub async fn group_vm_reset(
+    id: &GroupID,
+    vm_id: Option<VMUuid>,
+) -> anyhow::Result<TreatmentResult> {
+    json_request(id.route_vm_reset(vm_id)).await
+}
+
+/// Suspend one or all VMs of a group
+pub async fn group_vm_suspend(
+    id: &GroupID,
+    vm_id: Option<VMUuid>,
+) -> anyhow::Result<TreatmentResult> {
+    json_request(id.route_vm_suspend(vm_id)).await
+}
+
+/// Resume one or all VMs of a group
+pub async fn group_vm_resume(
+    id: &GroupID,
+    vm_id: Option<VMUuid>,
+) -> anyhow::Result<TreatmentResult> {
+    json_request(id.route_vm_resume(vm_id)).await
+}
+
+/// Get the screenshot of one or all VMs of a group
+pub async fn group_vm_screenshot(id: &GroupID, vm_id: Option<VMUuid>) -> anyhow::Result<Vec<u8>> {
+    Ok(request(id.route_vm_screenshot(vm_id))
+        .await?
+        .bytes()
+        .await?
+        .to_vec())
+}
+
 /// Get current server information
 pub async fn get_server_info() -> anyhow::Result<SystemInfo> {
     json_request("/api/server/info").await

remote_frontend/package-lock.json

@@ -3565,13 +3565,13 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.16.tgz",
-      "integrity": "sha512-slterMlxAhov/DZO8NScf6mEeMBBXodFUolijDvrtTxyezyLoTQaa73FyYus/VbTdftd8wBgBxPMRk3poleXNQ==",
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.14.tgz",
+      "integrity": "sha512-aXvzCTK7ZBv1e7fahFuR3Z/fyQQSIQ711yPgYRj+Oj64tyTgO4iQIDmYXDBqvSWQ/FA4OSCsXOStlF+noU0/NA==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "eslint": ">=8.40"
+        "eslint": ">=7"
       }
     },
     "node_modules/eslint-scope": {
@@ -4941,9 +4941,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.2.tgz",
-      "integrity": "sha512-XdQ+VsY2tJpBsKGs0wf3U/+azx8BBpYRHFAyKm5VeEZNOJZRB63q7Sc8Iup3k0TrN3KO6QgyzFf+opSbfY1y0g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.1.tgz",
+      "integrity": "sha512-Ldn6gorLGr4mCdFnmeAOLweJxZ34HjKnDm4HGo6P66IEqTxQb36VEdFJQENKxWjupNfoIjvRUnswjn1hpYEpjQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

remote_frontend/src/App.tsx

@@ -5,6 +5,8 @@ import {
   typographyStyles,
 } from "@fluentui/react-components";
 import {
+  AppsListDetailFilled,
+  AppsListDetailRegular,
   DesktopFilled,
   DesktopRegular,
   InfoFilled,
@@ -18,6 +20,7 @@ import { AsyncWidget } from "./widgets/AsyncWidget";
 import { MainMenu } from "./widgets/MainMenu";
 import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
 import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
+import { GroupsWidget } from "./widgets/GroupsWidget";
 
 const useStyles = makeStyles({
   title: typographyStyles.title2,
@@ -27,6 +30,8 @@ const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
 
 const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
 
+const AppListIcon = bundleIcon(AppsListDetailFilled, AppsListDetailRegular);
+
 export function App() {
   return (
     <AsyncWidget
@@ -48,7 +53,7 @@ function AppInner(): React.ReactElement {
 
 function AuthenticatedApp(): React.ReactElement {
   const styles = useStyles();
-  const [tab, setTab] = React.useState<"vm" | "info">("vm");
+  const [tab, setTab] = React.useState<"group" | "vm" | "info">("group");
 
   const [rights, setRights] = React.useState<Rights | undefined>();
 
@@ -82,6 +87,13 @@ function AuthenticatedApp(): React.ReactElement {
                 selectedValue={tab}
                 onTabSelect={(_, d) => setTab(d.value as any)}
               >
+                <Tab
+                  value="group"
+                  icon={<AppListIcon />}
+                  disabled={rights!.groups.length === 0}
+                >
+                  Groups
+                </Tab>
                 <Tab
                   value="vm"
                   icon={<DesktopIcon />}
@@ -101,6 +113,7 @@ function AuthenticatedApp(): React.ReactElement {
                 <MainMenu />
               </div>
             </div>
+            {tab === "group" && <GroupsWidget rights={rights!} />}
             {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
             {tab === "info" && <SystemInfoWidget />}
           </div>

remote_frontend/src/api/ServerApi.ts

@@ -1,5 +1,5 @@
 import { APIClient } from "./ApiClient";
-import { VMInfo } from "./VMApi";
+import { VMCaps, VMInfo, VMInfoAndCaps } from "./VMApi";
 
 export interface ServerConfig {
   authenticated: boolean;
@@ -7,10 +7,18 @@ export interface ServerConfig {
 }
 
 export interface Rights {
-  vms: VMInfo[];
+  groups: VMGroup[];
+  vms: VMInfoAndCaps[];
   sys_info: boolean;
 }
 
+export type VMGroup = VMGroupInfo & VMCaps;
+
+export interface VMGroupInfo {
+  id: string;
+  vms: VMInfo[];
+}
+
 let config: ServerConfig | null = null;
 
 export class ServerApi {

remote_frontend/src/api/VMApi.ts

@@ -1,12 +1,15 @@
 import { APIClient } from "./ApiClient";
 
 export interface VMInfo {
-  uiid: string;
+  uuid: string;
   name: string;
   description?: string;
   architecture: string;
   memory: number;
   number_vcpu: number;
+}
+
+export interface VMCaps {
   can_get_state: boolean;
   can_start: boolean;
   can_shutdown: boolean;
@@ -17,6 +20,8 @@ export interface VMInfo {
   can_screenshot: boolean;
 }
 
+export type VMInfoAndCaps = VMInfo & VMCaps;
+
 export type VMState =
   | "NoState"
   | "Running"
@@ -34,7 +39,7 @@ export class VMApi {
    */
   static async State(vm: VMInfo): Promise<VMState> {
     return (
-      await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/state` })
+      await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/state` })
     ).data.state;
   }
 
@@ -42,42 +47,42 @@ export class VMApi {
    * Request to start VM
    */
   static async StartVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/start` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/start` });
   }
 
   /**
    * Request to suspend VM
    */
   static async SuspendVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/suspend` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/suspend` });
   }
 
   /**
    * Request to resume VM
    */
   static async ResumeVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/resume` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/resume` });
   }
 
   /**
    * Request to shutdown VM
    */
   static async ShutdownVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/shutdown` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/shutdown` });
   }
 
   /**
    * Request to kill VM
    */
   static async KillVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/kill` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/kill` });
   }
 
   /**
    * Request to reset VM
    */
   static async ResetVM(vm: VMInfo): Promise<void> {
-    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/reset` });
+    await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/reset` });
   }
 
   /**
@@ -86,7 +91,7 @@ export class VMApi {
   static async Screenshot(vm: VMInfo): Promise<Blob> {
     return (
       await APIClient.exec({
-        uri: `/vm/${vm.uiid}/screenshot`,
+        uri: `/vm/${vm.uuid}/screenshot`,
         method: "GET",
       })
     ).data;

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -0,0 +1,5 @@
+import { Rights } from "../api/ServerApi";
+
+export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
+  return <p>TODO</p>;
+}

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -22,7 +22,7 @@ import {
 import { filesize } from "filesize";
 import React from "react";
 import { Rights } from "../api/ServerApi";
-import { VMApi, VMInfo, VMState } from "../api/VMApi";
+import { VMApi, VMInfo, VMInfoAndCaps, VMState } from "../api/VMApi";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useToast } from "../hooks/providers/ToastProvider";
 import { VMLiveScreenshot } from "./VMLiveScreenshot";
@@ -54,7 +54,7 @@ export function VirtualMachinesWidget(p: {
   );
 }
 
-function VMWidget(p: { vm: VMInfo }): React.ReactElement {
+function VMWidget(p: { vm: VMInfoAndCaps }): React.ReactElement {
   const toast = useToast();
 
   const [state, setState] = React.useState<VMState | undefined>();
@@ -189,7 +189,10 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
   );
 }
 
-function VMPreview(p: { vm: VMInfo; state?: VMState }): React.ReactElement {
+function VMPreview(p: {
+  vm: VMInfoAndCaps;
+  state?: VMState;
+}): React.ReactElement {
   const styles = useStyles();
   if (!p.vm.can_screenshot || p.state !== "Running") {
     return (