|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
import { css } from '@emotion/css'; |
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'; |
|
|
|
|
import { useEffect, useMemo, useState } from 'react'; |
|
|
|
|
import { FormProvider, SubmitErrorHandler, useForm, UseFormWatch } from 'react-hook-form'; |
|
|
|
|
import { useParams } from 'react-router-dom-v5-compat'; |
|
|
|
|
|
|
|
|
|
@ -7,7 +7,6 @@ import { GrafanaTheme2 } from '@grafana/data'; |
|
|
|
|
import { config, locationService } from '@grafana/runtime'; |
|
|
|
|
import { Button, ConfirmModal, CustomScrollbar, Spinner, Stack, useStyles2 } from '@grafana/ui'; |
|
|
|
|
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate'; |
|
|
|
|
import { usePageToolbar } from 'app/core/components/Page/Page'; |
|
|
|
|
import { useAppNotification } from 'app/core/copy/appNotification'; |
|
|
|
|
import { contextSrv } from 'app/core/core'; |
|
|
|
|
import InfoPausedRule from 'app/features/alerting/unified/components/InfoPausedRule'; |
|
|
|
|
@ -136,66 +135,52 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// @todo why is error not propagated to form?
|
|
|
|
|
const submit = useCallback( |
|
|
|
|
async (values: RuleFormValues, exitOnSave: boolean) => { |
|
|
|
|
if (conditionErrorMsg !== '') { |
|
|
|
|
notifyApp.error(conditionErrorMsg); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const submit = async (values: RuleFormValues, exitOnSave: boolean) => { |
|
|
|
|
if (conditionErrorMsg !== '') { |
|
|
|
|
notifyApp.error(conditionErrorMsg); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
trackAlertRuleFormSaved({ formAction: existing ? 'update' : 'create', ruleType: values.type }); |
|
|
|
|
|
|
|
|
|
const ruleDefinition = grafanaTypeRule |
|
|
|
|
? formValuesToRulerGrafanaRuleDTO(values) |
|
|
|
|
: formValuesToRulerRuleDTO(values); |
|
|
|
|
|
|
|
|
|
const ruleGroupIdentifier = existing |
|
|
|
|
? getRuleGroupLocationFromRuleWithLocation(existing) |
|
|
|
|
: getRuleGroupLocationFromFormValues(values); |
|
|
|
|
|
|
|
|
|
// @TODO move this to a hook too to make sure the logic here is tested for regressions?
|
|
|
|
|
if (!existing) { |
|
|
|
|
// when creating a new rule, we save the manual routing setting , and editorSettings.simplifiedQueryEditor to the local storage
|
|
|
|
|
storeInLocalStorageValues(values); |
|
|
|
|
await addRuleToRuleGroup.execute(ruleGroupIdentifier, ruleDefinition, evaluateEvery); |
|
|
|
|
} else { |
|
|
|
|
const ruleIdentifier = fromRulerRuleAndRuleGroupIdentifier(ruleGroupIdentifier, existing.rule); |
|
|
|
|
const targetRuleGroupIdentifier = getRuleGroupLocationFromFormValues(values); |
|
|
|
|
await updateRuleInRuleGroup.execute( |
|
|
|
|
ruleGroupIdentifier, |
|
|
|
|
ruleIdentifier, |
|
|
|
|
ruleDefinition, |
|
|
|
|
targetRuleGroupIdentifier, |
|
|
|
|
evaluateEvery |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
trackAlertRuleFormSaved({ formAction: existing ? 'update' : 'create', ruleType: values.type }); |
|
|
|
|
|
|
|
|
|
const { dataSourceName, namespaceName, groupName } = ruleGroupIdentifier; |
|
|
|
|
if (exitOnSave) { |
|
|
|
|
const returnTo = queryParams.get('returnTo') || getReturnToUrl(ruleGroupIdentifier, ruleDefinition); |
|
|
|
|
const ruleDefinition = grafanaTypeRule ? formValuesToRulerGrafanaRuleDTO(values) : formValuesToRulerRuleDTO(values); |
|
|
|
|
|
|
|
|
|
locationService.push(returnTo); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const ruleGroupIdentifier = existing |
|
|
|
|
? getRuleGroupLocationFromRuleWithLocation(existing) |
|
|
|
|
: getRuleGroupLocationFromFormValues(values); |
|
|
|
|
|
|
|
|
|
// Cloud Ruler rules identifier changes on update due to containing rule name and hash components
|
|
|
|
|
// After successful update we need to update the URL to avoid displaying 404 errors
|
|
|
|
|
if (isCloudRulerRule(ruleDefinition)) { |
|
|
|
|
const updatedRuleIdentifier = fromRulerRule(dataSourceName, namespaceName, groupName, ruleDefinition); |
|
|
|
|
locationService.replace(`/alerting/${encodeURIComponent(stringifyIdentifier(updatedRuleIdentifier))}/edit`); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
[ |
|
|
|
|
addRuleToRuleGroup, |
|
|
|
|
conditionErrorMsg, |
|
|
|
|
evaluateEvery, |
|
|
|
|
existing, |
|
|
|
|
grafanaTypeRule, |
|
|
|
|
notifyApp, |
|
|
|
|
queryParams, |
|
|
|
|
updateRuleInRuleGroup, |
|
|
|
|
] |
|
|
|
|
); |
|
|
|
|
// @TODO move this to a hook too to make sure the logic here is tested for regressions?
|
|
|
|
|
if (!existing) { |
|
|
|
|
// when creating a new rule, we save the manual routing setting , and editorSettings.simplifiedQueryEditor to the local storage
|
|
|
|
|
storeInLocalStorageValues(values); |
|
|
|
|
await addRuleToRuleGroup.execute(ruleGroupIdentifier, ruleDefinition, evaluateEvery); |
|
|
|
|
} else { |
|
|
|
|
const ruleIdentifier = fromRulerRuleAndRuleGroupIdentifier(ruleGroupIdentifier, existing.rule); |
|
|
|
|
const targetRuleGroupIdentifier = getRuleGroupLocationFromFormValues(values); |
|
|
|
|
await updateRuleInRuleGroup.execute( |
|
|
|
|
ruleGroupIdentifier, |
|
|
|
|
ruleIdentifier, |
|
|
|
|
ruleDefinition, |
|
|
|
|
targetRuleGroupIdentifier, |
|
|
|
|
evaluateEvery |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const { dataSourceName, namespaceName, groupName } = ruleGroupIdentifier; |
|
|
|
|
if (exitOnSave) { |
|
|
|
|
const returnTo = queryParams.get('returnTo') || getReturnToUrl(ruleGroupIdentifier, ruleDefinition); |
|
|
|
|
|
|
|
|
|
locationService.push(returnTo); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Cloud Ruler rules identifier changes on update due to containing rule name and hash components
|
|
|
|
|
// After successful update we need to update the URL to avoid displaying 404 errors
|
|
|
|
|
if (isCloudRulerRule(ruleDefinition)) { |
|
|
|
|
const updatedRuleIdentifier = fromRulerRule(dataSourceName, namespaceName, groupName, ruleDefinition); |
|
|
|
|
locationService.replace(`/alerting/${encodeURIComponent(stringifyIdentifier(updatedRuleIdentifier))}/edit`); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const deleteRule = async () => { |
|
|
|
|
if (existing) { |
|
|
|
|
@ -208,80 +193,73 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onInvalid: SubmitErrorHandler<RuleFormValues> = useCallback( |
|
|
|
|
(errors): void => { |
|
|
|
|
trackAlertRuleFormError({ |
|
|
|
|
grafana_version: config.buildInfo.version, |
|
|
|
|
org_id: contextSrv.user.orgId, |
|
|
|
|
user_id: contextSrv.user.id, |
|
|
|
|
error: Object.keys(errors).toString(), |
|
|
|
|
formAction: existing ? 'update' : 'create', |
|
|
|
|
}); |
|
|
|
|
notifyApp.error('There are errors in the form. Please correct them and try again!'); |
|
|
|
|
}, |
|
|
|
|
[existing, notifyApp] |
|
|
|
|
); |
|
|
|
|
const onInvalid: SubmitErrorHandler<RuleFormValues> = (errors): void => { |
|
|
|
|
trackAlertRuleFormError({ |
|
|
|
|
grafana_version: config.buildInfo.version, |
|
|
|
|
org_id: contextSrv.user.orgId, |
|
|
|
|
user_id: contextSrv.user.id, |
|
|
|
|
error: Object.keys(errors).toString(), |
|
|
|
|
formAction: existing ? 'update' : 'create', |
|
|
|
|
}); |
|
|
|
|
notifyApp.error('There are errors in the form. Please correct them and try again!'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const cancelRuleCreation = useCallback(() => { |
|
|
|
|
const cancelRuleCreation = () => { |
|
|
|
|
logInfo(LogMessages.cancelSavingAlertRule); |
|
|
|
|
trackAlertRuleFormCancelled({ formAction: existing ? 'update' : 'create' }); |
|
|
|
|
locationService.getHistory().goBack(); |
|
|
|
|
}, [existing]); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const evaluateEveryInForm = watch('evaluateEvery'); |
|
|
|
|
useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]); |
|
|
|
|
|
|
|
|
|
const actionButtons = useMemo( |
|
|
|
|
() => ( |
|
|
|
|
<Stack justifyContent="flex-end" alignItems="center"> |
|
|
|
|
{existing && ( |
|
|
|
|
<Button |
|
|
|
|
data-testid="save-rule" |
|
|
|
|
variant="primary" |
|
|
|
|
type="button" |
|
|
|
|
size="sm" |
|
|
|
|
onClick={handleSubmit((values) => submit(values, false), onInvalid)} |
|
|
|
|
disabled={isSubmitting} |
|
|
|
|
> |
|
|
|
|
{isSubmitting && <Spinner className={styles.buttonSpinner} inline={true} />} |
|
|
|
|
Save rule |
|
|
|
|
</Button> |
|
|
|
|
)} |
|
|
|
|
const actionButtons = ( |
|
|
|
|
<Stack justifyContent="flex-end" alignItems="center"> |
|
|
|
|
{existing && ( |
|
|
|
|
<Button |
|
|
|
|
data-testid="save-rule-and-exit" |
|
|
|
|
data-testid="save-rule" |
|
|
|
|
variant="primary" |
|
|
|
|
type="button" |
|
|
|
|
size="sm" |
|
|
|
|
onClick={handleSubmit((values) => submit(values, true), onInvalid)} |
|
|
|
|
onClick={handleSubmit((values) => submit(values, false), onInvalid)} |
|
|
|
|
disabled={isSubmitting} |
|
|
|
|
> |
|
|
|
|
{isSubmitting && <Spinner className={styles.buttonSpinner} inline={true} />} |
|
|
|
|
Save rule and exit |
|
|
|
|
Save rule |
|
|
|
|
</Button> |
|
|
|
|
)} |
|
|
|
|
<Button |
|
|
|
|
data-testid="save-rule-and-exit" |
|
|
|
|
variant="primary" |
|
|
|
|
type="button" |
|
|
|
|
size="sm" |
|
|
|
|
onClick={handleSubmit((values) => submit(values, true), onInvalid)} |
|
|
|
|
disabled={isSubmitting} |
|
|
|
|
> |
|
|
|
|
{isSubmitting && <Spinner className={styles.buttonSpinner} inline={true} />} |
|
|
|
|
Save rule and exit |
|
|
|
|
</Button> |
|
|
|
|
<Button variant="secondary" disabled={isSubmitting} type="button" onClick={cancelRuleCreation} size="sm"> |
|
|
|
|
Cancel |
|
|
|
|
</Button> |
|
|
|
|
{existing ? ( |
|
|
|
|
<Button fill="outline" variant="destructive" type="button" onClick={() => setShowDeleteModal(true)} size="sm"> |
|
|
|
|
Delete |
|
|
|
|
</Button> |
|
|
|
|
<Button variant="secondary" disabled={isSubmitting} type="button" onClick={cancelRuleCreation} size="sm"> |
|
|
|
|
Cancel |
|
|
|
|
) : null} |
|
|
|
|
{existing && isCortexLokiOrRecordingRule(watch) && ( |
|
|
|
|
<Button |
|
|
|
|
variant="secondary" |
|
|
|
|
type="button" |
|
|
|
|
onClick={() => setShowEditYaml(true)} |
|
|
|
|
disabled={isSubmitting} |
|
|
|
|
size="sm" |
|
|
|
|
> |
|
|
|
|
Edit YAML |
|
|
|
|
</Button> |
|
|
|
|
{existing ? ( |
|
|
|
|
<Button fill="outline" variant="destructive" type="button" onClick={() => setShowDeleteModal(true)} size="sm"> |
|
|
|
|
Delete |
|
|
|
|
</Button> |
|
|
|
|
) : null} |
|
|
|
|
{existing && isCortexLokiOrRecordingRule(watch) && ( |
|
|
|
|
<Button |
|
|
|
|
variant="secondary" |
|
|
|
|
type="button" |
|
|
|
|
onClick={() => setShowEditYaml(true)} |
|
|
|
|
disabled={isSubmitting} |
|
|
|
|
size="sm" |
|
|
|
|
> |
|
|
|
|
Edit YAML |
|
|
|
|
</Button> |
|
|
|
|
)} |
|
|
|
|
</Stack> |
|
|
|
|
), |
|
|
|
|
[cancelRuleCreation, existing, handleSubmit, isSubmitting, onInvalid, styles.buttonSpinner, submit, watch] |
|
|
|
|
)} |
|
|
|
|
</Stack> |
|
|
|
|
); |
|
|
|
|
usePageToolbar(actionButtons); |
|
|
|
|
|
|
|
|
|
const isPaused = existing && isGrafanaRulerRule(existing.rule) && isGrafanaRulerRulePaused(existing.rule); |
|
|
|
|
if (!type) { |
|
|
|
|
@ -289,7 +267,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { |
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
<FormProvider {...formAPI}> |
|
|
|
|
{!config.featureToggles.singleTopNav && <AppChromeUpdate actions={actionButtons} />} |
|
|
|
|
<AppChromeUpdate actions={actionButtons} /> |
|
|
|
|
<form onSubmit={(e) => e.preventDefault()} className={styles.form}> |
|
|
|
|
<div className={styles.contentOuter}> |
|
|
|
|
{isPaused && <InfoPausedRule />} |
|
|
|
|
|
Ashley Harrison
9 months ago
committed by