[7.x] [SIEM] - Authentications Table, Numbered Pagination (#39474) (#…

…40915)

* cherry

* fix lint err

x-pack/legacy/plugins/siem/common/constants.ts

@@ -8,3 +8,4 @@ export const APP_ID = 'siem';
 export const APP_NAME = 'SIEM';
 export const DEFAULT_INDEX_KEY = 'siem:defaultIndex';
 export const DEFAULT_ANOMALY_SCORE = 'siem:defaultAnomalyScore';
+export const DEFAULT_MAX_TABLE_QUERY_SIZE = 10000;

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
@@ -61,4 +72,10 @@ export const sharedSchema = gql`
     dsl: [String!]!
     response: [String!]!
   }
+
+  type PageInfoPaginated {
+    activePage: Float!
+    fakeTotalCount: Float!
+    showMorePagesIndicator: Boolean!
+  }
 `;

x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx

@@ -9,7 +9,7 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { Sticky } from 'react-sticky';
 import { pure } from 'recompose';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { SuperDatePicker } from '../super_date_picker';
 
@@ -20,7 +20,7 @@ const disableSticky = 'screen and (max-width: ' + euiLightVars.euiBreakpoints.s
 const disableStickyMq = window.matchMedia(disableSticky);
 
 const Aside = styled.aside<{ isSticky?: boolean }>`
-  ${props => `
+  ${props => css`
     position: relative;
     z-index: ${props.theme.eui.euiZNavigation};
     background: ${props.theme.eui.euiColorEmptyShade};

x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.tsx

@@ -7,12 +7,12 @@
 import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { pure } from 'recompose';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { InspectButton } from '../inspect';
 
 const Header = styled.header<{ border?: boolean }>`
-  ${props => `
+  ${props => css`
     margin-bottom: ${props.theme.eui.euiSizeL};
 
     ${props.border &&

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

@@ -18,7 +18,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);
@@ -33,11 +33,15 @@ describe('Authentication Table Component', () => {
         <ReduxStoreProvider store={store}>
           <AuthenticationTable
             data={mockData.Authentications.edges}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Authentications.pageInfo)!}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Authentications.pageInfo)!}
             id="authentication"
             loading={false}
-            loadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Authentications.pageInfo)}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.Authentications.pageInfo
+            )}
             totalCount={mockData.Authentications.totalCount}
             type={hostsModel.HostsType.page}
           />

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

@@ -19,21 +19,23 @@ 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;
+  loadPage: (newActivePage: number) => void;
   id: string;
-  hasNextPage: boolean;
-  nextCursor: string;
+  showMorePagesIndicator: boolean;
   totalCount: number;
-  loadMore: (cursor: string) => void;
   type: hostsModel.HostsType;
 }
 
@@ -43,8 +45,30 @@ 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;
+  }>;
 }
 
+export declare type AuthTableColumns = [
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>
+];
+
 type AuthenticationTableProps = OwnProps &
   AuthenticationTableReduxProps &
   AuthenticationTableDispatchProps;
@@ -58,32 +82,24 @@ const rowItems: ItemsPerRow[] = [
     text: i18n.ROWS_10,
     numberOfRow: 10,
   },
-  {
-    text: i18n.ROWS_20,
-    numberOfRow: 20,
-  },
-  {
-    text: i18n.ROWS_50,
-    numberOfRow: 50,
-  },
 ];
 
 const AuthenticationTableComponent = pure<AuthenticationTableProps>(
   ({
+    fakeTotalCount,
     data,
-    hasNextPage,
     id,
     limit,
     loading,
-    loadMore,
+    loadPage,
+    showMorePagesIndicator,
     totalCount,
-    nextCursor,
-    updateLimitPagination,
     type,
+    updateTableActivePage,
+    updateTableLimit,
   }) => (
-    <LoadMoreTable
+    <PaginatedTable
       columns={getAuthenticationColumnsCurated(type)}
-      hasNextPage={hasNextPage}
       headerCount={totalCount}
       headerTitle={i18n.AUTHENTICATIONS}
       headerUnit={i18n.UNIT(totalCount)}
@@ -92,11 +108,25 @@ const AuthenticationTableComponent = pure<AuthenticationTableProps>(
       limit={limit}
       loading={loading}
       loadingTitle={i18n.AUTHENTICATIONS}
-      loadMore={() => loadMore(nextCursor)}
+      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 }}
     />
   )
 );
@@ -112,20 +142,12 @@ export const AuthenticationTable = connect(
   makeMapStateToProps,
   {
     updateLimitPagination: hostsActions.updateAuthenticationsLimit,
+    updateTableActivePage: hostsActions.updateTableActivePage,
+    updateTableLimit: hostsActions.updateTableLimit,
   }
 )(AuthenticationTableComponent);
 
-const getAuthenticationColumns = (): [
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>
-] => [
+const getAuthenticationColumns = (): AuthTableColumns => [
   {
     name: i18n.USER,
     truncateText: false,

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,9 @@ export const mockData: { Authentications: AuthenticationsData } = {
       },
     ],
     pageInfo: {
-      endCursor: {
-        value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-      },
-      hasNextPage: true,
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
     },
   },
 };