Azion Log Viewer

A high-performance, real-time log visualization application for Azion's GraphQL API featuring dual visualization modes, advanced security, and optimized performance with web workers and virtual scrolling.

🧹 Recent Updates

• ✅ Codebase Cleanup: Removed 11 unused files and 1 empty directory for improved performance
• ✅ UI Components: Streamlined to only include actively used shadcn/ui components
• ✅ Asset Optimization: Removed unused assets and fixed favicon references

TO DO

• Revise licensing for making the project public;
• Review NPM vulnerabilities since theres malware on NPM repos recently - Security audit completed
• Create an Azion Template integrated with github so the user can connect their account easily
• Remove internal graphql proxying by solving official grapQL consumption issue with CORP, CORS and CSP;
• Create test suites and integrate to github actions;
• Security hardening and vulnerability fixes - Comprehensive security fixes implemented

✨ Features

🎯 Dual Visualization Modes

• Particle Animation: Interactive particle system with animated log entries flowing across the canvas
• World Map Visualization: SVG-based geographical visualization with country-specific log activity
• Seamless Mode Switching: Toggle between visualization modes with preserved state
• Real-time statistics with request counters and status monitoring
• Responsive design with cyberpunk-inspired UI themes (Azion Orange & Blue)

🌍 Geographic Visualization

• Interactive World Map: SVG-based map with 60+ countries and continent paths
• Country Activity Blinking: Visual indicators when logs are received from specific countries
• Clickable Countries: Interactive country selection showing recent log details
• Coordinate Mapping: Precise positioning system for global log activity tracking

🔒 Advanced Security

• Cryptographic token storage using Web Crypto API with AES-GCM encryption
• Device-specific encryption keys generated from browser fingerprinting
• PBKDF2 key derivation with 100,000 iterations for maximum security
• Automatic migration from legacy plain-text configurations
• Visual security indicators showing encryption status

⚙️ Configuration Management

• Comprehensive API configuration with retry policies and rate limiting
• GraphQL field selection for optimized queries
• Mock data generator with configurable frequency and randomness
• Export/import functionality (excludes sensitive data for security)

🎨 User Experience

• Dual visualization modes with particle animation and world map views
• Advanced log table with virtual scrolling for high-performance rendering
• Log details modal with comprehensive request information
• Column customization with resizable columns and field selection
• Animation speed control for particle visualization
• Comprehensive clear functionality resetting all application state
• Theme switching between Azion and Blue themes
• Responsive sidebar with controls and statistics

⚡ Performance Optimizations

• Custom Virtual Scrolling: Handles large datasets efficiently with optimized rendering
• Web Worker Processing: Offloads heavy computations from the main thread
• Zustand State Management: Centralized state with minimal re-renders
• Memoized Components: React.memo optimization with smart prop comparison
• Text Measurement Caching: LRU cache for optimized text calculations
• Change-based Updates: Hash-based change detection replacing constant intervals

🚀 Quick Start

Prerequisites

• Node.js 18+ (recommended: 20+) and npm installed - install with nvm
• Azion CLI installed - install guide

Local Development with Azion CLI

# Clone the repository
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>

# Install dependencies
npm install

# Start development server with Azion CLI (recommended)
azion dev

⚠️ Important: Use azion dev for optimal Azion Platform compatibility. This ensures proper edge function simulation and deployment compatibility.

Alternative Development Methods

# For standard development (without Azion edge simulation)
npm run dev

The application will be available at http://localhost:3333

Why Use Azion CLI?

Using azion dev provides several advantages over standard npm commands:

• 🚀 Edge Simulation: Accurate local simulation of Azion Edge Platform behavior
• ⚡ Optimized Build Process: Azion-specific optimizations and bundling
• 🔧 Automatic Configuration: Seamless integration with Azion services
• 📦 Edge Function Support: Test edge functions locally before deployment
• 🌐 Production Parity: Development environment matches production deployment
• 🔄 Hot Reload: Fast refresh with edge-aware updates

🔧 Configuration

Azion GraphQL API Setup

1. Open the application and click the Config button
2. Navigate to the GraphQL tab
3. Configure your settings:
   • GraphQL Endpoint: https://alv.azion.app/api/v4/events/graphql (default)
   • Authentication Token: Your Azion API token (automatically encrypted)
   • Query Parameters: Limit, time range, refresh interval
   • Field Selection: Choose which GraphQL fields to fetch

Note: The default endpoint has been updated to https://alv.azion.app/api/v4/events/graphql for improved compatibility and performance.

Security Features

The application automatically encrypts your API tokens using:

• AES-GCM encryption with 256-bit keys
• Device-specific passwords for enhanced security
• Visual indicators: Green shield (encrypted) or yellow shield (fallback)

Log Sources

• Mock Generator: Generates realistic log data for testing
• Azion GraphQL API: Live data from your Azion account
• Both: Combined streams for comprehensive testing

🏗️ Architecture

Tech Stack

• Platform: Azion Edge Platform with CLI integration
• Frontend: React 19.1.1 with TypeScript
• Build Tool: Vite 7.1.5 with SWC + Azion CLI
• UI Framework: shadcn/ui components with Radix UI primitives
• Styling: Tailwind CSS with custom cyberpunk themes
• State Management: Zustand for centralized state + React hooks
• Performance: Web Workers for background processing
• Virtualization: Custom virtual scrolling for efficient large dataset rendering
• Security: Web Crypto API for encryption
• HTTP Client: Native Fetch API for GraphQL communication

Project Structure

src/
├── components/          # React components
│   ├── ui/             # shadcn/ui components
│   ├── AzionLogo.tsx   # Azion branding component
│   ├── ConfigurationMenu.tsx # Settings interface
│   ├── FilterConfiguration.tsx # Log filtering
│   ├── LiveIndicator.tsx # Real-time status
│   ├── LogCanvas.tsx   # Particle visualization
│   ├── LogControls.tsx # Animation controls
│   ├── LogDetails.tsx  # Log detail modal
│   ├── LogStats.tsx    # Statistics display
│   ├── LogTaillogV2.tsx # Optimized log table
│   ├── WorldMap.tsx    # Geographic visualization
│   └── ...
├── hooks/              # Custom React hooks
├── lib/                # Utilities and secure storage
├── services/           # API services and configuration
├── stores/             # Zustand state management
├── workers/            # Web Workers for background processing
├── types/              # TypeScript type definitions
└── pages/              # Application pages

Key Components

• LogCanvas: WebGL-accelerated particle system for log visualization
• WorldMap: SVG-based geographic visualization with country activity
• LogTaillogV2: High-performance log table with virtual scrolling and web workers
• SecureStorage: Cryptographic storage utility
• ConfigurationMenu: Comprehensive settings interface
• AzionGraphQL Service: API integration with retry logic
• Log Store (Zustand): Centralized state management for log data
• Log Processor Worker: Background processing for heavy computations

🔒 Security Implementation

Security Features

• AES-GCM Encryption: API tokens encrypted with 256-bit keys and device-specific binding
• XSS Prevention: Comprehensive input sanitization and Content Security Policy
• GraphQL Injection Prevention: Input validation and query sanitization
• Rate Limiting: Client-side and server-side request throttling
• Security Headers: X-Frame-Options, X-XSS-Protection, and more

Encryption Details

• Algorithm: AES-GCM with 256-bit keys
• Key Derivation: PBKDF2 with SHA-256, 100,000 iterations
• Device Binding: Browser fingerprinting for unique encryption keys
• Storage Separation: Sensitive data encrypted, public settings in plain text

Browser Compatibility

• Modern Browsers: Full encryption support via Web Crypto API
• Legacy Browsers: Automatic fallback with security warnings
• Progressive Enhancement: Application works regardless of crypto support

📋 For detailed security information, see SECURITY.md

🚀 Deployment

Build for Production

# Build with Azion CLI (recommended for Azion deployment)
azion build

# Alternative build method
npm run build

Deployment Options

Azion Edge Platform (Recommended)

# Deploy to Azion Edge Platform
azion deploy

# Deploy with custom domain
azion deploy --domain your-domain.com

Alternative Deployment Options

• Vercel/Netlify: Static hosting with automatic deployments
• Any CDN: Deploy the dist folder to any static hosting service

Environment Considerations

• Production builds work directly with Azion's API (no proxy needed)
• CSP headers configured for Leaflet map tiles and Google Fonts
• All sensitive data remains client-side encrypted
• Web Workers supported in all modern browsers

🛠️ Development

Available Scripts

Azion CLI Commands (Recommended)

• azion dev - Start development server with Azion edge simulation
• azion build - Build for Azion Edge Platform
• azion deploy - Deploy to Azion Edge Platform
• azion init - Initialize Azion project configuration

Standard npm Scripts

• npm run dev - Start development server with proxy
• npm run build - Build for production
• npm run build:dev - Build for development mode
• npm run preview - Preview production build
• npm run lint - Run ESLint

Development Features

• Azion Edge Simulation with azion dev for accurate local testing
• Hot Module Replacement for instant updates
• TypeScript for type safety
• ESLint for code quality
• Edge Function Support when using Azion CLI
• Proxy Configuration for CORS handling

📊 Features in Detail

Real-time Visualization

• Particle Mode: Physics-based log representation with configurable animation speed
• World Map Mode: Geographic visualization with country-specific activity indicators
• Color-coded status indicators (success, error, blocked)
• Interactive elements with click-to-view details
• Smooth mode transitions with preserved application state

Performance Features

• Custom Virtual Scrolling: Efficiently handles thousands of log entries with optimized rendering
• Web Worker Processing: Background computation without UI blocking
• Optimized Rendering: Memoized components with smart re-render logic
• Memory Management: LRU caches and efficient state updates
• Change Detection: Hash-based updates instead of constant polling

Security Dashboard

• Visual encryption status indicators
• Automatic token migration from legacy storage
• Export/import functionality with security preservation
• Device-specific encryption key generation

API Integration

• Configurable GraphQL queries with field selection
• Advanced retry policies with exponential backoff
• Rate limiting and connection testing
• Real-time log streaming with WebSocket-like updates

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Check the configuration guide above
• Review the security implementation details
• Use azion dev for optimal development experience
• Ensure you're using compatible Azion CLI commands
• Verify your Azion API token has the necessary permissions
• Check Azion CLI documentation for troubleshooting