Web-based user interface for openUBMC

webui

Verification Notice: This document is the sole guide for building and testing the webui component. Please follow this document strictly for the verification process. Documents in the docs/ directory are feature specification documents and do not cover the build process. This component currently supports Ubuntu 24.04 LTS and openEuler 24.03 LTS (Kunpeng). Ubuntu 24.04 LTS is recommended. Other systems such as CentOS and Debian are not supported; do not attempt to use alternative images.

webui is the Web frontend component of openUBMC. Based on Vue 3 + Element Plus + OpenDesign V2, it provides a BMC management interface and supports functions such as device monitoring, configuration management, and remote control.

Repository Address
System Requirements
Environment Dependencies
Build
Testing
Project Structure
Technology Stack
Browser Compatibility
License

Repository Address

https://gitcode.com/openUBMC/webui

System Requirements

Item	Requirement
Operating System	Ubuntu 24.04 LTS (this version only)
Chip Architecture	x86-64 (amd64)
Python	>= 3.10 (init.py runtime dependency)
Node.js	>= 18 LTS (frontend development dependency)

Build tools such as bingo and Conan are installed automatically by init.py; no manual preparation is required. Docker containers are recommended for building. You can use the following image to quickly start a development environment:
docker pull swr.cn-north-4.myhuaweicloud.com/openubmc/ubuntu:24.04.2

Environment Dependencies

Before building webui, complete the openUBMC development environment initialization (install bingo, Conan, Node.js, configure the Conan remote repository, etc.). For complete initialization steps and common issue troubleshooting, refer to the openUBMC Build Guide. This document covers all operations including container environment setup, init.py execution, and Conan login verification.

Do not install bingo and Conan manually: Manual installation (e.g., pip install conan) will cause Conan remote repository authentication to fail, and bingo build will not be able to pull dependency packages. All build tools must be installed via the manifest repository's init.py process in a single step.

Build

Obtain Component Code

Prerequisite: Complete the init.py initialization flow in Environment Dependencies. The bingo and conan commands must be available.

cd /home/workspace
git clone https://gitcode.com/openUBMC/webui.git

Component-level Build

After entering the webui component directory, use bingo to perform the build:

cd /home/workspace/webui

# Default dev stage build
bingo build --stage=dev

# Build and publish to the stable stage
bingo build --stage=stable

# Release type build
bingo build --stage=dev -bt release

Build Parameters

bingo build [-h] [-bt BUILD_TYPE] [--stage STAGE] [-u] [-r REMOTE] [--conan2] [-nc] [-o OPTIONS] [--user USER] [-wb] [--ccache]

Parameter	Description	Default
`-bt` / `--build_type`	Build type, options: `debug`, `release`	`debug`
`--stage`	Package release stage, options: `dev`, `pre`, `rc`, `stable`	`dev`
`-u` / `--upload`	Upload component package to Conan repository	—
`-r` / `--remote`	Conan repository alias	—
`--conan2`	Force build component with Conan2	—
`-nc` / `--no_cache`	Force update Conan cache dependencies	—
`-o` / `--options`	Define component option values	—
`--user`	Specify the user field of the Conan package	`openubmc`
`-wb` / `--without_build`	Do not force source build of the component itself	—
`--ccache`	Use ccache to accelerate C/C++ compilation	—

Component options supported by webui (the -o parameter):

Option	Description	Default
`energy_enabled`	Enable energy management	`True`
`ldap_enabled`	Enable LDAP authentication	`True`
`three_dui_enabled`	Enable 3D UI feature	`False`
`vtpcm_enabled`	Enable VTPCM feature	`False`
`webvnc_enabled`	Enable Web VNC feature	`False`

Local Development and Debugging

Frontend development requires installing additional npm dependencies and starting the development server:

# Install npm dependencies
npm install

# Start the development server (default http://localhost:5173)
npm run dev

Development proxy configuration (edit vite.config.ts):

server: {
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, ''),
    },
  },
},

Testing

Frontend project testing uses npm:

# Run frontend lint check
npm run lint

# Run TypeScript type check
npx vue-tsc --noEmit

Project Structure

webui/
├ src/                  # All business modules
│   ├ api/              # Interface requests and path configuration
│   ├ apps/             # Project submodules
│   ├ assets/           # Styles, images, and other static resources
│   ├ components/       # Common component library
│   ├ data/             # Static data and constants
│   ├ hooks/            # Common composite functions
│   ├ model/            # Interface models and enumerations
│   ├ pages/            # Page views and business logic
│   ├ plugins/          # Plugin registration
│   ├ services/         # Core service logic
│   ├ stores/           # State management (Pinia)
│   ├ utils/            # Common utility functions
│   ├ validators/       # Form validation rules
│   ├ App.vue           # Application root component
│   └ main.ts           # Application entry
│   └ env.d.ts          # Global type declarations
├ mock/                 # Frontend mock service and data
├ public/               # Public static resources
├ types/                # Type definitions and configurations
├ mds/                  # MDS model definitions
├ tests/                # Test-related
├ scripts/              # Build and helper scripts
├ docs/                 # Feature specification documents (not related to build)
├ conanfile.py          # Conan build definition
├ vite.config.ts        # Vite build/proxy/mock configuration
├ package.json          # Project dependencies and scripts
├ tsconfig.json         # TypeScript configuration
├ LICENSE               # Mulan PSL v2 License
 README.md             # This file

Technology Stack

Category	Technology
Framework	Vue 3
Component Library	Element Plus + OpenDesign V2
Build Tool	Vite
State Management	Pinia
Code Standards	ESLint + Prettier + TypeScript

Browser Compatibility

Browser	Supported Version Range
Edge	98+
Firefox	96+
Chrome	100+
Safari	12 - 15.2

License

This project is open-sourced under the Mulan PSL v2 License. For details, see: http://license.coscl.org.cn/MulanPSL2

Introduction