Datadog Grid Integration Block for React

Edit SOURCES (an id, a name and a one-line description) and LIMIT at the top of the file. START is what is chosen on load. The counter, the unavailable state and the status line are all worked out from LIMIT and the chosen list. A new source needs a drawing: add one to Drawing, which draws a source by its id.

When four sources are chosen, the unchosen tiles' checkboxes become disabled and their description reads "A review holds 4. Untick one first." in place of the usual line, at the same height so nothing shifts. A chosen tile stays enabled, so unticking one immediately frees the rest. A hidden status region announces "4 of 4 sources chosen. Untick one to choose another."

No. Choosing changes this page's own state and nothing else: nothing is read from Datadog and nothing is saved or sent, and the closing band says so from the first paint in a polite status region. Wire toggle to your own review settings.

Each tile is one label around a real checkbox, so a click anywhere on the card toggles it and Space toggles it from the keyboard. The checkbox is named by the source ("Trace waterfall"). The drawings are decorative and hidden from assistive technology, since the name and the one-line description say what each source is. Chosen tiles take a solid tint and a ticked box rather than the primary colour.

On a phone the tiles run two across, the drawings are about forty per cent shorter and show fewer rows. The drawings always run left to right, because a timeline or a waterfall is not mirrored, while the header and text follow the page direction. The header fades up once on load; reduced motion turns that off.