Le module Déploiement du main-dashboard se connecte à l'API REST d'iDeploy (basé sur Ideploy v4) pour afficher un aperçu global des ressources déployées : applications, bases de données, services Docker et serveurs.
| Fichier | Rôle |
|---|---|
apps/main-dashboard/src/environments/environment.ts |
Config prod — URL + token iDeploy |
apps/main-dashboard/src/environments/environment.development.ts |
Config dev — URL localhost + token dev |
apps/main-dashboard/mynode.js |
Script CI/CD — génère environment.ts depuis les vars d'env |
Variables iDeploy :
ideploy: {
url: 'https://ideploy.idem.africa', // prod
apiToken: '<SANCTUM_TOKEN>',
}Variables CI/CD (à définir dans le pipeline) :
IDEPLOY_URL=https://ideploy.idem.africa
IDEPLOY_API_TOKEN=<token_sanctum_prod>
apps/main-dashboard/src/app/modules/dashboard/models/ideploy.model.ts
Interfaces reflétant l'API iDeploy :
IDeployApplication— application déployée (nom, statut, fqdn, build_pack, git_branch…)IDeployDatabase— base de données managée (type, statut…)IDeployDockerService— service Docker ComposeIDeployServer— serveur SSH (ip, is_reachable…)IDeployProject— projet iDeployIDeploySummary— agrégat global avecstats
apps/main-dashboard/src/app/modules/dashboard/services/ideploy.service.ts
- Appels HTTP vers
GET /api/v1/applications,/databases,/services,/servers,/projects - En-tête
Authorization: Bearer <token>sur chaque requête getSummary():forkJoinde tous les endpoints → retourne unIDeploySummarytriégetIDeployUrl(): retourne l'URL de la plateforme
apps/main-dashboard/src/app/shared/interceptors/auth.interceptor.ts
Modification : si la requête porte déjà un en-tête Authorization (token iDeploy), l'intercepteur Firebase ne le remplace pas.
// Skip Firebase token injection if request already has its own Authorization header
if (req.headers.has('Authorization')) {
return next(req);
}Sans ce fix, le token Firebase Firebase écrasait le token Sanctum d'iDeploy → erreur 401.
apps/main-dashboard/src/app/modules/dashboard/pages/ideploy-overview/
| Fichier | Contenu |
|---|---|
ideploy-overview.ts |
Composant Angular standalone, signals, computed |
ideploy-overview.html |
Template : hero + resource cards + table apps + DBs/Servers |
ideploy-overview.css |
Thème dark premium : grille CSS, icônes circulaires, glow |
Signaux exposés :
loading; // boolean
error; // string | null
summary; // IDeploySummary | null
stats; // computed — summary.stats
servers; // computed — summary.servers
appsWithUrl; // computed — apps ayant un fqdn
recentDatabases; // computed — 5 premières DBsRègle UI : le bouton d'accès URL n'est affiché que pour les apps avec statut Running :
@if (app.fqdn && getStatusClass(app.status) === 'status-running') { ... }apps/main-dashboard/src/app/app.routes.ts
{
path: 'project/ideploy',
loadComponent: () => import('./modules/dashboard/pages/ideploy-overview/ideploy-overview')
.then(m => m.IDeployOverview),
}apps/main-dashboard/src/app/modules/dashboard/components/sidebar-dashboard/sidebar-dashboard.ts
Item "Déploiement" activé et pointant vers /project/ideploy.
Clé i18n : dashboard.sidebar.deployment
main-dashboard (Angular)
│
│ GET /api/v1/applications
│ GET /api/v1/databases Bearer: <sanctum_token>
│ GET /api/v1/services ───►
│ GET /api/v1/servers
│ GET /api/v1/projects
│
▼
iDeploy (Laravel 12 + Sanctum)
https://ideploy.idem.africa
Toutes les requêtes sont parallélisées via forkJoin. En cas d'erreur individuelle, catchError(() => of([])) renvoie un tableau vide pour ne pas bloquer les autres.
-
Token Sanctum — généré via tinker sur le serveur prod :
docker exec -it <container_ideploy_prod> php artisan tinker
$user = \App\Models\User::first(); echo $user->createToken('main-dashboard-prod', ['read'])->plainTextToken;
-
allowed_ips— doit êtrenullpour autoriser l'accès depuis le dashboard :\App\Models\InstanceSettings::first()->update(['allowed_ips' => null]);
| Application | Push nécessaire ? | Raison |
|---|---|---|
| main-dashboard | ✅ Oui | Token prod ajouté, nouveau composant, fix intercepteur |
| iDeploy | ❌ Non | Aucun changement de code iDeploy — fix allowed_ips fait via DB directement |
# Depuis la racine du monorepo
nx build main-dashboard --configuration=production
# Ou directement
cd apps/main-dashboard && ng build --configuration=productionThème dark premium inspiré du style grid/glow :
- Fond : grille CSS
rgba(99,102,241,.045)52×52px - Hero : icône circulaire avec double anneau de glow, titre gradient, pills de stats
- Resource cards : icônes circulaires dégradées (indigo / cyan / vert / ambre), chiffre 2.8rem
- Table applications : colonnes Application / Statut / URL / Mis à jour — bordure gauche colorée selon statut
- Chips de statut : Running (vert animé), Stopped (rouge), Building (ambre)
- URL : affichée uniquement sur les apps
Running
| État | Rendu |
|---|---|
| Chargement | Skeleton cards + rows avec animation pulse |
| Erreur réseau | Banner ambre avec bouton Réessayer |
| Aucune ressource | Empty state avec icône circulaire + CTA |
| Données disponibles | Hero + 4 resource cards + table apps + bottom grid |