From 2672b92206e93e25a82da7d1815d11fbffef05bc Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 2 Sep 2019 12:47:33 +0200
Subject: [PATCH] Open new window when exploring panel metrics (#18802)

---
 public/app/features/panel/metrics_panel_ctrl.ts   | 11 ++---------
 public/app/features/panel/panel_ctrl.ts           |  6 +++---
 public/app/features/panel/panel_header.ts         |  8 ++++----
 .../panel/specs/metrics_panel_ctrl.test.ts        | 15 +++++++++------
 4 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index dbce8126619..ea80d9bd6ca 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -248,25 +248,18 @@ class MetricsPanelCtrl extends PanelCtrl {
     }
   }
 
-  getAdditionalMenuItems() {
+  async getAdditionalMenuItems() {
     const items = [];
     if (this.contextSrv.hasAccessToExplore() && this.datasource) {
       items.push({
         text: 'Explore',
-        click: 'ctrl.explore();',
         icon: 'gicon gicon-explore',
         shortcut: 'x',
+        href: await getExploreUrl(this.panel.targets, this.datasource, this.datasourceSrv, this.timeSrv),
       });
     }
     return items;
   }
-
-  async explore() {
-    const url = await getExploreUrl(this.panel.targets, this.datasource, this.datasourceSrv, this.timeSrv);
-    if (url) {
-      this.$timeout(() => this.$location.url(url));
-    }
-  }
 }
 
 export { MetricsPanelCtrl };
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 373d2aee0cf..0a6a6fc06e7 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -120,7 +120,7 @@ export class PanelCtrl {
     }
   }
 
-  getMenu() {
+  async getMenu() {
     const menu = [];
     menu.push({
       text: 'View',
@@ -147,7 +147,7 @@ export class PanelCtrl {
     });
 
     // Additional items from sub-class
-    menu.push(...this.getAdditionalMenuItems());
+    menu.push(...(await this.getAdditionalMenuItems()));
 
     const extendedMenu = this.getExtendedMenu();
     menu.push({
@@ -198,7 +198,7 @@ export class PanelCtrl {
   }
 
   // Override in sub-class to add items before extended menu
-  getAdditionalMenuItems(): any[] {
+  async getAdditionalMenuItems(): Promise<any[]> {
     return [];
   }
 
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts
index c24154c11b6..e68ebd8a572 100644
--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
@@ -55,10 +55,10 @@ function renderMenuItem(item: AngularPanelMenuItem, ctrl: any) {
   return html;
 }
 
-function createMenuTemplate(ctrl: any) {
+async function createMenuTemplate(ctrl: any) {
   let html = '';
 
-  for (const item of ctrl.getMenu()) {
+  for (const item of await ctrl.getMenu()) {
     html += renderMenuItem(item, ctrl);
   }
 
@@ -75,7 +75,7 @@ function panelHeader($compile: any) {
       let menuScope: any;
       let isDragged: boolean;
 
-      elem.click((evt: any) => {
+      elem.click(async (evt: any) => {
         const targetClass = evt.target.className;
 
         // remove existing scope
@@ -84,7 +84,7 @@ function panelHeader($compile: any) {
         }
 
         menuScope = scope.$new();
-        const menuHtml = createMenuTemplate(scope.ctrl);
+        const menuHtml = await createMenuTemplate(scope.ctrl);
         menuElem.html(menuHtml);
         $compile(menuElem)(menuScope);
 
diff --git a/public/app/features/panel/specs/metrics_panel_ctrl.test.ts b/public/app/features/panel/specs/metrics_panel_ctrl.test.ts
index aa060343b57..061f361880e 100644
--- a/public/app/features/panel/specs/metrics_panel_ctrl.test.ts
+++ b/public/app/features/panel/specs/metrics_panel_ctrl.test.ts
@@ -21,28 +21,28 @@ import { MetricsPanelCtrl } from '../metrics_panel_ctrl';
 describe('MetricsPanelCtrl', () => {
   describe('when getting additional menu items', () => {
     describe('and has no datasource set but user has access to explore', () => {
-      it('should not return any items', () => {
+      it('should not return any items', async () => {
         const ctrl = setupController({ hasAccessToExplore: true });
 
-        expect(ctrl.getAdditionalMenuItems().length).toBe(0);
+        expect((await ctrl.getAdditionalMenuItems()).length).toBe(0);
       });
     });
 
     describe('and has datasource set that supports explore and user does not have access to explore', () => {
-      it('should not return any items', () => {
+      it('should not return any items', async () => {
         const ctrl = setupController({ hasAccessToExplore: false });
         ctrl.datasource = { meta: { explore: true } } as any;
 
-        expect(ctrl.getAdditionalMenuItems().length).toBe(0);
+        expect((await ctrl.getAdditionalMenuItems()).length).toBe(0);
       });
     });
 
     describe('and has datasource set that supports explore and user has access to explore', () => {
-      it('should return one item', () => {
+      it('should return one item', async () => {
         const ctrl = setupController({ hasAccessToExplore: true });
         ctrl.datasource = { meta: { explore: true } } as any;
 
-        expect(ctrl.getAdditionalMenuItems().length).toBe(1);
+        expect((await ctrl.getAdditionalMenuItems()).length).toBe(1);
       });
     });
   });
@@ -58,6 +58,9 @@ function setupController({ hasAccessToExplore } = { hasAccessToExplore: false })
         case 'contextSrv': {
           return { hasAccessToExplore: () => hasAccessToExplore };
         }
+        case 'timeSrv': {
+          return { timeRangeForUrl: () => {} };
+        }
         default: {
           return jest.fn();
         }