352 lines
20 KiB
HTML
352 lines
20 KiB
HTML
<div class="row">
|
|
<div class="col-lg-8">
|
|
<!-- Architecture Overview -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-3">System Architecture</h5>
|
|
<p class="text-muted lead">
|
|
DocuPulse employs a sophisticated multi-tenant architecture designed for scalability, security, and maintainability.
|
|
The system is built on a modular blueprint structure with clear separation of concerns, comprehensive event logging,
|
|
and robust permission management.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Architecture Layers -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Architecture Layers</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Presentation Layer</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Bootstrap 5 responsive UI</li>
|
|
<li class="mb-2">• JavaScript ES6+ client logic</li>
|
|
<li class="mb-2">• Jinja2 templating engine</li>
|
|
<li class="mb-2">• AJAX-based real-time updates</li>
|
|
<li class="mb-2">• Progressive enhancement</li>
|
|
<li class="mb-2">• Mobile-first design</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Application Layer</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Flask 2.0+ web framework</li>
|
|
<li class="mb-2">• Blueprint-based routing</li>
|
|
<li class="mb-2">• RESTful API endpoints</li>
|
|
<li class="mb-2">• CSRF protection</li>
|
|
<li class="mb-2">• Session management</li>
|
|
<li class="mb-2">• Error handling</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Business Logic Layer</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• User authentication & authorization</li>
|
|
<li class="mb-2">• File management operations</li>
|
|
<li class="mb-2">• Permission system (7 levels)</li>
|
|
<li class="mb-2">• Event logging & notifications</li>
|
|
<li class="mb-2">• Email template system</li>
|
|
<li class="mb-2">• Multi-tenant isolation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Data Access Layer</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• SQLAlchemy ORM</li>
|
|
<li class="mb-2">• PostgreSQL database</li>
|
|
<li class="mb-2">• Alembic migrations</li>
|
|
<li class="mb-2">• Connection pooling</li>
|
|
<li class="mb-2">• Transaction management</li>
|
|
<li class="mb-2">• Query optimization</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Multi-Tenant Architecture -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Multi-Tenant Architecture</h5>
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-3">Master Instance</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Central orchestration hub</li>
|
|
<li class="mb-2">• Instance management & monitoring</li>
|
|
<li class="mb-2">• Health status tracking</li>
|
|
<li class="mb-2">• Automated deployment via Docker</li>
|
|
<li class="mb-2">• API-based communication</li>
|
|
<li class="mb-2">• Resource allocation management</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-3">Tenant Instances</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Isolated data & storage</li>
|
|
<li class="mb-2">• Independent user management</li>
|
|
<li class="mb-2">• Custom configurations</li>
|
|
<li class="mb-2">• Separate database instances</li>
|
|
<li class="mb-2">• Unique domain/subdomain</li>
|
|
<li class="mb-2">• Scalable resource limits</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blueprint Structure -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Blueprint Structure</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Core Modules</h6>
|
|
<div class="d-grid gap-2">
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-home me-2"></i>main.py - Dashboard & navigation
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-user-shield me-2"></i>auth.py - Authentication system
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-door-open me-2"></i>rooms.py - Room management
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-file-alt me-2"></i>room_files.py - File operations
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-comments me-2"></i>conversations.py - Messaging
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-users me-2"></i>room_members.py - Member management
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Administrative Modules</h6>
|
|
<div class="d-grid gap-2">
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-cogs me-2"></i>admin.py - Admin dashboard
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-code me-2"></i>admin_api.py - Admin API endpoints
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-rocket me-2"></i>launch_api.py - Instance deployment
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-address-book me-2"></i>contacts.py - Contact management
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-trash me-2"></i>trash.py - Trash management
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-envelope me-2"></i>email_templates.py - Email system
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Architecture -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Security Architecture</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Authentication & Authorization</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• Flask-Login session management</li>
|
|
<li class="mb-2">• Password hashing with Werkzeug</li>
|
|
<li class="mb-2">• CSRF token protection</li>
|
|
<li class="mb-2">• JWT for API authentication</li>
|
|
<li class="mb-2">• Role-based access control</li>
|
|
<li class="mb-2">• Granular permission system</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted mb-3">Data Protection</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-2">• SQL injection prevention</li>
|
|
<li class="mb-2">• XSS protection</li>
|
|
<li class="mb-2">• File upload validation</li>
|
|
<li class="mb-2">• Secure file storage</li>
|
|
<li class="mb-2">• Audit logging</li>
|
|
<li class="mb-2">• Data encryption at rest</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event-Driven Architecture -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Event-Driven Architecture</h5>
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<p class="text-muted mb-4">Comprehensive event logging system with 30+ event types for audit trails and system monitoring.</p>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">User Events</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Login/logout tracking</li>
|
|
<li class="mb-1">• Account creation/modification</li>
|
|
<li class="mb-1">• Password changes</li>
|
|
<li class="mb-1">• Profile updates</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">File Events</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Upload/download tracking</li>
|
|
<li class="mb-1">• File modifications</li>
|
|
<li class="mb-1">• Deletion/restoration</li>
|
|
<li class="mb-1">• Permission changes</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Room Events</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Room creation/deletion</li>
|
|
<li class="mb-1">• Member management</li>
|
|
<li class="mb-1">• Permission updates</li>
|
|
<li class="mb-1">• Settings changes</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">System Events</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1">• Configuration changes</li>
|
|
<li class="mb-1">• Email notifications</li>
|
|
<li class="mb-1">• Error logging</li>
|
|
<li class="mb-1">• Performance metrics</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Architecture Diagram -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title mb-4" style="color: var(--primary-color);">Architecture Flow</h5>
|
|
<div class="mb-3">
|
|
<div class="p-3 rounded mb-2" style="background-color: var(--primary-opacity-15);">
|
|
<i class="fas fa-globe fa-2x mb-2" style="color: var(--primary-color);"></i>
|
|
<div class="fw-bold">Client Layer</div>
|
|
<small class="text-muted">Browser/API Client</small>
|
|
</div>
|
|
<div class="p-3 rounded mb-2" style="background-color: var(--secondary-opacity-15);">
|
|
<i class="fas fa-server fa-2x mb-2" style="color: var(--secondary-color);"></i>
|
|
<div class="fw-bold">Web Server</div>
|
|
<small class="text-muted">Gunicorn + Flask</small>
|
|
</div>
|
|
<div class="p-3 rounded mb-2" style="background-color: var(--primary-opacity-15);">
|
|
<i class="fas fa-cogs fa-2x mb-2" style="color: var(--primary-color);"></i>
|
|
<div class="fw-bold">Application Layer</div>
|
|
<small class="text-muted">Business Logic</small>
|
|
</div>
|
|
<div class="p-3 rounded mb-2" style="background-color: var(--secondary-opacity-15);">
|
|
<i class="fas fa-database fa-2x mb-2" style="color: var(--secondary-color);"></i>
|
|
<div class="fw-bold">Data Layer</div>
|
|
<small class="text-muted">PostgreSQL</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Design Patterns -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Design Patterns</h5>
|
|
<div class="d-grid gap-2">
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-puzzle-piece me-2"></i>Blueprint Pattern
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-shield-alt me-2"></i>Decorator Pattern
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-database me-2"></i>Repository Pattern
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-bell me-2"></i>Observer Pattern
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--primary-bg-light);">
|
|
<i class="fas fa-factory me-2"></i>Factory Pattern
|
|
</div>
|
|
<div class="p-2 rounded" style="background-color: var(--secondary-bg-light);">
|
|
<i class="fas fa-chain me-2"></i>Chain of Responsibility
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scalability Features -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3" style="color: var(--primary-color);">Scalability Features</h5>
|
|
<div class="small">
|
|
<div class="mb-2">
|
|
<i class="fas fa-docker text-primary me-2"></i>
|
|
<strong>Containerization</strong> - Docker-based deployment
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-database text-primary me-2"></i>
|
|
<strong>Connection Pooling</strong> - Database optimization
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-server text-primary me-2"></i>
|
|
<strong>Load Balancing</strong> - Multi-instance support
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-chart-line text-primary me-2"></i>
|
|
<strong>Monitoring</strong> - Health checks & metrics
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-cache text-primary me-2"></i>
|
|
<strong>Caching</strong> - Asset versioning & CDN ready
|
|
</div>
|
|
<div class="mb-2">
|
|
<i class="fas fa-expand-arrows-alt text-primary me-2"></i>
|
|
<strong>Horizontal Scaling</strong> - Multi-tenant isolation
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|