Explore: Fixed Starred query history tab to show all starred queries (#69914)

* Starred queries shouldn't have from and to params

* Update request id when starred is true

* Update tests

public/app/core/history/RichHistoryRemoteStorage.test.ts

@@ -55,7 +55,12 @@ describe('RichHistoryRemoteStorage', () => {
     storage = new RichHistoryRemoteStorage();
   });
 
-  const setup = (): { richHistoryQuery: RichHistoryQuery; dto: RichHistoryRemoteStorageDTO } => {
+  const setup = (): {
+    richHistoryQuery: RichHistoryQuery;
+    richHistoryStarredQuery: RichHistoryQuery;
+    dto: RichHistoryRemoteStorageDTO;
+    dtoStarred: RichHistoryRemoteStorageDTO;
+  } => {
     const richHistoryQuery: RichHistoryQuery = {
       id: '123',
       createdAt: 200 * 1000,
@@ -66,6 +71,11 @@ describe('RichHistoryRemoteStorage', () => {
       queries: [{ refId: 'foo' }],
     };
 
+    const richHistoryStarredQuery: RichHistoryQuery = {
+      ...richHistoryQuery,
+      starred: false,
+    };
+
     const dto = {
       uid: richHistoryQuery.id,
       createdAt: richHistoryQuery.createdAt / 1000,
@@ -75,9 +85,16 @@ describe('RichHistoryRemoteStorage', () => {
       queries: richHistoryQuery.queries,
     };
 
+    const dtoStarred = {
+      ...dto,
+      starred: richHistoryStarredQuery.starred,
+    };
+
     return {
       richHistoryQuery,
+      richHistoryStarredQuery,
       dto,
+      dtoStarred,
     };
   };
 
@@ -97,7 +114,7 @@ describe('RichHistoryRemoteStorage', () => {
     const search = 'foo';
     const datasourceFilters = ['name-of-ds1', 'name-of-ds2'];
     const sortOrder = SortOrder.Descending;
-    const starred = true;
+    const starred = false;
     const from = 100;
     const to = 200;
     const expectedLimit = 100;
@@ -114,13 +131,55 @@ describe('RichHistoryRemoteStorage', () => {
 
     expect(fetchMock).toBeCalledWith({
       method: 'GET',
-      url: `/api/query-history?datasourceUid=ds1&datasourceUid=ds2&searchString=${search}&sort=time-desc&to=now-${from}d&from=now-${to}d&limit=${expectedLimit}&page=${expectedPage}&onlyStarred=${starred}`,
+      url: `/api/query-history?datasourceUid=ds1&datasourceUid=ds2&searchString=${search}&sort=time-desc&to=now-${from}d&from=now-${to}d&limit=${expectedLimit}&page=${expectedPage}`,
       requestId: 'query-history-get-all',
     });
     expect(richHistory).toMatchObject([richHistoryQuery]);
     expect(total).toBe(1);
   });
 
+  it('returns list of all starred query history items', async () => {
+    const { richHistoryStarredQuery, dtoStarred } = setup();
+    const returnedDTOs: RichHistoryRemoteStorageDTO[] = [dtoStarred];
+
+    fetchMock.mockReturnValue(
+      of({
+        data: {
+          result: {
+            queryHistory: returnedDTOs,
+            totalCount: returnedDTOs.length,
+          },
+        },
+      })
+    );
+
+    const search = 'foo';
+    const datasourceFilters = ['name-of-ds1', 'name-of-ds2'];
+    const sortOrder = SortOrder.Descending;
+    const starred = true;
+    const from = 100;
+    const to = 200;
+    const expectedLimit = 100;
+    const expectedPage = 1;
+
+    const { richHistory, total } = await storage.getRichHistory({
+      search,
+      datasourceFilters,
+      sortOrder,
+      starred,
+      from,
+      to,
+    });
+
+    expect(fetchMock).toBeCalledWith({
+      method: 'GET',
+      url: `/api/query-history?datasourceUid=ds1&datasourceUid=ds2&searchString=${search}&sort=time-desc&limit=${expectedLimit}&page=${expectedPage}&onlyStarred=${starred}`,
+      requestId: 'query-history-get-starred',
+    });
+    expect(richHistory).toMatchObject([richHistoryStarredQuery]);
+    expect(total).toBe(1);
+  });
+
   it('read starred home tab preferences', async () => {
     preferencesServiceMock.load.mockResolvedValue({
       queryHistory: {

public/app/core/history/RichHistoryRemoteStorage.ts

@@ -60,12 +60,18 @@ export default class RichHistoryRemoteStorage implements RichHistoryStorage {
   async getRichHistory(filters: RichHistorySearchFilters) {
     const params = buildQueryParams(filters);
 
+    let requestId = 'query-history-get-all';
+
+    if (filters.starred) {
+      requestId = 'query-history-get-starred';
+    }
+
     const queryHistory = await lastValueFrom(
       getBackendSrv().fetch<RichHistoryRemoteStorageResultsPayloadDTO>({
         method: 'GET',
         url: `/api/query-history?${params}`,
         // to ensure any previous requests are cancelled
-        requestId: 'query-history-get-all',
+        requestId,
       })
     );
 
@@ -125,11 +131,13 @@ function buildQueryParams(filters: RichHistorySearchFilters): string {
   if (filters.sortOrder) {
     params = params + `&sort=${filters.sortOrder === SortOrder.Ascending ? 'time-asc' : 'time-desc'}`;
   }
-  const relativeFrom = filters.from === 0 ? 'now' : `now-${filters.from}d`;
-  const relativeTo = filters.to === 0 ? 'now' : `now-${filters.to}d`;
-  // TODO: Unify: remote storage from/to params are swapped comparing to frontend and local storage filters
-  params = params + `&to=${relativeFrom}`;
-  params = params + `&from=${relativeTo}`;
+  if (!filters.starred) {
+    const relativeFrom = filters.from === 0 ? 'now' : `now-${filters.from}d`;
+    const relativeTo = filters.to === 0 ? 'now' : `now-${filters.to}d`;
+    // TODO: Unify: remote storage from/to params are swapped comparing to frontend and local storage filters
+    params = params + `&to=${relativeFrom}`;
+    params = params + `&from=${relativeTo}`;
+  }
   params = params + `&limit=100`;
   params = params + `&page=${filters.page || 1}`;
   if (filters.starred) {