Disable edit default rule(s) buttons if default rules are not defined.

Author: justinkambic

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/alerts/hooks/use_synthetics_rules.tsx

@@ -40,19 +40,12 @@ export const useSyntheticsRules = (isOpen: boolean) => {
   const alertFlyoutVisible = useSelector(selectAlertFlyoutVisibility);
   const isNewRule = useSelector(selectIsNewRule);
   const { settings } = useSelector(selectDynamicSettings);
-  const defaultRulesEnabled =
-    settings && (settings?.defaultStatusRuleEnabled || settings?.defaultTLSRuleEnabled);
-  // Fetch default rules when popover opens if they haven't been loaded yet
-  useEffect(() => {
-    if (isOpen && !loading && rulesLoaded === null && defaultRulesEnabled) {
-      dispatch(getDefaultAlertingAction.get());
-    }
-  }, [isOpen, loading, rulesLoaded, dispatch, defaultRulesEnabled]);
   const { canSave } = useSyntheticsSettingsContext();
-
   const { loaded, data: monitors } = useSelector(selectMonitorListState);
 
   const hasMonitors = loaded && monitors.absoluteTotal && monitors.absoluteTotal > 0;
+  const defaultRulesEnabled =
+    settings && (settings?.defaultStatusRuleEnabled || settings?.defaultTLSRuleEnabled);
 
   const getOrCreateAlerts = useCallback(() => {
     if (canSave) {
@@ -62,20 +55,23 @@ export const useSyntheticsRules = (isOpen: boolean) => {
     }
   }, [canSave, dispatch]);
 
+  // Fetch or create default rules when popover opens
   useEffect(() => {
-    if (hasMonitors && defaultRulesEnabled) {
-      if (!defaultRules) {
-        // on initial load we prioritize loading the app
-        setTimeout(() => {
-          getOrCreateAlerts();
-        }, 1000);
-      } else {
+    if (isOpen && hasMonitors && defaultRulesEnabled && !loading) {
+      // If rules haven't been loaded yet, fetch/create them
+      if (rulesLoaded === null || !defaultRules) {
         getOrCreateAlerts();
       }
     }
-    // we don't want to run this on defaultRules change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, isOpen, hasMonitors, defaultRulesEnabled]);
+  }, [
+    isOpen,
+    hasMonitors,
+    defaultRulesEnabled,
+    loading,
+    rulesLoaded,
+    defaultRules,
+    getOrCreateAlerts,
+  ]);
 
   const {
     triggersActionsUi: { ruleTypeRegistry, actionTypeRegistry },
@@ -85,11 +81,19 @@ export const useSyntheticsRules = (isOpen: boolean) => {
   const onClose = useMemo(() => () => dispatch(setAlertFlyoutVisible(null)), [dispatch]);
 
   const EditAlertFlyout = useMemo(() => {
+    // Don't render if this is a new rule flyout
+    if (isNewRule || !alertFlyoutVisible) {
+      return null;
+    }
+
     const initialRule =
       alertFlyoutVisible === SYNTHETICS_TLS_RULE ? defaultRules?.tlsRule : defaultRules?.statusRule;
-    if (!initialRule || isNewRule) {
+
+    // If the rule doesn't exist yet, return null (the useEffect will try to fetch/create it)
+    if (!initialRule) {
       return null;
     }
+
     return (
       <RuleFormFlyout
         plugins={{ ...plugins, ruleTypeRegistry, actionTypeRegistry }}
@@ -134,7 +138,7 @@ export const useSyntheticsRules = (isOpen: boolean) => {
   }, [isNewRule, alertFlyoutVisible, plugins, ruleTypeRegistry, actionTypeRegistry, onClose]);
 
   return useMemo(
-    () => ({ loading, EditAlertFlyout, NewRuleFlyout }),
-    [EditAlertFlyout, loading, NewRuleFlyout]
+    () => ({ loading, EditAlertFlyout, NewRuleFlyout, defaultRules }),
+    [EditAlertFlyout, loading, NewRuleFlyout, defaultRules]
   );
 };

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/alerts/toggle_alert_flyout_button.tsx

@@ -33,10 +33,12 @@ export const ToggleAlertFlyoutButton = () => {
   const { application } = useKibana<ClientPluginsStart>().services;
   const hasUptimeWrite = application?.capabilities.uptime?.save ?? false;
 
-  const { EditAlertFlyout, loading, NewRuleFlyout } = useSyntheticsRules(isOpen);
+  const { EditAlertFlyout, loading, NewRuleFlyout, defaultRules } = useSyntheticsRules(isOpen);
   const { loaded, data: monitors } = useSelector(selectMonitorListState);
 
   const hasMonitors = loaded && monitors.absoluteTotal && monitors.absoluteTotal > 0;
+  const statusRuleExists = Boolean(defaultRules?.statusRule);
+  const tlsRuleExists = Boolean(defaultRules?.tlsRule);
 
   const panels: EuiContextMenuPanelDescriptor[] = [
     {
@@ -81,7 +83,7 @@ export const ToggleAlertFlyoutButton = () => {
             setIsOpen(false);
           },
           toolTipContent: !hasUptimeWrite ? noWritePermissionsTooltipContent : null,
-          disabled: !hasUptimeWrite || loading,
+          disabled: !hasUptimeWrite || loading || !statusRuleExists,
           icon: 'bell',
         },
       ],
@@ -107,7 +109,7 @@ export const ToggleAlertFlyoutButton = () => {
             setIsOpen(false);
           },
           toolTipContent: !hasUptimeWrite ? noWritePermissionsTooltipContent : null,
-          disabled: !hasUptimeWrite || loading,
+          disabled: !hasUptimeWrite || loading || !tlsRuleExists,
           icon: 'bell',
         },
       ],