Enhancement: Update DashboardAnalyticsAggregator and PanelPerformanceMetrics for improved performance metrics handling

This commit enhances the DashboardAnalyticsAggregator by ensuring a fresh Subject is created for each dashboard initialization, improving subscription management. Additionally, it updates the PanelPerformanceMetrics component to utilize internationalization for metric labels, enhancing user experience and accessibility.

public/app/features/dashboard-scene/scene/PanelPerformanceMetrics.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useEffect, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { SceneComponentProps, SceneObjectBase, SceneObjectState, VizPanel } from '@grafana/scenes';
 import { Icon, PanelChrome, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 
@@ -128,7 +129,6 @@ function PanelPerformanceMetricsRenderer({ model }: SceneComponentProps<PanelPer
   const renderMetricRow = (label: string, current: number) => {
     return (
       <div>
-        {/* eslint-disable-next-line @grafana/i18n/no-untranslated-strings */}
         <strong>{label}:</strong> {formatDuration(current)}
       </div>
     );
@@ -139,12 +139,13 @@ function PanelPerformanceMetricsRenderer({ model }: SceneComponentProps<PanelPer
 
   const tooltipContent = (
     <div>
-      {renderMetricRow('Query', lastQueryTime)}
-      {hasTransformations && renderMetricRow('Transform', lastTransformTime)}
-      {renderMetricRow('Render', lastRenderTime)}
+      {renderMetricRow(t('dashboard-scene.panel-performance-metrics.query', 'Query'), lastQueryTime)}
+      {hasTransformations &&
+        renderMetricRow(t('dashboard-scene.panel-performance-metrics.transform', 'Transform'), lastTransformTime)}
+      {renderMetricRow(t('dashboard-scene.panel-performance-metrics.render', 'Render'), lastRenderTime)}
       <div style={{ marginTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: '8px' }}>
-        {/* eslint-disable-next-line @grafana/i18n/no-untranslated-strings */}
-        <strong>Total:</strong> {formatDuration(lastTotalTime)}
+        <strong>{t('dashboard-scene.panel-performance-metrics.total-time', 'Total time')}:</strong>{' '}
+        {formatDuration(lastTotalTime)}
       </div>
     </div>
   );

public/app/features/dashboard/services/DashboardAnalyticsAggregator.ts

@@ -63,6 +63,12 @@ export class DashboardAnalyticsAggregator implements performanceUtils.ScenePerfo
     this.panelMetrics.clear();
     this.dashboardUID = uid;
     this.dashboardTitle = title;
+    // Recreate the Subject for the new dashboard (since this is a singleton, we need a fresh Subject)
+    // Complete the old Subject first to clean up any remaining subscriptions
+    if (!this.panelMetricsSubject.closed) {
+      this.panelMetricsSubject.complete();
+    }
+    this.panelMetricsSubject = new Subject<{ panelId: string; metrics: PanelAnalyticsMetrics }>();
   }
 
   public destroy() {
@@ -70,8 +76,8 @@ export class DashboardAnalyticsAggregator implements performanceUtils.ScenePerfo
     this.panelMetrics.clear();
     this.dashboardUID = '';
     this.dashboardTitle = '';
-    // Complete the subject to clean up subscriptions
-    this.panelMetricsSubject.complete();
+    // Note: We don't complete the Subject here since this is a singleton that will be reused.
+    // The Subject will be recreated in initialize() for the next dashboard.
   }
 
   /**
@@ -138,7 +144,7 @@ export class DashboardAnalyticsAggregator implements performanceUtils.ScenePerfo
   // Panel-level events
   onPanelOperationStart = (data: performanceUtils.PanelPerformanceData): void => {
     // Start events don't need aggregation, just ensure panel exists
-    this.ensurePanelExists(data.panelKey, data.panelId, data.pluginId, data.pluginVersion);
+    this.ensurePanelExists(data.panelKey, String(data.panelId), data.pluginId, data.pluginVersion);
   };
 
   onPanelOperationComplete = (data: performanceUtils.PanelPerformanceData): void => {
@@ -194,7 +200,7 @@ export class DashboardAnalyticsAggregator implements performanceUtils.ScenePerfo
         break;
     }
 
-    this.panelMetricsSubject.next({ panelId: data.panelId, metrics: panel });
+    this.panelMetricsSubject.next({ panelId: String(data.panelId), metrics: panel });
   };
 
   // Query-level events

public/locales/en-US/grafana.json

@@ -6231,6 +6231,12 @@
         }
       }
     },
+    "panel-performance-metrics": {
+      "query": "Query",
+      "render": "Render",
+      "total-time": "Total time",
+      "transform": "Transform"
+    },
     "panel-viz-type-picker": {
       "button": {
         "close": "Back"
@@ -9397,6 +9403,7 @@
       "toggle-panel-edit": "Toggle panel edit view",
       "toggle-panel-fullscreen": "Toggle panel fullscreen view",
       "toggle-panel-legend": "Toggle panel legend",
+      "toggle-performance-metrics": "Toggle performance metrics",
       "zoom-in-time-range": "Zoom in time range",
       "zoom-out-time-range": "Zoom out time range"
     },