Feature/pagination drilldown tables

CHANGELOG.md

@@ -46,6 +46,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Created a separate component to check for sample data [#3475](https://github.com/wazuh/wazuh-kibana-app/pull/3475)
 - Added a new hook for getting value suggestions [#3506](https://github.com/wazuh/wazuh-kibana-app/pull/3506)
 - Added base Module Panel view with Office365 setup [#3518](https://github.com/wazuh/wazuh-kibana-app/pull/3518)
+- Adding Pagination and filter to drilldown tables at Office pannel [#3544](https://github.com/wazuh/wazuh-kibana-app/issues/3544).
 
 ### Changed
 

public/components/common/hooks/use-es-search.ts

@@ -72,7 +72,7 @@ const useEsSearch = ({ preAppliedFilters = [], preAppliedAggs = {}, size = 10 })
         setIsLoading(false);
       }
     })();
-  }, [indexPattern, query, filters, page]);
+  }, [indexPattern, query, filters, page, preAppliedAggs.buckets.terms.order]);
 
   const search = async (): Promise<SearchResponse> => {
     if (indexPattern) {

public/components/common/modules/panel/components/agg-table.tsx

@@ -11,9 +11,9 @@
  * Find more information about this on the LICENSE file.
  */
 
-import { EuiBasicTable, EuiPanel, EuiTitle, EuiBasicTableColumn } from '@elastic/eui';
+import { EuiPanel, EuiTitle, EuiBasicTableColumn, EuiInMemoryTable } from '@elastic/eui';
 import { useEsSearch } from '../../../hooks';
-import React from 'react';
+import React, { useState } from 'react';
 
 export const AggTable = ({
   onRowClick = (field, value) => {},
@@ -24,27 +24,30 @@ export const AggTable = ({
   panelProps,
   titleProps,
 }) => {
+  const [order, setOrder] = useState({ _key: 'desc' });
   const preAppliedAggs = {
     buckets: {
       terms: {
         field: aggTerm,
         size: maxRows,
-        order: { _count: 'desc' },
+        order,
       },
     },
   };
   const { esResults, isLoading, error } = useEsSearch({ preAppliedAggs });
-  const buckets = ((esResults.aggregations || {}).buckets || {}).buckets || [];
+  let buckets = ((esResults.aggregations || {}).buckets || {}).buckets || [];
   const columns: EuiBasicTableColumn<any>[] = [
     {
       field: 'key',
       name: aggLabel,
+      sortable: true,
     },
     {
       field: 'doc_count',
       name: 'Count',
       isExpander: false,
       align: 'right',
+      sortable: true,
     },
   ];
   const getRowProps = (item) => {
@@ -56,18 +59,36 @@ export const AggTable = ({
       },
     };
   };
-
+  const pagination = {
+    hidePerPageOptions: true,
+    pageSize: 10,
+  };
+  const sorting = {
+    sort: {
+      field: 'doc_count',
+      direction: 'desc',
+    },
+  };
+  const onTableChange = ({ sort = {} }) => {
+    if (sort.field) {
+      const field = { key: '_key', doc_count: '_count' }[sort.field];
+      setOrder({ [field]: sort.direction });
+    }
+  };
   return (
     <EuiPanel data-test-subj={`${aggTerm}-aggTable`} {...panelProps}>
       <EuiTitle {...titleProps}>
         <h2>{tableTitle}</h2>
       </EuiTitle>
-      <EuiBasicTable
-        items={buckets}
+      <EuiInMemoryTable
         columns={columns}
-        rowProps={getRowProps}
+        items={buckets}
         loading={isLoading}
+        rowProps={getRowProps}
         error={error ? error.message : undefined}
+        pagination={pagination}
+        onTableChange={onTableChange}
+        sorting={sorting}
       />
     </EuiPanel>
   );