add loading status while refreshing module (#305)

utilitywarehouse · Dec 23, 2024 · 59933b7 · 59933b7
1 parent 146dfc3
commit 59933b7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/webserver/static/js/main.js b/webserver/static/js/main.js
@@ -54,8 +54,6 @@ function forceRun(namespace, module, planOnly) {
   // Disable the buttons and close existing alert
   setForcedButtonDisabled(true)
 
-  closeOpenAlert()
-
   url = window.location.origin + "/api/v1/forceRun"
 
   fetch(url, {
@@ -107,7 +105,17 @@ function reLoadModule(namespace, module) {
 
 // Send an XHR request to the server to get module info including run outputs
 function loadModule(namespace, module) {
-  closeOpenAlert()
+  const moduleElm = document.getElementById("module-info")
+
+  moduleElm.innerHTML = `
+  <div class="card">
+    <div class="card-body">
+      <div class="d-flex align-items-center justify-content-center" style="color: #550091;">
+        <div class="spinner-border mx-4" role="status" aria-hidden="true"></div>
+        <strong>Loading...</strong>
+      </div>
+    </div>
+  </div>`
 
   url = window.location.origin + "/module"
 
@@ -128,7 +136,6 @@ function loadModule(namespace, module) {
     })
     .then((html) => {
       // update module template 
-      const moduleElm = document.getElementById("module-info")
       moduleElm.innerHTML = html;
 
       // get current state value to update state in modules list as well
@@ -147,10 +154,12 @@ function loadModule(namespace, module) {
       }
     })
     .catch((err) => {
-      showForceAlert(
-        false,
-        err + "<br/>Check terraform-applier logs for more info."
-      )
+      moduleElm.innerHTML = `
+      <div class="card">
+        <div class="card-body text-danger">`
+        + err + `<br/>Check terraform-applier logs for more info.
+        </div>
+      </div>`
     })
 }
 
@@ -166,6 +175,8 @@ function showForceAlert(success, message) {
   ].join("")
 
   alertPlaceholder.append(wrapper)
+  // auto close alert
+  setTimeout(function () { closeOpenAlert() }, 10000);
 }
 
 function closeOpenAlert() {

diff --git a/webserver/templates/module.html b/webserver/templates/module.html
@@ -2,8 +2,7 @@
 {{define "module"}}
 {{$m := .}}
 <div id="{{sanitizedUniqueName .Module.NamespacedName}}">
-    <div class='card {{if eq .Module.Status.CurrentState "Running"}}border-info{{end}}' class="d-none"
-        style="max-height: 90vh;">
+    <div class='card {{if eq .Module.Status.CurrentState "Running"}}border-info{{end}}' style="max-height: 90vh;">
         <div class="card-header bg-transparent">
             <div href="#{{ sanitizedUniqueName .Module.NamespacedName}}-info">
                 <div class="d-flex justify-content-between align-items-center mb-1">