[SIEM] Changes authentications table from load more to paginated

x-pack/legacy/plugins/siem/common/graphql/shared/schema.gql.ts

@@ -30,6 +30,17 @@ export const sharedSchema = gql`
     tiebreaker: String
   }
 
+  input PaginationInputPaginated {
+    "The activePage parameter defines the page of results you want to fetch"
+    activePage: Float!
+    "The cursorStart parameter defines the start of the results to be displayed"
+    cursorStart: Float!
+    "The fakePossibleCount parameter determines the total count in order to show 5 additional pages"
+    fakePossibleCount: Float!
+    "The querySize parameter is the number of items to be returned"
+    querySize: Float!
+  }
+
   enum Direction {
     asc
     desc
@@ -56,4 +67,9 @@ export const sharedSchema = gql`
     endCursor: CursorType
     hasNextPage: Boolean
   }
+
+  type PageInfoPaginated {
+    activePage: Float!
+    fakeTotalCount: Float!
+  }
 `;

x-pack/legacy/plugins/siem/public/components/page/add_to_kql/index.test.tsx

@@ -87,6 +87,7 @@ describe('AddToKql Component', async () => {
     expect(store.getState().hosts.page).toEqual({
       queries: {
         authentications: {
+          activePage: 0,
           limit: 10,
         },
         hosts: {

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.test.tsx

@@ -20,7 +20,7 @@ import * as i18n from './translations';
 import { AuthenticationTable, getAuthenticationColumnsCurated } from '.';
 
 describe('Authentication Table Component', () => {
-  const loadMore = jest.fn();
+  const loadPage = jest.fn();
   const state: State = mockGlobalState;
 
   let store = createStore(state, apolloClientObservable);
@@ -34,12 +34,11 @@ describe('Authentication Table Component', () => {
       const wrapper = shallow(
         <ReduxStoreProvider store={store}>
           <AuthenticationTable
-            loading={false}
             data={mockData.Authentications.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Authentications.pageInfo)!}
+            loading={false}
+            loadPage={loadPage}
             totalCount={mockData.Authentications.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Authentications.pageInfo)!}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Authentications.pageInfo)}
-            loadMore={loadMore}
             type={hostsModel.HostsType.page}
           />
         </ReduxStoreProvider>

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx

@@ -19,20 +19,21 @@ import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
 import { getEmptyTagValue } from '../../../empty_value';
 import { HostDetailsLink, IPDetailsLink } from '../../../links';
-import { Columns, ItemsPerRow, LoadMoreTable } from '../../../load_more_table';
+import { Columns, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
 import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
 import { Provider } from '../../../timeline/data_providers/provider';
 
 import * as i18n from './translations';
 import { getRowItemDraggables } from '../../../tables/helpers';
 
+const tableType = hostsModel.HostsTableType.authentications;
+
 interface OwnProps {
   data: AuthenticationsEdges[];
+  fakeTotalCount: number;
   loading: boolean;
-  hasNextPage: boolean;
-  nextCursor: string;
+  loadPage: (newActivePage: number) => void;
   totalCount: number;
-  loadMore: (cursor: string) => void;
   type: hostsModel.HostsType;
 }
 
@@ -42,6 +43,16 @@ interface AuthenticationTableReduxProps {
 
 interface AuthenticationTableDispatchProps {
   updateLimitPagination: ActionCreator<{ limit: number; hostsType: hostsModel.HostsType }>;
+  updateTableActivePage: ActionCreator<{
+    activePage: number;
+    hostsType: hostsModel.HostsType;
+    tableType: hostsModel.HostsTableType;
+  }>;
+  updateTableLimit: ActionCreator<{
+    limit: number;
+    hostsType: hostsModel.HostsType;
+    tableType: hostsModel.HostsTableType;
+  }>;
 }
 
 type AuthenticationTableProps = OwnProps &
@@ -69,30 +80,41 @@ const rowItems: ItemsPerRow[] = [
 
 const AuthenticationTableComponent = pure<AuthenticationTableProps>(
   ({
+    fakeTotalCount,
     data,
-    hasNextPage,
     limit,
     loading,
-    loadMore,
+    loadPage,
     totalCount,
-    nextCursor,
-    updateLimitPagination,
     type,
+    updateTableActivePage,
+    updateTableLimit,
   }) => (
-    <LoadMoreTable
+    <PaginatedTable
       columns={getAuthenticationColumnsCurated(type)}
-      hasNextPage={hasNextPage}
       headerCount={totalCount}
       headerTitle={i18n.AUTHENTICATIONS}
       headerUnit={i18n.UNIT(totalCount)}
       itemsPerRow={rowItems}
       limit={limit}
       loading={loading}
       loadingTitle={i18n.AUTHENTICATIONS}
-      loadMore={() => loadMore(nextCursor)}
+      loadPage={newActivePage => loadPage(newActivePage)}
       pageOfItems={data}
+      totalCount={fakeTotalCount}
       updateLimitPagination={newLimit =>
-        updateLimitPagination({ limit: newLimit, hostsType: type })
+        updateTableLimit({
+          hostsType: type,
+          limit: newLimit,
+          tableType,
+        })
+      }
+      updateActivePage={newPage =>
+        updateTableActivePage({
+          activePage: newPage,
+          hostsType: type,
+          tableType,
+        })
       }
     />
   )
@@ -109,6 +131,8 @@ export const AuthenticationTable = connect(
   makeMapStateToProps,
   {
     updateLimitPagination: hostsActions.updateAuthenticationsLimit,
+    updateTableActivePage: hostsActions.updateTableActivePage,
+    updateTableLimit: hostsActions.updateTableLimit,
   }
 )(AuthenticationTableComponent);
 

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/mock.ts

@@ -8,7 +8,7 @@ import { AuthenticationsData } from '../../../../graphql/types';
 
 export const mockData: { Authentications: AuthenticationsData } = {
   Authentications: {
-    totalCount: 4,
+    totalCount: 54,
     edges: [
       {
         node: {
@@ -74,10 +74,8 @@ export const mockData: { Authentications: AuthenticationsData } = {
       },
     ],
     pageInfo: {
-      endCursor: {
-        value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-      },
-      hasNextPage: true,
+      activePage: 1,
+      fakeTotalCount: 50,
     },
   },
 };

x-pack/legacy/plugins/siem/public/components/paginated_table/helpers.test.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { generateTablePaginationOptions } from './helpers';
+
+describe('generateTablePaginationOptions pagination helper function', () => {
+  let activePage;
+  let limit;
+  test('generates 5 pages when activePage 0', () => {
+    activePage = 0;
+    limit = 10;
+    const result = generateTablePaginationOptions(activePage, limit);
+    expect(result).toEqual({
+      activePage,
+      cursorStart: 0,
+      fakePossibleCount: 50,
+      querySize: 10,
+    });
+  });
+  test('generates 6 pages when activePage 4', () => {
+    activePage = 4;
+    limit = 10;
+    const result = generateTablePaginationOptions(activePage, limit);
+    expect(result).toEqual({
+      activePage,
+      cursorStart: 40,
+      fakePossibleCount: 60,
+      querySize: 50,
+    });
+  });
+  test('generates 5 pages when activePage 2', () => {
+    activePage = 2;
+    limit = 10;
+    const result = generateTablePaginationOptions(activePage, limit);
+    expect(result).toEqual({
+      activePage,
+      cursorStart: 20,
+      fakePossibleCount: 50,
+      querySize: 30,
+    });
+  });
+});

x-pack/legacy/plugins/siem/public/components/paginated_table/helpers.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { PaginationInputPaginated } from '../../graphql/types';
+
+export const generateTablePaginationOptions = (
+  activePage: number,
+  limit: number
+): PaginationInputPaginated => {
+  const cursorStart = activePage * limit;
+  return {
+    activePage,
+    cursorStart,
+    fakePossibleCount: 4 <= activePage && activePage > 0 ? limit * (activePage + 2) : limit * 5,
+    querySize: limit + cursorStart,
+  };
+};