dennisleetw/pandora-ui repository overview

⁠pandora-ui

⁠Short Description

Pandora Box Console Frontend - Modern Next.js-based web interface for security management and monitoring

⁠Full Description

# Pandora Box Console Frontend

A modern, responsive web interface built with Next.js 14+ for the Pandora Box Console IDS-IPS platform. Provides intuitive dashboards for security management, device monitoring, threat intelligence visualization, and system administration.

## Features

- **Modern UI/UX**: Built with Next.js 14+ App Router and React 18+
- **Responsive Design**: Mobile-first design, works on all devices
- **Real-time Updates**: WebSocket integration for live data updates
- **Dark Mode Support**: Built-in dark mode for comfortable viewing
- **Authentication**: JWT-based authentication with secure token management
- **Device Management**: Complete CRUD interface for device registry
- **Threat Intelligence**: Vision One integration dashboard
- **Analytics**: Interactive charts and data visualizations
- **Audit Logs**: Searchable audit log interface
- **Non-Root Execution**: Runs as non-root user (nodejs:1001)

## Quick Start

```bash
docker run -d \
  --name pandora-ui \
  -p 3000:10000 \
  -e NEXT_PUBLIC_API_URL=https://api.example.com \
  -e NODE_ENV=production \
  your-username/pandora-ui:latest

⁠Configuration

Required environment variables:

• NEXT_PUBLIC_API_URL: Backend API URL (e.g., https://api.example.com⁠)
• NODE_ENV: Set to production for production builds
• PORT: (Optional) Server port (default: 10000, Render sets automatically)

The container uses Next.js standalone output mode for optimal performance and minimal image size.

⁠Features

⁠Dashboard Pages

• Overview: System status, uptime, active sessions
• Devices: Device registry management (list, create, edit, delete, revoke)
• Threats: Threat intelligence and alert management
• Events: Security event log viewer
• Vision One: Trend Micro Vision One integration dashboard
• Analytics: Security metrics and analytics
• Settings: System configuration

⁠Components

• DataTable: Sortable, filterable data tables
• Charts: Interactive charts using modern charting libraries
• Forms: Comprehensive form handling with validation
• Modals: Modal dialogs for actions and confirmations
• Notifications: Toast notifications for user feedback

⁠Architecture

• Base Image: Node.js 20 Alpine
• Framework: Next.js 14+ (App Router)
• Runtime: Node.js 20
• Build Mode: Standalone (optimized production build)
• Size: ~150MB compressed

⁠Performance

• Server-side rendering (SSR) for optimal SEO
• Static site generation (SSG) where applicable
• Image optimization with Next.js Image component
• Code splitting for minimal initial load
• Client-side caching for API responses

⁠Security

• Non-root user execution (UID 1001)
• Environment variable-based configuration
• Secure cookie handling
• CSRF protection
• XSS prevention
• Content Security Policy (CSP) headers

⁠Health Check

• Endpoint: / (root endpoint)
• Port: 10000 (configurable via PORT env var)
• Interval: 30 seconds

⁠Development

For local development:

cd web
npm install
npm run dev

Access the application at http://localhost:3000⁠

⁠Production Deployment

The container is optimized for production:

• Standalone build mode
• Minimal dependencies
• Production-optimized Next.js configuration
• Health check endpoints
• Graceful shutdown handling

⁠Documentation

• Frontend Documentation⁠
• Component Library⁠
• API Client⁠
• Next.js Configuration⁠

⁠License

Proprietary - All rights reserved

⁠Support

For issues and questions, please open an issue on GitHub.