diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx index 0b461549f83..14db266dda3 100644 --- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx +++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useReducer } from 'react'; import { Icon, IconName, Tooltip } from '@grafana/ui'; import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize'; import { DashboardLinksDashboard } from './DashboardLinksDashboard'; @@ -7,6 +7,8 @@ import { getLinkSrv } from '../../../panel/panellinks/link_srv'; import { DashboardModel } from '../../state'; import { DashboardLink } from '../../state/DashboardModel'; import { iconMap } from '../DashLinks/DashLinksEditorCtrl'; +import { useEffectOnce } from 'react-use'; +import { CoreEvents } from 'app/types'; export interface Props { dashboard: DashboardModel; @@ -18,6 +20,17 @@ export const DashboardLinks: FC = ({ dashboard, links }) => { return null; } + // Emulate forceUpdate (https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate) + const [, forceUpdate] = useReducer(x => x + 1, 0); + + useEffectOnce(() => { + dashboard.on(CoreEvents.timeRangeUpdated, forceUpdate); + + return () => { + dashboard.off(CoreEvents.timeRangeUpdated, forceUpdate); + }; + }); + return ( <> {links.map((link: DashboardLink, index: number) => {