[Endpoint] Task/basic endpoint list

x-pack/plugins/endpoint/common/types.ts

@@ -118,4 +118,4 @@ export interface EndpointMetadata {
 /**
  * The PageId type is used for the payload when firing userNavigatedToPage actions
  */
-export type PageId = 'alertsPage' | 'endpointListPage';
+export type PageId = 'alertsPage' | 'managementPage';

x-pack/plugins/endpoint/public/applications/endpoint/index.tsx

@@ -13,20 +13,20 @@ import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import { appStoreFactory } from './store';
 import { AlertIndex } from './view/alerts';
+import { EndpointList } from './view/managing';
 
 /**
  * This module will be loaded asynchronously to reduce the bundle size of your plugin's main bundle.
  */
 export function renderApp(coreStart: CoreStart, { appBasePath, element }: AppMountParameters) {
   coreStart.http.get('/api/endpoint/hello-world');
 
-  const [store, stopSagas] = appStoreFactory(coreStart);
+  const store = appStoreFactory(coreStart);
 
   ReactDOM.render(<AppRoot basename={appBasePath} store={store} />, element);
 
   return () => {
     ReactDOM.unmountComponentAtNode(element);
-    stopSagas();
   };
 }
 
@@ -49,22 +49,7 @@ const AppRoot: React.FunctionComponent<RouterProps> = React.memo(({ basename, st
               </h1>
             )}
           />
-          <Route
-            path="/management"
-            render={() => {
-              // FIXME: This is temporary. Will be removed in next PR for endpoint list
-              store.dispatch({ type: 'userEnteredEndpointListPage' });
-
-              return (
-                <h1 data-test-subj="endpointManagement">
-                  <FormattedMessage
-                    id="xpack.endpoint.endpointManagement"
-                    defaultMessage="Manage Endpoints"
-                  />
-                </h1>
-              );
-            }}
-          />
+          <Route path="/management" component={EndpointList} />
           <Route path="/alerts" component={AlertIndex} />
           <Route
             render={() => (

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

@@ -4,22 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EndpointListData } from './types';
+import { ManagementPagination } from '../../types';
+import { EndpointResultList } from '../../../../../common/types';
 
 interface ServerReturnedEndpointList {
   type: 'serverReturnedEndpointList';
-  payload: EndpointListData;
-}
-
-interface UserEnteredEndpointListPage {
-  type: 'userEnteredEndpointListPage';
+  payload: EndpointResultList;
 }
 
 interface UserExitedEndpointListPage {
   type: 'userExitedEndpointListPage';
 }
 
+interface UserPaginatedEndpointListTable {
+  type: 'userPaginatedEndpointListTable';
+  payload: ManagementPagination;
+}
+
 export type EndpointListAction =
   | ServerReturnedEndpointList
-  | UserEnteredEndpointListPage
-  | UserExitedEndpointListPage;
+  | UserExitedEndpointListPage
+  | UserPaginatedEndpointListTable;

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

@@ -5,53 +5,41 @@
  */
 
 import { createStore, Dispatch, Store } from 'redux';
-import { EndpointListAction, EndpointData, endpointListReducer, EndpointListState } from './index';
-import { endpointListData } from './selectors';
+import { EndpointListAction, endpointListReducer } from './index';
+import { EndpointMetadata } from '../../../../../common/types';
+import { ManagementState } from '../../types';
+import { listData } from './selectors';
 
 describe('endpoint_list store concerns', () => {
-  let store: Store<EndpointListState>;
+  let store: Store<ManagementState>;
   let dispatch: Dispatch<EndpointListAction>;
   const createTestStore = () => {
     store = createStore(endpointListReducer);
     dispatch = store.dispatch;
   };
-  const generateEndpoint = (): EndpointData => {
+  const generateEndpoint = (): EndpointMetadata => {
     return {
-      machine_id: Math.random()
-        .toString(16)
-        .substr(2),
-      created_at: new Date(),
-      host: {
-        name: '',
-        hostname: '',
-        ip: '',
-        mac_address: '',
-        os: {
-          name: '',
-          full: '',
-        },
+      event: {
+        created: new Date(0),
       },
       endpoint: {
-        domain: '',
-        is_base_image: true,
-        active_directory_distinguished_name: '',
-        active_directory_hostname: '',
-        upgrade: {
-          status: '',
-          updated_at: new Date(),
-        },
-        isolation: {
-          status: false,
-          request_status: true,
-          updated_at: new Date(),
-        },
         policy: {
-          name: '',
           id: '',
         },
-        sensor: {
-          persistence: true,
-          status: {},
+      },
+      agent: {
+        version: '',
+        id: '',
+      },
+      host: {
+        id: '',
+        hostname: '',
+        ip: [''],
+        mac: [''],
+        os: {
+          name: '',
+          full: '',
+          version: '',
         },
       },
     };
@@ -62,7 +50,7 @@ describe('endpoint_list store concerns', () => {
       payload: {
         endpoints: [generateEndpoint()],
         request_page_size: 1,
-        request_index: 1,
+        request_page_index: 1,
         total: 10,
       },
     });
@@ -76,17 +64,18 @@ describe('endpoint_list store concerns', () => {
     test('it creates default state', () => {
       expect(store.getState()).toEqual({
         endpoints: [],
-        request_page_size: 10,
-        request_index: 0,
+        pageSize: 10,
+        pageIndex: 0,
         total: 0,
+        loading: false,
       });
     });
 
     test('it handles `serverReturnedEndpointList', () => {
       const payload = {
         endpoints: [generateEndpoint()],
         request_page_size: 1,
-        request_index: 1,
+        request_page_index: 1,
         total: 10,
       };
       dispatch({
@@ -96,8 +85,8 @@ describe('endpoint_list store concerns', () => {
 
       const currentState = store.getState();
       expect(currentState.endpoints).toEqual(payload.endpoints);
-      expect(currentState.request_page_size).toEqual(payload.request_page_size);
-      expect(currentState.request_index).toEqual(payload.request_index);
+      expect(currentState.pageSize).toEqual(payload.request_page_size);
+      expect(currentState.pageIndex).toEqual(payload.request_page_index);
       expect(currentState.total).toEqual(payload.total);
     });
 
@@ -108,7 +97,7 @@ describe('endpoint_list store concerns', () => {
 
       dispatch({ type: 'userExitedEndpointListPage' });
       expect(store.getState().endpoints.length).toEqual(0);
-      expect(store.getState().request_index).toEqual(0);
+      expect(store.getState().pageIndex).toEqual(0);
     });
   });
 
@@ -120,7 +109,7 @@ describe('endpoint_list store concerns', () => {
 
     test('it selects `endpointListData`', () => {
       const currentState = store.getState();
-      expect(endpointListData(currentState)).toEqual(currentState.endpoints);
+      expect(listData(currentState)).toEqual(currentState.endpoints);
     });
   });
 });

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

@@ -6,5 +6,4 @@
 
 export { endpointListReducer } from './reducer';
 export { EndpointListAction } from './action';
-export { endpointListSaga } from './saga';
-export * from './types';
+export { managementMiddlewareFactory } from './middleware';

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

@@ -0,0 +1,80 @@
+/*
+ * 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, HttpSetup } from 'kibana/public';
+import { applyMiddleware, createStore, Dispatch, Store } from 'redux';
+import { coreMock } from '../../../../../../../../src/core/public/mocks';
+import { endpointListReducer, managementMiddlewareFactory } from './index';
+import { EndpointMetadata, EndpointResultList } from '../../../../../common/types';
+import { ManagementState } from '../../types';
+import { AppAction } from '../action';
+import { listData } from './selectors';
+describe('endpoint list saga', () => {
+  const sleep = (ms = 100) => new Promise(wakeup => setTimeout(wakeup, ms));
+  let fakeCoreStart: jest.Mocked<CoreStart>;
+  let fakeHttpServices: jest.Mocked<HttpSetup>;
+  let store: Store<ManagementState>;
+  let getState: typeof store['getState'];
+  let dispatch: Dispatch<AppAction>;
+  // https://github.com/elastic/endpoint-app-team/issues/131
+  const generateEndpoint = (): EndpointMetadata => {
+    return {
+      event: {
+        created: new Date(0),
+      },
+      endpoint: {
+        policy: {
+          id: '',
+        },
+      },
+      agent: {
+        version: '',
+        id: '',
+      },
+      host: {
+        id: '',
+        hostname: '',
+        ip: [''],
+        mac: [''],
+        os: {
+          name: '',
+          full: '',
+          version: '',
+        },
+      },
+    };
+  };
+  const getEndpointListApiResponse = (): EndpointResultList => {
+    return {
+      endpoints: [generateEndpoint()],
+      request_page_size: 1,
+      request_page_index: 1,
+      total: 10,
+    };
+  };
+  beforeEach(() => {
+    fakeCoreStart = coreMock.createStart({ basePath: '/mock' });
+    fakeHttpServices = fakeCoreStart.http as jest.Mocked<HttpSetup>;
+    store = createStore(
+      endpointListReducer,
+      applyMiddleware(managementMiddlewareFactory(fakeCoreStart))
+    );
+    getState = store.getState;
+    dispatch = store.dispatch;
+  });
+  test('it handles `userNavigatedToPage`', async () => {
+    const apiResponse = getEndpointListApiResponse();
+    fakeHttpServices.post.mockResolvedValue(apiResponse);
+    expect(fakeHttpServices.post).not.toHaveBeenCalled();
+    dispatch({ type: 'userNavigatedToPage', payload: 'managementPage' });
+    await sleep();
+    expect(fakeHttpServices.post).toHaveBeenCalledWith('/api/endpoint/endpoints', {
+      body: JSON.stringify({
+        paging_properties: [{ page_index: 0 }, { page_size: 10 }],
+      }),
+    });
+    expect(listData(getState())).toEqual(apiResponse.endpoints);
+  });
+});

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { MiddlewareFactory } from '../../types';
+import { pageIndex, pageSize } from './selectors';
+import { ManagementState } from '../../types';
+import { AppAction } from '../action';
+
+export const managementMiddlewareFactory: MiddlewareFactory<ManagementState> = coreStart => {
+  return ({ getState, dispatch }) => next => async (action: AppAction) => {
+    next(action);
+    if (
+      (action.type === 'userNavigatedToPage' && action.payload === 'managementPage') ||
+      action.type === 'userPaginatedEndpointListTable'
+    ) {
+      const managementPageIndex = pageIndex(getState());
+      const managementPageSize = pageSize(getState());
+      const response = await coreStart.http.post('/api/endpoint/endpoints', {
+        body: JSON.stringify({
+          paging_properties: [
+            { page_index: managementPageIndex },
+            { page_size: managementPageSize },
+          ],
+        }),
+      });
+      response.request_page_index = managementPageIndex;
+      dispatch({
+        type: 'serverReturnedEndpointList',
+        payload: response,
+      });
+      dispatch({ type: 'serverReturnedAlertsData', payload: response });
+    }
+  };
+};