feat(panels): more panel refactoring

public/app/features/dashboard/viewStateSrv.js

@@ -167,7 +167,11 @@ function (angular, _, $) {
       self.panelScopes.push(panelScope);
 
       if (self.state.panelId === panelScope.ctrl.panel.id) {
-        self.enterFullscreen(panelScope);
+        if (self.state.edit) {
+          panelScope.ctrl.editPanel();
+        } else {
+          panelScope.ctrl.viewPanel();
+        }
       }
 
       panelScope.$on('$destroy', function() {

public/app/features/panel/panel.ts

 ///<reference path="../../headers/common.d.ts" />
 
-import PanelMeta from './panel_meta3';
+import config from 'app/core/config';
+
+function generalOptionsTabEditorTab() {
+  return {templateUrl: 'public/app/partials/panelgeneral.html'};
+}
 
 export class PanelCtrl {
-  meta: any;
   panel: any;
   row: any;
   dashboard: any;
-  tabIndex: number;
+  editorTabIndex: number;
+  name: string;
+  icon: string;
+  editorTabs: any;
 
   constructor(private scope) {
-    this.meta = new PanelMeta(this.panel);
-    this.tabIndex = 0;
+    var plugin = config.panels[this.panel.type];
+
+    this.name = plugin.name;
+    this.icon = plugin.info.icon;
+    this.editorTabIndex = 0;
     this.publishAppEvent('panel-instantiated', {scope: scope});
   }
 
@@ -30,12 +39,30 @@ export class PanelCtrl {
   }
 
   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;
+  }
 }
 
 export class PanelDirective {

public/app/features/panel/panel_menu.js

@@ -13,7 +13,7 @@ function (angular, $, _) {
           '<span class="panel-title drag-handle pointer">' +
             '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
             '<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
-            '<span class="panel-time-info" ng-show="ctrl.meta.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.panelMeta.timeInfo}}</span>' +
+            '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
           '</span>';
 
       function createExternalLinkMenu(ctrl) {
@@ -44,7 +44,7 @@ function (angular, $, _) {
         template += '<div class="panel-menu-row">';
         template += '<a class="panel-menu-link" gf-dropdown="extendedMenu"><i class="fa fa-bars"></i></a>';
 
-        _.each(ctrl.meta.menu, function(item) {
+        _.each(ctrl.getMenu(), function(item) {
           // skip edit actions if not editor
           if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) {
             return;
@@ -64,7 +64,7 @@ function (angular, $, _) {
       }
 
       function getExtendedMenu(ctrl) {
-        return angular.copy(ctrl.meta.extendedMenu);
+        return angular.copy(ctrl.extendedMenu);
       }
 
       return {

public/app/features/panel/panel_meta3.ts

-///<reference path="../../headers/common.d.ts" />
-
-import config from 'app/core/config';
-
-function panelOptionsTab() {
-  return {templateUrl: 'app/partials/panelgeneral.html'};
-}
-
-export default class PanelMeta {
-  description: any;
-  icon: any;
-  name: any;
-  menu: any;
-  editorTabs: any;
-  extendedMenu: any;
-
-  constructor(panel) {
-    let panelInfo = config.panels[panel.type];
-    console.log(panelInfo);
-
-    this.icon = panelInfo.icon;
-    this.name = panelInfo.name;
-    this.menu = [];
-    this.editorTabs = [];
-    this.extendedMenu = [];
-
-    if (panelInfo.fullscreen) {
-      this.addMenuItem('View', 'icon-eye-open', 'ctrl.viewPanel(); dismiss();');
-    }
-
-    this.addMenuItem('Edit', 'icon-cog', 'ctrl.editPanel(); dismiss();', 'Editor');
-    this.addMenuItem('Duplicate', 'icon-copy', 'ctrl.duplicate()', 'Editor');
-    this.addMenuItem('Share', 'icon-share', 'ctrl.share(); dismiss();');
-
-    this.addEditorTab('General', panelOptionsTab);
-
-    if (panelInfo.metricsEditor) {
-      this.addEditorTab('Metrics', 'app/partials/metrics.html');
-    }
-
-    this.addExtendedMenuItem('Panel JSON', '', 'ctrl.editPanelJson(); dismiss();');
-  }
-
-  addMenuItem (text, icon, click, role?) {
-    this.menu.push({text: text, icon: icon, click: click, role: role});
-  }
-
-  addExtendedMenuItem (text, icon, click, role?) {
-    this.extendedMenu.push({text: text, icon: icon, click: click, role: role});
-  }
-
-  addEditorTab(title, directiveFn) {
-    this.editorTabs.push({title: title, directiveFn: directiveFn});
-  }
-}
-

public/app/features/panel/partials/panel.html

 <div class="panel-container" ng-class="{'panel-transparent': panel.transparent}">
 	<div class="panel-header">
-		<span class="alert-error panel-error small pointer" config-modal="app/partials/inspector.html" ng-if="panelMeta.error">
-			<span data-placement="top" bs-tooltip="panelMeta.error">
+		<span class="alert-error panel-error small pointer" config-modal="app/partials/inspector.html" ng-if="ctrl.error">
+			<span data-placement="top" bs-tooltip="ctrl.error">
 				<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
 			</span>
 		</span>
 
-		<span class="panel-loading" ng-show="panelMeta.loading">
+		<span class="panel-loading" ng-show="ctrl.loading">
 			<i class="fa fa-spinner fa-spin"></i>
 		</span>
 
@@ -23,12 +23,12 @@
 	<div class="gf-box">
 		<div class="gf-box-header">
 			<div class="gf-box-title">
-				<i ng-class="ctrl.meta.icon"></i>
-				{{ctrl.meta.name}}
+				<i ng-class="ctrl.icon"></i>
+				{{ctrl.name}}
 			</div>
 
-			<div ng-model="ctrl.tabIndex" bs-tabs>
-				<div ng-repeat="tab in ctrl.meta.editorTabs" data-title="{{tab.title}}">
+			<div ng-model="ctrl.editorTabIndex" bs-tabs>
+				<div ng-repeat="tab in ctrl.editorTabs" data-title="{{tab.title}}">
 				</div>
 			</div>
 
@@ -38,7 +38,7 @@
 		</div>
 
 		<div class="gf-box-body">
-			<div ng-repeat="tab in ctrl.meta.editorTabs" ng-if="ctrl.tabIndex === $index">
+			<div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index">
 				<panel-editor-tab editor-tab="tab" panel-ctrl="ctrl"></panel-editor-tab>
 			</div>
 		</div>

public/app/plugins/panel/test/module.ts

@@ -12,15 +12,6 @@ class TestPanelCtrl extends PanelCtrl {
 class TestPanel extends PanelDirective {
   templateUrl = `app/plugins/panel/test/module.html`;
   controller = TestPanelCtrl;
-
-  constructor($http) {
-    super();
-    console.log('panel ctor: ', $http);
-  }
-
-  link(scope) {
-    console.log('panel link: ', scope.ctrl.panel.id);
-  }
 }
 
 export {