Files
madbase/control-plane-ui/README.md
Vlad Durnea cffdf8af86
Some checks failed
CI/CD Pipeline / unit-tests (push) Failing after 1m16s
CI/CD Pipeline / integration-tests (push) Failing after 2m32s
CI/CD Pipeline / lint (push) Successful in 5m22s
CI/CD Pipeline / e2e-tests (push) Has been skipped
CI/CD Pipeline / build (push) Has been skipped
wip:milestone 0 fixes
2026-03-15 12:35:42 +02:00

2.3 KiB
Raw Blame History

MadBase Control Plane UI

Web-based administration interface for the MadBase Control Plane.

Features

  • 📊 Dashboard - Overview of cluster health and metrics
  • 🖥️ Server Management - Add, remove, and monitor servers
  • 📋 Templates - Deploy pre-configured server templates
  • ☁️ Providers - View VPS provider options and pricing
  • 📈 Scaling - Visual scaling tool with cost estimation
  • 💚 Cluster Health - Real-time cluster monitoring
  • ⚙️ Settings - Configure API endpoints and credentials

Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The UI will be available at http://localhost:3000

Tech Stack

  • React 18 - UI framework
  • TypeScript - Type safety
  • Material-UI - Component library
  • TanStack Query - Data fetching and caching
  • React Router - Routing
  • Vite - Build tool

Pages

Dashboard

  • Cluster overview
  • Server count and status
  • Quick actions
  • Recent activity

Servers

  • List all servers
  • Add new servers
  • Remove servers (with data integrity checks)
  • View server status

Templates

  • View all available templates
  • See template details (cost, services, requirements)
  • Deploy from templates

Providers

  • View supported VPS providers
  • See available plans and pricing
  • Compare provider options

Scaling

  • Configure scaling parameters
  • View cost estimates
  • Execute scaling plans

Cluster Health

  • Real-time cluster status
  • Server metrics
  • Service health

Configuration

The UI connects to the Control Plane API at http://localhost:8001 by default. To change this:

vite.config.ts: ``typescript server: { proxy: { '/api': { target: 'http://your-api-url:8001', changeOrigin: true, }, }, }


## Building for Production

```bash
npm run build

The built files will be in dist/. Serve them with any static file server:

npx serve dist

Deployment

The UI can be served from:

  • The Control Plane proxy (port 8080)
  • Nginx/Apache
  • CDN (CloudFlare, Netlify, Vercel)

Environment Variables

No environment variables required for development. For production:

``ash VITE_API_URL=http://your-api-url:8001