React edit mode for angular panels progress

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

@@ -4,6 +4,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
 import { EditorTabBody } from './EditorTabBody';
 
 import { PanelModel } from '../panel_model';
+import './../../panel/GeneralTabCtrl';
 
 interface Props {
   panel: PanelModel;

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

@@ -6,6 +6,7 @@ import { DataSourcePicker } from './DataSourcePicker';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
+import './../../panel/metrics_tab';
 
 interface Props {
   panel: PanelModel;

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

@@ -45,15 +45,41 @@ export class VisualizationTab extends PureComponent<Props> {
   }
 
   componentDidMount() {
+    this.loadAngularOptions();
+  }
+
+  componentDidUpdate() {
+    // in some cases we need to do this after mount because angularPanel was not available on mount
+    this.loadAngularOptions();
+  }
+
+  loadAngularOptions() {
     const { angularPanel } = this.props;
 
+    if (!angularPanel || !this.element || this.angularOptions) {
+      return;
+    }
+
     if (angularPanel) {
       const scope = angularPanel.getScope();
+
+      // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
+      if (!scope.$$childHead) {
+        setTimeout(() => {
+          this.forceUpdate();
+        });
+        return;
+      }
+
       const panelCtrl = scope.$$childHead.ctrl;
 
+      let template = '';
+      for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
+        template += '<panel-editor-tab editor-tab="ctrl.editorTabs[' + i + ']" ctrl="ctrl"></panel-editor-tab>';
+      }
+
       const loader = getAngularLoader();
-      const template = '<panel-editor-tab editor-tab="tab" ctrl="ctrl"></panel-editor-tab>';
-      const scopeProps = { ctrl: panelCtrl, tab: panelCtrl.editorTabs[2] };
+      const scopeProps = { ctrl: panelCtrl };
 
       this.angularOptions = loader.load(this.element, scopeProps, template);
     }

public/app/features/panel/metrics_panel_ctrl.ts

@@ -5,7 +5,6 @@ import config from 'app/core/config';
 
 import { PanelCtrl } from 'app/features/panel/panel_ctrl';
 import { getExploreUrl } from 'app/core/utils/explore';
-import { metricsTabDirective } from './metrics_tab';
 import { applyPanelTimeOverrides, getResolution } from 'app/features/dashboard/utils/panel';
 
 class MetricsPanelCtrl extends PanelCtrl {
@@ -42,7 +41,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.panel.datasource = this.panel.datasource || null;
 
     this.events.on('refresh', this.onMetricsPanelRefresh.bind(this));
-    this.events.on('init-edit-mode', this.onInitMetricsPanelEditMode.bind(this));
     this.events.on('panel-teardown', this.onPanelTearDown.bind(this));
   }
 
@@ -53,11 +51,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     }
   }
 
-  private onInitMetricsPanelEditMode() {
-    this.addEditorTab('Metrics', metricsTabDirective, 1, 'fa fa-database');
-    this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
-  }
-
   private onMetricsPanelRefresh() {
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) {

public/app/features/panel/panel_ctrl.ts

@@ -12,8 +12,6 @@ import {
   sharePanel as sharePanelUtil,
 } from 'app/features/dashboard/utils/panel';
 
-import { generalTab } from './GeneralTabCtrl';
-
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
 
 export class PanelCtrl {
@@ -93,7 +91,6 @@ export class PanelCtrl {
 
   initEditMode() {
     this.editorTabs = [];
-    this.addEditorTab('General', generalTab);
 
     this.editModeInitiated = true;
     this.events.emit('init-edit-mode', null);

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

@@ -4,8 +4,8 @@ import './thresholds_form';
 
 import template from './template';
 import _ from 'lodash';
-import config from 'app/core/config';
-import { MetricsPanelCtrl, alertTab } from 'app/plugins/sdk';
+
+import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { DataProcessor } from './data_processor';
 import { axesEditorComponent } from './axes_editor';
 
@@ -70,11 +70,11 @@ class GraphCtrl extends MetricsPanelCtrl {
     // length of a dash
     dashLength: 10,
     // length of space between two dashes
-    spaceLength: 10,
+    paceLength: 10,
     // show hide points
     points: false,
     // point radius in pixels
-    pointradius: 5,
+    pointradius: 2,
     // show hide bars
     bars: false,
     // enable/disable stacking
@@ -137,9 +137,9 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Axes', axesEditorComponent, 2);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
 
-    if (config.alertingEnabled) {
-      this.addEditorTab('Alert', alertTab, 5);
-    }
+    // if (config.alertingEnabled) {
+    //   this.addEditorTab('Alert', alertTab, 5);
+    // }
 
     this.subTabIndex = 0;
   }