From 9162f57ab8646719be4e10b4a3eee4e5527b01c8 Mon Sep 17 00:00:00 2001 From: Jeremy Roos <149620614+JeremyNRoos@users.noreply.github.com> Date: Tue, 9 Dec 2025 23:09:19 -0500 Subject: [PATCH] Fixed diagram to match teacher's recommendation --- docs/C4L3-Presentation.puml | 120 +++++++++++++++++++++++------------- 1 file changed, 76 insertions(+), 44 deletions(-) diff --git a/docs/C4L3-Presentation.puml b/docs/C4L3-Presentation.puml index 03464e5..2902f03 100644 --- a/docs/C4L3-Presentation.puml +++ b/docs/C4L3-Presentation.puml @@ -1,50 +1,82 @@ @startuml C4L3-Presentation -title C4 Level 3 – Presentation Tier (Kleff Dashboard) - -skinparam packageStyle rectangle - -package "Presentation Tier – Kleff Dashboard (React / Vite SPA)" { - - component "Dashboard Shell\n• Layout & Navigation\n• Tenant-aware routing" as DashboardShell - component "Auth UI Module\n• Login / Signup\n• OAuth buttons\n• Forgot password" as AuthUI - component "Tenant & Workspace Switcher\n• Current tenant\n• Switch / Join / Create" as TenantSwitcher - component "Project Management UI\n• Project list & details\n• Git repo binding\n• Environment view" as ProjectUI - component "Deployment Management UI\n• Deploy history\n• Live status\n• Rollbacks & actions" as DeploymentUI - component "Billing & Subscription UI\n• Plan selector\n• Payment methods\n• Invoices" as BillingUI - component "Observability & Logs UI\n• Logs viewer\n• Metrics dashboards\n• Alerts configuration" as ObservabilityUI - component "Account & Profile Settings UI\n• Profile\n• Security\n• Personal preferences" as AccountUI - component "Frontend API Client SDK\n• REST client\n• Auth token handling\n• Error / retry policies" as ApiClient - - DashboardShell -[#gray]-> AuthUI - DashboardShell -[#gray]-> TenantSwitcher - DashboardShell -[#gray]-> ProjectUI - DashboardShell -[#gray]-> DeploymentUI - DashboardShell -[#gray]-> BillingUI - DashboardShell -[#gray]-> ObservabilityUI - DashboardShell -[#gray]-> AccountUI - - AuthUI --> ApiClient - TenantSwitcher --> ApiClient - ProjectUI --> ApiClient - DeploymentUI --> ApiClient - BillingUI --> ApiClient - ObservabilityUI --> ApiClient - AccountUI --> ApiClient -} +!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml + +LAYOUT_WITH_LEGEND() + +title Level 3 - Component Diagram for Presentation Tier (Kleff Dashboard SPA) + +' ==== External Backend Services (from C4L2) ==== +Container(api_gateway, "API Gateway", "Traefik/Nginx", "Routes authenticated requests to backend services") +Container(identity_svc, "Identity & Access Service", "Java Spring Boot", "User authentication and authorization") +Container(workspace_svc, "Workspace Service", "Java Spring Boot", "Workspace management") +Container(project_svc, "Project Management Service", "Java Spring Boot", "Project lifecycle and collaboration") +Container(deploy_svc, "Deployment Service", "Go", "Container deployment and orchestration") +Container(obs_svc, "Observability Service", "Go", "Metrics and logs collection") +Container(billing_svc, "Billing Service", "Java Spring Boot", "Usage tracking and invoicing") +System_Ext(auth_idp, "Authentik IDP", "OIDC/OAuth2 authentication provider") + +' ==== Presentation Tier Boundary ==== +Container_Boundary(spa, "Kleff Dashboard (SPA)") { + + ' ---- Core Shell ---- + Component(dashboard_shell, "Dashboard Shell", "React Component", "Main layout, navigation, and workspace-aware routing") + + ' ---- Feature Modules ---- + Component(auth_ui, "Authentication UI", "React Module", "Login, signup, OAuth buttons, password reset flows") + + Component(project_switcher, "Project Switcher", "React Component", "Switch between projects, create new projects, manage project context") + + Component(project_ui, "Project Management UI", "React Module", "Project list, project details, repository configuration, environment variables") + + Component(deployment_ui, "Deployment Management UI", "React Module", "Deployment history, live deployment status, rollback actions, container controls") + + Component(billing_ui, "Billing UI", "React Module", "Usage dashboard, invoices, payment methods, subscription plans") + + Component(observability_ui, "Observability UI", "React Module", "Log viewer, metrics dashboards, alert configuration") + + Component(account_ui, "Account Settings UI", "React Module", "User profile, security settings, personal preferences") -' External APIs the frontend talks to (from C4 L2) -package "Application Tier APIs (HTTP / JSON)" { - [Auth API] - [Tenant & Project API] - [Deployment API] - [Billing API] - [Observability API] + ' ---- Infrastructure Layer ---- + Component(api_client, "API Client SDK", "TypeScript/Axios", "HTTP client with authentication, error handling, retry logic, and request/response interceptors") + + Component(auth_manager, "Authentication Manager", "React Context/Service", "Manages OAuth flow, token storage, token refresh, and session state") } -ApiClient --> [Auth API] -ApiClient --> [Tenant & Project API] -ApiClient --> [Deployment API] -ApiClient --> [Billing API] -ApiClient --> [Observability API] +' ==== Relationships: User -> SPA ==== +Person(user, "Developer/Project Owner", "Uses web browser to access dashboard") +Rel(user, dashboard_shell, "Accesses via HTTPS", "HTTPS/Web Browser") + +' ==== Relationships: Shell -> Feature Modules ==== +Rel(dashboard_shell, auth_ui, "Renders", "Component rendering") +Rel(dashboard_shell, project_switcher, "Renders", "Component rendering") +Rel(dashboard_shell, project_ui, "Renders", "Component rendering") +Rel(dashboard_shell, deployment_ui, "Renders", "Component rendering") +Rel(dashboard_shell, billing_ui, "Renders", "Component rendering") +Rel(dashboard_shell, observability_ui, "Renders", "Component rendering") +Rel(dashboard_shell, account_ui, "Renders", "Component rendering") + +' ==== Relationships: Feature Modules -> Infrastructure ==== +Rel(auth_ui, auth_manager, "Initiates login/logout", "Method calls") +Rel(auth_ui, api_client, "Makes auth API calls", "HTTP requests") + +Rel(project_switcher, api_client, "Fetches projects", "HTTP requests") + +Rel(project_ui, api_client, "CRUD operations on projects", "HTTP requests") +Rel(deployment_ui, api_client, "Deployment operations", "HTTP requests") +Rel(billing_ui, api_client, "Billing data requests", "HTTP requests") +Rel(observability_ui, api_client, "Metrics and logs queries", "HTTP requests") +Rel(account_ui, api_client, "Profile updates", "HTTP requests") + +' ==== Relationships: Infrastructure -> Backend ==== +Rel(auth_manager, auth_idp, "OAuth2/OIDC flows (browser redirect)", "HTTPS/OIDC") +Rel(api_client, api_gateway, "All API requests with Bearer token", "JSON/REST/HTTPS") + +' ==== Gateway Routes to Services ==== +Rel(api_gateway, identity_svc, "Routes /api/auth, /api/users", "HTTP/2") +Rel(api_gateway, workspace_svc, "Routes /api/workspaces", "HTTP/2") +Rel(api_gateway, project_svc, "Routes /api/projects, /api/collaborators", "HTTP/2") +Rel(api_gateway, deploy_svc, "Routes /api/deployments, /api/containers", "HTTP/2") +Rel(api_gateway, obs_svc, "Routes /api/metrics, /api/logs", "HTTP/2") +Rel(api_gateway, billing_svc, "Routes /api/billing, /api/invoices", "HTTP/2") @enduml