From 14db32cc9f86e0384f51e730a5a7f3f51125fa96 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Wed, 31 Jul 2024 12:53:59 +0200
Subject: [PATCH] Loki: Add option to issue forward queries (#91181)

* Loki: Add option to issue forward queries

* Loki: Fix spelling of "backward"/"forward"
---
 .../loki/components/LokiOptionFields.tsx      | 11 ++++-
 .../components/LokiQueryBuilderOptions.tsx    | 41 +++++++++++++------
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
index c90c05eb7b7..9f6f3bea269 100644
--- a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
@@ -9,7 +9,7 @@ import { config } from '@grafana/runtime';
 import { InlineFormLabel, RadioButtonGroup, InlineField, Input, Select, Stack } from '@grafana/ui';
 
 import { getLokiQueryType } from '../queryUtils';
-import { LokiQuery, LokiQueryType } from '../types';
+import { LokiQuery, LokiQueryDirection, LokiQueryType } from '../types';
 
 export interface LokiOptionFieldsProps {
   lineLimitValue: string;
@@ -29,6 +29,15 @@ export const queryTypeOptions: Array<SelectableValue<LokiQueryType>> = [
   },
 ];
 
+export const queryDirections: Array<SelectableValue<LokiQueryDirection>> = [
+  { value: LokiQueryDirection.Backward, label: 'Backward', description: 'Search in backward direction.' },
+  {
+    value: LokiQueryDirection.Forward,
+    label: 'Forward',
+    description: 'Search in forward direction.',
+  },
+];
+
 if (config.featureToggles.lokiExperimentalStreaming) {
   queryTypeOptions.push({
     value: LokiQueryType.Stream,
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
index e7a974cd964..5fe4714369c 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
@@ -7,9 +7,14 @@ import { EditorField, EditorRow, QueryOptionGroup } from '@grafana/experimental'
 import { config, reportInteraction } from '@grafana/runtime';
 import { Alert, AutoSizeInput, RadioButtonGroup, Select } from '@grafana/ui';
 
-import { preprocessMaxLines, queryTypeOptions, RESOLUTION_OPTIONS } from '../../components/LokiOptionFields';
+import {
+  preprocessMaxLines,
+  queryDirections,
+  queryTypeOptions,
+  RESOLUTION_OPTIONS,
+} from '../../components/LokiOptionFields';
 import { getLokiQueryType, isLogsQuery } from '../../queryUtils';
-import { LokiQuery, LokiQueryType, QueryStats } from '../../types';
+import { LokiQuery, LokiQueryDirection, LokiQueryType, QueryStats } from '../../types';
 
 export interface Props {
   query: LokiQuery;
@@ -29,6 +34,11 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
       onRunQuery();
     };
 
+    const onQueryDirectionChange = (value: LokiQueryDirection) => {
+      onChange({ ...query, direction: value });
+      onRunQuery();
+    };
+
     const onResolutionChange = (option: SelectableValue<number>) => {
       reportInteraction('grafana_loki_resolution_clicked', {
         app,
@@ -73,6 +83,8 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
       ? queryTypeOptions.filter((o) => o.value !== LokiQueryType.Instant)
       : queryTypeOptions;
 
+    const queryDirection = query.direction ?? LokiQueryDirection.Backward;
+
     // if the state's queryType is still Instant, trigger a change to range for log queries
     if (isLogQuery && queryType === LokiQueryType.Instant) {
       onChange({ ...query, queryType: LokiQueryType.Range });
@@ -111,16 +123,21 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
             </EditorField>
           )}
           {isLogQuery && (
-            <EditorField label="Line limit" tooltip="Upper limit for number of log lines returned by query.">
-              <AutoSizeInput
-                className="width-4"
-                placeholder={maxLines.toString()}
-                type="number"
-                min={0}
-                defaultValue={query.maxLines?.toString() ?? ''}
-                onCommitChange={onMaxLinesChange}
-              />
-            </EditorField>
+            <>
+              <EditorField label="Line limit" tooltip="Upper limit for number of log lines returned by query.">
+                <AutoSizeInput
+                  className="width-4"
+                  placeholder={maxLines.toString()}
+                  type="number"
+                  min={0}
+                  defaultValue={query.maxLines?.toString() ?? ''}
+                  onCommitChange={onMaxLinesChange}
+                />
+              </EditorField>
+              <EditorField label="Direction" tooltip="Direction to search for logs.">
+                <RadioButtonGroup options={queryDirections} value={queryDirection} onChange={onQueryDirectionChange} />
+              </EditorField>
+            </>
           )}
           {!isLogQuery && (
             <>