Instance Provisioned Success Block for React

Nothing was provisioned and no credential exists. The server, its hostname (under .example), its addresses (from the documentation blocks) and the four steps with their seconds are typed sample data. What the browser really does is real: the copy buttons write to the clipboard. To wire it, fill SPECS and HOST from the instance record, WAYS with the commands your service supports and STEPS from the provisioning events; the total, each bar's start and its length are worked out from the seconds.

The three tabs hold the same shape: two commands, each in a code box that scrolls sideways when it is long, with its own copy button, and a one-line hint. The arrow keys move between the tabs. Choosing a tab or copying a command updates the window's one live line at the foot (for example Copied the SSH command), and the window never changes height because every tab holds the same number of rows. A copy button writes exactly the text in its box and says what it copied.

There is none. The server signs people in with a key only, and the list says so, so no password or secret appears anywhere in the window. If your service hands one out, show it as a masked placeholder with a Reveal button that you control; this demo never shows one.

As four steps (queued, disk built, booted, joined the network) on a shared axis from 0 to the total. Each bar starts where the step before it ended and is as long as its own seconds, in percent of the total, and the seconds are also written beside each bar, so the drawing is never the only way to read it. The total in the heading is the sum of the four numbers.

It keeps its height (36rem on a phone, 46rem from the medium breakpoint) and scrolls inside itself. The list of facts comes first and the tabs under it; the Image and IPv6 rows fold away below the small breakpoint so the tabs come closer, the command boxes scroll sideways, and the top bar's action reads Console.

Open the console is the Shine Button in the top bar. It is a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.