Graph: make old graph panel thresholds work even if ngalert is enabled (

#38918) (#39233)

(cherry picked from commit 264946f)

Co-authored-by: Domas <domas.lapinskas@grafana.com>

public/app/features/alerting/state/ThresholdMapper.ts

@@ -1,9 +1,10 @@
+import { config } from 'app/core/config';
 import { PanelModel } from 'app/features/dashboard/state';
 
 export const hiddenReducerTypes = ['percent_diff', 'percent_diff_abs'];
 export class ThresholdMapper {
   static alertToGraphThresholds(panel: PanelModel) {
-    if (!panel.alert) {
+    if (!panel.alert || config.featureToggles.ngalert) {
       return false; // no update when no alerts
     }
 

public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx

@@ -5,6 +5,7 @@ import { Modal, ConfirmModal, Button } from '@grafana/ui';
 import { DashboardModel, PanelModel } from '../../state';
 import { useDashboardDelete } from './useDashboardDelete';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
+import { config } from 'app/core/config';
 
 type DeleteDashboardModalProps = {
   hideModal(): void;
@@ -41,7 +42,7 @@ export const DeleteDashboardModal: React.FC<DeleteDashboardModalProps> = ({ hide
 
 const getModalBody = (panels: PanelModel[], title: string) => {
   const totalAlerts = sumBy(panels, (panel) => (panel.alert ? 1 : 0));
-  return totalAlerts > 0 ? (
+  return totalAlerts > 0 && !config.featureToggles.ngalert ? (
     <>
       <p>Do you want to delete this dashboard?</p>
       <p>

public/app/features/dashboard/utils/panel.ts

@@ -25,9 +25,10 @@ import { UnlinkModal } from 'app/features/library-panels/components/UnlinkModal/
 export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => {
   // confirm deletion
   if (ask !== false) {
-    const text2 = panel.alert
-      ? 'Panel includes an alert rule. removing the panel will also remove the alert rule'
-      : undefined;
+    const text2 =
+      panel.alert && !config.featureToggles.ngalert
+        ? 'Panel includes an alert rule. removing the panel will also remove the alert rule'
+        : undefined;
     const confirmText = panel.alert ? 'YES' : undefined;
 
     appEvents.publish(

public/app/plugins/panel/graph/graph.ts

@@ -63,7 +63,7 @@ class GraphElement {
   data: any[] = [];
   panelWidth: number;
   eventManager: EventManager;
-  thresholdManager?: ThresholdManager;
+  thresholdManager: ThresholdManager;
   timeRegionManager: TimeRegionManager;
   declare legendElem: HTMLElement;
 
@@ -76,10 +76,7 @@ class GraphElement {
 
     this.panelWidth = 0;
     this.eventManager = new EventManager(this.ctrl);
-    // unified alerting does not support threshold for graphs, at least for now
-    if (!config.featureToggles.ngalert) {
-      this.thresholdManager = new ThresholdManager(this.ctrl);
-    }
+    this.thresholdManager = new ThresholdManager(this.ctrl);
     this.timeRegionManager = new TimeRegionManager(this.ctrl);
     // @ts-ignore
     this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
@@ -382,9 +379,7 @@ class GraphElement {
       }
       msg.appendTo(this.elem);
     }
-    if (this.thresholdManager) {
-      this.thresholdManager.draw(plot);
-    }
+    this.thresholdManager.draw(plot);
     this.timeRegionManager.draw(plot);
   }
 
@@ -455,9 +450,7 @@ class GraphElement {
     }
 
     // give space to alert editing
-    if (this.thresholdManager) {
-      this.thresholdManager.prepare(this.elem, this.data);
-    }
+    this.thresholdManager.prepare(this.elem, this.data);
 
     // un-check dashes if lines are unchecked
     this.panel.dashes = this.panel.lines ? this.panel.dashes : false;
@@ -466,9 +459,7 @@ class GraphElement {
     const options: any = this.buildFlotOptions(this.panel);
     this.prepareXAxis(options, this.panel);
     this.configureYAxisOptions(this.data, options);
-    if (this.thresholdManager) {
-      this.thresholdManager.addFlotOptions(options, this.panel);
-    }
+    this.thresholdManager.addFlotOptions(options, this.panel);
     this.timeRegionManager.addFlotOptions(options, this.panel);
     this.eventManager.addFlotEvents(this.annotations, options);
     this.sortedSeries = this.sortSeries(this.data, this.panel);

public/app/plugins/panel/graph/thresholds_form.ts

@@ -12,7 +12,7 @@ export class ThresholdFormCtrl {
   $onInit() {
     this.panel = this.panelCtrl.panel;
 
-    if (this.panel.alert) {
+    if (this.panel.alert && !config.featureToggles.ngalert) {
       this.disabled = true;
     }