InfluxDB: Support region annotations (#31526)

public/app/plugins/datasource/influxdb/influx_series.ts

@@ -93,6 +93,7 @@ export default class InfluxSeries {
     _.each(this.series, (series) => {
       let titleCol: any = null;
       let timeCol: any = null;
+      let timeEndCol: any = null;
       const tagsCol: any = [];
       let textCol: any = null;
 
@@ -116,6 +117,10 @@ export default class InfluxSeries {
           textCol = index;
           return;
         }
+        if (column === this.annotation.timeEndColumn) {
+          timeEndCol = index;
+          return;
+        }
         // legacy case
         if (!titleCol && textCol !== index) {
           titleCol = index;
@@ -127,6 +132,7 @@ export default class InfluxSeries {
           annotation: this.annotation,
           time: +new Date(value[timeCol]),
           title: value[titleCol],
+          timeEnd: value[timeEndCol],
           // Remove empty values, then split in different tags for comma separated values
           tags: _.flatten(
             tagsCol

public/app/plugins/datasource/influxdb/partials/annotations.editor.html

@@ -5,7 +5,7 @@
 	</div>
 </div>
 
-<h5 class="section-heading">Field mappings <tip>If your influxdb query returns more than one field you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
+<h5 class="section-heading">Field mappings <tip>If your influxdb query returns more than one field you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field. Optionally you can map the timeEnd column for region annotation usage.</tip></h5>
 <div class="gf-form-group">
 	<div class="gf-form-inline">
 		<div class="gf-form">
@@ -16,6 +16,10 @@
 			<span class="gf-form-label width-4">Tags</span>
 			<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
 		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-4">TimeEnd</span>
+			<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.timeEndColumn' placeholder=""></input>
+		</div>
 		<div class="gf-form" ng-show="ctrl.annotation.titleColumn">
 			<span class="gf-form-label width-4">Title <em class="muted">(deprecated)</em></span>
 			<input type="text" class="gf-form-input max-width-10" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>