wip: panel options idea2

Author: torkelo

public/app/features/panel/metrics_panel_ctrl.ts

@@ -56,7 +56,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
 
   private onInitMetricsPanelEditMode() {
-    this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
+    // this.addCommonTab('Time range', 'public/app/features/panel/partials/panelTime.html');
   }
 
   private onMetricsPanelRefresh() {

public/app/features/panel/panel_ctrl.ts

@@ -100,11 +100,12 @@ export class PanelCtrl {
     this.optionTabs = [];
     this.addCommonTab('Queries', metricsTabDirective, 0, 'fa fa-database');
     this.addCommonTab('Visualization', vizTabDirective, 1, 'fa fa-line-chart');
-    this.addCommonTab('General', 'public/app/partials/panelgeneral.html');
 
     this.editModeInitiated = true;
     this.events.emit('init-edit-mode', null);
 
+    // this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
+
     const urlTab = (this.$injector.get('$routeParams').tab || '').toLowerCase();
     if (urlTab) {
       this.editorTabs.forEach((tab, i) => {

public/app/features/panel/panel_editor_tab.ts

@@ -13,9 +13,8 @@ function panelEditorTab(dynamicDirectiveSrv) {
     },
     directive: scope => {
       const pluginId = scope.ctrl.pluginId;
-      const tabName = scope.editorTab.title.toLowerCase();
+      const tabName = scope.editorTab.title.toLowerCase().replace(' ', '-');
 
-      console.log('panelEditorTab', pluginId, tabName);
       if (directiveCache[pluginId]) {
         if (directiveCache[pluginId][tabName]) {
           return directiveCache[pluginId][tabName];

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

@@ -1,11 +1,7 @@
 <div class="gf-form-group">
   <div class="gf-form-inline">
     <div class="gf-form">
-			<label class="gf-form-label gf-query-ds-label">
-				<i class="icon-gf icon-gf-datasources"></i>
-			</label>
       <label class="gf-form-label">Data Source</label>
-
       <gf-form-dropdown model="ctrl.panelDsValue" css-class="gf-size-auto"
                         lookup-text="true"
                         get-options="ctrl.getOptions(true)"

public/app/features/panel/viz_tab.ts

@@ -22,18 +22,42 @@ export class VizTabCtrl {
 }
 
 const 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">
-    <div ng-repeat="tab in ctrl.panelCtrl.optionTabs" >
-      <h5 class="page-heading">{{tab.title}}</h5>
-      <panel-editor-tab editor-tab="tab" ctrl="ctrl.panelCtrl" index="$index"></panel-editor-tab>
-    </div>
-  </div>
-</div>
-`;
+<div class="gf-form-group ">
+  <div class="gf-form-query">
+    <div class="gf-form">
+      <label class="gf-form-label">
+        <img src="public/app/plugins/panel/graph/img/icn-graph-panel.svg" style="width: 16px; height: 16px" />
+        Graph
+        <i class="fa fa-caret-down" />
+      </label>
+		</div>
+
+		<div class="gf-form gf-form--grow">
+			<label class="gf-form-label gf-form-label--grow"></label>
+		</div>
+	</div>
+
+	<br />
+	<br />
+
+  <div class="query-editor-rows gf-form-group">
+	  <div ng-repeat="tab in ctrl.panelCtrl.optionTabs">
+	    <div class="gf-form-query">
+		    <div class="gf-form gf-form-query-letter-cell">
+			    <label class="gf-form-label">
+				    <span class="gf-form-query-letter-cell-carret">
+					    <i class="fa fa-caret-down"></i>
+				    </span>
+				    <span class="gf-form-query-letter-cell-letter">{{tab.title}}</span>
+          </label>
+			  </div>
+        <div class="gf-form gf-form--grow">
+			    <label class="gf-form-label gf-form-label--grow"></label>
+		    </div>
+			</div>
+		</div>
+	</div>
+</div>`;
 
 /** @ngInject */
 export function vizTabDirective() {
@@ -46,5 +70,4 @@ export function vizTabDirective() {
 }
 
 react2AngularDirective('vizTypePicker', VizTypePicker, ['currentType', ['onTypeChanged', { watchDepth: 'reference' }]]);
-
 coreModule.directive('vizTab', vizTabDirective);

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

@@ -134,12 +134,12 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
+    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
     this.addEditorTab('Axes', axesEditorComponent, 2);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
-    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
 
     if (config.alertingEnabled) {
-      this.addEditorTab('Alert', alertTab, 5);
+      this.addCommonTab('Alert', alertTab, 5);
     }
 
     this.subTabIndex = 0;