Query runner: Allow direction to be updated when sort order changes (#…

…1082) * fix(queryRunner): allow direction to be updated when sort order changes * chore: cover query direction with e2e * test(e2e): use waitForRequest --------- Co-authored-by: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
grafana · Feb 19, 2025 · 0c018d5 · 0c018d5
1 parent 21badb5
commit 0c018d5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/src/services/panel.ts b/src/services/panel.ts
@@ -202,10 +202,12 @@ export function getQueryRunner(queries: LokiQuery[], queryRunnerOptions?: Partia
       transformations: [setColorByDisplayNameTransformation],
     });
   } else {
-    const sortOrder = getLogsPanelSortOrderFromURL() || getLogsPanelSortOrderFromStore();
     queries = queries.map((query) => ({
       ...query,
-      direction: sortOrder === LogsSortOrder.Descending ? LokiQueryDirection.Backward : LokiQueryDirection.Forward,
+      get direction() {
+        const sortOrder = getLogsPanelSortOrderFromURL() || getLogsPanelSortOrderFromStore();
+        return sortOrder === LogsSortOrder.Descending ? LokiQueryDirection.Backward : LokiQueryDirection.Forward;
+      },
     }));
   }
 

diff --git a/tests/exploreServicesBreakDown.spec.ts b/tests/exploreServicesBreakDown.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@grafana/plugin-e2e';
 import { ComboBoxIndex, E2EComboboxStrings, ExplorePage, levelTextMatch, PlaywrightRequest } from './fixtures/explore';
 import { testIds } from '../src/services/testIds';
 import { mockEmptyQueryApiResponse } from './mocks/mockEmptyQueryApiResponse';
-import { LokiQuery } from '../src/services/lokiQuery';
+import { LokiQuery, LokiQueryDirection } from '../src/services/lokiQuery';
 import { FilterOp } from '../src/services/filterTypes';
 import { SERVICE_NAME } from '../src/services/variables';
 
@@ -1254,8 +1254,6 @@ test.describe('explore services breakdown page', () => {
     await expect(explorePage.getTableToggleLocator()).not.toBeChecked();
     await expect(explorePage.getLogsToggleLocator()).toBeChecked();
 
-    const newestLogContent = await firstRow.textContent();
-
     // assert timesstamps are DESC (newest first)
     expect(new Date(await firstRowTimeCell.textContent()).valueOf()).toBeGreaterThanOrEqual(
       new Date(await secondRowTimeCell.textContent()).valueOf()
@@ -1275,6 +1273,17 @@ test.describe('explore services breakdown page', () => {
       new Date(await secondRowTimeCell.textContent()).valueOf()
     );
 
+    // Changing the sort order triggers a new query with the opposite query direction
+    let queryWithForwardDirectionExecuted = false;
+    await explorePage.waitForRequest(
+      () => {
+        queryWithForwardDirectionExecuted = true;
+      },
+      (q) => q.direction === LokiQueryDirection.Forward
+    );
+
+    expect(queryWithForwardDirectionExecuted).toEqual(true);
+
     // Reload the page
     await page.reload();
 

diff --git a/tests/fixtures/explore.ts b/tests/fixtures/explore.ts
@@ -176,15 +176,18 @@ export class ExplorePage {
 
   async waitForRequest(callback: (lokiQuery: LokiQuery) => void, test: (lokiQuery: LokiQuery) => boolean) {
     await Promise.all([
-      this.page.waitForResponse((resp) => {
-        const post = resp.request().postDataJSON();
-        const queries = post?.queries as LokiQuery[];
-        if (queries && test(queries[0])) {
-          callback(queries[0]);
-          return true;
-        }
-        return false;
-      }),
+      this.page.waitForResponse(
+        (resp) => {
+          const post = resp.request().postDataJSON();
+          const queries = post?.queries as LokiQuery[];
+          if (queries && test(queries[0])) {
+            callback(queries[0]);
+            return true;
+          }
+          return false;
+        },
+        { timeout: 30000 }
+      ),
     ]);
   }