Understanding Presto UI: A Deep Dive into the Web Interface Architecture 

    By: 

    Saurabh Mahawar, Developer Relations Engineer at IBM

    Presto UI is a modern, React-based web interface that provides real-time monitoring, query management, and cluster administration capabilities for the Presto distributed SQL query engine. Whether you’re a database administrator, data engineer, or developer, Presto UI offers intuitive tools to visualize query execution, monitor cluster health, and interact with the Presto coordinator.

    Key Benefits of Presto UI:

    ✅ Real-time Query Monitoring – Track running, queued, and completed queries
    ✅ Cluster Health Dashboard – Monitor worker nodes and resource utilization
    ✅ Interactive SQL Client – Execute queries directly from your browser
    ✅ Performance Analytics – Analyze query execution plans and bottlenecks
    ✅ Resource Management – View memory pools and resource group allocations

    Architecture Overview 

    Technology Stack 

    The Presto UI leverages a modern JavaScript ecosystem:

    Core Dependencies: 

    • React 18.3.1: Modern UI framework with concurrent features 
    • D3.js 7.9.0: Advanced data visualization for query plans and metrics 
    • dagre-d3-es: Graph visualization for query execution plans 
    • vis-timeline: Interactive timeline visualizations 
    • @prestodb/presto-js-client: Official Presto JavaScript client 
    • react-data-table-component: Efficient data table rendering 
    • Prism.js: Syntax highlighting for SQL queries 

    Presto UI Build Configuration

    The UI uses a sophisticated Webpack configuration (webpack.config.js) that supports: 

    • Multiple Entry Points: Separate bundles for different pages (index, query, plan, worker, etc.) 
    • Code Splitting: Automatic chunking for optimal loading performance 
    • Development Server: Built-in proxy for API calls during development 
    • Production Optimization: Terser minification and tree-shaking 

    Core Components: Understanding Presto UI Features

    1. Cluster Overview Dashboard – Real-time Monitoring

    The main landing page provides a real-time cluster health dashboard through the ClusterHUD component.

    Key Performance Indicators (KPIs):

    • Running Queries: Current active query count with trend sparkline
    • Queued Queries: Queries waiting for execution resources
    • Blocked Queries: Queries unable to progress due to resource constraints
    • Active Workers: Number of healthy worker nodes in the cluster
    • Running Drivers: Total parallel execution units across all queries
    • Reserved Memory: Current memory allocation across the cluster
    • Row Input Rate: Rows processed per second (moving average)
    • Byte Input Rate: Data throughput in bytes per second
    • Worker Parallelism: CPU utilization per worker node

    The component uses exponentially weighted moving averages for smooth metric visualization: 

    // Real-time metric calculation from ClusterHUD.jsx
newRowInputRate = addExponentiallyWeightedToHistory(
    rowsInputSinceRefresh / secsSinceRefresh, 
    this.state.rowInputRate
);

    Refresh Interval: Updates every 1 second for real-time cluster monitoring.

    2. Query List Component 

    The QueryList component is your command center for managing and monitoring all Presto queries with powerful filtering and sorting capabilities.

    How to Monitor Presto Queries:

    Advanced Filtering Options:

    • State Filters: Running, Queued, Finished queries
    • Error Type Filters: Internal Error, External Error, Resources Error, User Error
    • Full-text Search: Search across query ID, user, source, resource group, and SQL text
    • Real-time Updates: Automatic refresh with configurable intervals (1s, 5s, 10s, 30s)

    Query Sorting Capabilities:

    • Creation time (newest/oldest first)
    • Elapsed time (longest/shortest running)
    • CPU time (most/least intensive)
    • Execution time (actual processing time)
    • Current memory usage
    • Cumulative user memory

    Comprehensive Query Information Display:

    Each query card in the Presto UI shows:

    • Query ID: Clickable link to detailed query analysis
    • User & Source: Who submitted the query and from which application
    • Resource Group: Hierarchical resource allocation (clickable breadcrumb navigation)
    • Driver Statistics: Completed, running, and queued drivers/splits
    • Timing Metrics: Elapsed time, execution time, CPU time
    • Memory Metrics: Current reservation, peak usage, cumulative memory
    • Progress Bar: Visual state indicator with color-coded status
    • SQL Preview: Formatted query text with intelligent truncation

    Pro Tip: Use the search bar to quickly find queries by user, source application, or SQL keywords for faster troubleshooting.

    3. Query Detail View

    The QueryDetail component provides comprehensive query analysis for performance optimization and debugging.

    Understanding Query Execution in Presto UI:

    Session Information:

    • User identity and principal
    • Source application details
    • Catalog and schema context
    • Client IP address and connection tags
    • Session properties and configurations
    • Resource estimates and allocations

    Execution Timeline Analysis:

    • Submission Time: When the query was received
    • Completion Time: When execution finished
    • Prerequisites Wait Time: Time waiting for dependencies
    • Queued Time: Time spent in the queue
    • Planning Time: Query optimization duration
    • Execution Time: Actual processing time
    • Coordinator: Which node coordinated the query

    Resource Utilization Metrics:

    • CPU Time: Total CPU seconds consumed
    • Scheduled Time: Time tasks were scheduled
    • Input Rows/Data: Amount of data processed
    • Output Rows/Data: Results produced
    • Shuffled Data: Data transferred between stages
    • Memory Metrics: Peak, cumulative, and current usage
    • Spilled Data: Data written to disk (performance indicator)

    Real-time Performance Sparklines:

    // Live metrics updated every second
- Parallelism: CPU time rate showing query concurrency
- Scheduled Time/s: Task scheduling efficiency
- Input Rows/s: Data ingestion rate
- Input Bytes/s: Network throughput
- Memory Utilization: Current memory consumption

    Stage-by-Stage Breakdown:

    The Presto UI visualizes query execution stages with:

    • Stage Statistics: Time, memory, and task counts per stage
    • Task Distribution: Histogram showing task balance across workers
    • Skew Analysis: Scheduled time and CPU time distribution
    • Expandable Task Lists: Individual task details with filtering
    • Auto-Refresh Toggle: Freeze stage view for detailed analysis

    4. Presto SQL Client – Interactive Query Interface

    The SQLClient component provides an interactive SQL query interface directly in the browser. 

    How to Use the Presto SQL Client:

    Query Execution Features:

    • Syntax-Highlighted Editor: PrismJS-powered SQL editor with auto-formatting
    • Catalog Selection: Choose your data source from available catalogs
    • Schema Selection: Navigate database schemas easily
    • Session Properties: Configure query behavior and optimizations
    • Real-time Execution: Submit queries and see results instantly

    Results Display:

    • Tabular Presentation: Clean, sortable data tables
    • Column Sorting: Click headers to sort results
    • Export Options: Download results in various formats
    • Error Messages: Clear, actionable error information
    • Query Statistics: Execution time and row counts

    Security Considerations:

    The SQL client includes a prominent security warning:

    “SQL client directly accesses the coordinator APIs and submits SQL queries. Users who can access the Web UI can use this client to query, update, and even delete data in the catalogs.”

    5. Worker Status View – Node-Level Monitoring

    The WorkerStatus component provides detailed monitoring of individual Presto worker nodes.

    Worker Node Metrics:

    System Overview:

    • Node ID: Unique worker identifier
    • Heap Memory: Total JVM heap capacity
    • Processor Count: Available CPU cores
    • Uptime: Time since worker started
    • External Address: Public-facing network address
    • Internal Address: Cluster-internal network address

    Resource Utilization Monitoring:

    • Process CPU Utilization: CPU usage by Presto process (sparkline)
    • System CPU Utilization: Overall system CPU usage (sparkline)
    • Heap Utilization: JVM heap memory percentage (sparkline)
    • Non-Heap Memory: Off-heap memory usage (sparkline)

    Memory Pool Management:

    Presto UI visualizes two critical memory pools:

    1. General Pool: Memory for query execution
      • Total capacity
      • Reserved (non-revocable) memory
      • Revocable memory
      • Free memory
      • Per-query breakdown
    2. Reserved Pool: Memory for system operations
      • Same metrics as General Pool
      • System-level reservations
      • Query-specific allocations

    6. Resource Group View 

    The resource group component provides hierarchical visualization of query resource allocation and management. 

    7. Query Plan Visualization

    The UI includes sophisticated query plan visualization using D3.js and dagre-d3.

    Features: 

    • Interactive DAG (Directed Acyclic Graph) representation 
    • Stage dependencies and data flow 
    • Operator-level details 
    • Zoom and pan capabilities 
    • Export to various formats

    Data Flow Architecture: How Presto UI Communicates

    Presto REST API Endpoints

    The UI communicates with these key coordinator endpoints:

    Cluster Monitoring:

    • /v1/cluster – Cluster-wide statistics and health metrics
    • /v1/worker/{nodeId}/status – Individual worker node status

    Query Management:

    • /v1/queryState – List of all queries with basic information
    • /v1/query/{queryId} – Detailed query information including stages
    • /v1/taskInfo/{taskId} – Individual task execution details

    Resource Management:

    /v1/resourceGroupState – Resource group configurations and usage

    Performance Optimizations: How Presto UI Stays Fast

    1. Lazy Loading 

    The UI uses a custom lazy loading mechanism (lazy.jsx) for code splitting: 

    // Components load on-demand
const ClusterHUD = lazy('ClusterHUD');
const QueryList = lazy('QueryList');
const WorkerStatus = lazy('WorkerStatus');

    2. Efficient Re-rendering Strategy

    Components implement intelligent update strategies:

    • Throttled Sparkline Rendering: 1-second minimum interval prevents excessive redraws
    • Incremental Query List Updates: Only changed queries re-render
    • Conditional Stage Refresh: Auto-refresh toggle for detailed analysis
    • Memoized Calculations: Expensive computations cached

    3. Data Aggregation Techniques

    Moving averages and exponentially weighted calculations:

    • Reduce data noise in visualizations
    • Smooth out temporary spikes
    • Provide accurate trend analysis
    • Minimize memory footprint

    Deployment Architecture: How to Deploy Presto UI


    Build Process Steps:

    1. Maven Trigger: frontend-maven-plugin initiates build
    2. Node.js Installation: v22.15.1 installed automatically
    3. Yarn Installation: v1.22.22 for dependency management
    4. Webpack Bundling: Optimized production bundles created
    5. Asset Copying: Static files moved to target/webapp
    6. Server Integration: Presto server serves UI at root path

    Ready to Contribute? Start Your Presto UI Journey Today!

    Find Your First Frontend Issue

    The Presto community welcomes frontend developers of all skill levels! We’ve made it easy to find issues that match your expertise and interests.

    Browse WebUI Issues on GitHub

    All frontend-related issues are tagged with the webui label for easy discovery:

    🔗 View All WebUI Issues on GitHub

    Follow Presto at Linkedin, Youtube, and Join Slack channel to interact with the community.