KVMDash Frontend

KVMDash is a web application that enables the management of Virtual Machines (VMs) on Linux systems. With a user-friendly interface, KVMDash facilitates the administration and monitoring of virtualization environments.

Features

VM Management

• Create, delete, and configure VMs and containers through the web interface.
• Use templates for quick and standardized VM creation.

System Monitoring

• Real-time monitoring of resources such as CPU, memory, disk usage, and other important system metrics.
• Clear visualization of system performance for optimal control and error analysis.

Demo Videos

KvmDash.mp4

System Requirements

• Node.js 18.x or newer
• npm 9.x or newer
• KVMDash Backend (separately installed and configured)

Installation & Configuration

1. Clone Repository

# Download repository
git clone https://github.com/KvmDash/KvmDash.front.git kvmdash-frontend
cd kvmdash-frontend

2. Initialize Git Submodules

# Initialize and fetch Spice-HTML5 submodule
git submodule init
git submodule update

Alternatively, you can clone the repository directly with submodules:

git clone --recurse-submodules https://github.com/KvmDash/KvmDash.front.git kvmdash-frontend
cd kvmdash-frontend

3. Set Up Frontend

# Configure SPICE HTML5 Client
cd src/assets/spice-html5
cp package.json.in package.json
sed -i 's/VERSION/0.3/g' package.json

# Return to main directory
cd ../../..

# Install dependencies
npm install

4. Configure Backend Connection

Open the file src/config.ts and adjust the backend settings:

/// Test environment
// export const BACKEND_PORT = 8000; // Backend port
// export const BACKEND_HOST = 'localhost'; // Backend hostname/IP address

export const BACKEND_PORT = 80; // Backend port
export const BACKEND_HOST = 'kvmdash'; // Backend hostname/IP address

5. Start Development Server

npm run dev

After starting, you can access the KVMDash Frontend at http://localhost:5173.

Important Note about Development Environment

The development server does not support WebSocket connections required for the SPICE remote console. The following features are only available in a production environment with Apache/Nginx:

• SPICE remote console
• WebSocket connections to VMs

For full functionality, especially the remote console feature, a production web server (Apache/Nginx) with WebSocket support is required.

6. Build for Production

npm run build

The build files can be found in the dist directory and can be deployed on a web server of your choice.

Note

This frontend requires a connection to the KVMDash Backend (https://github.com/KvmDash/KvmDash.back) to function properly. Please ensure that the backend is available and correctly configured.