[FEATURE] add alert manager plugin

[jgbernalp]

Description

This PR adds the alert manager plugin:

• Alerts table with hierarchical grouping
• Silence table with action to expire silences
• Alerts explore with action to silence alerts (create silence)
• Silence explore with option to create silences

Part 3 of perses/perses#3645

needs the following PRs: ( CI will fail until these are merged and dependencies are updated )

• [FEATURE] add alerts and silences data type definitions for alert manager plugin spec#21
• [FEATURE] add alert manager query types shared#127
• [FEATURE] add alert and silence query kinds perses#4047 (chicken and egg problem, maybe the query kinds should be part of the spec) cc @Nexucis WDYT?

Screenshots

Screen.Recording.2026-05-04.at.11.26.59.mov

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.

Testing locally

• Pull all the repo PRs locally

# link spec with shared plugin-system
cd <path to perses spec in #21>/ts
npm install
npm run build
cd <path to perses shared in #127>/plugin-system
npm install <relative path to perses spec in #21 e.g. "../../spec/ts">

# link shared with perses
cd <path to perses shared in #127>
npm install
npm run build
./scripts/link-with-perses/link-with-perses.sh --perses

# start perses backend
cd <path to perses in #4047>
make build-cli
./scripts/api_backend_dev.sh --e2e

# in a 2nd terminal, start the app in shared mode
cd <path to perses in #4047>/ui/app
npm run start:shared

# in a 3rd terminal, start the plugin
cd <path to perses plugins in #647>
<path to perses in #4047>/bin/percli plugin start alertmanager

# in a 4th terminal, start the test alert manager and prometheus
cd <path to perses in #4047>
podman compose --file dev/docker-compose.yaml --profile prometheus --profile avalanche --profile alertmanager up

And that is all 😅 , we need to script this away... I'll extend the link script

[ibakshay]

I am testing locally. When I try write something in the label key and in Header, the focus keeps going out after every letter. So, I have to type a letter and then bring the focus back by clicking with the mouse.

[ibakshay]

How does View run book work?

[jgbernalp]

How does View run book work?

If the alert has runbook_url as part of its annotations, clicking the "view runbook" will load the runbook link in a new tab

[jgbernalp]

I am testing locally. When I try write something in the label key and in Header, the focus keeps going out after every letter. So, I have to type a letter and then bring the focus back by clicking with the mouse.

@ibakshay fixed in the latest push

[ibakshay]

How does View run book work?

If the alert has runbook_url as part of its annotations, clicking the "view runbook" will load the runbook link in a new tab

cool. can we make the runbook_url configurable? by default it can be runbook_url.

[jgbernalp]

How does View run book work?

If the alert has runbook_url as part of its annotations, clicking the "view runbook" will load the runbook link in a new tab

cool. can we make the runbook_url configurable? by default it can be runbook_url.

done

[Nexucis]

(chicken and egg problem, maybe the query kinds should be part of the spec) cc @Nexucis WDYT?

yes this should be moved to the spec so it is aligned with the rest of the implementation. I will work on that asap

[Nexucis]

mmm I will be cautious to allow the possibility to create silence through Perses without having any control on who does it

[jgbernalp]

mmm I will be cautious to allow the possibility to create silence through Perses without having any control on who does it

I think backends should also check if the current user has access to do the action that is being executed. In any case, if this should not be allowed from Perses the alert manager datasource follows the prometheus datasource pattern to allow specific endpoints/verbs.

[jgbernalp]

@Nexucis thnx for adding the query types to the spec, but I think this requires a percli release.

[Nexucis]

@Nexucis thnx for adding the query types to the spec, but I think this requires a percli release.

ah yeah :(. Well we need to do that for the annotations as well.

So let's create another beta in Perses to unlock the situation

[Nexucis]

@jgbernalp can you rebase your PR. CLI has been updated, your PR should work now.

[ibakshay]

@jgbernalp,
I tested again and I found a few UI stuff.

1. Sorting does not seem to work.

2. Same issue for Labels as mentioned in [FEATURE] add alert manager plugin #647 (comment)

3. runbook does not seem to work. Maybe I am missing something. What is the expected behaviour?

The performance is a bit slow. But, we can tackle this in the follow-up PRs. Not a show stopper.

[jgbernalp]

@ibakshay I fixed the issue related to the single character input, it was present on all the lists editors, this also caused a slow rendering as the issue was with react keys.

The sorting works but it was not added to the default columns. Is added now.

The runbook_url works but needs that your alerting rules have the annotation, if you start the dev docker/podman compose with the --profile alertmanager you will see one of the alerts has the link:

Alerting rule:

List with runbook_url:

[zhuje]

I did some testing, and everything looks good to me! I noticed a couple of small UX nits that might be worth considering in a future PR, but I don't think they need to block this one.

• Alerts Table & Silences Table: When a search returns no results, the search bar disappears, so there's no way to clear the search without refreshing the page. This happens in both the Alerts Table and Silences Table.
• Silences Explorer: The Create Silence form lets you add a Comment, but that comment is never displayed in the Silences Explorer.

Here's the verification checklist:

## 1. Alerts Table

### 1.1 Data Loading
- [x] Alerts table loads and displays alerts from the AlertManager datasource
- [x] Alert count and group count shown correctly (e.g. "5 alerts in 4 groups")

### 1.2 Hierarchical Grouping
- [x] Alerts are grouped by `alertname` by default
- [x] Groups are collapsible — click to expand/collapse a group row
- [x] Expanding a group shows individual alerts with their details
- [x] Change "Group by" dropdown to `severity`, `job`, `instance` — verify regrouping works

### 1.3 Columns & Sorting
- [x] Columns render: Status, Alert Name, Severity, Environment, Labels
- [x] Click "Severity" column header — alerts sort ascending/descending by severity
- [x] Click "Alert Name" column header — alphabetical sort works
- [-] Status badges display correct colors (firing = red, pending = orange, etc.)
Notes: (I only saw firing=red, I didn't have any other types of alerts to verify the other status badges)

### 1.4 Labels
- [x] Labels column shows label chips/badges for each alert
- [x] Label color mappings work (severity and environment should auto-color)

### 1.5 Search / Filter
- [x] Search box filters alerts by text
- [x] Type a partial alert name — only matching groups/alerts appear
- [x] Clear search — all alerts return

### 1.6 Actions
- [x] "Silence" action is available on individual alerts
- [x] Clicking silence opens a silence creation form
- [x] Silence form pre-fills matchers from the alert's labels
- [x] Submitting the silence form creates a silence in AlertManager
- [x] "Runbook" action appears if alert has a `runbook_url` annotation

---

## 2. Silence Table

### 2.1 Data Loading
- [x] Silence table loads and displays silences from AlertManager
- [x] Columns render: Status, Matchers, Comment

### 2.2 Sorting
- [x] Click "Status" column header — sorts by status (active/expired/pending)

### 2.3 Search / Filter
- [x] Search box filters silences by text (matcher values, comments)
Nit -- UX issue when your search results in nothing, the search bar disappears and you can't undo without refreshing the whole page (happens in both  Silences Table search bar and Alerts Table search bar)

### 2.4 Expire Action
- [x] "Expire" action button appears on active silences
- [x] Clicking expire sends a request to AlertManager to expire the silence
- [x] After expiring, the silence status updates 
- [x] Expired silences disables expire action

---

## 3. Variables

### 3.1 Variable Dropdowns
- [x] "Job name", "Environment", and "Group By" dropdowns render in the top bar
- [x] Selecting different values updates the variable state
- [x] Multi-select works for Job name and Environment (chips shown)
- [x] "All" option appears for Job name and Environment

---

## 4. Explore Views

### 4.1 Alerts Explorer
- [x] Navigate to Explore > select AlertManager Alerts Explorer
- [x] Alerts explorer loads and displays alerts
- [x] "Silence" action available from explorer — opens silence creation form

### 4.2 Silences Explorer
- [x] Navigate to Explore > select AlertManager Silences Explorer
- [x] Silences explorer loads and displays silences
- [x] "Create Silence" option is available
- [-] Creating a new silence from explorer works end-to-end
Nit: In the 'Create Silence' form you can create a 'comment' but it is never displayed in the Silences Explorer 

---

## 5. Dashboard Edit Mode

### 5.1 Panel Editor
- [x] Click "Edit" on dashboard, then edit the Alerts panel
- [x] Panel options editor loads (group by, columns, deduplication, label colors)
- [x] Changing options and saving updates the panel correctly

### 5.2 Query Editor
- [x] Alerts query editor shows datasource selector and filter options (active, silenced, inhibited, receiver)
- [x] Silences query editor shows datasource selector and filter options
- [x] Changing query options refreshes data correctly

### 5.3 Datasource Editor
- [x] Can create/edit an AlertManager datasource
- [x] Datasource editor shows `directUrl` and proxy config fields