DORA Metrics Dashboard

Dashboard temps réel affichant les 4 métriques DORA (Deployment Frequency, Lead Time, Change Failure Rate, Time to Restore) pour des équipes réparties sur 3 continents. Frontend Angular 21 consommant une API FastAPI.

DORA Metrics & Thresholds

Metric	Elite	High	Medium	Low
Deployment Frequency	> 30/day	> 7/day	> 1/day	< 1/day
Lead Time for Changes	< 1 hour	< 24 hours	< 1 week	> 1 week
Change Failure Rate	< 5%	< 10%	< 15%	> 15%
Time to Restore	< 1 hour	< 24 hours	< 1 week	> 1 week

Stack

Layer	Technology
Frontend	Angular 21.2 (Signals, Zoneless, httpResource), Chart.js 4, ngx-translate 17
Backend	Python 3.10+, FastAPI, Pydantic, Uvicorn
Build	esbuild via @angular-devkit/build-angular:application, TypeScript 5.9
Data	Mock avec variation simulée +-10% (effet temps réel)

Mock Teams

Chaque équipe couvre un niveau DORA différent pour tester tous les cas visuels :

Team	Region	Level	Timezone	Raison du profil
DOTI-Paris	EMEA	Elite	Europe/Paris	Référence — toutes métriques au top, badge Full Elite
DOTI-Tokyo	APAC	Medium	Asia/Tokyo	Couvre le niveau Medium homogène absent des autres équipes
DOTI-Chennai	APAC	High	Asia/Kolkata	Profil intermédiaire, teste le multi-APAC
DOTI-Atlanta	AMERICAS	Low	America/New_York	Worst case — métriques dégradées, couleurs d'alerte rouge

Features

Dashboard UX

• Bandeau horloges multi-fuseaux — Barre fixe en haut : Paris, Tokyo, Chennai, Atlanta avec horloge live (mise à jour chaque seconde via Intl.DateTimeFormat)
• Cartes métriques — 4 cartes par équipe avec valeur, badge DORA et flèche de tendance (↑ +2.3% / ↓ -1.5% vs J-1)
• Inversion intelligente des tendances — ↑ est vert pour Deploy Freq (plus = mieux) mais rouge pour Lead Time, CFR, TTR (moins = mieux)
• Badge Full Elite — Étoile sur l'onglet équipe + badge doré quand les 4 métriques sont Elite
• Sélecteur de période — 7j / 30j / 90j sur le graphique tendance
• Ligne seuil Elite — Ligne verticale pointillée verte sur chaque graphique de comparaison (plugin Chart.js custom)
• Dark mode — Toggle + détection prefers-color-scheme + persistance localStorage
• Indicateur de fraîcheur — "Actualisé il y a X s" dans le header, ticking chaque seconde
• i18n — Français (défaut), English, 日本語 via @ngx-translate/core
• Cartes hauteur égale — CSS Grid align-items: stretch + flexbox interne

Data & Performance

• httpResource() — Toutes les requêtes GET utilisent l'API signal-based d'Angular 21. Zéro .subscribe(), zéro Observable manuel
• Cache TTL 5 min — Le polling 30s ne déclenche un vrai appel HTTP que si le TTL de 5 minutes est expiré
• Pause polling onglet caché — document.visibilitychange stoppe/reprend l'intervalle de polling
• UTC strict — Backend génère datetime.now(timezone.utc), frontend convertit via LocalTimePipe avec indicateur de fuseau
• Zoneless — provideZonelessChangeDetection(), aucun zone.js chargé

Charts (Chart.js 4 + ng2-charts)

• 4 bar charts horizontaux — Comparaison inter-équipes par métrique, colorés par niveau DORA (Elite=vert, High=bleu, Medium=jaune, Low=rouge)
• Line chart tendance — 4 métriques sur la durée avec période configurable (7j/30j/90j)
• Plugin seuil Elite — Plugin Chart.js inline dessinant une ligne pointillée verte à la frontière Elite sur chaque bar chart

Project Structure

dora-dashboard/
├── api/                                → FastAPI backend (Python)
│   ├── main.py                         → Routes, CORS, endpoints
│   ├── mock_data.py                    → 4 équipes mock + simulation + historique N jours
│   ├── calculators.py                  → Calcul des niveaux DORA (Elite/High/Medium/Low)
│   ├── schemas.py                      → Modèles Pydantic (DoraMetricResponse, DoraHistoryPoint)
│   └── requirements.txt
│
├── dashboard/                          → Angular 21 frontend
│   ├── angular.json                    → Build config (esbuild, budgets, SCSS)
│   ├── tsconfig.json                   → strict, noUnusedLocals, bundler resolution
│   ├── package.json                    → Angular 21.2, Chart.js 4, ngx-translate 17
│   └── src/
│       ├── index.html
│       ├── main.ts                     → bootstrapApplication(AppComponent, appConfig)
│       ├── styles.scss                 → Variables CSS globales (light/dark themes)
│       ├── assets/i18n/
│       │   ├── fr.json                 → Français (langue par défaut)
│       │   ├── en.json                 → English
│       │   └── ja.json                 → 日本語
│       └── app/
│           ├── app.component.ts        → Composant racine
│           ├── app.config.ts           → Providers (Zoneless, HttpClient, i18n)
│           ├── core/
│           │   ├── models/
│           │   │   └── dora.model.ts   → Interfaces TypeScript (DoraMetric, DoraHistoryPoint, etc.)
│           │   └── services/
│           │       ├── dora.service.ts → httpResource, cache TTL, polling, historique
│           │       └── theme.service.ts → Signal dark/light + localStorage + prefers-color-scheme
│           ├── shared/
│           │   ├── metric-card/
│           │   │   └── metric-card.ts  → Carte avec valeur, tendance ↑↓, badge niveau
│           │   ├── badge-level/
│           │   │   └── badge-level.ts  → Badge coloré Elite/High/Medium/Low
│           │   ├── timezone-bar/
│           │   │   └── timezone-bar.ts → Horloges live multi-fuseaux (4 sites DOTI)
│           │   └── pipes/
│           │       └── local-time.pipe.ts → Conversion UTC → heure locale avec nom de fuseau
│           └── features/
│               └── dashboard/
│                   ├── dora-dashboard.ts    → Composant principal (logique, computed signals)
│                   ├── dora-dashboard.html  → Template (cartes, charts, table, contrôles)
│                   └── dora-dashboard.scss  → Styles (grid, cards, charts, period selector, etc.)
│
└── README.md

Getting Started

Prérequis

• Node.js 20+ (node -v)
• Python 3.10+ (python --version)

Lancement

# 1. Backend API
cd api
python -m venv venv
source venv/Scripts/activate    # Windows Git Bash
# source venv/bin/activate      # Mac/Linux
pip install -r requirements.txt
uvicorn main:app --reload       # → http://localhost:8000/docs (Swagger)

# 2. Frontend Dashboard
cd dashboard
npm install
ng serve                        # → http://localhost:4200

API Endpoints

Method	Path	Description
GET	/health	Health check avec timestamp UTC
GET	/teams	Liste des équipes (nom + région)
GET	/dora	Métriques DORA de toutes les équipes
GET	/dora/{team}	Métriques d'une seule équipe
GET	/dora/{team}/history?days=30	Historique sur N jours (1-365)
GET	/dora/{team}/deployment-frequency	Détail fréquence de déploiement
GET	/dora/{team}/lead-time	Détail délai de livraison
GET	/dora/{team}/change-failure-rate	Détail taux d'échec
GET	/dora/{team}/time-to-restore	Détail temps de restauration

Choix techniques & justifications

Choix	Pourquoi
Angular 21 + httpResource()	API signal-based remplaçant les Observables pour les GET. Réactif, pas de gestion manuelle d'unsubscribe, intégré au change detection
Zoneless	Supprime zone.js (~35 kB gzip). Le change detection repose uniquement sur les Signals, plus performant et prédictible
moduleResolution: "bundler"	Requis par Angular 21 avec esbuild. Résout les imports via les exports de package.json
Cache TTL 5 min + polling 30s	Compromis entre fraîcheur et charge réseau. Le polling vérifie le TTL avant de déclencher un appel. En prod, on remplacerait par Server-Sent Events
Intl.DateTimeFormat	API native du navigateur pour les fuseaux horaires, pas de lib externe (moment.js/date-fns). Supporte tous les IANA timezones
CSS custom properties	Theme switching sans rechargement. Les variables cascadent naturellement dans les composants Shadow DOM
Plugin Chart.js inline	Évite une dépendance (chartjs-plugin-annotation) pour dessiner une simple ligne. 15 lignes de code vs un package npm
visibilitychange	Une ligne pour économiser des requêtes quand l'onglet est caché. Impact réel en prod avec 100+ dashboards ouverts
Inversion tendance	Deploy Freq ↑ = bon (vert), mais Lead Time ↑ = mauvais (rouge). Input invertTrend sur le composant carte

En production, il faudrait

Manque	Solution
Authentification	SSO (Azure AD / Okta) + RBAC (viewer / editor / admin)
Données réelles	Webhook depuis CI/CD (GitLab CI, Jenkins) → calcul automatique des métriques
Base de données	PostgreSQL + migrations (Alembic) au lieu du dictionnaire Python
Alerting	Slack/Teams quand une métrique passe sous le seuil Elite
Scale	50+ équipes → recherche, filtres par BU/pays, agrégation régionale
Export	PDF/CSV du rapport mensuel pour le CODIR
Infra	Kubernetes (AKS), HTTPS, rate limiting, audit logs
Tests	Vitest + Testing Library (frontend), pytest (backend)

Contexte

En situation réelle, les métriques DORA ne sont pas saisies manuellement — elles sont automatiquement calculées par les pipelines CI/CD (GitLab, Jenkins, SonarQube). Ce dashboard est en lecture seule : il consomme et affiche des données, rien de plus.

Les données mock incluent une variation simulée (+-10%) pour que le dashboard paraisse vivant lors du polling toutes les 30 secondes.