\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 {(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 \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 { textUtil } from '@grafana/data';\nimport { config } from '@grafana/runtime';\n\nimport { logWarning } from '../Analytics';\n\nimport { useURLSearchParams } from './useURLSearchParams';\n\n/**\n * This hook provides a safe way to obtain the `returnTo` URL from the query string parameter\n * It validates the origin and protocol to ensure the URL is withing the Grafana app\n */\nexport function useReturnTo(fallback?: string): { returnTo: string | undefined } {\n const emptyResult = { returnTo: fallback };\n\n const [searchParams] = useURLSearchParams();\n const returnTo = searchParams.get('returnTo');\n\n if (!returnTo) {\n return emptyResult;\n }\n\n const sanitizedReturnTo = textUtil.sanitizeUrl(returnTo);\n const baseUrl = `${window.location.origin}/${config.appSubUrl}`;\n\n const sanitizedUrl = tryParseURL(sanitizedReturnTo, baseUrl);\n\n if (!sanitizedUrl) {\n logWarning('Malformed returnTo parameter', { returnTo });\n return emptyResult;\n }\n\n const { protocol, origin, pathname, search } = sanitizedUrl;\n if (['http:', 'https:'].includes(protocol) === false || origin !== window.location.origin) {\n logWarning('Malformed returnTo parameter', { returnTo });\n return emptyResult;\n }\n\n return { returnTo: `${pathname}${search}` };\n}\n\n// Tries to mimic URL.parse method https://developer.mozilla.org/en-US/docs/Web/API/URL/parse_static\nfunction tryParseURL(sanitizedReturnTo: string, baseUrl: string) {\n try {\n const url = new URL(sanitizedReturnTo, baseUrl);\n return url;\n } catch (error) {\n return null;\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