shadcn.io is not affiliated with official shadcn/ui
Consumer Lag Reset Monitoring Block for Svelte
A consumer-lag panel with five partition bars and catch-up estimates, and the alert dialog that resets the group's offsets, shown open: earliest, latest or a time, the effect in words, a stopped-group switch and the group name typed.
Installation
Overview
Make rewinding a consumer group slow enough to be safe, with this offsets reset for Svelte with Ark UI. It opens from the Orders processor panel of Offsetmark, a stream lag monitor reading a Kafka topic: the header holds an outline Reset offsets Button and a sentence worked out from the lag ("Group orders-processor-v2 is 8,370 messages behind; partition 2 holds half"). The panel's body is drawn under a soft scrim inside a hairline frame with a plus mark on each corner: five partition lag bars with a sparkline each and three rebalance rows, with the same figures in a table for screen readers. The Alert Dialog asks for a target (earliest, latest, or a time chosen in a Native Select), says what it will do ("Replays 14,820 messages on 5 partitions, about 6 minutes at today's rate" or "Skips 8,370 unprocessed messages"), asks for a Switch that says the group is stopped, and for the group's name typed exactly. Reset offsets is the catalog Button in its destructive variant, with no Shine Button in the block, and Cancel has focus when it opens. Confirming spreads the new lag across the partitions. For preview the dialog is drawn open in place when the page loads; the header button opens the real Alert Dialog with the same fields. For stream tooling, runbooks and anything that can lose or repeat work.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the panel: a native dialog element with the alertdialog role that is not modal, so nothing is trapped, hidden or focused. The Reset offsets button opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Cancel, and the copy stays closed until a reload. Both show the same ResetFields component and share the block's state. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
What does Reset offsets do here, and how do I wire it up?
Here it only changes the five typed lag figures: the new total (the whole topic for earliest, zero for latest, a typed count for a time) is spread over the partitions in today's proportions, the bars and the header sentence follow, and a polite message says no broker was contacted. In your app stop the group, call your Kafka admin client's offset reset for the chosen target, and show the dialog busy until it answers.
What stops a careless reset?
The action stays quiet until the switch says the group is stopped and the group name is typed exactly. Pressed early, it names what is missing and moves focus there. The dialog cannot be closed by clicking outside, and Cancel has focus first, so a stray Enter backs out.
Where does focus go, and how does it close?
The real dialog is named by its title and described by its sentence, opens on Cancel and returns focus to the Reset offsets button when it closes. Cancel is the focus target through initialFocusEl. The copy shown on load moves no focus; Escape inside it and Cancel close it the same way.