diff --git a/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts b/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts index a25726c5ace..7e0e3be661b 100644 --- a/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts +++ b/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts @@ -54,7 +54,7 @@ export class DashLinksEditorCtrl { }; addLink() { - this.dashboard.links.push(this.link); + this.dashboard.links = [...this.dashboard.links, this.link]; this.mode = 'list'; this.dashboard.updateSubmenuVisibility(); } @@ -65,6 +65,7 @@ export class DashLinksEditorCtrl { } saveLink() { + this.dashboard.links = _.cloneDeep(this.dashboard.links); this.backToList(); } diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx index 93661125740..0b461549f83 100644 --- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx +++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx @@ -10,16 +10,17 @@ import { iconMap } from '../DashLinks/DashLinksEditorCtrl'; export interface Props { dashboard: DashboardModel; + links: DashboardLink[]; } -export const DashboardLinks: FC = ({ dashboard }) => { - if (!dashboard.links.length) { +export const DashboardLinks: FC = ({ dashboard, links }) => { + if (!links.length) { return null; } return ( <> - {dashboard.links.map((link: DashboardLink, index: number) => { + {links.map((link: DashboardLink, index: number) => { const linkInfo = getLinkSrv().getAnchorInfo(link); const key = `${link.title}-$${index}`; diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx index eb5b45d6cb4..9d6a4b559a7 100644 --- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx +++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx @@ -19,13 +19,17 @@ interface State { export class DashboardLinksDashboard extends PureComponent { state: State = { resolvedLinks: [] }; + componentDidMount() { + this.searchForDashboards(); + } + componentDidUpdate(prevProps: Readonly) { - if (!this.props.link.asDropdown && prevProps.linkInfo !== this.props.linkInfo) { - this.onResolveLinks(); + if (this.props.link !== prevProps.link) { + this.searchForDashboards(); } } - onResolveLinks = async () => { + searchForDashboards = async () => { const { dashboardId, link } = this.props; const searchHits = await searchForTags(link); @@ -73,7 +77,7 @@ export class DashboardLinksDashboard extends PureComponent { <> diff --git a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx index b27124f34cc..5fa939a52cd 100644 --- a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx +++ b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx @@ -7,9 +7,11 @@ import { DashboardModel } from '../../state'; import { DashboardLinks } from './DashboardLinks'; import { Annotations } from './Annotations'; import { SubMenuItems } from './SubMenuItems'; +import { DashboardLink } from '../../state/DashboardModel'; interface OwnProps { dashboard: DashboardModel; + links: DashboardLink[]; } interface ConnectedProps { @@ -49,7 +51,8 @@ class SubMenuUnConnected extends PureComponent { }; render() { - const { dashboard, variables } = this.props; + const { dashboard, variables, links } = this.props; + if (!this.isSubMenuVisible()) { return null; } @@ -59,16 +62,18 @@ class SubMenuUnConnected extends PureComponent {
- {dashboard && } + {dashboard && }
); } } -const mapStateToProps: MapStateToProps = state => ({ - variables: getSubMenuVariables(state), -}); +const mapStateToProps: MapStateToProps = state => { + return { + variables: getSubMenuVariables(state.templating.variables), + }; +}; export const SubMenu = connect(mapStateToProps)(SubMenuUnConnected); SubMenu.displayName = 'SubMenu'; diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 1dcd3e9b805..dcd7043e417 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -309,7 +309,7 @@ export class DashboardPage extends PureComponent { >
{initError && this.renderInitFailedState()} - {!editPanel && } + {!editPanel && } ( id: string, @@ -42,9 +43,9 @@ export const getVariables = (state: StoreState = getState(), includeNewVariable return getFilteredVariables(filter, state); }; -export const getSubMenuVariables = (state: StoreState): VariableModel[] => { - return getVariables(state); -}; +export const getSubMenuVariables = memoizeOne((variables: Record): VariableModel[] => { + return getVariables(getState()); +}); export const getEditorVariables = (state: StoreState): VariableModel[] => { return getVariables(state, true);