Parcourir la source

heatmap: able to set upper/lower bucket bound manually

Alexander Zobnin il y a 7 ans
Parent
commit
5e452e445c

+ 7 - 0
public/app/plugins/panel/heatmap/axes_editor.ts

@@ -6,6 +6,7 @@ export class AxesEditorCtrl {
   unitFormats: any;
   logScales: any;
   dataFormats: any;
+  yBucketBoundModes: any;
 
   /** @ngInject */
   constructor($scope, uiSegmentSrv) {
@@ -26,6 +27,12 @@ export class AxesEditorCtrl {
       'Time series': 'timeseries',
       'Time series buckets': 'tsbuckets',
     };
+
+    this.yBucketBoundModes = {
+      Auto: 'auto',
+      Upper: 'upper',
+      Lower: 'lower',
+    };
   }
 
   setUnitFormat(subItem) {

+ 5 - 2
public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -33,6 +33,7 @@ let panelDefaults = {
     show: false,
   },
   dataFormat: 'timeseries',
+  yBucketBound: 'auto',
   xAxis: {
     show: true,
   },
@@ -222,11 +223,13 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     bucketsData = histogramToHeatmap(this.series);
 
     tsBuckets = _.map(this.series, 'label');
-    if (panelDatasource === 'prometheus') {
+    const yBucketBound = this.panel.yBucketBound;
+    if ((panelDatasource === 'prometheus' && yBucketBound !== 'lower') || yBucketBound === 'upper') {
       // Prometheus labels are upper inclusive bounds, so add empty bottom bucket label.
       tsBuckets = [''].concat(tsBuckets);
     } else {
-      // Elasticsearch uses labels as bottom bucket bounds, so add empty top bucket label.
+      // Elasticsearch uses labels as lower bucket bounds, so add empty top bucket label.
+      // Use this as a default mode as well.
       tsBuckets.push('');
     }
 

+ 9 - 0
public/app/plugins/panel/heatmap/partials/axes_editor.html

@@ -31,6 +31,15 @@
       bs-tooltip="'Override automatic decimal precision for axis.'"
       ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
     </div>
+    <div class="gf-form" ng-if="ctrl.panel.dataFormat == 'tsbuckets'">
+      <label class="gf-form-label width-8">Bucket bound</label>
+      <div class="gf-form-select-wrapper max-width-12">
+        <select class="gf-form-input"
+          ng-model="ctrl.panel.yBucketBound" ng-options="v as k for (k, v) in editor.yBucketBoundModes" ng-change="ctrl.render()"
+          data-placement="right" bs-tooltip="'Use series label as an upper or lower bucket bound.'">
+        </select>
+      </div>
+    </div>
   </div>
 
   <div class="section gf-form-group" ng-if="ctrl.panel.dataFormat == 'timeseries'">