shadcn.io is not affiliated with official shadcn/ui
Console Log Aggregator Monitoring Block for React Aria
A day of console logs in 48 half-hour stacked columns with a two-thumb brush, a table of the typed sample lines inside the range narrowed by level and search, and the lines around a chosen line.
Installation
Overview
Find what happened in a busy hour by brushing the volume that shows it, with this log aggregator for React with React Aria. It is Logloft, an application log aggregator, and the header sentence is worked out from its counts ("Errors peak at 14:00: 214 in 30 minutes"). In a hairline frame with a plus mark on each corner, 48 half-hour columns cover the last 24 hours to 15:30 UTC, stacked by level with errors heaviest, then warnings, then info. A two-thumb slider under them is the brush: the columns outside it fade, and a line reads the range with its totals ("From 13:00 to 15:30"). Below, the table lists the typed sample lines that fall inside the range, narrowed by Error, Warn and Info toggles and a search field that marks matches, with "Showing 40 of 1,812 lines in range" style counts. Choosing a line shows the line before it and after it in the foot band, in a syntax-highlighted block. Guides draw the frame and its bands; the entrance is CSS only.
FAQ
How do I load my own counts and lines?
Edit COUNTS, one errors|warnings|info entry per half hour, oldest first, and SAMPLE, whose entries are column|time|level|message. The column heights, the peak in the header, the totals in the range reading and the line counts all come from them. In your app, aggregate counts per bucket on the server and return a page of lines for the chosen range.
How does the brush work?
Two thumbs on one slider pick the first and last half hour. Each thumb is named ("From 13:00", "To 15:30") and moves one column with the arrow keys; the thumbs are laid out left to right in every language. The plot is hidden from assistive tech and the totals under it carry the same numbers.
Why does the table show fewer lines than the count?
The counts stand for every line the aggregator saw; the table lists a typed sample of them, up to 40 inside the range, so the total is the real count and the rows are examples. In production the table would page through the stored lines.