From a2f01131fe21fdda7fdd30af782e2155ca56edb4 Mon Sep 17 00:00:00 2001 From: Matej Kubinec Date: Thu, 15 Feb 2024 10:30:51 +0100 Subject: [PATCH] PMM-12741 Move creation of templated alerts to separate page --- .../alert-rule-form/AlertRuleForm.tsx | 22 +--- .../QueryAndExpressionsStep.tsx | 7 -- .../SmartAlertTypeDetector.tsx | 2 - .../rule-editor/rule-types/RuleTypePicker.tsx | 16 +-- .../rule-editor/rule-types/TemplatedAlert.tsx | 32 ------ .../alerting/unified/state/actions.ts | 2 +- .../alerting/unified/types/rule-form.ts | 2 +- .../AlertRuleFromTemplate.styles.ts | 9 ++ .../AlertRuleFromTemplate.tsx | 100 ++++++++++++++++++ .../components/AlertRuleFromTemplate/index.ts | 1 + .../AlertRuleTemplate.styles.ts | 7 ++ .../AlertRuleTemplate/AlertRuleTemplate.tsx | 40 +++---- .../AdvancedRuleSection.styles.ts | 0 .../AdvancedRuleSection.tsx | 0 .../AdvancedRuleSection.types.ts | 0 .../TemplateStep/TemplateFiltersField.tsx | 0 .../TemplateStep/TemplateStep.constants.ts | 0 .../TemplateStep/TemplateStep.messages.ts | 0 .../TemplateStep/TemplateStep.styles.ts | 0 .../components}/TemplateStep/TemplateStep.tsx | 61 +++-------- .../TemplateStep/TemplateStep.types.ts | 0 .../TemplateStep/TemplateStep.utils.ts | 2 +- .../PerconaNavigation.constants.ts | 6 ++ public/app/routes/routes.tsx | 9 ++ 24 files changed, 176 insertions(+), 142 deletions(-) delete mode 100644 public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx create mode 100644 public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.styles.ts create mode 100644 public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.tsx create mode 100644 public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/index.ts rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.styles.ts (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.tsx (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.types.ts (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateFiltersField.tsx (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateStep.constants.ts (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateStep.messages.ts (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateStep.styles.ts (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateStep.tsx (84%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateStep.types.ts (100%) rename public/app/{features/alerting/unified/components/rule-editor => percona/integrated-alerting/components}/TemplateStep/TemplateStep.utils.ts (96%) diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx index 8d7ef4dc10d9..628dac968074 100644 --- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx @@ -11,8 +11,7 @@ import { useAppNotification } from 'app/core/copy/appNotification'; import { contextSrv } from 'app/core/core'; import { useCleanup } from 'app/core/hooks/useCleanup'; import { useQueryParams } from 'app/core/hooks/useQueryParams'; -import { getPerconaSettings } from 'app/percona/shared/core/selectors'; -import { useDispatch, useSelector } from 'app/types'; +import { useDispatch } from 'app/types'; import { RuleWithLocation } from 'app/types/unified-alerting'; import { logInfo, LogMessages, trackNewAlerRuleFormError } from '../../../Analytics'; @@ -37,7 +36,6 @@ import { GrafanaEvaluationBehavior } from '../GrafanaEvaluationBehavior'; import { NotificationsStep } from '../NotificationsStep'; import { RecordingRulesNameSpaceAndGroupStep } from '../RecordingRulesNameSpaceAndGroupStep'; import { RuleInspector } from '../RuleInspector'; -import { TemplateStep } from '../TemplateStep/TemplateStep'; import { QueryAndExpressionsStep } from '../query-and-alert-condition/QueryAndExpressionsStep'; import { translateRouteParamToRuleType } from '../util'; @@ -53,7 +51,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { const [queryParams] = useQueryParams(); const [showEditYaml, setShowEditYaml] = useState(false); const [evaluateEvery, setEvaluateEvery] = useState(existing?.group.interval ?? MINUTE); - const { result } = useSelector(getPerconaSettings); const routeParams = useParams<{ type: string; id: string }>(); const ruleType = translateRouteParamToRuleType(routeParams.type); @@ -75,23 +72,14 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { return formValuesFromQueryParams(queryParams['defaults'], ruleType); } - const type = ruleType - ? ruleType - : result && !!result.alertingEnabled - ? RuleFormType.templated - : RuleFormType.grafana; - return { ...getDefaultFormValues(), condition: 'C', queries: getDefaultQueries(), + type: ruleType || RuleFormType.grafana, evaluateEvery: evaluateEvery, - // @PERCONA - // Set templated as default - type, - group: result && !!result.alertingEnabled ? 'default-alert-group' : '', }; - }, [existing, prefill, queryParams, evaluateEvery, ruleType, result]); + }, [existing, prefill, queryParams, evaluateEvery, ruleType]); const formAPI = useForm({ mode: 'onSubmit', @@ -105,8 +93,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { const dataSourceName = watch('dataSourceName'); const showDataSourceDependantStep = Boolean(type && (type === RuleFormType.grafana || !!dataSourceName)); - // @PERCONA - const showTemplateStep = type === RuleFormType.templated; const submitState = useUnifiedAlertingSelector((state) => state.ruleForm.saveRule) || initialAsyncRequestState; useCleanup((state) => (state.unifiedAlerting.ruleForm.saveRule = initialAsyncRequestState)); @@ -236,8 +222,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => { {/* Step 2 */} - {/* @PERCONA */} - {showTemplateStep && } {/* Step 3-4-5 */} {showDataSourceDependantStep && ( <> diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx index 4d52d98fd60d..9360b934ad79 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx @@ -335,19 +335,12 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P const onClickSwitch = useCallback(() => { const typeInForm = getValues('type'); - - console.log({ typeInForm }); - if (typeInForm === RuleFormType.cloudAlerting) { setValue('type', RuleFormType.grafana); setValue('dataSourceName', null); // set data source name back to "null" prevExpressions.length > 0 && restoreExpressionsInQueries(); prevCondition && setValue('condition', prevCondition); - - // @PERCONA - } else if (typeInForm === RuleFormType.templated) { - setValue('type', RuleFormType.templated); } else { setValue('type', RuleFormType.cloudAlerting); // dataSourceName is used only by Mimir/Loki alerting and recording rules diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx index 2f98bb67a4e7..5a526fc8443d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx @@ -85,8 +85,6 @@ export function SmartAlertTypeDetector({ const [ruleFormType] = getValues(['type']); const canSwitch = getCanSwitch({ queries, ruleFormType, rulesSourcesWithRuler }); - console.log(ruleFormType); - const options = [ { label: 'Grafana-managed', value: RuleFormType.grafana }, { label: 'Data source-managed', value: RuleFormType.cloudAlerting }, diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx index d6463d623815..60d54a0df97c 100644 --- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx @@ -12,8 +12,6 @@ import { RuleFormType } from '../../../types/rule-form'; import { GrafanaManagedRuleType } from './GrafanaManagedAlert'; import { MimirFlavoredType } from './MimirOrLokiAlert'; -import { TemplatedAlertRuleType } from './TemplatedAlert'; - interface RuleTypePickerProps { onChange: (value: RuleFormType) => void; selected: RuleFormType; @@ -23,10 +21,6 @@ interface RuleTypePickerProps { const RuleTypePicker = ({ selected, onChange, enabledTypes }: RuleTypePickerProps) => { const rulesSourcesWithRuler = useRulesSourcesWithRuler(); const hasLotexDatasources = !isEmpty(rulesSourcesWithRuler); - // @PERCONA - // Simplified conditions by adding these two consts below - const showTemplateRuleDisclaimer = enabledTypes.includes(RuleFormType.templated); - const showGrafanaManagedRuleDisclaimer = !showTemplateRuleDisclaimer && enabledTypes.includes(RuleFormType.grafana); useEffect(() => { dispatch(fetchAllPromBuildInfoAction()); @@ -41,10 +35,6 @@ const RuleTypePicker = ({ selected, onChange, enabledTypes }: RuleTypePickerProp return ( <> - {/* @PERCONA */} - {enabledTypes.includes(RuleFormType.templated) && ( - - )} {enabledTypes.includes(RuleFormType.grafana) && ( )} @@ -56,11 +46,7 @@ const RuleTypePicker = ({ selected, onChange, enabledTypes }: RuleTypePickerProp /> )} - {showTemplateRuleDisclaimer && ( - Select “Percona templated” for an easier alert rule setup. - )} - {/* First condition shouldn't occur, just a safety measure */} - {!showTemplateRuleDisclaimer && showGrafanaManagedRuleDisclaimer && ( + {enabledTypes.includes(RuleFormType.grafana) && ( Select “Grafana managed” unless you have a Mimir, Loki or Cortex data source with the Ruler API enabled. diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx deleted file mode 100644 index 7add8f093f78..000000000000 --- a/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// @PERCONA -// This whole component is custom -import React, { FC } from 'react'; - -import { useTheme2 } from '@grafana/ui'; - -import { RuleFormType } from '../../../types/rule-form'; - -import { RuleType, SharedProps } from './RuleType'; - -const TemplatedAlertRuleType: FC = ({ selected = false, disabled, onClick }) => { - const theme = useTheme2(); - return ( - - Creates an alert based on a template. -
- Simpler initial alert setup with more robust alerting options. - - } - image={theme.isLight ? 'public/img/icons/mono/pmm-logo-light.svg' : 'public/img/icons/mono/pmm-logo.svg'} - selected={selected} - disabled={disabled} - value={RuleFormType.templated} - onClick={onClick} - /> - ); -}; - -export { TemplatedAlertRuleType }; diff --git a/public/app/features/alerting/unified/state/actions.ts b/public/app/features/alerting/unified/state/actions.ts index 5b216e2bdb4b..533b0f4f9215 100644 --- a/public/app/features/alerting/unified/state/actions.ts +++ b/public/app/features/alerting/unified/state/actions.ts @@ -2,6 +2,7 @@ import { AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit'; import { isEmpty } from 'lodash'; import { locationService } from '@grafana/runtime'; +import { formatCreateAPIPayload } from 'app/percona/integrated-alerting/components/TemplateStep/TemplateStep.utils'; import { AlertRulesService } from 'app/percona/shared/services/AlertRules/AlertRules.service'; import { AlertmanagerAlert, @@ -66,7 +67,6 @@ import { FetchRulerRulesFilter, setRulerRuleGroup, } from '../api/ruler'; -import { formatCreateAPIPayload } from '../components/rule-editor/TemplateStep/TemplateStep.utils'; import { RuleFormType, RuleFormValues } from '../types/rule-form'; import { addDefaultsToAlertmanagerConfig, removeMuteTimingFromRoute } from '../utils/alertmanager'; import { diff --git a/public/app/features/alerting/unified/types/rule-form.ts b/public/app/features/alerting/unified/types/rule-form.ts index bf65a8214ca4..18f821033fe6 100644 --- a/public/app/features/alerting/unified/types/rule-form.ts +++ b/public/app/features/alerting/unified/types/rule-form.ts @@ -1,9 +1,9 @@ import { Template } from 'app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.types'; +import { FiltersForm } from 'app/percona/integrated-alerting/components/TemplateStep/TemplateStep.types'; import { Severity } from 'app/percona/shared/core'; import { AlertQuery, GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto'; import { Folder } from '../components/rule-editor/RuleFolderPicker'; -import { FiltersForm } from '../components/rule-editor/TemplateStep/TemplateStep.types'; export enum RuleFormType { grafana = 'grafana', diff --git a/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.styles.ts b/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.styles.ts new file mode 100644 index 000000000000..ad1800f06d67 --- /dev/null +++ b/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.styles.ts @@ -0,0 +1,9 @@ +import { css } from '@emotion/css'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export const getStyles = (theme: GrafanaTheme2) => ({ + buttonSpinner: css` + margin-right: ${theme.spacing(1)}; + `, +}); diff --git a/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.tsx b/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.tsx new file mode 100644 index 000000000000..9842390cbe9a --- /dev/null +++ b/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/AlertRuleFromTemplate.tsx @@ -0,0 +1,100 @@ +import React, { FC, useMemo } from 'react'; +import { FormProvider, useForm } from 'react-hook-form'; +import { Link } from 'react-router-dom'; + +import { Button, HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui'; +import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate'; +import { Page } from 'app/core/components/Page/Page'; +import { useAppNotification } from 'app/core/copy/appNotification'; +import { useQueryParams } from 'app/core/hooks/useQueryParams'; +import { useUnifiedAlertingSelector } from 'app/features/alerting/unified/hooks/useUnifiedAlertingSelector'; +import { saveRuleFormAction } from 'app/features/alerting/unified/state/actions'; +import { RuleFormType, RuleFormValues } from 'app/features/alerting/unified/types/rule-form'; +import { initialAsyncRequestState } from 'app/features/alerting/unified/utils/redux'; +import { getDefaultFormValues, getDefaultQueries, MINUTE } from 'app/features/alerting/unified/utils/rule-form'; +import { useDispatch } from 'app/types'; + +import { TemplateStep } from '../TemplateStep/TemplateStep'; + +import { getStyles } from './AlertRuleFromTemplate.styles'; + +export const AlertRuleFromTemplate: FC = () => { + const dispatch = useDispatch(); + const notifyApp = useAppNotification(); + const [queryParams] = useQueryParams(); + const evaluateEvery = MINUTE; + const returnTo = !queryParams['returnTo'] ? '/alerting/list' : String(queryParams['returnTo']); + const defaultValues: RuleFormValues = useMemo(() => { + return { + ...getDefaultFormValues(), + condition: 'C', + queries: getDefaultQueries(), + evaluateEvery: evaluateEvery, + type: RuleFormType.templated, + }; + }, [evaluateEvery]); + const methods = useForm({ + mode: 'onSubmit', + defaultValues, + shouldFocusError: true, + }); + const styles = useStyles2(getStyles); + const submitState = useUnifiedAlertingSelector((state) => state.ruleForm.saveRule) || initialAsyncRequestState; + + const submit = (values: RuleFormValues) => { + dispatch( + saveRuleFormAction({ + values: { + ...defaultValues, + ...values, + annotations: + values.annotations + ?.map(({ key, value }) => ({ key: key.trim(), value: value.trim() })) + .filter(({ key, value }) => !!key && !!value) ?? [], + labels: + values.labels + ?.map(({ key, value }) => ({ key: key.trim(), value: value.trim() })) + .filter(({ key }) => !!key) ?? [], + }, + redirectOnSave: returnTo, + initialAlertRuleName: defaultValues.name, + evaluateEvery: evaluateEvery, + }) + ); + }; + + const onInvalid = () => { + notifyApp.error('There are errors in the form. Please correct them and try again!'); + }; + + const actionButtons = ( + + + + + + + ); + + return ( + + + + + + + ); +}; + +export default AlertRuleFromTemplate; diff --git a/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/index.ts b/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/index.ts new file mode 100644 index 000000000000..6c5a8665c14e --- /dev/null +++ b/public/app/percona/integrated-alerting/components/AlertRuleFromTemplate/index.ts @@ -0,0 +1 @@ +export * from './AlertRuleFromTemplate'; diff --git a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.styles.ts b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.styles.ts index d6cf1421e274..cfa66c63cb24 100644 --- a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.styles.ts +++ b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.styles.ts @@ -11,4 +11,11 @@ export const getStyles = ({ v1: { spacing, typography, colors } }: GrafanaTheme2 font-size: ${typography.size.xs}; color: ${colors.textFaint}; `, + tableWrapper: css` + /* Actions Column */ + table thead tr th:last-child { + max-width: fit-content; + width: 275px; + } + `, }); diff --git a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx index e49db97f6a6d..9cf7eea88616 100644 --- a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx +++ b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx @@ -136,25 +136,27 @@ export const AlertRuleTemplate: FC = () => { setVisible={setAddModalVisible} getAlertRuleTemplates={getAlertRuleTemplates} /> - - } - /> +
+
+ } + /> + diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.styles.ts b/public/app/percona/integrated-alerting/components/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.styles.ts similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.styles.ts rename to public/app/percona/integrated-alerting/components/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.styles.ts diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.tsx b/public/app/percona/integrated-alerting/components/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.tsx similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.tsx rename to public/app/percona/integrated-alerting/components/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.tsx diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.types.ts b/public/app/percona/integrated-alerting/components/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.types.ts similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.types.ts rename to public/app/percona/integrated-alerting/components/TemplateStep/AdvancedRuleSection/AdvancedRuleSection.types.ts diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateFiltersField.tsx b/public/app/percona/integrated-alerting/components/TemplateStep/TemplateFiltersField.tsx similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateFiltersField.tsx rename to public/app/percona/integrated-alerting/components/TemplateStep/TemplateFiltersField.tsx diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.constants.ts b/public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.constants.ts similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.constants.ts rename to public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.constants.ts diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.messages.ts b/public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.messages.ts similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.messages.ts rename to public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.messages.ts diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.styles.ts b/public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.styles.ts similarity index 100% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.styles.ts rename to public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.styles.ts diff --git a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.tsx b/public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.tsx similarity index 84% rename from public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.tsx rename to public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.tsx index e1c97ee4b591..0253518aef5b 100644 --- a/public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateStep.tsx +++ b/public/app/percona/integrated-alerting/components/TemplateStep/TemplateStep.tsx @@ -1,59 +1,27 @@ import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; -import { Stack } from '@grafana/experimental'; -import { Field, Icon, Input, InputControl, Label, Select, Tooltip, useStyles2 } from '@grafana/ui'; -import { FolderPickerFilter } from 'app/core/components/Select/OldFolderPicker'; -import { contextSrv } from 'app/core/core'; +import { Field, Input, Select } from '@grafana/ui'; import { useQueryParams } from 'app/core/hooks/useQueryParams'; -import { DashboardSearchHit } from 'app/features/search/types'; +import { FolderAndGroup } from 'app/features/alerting/unified/components/rule-editor/FolderAndGroup'; +import { fetchExternalAlertmanagersConfigAction } from 'app/features/alerting/unified/state/actions'; +import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form'; +import { initialAsyncRequestState } from 'app/features/alerting/unified/utils/redux'; +import { durationValidationPattern, parseDurationToMilliseconds } from 'app/features/alerting/unified/utils/time'; import { Template, TemplateParamType, } from 'app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.types'; import { fetchTemplatesAction } from 'app/percona/shared/core/reducers'; import { getTemplates } from 'app/percona/shared/core/selectors'; -import { AccessControlAction, useDispatch, useSelector } from 'app/types'; - -import { fetchExternalAlertmanagersConfigAction } from '../../../state/actions'; -import { RuleFormValues } from '../../../types/rule-form'; -import { initialAsyncRequestState } from '../../../utils/redux'; -import { durationValidationPattern, parseDurationToMilliseconds } from '../../../utils/time'; -import { RuleEditorSection } from '../RuleEditorSection'; -import { Folder, RuleFolderPicker } from '../RuleFolderPicker'; -import { checkForPathSeparator } from '../util'; +import { useDispatch, useSelector } from 'app/types'; import { AdvancedRuleSection } from './AdvancedRuleSection/AdvancedRuleSection'; import TemplateFiltersField from './TemplateFiltersField'; import { SEVERITY_OPTIONS } from './TemplateStep.constants'; import { Messages } from './TemplateStep.messages'; -import { getStyles } from './TemplateStep.styles'; import { formatTemplateOptions } from './TemplateStep.utils'; -const useRuleFolderFilter = (existingRuleForm: null) => { - const isSearchHitAvailable = useCallback( - (hit: DashboardSearchHit) => { - // @PERCONA_TODO - // const rbacDisabledFallback = contextSrv.hasEditPermissionInFolders; - - const canCreateRuleInFolder = contextSrv.hasPermissionInMetadata(AccessControlAction.AlertingRuleCreate, hit); - - const canUpdateInCurrentFolder = - existingRuleForm && - // hit.folderId === existingRuleForm.id && - contextSrv.hasPermissionInMetadata(AccessControlAction.AlertingRuleUpdate, hit); - - return canCreateRuleInFolder || canUpdateInCurrentFolder; - }, - [existingRuleForm] - ); - - return useCallback( - (folderHits) => folderHits.filter(isSearchHitAvailable), - [isSearchHitAvailable] - ); -}; - export const TemplateStep: FC = () => { const { register, @@ -63,10 +31,8 @@ export const TemplateStep: FC = () => { } = useFormContext(); const dispatch = useDispatch(); const templates = useRef([]); - const styles = useStyles2(getStyles); const [currentTemplate, setCurrentTemplate] = useState