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
+
);
};