shadcn.io is not affiliated with official shadcn/ui
Snowflake Query Cost Monitoring Block for React
Three warehouses as 24-hour state timelines (running with queries, running idle, suspended) with credits and idle share per lane, a readable segment and the four costliest queries of the chosen warehouse.
Installation
Overview
See how much of a warehouse's bill is spent doing nothing, with this idle-burn panel for React with Base UI. It is Creditfern, a warehouse cost monitor (made up) for a Snowflake-style data warehouse, reading one day in UTC. A hairline frame with a plus mark on each corner holds three lanes, one per warehouse, drawn as a timeline where width is time: solid while running queries, hatched while running idle, empty while suspended. Each lane ends with its credits and the share spent idle, worked out from its segments and its credits an hour. The segments are one radio group, so arrow keys step through them; choosing one reads it ("ADHOC_S running idle 09:15 to 10:15: 60 minutes, 2.0 credits; auto-suspend is 60 minutes") and the table under the lanes lists that warehouse's four costliest queries. The header names the warehouse with the largest idle share. Guides draw the frame; the entrance is CSS only. For data platform and finance-minded engineering teams.
FAQ
How do I use my own warehouses?
Edit LANES at the top of the file: each warehouse has a name, a size label, credits an hour (rate), its auto-suspend in minutes, its day as phase:minutes pairs that add up to 1,440 (run, idle or off) and its costliest queries as id|what|seconds. Credits, idle shares, segment positions and the header are derived. On a real account the day comes from the warehouse event and metering history.
How are credits worked out?
Minutes running, with queries or idle, times the warehouse's credits an hour divided by 60. A query's credits are its run time at the same rate, which is an approximation when queries share a warehouse. The rates are the demo's own numbers and say nothing about any real price list.
Why can I not press the thin segments easily?
A ten-minute stretch is under 1% of the day, so it is a few pixels wide. Every segment is also a radio in one group: tab into the lanes and use the arrow keys to step from stretch to stretch, and the reading below tells you which one you are on.
What is real here and what stays local?
All of it is typed and the product is made up; nothing connects to a warehouse, and changing an auto-suspend setting is not offered. The reading and the table are the only things that change when you choose a segment.