Custom PMM UI
Relevant source files
The following files were used as context for generating this wiki page:
The Custom PMM UI is the dedicated frontend interface for Percona Monitoring and Management (PMM). It serves as a single pane of glass for monitoring database performance across MySQL, MongoDB, PostgreSQL, Valkey, and Redis environments. The UI is designed to reduce complexity and improve security by providing deep insights from node-level metrics down to individual query execution.
Architecture-wise, the UI is split into two primary components: the main pmm application and pmm-compat, a compatibility layer that facilitates communication between the Grafana core and the custom PMM interface. The system leverages modern web technologies including React, TypeScript, and Vite to deliver a responsive and extensible monitoring experience.
Sources: ui/README.md:1-25, CONTRIBUTING.md:25-30, ui/apps/pmm-compat/src/plugin.json:1-10
System Architecture and Tech Stack
The PMM UI is structured as a monorepo containing multiple applications and shared packages. It uses Yarn for package management and Turborepo for orchestration. The tech stack is centered around React for the view layer and TypeScript for type safety.
Component Breakdown
- pmm Application: The main user interface providing dashboards, settings, and management tools.
- pmm-compat: A Grafana plugin (App type) that acts as a bridge, ensuring the custom UI components can operate within or alongside the standard Grafana environment.
- shared Package: Contains common logic and components utilized by both the main application and compatibility layers.
Sources: ui/README.md:27-46, ui/apps/pmm-compat/src/plugin.json:4-7
Core Tech Stack
| Technology | Usage |
|---|---|
| React | Core UI framework for building components |
| TypeScript | Static typing across all UI packages |
| Vite | Development server and bundling |
| Vitest | Unit testing framework |
| Rollup | Bundling common shared packages |
Sources: ui/README.md:31-38
Frontend Data Flow
The PMM UI interacts with multiple backend components, primarily pmm-managed for configuration and qan-api for query analytics. Data flows from the monitored nodes through agents to the server, where the UI visualizes it through specialized dashboards.
The diagram shows the relationship between the custom UI applications and the underlying PMM Server backend services.
Sources: CONTRIBUTING.md:20-30, ui/README.md:40-46
UI Modules and Features
Query Analytics (QAN)
The QAN module provides insights into query execution, including counts and execution times. It allows users to identify performance bottlenecks at the source of the query.
Sources: ui/apps/pmm/src/contexts/tour/steps/product.messages.ts:11-17
Settings and Configuration
The UI provides comprehensive management of PMM Server settings, categorized into SSH keys, metrics resolution, and advanced system settings.
| Feature | Description | File Reference |
|---|---|---|
| Metrics Resolution | Configures frequency of data collection (Rare, Standard, Frequent). | Settings.messages.ts |
| Data Retention | Defines how long collected data is stored before automatic deletion. | Settings.messages.ts |
| Access Control | Restricts data visibility based on user roles and labels. | Settings.messages.ts |
| Public Address | Defines the hostname PMM Server uses for accessibility. | Settings.messages.ts |
Sources: ui/apps/pmm/src/pages/settings/Settings.messages.ts:2-75
Help Center and Onboarding
The Help Center serves as a resource hub, providing access to documentation, community forums, and diagnostic tools like "PMM Dump" for sharing datasets with Percona Support. It also includes an onboarding tour to guide new users through the interface.
Sources: ui/apps/pmm/src/pages/help-center/HelpCenter.constants.ts:15-115, ui/apps/pmm/src/contexts/tour/steps/product.messages.ts:60-70
Client Management and Updates
The UI includes a dedicated section for tracking PMM Client versions and managing updates. It identifies nodes that require updates and classifies update severity (e.g., "Critical to update").
Sources: ui/apps/pmm/src/pages/update-clients/UpdateClients.messages.ts:1-40
Configuration Management
The UI manages complex configuration states for the PMM environment, including telemetry, advisor check intervals, and feature flags for technical previews.
The sequence diagram illustrates the flow of updating server configuration through the UI settings module.
Sources: ui/apps/pmm/src/pages/settings/Settings.messages.ts:7-130
Development and Contribution
Developers can set up the UI environment using make setup and run it in development mode using make dev. The project enforces code quality through linters and unit tests (Vitest).
- Local Testing: Developers can link local versions of
@percona/percona-uiusingyarn linkto test changes across the shared library and the main application. - Grafana Compatibility: The
pmm-compatplugin requires a Grafana dependency of>=10.4.0.
Sources: ui/README.md:39-44, ui/apps/pmm/README.md:12-22, ui/apps/pmm-compat/src/plugin.json:19-22
The Custom PMM UI is the critical bridge between complex database metrics and actionable insights for database administrators, providing a centralized control plane for the Percona Monitoring and Management ecosystem.