feat: Add real-time notification center with WebSocket integration
- Add in-app notification system with database storage - Implement bell icon component with unread count badge in dashboard header - Add full Notifications page tab with pagination and filtering (All/Unread/Read) - Implement real-time WebSocket push notifications to all connected clients - Add notification API endpoints: GET, PUT /read, DELETE, POST /clear - Fix critical bug in notificationService where 'status' variable was undefined - Add Notifications route to App.js routing - Enhanced UI with notification popup in header and dedicated full-page view - Auto-reconnect WebSocket with 5s timeout on disconnect - Support rich notification content with resource details and timestamps
This commit is contained in:
nmemmert committed
1 parent
7968c9231e
commit
db85573986
37 files changed
+3521
-207
No files matched your search
@@ -0,0 +1,225 @@
|
||||
# Real-Time Updates & Observability Implementation
|
||||
|
||||
## 🟢 Completed Features
|
||||
|
||||
### 1. **Real-Time WebSocket Push Notifications**
|
||||
|
||||
#### Server-Side Enhancements (`server/index.js`):
|
||||
- **Enhanced Broadcast Functions**: Created 4 specialized broadcast functions
|
||||
- `broadcastDashboardUpdate()` - Dashboard state changes
|
||||
- `broadcastAlert()` - Real-time alerts
|
||||
- `broadcastIncident()` - Incident updates (started/resolved)
|
||||
- `broadcastMetrics()` - Performance metrics updates
|
||||
- **Message Types**: Structured WebSocket messages with typed payloads
|
||||
- `type: 'dashboard'` - Full dashboard refresh
|
||||
- `type: 'alert'` - Individual alerts
|
||||
- `type: 'incident'` - Incident lifecycle events
|
||||
- `type: 'metrics'` - Performance metrics
|
||||
|
||||
#### Client-Side Enhancements (`client/src/App.js`):
|
||||
- **Enhanced WebSocket Handler**: Receives and processes all message types
|
||||
- **Real-Time Notifications UI**: Fixed toast notifications appear in top-right corner
|
||||
- Auto-dismiss after 5 seconds
|
||||
- Color-coded by severity (error/success/info)
|
||||
- Non-blocking, stacks vertically
|
||||
- **Automatic Dashboard Refresh**: Refreshes on incident events for real-time data
|
||||
|
||||
### 2. **Application Metrics Tracking**
|
||||
|
||||
#### New Module: `server/metrics.js`
|
||||
- **API Request Tracking**:
|
||||
- Endpoint, method, status code, response time
|
||||
- Per-endpoint aggregation with min/max/average times
|
||||
- Success/error counts and status code breakdown
|
||||
- **Error Tracking**:
|
||||
- Centralized error logging with stack traces
|
||||
- Context capture (method, URL, IP address)
|
||||
- Error count aggregation
|
||||
- **Metrics API Endpoint**: `GET /api/observability/metrics`
|
||||
- Server uptime
|
||||
- API statistics (request counts, success rates, response times)
|
||||
- Error counts (total and unique)
|
||||
|
||||
### 3. **Audit Logging System**
|
||||
|
||||
#### New Module: `server/auditLog.js`
|
||||
- **Audit Event Tracking**:
|
||||
- `log()` - Generic audit event logging
|
||||
- `logResourceChange()` - Resource CRUD events
|
||||
- `logSettingsChange()` - Configuration changes
|
||||
- `logGroupChange()` - Group management
|
||||
- `logMaintenanceChange()` - Maintenance window events
|
||||
- **Event Details Captured**:
|
||||
- Action (create/update/delete)
|
||||
- Entity type and ID
|
||||
- User ID and IP address
|
||||
- Changes before/after values
|
||||
- Timestamp
|
||||
- **Audit Log Query API**: `GET /api/observability/audit-logs`
|
||||
- Filters: entityType, entityId, userId, action, dateRange
|
||||
- Summary statistics (events by action type)
|
||||
- **Audit Summary**: `GET /api/observability/audit-summary`
|
||||
- 7-day activity breakdown by action
|
||||
|
||||
#### Database Integration:
|
||||
- **Audit Logs Table**: Stores all audit events with indexes
|
||||
- **Error Logs Table**: Stores application errors with stack traces
|
||||
|
||||
### 4. **Error Tracking & Logging**
|
||||
|
||||
#### Features:
|
||||
- **Error Collection**: Automatic error capture in metrics middleware
|
||||
- **Error Storage**: Database persistence for error analysis
|
||||
- **Recent Errors API**: `GET /api/observability/errors`
|
||||
- Returns last 50 errors with context
|
||||
- Includes stack traces for debugging
|
||||
|
||||
### 5. **Observability Dashboard** (`client/src/Observability.js`)
|
||||
|
||||
#### Tabs:
|
||||
1. **API Metrics Tab**:
|
||||
- Server uptime display
|
||||
- Total API requests counter
|
||||
- Error metrics
|
||||
- Per-endpoint performance table with:
|
||||
- Total requests
|
||||
- Success rate %
|
||||
- Average/min/max response times
|
||||
- Status code distribution
|
||||
|
||||
2. **Errors Tab**:
|
||||
- Recent errors list
|
||||
- Error message, context, and timestamp
|
||||
- Visual error log with syntax highlighting
|
||||
|
||||
3. **Audit Logs Tab**:
|
||||
- 7-day activity summary
|
||||
- Filterable audit log table
|
||||
- Filters: Entity Type, Entity ID, User ID, Action
|
||||
- Change history tracking
|
||||
|
||||
#### Navigation:
|
||||
- Added "Observability" link to main navbar
|
||||
- Accessible from dashboard navigation
|
||||
|
||||
### 6. **Comprehensive Middleware Integration**
|
||||
|
||||
#### Request Tracking Middleware:
|
||||
```javascript
|
||||
- Intercepts all API requests/responses
|
||||
- Tracks endpoint, method, status code, duration
|
||||
- Captures errors automatically
|
||||
- Non-intrusive integration
|
||||
```
|
||||
|
||||
#### Database Schema Updates (`server/database.js`):
|
||||
- **audit_logs table**: Action, entity type/ID, user, changes, IP, timestamp
|
||||
- **error_logs table**: Error message, stack trace, context, occurrence timestamp
|
||||
- **Indexes**: Optimized queries for audit and error lookups
|
||||
|
||||
### 7. **Resource CRUD Audit Logging**
|
||||
|
||||
#### Automatic Audit Logs:
|
||||
- Resource creation: Logs name, URL, type, enabled status
|
||||
- Resource updates: Logs all changed fields
|
||||
- Resource deletion: Logs deleted resource details
|
||||
- Includes user/IP context for all operations
|
||||
|
||||
### 8. **New API Endpoints**
|
||||
|
||||
#### Authentication Endpoints:
|
||||
- `GET /api/auth/csrf-token` - Generate CSRF tokens
|
||||
- `POST /api/auth/refresh-token` - JWT token refresh
|
||||
- `POST /api/auth/validate-password` - Password strength checking
|
||||
|
||||
#### Observability Endpoints:
|
||||
- `GET /api/observability/metrics` - Performance metrics
|
||||
- `GET /api/observability/errors` - Error logs (last 50)
|
||||
- `GET /api/observability/audit-logs` - Searchable audit logs
|
||||
- `GET /api/observability/audit-summary` - Activity summary
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Real-Time Update Flow
|
||||
|
||||
```
|
||||
Monitor Check Complete
|
||||
↓
|
||||
Incident Created/Resolved
|
||||
↓
|
||||
Server broadcasts via WebSocket:
|
||||
- broadcastDashboardUpdate()
|
||||
- broadcastIncident(incident)
|
||||
↓
|
||||
Client receives message
|
||||
↓
|
||||
Show toast notification
|
||||
↓
|
||||
Refresh dashboard data
|
||||
↓
|
||||
UI updates in real-time
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Observability Coverage
|
||||
|
||||
### What's Now Tracked:
|
||||
- ✅ API performance (response times, success rates)
|
||||
- ✅ Application errors (messages, stacks, context)
|
||||
- ✅ User actions (resource CRUD, settings changes)
|
||||
- ✅ System health (uptime, resource counts)
|
||||
- ✅ Configuration changes (who, what, when)
|
||||
|
||||
### Available Dashboards:
|
||||
1. **API Metrics**: Performance insights and endpoint health
|
||||
2. **Error Tracking**: Centralized error log with debugging info
|
||||
3. **Audit Logs**: Complete change history with filters
|
||||
|
||||
---
|
||||
|
||||
## 💾 Data Retention
|
||||
|
||||
- **Error Logs**: Stored indefinitely (consider adding cleanup job)
|
||||
- **Audit Logs**: Stored indefinitely (consider adding cleanup job)
|
||||
- **Metrics**: In-memory (resets on server restart)
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Security Notes
|
||||
|
||||
- IP addresses captured for all audit events
|
||||
- Error logs may contain sensitive data (review periodically)
|
||||
- Audit logs provide full change history for compliance
|
||||
- WebSocket messages sent to all connected clients (consider auth)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
1. **Error Log Cleanup**: Add job to archive old error logs (> 90 days)
|
||||
2. **Audit Log Retention**: Implement archive for old audit logs
|
||||
3. **Real-time Metrics Push**: Broadcast metrics via WebSocket to Observability tab
|
||||
4. **Performance Alerts**: Add threshold-based alerts in metrics
|
||||
5. **Export Audit Reports**: PDF/CSV export of audit logs
|
||||
6. **Metrics Dashboard Charts**: Add charts for error rate trends, response time trends
|
||||
|
||||
---
|
||||
|
||||
## 📝 Files Modified/Created
|
||||
|
||||
### New Files:
|
||||
- `server/metrics.js` - Metrics collection
|
||||
- `server/auditLog.js` - Audit logging
|
||||
- `client/src/Observability.js` - Observability dashboard
|
||||
|
||||
### Modified Files:
|
||||
- `server/database.js` - Added audit_logs and error_logs tables
|
||||
- `server/index.js` - Added metrics middleware, observability endpoints, enhanced WebSocket
|
||||
- `client/src/App.js` - Added notification UI, enhanced WebSocket handler, Observability route
|
||||
|
||||
### No Breaking Changes:
|
||||
- All existing functionality preserved
|
||||
- Backward compatible API
|
||||
- Optional observability features
|
||||
|
||||
Reference in new issue
Block a user