From 27476078056b44990b52fd159977d951baa8271e Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 16 Jul 2020 11:23:07 +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 <dominik.prokop@grafana.com>
(cherry picked from commit 23e93175d1741e74bbdf488af885075ab17faab3)
---
 .../DashLinks/DashLinksEditorCtrl.ts          |  3 +-
 .../components/SubMenu/DashboardLinks.tsx     | 53 +++++++++----------
 .../SubMenu/DashboardLinksDashboard.tsx       | 12 +++--
 .../dashboard/components/SubMenu/SubMenu.tsx  | 15 ++++--
 .../dashboard/containers/DashboardPage.tsx    |  2 +-
 .../__snapshots__/DashboardPage.test.tsx.snap |  2 +
 .../app/features/variables/state/selectors.ts |  7 +--
 7 files changed, 53 insertions(+), 41 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 1fbea0c8a1b..0b461549f83 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
@@ -10,38 +10,37 @@ import { iconMap } from '../DashLinks/DashLinksEditorCtrl';
 
 export interface Props {
   dashboard: DashboardModel;
+  links: DashboardLink[];
 }
 
-export const DashboardLinks: FC<Props> = ({ dashboard }) => {
+export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
+  if (!links.length) {
+    return null;
+  }
+
   return (
-    dashboard.links.length > 0 && (
-      <>
-        {dashboard.links.map((link: DashboardLink, index: number) => {
-          const linkInfo = getLinkSrv().getAnchorInfo(link);
-          const key = `${link.title}-$${index}`;
+    <>
+      {links.map((link: DashboardLink, index: number) => {
+        const linkInfo = getLinkSrv().getAnchorInfo(link);
+        const key = `${link.title}-$${index}`;
 
-          if (link.type === 'dashboards') {
-            return <DashboardLinksDashboard key={key} link={link} linkInfo={linkInfo} dashboardId={dashboard.id} />;
-          }
+        if (link.type === 'dashboards') {
+          return <DashboardLinksDashboard key={key} link={link} linkInfo={linkInfo} dashboardId={dashboard.id} />;
+        }
 
-          const linkElement = (
-            <a
-              className="gf-form-label"
-              href={sanitizeUrl(linkInfo.href)}
-              target={link.targetBlank ? '_blank' : '_self'}
-            >
-              <Icon name={iconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
-              <span>{sanitize(linkInfo.title)}</span>
-            </a>
-          );
+        const linkElement = (
+          <a className="gf-form-label" href={sanitizeUrl(linkInfo.href)} target={link.targetBlank ? '_blank' : '_self'}>
+            <Icon name={iconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
+            <span>{sanitize(linkInfo.title)}</span>
+          </a>
+        );
 
-          return (
-            <div key={key} className="gf-form">
-              {link.tooltip ? <Tooltip content={link.tooltip}>{linkElement}</Tooltip> : linkElement}
-            </div>
-          );
-        })}
-      </>
-    )
+        return (
+          <div key={key} className="gf-form">
+            {link.tooltip ? <Tooltip content={link.tooltip}>{linkElement}</Tooltip> : linkElement}
+          </div>
+        );
+      })}
+    </>
   );
 };
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<Props, State> {
   state: State = { resolvedLinks: [] };
 
+  componentDidMount() {
+    this.searchForDashboards();
+  }
+
   componentDidUpdate(prevProps: Readonly<Props>) {
-    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<Props, State> {
       <>
         <a
           className="gf-form-label pointer"
-          onClick={this.onResolveLinks}
+          onClick={this.searchForDashboards}
           data-placement="bottom"
           data-toggle="dropdown"
         >
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<Props> {
   };
 
   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<Props> {
         <SubMenuItems variables={variables} />
         <Annotations annotations={dashboard.annotations.list} onAnnotationChanged={this.onAnnotationStateChanged} />
         <div className="gf-form gf-form--grow" />
-        {dashboard && <DashboardLinks dashboard={dashboard} />}
+        {dashboard && <DashboardLinks dashboard={dashboard} links={links} />}
         <div className="clearfix" />
       </div>
     );
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => ({
-  variables: getSubMenuVariables(state),
-});
+const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = 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<Props, State> {
           >
             <div className="dashboard-content">
               {initError && this.renderInitFailedState()}
-              {!editPanel && <SubMenu dashboard={dashboard} />}
+              {!editPanel && <SubMenu dashboard={dashboard} links={dashboard.links} />}
 
               <DashboardGrid
                 dashboard={dashboard}
diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
index 0c6c756f74b..8683fedcd51 100644
--- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
@@ -211,6 +211,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
               "version": 0,
             }
           }
+          links={Array []}
         />
         <DashboardGrid
           dashboard={
@@ -569,6 +570,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
               "version": 0,
             }
           }
+          links={Array []}
         />
         <DashboardGrid
           dashboard={
diff --git a/public/app/features/variables/state/selectors.ts b/public/app/features/variables/state/selectors.ts
index 613884560a7..87d64a623a3 100644
--- a/public/app/features/variables/state/selectors.ts
+++ b/public/app/features/variables/state/selectors.ts
@@ -2,6 +2,7 @@ import { StoreState } from '../../../types';
 import { VariableModel } from '../types';
 import { getState } from '../../../store/store';
 import { NEW_VARIABLE_ID } from './types';
+import memoizeOne from 'memoize-one';
 
 export const getVariable = <T extends VariableModel = VariableModel>(
   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<string, VariableModel>): VariableModel[] => {
+  return getVariables(getState());
+});
 
 export const getEditorVariables = (state: StoreState): VariableModel[] => {
   return getVariables(state, true);