mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 08:09:27 +00:00
Ashish Kolhe
44221da314
## What
Adds a contextual **help side panel** to the alert **Additional
Settings** tab. Each control (Template Override, Additional Variables,
Row Template) gets a **"Learn more"** link that opens a right-side
`ODrawer` explaining the control and showing a live, honest preview of
the notification message.
## Why
The old one-line tooltips didn't tell users what was actually changing —
e.g. Template Override just listed templates without showing the current
vs. selected message. This panel teaches first-time users *what* each
control does, *why* they'd use it, and shows *what gets sent*.
## Highlights
- **`useTemplatePreview` composable** — display-only `{variable}`
substitution: live form values shown as "your data", mock runtime values
marked as samples, and context-sensitive tokens (`{rows}`, `{rows:N}`,
`{var:N}`, `{...rows}`) rendered as opaque "filled at notification time"
chips — never faked against the real server renderer.
- **Template Override** — shows each destination's current message vs. a
non-destructive template preview (Apply required to commit).
- **Additional Variables** — plain-language explanation, a before/after
"why use a variable", a worked example with rendered result, and a
collapsible built-in-variable reference (not an 18-chip wall). Removed a
phantom variable (`{alert_agg_value}`) the UI advertised but the backend
never substitutes; added the real `{alert_description}`.
- **Row Template** — explains how `row_template` + `{rows}` compose,
with a worked example.
- **Reordered** the Advanced tab: Additional Settings → Compare with
Past → Deduplication.
- **Editor scroll fix** — Monaco editors now release the mouse wheel to
the page once their own content has nothing left to scroll (was trapping
page scroll on hover). App-wide default via an opt-out prop on the
shared `CodeQueryEditor`.
## Implementation notes
- Styling uses the `.css` design-token layer (`--color-*`,
`--radius-*`), theme-aware (light/dark); reuses
`OBadge`/`ODrawer`/`OSelect` rather than hand-rolling. No `px` (except
1/2px borders), no inline styles, no hardcoded colors.
- Every section has an empty state — no blank preview boxes.
- i18n `{...}` braces escaped for vue-i18n so literal placeholders
render.
## Tests
- Unit: `useTemplatePreview` (token classification, live/mock/opaque,
context vars, stream fields stay opaque).
- Component: `AlertSettingsHelpDrawer` (per-topic content, current vs.
preview, collapsible built-ins, empty states, i18n-literal & phantom-var
regression guards).
- Wiring: `Advanced.spec.ts` (Learn-more triggers); editor:
`CodeQueryEditor.spec.ts` (scroll prop).
- E2E (Playwright): `alerts-help-drawer.spec.js` smoke — open drawer,
no-mutation-until-Apply, overlay close, collapsible built-ins. (Not
executed in this environment — no backend/creds.)
228 unit/component tests pass locally.
## Notes for reviewer
- Draft: please review the description and the UX copy.
- The Monaco scroll default change touches the shared `CodeQueryEditor`
(used app-wide); behavior is opt-out via
`:release-wheel-to-page="false"` if any full-page editor should own the
wheel.