From 350dcb999a46e598d4f8aba4c9dfc0799418edc7 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 16 Feb 2021 13:27:17 +0100
Subject: [PATCH] Loki: Add line limit for annotations (#31183)

* Add line limit to Annotation query editor

* Refactor to keep type consistent
---
 public/app/core/angular_wrappers.ts               |  2 ++
 .../datasource/loki/LokiAnnotationsQueryCtrl.tsx  |  7 +++++--
 .../loki/components/AnnotationsQueryEditor.tsx    | 15 +++++++++------
 public/app/plugins/datasource/loki/datasource.ts  | 15 ++++++++++-----
 .../loki/partials/annotations.editor.html         |  8 +++++---
 5 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index dca4f5b8acc..45800c06bcb 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -161,6 +161,8 @@ export function registerAngularDirectives() {
 
   react2AngularDirective('lokiAnnotationsQueryEditor', LokiAnnotationsQueryEditor, [
     'expr',
+    'maxLines',
+    'instant',
     'onChange',
     ['datasource', { watchDepth: 'reference' }],
   ]);
diff --git a/public/app/plugins/datasource/loki/LokiAnnotationsQueryCtrl.tsx b/public/app/plugins/datasource/loki/LokiAnnotationsQueryCtrl.tsx
index 9797bc846b6..6bd42b26066 100644
--- a/public/app/plugins/datasource/loki/LokiAnnotationsQueryCtrl.tsx
+++ b/public/app/plugins/datasource/loki/LokiAnnotationsQueryCtrl.tsx
@@ -1,3 +1,4 @@
+import { LokiQuery } from './types';
 /**
  * Just a simple wrapper for a react component that is actually implementing the query editor.
  */
@@ -11,7 +12,9 @@ export class LokiAnnotationsQueryCtrl {
     this.onQueryChange = this.onQueryChange.bind(this);
   }
 
-  onQueryChange(expr: string) {
-    this.annotation.expr = expr;
+  onQueryChange(query: LokiQuery) {
+    this.annotation.expr = query.expr;
+    this.annotation.maxLines = query.maxLines;
+    this.annotation.instant = query.instant;
   }
 }
diff --git a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
index 7b423cbb821..803e09cfac3 100644
--- a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
@@ -9,12 +9,14 @@ import LokiDatasource from '../datasource';
 
 interface Props {
   expr: string;
+  maxLines?: number;
+  instant?: boolean;
   datasource: LokiDatasource;
-  onChange: (expr: string) => void;
+  onChange: (query: LokiQuery) => void;
 }
 
 export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEditor(props: Props) {
-  const { expr, datasource, onChange } = props;
+  const { expr, maxLines, instant, datasource, onChange } = props;
 
   // Timerange to get existing labels from. Hard coding like this seems to be good enough right now.
   const absolute = {
@@ -27,17 +29,18 @@ export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEdito
     absolute
   );
 
-  const query: LokiQuery = {
+  const queryWithRefId: LokiQuery = {
     refId: '',
     expr,
+    maxLines,
+    instant,
   };
-
   return (
     <div className="gf-form-group">
       <LokiQueryFieldForm
         datasource={datasource}
-        query={query}
-        onChange={(query: LokiQuery) => onChange(query.expr)}
+        query={queryWithRefId}
+        onChange={onChange}
         onRunQuery={() => {}}
         history={[]}
         onLoadOptions={setActiveOption}
diff --git a/public/app/plugins/datasource/loki/datasource.ts b/public/app/plugins/datasource/loki/datasource.ts
index 70a6ad92363..8482e837c91 100644
--- a/public/app/plugins/datasource/loki/datasource.ts
+++ b/public/app/plugins/datasource/loki/datasource.ts
@@ -124,7 +124,7 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
   runInstantQuery = (
     target: LokiQuery,
     options: DataQueryRequest<LokiQuery>,
-    responseListLength: number
+    responseListLength = 1
   ): Observable<DataQueryResponse> => {
     const timeNs = this.getTime(options.range.to, true);
     const queryLimit = isMetricsQuery(target.expr) ? options.maxDataPoints : target.maxLines;
@@ -490,13 +490,18 @@ export class LokiDatasource extends DataSourceApi<LokiQuery, LokiOptions> {
   }
 
   async annotationQuery(options: AnnotationQueryRequest<LokiQuery>): Promise<AnnotationEvent[]> {
-    if (!options.annotation.expr) {
+    const { expr, maxLines, instant } = options.annotation;
+
+    if (!expr) {
       return [];
     }
 
-    const interpolatedExpr = this.templateSrv.replace(options.annotation.expr, {}, this.interpolateQueryExpr);
-    const query = { refId: `annotation-${options.annotation.name}`, expr: interpolatedExpr };
-    const { data } = await this.runRangeQuery(query, options as any).toPromise();
+    const interpolatedExpr = this.templateSrv.replace(expr, {}, this.interpolateQueryExpr);
+    const query = { refId: `annotation-${options.annotation.name}`, expr: interpolatedExpr, maxLines, instant };
+    const { data } = instant
+      ? await this.runInstantQuery(query, options as any).toPromise()
+      : await this.runRangeQuery(query, options as any).toPromise();
+
     const annotations: AnnotationEvent[] = [];
 
     for (const frame of data) {
diff --git a/public/app/plugins/datasource/loki/partials/annotations.editor.html b/public/app/plugins/datasource/loki/partials/annotations.editor.html
index e0d75b578bb..f482d74abac 100644
--- a/public/app/plugins/datasource/loki/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/loki/partials/annotations.editor.html
@@ -1,5 +1,7 @@
 <loki-annotations-query-editor
-    expr="ctrl.annotation.expr"
-    on-change="ctrl.onQueryChange"
-    datasource="ctrl.datasource"
+  expr="ctrl.annotation.expr"
+  max-lines="ctrl.annotation.maxLines"
+  instant="ctrl.annotation.instant"
+  on-change="ctrl.onQueryChange"
+  datasource="ctrl.datasource"
 />