Add indicator for bulk clear flapping

Uninett · Apr 4, 2024 · 7e92319 · 7e92319
1 parent a5c5fa5
commit 7e92319
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html
@@ -25,7 +25,7 @@
                 hx-swap="innerHTML"
                 hx-trigger="click"
                 id="bulk-clear-flapping"
-                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                hx-indicator="#bulk-clear-flapping-indicator"
                 class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
             Clear Flapping
         </button>

diff --git a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html
@@ -1,5 +1,8 @@
 <div id="bulk-update-menu" tabindex="-1" hx-swap-oob="true"
-     class="sticky bottom-0 z-20 flex justify-between w-full max-h-fit p-2 border-t bg-slate-700 border-slate-600">
+     class="sticky bottom-0 z-20 flex flex-row items-center justify-between w-full max-h-fit p-2 border-t bg-slate-700 border-slate-600">
+
+    {% include "/components/popups/bulk-update-menu/bulk-update-progress.html" %}
+
     <div class="flex items-center mx-auto">
         {% include "/components/popups/bulk-update-menu/bulk-update-buttons.html" %}
     </div>

diff --git a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-progress.html b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-progress.html
@@ -0,0 +1,15 @@
+<div role="status" id="bulk-clear-flapping-indicator"
+     class="htmx-indicator lg:absolute flex flex-nowrap items-center gap-1 text-lg font-medium text-white">
+    {% with color='white' %}
+        {% include "/components/feedback/spinner/spinner.svg" %}
+    {% endwith %}
+    Clearing flapping...
+</div>
+
+<div role="status" id="bulk-poll-indicator"
+     class="htmx-indicator lg:absolute flex flex-nowrap items-center gap-1 text-lg font-medium text-white">
+    {% with color='white' %}
+        {% include "/components/feedback/spinner/spinner.svg" %}
+    {% endwith %}
+    Polling...
+</div>