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,41 +218,49 @@ export const StatusHistoryPanel = ({
           });
         }
 
-        if (config.featureToggles.newVizTooltips) {
-          return (
-            <>
-              {options.tooltip.mode !== TooltipDisplayMode.None && (
-                <TooltipPlugin2
-                  config={builder}
-                  hoverMode={TooltipHoverMode.xyOne}
-                  queryZoom={onChangeTimeRange}
-                  render={(u, dataIdxs, seriesIdx, isPinned, dismiss) => {
-                    return (
-                      <StatusHistoryTooltip2
-                        data={frames ?? []}
-                        dataIdxs={dataIdxs}
-                        alignedData={alignedFrame}
-                        seriesIdx={seriesIdx}
-                        timeZone={timeZone}
-                        mode={options.tooltip.mode}
-                        sortOrder={options.tooltip.sort}
-                        isPinned={isPinned}
-                      />
-                    );
-                  }}
-                />
-              )}
-            </>
-          );
-        } else {
-          return (
-            <>
-              <ZoomPlugin config={builder} onZoom={onChangeTimeRange} />
-              {renderTooltip(alignedFrame)}
-              <OutsideRangePlugin config={builder} onChangeTimeRange={onChangeTimeRange} />
-            </>
-          );
-        }
+        return (
+          <>
+            {data.annotations && (
+              <AnnotationsPlugin
+                annotations={data.annotations}
+                config={builder}
+                timeZone={timeZone}
+                disableCanvasRendering={true}
+              />
+            )}
+            {config.featureToggles.newVizTooltips ? (
+              <>
+                {options.tooltip.mode !== TooltipDisplayMode.None && (
+                  <TooltipPlugin2
+                    config={builder}
+                    hoverMode={TooltipHoverMode.xyOne}
+                    queryZoom={onChangeTimeRange}
+                    render={(u, dataIdxs, seriesIdx, isPinned, dismiss) => {
+                      return (
+                        <StatusHistoryTooltip2
+                          data={frames ?? []}
+                          dataIdxs={dataIdxs}
+                          alignedData={alignedFrame}
+                          seriesIdx={seriesIdx}
+                          timeZone={timeZone}
+                          mode={options.tooltip.mode}
+                          sortOrder={options.tooltip.sort}
+                          isPinned={isPinned}
+                        />
+                      );
+                    }}
+                  />
+                )}
+              </>
+            ) : (
+              <>
+                <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,35 +75,38 @@ export const AnnotationsPlugin = ({ annotations, timeZone, config }: Annotations
         ctx.closePath();
       };
 
-      for (let i = 0; i < annotationsRef.current.length; i++) {
-        const annotationsView = annotationsRef.current[i];
-        for (let j = 0; j < annotationsView.length; j++) {
-          const annotation = annotationsView.get(j);
+      if (!disableCanvasRendering) {
+        for (let i = 0; i < annotationsRef.current.length; i++) {
+          const annotationsView = annotationsRef.current[i];
+          for (let j = 0; j < annotationsView.length; j++) {
+            const annotation = annotationsView.get(j);
 
-          if (!annotation.time) {
-            continue;
-          }
+            if (!annotation.time) {
+              continue;
+            }
 
-          let x0 = u.valToPos(annotation.time, 'x', true);
-          const color = theme.visualization.getColorByName(annotation.color);
+            let x0 = u.valToPos(annotation.time, 'x', true);
+            const color = theme.visualization.getColorByName(annotation.color);
 
-          renderLine(x0, color);
+            renderLine(x0, color);
 
-          if (annotation.isRegion && annotation.timeEnd) {
-            let x1 = u.valToPos(annotation.timeEnd, 'x', true);
+            if (annotation.isRegion && annotation.timeEnd) {
+              let x1 = u.valToPos(annotation.timeEnd, 'x', true);
 
-            renderLine(x1, color);
+              renderLine(x1, color);
 
-            ctx.fillStyle = colorManipulator.alpha(color, 0.1);
-            ctx.rect(x0, u.bbox.top, x1 - x0, u.bbox.height);
-            ctx.fill();
+              ctx.fillStyle = colorManipulator.alpha(color, 0.1);
+              ctx.rect(x0, u.bbox.top, x1 - x0, u.bbox.height);
+              ctx.fill();
+            }
           }
         }
       }
+
       ctx.restore();
       return;
     });
-  }, [config, theme]);
+  }, [config, theme, disableCanvasRendering]);
 
   const mapAnnotationToXYCoords = useCallback((frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => {
     const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);