PMM-15212 Migrate Alert Templates to native PMM UI#5632
Closed
matejkubinec wants to merge 4 commits into
Closed
Conversation
Phase 1 of migrating the Alert Templates feature from the Grafana iframe into the native PMM UI. - types/alert-templates.types.ts: Template, ParamDefinition, ParamValue, Filter, CreateRule payload and enums (ParamType, ParamUnit, TemplateSource, FilterType, Severity), modeled from api/alerting/v1. - api/alert-templates.ts: list/create/update/delete templates and create-rule-from-template against /v1/alerting/*. - hooks/api/useAlertTemplates.ts: TanStack Query hooks with list-cache invalidation on mutations. - utils/alert-templates.utils.ts (+ tests): editability, duration and param-type helpers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCjDFAPWc5qPGonYSQ7bhY
Phases 2-6 of migrating the Alert Templates feature from the Grafana iframe into the native PMM UI. - Listing (pages/alerting/templates): percona-ui Table with source chip, created-at, and row actions; edit/delete gated to USER_API templates and PMM admins. - Create/Edit/Delete template modals: react-hook-form + zod, shared YAML editor field with .yaml file upload; YAML-only per the backend. - Create alert from template (pages/alerting/create-rule): sectioned react-hook-form page with template select, dynamic float/bool/string param inputs, severity/duration, folder (from useFolders) + group + interval, and a filters field array; builds the CreateRule payload. - Routing: alerting/alert-rule-templates and alerting/new-from-template wired into router.tsx; NAV_ALERTS_TEMPLATES repointed from the Grafana iframe to the native routes. - Tests: list rendering + editability gating, and payload/defaults units. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCjDFAPWc5qPGonYSQ7bhY
matejkubinec
requested review from
fabio-silva and
mattiasimonato
and removed request for
a team
July 11, 2026 22:52
matejkubinec
changed the title
matejkubinec
marked this pull request as draft
July 11, 2026 22:55
- Row actions moved into a vertical-dots (⋮) menu with Create alert rule / Edit / Delete items; edit & delete shown only for editable (USER_API) templates. - "Created at" column now includes the time (formatTimestampWithTime). - Create-alert-from-template: folder select gains a "+ Create new folder…" option that reveals a "New folder name" field; the folder is created on submit (via new useCreateFolder hook), then the rule. Group and evaluation interval continue to be created with the rule. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCjDFAPWc5qPGonYSQ7bhY
Built-in and SaaS templates carry no creation time; the backend serializes it as Go's zero time (0001-01-01...) rather than an empty string, so the created-at column rendered "January 1, 1 at 12:00 AM". Add formatCreatedAt() which treats empty, zero-time, and invalid values as an em dash. Verified against a live PMM server. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BCjDFAPWc5qPGonYSQ7bhY
matejkubinec
changed the title
Contributor
Author
|
Closing in favor of #5635 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket number: PMM-15212
Feature build: SUBMODULES-4467
Summary
Migrates the Alert Templates feature out of the Grafana iframe and into the native PMM UI (
ui/apps/pmm). All four flows are reimplemented as native React pages: listing, create, edit, and create alert rule from template (plus delete). TheAlert templatesnav item is repointed from/graph/alerting/alert-rule-templatesto the new native routes.Built with
@percona/percona-uicomponents first, MUI where percona-ui has no equivalent,react-hook-form+zodfor all forms, and TanStack Query for server state. Each component is split into.tsx/.types.ts/.schema.ts/.messages.ts/.constants.ts/.utils.tsrather than inlining logic.Changes
types/alert-templates.types.ts,api/alert-templates.ts,hooks/api/useAlertTemplates.ts,utils/alert-templates.utils.ts, modeled fromapi/alerting/v1. Calls/v1/alerting/templatesand/v1/alerting/rules.pages/alerting/templates) — percona-uiTablewith source chip, created-at (with time; templates without a creation time show an em dash) and a per-row ⋮ actions menu (Create alert rule / Edit / Delete). Edit/Delete are offered only forUSER_API-source templates and PMM admins.Dialog-based modals; a shared YAML editor field with.yamlfile upload. Create/Edit are YAML-only, matching the backend.pages/alerting/create-rule) — sectioned form: template select, dynamic float/bool/string param inputs (with min/max validation), severity/duration, folder (viauseFolders) with an inline "Create new folder…" option, evaluation group + interval, filters field array, and a read-only expression view. Builds theCreateRulepayload; a new folder (if requested) is created on submit, then the rule.alerting/alert-rule-templatesandalerting/new-from-templateadded torouter.tsx;NAV_ALERTS_TEMPLATESrepointed to the native routes.Screenshots
Alert templates — listing (real built-in templates; source chips; built-in templates show "—" for created-at)
Row actions ⋮ menu (built-in templates offer only "Create alert rule"; Edit/Delete appear for user-created templates)
Create alert rule from template (real "MongoDB Oplog Window" template: float param seeded with min/max, rule name / severity / duration prefilled, folder with "Create new folder…", evaluation group + interval, filters, and the real read-only PromQL)
Verification
Ran against
ui/apps/pmm: typecheck, lint and format:check pass; full test suite green (278+ passed, 0 failed). Additionally exercised end-to-end against a live PMM server (make env-updev container, admin/admin) — the listing renders the 42 real built-in templates and the create-rule form correctly seeds params/severity/duration and the read-only expression from a real template. This run surfaced and fixed a created-at bug (backend sends Go zero-time for built-in templates).Notes for reviewers
CreateTemplate/UpdateTemplateaccept a raw YAML string).custom_labelsis omitted from the create-rule form (as in the legacy UI), which also avoidsaxios-case-convertermangling user-defined label map keys.API documentation
This PR does not add, remove, or alter API endpoints (it consumes existing
/v1/alerting/*and Grafana folder endpoints).Related work
claude/alert-templates-pmm-migration-bw7vfmexist inpercona/grafanaandpercona/percona-uibut currently carry no changes.🤖 Generated with Claude Code
https://claude.ai/code/session_01BCjDFAPWc5qPGonYSQ7bhY