feat: panels v2, metrics-tab loading

public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -22,7 +22,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     }
 
     let loader = getAngularLoader();
-    var template = '<plugin-component type="query-ctrl" />';
+    var template = '<metrics-tab />';
     let scopeProps = {
       ctrl: {
         panel: this.props.panel,
@@ -32,7 +32,6 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
           dashboard: this.props.dashboard,
         },
       },
-      target: {},
     };
 
     this.queryComp = loader.load(this.queryElement, scopeProps, template);

public/app/features/dashboard/panel_model.ts

@@ -32,6 +32,7 @@ export class PanelModel {
   panels?: any;
   soloMode?: boolean;
   targets: any[];
+  datasource: string;
 
   // non persisted
   fullscreen: boolean;
@@ -46,13 +47,10 @@ export class PanelModel {
       this[property] = model[property];
     }
 
-    if (!this.gridPos) {
-      this.gridPos = { x: 0, y: 0, h: 3, w: 6 };
-    }
-
-    if (!this.targets) {
-      this.targets = [{}];
-    }
+    // defaults
+    this.gridPos = this.gridPos || { x: 0, y: 0, h: 3, w: 6 };
+    this.datasource = this.datasource || null;
+    this.targets = this.targets || [{}];
   }
 
   getSaveModel() {

public/app/features/panel/metrics_tab.ts

@@ -1,5 +1,6 @@
 import { DashboardModel } from '../dashboard/dashboard_model';
 import Remarkable from 'remarkable';
+import coreModule from 'app/core/core_module';
 
 export class MetricsTabCtrl {
   dsName: string;
@@ -120,3 +121,5 @@ export function metricsTabDirective() {
     controller: MetricsTabCtrl,
   };
 }
+
+coreModule.directive('metricsTab', metricsTabDirective);