fix(instances): the new-VM dialog shows each host's current CPU load

The CPU bar showed the average since the host booted, read for every
compute on every load of the VM list. The dialog now reads each compute's
graph endpoint (load over one second) when it opens, two computes at a
time so the reads hold at most two workers, and ignores answers of an
earlier opening. A host that cannot be read shows a dash. The since-boot
reading had no other caller and is removed.

instances/templates/allinstances.html

@@ -47,6 +47,49 @@
                 //let compute = $("#compute_select").val();
                 window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute);
             }
+
+            // The new-VM dialog's CPU bars: each compute's load over one second,
+            // read when the dialog opens, two computes at a time (each read holds
+            // a worker for that second). Answers of an earlier opening are ignored.
+            const addInstance = document.getElementById("AddInstance");
+            let cpuOpening = 0, cpuQueue = [], cpuReading = 0;
+
+            function setCpuUsage(cell, percent, text) {
+                const bar = cell.querySelector(".progress-bar");
+                bar.style.width = (percent || 0) + "%";
+                if (percent === null) {
+                    bar.removeAttribute("aria-valuenow");
+                } else {
+                    bar.setAttribute("aria-valuenow", percent);
+                }
+                cell.querySelector(".cpu-usage-value").textContent = text;
+            }
+
+            function readCpuUsage() {
+                while (cpuReading < 2 && cpuQueue.length) {
+                    const cell = cpuQueue.shift(), opening = cpuOpening;
+                    const show = (percent, text) => { if (opening === cpuOpening) setCpuUsage(cell, percent, text); };
+                    cpuReading++;
+                    $.getJSON(cell.dataset.url)
+                        .done((data) => {
+                            const usage = typeof data.cpudata === "number" ? Math.round(data.cpudata) : null;
+                            show(usage, usage === null ? "—" : usage + "%");
+                        })
+                        .fail(() => show(null, "—"))
+                        .always(() => { cpuReading--; readCpuUsage(); });
+                }
+            }
+
+            addInstance.addEventListener("show.bs.modal", function () {
+                cpuOpening++;
+                cpuQueue = Array.from(addInstance.querySelectorAll(".cpu-usage"));
+                cpuQueue.forEach((cell) => setCpuUsage(cell, null, "…"));
+                readCpuUsage();
+            });
+            addInstance.addEventListener("hide.bs.modal", function () {
+                cpuOpening++;
+                cpuQueue = [];
+            });
         </script>
     {% endif %}
 {% endblock script %}