[Synthetics/Alerting] Add a param flag to hide the interval controls …

…from edit form (#152607) ## Summary Fixes #152430. We need to be able to hide from the UI the capability of the user to edit the interval for our rule in the edit form. To achieve this, I've simply added a flag to the rule's `params` field, and picked that flag up on the form to hide the elements in question. Shouldn't have any impact elsewhere for users of this form. If there's a better method of achieving this please let me know and I'll revise.
elastic · Mar 28, 2023 · 52ca1a8 · 52ca1a8
1 parent e99c741
commit 52ca1a8
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 46 deletions.
diff --git a/...ck/plugins/synthetics/e2e/journeys/synthetics/alert_rules/default_status_alert.journey.ts b/...ck/plugins/synthetics/e2e/journeys/synthetics/alert_rules/default_status_alert.journey.ts
@@ -58,8 +58,6 @@ journey(`DefaultStatusAlert`, async ({ page, params }) => {
     await page.isDisabled(byTestId('xpack.synthetics.toggleAlertFlyout'));
     await page.click(byTestId('xpack.synthetics.toggleAlertFlyout'));
     await page.waitForSelector('text=Edit rule');
-    await page.selectOption(byTestId('intervalInputUnit'), { label: 'second' });
-    await page.fill(byTestId('intervalInput'), '20');
     await page.click(byTestId('saveEditedRuleButton'));
     await page.waitForSelector("text=Updated 'Synthetics internal alert'");
   });
@@ -94,6 +92,8 @@ journey(`DefaultStatusAlert`, async ({ page, params }) => {
     await page.click(byTestId('syntheticsMonitorManagementTab'));
     await page.click(byTestId('syntheticsMonitorOverviewTab'));
 
+    await page.waitForTimeout(5 * 1000);
+
     const totalDown = await page.textContent(
       byTestId('xpack.uptime.synthetics.overview.status.down')
     );

diff --git a/...plugins/synthetics/public/apps/synthetics/components/alerts/hooks/use_synthetics_alert.ts b/...plugins/synthetics/public/apps/synthetics/components/alerts/hooks/use_synthetics_alert.ts
@@ -39,6 +39,7 @@ export const useSyntheticsAlert = (isOpen: boolean) => {
     }
     return triggersActionsUi.getEditRuleFlyout({
       onClose: () => dispatch(setAlertFlyoutVisible(false)),
+      hideInterval: true,
       initialRule: alert,
     });
   }, [alert, dispatch, triggersActionsUi]);

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add.tsx
@@ -48,6 +48,7 @@ const RuleAdd = ({
   initialValues,
   reloadRules,
   onSave,
+  hideInterval,
   metadata: initialMetadata,
   filteredRuleTypes,
   ...props
@@ -264,6 +265,7 @@ const RuleAdd = ({
                 ruleTypeRegistry={ruleTypeRegistry}
                 metadata={metadata}
                 filteredRuleTypes={filteredRuleTypes}
+                hideInterval={hideInterval}
                 onChangeMetaData={onChangeMetaData}
               />
             </EuiFlyoutBody>

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form.tsx
@@ -97,6 +97,7 @@ interface RuleFormProps<MetaData = Record<string, any>> {
   setHasActionsWithBrokenConnector?: (value: boolean) => void;
   metadata?: MetaData;
   filteredRuleTypes?: string[];
+  hideInterval?: boolean;
   connectorFeatureId?: string;
   onChangeMetaData: (metadata: MetaData) => void;
 }
@@ -114,6 +115,7 @@ export const RuleForm = ({
   actionTypeRegistry,
   metadata,
   filteredRuleTypes: ruleTypeToFilter,
+  hideInterval,
   connectorFeatureId = AlertingConnectorFeatureId,
   onChangeMetaData,
 }: RuleFormProps) => {
@@ -582,50 +584,52 @@ export const RuleForm = ({
           </Suspense>
         </EuiErrorBoundary>
       ) : null}
-      <EuiFlexItem>
-        <EuiFormRow
-          fullWidth
-          data-test-subj="intervalFormRow"
-          display="rowCompressed"
-          helpText={getHelpTextForInterval()}
-          isInvalid={errors['schedule.interval'].length > 0}
-          error={errors['schedule.interval']}
-        >
-          <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={2}>
-              <EuiFieldNumber
-                prepend={labelForRuleChecked}
-                fullWidth
-                min={1}
-                isInvalid={errors['schedule.interval'].length > 0}
-                value={ruleInterval || ''}
-                name="interval"
-                data-test-subj="intervalInput"
-                onChange={(e) => {
-                  const value = e.target.value;
-                  if (value === '' || INTEGER_REGEX.test(value)) {
-                    const parsedValue = value === '' ? '' : parseInt(value, 10);
-                    setRuleInterval(parsedValue || undefined);
-                    setScheduleProperty('interval', `${parsedValue}${ruleIntervalUnit}`);
-                  }
-                }}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={3}>
-              <EuiSelect
-                fullWidth
-                value={ruleIntervalUnit}
-                options={getTimeOptions(ruleInterval ?? 1)}
-                onChange={(e) => {
-                  setRuleIntervalUnit(e.target.value);
-                  setScheduleProperty('interval', `${ruleInterval}${e.target.value}`);
-                }}
-                data-test-subj="intervalInputUnit"
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFormRow>
-      </EuiFlexItem>
+      {hideInterval !== true && (
+        <EuiFlexItem>
+          <EuiFormRow
+            fullWidth
+            data-test-subj="intervalFormRow"
+            display="rowCompressed"
+            helpText={getHelpTextForInterval()}
+            isInvalid={errors['schedule.interval'].length > 0}
+            error={errors['schedule.interval']}
+          >
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={2}>
+                <EuiFieldNumber
+                  prepend={labelForRuleChecked}
+                  fullWidth
+                  min={1}
+                  isInvalid={errors['schedule.interval'].length > 0}
+                  value={ruleInterval || ''}
+                  name="interval"
+                  data-test-subj="intervalInput"
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (value === '' || INTEGER_REGEX.test(value)) {
+                      const parsedValue = value === '' ? '' : parseInt(value, 10);
+                      setRuleInterval(parsedValue || undefined);
+                      setScheduleProperty('interval', `${parsedValue}${ruleIntervalUnit}`);
+                    }
+                  }}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={3}>
+                <EuiSelect
+                  fullWidth
+                  value={ruleIntervalUnit}
+                  options={getTimeOptions(ruleInterval ?? 1)}
+                  onChange={(e) => {
+                    setRuleIntervalUnit(e.target.value);
+                    setScheduleProperty('interval', `${ruleInterval}${e.target.value}`);
+                  }}
+                  data-test-subj="intervalInputUnit"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFormRow>
+        </EuiFlexItem>
+      )}
       <EuiSpacer size="l" />
       {canShowActions &&
       defaultActionGroupId &&

diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts
@@ -408,6 +408,7 @@ export interface RuleEditProps<MetaData = Record<string, any>> {
   onClose: (reason: RuleFlyoutCloseReason, metadata?: MetaData) => void;
   /** @deprecated use `onSave` as a callback after an alert is saved*/
   reloadRules?: () => Promise<void>;
+  hideInterval?: boolean;
   onSave?: (metadata?: MetaData) => Promise<void>;
   metadata?: MetaData;
   ruleType?: RuleType<string, string>;
@@ -423,6 +424,7 @@ export interface RuleAddProps<MetaData = Record<string, any>> {
   initialValues?: Partial<Rule>;
   /** @deprecated use `onSave` as a callback after an alert is saved*/
   reloadRules?: () => Promise<void>;
+  hideInterval?: boolean;
   onSave?: (metadata?: MetaData) => Promise<void>;
   metadata?: MetaData;
   ruleTypeIndex?: RuleTypeIndex;