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]);
 
   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, useMemo } from 'react';
 
 export const AggTable = ({
   onRowClick = (field, value) => {},
@@ -24,27 +24,33 @@ export const AggTable = ({
   panelProps,
   titleProps,
 }) => {
-  const preAppliedAggs = {
-    buckets: {
-      terms: {
-        field: aggTerm,
-        size: maxRows,
-        order: { _count: 'desc' },
+  const [order, setOrder] = useState({ _count: 'desc' });
+  const preAppliedAggs = useMemo(() => {
+    return {
+      buckets: {
+        terms: {
+          field: aggTerm,
+          size: maxRows,
+          order,
+        },
       },
-    },
-  };
+    };
+  }, [order, aggTerm, maxRows]);
+
   const { esResults, isLoading, error } = useEsSearch({ preAppliedAggs });
   const 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 +62,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>
   );