Saved query management: Discard pending listing requests (#58433)

* discard pending listing requests * consolidate requests
elastic · Feb 26, 2020 · 47aa5b4 · 47aa5b4
1 parent 3212754
commit 47aa5b4
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 15 deletions.
diff --git a/src/plugins/data/public/query/saved_query/saved_query_service.test.ts b/src/plugins/data/public/query/saved_query/saved_query_service.test.ts
@@ -169,15 +169,27 @@ describe('saved query service', () => {
     it('should find and return saved queries without search text or pagination parameters', async () => {
       mockSavedObjectsClient.find.mockReturnValue({
         savedObjects: [{ id: 'foo', attributes: savedQueryAttributes }],
+        total: 5,
       });
 
       const response = await findSavedQueries();
-      expect(response).toEqual([{ id: 'foo', attributes: savedQueryAttributes }]);
+      expect(response.queries).toEqual([{ id: 'foo', attributes: savedQueryAttributes }]);
+    });
+
+    it('should return the total count along with the requested queries', async () => {
+      mockSavedObjectsClient.find.mockReturnValue({
+        savedObjects: [{ id: 'foo', attributes: savedQueryAttributes }],
+        total: 5,
+      });
+
+      const response = await findSavedQueries();
+      expect(response.total).toEqual(5);
     });
 
     it('should find and return saved queries with search text matching the title field', async () => {
       mockSavedObjectsClient.find.mockReturnValue({
         savedObjects: [{ id: 'foo', attributes: savedQueryAttributes }],
+        total: 5,
       });
       const response = await findSavedQueries('foo');
       expect(mockSavedObjectsClient.find).toHaveBeenCalledWith({
@@ -188,7 +200,7 @@ describe('saved query service', () => {
         sortField: '_score',
         type: 'query',
       });
-      expect(response).toEqual([{ id: 'foo', attributes: savedQueryAttributes }]);
+      expect(response.queries).toEqual([{ id: 'foo', attributes: savedQueryAttributes }]);
     });
     it('should find and return parsed filters and timefilters items', async () => {
       const serializedSavedQueryAttributesWithFilters = {
@@ -198,16 +210,20 @@ describe('saved query service', () => {
       };
       mockSavedObjectsClient.find.mockReturnValue({
         savedObjects: [{ id: 'foo', attributes: serializedSavedQueryAttributesWithFilters }],
+        total: 5,
       });
       const response = await findSavedQueries('bar');
-      expect(response).toEqual([{ id: 'foo', attributes: savedQueryAttributesWithFilters }]);
+      expect(response.queries).toEqual([
+        { id: 'foo', attributes: savedQueryAttributesWithFilters },
+      ]);
     });
     it('should return an array of saved queries', async () => {
       mockSavedObjectsClient.find.mockReturnValue({
         savedObjects: [{ id: 'foo', attributes: savedQueryAttributes }],
+        total: 5,
       });
       const response = await findSavedQueries();
-      expect(response).toEqual(
+      expect(response.queries).toEqual(
         expect.objectContaining([
           {
             attributes: {
@@ -226,6 +242,7 @@ describe('saved query service', () => {
           { id: 'foo', attributes: savedQueryAttributes },
           { id: 'bar', attributes: savedQueryAttributesBar },
         ],
+        total: 5,
       });
       const response = await findSavedQueries(undefined, 2, 1);
       expect(mockSavedObjectsClient.find).toHaveBeenCalledWith({
@@ -236,7 +253,7 @@ describe('saved query service', () => {
         sortField: '_score',
         type: 'query',
       });
-      expect(response).toEqual(
+      expect(response.queries).toEqual(
         expect.objectContaining([
           {
             attributes: {

diff --git a/src/plugins/data/public/query/saved_query/saved_query_service.ts b/src/plugins/data/public/query/saved_query/saved_query_service.ts
@@ -95,7 +95,7 @@ export const createSavedQueryService = (
     searchText: string = '',
     perPage: number = 50,
     activePage: number = 1
-  ): Promise<SavedQuery[]> => {
+  ): Promise<{ total: number; queries: SavedQuery[] }> => {
     const response = await savedObjectsClient.find<SerializedSavedQueryAttributes>({
       type: 'query',
       search: searchText,
@@ -105,10 +105,13 @@ export const createSavedQueryService = (
       page: activePage,
     });
 
-    return response.savedObjects.map(
-      (savedObject: { id: string; attributes: SerializedSavedQueryAttributes }) =>
-        parseSavedQueryObject(savedObject)
-    );
+    return {
+      total: response.total,
+      queries: response.savedObjects.map(
+        (savedObject: { id: string; attributes: SerializedSavedQueryAttributes }) =>
+          parseSavedQueryObject(savedObject)
+      ),
+    };
   };
 
   const getSavedQuery = async (id: string): Promise<SavedQuery> => {

diff --git a/src/plugins/data/public/query/saved_query/types.ts b/src/plugins/data/public/query/saved_query/types.ts
@@ -46,7 +46,7 @@ export interface SavedQueryService {
     searchText?: string,
     perPage?: number,
     activePage?: number
-  ) => Promise<SavedQuery[]>;
+  ) => Promise<{ total: number; queries: SavedQuery[] }>;
   getSavedQuery: (id: string) => Promise<SavedQuery>;
   deleteSavedQuery: (id: string) => Promise<{}>;
   getSavedQueryCount: () => Promise<number>;

diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -33,7 +33,7 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import React, { FunctionComponent, useEffect, useState, Fragment } from 'react';
+import React, { FunctionComponent, useEffect, useState, Fragment, useRef } from 'react';
 import { sortBy } from 'lodash';
 import { SavedQuery, SavedQueryService } from '../..';
 import { SavedQueryListItem } from './saved_query_list_item';
@@ -62,14 +62,25 @@ export const SavedQueryManagementComponent: FunctionComponent<Props> = ({
   const [savedQueries, setSavedQueries] = useState([] as SavedQuery[]);
   const [count, setTotalCount] = useState(0);
   const [activePage, setActivePage] = useState(0);
+  const cancelPendingListingRequest = useRef<() => void>(() => {});
 
   useEffect(() => {
     const fetchCountAndSavedQueries = async () => {
-      const savedQueryCount = await savedQueryService.getSavedQueryCount();
-      setTotalCount(savedQueryCount);
+      cancelPendingListingRequest.current();
+      let requestGotCancelled = false;
+      cancelPendingListingRequest.current = () => {
+        requestGotCancelled = true;
+      };
+
+      const {
+        total: savedQueryCount,
+        queries: savedQueryItems,
+      } = await savedQueryService.findSavedQueries('', perPage, activePage + 1);
+
+      if (requestGotCancelled) return;
 
-      const savedQueryItems = await savedQueryService.findSavedQueries('', perPage, activePage + 1);
       const sortedSavedQueryItems = sortBy(savedQueryItems, 'attributes.title');
+      setTotalCount(savedQueryCount);
       setSavedQueries(sortedSavedQueryItems);
     };
     if (isOpen) {
@@ -103,6 +114,7 @@ export const SavedQueryManagementComponent: FunctionComponent<Props> = ({
   );
 
   const onDeleteSavedQuery = async (savedQuery: SavedQuery) => {
+    cancelPendingListingRequest.current();
     setSavedQueries(
       savedQueries.filter(currentSavedQuery => currentSavedQuery.id !== savedQuery.id)
     );