diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
new file mode 100644
index 00000000000..968bcea52b6
--- /dev/null
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -0,0 +1,22 @@
+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import {PanelCtrl} from './panel_ctrl';
+
+function metricsEditorTab() {
+  return {templateUrl: 'public/app/partials/metrics.html'};
+}
+
+class MetricsPanelCtrl extends PanelCtrl {
+  constructor($scope) {
+    super($scope);
+  }
+
+  initEditorTabs() {
+    super.initEditorTabs();
+    this.editorTabs.push({title: 'Metrics', directiveFn: metricsEditorTab});
+  }
+}
+
+export {MetricsPanelCtrl};
+
diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts
index bff0d68955b..08ede83eb95 100644
--- a/public/app/features/panel/panel.ts
+++ b/public/app/features/panel/panel.ts
@@ -2,75 +2,10 @@
 
 import config from 'app/core/config';
 
-function generalOptionsTabEditorTab() {
-  return {templateUrl: 'public/app/partials/panelgeneral.html'};
-}
+import {PanelCtrl} from './panel_ctrl';
+import {MetricsPanelCtrl} from './metrics_panel_ctrl';
 
-export class PanelCtrl {
-  panel: any;
-  row: any;
-  dashboard: any;
-  editorTabIndex: number;
-  name: string;
-  icon: string;
-  editorTabs: any;
-  $scope: any;
-
-  constructor($scope) {
-    var plugin = config.panels[this.panel.type];
-
-    this.$scope = $scope;
-    this.name = plugin.name;
-    this.icon = plugin.info.icon;
-    this.editorTabIndex = 0;
-    this.publishAppEvent('panel-instantiated', {scope: $scope});
-  }
-
-  publishAppEvent(evtName, evt) {
-    this.$scope.$root.appEvent(evtName, evt);
-  }
-
-  changeView(fullscreen, edit) {
-    this.publishAppEvent('panel-change-view', {
-      fullscreen: fullscreen, edit: edit, panelId: this.panel.id
-    });
-  }
-
-  viewPanel() {
-    this.changeView(true, false);
-  }
-
-  editPanel() {
-    if (!this.editorTabs) {
-      this.initEditorTabs();
-    }
-
-    this.changeView(true, true);
-  }
-
-  exitFullscreen() {
-    this.changeView(false, false);
-  }
-
-  initEditorTabs() {
-    this.editorTabs = [];
-    this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab});
-    this.editorTabs = this.editorTabs.concat(this.getEditorTabs());
-  }
-
-  getEditorTabs() { return [];}
-
-  getMenu() {
-    let menu = [];
-    menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'});
-    menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'});
-    menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' });
-    menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'});
-    return menu;
-  }
-}
-
-export class PanelDirective {
+class PanelDirective {
   template: string;
   templateUrl: string;
   bindToController: boolean;
@@ -99,3 +34,8 @@ export class PanelDirective {
   }
 }
 
+export {
+  PanelCtrl,
+  MetricsPanelCtrl,
+  PanelDirective,
+}
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
new file mode 100644
index 00000000000..b6b6e07ed86
--- /dev/null
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -0,0 +1,69 @@
+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+
+function generalOptionsTabEditorTab() {
+  return {templateUrl: 'public/app/partials/panelgeneral.html'};
+}
+
+export class PanelCtrl {
+  panel: any;
+  row: any;
+  dashboard: any;
+  editorTabIndex: number;
+  name: string;
+  icon: string;
+  editorTabs: any;
+  $scope: any;
+  isMetricsPanel: boolean;
+
+  constructor($scope) {
+    var plugin = config.panels[this.panel.type];
+
+    this.$scope = $scope;
+    this.name = plugin.name;
+    this.icon = plugin.info.icon;
+    this.editorTabIndex = 0;
+    this.publishAppEvent('panel-instantiated', {scope: $scope});
+  }
+
+  publishAppEvent(evtName, evt) {
+    this.$scope.$root.appEvent(evtName, evt);
+  }
+
+  changeView(fullscreen, edit) {
+    this.publishAppEvent('panel-change-view', {
+      fullscreen: fullscreen, edit: edit, panelId: this.panel.id
+    });
+  }
+
+  viewPanel() {
+    this.changeView(true, false);
+  }
+
+  editPanel() {
+    if (!this.editorTabs) {
+      this.initEditorTabs();
+    }
+
+    this.changeView(true, true);
+  }
+
+  exitFullscreen() {
+    this.changeView(false, false);
+  }
+
+  initEditorTabs() {
+    this.editorTabs = [];
+    this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab});
+  }
+
+  getMenu() {
+    let menu = [];
+    menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'});
+    menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'});
+    menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' });
+    menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'});
+    return menu;
+  }
+}
diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts
index eed9fdc021d..0868002c2dd 100644
--- a/public/app/plugins/panel/test/module.ts
+++ b/public/app/plugins/panel/test/module.ts
@@ -1,20 +1,19 @@
 ///<reference path="../../../headers/common.d.ts" />
 
-import {PanelDirective, PanelCtrl} from '../../../features/panel/panel';
+import {PanelDirective, MetricsPanelCtrl} from '../../../features/panel/panel';
 
 function optionsTab() {
-  return {
-    template: '<h2>options!</h2>'
-  };
+  return {template: '<h2>options!</h2>' };
 }
 
-export class TestPanelCtrl extends PanelCtrl {
+export class TestPanelCtrl extends MetricsPanelCtrl {
   constructor($scope) {
     super($scope);
   }
 
-  getEditorTabs() {
-    return [{title: 'Options', directiveFn: optionsTab}];
+  initEditorTabs() {
+    super.initEditorTabs();
+    this.editorTabs.push({title: 'Options', directiveFn: optionsTab});
   }
 }