feat(graph panel): more refactoring of #5917

public/app/core/directives/metric_segment.js

@@ -23,10 +23,10 @@ function (_, $, coreModule) {
         getOptions: "&",
         onChange: "&",
       },
-      link: function($scope, elem, attrs) {
+      link: function($scope, elem) {
         var $input = $(inputTemplate);
-        var $button = $(attrs.styleMode === 'select' ? selectTemplate : linkTemplate);
         var segment = $scope.segment;
+        var $button = $(segment.selectMode ? selectTemplate : linkTemplate);
         var options = null;
         var cancelBlur = null;
         var linkMode = true;
@@ -179,6 +179,7 @@ function (_, $, coreModule) {
               cssClass: attrs.cssClass,
               custom: attrs.custom,
               value: option ? option.text : value,
+              selectMode: attrs.selectMode,
             };
             return uiSegmentSrv.newSegment(segment);
           };

public/app/core/services/segment_srv.js

@@ -28,6 +28,7 @@ function (angular, _, coreModule) {
       this.type = options.type;
       this.fake = options.fake;
       this.value = options.value;
+      this.selectMode = options.selectMode;
       this.type = options.type;
       this.expandable = options.expandable;
       this.html = options.html || $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value));

public/app/features/panel/metrics_ds_selector.ts

@@ -16,7 +16,7 @@ var template = `
         Panel data source
       </label>
 
-      <metric-segment segment="ctrl.dsSegment" style-mode="select"
+      <metric-segment segment="ctrl.dsSegment"
                       get-options="ctrl.getOptions()"
                       on-change="ctrl.datasourceChanged()"></metric-segment>
     </div>
@@ -67,7 +67,7 @@ export class MetricsDsSelectorCtrl {
       this.current = {name: dsValue + ' not found', value: null};
     }
 
-    this.dsSegment = uiSegmentSrv.newSegment(this.current.name);
+    this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
   }
 
   getOptions() {

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

@@ -23,7 +23,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   logScales: any;
   unitFormats: any;
   xAxisModes: any;
-  xAxisSeriesStats: any;
+  xNameSegment: any;
   annotationsPromise: any;
   datapointsCount: number;
   datapointsOutside: boolean;
@@ -154,7 +154,6 @@ class GraphCtrl extends MetricsPanelCtrl {
       'Json': 'json'
     };
 
-    this.xAxisSeriesStats = ['min', 'max', 'avg', 'current', 'count', 'total'];
     this.subTabIndex = 0;
   }
 
@@ -288,7 +287,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     });
 
     var alias = valueField;
-
     return this.seriesHandler(seriesData, index, datapoints, alias);
   }
 
@@ -396,6 +394,22 @@ class GraphCtrl extends MetricsPanelCtrl {
     fileExport.exportSeriesListToCsvColumns(this.seriesList);
   }
 
+  xAxisModeChanged()  {
+    // set defaults
+    this.refresh();
+  }
+
+  getXAxisNameOptions()  {
+    return this.$q.when([
+      {text: 'Avg', value: 'avg'}
+    ]);
+  }
+
+  getXAxisValueOptions()  {
+    return this.$q.when([
+      {text: 'Avg', value: 'avg'}
+    ]);
+  }
 }
 
 function getFieldsFromESDoc(doc) {

public/app/plugins/panel/graph/tab_axes.html

@@ -47,68 +47,23 @@
 				<select class="gf-form-input"
 					ng-model="ctrl.panel.xaxis.mode"
 					ng-options="v as k for (k, v) in ctrl.xAxisModes"
-					ng-change="ctrl.refresh()">
+					ng-change="ctrl.xAxisModeChanged()">
 				</select>
 			</div>
 		</div>
 
+    <!-- Table mode -->
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table' || ctrl.panel.xaxis.mode === 'json'">
+			<label class="gf-form-label width-5">Name</label>
+      <metric-segment-model property="ctrl.panel.xaxis.name" get-options="ctrl.getXAxisNameOptions()" on-change="ctrl.render()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
+		</div>
+
 		<!-- Series mode -->
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode !== 'time'">
 			<label class="gf-form-label width-5">Value</label>
-			<div class="gf-form-select-wrapper max-width-15">
+      <metric-segment-model property="ctrl.panel.xaxis.values[0]" get-options="ctrl.getXAxisValueOptions()" on-change="ctrl.render()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
-				<select class="gf-form-input"
-					ng-model="ctrl.panel.xaxis.values[0]"
-					ng-options="v for v in ctrl.xAxisSeriesStats"
-					ng-change="ctrl.render()">
-				</select>
-			</div>
 		</div>
 
-		<!-- Table mode -->
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table'">
-			<label class="gf-form-label width-5">Column</label>
-			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input"
-					ng-model="ctrl.panel.xaxis.nameField"
-					ng-options="col.index as col.text for col in ctrl.xAxisColumns"
-					ng-change="ctrl.refresh()">
-				</select>
-			</div>
-		</div>
-
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table'">
-			<label class="gf-form-label width-5">Value</label>
-			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input"
-					ng-model="ctrl.panel.xaxis.valueFields[0]"
-					ng-options="col.index as col.text for col in ctrl.xAxisColumns"
-					ng-change="ctrl.refresh()">
-				</select>
-			</div>
-		</div>
-
-		<!-- Elastic Raw Document mode -->
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'json'">
-			<label class="gf-form-label width-5">Column</label>
-			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input"
-					ng-model="ctrl.panel.xaxis.nameField"
-					ng-options="field for field in ctrl.xAxisColumns"
-					ng-change="ctrl.refresh()">
-				</select>
-			</div>
-		</div>
-
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'elastic'">
-			<label class="gf-form-label width-5">Value</label>
-			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input"
-					ng-model="ctrl.panel.xaxis.valueFields[0]"
-					ng-options="field for field in ctrl.xAxisColumns"
-					ng-change="ctrl.refresh()">
-				</select>
-			</div>
-		</div>
 	</div>
 
 </div>

public/sass/components/_gf-form.scss

@@ -135,7 +135,7 @@ $gf-form-margin: 0.25rem;
     &::after {
       position: absolute;
       top: 35%;
-      right: $input-padding-x/2;
+      right: $input-padding-x;
       background-color: transparent;
       color: $input-color;
       font: normal normal normal $font-size-sm/1 FontAwesome;