[SIEM] Changes hosts and network tables from load more to paginated

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

@@ -91,14 +91,17 @@ describe('AddToKql Component', () => {
           limit: 10,
         },
         hosts: {
+          activePage: 0,
           limit: 10,
           direction: 'desc',
           sortField: 'lastSeen',
         },
         events: {
+          activePage: 0,
           limit: 10,
         },
         uncommonProcesses: {
+          activePage: 0,
           limit: 10,
         },
       },
@@ -141,6 +144,7 @@ describe('AddToKql Component', () => {
     expect(store.getState().network.page).toEqual({
       queries: {
         topNFlow: {
+          activePage: 0,
           limit: 10,
           flowDirection: 'uniDirectional',
           flowTarget: 'source',
@@ -150,6 +154,7 @@ describe('AddToKql Component', () => {
           },
         },
         dns: {
+          activePage: 0,
           limit: 10,
           dnsSortField: {
             field: 'queryCount',

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

@@ -33,7 +33,7 @@ describe('Authentication Table Component', () => {
         <ReduxStoreProvider store={store}>
           <AuthenticationTable
             data={mockData.Authentications.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Authentications.pageInfo)!}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Authentications.pageInfo)}
             id="authentication"
             loading={false}
             loadPage={loadPage}

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

@@ -44,7 +44,6 @@ interface AuthenticationTableReduxProps {
 }
 
 interface AuthenticationTableDispatchProps {
-  updateLimitPagination: ActionCreator<{ limit: number; hostsType: hostsModel.HostsType }>;
   updateTableActivePage: ActionCreator<{
     activePage: number;
     hostsType: hostsModel.HostsType;
@@ -57,7 +56,7 @@ interface AuthenticationTableDispatchProps {
   }>;
 }
 
-export declare type AuthTableColumns = [
+export type AuthTableColumns = [
   Columns<AuthenticationsEdges>,
   Columns<AuthenticationsEdges>,
   Columns<AuthenticationsEdges>,
@@ -86,8 +85,8 @@ const rowItems: ItemsPerRow[] = [
 
 const AuthenticationTableComponent = pure<AuthenticationTableProps>(
   ({
-    fakeTotalCount,
     data,
+    fakeTotalCount,
     id,
     limit,
     loading,
@@ -141,7 +140,6 @@ const makeMapStateToProps = () => {
 export const AuthenticationTable = connect(
   makeMapStateToProps,
   {
-    updateLimitPagination: hostsActions.updateAuthenticationsLimit,
     updateTableActivePage: hostsActions.updateTableActivePage,
     updateTableLimit: hostsActions.updateTableLimit,
   }

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

@@ -79,13 +79,3 @@ export const ROWS_10 = i18n.translate('xpack.siem.authenticationsTable.rows', {
   values: { numRows: 10 },
   defaultMessage: '{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}',
 });
-
-export const ROWS_20 = i18n.translate('xpack.siem.authenticationsTable.rows', {
-  values: { numRows: 20 },
-  defaultMessage: '{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}',
-});
-
-export const ROWS_50 = i18n.translate('xpack.siem.authenticationsTable.rows', {
-  values: { numRows: 50 },
-  defaultMessage: '{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}',
-});

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

@@ -18,7 +18,7 @@ import { mockData } from './mock';
 import * as i18n from './translations';
 
 describe('Load More Events Table Component', () => {
-  const loadMore = jest.fn();
+  const loadPage = jest.fn();
   const state: State = mockGlobalState;
 
   let store = createStore(state, apolloClientObservable);
@@ -33,12 +33,15 @@ describe('Load More Events Table Component', () => {
         <ReduxStoreProvider store={store}>
           <EventsTable
             data={mockData.Events.edges.map(i => i.node)}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Events.pageInfo)}
             id="events"
             loading={false}
-            loadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)}
-            tiebreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)!}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.Events.pageInfo
+            )}
             totalCount={mockData.Events.totalCount}
             type={hostsModel.HostsType.page}
           />

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

@@ -16,33 +16,53 @@ import { Ecs } from '../../../../graphql/types';
 import { hostsModel, hostsSelectors, State } from '../../../../store';
 import { getEmptyTagValue, getOrEmptyTag } from '../../../empty_value';
 import { HostDetailsLink, IPDetailsLink } from '../../../links';
-import { Columns, ItemsPerRow, LoadMoreTable } from '../../../load_more_table';
+import { Columns, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
 import { getRowItemDraggable, getRowItemDraggables, OverflowField } from '../../../tables/helpers';
 import { PreferenceFormattedDate } from '../../../formatted_date';
 import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
 
 import * as i18n from './translations';
-
+const tableType = hostsModel.HostsTableType.events;
 interface OwnProps {
   data: Ecs[];
-  loading: boolean;
-  hasNextPage: boolean;
+  fakeTotalCount: number;
   id: string;
-  nextCursor: string;
-  tiebreaker: string;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
   totalCount: number;
-  loadMore: (cursor: string, tiebreaker: string) => void;
   type: hostsModel.HostsType;
 }
 
 interface EventsTableReduxProps {
+  activePage: number;
   limit: number;
 }
 
 interface EventsTableDispatchProps {
-  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;
+  }>;
 }
 
+export type EventsTableColumns = [
+  Columns<Ecs>,
+  Columns<Ecs>,
+  Columns<Ecs>,
+  Columns<Ecs>,
+  Columns<Ecs>,
+  Columns<Ecs>,
+  Columns<Ecs>,
+  Columns<Ecs>
+];
+
 type EventsTableProps = OwnProps & EventsTableReduxProps & EventsTableDispatchProps;
 
 const rowItems: ItemsPerRow[] = [
@@ -54,33 +74,24 @@ const rowItems: ItemsPerRow[] = [
     text: i18n.ROWS_10,
     numberOfRow: 10,
   },
-  {
-    text: i18n.ROWS_20,
-    numberOfRow: 20,
-  },
-  {
-    text: i18n.ROWS_50,
-    numberOfRow: 50,
-  },
 ];
 
 const EventsTableComponent = pure<EventsTableProps>(
   ({
+    fakeTotalCount,
+    showMorePagesIndicator,
     data,
-    hasNextPage,
     id,
     limit,
     loading,
-    loadMore,
-    tiebreaker,
+    loadPage,
     totalCount,
-    nextCursor,
-    updateLimitPagination,
     type,
+    updateTableActivePage,
+    updateTableLimit,
   }) => (
-    <LoadMoreTable
+    <PaginatedTable
       columns={getEventsColumnsCurated(type)}
-      hasNextPage={hasNextPage}
       headerCount={totalCount}
       headerTitle={i18n.EVENTS}
       headerUnit={i18n.UNIT(totalCount)}
@@ -89,11 +100,25 @@ const EventsTableComponent = pure<EventsTableProps>(
       limit={limit}
       loading={loading}
       loadingTitle={i18n.EVENTS}
-      loadMore={() => loadMore(nextCursor, tiebreaker)}
+      loadPage={newActivePage => loadPage(newActivePage)}
       pageOfItems={data}
+      showMorePagesIndicator={showMorePagesIndicator}
+      totalCount={fakeTotalCount}
       updateLimitPagination={newLimit =>
-        updateLimitPagination({ limit: newLimit, hostsType: type })
+        updateTableLimit({
+          hostsType: type,
+          limit: newLimit,
+          tableType,
+        })
       }
+      updateActivePage={newPage =>
+        updateTableActivePage({
+          activePage: newPage,
+          hostsType: type,
+          tableType,
+        })
+      }
+      updateProps={{ totalCount }}
     />
   )
 );
@@ -109,22 +134,12 @@ const makeMapStateToProps = () => {
 export const EventsTable = connect(
   makeMapStateToProps,
   {
-    updateLimitPagination: hostsActions.updateEventsLimit,
+    updateTableActivePage: hostsActions.updateTableActivePage,
+    updateTableLimit: hostsActions.updateTableLimit,
   }
 )(EventsTableComponent);
 
-const getEventsColumns = (
-  pageType: hostsModel.HostsType
-): [
-  Columns<Ecs>,
-  Columns<Ecs>,
-  Columns<Ecs>,
-  Columns<Ecs>,
-  Columns<Ecs>,
-  Columns<Ecs>,
-  Columns<Ecs>,
-  Columns<Ecs>
-] => [
+const getEventsColumns = (pageType: hostsModel.HostsType): EventsTableColumns => [
   {
     field: 'node',
     name: i18n.TIMESTAMP,

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

@@ -10,11 +10,9 @@ export const mockData: { Events: EventsData } = {
   Events: {
     totalCount: 15546,
     pageInfo: {
-      hasNextPage: true,
-      endCursor: {
-        value: '1546878704036',
-        tiebreaker: '10624',
-      },
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
     },
     edges: [
       {

x-pack/legacy/plugins/siem/public/components/page/hosts/events_table/translations.ts

@@ -57,13 +57,3 @@ export const ROWS_10 = i18n.translate('xpack.siem.eventsTable.rows', {
   values: { numRows: 10 },
   defaultMessage: '{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}',
 });
-
-export const ROWS_20 = i18n.translate('xpack.siem.eventsTable.rows', {
-  values: { numRows: 20 },
-  defaultMessage: '{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}',
-});
-
-export const ROWS_50 = i18n.translate('xpack.siem.eventsTable.rows', {
-  values: { numRows: 50 },
-  defaultMessage: '{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}',
-});

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

@@ -43,10 +43,9 @@ export const mockData: { Hosts: HostsData; DateFields: string[] } = {
       },
     ],
     pageInfo: {
-      endCursor: {
-        value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-      },
-      hasNextPage: false,
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
     },
   },
   DateFields: ['lastBeat'],

x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx

@@ -9,31 +9,25 @@ import moment from 'moment';
 import React from 'react';
 import { StaticIndexPattern } from 'ui/index_patterns';
 
-import { HostItem, HostFields, OsFields } from '../../../../graphql/types';
 import { escapeQueryValue } from '../../../../lib/keury';
 import { hostsModel } from '../../../../store';
 import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
 import { getEmptyTagValue } from '../../../empty_value';
 import { PreferenceFormattedDate } from '../../../formatted_date';
 import { HostDetailsLink } from '../../../links';
-import { Columns } from '../../../load_more_table';
 import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
 import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
 import { Provider } from '../../../timeline/data_providers/provider';
 import { AddToKql } from '../../add_to_kql';
+import { HostsTableColumns } from './';
 
 import * as i18n from './translations';
 
 export const getHostsColumns = (
   type: hostsModel.HostsType,
   indexPattern: StaticIndexPattern
-): [
-  Columns<HostFields['name']>,
-  Columns<HostItem['lastSeen']>,
-  Columns<OsFields['name']>,
-  Columns<OsFields['version']>
-] => [
+): HostsTableColumns => [
   {
     field: 'node.host.name',
     name: i18n.NAME,