Guide d'intégration

Comment ajouter un nouveau monitor à GMonitor

🏗️Architecture

Chaque monitor est un projet VS Code indépendant avec son propre agent Copilot. Le dashboard global agrège toutes les machines sans jamais modifier les projets individuels.

GMonitor[Nom]/
  ├── agent/       → collecte les métriques (Python / Node / Go...)
  └── dashboard/   → dashboard Next.js spécifique (optionnel)

Dashboard global GMonitor :
  /                        → vue d'ensemble toutes machines
  /api/snapshot/[id]       → données live JSON
  /[monitorid]/*           → proxy → dashboard spécifique
1

Créer le projet du monitor

  1. Forgejo → http://192.168.1.131:3300 → New Repository → GMonitor[Nom]
  2. Ouvrir comme projet séparé dans VS Code — ne jamais mélanger avec le projet GMonitor global
2

Exposer les endpoints standard

L'agent doit exposer exactement ces deux routes :

GET/health

Statut de l'agent

GET/snapshot

Métriques complètes

Format MachineSnapshot :

{
  "machineId": "monitorid",
  "machineName": "Nom affiché",
  "machineType": "server",   // macbook|mac-studio|mac-mini|vps|server|nas|windows
  "timestamp": "2026-06-02T01:00:00Z",
  "status": "online",
  "cpu":    { "usagePercent": 12.5, "cores": 8 },
  "memory": { "usedBytes": ..., "totalBytes": ..., "usagePercent": 25.0 },
  "disk":   { "volumes": [{ "mountPoint": "/", "usedBytes": ...,
                             "totalBytes": ..., "usagePercent": 20 }] },
  "uptime": 86400,
  "alerts": [],
  "meta": {}
}
3

Dashboard spécifique

optionnel

Si le monitor a besoin de pages détaillées, créer un Next.js dans GMonitor[Nom]/dashboard/ avec :

// GMonitor[Nom]/dashboard/next.config.ts
const nextConfig = {
  output: 'standalone',
  basePath: '/monitorid',   // ← sous-chemin obligatoire
}
4

Enregistrer dans GMonitor (ouvrir CE projet)

collectors.tspackages/dashboard/lib/collectors.ts
{
  machineId: 'monitorid',
  machineName: 'Nom Machine',
  machineType: 'server',
  url: process.env.MONITORID_AGENT_URL || 'http://monitorid-agent:PORT',
  pollingIntervalMs: 10000,
  isEnabled: true,
},
next.config.ts (si dashboard)packages/dashboard/next.config.ts
// Dans rewrites() — ajouter :
{
  source: '/monitorid/:path*',
  destination: `${process.env.MONITORID_DASHBOARD_URL
    || 'http://monitorid-dashboard:3000'}/monitorid/:path*`,
},
Sidebar.tsx (si dashboard)packages/dashboard/components/layout/Sidebar.tsx
const SUB_DASHBOARDS = [
  { id: 'gmonitorvps', label: 'VPS Infomaniak', icon: '🖥️', path: '/gmonitorvps' },
  { id: 'monitorid',   label: 'Nom Machine',    icon: '🖥️', path: '/monitorid' }, // ← ajouter
]
5

Déploiement sur le VPS

Transférer les fichiers
# Depuis ton Mac
rsync -av --exclude='node_modules' --exclude='.next' \
  /Users/gpro2902/Pro/GMonitorNom/dashboard/ \
  vps-collect:/mnt/data/opt/monitorid-dashboard/

rsync -av --exclude='node_modules' --exclude='.next' \
  /Users/gpro2902/Pro/GMonitor/ \
  vps-collect:/mnt/data/opt/gmonitor/
Builder les images
ssh vps-collect
cd /mnt/data/opt/monitorid-dashboard && docker build -t monitorid-dashboard:latest .
cd /mnt/data/opt/gmonitor            && docker build -t gmonitor-dashboard:latest .
docker-compose GMonitor — ajouter les vars d'env/mnt/data/opt/gmonitor-dashboard/docker-compose.yml
environment:
  - MONITORID_AGENT_URL=http://monitorid-agent:PORT
  - MONITORID_DASHBOARD_URL=http://monitorid-dashboard:3000
Démarrer les containers
cd /mnt/data/opt/monitorid-dashboard && docker compose up -d
cd /mnt/data/opt/gmonitor-dashboard  && docker compose up -d

✅Checklist

☐Repo Forgejo créé : GMonitor[Nom]
☐Agent avec /health + /snapshot fonctionnel
☐(Optionnel) Dashboard avec basePath configuré
☐collectors.ts — isEnabled: true
☐next.config.ts — rewrite proxy ajouté
☐Sidebar.tsx — lien dans SUB_DASHBOARDS
☐docker-compose GMonitor — vars d'env ajoutées
☐Images buildées sur le VPS
☐Containers démarrés
☐/api/snapshot/[id] retourne du JSON ✅

🔗Ressources

📁 Repo GMonitor (Forgejo)📁 Repo GMonitorVPS (exemple)🖥️ Dashboard VPS (exemple)