Datadog Monitors List Integration Block for React

No. Nothing connects, reads or changes anything: the nine monitors are a typed list at the top of the file, MONITORS, and the filters and the Retry work on that list in the browser. The line above the rows says so from the start, and after a retry it says "Retry queued in this demo, nothing was sent." To use it for real, fill MONITORS from the monitors your server read through Datadog's API with a key that has the monitors_read scope.

Inside one facet any ticked option matches (prod or staging); across facets all of them must (prod and Payments and Alert). The count beside an option is what you would see if you ticked it with the other facets' choices kept, worked out by countOf from the same rows, so it never disagrees with the list. Add a facet by adding an entry to FACETS and the value to each monitor. "Clear filters" resets all three.

No. Every monitor is drawn once more, unseen, in the same grid cell as the visible list, so the cell keeps the height of the full nine whatever is hidden. The count line and the rail don't move either. A filter that matches nothing shows "No monitor matches those filters" in the same space.

One monitor has readable: false, standing for a read that Datadog refused. Its Retry turns to "Reading again" for about 900 milliseconds, with a timer that is cleared if the block unmounts, then the row reads "Read again in this demo". It is a stand-in: connect it to your own read. The button stays focusable while it works (it is aria-disabled, not removed), and the result is announced through the polite line above the rows.

A monitor's state must survive a colour-blind reader and a monochrome print, so each is an outline badge with an icon and the word (OK, Warn, Alert, No data), the same four Datadog uses. The only colour is a small dot on the one row that could not be read, because that is the single exception on the page.

Below lg the divider gives way to a rule, and the rail folds into a "Filters" button that shows how many are ticked and opens the same checkboxes above the rows; the rows stack their state under the name. Queries and the counts keep their left-to-right order in a right-to-left layout, while the columns flip. The header fades up once on load; with reduced motion it simply appears.