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

@@ -161,6 +161,8 @@ export function registerAngularDirectives() {
 
   react2AngularDirective('lokiAnnotationsQueryEditor', LokiAnnotationsQueryEditor, [
     'expr',
+    'maxLines',
+    'instant',
     'onChange',
     ['datasource', { watchDepth: 'reference' }],
   ]);

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;
   }
 }

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}

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) {

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

@@ -1,5 +1,7 @@
 <loki-annotations-query-editor
   expr="ctrl.annotation.expr"
+  max-lines="ctrl.annotation.maxLines"
+  instant="ctrl.annotation.instant"
   on-change="ctrl.onQueryChange"
   datasource="ctrl.datasource"
 />