fix #2095 by changing skeleton to a message with retry button

official-stockfish · Jul 4, 2024 · 0c85a8d · 0c85a8d
1 parent 084d1b7
commit 0c85a8d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/server/fishtest/static/js/application.js b/server/fishtest/static/js/application.js
@@ -454,3 +454,34 @@ function filterTable(inputValue, tableId, originalRows, predicate) {
   })();
   */
 }
+
+function createRetryMessage(parentElement, callback) {
+  const mainDiv = document.createElement("div");
+  mainDiv.className = "retry";
+
+  const innerDiv = document.createElement("div");
+  innerDiv.className = "col-12 col-md-8 col-lg-3";
+
+  const alertDiv = document.createElement("div");
+  alertDiv.className =
+    "alert alert-danger d-flex justify-content-between align-items-center";
+  alertDiv.id = "error-message";
+
+  const span = document.createElement("span");
+  span.textContent = "Something went wrong. Please try again.";
+
+  const button = document.createElement("button");
+  button.className = "btn btn-primary";
+  button.textContent = "Retry";
+
+  alertDiv.appendChild(span);
+  alertDiv.appendChild(button);
+
+  innerDiv.appendChild(alertDiv);
+  mainDiv.appendChild(innerDiv);
+
+  parentElement.appendChild(mainDiv);
+
+  // Add event listener after appending
+  button.addEventListener("click", callback);
+}
diff --git a/server/fishtest/templates/tests.mak b/server/fishtest/templates/tests.mak
@@ -49,8 +49,14 @@
 
   <script>
     let fetchedMachinesBefore = false;
+    let machinesSkeleton = null;
+    let machinesBody = null;
     async function handleRenderMachines(){
         await DOMContentLoaded();
+        machinesBody = document.getElementById("machines");
+        if (!machinesSkeleton) {
+          machinesSkeleton = document.querySelector("#machines .ssc-wrapper").cloneNode(true);
+        }
         const machinesButton = document.getElementById("machines-button");
         machinesButton?.addEventListener("click", async () => {
           await toggleMachines();
@@ -61,18 +67,21 @@
 
     async function renderMachines() {
       await DOMContentLoaded();
-      if (fetchedMachinesBefore)
+      if (fetchedMachinesBefore) {
         return Promise.resolve();
-      const machinesBody = document.getElementById("machines");
+      }
       try {
+        if (document.querySelector("#machines .retry")) {
+          machinesBody.replaceChildren(machinesSkeleton);
+        }
         const html = await fetchText("/tests/machines");
-        machines.replaceChildren();
-        machines.insertAdjacentHTML("beforeend", html);
+        machinesBody.replaceChildren();
+        machinesBody.insertAdjacentHTML("beforeend", html);
         const machinesTbody = document.querySelector("#machines tbody");
         let newMachinesCount = machinesTbody?.childElementCount;
 
         if (newMachinesCount === 1) {
-          const noMachines = machinesTbody.getElementById("no-machines");
+          const noMachines = document.getElementById("no-machines");
           if (noMachines) newMachinesCount = 0;
         }
 
@@ -81,6 +90,8 @@
         fetchedMachinesBefore = true;
       } catch (error) {
         console.log("Request failed: " + error);
+        machinesBody.replaceChildren();
+        createRetryMessage(machinesBody, renderMachines);
       }
     }