Disable button while remote broker certificates are being created

It should only be possible to click the button once. It should only be
possible to click the button again after a page reload.

CMK-21644

Change-Id: Id89ae4aa4cdf0d93de9dded26efb1bb28bcd4c6b

Author: rseltmann

cmk/gui/htmllib/generator.py

@@ -53,6 +53,7 @@
     "render_qr_code",
     "render_stats_table",
     "insert_before",
+    "lock_and_redirect",
 ]
 
 

cmk/gui/wato/pages/sites.py

@@ -46,6 +46,7 @@
 from cmk.gui.exceptions import FinalizeRequest, MKUserError
 from cmk.gui.htmllib.generator import HTMLWriter
 from cmk.gui.htmllib.html import html
+from cmk.gui.htmllib.tag_rendering import render_end_tag
 from cmk.gui.http import request
 from cmk.gui.i18n import _
 from cmk.gui.log import logger
@@ -1224,12 +1225,21 @@ def _show_message_broker_connection(
     ) -> None:
         table.cell("Message broker connection")
         if is_replication_enabled(site):
-            login_url = make_action_link([("mode", "sites"), ("_trigger_certs_creation", site_id)])
+            trigger_url = make_action_link(
+                [("mode", "sites"), ("_trigger_certs_creation", site_id)]
+            )
+            html.open_ts_container(
+                container="div",
+                function_name="lock_and_redirect",
+                arguments={"redirect_url": trigger_url},
+            )
             html.icon_button(
-                login_url,
-                _("Create remote broker certificates"),
-                "recreate_broker_certificate",
+                url="javascript:void(0)",
+                title=_("Create remote broker certificates"),
+                icon="recreate_broker_certificate",
+                class_=["lockable"],
             )
+            html.write_html(render_end_tag("div"))
 
         html.open_div(id_=f"message_broker_status_{site_id}", class_="connection_status")
         if is_replication_enabled(site):

packages/cmk-frontend/src/js/index.ts

@@ -35,6 +35,7 @@ import * as host_diagnose from "./modules/host_diagnose";
 import * as hover from "./modules/hover";
 import * as keyboard_shortcuts from "./modules/keyboard_shortcuts";
 import {insert_before} from "./modules/layout";
+import {lock_and_redirect} from "./modules/sites";
 import * as license_usage_timeseries_graph from "./modules/license_usage/license_usage_timeseries_graph";
 import * as nodevis from "./modules/nodevis/main";
 import * as ntop_alerts from "./modules/ntop/ntop_alerts";
@@ -80,6 +81,7 @@ const callable_functions: {[name: string]: CallableFunction} = {
     render_stats_table: render_stats_table,
     render_qr_code: render_qr_code,
     insert_before: insert_before,
+    lock_and_redirect: lock_and_redirect,
 };
 
 $(() => {

packages/cmk-frontend/src/js/modules/sites.ts

@@ -7,6 +7,7 @@
 import $ from "jquery";
 
 import {call_ajax} from "./ajax";
+import {add_class} from "@/modules/utils";
 
 interface AjaxJsonResponse<Result = any> {
     result_code: number;
@@ -80,3 +81,31 @@ function show_error(msg: string) {
     // Remove all loading icons
     $(".reloading").remove();
 }
+
+export async function lock_and_redirect(
+    iconButtonContainer: HTMLElement,
+    options: Record<string, string>,
+) {
+    if (!("redirect_url" in options)) {
+        throw new Error(
+            "lock_and_redirect has to set redirect_url in options!",
+        );
+    }
+    const iconButtons = iconButtonContainer.getElementsByTagName("a");
+    if (iconButtons.length != 1) {
+        throw new Error(
+            `lock_and_redirect: expected exactly one a-element, got ${iconButtons.length}`,
+        );
+    }
+    const iconButton: HTMLAnchorElement = iconButtons[0];
+
+    const handler = function () {
+        add_class(iconButton, "disabled");
+        //@ts-ignore
+        iconButton.disabled = true; // TODO: i don't think this has any effect on a non input element.
+        window.location.href = options.redirect_url;
+        // just to be sure, adding the disabled class normally should be enough
+        iconButton.removeEventListener("click", handler);
+    };
+    iconButton.addEventListener("click", handler);
+}

packages/cmk-frontend/src/themes/facelift/scss/_wato.scss

@@ -32,6 +32,10 @@
       white-space: nowrap;
     }
   }
+  a.disabled {
+    pointer-events: none;
+    opacity: $inactive-opacity;
+  }
 }
 
 .wato td.right {