Rich webhook event subscription input - #3326
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
3e8fa0a to
8172938
Compare
| <a | ||
| href={links.webhooksGuide} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="mt-1 inline-block" | ||
| > | ||
| Read the Webhooks guide |
There was a problem hiding this comment.
does this link to the section on globing in the alerts guide?
| }, | ||
| { | ||
| "label": "New webhook receiver", | ||
| "path": "/system/alerts-new", |
There was a problem hiding this comment.
I don't think the name "alerts new" makes sense here. We aren't creating a new alert, we are creating a new webhook receiver, which is a kind of alert receiver.
| // TODO: this guide does not exist yet; make sure it does before release | ||
| webhooksGuide: 'https://docs.oxide.computer/guides/operator/webhooks', |
There was a problem hiding this comment.
I think this might be out of date: we could link to the top level alerts guide at https://docs.oxide.computer/guides/alerts/overview (which contains the explanation of alert classes and how glob patterns match them), and/or the webhooks guide at https://docs.oxide.computer/guides/alerts/webhooks (which discusses secrets and other details of how alerts are sent to webhooks receivers), as appropriate
|
|
||
| describe('subscriptionRegex', () => { | ||
| it('matches exact class names', () => { | ||
| expect(subscriptionRegex('probe').test('probe')).toBe(true) |
There was a problem hiding this comment.
'probe' is not a valid alert class to subscribe to, and the server will reject attempts to subscribe to the probe class with a 400 error. it's not treated as a "real" alert class. i think we shouldn't be testing with it if the API will reject it; we might want to explicitly include that rule in client side validation.
what does this, uh. mean? |
|
Backspace when the cursor is right next to a tag highlights the tag and then a second press deletes it. In this clip when the highlight ring is toggling on and off I'm pressing backspace, right, backspace, right. Then I press backspace twice to delete. Left/right also lets you move focus between the tags. 2026-08-14-webhook-arm.mp4 |
|
I kinda want |
Co-authored-by: Eliza Weisman <eliza@elizas.website>
4 participants
Rich event subscription input. Will require a bit of QA to check for robustness but the UX pattern feels satisfying. Good for both quickly adding classes and discoverability of the glob pattern matching.
Tag style input with chips for each of the subscription globs. Colour-coded to distinguish between exact and broad classes.
Dropdown opens on focus, showing the full catalog with name and description per row, subscribed classes sorted to the top (order is frozen while open so rows don't jump mid-picking). Rows are checkboxes: ticking commits an exact class without resetting the query, so multiple picks are cheap. Row states:
HARDWARE.*.FAULT)**widening that would cover itvia hardware.**label so it can't be double-added*.shows the whole catalog rather than no results.Enter commits the query or toggles the highlighted row. Up/Down navigate rows, skipping covered ones. Backspace on an empty query arms the last chip; a second press deletes it. Left/Right move the armed selection so any chip can be deleted, and typing disarms.
Adding or removing chips can wrap the input to a new line, which would shift the dropdown; a ResizeObserver scrolls the page by the height delta so the panel and the line you're typing on stay put.
Also included:
subscriptionRegexmoved from the mock handlers intoapp/api/util.ts(with tests) since the field now matches globs client side against a single catalog fetch.hardware.sled.*,hardware.disk.*,system.update.*, etc.) modeled on the existing PSU classes and RFD 538's FMA framing. Mock-only; Omicron still defines just three.guides/operator/webhooks) doesn't exist yet and needs to before release.