Aller au contenu principal

Interface web (Vue)

L'interface de supervision est une application Vue 3 + Vite intégrée directement au package unique venus : un seul package.json et un seul node_modules pilotent à la fois le backend NestJS et le frontend Vue. Le dossier web/ ne contient plus que les sources (index.html + src/) ; toute la configuration (Vite, Vitest, tsconfig web) vit à la racine de venus.

Elle dialogue en GraphQL avec venus (/graphql, même origine), qui relaie ensuite vers :

  • saturn pour l'inventaire, les actions, le DNS et le DHCP ;
  • mercure pour les logs.

venus sert le SPA compilé (web/dist) via ServeStaticModule, en excluant /graphql. Il n'y a plus de conteneur central-web distinct.

Arborescence​

central/venus/
├── package.json                # package unique (Nest + Vue)
├── tsconfig.json               # config serveur (NestJS, CommonJS)
├── tsconfig.web.json           # config frontend (Vue, ESM)
├── nest-cli.json
├── vite.config.ts              # root = web/, sortie web/dist
├── vitest.config.ts
├── src/                        # backend NestJS (gateway GraphQL/CQRS)
└── web/
    ├── index.html
    └── src/
        ├── main.ts             # bootstrap de l'application
        ├── router/             # routes UI
        ├── views/              # pages de supervision
        ├── services/api.ts     # client GraphQL
        └── components/         # composants UI

Build & développement​

  • npm run build — construit le web (build:web : vue-tsc + vite build → web/dist) puis le serveur (build:server : nest build → dist).
  • npm run dev — lance en parallèle vite build --watch et nest start --watch.
  • npm run test:web — tests unitaires Vitest.

En conteneur, l'override docker-compose.central.dev.yml exécute ces deux processus dans un seul conteneur central-venus (plus de service séparé).

Accès API (GraphQL)​

Le frontend central consomme l'endpoint GraphQL de venus :

  • URL par défaut : /graphql (même origine, servie par venus)
  • variable d'environnement optionnelle : VITE_VENUS_URL

Exemples d'opérations côté web :

  • health
  • nodes
  • actions
  • enqueueAction
  • queryLogs
  • dnsRecords, upsertDnsRecord, deleteDnsRecord, syncDns
  • dhcpRecords, upsertDhcpRecord, deleteDhcpRecord

Organisation UI​

Le frontend central est orienté parc de nodes :

  • liste des nodes connectés ;
  • statut réseau ;
  • actions de pilotage ;
  • accès aux logs agrégés.
  • administration DNS et DHCP depuis le menu Infrastructure.
  • vue Network → Flotte listant les machines du réseau ayant émis un health state Kafka (voir Flotte & santé réseau).

La vue Network → Flotte s'actualise automatiquement par polling HTTP GraphQL (fleet) toutes les 15 s, avec pause quand l'onglet navigateur est caché puis reprise avec refresh immédiat au retour au premier plan.

La vue Network → Flotte → Détail instance affiche aussi les logs récents du node (logs GraphQL filtrés par nodeId), issus de Mercure/Kafka. Un filtre de niveau (info, warn, error, debug) est disponible dans cette section pour cibler rapidement les événements opérationnels.

Cette vue inclut aussi un bloc Capteur eau (Arduino) qui lit les métriques remontées par l'agent via meta.plugin_metrics (ex: water_raw, moisture). Sans trame série émise par l'Arduino, le bloc reste en mode "aucune mesure".

Authentification​

L'authentification centralisée est portée côté API (saturn) et persistée en PostgreSQL (auth_users).