IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adela Almasan
2023-12-19 12:24:55 -06:00
committed by GitHub
parent 130d45c831
commit 209619c8c1
5 changed files with 86 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/plugins/panel/heatmap/HeatmapPanel.tsx
View File

@@ -29,6 +29,8 @@ import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/Toolt
import { ColorScale } from 'app/core/components/ColorScale/ColorScale'; import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap'; import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { AnnotationsPlugin } from '../timeseries/plugins/AnnotationsPlugin';
import { ExemplarModalHeader } from './ExemplarModalHeader'; import { ExemplarModalHeader } from './ExemplarModalHeader';
import { HeatmapHoverView } from './HeatmapHoverView'; import { HeatmapHoverView } from './HeatmapHoverView';
import { HeatmapHoverView as HeatmapHoverViewOld } from './HeatmapHoverViewOld'; 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> </UPlotChart>
)} )}
</VizLayout> </VizLayout>

3
public/app/plugins/panel/heatmap/module.tsx
View File

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

81
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@@ -12,7 +12,7 @@ import {
VizTooltipContainer, VizTooltipContainer,
ZoomPlugin, ZoomPlugin,
} from '@grafana/ui'; } 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 { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
import { CloseButton } from 'app/core/components/CloseButton/CloseButton'; import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
import { TimelineChart } from 'app/core/components/TimelineChart/TimelineChart'; import { TimelineChart } from 'app/core/components/TimelineChart/TimelineChart';
@@ -22,6 +22,7 @@ import {
TimelineMode, TimelineMode,
} from 'app/core/components/TimelineChart/utils'; } from 'app/core/components/TimelineChart/utils';
import { AnnotationsPlugin } from '../timeseries/plugins/AnnotationsPlugin';
import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin'; import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
import { getTimezones } from '../timeseries/utils'; import { getTimezones } from '../timeseries/utils';
@@ -217,41 +218,49 @@ export const StatusHistoryPanel = ({
}); });
} }
if (config.featureToggles.newVizTooltips) { return (
return ( <>
<> {data.annotations && (
{options.tooltip.mode !== TooltipDisplayMode.None && ( <AnnotationsPlugin
<TooltipPlugin2 annotations={data.annotations}
config={builder} config={builder}
hoverMode={TooltipHoverMode.xyOne} timeZone={timeZone}
queryZoom={onChangeTimeRange} disableCanvasRendering={true}
render={(u, dataIdxs, seriesIdx, isPinned, dismiss) => { />
return ( )}
<StatusHistoryTooltip2 {config.featureToggles.newVizTooltips ? (
data={frames ?? []} <>
dataIdxs={dataIdxs} {options.tooltip.mode !== TooltipDisplayMode.None && (
alignedData={alignedFrame} <TooltipPlugin2
seriesIdx={seriesIdx} config={builder}
timeZone={timeZone} hoverMode={TooltipHoverMode.xyOne}
mode={options.tooltip.mode} queryZoom={onChangeTimeRange}
sortOrder={options.tooltip.sort} render={(u, dataIdxs, seriesIdx, isPinned, dismiss) => {
isPinned={isPinned} return (
/> <StatusHistoryTooltip2
); data={frames ?? []}
}} dataIdxs={dataIdxs}
/> alignedData={alignedFrame}
)} seriesIdx={seriesIdx}
</> timeZone={timeZone}
); mode={options.tooltip.mode}
} else { sortOrder={options.tooltip.sort}
return ( isPinned={isPinned}
<> />
<ZoomPlugin config={builder} onZoom={onChangeTimeRange} /> );
{renderTooltip(alignedFrame)} }}
<OutsideRangePlugin config={builder} onChangeTimeRange={onChangeTimeRange} /> />
</> )}
); </>
} ) : (
<>
<ZoomPlugin config={builder} onZoom={onChangeTimeRange} />
{renderTooltip(alignedFrame)}
<OutsideRangePlugin config={builder} onChangeTimeRange={onChangeTimeRange} />
</>
)}
</>
);
}} }}
</TimelineChart> </TimelineChart>
); );

3
public/app/plugins/panel/status-history/module.tsx
View File

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

45
public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
View File

@@ -11,9 +11,15 @@ interface AnnotationsPluginProps {
config: UPlotConfigBuilder; config: UPlotConfigBuilder;
annotations: DataFrame[]; annotations: DataFrame[];
timeZone: TimeZone; timeZone: TimeZone;
disableCanvasRendering?: boolean;
} }
export const AnnotationsPlugin = ({ annotations, timeZone, config }: AnnotationsPluginProps) => { export const AnnotationsPlugin = ({
annotations,
timeZone,
config,
disableCanvasRendering = false,
}: AnnotationsPluginProps) => {
const theme = useTheme2(); const theme = useTheme2();
const plotInstance = useRef<uPlot>(); const plotInstance = useRef<uPlot>();
@@ -69,35 +75,38 @@ export const AnnotationsPlugin = ({ annotations, timeZone, config }: Annotations
ctx.closePath(); ctx.closePath();
}; };
for (let i = 0; i < annotationsRef.current.length; i++) { if (!disableCanvasRendering) {
const annotationsView = annotationsRef.current[i]; for (let i = 0; i < annotationsRef.current.length; i++) {
for (let j = 0; j < annotationsView.length; j++) { const annotationsView = annotationsRef.current[i];
const annotation = annotationsView.get(j); for (let j = 0; j < annotationsView.length; j++) {
const annotation = annotationsView.get(j);
if (!annotation.time) { if (!annotation.time) {
continue; continue;
} }
let x0 = u.valToPos(annotation.time, 'x', true); let x0 = u.valToPos(annotation.time, 'x', true);
const color = theme.visualization.getColorByName(annotation.color); const color = theme.visualization.getColorByName(annotation.color);
renderLine(x0, color); renderLine(x0, color);
if (annotation.isRegion && annotation.timeEnd) { if (annotation.isRegion && annotation.timeEnd) {
let x1 = u.valToPos(annotation.timeEnd, 'x', true); let x1 = u.valToPos(annotation.timeEnd, 'x', true);
renderLine(x1, color); renderLine(x1, color);
ctx.fillStyle = colorManipulator.alpha(color, 0.1); ctx.fillStyle = colorManipulator.alpha(color, 0.1);
ctx.rect(x0, u.bbox.top, x1 - x0, u.bbox.height); ctx.rect(x0, u.bbox.top, x1 - x0, u.bbox.height);
ctx.fill(); ctx.fill();
}
} }
} }
} }
ctx.restore(); ctx.restore();
return; return;
}); });
}, [config, theme]); }, [config, theme, disableCanvasRendering]);
const mapAnnotationToXYCoords = useCallback((frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => { const mapAnnotationToXYCoords = useCallback((frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => {
const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame); const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);