1 Commits

Author SHA1 Message Date
add8b47fd3 Update dependency @typescript-eslint/parser to v8.4.0
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing
2024-09-03 00:35:11 +00:00
37 changed files with 2882 additions and 5388 deletions

View File

@ -5,7 +5,7 @@ name: default
steps:
- name: frontend_build
image: node:23
image: node:22
volumes:
- name: frontend_app
path: /tmp/frontend_build

View File

@ -1,11 +1,4 @@
# VirtWeb Remote
Web UI that allows to start and stop VMs managed by VirtWEB without having to expose the VirtWEB directly on the Internet.
WIP project
VirtWebRemote rely on OpenID to authenticate users.
VirtWebRemote authenticates against VirtWEB API using an API token. Both the token ID and private key are required to be able to authenticate against the VirtWEB API.
## Docker image options
```bash
docker run --rm -it pierre42100/virtweb_remote --help
```
This project aims to use the VirtWeb API to start and stop VM without directly exposing the VirtWEB API to the Internet.

1631
remote_backend/Cargo.lock generated

File diff suppressed because it is too large Load Diff

View File

@ -1,28 +1,28 @@
[package]
name = "remote_backend"
version = "0.1.0"
edition = "2024"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
log = "0.4.27"
env_logger = "0.11.8"
clap = { version = "4.5.40", features = ["derive", "env"] }
serde = { version = "1.0.219", features = ["derive"] }
light-openid = { version = "1.0.4", features = ["crypto-wrapper"] }
basic-jwt = "0.3.0"
actix-web = "4.10.2"
log = "0.4.21"
env_logger = "0.11.3"
clap = { version = "4.5.4", features = ["derive", "env"] }
serde = { version = "1.0.200", features = ["derive"] }
light-openid = { version = "1.0.2", features = ["crypto-wrapper"] }
basic-jwt = "0.2.0"
actix-web = "4.5.1"
actix-remote-ip = "0.1.0"
actix-session = { version = "0.10.1", features = ["cookie-session"] }
actix-identity = "0.8.0"
actix-cors = "0.7.1"
lazy_static = "1.5.0"
anyhow = "1.0.98"
reqwest = { version = "0.12.20", features = ["json"] }
thiserror = "2.0.12"
uuid = { version = "1.16.0", features = ["v4", "serde"] }
futures-util = "0.3.31"
lazy-regex = "3.4.1"
mime_guess = "2.0.5"
rust-embed = { version = "8.7.2" }
actix-session = { version = "0.10.0", features = ["cookie-session"] }
actix-identity = "0.7.1"
actix-cors = "0.7.0"
lazy_static = "1.4.0"
anyhow = "1.0.83"
reqwest = { version = "0.12.4", features = ["json"] }
thiserror = "1.0.59"
uuid = { version = "1.8.0", features = ["v4", "serde"] }
futures-util = "0.3.30"
lazy-regex = "3.1.0"
mime_guess = "2.0.4"
rust-embed = { version = "8.3.0" }

View File

@ -6,4 +6,4 @@ RUN apt-get update \
COPY remote_backend /usr/local/bin/remote_backend
ENTRYPOINT ["/usr/local/bin/remote_backend"]
ENTRYPOINT /usr/local/bin/remote_backend

View File

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

View File

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

View File

@ -1,79 +0,0 @@
use crate::controllers::HttpResult;
use crate::virtweb_client;
use crate::virtweb_client::{GroupID, VMUuid};
use actix_web::{HttpResponse, web};
#[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

@ -1,11 +1,11 @@
use actix_web::HttpResponse;
use actix_web::body::BoxBody;
use actix_web::http::StatusCode;
use actix_web::HttpResponse;
use std::error::Error;
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;
@ -51,7 +51,7 @@ impl From<anyhow::Error> for HttpErr {
impl From<Box<dyn Error>> for HttpErr {
fn from(value: Box<dyn Error>) -> Self {
HttpErr::Err(std::io::Error::other(value.to_string()).into())
HttpErr::Err(std::io::Error::new(ErrorKind::Other, value.to_string()).into())
}
}
@ -81,7 +81,7 @@ impl From<reqwest::header::ToStrError> for HttpErr {
impl From<actix_web::Error> for HttpErr {
fn from(value: actix_web::Error) -> Self {
HttpErr::Err(std::io::Error::other(value.to_string()).into())
HttpErr::Err(std::io::Error::new(ErrorKind::Other, value.to_string()).into())
}
}

View File

@ -1,8 +1,6 @@
use crate::app_config::AppConfig;
use crate::controllers::HttpResult;
use crate::extractors::auth_extractor::AuthExtractor;
use crate::virtweb_client;
use crate::virtweb_client::{GroupID, VMCaps, VMInfo};
use actix_web::HttpResponse;
#[derive(serde::Serialize)]
@ -17,75 +15,3 @@ pub async fn config(auth: AuthExtractor) -> HttpResult {
disable_auth: AppConfig::get().unsecure_disable_login,
}))
}
#[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 {
#[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 {
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()),
},
})
}
Ok(HttpResponse::Ok().json(res))
}

View File

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

View File

@ -2,6 +2,20 @@ use crate::controllers::HttpResult;
use crate::virtweb_client;
use actix_web::HttpResponse;
#[derive(serde::Serialize)]
struct SysInfoStatus {
allowed: bool,
}
/// Check if system info can be retrieved
pub async fn config() -> HttpResult {
let info = virtweb_client::get_token_info().await?;
Ok(HttpResponse::Ok().json(SysInfoStatus {
allowed: info.can_retrieve_system_info(),
}))
}
/// Get current system status
pub async fn status() -> HttpResult {
Ok(HttpResponse::Ok().json(virtweb_client::get_server_info().await?))

View File

@ -3,7 +3,55 @@
use crate::controllers::HttpResult;
use crate::virtweb_client;
use crate::virtweb_client::VMUuid;
use actix_web::{HttpResponse, web};
use actix_web::{web, HttpResponse};
#[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,
}
/// Get the list of VMs that can be controlled by VirtWeb remote
pub async fn list() -> HttpResult {
let rights = virtweb_client::get_token_info().await?;
let mut res = vec![];
for v in rights.list_vm() {
let vm_info = virtweb_client::vm_info(v).await?;
res.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()),
})
}
Ok(HttpResponse::Ok().json(res))
}
#[derive(serde::Deserialize)]
pub struct ReqPath {

View File

@ -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 {

View File

@ -1,19 +1,18 @@
use actix_cors::Cors;
use actix_identity::IdentityMiddleware;
use actix_identity::config::LogoutBehaviour;
use actix_identity::IdentityMiddleware;
use actix_remote_ip::RemoteIPConfig;
use actix_session::SessionMiddleware;
use actix_session::storage::CookieSessionStore;
use actix_session::SessionMiddleware;
use actix_web::cookie::{Key, SameSite};
use actix_web::middleware::Logger;
use actix_web::web::Data;
use actix_web::{App, HttpServer, web};
use actix_web::{web, App, HttpServer};
use light_openid::basic_state_manager::BasicStateManager;
use remote_backend::app_config::AppConfig;
use remote_backend::constants;
use remote_backend::controllers::{
auth_controller, group_controller, server_controller, static_controller, sys_info_controller,
vm_controller,
auth_controller, server_controller, static_controller, sys_info_controller, vm_controller,
};
use remote_backend::middlewares::auth_middleware::AuthChecker;
use std::time::Duration;
@ -83,44 +82,8 @@ async fn main() -> std::io::Result<()> {
"/api/auth/sign_out",
web::get().to(auth_controller::sign_out),
)
.route(
"/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/list", web::get().to(vm_controller::list))
.route("/api/vm/{uid}/state", web::get().to(vm_controller::state))
.route("/api/vm/{uid}/start", web::get().to(vm_controller::start))
.route(
@ -139,6 +102,10 @@ async fn main() -> std::io::Result<()> {
web::get().to(vm_controller::screenshot),
)
// Sys info routes
.route(
"/api/sysinfo/config",
web::get().to(sys_info_controller::config),
)
.route(
"/api/sysinfo/status",
web::get().to(sys_info_controller::status),

View File

@ -1,4 +1,4 @@
use std::future::{Ready, ready};
use std::future::{ready, Ready};
use std::rc::Rc;
use crate::app_config::AppConfig;
@ -7,8 +7,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;

View File

@ -1,7 +1,6 @@
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;
@ -13,105 +12,9 @@ pub enum VirtWebClientError {
InvalidStatusCode(u16),
}
#[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)]
#[derive(Eq, PartialEq, Debug, Copy, Clone, serde::Serialize, serde::Deserialize)]
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)
@ -166,7 +69,7 @@ pub struct TokenClaims {
pub nonce: String,
}
#[derive(serde::Deserialize, serde::Serialize, Debug)]
#[derive(serde::Deserialize, Debug)]
pub struct VMInfo {
pub uuid: VMUuid,
pub name: String,
@ -176,18 +79,6 @@ 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,
@ -256,16 +147,6 @@ 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
@ -287,13 +168,12 @@ 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.split_once('?').map(|s| s.0).unwrap_or(&uri).to_string(),
path: uri.to_string(),
nonce: Uuid::new_v4().to_string(),
};
let jwt = AppConfig::get().token_private_key().sign_jwt(&jwt)?;
@ -380,73 +260,6 @@ 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

View File

@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

View File

@ -1,28 +0,0 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)

File diff suppressed because it is too large Load Diff

View File

@ -10,25 +10,22 @@
"preview": "vite preview"
},
"dependencies": {
"@fluentui/react-components": "^9.66.2",
"@fluentui/react-icons": "^2.0.304",
"filesize": "^10.1.6",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"@fluentui/react-components": "^9.49.2",
"@fluentui/react-icons": "^2.0.239",
"filesize": "^10.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@types/react": "^18.3.23",
"@types/react-dom": "^18.3.7",
"@typescript-eslint/eslint-plugin": "^8.34.1",
"@typescript-eslint/parser": "^8.34.1",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.26.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.1.0",
"typescript": "^5.8.3",
"typescript-eslint": "^8.32.1",
"vite": "^6.3.5"
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.2.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.11"
}
}

View File

@ -5,8 +5,6 @@ import {
typographyStyles,
} from "@fluentui/react-components";
import {
AppsListDetailFilled,
AppsListDetailRegular,
DesktopFilled,
DesktopRegular,
InfoFilled,
@ -14,13 +12,12 @@ import {
bundleIcon,
} from "@fluentui/react-icons";
import React from "react";
import { Rights, ServerApi } from "./api/ServerApi";
import { ServerApi } from "./api/ServerApi";
import { AuthRouteWidget } from "./routes/AuthRouteWidget";
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,
@ -30,8 +27,6 @@ const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
const AppListIcon = bundleIcon(AppsListDetailFilled, AppsListDetailRegular);
export function App() {
return (
<AsyncWidget
@ -45,79 +40,45 @@ export function App() {
}
function AppInner(): React.ReactElement {
const styles = useStyles();
const [tab, setTab] = React.useState<"vm" | "info">("vm");
if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
return <AuthRouteWidget />;
return <AuthenticatedApp />;
}
function AuthenticatedApp(): React.ReactElement {
const styles = useStyles();
const [tab, setTab] = React.useState<"group" | "vm" | "info">("group");
const [rights, setRights] = React.useState<Rights | undefined>();
const load = async () => {
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 (
<AsyncWidget
loadKey={1}
load={load}
errMsg="Failed to retrieve application rights!"
build={() => {
return (
<div
style={{
width: "95%",
maxWidth: "1000px",
margin: "50px auto",
}}
>
<span className={styles.title}>VirtWebRemote</span>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: "30px",
}}
>
<TabList
selectedValue={tab}
onTabSelect={(_, d) => setTab(d.value as any)}
>
{rights!.groups.length > 0 && (
<Tab value="group" icon={<AppListIcon />}>
Groups
</Tab>
)}
{rights!.vms.length > 0 && (
<Tab value="vm" icon={<DesktopIcon />}>
Virtual machines
</Tab>
)}
{rights!.sys_info && (
<Tab value="info" icon={<InfoIcon />}>
System info
</Tab>
)}
</TabList>
<div>
<MainMenu />
</div>
</div>
{tab === "group" && <GroupsWidget rights={rights!} />}
{tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
{tab === "info" && <SystemInfoWidget />}
</div>
);
<div
style={{
width: "95%",
maxWidth: "1000px",
margin: "50px auto",
}}
/>
>
<span className={styles.title}>VirtWebRemote</span>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: "30px",
}}
>
<TabList
selectedValue={tab}
onTabSelect={(_, d) => setTab(d.value as any)}
>
<Tab value="vm" icon={<DesktopIcon />}>
Virtual machines
</Tab>
<Tab value="info" icon={<InfoIcon />}>
System info
</Tab>
</TabList>
<div>
<MainMenu />
</div>
</div>
{tab === "vm" && <VirtualMachinesWidget />}
{tab === "info" && <SystemInfoWidget />}
</div>
);
}

View File

@ -1,107 +0,0 @@
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,24 +1,10 @@
import { APIClient } from "./ApiClient";
import { VMCaps, VMInfo, VMInfoAndCaps } from "./VMApi";
export interface ServerConfig {
authenticated: boolean;
disable_auth: boolean;
}
export interface Rights {
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 {
@ -41,16 +27,4 @@ export class ServerApi {
if (config === null) throw new Error("Missing configuration!");
return config;
}
/**
* Get application rights
*/
static async GetRights(): Promise<Rights> {
return (
await APIClient.exec({
uri: "/server/rights",
method: "GET",
})
).data;
}
}

View File

@ -1,5 +1,9 @@
import { APIClient } from "./ApiClient";
export interface SysInfoConfig {
allowed: boolean;
}
export interface LoadAverage {
one: number;
five: number;
@ -20,6 +24,14 @@ export interface SysInfoStatus {
}
export class SysInfoApi {
/**
* Get system info configuration (ie. check if it allowed)
*/
static async GetConfig(): Promise<SysInfoConfig> {
return (await APIClient.exec({ method: "GET", uri: "/sysinfo/config" }))
.data;
}
/**
* Get system status
*/

View File

@ -1,15 +1,12 @@
import { APIClient } from "./ApiClient";
export interface VMInfo {
uuid: string;
uiid: 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;
@ -20,8 +17,6 @@ export interface VMCaps {
can_screenshot: boolean;
}
export type VMInfoAndCaps = VMInfo & VMCaps;
export type VMState =
| "NoState"
| "Running"
@ -34,12 +29,19 @@ export type VMState =
| "Other";
export class VMApi {
/**
* Get the list of VM that can be managed by this console
*/
static async GetList(): Promise<VMInfo[]> {
return (await APIClient.exec({ method: "GET", uri: "/vm/list" })).data;
}
/**
* Get the state of a VM
*/
static async State(vm: VMInfo): Promise<VMState> {
return (
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/state` })
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/state` })
).data.state;
}
@ -47,42 +49,42 @@ export class VMApi {
* Request to start VM
*/
static async StartVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/start` });
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/start` });
}
/**
* Request to suspend VM
*/
static async SuspendVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/suspend` });
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/suspend` });
}
/**
* Request to resume VM
*/
static async ResumeVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/resume` });
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/resume` });
}
/**
* Request to shutdown VM
*/
static async ShutdownVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/shutdown` });
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/shutdown` });
}
/**
* Request to kill VM
*/
static async KillVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/kill` });
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/kill` });
}
/**
* Request to reset VM
*/
static async ResetVM(vm: VMInfo): Promise<void> {
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uuid}/reset` });
await APIClient.exec({ method: "GET", uri: `/vm/${vm.uiid}/reset` });
}
/**
@ -91,7 +93,7 @@ export class VMApi {
static async Screenshot(vm: VMInfo): Promise<Blob> {
return (
await APIClient.exec({
uri: `/vm/${vm.uuid}/screenshot`,
uri: `/vm/${vm.uiid}/screenshot`,
method: "GET",
})
).data;

View File

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

View File

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

@ -1,171 +0,0 @@
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,13 +1,47 @@
import { Field, ProgressBar } from "@fluentui/react-components";
import { filesize } from "filesize";
import React from "react";
import { SysInfoApi, SysInfoStatus } from "../api/SysInfoApi";
import { useToast } from "../hooks/providers/ToastProvider";
import { format_duration } from "../utils/time_utils";
import { SysInfoApi, SysInfoConfig, SysInfoStatus } from "../api/SysInfoApi";
import { AsyncWidget } from "./AsyncWidget";
import { SectionContainer } from "./SectionContainer";
import { Field, ProgressBar } from "@fluentui/react-components";
import { filesize } from "filesize";
import { format_duration } from "../utils/time_utils";
import { useToast } from "../hooks/providers/ToastProvider";
export function SystemInfoWidget(): React.ReactElement {
const [config, setConfig] = React.useState<SysInfoConfig | undefined>();
const load = async () => {
setConfig(await SysInfoApi.GetConfig());
};
return (
<SectionContainer>
<AsyncWidget
loadKey={1}
load={load}
errMsg="Failed to check system configuration!"
loadingMessage="Checking server configuration..."
build={() =>
config?.allowed ? (
<SystemInfoWidgetInner />
) : (
<SystemInfoWidgetUnavailable />
)
}
/>
</SectionContainer>
);
}
function SystemInfoWidgetUnavailable(): React.ReactElement {
return (
<p style={{ textAlign: "center" }}>
Unfortunatley, system information is available. (not enough privileges)
</p>
);
}
function SystemInfoWidgetInner(): React.ReactElement {
const toast = useToast();
const [status, setStatus] = React.useState<SysInfoStatus | undefined>();
@ -29,51 +63,49 @@ export function SystemInfoWidget(): React.ReactElement {
});
return (
<SectionContainer>
<AsyncWidget
loadKey={1}
load={load}
loadingMessage="Loading system status..."
errMsg="Failed to load system status!"
build={() => (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
<AsyncWidget
loadKey={1}
load={load}
loadingMessage="Loading system status..."
errMsg="Failed to load system status!"
build={() => (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<Field
validationMessage={`${filesize(
status!.system.used_memory
)} of memory used out of ${filesize(
status!.system.available_memory + status!.system.used_memory
)}`}
validationState="none"
style={{ flex: 2 }}
>
<Field
validationMessage={`${filesize(
status!.system.used_memory
)} of memory used out of ${filesize(
status!.system.available_memory + status!.system.used_memory
)}`}
validationState="none"
style={{ flex: 2 }}
>
<ProgressBar
value={
status!.system.used_memory /
(status!.system.available_memory + status!.system.used_memory)
}
/>
</Field>
<div style={{ width: "20px" }}></div>
<div style={{ flex: 1 }}>
<p>
Load average: {status!.system.load_average.one}{" "}
{status!.system.load_average.five}{" "}
{status!.system.load_average.fifteen}
</p>
<UptimeWidget uptime={status!.system.uptime} />
Number physical cores: {status!.system.physical_core_count}
</div>
<ProgressBar
value={
status!.system.used_memory /
(status!.system.available_memory + status!.system.used_memory)
}
/>
</Field>
<div style={{ width: "20px" }}></div>
<div style={{ flex: 1 }}>
<p>
Load average: {status!.system.load_average.one}{" "}
{status!.system.load_average.five}{" "}
{status!.system.load_average.fifteen}
</p>
<UptimeWidget uptime={status!.system.uptime} />
Number physical cores: {status!.system.physical_core_count}
</div>
)}
/>
</SectionContainer>
</div>
)}
/>
);
}

View File

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

View File

@ -21,10 +21,10 @@ import {
} from "@fluentui/react-icons";
import { filesize } from "filesize";
import React from "react";
import { Rights } from "../api/ServerApi";
import { VMApi, VMInfo, VMInfoAndCaps, VMState } from "../api/VMApi";
import { VMApi, VMInfo, VMState } from "../api/VMApi";
import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
import { useToast } from "../hooks/providers/ToastProvider";
import { AsyncWidget } from "./AsyncWidget";
import { SectionContainer } from "./SectionContainer";
import { VMLiveScreenshot } from "./VMLiveScreenshot";
@ -33,28 +33,43 @@ const useStyles = makeStyles({
caption1: typographyStyles.caption1,
});
export function VirtualMachinesWidget(p: {
rights: Rights;
}): React.ReactElement {
export function VirtualMachinesWidget(): React.ReactElement {
const [list, setList] = React.useState<VMInfo[] | undefined>();
const load = async () => {
setList(await VMApi.GetList());
};
return (
<SectionContainer>
<div
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
}}
>
{p.rights.vms.map((v, n) => (
<VMWidget key={n} vm={v} />
))}
</div>
<AsyncWidget
loadKey={1}
load={load}
loadingMessage="Loading the list virtual machines..."
errMsg="Failed to load the list of virtual machines!"
build={() => <VirtualMachinesWidgetInner list={list!} />}
/>
</SectionContainer>
);
}
function VMWidget(p: { vm: VMInfoAndCaps }): React.ReactElement {
function VirtualMachinesWidgetInner(p: { list: VMInfo[] }): React.ReactElement {
return (
<div
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
}}
>
{p.list.map((v, n) => (
<VMWidget key={n} vm={v} />
))}{" "}
</div>
);
}
function VMWidget(p: { vm: VMInfo }): React.ReactElement {
const toast = useToast();
const [state, setState] = React.useState<VMState | undefined>();
@ -189,10 +204,7 @@ function VMWidget(p: { vm: VMInfoAndCaps }): React.ReactElement {
);
}
function VMPreview(p: {
vm: VMInfoAndCaps;
state?: VMState;
}): React.ReactElement {
function VMPreview(p: { vm: VMInfo; state?: VMState }): React.ReactElement {
const styles = useStyles();
if (!p.vm.can_screenshot || p.state !== "Running") {
return (

View File

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

View File

@ -1,7 +1,25 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

View File

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

View File

@ -1,7 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

View File

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