wip: angular panels now have similar edit mode and panel type selection enabling quick changing between panel react and angular panel types

public/app/features/panel/metrics_panel_ctrl.ts

@@ -8,8 +8,6 @@ import * as rangeUtil from 'app/core/utils/rangeutil';
 import * as dateMath from 'app/core/utils/datemath';
 import { encodePathComponent } from 'app/core/utils/location_util';
 
-import { metricsTabDirective } from './metrics_tab';
-
 class MetricsPanelCtrl extends PanelCtrl {
   scope: any;
   datasource: any;
@@ -58,7 +56,6 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
 
   private onInitMetricsPanelEditMode() {
-    this.addEditorTab('Metrics', metricsTabDirective);
     this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
   }
 

public/app/features/panel/panel_ctrl.ts

@@ -6,6 +6,8 @@ import { PanelModel } from 'app/features/dashboard/panel_model';
 import Remarkable from 'remarkable';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, LS_PANEL_COPY_KEY } from 'app/core/constants';
 import store from 'app/core/store';
+import { metricsTabDirective } from './metrics_tab';
+import { vizTabDirective } from './viz_tab';
 
 const TITLE_HEIGHT = 27;
 const PANEL_BORDER = 2;
@@ -97,7 +99,10 @@ export class PanelCtrl {
 
   initEditMode() {
     this.editorTabs = [];
+    this.addEditorTab('Queries', metricsTabDirective, 0, 'fa fa-database');
+    this.addEditorTab('Visualization', vizTabDirective, 1, 'fa fa-line-chart');
     this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
+
     this.editModeInitiated = true;
     this.events.emit('init-edit-mode', null);
 
@@ -118,8 +123,8 @@ export class PanelCtrl {
     route.updateParams();
   }
 
-  addEditorTab(title, directiveFn, index?) {
-    var editorTab = { title, directiveFn };
+  addEditorTab(title, directiveFn, index?, icon?) {
+    var editorTab = { title, directiveFn, icon };
 
     if (_.isString(directiveFn)) {
       editorTab.directiveFn = function() {

public/app/features/panel/panel_directive.ts

@@ -32,13 +32,11 @@ var panelTemplate = `
                                                  'panel-height-helper': !ctrl.panel.isEditing}">
       <div class="tabbed-view tabbed-view--new">
         <div class="tabbed-view-header">
-          <h3 class="tabbed-view-panel-title">
-            {{ctrl.pluginName}}
-          </h3>
 
           <ul class="gf-tabs">
             <li class="gf-tabs-item" ng-repeat="tab in ::ctrl.editorTabs">
               <a class="gf-tabs-link" ng-click="ctrl.changeTab($index)" ng-class="{active: ctrl.editorTabIndex === $index}">
+                <i class="{{::tab.icon}}" ng-show="tab.icon"></i>
                 {{::tab.title}}
               </a>
             </li>
@@ -50,7 +48,7 @@ var panelTemplate = `
         </div>
 
         <div class="tabbed-view-body">
-          <div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index">
+          <div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index" class="panel-height-helper">
             <panel-editor-tab editor-tab="tab" ctrl="ctrl" index="$index"></panel-editor-tab>
           </div>
         </div>

public/app/features/panel/panel_editor_tab.ts

@@ -1,6 +1,7 @@
 import angular from 'angular';
 
-var directiveModule = angular.module('grafana.directives');
+const directiveModule = angular.module('grafana.directives');
+const directiveCache = {};
 
 /** @ngInject */
 function panelEditorTab(dynamicDirectiveSrv) {
@@ -11,18 +12,25 @@ function panelEditorTab(dynamicDirectiveSrv) {
       index: '=',
     },
     directive: scope => {
-      var pluginId = scope.ctrl.pluginId;
-      var tabIndex = scope.index;
-      // create a wrapper for directiveFn
-      // required for metrics tab directive
-      // that is the same for many panels but
-      // given different names in this function
-      var fn = () => scope.editorTab.directiveFn();
+      const pluginId = scope.ctrl.pluginId;
+      const tabIndex = scope.index;
 
-      return Promise.resolve({
+      if (directiveCache[pluginId]) {
+        if (directiveCache[pluginId][tabIndex]) {
+          return directiveCache[pluginId][tabIndex];
+        }
+      } else {
+        directiveCache[pluginId] = [];
+      }
+
+      let result = {
+        fn: () => scope.editorTab.directiveFn(),
         name: `panel-editor-tab-${pluginId}${tabIndex}`,
-        fn: fn,
-      });
+      };
+
+      directiveCache[pluginId][tabIndex] = result;
+
+      return result;
     },
   });
 }

public/app/features/panel/viz_tab.ts

@@ -0,0 +1,48 @@
+import coreModule from 'app/core/core_module';
+import { DashboardModel } from '../dashboard/dashboard_model';
+import { VizTypePicker } from '../dashboard/dashgrid/VizTypePicker';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { PanelPlugin } from 'app/types/plugins';
+
+export class VizTabCtrl {
+  panelCtrl: any;
+  dashboard: DashboardModel;
+
+  /** @ngInject */
+  constructor($scope) {
+    this.panelCtrl = $scope.ctrl;
+    this.dashboard = this.panelCtrl.dashboard;
+
+    $scope.ctrl = this;
+  }
+
+  onTypeChanged = (plugin: PanelPlugin) => {
+    this.dashboard.changePanelType(this.panelCtrl.panel, plugin.id);
+  };
+}
+
+let template = `
+<div class="viz-editor">
+  <div class="viz-editor-col1">
+    <viz-type-picker currentType="ctrl.panelCtrl.panel.type" onTypeChanged="ctrl.onTypeChanged"></viz-type-picker>
+  </div>
+  <div class="viz-editor-col2">
+    <h5 class="page-heading">Options</h5>
+  </div>
+</div>
+`;
+
+/** @ngInject **/
+export function vizTabDirective() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    template: template,
+    controller: VizTabCtrl,
+  };
+}
+
+react2AngularDirective('vizTypePicker', VizTypePicker, ['currentType', ['onTypeChanged', { watchDepth: 'reference' }]]);
+
+coreModule.directive('vizTab', vizTabDirective);