Component Palette
À quoi sert cet écran
La palette est la bibliothèque dans laquelle vous puisez : des composants préconfigurés pour frontends, backends, bases de données, infrastructure, brokers, outillage DevOps, secrets, supervision et streaming — ainsi que les composants personnalisés définis par votre équipe.
Avant de commencer
| Pour faire ceci | Il vous faut |
|---|---|
| Ouvrir App Builder | la permission d’accès App Builder |
Ouvrir l’écran
Elle est visible en permanence à gauche de l’onglet App Designer.
La Component Palette est la bibliothèque de blocs de construction pour créer des applications. Elle fournit des modèles préconfigurés pour les services courants et les composants d’infrastructure.
📸 Capture d’ecran : La palette de composants. Repères : (1) la zone de recherche, (2) le bouton + Custom Component, (3) les onglets de catégorie, (4) la grille de composants.
Structure de la palette
La palette est en permanence visible sur le côté gauche de l’interface et comprend :
- Search Box — Filtrer les composants par nom
- Custom Component Button — Créer de nouveaux modèles de composants
- Category Tabs — Filtrer par catégorie de composant
- Component Grid — Cartes de composants glissables
Catégories disponibles
| Catégorie | Description | Composants |
|---|---|---|
| Frontend | Applications côté client | Next.js, React, Vue.js, Angular |
| Backend | Services côté serveur et APIs | Laravel, PHP, Node.js, Django, NestJS, FastAPI, Flask |
| Database | Solutions de stockage de données | MySQL, PostgreSQL, Percona, Mongo, MariaDB |
| Infra | Infrastructure et réseau | Redis, Elasticsearch |
| Message Broker | Systèmes de file d’attente de messages | RabbitMQ, Kafka |
| DevOps | Outils CI/CD et de développement | ArgoCD, Argo Workflows |
| Secrets | Gestion des secrets et identifiants | Infisical, Vault |
| Monitoring | Observabilité et alertes | Grafana, Prometheus |
| Streaming | Plateformes de diffusion de données | Apache Pulsar |
Utilisez la Search box pour une recherche rapide (insensible à la casse, correspondance par nom ou type) ou cliquez sur un onglet de catégorie pour filtrer la grille. Cliquez sur “All” pour réinitialiser le filtre.
Création de composants personnalisés
Définissez vos propres modèles de composants quand la palette par défaut ne contient pas ce dont vous avez besoin — par exemple, des services internes ou des configurations standardisées.
Cliquez sur le bouton ”+ Custom Component” et remplissez :
| Champ | Requis | Description | Exemple |
|---|---|---|---|
| Name | Oui | Nom lisible par l’humain | “My Custom API”, “Auth Service” |
| Type | Auto | Slug auto-généré à partir du nom (lecture seule) | my-custom-api |
| Ports | Non | Mappages de ports par défaut | 8080:8080 |
| Category | Oui | Catégorie pour l’organisation dans la palette | Sélectionner existante ou créer |
Environment Rules (Optionnel)
Les Environment Rules remplissent automatiquement les variables d’environnement lorsque le composant personnalisé est connecté à un autre composant.
- Cliquez sur ”+ Add Connection Rule”
- Sélectionnez la Target Category (ex. “database”)
- Ajoutez les paires clé-valeur pour les variables à générer lors de la connexion
- Cliquez sur “Create Component”
Après la création, le composant apparaît immédiatement dans la palette. Les autres membres de l’équipe peuvent le voir et l’utiliser.
Suppression de composants personnalisés
Survolez une carte de composant personnalisé pour faire apparaître l’icône de suppression. Seul le créateur peut supprimer un composant personnalisé. Les applications qui l’utilisent déjà ne sont pas affectées.
Scénario
Votre équipe reconfigure sans cesse le même service interne à la main.
- Construisez-le une fois sur le canevas et réglez correctement ses ports et ses valeurs par défaut.
- Cliquez sur + Custom Component et définissez-le — nom, ports, catégorie.
- Ajoutez des règles d’environnement pour que le connecter à une base de données remplisse automatiquement les variables nécessaires. C’est cette partie qui évite la répétition ; un composant personnalisé sans règles n’économise que le glisser-déposer.
- Créez-le. Il apparaît immédiatement dans la palette, pour tout le monde.
- Dites à l’équipe qu’il existe. Un composant personnalisé que personne ne connaît sert une fois, à son auteur.
Seul son créateur peut supprimer un composant personnalisé, et la suppression n’affecte pas les applications qui l’utilisent déjà — le retirer est donc sans risque, mais laisse les applications existantes sur l’ancienne définition.
En cas de problème
| Symptôme | Cause | Comment vérifier | Solution |
|---|---|---|---|
| Un composant attendu est absent | Un filtre de catégorie ou une recherche est actif | Les onglets de catégorie | Cliquez sur All pour réinitialiser |
| Un composant personnalisé a disparu | Son créateur l’a supprimé | — | Les applications existantes ne sont pas affectées ; recréez-le si besoin |
| Impossible de supprimer un composant personnalisé | Seul son créateur le peut | — | Demandez à son créateur |
| Connecter un composant ne génère aucune variable | Il n’a pas de règles d’environnement | La définition du composant | Ajoutez des règles de connexion |
Pour aller plus loin
- Canevas — y placer ce que vous trouvez ici