oxidecomputer / oxidecomputer/console

Initial Webhook Management UI Designs

Open
#2,814 1 comment 0 reactions 4 assignees View on GitHub

@hawkw is already working on this.

Since May 1, 2025.

design fault-management
Dominant language
TypeScript
Stars
228
Forks
22
Avg merge
19h 42m
Merged PRs (30d)
32

Description

Based on the wonderful work by @hawkw here: https://github.com/oxidecomputer/omicron/pull/7277

--

Included is:

  • Top-level webhooks index page
  • Create new webhook receiver page
  • Webhook details page
  • Webhook delivery details pane

Note the deliver pane includes information that is currently not passed through the API, but I do think it would be useful for debugging. That is the event payload and headers. There's perhaps some discussion needed around the permissions model for that aka does the person viewing the webhook also have the requisite permission to view the contents of the event payload?

Included a developer tab; for both the webhook test probe event and information in the signature format. I think it's useful to bring especially relevant docs directly into the console like this, still linking out to the full guide.

I'm introducing a variant of the mini table here, it's going to be especially useful on the firewall rules pane, since it lets the user add items to the array without needing another dialog or the issue of the user not realising they need to save / add their input. I have some changes to the original mini table component also to unify the inline and external input variants. Will follow up with that separately.

The event subscriptions input on the create page lets the user use both checkboxes and inputs to add subscriptions. What this means is the event catalog is very discoverable, and quick to select, but also maintains the powerful event glob UX with a regular text input. Will include a GIF of this prototyped. The add event only takes a single string, so we can't reuse this in the modal. We might consider modifying the API to accept an array of event classes here also.

I wouldn't focus too heavily on the text right now, I haven't really dug into it and am focusing on the flow since I think @david-crespo wants to prod at some of the labels.

--

Comment here: https://app.workflow.design/w/doc/6a1ec7a1-cf86-4885-aaf0-3d039f67b79c

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.