f4491757d9
- Next.js 14 frontend with dark cyan/navy theme - tRPC API with Prisma ORM - MeshCentral, LibreNMS, Headwind MDM integrations - Multi-tenant architecture - Alert system with email/SMS/webhook notifications - Docker Compose deployment - Complete documentation
322 lines
14 KiB
Markdown
322 lines
14 KiB
Markdown
# Arquitectura del Sistema
|
|
|
|
## Vision General
|
|
|
|
MSP Monitor Dashboard es una aplicacion web moderna construida con una arquitectura monolitica modular, diseñada para ejecutarse en una unica VM de Proxmox mientras mantiene una clara separacion de responsabilidades.
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ NGINX (Proxy) │
|
|
│ SSL/TLS + Rate Limiting │
|
|
└─────────────────────────────────────────────────────────────────┘
|
|
│
|
|
┌───────────────┴───────────────┐
|
|
▼ ▼
|
|
┌───────────────────────────┐ ┌───────────────────────────────┐
|
|
│ Next.js Dashboard │ │ Background Workers │
|
|
│ (Frontend + API Routes) │ │ (BullMQ Jobs) │
|
|
└───────────────────────────┘ └───────────────────────────────┘
|
|
│ │
|
|
└───────────────┬───────────────┘
|
|
│
|
|
┌───────────────────────┼───────────────────────┐
|
|
▼ ▼ ▼
|
|
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
|
|
│ PostgreSQL │ │ Redis │ │ External │
|
|
│ (Primary) │ │ (Cache/Queue) │ │ APIs │
|
|
└───────────────┘ └───────────────┘ └───────────────┘
|
|
│
|
|
┌───────────────────────────────┼───────────────────────────────┐
|
|
▼ ▼ ▼
|
|
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
|
|
│ MeshCentral │ │ LibreNMS │ │ Headwind MDM │
|
|
│ (PC/Laptop) │ │ (Network) │ │ (Mobile) │
|
|
└───────────────┘ └───────────────┘ └───────────────┘
|
|
```
|
|
|
|
## Componentes Principales
|
|
|
|
### 1. Frontend (Next.js + React)
|
|
|
|
**Ubicacion**: `src/app/`, `src/components/`
|
|
|
|
El frontend utiliza Next.js 14 con App Router, proporcionando:
|
|
|
|
- **Server Components**: Para renderizado del lado del servidor
|
|
- **Client Components**: Para interactividad en el navegador
|
|
- **Tailwind CSS**: Sistema de diseño con tema oscuro cyan/navy
|
|
- **React Query**: Cache y sincronizacion de estado del servidor
|
|
|
|
**Estructura de paginas**:
|
|
```
|
|
src/app/
|
|
├── (dashboard)/ # Grupo de rutas autenticadas
|
|
│ ├── layout.tsx # Layout con sidebar y header
|
|
│ ├── page.tsx # Dashboard principal
|
|
│ ├── equipos/ # Gestion de PCs/laptops/servidores
|
|
│ ├── celulares/ # Gestion de dispositivos moviles
|
|
│ ├── red/ # Gestion de dispositivos de red
|
|
│ ├── alertas/ # Centro de alertas
|
|
│ ├── reportes/ # Generacion de reportes
|
|
│ └── configuracion/ # Configuracion del sistema
|
|
└── api/ # API Routes
|
|
└── trpc/ # Endpoint tRPC
|
|
```
|
|
|
|
### 2. Backend (tRPC + Prisma)
|
|
|
|
**Ubicacion**: `src/server/trpc/`
|
|
|
|
El backend utiliza tRPC para APIs type-safe con validacion Zod:
|
|
|
|
```typescript
|
|
// Ejemplo de router
|
|
export const equiposRouter = router({
|
|
list: protectedProcedure
|
|
.input(z.object({ clienteId: z.string().optional() }))
|
|
.query(async ({ ctx, input }) => {
|
|
return ctx.prisma.dispositivo.findMany({
|
|
where: input.clienteId ? { clienteId: input.clienteId } : {},
|
|
})
|
|
}),
|
|
})
|
|
```
|
|
|
|
**Routers disponibles**:
|
|
- `auth` - Autenticacion y sesiones
|
|
- `clientes` - Gestion de clientes/tenants
|
|
- `equipos` - PCs, laptops, servidores
|
|
- `celulares` - Dispositivos moviles
|
|
- `red` - Dispositivos de red
|
|
- `alertas` - Sistema de alertas
|
|
- `reportes` - Generacion de reportes
|
|
- `usuarios` - Gestion de usuarios
|
|
- `configuracion` - Configuracion del sistema
|
|
|
|
### 3. Servicios de Integracion
|
|
|
|
**Ubicacion**: `src/server/services/`
|
|
|
|
Clientes para comunicacion con sistemas externos:
|
|
|
|
```
|
|
services/
|
|
├── meshcentral/
|
|
│ └── client.ts # Cliente API REST + WebSocket
|
|
├── librenms/
|
|
│ └── client.ts # Cliente API REST
|
|
└── headwind/
|
|
└── client.ts # Cliente API REST
|
|
```
|
|
|
|
Cada cliente proporciona:
|
|
- Autenticacion automatica
|
|
- Manejo de errores
|
|
- Tipado TypeScript
|
|
- Cache de conexiones
|
|
|
|
### 4. Sistema de Jobs (BullMQ)
|
|
|
|
**Ubicacion**: `src/server/jobs/`
|
|
|
|
Procesamiento asincronico con BullMQ y Redis:
|
|
|
|
```
|
|
jobs/
|
|
├── queue.ts # Configuracion de colas
|
|
├── worker.ts # Worker principal
|
|
├── sync-meshcentral.job.ts
|
|
├── sync-librenms.job.ts
|
|
├── sync-headwind.job.ts
|
|
├── alert-processor.job.ts
|
|
├── notification.job.ts
|
|
└── maintenance.job.ts
|
|
```
|
|
|
|
**Colas**:
|
|
| Cola | Proposito | Frecuencia |
|
|
|------|-----------|------------|
|
|
| sync | Sincronizacion con plataformas | Cada 5 min |
|
|
| alerts | Procesamiento de alertas | Bajo demanda |
|
|
| notifications | Envio de notificaciones | Bajo demanda |
|
|
| maintenance | Tareas de mantenimiento | Diario/Horario |
|
|
|
|
### 5. Base de Datos (PostgreSQL + Prisma)
|
|
|
|
**Ubicacion**: `prisma/schema.prisma`
|
|
|
|
Modelo de datos multi-tenant:
|
|
|
|
```
|
|
┌─────────────┐ ┌─────────────────┐
|
|
│ Cliente │────<│ Dispositivo │
|
|
└─────────────┘ └─────────────────┘
|
|
│ │
|
|
│ ┌───────┴───────┐
|
|
│ ▼ ▼
|
|
│ ┌───────────────┐ ┌───────────────┐
|
|
│ │ Metrica │ │ Software │
|
|
│ └───────────────┘ └───────────────┘
|
|
│
|
|
├───<│ Usuario │
|
|
│
|
|
└───<│ Alerta │
|
|
```
|
|
|
|
**Tablas principales**:
|
|
- `clientes` - Tenants del sistema
|
|
- `dispositivos` - Todos los tipos de dispositivos
|
|
- `alertas` - Alertas y eventos
|
|
- `usuarios` - Usuarios y permisos
|
|
- `configuracion` - Settings del sistema
|
|
|
|
## Flujo de Datos
|
|
|
|
### 1. Sincronizacion de Dispositivos
|
|
|
|
```
|
|
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
|
│ Plataforma │────>│ Worker │────>│ PostgreSQL │
|
|
│ Externa │ │ (BullMQ) │ │ │
|
|
└─────────────┘ └─────────────┘ └─────────────┘
|
|
▲ │
|
|
│ ▼
|
|
│ ┌─────────────┐
|
|
│ │ Redis │
|
|
│ │ (Cache) │
|
|
│ └─────────────┘
|
|
│ │
|
|
│ ▼
|
|
│ ┌─────────────┐
|
|
└────────────│ Alerta │
|
|
│ Processor │
|
|
└─────────────┘
|
|
```
|
|
|
|
### 2. Consulta de Dispositivos
|
|
|
|
```
|
|
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
|
│ Browser │────>│ Next.js │────>│ tRPC │
|
|
│ │<────│ (SSR) │<────│ Router │
|
|
└─────────────┘ └─────────────┘ └─────────────┘
|
|
│
|
|
▼
|
|
┌─────────────┐
|
|
│ Prisma │
|
|
│ Client │
|
|
└─────────────┘
|
|
│
|
|
┌───────────────────┴───────────────────┐
|
|
▼ ▼
|
|
┌─────────────┐ ┌─────────────┐
|
|
│ Redis │ │ PostgreSQL │
|
|
│ (Cache) │ │ │
|
|
└─────────────┘ └─────────────┘
|
|
```
|
|
|
|
### 3. Sesion Remota
|
|
|
|
```
|
|
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
|
|
│ Usuario │────>│ Dashboard │────>│ MeshCentral │
|
|
│ │ │ │ │ (iframe) │
|
|
└─────────────┘ └─────────────┘ └─────────────┘
|
|
│ │ │
|
|
│ ▼ │
|
|
│ ┌─────────────┐ │
|
|
│ │ Audit Log │<───────────┘
|
|
│ └─────────────┘
|
|
│
|
|
▼
|
|
┌─────────────────────────────────────────────────────┐
|
|
│ WebSocket (MeshCentral) │
|
|
│ Desktop / Terminal / Files │
|
|
└─────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## Seguridad
|
|
|
|
### Autenticacion
|
|
|
|
- **MeshCentral SSO**: Integracion con autenticacion de MeshCentral
|
|
- **JWT Sessions**: Tokens firmados con expiracion de 24h
|
|
- **Password Hashing**: bcrypt con salt factor 12
|
|
|
|
### Autorizacion
|
|
|
|
```typescript
|
|
// Roles jerarquicos
|
|
enum RolUsuario {
|
|
SUPER_ADMIN, // Acceso total
|
|
ADMIN, // Admin de cliente
|
|
TECNICO, // Operaciones
|
|
CLIENTE, // Solo lectura
|
|
VIEWER // Vista limitada
|
|
}
|
|
```
|
|
|
|
### Aislamiento de Datos
|
|
|
|
- Cada consulta filtra por `clienteId`
|
|
- Middleware verifica permisos en cada request
|
|
- Audit log de todas las acciones sensibles
|
|
|
|
## Escalabilidad
|
|
|
|
### Horizontal (futuro)
|
|
|
|
```
|
|
┌─────────────┐
|
|
│ HAProxy │
|
|
│ (LB) │
|
|
└─────────────┘
|
|
│
|
|
┌───────────────┼───────────────┐
|
|
▼ ▼ ▼
|
|
┌───────────┐ ┌───────────┐ ┌───────────┐
|
|
│ Node 1 │ │ Node 2 │ │ Node 3 │
|
|
│ (Next.js) │ │ (Next.js) │ │ (Worker) │
|
|
└───────────┘ └───────────┘ └───────────┘
|
|
│ │ │
|
|
└───────────────┼───────────────┘
|
|
│
|
|
┌───────────────┼───────────────┐
|
|
▼ ▼ ▼
|
|
┌───────────┐ ┌───────────┐ ┌───────────┐
|
|
│ PostgreSQL│ │ Redis │ │ Redis │
|
|
│ Primary │ │ Primary │ │ Replica │
|
|
└───────────┘ └───────────┘ └───────────┘
|
|
```
|
|
|
|
### Vertical (actual)
|
|
|
|
- **CPU**: Escalable segun carga
|
|
- **RAM**: Minimo 4GB recomendado
|
|
- **Disco**: SSD para BD, puede usar storage separado para backups
|
|
|
|
## Monitoreo del Sistema
|
|
|
|
### Health Checks
|
|
|
|
```bash
|
|
# Endpoints de health
|
|
GET /health # Estado general
|
|
GET /api/health # Estado de API
|
|
```
|
|
|
|
### Metricas
|
|
|
|
- CPU/RAM/Disco del servidor
|
|
- Latencia de BD
|
|
- Tamano de colas
|
|
- Errores de sincronizacion
|
|
|
|
### Logs
|
|
|
|
```bash
|
|
# Ver logs de contenedores
|
|
docker-compose logs -f dashboard
|
|
docker-compose logs -f worker
|
|
```
|