Web UI — Tableau de bord Netbox → Agent #44

New issue

Open

opened 2026-08-25 12:26:31 +00:00 by nicolas.boufideline · 0 comments

nicolas.boufideline commented

2026-08-25 12:26:31 +00:00

Owner

Contexte et décisions

Interface web pour déployer/surveiller les ressources (VPCs, subnets, VMs) depuis Netbox vers l'agent two.
Remplace le script scripts/sync.sh (trop peu évolutif pour un usage multi-personnes).

Architecture retenue : micro-frontend Web Components, zero dépendance

Chaque personne a son propre cluster (agent + Netbox) — pas de multi-tenant
Phase 1 : page statique, browser appelle directement Netbox + agent
Phase 2 (plus tard) : orchestrateur intermédiaire Go (cmd/orchd) — seul core/config.js change côté front

Prérequis Phase 1 :

Ajouter header CORS Access-Control-Allow-Origin: * sur les handlers HTTP de l'agent
Activer CORS dans les settings Netbox

Structure fichiers :

web/
  index.html          → shell : charge core/ + lit components.json
  config.json         → netbox_url, netbox_token, agent_url (une par déploiement)
  components.json     → liste des composants installés (mis à jour après git clone)
  core/
    config.js         → ES module, expose config globalement
    registry.js       → charge dynamiquement les composants listés dans components.json
  components/
    vpc-panel/        → git repo autonome
    subnet-card/
    vm-card/

Contrat inter-composants (pour les autres équipes) :

manifest.json par composant (tag name, version)
Config via import { config } from '../../core/config.js'
customElements.define('mon-tag', MaClasse) à la fin du fichier
Le composant gère lui-même ses appels API (Netbox + agent)
Ajout d'un composant = git clone dans components/ + ligne dans components.json

Mapping Netbox → agent (déjà implémenté dans scripts/sync.sh, à porter en JS) :

VRF → VPC (prefix container = VPC CIDR)
Prefix active → Subnet (VLAN VID=0 → bridge, >0 → vxlan)
IP description=host_gateway → interface_ip du subnet
custom_fields.default_route, custom_fields.iface_type sur Prefix
VirtualMachine → VM (memory, vcpus standard ; disks via virtual-disks ; sshkey dans config_context)
custom_fields.uefi sur VirtualMachine

Étapes

CORS : ajouter Access-Control-Allow-Origin: * dans les handlers agent (internal/api/agent/server.go)
web/config.json : structure de config
web/core/config.js : ES module qui fetch et expose config
web/core/registry.js : charge les composants listés dans components.json
web/components.json : liste initiale des composants
web/components/vpc-panel/ : Web Component (liste VPCs, panneau latéral droit, deploy/destroy)
web/components/subnet-card/ : idem subnets
web/components/vm-card/ : idem VMs
web/index.html : shell principal

## Contexte et décisions Interface web pour déployer/surveiller les ressources (VPCs, subnets, VMs) depuis Netbox vers l'agent two. Remplace le script `scripts/sync.sh` (trop peu évolutif pour un usage multi-personnes). **Architecture retenue : micro-frontend Web Components, zero dépendance** - Chaque personne a son propre cluster (agent + Netbox) — pas de multi-tenant - Phase 1 : page statique, browser appelle directement Netbox + agent - Phase 2 (plus tard) : orchestrateur intermédiaire Go (`cmd/orchd`) — seul `core/config.js` change côté front **Prérequis Phase 1 :** - Ajouter header CORS `Access-Control-Allow-Origin: *` sur les handlers HTTP de l'agent - Activer CORS dans les settings Netbox **Structure fichiers :** ``` web/ index.html → shell : charge core/ + lit components.json config.json → netbox_url, netbox_token, agent_url (une par déploiement) components.json → liste des composants installés (mis à jour après git clone) core/ config.js → ES module, expose config globalement registry.js → charge dynamiquement les composants listés dans components.json components/ vpc-panel/ → git repo autonome subnet-card/ vm-card/ ``` **Contrat inter-composants (pour les autres équipes) :** - `manifest.json` par composant (tag name, version) - Config via `import { config } from '../../core/config.js'` - `customElements.define('mon-tag', MaClasse)` à la fin du fichier - Le composant gère lui-même ses appels API (Netbox + agent) - Ajout d'un composant = `git clone` dans `components/` + ligne dans `components.json` **Mapping Netbox → agent (déjà implémenté dans scripts/sync.sh, à porter en JS) :** - VRF → VPC (prefix `container` = VPC CIDR) - Prefix `active` → Subnet (VLAN VID=0 → bridge, >0 → vxlan) - IP description=`host_gateway` → interface_ip du subnet - `custom_fields.default_route`, `custom_fields.iface_type` sur Prefix - VirtualMachine → VM (memory, vcpus standard ; disks via virtual-disks ; sshkey dans config_context) - `custom_fields.uefi` sur VirtualMachine ## Étapes - [ ] **CORS** : ajouter `Access-Control-Allow-Origin: *` dans les handlers agent (`internal/api/agent/server.go`) - [ ] **`web/config.json`** : structure de config - [ ] **`web/core/config.js`** : ES module qui fetch et expose config - [ ] **`web/core/registry.js`** : charge les composants listés dans components.json - [ ] **`web/components.json`** : liste initiale des composants - [ ] **`web/components/vpc-panel/`** : Web Component (liste VPCs, panneau latéral droit, deploy/destroy) - [ ] **`web/components/subnet-card/`** : idem subnets - [ ] **`web/components/vm-card/`** : idem VMs - [ ] **`web/index.html`** : shell principal

nicolas.boufideline added this to the next_feature milestone

2026-08-25 12:26:31 +00:00

nicolas.boufideline added the

new feature

label

2026-08-25 12:26:31 +00:00