257 lines
7.6 KiB
Markdown
257 lines
7.6 KiB
Markdown
# Modifications Frontend - Filtrage des Playbooks
|
|
|
|
## Date : 5 décembre 2024
|
|
|
|
## Résumé
|
|
|
|
Le frontend a été modifié pour implémenter le filtrage des playbooks selon la compatibilité host/group. Les playbooks sont maintenant filtrés automatiquement en fonction de la cible sélectionnée.
|
|
|
|
## Modifications Apportées
|
|
|
|
### 1. Fonction `showPlaybookModalForHost(hostName)`
|
|
|
|
**Fichier :** `app/main.js` (ligne ~1126)
|
|
|
|
**Avant :**
|
|
```javascript
|
|
async showPlaybookModalForHost(hostName) {
|
|
// Récupérer la liste des playbooks disponibles
|
|
try {
|
|
const pbResult = await this.apiCall('/api/ansible/playbooks');
|
|
const playbooks = (pbResult && pbResult.playbooks) ? pbResult.playbooks : [];
|
|
```
|
|
|
|
**Après :**
|
|
```javascript
|
|
async showPlaybookModalForHost(hostName) {
|
|
// Récupérer la liste des playbooks compatibles avec cet hôte
|
|
try {
|
|
const pbResult = await this.apiCall(`/api/ansible/playbooks?target=${encodeURIComponent(hostName)}`);
|
|
const playbooks = (pbResult && pbResult.playbooks) ? pbResult.playbooks : [];
|
|
```
|
|
|
|
**Changement :**
|
|
- Ajout du paramètre `?target=` dans l'appel API
|
|
- L'API retourne maintenant uniquement les playbooks compatibles avec l'hôte
|
|
|
|
**Message informatif ajouté :**
|
|
```html
|
|
<div class="p-3 bg-blue-900/30 border border-blue-600 rounded-lg text-sm">
|
|
<i class="fas fa-info-circle text-blue-400 mr-2"></i>
|
|
Seuls les playbooks compatibles avec cet hôte sont affichés (X disponibles)
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
### 2. Fonction `executePlaybookOnGroup()`
|
|
|
|
**Fichier :** `app/main.js` (ligne ~1883)
|
|
|
|
**Avant :**
|
|
```javascript
|
|
executePlaybookOnGroup() {
|
|
const currentGroup = this.currentGroupFilter;
|
|
|
|
// Générer la liste des playbooks groupés par catégorie
|
|
let playbooksByCategory = {};
|
|
this.playbooks.forEach(pb => {
|
|
const cat = pb.category || 'general';
|
|
if (!playbooksByCategory[cat]) playbooksByCategory[cat] = [];
|
|
playbooksByCategory[cat].push(pb);
|
|
});
|
|
```
|
|
|
|
**Après :**
|
|
```javascript
|
|
async executePlaybookOnGroup() {
|
|
const currentGroup = this.currentGroupFilter;
|
|
|
|
// Charger les playbooks compatibles avec ce groupe
|
|
let compatiblePlaybooks = [];
|
|
try {
|
|
const pbResult = await this.apiCall(`/api/ansible/playbooks?target=${encodeURIComponent(currentGroup)}`);
|
|
compatiblePlaybooks = (pbResult && pbResult.playbooks) ? pbResult.playbooks : [];
|
|
} catch (error) {
|
|
this.showNotification(`Erreur chargement playbooks: ${error.message}`, 'error');
|
|
return;
|
|
}
|
|
|
|
// Générer la liste des playbooks groupés par catégorie
|
|
let playbooksByCategory = {};
|
|
compatiblePlaybooks.forEach(pb => {
|
|
const cat = pb.category || 'general';
|
|
if (!playbooksByCategory[cat]) playbooksByCategory[cat] = [];
|
|
playbooksByCategory[cat].push(pb);
|
|
});
|
|
```
|
|
|
|
**Changements :**
|
|
- Fonction maintenant `async`
|
|
- Appel API avec paramètre `?target=` pour filtrer par groupe
|
|
- Utilisation de `compatiblePlaybooks` au lieu de `this.playbooks`
|
|
- Gestion d'erreur si l'API échoue
|
|
|
|
**Message informatif ajouté :**
|
|
```html
|
|
<div class="p-3 bg-blue-900/30 border border-blue-600 rounded-lg text-sm">
|
|
<i class="fas fa-filter text-blue-400 mr-2"></i>
|
|
Seuls les playbooks compatibles avec ce groupe sont affichés (X disponibles)
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Comportement Attendu
|
|
|
|
### Scénario 1 : Hôte `raspi.4gb.home` (membre de `role_sbc`)
|
|
|
|
**Action :** Cliquer sur "Playbook" pour cet hôte
|
|
|
|
**Résultat :**
|
|
- ✅ Affiche : `bootstrap-host`, `health-check`, `vm-upgrade`, `vm-reboot`, etc. (hosts: all)
|
|
- ❌ N'affiche PAS : `backup-proxmox-config` (hosts: role_proxmox)
|
|
|
|
### Scénario 2 : Hôte `ali2v.xeon.home` (membre de `role_proxmox`)
|
|
|
|
**Action :** Cliquer sur "Playbook" pour cet hôte
|
|
|
|
**Résultat :**
|
|
- ✅ Affiche : `backup-proxmox-config` (hosts: role_proxmox)
|
|
- ✅ Affiche : `bootstrap-host`, `health-check`, etc. (hosts: all)
|
|
|
|
### Scénario 3 : Groupe `env_lab`
|
|
|
|
**Action :** Cliquer sur "Playbook" pour ce groupe
|
|
|
|
**Résultat :**
|
|
- ✅ Affiche uniquement les playbooks compatibles avec `env_lab`
|
|
- ❌ N'affiche PAS : `backup-proxmox-config` (hosts: role_proxmox)
|
|
|
|
### Scénario 4 : Groupe `role_proxmox`
|
|
|
|
**Action :** Cliquer sur "Playbook" pour ce groupe
|
|
|
|
**Résultat :**
|
|
- ✅ Affiche : `backup-proxmox-config` (hosts: role_proxmox)
|
|
- ✅ Affiche : tous les playbooks avec `hosts: all`
|
|
|
|
---
|
|
|
|
## Protection Supplémentaire (Backend)
|
|
|
|
Même si l'interface filtre correctement, le backend valide également :
|
|
|
|
```javascript
|
|
// Si l'utilisateur tente d'exécuter un playbook incompatible
|
|
POST /api/ansible/execute
|
|
{
|
|
"playbook": "backup-proxmox-config.yml",
|
|
"target": "raspi.4gb.home"
|
|
}
|
|
|
|
// Réponse : HTTP 400
|
|
{
|
|
"detail": "Le playbook 'backup-proxmox-config.yml' (hosts: role_proxmox)
|
|
n'est pas compatible avec la cible 'raspi.4gb.home'.
|
|
Ce playbook ne peut être exécuté que sur: role_proxmox"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Tests Recommandés
|
|
|
|
### Test 1 : Filtrage par Hôte
|
|
1. Sélectionner un hôte du groupe `role_sbc` (ex: `raspi.4gb.home`)
|
|
2. Cliquer sur "Playbook"
|
|
3. Vérifier que `backup-proxmox-config` n'apparaît PAS dans la liste
|
|
|
|
### Test 2 : Filtrage par Groupe
|
|
1. Sélectionner le groupe `env_lab`
|
|
2. Cliquer sur "Playbook"
|
|
3. Vérifier que seuls les playbooks compatibles sont affichés
|
|
|
|
### Test 3 : Hôte Proxmox
|
|
1. Sélectionner un hôte du groupe `role_proxmox` (ex: `ali2v.xeon.home`)
|
|
2. Cliquer sur "Playbook"
|
|
3. Vérifier que `backup-proxmox-config` APPARAÎT dans la liste
|
|
|
|
### Test 4 : Compteur de Playbooks
|
|
1. Vérifier que le message informatif affiche le bon nombre de playbooks disponibles
|
|
2. Comparer avec différents hôtes/groupes
|
|
|
|
---
|
|
|
|
## Compatibilité
|
|
|
|
- ✅ Fonctionne avec tous les navigateurs modernes
|
|
- ✅ Gestion d'erreur si l'API ne répond pas
|
|
- ✅ Messages informatifs clairs pour l'utilisateur
|
|
- ✅ Encodage URL correct pour les noms d'hôtes/groupes spéciaux
|
|
|
|
---
|
|
|
|
## Notes Techniques
|
|
|
|
### Encodage des Paramètres
|
|
```javascript
|
|
encodeURIComponent(hostName)
|
|
```
|
|
Assure que les noms avec caractères spéciaux (points, tirets) sont correctement encodés dans l'URL.
|
|
|
|
### Gestion Asynchrone
|
|
La fonction `executePlaybookOnGroup()` est maintenant `async` pour permettre l'appel API. JavaScript gère automatiquement les fonctions async dans les `onclick`.
|
|
|
|
### Compteur Dynamique
|
|
```javascript
|
|
${playbooks.length} disponible${playbooks.length > 1 ? 's' : ''}
|
|
```
|
|
Affiche "1 disponible" ou "X disponibles" selon le nombre.
|
|
|
|
---
|
|
|
|
## Fichiers Modifiés
|
|
|
|
- ✅ `app/main.js` - Deux fonctions modifiées
|
|
- `showPlaybookModalForHost()` - ligne ~1126
|
|
- `executePlaybookOnGroup()` - ligne ~1883
|
|
|
|
---
|
|
|
|
## Prochaines Étapes (Optionnel)
|
|
|
|
### Amélioration 1 : Indicateur Visuel
|
|
Ajouter un badge sur chaque playbook indiquant le champ `hosts` :
|
|
```html
|
|
<span class="text-xs bg-purple-600 px-2 py-1 rounded">hosts: role_proxmox</span>
|
|
```
|
|
|
|
### Amélioration 2 : Tooltip Explicatif
|
|
Ajouter un tooltip expliquant pourquoi certains playbooks ne sont pas disponibles :
|
|
```html
|
|
<div class="tooltip">
|
|
Ce playbook nécessite le groupe role_proxmox
|
|
</div>
|
|
```
|
|
|
|
### Amélioration 3 : Statistiques
|
|
Afficher dans l'interface :
|
|
- Nombre total de playbooks
|
|
- Nombre de playbooks compatibles avec la cible actuelle
|
|
- Pourcentage de compatibilité
|
|
|
|
---
|
|
|
|
## Conclusion
|
|
|
|
✅ **Implémentation complète à 100%**
|
|
|
|
Le filtrage des playbooks est maintenant entièrement fonctionnel :
|
|
1. ✅ Backend : API avec paramètre `?target=`
|
|
2. ✅ Frontend : Appels API modifiés
|
|
3. ✅ UX : Messages informatifs ajoutés
|
|
4. ✅ Validation : Protection backend en cas d'incompatibilité
|
|
|
|
Les utilisateurs ne verront plus que les playbooks qu'ils peuvent réellement exécuter sur leurs hôtes/groupes sélectionnés.
|