_{English · Français}

Iris — observability-first showcase across 7 facets (UI sibling)

Aucun point de vue ne raconte tout — chaque facette révèle une partie du système. Comme un diaphragme, l'image complète émerge de la composition. Vérifié à chaque tag stable-v*. Source of truth = git show stable-vX.Y.Z.

• ● Observability (the central axis) — OpenTelemetry Web SDK (traces from clicks → backend spans, propagated via traceparent) + Pyroscope-compatible profiling export + ActivityService (in-session timeline) + ErrorTimeline widget surfacing backend logs + MetricsService (frontend-side Prometheus polling + percentile computation) + ToastService for ephemeral user feedback.
• ● Infra · Cloud — Static SPA build (Angular 21 production bundle, ~3.1 MB total / per-route lazy chunks 250 B – 30 KB) + nginx-served container + GKE deploy via the same chart family as the backends + GitHub Pages mirror (release artefacts) + Renovate weekly bumps via infra/common/renovate-base.json.
• ● Security — JWT bearer-token client + Auth0 OIDC bridge service + automatic refresh-token rotation + CORS-aware HTTP interceptor + signal-based AuthService (no NgRx dependency) + login redirect on 401 + CSP-compatible build (no inline scripts, no eval) + audit-trail screen surfacing backend audit_event logs + GitHub CodeQL + OpenSSF Scorecard.
• ● CI · CD — GitLab CI multi-stage (lint, test, e2e, package, sonar, deploy) + Conventional Commits enforced (Lefthook + commitlint) + auto-merge with --remove-source-branch=false + Playwright E2E in CI (kind-in-docker for backend) + bundle budget gate + GitHub mirror push on tag + GitHub CodeQL on push.
• ● Architecture — Angular 21 zoneless change detection (no Zone.js) + signal-based reactive state + @if/@for/@switch control-flow blocks (no *ngIf) + standalone components + lazy-loaded routes (every feature is a separate chunk) + AppShellComponent layout + 1 widget = 1 file (features/core-ux/dashboard/widgets/* per File length hygiene rule) + feature-slicing under features/{commerce, customer, core-ux, infra-ops, obs} + Clean Code 7 non-negotiables.
• ● AI · ML — Frontend client of the polyrepo's MCP servers (iris-java + iris-python in-process tools, surfaced via the diagnostic / quality / dashboard pages) + AI-driven enrichment displayed in customer detail views (Ollama-generated bios, observable via gen_ai.* traces) + ⏭ no in-process LLM in the UI itself (architectural choice : LLM stays server-side per ADR-0062).
• ● Quality — Vitest unit tests (53 spec files, 367 tests pass, zoneless) + Playwright E2E mobile (390×844) + desktop (1280×1024) viewports + production build with zero warnings (TypeScript strict mode, NG8113 unused-imports, prettier, no *ngIf/*ngFor legacy directives) + SonarCloud quality gate + ESLint flat config + budget limits (Initial JS 800 KB warn / 1 MB error).

Plus complementary dimensions : Fonctionnel (9 Order/Product e-commerce screens + Customer onboarding flow), Frontend (Angular 21 zoneless + signals + raw SVG charts + mobile-responsive), DevX (Lefthook + Vitest watch + Compodoc + Renovate).

What this project proves

Iris-UI is the front-row seat of the Iris polyrepo demo : an Angular 21 zoneless dashboard that observes a live backend (Java OR Python sibling) from every angle in one place.

Industrial frontend concerns demonstrated :

• Zoneless Angular : signals + computed only, no Zone.js, native change detection.
• OTel browser tracing : every HTTP call carries a trace ID into the backend ; same trace visible in Tempo end-to-end.
• No chart library : raw SVG with viewBox + signals — full responsive, no bundle bloat from Chart.js / Highcharts.
• Mobile-first responsive : every component verified at 375 px (iPhone SE), 390 px (iPhone 12-14), 1280 px desktop ; sidebar collapses to drawer ≤ 768 px.
• E2E with kind-in-CI : Playwright runs against a real Spring Boot backend spawned in a kind cluster inside CI.
• CI quality gate : zero NG8113 warnings, no any types, no silent error handlers, conventional commits enforced.

TL;DR for hiring managers (60 sec read)

• Angular 21 zoneless with signal-based state ; the demo proves you can ship modern Angular without Zone.js + without legacy ngrx.
• Observability dashboard for a live backend : not a CRUD demo — the UI surfaces JVM metrics, OTel traces, error timelines, SLO status from Prometheus / Tempo / Loki via a Grafana proxy.
• Polyrepo coherence : same UI talks to either Java backend or Python backend — same REST contract.
• Quality bar : Vitest unit + Playwright E2E kind-in-CI + SonarCloud + ESLint zero-warning + bundle size budget enforced.
• Local CI runner : same group-level macbook-local runner as the sibling repos (no SaaS quota burn).

Iris UI — front-row seat

Watch. Understand. Act.

Built with the right tools and the right methods.

_{Regenerate with bin/record-demo.sh (needs ffmpeg + the local stack up).}

Iris — Spanish for watchtower — is exactly what this project is: a vantage point over a real running system that lets you observe, in one place, the code, the runtime metrics, the CI/CD pipelines, and the industrial tooling wired around it. The UI is the front-row seat: health probes, traces, logs, quality reports, pipeline state, chaos actions, and live operational drill-down into the backend — backed by Grafana / Tempo / Loki / Prometheus for time-series observability.

The repository is also a concrete study in how far AI-assisted integration can go. Every ADR, every CI hardening step, every supply-chain scanner, the K8s baseline, the observability wiring, the technology glossary and this README were authored in close collaboration with an LLM — specifically Anthropic's Claude Opus 4.7 (1 M-token context), driven from the Claude Code CLI. Each commit's Co-Authored-By: trailer names the exact model, so the git log doubles as an audit trail.

This repository is the Angular 21 frontend. The Spring Boot 4 backend lives at iris-service.

---

Documentation

All long-form documentation lives under docs/. This README stays thin — the UI itself is the demo; the docs explain how to run it and what each page does.

Topic	What you get
Architecture	Mermaid diagram of Angular + backend + observability stack; core services
Quick start	Prereqs, cloning both repos, first-time boot
bin/run.sh reference	Every subcommand of the launcher
Environment configuration	.env reference for every variable
User manual	Per-feature walkthrough (Dashboard, Customers, Diagnostic, Chaos, …)
Keyboard shortcuts	Vim-style G+key navigation, D for dark mode, ? for help
Theming & multi-environment	Dark/light toggle and Local/Docker/Staging/Prod switching
Port map	Every local URL exposed by the full stack
Proxy configuration	config/proxy.conf.json rules and rationale
Docker control API	scripts/docker-api.mjs endpoints
CI / CD	GitLab pipeline jobs + pre-push hook
Build & quality	npm scripts + bundle budgets
Technology glossary	(in progress) exhaustive reference of every dep used in this repo

Architecture decisions

Non-obvious choices are justified in ADRs under docs/adr/:

• 0001 — Record architecture decisions
• 0002 — Zoneless change detection + Signals
• 0003 — Raw SVG for all visualizations, no charting library
• 0004 — Vitest over Jest for unit tests
• 0005 — Standalone components, no NgModules
• 0006 — Keep UI dashboards alongside Grafana (for now)
• 0007 — Retire Prometheus-fed UI visualisations in favour of Grafana

Auto-generated API reference

• Compodoc (Angular-aware) — npm run compodoc populates docs/compodoc/ (gitignored, regenerated on demand)
• TypeDoc (raw TypeScript) — npm run typedoc populates docs/typedoc/ (gitignored, regenerated on demand)

Sibling repo

• Backend: iris-service — Spring Boot 4 / Java 25, lives as a sibling directory so bin/run.sh can delegate infra commands.

---

Project structure

iris-ui/
├── src/
│   ├── main.ts                          # Application bootstrap (zoneless)
│   ├── styles.scss                      # Global styles + CSS custom properties
│   └── app/
│       ├── app.ts                       # Root component (renders AppShell)
│       ├── app.config.ts                # Angular providers (zoneless, router, HTTP + JWT interceptor)
│       ├── app.routes.ts                # Lazy-loaded feature routes (10 pages)
│       ├── core/                        # Singleton services (providedIn: 'root')
│       ├── features/                    # Lazy-loaded page components
│       └── shared/                      # Reusable UI components
├── scripts/
│   ├── docker-api.mjs                   # Node.js server — Docker control + Zipkin/Loki proxy
│   └── pre-push-checks.sh               # Git pre-push quality gate
├── config/
│   ├── proxy.conf.json                  # Angular dev server proxy rules
│   ├── typedoc.json                     # TypeDoc config
│   ├── .compodocrc.json                 # Compodoc config
│   └── sonar-project.properties         # SonarCloud config
├── build/
│   └── Dockerfile                       # Container build
├── deploy/
│   ├── nginx.conf                       # Runtime Nginx config
│   └── kubernetes/                      # K8s manifests
├── docs/                                # Hand-written docs + generated API reference
├── public/                              # Static assets (favicon, manifest, banner)
├── run.sh                               # Full-stack launcher (frontend + backend delegation)
├── angular.json                         # Angular CLI workspace config
└── tsconfig*.json                       # TypeScript configs (base / app / spec)

---

Quick start

# Clone both repos as siblings (run from your dev root)
git clone https://gitlab.com/benoit.besson/iris-service.git workspace-modern/iris-service
git clone https://gitlab.com/benoit.besson/iris-ui.git js/iris-ui

# Start everything (Docker + backend + frontend) — one command
bash js/iris-ui/run.sh

Sign in with admin / admin at http://localhost:4200. See docs/getting-started/quick-start.md for prerequisites and troubleshooting.

---

Tech stack (short version)

Category	Technology	Details
Framework	Angular 21	Standalone components, zoneless (provideZonelessChangeDetection), signals-based state
Language	TypeScript 5.9	Strict mode enabled
Styling	SCSS	CSS custom properties for dark/light theming
HTTP	Angular HttpClient	Functional interceptor for JWT auth
Routing	Angular Router	Lazy-loaded feature modules via loadComponent
State	Angular Signals	No external state library — all state managed with signal(), computed(), effect()
Testing	Vitest	Unit tests with jsdom environment
Formatting	Prettier	Enforced in CI and pre-push hook
Charts	Raw SVG	No charting library — all visualizations built with inline SVG
PWA	Web manifest	Standalone installable app
Package manager	npm 11	Lockfile v3

The exhaustive list (Kaniko, hadolint, Trivy, Buildx, Keycloak, Loki, Tempo, Pyroscope, PostgreSQL, Kafka, Redis, Ollama, …) — with what it is, how we use it and why it's pertinent for each entry — lives in docs/reference/technologies.md (work in progress).