Query history: Add search for query history and starred queries (#25747)

* Add searching functionality to Queries tab

* Implement search for starred queries

* Update tests and add test coverage for searching

* Changes based on provided feedback

* Remove redundant storing of results

* Update naming of onSearchFilterChange function in tests

* Update filterQueriesBySearchFilter function

* Update filterQueriesBySearchFilter function

* Debounce search

* Remove console.log()

* Use useDebouncedCallback

* Update tests, remove redundant props

* When in starred, search only in starred

* Add timefilter as dependency

* Remove redundant dependency, refactor

public/app/core/utils/richHistory.test.ts

@@ -7,6 +7,7 @@ import {
   createQueryHeading,
   deleteAllFromRichHistory,
   deleteQueryInRichHistory,
+  filterAndSortQueries,
 } from './richHistory';
 import store from 'app/core/store';
 import { SortOrder } from './explore';
@@ -168,6 +169,40 @@ describe('createDateStringFromTs', () => {
   });
 });
 
+describe('filterQueries', () => {
+  it('should filter out queries based on data source filter', () => {
+    const filteredQueries = filterAndSortQueries(
+      mock.storedHistory,
+      SortOrder.Ascending,
+      ['not provided data source'],
+      ''
+    );
+    expect(filteredQueries).toHaveLength(0);
+  });
+  it('should keep queries based on data source filter', () => {
+    const filteredQueries = filterAndSortQueries(
+      mock.storedHistory,
+      SortOrder.Ascending,
+      ['datasource history name'],
+      ''
+    );
+    expect(filteredQueries).toHaveLength(1);
+  });
+  it('should filter out all queries based on search filter', () => {
+    const filteredQueries = filterAndSortQueries(
+      mock.storedHistory,
+      SortOrder.Ascending,
+      [],
+      'i do not exist in query'
+    );
+    expect(filteredQueries).toHaveLength(0);
+  });
+  it('should include queries based on search filter', () => {
+    const filteredQueries = filterAndSortQueries(mock.storedHistory, SortOrder.Ascending, [], 'query1');
+    expect(filteredQueries).toHaveLength(1);
+  });
+});
+
 describe('createQueryHeading', () => {
   it('should correctly create heading for queries when sort order is ascending ', () => {
     // Have to offset the timezone of a 1 microsecond epoch, and then reverse the changes

public/app/core/utils/richHistory.ts

@@ -270,7 +270,7 @@ export function createQueryHeading(query: RichHistoryQuery, sortOrder: SortOrder
   return heading;
 }
 
-export function createQueryText(query: DataQuery, queryDsInstance: DataSourceApi) {
+export function createQueryText(query: DataQuery, queryDsInstance: DataSourceApi | undefined) {
   /* query DatasourceInstance is necessary because we use its getQueryDisplayText method
    * to format query text
    */
@@ -338,6 +338,53 @@ export function notEmptyQuery(query: DataQuery) {
   return false;
 }
 
+export function filterQueriesBySearchFilter(queries: RichHistoryQuery[], searchFilter: string) {
+  return queries.filter(query => {
+    if (query.comment.includes(searchFilter)) {
+      return true;
+    }
+
+    const listOfMatchingQueries = query.queries.filter(query =>
+      // Remove fields in which we don't want to be searching
+      Object.values(_.omit(query, ['datasource', 'key', 'refId', 'hide', 'queryType'])).some(value =>
+        value.toString().includes(searchFilter)
+      )
+    );
+
+    return listOfMatchingQueries.length > 0;
+  });
+}
+
+export function filterQueriesByDataSource(queries: RichHistoryQuery[], listOfDatasourceFilters: string[] | null) {
+  return listOfDatasourceFilters?.length > 0
+    ? queries.filter(q => listOfDatasourceFilters.includes(q.datasourceName))
+    : queries;
+}
+
+export function filterQueriesByTime(queries: RichHistoryQuery[], timeFilter: [number, number]) {
+  return queries.filter(
+    q =>
+      q.ts < createRetentionPeriodBoundary(timeFilter[0], true) &&
+      q.ts > createRetentionPeriodBoundary(timeFilter[1], false)
+  );
+}
+
+export function filterAndSortQueries(
+  queries: RichHistoryQuery[],
+  sortOrder: SortOrder,
+  listOfDatasourceFilters: string[] | null,
+  searchFilter: string,
+  timeFilter?: [number, number]
+) {
+  const filteredQueriesByDs = filterQueriesByDataSource(queries, listOfDatasourceFilters);
+  const filteredQueriesByDsAndSearchFilter = filterQueriesBySearchFilter(filteredQueriesByDs, searchFilter);
+  const filteredQueriesToBeSorted = timeFilter
+    ? filterQueriesByTime(filteredQueriesByDsAndSearchFilter, timeFilter)
+    : filteredQueriesByDsAndSearchFilter;
+
+  return sortQueries(filteredQueriesToBeSorted, sortOrder);
+}
+
 /* These functions are created to migrate string queries (from 6.7 release) to DataQueries. They can be removed after 7.1 release. */
 function migrateRichHistory(richHistory: RichHistoryQuery[]) {
   const transformedRichHistory = richHistory.map(query => {