From 4036a44a809d84bdb895506c3fa8bf58bdf5446c Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 4 Nov 2020 09:27:59 +0100
Subject: [PATCH] Panel inspect: Interpolate variables in panel inspect title
 (#28779)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Interpolate variables in panel inspect title

* Update public/app/features/dashboard/components/Inspector/InspectContent.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* fix typo

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../dashboard/components/Inspector/InspectContent.tsx     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/components/Inspector/InspectContent.tsx b/public/app/features/dashboard/components/Inspector/InspectContent.tsx
index 78b15487a87..7e51f31d29f 100644
--- a/public/app/features/dashboard/components/Inspector/InspectContent.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectContent.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
-import { getPanelInspectorStyles } from './styles';
+import { DataSourceApi, PanelData, PanelPlugin } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
 import { CustomScrollbar, Drawer, TabContent } from '@grafana/ui';
+import { getPanelInspectorStyles } from './styles';
 import { InspectSubtitle } from './InspectSubtitle';
 import { InspectDataTab } from './InspectDataTab';
 import { InspectMetadataTab } from './InspectMetadataTab';
@@ -10,7 +12,6 @@ import { InspectStatsTab } from './InspectStatsTab';
 import { QueryInspector } from './QueryInspector';
 import { InspectTab } from './types';
 import { DashboardModel, PanelModel } from '../../state';
-import { DataSourceApi, PanelData, PanelPlugin } from '@grafana/data';
 import { GetDataOptions } from '../../state/PanelQueryRunner';
 
 interface Props {
@@ -56,10 +57,11 @@ export const InspectContent: React.FC<Props> = ({
   if (!tabs.find(item => item.value === currentTab)) {
     activeTab = InspectTab.JSON;
   }
+  const title = getTemplateSrv().replace(panel.title, panel.scopedVars, 'text');
 
   return (
     <Drawer
-      title={`Inspect: ${panel.title}` || 'Panel inspect'}
+      title={`Inspect: ${title || 'Panel'}`}
       subtitle={
         <InspectSubtitle
           tabs={tabs}