Panel inspect: Interpolate variables in panel inspect title (#28779)

* 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>

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}