Task/hostlist pagination

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/action.ts

@@ -4,14 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HostListPagination, ServerApiError } from '../../types';
+import { ServerApiError } from '../../types';
 import { HostResultList, HostInfo } from '../../../../../common/types';
 
 interface ServerReturnedHostList {
   type: 'serverReturnedHostList';
   payload: HostResultList;
 }
 
+interface ServerFailedToReturnHostList {
+  type: 'serverFailedToReturnHostList';
+  payload: ServerApiError;
+}
+
 interface ServerReturnedHostDetails {
   type: 'serverReturnedHostDetails';
   payload: HostInfo;
@@ -22,13 +27,8 @@ interface ServerFailedToReturnHostDetails {
   payload: ServerApiError;
 }
 
-interface UserPaginatedHostList {
-  type: 'userPaginatedHostList';
-  payload: HostListPagination;
-}
-
 export type HostAction =
   | ServerReturnedHostList
+  | ServerFailedToReturnHostList
   | ServerReturnedHostDetails
-  | ServerFailedToReturnHostDetails
-  | UserPaginatedHostList;
+  | ServerFailedToReturnHostDetails;

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/host_pagination.test.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CoreStart } from 'kibana/public';
+import { DepsStartMock, depsStartMock } from '../../mocks';
+import { AppAction, HostState, HostIndexUIQueryParams } from '../../types';
+import { Immutable } from '../../../../../common/types';
+import { History, createBrowserHistory } from 'history';
+import { hostMiddlewareFactory } from './middleware';
+import { applyMiddleware, Store, createStore } from 'redux';
+import { hostListReducer } from './reducer';
+import { coreMock } from 'src/core/public/mocks';
+import { urlFromQueryParams } from '../../view/hosts/url_from_query_params';
+import { uiQueryParams } from './selectors';
+
+describe('host list pagination: ', () => {
+  let store: Store<Immutable<HostState>, Immutable<AppAction>>;
+  let fakeCoreStart: jest.Mocked<CoreStart>;
+  let depsStart: DepsStartMock;
+  let history: History<never>;
+  let queryParams: () => HostIndexUIQueryParams;
+
+  let historyPush: (params: HostIndexUIQueryParams) => void;
+  beforeEach(() => {
+    fakeCoreStart = coreMock.createStart();
+    depsStart = depsStartMock();
+    history = createBrowserHistory();
+
+    const middleware = hostMiddlewareFactory(fakeCoreStart, depsStart);
+    store = createStore(hostListReducer, applyMiddleware(middleware));
+
+    history.listen(location => {
+      store.dispatch({ type: 'userChangedUrl', payload: location });
+    });
+
+    queryParams = () => uiQueryParams(store.getState());
+
+    historyPush = (nextQueryParams: HostIndexUIQueryParams): void => {
+      return history.push(urlFromQueryParams(nextQueryParams));
+    };
+  });
+
+  describe('when a new page size is passed', () => {
+    beforeEach(() => {
+      historyPush({ ...queryParams(), page_size: '20' });
+    });
+    it('should modify the url correctly', () => {
+      expect(queryParams()).toMatchInlineSnapshot(`
+        Object {
+          "page_index": "0",
+          "page_size": "20",
+        }
+      `);
+    });
+  });
+  describe('when an invalid page size is passed', () => {
+    beforeEach(() => {
+      historyPush({ ...queryParams(), page_size: '1' });
+    });
+    it('should modify the page size in the url to the default page size', () => {
+      expect(queryParams()).toEqual({ page_index: '0', page_size: '10' });
+    });
+  });
+
+  describe('when a new page index is passed', () => {
+    beforeEach(() => {
+      historyPush({ ...queryParams(), page_index: '2' });
+    });
+    it('should modify the page index in the url correctly', () => {
+      expect(queryParams()).toEqual({ page_index: '2', page_size: '10' });
+    });
+  });
+});

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/index.test.ts

@@ -6,12 +6,12 @@
 
 import { createStore, Dispatch, Store } from 'redux';
 import { HostAction, hostListReducer } from './index';
-import { HostListState } from '../../types';
+import { HostState } from '../../types';
 import { listData } from './selectors';
 import { mockHostResultList } from './mock_host_result_list';
 
 describe('HostList store concerns', () => {
-  let store: Store<HostListState>;
+  let store: Store<HostState>;
   let dispatch: Dispatch<HostAction>;
   const createTestStore = () => {
     store = createStore(hostListReducer);
@@ -37,6 +37,11 @@ describe('HostList store concerns', () => {
         pageIndex: 0,
         total: 0,
         loading: false,
+        error: undefined,
+        details: undefined,
+        detailsLoading: false,
+        detailsError: undefined,
+        location: undefined,
       });
     });
 

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/middleware.test.ts

@@ -9,7 +9,7 @@ import { coreMock } from '../../../../../../../../src/core/public/mocks';
 import { History, createBrowserHistory } from 'history';
 import { hostListReducer, hostMiddlewareFactory } from './index';
 import { HostResultList, Immutable } from '../../../../../common/types';
-import { HostListState } from '../../types';
+import { HostState } from '../../types';
 import { AppAction } from '../action';
 import { listData } from './selectors';
 import { DepsStartMock, depsStartMock } from '../../mocks';
@@ -20,7 +20,7 @@ describe('host list middleware', () => {
   let fakeCoreStart: jest.Mocked<CoreStart>;
   let depsStart: DepsStartMock;
   let fakeHttpServices: jest.Mocked<HttpSetup>;
-  type HostListStore = Store<Immutable<HostListState>, Immutable<AppAction>>;
+  type HostListStore = Store<Immutable<HostState>, Immutable<AppAction>>;
   let store: HostListStore;
   let getState: HostListStore['getState'];
   let dispatch: HostListStore['dispatch'];
@@ -41,7 +41,7 @@ describe('host list middleware', () => {
     dispatch = store.dispatch;
     history = createBrowserHistory();
   });
-  test('handles `userChangedUrl`', async () => {
+  it('handles `userChangedUrl`', async () => {
     const apiResponse = getEndpointListApiResponse();
     fakeHttpServices.post.mockResolvedValue(apiResponse);
     expect(fakeHttpServices.post).not.toHaveBeenCalled();
@@ -56,7 +56,7 @@ describe('host list middleware', () => {
     await sleep();
     expect(fakeHttpServices.post).toHaveBeenCalledWith('/api/endpoint/metadata', {
       body: JSON.stringify({
-        paging_properties: [{ page_index: 0 }, { page_size: 10 }],
+        paging_properties: [{ page_index: '0' }, { page_size: '10' }],
       }),
     });
     expect(listData(getState())).toEqual(apiResponse.hosts.map(hostInfo => hostInfo.metadata));

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/middleware.ts

@@ -4,34 +4,62 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { isOnHostPage, hasSelectedHost, uiQueryParams, listData } from './selectors';
+import { HostState } from '../../types';
 import { ImmutableMiddlewareFactory } from '../../types';
-import { pageIndex, pageSize, isOnHostPage, hasSelectedHost, uiQueryParams } from './selectors';
-import { HostListState } from '../../types';
 
-export const hostMiddlewareFactory: ImmutableMiddlewareFactory<HostListState> = coreStart => {
+export const hostMiddlewareFactory: ImmutableMiddlewareFactory<HostState> = coreStart => {
   return ({ getState, dispatch }) => next => async action => {
     next(action);
     const state = getState();
     if (
-      (action.type === 'userChangedUrl' &&
-        isOnHostPage(state) &&
-        hasSelectedHost(state) !== true) ||
-      action.type === 'userPaginatedHostList'
+      action.type === 'userChangedUrl' &&
+      isOnHostPage(state) &&
+      hasSelectedHost(state) !== true
     ) {
-      const hostPageIndex = pageIndex(state);
-      const hostPageSize = pageSize(state);
-      const response = await coreStart.http.post('/api/endpoint/metadata', {
-        body: JSON.stringify({
-          paging_properties: [{ page_index: hostPageIndex }, { page_size: hostPageSize }],
-        }),
-      });
-      response.request_page_index = hostPageIndex;
-      dispatch({
-        type: 'serverReturnedHostList',
-        payload: response,
-      });
+      const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(state);
+      try {
+        const response = await coreStart.http.post('/api/endpoint/metadata', {
+          body: JSON.stringify({
+            paging_properties: [{ page_index: pageIndex }, { page_size: pageSize }],
+          }),
+        });
+        response.request_page_index = Number(pageIndex);
+        dispatch({
+          type: 'serverReturnedHostList',
+          payload: response,
+        });
+      } catch (error) {
+        dispatch({
+          type: 'serverFailedToReturnHostList',
+          payload: error,
+        });
+      }
     }
     if (action.type === 'userChangedUrl' && hasSelectedHost(state) !== false) {
+      // If user navigated directly to a host details page, load the host list
+      if (listData(state).length === 0) {
+        const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(state);
+        try {
+          const response = await coreStart.http.post('/api/endpoint/metadata', {
+            body: JSON.stringify({
+              paging_properties: [{ page_index: pageIndex }, { page_size: pageSize }],
+            }),
+          });
+          response.request_page_index = Number(pageIndex);
+          dispatch({
+            type: 'serverReturnedHostList',
+            payload: response,
+          });
+        } catch (error) {
+          dispatch({
+            type: 'serverFailedToReturnHostList',
+            payload: error,
+          });
+        }
+      }
+
+      // call the host details api
       const { selected_host: selectedHost } = uiQueryParams(state);
       try {
         const response = await coreStart.http.get(`/api/endpoint/metadata/${selectedHost}`);

x-pack/plugins/endpoint/public/applications/endpoint/store/hosts/reducer.ts

@@ -4,23 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HostListState, ImmutableReducer } from '../../types';
+import { Immutable } from '../../../../../common/types';
+import { HostState, ImmutableReducer } from '../../types';
 import { AppAction } from '../action';
+import { isOnHostPage, hasSelectedHost } from './selectors';
 
-const initialState = (): HostListState => {
+const initialState = (): HostState => {
   return {
     hosts: [],
     pageSize: 10,
     pageIndex: 0,
     total: 0,
     loading: false,
-    detailsError: undefined,
+    error: undefined,
     details: undefined,
+    detailsLoading: false,
+    detailsError: undefined,
     location: undefined,
   };
 };
 
-export const hostListReducer: ImmutableReducer<HostListState, AppAction> = (
+export const hostListReducer: ImmutableReducer<HostState, AppAction> = (
   state = initialState(),
   action
 ) => {
@@ -38,30 +42,77 @@ export const hostListReducer: ImmutableReducer<HostListState, AppAction> = (
       pageSize,
       pageIndex,
       loading: false,
+      error: undefined,
+    };
+  } else if (action.type === 'serverFailedToReturnHostList') {
+    return {
+      ...state,
+      error: action.payload,
+      loading: false,
     };
   } else if (action.type === 'serverReturnedHostDetails') {
     return {
       ...state,
       details: action.payload.metadata,
+      detailsLoading: false,
+      detailsError: undefined,
     };
   } else if (action.type === 'serverFailedToReturnHostDetails') {
     return {
       ...state,
       detailsError: action.payload,
+      detailsLoading: false,
     };
-  } else if (action.type === 'userPaginatedHostList') {
-    return {
+  } else if (action.type === 'userChangedUrl') {
+    const newState: Immutable<HostState> = {
       ...state,
-      ...action.payload,
-      loading: true,
+      location: action.payload,
     };
-  } else if (action.type === 'userChangedUrl') {
+    const isCurrentlyOnListPage = isOnHostPage(newState) && !hasSelectedHost(newState);
+    const wasPreviouslyOnListPage = isOnHostPage(state) && !hasSelectedHost(state);
+    const isCurrentlyOnDetailsPage = isOnHostPage(newState) && hasSelectedHost(newState);
+    const wasPreviouslyOnDetailsPage = isOnHostPage(state) && hasSelectedHost(state);
+
+    // if on the host list page for the first time, return new location and load list
+    if (isCurrentlyOnListPage) {
+      if (!wasPreviouslyOnListPage) {
+        return {
+          ...state,
+          location: action.payload,
+          loading: true,
+          error: undefined,
+          detailsError: undefined,
+        };
+      }
+    } else if (isCurrentlyOnDetailsPage) {
+      // if previous page was the list or another host details page, load host details only
+      if (wasPreviouslyOnDetailsPage || wasPreviouslyOnListPage) {
+        return {
+          ...state,
+          location: action.payload,
+          detailsLoading: true,
+          error: undefined,
+          detailsError: undefined,
+        };
+      } else {
+        // if previous page was not host list or host details, load both list and details
+        return {
+          ...state,
+          location: action.payload,
+          loading: true,
+          detailsLoading: true,
+          error: undefined,
+          detailsError: undefined,
+        };
+      }
+    }
+    // otherwise we are not on a host list or details page
     return {
       ...state,
       location: action.payload,
+      error: undefined,
       detailsError: undefined,
     };
   }
-
   return state;
 };