[7.9] [ML] Fix annotations pagination & change labels from letters to numbers (#72204)

x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js

@@ -13,7 +13,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import rison from 'rison-node';
 import React, { Component, Fragment } from 'react';
-
+import memoizeOne from 'memoize-one';
 import {
   EuiBadge,
   EuiButtonIcon,
@@ -130,7 +130,7 @@ export class AnnotationsTable extends Component {
     }
   }
 
-  getAnnotationsWithExtraInfo(annotations) {
+  getAnnotationsWithExtraInfo = memoizeOne((annotations) => {
     // if there is a specific view/chart entities that the annotations can be scoped to
     // add a new column called 'current_series'
     if (Array.isArray(this.props.chartDetails?.entityData?.entities)) {
@@ -147,7 +147,7 @@ export class AnnotationsTable extends Component {
       // if not make it return the original annotations
       return annotations;
     }
-  }
+  });
 
   getJob(jobId) {
     // check if the job was supplied via props and matches the supplied jobId
@@ -438,7 +438,7 @@ export class AnnotationsTable extends Component {
         name: i18n.translate('xpack.ml.annotationsTable.labelColumnName', {
           defaultMessage: 'Label',
         }),
-        sortable: true,
+        sortable: (key) => +key,
         width: '60px',
         render: (key) => {
           return <EuiBadge color="default">{key}</EuiBadge>;
@@ -644,15 +644,18 @@ export class AnnotationsTable extends Component {
         name: CURRENT_SERIES,
         dataType: 'boolean',
         width: '0px',
+        render: () => '',
       }
     );
+
+    const items = this.getAnnotationsWithExtraInfo(annotations);
     return (
       <Fragment>
         <EuiInMemoryTable
           error={searchError}
           className="eui-textOverflowWrap"
           compressed={true}
-          items={this.getAnnotationsWithExtraInfo(annotations)}
+          items={items}
           columns={columns}
           pagination={{
             pageSizeOptions: [5, 10, 25],

x-pack/plugins/ml/public/application/explorer/explorer_utils.js

@@ -423,7 +423,7 @@ export function loadAnnotationsTableData(selectedCells, selectedJobs, interval,
               return a.timestamp - b.timestamp;
             })
             .map((d, i) => {
-              d.key = String.fromCharCode(65 + i);
+              d.key = (i + 1).toString();
               return d;
             }),
           aggregations: resp.aggregations,

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts

@@ -156,8 +156,8 @@ export function getFocusData(
           .sort((a, b) => {
             return a.timestamp - b.timestamp;
           })
-          .map((d, i) => {
-            d.key = String.fromCharCode(65 + i);
+          .map((d, i: number) => {
+            d.key = (i + 1).toString();
             return d;
           });