Data Migration Changelog Block for React

Edit JOBS at the top of the file. A job has an id, a name, the records it has to move, how many it has moved, how long it ran (duration), a phase (DONE, RUNNING or FAILED) and, for a failed one, an error. The percentages, the bars and the headline total ("2.4M records moved so far") are all computed from those numbers.

Each status is an icon and a word: a check and "Done", a spinner mark and "Running", a cross and "Failed" (the one status token in the block, with its word beside it), a clock and "Queued". The bar carries the percentage in numbers beside it, and its accessible name says the job and the percentage.

It changes the failed row to "Queued" and swaps its error for "Retry queued in this demo. Nothing is sent.", and a polite status line says the same. It does not call anything: wire the button to your own request. The row keeps its height, because both texts sit in the same cell and only one is shown.

It is a native table with a caption, column headers and the job name as the row header. When the table is wider than its frame the frame is a focusable, labelled region you can scroll with the arrow keys.

The records move under each job's name, the duration column drops and the names break after an underscore instead of in the middle of a word. The status, bar and percentage stay in their column.

The header and the table fade up once on load, with CSS transitions, and the progress bars use the catalog's own. With reduced motion the transitions are off and the block simply appears.