Add groups support (#146)
All checks were successful
continuous-integration/drone/push Build is passing

Reviewed-on: #146
This commit is contained in:
Pierre HUBERT 2024-12-06 18:06:01 +00:00
parent aa9222bd22
commit 4c6608bf55
14 changed files with 874 additions and 67 deletions

View File

@ -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))
}

View File

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

View File

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

View File

@ -12,7 +12,8 @@ use light_openid::basic_state_manager::BasicStateManager;
use remote_backend::app_config::AppConfig; use remote_backend::app_config::AppConfig;
use remote_backend::constants; use remote_backend::constants;
use remote_backend::controllers::{ 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 remote_backend::middlewares::auth_middleware::AuthChecker;
use std::time::Duration; use std::time::Duration;
@ -86,6 +87,39 @@ async fn main() -> std::io::Result<()> {
"/api/server/rights", "/api/server/rights",
web::get().to(server_controller::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 // VM routes
.route("/api/vm/{uid}/state", web::get().to(vm_controller::state)) .route("/api/vm/{uid}/state", web::get().to(vm_controller::state))
.route("/api/vm/{uid}/start", web::get().to(vm_controller::start)) .route("/api/vm/{uid}/start", web::get().to(vm_controller::start))

View File

@ -1,6 +1,7 @@
use crate::app_config::AppConfig; use crate::app_config::AppConfig;
use crate::utils::time; use crate::utils::time;
use lazy_regex::regex; use lazy_regex::regex;
use std::collections::HashMap;
use std::fmt::Display; use std::fmt::Display;
use std::str::FromStr; use std::str::FromStr;
use thiserror::Error; use thiserror::Error;
@ -12,9 +13,105 @@ pub enum VirtWebClientError {
InvalidStatusCode(u16), 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); pub struct VMUuid(Uuid);
#[derive(Default, serde::Deserialize, serde::Serialize)]
pub struct TreatmentResult {
ok: usize,
failed: usize,
}
impl VMUuid { impl VMUuid {
pub fn route_info(&self) -> String { pub fn route_info(&self) -> String {
format!("/api/vm/{}", self.0) format!("/api/vm/{}", self.0)
@ -69,7 +166,7 @@ pub struct TokenClaims {
pub nonce: String, pub nonce: String,
} }
#[derive(serde::Deserialize, Debug)] #[derive(serde::Deserialize, serde::Serialize, Debug)]
pub struct VMInfo { pub struct VMInfo {
pub uuid: VMUuid, pub uuid: VMUuid,
pub name: String, pub name: String,
@ -79,6 +176,18 @@ pub struct VMInfo {
pub number_vcpu: usize, 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)] #[derive(serde::Deserialize, serde::Serialize, Debug)]
pub struct VMState { pub struct VMState {
pub state: String, pub state: String,
@ -147,6 +256,16 @@ impl TokenInfo {
false 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 /// List the virtual machines with access
pub fn list_vm(&self) -> Vec<VMUuid> { pub fn list_vm(&self) -> Vec<VMUuid> {
self.rights 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); let url = format!("{}{}", AppConfig::get().virtweb_base_url, uri);
log::debug!("Will query {uri}..."); log::debug!("Will query {uri}...");
let uri = uri.to_string();
let jwt = TokenClaims { let jwt = TokenClaims {
sub: AppConfig::get().virtweb_token_id.to_string(), sub: AppConfig::get().virtweb_token_id.to_string(),
iat: time() - 60 * 2, iat: time() - 60 * 2,
exp: time() + 60 * 3, exp: time() + 60 * 3,
verb: "GET".to_string(), 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(), nonce: Uuid::new_v4().to_string(),
}; };
let jwt = AppConfig::get().token_private_key().sign_jwt(&jwt)?; 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()) .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 /// Get current server information
pub async fn get_server_info() -> anyhow::Result<SystemInfo> { pub async fn get_server_info() -> anyhow::Result<SystemInfo> {
json_request("/api/server/info").await json_request("/api/server/info").await

View File

@ -5,6 +5,8 @@ import {
typographyStyles, typographyStyles,
} from "@fluentui/react-components"; } from "@fluentui/react-components";
import { import {
AppsListDetailFilled,
AppsListDetailRegular,
DesktopFilled, DesktopFilled,
DesktopRegular, DesktopRegular,
InfoFilled, InfoFilled,
@ -18,6 +20,7 @@ import { AsyncWidget } from "./widgets/AsyncWidget";
import { MainMenu } from "./widgets/MainMenu"; import { MainMenu } from "./widgets/MainMenu";
import { SystemInfoWidget } from "./widgets/SystemInfoWidget"; import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget"; import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
import { GroupsWidget } from "./widgets/GroupsWidget";
const useStyles = makeStyles({ const useStyles = makeStyles({
title: typographyStyles.title2, title: typographyStyles.title2,
@ -27,6 +30,8 @@ const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular); const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
const AppListIcon = bundleIcon(AppsListDetailFilled, AppsListDetailRegular);
export function App() { export function App() {
return ( return (
<AsyncWidget <AsyncWidget
@ -48,12 +53,17 @@ function AppInner(): React.ReactElement {
function AuthenticatedApp(): React.ReactElement { function AuthenticatedApp(): React.ReactElement {
const styles = useStyles(); 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>(); const [rights, setRights] = React.useState<Rights | undefined>();
const load = async () => { const load = async () => {
setRights(await ServerApi.GetRights()); const rights = await ServerApi.GetRights();
setRights(rights);
if (rights!.groups.length > 0) setTab("group");
else if (rights!.vms.length > 0) setTab("vm");
else setTab("info");
}; };
return ( return (
@ -82,25 +92,27 @@ function AuthenticatedApp(): React.ReactElement {
selectedValue={tab} selectedValue={tab}
onTabSelect={(_, d) => setTab(d.value as any)} onTabSelect={(_, d) => setTab(d.value as any)}
> >
<Tab {rights!.groups.length > 0 && (
value="vm" <Tab value="group" icon={<AppListIcon />}>
icon={<DesktopIcon />} Groups
disabled={rights!.vms.length === 0} </Tab>
> )}
Virtual machines {rights!.vms.length > 0 && (
</Tab> <Tab value="vm" icon={<DesktopIcon />}>
<Tab Virtual machines
value="info" </Tab>
icon={<InfoIcon />} )}
disabled={!rights!.sys_info} {rights!.sys_info && (
> <Tab value="info" icon={<InfoIcon />}>
System info System info
</Tab> </Tab>
)}
</TabList> </TabList>
<div> <div>
<MainMenu /> <MainMenu />
</div> </div>
</div> </div>
{tab === "group" && <GroupsWidget rights={rights!} />}
{tab === "vm" && <VirtualMachinesWidget rights={rights!} />} {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
{tab === "info" && <SystemInfoWidget />} {tab === "info" && <SystemInfoWidget />}
</div> </div>

View File

@ -0,0 +1,107 @@
import { APIClient } from "./ApiClient";
import { VMGroup } from "./ServerApi";
import { VMInfo, VMState } from "./VMApi";
export interface GroupVMState {
[key: string]: VMState;
}
export interface TreatmentResult {
ok: number;
failed: number;
}
export class GroupApi {
/**
* Get the state of the VMs of a group
*/
static async State(g: VMGroup): Promise<GroupVMState> {
return (
await APIClient.exec({ method: "GET", uri: `/group/${g.id}/vm/state` })
).data;
}
/**
* Request to start the VM of a group
*/
static async StartVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/start` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
/**
* Request to suspend the VM of a group
*/
static async SuspendVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/suspend` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
/**
* Request to resume the VM of a group
*/
static async ResumeVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/resume` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
/**
* Request to shutdown the VM of a group
*/
static async ShutdownVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/shutdown` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
/**
* Request to kill the VM of a group
*/
static async KillVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/kill` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
/**
* Request to reset the VM of a group
*/
static async ResetVM(g: VMGroup, vm?: VMInfo): Promise<TreatmentResult> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/reset` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
/**
* Request a screenshot of the VM of group
*/
static async ScreenshotVM(g: VMGroup, vm?: VMInfo): Promise<Blob> {
return (
await APIClient.exec({
method: "GET",
uri: `/group/${g.id}/vm/screenshot` + (vm ? `?vm_id=${vm.uuid}` : ""),
})
).data;
}
}

View File

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

View File

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

View File

@ -20,7 +20,7 @@ type ThemeContext = { theme: Theme; set: (theme: Theme) => void };
const ThemeContextK = React.createContext<ThemeContext | null>(null); const ThemeContextK = React.createContext<ThemeContext | null>(null);
export function ThemeProvider(p: React.PropsWithChildren): React.ReactElement { export function ThemeProvider(p: React.PropsWithChildren): React.ReactElement {
const [theme, setTheme] = React.useState<Theme>("highcontrast"); const [theme, setTheme] = React.useState<Theme>("teamsdark");
let fluentTheme = teamsHighContrastTheme; let fluentTheme = teamsHighContrastTheme;
switch (theme) { switch (theme) {

View File

@ -0,0 +1,177 @@
import { Button, Spinner, Toolbar, Tooltip } from "@fluentui/react-components";
import {
ArrowResetRegular,
PauseRegular,
PlayCircleRegular,
PlayFilled,
PowerRegular,
StopRegular,
} from "@fluentui/react-icons";
import React from "react";
import { GroupApi, TreatmentResult } from "../api/GroupApi";
import { VMGroup } from "../api/ServerApi";
import { VMInfo, VMState } from "../api/VMApi";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
import { useToast } from "../hooks/providers/ToastProvider";
export function GroupVMAction(p: {
group: VMGroup;
state?: VMState;
vm?: VMInfo;
}): React.ReactElement {
return (
<Toolbar>
<GroupVMButton
enabled={p.group.can_start}
icon={<PlayFilled />}
tooltip="Start"
group={p.group}
vm={p.vm}
allowedStates={["Shutdown", "Shutoff", "Crashed"]}
currState={p.state}
needConfirm={false}
action={GroupApi.StartVM}
/>
<GroupVMButton
enabled={p.group.can_suspend}
icon={<PauseRegular />}
tooltip="Suspend"
group={p.group}
vm={p.vm}
allowedStates={["Running"]}
currState={p.state}
needConfirm={true}
action={GroupApi.SuspendVM}
/>
<GroupVMButton
enabled={p.group.can_resume}
icon={<PlayCircleRegular />}
tooltip="Resume"
group={p.group}
vm={p.vm}
allowedStates={["Paused", "PowerManagementSuspended"]}
currState={p.state}
needConfirm={false}
action={GroupApi.ResumeVM}
/>
<GroupVMButton
enabled={p.group.can_shutdown}
icon={<PowerRegular />}
tooltip="Shutdown"
group={p.group}
vm={p.vm}
allowedStates={["Running"]}
currState={p.state}
needConfirm={true}
action={GroupApi.ShutdownVM}
/>
<GroupVMButton
enabled={p.group.can_kill}
icon={<StopRegular />}
tooltip="Kill"
group={p.group}
vm={p.vm}
allowedStates={[
"Running",
"Paused",
"PowerManagementSuspended",
"Blocked",
]}
currState={p.state}
needConfirm={true}
action={GroupApi.KillVM}
/>
<GroupVMButton
enabled={p.group.can_reset}
icon={<ArrowResetRegular />}
tooltip="Reset"
group={p.group}
vm={p.vm}
allowedStates={[
"Running",
"Paused",
"PowerManagementSuspended",
"Blocked",
]}
currState={p.state}
needConfirm={true}
action={GroupApi.ResetVM}
/>
</Toolbar>
);
}
function GroupVMButton(p: {
enabled: boolean;
icon: React.ReactElement;
action: (group: VMGroup, vm?: VMInfo) => Promise<TreatmentResult>;
tooltip: string;
currState?: VMState;
allowedStates: VMState[];
group: VMGroup;
vm?: VMInfo;
needConfirm: boolean;
}): React.ReactElement {
const toast = useToast();
const confirm = useConfirm();
const alert = useAlert();
const [running, setRunning] = React.useState(false);
const target = p.vm
? `the VM ${p.vm.name}`
: `all the VM of the group ${p.group.id}`;
const allowed =
!p.vm || (p.currState && p.allowedStates.includes(p.currState));
const perform = async () => {
if (running || !allowed) return;
try {
if (
(!p.vm || p.needConfirm) &&
!(await confirm(
`Do you want to perform ${p.tooltip} action on ${target}?`,
`Confirmation`,
p.tooltip
))
) {
return;
}
setRunning(true);
const result = await p.action(p.group, p.vm);
toast(
p.tooltip,
`${p.tooltip} action on ${target}: ${result.ok} OK / ${result.failed} Failed`,
"success"
);
} catch (e) {
console.error("Failed to perform group action!", e);
alert(`Failed to perform ${p.tooltip} action on ${target}: ${e}`);
} finally {
setRunning(false);
}
};
if (!p.enabled) return <></>;
return (
<Tooltip
content={`${p.tooltip} ${target}`}
relationship="description"
withArrow
>
<Button
icon={running ? <Spinner size="tiny" /> : p.icon}
onClick={allowed ? perform : undefined}
disabled={!allowed}
appearance="subtle"
/>
</Tooltip>
);
}

View File

@ -0,0 +1,171 @@
import {
Button,
Card,
Dialog,
DialogActions,
DialogBody,
DialogContent,
DialogSurface,
DialogTitle,
DialogTrigger,
Table,
TableBody,
TableCell,
TableCellActions,
TableCellLayout,
TableHeader,
TableHeaderCell,
TableRow,
Title3,
Tooltip,
} from "@fluentui/react-components";
import { Desktop24Regular, ScreenshotRegular } from "@fluentui/react-icons";
import { filesize } from "filesize";
import React from "react";
import { GroupApi, GroupVMState } from "../api/GroupApi";
import { Rights, VMGroup } from "../api/ServerApi";
import { VMInfo } from "../api/VMApi";
import { useToast } from "../hooks/providers/ToastProvider";
import { GroupVMAction } from "./GroupVMAction";
import { VMLiveScreenshot } from "./VMLiveScreenshot";
export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
return (
<>
{p.rights.groups.map((g) => (
<GroupInfo group={g} />
))}
</>
);
}
function GroupInfo(p: { group: VMGroup }): React.ReactElement {
const toast = useToast();
const [state, setState] = React.useState<GroupVMState | undefined>();
const [screenshotVM, setScreenshotVM] = React.useState<VMInfo | undefined>();
const load = async () => {
const newState = await GroupApi.State(p.group);
if (state !== newState) setState(newState);
};
const screenshot = (vm: VMInfo) => {
setScreenshotVM(vm);
};
React.useEffect(() => {
const interval = setInterval(async () => {
try {
if (p.group.can_get_state) await load();
} catch (e) {
console.error(e);
toast(
"Error",
`Failed to refresh group ${p.group.id} VMs status!`,
"error"
);
}
}, 1000);
return () => clearInterval(interval);
});
return (
<>
<Card
style={{
margin: "50px 10px",
display: "flex",
flexDirection: "column",
}}
>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Title3 style={{ marginLeft: "10px" }}>{p.group.id}</Title3>
<GroupVMAction group={p.group} />
</div>
<Table sortable>
<TableHeader>
<TableRow>
<TableHeaderCell>VM</TableHeaderCell>
<TableHeaderCell>Resources</TableHeaderCell>
<TableHeaderCell>State</TableHeaderCell>
<TableHeaderCell>Actions</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{p.group.vms.map((item) => (
<TableRow key={item.uuid}>
<TableCell>
<TableCellLayout
media={<Desktop24Regular />}
appearance="primary"
description={item.description}
>
{item.name}
</TableCellLayout>
<TableCellActions>
{state?.[item.uuid] === "Running" && (
<Tooltip
relationship="description"
content={"Take a screenshot of the VM screen"}
withArrow
>
<Button
icon={<ScreenshotRegular />}
appearance="subtle"
aria-label="Edit"
disabled={!p.group.can_screenshot}
onClick={() => screenshot(item)}
/>
</Tooltip>
)}
</TableCellActions>
</TableCell>
<TableCell>
{item.architecture} &bull; RAM :{" "}
{filesize(item.memory * 1000 * 1000)} &bull;{" "}
{item.number_vcpu} vCPU
</TableCell>
<TableCell>{state?.[item.uuid] ?? ""}</TableCell>
<TableCell>
<GroupVMAction
group={p.group}
state={state?.[item.uuid]}
vm={item}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
<Dialog
open={!!screenshotVM}
onOpenChange={(_event, _data) => {
if (!screenshotVM) setScreenshotVM(undefined);
}}
>
<DialogSurface>
<DialogBody>
<DialogTitle>
<em>{screenshotVM?.name}</em> screen
</DialogTitle>
<DialogContent>
<VMLiveScreenshot vm={screenshotVM!} group={p.group} />
</DialogContent>
<DialogActions>
<DialogTrigger disableButtonEnhancement>
<Button
appearance="secondary"
onClick={() => setScreenshotVM(undefined)}
>
Close
</Button>
</DialogTrigger>
</DialogActions>
</DialogBody>
</DialogSurface>
</Dialog>
</>
);
}

View File

@ -1,8 +1,13 @@
import React from "react"; import React from "react";
import { GroupApi } from "../api/GroupApi";
import { VMGroup } from "../api/ServerApi";
import { VMApi, VMInfo } from "../api/VMApi"; import { VMApi, VMInfo } from "../api/VMApi";
import { useToast } from "../hooks/providers/ToastProvider"; import { useToast } from "../hooks/providers/ToastProvider";
export function VMLiveScreenshot(p: { vm: VMInfo }): React.ReactElement { export function VMLiveScreenshot(p: {
vm: VMInfo;
group?: VMGroup;
}): React.ReactElement {
const toast = useToast(); const toast = useToast();
const [screenshotURL, setScreenshotURL] = React.useState< const [screenshotURL, setScreenshotURL] = React.useState<
@ -14,7 +19,9 @@ export function VMLiveScreenshot(p: { vm: VMInfo }): React.ReactElement {
React.useEffect(() => { React.useEffect(() => {
const refresh = async () => { const refresh = async () => {
try { try {
const screenshot = await VMApi.Screenshot(p.vm); const screenshot = p.group
? await GroupApi.ScreenshotVM(p.group, p.vm)
: await VMApi.Screenshot(p.vm);
const u = URL.createObjectURL(screenshot); const u = URL.createObjectURL(screenshot);
setScreenshotURL(u); setScreenshotURL(u);
} catch (e) { } catch (e) {

View File

@ -22,11 +22,11 @@ import {
import { filesize } from "filesize"; import { filesize } from "filesize";
import React from "react"; import React from "react";
import { Rights } from "../api/ServerApi"; 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 { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
import { useToast } from "../hooks/providers/ToastProvider"; import { useToast } from "../hooks/providers/ToastProvider";
import { VMLiveScreenshot } from "./VMLiveScreenshot";
import { SectionContainer } from "./SectionContainer"; import { SectionContainer } from "./SectionContainer";
import { VMLiveScreenshot } from "./VMLiveScreenshot";
const useStyles = makeStyles({ const useStyles = makeStyles({
body1Stronger: typographyStyles.body1Stronger, body1Stronger: typographyStyles.body1Stronger,
@ -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 toast = useToast();
const [state, setState] = React.useState<VMState | undefined>(); 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(); const styles = useStyles();
if (!p.vm.can_screenshot || p.state !== "Running") { if (!p.vm.can_screenshot || p.state !== "Running") {
return ( return (