[Alerting] Disable flapping per rule - UI changes

src/platform/packages/shared/kbn-alerting-types/rule_settings.ts

@@ -21,6 +21,7 @@ export interface RulesSettingsFlappingProperties {
 }
 
 export interface RuleSpecificFlappingProperties {
+  enabled?: boolean;
   lookBackWindow: number;
   statusChangeThreshold: number;
 }

src/platform/packages/shared/kbn-alerts-ui-shared/src/rule_settings/rule_settings_flapping_form.tsx

@@ -7,26 +7,21 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   EuiBadge,
-  EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
-  EuiLink,
-  EuiPopover,
   EuiSpacer,
   EuiSplitPanel,
   EuiSwitch,
   EuiText,
-  EuiOutsideClickDetector,
   useEuiTheme,
   useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { RuleSpecificFlappingProperties, RulesSettingsFlapping } from '@kbn/alerting-types';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { RuleSettingsFlappingMessage } from './rule_settings_flapping_message';
 import { RuleSettingsFlappingInputs } from './rule_settings_flapping_inputs';
 
@@ -42,34 +37,21 @@ const flappingOffLabel = i18n.translate('alertsUIShared.ruleSettingsFlappingForm
   defaultMessage: 'OFF',
 });
 
+const enabledOnLabel = i18n.translate('alertsUIShared.ruleSettingsFlappingForm.enabledOnLabel', {
+  defaultMessage: 'On',
+});
+
+const enabledOffLabel = i18n.translate('alertsUIShared.ruleSettingsFlappingForm.enabledOffLabel', {
+  defaultMessage: 'Off',
+});
+
 const flappingOverrideLabel = i18n.translate(
   'alertsUIShared.ruleSettingsFlappingForm.overrideLabel',
   {
     defaultMessage: 'Custom',
   }
 );
 
-const flappingOffContentRules = i18n.translate(
-  'alertsUIShared.ruleSettingsFlappingForm.flappingOffContentRules',
-  {
-    defaultMessage: 'Rules',
-  }
-);
-
-const flappingOffContentSettings = i18n.translate(
-  'alertsUIShared.ruleSettingsFlappingForm.flappingOffContentSettings',
-  {
-    defaultMessage: 'Settings',
-  }
-);
-
-const flappingExternalLinkLabel = i18n.translate(
-  'alertsUIShared.ruleSettingsFlappingForm.flappingExternalLinkLabel',
-  {
-    defaultMessage: "What's this?",
-  }
-);
-
 const flappingOverrideConfiguration = i18n.translate(
   'alertsUIShared.ruleSettingsFlappingForm.flappingOverrideConfiguration',
   {
@@ -95,8 +77,6 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
   const { flappingSettings, spaceFlappingSettings, canWriteFlappingSettingsUI, onFlappingChange } =
     props;
 
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-
   const cachedFlappingSettings = useRef<RuleSpecificFlappingProperties>();
 
   const isDesktop = useIsWithinMinBreakpoint('xl');
@@ -113,6 +93,7 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
     }
     const initialFlappingSettings = cachedFlappingSettings.current || spaceFlappingSettings;
     onFlappingChange({
+      enabled: initialFlappingSettings.enabled,
       lookBackWindow: initialFlappingSettings.lookBackWindow,
       statusChangeThreshold: initialFlappingSettings.statusChangeThreshold,
     });
@@ -153,63 +134,24 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
     [flappingSettings, internalOnFlappingChange]
   );
 
-  const flappingOffTooltip = useMemo(() => {
-    if (!spaceFlappingSettings) {
-      return null;
-    }
-    const { enabled } = spaceFlappingSettings;
-    if (enabled) {
-      return null;
-    }
-
-    if (canWriteFlappingSettingsUI) {
-      return (
-        <EuiOutsideClickDetector onOutsideClick={() => setIsPopoverOpen(false)}>
-          <EuiPopover
-            repositionOnScroll
-            isOpen={isPopoverOpen}
-            anchorPosition="leftCenter"
-            panelStyle={{
-              width: 250,
-            }}
-            button={
-              <EuiButtonIcon
-                data-test-subj="ruleSettingsFlappingFormTooltipButton"
-                display="empty"
-                color="primary"
-                iconType="question"
-                aria-label="Flapping Off Info"
-                onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-              />
-            }
-          >
-            <EuiText data-test-subj="ruleSettingsFlappingFormTooltipContent" size="s">
-              <FormattedMessage
-                id="alertsUIShared.ruleSettingsFlappingForm.flappingOffPopoverContent"
-                defaultMessage="Go to {rules} > {settings} to turn on flapping detection for all rules in a space. You can subsequently customize the look back window and threshold values in each rule."
-                values={{
-                  rules: <b>{flappingOffContentRules}</b>,
-                  settings: <b>{flappingOffContentSettings}</b>,
-                }}
-              />
-            </EuiText>
-          </EuiPopover>
-        </EuiOutsideClickDetector>
-      );
-    }
-    // TODO: Add the external doc link here!
-    return (
-      <EuiLink href="" target="_blank">
-        {flappingExternalLinkLabel}
-      </EuiLink>
-    );
-  }, [canWriteFlappingSettingsUI, isPopoverOpen, spaceFlappingSettings]);
+  const onEnabledChange = useCallback(
+    (value: boolean) => {
+      if (!flappingSettings) {
+        return;
+      }
+      internalOnFlappingChange({
+        ...flappingSettings,
+        enabled: value,
+      });
+    },
+    [flappingSettings, internalOnFlappingChange]
+  );
 
   const flappingFormHeader = useMemo(() => {
     if (!spaceFlappingSettings) {
       return null;
     }
-    const { enabled } = spaceFlappingSettings;
+    const enabled = !flappingSettings ? spaceFlappingSettings.enabled : flappingSettings.enabled;
 
     return (
       <EuiFlexItem>
@@ -232,17 +174,14 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
             )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            {enabled && (
-              <EuiSwitch
-                data-test-subj="ruleFormAdvancedOptionsOverrideSwitch"
-                compressed
-                checked={!!flappingSettings}
-                label={flappingOverrideConfiguration}
-                disabled={!canWriteFlappingSettingsUI}
-                onChange={onFlappingToggle}
-              />
-            )}
-            {flappingOffTooltip}
+            <EuiSwitch
+              data-test-subj="ruleFormAdvancedOptionsOverrideSwitch"
+              compressed
+              checked={!!flappingSettings}
+              label={flappingOverrideConfiguration}
+              disabled={!canWriteFlappingSettingsUI}
+              onChange={onFlappingToggle}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
         {flappingSettings && enabled && (
@@ -258,7 +197,6 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
     euiTheme,
     spaceFlappingSettings,
     flappingSettings,
-    flappingOffTooltip,
     canWriteFlappingSettingsUI,
     onFlappingToggle,
   ]);
@@ -267,9 +205,6 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
     if (!flappingSettings) {
       return null;
     }
-    if (!spaceFlappingSettings?.enabled) {
-      return null;
-    }
     return (
       <EuiFlexItem>
         <RuleSettingsFlappingInputs
@@ -283,12 +218,28 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
     );
   }, [
     flappingSettings,
-    spaceFlappingSettings,
     canWriteFlappingSettingsUI,
     onLookBackWindowChange,
     onStatusChangeThresholdChange,
   ]);
 
+  const flappingFormSwitch = useMemo(() => {
+    if (!flappingSettings) {
+      return null;
+    }
+
+    return (
+      <EuiFlexItem>
+        <EuiSwitch
+          label={flappingSettings.enabled ? enabledOnLabel : enabledOffLabel}
+          checked={flappingSettings.enabled || true} // default to true if flapping.enabled is undefined
+          disabled={!canWriteFlappingSettingsUI}
+          onChange={(e) => onEnabledChange(e.target.checked)}
+        />
+      </EuiFlexItem>
+    );
+  }, [flappingSettings, canWriteFlappingSettingsUI, onEnabledChange]);
+
   const flappingFormMessage = useMemo(() => {
     if (!spaceFlappingSettings || !spaceFlappingSettings.enabled) {
       return null;
@@ -315,6 +266,7 @@ export const RuleSettingsFlappingForm = (props: RuleSettingsFlappingFormProps) =
       <EuiSplitPanel.Inner>
         <EuiFlexGroup direction="column">
           {flappingFormHeader}
+          {flappingFormSwitch}
           {flappingFormBody}
         </EuiFlexGroup>
       </EuiSplitPanel.Inner>

src/platform/packages/shared/response-ops/rule_form/src/common/apis/create_rule/transform_create_rule_body.test.ts

@@ -57,6 +57,7 @@ const ruleToCreate: CreateRuleBody<RuleTypeParams> = {
     active: 10,
   },
   flapping: {
+    enabled: true,
     lookBackWindow: 10,
     statusChangeThreshold: 10,
   },
@@ -103,6 +104,7 @@ describe('transformCreateRuleBody', () => {
       ],
       alert_delay: { active: 10 },
       flapping: {
+        enabled: true,
         look_back_window: 10,
         status_change_threshold: 10,
       },

src/platform/packages/shared/response-ops/rule_form/src/common/apis/create_rule/transform_create_rule_body.ts

@@ -17,6 +17,7 @@ const transformCreateRuleFlapping = (flapping: Rule['flapping']) => {
   }
 
   return {
+    enabled: flapping.enabled,
     look_back_window: flapping.lookBackWindow,
     status_change_threshold: flapping.statusChangeThreshold,
   };

src/platform/packages/shared/response-ops/rule_form/src/common/apis/update_rule/transform_update_rule_body.test.ts

@@ -54,6 +54,7 @@ const ruleToUpdate: UpdateRuleBody<RuleTypeParams> = {
     active: 10,
   },
   flapping: {
+    enabled: true,
     lookBackWindow: 10,
     statusChangeThreshold: 10,
   },
@@ -104,6 +105,7 @@ describe('transformUpdateRuleBody', () => {
       tags: [],
       throttle: null,
       flapping: {
+        enabled: true,
         look_back_window: 10,
         status_change_threshold: 10,
       },

src/platform/packages/shared/response-ops/rule_form/src/common/apis/update_rule/transform_update_rule_body.ts

@@ -17,6 +17,7 @@ const transformUpdateRuleFlapping = (flapping: Rule['flapping']) => {
   }
 
   return {
+    enabled: flapping.enabled,
     look_back_window: flapping.lookBackWindow,
     status_change_threshold: flapping.statusChangeThreshold,
   };

src/platform/packages/shared/response-ops/rule_form/src/common/transformations/transform_rule.ts

@@ -40,6 +40,7 @@ const transformFlapping = (flapping: AsApiContract<Rule['flapping']>) => {
   }
 
   return {
+    enabled: flapping.enabled,
     lookBackWindow: flapping.look_back_window,
     statusChangeThreshold: flapping.status_change_threshold,
   };

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -181,11 +181,7 @@
     "alertsUIShared.maintenanceWindowCallout.fetchErrorDescription": "Regelbenachrichtigungen werden gestoppt, während Wartungsfenster aktiv sind.",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveDescription": "Regelbenachrichtigungen werden gestoppt, während Wartungsfenster aktiv sind.",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveNoCategories": "Ein oder mehrere Wartungsfenster sind aktiv",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingExternalLinkLabel": "Was ist das?",
     "alertsUIShared.ruleSettingsFlappingForm.flappingLabel": "Flapping-Erkennung",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentRules": "Regeln",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentSettings": "Einstellungen",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffPopoverContent": "Gehen Sie zu {rules} > {settings}, um die Flapping-Erkennung für alle Regeln in einem Bereich zu aktivieren. Sie können anschließend das Rückblickfenster und die Schwellenwerte in jeder Regel anpassen.",
     "alertsUIShared.ruleSettingsFlappingForm.flappingOverrideConfiguration": "Konfiguration anpassen",
     "alertsUIShared.ruleSettingsFlappingForm.offLabel": "OFF",
     "alertsUIShared.ruleSettingsFlappingForm.onLabel": "ON",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -181,11 +181,7 @@
     "alertsUIShared.maintenanceWindowCallout.fetchErrorDescription": "Les notifications de règle sont arrêtées lorsque les fenêtres de maintenance sont en cours d'exécution.",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveDescription": "Les notifications de règle sont arrêtées lorsque les fenêtres de maintenance sont en cours d'exécution.",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveNoCategories": "Une ou plusieurs fenêtres de maintenance sont en cours d'exécution",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingExternalLinkLabel": "Qu'est-ce que c'est ?",
     "alertsUIShared.ruleSettingsFlappingForm.flappingLabel": "Détection des éléments instables",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentRules": "Règles",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentSettings": "Paramètres",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffPopoverContent": "Accédez à {rules} > {settings} pour activer la détection d'instabilité pour l'ensemble des règles d'un espace. Vous pouvez ensuite personnaliser la période d'analyse et les valeurs seuils de chaque règle.",
     "alertsUIShared.ruleSettingsFlappingForm.flappingOverrideConfiguration": "Personnaliser la configuration",
     "alertsUIShared.ruleSettingsFlappingForm.offLabel": "DÉSACTIVÉ",
     "alertsUIShared.ruleSettingsFlappingForm.onLabel": "ACTIVÉ",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -181,11 +181,7 @@
     "alertsUIShared.maintenanceWindowCallout.fetchErrorDescription": "保守時間枠の実行中は、ルール通知が停止されます。",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveDescription": "保守時間枠の実行中は、ルール通知が停止されます。",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveNoCategories": "1つ以上の保守時間枠が実行中です。",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingExternalLinkLabel": "概要",
     "alertsUIShared.ruleSettingsFlappingForm.flappingLabel": "フラップ検出",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentRules": "ルール",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentSettings": "設定",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffPopoverContent": "スペース内のすべてのルールでフラッピング検出を有効にするには、{rules} > {settings}に移動します。その後、各ルールで履歴表示期間としきい値をカスタマイズできます。",
     "alertsUIShared.ruleSettingsFlappingForm.flappingOverrideConfiguration": "構成をカスタマイズ",
     "alertsUIShared.ruleSettingsFlappingForm.offLabel": "オフ",
     "alertsUIShared.ruleSettingsFlappingForm.onLabel": "オン",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -181,11 +181,7 @@
     "alertsUIShared.maintenanceWindowCallout.fetchErrorDescription": "维护窗口正在运行时会停止规则通知。",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveDescription": "维护窗口正在运行时会停止规则通知。",
     "alertsUIShared.maintenanceWindowCallout.maintenanceWindowActiveNoCategories": "一个或多个维护窗口正在运行",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingExternalLinkLabel": "这是什么？",
     "alertsUIShared.ruleSettingsFlappingForm.flappingLabel": "摆动检测",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentRules": "规则",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffContentSettings": "设置",
-    "alertsUIShared.ruleSettingsFlappingForm.flappingOffPopoverContent": "请前往 {rules} > {settings} 为工作区中的所有规则打开摆动检测。随后，您可以自定义每个规则中的回顾窗口和阈值。",
     "alertsUIShared.ruleSettingsFlappingForm.flappingOverrideConfiguration": "定制配置",
     "alertsUIShared.ruleSettingsFlappingForm.offLabel": "关闭",
     "alertsUIShared.ruleSettingsFlappingForm.onLabel": "开启",