Link suppliers: getLinks API update (#29757)

* ContextMenuPlugin WIP * Remove Add annotations menu item from graph context menu * ts ifx * WIP * Tests updates * ts check fix * Fix rebase * Use replace function in angular graph data links
grafana · Dec 15, 2020 · 683ce69 · 683ce69
1 parent 5f4b528
commit 683ce69
Show file tree

Hide file tree

Showing 25 changed files with 455 additions and 445 deletions.
diff --git a/packages/grafana-data/src/types/ScopedVars.ts b/packages/grafana-data/src/types/ScopedVars.ts
@@ -4,6 +4,4 @@ export interface ScopedVar<T = any> {
   [key: string]: any;
 }
 
-export interface ScopedVars {
-  [key: string]: ScopedVar;
-}
+export interface ScopedVars extends Record<string, ScopedVar> {}
diff --git a/packages/grafana-data/src/types/dataLink.ts b/packages/grafana-data/src/types/dataLink.ts
@@ -1,12 +1,12 @@
-import { ScopedVars } from './ScopedVars';
 import { DataQuery } from './datasource';
+import { InterpolateFunction } from './panel';
 
 /**
  * Callback info for DataLink click events
  */
 export interface DataLinkClickEvent<T = any> {
   origin: T;
-  scopedVars?: ScopedVars;
+  replaceVariables: InterpolateFunction | undefined;
   e?: any; // mouse|react event
 }
 
@@ -67,7 +67,7 @@ export interface LinkModel<T = any> {
  * TODO: ScopedVars in in GrafanaUI package!
  */
 export interface LinkModelSupplier<T extends object> {
-  getLinks(scopedVars?: any): Array<LinkModel<T>>;
+  getLinks(replaceVariables?: InterpolateFunction): Array<LinkModel<T>>;
 }
 
 export enum VariableOrigin {

diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { setTemplateSrv } from '@grafana/runtime';
 import config from 'app/core/config';
 import { ShareLink, Props, State } from './ShareLink';
+import { initTemplateSrv } from '../../../../../test/helpers/initTemplateSrv';
+import { variableAdapters } from '../../../variables/adapters';
+import { createQueryVariableAdapter } from '../../../variables/query/adapter';
 
 jest.mock('app/features/dashboard/services/TimeSrv', () => ({
   getTimeSrv: () => ({
@@ -11,16 +15,6 @@ jest.mock('app/features/dashboard/services/TimeSrv', () => ({
   }),
 }));
 
-let fillVariableValuesForUrlMock = (params: any) => {};
-
-jest.mock('app/features/templating/template_srv', () => ({
-  getTemplateSrv: () => ({
-    fillVariableValuesForUrl: (params: any) => {
-      fillVariableValuesForUrlMock(params);
-    },
-  }),
-}));
-
 function mockLocationHref(href: string) {
   const location = window.location;
 
@@ -98,6 +92,13 @@ function shareLinkScenario(description: string, scenarioFn: (ctx: ScenarioContex
 }
 
 describe('ShareModal', () => {
+  let templateSrv = initTemplateSrv([]);
+
+  beforeAll(() => {
+    variableAdapters.register(createQueryVariableAdapter());
+    setTemplateSrv(templateSrv);
+  });
+
   shareLinkScenario('shareUrl with current time range and panel', ctx => {
     ctx.setup(() => {
       mockLocationHref('http://server/#!/test');
@@ -174,33 +175,35 @@ describe('ShareModal', () => {
       expect(state?.imageUrl).toContain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
     });
 
-    it('should include template variables in url', async () => {
-      mockLocationHref('http://server/#!/test');
-      fillVariableValuesForUrlMock = (params: any) => {
-        params['var-app'] = 'mupp';
-        params['var-server'] = 'srv-01';
-      };
-      ctx.mount();
-      ctx.wrapper?.setState({ includeTemplateVars: true });
+    describe('template variables', () => {
+      beforeEach(() => {
+        templateSrv = initTemplateSrv([
+          { type: 'query', name: 'app', current: { value: 'mupp' } },
+          { type: 'query', name: 'server', current: { value: 'srv-01' } },
+        ]);
+        setTemplateSrv(templateSrv);
+      });
 
-      await ctx.wrapper?.instance().buildUrl();
-      const state = ctx.wrapper?.state();
-      expect(state?.shareUrl).toContain(
-        'http://server/#!/test?from=1000&to=2000&orgId=1&var-app=mupp&var-server=srv-01'
-      );
-    });
+      it('should include template variables in url', async () => {
+        mockLocationHref('http://server/#!/test');
+        ctx.mount();
+        ctx.wrapper?.setState({ includeTemplateVars: true });
 
-    it('should shorten url', () => {
-      mockLocationHref('http://server/#!/test');
-      fillVariableValuesForUrlMock = (params: any) => {
-        params['var-app'] = 'mupp';
-        params['var-server'] = 'srv-01';
-      };
-      ctx.mount();
-      ctx.wrapper?.setState({ includeTemplateVars: true, useShortUrl: true }, async () => {
         await ctx.wrapper?.instance().buildUrl();
         const state = ctx.wrapper?.state();
-        expect(state?.shareUrl).toContain(`/goto/${mockUid}`);
+        expect(state?.shareUrl).toContain(
+          'http://server/#!/test?from=1000&to=2000&orgId=1&var-app=mupp&var-server=srv-01'
+        );
+      });
+
+      it('should shorten url', () => {
+        mockLocationHref('http://server/#!/test');
+        ctx.mount();
+        ctx.wrapper?.setState({ includeTemplateVars: true, useShortUrl: true }, async () => {
+          await ctx.wrapper?.instance().buildUrl();
+          const state = ctx.wrapper?.state();
+          expect(state?.shareUrl).toContain(`/goto/${mockUid}`);
+        });
       });
     });
   });

diff --git a/public/app/features/dashboard/components/ShareModal/utils.ts b/public/app/features/dashboard/components/ShareModal/utils.ts
@@ -1,16 +1,16 @@
 import { config } from '@grafana/runtime';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import { getTemplateSrv } from 'app/features/templating/template_srv';
 import { createShortLink } from 'app/core/utils/shortLinks';
 import { PanelModel, dateTime, urlUtil } from '@grafana/data';
+import { getAllVariableValuesForUrl } from 'app/features/variables/getAllVariableValuesForUrl';
 
 export function buildParams(
   useCurrentTimeRange: boolean,
   includeTemplateVars: boolean,
   selectedTheme?: string,
   panel?: PanelModel
 ) {
-  const params = urlUtil.getUrlSearchParams();
+  let params = urlUtil.getUrlSearchParams();
 
   const range = getTimeSrv().timeRange();
   params.from = range.from.valueOf();
@@ -23,7 +23,10 @@ export function buildParams(
   }
 
   if (includeTemplateVars) {
-    getTemplateSrv().fillVariableValuesForUrl(params);
+    params = {
+      ...params,
+      ...getAllVariableValuesForUrl(),
+    };
   }
 
   if (selectedTheme !== 'current') {

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -332,7 +332,6 @@ export class PanelChrome extends PureComponent<Props, State> {
           dashboard={dashboard}
           title={panel.title}
           description={panel.description}
-          scopedVars={panel.scopedVars}
           links={panel.links}
           error={errorMessage}
           isEditing={isEditing}

diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -247,7 +247,6 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
           dashboard={dashboard}
           title={panel.title}
           description={panel.description}
-          scopedVars={panel.scopedVars}
           angularComponent={angularComponent}
           links={panel.links}
           error={errorMessage}

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
-import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice, ScopedVars } from '@grafana/data';
-import { AngularComponent, config, getTemplateSrv } from '@grafana/runtime';
+import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice } from '@grafana/data';
+import { AngularComponent, config } from '@grafana/runtime';
 import { ClickOutsideWrapper, Icon, IconName, Tooltip, stylesFactory } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -20,7 +20,6 @@ export interface Props {
   dashboard: DashboardModel;
   title?: string;
   description?: string;
-  scopedVars?: ScopedVars;
   angularComponent?: AngularComponent | null;
   links?: DataLink[];
   error?: string;
@@ -148,9 +147,9 @@ export class PanelHeader extends PureComponent<Props, State> {
   };
 
   render() {
-    const { panel, scopedVars, error, isViewing, isEditing, data, alertState } = this.props;
+    const { panel, error, isViewing, isEditing, data, alertState } = this.props;
     const { menuItems } = this.state;
-    const title = getTemplateSrv().replace(panel.title, scopedVars, 'text');
+    const title = panel.replaceVariables(panel.title, {}, 'text');
 
     const panelHeaderClass = classNames({
       'panel-header': true,

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -46,7 +46,7 @@ export class PanelHeaderCorner extends Component<Props> {
     const markdown = panel.description || '';
     const interpolatedMarkdown = getTemplateSrv().replace(markdown, panel.scopedVars);
     const markedInterpolatedMarkdown = renderMarkdown(interpolatedMarkdown);
-    const links = this.props.links && this.props.links.getLinks(panel);
+    const links = this.props.links && this.props.links.getLinks(panel.replaceVariables);
 
     return (
       <div className="panel-info-content markdown-html">