From 23e93175d1741e74bbdf488af885075ab17faab3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 15 Jul 2020 09:18:35 +0200 Subject: [PATCH] DashboardLinks: do not over-query search endpoint (#26311) * DashboardLinks: WIP fix for dashboard links issue * Make the dashboard links update on change(hacky) * Replace dashboard links with new array when updating/adding dash links * Update snaps * Deep clone dashboard links on save Co-authored-by: Dominik Prokop --- .../components/DashLinks/DashLinksEditorCtrl.ts | 3 ++- .../components/SubMenu/DashboardLinks.tsx | 7 ++++--- .../SubMenu/DashboardLinksDashboard.tsx | 12 ++++++++---- .../dashboard/components/SubMenu/SubMenu.tsx | 15 ++++++++++----- .../dashboard/containers/DashboardPage.tsx | 2 +- .../__snapshots__/DashboardPage.test.tsx.snap | 2 ++ public/app/features/variables/state/selectors.ts | 7 ++++--- 7 files changed, 31 insertions(+), 17 deletions(-) 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);