Cluster Scaled Success Block for React

Nothing was scaled and nothing is billed. The node figures (4 vCPU, 16 GB, 1,200 requests a second and 160 dollars a month per node) are typed sample data, and the count only redraws the window. To wire it, set PER_NODE from your node pool, EXISTING from the size before the change and MIN and MAX from your limits; every figure and the sentence in the foot are worked out from them, and the cost uses whole cents.

It takes a whole number from 3 to 12 with plus and minus steppers. The canvas follows each valid number as it is typed, a number outside the range is cut to it when the field loses focus (40 becomes 12, 1 becomes 3), and an empty field goes back to the count shown.

It is a switch, off on load. Turned on, the slots beyond the count are drawn dashed and hatched as room to grow, and the sentence adds how many more nodes the cluster could take and the most that would cost a month; at 12 nodes it says there is no room left. Nothing is enabled: it only changes what the window shows.

Each slot has its number and, for assistive technology, what it is (existing node, added node, room for autoscale or free slot), the key under the canvas names the three looks, and the sentence in the foot, which is the window's one live region, says what the count gives each time it changes. The canvas always has twelve slots, so it never changes height.

It keeps its height (36rem on a phone, 46rem from the medium breakpoint) and scrolls inside itself. Below the large breakpoint the control bar moves above the canvas so the number field is on the first screen, and the three figures stay in a row under the canvas.

View metrics 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}.