Heatmap / Status History: Enable annotations rendering (#79483)

public/app/plugins/panel/heatmap/HeatmapPanel.tsx

@@ -29,6 +29,8 @@ import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/Toolt
 import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
 import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
 
+import { AnnotationsPlugin } from '../timeseries/plugins/AnnotationsPlugin';
+
 import { ExemplarModalHeader } from './ExemplarModalHeader';
 import { HeatmapHoverView } from './HeatmapHoverView';
 import { HeatmapHoverView as HeatmapHoverViewOld } from './HeatmapHoverViewOld';
@@ -254,6 +256,14 @@ export const HeatmapPanel = ({
                 }}
               />
             )}
+            {data.annotations && (
+              <AnnotationsPlugin
+                annotations={data.annotations}
+                config={builder}
+                timeZone={timeZone}
+                disableCanvasRendering={true}
+              />
+            )}
           </UPlotChart>
         )}
       </VizLayout>

public/app/plugins/panel/heatmap/module.tsx

@@ -430,4 +430,5 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       category,
     });
   })
-  .setSuggestionsSupplier(new HeatmapSuggestionsSupplier());
+  .setSuggestionsSupplier(new HeatmapSuggestionsSupplier())
+  .setDataSupport({ annotations: true });

public/app/plugins/panel/status-history/StatusHistoryPanel.tsx

@@ -12,7 +12,7 @@ import {
   VizTooltipContainer,
   ZoomPlugin,
 } from '@grafana/ui';
-import { HoverEvent, addTooltipSupport } from '@grafana/ui/src/components/uPlot/config/addTooltipSupport';
+import { addTooltipSupport, HoverEvent } from '@grafana/ui/src/components/uPlot/config/addTooltipSupport';
 import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { TimelineChart } from 'app/core/components/TimelineChart/TimelineChart';
@@ -22,6 +22,7 @@ import {
   TimelineMode,
 } from 'app/core/components/TimelineChart/utils';
 
+import { AnnotationsPlugin } from '../timeseries/plugins/AnnotationsPlugin';
 import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
 import { getTimezones } from '../timeseries/utils';
 
@@ -217,8 +218,17 @@ export const StatusHistoryPanel = ({
           });
         }
 
-        if (config.featureToggles.newVizTooltips) {
         return (
+          <>
+            {data.annotations && (
+              <AnnotationsPlugin
+                annotations={data.annotations}
+                config={builder}
+                timeZone={timeZone}
+                disableCanvasRendering={true}
+              />
+            )}
+            {config.featureToggles.newVizTooltips ? (
               <>
                 {options.tooltip.mode !== TooltipDisplayMode.None && (
                   <TooltipPlugin2
@@ -242,16 +252,15 @@ export const StatusHistoryPanel = ({
                   />
                 )}
               </>
-          );
-        } else {
-          return (
+            ) : (
               <>
                 <ZoomPlugin config={builder} onZoom={onChangeTimeRange} />
                 {renderTooltip(alignedFrame)}
                 <OutsideRangePlugin config={builder} onChangeTimeRange={onChangeTimeRange} />
               </>
+            )}
+          </>
         );
-        }
       }}
     </TimelineChart>
   );

public/app/plugins/panel/status-history/module.tsx

@@ -83,4 +83,5 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StatusHistoryPanel)
     commonOptionsBuilder.addLegendOptions(builder, false);
     commonOptionsBuilder.addTooltipOptions(builder, !config.featureToggles.newVizTooltips);
   })
-  .setSuggestionsSupplier(new StatusHistorySuggestionsSupplier());
+  .setSuggestionsSupplier(new StatusHistorySuggestionsSupplier())
+  .setDataSupport({ annotations: true });

public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx

@@ -11,9 +11,15 @@ interface AnnotationsPluginProps {
   config: UPlotConfigBuilder;
   annotations: DataFrame[];
   timeZone: TimeZone;
+  disableCanvasRendering?: boolean;
 }
 
-export const AnnotationsPlugin = ({ annotations, timeZone, config }: AnnotationsPluginProps) => {
+export const AnnotationsPlugin = ({
+  annotations,
+  timeZone,
+  config,
+  disableCanvasRendering = false,
+}: AnnotationsPluginProps) => {
   const theme = useTheme2();
   const plotInstance = useRef<uPlot>();
 
@@ -69,6 +75,7 @@ export const AnnotationsPlugin = ({ annotations, timeZone, config }: Annotations
         ctx.closePath();
       };
 
+      if (!disableCanvasRendering) {
         for (let i = 0; i < annotationsRef.current.length; i++) {
           const annotationsView = annotationsRef.current[i];
           for (let j = 0; j < annotationsView.length; j++) {
@@ -94,10 +101,12 @@ export const AnnotationsPlugin = ({ annotations, timeZone, config }: Annotations
             }
           }
         }
+      }
+
       ctx.restore();
       return;
     });
-  }, [config, theme]);
+  }, [config, theme, disableCanvasRendering]);
 
   const mapAnnotationToXYCoords = useCallback((frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => {
     const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);