Aller au contenu principal

Vue d'ensemble de la Console Web

La console d'administration web TkushPatch (ota-web-console) est une application Next.js 15 (App Router, React 19, TypeScript) servant de Control Plane graphique pour piloter le cycle de vie des releases mobiles, des patchs OTA (différentiel binaire compressé), des stratégies de déploiement, de la gouvernance RBAC et de l'observabilité de la flotte.

Architecture et pile technique​

La console web agit à la fois comme interface opérateur et comme passerelle BFF (Backend-For-Frontend) vers le serveur Serveur TkushPatch (ota-server, port 8080 par défaut via la variable d'environnement OTA_BACKEND_URL).

CoucheTechnologie / ComposantRôle principal
Framework UINext.js 15 (src/app/)Routage App Router, Server/Client Components et routes API proxy (src/app/api/)
AuthentificationAuthProvider (src/lib/auth/AuthContext.tsx)Session opérateur (localStorage + cookies HTTP), verrouillage d'inactivité (IdleTimer)
Contrôle d'accèsmiddleware.ts & RoleGuard.tsxFiltrage RBAC à 5 rôles sur les routes et les boutons d'action
Contexte projetProjectProvider (src/lib/project/ProjectContext.tsx)Synchronisation de l'application active (selectedAppId) et découverte automatique des releases
Thème visuelThemeProvider (src/components/layout/ThemeProvider.tsx)Bascule dynamique entre le thème clair (light) et le thème sombre (dark)
InternationalisationI18nProvider (src/lib/i18n/I18nProvider.tsx)Traduction instantanée Français (fr) / Anglais (en) côté client

Structure de l'interface (AppLayoutShell)​

Toutes les pages authentifiées sont encapsulées dans le composant AppLayoutShell (src/components/layout/AppLayoutShell.tsx), qui orchestre la mise en page globale (hors routes publiques /login, /register, /forgot-password et /cli/login) :

Organisation de l'interface utilisateur
  • En-tête supérieur : Sélecteur d'organisation, notifications, changement de thème (sombre/clair) et menu utilisateur.
  • Barre latérale (Sidebar) : Navigation vers les Applications, Releases, Patchs, Approbations, Flotte d'appareils et Paramètres.
  • Espace central : Tableaux de bord opérationnels, graphiques de déploiement et formulaires d'action.

Barre latérale (Sidebar) et navigation​

Le composant Sidebar (src/components/layout/Sidebar.tsx) adapte dynamiquement les entrées de menu visibles selon le rôle RBAC de l'opérateur connecté via la fonction hasAccessToRoute(role, href) définie dans src/lib/auth/roles.ts.

Les entrées sont organisées en trois sections principales :

1. Opérations et Déploiement​

  • Applications (/apps) : Catalogue de toutes les applications mobiles de l'organisation et création de nouveaux projets.
  • Vue d'ensemble (/) : Tableau de bord exécutif global (KPI de flotte, dernières releases, événements d'audit récents).
  • Releases & Patchs (/releases) : Registre maître consolidé de toutes les versions binaires et publication de nouveaux patchs.
  • Catalogue Stores (/catalog) : Gouvernance des versions face aux stores officiels (Apple App Store / Google Play) et bouclier IN_STORE_REVIEW.
  • Déploiement & Pays (/rollout) : Pilotage Canary (0% à 100%), ciblage géographique ISO-3166-1 et stratégies réseau/criticité.
  • Approbations (4-Yeux) (/approvals) : File de quarantaine STAGED et signature cryptographique signature numérique (APPROVED_AND_SIGNED).
  • Assets Dynamiques (/assets) : Gestion du CDN d'assets graphiques, bannières et fichiers JSON à chaud.

2. Observabilité et Support​

  • Crashs & Symboles (/symbols) : Coffre-fort des fichiers .symbols Dart/C++ et console interactive de dé-obfuscation de stacktraces.
  • Télémétrie Mobile (/telemetry) : Flux temps réel des événements SDK (patch_install_success, patch_install_failure) et état du disjoncteur automatique (Circuit-Breaker).
  • Support Client (N2/N3) (/support) : Recherche par code court #8CAR, diagnostic d'appareil, liste blanche QA (isWhitelistedQA) et acquittement de rollback.

3. Gouvernance et Sécurité​

  • Équipes & Accès (/teams) : Gestion des collaborateurs, invitations SMTP et attribution des 5 rôles RBAC.
  • Politiques Sécurité (/policies) : Configuration du principe des 4-Yeux, des quotas Anti-Bomb, de l'expiration HMAC et des empreintes de certificats TLS.
  • Piste d'Audit (/audit) : Journal immuable de traçabilité avec export CSV et rapport PDF signé.
  • Santé Système (/health) : État de moteur cryptographique / local-rsa, espace disque, cache L1/L2 et purge Day-2 des artefacts dépréciés.
  • Mon Compte (/account) : Profil personnel de l'opérateur, préférences visuelles et indicateurs d'organisation.

En-tête (Header) et fil d'Ariane (HeaderBreadcrumb)​

L'en-tête supérieur (src/components/layout/Header.tsx) regroupe les outils transverses :

  1. Fil d'Ariane dynamique (HeaderBreadcrumb.tsx) : Affiche le chemin hiérarchique exact (ex. Organisation > Applications > com.sara.money > Releases > 3.28.5+99) avec liens de retour rapide.
  2. Sélecteur d'application (ProjectSwitcher.tsx) : Permet de basculer instantanément d'une application mobile à une autre ou d'ouvrir la modale CreateProjectModal.
  3. Barre de recherche rapide : Permet de filtrer les versions, identifiants d'application (app_id) ou numéros de patch.
  4. Indicateur de statut Backend : Pastille temps réel indiquant la connectivité avec le serveur ota-server et le coffre-fort cryptographique.
  5. Sélecteurs de langue et de thème : Boutons d'accès direct pour changer la locale (FR / EN) et l'apparence (Clair / Sombre).

Sélecteur de projet (ProjectSwitcher & ProjectContext)​

Le composant ProjectSwitcher (src/components/layout/ProjectSwitcher.tsx) s'appuie sur ProjectContext (src/lib/project/ProjectContext.tsx) pour maintenir la liste des applications de l'organisation :

  • Persistance locale : Les projets sont stockés dans localStorage sous la clé tks_projects_registry et l'application active sous tks_selected_app_id.
  • Auto-découverte depuis le backend : Au chargement, ProjectContext interroge /api/admin/v1/releases?tenant_id=... et fusionne automatiquement tout appId existant sur le serveur dans le registre local des projets.
  • Navigation contextuelle : Lorsque l'opérateur consulte une sous-page /apps/[appId]/* et change d'application dans le ProjectSwitcher, l'URL est automatiquement réécrite vers le même onglet de la nouvelle application sélectionnée.

Thème Clair / Sombre (ThemeProvider)​

Le composant ThemeProvider (src/components/layout/ThemeProvider.tsx) gère l'apparence visuelle :

  • Clé de stockage : localStorage.getItem("tks_theme") ("light" ou "dark", avec "light" par défaut).
  • Application DOM : Ajoute ou retire la classe CSS dark sur l'élément racine document.documentElement (html), permettant à Tailwind CSS d'appliquer les palettes sombres (dark:bg-slate-900, etc.) sans rechargement de page.
  • Accès : Modifiable à tout moment depuis l'icône Soleil/Lune du Header ou depuis la page /account.

Internationalisation FR / EN (I18nProvider)​

Le moteur I18nProvider (src/lib/i18n/I18nProvider.tsx) assure une console intégralement bilingue :

  • Clé de stockage : localStorage.getItem("tks_locale") ("fr" par défaut, ou "en").
  • Mécanisme : Fournit le hook useI18n() exposant { locale, setLocale, t } pour les clés structurées (nav.*, header.*, common.*) ainsi qu'un observateur DOM (MutationObserver + TreeWalker) qui traduit à la volée les chaînes d'interface lorsque la locale "en" est active.