Panels: Destroy panel model when recreating repeated panels (#18799)

Fixes #18533

To recreate the bug described in the original issue in the simplest possible way:

1. Setup dashboard with a single panel and repeat it using variables
2. Set the dashboard refresh to 5s
3. Hover over repeated panel during the refresh

What happened there?
When panels are repeated every time the dashboard is refreshed or variables change the repeated PanelModels are recreated. In https://github.com/grafana/grafana/blob/master/public/app/features/dashboard/state/DashboardModel.ts#L322 the models are removed from dashboard panel's model property what makes the dashboard re-render with source panel only, and then back again with the repeated panels when models are re-created. This means creating new DashboardPanel components. But when the repeated PanelModels are removed, they are not destroyed what results in a behaviour described in #18533.

This is a quick fix for this issue. Ideally I think we should use some cache and update the repeated PanelModels when the refresh or variables change trigger re-render, instead of re-creating those every time. I don't want to do this ATM as the logic around repeating panels is quite complex and require some <3.

public/app/features/dashboard/state/DashboardModel.ts

@@ -341,7 +341,7 @@ export class DashboardModel {
 
 
     // remove panels
     // remove panels
     _.pull(this.panels, ...panelsToRemove);
     _.pull(this.panels, ...panelsToRemove);
-
+    panelsToRemove.map(p => p.destroy());
     this.sortPanelsByGridPos();
     this.sortPanelsByGridPos();
     this.events.emit('repeats-processed');
     this.events.emit('repeats-processed');
   }
   }