# 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.