diff --git a/public/app/features/visualization/data-hover/DataHoverView.tsx b/public/app/features/visualization/data-hover/DataHoverView.tsx
index adc593a9a14..79785c94eb2 100644
--- a/public/app/features/visualization/data-hover/DataHoverView.tsx
+++ b/public/app/features/visualization/data-hover/DataHoverView.tsx
@@ -23,6 +23,7 @@ export interface Props {
mode?: TooltipDisplayMode | null;
header?: string;
padding?: number;
+ maxHeight?: number;
}
export interface DisplayValue {
@@ -92,7 +93,16 @@ export function getDisplayValuesAndLinks(
return { displayValues, links };
}
-export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, header, padding = 0 }: Props) => {
+export const DataHoverView = ({
+ data,
+ rowIndex,
+ columnIndex,
+ sortOrder,
+ mode,
+ header,
+ padding = 0,
+ maxHeight,
+}: Props) => {
const styles = useStyles2(getStyles, padding);
if (!data || rowIndex == null) {
@@ -108,7 +118,7 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
const { displayValues, links } = dispValuesAndLinks;
if (header === 'Exemplar') {
- return ;
+ return ;
}
return (
diff --git a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx
index b353b08abba..b2f17d17333 100644
--- a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx
+++ b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx
@@ -11,10 +11,11 @@ export interface Props {
displayValues: DisplayValue[];
links?: LinkModel[];
header?: string;
+ maxHeight?: number;
}
-export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar' }: Props) => {
- const styles = useStyles2(getStyles);
+export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar', maxHeight }: Props) => {
+ const styles = useStyles2(getStyles, 0, maxHeight);
const time = displayValues.find((val) => val.name === 'Time');
displayValues = displayValues.filter((val) => val.name !== 'Time'); // time?
@@ -49,7 +50,7 @@ export const ExemplarHoverView = ({ displayValues, links, header = 'Exemplar' }:
);
};
-const getStyles = (theme: GrafanaTheme2, padding = 0) => {
+const getStyles = (theme: GrafanaTheme2, padding = 0, maxHeight?: number) => {
return {
exemplarWrapper: css({
display: 'flex',
@@ -79,6 +80,8 @@ const getStyles = (theme: GrafanaTheme2, padding = 0) => {
gap: 4,
borderTop: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(1),
+ overflowY: 'auto',
+ maxHeight: maxHeight,
}),
exemplarFooter: css({
display: 'flex',
diff --git a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
index 896dbeb1feb..d15b13cd50c 100644
--- a/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapTooltip.tsx
@@ -56,6 +56,7 @@ export const HeatmapTooltip = (props: HeatmapTooltipProps) => {
rowIndex={props.dataIdxs[2]}
header={'Exemplar'}
padding={8}
+ maxHeight={props.maxHeight}
/>
);
}
diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx
index 6ec45e27d9a..ff3dfb38214 100644
--- a/public/app/plugins/panel/heatmap/module.tsx
+++ b/public/app/plugins/panel/heatmap/module.tsx
@@ -1,4 +1,4 @@
-import { FieldConfigProperty, FieldType, identityOverrideProcessor, PanelPlugin } from '@grafana/data';
+import { DataFrame, FieldConfigProperty, FieldType, identityOverrideProcessor, PanelPlugin } from '@grafana/data';
import { config } from '@grafana/runtime';
import {
AxisPlacement,
@@ -442,7 +442,9 @@ export const plugin = new PanelPlugin(HeatmapPanel)
settings: {
integer: true,
},
- showIf: (options) => options.tooltip?.mode === TooltipDisplayMode.Multi,
+ showIf: (options: Options, data: DataFrame[] | undefined, annotations: DataFrame[] | undefined) =>
+ options.tooltip?.mode === TooltipDisplayMode.Multi ||
+ annotations?.some((df) => df.meta?.custom?.resultType === 'exemplar'),
});
category = ['Legend'];
@@ -459,6 +461,8 @@ export const plugin = new PanelPlugin(HeatmapPanel)
name: 'Color',
defaultValue: defaultOptions.exemplars.color,
category,
+ showIf: (options: Options, data: DataFrame[] | undefined, annotations: DataFrame[] | undefined) =>
+ annotations?.some((df) => df.meta?.custom?.resultType === 'exemplar'),
});
})
.setSuggestionsSupplier(new HeatmapSuggestionsSupplier())
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index f8866b705f3..e4124886ce2 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
@@ -159,6 +159,7 @@ export const TimeSeriesPanel = ({
config={uplotConfig}
exemplars={data.annotations}
timeZone={timeZone}
+ maxHeight={options.tooltip.maxHeight}
/>
)}
{((canEditThresholds && onThresholdsChange) || showThresholds) && (
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
index 54e79e06743..f41e5e3af7a 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
@@ -29,6 +29,7 @@ interface ExemplarMarkerProps {
exemplarColor?: string;
clickedExemplarFieldIndex: DataFrameFieldIndex | undefined;
setClickedExemplarFieldIndex: React.Dispatch;
+ maxHeight?: number;
}
export const ExemplarMarker = ({
@@ -39,6 +40,7 @@ export const ExemplarMarker = ({
exemplarColor,
clickedExemplarFieldIndex,
setClickedExemplarFieldIndex,
+ maxHeight,
}: ExemplarMarkerProps) => {
const styles = useStyles2(getExemplarMarkerStyles);
const [isOpen, setIsOpen] = useState(false);
@@ -163,7 +165,7 @@ export const ExemplarMarker = ({
return (
{isLocked && }
-
+
);
}, [
@@ -175,6 +177,7 @@ export const ExemplarMarker = ({
floatingStyles,
getFloatingProps,
refs.setFloating,
+ maxHeight,
]);
const seriesColor = config
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
index c741f821f88..673f2288dc7 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
@@ -18,9 +18,10 @@ interface ExemplarsPluginProps {
exemplars: DataFrame[];
timeZone: TimeZone;
visibleSeries?: VisibleExemplarLabels;
+ maxHeight?: number;
}
-export const ExemplarsPlugin = ({ exemplars, timeZone, config, visibleSeries }: ExemplarsPluginProps) => {
+export const ExemplarsPlugin = ({ exemplars, timeZone, config, visibleSeries, maxHeight }: ExemplarsPluginProps) => {
const plotInstance = useRef();
const [lockedExemplarFieldIndex, setLockedExemplarFieldIndex] = useState();
@@ -83,10 +84,11 @@ export const ExemplarsPlugin = ({ exemplars, timeZone, config, visibleSeries }:
dataFrameFieldIndex={dataFrameFieldIndex}
config={config}
exemplarColor={markerColor}
+ maxHeight={maxHeight}
/>
);
},
- [config, timeZone, visibleSeries, setLockedExemplarFieldIndex, lockedExemplarFieldIndex]
+ [config, timeZone, visibleSeries, setLockedExemplarFieldIndex, lockedExemplarFieldIndex, maxHeight]
);
return (