CalejoControl/DASHBOARD.md

Calejo Control Adapter - Interactive Dashboard

Overview

The Calejo Control Adapter Dashboard is a web-based interface that provides convenient configuration management, system monitoring, and operational controls for the Calejo Control Adapter system.

Features

🖥️ Dashboard Interface

• Tab-based Navigation: Easy access to different system areas
• Real-time Status Monitoring: Live system status with color-coded indicators
• Configuration Management: Web-based configuration editor
• System Logs: Real-time log viewing
• System Actions: One-click operations for common tasks

📊 Status Monitoring

• Application Status: Overall system health
• Database Status: PostgreSQL connection status
• Protocol Status: OPC UA and Modbus server status
• REST API Status: API endpoint availability
• Monitoring Status: Health monitor and metrics collection

⚙️ Configuration Management

• Database Configuration: Connection settings for PostgreSQL
• Protocol Configuration: Enable/disable OPC UA and Modbus servers
• REST API Configuration: API host, port, and CORS settings
• Monitoring Configuration: Health monitor port settings
• Validation: Real-time configuration validation

📝 System Logs

• Real-time Log Viewing: Latest system logs with timestamps
• Log Levels: Color-coded log entries (INFO, WARNING, ERROR)
• Auto-refresh: Automatic log updates

🔧 System Actions

• System Restart: Controlled system restart
• Backup Creation: Manual backup initiation
• Health Checks: On-demand health status checks
• Metrics Viewing: Direct access to Prometheus metrics

Accessing the Dashboard

URL

http://localhost:8080/dashboard

or

http://localhost:8080/

Default Ports

• Dashboard: 8080 (same as REST API)
• Health Monitor: 9090
• Prometheus: 9091
• Grafana: 3000

Dashboard Tabs

1. Status Tab

• Real-time system status overview
• Color-coded status indicators
• Auto-refresh every 30 seconds
• Manual refresh button

2. Configuration Tab

• Database Section:
  • Host, port, database name
  • Username and password
• Protocol Section:
  • OPC UA server enable/disable
  • OPC UA port configuration
  • Modbus server enable/disable
  • Modbus port configuration
• REST API Section:
  • API host and port
  • CORS enable/disable
• Monitoring Section:
  • Health monitor port
• Action Buttons:
  • Load Current: Load current configuration
  • Save Configuration: Apply new settings
  • Validate: Check configuration validity

3. Logs Tab

• Real-time system log display
• Log level filtering (INFO, WARNING, ERROR)
• Timestamp information
• Manual refresh button

4. Actions Tab

• System Operations:
  • Restart System (requires confirmation)
  • Create Backup
• Health Checks:
  • Run Health Check
  • View Metrics (opens in new tab)

API Endpoints

The dashboard uses the following REST API endpoints:

Configuration Management

• GET /api/v1/dashboard/config - Get current configuration
• POST /api/v1/dashboard/config - Update configuration

System Status

• GET /api/v1/dashboard/status - Get system status

System Actions

• POST /api/v1/dashboard/restart - Restart system
• GET /api/v1/dashboard/backup - Create backup
• GET /api/v1/dashboard/logs - Get system logs

Health Monitoring

• GET /health - Basic health check
• GET /api/v1/health/detailed - Detailed health status
• GET /metrics - Prometheus metrics

Security Features

Authentication

• JWT token-based authentication
• Role-based access control
• Secure credential handling

Input Validation

• Server-side configuration validation
• Port range validation (1-65535)
• Required field validation
• Security warnings for default credentials

Security Warnings

• Default JWT secret key detection
• Default API key detection
• Default database password detection

Browser Compatibility

• Chrome: 70+
• Firefox: 65+
• Safari: 12+
• Edge: 79+

Mobile Support

• Responsive design for mobile devices
• Touch-friendly interface
• Optimized for tablets and smartphones

Development

Frontend Technologies

• HTML5: Semantic markup
• CSS3: Modern styling with Flexbox/Grid
• JavaScript: Vanilla JS (no frameworks)
• Fetch API: Modern HTTP requests

Backend Technologies

• FastAPI: REST API framework
• Pydantic: Data validation
• Jinja2: HTML templating

File Structure

src/dashboard/
├── api.py           # Dashboard API endpoints
├── templates.py     # HTML templates
├── router.py        # Main dashboard router
static/
└── dashboard.js     # Frontend JavaScript

Configuration Validation

The dashboard performs comprehensive validation:

Required Fields

• Database host
• Database name
• Database user
• All port numbers

Port Validation

• All ports must be between 1 and 65535
• No duplicate port assignments

Security Validation

• Default credential detection
• Password strength recommendations

Error Handling

User-Friendly Messages

• Clear error descriptions
• Actionable suggestions
• Context-specific help

Graceful Degradation

• API failure handling
• Network error recovery
• Partial data display

Performance

Optimizations

• Client-side caching
• Efficient DOM updates
• Minimal API calls
• Compressed responses

Monitoring

• Performance metrics
• Error rate tracking
• User interaction analytics

Troubleshooting

Common Issues

1. Dashboard Not Loading

   • Check if REST API is running
   • Verify port 8080 is accessible
   • Check browser console for errors

2. Configuration Not Saving

   • Verify all required fields are filled
   • Check port numbers are valid
   • Look for validation errors

3. Status Not Updating

   • Check network connectivity
   • Verify health monitor is running
   • Check browser console for API errors

Debug Mode

Enable debug mode by opening browser developer tools and checking:

• Network tab for API calls
• Console for JavaScript errors
• Application tab for storage

Integration with Monitoring Stack

The dashboard integrates with the existing monitoring infrastructure:

• Prometheus: Metrics collection
• Grafana: Advanced dashboards
• Health Monitor: System health checks
• Alert Manager: Notification system

Backup and Restore

Dashboard configuration changes can be backed up using:

# Manual backup
./scripts/backup.sh

# Restore from backup
./scripts/restore.sh BACKUP_ID

Security Best Practices

1. Change Default Credentials

   • Update JWT secret key
   • Change API keys
   • Use strong database passwords

2. Network Security

   • Use HTTPS in production
   • Restrict dashboard access
   • Implement firewall rules

3. Access Control

   • Use role-based permissions
   • Regular credential rotation
   • Audit log monitoring

Support

For dashboard-related issues:

1. Documentation: Check this guide and API documentation
2. Logs: Review system logs for errors
3. Community: Check project forums
4. Support: Contact support@calejo-control.com

---

Dashboard Version: 1.0 Last Updated: 2024-01-01 Compatibility: Calejo Control Adapter 2.0+