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:
parent
4814df2e11
commit
196ed668f6
4 changed files with 34 additions and 58 deletions
|
@ -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,
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue