Microservice Versions Changelog Block for React

Edit SERVICES at the top of the file. A service is a name, a role, the version in each environment and its releases (every build, oldest first). The headline's count, the filter counts and the "2 behind" are all computed: a service is in sync when its three versions match, and "behind" is how many builds production trails the build in Dev. Add an environment by adding a column to VersionTable and Row.

Production is the heavier column for every row, and a service that trails gets a down arrow and a count ("2 behind") inside its Production cell. Nothing relies on red or amber, so the matrix reads the same in a greyscale or high-contrast theme.

It hides the services that match everywhere and says how many it hid. The block keeps its height: an unseen copy of the whole table sits in the same grid cell, so nothing below moves when you switch. Pressing the chosen item again does nothing, so the table is never empty, and a polite line says how many services are showing.

Yes: a native table with a caption, column headers with scope and each service name as its row header. Below sm the roles beside the names are dropped and the table scrolls sideways inside a section that has a name and a focus ring, so a keyboard user can scroll it; the first column is sticky, so you always know which service you are reading.

Yes. The table mirrors, the sticky column sticks to the start edge, and versions stay left-to-right in code elements with dir="ltr", so "v2.5.0" is never reordered. The counts are wrapped so "4 of 6" keeps its order.

The header and the table fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Switching the filter swaps the rows at once.