maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix sorting, pagination, state (#113563) (#113613)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Sandra G <neptunian@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2021-10-01 10:37:12 -04:00 committed by GitHub
parent 4814df2e11
commit 196ed668f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
x-pack/plugins/monitoring/public/application/hooks/use_table.ts
View file

@ -6,7 +6,6 @@
*/
import { useState, useCallback } from 'react';
import { EUI_SORT_ASCENDING } from '../../../common/constants';
import { euiTableStorageGetter, euiTableStorageSetter } from '../../components/table';
import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
@ -83,22 +82,18 @@ export function useTable(storageKey: string) {
// get initial state from localStorage
const [sorting, setSorting] = useState<Sorting>(storageData.sort || { sort: {} });
const cleanSortingData = (sortData: Sorting) => {
const sort = sortData || { sort: {} };
if (!sort.sort.field) {
sort.sort.field = 'name';
}
if (!sort.sort.direction) {
sort.sort.direction = EUI_SORT_ASCENDING;
}
return sort;
};
const [query, setQuery] = useState('');
const onTableChange = ({ page, sort }: { page: Page; sort: Sorting['sort'] }) => {
const onTableChange = ({
page,
sort,
queryText,
}: {
page: Page;
sort: Sorting['sort'];
queryText: string;
}) => {
setPagination({
...pagination,
...{
@ -109,11 +104,14 @@ export function useTable(storageKey: string) {
pageSizeOptions: PAGE_SIZE_OPTIONS,
},
});
setSorting(cleanSortingData({ sort }));
setSorting({ sort });
setLocalStorageData(storage, {
page,
sort: { sort },
sort: {
sort,
},
});
setQuery(queryText);
};
const getPaginationRouteOptions = useCallback(() => {
@ -136,33 +134,6 @@ export function useTable(storageKey: string) {
sorting,
pagination,
onTableChange,
fetchMoreData: ({
page,
sort,
queryText,
}: {
page: Page;
sort: Sorting;
queryText: string;
}) => {
setPagination({
...pagination,
...{
initialPageSize: page.size,
pageSize: page.size,
initialPageIndex: page.index,
pageIndex: page.index,
pageSizeOptions: PAGE_SIZE_OPTIONS,
},
});
setSorting(cleanSortingData(sort));
setQuery(queryText);
setLocalStorageData(storage, {
page,
sort,
});
},
};
};

5
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
View file

@ -296,8 +296,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid, aler
};
export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsearch, ...props }) {
const { sorting, pagination, onTableChange, clusterUuid, setupMode, fetchMoreData, alerts } =
props;
const { sorting, pagination, onTableChange, clusterUuid, setupMode, alerts } = props;
const columns = getColumns(showCgroupMetricsElasticsearch, setupMode, clusterUuid, alerts);
@ -464,7 +463,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
},
}}
onTableChange={onTableChange}
fetchMoreData={fetchMoreData}
{...props}
/>
</EuiPageContent>
</EuiPageBody>

4
x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
View file

@ -127,7 +127,7 @@ export class PipelineListing extends Component {
}
render() {
const { data, sorting, pagination, onTableChange, fetchMoreData, upgradeMessage, className } =
const { data, sorting, pagination, onTableChange, upgradeMessage, className, ...props } =
this.props;
const sortingOptions = sorting || { field: 'id', direction: 'asc' };
@ -149,7 +149,6 @@ export class PipelineListing extends Component {
sorting={sortingOptions}
message={upgradeMessage}
pagination={pagination}
fetchMoreData={fetchMoreData}
search={{
box: {
placeholder: i18n.translate(
@ -161,6 +160,7 @@ export class PipelineListing extends Component {
},
}}
onTableChange={onTableChange}
{...props}
/>
</EuiPageContent>
</EuiPageBody>

26
x-pack/plugins/monitoring/public/components/table/eui_table_ssp.js
View file

@ -20,10 +20,8 @@ export function EuiMonitoringSSPTable({
onTableChange,
setupMode,
productName,
fetchMoreData,
...props
}) {
const [isLoading, setIsLoading] = React.useState(false);
const [queryText, setQueryText] = React.useState('');
const [page, setPage] = React.useState({
index: pagination.pageIndex,
@ -72,19 +70,28 @@ export function EuiMonitoringSSPTable({
const onChange = async ({ page, sort }) => {
setPage(page);
setSort({ sort });
setIsLoading(true);
await fetchMoreData({ page, sort: { sort }, queryText });
setIsLoading(false);
onTableChange({ page, sort });
// angular version
if (props.fetchMoreData) {
await props.fetchMoreData({ page, sort: { sort }, queryText });
onTableChange({ page, sort });
}
// react version
else {
onTableChange({ page, sort, queryText });
}
};
const onQueryChange = async ({ queryText }) => {
const newPage = { ...page, index: 0 };
setPage(newPage);
setQueryText(queryText);
setIsLoading(true);
await fetchMoreData({ page: newPage, sort, queryText });
setIsLoading(false);
// angular version
if (props.fetchMoreData) {
await props.fetchMoreData({ page: newPage, sort, queryText });
} else {
// react version
onTableChange({ page, sort: sort.sort, queryText });
}
};
return (
@ -97,7 +104,6 @@ export function EuiMonitoringSSPTable({
items={items}
pagination={pagination}
onChange={onChange}
loading={isLoading}
columns={columns}
/>
{footerContent}