feat: Add silence annotation to web UI

[TheMeier]

Pull Request Checklist

Please check all the applicable boxes.

• Please list all open issue(s) discussed with maintainers related to this change
  • Fixes #
• Is this a new Receiver integration?
  • I have already tried to use the Webhook Receiver Integration and 3rd party integrations before adding this new Receiver Integration
• Is this a bugfix?
  • I have added tests that can reproduce the bug which pass with this bugfix applied
• Is this a new feature?
  • I have added tests that test the new feature's functionality
• Does this change affect performance?
  • I have provided benchmarks comparison that shows performance is improved or is not degraded
    • You can use benchstat to compare benchmarks
  • I have added new benchmarks if required or requested by maintainers
• Is this a breaking change?
  • My changes do not break the existing cluster messages
  • My changes do not break the existing api
• I have added/updated the required documentation
• I have signed-off my commits
• I will follow best practices for contributing to this project

Which user-facing changes does this PR introduce?

[FEATURE] UI: Add support for silence annotations

Summary by CodeRabbit

• New Features

  • Add/manage key=value annotations when creating or editing silences (add, delete, edit via input with Enter support).
  • Annotations shown on silence list and detail views.
  • Inline validation prevents malformed entries and duplicate keys, with real-time enable/disable of the add action.

• Tests

  • Added tests covering valid and invalid annotation parsing scenarios.

[Copilot]

Pull request overview

This PR adds support for displaying and managing silence annotations in the Alertmanager web UI. Annotations are optional key-value pairs that can be attached to silences for additional context. The implementation adds annotation input fields to the silence creation/edit form and displays annotations in both the silence detail view and silence list view.

Changes:

• Added annotation input field with validation in the silence form
• Added annotation display in silence detail and list views
• Implemented parsing and validation logic for annotation key-value pairs

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
ui/app/src/Views/SilenceView/Views.elm	Displays annotations in the silence detail view with inline matchers styling
ui/app/src/Views/SilenceList/SilenceView.elm	Displays annotations in the silence list view and adds "Matchers:" label for consistency
ui/app/src/Views/SilenceForm/Views.elm	Adds annotation input UI with add/delete buttons and validation feedback
ui/app/src/Views/SilenceForm/Updates.elm	Implements annotation add/delete/update logic and form validation
ui/app/src/Views/SilenceForm/Types.elm	Adds annotation data structures, parsing, and validation functions

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Spaceman1701]

Not really a code review of the Elm, but I ran this patch locally and the UI seemed good to me.

It might be nice if the annotations box didn't let you add duplicate annotations, but otherwise it seems fine.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

📝 Walkthrough

Walkthrough

Annotation support added across the silence form and views: parsing, validation, UI input, update handling, storage in PostableSilence, rendering in lists/details, and unit tests for parsing.

Changes

Cohort / File(s)	Summary
Annotation Display Utilities ui/app/src/Utils/Views.elm	labelButton now wraps the Nothing branch label in span [ class "text-muted" ]; new annotationButton : ( String, String ) -> Html msg exported and implemented.
Annotation Data Model & Validation ui/app/src/Views/SilenceForm/Types.elm	Added annotations : List ( String, String ), annotationText : String to SilenceForm, annotationsValid : ValidationState to Model; added parseAnnotation, hasAnnotationKey, validateAnnotations; updated constructors and toSilence to initialize/propagate annotations and include them in PostableSilence when non-empty.
Annotation Update Logic ui/app/src/Views/SilenceForm/Updates.elm	updateForm handles UpdateAnnotationText, AddAnnotation, DeleteAnnotation; AddAnnotation parses and prevents duplicate keys; DeleteAnnotation can repopulate annotationText; annotationsValid recomputed on init and on field updates.
Annotation Input UI ui/app/src/Views/SilenceForm/Views.elm	Added annotationsInput with parsing/duplicate validation, enter-key add behavior, and viewAnnotation to render per-annotation buttons; view now includes annotationsValid in model destructuring.
Annotation Display in Lists & Details ui/app/src/Views/SilenceList/SilenceView.elm, ui/app/src/Views/SilenceView/Views.elm	Conditional rendering of silence.annotations using annotationButton; added Annotations: label and adjusted matchers rendering to include explicit labeling; imports updated for Dict and annotation helpers.
Annotation Parsing Tests ui/app/tests/SilenceForm.elm	New test module exercising Views.SilenceForm.Types.parseAnnotation for valid cases (trimming, multi-=, URLs) and invalid cases (missing/empty key/value, whitespace-only, empty input).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 Annotations now bloom in the silence so fine,
With keys paired to values in key=value line,
The form validates dupes and trimmed edges with care,
Each button displays them with elegant flair!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description is largely a template with only the checklist and release notes partially completed; issue references and documentation status are unclear.	Provide explicit linked issue number(s), confirm whether documentation was added/updated, and clarify which checklist items apply to this feature.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title 'feat: Add silence annotation to web UI' is clear, concise, and directly summarizes the main change in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

ui/app/src/Views/SilenceForm/Views.elm (1)

248-254: Avoid boolean blindness in DeleteAnnotation calls.

Using True/False here obscures intent and makes future maintenance error-prone. Consider replacing the Bool parameter with an explicit union type (e.g., DeleteOnly | DeleteAndRestoreToInput) in Views.SilenceForm.Types.SilenceFormFieldMsg.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/app/src/Views/SilenceForm/Views.elm` around lines 248 - 254, The calls to
DeleteAnnotation with plain True/False are boolean-blind; update the
SilenceFormFieldMsg variant DeleteAnnotation to accept a descriptive union
(e.g., DeleteOnly | DeleteAndRestoreToInput) in
Views.SilenceForm.Types.SilenceFormFieldMsg, then replace usages in Views.elm
(the DeleteAnnotation ... |> UpdateField sites) to pass the explicit union
constructors instead of True/False and update pattern-matches/handlers that
consume DeleteAnnotation to handle the new constructors accordingly so intent is
clear everywhere DeleteAnnotation is used.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@ui/app/src/Views/SilenceForm/Views.elm`:
- Around line 223-227: The '+' and '×' symbol-only buttons lack accessible
labels; add an aria-label attribute to each button so screen readers get
descriptive text. For the '+' button that dispatches AddAnnotation |>
UpdateField, add Html.Attributes.attribute "aria-label" "Add annotation"
alongside the existing class, onClick and disabled attributes; similarly for the
'×' button add Html.Attributes.attribute "aria-label" "Remove annotation" (or
equivalent descriptive text) next to its class/onClick/disabled attributes so
both buttons are announced properly to assistive technologies.

---

Nitpick comments:
In `@ui/app/src/Views/SilenceForm/Views.elm`:
- Around line 248-254: The calls to DeleteAnnotation with plain True/False are
boolean-blind; update the SilenceFormFieldMsg variant DeleteAnnotation to accept
a descriptive union (e.g., DeleteOnly | DeleteAndRestoreToInput) in
Views.SilenceForm.Types.SilenceFormFieldMsg, then replace usages in Views.elm
(the DeleteAnnotation ... |> UpdateField sites) to pass the explicit union
constructors instead of True/False and update pattern-matches/handlers that
consume DeleteAnnotation to handle the new constructors accordingly so intent is
clear everywhere DeleteAnnotation is used.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 90d0c277-bc8b-40d6-b9c0-5ca8565ebbcb

📥 Commits

Reviewing files that changed from the base of the PR and between 9b0bc09 and 137e89a.

📒 Files selected for processing (7)

• ui/app/src/Utils/Views.elm
• ui/app/src/Views/SilenceForm/Types.elm
• ui/app/src/Views/SilenceForm/Updates.elm
• ui/app/src/Views/SilenceForm/Views.elm
• ui/app/src/Views/SilenceList/SilenceView.elm
• ui/app/src/Views/SilenceView/Views.elm
• ui/app/tests/SilenceForm.elm

✅ Files skipped from review due to trivial changes (1)

• ui/app/src/Views/SilenceView/Views.elm

🚧 Files skipped from review as they are similar to previous changes (4)

• ui/app/src/Views/SilenceList/SilenceView.elm
• ui/app/tests/SilenceForm.elm
• ui/app/src/Views/SilenceForm/Updates.elm
• ui/app/src/Views/SilenceForm/Types.elm

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Add accessible labels to symbol-only action buttons.

Line 227 (+) and Line 255 (×) are not descriptive for screen readers. Please add aria-label metadata.

♿ Suggested patch

                             , div [ class "input-group-append" ]
                                 [ button
                                     [ class "btn btn-primary"
+                                    , Html.Attributes.attribute "aria-label" "Add annotation"
                                     , onClick (AddAnnotation |> UpdateField)
                                     , Html.Attributes.disabled (not addButtonEnabled)
                                     ]
                                     [ text "+" ]
                                 ]
@@
             , button
                 [ class "btn btn-outline-danger"
+                , Html.Attributes.attribute "aria-label" "Remove annotation"
                 , onClick (DeleteAnnotation False annotation |> UpdateField)
                 ]
                 [ text "×" ]

Also applies to: 252-255

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/app/src/Views/SilenceForm/Views.elm` around lines 223 - 227, The '+' and
'×' symbol-only buttons lack accessible labels; add an aria-label attribute to
each button so screen readers get descriptive text. For the '+' button that
dispatches AddAnnotation |> UpdateField, add Html.Attributes.attribute
"aria-label" "Add annotation" alongside the existing class, onClick and disabled
attributes; similarly for the '×' button add Html.Attributes.attribute
"aria-label" "Remove annotation" (or equivalent descriptive text) next to its
class/onClick/disabled attributes so both buttons are announced properly to
assistive technologies.