Omnis Hestia Laravel Architecture - OPL Overview

Executive Summary

This document outlines the technical architecture for the new Laravel-based Hestia frontend, replacing the current Vue.js/Quasar SPA. The architecture leverages Laravel's ecosystem for maximum productivity and maintainability.

Core Components Overview

Technology Stack

Laravel 12 - Main application framework
Livewire 4 - Server-side interactive components
Laravel Reverb - WebSocket server for real-time features
Laravel Horizon - Queue monitoring and job management
Filament 4 - Admin panel for operational tasks
Alpine.js - Lightweight client-side interactivity
FluxUI - Component library for consistent UI

OPL: Object Process Language Diagram

┌─────────────────────────────────────────────────────────────────────────┐
│                           CLIENT BROWSER                                │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Blade Views   │  │   Livewire      │  │   Alpine.js     │          │
│  │   (Templates)   │  │   Components    │  │ (Interactivity) │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
│             │              │                       │                    │
│             ▼              ▼                       ▼                    │
└─────────────────────────────────────────────────────────────────────────┘
                                   │
                                   ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                        LARAVEL APPLICATION                              │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Controllers   │  │   Livewire      │  │   Models &      │          │
│  │   (API Routes)  │  │   Components    │  │   Eloquent      │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
│             │              │                       │                    │
│             ▼              ▼                       ▼                    │
└─────────────────────────────────────────────────────────────────────────┘
                                   │
                                   ▼
┌─────────────────────────────────────────────────────────────────────────┐
│                      DATABASE LAYER (MySQL/PostgreSQL)                  │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   User Sessions │  │   Application   │  │   Job Queues    │          │
│  │   & Auth        │  │   Data          │  │   (Horizon)     │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
└─────────────────────────────────────────────────────────────────────────┘
                                   ▲
                                   │
┌─────────────────────────────────────────────────────────────────────────┐
│                      QUEUE & BACKGROUND SERVICES                        │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Queue Worker  │  │   Scheduler     │  │   Event         │          │
│  │   (Jobs)        │  │   (Cron)        │  │   Broadcasting  │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
│             │              │                       │                    │
│             ▼              ▼                       ▼                    │
└─────────────────────────────────────────────────────────────────────────┘
                                   ▲
                                   │
┌─────────────────────────────────────────────────────────────────────────┐
│                     MONITORING & ADMIN SERVICES                         │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Horizon       │  │   Filament      │  │   Telescope     │          │
│  │   Dashboard     │  │   Admin Panel   │  │   (Debugging)   │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
└─────────────────────────────────────────────────────────────────────────┘
                                   ▲
                                   │
┌─────────────────────────────────────────────────────────────────────────┐
│                       REAL-TIME SERVICES                                │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Reverb        │  │   WebSocket     │  │   Broadcasting  │          │
│  │   Server        │  │   Connections   │  │   Events        │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
└─────────────────────────────────────────────────────────────────────────┘

Component Interaction Flow

1. User Request Flow (Page Load)

User Browser → Nginx → Laravel → Livewire → Database → Blade Template → Browser

2. Livewire Component Interaction

User Action → Alpine.js → AJAX → Livewire Component → Laravel Logic → Database → Livewire Response → DOM Update

3. Real-time Updates (Reverb)

Database Change → Laravel Event → Broadcasting → Reverb Server → WebSocket → Livewire Component → UI Update

4. Background Job Processing

User Action → Laravel Job → Queue → Worker → Database Update → Broadcasting Event → Real-time UI Update

5. Admin Operations (Filament)

Admin User → Filament Panel → Laravel CRUD → Database → Horizon Monitoring → Real-time Dashboard Updates

Frontend Technology Stack Diagram

┌──────────────────────────────────────────────────────────────────────────┐
│                         FRONTEND LAYERS                                  │
├──────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────┐ │
│  │                    PRESENTATION LAYER                               │ │
│  ├─────────────────────────────────────────────────────────────────────┤ │
│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐      │ │
│  │  │    FluxUI       │  │    Blade        │  │    Alpine.js    │      │ │
│  │  │   Components    │  │   Templates     │  │   Interactivity │      │ │
│  │  │                 │  │                 │  │                 │      │ │
│  │  │ • Buttons       │  │ • Layouts       │  │ • Dropdowns     │      │ │
│  │  │ • Forms         │  │ • Navigation    │  │ • Modals        │      │ │
│  │  │ • Tables        │  │ • Partials      │  │ • Transitions   │      │ │
│  │  │ • Cards         │  │ • Components    │  │ • Form helpers  │      │ │
│  │  └─────────────────┘  └─────────────────┘  └─────────────────┘      │ │
│  └─────────────────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────┐ │
│  │                   INTERACTION LAYER                                 │ │
│  ├─────────────────────────────────────────────────────────────────────┤ │
│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐      │ │
│  │  │   Livewire      │  │   HTMX/AJAX     │  │   WebSocket     │      │ │
│  │  │   Components    │  │   Requests      │  │   (Reverb)      │      │ │
│  │  │                 │  │                 │  │                 │      │ │
│  │  │ • Form handling │  │ • API calls     │  │ • Real-time     │      │ │
│  │  │ • State mgmt    │  │ • Validation    │  │ • Live updates  │      │ │
│  │  │ • CRUD ops      │  │ • Error handling│  │ • Event streams │      │ │
│  │  │ • Pagination    │  │ • Loading states│  │ • Notifications │      │ │
│  │  └─────────────────┘  └─────────────────┘  └─────────────────┘      │ │
│  └─────────────────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────┐ │
│  │                ADVANCED COMPONENTS LAYER                            │ │
│  ├─────────────────────────────────────────────────────────────────────┤ │
│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐      │ │
│  │  │   React/Vue     │  │   Charts        │  │   Custom        │      │ │
│  │  │   (When needed) │  │   Libraries     │  │   Components    │      │ │
│  │  │                 │  │                 │  │                 │      │ │
│  │  │ • Complex viz   │  │ • ApexCharts    │  │ • File uploads  │      │ │
│  │  │ • Drag & drop   │  │ • D3.js         │  │ • Rich editors  │      │ │
│  │  │ • Advanced UX   │  │ • Chart.js      │  │ • Date pickers  │      │ │
│  │  │ • 3rd party     │  │ • Metrics       │  │ • Image cropping│      │ │
│  │  │   integrations  │  │   dashboards    │  │ • Advanced forms│      │ │
│  │  └─────────────────┘  └─────────────────┘  └─────────────────┘      │ │
│  └─────────────────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────────────────────┐ │
│  │                     STYLING LAYER                                   │ │
│  ├─────────────────────────────────────────────────────────────────────┤ │
│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐      │ │
│  │  │   Tailwind CSS  │  │   Custom CSS    │  │   FluxUI        │      │ │
│  │  │   Utility-first │  │   Components    │  │   Theme         │      │ │
│  │  │                 │  │                 │  │                 │      │ │
│  │  │ • Responsive    │  │ • Brand colors  │  │ • Consistent    │      │ │
│  │  │ • Dark mode     │  │ • Typography    │  │ • Component     │      │ │
│  │  │ • Mobile-first  │  │ • Animations    │  │ • styling       │      │ │
│  │  │ • Performance   │  │ • Layout helpers│  │ • Design system │      │ │
│  │  └─────────────────┘  └─────────────────┘  └─────────────────┘      │ │
│  └─────────────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────┘

Database Connection Architecture

Connection Types

┌─────────────────────────────────────────────────────────────────────────┐
│                        DATABASE CONNECTIONS                             │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Primary DB    │  │   Cache Layer   │  │   Session Store │          │
│  │   (MySQL/PgSQL) │  │   (Redis)       │  │   (Redis)       │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
│             │              │                       │                    │
│             ▼              ▼                       ▼                    │
└─────────────────────────────────────────────────────────────────────────┘
                                   ▲
                                   │
┌─────────────────────────────────────────────────────────────────────────┐
│                      CONNECTION POOLING                                 │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Laravel App   │  │   Queue Workers │  │   Reverb Server │          │
│  │   Connections   │  │   Connections   │  │   Connections   │          │
│  │   (10-20)       │  │   (5-10)        │  │   (2-5)         │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
└─────────────────────────────────────────────────────────────────────────┘

Database Schema Overview, TBD

-- Core Application Tables
users (authentication, profiles)
stacks (WordPress deployments)
wordpresses (individual sites)
domains (SSL certificates, routing)
backups (backup management)
activities (audit logs, notifications)
settings (application configuration)

-- Laravel Ecosystem Tables
jobs (queue system)
failed_jobs (error tracking)
migrations (schema versioning)
personal_access_tokens (API authentication)

Kubernetes Deployment Architecture

Pod Structure

┌─────────────────────────────────────────────────────────────────────────┐
│                          KUBERNETES CLUSTER                             │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   Laravel App   │  │   Queue Worker  │  │   Reverb        │          │
│  │   Pod           │  │   Pod           │  │   Pod           │          │
│  │                 │  │                 │  │                 │          │
│  │ • Web server    │  │ • Job processing│  │ • WebSocket     │          │
│  │ • Octane/Swoole │  │ • Background    │  │ • Broadcasting  │          │
│  │ • File storage  │  │ • tasks         │  │ • Real-time     │          │
│  │ • Sessions      │  │ • Monitoring    │  │ • Events        │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
│             │              │                       │                    │
│             │              │                       │                    │
│             │              │                       │                    │
│             ▼              ▼                       ▼                    │
└─────────────────────────────────────────────────────────────────────────┘
                                   ▲
                                   │
┌─────────────────────────────────────────────────────────────────────────┐
│                      SHARED SERVICES                                    │
├─────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐          │
│  │   MySQL         │  │   Redis         │  │   Horizon       │          │
│  │   (StatefulSet) │  │   (Deployment)  │  │   Dashboard     │          │
│  │                 │  │                 │  │                 │          │
│  │ • Persistent    │  │ • Cache         │  │ • Job monitoring│          │
│  │ • Replication   │  │ • Sessions      │  │ • Admin access  │          │
│  │ • Backups       │  │ • Broadcasting  │  │ • Real-time     │          │
│  │ • High avail    │  │ • Queues        │  │ • metrics       │          │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘          │
└─────────────────────────────────────────────────────────────────────────┘

Service Mesh Configuration

# Laravel App Service
apiVersion: v1
kind: Service
metadata:
  name: hestia-laravel
spec:
  ports:
  - port: 80
    targetPort: 8000
  selector:
    app: hestia-laravel

---
# Reverb WebSocket Service
apiVersion: v1
kind: Service
metadata:
  name: hestia-reverb
spec:
  ports:
  - port: 8080
    targetPort: 8080
  selector:
    app: hestia-reverb

---
# Horizon Dashboard Service (Internal)
apiVersion: v1
kind: Service
metadata:
  name: hestia-horizon
spec:
  type: ClusterIP
  ports:
  - port: 80
    targetPort: 8000
  selector:
    app: hestia-horizon

Ingress Configuration

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: hestia-ingress
spec:
  rules:
  - host: app.omnis.dev
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: hestia-laravel
            port:
              number: 80
      - path: /horizon
        pathType: Prefix
        backend:
          service:
            name: hestia-horizon
            port:
              number: 80
  - host: ws.omnis.dev
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: hestia-reverb
            port:
              number: 8080

Component Interaction Details

Laravel ↔ Livewire

Laravel provides routing, middleware, and business logic
Livewire handles component state and user interactions
Communication via method calls and property binding

Laravel ↔ Reverb

Laravel broadcasts events via Broadcast facade
Reverb receives and distributes WebSocket messages
Livewire components listen for broadcast events

Laravel ↔ Horizon

Laravel dispatches jobs to queues
Horizon monitors queue health and job processing
Laravel provides dashboard UI for queue management

Livewire ↔ Alpine.js

Livewire manages server state and validation
Alpine.js handles client-side UI interactions
Seamless integration without complex state management

Filament ↔ Laravel

Filament generates admin interfaces automatically
Laravel provides underlying CRUD operations
Filament integrates with Laravel's authorization and validation

Performance Considerations

Database Optimization

Connection pooling (10-20 connections per pod)
Redis for sessions and cache (high-throughput)
Read/write splitting for high-traffic scenarios
Database indexing on frequently queried columns

Caching Strategy

Browser Cache: Static assets (FluxUI, Alpine.js)
Application Cache: Database query results, computed values
Session Cache: User sessions and authentication state

Monitoring Points

Horizon: Queue performance and job failures
Laravel Telescope: Request debugging and performance profiling
Database: Slow query monitoring and connection pooling
Reverb: WebSocket connection health and message throughput

This architecture provides a solid foundation for the Hestia Laravel migration while maintaining the operational excellence required for the Omnis platform.

marcovega/infra.md

Select an option

No results found