Prometheus: Fix exemplar popover overflow (#60189)

Add popover modifiers to fix overflow issue
zserge/xorm
ismail simsek 2 years ago committed by GitHub
parent 33e4a93e36
commit 76e822af39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 17
      public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx

@ -37,7 +37,22 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
const [isOpen, setIsOpen] = useState(false);
const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement);
const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement, {
modifiers: [
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
{
name: 'flip',
options: {
fallbackPlacements: ['top', 'left-start'],
},
},
],
});
const popoverRenderTimeout = useRef<NodeJS.Timer>();
const getSymbol = () => {

Loading…
Cancel
Save