484 lines
11 KiB
Markdown
484 lines
11 KiB
Markdown
# Architektur Diagramme - Frontend Nyla
|
|
|
|
Diese Datei enthält visuelle Diagramme der Frontend-Architektur im Mermaid-Format.
|
|
|
|
## 1. High-Level Architektur
|
|
|
|
```mermaid
|
|
graph TB
|
|
subgraph "Entry Point"
|
|
A[main.tsx] --> B[App.tsx]
|
|
end
|
|
|
|
subgraph "Infrastructure Layer"
|
|
B --> C[LanguageProvider]
|
|
B --> D[AuthProvider]
|
|
B --> E[Router]
|
|
end
|
|
|
|
subgraph "Routing Layer"
|
|
E --> F[Login]
|
|
E --> G[Register]
|
|
E --> H[ProtectedRoute]
|
|
end
|
|
|
|
subgraph "Application Layer"
|
|
H --> I[Home]
|
|
I --> J[Sidebar]
|
|
I --> K[PageManager]
|
|
end
|
|
|
|
subgraph "Pages"
|
|
K --> L[Dashboard]
|
|
K --> M[Dateien]
|
|
K --> N[Connections]
|
|
K --> O[Workflows]
|
|
K --> P[Prompts]
|
|
K --> Q[TeamBereich]
|
|
K --> R[Einstellungen]
|
|
end
|
|
|
|
style A fill:#e1f5ff
|
|
style B fill:#e1f5ff
|
|
style C fill:#fff4e1
|
|
style D fill:#fff4e1
|
|
style E fill:#fff4e1
|
|
style I fill:#e8f5e9
|
|
style K fill:#e8f5e9
|
|
```
|
|
|
|
## 2. Component Hierarchy
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[App.tsx] --> B[Router]
|
|
B --> C[Home]
|
|
C --> D[Sidebar]
|
|
C --> E[PageManager]
|
|
|
|
E --> F[Dashboard]
|
|
E --> G[Dateien]
|
|
E --> H[Connections]
|
|
E --> I[Workflows]
|
|
|
|
F --> J[DashboardChat]
|
|
J --> K[DashboardChatArea]
|
|
K --> L[DashboardChatAreaMessageList]
|
|
K --> M[DashboardChatAreaInput]
|
|
K --> N[DashboardChatAreaConnectedFiles]
|
|
|
|
G --> O[DateienTable]
|
|
O --> P[FilePreview]
|
|
P --> Q[FileRenderers]
|
|
|
|
H --> R[ConnectionsTable]
|
|
R --> S[ConnectionEditModal]
|
|
|
|
style A fill:#ffebee
|
|
style C fill:#e3f2fd
|
|
style E fill:#e8f5e9
|
|
style F fill:#fff3e0
|
|
style G fill:#fff3e0
|
|
style H fill:#fff3e0
|
|
```
|
|
|
|
## 3. Data Flow Architecture
|
|
|
|
```mermaid
|
|
graph LR
|
|
subgraph "UI Layer"
|
|
A[Page Component] --> B[Feature Component]
|
|
end
|
|
|
|
subgraph "Business Logic Layer"
|
|
B --> C[Custom Hook]
|
|
C --> D[useApiRequest]
|
|
end
|
|
|
|
subgraph "API Layer"
|
|
D --> E[api.ts]
|
|
E --> F[Axios Instance]
|
|
F --> G[Backend API]
|
|
end
|
|
|
|
subgraph "State Management"
|
|
C --> H[React State]
|
|
H --> I[Context API]
|
|
end
|
|
|
|
G -.Response.-> F
|
|
F -.Data.-> D
|
|
D -.State Update.-> C
|
|
C -.Re-render.-> B
|
|
|
|
style A fill:#e1f5ff
|
|
style C fill:#fff4e1
|
|
style E fill:#e8f5e9
|
|
style G fill:#fce4ec
|
|
```
|
|
|
|
## 4. Authentication Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant App
|
|
participant AuthProvider
|
|
participant MSAL
|
|
participant ProtectedRoute
|
|
participant Backend
|
|
|
|
User->>App: Access Protected Route
|
|
App->>AuthProvider: Check Auth Status
|
|
AuthProvider->>MSAL: Get Account
|
|
MSAL-->>AuthProvider: Account Status
|
|
|
|
alt Not Authenticated
|
|
AuthProvider-->>App: No Account
|
|
App->>ProtectedRoute: Redirect to Login
|
|
ProtectedRoute->>User: Show Login Page
|
|
User->>MSAL: Login Request
|
|
MSAL->>Backend: OAuth Flow
|
|
Backend-->>MSAL: Token
|
|
MSAL-->>AuthProvider: Account + Token
|
|
AuthProvider->>App: Authenticated
|
|
end
|
|
|
|
AuthProvider->>ProtectedRoute: Allow Access
|
|
ProtectedRoute->>App: Render Protected Content
|
|
```
|
|
|
|
## 5. Page Management Flow
|
|
|
|
```mermaid
|
|
stateDiagram-v2
|
|
[*] --> PageManager: Route Change
|
|
|
|
PageManager --> CheckConfig: Get Page Config
|
|
CheckConfig --> LoadPage: Config Found & Enabled
|
|
CheckConfig --> ErrorPage: Config Not Found
|
|
|
|
LoadPage --> CheckInstance: Page Instance Exists?
|
|
|
|
CheckInstance --> ReuseInstance: Yes (Preserved)
|
|
CheckInstance --> CreateInstance: No
|
|
|
|
ReuseInstance --> ShowPage: Activate Instance
|
|
CreateInstance --> LazyLoad: Load Component
|
|
LazyLoad --> ShowPage: Component Loaded
|
|
|
|
ShowPage --> AnimateIn: Framer Motion
|
|
AnimateIn --> Active: Page Active
|
|
|
|
Active --> AnimateOut: Navigate Away
|
|
AnimateOut --> Cleanup: Non-Preserved
|
|
AnimateOut --> Hide: Preserved
|
|
|
|
Cleanup --> [*]
|
|
Hide --> [*]
|
|
ErrorPage --> [*]
|
|
```
|
|
|
|
## 6. Workflow Management Flow
|
|
|
|
```mermaid
|
|
graph TB
|
|
subgraph "Dashboard Page"
|
|
A[Dashboard.tsx] --> B[useWorkflowManager]
|
|
end
|
|
|
|
subgraph "Workflow Manager Hook"
|
|
B --> C[useWorkflow]
|
|
B --> D[useWorkflowStatus]
|
|
B --> E[useWorkflowMessages]
|
|
B --> F[useWorkflowLogs]
|
|
B --> G[useWorkflowOperations]
|
|
end
|
|
|
|
subgraph "Workflows Hook"
|
|
C --> H[useApiRequest]
|
|
D --> H
|
|
E --> H
|
|
F --> H
|
|
G --> H
|
|
end
|
|
|
|
subgraph "API Layer"
|
|
H --> I[api.ts]
|
|
I --> J[Backend API]
|
|
end
|
|
|
|
subgraph "Polling Logic"
|
|
B --> K{Polling Active?}
|
|
K -->|Yes| L[Poll Every 2s]
|
|
L --> D
|
|
L --> E
|
|
L --> F
|
|
K -->|No| M[Stop Polling]
|
|
end
|
|
|
|
style A fill:#e1f5ff
|
|
style B fill:#fff4e1
|
|
style H fill:#e8f5e9
|
|
style I fill:#fce4ec
|
|
```
|
|
|
|
## 7. File Upload & Preview Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant DateienPage
|
|
participant DateienTable
|
|
participant useFileOperations
|
|
participant api.ts
|
|
participant Backend
|
|
participant FilePreview
|
|
|
|
User->>DateienPage: Upload File
|
|
DateienPage->>DateienTable: File Selected
|
|
DateienTable->>useFileOperations: uploadFile(file)
|
|
useFileOperations->>api.ts: POST /api/files/
|
|
api.ts->>Backend: Upload Request
|
|
Backend-->>api.ts: File Metadata
|
|
api.ts-->>useFileOperations: Response
|
|
useFileOperations-->>DateienTable: Success
|
|
|
|
User->>DateienTable: Click File
|
|
DateienTable->>FilePreview: Show Preview
|
|
FilePreview->>FilePreview: Detect File Type
|
|
FilePreview->>FilePreview: Select Renderer
|
|
FilePreview->>api.ts: GET /api/files/{id}/content
|
|
api.ts->>Backend: File Content Request
|
|
Backend-->>api.ts: File Content
|
|
api.ts-->>FilePreview: Content Data
|
|
FilePreview-->>User: Render Preview
|
|
```
|
|
|
|
## 8. Internationalization Flow
|
|
|
|
```mermaid
|
|
graph TB
|
|
subgraph "Initialization"
|
|
A[App.tsx] --> B[LanguageProvider]
|
|
B --> C{Check localStorage}
|
|
C -->|Found| D[Load Saved Language]
|
|
C -->|Not Found| E[Detect Browser Language]
|
|
D --> F[loadLanguage]
|
|
E --> F
|
|
end
|
|
|
|
subgraph "Language Loading"
|
|
F --> G{Language Code}
|
|
G -->|de| H[locales/de.ts]
|
|
G -->|en| I[locales/en.ts]
|
|
G -->|fr| J[locales/fr.ts]
|
|
H --> K[Translation Object]
|
|
I --> K
|
|
J --> K
|
|
end
|
|
|
|
subgraph "Usage"
|
|
K --> L[LanguageContext State]
|
|
L --> M[useLanguage Hook]
|
|
M --> N[Component]
|
|
N --> O[t function]
|
|
O --> P[Translation Key]
|
|
P --> K
|
|
end
|
|
|
|
style A fill:#e1f5ff
|
|
style B fill:#fff4e1
|
|
style K fill:#e8f5e9
|
|
style N fill:#fce4ec
|
|
```
|
|
|
|
## 9. Component Dependency Graph
|
|
|
|
```mermaid
|
|
graph TD
|
|
subgraph "Core Components"
|
|
A[PageManager] --> B[pageConfigs]
|
|
B --> C[Lazy Pages]
|
|
end
|
|
|
|
subgraph "Feature Components"
|
|
D[DashboardChat] --> E[DashboardChatArea]
|
|
E --> F[DashboardChatAreaMessageList]
|
|
E --> G[DashboardChatAreaInput]
|
|
E --> H[DashboardChatAreaConnectedFiles]
|
|
|
|
I[DateienTable] --> J[FilePreview]
|
|
J --> K[FileRenderers]
|
|
|
|
L[ConnectionsTable] --> M[ConnectionEditModal]
|
|
|
|
N[PromptsTable] --> O[Popup]
|
|
O --> P[EditForm]
|
|
end
|
|
|
|
subgraph "Hooks Layer"
|
|
Q[useWorkflowManager] --> R[useWorkflows]
|
|
R --> S[useApiRequest]
|
|
|
|
T[useConnections] --> S
|
|
U[useFiles] --> S
|
|
V[usePrompts] --> S
|
|
end
|
|
|
|
subgraph "API Layer"
|
|
S --> W[api.ts]
|
|
W --> X[Backend]
|
|
end
|
|
|
|
C --> D
|
|
C --> I
|
|
C --> L
|
|
C --> N
|
|
|
|
D --> Q
|
|
I --> U
|
|
L --> T
|
|
N --> V
|
|
|
|
style A fill:#e1f5ff
|
|
style S fill:#fff4e1
|
|
style W fill:#e8f5e9
|
|
style X fill:#fce4ec
|
|
```
|
|
|
|
## 10. State Management Architecture
|
|
|
|
```mermaid
|
|
graph TB
|
|
subgraph "Global State"
|
|
A[LanguageContext] --> B[Current Language]
|
|
A --> C[Translations]
|
|
|
|
D[AuthProvider] --> E[MSAL Instance]
|
|
D --> F[Account State]
|
|
end
|
|
|
|
subgraph "Component State"
|
|
G[useState] --> H[Local Component State]
|
|
I[useReducer] --> J[Complex State Logic]
|
|
end
|
|
|
|
subgraph "Derived State"
|
|
K[useMemo] --> L[Computed Values]
|
|
M[useCallback] --> N[Memoized Functions]
|
|
end
|
|
|
|
subgraph "Server State"
|
|
O[useApiRequest] --> P[Loading State]
|
|
O --> Q[Error State]
|
|
O --> R[Data State]
|
|
end
|
|
|
|
B --> G
|
|
C --> G
|
|
E --> D
|
|
F --> D
|
|
|
|
H --> K
|
|
J --> K
|
|
|
|
P --> G
|
|
Q --> G
|
|
R --> G
|
|
|
|
style A fill:#e1f5ff
|
|
style D fill:#e1f5ff
|
|
style O fill:#fff4e1
|
|
style G fill:#e8f5e9
|
|
```
|
|
|
|
## 11. Build & Deployment Flow
|
|
|
|
```mermaid
|
|
graph LR
|
|
subgraph "Development"
|
|
A[Source Code] --> B[Vite Dev Server]
|
|
B --> C[Hot Module Replacement]
|
|
C --> D[Browser]
|
|
end
|
|
|
|
subgraph "Build Process"
|
|
E[Source Code] --> F[TypeScript Compiler]
|
|
F --> G[Vite Build]
|
|
G --> H[Bundle Optimization]
|
|
H --> I[Static Assets]
|
|
end
|
|
|
|
subgraph "Environment"
|
|
J[.env.dev] --> B
|
|
K[.env.int] --> G
|
|
L[.env.prod] --> G
|
|
end
|
|
|
|
subgraph "Deployment"
|
|
I --> M[Static Web App]
|
|
M --> N[Azure Static Web Apps]
|
|
end
|
|
|
|
style A fill:#e1f5ff
|
|
style B fill:#fff4e1
|
|
style G fill:#e8f5e9
|
|
style N fill:#fce4ec
|
|
```
|
|
|
|
## 12. Error Handling Flow
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[API Request] --> B{Request Success?}
|
|
|
|
B -->|Yes| C[Return Data]
|
|
B -->|No| D[Error Handler]
|
|
|
|
D --> E{Error Type?}
|
|
|
|
E -->|401 Unauthorized| F[Clear Token]
|
|
F --> G[Redirect to Login]
|
|
|
|
E -->|Validation Error| H[Format Validation Errors]
|
|
H --> I[Display User-Friendly Message]
|
|
|
|
E -->|Network Error| J[Display Network Error]
|
|
|
|
E -->|Server Error| K[Format Server Error]
|
|
K --> I
|
|
|
|
E -->|Unknown Error| L[Display Generic Error]
|
|
|
|
I --> M[Update UI State]
|
|
J --> M
|
|
L --> M
|
|
|
|
style A fill:#e1f5ff
|
|
style D fill:#ffebee
|
|
style M fill:#e8f5e9
|
|
```
|
|
|
|
---
|
|
|
|
## Diagramm-Erklärungen
|
|
|
|
### Farbcodierung
|
|
- **Blau (#e1f5ff)**: Entry Points & Core Components
|
|
- **Orange (#fff4e1)**: Business Logic & Hooks
|
|
- **Grün (#e8f5e9)**: API Layer & Data
|
|
- **Rosa (#fce4ec)**: External Services & Backend
|
|
|
|
### Diagramm-Typen
|
|
1. **High-Level Architektur**: Gesamtübersicht der Anwendung
|
|
2. **Component Hierarchy**: Komponenten-Struktur und Verschachtelung
|
|
3. **Data Flow**: Datenfluss durch die Anwendung
|
|
4. **Sequence Diagrams**: Zeitliche Abläufe von Prozessen
|
|
5. **State Diagrams**: Zustandsübergänge
|
|
6. **Dependency Graphs**: Abhängigkeiten zwischen Modulen
|
|
|
|
---
|
|
|
|
*Zuletzt aktualisiert: 2025-01-15*
|
|
|