[7.x] [ML] Check for the sort field type in Anomalies table before updating the URL state. (#98270)

x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js

@@ -152,7 +152,10 @@ export class AnomaliesTableInternal extends Component {
     const result = {
       pageIndex: page && page.index !== undefined ? page.index : tableState.pageIndex,
       pageSize: page && page.size !== undefined ? page.size : tableState.pageSize,
-      sortField: sort && sort.field !== undefined ? sort.field : tableState.sortField,
+      sortField:
+        sort && sort.field !== undefined && typeof sort.field === 'string'
+          ? sort.field
+          : tableState.sortField,
       sortDirection:
         sort && sort.direction !== undefined ? sort.direction : tableState.sortDirection,
     };

x-pack/test/functional/apps/ml/anomaly_detection/anomaly_explorer.ts

@@ -324,6 +324,17 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.anomalyExplorer.assertAnomalyExplorerChartsCount(0);
         });
 
+        it('allows to change the anomalies table pagination', async () => {
+          await ml.testExecution.logTestStep('displays the anomalies table with default config');
+          await ml.anomaliesTable.assertTableExists();
+          await ml.anomaliesTable.assertRowsNumberPerPage(25);
+          await ml.anomaliesTable.assertTableRowsCount(25);
+
+          await ml.testExecution.logTestStep('updates table pagination');
+          await ml.anomaliesTable.setRowsNumberPerPage(10);
+          await ml.anomaliesTable.assertTableRowsCount(10);
+        });
+
         it('adds swim lane embeddable to a dashboard', async () => {
           // should be the last step because it navigates away from the Anomaly Explorer page
           await ml.testExecution.logTestStep(

x-pack/test/functional/services/ml/anomalies_table.ts

@@ -22,6 +22,10 @@ export function MachineLearningAnomaliesTableProvider({ getService }: FtrProvide
       return await testSubjects.findAll('mlAnomaliesTable > ~mlAnomaliesListRow');
     },
 
+    /**
+     * Asserts the number of rows rendered in a table
+     * @param expectedCount
+     */
     async assertTableRowsCount(expectedCount: number) {
       const actualCount = (await this.getTableRows()).length;
       expect(actualCount).to.eql(
@@ -118,5 +122,32 @@ export function MachineLearningAnomaliesTableProvider({ getService }: FtrProvide
         }' (got '${isEnabled ? 'enabled' : 'disabled'}')`
       );
     },
+
+    /**
+     * Asserts selected number of rows per page on the pagination control.
+     * @param rowsNumber
+     */
+    async assertRowsNumberPerPage(rowsNumber: 10 | 25 | 100) {
+      const textContent = await testSubjects.getVisibleText(
+        'mlAnomaliesTable > tablePaginationPopoverButton'
+      );
+      expect(textContent).to.be(`Rows per page: ${rowsNumber}`);
+    },
+
+    async ensurePagePopupOpen() {
+      await retry.tryForTime(5000, async () => {
+        const isOpen = await testSubjects.exists('tablePagination-10-rows');
+        if (!isOpen) {
+          await testSubjects.click('mlAnomaliesTable > tablePaginationPopoverButton');
+          await testSubjects.existOrFail('tablePagination-10-rows');
+        }
+      });
+    },
+
+    async setRowsNumberPerPage(rowsNumber: 10 | 25 | 100) {
+      await this.ensurePagePopupOpen();
+      await testSubjects.click(`tablePagination-${rowsNumber}-rows`);
+      await this.assertRowsNumberPerPage(rowsNumber);
+    },
   };
 }