feat(graph panel): refactoring axes tab options into it's own component

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

@@ -1,25 +0,0 @@
-///<reference path="../../../headers/common.d.ts" />
-
-export class AxesEditTabCtrl {
-  panel: any;
-  panelCtrl: any;
-
-  /** @ngInject **/
-  constructor($scope) {
-    this.panelCtrl = $scope.ctrl;
-    this.panel = this.panelCtrl.panel;
-    $scope.ctrl = this;
-  }
-
-}
-
-/** @ngInject **/
-export function axesTabCtrl() {
-  'use strict';
-  return {
-    restrict: 'E',
-    scope: true,
-    templateUrl: 'public/app/plugins/panel/graph/tab_axes.html',
-    controller: AxesEditTabCtrl,
-  };
-}

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

@@ -0,0 +1,95 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import kbn from 'app/core/utils/kbn';
+
+export class AxesEditorCtrl {
+  panel: any;
+  panelCtrl: any;
+  unitFormats: any;
+  logScales: any;
+  xAxisModes: any;
+  xAxisStatOptions: any;
+  xNameSegment: any;
+
+  /** @ngInject **/
+  constructor(private $scope, private $q) {
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+    $scope.ctrl = this;
+
+    this.unitFormats = kbn.getUnitFormats();
+
+    this.logScales = {
+      'linear': 1,
+      'log (base 2)': 2,
+      'log (base 10)': 10,
+      'log (base 32)': 32,
+      'log (base 1024)': 1024
+    };
+
+    this.xAxisModes = {
+      'Time': 'time',
+      'Series': 'series',
+      'Table': 'table',
+      'Json': 'json'
+    };
+
+    this.xAxisStatOptions =  [
+      {text: 'Avg', value: 'avg'},
+      {text: 'Min', value: 'min'},
+      {text: 'Max', value: 'min'},
+      {text: 'Total', value: 'total'},
+      {text: 'Count', value: 'count'},
+    ];
+  }
+
+  setUnitFormat(axis, subItem) {
+    axis.format = subItem.value;
+    this.panelCtrl.render();
+  }
+
+  render() {
+    this.panelCtrl.render();
+  }
+
+  xAxisOptionChanged()  {
+    switch (this.panel.xaxis.mode) {
+      case 'time': {
+        this.panel.tooltip.shared = true;
+        this.panel.xaxis.values = [];
+        this.panelCtrl.onDataReceived(this.panelCtrl.dataList);
+        break;
+      }
+      case 'series': {
+        this.panel.tooltip.shared = false;
+        this.panelCtrl.processor.validateXAxisSeriesValue();
+        this.panelCtrl.onDataReceived(this.panelCtrl.dataList);
+        break;
+      }
+    }
+  }
+
+  getXAxisNameOptions()  {
+    return this.$q.when([
+      {text: 'Avg', value: 'avg'}
+    ]);
+  }
+
+  getXAxisValueOptions()  {
+    return this.$q.when(this.panelCtrl.processor.getXAxisValueOptions({
+      dataList: this.panelCtrl.dataList
+    }));
+  }
+
+}
+
+/** @ngInject **/
+export function axesEditorComponent() {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/app/plugins/panel/graph/tab_axes.html',
+    controller: AxesEditorCtrl,
+  };
+}

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

@@ -8,13 +8,13 @@ import './thresholds_form';
 import template from './template';
 import angular from 'angular';
 import moment from 'moment';
-import kbn from 'app/core/utils/kbn';
 import _ from 'lodash';
 import TimeSeries from 'app/core/time_series2';
 import config from 'app/core/config';
 import * as fileExport from 'app/core/utils/file_export';
 import {MetricsPanelCtrl, alertTab} from 'app/plugins/sdk';
 import {DataProcessor} from './data_processor';
+import {axesEditorComponent} from './axes_editor';
 
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
@@ -22,11 +22,6 @@ class GraphCtrl extends MetricsPanelCtrl {
   hiddenSeries: any = {};
   seriesList: any = [];
   dataList: any = [];
-  logScales: any;
-  unitFormats: any;
-  xAxisModes: any;
-  xAxisStatOptions: any;
-  xNameSegment: any;
   annotationsPromise: any;
   datapointsCount: number;
   datapointsOutside: boolean;
@@ -133,39 +128,13 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Axes', 'public/app/plugins/panel/graph/tab_axes.html', 2);
+    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.logScales = {
-      'linear': 1,
-      'log (base 2)': 2,
-      'log (base 10)': 10,
-      'log (base 32)': 32,
-      'log (base 1024)': 1024
-    };
-
-    this.unitFormats = kbn.getUnitFormats();
-
-    this.xAxisModes = {
-      'Time': 'time',
-      'Series': 'series',
-      'Table': 'table',
-      'Json': 'json'
-    };
-
-    this.xAxisStatOptions =  [
-      {text: 'Avg', value: 'avg'},
-      {text: 'Min', value: 'min'},
-      {text: 'Max', value: 'min'},
-      {text: 'Total', value: 'total'},
-      {text: 'Count', value: 'count'},
-    ];
-
     this.subTabIndex = 0;
   }
 
@@ -175,11 +144,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     actions.push({text: 'Toggle legend', click: 'ctrl.toggleLegend()'});
   }
 
-  setUnitFormat(axis, subItem) {
-    axis.format = subItem.value;
-    this.render();
-  }
-
   issueQueries(datasource) {
     this.annotationsPromise = this.annotationsSrv.getAnnotations({
       dashboard: this.dashboard,
@@ -328,32 +292,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     fileExport.exportSeriesListToCsvColumns(this.seriesList);
   }
 
-  xAxisOptionChanged()  {
-    switch (this.panel.xaxis.mode) {
-      case 'time': {
-        this.panel.tooltip.shared = true;
-        this.panel.xaxis.values = [];
-        this.onDataReceived(this.dataList);
-        break;
-      }
-      case 'series': {
-        this.panel.tooltip.shared = false;
-        this.processor.validateXAxisSeriesValue();
-        this.onDataReceived(this.dataList);
-        break;
-      }
-    }
-  }
-
-  getXAxisNameOptions()  {
-    return this.$q.when([
-      {text: 'Avg', value: 'avg'}
-    ]);
-  }
-
-  getXAxisValueOptions()  {
-    return this.$q.when(this.processor.getXAxisValueOptions({dataList: this.dataList}));
-  }
 }
 
 export {GraphCtrl, GraphCtrl as PanelCtrl}

public/app/plugins/panel/table/options.html

@@ -1,2 +0,0 @@
-<grafana-panel-table-editor>
-</grafana-panel-table-editor>