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
118 lines
2.3 KiB
Markdown
118 lines
2.3 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
# 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:
|
||
|
||
```bash
|
||
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
|
||
```
|