From 6725ac899691a6b0e9a55d06dea0cb2920d55bee Mon Sep 17 00:00:00 2001 From: CPAlejandro Date: Fri, 6 Aug 2021 10:20:57 +0200 Subject: [PATCH 1/5] Pagination in Drilldown Tables --- .../modules/panel/components/agg-table.tsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/public/components/common/modules/panel/components/agg-table.tsx b/public/components/common/modules/panel/components/agg-table.tsx index 230cdf0eab..f137933e38 100644 --- a/public/components/common/modules/panel/components/agg-table.tsx +++ b/public/components/common/modules/panel/components/agg-table.tsx @@ -11,7 +11,7 @@ * 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'; @@ -56,19 +56,30 @@ export const AggTable = ({ }, }; }; - + const sorting = { + sort: { + field: 'doc_count', + direction: 'desc', + }, + }; + const pagination = { + hidePerPageOptions: true, + pageSize: 10, + }; return (

{tableTitle}

 - ); -}; +}; \ No newline at end of file From 548c4d6025c0c671b6aae3dc00db02b3575ded30 Mon Sep 17 00:00:00 2001 From: CPAlejandro Date: Fri, 6 Aug 2021 10:24:40 +0200 Subject: [PATCH 2/5] Adding key filter in aggs tables --- .../components/common/hooks/use-es-search.ts | 2 +- .../modules/panel/components/agg-table.tsx | 24 +++++++++++++------ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/public/components/common/hooks/use-es-search.ts b/public/components/common/hooks/use-es-search.ts index b5fc92afe8..b7bece022b 100644 --- a/public/components/common/hooks/use-es-search.ts +++ b/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 => { if (indexPattern) { diff --git a/public/components/common/modules/panel/components/agg-table.tsx b/public/components/common/modules/panel/components/agg-table.tsx index f137933e38..c6020d7cf1 100644 --- a/public/components/common/modules/panel/components/agg-table.tsx +++ b/public/components/common/modules/panel/components/agg-table.tsx @@ -13,7 +13,7 @@ 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[] = [ { field: 'key', name: aggLabel, + sortable: true, }, { field: 'doc_count', name: 'Count', isExpander: false, align: 'right', + sortable: true, }, ]; const getRowProps = (item) => { @@ -56,15 +59,21 @@ export const AggTable = ({ }, }; }; + const pagination = { + hidePerPageOptions: true, + pageSize: 10, + }; const sorting = { sort: { field: 'doc_count', direction: 'desc', }, }; - const pagination = { - hidePerPageOptions: true, - pageSize: 10, + const onTableChange = ({ sort = {} }) => { + if (sort.field) { + const field = { key: '_key', doc_count: '_count' }[sort.field]; + setOrder({ [field]: sort.direction }); + } }; return ( @@ -78,8 +87,9 @@ export const AggTable = ({ rowProps={getRowProps} error={error ? error.message : undefined} pagination={pagination} + onTableChange={onTableChange} sorting={sorting} /> ); -}; \ No newline at end of file +}; From 676f344e0d6fc02b567d749c6b0b7e3685849e70 Mon Sep 17 00:00:00 2001 From: CPAlejandro Date: Fri, 6 Aug 2021 10:32:19 +0200 Subject: [PATCH 3/5] Adding Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8988ccc135..88232bca12 100644 --- a/CHANGELOG.md +++ b/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 From 725f43cb2a91fcdedfc21bd44b5d8d818eeeb403 Mon Sep 17 00:00:00 2001 From: CPAlejandro Date: Fri, 6 Aug 2021 11:59:57 +0200 Subject: [PATCH 4/5] Fixing some bugs --- .../components/common/modules/panel/components/agg-table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/components/common/modules/panel/components/agg-table.tsx b/public/components/common/modules/panel/components/agg-table.tsx index c6020d7cf1..1c62229ef3 100644 --- a/public/components/common/modules/panel/components/agg-table.tsx +++ b/public/components/common/modules/panel/components/agg-table.tsx @@ -24,7 +24,7 @@ export const AggTable = ({ panelProps, titleProps, }) => { - const [order, setOrder] = useState({ _key: 'desc' }); + const [order, setOrder] = useState({ _count: 'desc' }); const preAppliedAggs = { buckets: { terms: { @@ -35,7 +35,7 @@ export const AggTable = ({ }, }; const { esResults, isLoading, error } = useEsSearch({ preAppliedAggs }); - let buckets = ((esResults.aggregations || {}).buckets || {}).buckets || []; + const buckets = ((esResults.aggregations || {}).buckets || {}).buckets || []; const columns: EuiBasicTableColumn[] = [ { field: 'key', From b5ad36fe1b091bba68ca3de7a6ce6071ea7cb853 Mon Sep 17 00:00:00 2001 From: CPAlejandro Date: Mon, 9 Aug 2021 11:38:03 +0200 Subject: [PATCH 5/5] Fixing useSearch use --- .../components/common/hooks/use-es-search.ts | 2 +- .../modules/panel/components/agg-table.tsx | 21 +++++++++++-------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/public/components/common/hooks/use-es-search.ts b/public/components/common/hooks/use-es-search.ts index b7bece022b..f9296a94d2 100644 --- a/public/components/common/hooks/use-es-search.ts +++ b/public/components/common/hooks/use-es-search.ts @@ -72,7 +72,7 @@ const useEsSearch = ({ preAppliedFilters = [], preAppliedAggs = {}, size = 10 }) setIsLoading(false); } })(); - }, [indexPattern, query, filters, page, preAppliedAggs.buckets.terms.order]); + }, [indexPattern, query, filters, page, preAppliedAggs]); const search = async (): Promise => { if (indexPattern) { diff --git a/public/components/common/modules/panel/components/agg-table.tsx b/public/components/common/modules/panel/components/agg-table.tsx index 1c62229ef3..e58b7f577e 100644 --- a/public/components/common/modules/panel/components/agg-table.tsx +++ b/public/components/common/modules/panel/components/agg-table.tsx @@ -13,7 +13,7 @@ import { EuiPanel, EuiTitle, EuiBasicTableColumn, EuiInMemoryTable } from '@elastic/eui'; import { useEsSearch } from '../../../hooks'; -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; export const AggTable = ({ onRowClick = (field, value) => {}, @@ -25,15 +25,18 @@ export const AggTable = ({ titleProps, }) => { const [order, setOrder] = useState({ _count: 'desc' }); - const preAppliedAggs = { - buckets: { - terms: { - field: aggTerm, - size: maxRows, - order, + 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[] = [