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