93 lines
2.1 KiB
Plaintext
93 lines
2.1 KiB
Plaintext
@startuml
|
|
title Notification System - Architectural Components (MVP)
|
|
|
|
!define COMPONENT_COLOR #E3F2FD
|
|
!define API_COLOR #FFF9C4
|
|
!define STORAGE_COLOR #F3E5F5
|
|
!define CLIENT_COLOR #E8F5E9
|
|
|
|
package "Backend Services" {
|
|
component [Message Service] as MS
|
|
component [Status Service] as SS
|
|
component [Alert Service] as AS
|
|
note right of MS
|
|
Existing services
|
|
trigger events
|
|
end note
|
|
}
|
|
|
|
package "Notification System (NEW)" COMPONENT_COLOR {
|
|
database "notifications\ntable" as DB STORAGE_COLOR {
|
|
note right
|
|
user_id
|
|
event_type
|
|
message (sanitized)
|
|
created_at
|
|
read (boolean)
|
|
end note
|
|
}
|
|
|
|
database "user_preferences\ntable" as PREF STORAGE_COLOR {
|
|
note right
|
|
user_id
|
|
event_type
|
|
enabled (boolean)
|
|
end note
|
|
}
|
|
|
|
component "Notification API" as API API_COLOR {
|
|
note right
|
|
GET /api/notifications/unread
|
|
POST /api/notifications/mark-read
|
|
GET/PUT /api/notifications/preferences
|
|
|
|
Security:
|
|
- Session auth (existing)
|
|
- Rate limit: 100/min
|
|
- Sanitize with bleach
|
|
end note
|
|
}
|
|
}
|
|
|
|
package "Frontend (React)" CLIENT_COLOR {
|
|
component [Poller\n(30s interval)] as Poller
|
|
component [Browser\nNotification API] as BrowserAPI
|
|
|
|
note right of Poller
|
|
setInterval(() => {
|
|
fetch('/api/notifications/unread')
|
|
.then(showNotifications)
|
|
}, 30000)
|
|
end note
|
|
}
|
|
|
|
MS --> DB : INSERT notification\n(if preference enabled)
|
|
SS --> DB : INSERT notification\n(if preference enabled)
|
|
AS --> DB : INSERT notification\n(if preference enabled)
|
|
|
|
Poller --> API : GET /unread\n(authenticated session)
|
|
API --> DB : SELECT WHERE\nuser_id AND NOT read
|
|
API --> PREF : JOIN preferences
|
|
|
|
API ..> Poller : JSON response
|
|
Poller --> BrowserAPI : Show popup
|
|
|
|
note bottom of DB
|
|
30s latency acceptable
|
|
No message queue needed
|
|
~33 req/s for 1000 users
|
|
end note
|
|
|
|
' Sequence flow for single notification
|
|
note as N1
|
|
**Notification Flow:**
|
|
1. Event occurs in Message Service
|
|
2. Check user_preferences
|
|
3. INSERT sanitized notification
|
|
4. Client polls within 30s
|
|
5. API returns unread notifications
|
|
6. Browser shows popup
|
|
7. User clicks → mark as read
|
|
end note
|
|
|
|
@enduml |