[7.x] fix sorting, pagination, state (#113563)

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

@@ -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,
-        });
-      },
     };
   };
 

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

@@ -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>

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

@@ -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>

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

@@ -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}