diff --git a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx index 4c1e2eaf91b..f944e352c67 100644 --- a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx +++ b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx @@ -2,8 +2,10 @@ import { useState } from 'react'; import { useLocation } from 'react-router-dom-v5-compat'; import { useAsync } from 'react-use'; +import { urlUtil } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; -import { Alert, Button } from '@grafana/ui'; +import { config } from '@grafana/runtime'; +import { Alert, Button, LinkButton } from '@grafana/ui'; import { DashboardModel } from 'app/features/dashboard/state/DashboardModel'; import { PanelModel } from 'app/features/dashboard/state/PanelModel'; import { useSelector } from 'app/types/store'; @@ -57,30 +59,49 @@ export const NewRuleFromPanelButton = ({ dashboard, panel, className }: Props) = ); } - const { onContinueInAlertingFromDrawer } = createPanelAlertRuleNavigation( + const { onContinueInAlertingFromDrawer, onButtonClick: onContinueInAlertingButton } = createPanelAlertRuleNavigation( () => panelToRuleFormValues(panel, dashboard), location ); + const shouldUseDrawer = config.featureToggles.createAlertRuleFromPanel; + + if (shouldUseDrawer) { + return ( + <> + + setIsOpen(false)} + onContinueInAlerting={onContinueInAlertingFromDrawer} + prefill={formValues ?? undefined} + /> + + ); + } + return ( - <> - - setIsOpen(false)} - onContinueInAlerting={onContinueInAlertingFromDrawer} - prefill={formValues ?? undefined} - /> - + + New alert rule + ); }; diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx index 8d988264122..0aeda150293 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx @@ -2,9 +2,11 @@ import { useState } from 'react'; import { useLocation } from 'react-router-dom-v5-compat'; import { useAsync } from 'react-use'; +import { urlUtil } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; +import { config } from '@grafana/runtime'; import { VizPanel } from '@grafana/scenes'; -import { Alert, Button } from '@grafana/ui'; +import { Alert, Button, LinkButton } from '@grafana/ui'; import { LogMessages, logInfo } from 'app/features/alerting/unified/Analytics'; import { AlertRuleDrawerForm } from 'app/features/alerting/unified/components/AlertRuleDrawerForm'; import { createPanelAlertRuleNavigation } from 'app/features/alerting/unified/utils/navigation'; @@ -44,30 +46,49 @@ export const ScenesNewRuleFromPanelButton = ({ panel, className }: ScenesNewRule ); } - const { onContinueInAlertingFromDrawer } = createPanelAlertRuleNavigation( + const { onContinueInAlertingFromDrawer, onButtonClick: onContinueInAlertingButton } = createPanelAlertRuleNavigation( () => scenesPanelToRuleFormValues(panel), location ); + const shouldUseDrawer = config.featureToggles.createAlertRuleFromPanel; + + if (shouldUseDrawer) { + return ( + <> + + setIsOpen(false)} + onContinueInAlerting={onContinueInAlertingFromDrawer} + prefill={formValues ?? undefined} + /> + + ); + } + return ( - <> - - setIsOpen(false)} - onContinueInAlerting={onContinueInAlertingFromDrawer} - prefill={formValues ?? undefined} - /> - + + New alert rule + ); };