shadcn.io is not affiliated with official shadcn/ui
Event Log Dashboard Block for React
Thirty application events with a facet rail of severity, service and environment checkboxes whose counts follow the other filters, and rows that open into a JSON payload tree.
Installation
Overview
Narrow a day of events to the few you need, with this event explorer for React with Base UI. A hairline frame with a plus mark on each corner holds a facet rail at the start and the results beside it. The rail lists Severity, Service and Environment as checkboxes, and each count is what you would see if you added that option to the other two facets, so the numbers move as you tick. A facet with nothing ticked allows everything. The results are thirty Tideglass events in a fixed-height region, newest first, with the time, a severity glyph and word, the service and the message; opening a row shows its payload in a Json Tree View. "Clear filters" resets the rail, and a combination that matches nothing shows an Empty state. It's built from Json Tree View, Button, Empty and Guides. For application logs, error trackers and support consoles.
FAQ
How are the facet counts worked out?
For each option, the count is the number of events that pass the other two facets and carry that option. Ticking Error, for example, leaves the Severity counts alone but changes the Service and Environment counts to what the errors contain. severityCount, serviceCount and envCount in the file are three small functions over the same passes check, so the rail and the results can never disagree.
Where does the payload come from, and can I show a different one?
Each event in EVENTS carries a payload object, and the tree shows it with strings, numbers and booleans in the foreground colour. Replace the objects with what your logger writes. Only one row is open at a time, and opening another closes the first.
What stays local, and how do I wire it for real?
Everything: the events are typed for one afternoon, there is no tail and nothing streams. To wire it up, query your store with the ticked facets and return the counts along with the rows, or keep a page of events in memory as this demo does.
Can I use it without a pointer?
Yes. The facets are native checkboxes in labelled fieldsets, each event row is a button with aria-expanded, and the results region takes the keyboard. Severity is shown as a glyph and a word, with errors in bold, never as a colour alone. A polite status line says how many events are showing and which options are ticked.