> =>\n (namespace && rulesConfig?.[namespace]?.map((group) => ({ label: group.name, value: group.name }))) || [],\n [namespace, rulesConfig]\n );\n\n return (\n \n \n (\n {\n setValue('group', ''); //reset if namespace changes\n onChange(value.value);\n }}\n options={namespaceOptions}\n width={42}\n />\n )}\n name=\"namespace\"\n control={control}\n rules={{\n required: { value: true, message: 'Required.' },\n validate: {\n pathSeparator: checkForPathSeparator,\n },\n }}\n />\n \n \n (\n {\n setValue('group', value.value ?? '');\n }}\n className={style.input}\n />\n )}\n name=\"group\"\n control={control}\n rules={{\n required: { value: true, message: 'Required.' },\n validate: {\n pathSeparator: checkForPathSeparator,\n },\n }}\n />\n \n
\n );\n};\n\nconst getStyle = (theme: GrafanaTheme2) => ({\n flexRow: css`\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n\n & > * + * {\n margin-left: ${theme.spacing(3)};\n }\n `,\n input: css`\n width: 330px !important;\n `,\n});\n","import { css } from '@emotion/css';\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Field, Input, InputControl, Select, useStyles2 } from '@grafana/ui';\n\nimport { RuleFormType, RuleFormValues } from '../../types/rule-form';\nimport { timeOptions } from '../../utils/time';\n\nimport { GroupAndNamespaceFields } from './GroupAndNamespaceFields';\nimport { PreviewRule } from './PreviewRule';\nimport { RuleEditorSection } from './RuleEditorSection';\n\nexport const CloudEvaluationBehavior = () => {\n const styles = useStyles2(getStyles);\n const {\n register,\n control,\n watch,\n formState: { errors },\n } = useFormContext();\n\n const type = watch('type');\n const dataSourceName = watch('dataSourceName');\n\n return (\n \n \n \n \n \n \n (\n onChange(value?.value)}\n width={15}\n className={styles.timeUnit}\n />\n )}\n control={control}\n />\n
\n \n {type === RuleFormType.cloudAlerting && dataSourceName && (\n \n )}\n\n \n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n inlineField: css`\n margin-bottom: 0;\n `,\n flexRow: css`\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n `,\n timeUnit: css`\n margin-left: ${theme.spacing(0.5)};\n `,\n});\n","import React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { RuleFormValues } from '../../types/rule-form';\n\nimport { GroupAndNamespaceFields } from './GroupAndNamespaceFields';\nimport { RuleEditorSection } from './RuleEditorSection';\n\nexport function RecordingRulesNameSpaceAndGroupStep() {\n const { watch } = useFormContext();\n\n const dataSourceName = watch('dataSourceName');\n\n if (!dataSourceName) {\n return null;\n }\n\n return (\n \n \n \n );\n}\n","import { css } from '@emotion/css';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { FormProvider, SubmitErrorHandler, UseFormWatch, useForm } from 'react-hook-form';\nimport { Link, useParams } from 'react-router-dom';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Button, ConfirmModal, CustomScrollbar, HorizontalGroup, Spinner, Stack, useStyles2 } from '@grafana/ui';\nimport { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';\nimport { useAppNotification } from 'app/core/copy/appNotification';\nimport { contextSrv } from 'app/core/core';\nimport { useCleanup } from 'app/core/hooks/useCleanup';\nimport { useQueryParams } from 'app/core/hooks/useQueryParams';\nimport { useDispatch } from 'app/types';\nimport { RuleWithLocation } from 'app/types/unified-alerting';\n\nimport { LogMessages, logInfo, trackNewAlerRuleFormError } from '../../../Analytics';\nimport { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';\nimport { deleteRuleAction, saveRuleFormAction } from '../../../state/actions';\nimport { RuleFormType, RuleFormValues } from '../../../types/rule-form';\nimport { initialAsyncRequestState } from '../../../utils/redux';\nimport {\n MANUAL_ROUTING_KEY,\n MINUTE,\n formValuesFromExistingRule,\n getDefaultFormValues,\n getDefaultQueries,\n ignoreHiddenQueries,\n normalizeDefaultAnnotations,\n} from '../../../utils/rule-form';\nimport * as ruleId from '../../../utils/rule-id';\nimport { GrafanaRuleExporter } from '../../export/GrafanaRuleExporter';\nimport { AlertRuleNameInput } from '../AlertRuleNameInput';\nimport AnnotationsStep from '../AnnotationsStep';\nimport { CloudEvaluationBehavior } from '../CloudEvaluationBehavior';\nimport { GrafanaEvaluationBehavior } from '../GrafanaEvaluationBehavior';\nimport { NotificationsStep } from '../NotificationsStep';\nimport { RecordingRulesNameSpaceAndGroupStep } from '../RecordingRulesNameSpaceAndGroupStep';\nimport { RuleInspector } from '../RuleInspector';\nimport { QueryAndExpressionsStep } from '../query-and-alert-condition/QueryAndExpressionsStep';\nimport { translateRouteParamToRuleType } from '../util';\n\ntype Props = {\n existing?: RuleWithLocation;\n prefill?: Partial; // Existing implies we modify existing rule. Prefill only provides default form values\n};\n\nexport const AlertRuleForm = ({ existing, prefill }: Props) => {\n const styles = useStyles2(getStyles);\n const dispatch = useDispatch();\n const notifyApp = useAppNotification();\n const [queryParams] = useQueryParams();\n const [showEditYaml, setShowEditYaml] = useState(false);\n const [evaluateEvery, setEvaluateEvery] = useState(existing?.group.interval ?? MINUTE);\n\n const routeParams = useParams<{ type: string; id: string }>();\n const ruleType = translateRouteParamToRuleType(routeParams.type);\n const uidFromParams = routeParams.id;\n\n const returnTo = !queryParams['returnTo'] ? '/alerting/list' : String(queryParams['returnTo']);\n const [showDeleteModal, setShowDeleteModal] = useState(false);\n\n const defaultValues: RuleFormValues = useMemo(() => {\n if (existing) {\n return formValuesFromExistingRule(existing);\n }\n\n if (prefill) {\n return formValuesFromPrefill(prefill);\n }\n\n if (typeof queryParams['defaults'] === 'string') {\n return formValuesFromQueryParams(queryParams['defaults'], ruleType);\n }\n\n return {\n ...getDefaultFormValues(),\n condition: 'C',\n queries: getDefaultQueries(),\n type: ruleType || RuleFormType.grafana,\n evaluateEvery: evaluateEvery,\n };\n }, [existing, prefill, queryParams, evaluateEvery, ruleType]);\n\n const formAPI = useForm({\n mode: 'onSubmit',\n defaultValues,\n shouldFocusError: true,\n });\n\n const { handleSubmit, watch } = formAPI;\n\n const type = watch('type');\n const dataSourceName = watch('dataSourceName');\n\n const showDataSourceDependantStep = Boolean(type && (type === RuleFormType.grafana || !!dataSourceName));\n\n const submitState = useUnifiedAlertingSelector((state) => state.ruleForm.saveRule) || initialAsyncRequestState;\n useCleanup((state) => (state.unifiedAlerting.ruleForm.saveRule = initialAsyncRequestState));\n\n const [conditionErrorMsg, setConditionErrorMsg] = useState('');\n\n const checkAlertCondition = (msg = '') => {\n setConditionErrorMsg(msg);\n };\n\n const submit = (values: RuleFormValues, exitOnSave: boolean) => {\n if (conditionErrorMsg !== '') {\n notifyApp.error(conditionErrorMsg);\n return;\n }\n // when creating a new rule, we save the manual routing setting in local storage\n if (!existing) {\n if (values.manualRouting) {\n localStorage.setItem(MANUAL_ROUTING_KEY, 'true');\n } else {\n localStorage.setItem(MANUAL_ROUTING_KEY, 'false');\n }\n }\n\n dispatch(\n saveRuleFormAction({\n values: {\n ...defaultValues,\n ...values,\n annotations:\n values.annotations\n ?.map(({ key, value }) => ({ key: key.trim(), value: value.trim() }))\n .filter(({ key, value }) => !!key && !!value) ?? [],\n labels:\n values.labels\n ?.map(({ key, value }) => ({ key: key.trim(), value: value.trim() }))\n .filter(({ key }) => !!key) ?? [],\n },\n existing,\n redirectOnSave: exitOnSave ? returnTo : undefined,\n initialAlertRuleName: defaultValues.name,\n evaluateEvery: evaluateEvery,\n })\n );\n };\n\n const deleteRule = () => {\n if (existing) {\n const identifier = ruleId.fromRulerRule(\n existing.ruleSourceName,\n existing.namespace,\n existing.group.name,\n existing.rule\n );\n\n dispatch(deleteRuleAction(identifier, { navigateTo: '/alerting/list' }));\n }\n };\n\n const onInvalid: SubmitErrorHandler = (errors): void => {\n if (!existing) {\n trackNewAlerRuleFormError({\n grafana_version: config.buildInfo.version,\n org_id: contextSrv.user.orgId,\n user_id: contextSrv.user.id,\n error: Object.keys(errors).toString(),\n });\n }\n notifyApp.error('There are errors in the form. Please correct them and try again!');\n };\n\n const cancelRuleCreation = () => {\n logInfo(LogMessages.cancelSavingAlertRule);\n };\n const evaluateEveryInForm = watch('evaluateEvery');\n useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]);\n\n const actionButtons = (\n \n {existing && (\n submit(values, false), onInvalid)}\n disabled={submitState.loading}\n >\n {submitState.loading && }\n Save rule\n \n )}\n submit(values, true), onInvalid)}\n disabled={submitState.loading}\n >\n {submitState.loading && }\n Save rule and exit\n \n \n \n \n {existing ? (\n \n ) : null}\n\n {existing && isCortexLokiOrRecordingRule(watch) && (\n setShowEditYaml(true)}\n disabled={submitState.loading}\n size=\"sm\"\n >\n Edit YAML\n \n )}\n \n );\n\n return (\n \n \n \n {showDeleteModal ? (\n setShowDeleteModal(false)}\n />\n ) : null}\n {showEditYaml ? (\n type === RuleFormType.grafana ? (\n setShowEditYaml(false)} />\n ) : (\n setShowEditYaml(false)} />\n )\n ) : null}\n \n );\n};\n\nconst isCortexLokiOrRecordingRule = (watch: UseFormWatch) => {\n const [ruleType, dataSourceName] = watch(['type', 'dataSourceName']);\n\n return (ruleType === RuleFormType.cloudAlerting || ruleType === RuleFormType.cloudRecording) && dataSourceName !== '';\n};\n\nfunction formValuesFromQueryParams(ruleDefinition: string, type: RuleFormType): RuleFormValues {\n let ruleFromQueryParams: Partial;\n\n try {\n ruleFromQueryParams = JSON.parse(ruleDefinition);\n } catch (err) {\n return {\n ...getDefaultFormValues(),\n queries: getDefaultQueries(),\n };\n }\n\n return ignoreHiddenQueries({\n ...getDefaultFormValues(),\n ...ruleFromQueryParams,\n annotations: normalizeDefaultAnnotations(ruleFromQueryParams.annotations ?? []),\n queries: ruleFromQueryParams.queries ?? getDefaultQueries(),\n type: type || RuleFormType.grafana,\n evaluateEvery: MINUTE,\n });\n}\n\nfunction formValuesFromPrefill(rule: Partial): RuleFormValues {\n return ignoreHiddenQueries({\n ...getDefaultFormValues(),\n ...rule,\n });\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n buttonSpinner: css({\n marginRight: theme.spacing(1),\n }),\n form: css({\n width: '100%',\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n }),\n contentOuter: css({\n background: theme.colors.background.primary,\n overflow: 'hidden',\n flex: 1,\n }),\n flexRow: css({\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-start',\n }),\n});\n","import { cloneDeep } from 'lodash';\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { locationService } from '@grafana/runtime/src';\nimport { Alert, LoadingPlaceholder } from '@grafana/ui/src';\n\nimport { useDispatch } from '../../../types';\nimport { RuleIdentifier, RuleWithLocation } from '../../../types/unified-alerting';\nimport { RulerRuleDTO } from '../../../types/unified-alerting-dto';\n\nimport { AlertRuleForm } from './components/rule-editor/alert-rule-form/AlertRuleForm';\nimport { fetchEditableRuleAction } from './state/actions';\nimport { generateCopiedName } from './utils/duplicate';\nimport { rulerRuleToFormValues } from './utils/rule-form';\nimport { getRuleName, isAlertingRulerRule, isGrafanaRulerRule, isRecordingRulerRule } from './utils/rules';\nimport { createUrl } from './utils/url';\n\nexport function CloneRuleEditor({ sourceRuleId }: { sourceRuleId: RuleIdentifier }) {\n const dispatch = useDispatch();\n\n const {\n loading,\n value: rule,\n error,\n } = useAsync(() => dispatch(fetchEditableRuleAction(sourceRuleId)).unwrap(), [sourceRuleId]);\n\n if (loading) {\n return ;\n }\n\n if (rule) {\n const ruleClone = cloneRuleDefinition(rule);\n const formPrefill = rulerRuleToFormValues(ruleClone);\n\n return ;\n }\n\n if (error) {\n return (\n \n {error.message}\n \n );\n }\n\n return (\n locationService.replace(createUrl('/alerting/list'))}\n />\n );\n}\n\nfunction changeRuleName(rule: RulerRuleDTO, newName: string) {\n if (isGrafanaRulerRule(rule)) {\n rule.grafana_alert.title = newName;\n }\n if (isAlertingRulerRule(rule)) {\n rule.alert = newName;\n }\n\n if (isRecordingRulerRule(rule)) {\n rule.record = newName;\n }\n}\n\nexport function cloneRuleDefinition(rule: RuleWithLocation) {\n const ruleClone = cloneDeep(rule);\n changeRuleName(\n ruleClone.rule,\n generateCopiedName(getRuleName(ruleClone.rule), ruleClone.group.rules.map(getRuleName))\n );\n\n if (isGrafanaRulerRule(ruleClone.rule)) {\n ruleClone.rule.grafana_alert.uid = '';\n\n // Provisioned alert rules have provisioned alert group which cannot be used in UI\n if (Boolean(ruleClone.rule.grafana_alert.provenance)) {\n ruleClone.group = { name: '', rules: ruleClone.group.rules };\n }\n }\n\n return ruleClone;\n}\n","import React, { useEffect } from 'react';\n\nimport { Alert, LoadingPlaceholder } from '@grafana/ui';\nimport { useCleanup } from 'app/core/hooks/useCleanup';\nimport { useDispatch } from 'app/types';\nimport { RuleIdentifier } from 'app/types/unified-alerting';\n\nimport { AlertWarning } from './AlertWarning';\nimport { AlertRuleForm } from './components/rule-editor/alert-rule-form/AlertRuleForm';\nimport { useIsRuleEditable } from './hooks/useIsRuleEditable';\nimport { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector';\nimport { fetchEditableRuleAction } from './state/actions';\nimport { initialAsyncRequestState } from './utils/redux';\nimport * as ruleId from './utils/rule-id';\n\ninterface ExistingRuleEditorProps {\n identifier: RuleIdentifier;\n id?: string;\n}\n\nexport function ExistingRuleEditor({ identifier, id }: ExistingRuleEditorProps) {\n useCleanup((state) => (state.unifiedAlerting.ruleForm.existingRule = initialAsyncRequestState));\n\n const {\n loading: loadingAlertRule,\n result,\n error,\n dispatched,\n } = useUnifiedAlertingSelector((state) => state.ruleForm.existingRule);\n\n const dispatch = useDispatch();\n const { isEditable, loading: loadingEditable } = useIsRuleEditable(\n ruleId.ruleIdentifierToRuleSourceName(identifier),\n result?.rule\n );\n\n const loading = loadingAlertRule || loadingEditable;\n\n useEffect(() => {\n if (!dispatched) {\n dispatch(fetchEditableRuleAction(identifier));\n }\n }, [dispatched, dispatch, identifier]);\n\n if (loading || isEditable === undefined) {\n return ;\n }\n\n if (error) {\n return (\n \n {error.message}\n \n );\n }\n\n if (!result) {\n return Sorry! This rule does not exist.;\n }\n\n if (isEditable === false) {\n return Sorry! You do not have permission to edit this rule.;\n }\n\n return ;\n}\n","import React, { useCallback } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { NavModelItem } from '@grafana/data';\nimport { withErrorBoundary } from '@grafana/ui';\nimport { GrafanaRouteComponentProps } from 'app/core/navigation/types';\nimport { useDispatch } from 'app/types';\nimport { RuleIdentifier } from 'app/types/unified-alerting';\n\nimport { AlertWarning } from './AlertWarning';\nimport { CloneRuleEditor } from './CloneRuleEditor';\nimport { ExistingRuleEditor } from './ExistingRuleEditor';\nimport { AlertingPageWrapper } from './components/AlertingPageWrapper';\nimport { AlertRuleForm } from './components/rule-editor/alert-rule-form/AlertRuleForm';\nimport { useURLSearchParams } from './hooks/useURLSearchParams';\nimport { fetchRulesSourceBuildInfoAction } from './state/actions';\nimport { useRulesAccess } from './utils/accessControlHooks';\nimport * as ruleId from './utils/rule-id';\n\ntype RuleEditorProps = GrafanaRouteComponentProps<{ id?: string; type?: 'recording' | 'alerting' }>;\n\nconst defaultPageNav: Partial = {\n icon: 'bell',\n id: 'alert-rule-view',\n};\n\n// sadly we only get the \"type\" when a new rule is being created, when editing an existing recording rule we can't actually know it from the URL\nconst getPageNav = (identifier?: RuleIdentifier, type?: 'recording' | 'alerting') => {\n if (type === 'recording') {\n if (identifier) {\n // this branch should never trigger actually, the type param isn't used when editing rules\n return { ...defaultPageNav, id: 'alert-rule-edit', text: 'Edit recording rule' };\n } else {\n return { ...defaultPageNav, id: 'alert-rule-add', text: 'New recording rule' };\n }\n }\n\n if (identifier) {\n // keep this one ambiguous, don't mentiond a specific alert type here\n return { ...defaultPageNav, id: 'alert-rule-edit', text: 'Edit rule' };\n } else {\n return { ...defaultPageNav, id: 'alert-rule-add', text: 'New alert rule' };\n }\n};\n\nconst RuleEditor = ({ match }: RuleEditorProps) => {\n const dispatch = useDispatch();\n const [searchParams] = useURLSearchParams();\n\n const { type } = match.params;\n const id = ruleId.getRuleIdFromPathname(match.params);\n const identifier = ruleId.tryParse(id, true);\n\n const copyFromId = searchParams.get('copyFrom') ?? undefined;\n const copyFromIdentifier = ruleId.tryParse(copyFromId);\n\n const { loading = true } = useAsync(async () => {\n if (identifier) {\n await dispatch(fetchRulesSourceBuildInfoAction({ rulesSourceName: identifier.ruleSourceName }));\n }\n if (copyFromIdentifier) {\n await dispatch(fetchRulesSourceBuildInfoAction({ rulesSourceName: copyFromIdentifier.ruleSourceName }));\n }\n }, [dispatch]);\n\n const { canCreateGrafanaRules, canCreateCloudRules, canEditRules } = useRulesAccess();\n\n const getContent = useCallback(() => {\n if (loading) {\n return;\n }\n\n if (!identifier && !canCreateGrafanaRules && !canCreateCloudRules) {\n return Sorry! You are not allowed to create rules.;\n }\n\n if (identifier && !canEditRules(identifier.ruleSourceName)) {\n return Sorry! You are not allowed to edit rules.;\n }\n\n if (identifier) {\n return ;\n }\n\n if (copyFromIdentifier) {\n return ;\n }\n // new alert rule\n return ;\n }, [canCreateCloudRules, canCreateGrafanaRules, canEditRules, copyFromIdentifier, id, identifier, loading]);\n\n return (\n \n {getContent()}\n \n );\n};\n\nexport default withErrorBoundary(RuleEditor, { style: 'page' });\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { useAsync } from 'react-use';\n\nimport { Button, CustomScrollbar, LinkButton, LoadingPlaceholder, Stack } from '@grafana/ui';\nimport { useAppNotification } from 'app/core/copy/appNotification';\nimport { useQueryParams } from 'app/core/hooks/useQueryParams';\n\nimport { AppChromeUpdate } from '../../../../../../core/components/AppChrome/AppChromeUpdate';\nimport { RulerRuleDTO, RulerRuleGroupDTO } from '../../../../../../types/unified-alerting-dto';\nimport { alertRuleApi, ModifyExportPayload } from '../../../api/alertRuleApi';\nimport { fetchRulerRulesGroup } from '../../../api/ruler';\nimport { useDataSourceFeatures } from '../../../hooks/useCombinedRule';\nimport { RuleFormValues } from '../../../types/rule-form';\nimport { GRAFANA_RULES_SOURCE_NAME } from '../../../utils/datasource';\nimport { formValuesToRulerGrafanaRuleDTO, MINUTE } from '../../../utils/rule-form';\nimport { isGrafanaRulerRule } from '../../../utils/rules';\nimport { FileExportPreview } from '../../export/FileExportPreview';\nimport { GrafanaExportDrawer } from '../../export/GrafanaExportDrawer';\nimport { allGrafanaExportProviders, ExportFormats } from '../../export/providers';\nimport { AlertRuleNameInput } from '../AlertRuleNameInput';\nimport AnnotationsStep from '../AnnotationsStep';\nimport { GrafanaEvaluationBehavior } from '../GrafanaEvaluationBehavior';\nimport { NotificationsStep } from '../NotificationsStep';\nimport { QueryAndExpressionsStep } from '../query-and-alert-condition/QueryAndExpressionsStep';\n\ninterface ModifyExportRuleFormProps {\n alertUid: string;\n ruleForm?: RuleFormValues;\n}\n\nexport function ModifyExportRuleForm({ ruleForm, alertUid }: ModifyExportRuleFormProps) {\n const formAPI = useForm({\n mode: 'onSubmit',\n defaultValues: ruleForm,\n shouldFocusError: true,\n });\n const [queryParams] = useQueryParams();\n\n const existing = Boolean(ruleForm); // always should be true\n const notifyApp = useAppNotification();\n const returnTo = !queryParams['returnTo'] ? '/alerting/list' : String(queryParams['returnTo']);\n\n const [exportData, setExportData] = useState(undefined);\n\n const [conditionErrorMsg, setConditionErrorMsg] = useState('');\n const [evaluateEvery, setEvaluateEvery] = useState(ruleForm?.evaluateEvery ?? MINUTE);\n\n const onInvalid = (): void => {\n notifyApp.error('There are errors in the form. Please correct them and try again!');\n };\n\n const checkAlertCondition = (msg = '') => {\n setConditionErrorMsg(msg);\n };\n\n const submit = (exportData: RuleFormValues | undefined) => {\n if (conditionErrorMsg !== '') {\n notifyApp.error(conditionErrorMsg);\n return;\n }\n setExportData(exportData);\n };\n\n const onClose = useCallback(() => {\n setExportData(undefined);\n }, [setExportData]);\n\n const actionButtons = [\n submit(undefined)}>\n Cancel\n ,\n ,\n ];\n\n return (\n <>\n \n \n \n {exportData && }\n \n \n );\n}\n\nconst useGetGroup = (nameSpaceUID: string, group: string) => {\n const { dsFeatures } = useDataSourceFeatures(GRAFANA_RULES_SOURCE_NAME);\n\n const rulerConfig = dsFeatures?.rulerConfig;\n\n const targetGroup = useAsync(async () => {\n return rulerConfig ? await fetchRulerRulesGroup(rulerConfig, nameSpaceUID, group) : undefined;\n }, [rulerConfig, nameSpaceUID, group]);\n\n return targetGroup;\n};\n\ninterface GrafanaRuleDesignExportPreviewProps {\n exportFormat: ExportFormats;\n onClose: () => void;\n exportValues: RuleFormValues;\n uid: string;\n}\nexport const getPayloadToExport = (\n uid: string,\n formValues: RuleFormValues,\n existingGroup: RulerRuleGroupDTO | null | undefined\n): ModifyExportPayload => {\n const grafanaRuleDto = formValuesToRulerGrafanaRuleDTO(formValues);\n\n const updatedRule = { ...grafanaRuleDto, grafana_alert: { ...grafanaRuleDto.grafana_alert, uid: uid } };\n if (existingGroup?.rules) {\n // we have to update the rule in the group in the same position if it exists, otherwise we have to add it at the end\n let alreadyExistsInGroup = false;\n const updatedRules = existingGroup.rules.map((rule: RulerRuleDTO) => {\n if (isGrafanaRulerRule(rule) && rule.grafana_alert.uid === uid) {\n alreadyExistsInGroup = true;\n return updatedRule;\n } else {\n return rule;\n }\n });\n if (!alreadyExistsInGroup) {\n // we have to add the updated rule at the end of the group\n updatedRules.push(updatedRule);\n }\n return {\n ...existingGroup,\n rules: updatedRules,\n };\n } else {\n // we have to create a new group with the updated rule\n return {\n name: existingGroup?.name ?? '',\n rules: [updatedRule],\n };\n }\n};\n\nconst useGetPayloadToExport = (values: RuleFormValues, uid: string) => {\n const rulerGroupDto = useGetGroup(values.folder?.uid ?? '', values.group);\n const payload: ModifyExportPayload = useMemo(() => {\n return getPayloadToExport(uid, values, rulerGroupDto?.value);\n }, [uid, rulerGroupDto, values]);\n return { payload, loadingGroup: rulerGroupDto.loading };\n};\n\nconst GrafanaRuleDesignExportPreview = ({\n exportFormat,\n exportValues,\n onClose,\n uid,\n}: GrafanaRuleDesignExportPreviewProps) => {\n const [getExport, exportData] = alertRuleApi.endpoints.exportModifiedRuleGroup.useMutation();\n const { loadingGroup, payload } = useGetPayloadToExport(exportValues, uid);\n\n const nameSpaceUID = exportValues.folder?.uid ?? '';\n\n useEffect(() => {\n !loadingGroup && getExport({ payload, format: exportFormat, nameSpaceUID });\n }, [nameSpaceUID, exportFormat, payload, getExport, loadingGroup]);\n\n if (exportData.isLoading) {\n return ;\n }\n\n const downloadFileName = `modify-export-${payload.name}-${uid}-${new Date().getTime()}`;\n\n return (\n \n );\n};\n\ninterface GrafanaRuleDesignExporterProps {\n onClose: () => void;\n exportValues: RuleFormValues;\n uid: string;\n}\n\nexport const GrafanaRuleDesignExporter = React.memo(\n ({ onClose, exportValues, uid }: GrafanaRuleDesignExporterProps) => {\n const [activeTab, setActiveTab] = useState('yaml');\n\n return (\n \n \n \n );\n }\n);\n\nGrafanaRuleDesignExporter.displayName = 'GrafanaRuleDesignExporter';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { locationService } from '@grafana/runtime';\nimport { Alert, LoadingPlaceholder } from '@grafana/ui';\n\nimport { GrafanaRouteComponentProps } from '../../../../../core/navigation/types';\nimport { useDispatch } from '../../../../../types';\nimport { RuleIdentifier } from '../../../../../types/unified-alerting';\nimport { fetchEditableRuleAction, fetchRulesSourceBuildInfoAction } from '../../state/actions';\nimport { formValuesFromExistingRule } from '../../utils/rule-form';\nimport * as ruleId from '../../utils/rule-id';\nimport { isGrafanaRulerRule } from '../../utils/rules';\nimport { createUrl } from '../../utils/url';\nimport { AlertingPageWrapper } from '../AlertingPageWrapper';\nimport { ModifyExportRuleForm } from '../rule-editor/alert-rule-form/ModifyExportRuleForm';\n\ninterface GrafanaModifyExportProps extends GrafanaRouteComponentProps<{ id?: string }> {}\n\nexport default function GrafanaModifyExport({ match }: GrafanaModifyExportProps) {\n const dispatch = useDispatch();\n\n // Get rule source build info\n const [ruleIdentifier, setRuleIdentifier] = useState(undefined);\n\n useEffect(() => {\n const identifier = ruleId.tryParse(match.params.id, true);\n setRuleIdentifier(identifier);\n }, [match.params.id]);\n\n const { loading: loadingBuildInfo = true } = useAsync(async () => {\n if (ruleIdentifier) {\n await dispatch(fetchRulesSourceBuildInfoAction({ rulesSourceName: ruleIdentifier.ruleSourceName }));\n }\n }, [dispatch, ruleIdentifier]);\n\n // Get rule\n const {\n loading,\n value: alertRule,\n error,\n } = useAsync(async () => {\n if (!ruleIdentifier) {\n return;\n }\n return await dispatch(fetchEditableRuleAction(ruleIdentifier)).unwrap();\n }, [ruleIdentifier, loadingBuildInfo]);\n\n if (!ruleIdentifier) {\n return Rule not found
;\n }\n\n if (loading) {\n return ;\n }\n\n if (error) {\n return (\n \n {error.message}\n \n );\n }\n\n if (!alertRule && !loading && !loadingBuildInfo) {\n // alert rule does not exist\n return (\n \n locationService.replace(createUrl('/alerting/list'))}\n />\n \n );\n }\n\n if (alertRule && !isGrafanaRulerRule(alertRule.rule)) {\n // alert rule exists but is not a grafana-managed rule\n return (\n \n locationService.replace(createUrl('/alerting/list'))}\n />\n \n );\n }\n\n return (\n \n {alertRule && (\n \n )}\n \n );\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { TimeOptions } from '../../types/time';\n\nexport function PromDurationDocs() {\n const styles = useStyles2(getPromDurationStyles);\n return (\n \n Prometheus duration format consist of a number followed by a time unit.\n
\n Different units can be combined for more granularity.\n
\n
\n
\n
Symbol
\n
Time unit
\n
Example
\n
\n
\n
\n
\n
\n
\n
\n
Multiple units combined
\n
1m30s, 2h30m20s, 1w2d\n
\n
\n
{unit}
\n {name}
\n {example}\n \n );\n}\n\nconst getPromDurationStyles = (theme: GrafanaTheme2) => ({\n unit: css`\n font-weight: ${theme.typography.fontWeightBold};\n `,\n list: css`\n display: grid;\n grid-template-columns: max-content 1fr 2fr;\n gap: ${theme.spacing(1, 3)};\n `,\n header: css`\n display: contents;\n font-weight: ${theme.typography.fontWeightBold};\n `,\n examples: css`\n display: contents;\n & > div {\n grid-column: 1 / span 2;\n }\n `,\n});\n","import React from 'react';\n\nimport { Icon, Input } from '@grafana/ui';\n\nimport { HoverCard } from '../HoverCard';\n\nimport { PromDurationDocs } from './PromDurationDocs';\n\nexport const PromDurationInput = React.forwardRef>(\n (props, ref) => {\n return (\n } disabled={false}>\n \n \n }\n {...props}\n ref={ref}\n />\n );\n }\n);\n\nPromDurationInput.displayName = 'PromDurationInput';\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport const getFormStyles = (theme: GrafanaTheme2) => {\n return {\n container: css`\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n\n & > * + * {\n margin-left: ${theme.spacing(1)};\n }\n `,\n input: css`\n flex: 1;\n `,\n promDurationInput: css`\n max-width: ${theme.spacing(32)};\n `,\n timingFormContainer: css`\n padding: ${theme.spacing(1)};\n `,\n linkText: css`\n text-decoration: underline;\n `,\n collapse: css`\n border: none;\n background: none;\n color: ${theme.colors.text.primary};\n `,\n };\n};\n","export const routeTimingsFields = {\n groupWait: {\n label: 'Group wait',\n description:\n 'The waiting time until the initial notification is sent for a new group created by an incoming alert. If empty it will be inherited from the parent policy.',\n ariaLabel: 'Group wait value',\n },\n groupInterval: {\n label: 'Group interval',\n description:\n 'The waiting time to send a batch of new alerts for that group after the first notification was sent. If empty it will be inherited from the parent policy.',\n ariaLabel: 'Group interval value',\n },\n repeatInterval: {\n label: 'Repeat interval',\n description: 'The waiting time to resend an alert after they have successfully been sent.',\n ariaLabel: 'Repeat interval value',\n },\n};\n","export type TimingOptions = {\n group_wait?: string;\n group_interval?: string;\n repeat_interval?: string;\n};\n\nexport const TIMING_OPTIONS_DEFAULTS: Required = {\n group_wait: '30s',\n group_interval: '5m',\n repeat_interval: '4h',\n};\n","import React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { Field, Input, Text } from '@grafana/ui';\n\nimport { RuleFormType, RuleFormValues } from '../../types/rule-form';\n\nimport { RuleEditorSection } from './RuleEditorSection';\n\nconst recordingRuleNameValidationPattern = {\n message:\n 'Recording rule name must be valid metric name. It may only contain letters, numbers, and colons. It may not contain whitespace.',\n value: /^[a-zA-Z_:][a-zA-Z0-9_:]*$/,\n};\n\nexport const AlertRuleNameInput = () => {\n const {\n register,\n watch,\n formState: { errors },\n } = useFormContext();\n\n const ruleFormType = watch('type');\n const entityName = ruleFormType === RuleFormType.cloudRecording ? 'recording rule' : 'alert rule';\n\n return (\n \n Enter a name to identify your {entityName}.\n \n }\n >\n \n \n \n \n );\n};\n","import React from 'react';\n\nimport { Stack } from '@grafana/ui';\n\nimport { ContactPointReceiverTitleRow } from '../../../../contact-points/ContactPoints';\nimport { RECEIVER_META_KEY, RECEIVER_PLUGIN_META_KEY } from '../../../../contact-points/useContactPoints';\nimport { ReceiverConfigWithMetadata, getReceiverDescription } from '../../../../contact-points/utils';\n\ninterface ContactPointDetailsProps {\n receivers: ReceiverConfigWithMetadata[];\n}\n\nexport const ContactPointDetails = ({ receivers }: ContactPointDetailsProps) => {\n return (\n \n \n {receivers.map((receiver, index) => {\n const metadata = receiver[RECEIVER_META_KEY];\n const pluginMetadata = receiver[RECEIVER_PLUGIN_META_KEY];\n const key = metadata.name + index;\n return (\n \n );\n })}\n
\n \n );\n};\n","import { css, cx } from '@emotion/css';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport {\n ActionMeta,\n Field,\n FieldValidationMessage,\n IconButton,\n InputControl,\n Select,\n Stack,\n TextLink,\n useStyles2,\n} from '@grafana/ui';\nimport { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';\nimport { createUrl } from 'app/features/alerting/unified/utils/url';\n\nimport { ContactPointWithMetadata } from '../../../../contact-points/utils';\n\nexport interface ContactPointSelectorProps {\n alertManager: string;\n options: Array<{\n label: string;\n value: ContactPointWithMetadata;\n description: React.JSX.Element;\n }>;\n onSelectContactPoint: (contactPoint?: ContactPointWithMetadata) => void;\n refetchReceivers: () => Promise;\n}\n\nconst MAX_CONTACT_POINTS_RENDERED = 500;\n\nexport function ContactPointSelector({\n alertManager,\n options,\n onSelectContactPoint,\n refetchReceivers,\n}: ContactPointSelectorProps) {\n const styles = useStyles2(getStyles);\n const { control, watch, trigger } = useFormContext();\n\n const contactPointInForm = watch(`contactPoints.${alertManager}.selectedContactPoint`);\n\n const selectedContactPointWithMetadata = options.find((option) => option.value.name === contactPointInForm)?.value;\n const selectedContactPointSelectableValue: SelectableValue =\n selectedContactPointWithMetadata\n ? { value: selectedContactPointWithMetadata, label: selectedContactPointWithMetadata.name }\n : { value: undefined, label: '' };\n\n const LOADING_SPINNER_DURATION = 1000;\n\n const [loadingContactPoints, setLoadingContactPoints] = useState(false);\n // we need to keep track if the fetching takes more than 1 second, so we can show the loading spinner until the fetching is done\n const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));\n\n // if we have a contact point selected, check if it still exists in the event that someone has deleted it\n const validateContactPoint = useCallback(() => {\n if (contactPointInForm) {\n trigger(`contactPoints.${alertManager}.selectedContactPoint`, { shouldFocus: true });\n }\n }, [alertManager, contactPointInForm, trigger]);\n\n const onClickRefresh = () => {\n setLoadingContactPoints(true);\n Promise.all([refetchReceivers(), sleep(LOADING_SPINNER_DURATION)]).finally(() => {\n setLoadingContactPoints(false);\n validateContactPoint();\n });\n };\n\n // validate the contact point and check if it still exists when mounting the component\n useEffect(() => {\n validateContactPoint();\n }, [validateContactPoint]);\n\n return (\n \n \n \n (\n <>\n \n
\n virtualized={options.length > MAX_CONTACT_POINTS_RENDERED}\n aria-label=\"Contact point\"\n defaultValue={selectedContactPointSelectableValue}\n onChange={(value: SelectableValue, _: ActionMeta) => {\n onChange(value?.value?.name);\n onSelectContactPoint(value?.value);\n }}\n // We are passing a JSX.Element into the \"description\" for options, which isn't how the TS typings are defined.\n // The regular Select component will render it just fine, but we can't update the typings because SelectableValue\n // is shared with other components where the \"description\" _has_ to be a string.\n // I've tried unsuccessfully to separate the typings just I'm giving up :'(\n // @ts-ignore\n options={options}\n width={50}\n />\n \n \n \n
\n \n \n
\n )}\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n switchElement: css({\n flexFlow: 'row-reverse',\n gap: theme.spacing(1),\n alignItems: 'center',\n }),\n optionalContent: css({\n marginLeft: '49px',\n marginBottom: theme.spacing(1),\n }),\n});\n","import { css } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Alert, CollapsableSection, LoadingPlaceholder, Stack, useStyles2 } from '@grafana/ui';\nimport { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';\nimport { AlertManagerDataSource } from 'app/features/alerting/unified/utils/datasource';\n\nimport { ContactPointReceiverSummary } from '../../../contact-points/ContactPoints';\nimport { useContactPointsWithStatus } from '../../../contact-points/useContactPoints';\nimport { ContactPointWithMetadata } from '../../../contact-points/utils';\n\nimport { ContactPointDetails } from './contactPoint/ContactPointDetails';\nimport { ContactPointSelector } from './contactPoint/ContactPointSelector';\nimport { MuteTimingFields } from './route-settings/MuteTimingFields';\nimport { RoutingSettings } from './route-settings/RouteSettings';\n\ninterface AlertManagerManualRoutingProps {\n alertManager: AlertManagerDataSource;\n}\n\nexport function AlertManagerManualRouting({ alertManager }: AlertManagerManualRoutingProps) {\n const styles = useStyles2(getStyles);\n\n const alertManagerName = alertManager.name;\n const {\n isLoading,\n error: errorInContactPointStatus,\n contactPoints,\n refetchReceivers,\n } = useContactPointsWithStatus({ includePoliciesCount: false, receiverStatusPollingInterval: 0 });\n const [selectedContactPointWithMetadata, setSelectedContactPointWithMetadata] = useState<\n ContactPointWithMetadata | undefined\n >();\n\n const onSelectContactPoint = (contactPoint?: ContactPointWithMetadata) => {\n setSelectedContactPointWithMetadata(contactPoint);\n };\n\n const { watch } = useFormContext();\n const hasRouteSettings =\n watch(`contactPoints.${alertManagerName}.overrideGrouping`) ||\n watch(`contactPoints.${alertManagerName}.overrideTimings`) ||\n watch(`contactPoints.${alertManagerName}.muteTimeIntervals`)?.length > 0;\n\n const options = contactPoints.map((receiver) => {\n const integrations = receiver?.grafana_managed_receiver_configs;\n const description = ;\n\n return { label: receiver.name, value: receiver, description };\n });\n\n if (errorInContactPointStatus) {\n return ;\n }\n if (isLoading) {\n return ;\n }\n return (\n \n \n \n \n Alert manager:\n
\n {alertManagerName}\n
\n \n \n \n \n \n \n
\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n firstAlertManagerLine: css({\n height: 1,\n width: theme.spacing(4),\n backgroundColor: theme.colors.secondary.main,\n }),\n alertManagerName: css({\n with: 'fit-content',\n }),\n secondAlertManagerLine: css({\n height: '1px',\n width: '100%',\n flex: 1,\n backgroundColor: theme.colors.secondary.main,\n }),\n img: css({\n marginLeft: theme.spacing(2),\n width: theme.spacing(3),\n height: theme.spacing(3),\n marginRight: theme.spacing(1),\n }),\n collapsableSection: css({\n width: 'fit-content',\n fontSize: theme.typography.body.fontSize,\n }),\n routingSection: css({\n display: 'flex',\n flexDirection: 'column',\n maxWidth: theme.breakpoints.values.xl,\n border: `solid 1px ${theme.colors.border.weak}`,\n borderRadius: theme.shape.radius.default,\n padding: `${theme.spacing(1)} ${theme.spacing(2)}`,\n marginTop: theme.spacing(2),\n }),\n});\n","import React, { useMemo } from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';\nimport { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';\nimport { getAlertManagerDataSourcesByPermission } from 'app/features/alerting/unified/utils/datasource';\n\nimport { AlertManagerManualRouting } from './AlertManagerRouting';\n\nexport function SimplifiedRouting() {\n const { getValues } = useFormContext();\n const contactPointsInAlert = getValues('contactPoints');\n\n const allAlertManagersByPermission = getAlertManagerDataSourcesByPermission('notification');\n\n // We decided to only show internal alert manager for now. Once we want to show external alert managers we can use this code\n // const alertManagersDataSources = allAlertManagersByPermission.availableInternalDataSources.concat(\n // allAlertManagersByPermission.availableExternalDataSources\n // );\n\n const alertManagersDataSources = allAlertManagersByPermission.availableInternalDataSources;\n\n const alertManagersDataSourcesWithConfigAPI = alertManagersDataSources.filter((am) => am.hasConfigurationAPI);\n\n // we merge the selected contact points data for each alert manager, with the alert manager meta data\n const alertManagersWithSelectedContactPoints = useMemo(\n () =>\n alertManagersDataSourcesWithConfigAPI.map((am) => {\n const selectedContactPoint = contactPointsInAlert ? contactPointsInAlert[am.name] : undefined;\n return {\n alertManager: am,\n selectedContactPoint: selectedContactPoint?.selectedContactPoint ?? '',\n routeSettings: {\n muteTimeIntervals: selectedContactPoint?.muteTimeIntervals ?? [],\n overrideGrouping: selectedContactPoint?.overrideGrouping ?? false,\n groupBy: selectedContactPoint?.groupBy ?? [],\n overrideTimings: selectedContactPoint?.overrideTimings ?? false,\n groupWaitValue: selectedContactPoint?.groupWaitValue ?? '',\n groupIntervalValue: selectedContactPoint?.groupIntervalValue ?? '',\n repeatIntervalValue: selectedContactPoint?.repeatIntervalValue ?? '',\n },\n };\n }),\n [alertManagersDataSourcesWithConfigAPI, contactPointsInAlert]\n );\n\n return alertManagersWithSelectedContactPoints.map((alertManagerContactPoint, index) => {\n return (\n \n \n \n );\n });\n}\n","import { css } from '@emotion/css';\nimport { compact } from 'lodash';\nimport React, { lazy, Suspense } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, LoadingPlaceholder, Text, useStyles2 } from '@grafana/ui';\nimport { alertRuleApi } from 'app/features/alerting/unified/api/alertRuleApi';\nimport { Stack } from 'app/plugins/datasource/parca/QueryEditor/Stack';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { useGetAlertManagerDataSourcesByPermissionAndConfig } from '../../../utils/datasource';\nimport { Folder } from '../RuleFolderPicker';\n\nconst NotificationPreviewByAlertManager = lazy(() => import('./NotificationPreviewByAlertManager'));\n\ninterface NotificationPreviewProps {\n customLabels: Array<{\n key: string;\n value: string;\n }>;\n alertQueries: AlertQuery[];\n condition: string | null;\n folder: Folder | null;\n alertName?: string;\n alertUid?: string;\n}\n\n// TODO the scroll position keeps resetting when we preview\n// this is to be expected because the list of routes dissapears as we start the request but is very annoying\nexport const NotificationPreview = ({\n alertQueries,\n customLabels,\n condition,\n folder,\n alertName,\n alertUid,\n}: NotificationPreviewProps) => {\n const styles = useStyles2(getStyles);\n const disabled = !condition || !folder;\n\n const previewEndpoint = alertRuleApi.endpoints.preview;\n\n const [trigger, { data = [], isLoading, isUninitialized: previewUninitialized }] = previewEndpoint.useMutation();\n\n // potential instances are the instances that are going to be routed to the notification policies\n // convert data to list of labels: are the representation of the potential instances\n const potentialInstances = compact(data.flatMap((label) => label?.labels));\n\n const onPreview = () => {\n if (!folder || !condition) {\n return;\n }\n\n // Get the potential labels given the alert queries, the condition and the custom labels (autogenerated labels are calculated on the BE side)\n trigger({\n alertQueries: alertQueries,\n condition: condition,\n customLabels: customLabels,\n folder: folder,\n alertName: alertName,\n alertUid: alertUid,\n });\n };\n\n // Get alert managers's data source information\n const alertManagerDataSources = useGetAlertManagerDataSourcesByPermissionAndConfig('notification');\n\n const onlyOneAM = alertManagerDataSources.length === 1;\n\n return (\n \n \n
\n Alert instance routing preview\n {isLoading && previewUninitialized && (\n \n Loading...\n \n )}\n {previewUninitialized ? (\n \n When you have your folder selected and your query and labels are configured, click "Preview\n routing" to see the results here.\n \n ) : (\n \n Based on the labels added, alert instances are routed to the following notification policies. Expand each\n notification policy below to view more details.\n \n )}\n
\n
\n \n
\n
\n Notifications\n \n Select who should receive a notification when an alert rule fires.\n \n
\n )}\n {shouldAllowSimplifiedRouting ? ( // when simplified routing is enabled and is grafana rule\n \n ) : // when simplified routing is not enabled, render the notification preview as we did before\n shouldRenderpreview ? (\n \n ) : null}\n \n );\n};\n\n/**\n * Preconditions:\n * - simplified routing is enabled\n * - the alert rule is a grafana rule\n *\n * This component will render the switch between the select contact point routing and the notification policy routing.\n * It also renders the section body of the NotificationsStep, depending on the routing option selected.\n * If select contact point routing is selected, it will render the SimplifiedRouting component.\n * If notification policy routing is selected, it will render the AutomaticRouting component.\n *\n */\nfunction ManualAndAutomaticRouting({ alertUid }: { alertUid?: string }) {\n const { watch, setValue } = useFormContext();\n const styles = useStyles2(getStyles);\n\n const [manualRouting] = watch(['manualRouting']);\n\n const routingOptions = [\n { label: 'Select contact point', value: RoutingOptions.ContactPoint },\n { label: 'Use notification policy', value: RoutingOptions.NotificationPolicy },\n ];\n\n const onRoutingOptionChange = (option: RoutingOptions) => {\n setValue('manualRouting', option === RoutingOptions.ContactPoint);\n };\n\n return (\n \n \n \n \n\n \n\n {manualRouting ? : }\n \n );\n}\n\ninterface AutomaticRootingProps {\n alertUid?: string;\n}\n\nfunction AutomaticRooting({ alertUid }: AutomaticRootingProps) {\n const { watch } = useFormContext();\n const [labels, queries, condition, folder, alertName] = watch([\n 'labels',\n 'queries',\n 'condition',\n 'folder',\n 'name',\n 'manualRouting',\n ]);\n return (\n \n );\n}\n\n// Auxiliar components to build the texts and descriptions in the NotificationsStep\nfunction NeedHelpInfoForNotificationPolicy() {\n return (\n \n \n <>\n Firing alert rule instances are routed to notification policies based on matching labels. All alert rules\n and instances, irrespective of their labels, match the default notification policy. If there are no nested\n policies, or no nested policies match the labels in the alert rule or alert instance, then the default\n notification policy is the matching policy.\n \n \n \n Read about notification routing. \n \n \n \n \n <>\n Custom labels change the way your notifications are routed. First, add labels to your alert rule and then\n connect them to your notification policy by adding label matchers.\n \n \n \n Read about Labels and annotations. \n \n \n \n \n }\n title=\"Notification routing\"\n />\n );\n}\n\nfunction NeedHelpInfoForContactpoint() {\n return (\n \n Select a contact point to notify all recipients in it.\n
\n
\n Notifications for firing alert instances are grouped based on folder and alert rule name.\n
\n The waiting time until the initial notification is sent for a new group created by an incoming alert is 30\n seconds.\n
\n The waiting time to send a batch of new alerts for that group after the first notification was sent is 5\n minutes.\n
\n The waiting time to resend an alert after they have successfully been sent is 4 hours.\n
\n Grouping and wait time values are defined in your default notification policy.\n \n }\n // todo: update the link with the new documentation about simplified routing\n externalLink=\"`https://grafana.com/docs/grafana/latest/alerting/fundamentals/notification-policies/notifications/`\"\n linkText=\"Read more about notifiying contact points\"\n title=\"Notify contact points\"\n />\n );\n}\ninterface NotificationsStepDescriptionProps {\n manualRouting: boolean;\n}\n\nexport const RoutingOptionDescription = ({ manualRouting }: NotificationsStepDescriptionProps) => {\n const styles = useStyles2(getStyles);\n return (\n \n \n {manualRouting\n ? 'Notifications for firing alerts are routed to a selected contact point.'\n : 'Notifications for firing alerts are routed to contact points based on matching labels and the notification policy tree.'}\n \n {manualRouting ? : }\n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n routingOptions: css({\n marginTop: theme.spacing(2),\n width: 'fit-content',\n }),\n configureNotifications: css({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n marginTop: theme.spacing(2),\n }),\n notificationsOptionDescription: css({\n marginTop: theme.spacing(1),\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'baseline',\n gap: theme.spacing(0.5),\n }),\n});\n","import { PanelData } from '@grafana/data';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { RuleFormType } from './rule-form';\n\nexport type PreviewRuleRequest = GrafanaPreviewRuleRequest | CloudPreviewRuleRequest;\n\nexport type GrafanaPreviewRuleRequest = {\n grafana_condition: {\n condition: string;\n data: AlertQuery[];\n now: string;\n };\n};\n\nexport type CloudPreviewRuleRequest = {\n dataSourceUid: string;\n dataSourceName: string;\n expr: string;\n};\n\nexport type PreviewRuleResponse = {\n ruleType: RuleFormType;\n data: PanelData;\n};\n\nexport function isCloudPreviewRequest(request: PreviewRuleRequest): request is CloudPreviewRuleRequest {\n return 'expr' in request;\n}\n\nexport function isGrafanaPreviewRequest(request: PreviewRuleRequest): request is GrafanaPreviewRuleRequest {\n return 'grafana_condition' in request;\n}\n","import { Observable, of } from 'rxjs';\nimport { catchError, map, share } from 'rxjs/operators';\n\nimport {\n dataFrameFromJSON,\n DataFrameJSON,\n getDefaultTimeRange,\n LoadingState,\n PanelData,\n withLoadingIndicator,\n} from '@grafana/data';\nimport { getBackendSrv, toDataQueryError } from '@grafana/runtime';\n\nimport {\n isCloudPreviewRequest,\n isGrafanaPreviewRequest,\n PreviewRuleRequest,\n PreviewRuleResponse,\n} from '../types/preview';\nimport { RuleFormType } from '../types/rule-form';\nimport { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';\n\nexport function previewAlertRule(request: PreviewRuleRequest): Observable {\n if (isCloudPreviewRequest(request)) {\n return fetchAlertRulePreview(request, request.dataSourceUid, RuleFormType.cloudAlerting);\n }\n\n if (isGrafanaPreviewRequest(request)) {\n return fetchAlertRulePreview(request, GRAFANA_RULES_SOURCE_NAME, RuleFormType.grafana);\n }\n\n throw new Error('unsupported preview rule request');\n}\n\ntype AlertRulePreviewResponse = {\n instances: DataFrameJSON[];\n};\n\nfunction fetchAlertRulePreview(\n request: PreviewRuleRequest,\n dataSourceUid: string,\n ruleType: RuleFormType\n): Observable {\n return withLoadingIndicator({\n whileLoading: createResponse(ruleType),\n source: getBackendSrv()\n .fetch({\n method: 'POST',\n url: `/api/v1/rule/test/${dataSourceUid}`,\n data: request,\n })\n .pipe(\n map(({ data }) => {\n return createResponse(ruleType, {\n state: LoadingState.Done,\n series: data.instances.map(dataFrameFromJSON),\n });\n }),\n catchError((error: Error) => {\n return of(\n createResponse(ruleType, {\n state: LoadingState.Error,\n error: toDataQueryError(error),\n })\n );\n }),\n share()\n ),\n });\n}\n\nfunction createResponse(ruleType: RuleFormType, data: Partial = {}): PreviewRuleResponse {\n return {\n ruleType,\n data: {\n state: LoadingState.Loading,\n series: [],\n timeRange: getDefaultTimeRange(),\n ...data,\n },\n };\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { FieldConfigSource, FieldMatcherID, GrafanaTheme2, LoadingState } from '@grafana/data';\nimport { PanelRenderer } from '@grafana/runtime';\nimport { TableCellDisplayMode, useStyles2 } from '@grafana/ui';\n\nimport { PreviewRuleResponse } from '../../types/preview';\nimport { RuleFormType } from '../../types/rule-form';\nimport { messageFromError } from '../../utils/redux';\n\ntype Props = {\n preview: PreviewRuleResponse | undefined;\n};\n\nexport function PreviewRuleResult(props: Props): React.ReactElement | null {\n const { preview } = props;\n const styles = useStyles2(getStyles);\n const fieldConfig: FieldConfigSource = {\n defaults: {},\n overrides: [\n {\n matcher: { id: FieldMatcherID.byName, options: 'Info' },\n properties: [{ id: 'custom.displayMode', value: TableCellDisplayMode.JSONView }],\n },\n ],\n };\n\n if (!preview) {\n return null;\n }\n\n const { data, ruleType } = preview;\n\n if (data.state === LoadingState.Loading) {\n return (\n \n Loading preview...\n
\n );\n }\n\n if (data.state === LoadingState.Error) {\n return (\n \n {data.error ? messageFromError(data.error) : 'Failed to preview alert rule'}\n
\n );\n }\n return (\n \n
\n Preview based on the result of running the query, for this moment.{' '}\n {ruleType === RuleFormType.grafana ? 'Configuration for `no data` and `error handling` is not applied.' : null}\n \n
\n
\n {({ width, height }) => (\n \n )}\n \n
\n
\n
\n {allDataSourcesAvailable && (\n \n )}\n {!allDataSourcesAvailable && (\n \n Cannot display the query preview. Some of the data sources used in the queries are not available.\n \n )}\n \n
\n
\n \n Alerts preview
\n Preview based on the result of running the query for this moment.\n \n \n \n | State | \n Labels | \n Info | \n
\n \n \n {alertPreview.instances.map(({ state, info, labels }, index) => {\n const instanceTags = labelsToTags(labels);\n\n return (\n \n | {} | \n \n \n | \n \n {info && (\n \n \n \n )}\n | \n
\n );\n })}\n \n
\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n table: css`\n width: 100%;\n margin: ${theme.spacing(2, 0)};\n\n caption {\n caption-side: top;\n color: ${theme.colors.text.primary};\n\n & > span {\n font-size: ${theme.typography.bodySmall.fontSize};\n color: ${theme.colors.text.secondary};\n }\n }\n\n td,\n th {\n padding: ${theme.spacing(1, 1)};\n }\n\n td + td,\n th + th {\n padding-left: ${theme.spacing(3)};\n }\n\n thead th {\n &:nth-child(1) {\n width: 80px;\n }\n\n &:nth-child(2) {\n width: auto;\n }\n\n &:nth-child(3) {\n width: 40px;\n }\n }\n\n td:nth-child(3) {\n text-align: center;\n }\n\n tbody tr:nth-child(2n + 1) {\n background-color: ${theme.colors.background.secondary};\n }\n `,\n tagList: css`\n justify-content: flex-start;\n `,\n});\n","import { css } from '@emotion/css';\nimport { noop } from 'lodash';\nimport React, { useCallback, useMemo } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { CoreApp, DataQuery, DataSourcePluginContextProvider, GrafanaTheme2, LoadingState } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { Alert, Button, useStyles2 } from '@grafana/ui';\nimport { LokiQuery } from 'app/plugins/datasource/loki/types';\nimport { PromQuery } from 'app/plugins/datasource/prometheus/types';\n\nimport { CloudAlertPreview } from './CloudAlertPreview';\nimport { usePreview } from './PreviewRule';\n\nexport interface ExpressionEditorProps {\n value?: string;\n onChange: (value: string) => void;\n dataSourceName: string; // will be a prometheus or loki datasource\n showPreviewAlertsButton: boolean;\n}\n\nexport const ExpressionEditor = ({\n value,\n onChange,\n dataSourceName,\n showPreviewAlertsButton = true,\n}: ExpressionEditorProps) => {\n const styles = useStyles2(getStyles);\n\n const { mapToValue, mapToQuery } = useQueryMappers(dataSourceName);\n const dataQuery = mapToQuery({ refId: 'A', hide: false }, value);\n\n const {\n error,\n loading,\n value: dataSource,\n } = useAsync(() => {\n return getDataSourceSrv().get(dataSourceName);\n }, [dataSourceName]);\n\n const onChangeQuery = useCallback(\n (query: DataQuery) => {\n onChange(mapToValue(query));\n },\n [onChange, mapToValue]\n );\n\n const [alertPreview, onPreview] = usePreview();\n\n const onRunQueriesClick = async () => {\n onPreview();\n };\n\n if (loading || dataSource?.name !== dataSourceName) {\n return null;\n }\n\n const dsi = getDataSourceSrv().getInstanceSettings(dataSourceName);\n\n if (error || !dataSource || !dataSource?.components?.QueryEditor || !dsi) {\n const errorMessage = error?.message || 'Data source plugin does not export any Query Editor component';\n return Could not load query editor due to: {errorMessage}
;\n }\n\n const previewLoaded = alertPreview?.data.state === LoadingState.Done;\n\n const QueryEditor = dataSource?.components?.QueryEditor;\n\n // The Preview endpoint returns the preview as a single-element array of data frames\n const previewDataFrame = alertPreview?.data?.series?.find((s) => s.name === 'evaluation results');\n // The preview API returns arrays with empty elements when there are no firing alerts\n const previewHasAlerts = previewDataFrame && previewDataFrame.fields.some((field) => field.values.length > 0);\n\n return (\n <>\n \n \n \n {showPreviewAlertsButton && (\n \n
\n Preview alerts\n \n {previewLoaded && !previewHasAlerts && (\n \n There are no firing alerts for your query.\n \n )}\n {previewHasAlerts && }\n \n {expressionQueries.map((query) => {\n const data = panelData[query.refId];\n\n const isAlertCondition = condition === query.refId;\n const error = data ? errorFromPreviewData(data) : undefined;\n const warning = data ? warningFromSeries(data.series) : undefined;\n\n return (\n \n );\n })}\n
\n );\n};\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css`\n display: flex;\n gap: ${theme.spacing(2)};\n align-content: stretch;\n flex-wrap: wrap;\n `,\n});\n","import { css } from '@emotion/css';\nimport React, { useState } from 'react';\n\nimport { dateTime, getDefaultRelativeTimeRange, GrafanaTheme2, RelativeTimeRange } from '@grafana/data';\nimport { relativeToTimeRange } from '@grafana/data/src/datetime/rangeutil';\nimport { clearButtonStyles, Icon, InlineField, RelativeTimeRangePicker, Toggletip, useStyles2 } from '@grafana/ui';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { AlertQueryOptions, MaxDataPointsOption, MinIntervalOption } from './QueryWrapper';\n\nexport interface QueryOptionsProps {\n query: AlertQuery;\n queryOptions: AlertQueryOptions;\n onChangeTimeRange?: (timeRange: RelativeTimeRange, index: number) => void;\n onChangeQueryOptions: (options: AlertQueryOptions, index: number) => void;\n index: number;\n}\n\nexport const QueryOptions = ({\n query,\n queryOptions,\n onChangeTimeRange,\n onChangeQueryOptions,\n index,\n}: QueryOptionsProps) => {\n const styles = useStyles2(getStyles);\n\n const [showOptions, setShowOptions] = useState(false);\n\n const timeRange = query.relativeTimeRange ? relativeToTimeRange(query.relativeTimeRange) : undefined;\n\n return (\n <>\n \n {onChangeTimeRange && (\n \n onChangeTimeRange(range, index)}\n />\n \n )}\n onChangeQueryOptions(options, index)} />\n onChangeQueryOptions(options, index)} />\n \n }\n closeButton={true}\n placement=\"bottom-start\"\n >\n \n \n\n \n {dateTime(timeRange?.from).locale('en').fromNow(true)}\n {queryOptions.maxDataPoints && , MD = {queryOptions.maxDataPoints}}\n {queryOptions.minInterval && , Min. Interval = {queryOptions.minInterval}}\n
\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n const clearButton = clearButtonStyles(theme);\n\n return {\n queryOptions: css`\n > div {\n justify-content: space-between;\n }\n `,\n\n staticValues: css`\n color: ${theme.colors.text.secondary};\n margin-right: ${theme.spacing(1)};\n `,\n\n actionLink: css`\n ${clearButton};\n color: ${theme.colors.text.link};\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n `,\n };\n};\n","import { css } from '@emotion/css';\nimport { cloneDeep } from 'lodash';\nimport React, { ChangeEvent, useState } from 'react';\n\nimport {\n CoreApp,\n DataSourceApi,\n DataSourceInstanceSettings,\n GrafanaTheme2,\n LoadingState,\n PanelData,\n RelativeTimeRange,\n ThresholdsConfig,\n} from '@grafana/data';\nimport { DataQuery } from '@grafana/schema';\nimport { GraphThresholdsStyleMode, Icon, InlineField, Input, Tooltip, useStyles2, Stack } from '@grafana/ui';\nimport { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { msToSingleUnitDuration } from '../../utils/time';\nimport { ExpressionStatusIndicator } from '../expressions/ExpressionStatusIndicator';\n\nimport { QueryOptions } from './QueryOptions';\nimport { VizWrapper } from './VizWrapper';\n\nexport const DEFAULT_MAX_DATA_POINTS = 43200;\nexport const DEFAULT_MIN_INTERVAL = '1s';\n\nexport interface AlertQueryOptions {\n maxDataPoints?: number | undefined;\n minInterval?: string | undefined;\n}\n\ninterface Props {\n data: PanelData;\n error?: Error;\n query: AlertQuery;\n queries: AlertQuery[];\n dsSettings: DataSourceInstanceSettings;\n onChangeDataSource: (settings: DataSourceInstanceSettings, index: number) => void;\n onChangeQuery: (query: DataQuery, index: number) => void;\n onChangeTimeRange?: (timeRange: RelativeTimeRange, index: number) => void;\n onRemoveQuery: (query: DataQuery) => void;\n onDuplicateQuery: (query: AlertQuery) => void;\n onRunQueries: () => void;\n index: number;\n thresholds: ThresholdsConfig;\n thresholdsType?: GraphThresholdsStyleMode;\n onChangeThreshold?: (thresholds: ThresholdsConfig, index: number) => void;\n condition: string | null;\n onSetCondition: (refId: string) => void;\n onChangeQueryOptions: (options: AlertQueryOptions, index: number) => void;\n}\n\nexport const QueryWrapper = ({\n data,\n error,\n dsSettings,\n index,\n onChangeDataSource,\n onChangeQuery,\n onChangeTimeRange,\n onRunQueries,\n onRemoveQuery,\n onDuplicateQuery,\n query,\n queries,\n thresholds,\n thresholdsType,\n onChangeThreshold,\n condition,\n onSetCondition,\n onChangeQueryOptions,\n}: Props) => {\n const styles = useStyles2(getStyles);\n const [dsInstance, setDsInstance] = useState();\n const defaults = dsInstance?.getDefaultQuery ? dsInstance.getDefaultQuery(CoreApp.UnifiedAlerting) : {};\n\n const queryWithDefaults = {\n ...defaults,\n ...cloneDeep(query.model),\n };\n\n function SelectingDataSourceTooltip() {\n const styles = useStyles2(getStyles);\n return (\n \n \n Not finding the data source you want? Some data sources are not supported for alerting. Click on the icon\n for more information.\n \n }\n >\n \n window.open(\n ' https://grafana.com/docs/grafana/latest/alerting/fundamentals/data-source-alerting/',\n '_blank'\n )\n }\n />\n \n
\n );\n }\n\n // TODO add a warning label here too when the data looks like time series data and is used as an alert condition\n function HeaderExtras({ query, error, index }: { query: AlertQuery; error?: Error; index: number }) {\n const queryOptions: AlertQueryOptions = {\n maxDataPoints: query.model.maxDataPoints,\n minInterval: query.model.intervalMs ? msToSingleUnitDuration(query.model.intervalMs) : undefined,\n };\n const alertQueryOptions: AlertQueryOptions = {\n maxDataPoints: queryOptions.maxDataPoints,\n minInterval: queryOptions.minInterval,\n };\n\n const isAlertCondition = condition === query.refId;\n\n return (\n \n \n \n onSetCondition(query.refId)} isCondition={isAlertCondition} />\n \n );\n }\n\n const showVizualisation = data.state !== LoadingState.NotStarted;\n // ⚠️ the query editors want the entire array of queries passed as \"DataQuery\" NOT \"AlertQuery\"\n // TypeScript isn't complaining here because the interfaces just happen to be compatible\n const editorQueries = cloneDeep(queries.map((query) => query.model));\n\n return (\n \n \n \n alerting\n collapsable={false}\n dataSource={dsSettings}\n onDataSourceLoaded={setDsInstance}\n onChangeDataSource={(settings) => onChangeDataSource(settings, index)}\n id={query.refId}\n index={index}\n key={query.refId}\n data={data}\n query={queryWithDefaults}\n onChange={(query) => onChangeQuery(query, index)}\n onRemoveQuery={onRemoveQuery}\n onAddQuery={() => onDuplicateQuery(cloneDeep(query))}\n onRunQuery={onRunQueries}\n queries={editorQueries}\n renderHeaderExtras={() => }\n app={CoreApp.UnifiedAlerting}\n hideDisableQuery={true}\n />\n
\n {showVizualisation && (\n onChangeThreshold(thresholds, index) : undefined}\n />\n )}\n \n );\n};\n\nexport const EmptyQueryWrapper = ({ children }: React.PropsWithChildren<{}>) => {\n const styles = useStyles2(getStyles);\n return {children}
;\n};\n\nexport function MaxDataPointsOption({\n options,\n onChange,\n}: {\n options: AlertQueryOptions;\n onChange: (options: AlertQueryOptions) => void;\n}) {\n const value = options.maxDataPoints ?? '';\n\n const onMaxDataPointsBlur = (event: ChangeEvent) => {\n const maxDataPointsNumber = parseInt(event.target.value, 10);\n\n const maxDataPoints = isNaN(maxDataPointsNumber) || maxDataPointsNumber === 0 ? undefined : maxDataPointsNumber;\n\n if (maxDataPoints !== options.maxDataPoints) {\n onChange({\n ...options,\n maxDataPoints,\n });\n }\n };\n\n return (\n \n \n \n );\n}\n\nexport function MinIntervalOption({\n options,\n onChange,\n}: {\n options: AlertQueryOptions;\n onChange: (options: AlertQueryOptions) => void;\n}) {\n const value = options.minInterval ?? '';\n\n const onMinIntervalBlur = (event: ChangeEvent) => {\n const minInterval = event.target.value;\n if (minInterval !== value) {\n onChange({\n ...options,\n minInterval,\n });\n }\n };\n\n return (\n \n Interval sent to the data source. Recommended to be set to write frequency, for example 1m if\n your data is written every minute.\n \n }\n >\n \n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n wrapper: css`\n label: AlertingQueryWrapper;\n margin-bottom: ${theme.spacing(1)};\n border: 1px solid ${theme.colors.border.weak};\n border-radius: ${theme.shape.radius.default};\n\n button {\n overflow: visible;\n }\n `,\n dsTooltip: css`\n display: flex;\n align-items: center;\n &:hover {\n opacity: 0.85;\n cursor: pointer;\n }\n `,\n});\n","import { omit } from 'lodash';\nimport React, { PureComponent, useState } from 'react';\nimport { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';\n\nimport {\n DataQuery,\n DataSourceInstanceSettings,\n LoadingState,\n PanelData,\n rangeUtil,\n RelativeTimeRange,\n} from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { Button, Card, Icon, Stack } from '@grafana/ui';\nimport { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';\nimport { getDatasourceSrv } from 'app/features/plugins/datasource_srv';\nimport { AlertDataQuery, AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { AlertQueryOptions, EmptyQueryWrapper, QueryWrapper } from './QueryWrapper';\nimport { errorFromCurrentCondition, errorFromPreviewData, getThresholdsForQueries } from './util';\n\ninterface Props {\n // The query configuration\n queries: AlertQuery[];\n expressions: AlertQuery[];\n data: Record;\n onRunQueries: () => void;\n\n // Query editing\n onQueriesChange: (queries: AlertQuery[]) => void;\n onDuplicateQuery: (query: AlertQuery) => void;\n condition: string | null;\n onSetCondition: (refId: string) => void;\n}\n\nexport class QueryRows extends PureComponent {\n constructor(props: Props) {\n super(props);\n }\n\n onRemoveQuery = (query: DataQuery) => {\n const { queries, onQueriesChange } = this.props;\n onQueriesChange(queries.filter((q) => q.refId !== query.refId));\n };\n\n onChangeTimeRange = (timeRange: RelativeTimeRange, index: number) => {\n const { queries, onQueriesChange } = this.props;\n onQueriesChange(\n queries.map((item, itemIndex) => {\n if (itemIndex !== index) {\n return item;\n }\n return {\n ...item,\n relativeTimeRange: timeRange,\n };\n })\n );\n };\n\n onChangeQueryOptions = (options: AlertQueryOptions, index: number) => {\n const { queries, onQueriesChange } = this.props;\n onQueriesChange(\n queries.map((item, itemIndex) => {\n if (itemIndex !== index) {\n return item;\n }\n return {\n ...item,\n model: {\n ...item.model,\n maxDataPoints: options.maxDataPoints,\n intervalMs: options.minInterval ? rangeUtil.intervalToMs(options.minInterval) : undefined,\n },\n };\n })\n );\n };\n\n onChangeDataSource = (settings: DataSourceInstanceSettings, index: number) => {\n const { queries, onQueriesChange } = this.props;\n\n const updatedQueries = queries.map((item, itemIndex) => {\n if (itemIndex !== index) {\n return item;\n }\n\n const previousSettings = this.getDataSourceSettings(item);\n\n // Copy model if changing to a datasource of same type.\n if (settings.type === previousSettings?.type) {\n return copyModel(item, settings);\n }\n return newModel(item, settings);\n });\n\n onQueriesChange(updatedQueries);\n };\n\n onChangeQuery = (query: DataQuery, index: number) => {\n const { queries, onQueriesChange } = this.props;\n\n onQueriesChange(\n queries.map((item, itemIndex) => {\n if (itemIndex !== index) {\n return item;\n }\n\n return {\n ...item,\n refId: query.refId,\n queryType: item.model.queryType ?? '',\n model: {\n ...item.model,\n ...query,\n datasource: query.datasource!,\n },\n };\n })\n );\n };\n\n onDragEnd = (result: DropResult) => {\n const { queries, onQueriesChange } = this.props;\n\n if (!result || !result.destination) {\n return;\n }\n\n const startIndex = result.source.index;\n const endIndex = result.destination.index;\n if (startIndex === endIndex) {\n return;\n }\n\n const update = Array.from(queries);\n const [removed] = update.splice(startIndex, 1);\n update.splice(endIndex, 0, removed);\n onQueriesChange(update);\n };\n\n getDataSourceSettings = (query: AlertQuery): DataSourceInstanceSettings | undefined => {\n return getDataSourceSrv().getInstanceSettings(query.datasourceUid);\n };\n\n render() {\n const { queries, expressions, condition } = this.props;\n const thresholdByRefId = getThresholdsForQueries([...queries, ...expressions], condition);\n\n return (\n \n \n {(provided) => {\n return (\n \n \n {queries.map((query, index) => {\n const isCondition = this.props.condition === query.refId;\n const data: PanelData = this.props.data?.[query.refId] ?? {\n series: [],\n state: LoadingState.NotStarted,\n };\n const dsSettings = this.getDataSourceSettings(query);\n let error: Error | undefined = undefined;\n if (data && isCondition) {\n error = errorFromCurrentCondition(data);\n } else if (data) {\n error = errorFromPreviewData(data);\n }\n\n if (!dsSettings) {\n return (\n {\n const defaultDataSource = getDatasourceSrv().getInstanceSettings(null);\n if (defaultDataSource) {\n this.onChangeDataSource(defaultDataSource, index);\n }\n }}\n onRemoveQuery={() => {\n this.onRemoveQuery(query);\n }}\n />\n );\n }\n\n return (\n \n );\n })}\n {provided.placeholder}\n \n
\n );\n }}\n \n \n );\n }\n}\n\nfunction copyModel(item: AlertQuery, settings: DataSourceInstanceSettings): Omit {\n return {\n ...item,\n model: {\n ...omit(item.model, 'datasource'),\n datasource: {\n type: settings.type,\n uid: settings.uid,\n },\n },\n datasourceUid: settings.uid,\n };\n}\n\nfunction newModel(item: AlertQuery, settings: DataSourceInstanceSettings): Omit {\n return {\n refId: item.refId,\n relativeTimeRange: item.relativeTimeRange,\n queryType: '',\n datasourceUid: settings.uid,\n model: {\n refId: item.refId,\n hide: false,\n datasource: {\n type: settings.type,\n uid: settings.uid,\n },\n },\n };\n}\n\ninterface DatasourceNotFoundProps {\n index: number;\n model: AlertDataQuery;\n onUpdateDatasource: () => void;\n onRemoveQuery: () => void;\n}\n\nconst DatasourceNotFound = ({ index, onUpdateDatasource, onRemoveQuery, model }: DatasourceNotFoundProps) => {\n const refId = model.refId;\n\n const [showDetails, setShowDetails] = useState(false);\n\n const toggleDetails = () => {\n setShowDetails((show) => !show);\n };\n\n const handleUpdateDatasource = () => {\n onUpdateDatasource();\n };\n\n return (\n \n \n \n This datasource has been removed\n \n The datasource for this query was not found, it was either removed or is not installed correctly.\n \n \n \n \n \n \n \n \n \n \n Show details\n \n \n \n {showDetails && (\n \n
\n {JSON.stringify(model, null, 2)}\n
\n
\n \n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n container: css`\n background-color: ${theme.colors.background.primary};\n height: 100%;\n `,\n});\n","import { css } from '@emotion/css';\nimport React, { FC, useEffect, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { PanelData, CoreApp, GrafanaTheme2, LoadingState } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { DataQuery } from '@grafana/schema';\nimport { useStyles2 } from '@grafana/ui';\nimport { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { isPromOrLokiQuery } from '../../utils/rule-form';\n\nimport { VizWrapper } from './VizWrapper';\n\nexport interface RecordingRuleEditorProps {\n queries: AlertQuery[];\n onChangeQuery: (updatedQueries: AlertQuery[]) => void;\n runQueries: () => void;\n panelData: Record;\n dataSourceName: string;\n}\n\nexport const RecordingRuleEditor: FC = ({\n queries,\n onChangeQuery,\n runQueries,\n panelData,\n dataSourceName,\n}) => {\n const [data, setData] = useState({\n series: [],\n state: LoadingState.NotStarted,\n timeRange: getTimeSrv().timeRange(),\n });\n\n const styles = useStyles2(getStyles);\n\n useEffect(() => {\n setData(panelData?.[queries[0]?.refId]);\n }, [panelData, queries]);\n\n const {\n error,\n loading,\n value: dataSource,\n } = useAsync(() => {\n return getDataSourceSrv().get(dataSourceName);\n }, [dataSourceName]);\n\n const handleChangedQuery = (changedQuery: DataQuery) => {\n const query = queries[0];\n const dataSourceId = getDataSourceSrv().getInstanceSettings(dataSourceName)?.uid;\n\n if (!isPromOrLokiQuery(changedQuery) || !dataSourceId) {\n return;\n }\n\n const expr = changedQuery.expr;\n\n const merged = {\n ...query,\n ...changedQuery,\n datasourceUid: dataSourceId,\n expr,\n model: {\n expr,\n datasource: changedQuery.datasource,\n refId: changedQuery.refId,\n editorMode: changedQuery.editorMode,\n instant: Boolean(changedQuery.instant),\n range: Boolean(changedQuery.range),\n legendFormat: changedQuery.legendFormat,\n },\n };\n onChangeQuery([merged]);\n };\n\n if (loading || dataSource?.name !== dataSourceName) {\n return null;\n }\n\n const dsi = getDataSourceSrv().getInstanceSettings(dataSourceName);\n\n if (error || !dataSource || !dataSource?.components?.QueryEditor || !dsi) {\n const errorMessage = error?.message || 'Data source plugin does not export any Query Editor component';\n return Could not load query editor due to: {errorMessage}
;\n }\n\n const QueryEditor = dataSource.components.QueryEditor;\n\n return (\n <>\n {queries.length && (\n \n )}\n\n {data && (\n \n \n
\n )}\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n vizWrapper: css`\n margin: ${theme.spacing(1, 0)};\n `,\n});\n","import React, { useCallback } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { DataSourceInstanceSettings } from '@grafana/data';\nimport { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';\nimport { dispatch } from 'app/store/store';\n\nimport { useRulesSourcesWithRuler } from '../../hooks/useRuleSourcesWithRuler';\nimport { fetchAllPromBuildInfoAction } from '../../state/actions';\n\ninterface Props {\n disabled?: boolean;\n onChange: (ds: DataSourceInstanceSettings) => void;\n value: string | null;\n onBlur?: () => void;\n name?: string;\n}\n\nexport function CloudRulesSourcePicker({ value, disabled, ...props }: Props): JSX.Element {\n const rulesSourcesWithRuler = useRulesSourcesWithRuler();\n\n const { loading = true } = useAsync(() => dispatch(fetchAllPromBuildInfoAction()), [dispatch]);\n\n const dataSourceFilter = useCallback(\n (ds: DataSourceInstanceSettings): boolean => {\n return !!rulesSourcesWithRuler.find(({ id }) => id === ds.id);\n },\n [rulesSourcesWithRuler]\n );\n\n return (\n \n );\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';\nimport { Field, InputControl, useStyles2 } from '@grafana/ui';\n\nimport { RuleFormType, RuleFormValues } from '../../../types/rule-form';\nimport { CloudRulesSourcePicker } from '../CloudRulesSourcePicker';\n\nexport interface CloudDataSourceSelectorProps {\n disabled?: boolean;\n onChangeCloudDatasource: (datasourceUid: string) => void;\n}\nexport const CloudDataSourceSelector = ({ disabled, onChangeCloudDatasource }: CloudDataSourceSelectorProps) => {\n const {\n control,\n formState: { errors },\n setValue,\n watch,\n } = useFormContext();\n\n const styles = useStyles2(getStyles);\n const ruleFormType = watch('type');\n\n return (\n <>\n \n {(ruleFormType === RuleFormType.cloudAlerting || ruleFormType === RuleFormType.cloudRecording) && (\n \n (\n {\n // reset expression as they don't need to persist after changing datasources\n setValue('expression', '');\n onChange(ds?.name ?? null);\n onChangeCloudDatasource(ds?.uid ?? null);\n }}\n />\n )}\n name=\"dataSourceName\"\n control={control}\n rules={{\n required: { value: true, message: 'Please select a data source' },\n }}\n />\n \n )}\n
\n \n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n formInput: css`\n width: 330px;\n & + & {\n margin-left: ${theme.spacing(3)};\n }\n `,\n flexRow: css`\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-end;\n `,\n});\n","import React from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { DataSourceInstanceSettings } from '@grafana/data';\nimport { DataSourceJsonData } from '@grafana/schema';\nimport { RadioButtonGroup, Text, Stack } from '@grafana/ui';\nimport { contextSrv } from 'app/core/core';\nimport { ExpressionDatasourceUID } from 'app/features/expressions/types';\nimport { AccessControlAction } from 'app/types';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { RuleFormType, RuleFormValues } from '../../../types/rule-form';\nimport { NeedHelpInfo } from '../NeedHelpInfo';\n\nfunction getAvailableRuleTypes() {\n const canCreateGrafanaRules = contextSrv.hasPermission(AccessControlAction.AlertingRuleCreate);\n const canCreateCloudRules = contextSrv.hasPermission(AccessControlAction.AlertingRuleExternalWrite);\n const defaultRuleType = canCreateGrafanaRules ? RuleFormType.grafana : RuleFormType.cloudAlerting;\n\n const enabledRuleTypes: RuleFormType[] = [];\n if (canCreateGrafanaRules) {\n enabledRuleTypes.push(RuleFormType.grafana);\n }\n if (canCreateCloudRules) {\n enabledRuleTypes.push(RuleFormType.cloudAlerting, RuleFormType.cloudRecording);\n }\n\n return { enabledRuleTypes, defaultRuleType };\n}\n\nconst onlyOneDSInQueries = (queries: AlertQuery[]) => {\n return queries.filter((q) => q.datasourceUid !== ExpressionDatasourceUID).length === 1;\n};\nconst getCanSwitch = ({\n queries,\n ruleFormType,\n rulesSourcesWithRuler,\n}: {\n rulesSourcesWithRuler: Array>;\n queries: AlertQuery[];\n ruleFormType: RuleFormType | undefined;\n}) => {\n // get available rule types\n const availableRuleTypes = getAvailableRuleTypes();\n\n // check if we have only one query in queries and if it's a cloud datasource\n const onlyOneDS = onlyOneDSInQueries(queries);\n const dataSourceIdFromQueries = queries[0]?.datasourceUid ?? '';\n const isRecordingRuleType = ruleFormType === RuleFormType.cloudRecording;\n\n //let's check if we switch to cloud type\n const canSwitchToCloudRule =\n !isRecordingRuleType &&\n onlyOneDS &&\n rulesSourcesWithRuler.some((dsJsonData) => dsJsonData.uid === dataSourceIdFromQueries);\n\n const canSwitchToGrafanaRule = !isRecordingRuleType;\n // check for enabled types\n const grafanaTypeEnabled = availableRuleTypes.enabledRuleTypes.includes(RuleFormType.grafana);\n const cloudTypeEnabled = availableRuleTypes.enabledRuleTypes.includes(RuleFormType.cloudAlerting);\n\n // can we switch to the other type? (cloud or grafana)\n const canSwitchFromCloudToGrafana =\n ruleFormType === RuleFormType.cloudAlerting && grafanaTypeEnabled && canSwitchToGrafanaRule;\n const canSwitchFromGrafanaToCloud =\n ruleFormType === RuleFormType.grafana && canSwitchToCloudRule && cloudTypeEnabled && canSwitchToCloudRule;\n\n return canSwitchFromCloudToGrafana || canSwitchFromGrafanaToCloud;\n};\n\nexport interface SmartAlertTypeDetectorProps {\n editingExistingRule: boolean;\n rulesSourcesWithRuler: Array>;\n queries: AlertQuery[];\n onClickSwitch: () => void;\n}\n\nexport function SmartAlertTypeDetector({\n editingExistingRule,\n rulesSourcesWithRuler,\n queries,\n onClickSwitch,\n}: SmartAlertTypeDetectorProps) {\n const { getValues } = useFormContext();\n const [ruleFormType] = getValues(['type']);\n const canSwitch = getCanSwitch({ queries, ruleFormType, rulesSourcesWithRuler });\n\n const options = [\n { label: 'Grafana-managed', value: RuleFormType.grafana },\n { label: 'Data source-managed', value: RuleFormType.cloudAlerting },\n ];\n\n // if we can't switch to data-source managed, disable it\n // TODO figure out how to show a popover to the user to indicate _why_ it's disabled\n const disabledOptions = canSwitch ? [] : [RuleFormType.cloudAlerting];\n\n return (\n \n \n Rule type\n \n \n Select where the alert rule will be managed.\n \n \n \n Grafana-managed alert rules\n \n \n Grafana-managed alert rules allow you to create alerts that can act on data from any of our supported\n data sources, including having multiple data sources in the same rule. You can also add expressions to\n transform your data and set alert conditions. Using images in alert notifications is also supported.\n
\n \n Data source-managed alert rules\n \n \n Data source-managed alert rules can be used for Grafana Mimir or Grafana Loki data sources which have\n been configured to support rule creation. The use of expressions or multiple queries is not supported.\n
\n \n }\n externalLink=\"https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/alert-rule-types/\"\n linkText=\"Read about alert rule types\"\n title=\"Alert rule types\"\n />\n \n \n \n {/* editing an existing rule, we just show \"cannot be changed\" */}\n {editingExistingRule && (\n The alert rule type cannot be changed for an existing rule.\n )}\n {/* in regular alert creation we tell the user what options they have when using a cloud data source */}\n {!editingExistingRule && (\n <>\n {canSwitch ? (\n \n {ruleFormType === RuleFormType.grafana\n ? 'The data source selected in your query supports alert rule management. Switch to data source-managed if you want the alert rule to be managed by the data source instead of Grafana.'\n : 'Switch to Grafana-managed to use expressions, multiple queries, images in notifications and various other features.'}\n \n ) : (\n Based on the selected data sources this alert rule will be Grafana-managed.\n )}\n \n )}\n \n );\n}\n","import { RuleFormType } from '../../../types/rule-form';\n\ntype FormDescriptions = {\n sectionTitle: string;\n helpLabel: string;\n helpContent: string;\n helpLink: string;\n};\n\nexport const DESCRIPTIONS: Record = {\n [RuleFormType.cloudRecording]: {\n sectionTitle: 'Define recording rule',\n helpLabel: 'Define your recording rule',\n helpContent:\n 'Pre-compute frequently needed or computationally expensive expressions and save their result as a new set of time series.',\n helpLink: '',\n },\n [RuleFormType.grafana]: {\n sectionTitle: 'Define query and alert condition',\n helpLabel: 'Define query and alert condition',\n helpContent:\n 'An alert rule consists of one or more queries and expressions that select the data you want to measure. Define queries and/or expressions and then choose one of them as the alert rule condition. This is the threshold that an alert rule must meet or exceed in order to fire. For more information on queries and expressions, see Query and transform data.',\n helpLink: 'https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/',\n },\n [RuleFormType.cloudAlerting]: {\n sectionTitle: 'Define query and alert condition',\n helpLabel: 'Define query and alert condition',\n helpContent:\n 'An alert rule consists of one or more queries and expressions that select the data you want to measure. Define queries and/or expressions and then choose one of them as the alert rule condition. This is the threshold that an alert rule must meet or exceed in order to fire. For more information on queries and expressions, see Query and transform data.',\n helpLink: 'https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/',\n },\n};\n","import { ExpressionDatasourceUID } from 'app/features/expressions/types';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nexport const hasCyclicalReferences = (queries: AlertQuery[]) => {\n try {\n JSON.stringify(queries);\n return false;\n } catch (e) {\n return true;\n }\n};\n\nexport const findDataSourceFromExpressionRecursive = (\n queries: AlertQuery[],\n alertQuery: AlertQuery\n): AlertQuery | null | undefined => {\n //Check if this is not cyclical structre\n if (hasCyclicalReferences(queries)) {\n return null;\n }\n // We have the data source in this dataQuery\n if (alertQuery.datasourceUid !== ExpressionDatasourceUID) {\n return alertQuery;\n }\n // alertQuery it's an expression, we have to traverse all the tree up to the data source\n else {\n const alertQueryReferenced = queries.find((alertQuery_) => alertQuery_.refId === alertQuery.model.expression);\n if (alertQueryReferenced) {\n return findDataSourceFromExpressionRecursive(queries, alertQueryReferenced);\n } else {\n return null;\n }\n }\n};\n","import { createAction, createReducer } from '@reduxjs/toolkit';\n\nimport { DataQuery, getDefaultRelativeTimeRange, rangeUtil, RelativeTimeRange } from '@grafana/data';\nimport { getNextRefIdChar } from 'app/core/utils/query';\nimport { findDataSourceFromExpressionRecursive } from 'app/features/alerting/utils/dataSourceFromExpression';\nimport { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource';\nimport { isExpressionQuery } from 'app/features/expressions/guards';\nimport { ExpressionDatasourceUID, ExpressionQuery, ExpressionQueryType } from 'app/features/expressions/types';\nimport { defaultCondition } from 'app/features/expressions/utils/expressionTypes';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { getDefaultOrFirstCompatibleDataSource } from '../../../utils/datasource';\nimport { queriesWithUpdatedReferences, refIdExists } from '../util';\n\nexport interface QueriesAndExpressionsState {\n queries: AlertQuery[];\n}\n\nconst findDataSourceFromExpression = (\n queries: AlertQuery[],\n expression: string | undefined\n): AlertQuery | null | undefined => {\n const firstReference = queries.find((alertQuery) => alertQuery.refId === expression);\n const dataSource = firstReference && findDataSourceFromExpressionRecursive(queries, firstReference);\n return dataSource;\n};\n\nconst initialState: QueriesAndExpressionsState = {\n queries: [],\n};\n\nexport const duplicateQuery = createAction('duplicateQuery');\nexport const addNewDataQuery = createAction('addNewDataQuery');\nexport const setDataQueries = createAction('setDataQueries');\n\nexport const addNewExpression = createAction('addNewExpression');\nexport const removeExpression = createAction('removeExpression');\nexport const removeExpressions = createAction('removeExpressions');\nexport const addExpressions = createAction('addExpressions');\nexport const updateExpression = createAction('updateExpression');\nexport const updateExpressionRefId = createAction<{ oldRefId: string; newRefId: string }>('updateExpressionRefId');\nexport const rewireExpressions = createAction<{ oldRefId: string; newRefId: string }>('rewireExpressions');\nexport const updateExpressionType = createAction<{ refId: string; type: ExpressionQueryType }>('updateExpressionType');\nexport const updateExpressionTimeRange = createAction('updateExpressionTimeRange');\nexport const updateMaxDataPoints = createAction<{ refId: string; maxDataPoints: number }>('updateMaxDataPoints');\nexport const updateMinInterval = createAction<{ refId: string; minInterval: string }>('updateMinInterval');\n\nexport const setRecordingRulesQueries = createAction<{ recordingRuleQueries: AlertQuery[]; expression: string }>(\n 'setRecordingRulesQueries'\n);\n\nexport const queriesAndExpressionsReducer = createReducer(initialState, (builder) => {\n // data queries actions\n builder\n .addCase(duplicateQuery, (state, { payload }) => {\n state.queries = addQuery(state.queries, payload);\n })\n .addCase(addNewDataQuery, (state) => {\n const datasource = getDefaultOrFirstCompatibleDataSource();\n if (!datasource) {\n return;\n }\n\n state.queries = addQuery(state.queries, {\n datasourceUid: datasource.uid,\n model: {\n refId: '',\n datasource: {\n type: datasource.type,\n uid: datasource.uid,\n },\n },\n });\n })\n .addCase(setDataQueries, (state, { payload }) => {\n const expressionQueries = state.queries.filter((query) => isExpressionQuery(query.model));\n state.queries = [...payload, ...expressionQueries];\n })\n .addCase(setRecordingRulesQueries, (state, { payload }) => {\n const query = payload.recordingRuleQueries[0];\n const recordingRuleQuery = {\n ...query,\n ...{ expr: payload.expression, model: query?.model },\n };\n\n state.queries = [recordingRuleQuery];\n })\n .addCase(updateMaxDataPoints, (state, action) => {\n state.queries = state.queries.map((query) => {\n return query.refId === action.payload.refId\n ? {\n ...query,\n model: {\n ...query.model,\n maxDataPoints: action.payload.maxDataPoints,\n },\n }\n : query;\n });\n })\n .addCase(updateMinInterval, (state, action) => {\n state.queries = state.queries.map((query) => {\n return query.refId === action.payload.refId\n ? {\n ...query,\n model: {\n ...query.model,\n intervalMs: action.payload.minInterval ? rangeUtil.intervalToMs(action.payload.minInterval) : undefined,\n },\n }\n : query;\n });\n });\n\n // expressions actions\n builder\n .addCase(addNewExpression, (state, { payload }) => {\n state.queries = addQuery(state.queries, {\n datasourceUid: ExpressionDatasourceUID,\n model: expressionDatasource.newQuery({\n type: payload,\n conditions: [{ ...defaultCondition, query: { params: [] } }],\n expression: '',\n }),\n });\n })\n .addCase(removeExpression, (state, { payload }) => {\n state.queries = state.queries.filter((query) => query.refId !== payload);\n })\n .addCase(removeExpressions, (state) => {\n state.queries = state.queries.filter((query) => !isExpressionQuery(query.model));\n })\n .addCase(addExpressions, (state, { payload }) => {\n state.queries = [...state.queries, ...payload];\n })\n .addCase(updateExpression, (state, { payload }) => {\n state.queries = state.queries.map((query) => {\n const dataSourceAlertQuery = findDataSourceFromExpression(state.queries, payload.expression);\n\n const relativeTimeRange = dataSourceAlertQuery\n ? dataSourceAlertQuery.relativeTimeRange\n : getDefaultRelativeTimeRange();\n\n if (query.refId === payload.refId) {\n query.model = payload;\n if (payload.type === ExpressionQueryType.resample) {\n query.relativeTimeRange = relativeTimeRange;\n }\n }\n return query;\n });\n })\n .addCase(updateExpressionTimeRange, (state) => {\n const newState = state.queries.map((query) => {\n // It's an expression , let's update the relativeTimeRange with its dataSource relativeTimeRange\n if (query.datasourceUid === ExpressionDatasourceUID) {\n const dataSource = findDataSourceFromExpression(state.queries, query.model.expression);\n const relativeTimeRange = dataSource ? dataSource.relativeTimeRange : getDefaultRelativeTimeRange();\n query.relativeTimeRange = relativeTimeRange;\n }\n return query;\n });\n state.queries = newState;\n })\n .addCase(updateExpressionRefId, (state, { payload }) => {\n const { newRefId, oldRefId } = payload;\n\n // if the new refId already exists we just refuse to update the state\n const newRefIdExists = refIdExists(state.queries, newRefId);\n if (newRefIdExists) {\n return;\n }\n\n const updatedQueries = queriesWithUpdatedReferences(state.queries, oldRefId, newRefId);\n state.queries = updatedQueries.map((query) => {\n if (query.refId === oldRefId) {\n return {\n ...query,\n refId: newRefId,\n model: {\n ...query.model,\n refId: newRefId,\n },\n };\n }\n\n return query;\n });\n })\n .addCase(rewireExpressions, (state, { payload }) => {\n state.queries = queriesWithUpdatedReferences(state.queries, payload.oldRefId, payload.newRefId);\n })\n .addCase(updateExpressionType, (state, action) => {\n state.queries = state.queries.map((query) => {\n return query.refId === action.payload.refId\n ? {\n ...query,\n model: {\n ...expressionDatasource.newQuery({\n type: action.payload.type,\n conditions: [{ ...defaultCondition, query: { params: [] } }],\n expression: '',\n }),\n refId: action.payload.refId,\n },\n }\n : query;\n });\n });\n});\n\nconst addQuery = (\n queries: AlertQuery[],\n queryToAdd: Pick\n): AlertQuery[] => {\n const refId = getNextRefIdChar(queries);\n const query: AlertQuery = {\n ...queryToAdd,\n refId,\n queryType: '',\n model: {\n ...queryToAdd.model,\n hide: false,\n refId,\n },\n relativeTimeRange: queryToAdd.relativeTimeRange ?? defaultTimeRange(queryToAdd.model),\n };\n\n return [...queries, query];\n};\n\nconst defaultTimeRange = (model: DataQuery): RelativeTimeRange | undefined => {\n if (isExpressionQuery(model)) {\n return;\n }\n\n return getDefaultRelativeTimeRange();\n};\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { LoadingState, PanelData } from '@grafana/data';\n\nimport { AlertQuery } from '../../../../../../types/unified-alerting-dto';\nimport { AlertingQueryRunner } from '../../../state/AlertingQueryRunner';\n\nexport function useAlertQueryRunner() {\n const [queryPreviewData, setQueryPreviewData] = useState>({});\n\n const runner = useRef(new AlertingQueryRunner());\n\n useEffect(() => {\n const currentRunner = runner.current;\n\n currentRunner.get().subscribe((data) => {\n setQueryPreviewData(data);\n });\n\n return () => {\n currentRunner.destroy();\n };\n }, []);\n\n const clearPreviewData = useCallback(() => {\n setQueryPreviewData({});\n }, []);\n\n const cancelQueries = useCallback(() => {\n runner.current.cancel();\n }, []);\n\n const runQueries = useCallback((queriesToPreview: AlertQuery[], condition: string) => {\n runner.current.run(queriesToPreview, condition);\n }, []);\n\n const isPreviewLoading = useMemo(() => {\n return Object.values(queryPreviewData).some((d) => d.state === LoadingState.Loading);\n }, [queryPreviewData]);\n\n return { queryPreviewData, runQueries, cancelQueries, isPreviewLoading, clearPreviewData };\n}\n","import { css } from '@emotion/css';\nimport { cloneDeep } from 'lodash';\nimport React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\n\nimport { getDefaultRelativeTimeRange, GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { config, getDataSourceSrv } from '@grafana/runtime';\nimport {\n Alert,\n Button,\n Dropdown,\n Field,\n Icon,\n InputControl,\n Menu,\n MenuItem,\n Stack,\n Tooltip,\n useStyles2,\n} from '@grafana/ui';\nimport { Text } from '@grafana/ui/src/components/Text/Text';\nimport { isExpressionQuery } from 'app/features/expressions/guards';\nimport { ExpressionDatasourceUID, ExpressionQueryType, expressionTypes } from 'app/features/expressions/types';\nimport { useDispatch } from 'app/types';\nimport { AlertQuery } from 'app/types/unified-alerting-dto';\n\nimport { useRulesSourcesWithRuler } from '../../../hooks/useRuleSourcesWithRuler';\nimport { fetchAllPromBuildInfoAction } from '../../../state/actions';\nimport { RuleFormType, RuleFormValues } from '../../../types/rule-form';\nimport { getDefaultOrFirstCompatibleDataSource } from '../../../utils/datasource';\nimport { isPromOrLokiQuery, PromOrLokiQuery } from '../../../utils/rule-form';\nimport { ExpressionEditor } from '../ExpressionEditor';\nimport { ExpressionsEditor } from '../ExpressionsEditor';\nimport { NeedHelpInfo } from '../NeedHelpInfo';\nimport { QueryEditor } from '../QueryEditor';\nimport { RecordingRuleEditor } from '../RecordingRuleEditor';\nimport { RuleEditorSection } from '../RuleEditorSection';\nimport { errorFromCurrentCondition, errorFromPreviewData, findRenamedDataQueryReferences, refIdExists } from '../util';\n\nimport { CloudDataSourceSelector } from './CloudDataSourceSelector';\nimport { SmartAlertTypeDetector } from './SmartAlertTypeDetector';\nimport { DESCRIPTIONS } from './descriptions';\nimport {\n addExpressions,\n addNewDataQuery,\n addNewExpression,\n duplicateQuery,\n queriesAndExpressionsReducer,\n removeExpression,\n removeExpressions,\n rewireExpressions,\n setDataQueries,\n setRecordingRulesQueries,\n updateExpression,\n updateExpressionRefId,\n updateExpressionTimeRange,\n updateExpressionType,\n} from './reducer';\nimport { useAlertQueryRunner } from './useAlertQueryRunner';\n\ninterface Props {\n editingExistingRule: boolean;\n onDataChange: (error: string) => void;\n}\n\nexport const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: Props) => {\n const {\n setValue,\n getValues,\n watch,\n formState: { errors },\n control,\n } = useFormContext();\n\n const { queryPreviewData, runQueries, cancelQueries, isPreviewLoading, clearPreviewData } = useAlertQueryRunner();\n\n const initialState = {\n queries: getValues('queries'),\n };\n\n const [{ queries }, dispatch] = useReducer(queriesAndExpressionsReducer, initialState);\n const [type, condition, dataSourceName] = watch(['type', 'condition', 'dataSourceName']);\n\n const isGrafanaManagedType = type === RuleFormType.grafana;\n const isRecordingRuleType = type === RuleFormType.cloudRecording;\n const isCloudAlertRuleType = type === RuleFormType.cloudAlerting;\n\n const dispatchReduxAction = useDispatch();\n useEffect(() => {\n dispatchReduxAction(fetchAllPromBuildInfoAction());\n }, [dispatchReduxAction]);\n\n const rulesSourcesWithRuler = useRulesSourcesWithRuler();\n\n const runQueriesPreview = useCallback(\n (condition?: string) => {\n if (isCloudAlertRuleType) {\n // we will skip preview for cloud rules, these do not have any time series preview\n // Grafana Managed rules and recording rules do\n return;\n }\n\n runQueries(getValues('queries'), condition || (getValues('condition') ?? ''));\n },\n [isCloudAlertRuleType, runQueries, getValues]\n );\n\n // whenever we update the queries we have to update the form too\n useEffect(() => {\n setValue('queries', queries, { shouldValidate: false });\n }, [queries, runQueries, setValue]);\n\n const noCompatibleDataSources = getDefaultOrFirstCompatibleDataSource() === undefined;\n\n // data queries only\n const dataQueries = useMemo(() => {\n return queries.filter((query) => !isExpressionQuery(query.model));\n }, [queries]);\n\n // expression queries only\n const expressionQueries = useMemo(() => {\n return queries.filter((query) => isExpressionQuery(query.model));\n }, [queries]);\n\n const emptyQueries = queries.length === 0;\n\n // apply some validations and asserts to the results of the evaluation when creating or editing\n // Grafana-managed alert rules\n useEffect(() => {\n if (!isGrafanaManagedType) {\n return;\n }\n\n const currentCondition = getValues('condition');\n if (!currentCondition) {\n return;\n }\n\n const previewData = queryPreviewData[currentCondition];\n if (!previewData) {\n return;\n }\n\n const error = errorFromPreviewData(previewData) ?? errorFromCurrentCondition(previewData);\n\n onDataChange(error?.message || '');\n }, [queryPreviewData, getValues, onDataChange, isGrafanaManagedType]);\n\n const handleSetCondition = useCallback(\n (refId: string | null) => {\n if (!refId) {\n return;\n }\n\n runQueriesPreview(refId); //we need to run the queries to know if the condition is valid\n\n setValue('condition', refId);\n },\n [runQueriesPreview, setValue]\n );\n\n const onUpdateRefId = useCallback(\n (oldRefId: string, newRefId: string) => {\n const newRefIdExists = refIdExists(queries, newRefId);\n // TODO we should set an error and explain what went wrong instead of just refusing to update\n if (newRefIdExists) {\n return;\n }\n\n dispatch(updateExpressionRefId({ oldRefId, newRefId }));\n\n // update condition too if refId was updated\n if (condition === oldRefId) {\n handleSetCondition(newRefId);\n }\n },\n [condition, queries, handleSetCondition]\n );\n\n const updateExpressionAndDatasource = useSetExpressionAndDataSource();\n\n const onChangeQueries = useCallback(\n (updatedQueries: AlertQuery[]) => {\n // Most data sources triggers onChange and onRunQueries consecutively\n // It means our reducer state is always one step behind when runQueries is invoked\n // Invocation cycle => onChange -> dispatch(setDataQueries) -> onRunQueries -> setDataQueries Reducer\n // As a workaround we update form values as soon as possible to avoid stale state\n // This way we can access up to date queries in runQueriesPreview without waiting for re-render\n const previousQueries = getValues('queries');\n const expressionQueries = previousQueries.filter((query) => isExpressionQuery(query.model));\n setValue('queries', [...updatedQueries, ...expressionQueries], { shouldValidate: false });\n updateExpressionAndDatasource(updatedQueries);\n\n dispatch(setDataQueries(updatedQueries));\n dispatch(updateExpressionTimeRange());\n\n // check if we need to rewire expressions (and which ones)\n const [oldRefId, newRefId] = findRenamedDataQueryReferences(queries, updatedQueries);\n if (oldRefId && newRefId) {\n dispatch(rewireExpressions({ oldRefId, newRefId }));\n }\n },\n [queries, updateExpressionAndDatasource, getValues, setValue]\n );\n\n const onChangeRecordingRulesQueries = useCallback(\n (updatedQueries: AlertQuery[]) => {\n const query = updatedQueries[0];\n\n if (!isPromOrLokiQuery(query.model)) {\n return;\n }\n\n const expression = query.model.expr;\n\n setValue('queries', updatedQueries, { shouldValidate: false });\n updateExpressionAndDatasource(updatedQueries);\n\n dispatch(setRecordingRulesQueries({ recordingRuleQueries: updatedQueries, expression }));\n runQueriesPreview();\n },\n [runQueriesPreview, setValue, updateExpressionAndDatasource]\n );\n\n const recordingRuleDefaultDatasource = rulesSourcesWithRuler[0];\n\n useEffect(() => {\n clearPreviewData();\n if (type === RuleFormType.cloudRecording) {\n const expr = getValues('expression');\n\n if (!recordingRuleDefaultDatasource) {\n return;\n }\n\n const datasourceUid =\n (editingExistingRule && getDataSourceSrv().getInstanceSettings(dataSourceName)?.uid) ||\n recordingRuleDefaultDatasource.uid;\n\n const defaultQuery = {\n refId: 'A',\n datasourceUid,\n queryType: '',\n relativeTimeRange: getDefaultRelativeTimeRange(),\n expr,\n instant: true,\n model: {\n refId: 'A',\n hide: false,\n expr,\n },\n };\n dispatch(setRecordingRulesQueries({ recordingRuleQueries: [defaultQuery], expression: expr }));\n }\n }, [type, recordingRuleDefaultDatasource, editingExistingRule, getValues, dataSourceName, clearPreviewData]);\n\n const onDuplicateQuery = useCallback((query: AlertQuery) => {\n dispatch(duplicateQuery(query));\n }, []);\n\n // update the condition if it's been removed\n useEffect(() => {\n if (!refIdExists(queries, condition)) {\n const lastRefId = queries.at(-1)?.refId ?? null;\n handleSetCondition(lastRefId);\n }\n }, [condition, queries, handleSetCondition]);\n\n const onClickType = useCallback(\n (type: ExpressionQueryType) => {\n dispatch(addNewExpression(type));\n },\n [dispatch]\n );\n\n const styles = useStyles2(getStyles);\n\n // Cloud alerts load data from form values\n // whereas Grafana managed alerts load data from reducer\n //when data source is changed in the cloud selector we need to update the queries in the reducer\n\n const onChangeCloudDatasource = useCallback(\n (datasourceUid: string) => {\n const newQueries = cloneDeep(queries);\n newQueries[0].datasourceUid = datasourceUid;\n setValue('queries', newQueries, { shouldValidate: false });\n\n updateExpressionAndDatasource(newQueries);\n\n dispatch(setDataQueries(newQueries));\n },\n [queries, setValue, updateExpressionAndDatasource, dispatch]\n );\n\n // ExpressionEditor for cloud query needs to update queries in the reducer and in the form\n // otherwise the value is not updated for Grafana managed alerts\n\n const onChangeExpression = (value: string) => {\n const newQueries = cloneDeep(queries);\n\n if (newQueries[0].model) {\n if (isPromOrLokiQuery(newQueries[0].model)) {\n newQueries[0].model.expr = value;\n } else {\n // first time we come from grafana-managed type\n // we need to convert the model to PromOrLokiQuery\n const promLoki: PromOrLokiQuery = {\n ...cloneDeep(newQueries[0].model),\n expr: value,\n };\n newQueries[0].model = promLoki;\n }\n }\n\n setValue('queries', newQueries, { shouldValidate: false });\n\n updateExpressionAndDatasource(newQueries);\n\n dispatch(setDataQueries(newQueries));\n runQueriesPreview();\n };\n\n const removeExpressionsInQueries = useCallback(() => dispatch(removeExpressions()), [dispatch]);\n\n const addExpressionsInQueries = useCallback(\n (expressions: AlertQuery[]) => dispatch(addExpressions(expressions)),\n [dispatch]\n );\n\n // we need to keep track of the previous expressions and condition reference to be able to restore them when switching back to grafana managed\n const [prevExpressions, setPrevExpressions] = useState([]);\n const [prevCondition, setPrevCondition] = useState(null);\n\n const restoreExpressionsInQueries = useCallback(() => {\n addExpressionsInQueries(prevExpressions);\n }, [prevExpressions, addExpressionsInQueries]);\n\n const onClickSwitch = useCallback(() => {\n const typeInForm = getValues('type');\n if (typeInForm === RuleFormType.cloudAlerting) {\n setValue('type', RuleFormType.grafana);\n setValue('dataSourceName', null); // set data source name back to \"null\"\n\n prevExpressions.length > 0 && restoreExpressionsInQueries();\n prevCondition && setValue('condition', prevCondition);\n } else {\n setValue('type', RuleFormType.cloudAlerting);\n // dataSourceName is used only by Mimir/Loki alerting and recording rules\n // It should be empty for Grafana managed alert rules\n const newDsName = getDataSourceSrv().getInstanceSettings(queries[0].datasourceUid)?.name;\n if (newDsName) {\n setValue('dataSourceName', newDsName);\n }\n\n updateExpressionAndDatasource(queries);\n\n const expressions = queries.filter((query) => query.datasourceUid === ExpressionDatasourceUID);\n setPrevExpressions(expressions);\n removeExpressionsInQueries();\n setPrevCondition(condition);\n }\n }, [\n getValues,\n setValue,\n prevExpressions.length,\n restoreExpressionsInQueries,\n prevCondition,\n updateExpressionAndDatasource,\n queries,\n removeExpressionsInQueries,\n condition,\n ]);\n\n const { sectionTitle, helpLabel, helpContent, helpLink } = DESCRIPTIONS[type ?? RuleFormType.grafana];\n\n return (\n \n \n {helpLabel}\n \n \n \n }\n >\n {/* This is the cloud data source selector */}\n {(type === RuleFormType.cloudRecording || type === RuleFormType.cloudAlerting) && (\n \n )}\n\n {/* This is the PromQL Editor for recording rules */}\n {isRecordingRuleType && dataSourceName && (\n \n \n \n )}\n\n {/* This is the PromQL Editor for Cloud rules */}\n {isCloudAlertRuleType && dataSourceName && (\n \n \n {\n return (\n \n );\n }}\n control={control}\n rules={{\n required: { value: true, message: 'A valid expression is required' },\n }}\n />\n \n \n \n )}\n\n {/* This is the editor for Grafana managed rules */}\n {isGrafanaManagedType && (\n \n {/* Data Queries */}\n runQueriesPreview()}\n onChangeQueries={onChangeQueries}\n onDuplicateQuery={onDuplicateQuery}\n panelData={queryPreviewData}\n condition={condition}\n onSetCondition={handleSetCondition}\n />\n \n {\n dispatch(addNewDataQuery());\n }}\n variant=\"secondary\"\n data-testid={selectors.components.QueryTab.addQuery}\n disabled={noCompatibleDataSources}\n className={styles.addQueryButton}\n >\n Add query\n \n \n \n {/* Expression Queries */}\n \n Expressions\n \n Manipulate data returned from queries with math and other operations.\n \n \n\n {\n dispatch(removeExpression(refId));\n }}\n onUpdateRefId={onUpdateRefId}\n onUpdateExpressionType={(refId, type) => {\n dispatch(updateExpressionType({ refId, type }));\n }}\n onUpdateQueryExpression={(model) => {\n dispatch(updateExpression(model));\n }}\n />\n {/* action buttons */}\n \n {config.expressionsEnabled && }\n\n {isPreviewLoading && (\n \n )}\n {!isPreviewLoading && (\n \n )}\n \n\n {/* No Queries */}\n {emptyQueries && (\n \n Create at least one query or expression to be alerted on\n \n )}\n \n )}\n \n );\n};\n\nfunction TypeSelectorButton({ onClickType }: { onClickType: (type: ExpressionQueryType) => void }) {\n const newMenu = (\n \n );\n\n return (\n \n \n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n addQueryButton: css`\n width: fit-content;\n `,\n helpInfo: css`\n display: flex;\n flex-direction: row;\n align-items: center;\n width: fit-content;\n font-weight: ${theme.typography.fontWeightMedium};\n margin-left: ${theme.spacing(1)};\n font-size: ${theme.typography.size.sm};\n cursor: pointer;\n `,\n helpInfoText: css`\n margin-left: ${theme.spacing(0.5)};\n text-decoration: underline;\n `,\n infoLink: css`\n color: ${theme.colors.text.link};\n `,\n});\n\nconst useSetExpressionAndDataSource = () => {\n const { setValue } = useFormContext();\n\n return (updatedQueries: AlertQuery[]) => {\n // update data source name and expression if it's been changed in the queries from the reducer when prom or loki query\n const query = updatedQueries[0];\n if (!query) {\n return;\n }\n\n const dataSourceSettings = getDataSourceSrv().getInstanceSettings(query.datasourceUid);\n if (!dataSourceSettings) {\n throw new Error('The Data source has not been defined.');\n }\n\n if (isPromOrLokiQuery(query.model)) {\n const expression = query.model.expr;\n setValue('expression', expression);\n }\n };\n};\n","import { uniqueId } from 'lodash';\n\nimport { SelectableValue } from '@grafana/data';\nimport { MatcherOperator, ObjectMatcher, Route, RouteWithID } from 'app/plugins/datasource/alertmanager/types';\n\nimport { FormAmRoute } from '../types/amroutes';\nimport { MatcherFieldValue } from '../types/silence-form';\n\nimport { matcherToMatcherField } from './alertmanager';\nimport { GRAFANA_RULES_SOURCE_NAME } from './datasource';\nimport { normalizeMatchers, parseMatcher, quoteWithEscape, unquoteWithUnescape } from './matchers';\nimport { findExistingRoute } from './routeTree';\nimport { isValidPrometheusDuration, safeParseDurationstr } from './time';\n\nconst matchersToArrayFieldMatchers = (\n matchers: Record | undefined,\n isRegex: boolean\n): MatcherFieldValue[] =>\n Object.entries(matchers ?? {}).reduce(\n (acc, [name, value]) => [\n ...acc,\n {\n name,\n value,\n operator: isRegex ? MatcherOperator.regex : MatcherOperator.equal,\n },\n ],\n []\n );\n\nconst selectableValueToString = (selectableValue: SelectableValue): string => selectableValue.value!;\n\nconst selectableValuesToStrings = (arr: Array> | undefined): string[] =>\n (arr ?? []).map(selectableValueToString);\n\nexport const emptyArrayFieldMatcher: MatcherFieldValue = {\n name: '',\n value: '',\n operator: MatcherOperator.equal,\n};\n\n// Default route group_by labels for newly created routes.\nexport const defaultGroupBy = ['grafana_folder', 'alertname'];\n\n// Common route group_by options for multiselect drop-down\nexport const commonGroupByOptions = [\n { label: 'grafana_folder', value: 'grafana_folder', isFixed: true },\n { label: 'alertname', value: 'alertname', isFixed: true },\n { label: 'Disable (...)', value: '...' },\n];\n\nexport const emptyRoute: FormAmRoute = {\n id: '',\n overrideGrouping: false,\n groupBy: defaultGroupBy,\n object_matchers: [],\n routes: [],\n continue: false,\n receiver: '',\n overrideTimings: false,\n groupWaitValue: '',\n groupIntervalValue: '',\n repeatIntervalValue: '',\n muteTimeIntervals: [],\n};\n\n// add unique identifiers to each route in the route tree, that way we can figure out what route we've edited / deleted\nexport function addUniqueIdentifierToRoute(route: Route): RouteWithID {\n return {\n id: uniqueId('route-'),\n ...route,\n routes: (route.routes ?? []).map(addUniqueIdentifierToRoute),\n };\n}\n\n//returns route, and a record mapping id to existing route\nexport const amRouteToFormAmRoute = (route: RouteWithID | Route | undefined): FormAmRoute => {\n if (!route) {\n return emptyRoute;\n }\n\n const id = 'id' in route ? route.id : uniqueId('route-');\n\n if (Object.keys(route).length === 0) {\n const formAmRoute = { ...emptyRoute, id };\n return formAmRoute;\n }\n\n const formRoutes: FormAmRoute[] = [];\n route.routes?.forEach((subRoute) => {\n const subFormRoute = amRouteToFormAmRoute(subRoute);\n formRoutes.push(subFormRoute);\n });\n\n const objectMatchers =\n route.object_matchers?.map((matcher) => ({ name: matcher[0], operator: matcher[1], value: matcher[2] })) ?? [];\n const matchers =\n route.matchers\n ?.map((matcher) => matcherToMatcherField(parseMatcher(matcher)))\n .map(({ name, operator, value }) => ({\n name,\n operator,\n value: unquoteWithUnescape(value),\n })) ?? [];\n\n return {\n id,\n // Frontend migration to use object_matchers instead of matchers, match, and match_re\n object_matchers: [\n ...matchers,\n ...objectMatchers,\n ...matchersToArrayFieldMatchers(route.match, false),\n ...matchersToArrayFieldMatchers(route.match_re, true),\n ],\n continue: route.continue ?? false,\n receiver: route.receiver ?? '',\n overrideGrouping: Array.isArray(route.group_by) && route.group_by.length > 0,\n groupBy: route.group_by ?? undefined,\n overrideTimings: [route.group_wait, route.group_interval, route.repeat_interval].some(Boolean),\n groupWaitValue: route.group_wait ?? '',\n groupIntervalValue: route.group_interval ?? '',\n repeatIntervalValue: route.repeat_interval ?? '',\n routes: formRoutes,\n muteTimeIntervals: route.mute_time_intervals ?? [],\n };\n};\n\n// convert a FormAmRoute to a Route\nexport const formAmRouteToAmRoute = (\n alertManagerSourceName: string,\n formAmRoute: Partial,\n routeTree: RouteWithID\n): Route => {\n const existing = findExistingRoute(formAmRoute.id ?? '', routeTree);\n\n const {\n overrideGrouping,\n groupBy,\n overrideTimings,\n groupWaitValue,\n groupIntervalValue,\n repeatIntervalValue,\n receiver,\n } = formAmRoute;\n\n // \"undefined\" means \"inherit from the parent policy\", currently supported by group_by, group_wait, group_interval, and repeat_interval\n const INHERIT_FROM_PARENT = undefined;\n\n const group_by = overrideGrouping ? groupBy : INHERIT_FROM_PARENT;\n\n const overrideGroupWait = overrideTimings && groupWaitValue;\n const group_wait = overrideGroupWait ? groupWaitValue : INHERIT_FROM_PARENT;\n\n const overrideGroupInterval = overrideTimings && groupIntervalValue;\n const group_interval = overrideGroupInterval ? groupIntervalValue : INHERIT_FROM_PARENT;\n\n const overrideRepeatInterval = overrideTimings && repeatIntervalValue;\n const repeat_interval = overrideRepeatInterval ? repeatIntervalValue : INHERIT_FROM_PARENT;\n\n // Empty matcher values are valid. Such matchers require specified label to not exists\n const object_matchers: ObjectMatcher[] | undefined = formAmRoute.object_matchers\n ?.filter((route) => route.name && route.operator && route.value !== null && route.value !== undefined)\n .map(({ name, operator, value }) => [name, operator, value]);\n\n const routes = formAmRoute.routes?.map((subRoute) =>\n formAmRouteToAmRoute(alertManagerSourceName, subRoute, routeTree)\n );\n\n const amRoute: Route = {\n ...(existing ?? {}),\n continue: formAmRoute.continue,\n group_by: group_by,\n object_matchers: object_matchers,\n match: undefined, // DEPRECATED: Use matchers\n match_re: undefined, // DEPRECATED: Use matchers\n group_wait,\n group_interval,\n repeat_interval,\n routes: routes,\n mute_time_intervals: formAmRoute.muteTimeIntervals,\n receiver: receiver,\n };\n\n // non-Grafana managed rules should use \"matchers\", Grafana-managed rules should use \"object_matchers\"\n // Grafana maintains a fork of AM to support all utf-8 characters in the \"object_matchers\" property values but this\n // does not exist in upstream AlertManager\n if (alertManagerSourceName !== GRAFANA_RULES_SOURCE_NAME) {\n amRoute.matchers = formAmRoute.object_matchers?.map(\n ({ name, operator, value }) => `${name}${operator}${quoteWithEscape(value)}`\n );\n amRoute.object_matchers = undefined;\n } else {\n amRoute.object_matchers = normalizeMatchers(amRoute);\n amRoute.matchers = undefined;\n }\n\n if (formAmRoute.receiver) {\n amRoute.receiver = formAmRoute.receiver;\n }\n\n return amRoute;\n};\n\nexport const stringToSelectableValue = (str: string): SelectableValue => ({\n label: str,\n value: str,\n});\n\nexport const stringsToSelectableValues = (arr: string[] | undefined): Array> =>\n (arr ?? []).map(stringToSelectableValue);\n\nexport const mapSelectValueToString = (selectableValue: SelectableValue): string | null => {\n // this allows us to deal with cleared values\n if (selectableValue === null) {\n return null;\n }\n\n if (!selectableValue) {\n return '';\n }\n\n return selectableValueToString(selectableValue) ?? '';\n};\n\nexport const mapMultiSelectValueToStrings = (\n selectableValues: Array> | undefined\n): string[] => {\n if (!selectableValues) {\n return [];\n }\n\n return selectableValuesToStrings(selectableValues);\n};\n\nexport function promDurationValidator(duration?: string) {\n if (!duration || duration.length === 0) {\n return true;\n }\n\n return isValidPrometheusDuration(duration) || 'Invalid duration format. Must be {number}{time_unit}';\n}\n\n// function to convert ObjectMatchers to a array of strings\nexport const objectMatchersToString = (matchers: ObjectMatcher[]): string[] => {\n return matchers.map((matcher) => {\n const [name, operator, value] = matcher;\n return `${name}${operator}${value}`;\n });\n};\n\nexport const repeatIntervalValidator = (repeatInterval: string, groupInterval = '') => {\n if (repeatInterval.length === 0) {\n return true;\n }\n\n const validRepeatInterval = promDurationValidator(repeatInterval);\n const validGroupInterval = promDurationValidator(groupInterval);\n\n if (validRepeatInterval !== true) {\n return validRepeatInterval;\n }\n\n if (validGroupInterval !== true) {\n return validGroupInterval;\n }\n\n const repeatDuration = safeParseDurationstr(repeatInterval);\n const groupDuration = safeParseDurationstr(groupInterval);\n\n const isRepeatLowerThanGroupDuration = groupDuration !== 0 && repeatDuration < groupDuration;\n\n return isRepeatLowerThanGroupDuration ? 'Repeat interval should be higher or equal to Group interval' : true;\n};\n","export function generateCopiedName(originalName: string, exisitingNames: string[]) {\n const nonDuplicateName = originalName.replace(/\\(copy( [0-9]+)?\\)$/, '').trim();\n\n let newName = `${nonDuplicateName} (copy)`;\n\n for (let i = 2; exisitingNames.includes(newName); i++) {\n newName = `${nonDuplicateName} (copy ${i})`;\n }\n\n return newName;\n}\n","/**\n * Various helper functions to modify (immutably) the route tree, aka \"notification policies\"\n */\n\nimport { omit } from 'lodash';\n\nimport { Route, RouteWithID } from 'app/plugins/datasource/alertmanager/types';\n\nimport { FormAmRoute } from '../types/amroutes';\n\nimport { formAmRouteToAmRoute } from './amroutes';\n\n// add a form submission to the route tree\nexport const mergePartialAmRouteWithRouteTree = (\n alertManagerSourceName: string,\n partialFormRoute: Partial,\n routeTree: RouteWithID\n): Route => {\n const existing = findExistingRoute(partialFormRoute.id ?? '', routeTree);\n if (!existing) {\n throw new Error(`No such route with ID '${partialFormRoute.id}'`);\n }\n\n function findAndReplace(currentRoute: RouteWithID): Route {\n let updatedRoute: Route = currentRoute;\n\n if (currentRoute.id === partialFormRoute.id) {\n const newRoute = formAmRouteToAmRoute(alertManagerSourceName, partialFormRoute, routeTree);\n updatedRoute = omit(\n {\n ...currentRoute,\n ...newRoute,\n },\n 'id'\n );\n }\n\n return omit(\n {\n ...updatedRoute,\n routes: currentRoute.routes?.map(findAndReplace),\n },\n 'id'\n );\n }\n\n return findAndReplace(routeTree);\n};\n\n// remove a route from the policy tree, returns a new tree\n// make sure to omit the \"id\" because Prometheus / Loki / Mimir will reject the payload\nexport const omitRouteFromRouteTree = (findRoute: RouteWithID, routeTree: RouteWithID): Route => {\n if (findRoute.id === routeTree.id) {\n throw new Error('You cant remove the root policy');\n }\n\n function findAndOmit(currentRoute: RouteWithID): Route {\n return omit(\n {\n ...currentRoute,\n routes: currentRoute.routes?.reduce((acc: Route[] = [], route) => {\n if (route.id === findRoute.id) {\n return acc;\n }\n\n acc.push(findAndOmit(route));\n return acc;\n }, []),\n },\n 'id'\n );\n }\n\n return findAndOmit(routeTree);\n};\n\n// add a new route to a parent route\nexport const addRouteToParentRoute = (\n alertManagerSourceName: string,\n partialFormRoute: Partial,\n parentRoute: RouteWithID,\n routeTree: RouteWithID\n): Route => {\n const newRoute = formAmRouteToAmRoute(alertManagerSourceName, partialFormRoute, routeTree);\n\n function findAndAdd(currentRoute: RouteWithID): RouteWithID {\n if (currentRoute.id === parentRoute.id) {\n return {\n ...currentRoute,\n // TODO fix this typescript exception, it's... complicated\n // @ts-ignore\n routes: currentRoute.routes?.concat(newRoute),\n };\n }\n\n return {\n ...currentRoute,\n routes: currentRoute.routes?.map(findAndAdd),\n };\n }\n\n function findAndOmitId(currentRoute: RouteWithID): Route {\n return omit(\n {\n ...currentRoute,\n routes: currentRoute.routes?.map(findAndOmitId),\n },\n 'id'\n );\n }\n\n return findAndOmitId(findAndAdd(routeTree));\n};\n\nexport function findExistingRoute(id: string, routeTree: RouteWithID): RouteWithID | undefined {\n return routeTree.id === id ? routeTree : routeTree.routes?.find((route) => findExistingRoute(id, route));\n}\n","import { css } from '@emotion/css';\nimport React, { CSSProperties } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\ninterface StackProps {\n direction?: CSSProperties['flexDirection'];\n alignItems?: CSSProperties['alignItems'];\n wrap?: boolean;\n gap?: number;\n flexGrow?: CSSProperties['flexGrow'];\n children: React.ReactNode;\n}\n\nexport function Stack(props: StackProps) {\n const styles = useStyles2(getStyles, props);\n return {props.children}
;\n}\n\nconst getStyles = (theme: GrafanaTheme2, props: StackProps) => ({\n root: css({\n display: 'flex',\n flexDirection: props.direction ?? 'row',\n flexWrap: props.wrap ?? true ? 'wrap' : undefined,\n alignItems: props.alignItems,\n gap: theme.spacing(props.gap ?? 2),\n flexGrow: props.flexGrow,\n }),\n});\n"],"names":["AlertWarning","title","children","Alert","warningStyles","theme","GrafanaRuleExportPreview","alertUid","exportFormat","onClose","ruleTextDefinition","isFetching","alertRuleApi","downloadFileName","LoadingPlaceholder","FileExportPreview","GrafanaRuleExporter","activeTab","setActiveTab","GrafanaExportDrawer","GroupAndNamespaceFields","rulesSourceName","control","watch","errors","setValue","style","getStyle","rulerRequests","useUnifiedAlertingSelector","state","dispatch","rulesConfig","namespace","namespaceOptions","groupOptions","group","Field","InputControl","onChange","ref","field","value","CloudEvaluationBehavior","styles","getStyles","register","type","dataSourceName","RuleEditorSection","Input","Select","time","PreviewRule","RecordingRulesNameSpaceAndGroupStep","AlertRuleForm","existing","prefill","notifyApp","queryParams","useQueryParams","showEditYaml","setShowEditYaml","evaluateEvery","setEvaluateEvery","routeParams","ruleType","uidFromParams","returnTo","showDeleteModal","setShowDeleteModal","defaultValues","formValuesFromPrefill","formValuesFromQueryParams","formAPI","handleSubmit","showDataSourceDependantStep","submitState","useCleanup","conditionErrorMsg","setConditionErrorMsg","checkAlertCondition","msg","submit","values","exitOnSave","key","deleteRule","identifier","onInvalid","config","cancelRuleCreation","evaluateEveryInForm","actionButtons","Button","Spinner","isCortexLokiOrRecordingRule","AppChromeUpdate","e","CustomScrollbar","Stack","AlertRuleNameInput","QueryAndExpressionsStep","GrafanaEvaluationBehavior","NotificationsStep","AnnotationsStep","ConfirmModal","RuleInspector","ruleDefinition","ruleFromQueryParams","rule","CloneRuleEditor","sourceRuleId","loading","error","useAsync","ruleClone","cloneRuleDefinition","formPrefill","changeRuleName","newName","ExistingRuleEditor","id","loadingAlertRule","result","dispatched","isEditable","loadingEditable","useIsRuleEditable","defaultPageNav","getPageNav","RuleEditor","match","searchParams","useURLSearchParams","copyFromId","copyFromIdentifier","canCreateGrafanaRules","canCreateCloudRules","canEditRules","getContent","AlertingPageWrapper","ModifyExportRuleForm","ruleForm","exportData","setExportData","formValues","GrafanaRuleDesignExporter","useGetGroup","nameSpaceUID","dsFeatures","rulerConfig","getPayloadToExport","uid","existingGroup","grafanaRuleDto","updatedRule","alreadyExistsInGroup","updatedRules","useGetPayloadToExport","rulerGroupDto","GrafanaRuleDesignExportPreview","exportValues","getExport","loadingGroup","payload","GrafanaModifyExport","ruleIdentifier","setRuleIdentifier","loadingBuildInfo","alertRule","PromDurationDocs","getPromDurationStyles","PromDurationDocsTimeUnit","unit","name","example","PromDurationInput","props","HoverCard","Icon","getFormStyles","routeTimingsFields","TIMING_OPTIONS_DEFAULTS","recordingRuleNameValidationPattern","ruleFormType","entityName","ContactPointDetails","receivers","receiver","index","metadata","pluginMetadata","MAX_CONTACT_POINTS_RENDERED","ContactPointSelector","alertManager","options","onSelectContactPoint","refetchReceivers","trigger","contactPointInForm","selectedContactPointWithMetadata","option","selectedContactPointSelectableValue","LOADING_SPINNER_DURATION","loadingContactPoints","setLoadingContactPoints","sleep","ms","resolve","validateContactPoint","onClickRefresh","_","IconButton","LinkToContactPoints","FieldValidationMessage","hrefToContactPoints","TextLink","MuteTimingFields","muteTimingOptions","useSelectableMuteTimings","alertmanagerApi","interval","RouteTimings","formStyles","getValues","groupInterval","REQUIRED_FIELDS_IN_GROUPBY","DEFAULTS_TIMINGS","DISABLE_GROUPING","RoutingSettings","groupByOptions","setGroupByOptions","groupIntervalValue","groupWaitValue","repeatIntervalValue","overrideGrouping","overrideTimings","groupByCount","InlineField","Switch","Text","opt","opts","data","MultiValue","AlertManagerManualRouting","alertManagerName","isLoading","errorInContactPointStatus","contactPoints","useContactPoints","setSelectedContactPointWithMetadata","contactPoint","hasRouteSettings","integrations","description","CollapsableSection","SimplifiedRouting","contactPointsInAlert","alertManagersDataSourcesWithConfigAPI","am","selectedContactPoint","alertManagerContactPoint","NotificationPreviewByAlertManager","NotificationPreview","alertQueries","customLabels","condition","folder","alertName","disabled","previewEndpoint","previewUninitialized","potentialInstances","label","onPreview","alertManagerDataSources","onlyOneAM","alertManagerSource","RoutingOptions","simplifiedRoutingToggleEnabled","shouldRenderpreview","shouldAllowSimplifiedRouting","LabelsField","ManualAndAutomaticRouting","AutomaticRooting","manualRouting","routingOptions","onRoutingOptionChange","RadioButtonGroup","RoutingOptionDescription","labels","queries","NeedHelpInfoForNotificationPolicy","NeedHelpInfo","NeedHelpInfoForContactpoint","isCloudPreviewRequest","request","isGrafanaPreviewRequest","previewAlertRule","fetchAlertRulePreview","dataSourceUid","withLoadingIndicator","createResponse","map","catchError","of","toDataQueryError","share","PreviewRuleResult","preview","fieldConfig","width","height","PanelRenderer","fields","usePreview","allDataSourcesAvailable","useAlertQueriesStatus","isPreviewAvailable","setPreview","isMounted","useMountedState","createPreviewRequest","takeWhile","response","isCompleted","expression","dsSettings","useRulesSourcesWithRuler","dataSources","ds","dsConfig","mapDataFrameToAlertPreview","labelFields","stateFieldIndex","infoFieldIndex","labelIndexes","labelField","instanceStatusCount","instances","labelValues","labelIndex","info","CloudAlertPreview","alertPreview","instanceTags","AlertStateTag","TagList","Tooltip","ExpressionEditor","showPreviewAlertsButton","mapToValue","mapToQuery","useQueryMappers","dataQuery","dataSource","onChangeQuery","query","onRunQueriesClick","dsi","errorMessage","previewLoaded","QueryEditor","previewDataFrame","s","previewHasAlerts","DataSourcePluginContextProvider","ExpressionsEditor","onSetCondition","panelData","onUpdateRefId","onRemoveExpression","onUpdateExpressionType","onUpdateQueryExpression","expressionQueries","acc","isAlertCondition","warning","Expression","QueryOptions","queryOptions","onChangeTimeRange","onChangeQueryOptions","showOptions","setShowOptions","timeRange","Toggletip","RelativeTimeRangePicker","range","MaxDataPointsOption","MinIntervalOption","clearButton","DEFAULT_MAX_DATA_POINTS","DEFAULT_MIN_INTERVAL","QueryWrapper","onChangeDataSource","onRunQueries","onRemoveQuery","onDuplicateQuery","thresholds","thresholdsType","onChangeThreshold","dsInstance","setDsInstance","queryWithDefaults","SelectingDataSourceTooltip","HeaderExtras","alertQueryOptions","ExpressionStatusIndicator","showVizualisation","editorQueries","QueryEditorRow","settings","VizWrapper","EmptyQueryWrapper","onMaxDataPointsBlur","event","maxDataPointsNumber","maxDataPoints","onMinIntervalBlur","minInterval","QueryRows","onQueriesChange","q","item","itemIndex","updatedQueries","previousSettings","copyModel","newModel","startIndex","endIndex","update","removed","expressions","thresholdByRefId","provided","isCondition","DatasourceNotFound","defaultDataSource","onUpdateDatasource","model","refId","showDetails","setShowDetails","toggleDetails","show","handleUpdateDatasource","QueryOperationRow","Card","onChangeQueries","RecordingRuleEditor","runQueries","setData","handleChangedQuery","changedQuery","dataSourceId","expr","merged","CloudRulesSourcePicker","rulesSourcesWithRuler","dataSourceFilter","DataSourcePicker","CloudDataSourceSelector","onChangeCloudDatasource","getAvailableRuleTypes","defaultRuleType","enabledRuleTypes","onlyOneDSInQueries","getCanSwitch","availableRuleTypes","onlyOneDS","dataSourceIdFromQueries","isRecordingRuleType","canSwitchToCloudRule","dsJsonData","canSwitchToGrafanaRule","grafanaTypeEnabled","cloudTypeEnabled","canSwitchFromCloudToGrafana","canSwitchFromGrafanaToCloud","SmartAlertTypeDetector","editingExistingRule","onClickSwitch","canSwitch","disabledOptions","DESCRIPTIONS","hasCyclicalReferences","findDataSourceFromExpressionRecursive","alertQuery","alertQueryReferenced","alertQuery_","findDataSourceFromExpression","firstReference","initialState","duplicateQuery","addNewDataQuery","setDataQueries","addNewExpression","removeExpression","removeExpressions","addExpressions","updateExpression","updateExpressionRefId","rewireExpressions","updateExpressionType","updateExpressionTimeRange","updateMaxDataPoints","updateMinInterval","setRecordingRulesQueries","queriesAndExpressionsReducer","builder","addQuery","datasource","recordingRuleQuery","action","dataSourceAlertQuery","relativeTimeRange","newState","newRefId","oldRefId","queryToAdd","defaultTimeRange","useAlertQueryRunner","queryPreviewData","setQueryPreviewData","runner","AlertingQueryRunner","currentRunner","clearPreviewData","cancelQueries","queriesToPreview","isPreviewLoading","d","onDataChange","isGrafanaManagedType","isCloudAlertRuleType","dispatchReduxAction","runQueriesPreview","noCompatibleDataSources","dataQueries","emptyQueries","currentCondition","previewData","handleSetCondition","updateExpressionAndDatasource","useSetExpressionAndDataSource","onChangeRecordingRulesQueries","recordingRuleDefaultDatasource","defaultQuery","lastRefId","onClickType","datasourceUid","newQueries","onChangeExpression","promLoki","removeExpressionsInQueries","addExpressionsInQueries","prevExpressions","setPrevExpressions","prevCondition","setPrevCondition","restoreExpressionsInQueries","newDsName","sectionTitle","helpLabel","helpContent","helpLink","selectors","TypeSelectorButton","newMenu","Menu","MenuItem","Dropdown","matchersToArrayFieldMatchers","matchers","isRegex","selectableValueToString","selectableValue","selectableValuesToStrings","arr","emptyArrayFieldMatcher","defaultGroupBy","commonGroupByOptions","emptyRoute","addUniqueIdentifierToRoute","route","amRouteToFormAmRoute","formRoutes","subRoute","subFormRoute","objectMatchers","matcher","operator","formAmRouteToAmRoute","alertManagerSourceName","formAmRoute","routeTree","groupBy","INHERIT_FROM_PARENT","group_by","group_wait","group_interval","repeat_interval","object_matchers","routes","amRoute","stringToSelectableValue","str","stringsToSelectableValues","mapSelectValueToString","mapMultiSelectValueToStrings","selectableValues","promDurationValidator","duration","objectMatchersToString","repeatIntervalValidator","repeatInterval","validRepeatInterval","validGroupInterval","repeatDuration","groupDuration","generateCopiedName","originalName","exisitingNames","nonDuplicateName","i","mergePartialAmRouteWithRouteTree","partialFormRoute","findExistingRoute","findAndReplace","currentRoute","updatedRoute","newRoute","omitRouteFromRouteTree","findRoute","findAndOmit","addRouteToParentRoute","parentRoute","findAndAdd","findAndOmitId"],"sourceRoot":""}